Flutter GraphQL-Projekt: Schritt-für-Schritt-Leitfaden

laden sie ein flutter graphql projekt mit quellcode herunter und beginnen sie mit der verwendung von back4app einführung in diesem tutorial werden wir eine anwendung erstellen, die daten vom back4app backend über graphql abruft wie sie vielleicht wissen, ist graphql eine open source datenabfrage und manipulationssprache für apis und eine laufzeitumgebung zur erfüllung von abfragen mit vorhandenen daten back4app ist ein low code backend as a service (basierend auf der open source parse plattform), das entwicklern hilft, erweiterbare und skalierbare mobile und webanwendungen in rasantem tempo zu erstellen ziele das hauptziel ist es, eine einfache app zu erstellen, die eine liste von programmiersprachen und deren speicherformat anzeigt am ende dieses artikels erwarten wir, dass sie in der lage sind einen api aufruf auf back4app mit graphql durchführen; die daten von der graphql api abrufen; daten in ihrer flutter app abrufen voraussetzungen um dieses tutorial abzuschließen, benötigen sie eine ide zum schreiben von flutter code wie android studio oder flutter wir werden jedoch android studio für dieses tutorial verwenden ein back4app konto, das hier erstellt werden kann back4app graphql flutter https //pub dev/packages/graphql flutter 1 projekt von github nach android studio klonen gehen sie zum github repo https //github com/templates back4app/flutter graphql , und laden sie die zip datei herunter, entpacken sie sie und öffnen sie sie in ihrer flutter ide um diesen schritt abzuschließen, ziehen sie den ordner aus der zip datei auf ihren desktop, öffnen sie android studio und klicken sie dann auf vorhandenes android studio projekt öffnen das projektverzeichnis wäre normalerweise ‘ c \users\username\desktop\back4app graphql starting code ’ aber das kann für verschiedene benutzer unterschiedlich sein öffnen sie das projekt und gehen sie zur lib\main dart lib\main dart datei sie werden dort viele fehler sehen, machen sie sich keine sorgen, drücken sie einfach auf ‘ get dependencies ’ und alle fehler würden verschwinden wenn nicht, drücken sie einfach auf ‘ upgrade dependencies ’ der code in ihrer main dart main dart sollte so aussehen 1 import 'package\ flutter/material dart'; 2 import 'package\ graphql flutter/graphql flutter dart'; 3 import 'consonents dart'; 4 5 void main() { 6 runapp(myapp()); 7 } 8 9 class myapp extends statelesswidget { 10 @override 11 widget build(buildcontext context) { 12 return materialapp( 13 home myhomepage(), 14 ), 15 ); 16 } 17 } 18 class myhomepage extends statefulwidget { 19 @override 20 myhomepagestate createstate() => myhomepagestate(); 21 } 22 23 class myhomepagestate extends state\<myhomepage> { 24 25 @override 26 widget build(buildcontext context) { 27 return safearea( 28 child scaffold( 29 appbar appbar( 30 title text('parsing data using graphql', 31 ), 32 ), 33 body container(), 34 ),); 35 } 36 } wenn sie die app jetzt ausführen, würden sie nur einen leeren bildschirm in ihrem emulator/gerät sehen, mit nur einer appbar mit dem titel ‘daten mit graphql parsen’ wir werden an der main dart main dart datei arbeiten und unsere wichtigen werte sind in der consonents dart consonents dart gespeichert, und wir können es direkt von dort verwenden wir benötigen die graphql flutter graphql flutter abhängigkeit, um graphql in unserer app zu verwenden der graphql flutter graphql flutter ist der beliebteste graphql client für flutter er hilft uns, graphql abfragen direkt in unserem code zu verwenden er bietet uns graphqlclient graphqlclient , graphqlprovider graphqlprovider und viele andere nützliche widgets, die uns helfen, daten direkt mit hilfe von graphql aus unserer datenbank zu parsen, ohne sogar streambuilder streambuilder , zu verwenden das paket bietet uns viele funktionen, darunter abonnements in memory cache offline cache synchronisierung optimistische ergebnisse graphql datei uploads sie können es importieren, indem sie den folgenden code in die pubspec yaml pubspec yaml datei schreiben siehe mehr über graphql flutter graphql flutter auf graphql flutter dokumentation alle abhängigkeiten sind bereits vorinstalliert und sie können jetzt mit dem nächsten schritt fortfahren 2 backend in back4app erstellen nachdem sie sich auf der back4app https //www back4app com/ website angemeldet haben, können sie mit dem nächsten schritt fortfahren und eine neue app erstellen klicken sie auf ‘neue app erstellen’ geben sie ihr denselben namen wie ihren projektnamen, der hier ‘back4app graphql’ ist scrollen sie nun nach unten zu servereinstellungen auf der linken seite und wählen sie einstellungen verwalten der parse server karte, und wählen sie dann die option ‘3 10 0 parse server 3 10 0’ aus der liste drücken sie jetzt die schaltfläche speichern und warten sie, bis es gespeichert wird kommen sie jetzt zurück zu kern (auf der linken seite), wählen sie die api konsole , und wählen sie graphql konsole daraus dies ist das fenster, in dem sie ihren graphql abfrage /mutationscode schreiben und testen können lassen sie uns mit dem nächsten schritt fortfahren 3 erstellen und abrufen von daten über graphql lassen sie uns nun die graphql api auf back4app mit der graphql api konsole testen zuerst fügen sie die folgende abfrage in das linke codefeld ein 1 mutation createclass { 2 createclass(input { 3 name "language" 4 schemafields { 5 addstrings \[{name "name"}{name "saveformat"}] 6 } 7 }){ 8 class{ 9 schemafields{ 10 name 11 typename 12 } 13 } 14 } 15 } 16 der obige code erstellt eine klasse mit dem namen „sprache“ lassen sie uns diese neue klasse mit einigen zeilen füllen 1 mutation createobject{ 2 createlanguage(input {fields {name "python", saveformat " py"}}){ 3 language{ 4 name, 5 saveformat 6 } 7 } 8 } wenn ihre operation erfolgreich ist, sehen sie diese nachricht im rechten codefeld auf graphql playground 1 { 2 "data" { 3 "createlanguage" { 4 "language" { 5 "name" "python", 6 "saveformat" " py" 7 } 8 } 9 } 10 } mutationen werden verwendet, um eine klasse zu erstellen oder änderungen an einer klasse vorzunehmen durch das ausführen der obigen mutation erstellen wir eine neue klasse namens language mit den datenfeldern name “python” saveformat “ py” wiederholen sie den prozess und erstellen sie zwei weitere objekte in derselben klasse für name “c” und saveformat “ c” name “java” und saveformat “ java” die mutation dafür wird so aussehen 1 mutation createobject{ 2 createlanguage(input {fields {name "c", saveformat " c"}}){ 3 language{ 4 name, 5 saveformat 6 } 7 } 8 } java 1 mutation createobject{ 2 createlanguage(input {fields {name "java", saveformat " java"}}){ 3 language{ 4 name, 5 saveformat 6 } 7 } 8 } jetzt sehen wir uns alle daten in unserer klasse languages zum lesen von daten verwenden wir query also, legen sie los und geben sie den folgenden befehl ein 1 query findlanguages{ 2 languages{ 3 count, 4 edges{ 5 node{ 6 name, 7 saveformat 8 } 9 } 10 } 11 } in query findlanguage query findlanguage ist ‘findlanguage’ nur ein name für ihren abfragebefehl und sie könnten ihn sogar anders benennen wir verwenden den find(classname "") find(classname "") befehl, um alle elemente der spezifischen klasse zu finden count count , gibt die anzahl der elemente in der klasse zurück und alle elemente werden im result result objekt angezeigt die obige abfrage wird folgendes zurückgeben 1 { 2 "data" { 3 "languages" { 4 "count" 3, 5 "edges" \[ 6 { 7 "node" { 8 "name" "python", 9 "saveformat" " py" 10 } 11 }, 12 { 13 "node" { 14 "name" "c", 15 "saveformat" " c" 16 } 17 }, 18 { 19 "node" { 20 "name" "java", 21 "saveformat" " java" 22 } 23 } 24 ] 25 } 26 } 27 } sie können alle anderen abfragen im folgenden link sehen graphql abfragen back4app https //blog back4app com/graphql on parse/ jetzt lassen sie uns mit dem nächsten schritt fortfahren 4 einrichtung von graphql in unserer app lassen sie uns mit dem codieren unserer app beginnen zuvor müssen sie einige dinge in ihrer lib\consonents dart lib\consonents dart datei tun kopieren sie den graphql link, der neben der schaltfläche verlauf oben im graphql fenster steht, und fügen sie ihn als kurl string datentyp ein bewegen sie sich jetzt zum ende der seite und kopieren sie die codes aus den http headern, kopieren sie nur die codes rechts vom doppelpunkt( ) und fügen sie sie mit ihren jeweiligen namen in die lib\consonents dart lib\consonents dart datei ein die datei sollte folgenden code haben 1 string kparseapplicationid= "application id copied from headers"; 2 string kparseclientkey = "client key copied from header"; 3 string kurl= "url copied"; 4 // replace "application id copied from headers", "client key copied from header", "url copied" with real keys/ids copied 5 //from http headers tab jetzt gehe zu main dart main dart datei und gehe zum myapp stateless widget und füge den folgenden code direkt über dem return return materialapp() materialapp() 1 final httplink httplink = httplink( 2 uri kurl, 3 headers { 4 'x parse application id' kparseapplicationid, 5 'x parse client key' kparseclientkey, 6 }, 7 ); httplink stammt von flutter graphql dart und nimmt das widget httplink() mit zwei parametern der erste ist die graphql api url auf back4app der zweite sind die header, die notwendig sind, um sich bei der back4app api zu authentifizieren nach diesem abschnitt müssen sie den graphql client code einfügen (erklären, was das ist), kopieren sie den folgenden code und fügen sie ihn unter dem httplink abschnitt ein 1 valuenotifier\<graphqlclient> client = valuenotifier( 2 graphqlclient( 3 cache optimisticcache(dataidfromobject typenamedataidfromobject), 4 link httplink, 5 ), 6 ); jetzt haben wir die link und cache methode zu unserem graphqlclient bereitgestellt wir haben dies durch unseren valuenotifier getan und ihn als client benannt lassen sie uns das myhomepage() widget, das ein kind von materialapp ist, mit graphqlprovider umwickeln und myhomepage() als seinen client übergeben fügen sie einen weiteren parameter innerhalb von graphqlprovider namens client hinzu und übergeben sie client (den namen unseres valuenotifier) darin so sollte ihre myapp klasse jetzt aussehen 1 class myapp extends statelesswidget { 2 @override 3 widget build(buildcontext context) { 4 final httplink httplink = httplink( 5 uri kurl, 6 headers { 7 'x parse application id' kparseapplicationid, 8 'x parse client key' kparseclientkey, 9 //'x parse rest api key' kparserestapikey, 10 },//getheaders() 11 ); 12 valuenotifier\<graphqlclient> client = valuenotifier( 13 graphqlclient( 14 cache optimisticcache(dataidfromobject typenamedataidfromobject), 15 link httplink, 16 ), 17 ); 18 return materialapp( 19 home graphqlprovider( 20 child myhomepage(), 21 client client, 22 ), 23 ); 24 } 25 } lassen sie uns die api aufrufen und die daten abrufen 5 einen api aufruf tätigen jetzt werden wir an myhomepagestate arbeiten wir werden damit beginnen, einen string datentyp namens ‚query‘ zu initialisieren und die abfrageanweisung zum abrufen aller daten aus unserer language klasse zuzuweisen/übergeben da die abfrage mehrzeilig ist, werden wir die abfrage in dreifachen anführungszeichen übergeben so sieht es aus 1 string query=''' 2 query findlanguages{ 3 languages{ 4 count, 5 edges{ 6 node{ 7 name, 8 saveformat 9 } 10 } 11 } 12 } 13 '''; gehen sie jetzt zum query() widget, innerhalb des body parameters des scaffold, das zwei eigenschaften hat optionen builder und dann null für beide übergeben so würde ihre build methode aussehen 1 widget build(buildcontext context) { 2 return safearea( 3 child scaffold( 4 appbar appbar( 5 title text('parsing data using graphql', 6 ), 7 ), 8 body query( 9 options null, 10 builder null 11 ), 12 ),); 13 } das query() query() widget hilft uns, abfragen für graphql zu schreiben und wird uns helfen, daten zu lesen und zu erhalten wir werden die abfrageanweisung, die wir als string in den optionen genommen haben, übergeben und das widget mit dem builder parameter erstellen übergeben sie also das queryoptions() widget in den optionen wie folgt 1 options queryoptions( 2 documentnode gql(query), 3 ), 4 die abfrage wird über den documentnode parameter in queryoptions übergeben lassen sie uns nun mit hilfe des builder parameters aufbauen die builder methode akzeptiert eine funktion mit drei parametern, nämlich, queryresult ergebnis; refetch refetch; fetchmore fetchmore im moment müssen wir uns nur um das queryresult kümmern, das uns das ergebnis unserer abfrage liefert, und wir können auf die daten über result data result data also lassen sie uns den folgenden code schreiben 1 builder (queryresult result, { refetch refetch,fetchmore fetchmore,}) 2 { 3 if(result data==null){ 4 return center(child text("loading ",style textstyle(fontsize 20 0),)); 5 }else{ 6 return text('success'); 7 } 8 }, im obigen code greifen wir auf die daten zu wenn keine daten vorhanden sind, geben wir ein text widget mit der aufschrift ‘laden…’ zurück, andernfalls geben wir ein text() widget mit der aufschrift ‘erfolg’ so sollte ihre myhomepage myhomepage klasse in main dart main dart aussehen 1 class myhomepage extends statefulwidget { 2 @override 3 myhomepagestate createstate() => myhomepagestate(); 4 } 5 6 class myhomepagestate extends state\<myhomepage> { 7 string name; 8 string saveformat; 9 string objectid; 10 11 string query = ''' 12 query findlanguages{ 13 languages{ 14 count, 15 edges{ 16 node{ 17 name, 18 saveformat 19 } 20 } 21 } 22 } 23 '''; 24 25 @override 26 widget build(buildcontext context) { 27 return safearea( 28 child scaffold( 29 appbar appbar( 30 title text( 31 'parsing data using graphql', 32 ), 33 ), 34 body query( 35 options queryoptions( 36 documentnode gql(query), 37 ), 38 builder ( 39 queryresult result, { 40 refetch refetch, 41 fetchmore fetchmore, 42 }) { 43 if (result data == null) { 44 return center( 45 child text( 46 "loading ", 47 style textstyle(fontsize 20 0), 48 ), 49 ); 50 } else{ 51 return text('success'); 52 } 53 } 54 ), 55 ), 56 ); 57 } 58 } jetzt starten sie die app und warten sie ein paar sekunden, nachdem sie neu gestartet wurde wenn sie ‘erfolg’ auf dem bildschirm sehen, dann herzlichen glückwunsch! sie haben ihre verbindung hergestellt und die api aufgerufen 6 daten von der api abrufen und anzeigen anstatt das text widget zurückzugeben, werden wir das listview\ builder() widget mit den originaldaten zurückgeben schreiben sie den folgenden code anstelle von return text('erfolg') text('erfolg') 1 return listview\ builder( 2 itembuilder (buildcontext context, int index){ 3 return listtile( 4 title text(result data\["languages"]\["edges"]\[index]\["node"]\['name']), 5 trailing text(result data\["languages"]\["edges"]\[index]\["node"]\['saveformat']), 6 ); 7 }, 8 itemcount result data\["languages"]\["edges"] length, 9 ); wenn sie jetzt auf ihren graphql ergebnisbildschirm in ihrer api konsole von back4app zurückblicken, wo wir unsere find methode eingegeben haben, waren die ergebnisse wie folgt 1 { 2 "data" { 3 "languages" { 4 "count" 3, 5 "edges" \[ 6 { 7 "node" { 8 "name" "python", 9 "saveformat" " py" 10 } 11 }, 12 { 13 "node" { 14 "name" "c", 15 "saveformat" " c" 16 } 17 }, 18 { 19 "node" { 20 "name" "java", 21 "saveformat" " java" 22 } 23 } 24 ] 25 } 26 } 27 } die position von “python” im obigen code war “daten” > “ sprachen” > “anzahl” > “kanten” > “knoten” > “name” beachten sie auch, dass der name in eckigen klammern ‘\[]’ von kanten steht, was symbolisiert, dass es das erste element der kantenliste/array ist also müssen wir in diesen standort eintreten, um “python” zu erhalten, und dasselbe gilt für alles andere wenn wir result data result data , betreten wir den “daten” standort um die anderen standorte anzugeben, fügen wir \["standort name"] \["standort name"] hinzu der standort von “python” wird also result data\["languages"]\["edges"]\[0]\["node"]\["name"] result data\["languages"]\["edges"]\[0]\["node"]\["name"] bei der verwendung von listview listview , benötigt es zwei parameter, itemcount itemcount , es gibt die anzahl der elemente im api aufruf an, itembuilder itembuilder , es nimmt eine funktion mit den parametern (buildcontext context, int index) (buildcontext context, int index) und gibt eine liste von widgets zurück, in der wir die daten anzeigen werden hier werden wir eine liste von listtile verwenden, um die daten anzuzeigen 1 return listview\ builder( 2 itemcount result data\["languages"]\["edges"] length, 3 itembuilder (buildcontext context, int index){ 4 return listtile( 5 title text(result data\["languages"]\["edges"]\[index]\["node"]\['name']), 6 trailing text(result data\["languages"]\["edges"]\[index]\["node"]\['saveformat']), 7 ); 8 }, 9 10 ); wenn wir text('success') text('success') durch das oben genannte listview\ builder() widget ersetzen, übergeben wir zuerst die itemcount, wo wir die anzahl der elemente in der ergebnisliste übergeben, und so müssen wir uns darum nicht mehr kümmern im itembuilder geben wir eine liste von listtiles zurück, die den "name" "name" der "languages" "languages" klasse haben und in "saveformat" "saveformat" im trailing beachten sie, dass wir den index anstelle einer zahl nach dem ergebnis verwendet haben, um das hat sich um die itemcount gekümmert so sollte ihr main dart main dart jetzt aussehen 1 import 'package\ flutter/material dart'; 2 import 'package\ graphql flutter/graphql flutter dart'; 3 import 'consonents dart'; 4 import 'dart\ ui'; 5 6 void main() { 7 runapp(myapp()); 8 } 9 10 class myapp extends statelesswidget { 11 @override 12 widget build(buildcontext context) { 13 final httplink httplink = httplink( 14 uri 'https //parseapi back4app com/graphql', 15 headers { 16 'x parse application id' kparseapplicationid, 17 'x parse client key' kparseclientkey, 18 }, //getheaders() 19 ); 20 21 valuenotifier\<graphqlclient> client = valuenotifier( 22 graphqlclient( 23 cache optimisticcache(dataidfromobject typenamedataidfromobject), 24 link httplink, 25 ), 26 ); 27 28 return materialapp( 29 home graphqlprovider( 30 child myhomepage(), 31 client client, 32 ), 33 ); 34 } 35 } 36 37 class myhomepage extends statefulwidget { 38 @override 39 myhomepagestate createstate() => myhomepagestate(); 40 } 41 42 class myhomepagestate extends state\<myhomepage> { 43 string name; 44 string saveformat; 45 string objectid; 46 47 string query = ''' 48 query findlanguages{ 49 languages{ 50 count, 51 edges{ 52 node{ 53 name, 54 saveformat 55 } 56 } 57 } 58 } 59 '''; 60 61 @override 62 widget build(buildcontext context) { 63 return safearea( 64 child scaffold( 65 appbar appbar( 66 title text( 67 'parsing data using graphql', 68 ), 69 ), 70 body query( 71 options queryoptions( 72 documentnode gql(query), 73 ), 74 builder ( 75 queryresult result, { 76 refetch refetch, 77 fetchmore fetchmore, 78 }) { 79 if (result data == null) { 80 return center( 81 child text( 82 "loading ", 83 style textstyle(fontsize 20 0), 84 )); 85 } else { 86 return listview\ builder( 87 itembuilder (buildcontext context, int index) { 88 return listtile( 89 title text(result data\["languages"]\["edges"]\[index]\["node"] 90 \['name']), 91 trailing text(result data\["languages"]\["edges"]\[index] 92 \["node"]\['saveformat']), 93 ); 94 }, 95 itemcount result data\["languages"]\["edges"] length, 96 ); 97 } 98 }, 99 ), 100 ), 101 ); 102 } 103 } und unser letzter app bildschirm fazit jetzt haben sie eine flutter app, die mit einer graphql api verbunden ist und daten auf back4app speichern und abrufen kann wir mussten die json daten nicht separat kodieren oder dekodieren, was unsere arbeit einfacher und schneller macht, indem wir nur wenige codezeilen verwenden haben sie einen großartigen tag!