Nell'esercizio precedente,
avevamo già configurato il nostro backend Firebase come
servizio con il nuovo progetto e anche impostato molti
dati nel nostro database e quindi impostato il nostro storage e
configurato il nostro Firebase Server per fungere da back-end per la nostra applicazione Angular.
In questo esercizio, vedremo una versione modificata della
nostra applicazione Angular che fa uso del backend Firebase come
servizio al fine di ottenere i dati e
memorizzare anche le informazioni per gli utenti sui server.
Inoltre, sfrutteremo
il supporto di autenticazione fornito da Firebase per autenticare
gli utenti utilizzando un approccio e-mail e password e anche utilizzando un account Google.
Per iniziare a questo esercizio,
vai in una posizione comoda sul tuo computer e
poi clona il repository Git dato in cui
ti ho fornito la versione Angular Firebase della nostra applicazione Angular.
Quindi digita, git clona
https://github.com/jmuppala/confusion-Angular6-Firebase.git
e poi clona
il repository Git e una volta che il repository Git è stato clonato sul tuo computer,
quindi spostati
nella cartella Firebase angolare confusione che verrà creata a questo punto e
poi notare che un sacco di file sono già installati lì.
Andiamo avanti e facciamo un'installazione npm per installare
tutti i moduli nodo da cui dipende questa applicazione angolare.
Questa versione installerà anche
due moduli nodo aggiuntivi chiamati Firebase e quindi Angular fire two.
Spiegherò un po 'di più su questi due moduli nodo più avanti in questo esercizio.
Una volta completata l'installazione del progetto,
apri il progetto in un editor e poi nel progetto,
vai nella cartella degli ambienti di origine e
poi apri il file environment.ts e nel file environment.ts,
vedrai un set di configurazione Firebase che
devi configurare con il tuo propria 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 tuo file environment.ts per sostituirli con il tuo specifico Configurazione dei server Firebase
per tutte queste informazioni e una volta completata, è
possibile avviare l'applicazione Angular digitando «ng serve» al prompt.
Una volta che la tua applicazione Angular è stata compilata con «ng serve»,
vai su un browser e quindi digita localhost: 4200 per caricare nella
tua applicazione Angular e noterai che la tua applicazione Angular è compilata
e quindi caricata nel tuo browser proprio come prima.
Quindi, una volta che la tua applicazione Angular è attiva e funzionante,
noterai che questa versione dell'applicazione Angular farà uso
del server Firebase che hai impostato
nell'esercizio precedente e quindi qui vedrai la pagina «Home»,
la pagina «Informazioni» come vediamo qui e il
« Menu» e la pagina «Contatto» e, ovviamente, dato che non abbiamo effettuato l'accesso,
la pagina «I miei preferiti» mostrerà un errore che indica che nessun utente ha effettuato l'accesso.
Quindi, facciamo il login noi stessi.
Lasciami tornare alla «Homepage» e poi faremo il login noi stessi.
Quindi, quando fai clic sul pulsante di accesso,
vedrai il modulo tipico qui con l'email e le informazioni sulla password.
Vedrai anche un pulsante aggiuntivo 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 da questo server Firebase.
Quindi, lasciami andare avanti e autorizzare
questa applicazione e poi una volta completata l'autorizzazione,
vedrai che la tua
applicazione Angular basata su Firebase verrà avviata e nell'angolo destro,
vedrai immediatamente il tuo nome
visualizzato qui e con il «Login» ora trasformato in un pulsante «Logout».
Quindi, a questo punto,
dovresti essere in grado di vedere i tuoi preferiti
e in questo caso dato che non abbiamo alcun favorito,
quindi sarà vuoto a questo punto.
Lasciami tornare al «Menu» e quindi aggiungere un paio di elementi in «I 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 in «My
Favorites» e poi ora quando vai al «My Favorites»,
vedrai il paio di piatti aggiunti nei
tuoi preferiti come faresti aspettarsi e di nuovo,
è possibile eliminare i piatti cliccando sul «Elimina» interruttore qui e quindi fare clic sulla
croce per rimuovere l'elemento dalla lista dei preferiti, come mostrato qui.
Ora, possiamo anche aggiungere come hai capito,
possiamo andare a qualsiasi piatto e poi aggiungere commenti su quel piatto.
Quindi, lasciatemi aggiungere in un commento
qui e nel momento in cui
si invia il commento, vedrete immediatamente che i vostri commenti verranno visualizzati qui con
il nome dell'autore commento anche incluso qui e con la data come mostrato qui.
Quindi, puoi vedere che la presentazione
dei commenti da parte dell'utente sarà supportata per qualsiasi piatto specifico.
Permettetemi di aggiungere un altro favorito e quindi questo utente avrà un paio di preferiti.
Lasciami «Logout» questo utente.
Torna alla «Homepage» e poi «Disconnetti» questo utente.
Ora effettueremo il login utilizzando l'altro account.
Quindi, vorrei - avevo impostato
questo account di password di posta elettronica
in precedenza e così faremo il login come questo altro utente e una volta che l'altro utente è connesso,
lasciami di nuovo andare al «Menu» e aggiungere un paio di elementi nei
preferiti per questo particolare utente
e così quando si torna a «I miei preferiti»,
vedrai questi elementi elencati per il secondo utente.
Ora, allo stesso modo per questo utente,
permettetemi di inviare nuovamente un altro commento da questo utente.
Così -
e si
vedrebbe che i commenti inviati dal secondo utente vengono aggiunti anche nella domanda.
Quindi, questo è il modo in cui
la tua applicazione Angular funziona con Firebase come backend come servizio.
Ora, naturalmente,
ci si deve chiedere, come riprogettare la nostra applicazione Angular per fare uso di Firebase invece
di utilizzare il server Standard Express più MongoDB che abbiamo costruito in precedenza?
Per configurare l'applicazione Angular per comunicare con il Firebase Server,
ci sono due moduli nodo che è necessario installare nell'
applicazione Angular e uno di questi è il modulo Firebase.
Il modulo Firebase come vedete qui,
fornisce gli strumenti e l'infrastruttura che consente di comunicare
con il server Firebase e di installarlo nella vostra applicazione,
si digita, npm install meno save Firebase.
Ora insieme a questo,
c'è un altro modulo chiamato Angular Fire 2.
Quindi il fuoco angolare 2.
Inoltre, ancora una volta ho fornito i collegamenti a questi due moduli nelle risorse aggiuntive.
AngularFire 2 è la libreria ufficiale
per il supporto Firebase e Angular e, come puoi vedere,
è un supporto basato osservabile per i file Angular.
Quindi, questo funziona per aggiungere al modulo npm Firebase e quindi
ti dà un'interfaccia basata osservabile che possiamo usare nella tua applicazione Angular.
Quindi, avremmo sfruttato l'AngularFire 2.
Quindi, per fare uso di AngularFire2,
è necessario installare sia Firebase che AngularFire 2.
Quindi, in un colpo,
installa entrambi nella tua applicazione Angular.
Ora, la versione dell'applicazione Angular che ho fornito per te
installa automaticamente entrambi questi come vedrai quando esamina il file package.json.
Ora, come fare uso di questi due,
illustrerò che eseguendo rapidamente
il codice modificato per i servizi e un paio di componenti in cui
facciamo uso di Firebase e AngularFire2
per modificare l'applicazione Angular che abbiamo sviluppato in
precedenza per utilizzare il Server Firebase come back-end come servizio.
Per capire di più su come utilizziamo
Firebase e AngularFire 2 all'interno della nostra applicazione Angular, la
nostra prima fermata è nel file package.json.
Quindi nel file package.json,
noterai che ho installato AngularFire2 qui e anche abbiamo installato
Firebase da utilizzare in questa versione dell'applicazione Angular che fornisco per te.
Quindi, nota che questi due verranno installati automaticamente quando digiti «npm
install» dopo aver clonato questo repository git che ho fornito per te.
Se stavi iniziando con una nuova applicazione Angular,
dovresti installare sia AngularFire 2 che Firebase
per sfruttare l'uso di Firebase come backend come servizio.
Ora, dopo aver installato questi due,
impariamo come facciamo uso di questi all'interno dei nostri servizi.
Quindi, il modo migliore per imparare a utilizzare entrambi
questi è visitare alcuni dei servizi che abbiamo
configurato nella nostra applicazione e capire come
sfruttare l'uso di AngularFire2 e Firebase.
Quindi, inizieremo con il file dish.service.ts.
Quindi, se vai al file dish.service.ts,
noterai che qui,
in questo servizio di piatti,
mi vedrai importare questo AngularFiRestore, AngularFireStoreDocument
e AngularFireStoreCollection da AngularFire a Firestore qui.
Quindi, questo porta tutto ciò di cui ho bisogno dal mio modulo AngularFiRestore npm,
inoltre noterai che sto importando tutto da
Firebase/app come Firebase nel mio servizio piatto qui.
Quindi, una volta importati questi due,
diamo uno sguardo veloce a come riconfiguriamo il nostro servizio di piatti qui.
Quindi, se vai nel servizio piatto,
noterai che non sto più usando il client HTTP.
Invece, sto iniettando AFS che è AngularFiRestore nel costruttore qui.
AngularFiRestore è quello che mi dà
accesso al backend Firebase come servizio.
Ora, ricordiamo anche che abbiamo già configurato tutti i dettagli del
nostro server e anche il progetto filestore nel file environment.ts in precedenza.
Quindi, dovresti aver configurato queste informazioni già lì
su come l'applicazione Angular dovrebbe sfruttare
il tuo progetto basato su Firestore sul
tuo server Firestore per accedere ai dati che hai configurato lì.
Quindi, questo mi darà accesso al mio cloud
Firestore all'interno del mio progetto Firebase che ho impostato.
Ora, AuthService è ovviamente lo stesso Authservice che abbiamo usato prima,
ma è stato modificato per utilizzare il supporto Angular per Firebase.
Visiteremo AuthService per scoprire come è stato aggiornato.
Ora, AuthService ci darà accesso a
questo metodo chiamato getAuthState che restituirà in un osservabile.
Questo osservabile, quando ci sottoscriviamo,
ci darà le informazioni come utente che contiene le informazioni dell'utente.
Quindi, lo otterrò e quindi imposterò CurrentUser nella mia applicazione
come utente restituito da questo osservabile qui.
Quindi, quando visitiamo AuthService,
impareremo cosa restituirà questo getAuthState per
noi e quindi le informazioni di CurrentUser possono
essere ottenute da uno qualsiasi
degli altri servizi perché stiamo già iniettando AuthService qui.
Ora, diamo un'occhiata a come il metodo GetDishes è implementato qui.
Ora, in precedenza nel metodo GetDiches,
stavamo usando il client HTTP per accedere al server a base URL+/dish.
Ora, in questo caso,
per accedere a una raccolta nel mio server Firebase, diremo questo.afs.
Quindi, questo è ciò che AngularFire2 fornisce per noi.
AFS come vedete è il AngularFiRestore che abbiamo iniettato qui e così diciamo
questo.afs.collection e qui
specificheremo la raccolta specifica a cui stiamo accedendo qui.
Ricordiamo che avevamo impostato i piatti, le promozioni
e le collezioni leader sul mio server Firebase.
Quindi, questo mi dà direttamente accesso
alla mia collezione di piatti qui e dalla collezione di piatti,
posso fare.ValueChanges che
restituirà tutte le informazioni nella collezione aziendale per me,
o posso fare.SnapshotChanges che
restituirà informazioni aggiuntive tra cui l'ID dei piatti.
Quindi, se invece di fare SnapshotChanges,
se dico ValueChanges,
restituirà solo le informazioni sui piatti ma non restituirà
gli ID dei piatti, ma poiché avrò bisogno degli ID dei miei piatti,
ecco perché sto usando il.SnapshotChanges in questo caso.
Quindi, quando viene chiamato.SnapshotChanges,
questo restituirà come vedi un osservabile
che mappa e quindi il valore di ritorno che viene chiamato come azioni e queste azioni
, di nuovo, sarà un osservabile che mapperò ogni azione in
queste azioni e quindi estrarre i dati dall'azione che è ritornato qui.
Quindi l'azione è un valore che viene restituito da per ciascuna delle azioni
e questa azione contiene un payload e contiene all'interno di quel campo oscuro qui.
Ora, questo è qualcosa che ho capito leggendo
la documentazione per AngularFire2 e
quindi quando chiamiamo questa funzione dati su questa action.payload.doc,
questo mi darà i dati.
I dati per quel piatto specifico che si
ottiene dalla mia collezione di piatti sul lato server.
Quindi ogni documento in là verrà restituito qui e
poi ottengo l'ID per questo dicendo action.payload.doc.id.
Quindi è lì che verrà
portato l'ID di quello e poi unirò i due insieme e restituirò
questo come documento piatto ai miei vari componenti da lì,
lo farò chiama questo metodo GetDishes.
Quindi, come ricorderai,
dal componente menu,
sto chiamando il metodo GetDiches per ottenere
le informazioni su tutti i piatti della mia collezione.
Collezione. Quindi, ognuno di questi piatti che viene restituito come documento verrà ricostruito in
un oggetto JavaScript con l'ID inserito qui e anche
i dati estratti da questa azione payload.doc.data.
Ora questo è qualcosa che si impara leggendo la documentazione di AngularFire2.
Ora, dal momento che ho già fatto quella parte,
ti sto mostrando il codice esatto che dovresti
usare per estrarre i dati e quindi fornire
questi dati al tuo componente che chiamerà il metodo getDiches qui.
Quindi, facendo questo per ciascuno dei documenti lì,
questo documento verrà ricostruito per
l'oggetto piatto che
usiamo nella nostra applicazione angolare e quindi siamo in grado di ottenere anche l'accesso all'ID.
Se si eseguono solo modifiche di valore,
restituirà semplicemente tutti i documenti stessi ma senza gli ID dei documenti.
Quindi, questo lavoro aggiuntivo deve essere fatto all'interno del servizio al fine di
restituire le informazioni nel modo giusto in modo
che MyComponents possa fare uso di queste informazioni.
Allo stesso modo, per un metodo getDish,
quindi nota come sto accedendo alle informazioni per un piatto specifico.
Ancora una volta, diremo questo.afs e poi noterai che sono
saying.doc e poi qui per il metodo the.doc,
fornisco piatti barra e poi l'ID del piatto specifico.
Ora, il motivo per cui avevo fornito ID,
l'ID qui sta arrivando come parametro per il metodo getDish qui.
Ora, affinché questo ID venga fornito,
ho bisogno di essere in grado di fornire quell'ID
nel metodo getDises in modo che quando il mio menu è costruito,
ogni piatto avrà il suo ID allegato lì.
Quell' ID è passato qui e quindi accederò al documento a questo punto.
Quindi, AngularFire2 consente di accedere a
un documento specifico che si trova all'interno di una raccolta dicendo la barra del nome della raccolta,
più l'ID del documento o puoi dire questo.afs.collection piatti proprio come hai sentito,
piatti di raccolta e then.doc e quindi fornire doc e ID all'interno delle parentesi lì.
Quindi, questo è un altro modo di affrontare un piatto specifico.
Ancora una volta, mi sto sottoscrivendo a SnapShotChanges e questo restituirà un'azione che viene quindi
mappata nuovamente nello stesso formato per
costruire l'oggetto piatto qui insieme all'ID qui.
Ora, Firebase mantiene l'ID separato dal documento
stesso ed è per questo che devo fare esplicitamente
questa ricostruzione per ottenere
il documento piatto in un modo utilizzabile da MyComponents.
Poi ho costruito il mio server usando Express e MongoDB,
l'ID era automaticamente lì nel documento stesso e quindi è stato molto
facile recuperarlo e rifornirlo al lato client.
Ora, per il getFeaturedDish,
ricorda che per GetFeaturedDish,
stiamo cercando quei piatti in cui la funzionalità è impostata su true.
Ora, questo è dove AngularFire2 ci permette di
costruire una query e fornire quella query qui per quella raccolta.
Qui sto dicendo questo.afs piatti di raccolta qui,
quindi sto ancora usando la raccolta, ma poi guardo
il secondo parametro per questa chiamata qui.
Questo dice ref dove il ref si riferisce a ogni documento che si trova in questa raccolta.
Questo ref dice il ref e questo è dove posso
usare questa query set up ascolta in modo che dice.where.
Quindi, il che significa che ognuno dei documenti in cui il primo piano,
come puoi vedere, la sintassi è abbastanza facile da seguire qui che dice dove sono presenti.
Ora, si noti che la funzione è fornita come una stringa qui,
e poi la successiva,
l'operatore è uguale a così si può anche dire maggiore di, minore di,
maggiore o uguale a minore o uguale a una qualsiasi di queste cose,
ma si noti che questo dovrebbe essere all'interno delle citazioni qui e poi dirà vero.
Quindi, ovunque la proprietà in primo piano del documento è impostata su true,
estrai tutti quelli.
Quindi, questa query estrarrà solo quei documenti
dalla collezione di piatti in cui la funzionalità è impostata su true,
e quindi restituirà solo quei documenti da quella raccolta qui,
e da lì sto andando modifiche istantanee e questo
restituirà una serie di documenti e da lì li mapperò
in singoli documenti piatti e poi dal momento che ho
assicurato che solo uno di questi documenti avrà la funzione impostata su true.
Quindi, restituirà solo uno di essi, ma lo restituirà come array.
Quindi, è per questo che sto costruendo questo
con la parentesi quadra zero il primo elemento dell'array,
e in effetti conterrà solo un elemento perché solo un elemento nella mia collezione
corrisponderà a questa particolare query che ho impostato qui con l'onda qui.
Ci sono altre configurazioni di query qui puoi anche usare qualcosa chiamato order by.
Quindi, è possibile ordinare la raccolta in base a una determinata proprietà
e qualche altro insieme di opzioni di query che sono disponibili.
Ora, questo è supportato da Firebase sul suo cloud Firestore,
ed è ciò che possiamo sfruttare usando AngularFire2 per progettare
il codice nell'applicazione Angular per eseguire la query dal lato client stesso.
Quindi, questo sta per restituire il piatto caratteristica specifica.
Ora, ancora GetDishId sarà simile a quello che abbiamo fatto in precedenza.
Quindi, nessuna modifica lì.
Ora, per il PostComment di nuovo
perché Firebase con la beta di Firestore cloud,
non ha il concetto di popolazione,
e così via che abbiamo visto prima.
Quindi, quello che ho intenzione di fare per i commenti è che ho intenzione di pubblicare questi commenti come
una raccolta per la quale è racchiusa all'interno di ogni piatto stesso.
Quindi, ogni piatto avrà la sua raccolta di commenti su quel piatto specifico.
Quando pubblico il commento, utilizzerò il dishId
e quindi le informazioni sul commento.
Quindi, quello che faccio qui è che prima
interrogherò i piatti e poi ottengo quel piatto particolare.
Quindi, puoi vedere che sto usando l'altro modo di interrogare per un documento specifico.
Quindi, qui sto dicendo questo afs.collection ('piatti') .doc dishId.
Quindi, posso usare questo modo di accedere a un documento specifico, se voglio.
L' altro modo, ovviamente, hai già visto con
il metodo getDish dove dico piatti doc slash più ID.
Quindi, due modi diversi per indirizzare un documento specifico all'interno di
una raccolta qui e poi dishID e quindi raccolta e commenti.
Quindi, in questo modo sta dicendo in
questa raccolta per questo specifico documento con quel dishId,
c'è una raccolta che è inclusa in
questo documento e quella raccolta ha i commenti del nome.
Quindi, questo è un nidificazione di una raccolta
all'interno di un documento che si trova in un'altra connessione di livello superiore.
Quindi, questo tipo di nidificazione delle raccolte è consentito da
Firebase Cloud Store Beta fino a 100 livelli di profondità se si desidera scegliere.
Quindi, all'interno di questa collezione,
aggiungerò.
Quindi, come si aggiunge un documento a una raccolta?
Per aggiungere un documento alla raccolta,
utilizzare il metodo add in una raccolta qui.
Quindi, puoi vedere che sui commenti della raccolta,
sto facendo un add qui e poi
questo è il documento effettivo che verrà aggiunto qui.
Quindi, nel documento stesso,
vedrai che ho la proprietà dell'autore qui dove ho impostato l'ID corrente,
e anche ho impostato il nome per l'autore qui,
servo solo la prima volta qui quindi qui dico questo nome visualizzato utente corrente.
Se il nome visualizzato è vero, lo imposterò su questo nome visualizzato utente corrente.
Se l'account dell'utente non ha un nome visualizzato come allegato, allora
userò semplicemente questa e-mail utente corrente come proprietà del nome qui.
Quindi, questo documento che contiene il commento,
porta automaticamente anche questo campo di nome
ed è quello che userò per rendere
le informazioni quando eseguo il rendering dei commenti nel mio componente DishDetail.
Quindi, nota che sto effettivamente duplicando le informazioni qui in ciascuno dei commenti.
Ma va bene, dal momento che questi sono memorizzati come
documenti Json su Firebase, va bene
duplicare alcune delle informazioni nei commenti qui.
Ma se vuoi ulteriori dettagli dell'utente corrente,
hai già un riferimento all'id dell'utente qui in modo da poter effettivamente andare a recuperare
il documento per il particolare utente e quindi
ottenere ulteriori informazioni dell'utente se lo scegli.
Ora, quando ho usato Mongo DB più Mongo,
hai visto che userò solo l'ID dell'utente corrente per
l'autore e quindi userò il popolare per popolare queste informazioni.
Ora Cloud Firestore beta in questo momento non ha
alcun concetto di questo popolare per quanto posso vedere dalla documentazione,
forse una versione futura potrebbe supportare un modo di estrarre
informazioni da un altro documento e
inserirle automaticamente nel documento corrente.
Quando ciò accade, allora questo codice dovrà essere modificato per approfittarne.
Ma ora come la vedo io,
Firestore beta non ha la possibilità di
popolare le informazioni da un altro documento nel documento corrente.
Ecco perché sto solo replicando solo quel pezzo di
informazioni di cui ho davvero bisogno quando eseguo il rendering del commento nel
mio componente dishdetail qui e poi giù
qui sotto puoi vedere che ho la valutazione e il commento qui e poi anche,
notare che sto creando
questi due campi aggiuntivi nel mio commento qui chiamati «CreateDat» e «UpdateDat».
Si noti come sto mettendo il timestamp per «CreateDat».
Firebase, ora cos'è questo Firebase che sto usando qui,
questo Firebase è esattamente quello che ho importato qui dall'app Firebase.
Quindi questo mi fornisce come vedi qui sotto qui sotto,
che mi fornisce lo stesso valore del campo Firestore.
Quindi questa chiamata al campo firestorm valori timestamp del server,
restituirà il timestamp corrente per
me e questa è l'informazione che sto per memorizzare nel «CreatedAt».
Ora, quando ho inserito tutti i documenti qui,
hai visto che ho creato manualmente questo campo «CreatedAt» per ciascuno dei documenti.
Ora questo è un modo per fare lo stesso dal
nostro codice angolare nel
nostro lato client e la stessa cosa per il campo «UpdateDat» che vedrai qui.
Quindi, quando pubblichi un nuovo commento,
vedi che questo è il modo in cui aggiungerai un nuovo commento in quel server.
Ora, questo restituisce una promessa e quindi questa è l'informazione
che sto usando qui per costruire questa promessa qui.
Quindi questo altro metodo qui dice «getComments»,
questo «getComments come puoi vedere sta accedendo ai piatti della collezione AFS,
doc dishId e quindi
ai commenti della raccolta e l'avviso che qui, non richiederò ogni ID dei commenti
stesso che non userò nel mio Angular petizione comunque,
quindi invece di usare le modifiche istantanee,
sto solo usando le modifiche di valore e questo restituirà
tutti i documenti in questa raccolta di commenti per questo particolare documento
il dishId dalla raccolta di piatti qui
e che verrà restituito e questi commenti renderò in il mio componente piatto.
Ora, in Mongos, hai visto che il fatto che ho incluso l'ID utente significa
che potrei copulare queste informazioni ora con Firebase,
non c'è modo di popolare le informazioni comuni qui,
quindi è per questo che sto andando esplicitamente e poi popolando i commenti nel
mio dishdetail per recuperare tutti i commenti su
questo particolare piatto quando li rendering nel componente dishdetail.
Quindi vedi, che ho dovuto regolare
un po 'il codice Angular per affrontare il fatto che
Firebase non supporta certe cose che mongos supporta
almeno al momento Cloud Firestore beta non supporta queste cose,
e quindi ho dovuto lavorare per affrontare ciò che Firebase mi
permette di memorizzare e recuperare dal sito del server Firebase.
Ora, è anche interessante per noi fare una rapida visita al servizio Auth qui.
Il servizio Auth qui di nuovo,
nota che nel servizio Auth qui sto importando questo AngularFireAuth
dal sottomodulo AngularFire al npm qui.
Quindi, qui puoi vedere che sto importando AngularFireAuth e questo
mi dà accesso all'aspetto di autenticazione di Firebase.
Ora, vediamo come funziona effettivamente l'autenticazione Firebase dalla nostra applicazione Angular.
Ora inizieremo guardando a come è implementato il login.
Quindi, questo è dove implemento il login,
dove sto usando l'e-mail e la password.
Quindi, questa parte quando importazione AngularFireAuth qui,
nota che il costruttore sto iniettando AngularFireAuth nel mio costruttore.
Quindi questo inietterà il servizio AngularFireAuth
nel mio costruttore e questo mi dà accesso
all'autenticazione Firebase sul sito del server in modo da poter autenticare gli utenti.
Quindi, se voglio autenticare un utente che sta accedendo con l'e-mail e la password.
Questa funzione di login è quella che verrà chiamata
quando digito la mia email e la password nella finestra di
dialogo di accesso che faccio apparire e quindi
clicco sul pulsante di invio o sul pulsante di accesso qui,
questa funzione di login verrà chiamata e
le informazioni dell'utente ma recupero dal viene passato qui.
Quindi, quando arriva qui,
userò questo AFAuth come vedi che l'ho appena iniettato nel costruttore,
e questo fornisce questo oggetto Auth qui,
che fornisce questo metodo chiamato «accesso con e-mail e password».
Quindi questo accesso con e-mail e password richiede due parametri qui come ci si
aspetterebbe il nome utente dell'utente o l'e-mail e la password qui.
Quindi queste due informazioni le sto fornendo
come i due parametri per questo accesso con e-mail e password.
Quindi, quando clicchi su questo vedrai che
dice che il primo dovrebbe essere e-mail e il secondo dovrebbe essere la password.
Ora il modo
in cui l'ho impostato, questo oggetto utente che sta arrivando contiene l'e-mail in
user.username qui e la password nella proprietà password dell'oggetto utente.
Quindi, quando ciò viene ottenuto,
pubblicherò queste informazioni e quindi quando questo è completato con successo, ciò
significa che l'utente è connesso correttamente,
se c'è un errore,
quindi si cattura l'errore qui in questo momento
non sto facendo nulla specificamente con l'errore che si può
desidera stampare questo messaggio di errore per indicare che l'utente non può accedere e così via.
Quindi, non ho implementato quella parte dell'accordo qui, la
sto lasciando proprio lì se vuoi console registrare
queste informazioni che puoi farlo quando si verificano errori.
Ora per la disconnessione, in Firebase.
Ancora una volta prendiamo l'aiuto di AFAuth che abbiamo iniettato e Auth su di esso,
e questo fornisce questo metodo chiamato «disconnetti»,
che quando chiamato disconnetterà l'
utente attualmente connesso e quindi questo è un modo di gestirlo.
Ora, ti starai chiedendo come gestisco la parte di accesso di Google.
Ora questo viene gestito anche con AFAuth, quindi il modulo AngularFire2 che sto usando,
fornisce queste informazioni per questi metodi per noi attraverso
il modulo Firebase che viene utilizzato anche in AngularFire2,
e quindi questo fornisce questo metodo chiamato accesso con pop e quando
effettuiamo l'accesso con pop- quassù nota quello che sto specificando qui.
Quindi, sto dicendo «nuovo Firebase.auth.GoogleAuthProvider».
Ora, puoi anche fare Firebase.auth.facebookAuthProvider e altri.
Quindi, come hai visto dall'esercizio precedente,
Firebase ti consente di eseguire l'accesso di terze parti utilizzando Google,
Facebook, GitHub e Twitter.
Quindi puoi configurarli in modo appropriato,
dal momento che ho attivato solo l'autorizzazione di Google.
Quindi questo è il modo in cui lo configurerò per utilizzare
la mia autorizzazione Google qui e questa singola riga di codice che ho allegato qui,
è quella che causa il pop-up del browser che mi suggerisce di autorizzare il
mio Firebase a utilizzare l'autorizzazione di Google utilizzando il mio account Google qui.
Quindi questa e' la seconda parte che ho sistemato qui.
Quindi si noti che il servizio Auth si è notevolmente
semplificato rispetto a quello che abbiamo fatto con la versione precedente di questa applicazione.
Quindi puoi confrontare le due versioni per vedere come questo è diverso dall'altro.
Ora, non solo questo afAuth che abbiamo iniettato qui,
parte AngularFireAuth che abbiamo iniettato qui,
fornisce anche questo osservabile chiamato «AuthState».
Questo AuthState osservabile, può essere sottoscritto e questo «authState» osservabile,
come vedi qui,
che ho dichiarato qui come Firebase.User osservabile.
Quindi questa è l'informazione che viene applicata qui e anche possiamo impostare
un'altra variabile qui chiamata utente corrente che è del tipo utente Firebase qui.
Quindi, questo afAuthState è un osservabile
a cui posso iscrivermi e ogni volta che questo
AuthState cambia, AuthState tiene traccia dello stato di autenticazione dell'
utente se l'utente è connesso o disconnesso e se l'utente è connesso,
allora questo sarà quindi iscriversi mi restituirà il informazioni utente e
dalle informazioni utente possiamo recuperare molte informazioni tra cui il nome visualizzato,
l'e-mail, l'ID del profilo e quindi l'
immagine avatar per l'utente se è stato impostato per gli account specifici.
Tutti questi saranno forniti automaticamente dall'utente.
Quindi, quando si fa clic su «utente» e poi punto,
si vedrà che fornisce tutte queste informazioni per noi.
Quindi si tratta di un'email con nome visualizzato,
sia che l'email sia verificata o meno e così via.
Quindi alcune delle cose che sono di particolare interesse per noi.
Foto URL che può essere utilizzato per recuperare le informazioni avatar per l'utente,
ID provider che specifica chi sta
fornendo queste informazioni per voi questo sarebbe o Facebook ID,
Google ID e GitHub ID e così via e ulteriori informazioni anche il token di aggiornamento.
Quindi vedi un sacco di informazioni
rese disponibili tramite l'oggetto utente
restituito da questo Authstate quando ti iscrivi
e permettimi di attirare la tua attenzione sull'UID dell'utente,
e questo è ciò che può essere usato per indicizzare l'utente nella nostra applicazione.
Quindi questo è il servizio di autenticazione nel modo in cui l'
ho impostato per utilizzare l'autenticazione Firebase in questa applicazione.
Quindi, due modifiche che ho riflettuto su di te per mostrare
come i miei servizi vengono modificati per utilizzare Firebase.
Gran parte degli aggiornamenti che ho fatto alla mia applicazione Angular sono tutti
nei servizi per utilizzare Firebase installato.
Quindi, a causa del bambino strutturato dell'applicazione Angular,
i componenti erano semplicemente dipendenti dai servizi e
i servizi erano quelli con cui stiamo parlando al back-end.
Quindi, molti degli aggiornamenti che ho fatto alla
mia applicazione Angular coinvolgono solo l'aggiornamento di questi servizi per
utilizzare il back-end Firebase di Google come servizio con i due moduli npm,
Firebase e AngularFireAuth qui.
Quindi, vedresti che gran parte degli aggiornamenti è limitata a
tutti questi servizi che ho nella cartella dei servizi della mia applicazione Angular.
Ovviamente, avevo bisogno di fare un po 'di
aggiustamenti minimi nel componente dishdetail
e nel componente header per farlo funzionare con Firebase.
Puoi visitare rapidamente headercomponent.ts,
headercomponent.html e dishdetailcomponent.tsfile per vedere come il codice
è cambiato tra la versione precedente
e la versione corrente dell'applicazione Angular,
la versione precedente, intendo la versione che abbiamo usato per
comunicando con il nostro
server X plus Mongo DB che abbiamo usato nell'esercizio precedente.
Ora, un altro posto dove mi vedete fare delle modifiche, e'
interessante notare che e' nel servizio preferito.
Nel servizio preferito,
il modo in cui ho memorizzato i preferiti dell'utente,
è che i preferiti sono una raccolta sul
mio sito server e il preferito stesso contiene documenti.
Ogni documento contiene l'ID utente e l'ID del piatto.
Quindi, un particolare utente potrebbe avere
più documenti ciascuno di essi che memorizzano l'ID utente e l'ID del piatto.
Quindi, una raccolta di loro insieme definirà tutti i preferiti per un particolare utente.
Ho scoperto che questo è un modo migliore per organizzare questi dati in Firebase.
Nel nostro MongoDB più mongos,
hai visto che avevo incorporato nella matrice di ID piatto nel
documento dei preferiti e quindi ho definito lo schema preferito in questo modo.
Qui, sto usando
un documento separato per tracciare ciascuno dei preferiti per ciascuno degli utenti.
Ora, poiché Firebase supporta l'interrogazione, quindi,
posso interrogare il mio Firebase ed estrarre tutti i documenti che hanno gli stessi ID utente,
che corrispondono all'utente che è attualmente connesso e quindi
estrarre gli ID di piatto corrispondenti dai preferiti.
Poi andrò e poi interrogherò il mio server
e ottengo le informazioni del piatto per ciascuno di questi piatti.
Quindi, si tratta di più viaggi al server al fine di ottenere
tutte le mie informazioni piatti preferiti prima di poter rendere il mio elenco di preferiti.
Ma questo è il modo migliore per far funzionare Firebase con la mia applicazione Angular.
Forse, in una data futura,
Firebase Cloud Firestone potrebbe estendersi per
consentire qualcosa come popolare che abbiamo fatto con i mongo.
In tal caso, aggiornerò il codice per usare quel modo
di ottenere automaticamente tutte le informazioni del piatto.
Quindi, l'onere della costruzione di questo documento composto verrà spostato sul sito del server.
In questo momento, il mio cliente sta facendo gran parte del lavoro qui.
Ora, quando entri qui,
vedrai che nel metodo getFavorites,
vedrai come sto accedendo ai miei preferiti qui.
Quindi, quando faccio «Getfavorites» sto interrogando
questa raccolta di preferiti, ma noto che qui,
dico «ref dove è questo ID utente».
Questo ID utente che ottengo qui.
Quindi, nel costruttore del mio server preferito,
sto sottoscrivendo a questo servizio Auth lo stato Get Auth nel servizio Auth.
Quindi, nel servizio Auth se entri,
vedrai questo metodo chiamato Ottieni stato Auth qui.
Lo stato Get Auth restituisce this.AuthState,
che ho definito proprio lì.
Quindi, questo sarà un osservabile come mi vedrai dichiarare qui.
Quindi, quell'osservabile è quello che
userò all'interno del mio servizio preferito e quindi iscrivermi a quello.
Quindi, ogni volta che le informazioni dell'utente cambiano questo verrà automaticamente riflesso qui.
Quindi, hai visto che anche nell'applicazione precedente avevo usato un osservabile,
al fine di riflettere le informazioni dell'utente nel mio componente di intestazione.
Tipo di approccio simile,
che sto usando nel mio componente preferito qui,
per ottenere l'ID utente per l'utente attualmente connesso.
Quindi, quando interrogo la raccolta My Favorites,
interrogherò ed estrarrò solo quei documenti in cui l'utente corrisponde a questo.
Quindi sto usando solo le modifiche di valore qui.
Quindi, sto solo estraendo tutti i documenti,
che non mi interessa l'ID del documento preferito stesso in questo momento.
Quindi, li sto solo estraendo tutti e li sto usando.
Se l'utente non è connesso e come puoi vedere
sto lanciando un errore qui con il detto osservabile,
«nessun utente ha effettuato l'accesso» che è ciò che viene visualizzato nel mio discorso preferito lì.
Ora, anche IsFavorites viene aggiornato qui,
ma in IsFavorites quello che sto facendo è andare al DB.
Ora qui, accederò al database dicendo,
«DB è uguale a firebase.firestore».
Ricorda che sto importando Firebase qui,
importa star come Firebase qui.
Lo stesso Firestore angolare non mi fornisce un metodo per
fare più query composte qui.
Il Firestore angolare o il fuoco angolare a non mi forniscono questo.
Quindi, questo è il motivo per cui devo ricorrere all'utilizzo di Firebase Firestore.
Quindi, quando dico Firebase Firestore,
questo mi dà un riferimento al database Firestore e quindi posso andare in questo database
e quindi dire «Preferiti della raccolta DB» e quindi posso fare più query qui.
Quindi, sto dicendo, .dove l'utente è questo.wheredish è l'ID del piatto.
Quindi, se voglio ottenere un favorito specifico.
Per verificare se un piatto specifico è il preferito di un utente ottengo
quel particolare documento in cui l'utente e il piatto corrispondono a questi due,
se non corrispondono, tornerà con un vuoto.
Quindi, che estraggo e poi restituisco questo valore qui.
Ora, poi posto i preferiti,
vedi come sto facendo questo sto dicendo questo preferiti della collezione AFS e dirò «aggiungi».
Guarda il documento che sto memorizzando nei miei preferiti.
Il documento stesso contiene l'ID utente e l'ID del piatto.
Quindi, questi due pezzi di informazioni racchiusi qui e se
non allora rifiuterà la promessa senza nessun utente connesso qui.
Allo stesso modo, per il favorito di eliminazione che ho implementato qui.
Trascorri un po 'di tempo a esaminare questo codice per capire come ho
sfruttato i moduli Firebase e Angular fire
to npm per comunicare con il mio server Firebase che ho impostato nell'esercizio precedente.
Con questo, ti ho dato una rapida panoramica di
come è possibile configurare l'applicazione Angular per interagire con
Firebase back-end come servizio e quindi essere in grado di
supportare varie operazioni che hai all'interno dell'applicazione Angular.
Come ho dimostrato in precedenza,
questa applicazione angolare assomiglia esattamente
alla versione precedente dell'applicazione Angular in cui stavamo
usando la nostra versione del nostro server Express MongoDB.
Ora, con questo completo 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.