Flutter
Parse SDK (REST)
Implementieren von Cloud-Funktionen in Flutter-Apps mit Parse
18 min
verwendung von cloud funktionen in einer flutter app einführung für komplexe apps benötigt man manchmal ein wenig logik, die nicht auf einem mobilen gerät läuft cloud code macht dies möglich cloud code ist einfach zu verwenden, da es auf dem gleichen parse javascript sdk basiert, das tausende von apps antreibt der einzige unterschied besteht darin, dass dieser code auf ihrem parse server und nicht auf dem mobilen gerät des benutzers ausgeführt wird sie können cloud code verwenden, um die verarbeitung auf die parse server auszulagern, wodurch die wahrgenommene leistung ihrer app erhöht wird sie können hooks erstellen, die ausgeführt werden, wenn ein objekt gespeichert oder gelöscht wird dies ist nützlich, wenn sie ihre daten validieren oder bereinigen möchten sie können cloud code auch verwenden, um verwandte objekte zu ändern oder andere prozesse wie das senden einer push benachrichtigung zu starten wenn sie ihren cloud code aktualisieren, wird er sofort in allen mobilen umgebungen verfügbar sie müssen nicht auf eine neue version ihrer anwendung warten dies ermöglicht es ihnen, das verhalten der app im laufenden betrieb zu ändern und neue funktionen schneller hinzuzufügen dieser abschnitt erklärt, wie man cloud code erstellt und bereitstellt, gefolgt davon, wie man eine cloud funktion in flutter projekten über back4app aufruft in diesem leitfaden liegt der fokus darauf, die verwendung von cloud funktionen über flutter zu demonstrieren sie finden detailliertere informationen in der offiziellen cloud code dokumentation von parse voraussetzungen um dieses tutorial abzuschließen, benötigen sie flutter version 2 2 x oder höher https //flutter dev/docs/get started/install android studio https //developer android com/studio oder vs code installiert (mit plugins dart und flutter) eine app erstellt auf back4app hinweis befolgen sie das tutorial für neue parse apps um zu lernen, wie man eine parse app auf back4app erstellt eine flutter app, die mit back4app verbunden ist hinweis befolgen sie das installieren sie das parse sdk im flutter projekt um ein flutter projekt zu erstellen, das mit back4app verbunden ist ein gerät (oder virtuelles gerät), das android oder ios ausführt ziel führen sie parse cloud code auf back4app von einer flutter app aus 1 erstellen sie eine cloud code datei gehen sie zu ihrer app auf back4app website https //www back4app com/ und klicken sie auf servereinstellungen servereinstellungen suchen sie nach dem cloud code cloud code und klicken sie auf funktionen & webhosting funktionen & webhosting es sieht so aus 3\ laden sie eine neue datei hoch oder erstellen sie eine neue datei (sie können auch die aktuelle main js main js datei direkt im browser bearbeiten) klicken sie dann auf bereitstellen bereitstellen wie hier gezeigt ihre main js main js datei sollte so aussehen 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 }); sie übergeben parameter an ihre cloud funktion von ihrer flutter app und greifen dann innerhalb des request params request params objekts zu 2 verständnis der parsecloudfunction klasse die parsecloudfunction parsecloudfunction klasse definiert methoden zur interaktion mit parse cloud functions eine cloud funktion kann mit parsecloudfunction execute({parameters params}) parsecloudfunction execute({parameters params}) aufgerufen werden, die ein map objekt zurückgibt oder parsecloudfunction executeobjectfunction<>({parameters params}) parsecloudfunction executeobjectfunction<>({parameters params}) zurückgibt, das ein parseobject ist parameter sind optional und ein map objekt wird erwartet 3 rufe die parse cloud funktion auf jetzt, da sie die cloud funktionen bereitgestellt haben, können wir die funktionen mit flutter aufrufen beispiel 1 rufe eine cloud funktion auf und erhalte die rückgabe 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 } das ergebnis, das in der konsole angezeigt wird, ist beispiel 2 rufen sie eine cloud funktion mit parametern auf und erhalten sie die rückgabe 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 } das ergebnis, das in der konsole angezeigt wird, ist beispiel 2 1 rufen sie eine cloud funktion mit parametern auf und erhalten sie die rückgabe 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 } beispiel 3 rufe eine cloud funktion mit parametern auf und erhalte parseobject als rückgabe 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 } das ergebnis, das in der konsole angezeigt wird, ist beispiel 4 rufe eine cloud funktion auf, die eine liste von maps zurückgibt, die in ein parseobject umgewandelt werden können 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 } das ergebnis, das in der konsole angezeigt wird, ist 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 cloud funktion von flutter aufrufen lass uns jetzt unser beispiel für den aufruf der cloud funktion in der flutter app mit einer einfachen benutzeroberfläche verwenden öffne dein flutter projekt, gehe zur main dart main dart datei, räume den gesamten code auf und ersetze ihn durch 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 } finden sie ihre anwendungs id und client schlüssel anmeldeinformationen, indem sie zu ihrem app dashboard navigieren unter back4app website https //www back4app com/ aktualisieren sie ihren code in main dart main dart mit den werten der anwendungs id und des client schlüssels ihres projekts in back4app keyapplicationid = app id app id keyclientkey = client key client key führen sie das projekt aus, und die app wird wie im bild angezeigt fazit in diesem stadium sind sie in der lage, ihren eigenen cloud code in ihrer flutter app zu codieren und aufzurufen, indem sie die funktionen des parse server core über back4app nutzen!