FlutterでParse Cloud Codeを活用する方法 [開発者向けガイド]

flutterアプリでのcloud functionsの使用 はじめに 複雑なアプリの場合、時にはモバイルデバイス上で実行されていない少しのロジックが必要です。cloud codeはこれを可能にします。 cloud codeは、何千ものアプリを支える同じparse javascript sdkに基づいているため、使いやすいです。唯一の違いは、このコードがユーザーのモバイルデバイス上ではなく、あなたのparseサーバー上で実行されることです。 cloud codeを使用して、処理をparseサーバーにオフロードすることで、アプリのパフォーマンスを向上させることができます。オブジェクトが保存または削除されるたびに実行されるフックを作成できます。これは、データを検証またはサニタイズしたい場合に便利です。また、cloud codeを使用して関連オブジェクトを変更したり、プッシュ通知を送信するなどの他のプロセスを開始したりすることもできます。 cloud codeを更新すると、それはすぐにすべてのモバイル環境で利用可能になります。アプリケーションの新しいリリースを待つ必要はありません。これにより、アプリの動作を即座に変更し、新しい機能をより早く追加できます。 このセクションでは、cloud codeの作成とデプロイ方法、次にback4appを通じてflutterプロジェクトでクラウド関数を呼び出す方法を説明します。 このガイドでは、flutterを通じてcloud functionの使用を示すことに焦点を当てています。より詳細な情報は、 parse公式cloud codeドキュメント で見つけることができます。 前提条件 このチュートリアルを完了するには、次のものが必要です： flutter バージョン 2 2 x 以降 https //flutter dev/docs/get started/install android studio https //developer android com/studio または vs code をインストール （ プラグイン dart と flutter） back4app 上に 作成されたアプリ ： 注意： 新しい parse アプリチュートリアル に従って、back4app で parse アプリを作成する方法を学んでください。 back4app に接続された flutter アプリ。 注意： flutter プロジェクトに parse sdk をインストール して、back4app に接続された flutter プロジェクトを作成します。 android または ios を実行しているデバイス（または仮想デバイス）。 目標 flutterアプリからback4appでparse cloud codeを実行します。 1 cloud codeファイルを作成する アプリに移動します back4appウェブサイト https //www back4app com/ をクリックします サーバー設定 サーバー設定 「 cloud code cloud code 」を見つけて、 関数とウェブホスティング 関数とウェブホスティング をクリックします。こんな感じです 3\ 新しいファイルをアップロードまたは作成します（現在の main js main js ファイルをブラウザ上で直接編集することもできます）。次に、ここに示すように デプロイ デプロイ をクリックします あなたの main js main js ファイルはこのように見えるはずです 1 parse cloud define("hello", async (request) => { 2 console log("hello from cloud code!"); 3 return "hello from cloud code!"; 4 }); 5 6 parse cloud define("sumnumbers", async (request) => { 7 return (request params number1 + request params number2); 8 }); 9 10 parse cloud define("createtodo", async (request) => { 11 const title = request params title; 12 const done = request params done; 13 14 const todo = parse object extend('todo'); 15 const todo = new todo(); 16 todo set('title', title); 17 todo set('done', done); 18 19 try { 20 await todo save(); 21 return todo; 22 } catch (error) { 23 console log('todo create error ' + error code + ' ' + error message); 24 } 25 }); 26 27 parse cloud define("getlisttodo", async (request) => { 28 let query = new parse query("todo"); 29 query descending("done"); 30 return await query find(); 31 }); flutterアプリからcloud関数にパラメータを渡し、次に request params request params オブジェクト内でアクセスします。 2 parsecloudfunctionクラスの理解 the parsecloudfunction parsecloudfunction クラスは、parse cloud functions と対話するためのメソッドを提供します。 cloud function は parsecloudfunction execute({parameters params}) parsecloudfunction execute({parameters params}) で呼び出すことができ、マップオブジェクトを返します。または、 parsecloudfunction executeobjectfunction<>({parameters params}) parsecloudfunction executeobjectfunction<>({parameters params}) で parseobject を返します。 パラメータはオプションで、マップオブジェクトが期待されます。 3 parse cloud function を呼び出す cloud functions をデプロイしたので、flutter を使用して関数を呼び出すことができます。 例 1 cloud function を呼び出して戻り値を取得する 1 //executes a cloud function with no parameters that returns a map object 2 final parsecloudfunction function = parsecloudfunction('hello'); 3 final parseresponse parseresponse = await function execute(); 4 if (parseresponse success && parseresponse result != null) { 5 print(parseresponse result); 6 } コンソールに表示される結果は次のとおりです 例 2 パラメータを持つクラウド関数を呼び出し、戻り値を取得する 1 //executes a cloud function with parameters that returns a map object 2 final parsecloudfunction function = parsecloudfunction('sumnumbers'); 3 final map\<string, dynamic> params = \<string, dynamic>{ 4 'number1' 10, 5 'number2' 20 6 }; 7 final parseresponse parseresponse = 8 await function execute(parameters params); 9 if (parseresponse success) { 10 print(parseresponse result); 11 } コンソールに表示される結果は次のとおりです 例 2 1 パラメータを持つクラウド関数を呼び出し、戻り値を取得する 1 //executes a cloud function with parameters that returns a map object 2 final parsecloudfunction function = parsecloudfunction('sumnumbers'); 3 final map\<string, dynamic> params = \<string, dynamic>{ 4 'number1' 10, 5 'number2' 20 6 }; 7 final parseresponse parseresponse = 8 await function execute(parameters params); 9 if (parseresponse success) { 10 print(parseresponse result); 11 } 例 3 パラメータを持つクラウド関数を呼び出し、parseobjectを返す 1 //executes a cloud function that returns a parseobject type 2 final parsecloudfunction function = parsecloudfunction('createtodo'); 3 final map\<string, dynamic> params = \<string, dynamic>{ 4 'title' 'task 1', 5 'done' false 6 }; 7 final parseresponse parseresponse = 8 await function executeobjectfunction\<parseobject>(parameters params); 9 if (parseresponse success && parseresponse result != null) { 10 if (parseresponse result\['result'] is parseobject) { 11 //transforms the return into a parseobject 12 final parseobject parseobject = parseresponse result\['result']; 13 print(parseobject objectid); 14 } 15 } コンソールに表示される結果は次のとおりです 例 4 parseobjectに変換可能なマップのリストを返すクラウド関数を呼び出す 1 //executes a cloud function with parameters that returns a map object 2 final parsecloudfunction function = parsecloudfunction('getlisttodo'); 3 final parseresponse parseresponse = await function execute(); 4 if (parseresponse success) { 5 if (parseresponse result != null) { 6 for (final todo in parseresponse result) { 7 //use fromjson method to convert map in parseobject 8 print(parseobject('todo') fromjson(todo)); 9 } 10 } 11 } コンソールに表示される結果は次のとおりです 1 flutter {"classname" "todo","objectid" "cr3g4rcct1","createdat" "2021 06 23t03 20 34 933z","updatedat" "2021 06 23t03 20 34 933z","title" "task 1","done"\ false} 2 flutter {"classname" "todo","objectid" "6barcicpke","createdat" "2021 06 23t03 20 54 294z","updatedat" "2021 06 23t03 20 54 294z","title" "task 1","done"\ false} 3 flutter {"classname" "todo","objectid" "tyza74l89q","createdat" "2021 06 23t03 39 42 049z","updatedat" "2021 06 23t03 39 42 049z","title" "task 1","done"\ false} 4 flutter {"classname" "todo","objectid" "arjm8q7h8d","createdat" "2021 06 24t03 33 27 925z","updatedat" "2021 06 24t03 33 27 925z","title" "task 1","done"\ false} 5 flutterからクラウド関数を呼び出す flutterアプリでの例の呼び出しクラウド関数を、シンプルなインターフェースで使用してみましょう。 flutterプロジェクトを開き、 main dart main dart ファイルに移動し、すべてのコードを整理して、次のように置き換えます 1 import 'package\ flutter/cupertino dart'; 2 import 'package\ flutter/material dart'; 3 import 'package\ parse server sdk flutter/parse server sdk dart'; 4 5 void main() async { 6 widgetsflutterbinding ensureinitialized(); 7 8 final keyapplicationid = 'your app id here'; 9 final keyclientkey = 'your client key here'; 10 11 final keyparseserverurl = 'https //parseapi back4app com'; 12 13 await parse() initialize(keyapplicationid, keyparseserverurl, 14 clientkey keyclientkey, debug true); 15 16 runapp(materialapp( 17 title 'flutter geopoint', 18 debugshowcheckedmodebanner false, 19 home homepage(), 20 )); 21 } 22 23 class homepage extends statefulwidget { 24 @override 25 homepagestate createstate() => homepagestate(); 26 } 27 28 class homepagestate extends state\<homepage> { 29 30 void docallcloudcodehello() async { 31 //executes a cloud function with no parameters that returns a map object 32 final parsecloudfunction function = parsecloudfunction('hello'); 33 final parseresponse parseresponse = await function execute(); 34 if (parseresponse success && parseresponse result != null) { 35 print(parseresponse result); 36 } 37 } 38 39 void docallcloudcodesumnumbers() async { 40 //executes a cloud function with parameters that returns a map object 41 final parsecloudfunction function = parsecloudfunction('sumnumbers'); 42 final map\<string, dynamic> params = \<string, dynamic>{ 43 'number1' 10, 44 'number2' 20 45 }; 46 final parseresponse parseresponse = 47 await function execute(parameters params); 48 if (parseresponse success) { 49 print(parseresponse result); 50 } 51 } 52 53 void docallcloudcodecreatetodo() async { 54 //executes a cloud function that returns a parseobject type 55 final parsecloudfunction function = parsecloudfunction('createtodo'); 56 final map\<string, dynamic> params = \<string, dynamic>{ 57 'title' 'task 1', 58 'done' false 59 }; 60 final parseresponse parseresponse = 61 await function executeobjectfunction\<parseobject>(parameters params); 62 if (parseresponse success && parseresponse result != null) { 63 if (parseresponse result\['result'] is parseobject) { 64 //transforms the return into a parseobject 65 final parseobject parseobject = parseresponse result\['result']; 66 print(parseobject tostring()); 67 } 68 } 69 } 70 71 void docallcloudcodegetlisttodo() async { 72 //executes a cloud function with parameters that returns a map object 73 final parsecloudfunction function = parsecloudfunction('getlisttodo'); 74 final parseresponse parseresponse = await function execute(); 75 if (parseresponse success) { 76 if (parseresponse result != null) { 77 for (final todo in parseresponse result) { 78 //use fromjson method to convert map in parseobject 79 print(parseobject('todo') fromjson(todo)); 80 } 81 } 82 } 83 } 84 85 @override 86 widget build(buildcontext context) { 87 return scaffold( 88 body padding( 89 padding const edgeinsets all(16 0), 90 child column( 91 crossaxisalignment crossaxisalignment stretch, 92 children \[ 93 container( 94 height 200, 95 child image network( 96 'https //blog back4app com/wp content/uploads/2017/11/logo b4a 1 768x175 1 png'), 97 ), 98 center( 99 child const text('flutter on back4app call clode code', 100 style textstyle(fontsize 18, fontweight fontweight bold)), 101 ), 102 sizedbox( 103 height 8, 104 ), 105 container( 106 height 50, 107 child elevatedbutton( 108 onpressed docallcloudcodehello, 109 child text('cloud code hello'), 110 style elevatedbutton stylefrom(primary colors blue)), 111 ), 112 sizedbox( 113 height 8, 114 ), 115 container( 116 height 50, 117 child elevatedbutton( 118 onpressed docallcloudcodesumnumbers, 119 child text('cloud code sumnumber'), 120 style elevatedbutton stylefrom(primary colors blue)), 121 ), 122 sizedbox( 123 height 8, 124 ), 125 container( 126 height 50, 127 child elevatedbutton( 128 onpressed docallcloudcodecreatetodo, 129 child text('cloud code createtodo'), 130 style elevatedbutton stylefrom(primary colors blue)), 131 ), 132 sizedbox( 133 height 8, 134 ), 135 container( 136 height 50, 137 child elevatedbutton( 138 onpressed docallcloudcodegetlisttodo, 139 child text('cloud code getlisttodo'), 140 style elevatedbutton stylefrom(primary colors blue)), 141 ), 142 ], 143 ), 144 )); 145 } 146 } アプリダッシュボードに移動して、アプリケーションidとクライアントキーの資格情報を見つけてください back4appウェブサイト https //www back4app com/ back4appのプロジェクトのapplicationidとclientkeyの値で main dart main dart のコードを更新してください。 keyapplicationid = アプリid アプリid keyclientkey = クライアントキー クライアントキー プロジェクトを実行すると、アプリが画像のように読み込まれます。 結論 この段階で、back4appを通じてparse server core機能を使用して、flutterアプリで自分のcloud codeをコーディングして呼び出すことができるようになりました！