Scarica e inizia con template Flutter GraphQL completo

scarica un progetto flutter graphql con codice sorgente e inizia a utilizzare back4app introduzione in questo tutorial, costruiremo un'applicazione che analizzerà i dati dal backend di back4app tramite graphql come saprai, graphql è un linguaggio di query e manipolazione dei dati open source per api, e un runtime per soddisfare le query con dati esistenti back4app è un backend a basso codice come servizio (basato sulla piattaforma open source parse) che aiuta gli sviluppatori a costruire applicazioni mobili e web estensibili e scalabili a un ritmo rapido obiettivi l'obiettivo principale è costruire un'app semplice che mostrerà un elenco di linguaggi di programmazione e il loro formato di salvataggio alla fine di questo articolo ci aspettiamo che tu sia in grado di effettuare una chiamata api su back4app utilizzando graphql; ottenere i dati dall'api graphql; recuperare i dati nella tua app flutter requisiti per completare questo tutorial, avrai bisogno di un ide per scrivere codice flutter come android studio o flutter tuttavia, utilizzeremo android studio per questo tutorial un account back4app che può essere creato qui back4app graphql flutter https //pub dev/packages/graphql flutter 1 clonare il progetto da github in android studio vai al repo di github https //github com/templates back4app/flutter graphql , e scarica il file zip, estrailo e aprilo nel tuo ide flutter per completare questo passaggio, trascina la cartella all'interno del file zip sul desktop, apri android studio e poi clicca su apri progetto android studio esistente la directory del progetto sarebbe di solito ‘ c \users\username\desktop\back4app graphql starting code ’ ma questo potrebbe essere diverso per utenti diversi apri il progetto e vai al lib\main dart lib\main dart file vedrai così tanti errori lì, non preoccuparti, premi semplicemente tutti ‘ get dependencies ’ e tutti gli errori scompariranno se non lo fanno, premi semplicemente ‘ upgrade dependencies ’ il codice nel tuo main dart main dart dovrebbe apparire così 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 } se apri l'app ora, vedresti solo uno schermo vuoto nel tuo emulatore/dispositivo con solo una appbar intitolata ‘parsing data using graphql’ lavoreremo sul main dart main dart file e i nostri valori importanti sono memorizzati in consonents dart consonents dart e possiamo usarlo direttamente da lì avremo bisogno della dipendenza graphql flutter graphql flutter per utilizzare graphql nella nostra app il graphql flutter graphql flutter è il client graphql più popolare per flutter ci aiuta a utilizzare le query graphql direttamente nel nostro codice ci fornisce graphqlclient graphqlclient , graphqlprovider graphqlprovider e molti altri widget utili che ci aiutano a analizzare i dati dal nostro database direttamente con l'aiuto di graphql senza nemmeno utilizzare streambuilder streambuilder il pacchetto ci offre molte funzionalità tra cui sottoscrizioni cache in memoria sincronizzazione della cache offline risultati ottimistici caricamenti di file graphql puoi importarlo scrivendo il seguente codice nel file pubspec yaml pubspec yaml scopri di più su graphql flutter graphql flutter su documentazione di graphql flutter tutte le dipendenze sono già pre installate e puoi procedere al passo successivo ora 2 creazione del backend in back4app dopo esserti registrato su back4app https //www back4app com/ sito web, puoi procedere al passo successivo e creare una nuova app clicca su ‘crea nuova app’ dagli lo stesso nome del tuo progetto che qui è ‘back4app graphql’ ora scorri verso il basso su impostazioni del server a sinistra e seleziona impostazioni gestisci la scheda del server parse, quindi seleziona l'opzione ‘3 10 0 parse server 3 10 0’ dall'elenco ora premi il pulsante di salvataggio qui sotto e aspetta che venga salvato ora torna a core (a sinistra), seleziona la console api , e seleziona console graphql da essa questa è la finestra in cui puoi scrivere e testare il tuo codice per le query/mutazioni graphql procediamo al passaggio successivo 3 creare e ottenere dati tramite graphql ora, testiamo l'api graphql su back4app utilizzando la console api graphql prima, incolla la seguente query nella casella di codice a sinistra 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 il codice sopra creerà una classe chiamata “lingua” popoliamo questa nuova classe con alcune righe 1 mutation createobject{ 2 createlanguage(input {fields {name "python", saveformat " py"}}){ 3 language{ 4 name, 5 saveformat 6 } 7 } 8 } se la tua operazione ha successo, vedrai questo messaggio nella casella di codice a destra su graphql playground 1 { 2 "data" { 3 "createlanguage" { 4 "language" { 5 "name" "python", 6 "saveformat" " py" 7 } 8 } 9 } 10 } le mutazioni vengono utilizzate per creare o apportare modifiche a una classe eseguendo la mutazione sopra, creeremo una nuova classe chiamata language con i campi dati name “python” saveformat “ py” ripeti il processo e crea altri due oggetti nella stessa classe per name “c” e saveformat “ c” name “java” e saveformat “ java” la mutazione per questo sarà così 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 } ora vediamo tutti i dati nella nostra classe languages per leggere i dati usiamo query quindi vai avanti e digita il comando qui sotto 1 query findlanguages{ 2 languages{ 3 count, 4 edges{ 5 node{ 6 name, 7 saveformat 8 } 9 } 10 } 11 } in query findlanguage query findlanguage ‘findlanguage’ è solo un nome per il tuo comando di query e potresti anche chiamarlo in un altro modo usiamo il find(classname "") find(classname "") comando per trovare tutti gli elementi della classe specifica count count , restituisce il numero di elementi nella classe e tutti gli elementi sono mostrati all'interno dell' result result oggetto la query sopra restituirà questo 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 } puoi vedere tutte le altre query nel seguente link query graphql back4app https //blog back4app com/graphql on parse/ ora, procediamo al passo successivo 4 configurare graphql nella nostra app iniziamo a codificare la nostra app prima di questo, devi fare alcune cose nel tuo lib\consonents dart lib\consonents dart file copia il link graphql che si trova accanto al pulsante della cronologia nella parte superiore della finestra graphql e incollalo come tipo di dato stringa kurl ora spostati in fondo alla pagina e copia i codici dagli http headers, copia solo i codici a destra dei due punti( ) e incollali con i rispettivi nomi nel lib\consonents dart lib\consonents dart file il file dovrebbe avere il seguente codice 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 ora spostati nel main dart main dart file e vai al widget myapp stateless e aggiungi il seguente codice appena sopra il 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 proviene da flutter graphql dart e prende il widget httplink() con due parametri il primo è l'url dell'api graphql su back4app il secondo sono le intestazioni necessarie per autenticarsi sull'api di back4app dopo questa sezione devi includere il codice del client graphql (spiega cos'è), copia il codice qui sotto e poi incollalo sotto la sezione httplink 1 valuenotifier\<graphqlclient> client = valuenotifier( 2 graphqlclient( 3 cache optimisticcache(dataidfromobject typenamedataidfromobject), 4 link httplink, 5 ), 6 ); ora abbiamo fornito il metodo link e cache al nostro graphqlclient lo abbiamo fatto attraverso il nostro valuenotifier e lo abbiamo chiamato client avvolgiamo il widget myhomepage() che è un figlio di materialapp con graphqlprovider e passiamo myhomepage() come suo client aggiungi un altro parametro all'interno di graphqlprovider chiamato client e passa client (nome del nostro valuenotifier) in esso ecco come dovrebbe apparire ora la tua classe myapp 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 } chiamiamo l'api e otteniamo i dati 5 effettuare una chiamata api ora lavoreremo su myhomepagestate inizieremo inizializzando un tipo di dato string chiamato ‘query’ e assegnando/passando l'istruzione di query per trovare tutti i dati dalla nostra classe language poiché la query è multilinea, passeremo la query tra virgolette triple ecco come appare 1 string query=''' 2 query findlanguages{ 3 languages{ 4 count, 5 edges{ 6 node{ 7 name, 8 saveformat 9 } 10 } 11 } 12 } 13 '''; ora vai al widget query(), all'interno del parametro body dello scaffold che ha due proprietà opzioni costruttore e poi passa null per entrambi questo è come apparirebbe il tuo metodo di costruzione 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 } il query() query() widget ci aiuta a scrivere query per graphql e ci aiuterà a leggere e ottenere dati passeremo l'istruzione della query che abbiamo preso come stringa nelle opzioni e costruiremo il widget con il parametro builder quindi passa il widget queryoptions() nelle opzioni come segue 1 options queryoptions( 2 documentnode gql(query), 3 ), 4 la query viene passata attraverso il parametro documentnode in queryoptions ora costruiamo con l'aiuto del parametro builder il metodo builder accetta una funzione con tre parametri, ovvero, queryresult result; refetch refetch; fetchmore fetchmore in questo momento, dobbiamo solo preoccuparci del queryresult che ci dà il risultato della nostra query e possiamo accedere ai dati tramite result data result data quindi codifichiamo quanto segue 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 }, nel codice sopra stiamo accedendo ai dati se non ci sono dati, restituiamo un widget di testo che legge ‘caricamento…’ altrimenti restituiremo un widget text() che legge ‘successo’ ecco come dovrebbe apparire la tua myhomepage myhomepage classe in 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 } ora, avvia l'app e aspetta qualche secondo dopo il riavvio se vedi ‘success’ sullo schermo allora congratulazioni! hai stabilito la tua connessione e chiamato l'api 6 ottenere e mostrare dati dall'api invece di restituire il widget text, restituiremo il listview\ builder() widget con i dati originali scrivi il seguente codice invece di 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 ); ora, se guardi di nuovo la schermata dei risultati graphql nella console api di back4app dove abbiamo digitato il nostro metodo find, i risultati erano i seguenti 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 } quindi dal codice sopra, la posizione di “python” era “data” > “ languages” > “count” > “edges” > “node” > “name” nota anche che il nome è all'interno delle parentesi quadre ‘\[]’ di edges, il che simboleggia che è il primo elemento dell'elenco/array di edges quindi dobbiamo entrare in questa posizione per ottenere “python” e lo stesso vale per tutto il resto quando scriviamo result data result data , entriamo nella “data” posizione quindi, per fornire le altre posizioni, aggiungiamo \["location name"] \["location name"] ad essa quindi la posizione di “python” sarà result data\["languages"]\["edges"]\[0]\["node"]\["name"] result data\["languages"]\["edges"]\[0]\["node"]\["name"] quando si utilizza listview listview , richiede due parametri, itemcount itemcount , indica il numero di elementi nella chiamata api, itembuilder itembuilder , richiede una funzione con parametri (buildcontext context, int index) (buildcontext context, int index) e restituisce un elenco di widget in cui mostreremo i dati qui utilizzeremo un elenco di listtile per mostrare i dati 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 ); quando sostituiamo text('success') text('success') con il sopra listview\ builder() widget, prima passiamo l'itemcount dove passiamo il numero di elementi nella lista dei risultati e quindi non dobbiamo più preoccuparci di questo in itembuilder restituiamo un elenco di listtiles che avrà il "name" "name" della "languages" "languages" classe e in "saveformat" "saveformat" nel trailing nota che abbiamo usato l'indice invece di un numero qualsiasi dopo il risultato, questo è ciò di cui si è occupato l'itemcount ecco come dovrebbe apparire il tuo main dart main dart ora 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 } e la nostra schermata finale dell'app conclusione ora hai un'app flutter connessa a un'api graphql che può memorizzare e recuperare dati su back4app non abbiamo dovuto codificare o decodificare i dati json separatamente, il che rende il nostro lavoro più facile e veloce utilizzando poche righe di codice buona giornata!