Télécharger et intégrer un projet Flutter avec GraphQL

téléchargez un projet flutter graphql avec le code source et commencez à utiliser back4app introduction dans ce tutoriel, nous allons construire une application qui va analyser des données du backend back4app via graphql comme vous le savez peut être, graphql est un langage de requête et de manipulation de données open source pour les api, et un environnement d'exécution pour satisfaire les requêtes avec des données existantes back4app est un backend à faible code en tant que service (basé sur la plateforme open source parse) qui aide les développeurs à créer des applications mobiles et web extensibles et évolutives à un rythme rapide objectifs l'objectif principal est de construire une application simple qui va afficher une liste de langages de programmation et leur format de type de sauvegarde à la fin de cet article, nous espérons que vous serez en mesure de faire un appel api sur back4app en utilisant graphql ; obtenir les données de l'api graphql ; récupérer des données dans votre application flutter prérequis pour compléter ce tutoriel, vous aurez besoin de un ide pour écrire du code flutter comme android studio ou flutter cependant, nous utiliserons android studio pour ce tutoriel un compte back4app qui peut être créé ici back4app graphql flutter https //pub dev/packages/graphql flutter 1 cloner le projet de github vers android studio allez sur le dépôt github https //github com/templates back4app/flutter graphql , et téléchargez le fichier zip, extrayez le et ouvrez le dans votre ide flutter pour compléter cette étape, faites glisser le dossier à l'intérieur du fichier zip sur votre bureau, ouvrez android studio puis cliquez sur ouvrir un projet android studio existant le répertoire du projet serait généralement ‘ c \users\username\desktop\back4app graphql starting code ’ mais cela peut être différent pour différents utilisateurs ouvrez le projet et allez au lib\main dart lib\main dart fichier vous verrez beaucoup d'erreurs là bas, ne vous inquiétez pas, appuyez simplement sur tous les ‘ obtenir les dépendances ’ et toutes les erreurs disparaîtront si ce n'est pas le cas, appuyez simplement sur ‘ mettre à jour les dépendances ’ le code dans votre main dart main dart devrait ressembler à ceci 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 } si vous ouvrez l'application maintenant, vous ne verrez qu'un écran vide dans votre émulateur/appareil avec seulement une appbar intitulée ‘analyse des données avec graphql’ nous allons travailler sur le main dart main dart fichier et nos valeurs importantes sont stockées dans consonents dart consonents dart et nous pouvons l'utiliser directement à partir de là nous aurons besoin de la graphql flutter graphql flutter dépendance pour utiliser graphql dans notre application le graphql flutter graphql flutter est le client graphql le plus populaire pour flutter il nous aide à utiliser les requêtes graphql directement dans notre code il nous fournit graphqlclient graphqlclient , graphqlprovider graphqlprovider et de nombreux autres widgets utiles qui nous aident à analyser les données de notre base de données directement avec l'aide de graphql sans même utiliser streambuilder streambuilder le package nous offre de nombreuses fonctionnalités, y compris abonnements cache en mémoire synchronisation du cache hors ligne résultats optimistes téléchargements de fichiers graphql vous pouvez l'importer en écrivant le code suivant dans le pubspec yaml pubspec yaml fichier voir plus sur graphql flutter graphql flutter à documentation graphql flutter toutes les dépendances sont déjà pré installées et vous pouvez maintenant passer à l'étape suivante 2 création du backend dans back4app après vous être inscrit sur le site back4app https //www back4app com/ , vous pouvez passer à l'étape suivante et créer une nouvelle application cliquez sur ‘construire une nouvelle application’ donnez lui le même nom que le nom de votre projet qui ici est ‘back4app graphql’ maintenant, faites défiler vers le bas jusqu'à paramètres du serveur à gauche et sélectionnez paramètres gérer la carte du serveur parse, puis sélectionnez l'option ‘3 10 0 serveur parse 3 10 0’ dans la liste maintenant, appuyez sur le bouton de sauvegarde ci dessous et attendez qu'il soit enregistré maintenant, revenez à noyau (à gauche), sélectionnez l' api console , et sélectionnez console graphql à partir de cela ceci est la fenêtre où vous pouvez écrire et tester votre code de requêtes/mutations graphql passons à l'étape suivante 3 création et récupération de données via graphql maintenant, testons l'api graphql sur back4app en utilisant la console api graphql tout d'abord, collez la requête suivante dans la boîte de code à gauche 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 le code ci dessus créera une classe nommée “langue” remplissons cette nouvelle classe avec quelques lignes 1 mutation createobject{ 2 createlanguage(input {fields {name "python", saveformat " py"}}){ 3 language{ 4 name, 5 saveformat 6 } 7 } 8 } si votre opération est réussie, vous verrez ce message dans la boîte de code à droite sur graphql playground 1 { 2 "data" { 3 "createlanguage" { 4 "language" { 5 "name" "python", 6 "saveformat" " py" 7 } 8 } 9 } 10 } les mutations sont utilisées pour créer ou apporter des modifications à une classe en exécutant la mutation ci dessus, nous allons créer une nouvelle classe nommée language avec les champs de données name “python” saveformat “ py” répétez le processus et créez deux autres objets dans la même classe pour name “c” et saveformat “ c” name “java” et saveformat “ java” la mutation pour cela sera telle 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 } maintenant, voyons toutes les données dans notre classe languages pour lire les données, nous utilisons query alors allez y et tapez la commande ci dessous 1 query findlanguages{ 2 languages{ 3 count, 4 edges{ 5 node{ 6 name, 7 saveformat 8 } 9 } 10 } 11 } dans query findlanguage query findlanguage ‘findlanguage’ est juste un nom pour votre commande de requête et vous pourriez même l'appeler n'importe quoi d'autre nous utilisons le find(classname "") find(classname "") commande pour trouver tous les éléments de la classe spécifique count count , retourne le nombre d'éléments dans la classe et tous les éléments sont affichés à l'intérieur de l' result result objet la requête ci dessus va retourner ceci 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 } vous pouvez voir toutes les autres requêtes dans le lien suivant requêtes graphql back4app https //blog back4app com/graphql on parse/ maintenant, procédons à l'étape suivante 4 configuration de graphql dans notre application commençons à coder notre application avant cela, vous devez faire quelques choses dans votre lib\consonents dart lib\consonents dart fichier copiez le lien graphql qui est à côté du bouton d'historique en haut de la fenêtre graphql, et collez le en tant que chaîne de type kurl maintenant, descendez en bas de la page et copiez les codes des en têtes http, copiez uniquement les codes à droite des deux points ( ) et collez les avec leurs noms respectifs dans le lib\consonents dart lib\consonents dart fichier le fichier doit avoir le code suivant 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 maintenant, passez au main dart main dart fichier et allez au widget stateless myapp et ajoutez le code suivant juste au dessus du 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 provient de flutter graphql dart et prend le widget httplink() avec deux paramètres le premier est l'url de l'api graphql sur back4app le second sont les en têtes nécessaires pour s'authentifier sur l'api back4app après cette section, vous devez inclure le code du client graphql (expliquer ce que c'est), copier le code ci dessous et le coller sous la section httplink 1 valuenotifier\<graphqlclient> client = valuenotifier( 2 graphqlclient( 3 cache optimisticcache(dataidfromobject typenamedataidfromobject), 4 link httplink, 5 ), 6 ); maintenant, nous avons fourni la méthode de lien et de cache à notre graphqlclient nous avons fait cela à travers notre valuenotifier et l'avons nommé client enveloppons le widget myhomepage() qui est un enfant de materialapp avec graphqlprovider et passons myhomepage() comme son client ajoutez un autre paramètre à l'intérieur de graphqlprovider nommé client et passez client (nom de notre valuenotifier) dedans voici à quoi devrait ressembler votre classe myapp maintenant 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 } appelons l'api et obtenons les données 5 faire un appel api maintenant, nous allons travailler sur le myhomepagestate nous allons commencer par initialiser un type de données string nommé ‘query’ et assigner/passer l'instruction de requête pour trouver toutes les données de notre classe language puisque la requête est multi lignes, nous allons passer la requête entre trois guillemets voici à quoi cela ressemble 1 string query=''' 2 query findlanguages{ 3 languages{ 4 count, 5 edges{ 6 node{ 7 name, 8 saveformat 9 } 10 } 11 } 12 } 13 '''; maintenant, allez au widget query(), à l'intérieur du paramètre body du scaffold qui a deux propriétés options constructeur et ensuite passez null pour les deux voici à quoi ressemblerait votre méthode de construction 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 } le query() query() widget nous aide à écrire des requêtes pour graphql et nous aidera à lire et obtenir des données nous passerons l'instruction de requête que nous avons prise comme une chaîne dans les options et construirons le widget avec le paramètre builder alors passez le widget queryoptions() dans les options comme suit 1 options queryoptions( 2 documentnode gql(query), 3 ), 4 la requête est passée par le paramètre documentnode dans queryoptions maintenant, construisons avec l'aide du paramètre builder la méthode builder accepte une fonction avec trois paramètres, à savoir, queryresult résultat; refetch refetch; fetchmore fetchmore pour l'instant, nous devons seulement nous soucier du queryresult qui nous donne le résultat de notre requête et nous pouvons accéder aux données via result data result data alors codons ce qui suit ci dessous 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 }, dans le code ci dessus, nous accédons aux données s'il n'y a pas de données, nous retournons un widget texte indiquant ‘chargement…’ sinon nous retournerons un widget text() indiquant ‘succès’ voici à quoi devrait ressembler votre myhomepage myhomepage classe dans main dart main dart 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 } maintenant, démarrez l'application et attendez quelques secondes après son redémarrage si vous voyez ‘success’ à l'écran alors félicitations ! vous avez établi votre connexion et appelé l'api 6 obtenir et afficher des données de l'api au lieu de retourner le widget text, nous allons retourner le listview\ builder() widget avec les données originales écrivez le code suivant à la place de return text('success') text('success') 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 ); maintenant, si vous regardez à nouveau votre écran de résultats graphql dans la console api de back4app où nous avons tapé notre méthode find, les résultats étaient les suivants 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 } donc, d'après le code ci dessus, l'emplacement de “python” était “données” > “ langues” > “compte” > “bords” > “nœud” > “nom” notez également que le nom est à l'intérieur des crochets ‘\[]’ des bords, ce qui symbolise qu'il s'agit du premier élément de la liste/array des bords donc, nous devons entrer dans cet emplacement pour obtenir “python” et c'est la même chose pour tout le reste lorsque nous écrivons result data result data , nous entrons dans l' “données” emplacement donc, pour donner les autres emplacements, nous ajoutons \["nom emplacement"] \["nom emplacement"] à cela donc, l'emplacement de “python” sera result data\["langues"]\["bords"]\[0]\["nœud"]\["nom"] result data\["langues"]\["bords"]\[0]\["nœud"]\["nom"] lors de l'utilisation de listview listview , cela prend deux paramètres, itemcount itemcount , cela indique le nombre d'éléments dans l'appel api, itembuilder itembuilder , cela prend une fonction avec les paramètres (buildcontext context, int index) (buildcontext context, int index) et renvoie une liste de widgets dans laquelle nous allons afficher les données ici, nous allons utiliser une liste de listtile pour montrer les données 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 ); lorsque nous remplaçons text('success') text('success') par le widget listview\ builder() , nous passons d'abord l'itemcount où nous passons le nombre d'éléments dans la liste des résultats et nous n'avons donc plus à nous en soucier dans itembuilder, nous retournons une liste de listtiles qui aura le "name" "name" de la classe "languages" "languages" , et dans "saveformat" "saveformat" à la fin remarquez que nous avons utilisé l'index au lieu de n'importe quel nombre après le résultat, c'est ce dont itemcount s'est occupé voici à quoi devrait ressembler votre main dart main dart 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 } et notre écran d'application final conclusion maintenant, vous avez une application flutter connectée à une api graphql qui peut stocker et récupérer des données sur back4app nous n'avons pas eu besoin d'encoder ou de décoder les données json séparément, ce qui rend notre travail plus facile et plus rapide en utilisant quelques lignes de code passez une excellente journée !