[MUSIC]
Nell'esercizio precedente, avevamo già configurato il nostro
back-end Firebase come servizio con il nuovo progetto.
E anche impostare un sacco di dati nel nostro database, quindi impostare il nostro storage e
configurare il nostro server Firebase per fungere da back-end per la nostra applicazione React.
In questo esercizio, vedremo una versione modificata della nostra applicazione React,
che utilizza il back-end Firebase come servizio al fine di
ottenere i dati e memorizzare anche le informazioni per gli utenti sul server.
Inoltre, sfrutteremo il supporto di autenticazione fornito da Firebase
per autenticare gli utenti.
Sia utilizzando un approccio e-mail e password, sia utilizzando anche un account Google.
Per iniziare a questo esercizio, vai in una posizione comoda sul tuo computer,
quindi clona il repository Git dato,
ti ho fornito la versione Firebase della nostra applicazione React.
Quindi digita git clone https://github.com/jmuppala/conFusion-Rea -
CT-Firebase.git.
E poi clonare il repository Git.
E una volta che il repository Git è stato clonato sul tuo computer, quindi spostati
nella cartella Confusion-React-Firebase che verrà creata a questo punto.
E poi noteresti che un sacco di file sono già installati lì.
Andiamo avanti e fare un'installazione di filati per installare tutti i
moduli nodo da cui dipende questa applicazione angolare.
Questa versione installerà anche moduli nodo aggiuntivi chiamati Firebase.
Spiegherò un po 'di più su questi moduli nodo più avanti in questo esercizio.
Una volta completata l'installazione del progetto, aprire il progetto in un editor.
E poi nel progetto, vai nella cartella origine> Firebase e
quindi apri il file config.js.
E nel file config.js, vedrai un set di configurazione Firebase
che devi configurare con la tua configurazione del server Firebase.
Come abbiamo visto nell'esercizio precedente, siamo in grado di ottenere tutte queste informazioni quando
clicchiamo su questo pulsante qui chiamato Aggiungi Firebase alla tua app web.
E quindi copiare queste informazioni e
quindi incollare queste informazioni nel file config.js.
Per sostituirli con la configurazione specifica dei server Firebase per
tutte queste informazioni.
E una volta che è completato, allora è possibile avviare l'
applicazione React digitando inizio filato al prompt.
Una volta che l'applicazione React è compilata, e così
qui si vedrebbe la home page, la pagina circa, come vediamo qui.
E il menu.
E la pagina dei contatti.
Accediamo noi stessi,
lasciami tornare alla homepage e poi faremo il login noi stessi.
Quindi, quando fai clic sul pulsante Login,
vedrai il modulo tipico qui con l'email e le informazioni sulla password.
Vedrai anche un pulsante iniziale qui chiamato Accedi con Google.
Quindi fammi accedere con il mio account Google.
Quindi, quando fai clic su Accedi con Google, si aprirà un'altra
finestra del browser in cui ti verrà chiesto di autorizzare l'utilizzo del tuo account Google.
Quindi vedrai, nell'angolo destro, vedrai immediatamente il tuo nome
visualizzato qui, e con il pulsante di accesso ora trasformato in un pulsante di disconnessione.
Quindi, a questo punto, dovresti essere in grado di vedere i tuoi preferiti.
E in questo caso, dal momento che non abbiamo alcun favorito,
quindi sarà vuoto a questo punto.
Lasciatemi tornare al menu e quindi aggiungere un paio di elementi nei miei preferiti.
Quindi aggiungerò questo piatto ai miei preferiti, quindi quando clicco su questo piatto,
vedrai immediatamente l'icona trasformarsi in un cuore pieno.
E lasciami anche selezionare un altro piatto e aggiungerlo ai miei preferiti.
Ad poi ora quando si va ai miei preferiti, vedrete un paio
di piatti aggiunti nei vostri preferiti, come ci si aspetterebbe.
E ancora, è possibile eliminare i piatti facendo clic sulla
croce Elimina per rimuovere l'elemento dalla lista dei preferiti, come mostrato qui.
Ora possiamo anche aggiungere, come ti rendi conto, possiamo andare a qualsiasi piatto e
poi aggiungere commenti su quel piatto.
Quindi lasciatemi aggiungere un commento qui.
E nel momento in cui invii il commento, vedrai immediatamente che
il tuo commento verrà visualizzato qui con il nome dell'autore incluso anche qui.
E con quella data come mostrato qui.
Quindi, puoi vedere che la presentazione dei commenti dell'utente
sarà supportata per qualsiasi piatto specifico.
Quindi, questo è il modo in cui la tua applicazione funziona con quel
Firebase come back-end come servizio.
Ora, naturalmente, vi starete chiedendo, come riprogettare la nostra applicazione per
fare uso di Firebase invece di utilizzare il
server Express MongoDB standard che abbiamo costruito in precedenza?
Per configurare l'applicazione in modo che comunichi con il server Firebase,
è necessario installare il modulo Firebase.
Il modulo Firebase, come si vede qui, fornisce lo strumento e l'
infrastruttura che consente di comunicare con il server Firebase.
E per installarlo nella tua applicazione,
digiti l'installazione meno meno save firebase.
Ora come fare uso di questi?
Vi illustrerò che eseguendo rapidamente il codice modificato
in cui facciamo uso di Firebase per modificare l'applicazione che abbiamo sviluppato in
precedenza per utilizzare il server Firebase come back-end come servizio.
Facciamo un rapido tour attraverso la nostra applicazione React modificata per capire
come è stato riconfigurato per comunicare con il nostro server Firebase.
Inizieremo il nostro viaggio nel file package.json.
E nel file package.json,
noterai che ho aggiunto il modulo Firebase npm in questo.
E così quando cloni il repository Git e fai l'installazione di filati,
il modulo Firebase viene installato automaticamente nella tua applicazione.
Se stavi configurando una nuova applicazione React per
comunicare con il server,
devi installare esplicitamente il modulo Firebase nell'applicazione.
Ora dopo questo, noterai modifiche nella cartella Firebase.
Qui abbiamo già visto il file di configurazione.
L' altro file che noterai qui si chiama firebase.js.
Ora è qui che configuriamo la nostra applicazione per comunicare con
il server Firebase.
Quindi stiamo importando la configurazione qui.
E poi importare firebase da firebase.
E poi inizi l'app qui fornendo la configurazione al firebase,
quindi questo è dove fornisci tutte le informazioni di configurazione in modo
che il tuo client possa comunicare con il server Firebase.
Inoltre, sto esportando alcune di queste esportazioni da
qui chiamate auth, fireauth e così via.
Questi userò nei creatori di azioni
per comunicare con il mio Firebase Server.
Ora, dopo questo, le principali modifiche saranno nel file ActionCreators.
Ora non ho aggiunto nuove azioni, ma invece tutte le comunicazioni
con il server sono ora modificate per comunicare con il nostro Firebase Server.
Quindi, invece di usare il recupero, come abbiamo fatto in precedenza,
ora useremo firestore.
Quindi, come puoi vedere, ho importato auth, firestore,
fireauth e firebasestore dal modulo firebase che
ho impostato in precedenza nella cartella firebase.
E poi tutti questi mi permetteranno di comunicare con il mio Firebase Server.
Per recuperare una raccolta dal mio Firebase,
diciamo semplicemente firestore.collection e quindi forniamo il nome della raccolta.
E poi puoi aggiungere alla raccolta dicendo, aggiungi, come puoi vedere qui,
che prende l'elemento specifico che stai aggiungendo nella tua collezione lì.
Quindi questo è il documento che stiamo aggiungendo alla nostra collezione.
Quindi questo è per il commento post, come puoi vedere qui.
E quando lo pubblichi, ti verrà fornito di nuovo con un DocRef,
che è il riferimento al documento,
che quindi puoi usare per andare a recuperare il documento dal tuo server.
Ora il modo in cui Firebase funziona è che fornirà
l'ID separatamente dal contenuto effettivo dei documenti.
Quindi Firebase mantiene l'ID e i dati del documento stessi separatamente.
Quindi qui devo combinare esplicitamente i due insieme in
un oggetto JavaScript qui, chiamato commento qui.
Quindi, come vedi dal documento, quindi noti che quando
inserisco un elemento in una raccolta, restituisce un DocRef qui.
E dal DocRef, posso ottenere l'ID del documento.
E quindi quello che sto facendo qui è che sto andando a
prendere il documento corrispondente qui.
E poi una volta che il documento è stato recuperato, ora, ovviamente, il documento dovrebbe esistere,
quindi questo dovrebbe essere sempre vero, perché abbiamo appena inserito il documento.
Ma solo per completezza, sto facendo un controllo esplicito per questo.
E poi dopo che i dati che si trovano nel documento si
ottengono dicendo doc.data, come vedi qui.
E poi l'id del documento è ottenuto da doc.id.
Quindi questi due sono separati.
Ma all'interno del nostro codice React, abbiamo sempre memorizzato l'id e
i dati insieme come un singolo documento JSON qui, o oggetto JavaScript qui.
Ecco perché sto combinando i due insieme
in un singolo oggetto JavaScript qui facendo questo.
Mi vedrai ripetutamente farlo per, ad esempio,
per promozioni audaci e così via, anche in ActionCreators.
E poi dopo sto aggiungendo il commento nel mio negozio Redux qui,
e il resto del codice rimane come tale.
Allo stesso modo, per recuperare i piatti,
vedrai come stiamo recuperando diversi piatti dal Firebase.
Quindi stiamo vedendo Firestore.collection piatti ottenere e ottenere i piatti.
Ora, quando lo otterrai, allora mi darà un valore
di istantanea, che è l'istantanea dello stato attuale di questa collezione, e da questo,
devo entrare e recuperare ogni piatto.
E poi sto ricostruendo la mia serie di piatti qui.
Ora nota che, come ho detto, l'id e i dati sono separati, quindi
ho bisogno di combinarli insieme, perché è così che uso i dati nella mia
applicazione React, quindi lo sto spingendo nell'array di piatti.
E poi finalmente restituendo i piatti che verranno poi inseriti nel mio
negozio Redux qui.
Quindi questo tipo di modifiche sono state apportate in ActionCreators.
Ora il processo di login e logout sarà gestito qui sotto.
Quindi per il login, l'autenticazione che abbiamo importato dal firebase,
l'autenticazione è quella che mi permette di fare il login e il logout.
Quindi, se si accede utilizzando e-mail e password,
fornisce con questo metodo chiamato signinWithEmailAndPassword.
E poi si fornisce l'e-mail e la password come i due parametri qui.
E poi questo ti permetterà di accedere.
E quando si accede, l'autenticazione fornisce questo oggetto chiamato CurrentUser sull'autenticazione.
Quindi ottieni le informazioni dell'utente dicendo auth.currentUser qui.
E sto anche memorizzando le informazioni dell'utente nel mio database.
Ora non sto tracciando esplicitamente alcun token e
cose del genere perché questo viene automaticamente tracciato da auth per me,
che è fornito dal modulo npm di Firebase.
Quindi sto solo sfruttando questo per tracciare l'uso corrente.
Se l'utente corrente è nullo, so che il mio client
non ha alcun utente connesso al server.
E allo stesso modo, per disconnettere l'utente, dico semplicemente Auth.signout.
Ora di nuovo, la documentazione su come utilizzare il
modulo Filebase npm è tutta disponibile nella documentazione di Firebase.
Quindi puoi facilmente cercarlo per capire come sfruttare
Firebase per utilizzare tutte queste diverse funzioni
disponibili dal modulo npm di Firebase.
Inoltre, per i preferiti, pubblichiamo un favorito e
quindi è necessario pubblicare elementi, quindi si direbbe aggiungere, e
quando è necessario ottenere un elemento, si dirà ottenere.
E puoi anche ottenere un elemento da un documento specifico nelle collezioni.
Se si desidera un documento specifico nella raccolta, si dirà .doc.
E poi si fornisce l'id del documento qui.
Quindi è così che è possibile ottenere un documento specifico.
Elimina anche i preferiti e recupera i preferiti e così via.
Ora per i preferiti da memorizzare nel mio Firebase,
i preferiti sono memorizzati come ID utente e ID piatto qui.
Ora firestore stesso non ha alcun modo di popolare le
informazioni del piatto nell'ID del piatto.
Quindi sto solo recuperando tutte le informazioni sul piatto,
quindi questo è ogni favorito è una coppia, utente e coppia di ID piatto.
Quindi lo sto solo prendendo nei miei preferiti qui.
Ma questo significa anche che ho bisogno di modificare il mio componente preferito in modo che
possa usare l'ID piatto e quindi indicizzare nei piatti che
sono memorizzati nel mio negozio Redux, e ottenere le informazioni sul piatto.
O l'alternativa sarebbe quella di andare al server e quindi recuperare le informazioni.
Ma dal momento che ho già i dati sui piatti nel mio negozio Redux,
perché ho già fatto i piatti di recupero per recuperare tutte
le informazioni sui piatti.
Sto solo entrando direttamente nell'oggetto piatti nel mio Redux strappato e
recuperando queste informazioni.
Quindi questo significa anche che ci sono modifiche al componente principale.
Nel componente principale, noteresti che quando faccio il favorito qui per
il dettaglio del piatto, avrei semplicemente dovuto confrontare il piatto con quel dishID.
Quindi il piatto qui nel mio preferito è il dishId stesso, quindi
ho solo bisogno di fare il confronto.
Quindi ci sarà un piccolo cambiamento a questa riga nel dishId.
E anche noterai che quando chiamo i preferiti,
oltre a fornire i loro preferiti,
fornisco anche i piatti come uno degli oggetti di scena per i miei preferiti.
Quindi questo è un altro cambiamento che noterai nel componente principale.
E allo stesso modo, nel componente preferito,
noterai che all'interno del componente preferito qui sotto,
noterai che, quando eseguo il rendering del componente preferito.
Quindi, proprio qui in questa funzione qui, preferiti const,
quello che sto facendo è che sto andando nei piatti preferiti, i piatti sono
una serie di tutti i DishID qui, quindi mi mappa attraverso quello.
Quindi guarda ogni DishID, poi dai piatti,
ho filtrato quel piatto particolare.
E poi ottenuto il dishId, quindi
qui mi vedrai usare il filtro dell'array JavaScript qui.
Filtrerà le informazioni specifiche del piatto e
poi renderà quel piatto particolare.
Quindi questo è un lavoro aggiuntivo che devo fare nel mio
componente preferito per rendere ciascuno dei piatti lì.
Quindi, questo tipo di piccole modifiche che noterai in un paio dei componenti, in
particolare il dettaglio del piatto, il favorito e il componente principale.
Ecco dove sono state apportate alcune piccole modifiche al fine di facilitare l'
applicazione React per essere in grado di sfruttare il Firebase Server.
Quindi questa è una rapida revisione di come
la mia applicazione React è stata modificata per comunicare con il mio Firebase Server.
Ora, come con Angular, avevamo anche l'Angularfire, che
ci stava fornendo un modo di sfruttare insieme a Firebase per comunicare con il server.
React non ha alcuna controparte di questo tipo, quindi sto usando direttamente il
modulo Firebase npm che fornisce la base di base per accedere al server Firebase.
E poi sfruttando le funzioni che fornisce per comunicare con il mio
Firebase Server.
Trascorri un po 'di tempo a esaminare questo codice per capire come
ho sfruttato i moduli npm di Firebase per comunicare
con il mio Firebase Server che ho impostato nell'esercizio precedente.
Con questo, ti ho dato una rapida panoramica di come puoi configurare
l'applicazione React per interagire con Firebase back-end come servizio, e
quindi essere in grado di supportare varie operazioni che hai all'interno dell'applicazione.
Ora, con questo, completa questo particolare esercizio in cui ho
illustrato in questa lezione sul back-end come servizio e ho
anche dimostrato Firebase come esempio di un back-end come servizio.
[ MUSIC]