In der vorherigen Übung
hatten wir bereits unser Firebase-Backend
als Service mit dem neuen Projekt konfiguriert und auch viele
Daten in unsere Datenbank eingebaut und dann unseren Speicher eingerichtet und
unseren Firebase Server so konfiguriert, dass er als Backend für unsere Angular-Anwendung fungiert.
In dieser Übung betrachten wir eine modifizierte Version
unserer Angular-Anwendung, die das Firebase-Backend als
Dienst nutzt, um die Daten zu erhalten und
auch Informationen für Benutzer auf den Servern zu speichern.
Außerdem nutzen wir
die Authentifizierungsunterstützung, die Firebase bietet, um Benutzer
sowohl mit einem E-Mail- und Passwortansatz als auch mit einem Google-Konto zu authentifizieren.
Um mit dieser Übung zu beginnen,
gehen Sie zu einem geeigneten Speicherort auf Ihrem Computer und
klonen Sie dann das angegebene Git-Repository, in dem ich
Ihnen die Angular Firebase-Version unserer Angular-Anwendung zur Verfügung gestellt habe.
Also geben Sie, git clone
https://github.com/jmuppala/confusion-Angular6-Firebase.git
und klonen Sie dann
das Git-Repository und sobald das Git-Repository auf Ihren Computer geklont ist,
dann bewegen Sie sich in den Verwirrung Angular Firebase
Ordner, der an diesem Punkt erstellt wird, und
dann würden Sie Beachten Sie, dass dort bereits eine Reihe von Dateien installiert sind.
Gehen wir weiter und führen Sie eine npm-Installation durch, um
alle Knotenmodule zu installieren, von denen diese Angular-Anwendung abhängig ist.
Diese Version installiert auch
zwei zusätzliche Knotenmodule namens Firebase und dann Angular fire two.
Ich werde später in dieser Übung etwas mehr über diese beiden Knotenmodule erklären.
Sobald die Projektinstallation abgeschlossen ist,
öffnen Sie das Projekt in einem Editor und dann im Projekt,
gehen Sie in den Quellumgebungsordner und
öffnen
Sie dann die Datei „environment.ts“. In der Datei „environment.ts“ wird eine Reihe von Firebase-Konfigurationen angezeigt, die
Sie mit Ihrem eigene Firebase-Server-Konfiguration.
Wie wir in der vorherigen Übung gesehen haben,
können wir all diese Informationen erhalten, wenn wir auf
diese Schaltfläche klicken, die hier heißt „Firebase zu Ihrer Web-App hinzufügen“ und dann
diese Informationen kopieren und diese Informationen
in Ihre Environment.ts-Datei einfügen, um
diese durch Ihre spezifische Firebase-Server-Konfiguration
für all diese Informationen und sobald das abgeschlossen ist,
können Sie Ihre Angular-Anwendung starten, indem Sie an der Eingabeaufforderung „ng serve“ eingeben.
Sobald Ihre Angular-Anwendung mit „ng serve“ kompiliert wurde,
gehen Sie zu einem Browser und geben Sie dann localhost:4200 ein, um in
Ihre Angular-Anwendung zu laden, und Sie werden feststellen, dass Ihre Angular-Anwendung kompiliert
und dann wie zuvor in Ihren Browser geladen wird.
Also, sobald Ihre Angular-Anwendung läuft und läuft,
werden Sie feststellen, dass diese Version der Angular-Anwendung
den Firebase-Server verwenden wird, den Sie in
der vorherigen Übung eingerichtet haben, und so würden Sie hier die „Startseite“ Seite sehen,
die „Über“ Seite, wie wir hier sehen und die
„ Menü“ und die Seite „Kontakt“ und natürlich, da wir derzeit nicht eingeloggt sind,
zeigt die Seite „Meine Favoriten“ einen Fehler an, der besagt, dass kein Benutzer angemeldet ist.
Also, lasst uns uns einloggen.
Ich gehe zurück zur „Homepage“ und dann loggen wir uns ein.
Wenn Sie also auf den Login-Button klicken,
sehen Sie hier das typische Formular mit der E-Mail und den Passwortinformationen.
Sie sehen hier auch einen zusätzlichen Button namens „Login with Google“.
Also lassen Sie mich mit meinem Google-Konto einloggen.
Wenn Sie also auf „Login with Google“
klicken, öffnet sich ein weiteres Browserfenster, in dem Sie aufgefordert werden,
Ihr Google-Konto von diesem Firebase-Server zu autorisieren.
Also, lassen Sie mich gehen und
diese Anwendung autorisieren und dann, sobald die Autorisierung abgeschlossen ist,
dann werden Sie sehen, dass Ihre
Firebase-basierte Angular Anwendung startet und in der rechten Ecke
sehen Sie sofort Ihren Namen
hier und mit dem „Login“ angezeigt wird wird nun in eine Schaltfläche „Abmelden“ umgewandelt.
Also, an dieser Stelle
sollten Sie in der Lage sein, Ihre Favoriten zu sehen
und in diesem Fall, da wir keine Favoriten haben,
also wird es an dieser Stelle leer sein.
Ich gehe zurück zum „Menü“ und füge dann ein paar Elemente in „Meine Favoriten“ hinzu.
Also, ich werde dieses Gericht zu meinen Favoriten hinzufügen.
Also, wenn ich auf dieses Gericht klicke,
werden Sie sofort sehen, dass sich das Symbol in ein gefülltes Herz verwandelt und lassen Sie mich auch
ein weiteres Gericht auswählen und es in „Meine
Favoriten“ hinzufügen, und dann, wenn Sie zu den „Meine Favoriten“ gehen,
werden Sie die paar Gerichte zu
Ihren Favoriten hinzugefügt sehen, wie Sie es tun würden erwarten und wieder,
können Sie die Gerichte löschen, indem Sie auf den „Löschen“ Schalter hier oben klicken und dann auf
das Kreuz klicken, um das Element aus Ihrer Liste der Favoriten zu entfernen, wie hier gezeigt.
Jetzt können wir auch hinzufügen, wie Sie erkannt
haben, können wir zu jedem Gericht gehen und dann Kommentare zu diesem Gericht hinzufügen.
Also, lassen Sie mich
hier einen Kommentar hinzufügen und in dem Moment, in dem Sie den Kommentar einreichen,
werden Sie sofort sehen, dass Ihre Kommentare hier mit
dem Namen des Kommentars des Autors auch hier und mit dem Datum angezeigt werden, wie hier gezeigt.
So können Sie sehen, dass die Einreichung
von Kommentaren durch den Benutzer für jedes bestimmte Gericht unterstützt wird.
Lassen Sie mich einen weiteren Favoriten hinzufügen und so wird dieser Benutzer ein paar Favoriten haben.
Lassen Sie mich „Logout“ diesen Benutzer.
Gehen Sie zurück zur „Homepage“ und dann „Logout“ diesen Benutzer.
Jetzt werden wir uns mit dem anderen Konto anmelden.
Also, ich would- Ich hatte
dieses E-Mail-Passwort-Konto früher eingerichtet und so werden wir uns
als dieser andere Benutzer anmelden und sobald der andere Benutzer eingeloggt ist,
lassen Sie mich wieder zum „Menü“ gehen und fügen Sie ein paar Elemente in
die Favoriten für diesen bestimmten Benutzer
und so, wenn Sie zurück zu „Meine Favoriten“,
sehen Sie diese Elemente für den zweiten Benutzer aufgelistet.
Nun, ähnlich für diesen Benutzer,
lassen Sie mich erneut einen Kommentar dieses Benutzers einreichen.
So-
und Sie würden
sehen, dass die vom zweiten Benutzer eingereichten Kommentare auch in die Anwendung aufgenommen werden.
So funktioniert Ihre Angular-Anwendung
mit der Firebase als Backend als Service.
Natürlich müssen Sie sich fragen,
wie wir unsere Angular-Anwendung neu gestalten, um Firebase zu nutzen, anstatt
den Standard Express plus MongoDB-Server zu verwenden, den wir zuvor erstellt haben?
Um Ihre Angular-Anwendung für die Kommunikation mit dem Firebase-Server zu konfigurieren,
müssen Sie zwei Knotenmodule in
Ihrer Angular-Anwendung installieren und eines davon ist das Firebase-Modul.
Das Firebase-Modul, wie Sie hier sehen,
bietet die Tools und Infrastruktur, mit denen Sie
mit dem Firebase-Server kommunizieren und diese in Ihrer Anwendung installieren
können, geben Sie, npm install minus save Firebase.
Nun zusammen mit diesem
gibt es ein weiteres Modul namens Angular Fire 2.
Also das Winkelfeuer 2.
Auch wieder habe ich die Links zu diesen beiden Modulen in den zusätzlichen Ressourcen zur Verfügung gestellt.
Die AngularFire 2 ist die offizielle Bibliothek
für Firebase und Angular Unterstützung und wie Sie sehen können,
ist es eine beobachtbare basierte Unterstützung für Angular-Dateien.
Also, das funktioniert, um das Firebase npm-Modul hinzuzufügen und dann
gibt Ihnen beobachtbare basierte Schnittstelle, die wir in Ihrer Angular-Anwendung verwenden können.
Also würden wir den AngularFire 2 nutzen.
Um AngularFire2 nutzen zu
können, müssen Sie sowohl Firebase als auch AngularFire 2 installieren.
Also, in einem Schuss,
installieren Sie beide in Ihrer Angular-Anwendung.
Jetzt
installiert die Version der Angular-Anwendung, die ich für Sie bereitgestellt habe, automatisch beide, wie Sie sehen werden, wenn Sie die package.json-Datei untersuchen.
Nun, wie man diese beiden nutzt,
werde ich veranschaulichen, indem ich Sie schnell durch
den modifizierten Code für die Dienste und ein paar Komponenten führe, bei
denen wir Firebase und AngularFire2 verwenden,
um die Angular Anwendung zu modifizieren, die wir
zuvor entwickelt haben, um die Nutzung der Firebase-Server als Backend als Service.
Um mehr darüber zu erfahren, wie wir
Firebase und AngularFire 2 innerhalb unserer Angular-Anwendung nutzen,
ist unser erster Stopp in der package.json-Datei.
Also in der package.json-Datei
werden Sie feststellen, dass ich AngularFire2 hier installiert habe und auch wir
Firebase installiert haben, um in dieser Version der Angular-Anwendung zu verwenden, die ich für Sie bereitstelle.
Beachten Sie also, dass diese beiden automatisch installiert werden, wenn Sie „npm
install“ eingeben, nachdem Sie dieses Git-Repository geklont haben, das ich für Sie bereitgestellt habe.
Wenn Sie mit einer neuen Angular Anwendung beginnen,
sollten Sie sowohl AngularFire 2 als auch Firebase installieren,
um Firebase als Backend als Service nutzen zu können.
Nachdem wir diese beiden installiert haben,
lassen Sie uns lernen, wie wir diese innerhalb unserer Dienste nutzen.
Der beste Weg, um zu lernen, wie man
diese beiden nutzen kann, besteht darin, einige der Dienste zu besuchen, die wir
in unserer Anwendung konfiguriert haben, und zu verstehen, wie wir
die Verwendung von AngularFire2 und Firebase nutzen.
Also, wir werden mit der Datei dish.service.ts beginnen.
Wenn Sie also zur Datei dish.service.ts gehen,
werden Sie feststellen, dass
ich hier, in diesem Gericht Service, diese AngularFiRestore, AngularFireStoreDocument
und AngularFireStoreCollection von AngularFire nach Firestore importiere.
Also, das bringt alles, was ich von meinem AngularFiRestore npm-Modul brauche,
auch Sie werden feststellen, dass ich alles aus
FireBase/App als Firebase in meinen Dish Service importiere.
Also, sobald wir diese beiden importiert haben,
werfen wir einen kurzen Blick darauf, wie wir unseren Geschirrservice hier neu konfigurieren.
Also, wenn Sie in den Geschirr-Service gehen,
werden Sie feststellen, dass ich keinen HTTP-Client mehr verwende.
Stattdessen injiziere ich AFS, das die AngularFiRestore in den Konstruktor hier ist.
Die AngularFiRestore ist diejenige, die mir
Zugriff auf das Firebase-Backend als Dienst gewährt.
Nun erinnern Sie sich auch daran, dass wir bereits alle Details
unseres Servers und auch das Dateispeicher-Projekt in der Datei environment.ts früher konfiguriert haben.
Daher sollten Sie diese Informationen bereits dort konfiguriert haben,
wie Ihre Angular-Anwendung Ihr
Firestore-basiertes Projekt auf
Ihrem Firestore-Server nutzen sollte, um auf die dort konfigurierten Daten zuzugreifen.
Dadurch habe ich Zugriff auf meine Cloud
Firestore innerhalb meines Firebase-Projekts, das ich eingerichtet habe.
Nun ist der AuthService natürlich der gleiche Authservice, den wir zuvor verwendet haben,
aber er hat geändert, um die Angular Unterstützung für Firebase zu nutzen.
Wir besuchen den AuthService, um zu erfahren, wie er aktualisiert wurde.
Nun wird der AuthService uns Zugriff auf
diese Methode namens GetAuthState geben, die in einem beobachtbaren zurückgegeben wird.
Diese beobachtbare, wenn wir es abonnieren,
gibt uns die Informationen als Benutzer, die die Informationen des Benutzers enthält.
Also, ich werde das erhalten und dann den currentUser in meiner Anwendung
als der Benutzer einrichten, der von diesem beobachtbaren hier zurückgegeben wird.
Also, wenn wir AuthService besuchen,
werden wir erfahren, was dieser GetAuthState für
uns zurückgibt und so können die Informationen des CurrentUsers
von jedem
der anderen Dienste abgerufen werden, da wir bereits AuthService in hier injizieren.
Lassen Sie uns nun einen Blick darauf werfen, wie die GetDishs-Methode hier implementiert wird.
Nun, früher in der GetDishs-Methode,
verwendeten wir den HTTP-Client, um auf den Server auf Basis URL+/Gerichte zuzugreifen.
Nun, in diesem Fall,
um auf eine Sammlung in meinem Firebase-Server zuzugreifen, sagen wir this.afs.
Also, das ist es, was AngularFire2 für uns bietet.
AFS, wie Sie sehen, ist die AngularFiRestore, die wir hier injiziert haben, und so sagen wir
diese.afs.collection und hier
werden wir die spezifische Sammlung angeben, auf die wir hier zugreifen.
Erinnern Sie sich, dass wir die Gerichte, die Aktionen
und die Führer Sammlungen auf meinem Firebase Server eingerichtet hatten.
Also, dies gibt mir direkt
Zugriff auf meine Geschirr Sammlung hier und aus der Geschirr Sammlung,
ich kann entweder tun.ValueChanges,
die alle Informationen in der Business-Sammlung für mich zurückgeben,
oder ich kann tun.SnapshotChanges, die
zusätzliche Informationen einschließlich der ID der Gerichte.
Also, wenn statt SnapshotChanges,
wenn ich valueChanges sage,
wird es nur die Gerichteninformationen zurückgeben, aber es wird nicht
die IDs der Gerichte zurückgeben, aber da ich die IDs meiner Gerichte brauche,
also verwende ich die.snapshotChanges in diesem Fall.
Also, wannen.snapshotChanges aufgerufen wird,
wird dies zurückkehren, wenn Sie ein beobachtbares sehen, das
ich zuordne, und so wird der Rückgabewert, der als Aktionen und diese Aktionen aufgerufen
wird, wieder ein beobachtbares sein, das ich jede Aktion in
diesen Aktionen abbilden und dann die Daten aus der Aktion extrahieren werde, die hier zurückgekehrt.
Die Aktion ist also ein Wert, der von für jede der Aktionen zurückgegeben wird,
und diese Aktion enthält eine Nutzlast und enthält darin ein dunkles Feld hier.
Nun, das ist etwas, das ich herausgefunden habe, indem ich
die Dokumentation für AngularFire2 gelesen
habe und wenn wir diese Datenfunktion auf dieser action.payload.doc aufrufen,
wird dies mir die Daten geben.
Die Daten für dieses spezifische Gericht, das
aus meiner Geschirrsammlung auf der Serverseite erhalten wird.
Also jedes Dokument dort wird hier zurückgegeben und
dann erhalte ich die ID dafür, indem ich action.payload.doc.id sage.
Das ist also, wo die ID
getragen wird und dann werde ich die beiden zusammenschließen und
dies als Gericht Dokument zurück zu meinen verschiedenen Komponenten von dort,
ich werde rufen Sie diese GetDishs-Methode auf.
Wie Sie sich erinnern,
rufe ich von der Menükomponente die GetDishs-Methode auf, um
Informationen über alle Gerichte in meiner Sammlung zu erhalten.
Sammlung Also, jedes dieser Gerichte, die als Dokument zurückgegeben wird, wird in
ein JavaScript-Objekt mit der ID hier eingefügt und auch die
Daten, die aus dieser Aktion payload.doc.data extrahiert werden rekonstruiert.
Nun, das ist etwas, das Sie lernen, indem Sie die Dokumentation von AngularFire2 lesen.
Jetzt, da ich diesen Teil bereits gemacht
habe, zeige ich Ihnen den genauen Code, den Sie
verwenden sollen, um die Daten zu extrahieren und dann
diese Daten an Ihre Komponente zurückzugeben, die die GetDishs-Methode hier aufrufen wird. Wenn Sie
dies für jedes der Dokumente dort tun,
wird dieses Dokument zu dem
Dish-Objekt rekonstruiert, das wir
in unserer Angular-Anwendung verwenden, und so sind wir in der Lage, sogar Zugriff auf die ID zu bekommen.
Wenn Sie nur Wertänderungen vornehmen,
werden einfach alle Dokumente selbst zurückgegeben, aber ohne die IDs der Dokumente.
Diese zusätzliche Arbeit muss also innerhalb Ihres Dienstes erledigt werden, um
die Informationen auf die richtige Weise zurückzugeben
, damit MyComponents diese Informationen nutzen kann.
Ähnlich, für eine GetDish-Methode,
so beachten Sie, wie ich auf die Informationen für ein bestimmtes Gericht zugreife.
Wieder werden wir diese.afs sagen und dann werden Sie feststellen, dass ich
saying.doc bin und dann hier für the.doc Methode,
ich liefern Gerichte Schrägstrich und dann die ID des spezifischen Gerichts.
Nun, der Grund, warum ich ID angegeben hatte,
kommt die ID hier als Parameter für die GetDish-Methode hier ein.
Nun, damit diese ID geliefert wird,
muss ich in der Lage sein, diese ID in
der GetDishs-Methode anzugeben. Wenn mein Menü konstruiert ist,
wird jedes Gericht dort seine ID beigefügt.
Diese ID wird hier übergeben und so werde ich an dieser Stelle auf das Dokument zugreifen.
Also, die AngularFire2 können Sie auf
ein bestimmtes Dokument zugreifen, das innerhalb einer Sammlung ist, indem Sie den Sammlungsnamen Schrägstrich,
plus die Dokument-ID sagen, oder Sie können diese.afs.collection Gerichte genau wie Sie gehört haben,
Sammlung Gerichte und then.doc und dann Doc und ID in Klammern liefern dort.
Also, das ist eine andere Möglichkeit, ein bestimmtes Gericht anzusprechen.
Auch hier abonniere ich SnapshotChanges und dies wird eine Aktion zurückgeben, die dann
wieder im gleichen Format zugeordnet wird, um
das Dish-Objekt hier zusammen mit der ID hier zu konstruieren.
Nun hält Firebase die ID getrennt vom Dokument
selbst und deshalb muss ich
diese Rekonstruktion explizit durchführen, um das
Dish-Dokument auf eine Weise zu erhalten, die von MyComponents nutzbar ist.
Dann habe ich meinen eigenen Server mit Express und MongoDB aufgebaut,
die ID war automatisch im Dokument selbst vorhanden und so war es sehr
einfach, diesen abzurufen und an die Client-Seite zurückzugeben.
Nun, für die GetFeaturedDish,
erinnern Sie sich, dass für die GetFeaturedDish,
wir suchen nach jenen Gerichten, bei denen die Funktion auf true gesetzt ist.
Nun, hier ist der AngularFire2 ermöglicht es uns,
eine Abfrage zu erstellen und diese Abfrage hier für diese Sammlung bereitzustellen.
Hier sage ich diese.afs Sammlung Gerichte hier,
also verwende ich immer noch die Sammlung, aber dann schauen Sie sich
den zweiten Parameter für diesen Aufruf hier an.
Dies besagt ref, wo sich die Referenz auf jedes Dokument bezieht, das in dieser Sammlung ist.
Dieser Ref sagt der Ref und hier kann ich
diese Abfrage verwenden, die hört, so was sagt.where.
Also, was bedeutet, dass jedes der Dokumente, in denen die vorgestellten,
wie Sie sehen können, die Syntax ist ziemlich einfach, hier zu folgen, die sagt, wo vorgestellten.
Beachten Sie nun, dass die Funktion hier als Zeichenfolge bereitgestellt wird,
und dann der nächste,
der Operator ist gleich, so dass Sie sogar sagen können
größer als, kleiner als, größer oder gleich kleiner oder gleich einem dieser Dinge,
aber beachten Sie, dass dies innerhalb von Zitaten hier und dann Sie wird wahr sagen.
Also, überall dort, wo die Featured Eigenschaft des Dokuments auf true gesetzt ist,
extrahieren Sie alle diese.
Also, diese Abfrage extrahiert nur die Dokumente
aus der Sammlung Gerichte, wo die Funktion auf true gesetzt ist,
und gibt dann nur die Dokumente aus dieser Sammlung hier zurück,
und von dort gehe ich Snapshot-Änderungen und dies wird
ein Array von Dokumenten zurückgeben und von dort werde ich sie zuordnen
in einzelne Geschirrdokumente und seitdem habe ich
dafür gesorgt, dass nur eines dieser Dokumente das Feature auf true gesetzt hat.
Es wird also nur einen von ihnen zurückgeben, aber es wird es als Array zurückgeben.
Deshalb konstruiere ich dies
mit eckiger Klammer Null das erste Element des Arrays,
und tatsächlich wird es nur ein Element enthalten, weil nur ein Element in meiner Sammlung
dieser speziellen Abfrage entspricht, die ich hier mit der Welle eingerichtet habe.
Es gibt andere Abfrage-Setups hier können Sie auch etwas verwenden, das Reihenfolge nach genannt wird.
So können Sie die Sammlung nach einer bestimmten Eigenschaft
und einigen anderen Satz von Abfrageoptionen, die verfügbar sind, sortieren.
Nun, dies wird von Firebase in seiner Cloud Firestore unterstützt,
und das ist, was wir mit AngularFire2 nutzen können, um
den Code in Ihrer Angular-Anwendung zu entwerfen, um die Abfrage von der Client-Seite selbst durchzuführen.
Dies wird also das spezifische Feature Gericht zurückgeben.
Nun, wieder GetDishid wird ähnlich sein, was wir früher getan haben.
Also, keine Modifikation dort.
Nun, für die PostComment wieder,
weil Firebase mit der Cloud Firestore Beta,
hat nicht das Konzept der Bevölkerung,
und so weiter, dass wir früher gesehen haben.
Also, was ich für die Kommentare tun werde, ist, dass ich diese Kommentare als
eine Sammlung veröffentlichen werde, für die in jedem Gericht selbst eingeschlossen ist.
Also, jedes Gericht wird seine eigene Sammlung von Kommentaren zu diesem spezifischen Gericht haben.
Wenn ich den Kommentar poste, verwende ich die DishID
und dann die Kommentarinformationen.
Also, was ich hier mache, ist, dass ich zuerst
das Geschirr abfragen und dann dieses spezielle Gericht erhalten werde.
Sie können also sehen, dass ich die andere Art verwende, nach einem bestimmten Dokument abzufragen.
Also, hier sage ich diese afs.collection ('Gerichte') .doc DishiD.
Also kann ich diese Art verwenden, um auf ein bestimmtes Dokument zuzugreifen, wenn ich möchte.
Der andere Weg haben Sie natürlich schon mit
der GetDish-Methode gesehen, wo ich Doc Gerichte Schrägstrich plus ID sage.
Also, zwei verschiedene Möglichkeiten, ein bestimmtes Dokument innerhalb
einer Sammlung hier und dann DishID und dann Sammlung und Kommentare zu adressieren. Auf
diese Weise heißt es in
dieser Sammlung für dieses spezifische Dokument mit dieser DisHid,
es gibt eine Sammlung, die in
diesem Dokument enthalten ist und diese Sammlung hat die Namenskommentare.
Dies ist also eine Verschachtelung einer Sammlung
in einem Dokument, das sich in einer anderen übergeordneten Verbindung befindet.
Also, diese Art der Verschachtelung von Sammlungen ist von
Firebase Cloud Store Beta bis zu 100 Ebenen erlaubt, wenn Sie dies wünschen, zu wählen.
Also, in dieser Sammlung,
werde ich hinzufügen.
Also, wie fügen Sie ein Dokument zu einer Sammlung hinzu?
Um ein Dokument zu Ihrer Sammlung hinzuzufügen,
verwenden Sie hier die add -Methode für eine Sammlung.
Sie können also sehen, dass
ich auf den Sammlungskommentaren hier ein Add mache und dann
das ist das eigentliche Dokument, das hier hinzugefügt wird.
Also, im Dokument selbst,
werden Sie sehen, dass ich die Autoreneigenschaft hier habe, wo ich die aktuelle ID eingerichtet habe,
und ich habe auch den Vornamen für den Autor hier eingerichtet,
ich diene nur das erste Mal hier also hier sage ich diesen aktuellen Benutzernamen Anzeigenamen.
Wenn der Anzeigename wahr ist, werde ich ihn auf diesen aktuellen Anzeigenamen einstellen.
Wenn das Konto des Benutzers keinen Anzeigenamen hat, der daran angehängt ist, werde ich
hier einfach diese aktuelle Benutzer-E-Mail als Vornamen-Eigenschaft verwenden.
Also, dieses Dokument, das den Kommentar enthält,
trägt automatisch auch dieses Vornamenfeld
und das ist, was ich verwenden werde, um
die Informationen zu rendern, wenn ich die Kommentare in meiner DishDetail-Komponente rendere.
Beachten Sie also, dass ich tatsächlich Informationen hier in jedem der Kommentare dupliziere.
Aber das ist in Ordnung, da diese als
Json-Dokumente auf Firebase gespeichert sind, ist es in Ordnung,
einige der Informationen in den Kommentaren hier zu duplizieren.
Wenn Sie jedoch weitere Details des aktuellen Benutzers wünschen,
haben Sie hier bereits einen Verweis auf die Benutzer-ID, so dass Sie tatsächlich gehen und
das Dokument für den jeweiligen Benutzer abrufen und dann
weitere Informationen über den Benutzer erhalten können, falls Sie sich entscheiden.
Jetzt, als ich Mongo DB plus Mongos verwendet habe,
haben Sie gesehen, dass ich nur die ID des aktuellen Benutzers für
den Autor verwenden werde und dann das Populate verwenden, um diese Informationen zu füllen.
Jetzt hat Cloud Firestore Beta in diesem Moment
kein Konzept von diesem Populate, soweit ich aus der Dokumentation sehen kann,
vielleicht unterstützt eine zukünftige Version eine Möglichkeit,
Informationen aus einem anderen Dokument
einzuziehen und automatisch in das aktuelle Dokument zu füllen.
Wenn das passiert, muss dieser Code geändert werden, um das zu nutzen.
Aber im Moment, wie ich es sehe,
hat Firestore beta nicht die Möglichkeit,
Informationen aus einem anderen Dokument in das aktuelle Dokument zu füllen.
Deshalb repliziere ich nur die
Information, die ich wirklich brauche, wenn ich den Kommentar in
meiner dishdetail-Komponente hier und dann unten unten
hier rendere, können Sie sehen, dass ich die Bewertung und den Kommentar hier und dann auch,
beachten Sie, dass ich
diese beiden erstelle zusätzliche Felder in meinem Kommentar hier namens „CreateDat“ und „UpdateDat“.
Beachten Sie, wie ich den Zeitstempel für die „CreateDat“ lege.
Die Firebase, jetzt, was ist diese Firebase, die ich hier verwende,
ist diese Firebase genau das, was ich hier als von Firebase App importiert habe.
Das bietet mir, wie Sie hier unten hier unten sehen,
das bietet mir denselben Firestore-Feldwert.
Also dieser Aufruf des Firestorm-Feldwerte-Server-Zeitstempel,
wird den aktuellen Zeitstempel für
mich zurückgeben und das sind die Informationen, die ich in der „CreateDat“ speichern werde.
Als ich nun alle Dokumente hier eingefügt habe,
haben Sie gesehen, dass ich dieses Feld „CreateDat“ manuell für jedes der Dokumente erstellt habe.
Jetzt ist dies eine Möglichkeit, dasselbe aus
unserem Angular-Code auf
unserer Client-Seite zu tun und dasselbe für das Feld „updateDat“, das Sie hier sehen werden.
Wenn Sie also einen neuen Kommentar posten,
sehen Sie, dass Sie auf diese Weise einen neuen Kommentar zu diesem Server hinzufügen.
Nun, das gibt ein Versprechen zurück, und das sind die Informationen
, die ich hier verwende, um dieses Versprechen hier zu konstruieren.
Dann diese andere Methode hier sagen „GetComments“,
diese „GetComments, wie Sie sehen können, ist der Zugriff auf AFS Sammlung Gerichte,
doc dishid und dann Sammlung Kommentare und die Benachrichtigung, dass
ich hier nicht jede Kommentar-ID
selbst benötigen, die ich nicht in meinem Angular verwenden werde Petition sowieso,
anstatt Snapshot-Änderungen zu verwenden,
verwende ich nur Wertänderungen und dies wird
alle Dokumente in dieser Kommentarsammlung für dieses bestimmte Dokument
die Dishid aus der Geschirrsammlung hier zurückgeben
und das wird zurückgegeben und diese Kommentare werden ich in meine dishdetail Komponente.
Nun, in Mongos, haben Sie gesehen, dass die Tatsache, dass ich die UserID enthalten
, bedeutet, dass ich diese Informationen jetzt mit Firebase
kopulieren könnte, es gibt keine Möglichkeit, die allgemeinen Informationen hier zu füllen,
deshalb gehe ich explizit und fülle dann die Kommentare in
meinem Essdetail -Komponente, um alle Kommentare zu
diesem speziellen Gericht zu holen, wenn ich sie in der dishdetail-Komponente rendere.
Sie sehen also, dass ich
den Angular-Code ein wenig anpassen musste, um damit umzugehen, dass
Firebase bestimmte Dinge nicht unterstützt, die Mongos
zumindest im Moment unterstützt Cloud Firestore Beta diese Dinge nicht unterstützt,
und daher musste ich umgehen, um mit dem umzugehen, was Firebase ermöglicht es mir
, die Firebase-Server-Site zu speichern und abzurufen.
Nun ist es auch für uns interessant, den Auth Service hier kurz zu besuchen.
Der Auth Dienst hier wieder,
beachten Sie, dass ich im Auth Dienst hier diese AngularFireAuth aus
dem AngularFire zu npm Submodul hier importiere.
Also, hier können Sie sehen, dass ich AngularFireAuth importiere und das
gibt mir Zugriff auf den Authentifizierungsaspekt von Firebase.
Nun, lassen Sie uns sehen, wie Firebase-Authentifizierung tatsächlich von unserer Angular-Anwendung aus funktioniert.
Jetzt werden wir das beginnen, indem wir uns ansehen, wie Login implementiert wird.
Also, hier implementiere ich den Login,
wo ich die E-Mail und das Passwort verwende.
Also, dieser Teil, wenn ich die AngularFireAuth hier importiere,
beachte, dass der Konstruktor, den ich die AngularFireAuth in meinen Konstruktor injiziere.
Dies wird also den AngularFireAuth-Dienst
in meinen Konstruktor injizieren und dies gibt mir Zugriff auf
die Firebase-Authentifizierung auf der Server-Site, damit ich Benutzer authentifizieren kann.
Also, wenn ich einen Benutzer authentifizieren möchte, der sich mit der E-Mail und dem Passwort anmeldet.
Diese Login-Funktion ist diejenige, die aufgerufen wird,
wenn ich meine E-Mail und mein Passwort in
den Login-Dialog eingebe, den ich auftauche und dann
auf den Submit-Button oder den Login-Button hier klicke,
wird diese Login-Funktion aufgerufen und
die Benutzerinformationen, aber ich rufe von der Login-Komponente wird hier übergeben.
Also, wenn es hier kommt,
werde ich diese AfAuth verwenden, wie Sie sehen, ich habe es gerade in den Konstruktor injiziert,
und das liefert dieses Auth Objekt hier,
das diese Methode namens „Anmeldung mit E-Mail und Passwort“ liefert.
Diese Anmeldung mit E-Mail und Passwort erfordert also zwei Parameter hier, wie Sie den
Benutzernamen des Benutzers oder die E-Mail und das Passwort hier erwarten würden.
Also diese beiden Informationen gebe ich
es als die beiden Parameter für diese Anmeldung mit E-Mail und Passwort.
Also, wenn Sie darauf klicken, werden Sie sehen, dass es
besagt, dass die erste E-Mail sein sollte und die zweite Passwort sein sollte.
Nun, wie ich es eingerichtet habe,
enthält dieses Benutzerobjekt, das eingeht, die E-Mail im
user.username hier und das Passwort in der passwort-Eigenschaft des Benutzerobjekts.
Also, wenn das erhalten wird,
dann werde ich diese Informationen posten und dann, wenn dies erfolgreich abgeschlossen ist,
bedeutet das, dass der Benutzer richtig eingeloggt
ist, wenn es einen Fehler gibt,
dann fangen Sie den Fehler hier gerade jetzt Ich
mache nichts speziell mit dem Fehler, den Sie können
möchten diese Fehlermeldung ausdrucken, um anzuzeigen, dass der Benutzer sich nicht anmelden kann usw.
Also, ich habe diesen Teil des Deals hier nicht implementiert,
ich lasse es nur dort, wenn Sie
diese Informationen konsolen möchten, können Sie das tun, wenn Fehler auftreten.
Jetzt zum Abmelden, in Firebase.
Wieder nehmen wir die Hilfe der AfAuth, die wir injiziert haben und Auth darauf,
und dies stellt diese Methode namens „sign out“ zur Verfügung,
die beim Aufruf den aktuell angemeldeten
Benutzer abmeldet und so eine Möglichkeit ist, dies zu handhaben.
Nun, Sie müssen sich fragen, wie ich mit dem Google-Login-Teil umgehen.
Jetzt wird dies auch mit dem AfAuth gehandhabt, so dass das AngularFire2-Modul, das ich verwende,
diese Informationen für diese Methoden für uns durch
das Firebase-Modul liefert, das auch in AngularFire2 verwendet wird,
und so liefert dies diese Methode namens Anmeldung mit Pop und wenn
wir uns mit Pop- hier oben bemerken, was ich hier spezifiziere.
Also, ich sage „new firebase.auth.GoogleAuthProvider“.
Jetzt können Sie auch Firebase.auth.FaceBookAuthProvider und andere tun.
Wie Sie aus der vorherigen Übung gesehen haben,
ermöglicht Firebase Ihnen die Anmeldung von Drittanbietern entweder mit Google,
Facebook, GitHub und Twitter.
So können Sie diese entsprechend konfigurieren,
da ich nur die Google-Autorisierung aktiviert habe.
So werde ich es einrichten, um
meine Google-Autorisierung hier zu verwenden und diese einzige Codezeile, die ich hier eingeschlossen habe,
ist diejenige, die das Pop-up des Browsers verursacht, der mir vorschlägt,
meine Firebase zu autorisieren, Google-Autorisierung mit meinem Google-Konto hier zu verwenden.
Das ist also der zweite Teil, den ich hier eingerichtet habe.
Beachten Sie also, dass der Authentifizierungsdienst
im Vergleich zu dem, was wir mit der vorherigen Version dieser Anwendung gemacht haben, erheblich vereinfacht hat.
So können Sie die beiden Versionen vergleichen, um zu sehen, wie sich dies von der anderen unterscheidet.
Nun, nicht nur, dass dieser AfAuth, den wir hier injiziert haben,
AngularFireAuth Teil, den wir hier injiziert haben,
bietet auch dieses beobachtbare namens „AuthState“.
Dieser AuthState beobachtbar, kann abonniert werden und dieser „AuthState“ beobachtbar,
wie Sie hier sehen,
was ich hier als beobachtbare Firebase.User deklariert habe.
Also, das ist die Information, die hier angewendet wird und wir können auch
eine andere Variable hier namens aktuellen Benutzer einrichten, die vom Typ Firebase-Benutzer hier ist.
Also, dieser AfAuthState ist ein Observable, das
ich abonnieren kann und wann immer dieser AuthState ändert,
verfolgt der AuthState den Authentifizierungsstatus des Benutzers,
ob der Benutzer eingeloggt oder abgemeldet ist und wenn der Benutzer angemeldet ist,
dann wird dies abonnieren wird mir die Benutzerinformationen und aus
den Benutzerinformationen können wir viele Informationen abrufen, einschließlich der Anzeigename,
die E-Mail, die Profil-ID und dann das
Avatar-Bild für den Benutzer, wenn es für die spezifischen Konten eingerichtet wurde.
All diese werden uns automatisch vom Nutzer zur Verfügung gestellt.
Wenn Sie also auf „Benutzer“ und dann Punkt klicken,
werden Sie sehen, dass es all diese Informationen für uns zur Verfügung stellt.
Es ist also eine Anzeigenamen-E-Mail,
ob die E-Mail verifiziert ist oder nicht und so weiter.
Also einige der Dinge, die spezifisches Interesse für uns sind.
Foto-URL, die verwendet werden kann, um die Avatar-Informationen für den Benutzer abzurufen,
Provider-ID, die angibt, wer
diese Informationen für Sie bereitstellt, wäre dies entweder Facebook
ID, Google ID und GitHub ID und so weiter und zusätzliche Informationen sogar das Refresh-Token.
Sie sehen also eine Reihe von Informationen, die
Ihnen über das Benutzerobjekt zur Verfügung gestellt werden, das
von diesem Authstate zurückgegeben wird, wenn Sie es abonnieren,
und lassen Sie mich auch Ihre Aufmerksamkeit auf die UID der Benutzer-ID lenken,
und das ist, was verwendet werden kann, um den Benutzer in unserer Anwendung zu indizieren.
Das ist also der Authentifizierungsdienst so, wie ich
ihn eingerichtet habe, um die Firebase-Authentifizierung in dieser Anwendung zu verwenden.
Also, zwei Änderungen, die ich an Sie reflektiert habe, um zu zeigen,
wie meine Dienste geändert werden Firebase zu verwenden.
Viele der Updates, die ich an meiner Angular-Anwendung gemacht habe, sind alle
in den Diensten, um Firebase zu verwenden installiert.
Also, wegen des Babys strukturiert von Angular Anwendung,
waren die Komponenten einfach abhängig von den Diensten und
die Dienste waren diejenigen, die wir mit dem Back-End sprechen.
Also, viele der Updates, die ich an
meiner Angular-Anwendung getan habe, beinhalten nur die Aktualisierung dieser Dienste, um
Googles Firebase-Back-End als Dienst mit den beiden npm-Modulen,
Firebase und AngularFireAuth hier zu verwenden.
Sie würden also sehen, dass ein Großteil der Updates auf
all diese Dienste beschränkt ist, die ich im Dienstordner meiner Angular-Anwendung habe.
Natürlich musste ich ein wenig
minimale Anpassungen an der dishdetail-Komponente
und der Header-Komponente vornehmen, damit es mit Firebase funktioniert.
Sie können die Headercomponent.ts, die
headercomponent.html und die dishdetailcomponent.tsfile schnell besuchen, um zu sehen, wie sich der Code
zwischen der vorherigen Version
und der aktuellen Version der Angular-Anwendung,
der vorherigen Version, geändert hat, meine ich die Version, die wir für
Kommunikation mit unserem X plus
Mongo DB-Server, den wir in der vorherigen Übung verwendet haben.
Nun, ein weiterer Ort, an dem Sie sehen würden, wie ich Änderungen
vornehme, ist interessanterweise im Lieblingsdienst.
Im Lieblingsdienst
ist die Art und Weise, wie ich die Favoriten des Benutzers gespeichert habe, dass die Favoriten eine Sammlung auf
meiner Serverwebsite sind und der Favorit selbst Dokumente enthält.
Jedes Dokument enthält die Benutzer-ID und die Dish-ID.
Ein bestimmter Benutzer könnte also
mehrere Dokumente haben, die jeweils die Benutzer-ID und die Dish-ID speichern.
Also, eine Sammlung von ihnen zusammen definiert alle Favoriten für einen bestimmten Benutzer.
Ich habe festgestellt, dass dies eine bessere Möglichkeit ist, diese Daten in Firebase zu organisieren.
In unserem MongoDB plus Mongos
haben Sie gesehen, dass ich in ein Array von Dish IDs in
das Favoriten-Dokument eingebettet hatte und dann das Lieblingsschema auf diese Weise definiert habe.
Hier verwende ich
ein separates Dokument, um jeden der Favoriten für jeden Benutzer zu verfolgen.
Da Firebase die
Abfrage unterstützt, kann ich nun meine Firebase abfragen und alle Dokumente extrahieren, die die gleichen Benutzer-IDs haben,
die mit dem aktuell angemeldeten Benutzer übereinstimmen und dann
die entsprechenden Dish-IDs aus den Favoriten extrahieren.
Dann werde ich gehen und dann meinen Server abfragen
und die Gerichteninformationen für jedes dieser Gerichte erhalten.
Also, es beinhaltet mehrere Reisen zum Server, um
alle meine Lieblingsgerichte Informationen zu erhalten, bevor ich meine Liste der Favoriten rendern kann.
Aber das ist der beste Weg, um Firebase mit meiner Angular-Anwendung zu arbeiten.
Vielleicht
könnte Firebase Cloud Firestone zu einem späteren Zeitpunkt erweitern, um
etwas wie bevölkern zu ermöglichen, das wir mit Mongos gemacht haben.
In diesem Fall werde ich den Code aktualisieren, um auf diese Weise
alle Gerichteninformationen automatisch zu erhalten.
Daher wird die Belastung für die Erstellung dieses zusammengesetzten Dokuments auf den Serverstandort verschoben.
Im Moment erledigt mein Klient einen Großteil der Arbeit hier.
Wenn Sie jetzt hier reingehen,
werden Sie sehen, dass
Sie in der GetFavorites-Methode sehen, wie ich hier auf meine Favoriten zugreife.
Also, wenn ich „Getfavorites“ mache, frage ich
diese Sammlung von Favoriten ab, aber merke, dass
ich hier sage „ref wo ist diese Benutzer-ID“.
Diese Benutzer-ID erhalte ich hier.
Also, im Konstruktor meines Lieblingsservers,
abonniere ich diesen Authentifizierungsdienst den Status Get Auth im Auth Dienst.
Also, im Auth Dienst, wenn Sie gehen,
sehen Sie diese Methode namens Get Auth-Status hier.
Der Status „Get Auth“ gibt den this.authState zurück
, den ich genau dort definiert habe.
Also, das wird ein Beobachtbarer sein, wie Sie sehen, wie ich hier deklariere.
Also, das beobachtbare ist diejenige,
die ich in meinem Lieblingsdienst verwenden und dann abonnieren werde.
Jedes Mal, wenn sich die Benutzerinformationen ändern, wird dies hier automatisch widergespiegelt.
Sie haben also gesehen, dass ich selbst in der früheren Anwendung ein Observable verwendet hatte,
um die Benutzerinformationen in meine Header-Komponente zu reflektieren.
Ähnliche Art von Ansatz
, den ich hier in meiner Favoriten-Komponente verwende,
um die Benutzer-ID für den aktuell angemeldeten Benutzer zu erhalten.
Wenn ich also die Sammlung Meine Favoriten abfrage,
werde ich nur die Dokumente abfragen und extrahieren, in denen der Benutzer dem entspricht.
Dann verwende ich nur die Wertänderungen hier.
Also extrahiere ich nur alle Dokumente,
dass mir die ID des Favoritendokuments in diesem Moment egal ist.
Also, ich extrahiere sie nur alle und benutze sie.
Wenn der Benutzer nicht angemeldet ist und wie Sie sehen können,
werfe ich hier einen Fehler mit dem beobachtbaren Sprichwort
„kein Benutzer angemeldet“, das ist, was in meiner Lieblingssprache dort angezeigt wird.
Jetzt werden die IsFavorites auch hier aktualisiert,
aber in den IsFavorites, was ich mache, ist, dass ich zur DB gehe.
Jetzt werde ich hier auf die Datenbank zugreifen, indem ich sage:
„DB ist gleich firebase.firestore“.
Erinnern Sie sich, dass ich Firebase hier
importiere, importieren Sie Stern als Firebase hier.
Die Angular Firestore selbst stellt mir keine Methode zur Verfügung, um
hier mehrere zusammengesetzte Abfragen durchzuführen.
Das Angular Firestore oder das Angular Feuer, um mir das nicht zu tun.
Deshalb muss ich auf Firebase Firestore zurückgreifen.
Also, wenn ich Firebase Firestore sage,
gibt mir das einen Verweis auf die Firestore-Datenbank und dann kann ich in diese Datenbank gehen
und dann „DB-Sammlungsfavoriten“ sagen und dann kann ich hier mehrere Abfragen durchführen.
Also, ich sage, .wo der Benutzer this.wheredish ist die Dish-ID.
Also, wenn ich einen bestimmten Favoriten erhalten möchte.
Um zu überprüfen, ob ein bestimmtes Gericht der Favorit eines Benutzers ist, erhalte ich
dieses bestimmte Dokument, in dem der Benutzer und das Gericht mit diesen beiden übereinstimmen,
wenn sie nicht übereinstimmen, wird es mit einem leeren zurückkehren.
Also, dass ich extrahiere und dann diesen Wert hier zurückgebe.
Nun, dann poste ich Favoriten,
Sie sehen, wie ich das mache, sage ich diese AFS Sammlung Favoriten und ich werde sagen „hinzufügen“.
Schauen Sie sich das Dokument an, das ich in meinen Favoriten ablage.
Das Dokument selbst enthält die Benutzer-ID und die Dish-ID.
Also, diese beiden Informationen hier eingeschlossen und wenn
nicht, dann wird es das Versprechen ablehnen, ohne dass hier kein Benutzer angemeldet ist.
In ähnlicher Weise für den Löschfavoriten, den ich hier implementiert habe.
Verbringen Sie noch einige Zeit damit, diesen Code zu durchlaufen, um zu verstehen, wie ich
Firebase und Angular Fire zu npm-Modulen genutzt habe,
um mit meinem Firebase-Server zu kommunizieren, den ich in der vorherigen Übung eingerichtet habe.
Damit habe ich Ihnen einen schnellen Überblick darüber gegeben,
wie Sie Ihre Angular-Anwendung so einrichten können, dass sie mit
Firebase-Back-End als Dienst interagieren und dann
verschiedene Operationen unterstützen können, die Sie innerhalb Ihrer Angular-Anwendung haben.
Wie ich bereits gezeigt habe,
sieht diese Angular-Anwendung genau wie
die vorherige Version der Angular-Anwendung aus, in der wir
unsere eigene Version unseres Express MongoDB-Servers verwendet haben.
Nun, damit schließe ich diese spezielle Übung ab, in der ich in
dieser Lektion über Back-End als Service illustriert habe und
Firebase als Beispiel für ein Back-End als Service demonstriert habe.