Ora, nel file dart della lista della spesa, possiamo finalmente iniziare a recuperare i dati da Firebase.
E qui voglio recuperare i miei dati in ADD item dopo essere tornato dalla schermata del nuovo elemento.
Per questo motivo continuerò ad aspettare qui in attesa che questo futuro si risolva.
Quindi attendere che l'utente ritorni.
Ma non otterremo più il nuovo elemento, perché in new item dot dart non sto passando alcun dato a pop, quindi non
dovremmo aspettare qui.
Non abbiamo più bisogno di questo controllo e di questo codice perché non ci sono nuovi elementi
qui.
Invece, aspetto che l'utente ritorni e poi recupero i dati dal backend.
Per fare ciò, dobbiamo inviare una richiesta di get a Firebase.
E questo viene fatto ancora una volta usando questo pacchetto HTTP, che importerò quindi in grocery list
dot dart come l'ho importato in new item dot dart.
E poi qui in ADD item, dopo essere tornati dalla navigazione, possiamo e dobbiamo creare un nuovo URL
allo stesso modo di prima.
Quindi, qui in new item dot Dart, voglio afferrare questa logica di costruzione dell'URL.
Come questo.
E con questo possiamo inviare una richiesta di tipo get utilizzando questo pacchetto HTTP e poi, al posto del
metodo post, il metodo get.
Questo vuole un URL di questo tipo e il gioco è fatto.
Si potrebbe anche aggiungere una mappa di intestazioni per i metadati extra che dovrebbero essere aggiunti alla richiesta.
Ma in questo caso non sarà necessario.
Ma, ad esempio, non possiamo aggiungere un corpo, perché una richiesta get serve sempre a ricevere dati, non a inviarli.
Per questo non si aggiunge un corpo.
Quindi, è tutto ciò che dobbiamo fare.
E ora, naturalmente, dobbiamo aspettare per ottenere la risposta, perché sarà quella risposta
a contenere i dati.
Al momento ci limitiamo a inviare la richiesta, ma ovviamente ciò è inutile se non utilizziamo i dati
restituiti.
Ora vediamo quali dati vengono restituiti.
Mi limiterò a stampare qui la risposta.
Se ora salvo e ricarico l'applicazione si ricarica.
E se ora diamo un'occhiata alla console di debug, non vediamo nulla.
Sembra quindi che non sia stata inviata alcuna richiesta HTTP.
E in effetti è così, perché ne invio uno solo qui dopo aver aggiunto un nuovo articolo.
Ma in realtà anch'io voglio inviare una richiesta del genere.
Se l'applicazione si carica e si raggiunge questa schermata per la prima volta, aggiungerò un nuovo metodo
qui.
Carica elementi Potrebbe essere il nome.
Naturalmente dipende da voi.
E il valore di ritorno è nullo, non definitivo.
Ed è ora lì che voglio inviare la mia richiesta e stampare la risposta.
Pertanto, anche questo dovrebbe essere un metodo asincrono, aggiungendo la parola chiave async.
Ora si caricano gli elementi che si vogliono eseguire qui, in un elemento aggiuntivo come questo, e si può attendere.
Ma non sto restituendo alcun dato e non voglio fare nulla in seguito, quindi non è necessario.
E ora è anche un elemento di caricamento che voglio eseguire se questo widget viene caricato per la prima volta.
Quindi se l'app è appena stata avviata.
E come si può eseguire il codice se questo è stato reso per la prima volta, se questo widget è stato appena creato?
Poiché siamo in una classe di stati, vogliamo aggiungere il metodo init state, come abbiamo imparato
prima.
Si tratta di un metodo che consente di eseguire alcune operazioni di inizializzazione.
Il lavoro di inizializzazione che voglio fare qui è inviare la mia richiesta.
Quindi possiamo chiamare gli elementi di carico in questo modo.
Questo dovrebbe quindi assicurarsi che questo metodo, questo metodo qui, venga attivato e che questa richiesta venga
inviata.
Se questo oggetto di stato viene creato per la prima volta, come nel caso dell'applicazione appena avviata o riavviata.
Quindi, con questa aggiunta, se riavviamo l'applicazione, non succede nulla, perché non stiamo aggiornando
l'interfaccia utente in alcun modo.
Ma se apro la mia console di debug, ora vedo questa parte qui.
Si ottiene un oggetto di tipo response.
E se ci immergiamo in questo oggetto stampando il corpo del punto di risposta, vedremo ancora di più.
Se ora ricarico.
Vedo che sto recuperando questi dati qui.
E alla fine si tratta di dati JSON in cui le chiavi sono gli ID univoci generati da Firebase.
E poi, come valori, ho mappe annidate.
Quindi gli oggetti annidati, per così dire, con i dati memorizzati sotto questi ID su Firebase.
Questi sono i dati che riceviamo da Firebase e che, ovviamente, possiamo utilizzare per aggiornare
l'interfaccia utente.
Per questo qui, negli elementi di caricamento, vogliamo riconvertire questi dati JSON in oggetti DART regolari per
le mappe DART, con cui possiamo lavorare usando di nuovo questo oggetto di utilità JSON, importato da DART convert.
Come avete appreso, ora ha un metodo di decodifica.
Prima abbiamo usato encode per convertire una mappa in JSON.
Ora usiamo decode per convertire questo formato di testo JSON in una mappa.
E qui voglio decodificare il corpo del punto di risposta.
Si ottiene quindi un valore dinamico, perché ovviamente DART non sa come è formattato il corpo della risposta.
Ma sappiamo che alla fine saranno i dati della nostra lista.
Naturalmente il nome della variabile dipende da voi.
I dati dell'elenco avranno questo formato.
Basta convertirlo in una mappa, ma con le stesse chiavi e le stesse mappe annidate.
Naturalmente, ora voglio riconvertire il tutto in un elenco di articoli di drogheria
e per farlo possiamo aggiungere un ciclo for in cui scorriamo le voci dell'elenco.
E sappiamo che i dati dell'elenco saranno una mappa.
Quindi possiamo anche dire a DART che questa sarà una mappa e che sarà effettivamente una mappa in cui
abbiamo chiavi stringa e poi valori mappa, perché avremo queste chiavi qui e poi le mappe come valori per queste chiavi.
Anche queste mappe interne avranno chiavi stringa, ma con valori dinamici.
Abbiamo due stringhe e un intero.
Quindi qui abbiamo valori dinamici in queste mappe annidate.
Ma con questo, DART sa che i dati dell'elenco saranno una mappa e quindi ora si passa attraverso tutte le voci della mappa.
Quindi tutte le coppie chiave-valore esterne con gli ID univoci come chiavi e le mappe annidate come valori.
All'interno di questo ciclo, possiamo convertire queste mappe annidate in articoli di drogheria e
aggiungerle a un nuovo elenco di articoli caricati, creato temporaneamente.
Che dovrebbe essere.
Un elenco di generi alimentari.
Questo non cambia.
Sto creando un elenco temporaneo, perché poi voglio sostituire questo elenco, che usiamo
nella classe generale, con questo elenco, dopo aver passato tutti gli elementi caricati.
Quindi, in questo ciclo in cui scorriamo tutti gli elementi, vogliamo aggiungere nuovi elementi a questo elenco locale
temporaneo chiamando ADD.
Vogliamo creare un nuovo articolo di drogheria utilizzando la nostra classe di articoli di drogheria e la sua funzione
costruttrice.
E a due articoli di drogheria dobbiamo ora passare l'ID, che in realtà dovrebbe essere il punto chiave dell'articolo.
Quindi questi ID generati automaticamente da Firebase, voglio usarli come ID perché sono ID perfetti.
E poi per il nome, ad esempio, voglio usare item dot value per immergermi in questa mappa annidata.
E poi c'è il nome.
Quindi il valore del punto e poi, tra parentesi quadre, il nome.
Ecco come si accede a questa chiave con un nome di nome all'interno di questa mappa annidata.
E ora possiamo fare lo stesso per la quantità.
Questo sarebbe il valore del punto dell'elemento.
Quantità come questa.
E per la categoria, non vogliamo usare il valore dell'elemento categoria, perché la categoria qui è solo il titolo,
perché è quello che abbiamo inviato con la richiesta del post prima.
Solo il titolo.
Ora voglio ottenere di nuovo un oggetto di categoria completo.
Naturalmente, qui voglio ottenere una categoria memorizzata nell'elenco delle categorie.
Quindi questo elenco di categorie predefinite.
Ma per fortuna possiamo semplicemente cercare una categoria con un determinato titolo.
Ora, per ottenere questa categoria dall'elenco delle categorie, possiamo cercarla prima di
aggiungere un nuovo articolo di drogheria agli articoli caricati, creando una nuova variabile locale temporanea di categoria.
Poi voglio raggiungere la mia mappa delle categorie e tutte le voci, che, come avete imparato,
sono un elenco di elementi in cui ogni elemento ha una proprietà key e una proprietà value.
Ora, dato che si tratta di un elenco, possiamo cercare il primo elemento che corrisponde a una determinata condizione,
il che può essere fatto con first.
Dove?
E questo, ovviamente, non è qualcosa che si deve fare ogni volta che si caricano i dati con la
richiesta HTTP.
Questo è specifico per questa applicazione, in cui invio a Firebase solo il titolo della categoria e ora voglio confrontarlo
con alcuni dati locali in memoria.
Ancora una volta, first aware è quasi come where, che abbiamo usato in precedenza nel corso per filtrare un elenco, dove ora filtreremo
anche un elenco, ma produrrà solo un elemento, il primo elemento corrispondente in cui è soddisfatta una determinata
condizione.
Quindi abbiamo il nostro elemento categoria o elemento gatto, che è un elemento con una chiave e una proprietà valore.
Ora voglio trovare l'elemento in cui si trova il titolo del punto valore dell'elemento gatto, perché questo sarà una delle categorie
nell'elenco delle categorie o, per essere precisi, nella mappa delle categorie.
Quindi, se ho una di quelle categorie in cui il titolo è uguale al valore del punto dell'elemento.
Categoria.
Questa è la categoria alla fine.
Voglio aggiungere qui sotto, ancora una volta, per chiarire, quello che stiamo facendo qui, stiamo passando
in rassegna tutte le voci di questa mappa delle categorie, dove le chiavi sono valori di enum e i valori sono oggetti di categoria.
E stiamo esaminando tutti questi elementi.
E per ogni elemento controllo se il valore.
Quindi questo oggetto categoria ha un titolo che è uguale al valore memorizzato sotto la chiave category di quell'elemento.
Questo fa parte della nostra risposta, perché i dati di questo elenco sono i nostri dati di risposta.
Quindi l'elemento si riferisce ai dati di risposta.
La voce gatto si riferisce alle categorie della mappa delle categorie predefinite.
Con questo, riprendo la mia categoria.
O, per essere precisi, una voce di mappa di questo tipo, dove poi posso concatenare il valore del punto alla fine qui.
E questo mi darà finalmente la categoria che è stata identificata.
Abbiamo così ottenuto la categoria, che possiamo impostare come valore quando creiamo l'articolo di spesa.
Ora crea un nuovo articolo di drogheria, lo aggiunge a questo elenco temporaneo di articoli caricati e lo fa per tutti
gli articoli che fanno parte della risposta, in modo che per ogni articolo di risposta venga creato
un nuovo articolo di drogheria con la categoria dall'elenco di categorie predefinite e i dati
recuperati dal backend, compreso l'ID univoco autogenerato, fornito da Firebase.
Bene.
E ora, dopo aver fatto tutto questo, voglio usare gli articoli caricati per sostituire quelli disponibili
localmente.
Quindi questo articolo di drogheria, proprietà della lista di drogheria, classe di stato.
Ora, per sovrascriverlo, convertirò questo da final a var o, dato che ho un'annotazione di tipo qui, mi sbarazzerò
di quella parola chiave, perché ora voglio riassegnare gli elementi della drogheria e voglio riassegnarli qui.
Dopo questo ciclo for.
Quindi, dopo aver chiuso questo ciclo for, voglio impostare gli articoli di drogheria uguali agli articoli caricati per sovrascrivere l'elenco.
Questo dovrebbe essere fatto al posto di setstate, per assicurarsi che il metodo di costruzione venga eseguito
di nuovo e che l'interfaccia utente venga aggiornata.
Se salviamo questo, non succede nulla qui.
Torniamo indietro e apriamo la console di debug.
Si apprende che il problema sembra essere che il tipo map string dynamic non è un sottotipo di map
string dynamic.
Quindi la mia definizione di tipo è un po' troppo specifica per il DART.
Dovremmo semplicemente sostituirlo con una mappa dinamica per assicurarci che la DART ne sia soddisfatta.
Ora si potrebbe anche vedere un messaggio di errore leggermente diverso, in cui si vede che il tipo NULL non è un sottotipo
del tipo map qualcosa e si otterrà questo messaggio di errore se in realtà non ci sono elementi nel backend, perché non si sono seguite
le lezioni precedenti o perché si sono cancellati tutti gli elementi che sono stati aggiunti
a Firebase.
Per ovviare a questo errore, è sufficiente aggiungere alcuni elementi a Firebase.
Non appena lo si fa, l'errore scompare e viene gestito il caso in cui non ci siano elementi nel back-end.
Un po' più avanti in questa sezione.
Con questo aggiustamento però.
Ora questo viene caricato e possiamo vedere i dati qui.
L'eliminazione non funziona, ma possiamo vederla qui.
E se ora aggiungo un nuovo articolo come il latte.
Torniamo indietro dopo averla aggiunta e vediamo questi dati anche qui.
Inoltre, naturalmente, se ricarico il programma, questo viene caricato di nuovo ed è così che possiamo caricare i dati dal
backend.
Ma non è l'unica cosa che voglio fare a riguardo.