[MUSIC]
In der vorherigen Übung hatten wir bereits unser
Firebase-Back-End als Service mit dem neuen Projekt konfiguriert.
Richten Sie auch viele Daten in unserer Datenbank ein und richten Sie dann unseren Speicher ein und
konfigurieren Sie unseren Firebase-Server so, dass er als Backend für unsere React-Anwendung fungiert.
In dieser Übung betrachten wir eine modifizierte Version unserer React-Anwendung,
die das Firebase-Back-End als Dienst nutzt, um
die Daten zu erhalten und auch Informationen für Benutzer auf dem Server zu speichern.
Außerdem nutzen wir die Authentifizierungsunterstützung, die Firebase
zur Authentifizierung von Benutzern bietet.
Sowohl mit einem E-Mail- und Passwortansatz als auch mit einem Google-Konto.
Um mit dieser Übung zu beginnen, gehen Sie zu einem geeigneten Speicherort auf Ihrem Computer,
und klonen Sie dann das angegebene Git-Repository. Ich habe
Ihnen die Firebase-Version unserer React-Anwendung zur Verfügung gestellt.
Geben Sie also git clone https://github.com/jmuppala/conFusion-Rea -
CT-Firebase.git ein.
Und dann klonen Sie das Git-Repository.
Und sobald das Git-Repository auf Ihren Computer geklont wurde, wechseln Sie
in den Confusion-React-Firebase-Ordner, der zu diesem Zeitpunkt erstellt wird.
Und dann würden Sie bemerken, dass dort bereits eine Reihe von Dateien installiert sind.
Lassen Sie uns voran und machen Sie eine Garninstallation, um alle
Knotenmodule zu installieren, von denen diese Angular-Anwendung abhängig ist.
Diese Version installiert auch zusätzliche Knotenmodule namens Firebase.
Ich werde später in dieser Übung etwas mehr über diese Knotenmodule erklären.
Sobald die Projektinstallation abgeschlossen ist, öffnen Sie das Projekt in einem Editor.
Und dann im Projekt, gehen Sie in den Ordner „Quelle“ > „Firebase“ und
öffnen Sie dann die Datei „config.js“.
Und in der Datei config.js sehen Sie eine Reihe von Firebase-Konfigurationen
, die Sie mit Ihrer eigenen Firebase-Serverkonfiguration einrichten müssen.
Wie wir in der vorherigen Übung gesehen haben, können wir alle diese Informationen erhalten, wenn wir
auf diese Schaltfläche klicken hier genannt Firebase zu Ihrer Web-App hinzufügen.
Kopieren Sie dann diese Informationen und
fügen Sie diese Informationen in Ihre Datei config.js ein.
Um diese durch Ihre spezielle Firebase-Serverkonfiguration für
all diese Informationen zu ersetzen.
Und sobald das abgeschlossen ist, können Sie Ihre
React-Anwendung starten, indem Sie garn start an der Eingabeaufforderung eingeben.
Sobald Ihre React-Anwendung kompiliert ist, und so
hier würden Sie die Homepage sehen, die über Seite, wie wir hier sehen.
Und die Speisekarte.
Und die Kontaktseite.
Loggen wir uns ein,
lassen Sie mich zurück zur Homepage gehen und dann loggen wir uns ein.
Wenn Sie also auf die Login-Schaltfläche klicken,
sehen Sie hier das typische Formular mit der E-Mail und den Passwort-Informationen.
Sie sehen auch eine erste Schaltfläche mit dem Namen 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 zu autorisieren.
Dann sehen Sie, in der rechten Ecke, sehen Sie sofort Ihren Namen
hier angezeigt wird, und mit der Login-Button wird nun in einen Logout-Button umgewandelt.
Also, an dieser Stelle sollten Sie in der Lage sein, Ihre Favoriten zu sehen.
Und in diesem Fall, da wir keine Favoriten haben, so
wird es an dieser Stelle leer sein.
Ich gehe zurück zum Menü und füge dann ein paar Elemente zu meinen Favoriten hinzu.
Also werde ich dieses Gericht zu meinen Favoriten hinzufügen, also wenn ich auf dieses Gericht klicke,
wirst du sofort sehen, dass das Symbol zu einem gefüllten Herzen wird.
Und lassen Sie mich auch noch ein Gericht auswählen und es zu meinen Favoriten hinzufügen.
Ad dann jetzt, wenn Sie zu den meinen Favoriten gehen, werden Sie ein paar
Gerichte in Ihre Favoriten hinzugefügt sehen, wie Sie erwarten würden.
Und wieder können Sie die Gerichte löschen, indem Sie auf das
Löschkreuz klicken, um das Element aus Ihrer Favoritenliste zu entfernen, wie hier gezeigt.
Jetzt können wir auch hinzufügen, wie Sie erkennen, 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 sobald Sie den Kommentar einreichen, werden Sie sofort sehen, dass
Ihr Kommentar hier mit dem Namen des Autors angezeigt wird.
Und mit diesem Datum, wie hier gezeigt.
So können Sie sehen, dass die Benutzereinreichung von Kommentaren
für jedes bestimmte Gericht unterstützt wird.
So funktioniert Ihre Anwendung mit dieser
Firebase als Back-End als Service.
Nun, natürlich müssen Sie sich fragen, wie wir unsere Anwendung neu gestalten, um
Firebase zu nutzen, anstatt den Standard
Express MongoDB Server zu verwenden, den wir zuvor erstellt haben?
Um Ihre Anwendung für die Kommunikation mit dem Firebase-Server zu konfigurieren,
müssen Sie das Firebase-Modul installieren.
Das Firebase-Modul stellt, wie Sie hier sehen, das Tool und die
Infrastruktur bereit, mit denen Sie mit dem Firebase-Server kommunizieren können.
Und um dies in Ihrer Anwendung zu installieren,
geben Sie das install minus save firebase ein.
Nun, wie nutzt man diese zu machen?
Ich werde das veranschaulichen, indem Sie schnell durch den modifizierten Code laufen,
wo wir Firebase verwenden, um die Anwendung zu modifizieren, die wir
zuvor entwickelt haben, um den Firebase-Server als Back-End als Service zu nutzen.
Lassen Sie uns einen kurzen Rundgang durch unsere modifizierte React-Anwendung machen, um zu verstehen,
wie sie neu konfiguriert wurde, um mit unserem Firebase-Server zu kommunizieren.
Wir beginnen unsere Reise in package.json Datei.
Und in der package.json-Datei
werden Sie feststellen, dass ich das Firebase npm-Modul dazu hinzugefügt habe.
Wenn Sie also das Git-Repository klonen und die Garn-Installation durchführen,
wird das Firebase-Modul automatisch in Ihre Anwendung installiert.
Wenn Sie eine neue React-Anwendung für die
Kommunikation mit dem Server konfiguriert haben,
müssen Sie das Firebase-Modul explizit in Ihrer Anwendung installieren.
Danach werden Sie Änderungen im Firebase-Ordner bemerken.
Hier haben wir bereits die Konfigurationsdatei gesehen.
Die andere Datei, die Sie hier bemerken werden, heißt firebase.js.
Jetzt konfigurieren wir unsere Anwendung, um mit
dem Firebase-Server zu kommunizieren.
Also importieren wir die Konfiguration hier.
Und dann Firebase aus Firebase importieren.
Und dann starten Sie die App hier, indem Sie die Konfiguration an die Firebase übergeben,
also geben Sie hier alle Konfigurationsinformationen an
, damit Ihr Client mit dem Firebase-Server kommunizieren kann.
Darüber hinaus exportiere ich einige dieser Exporte von
hier genannt auth, fireauth und so weiter.
Diese werde ich in den Action-Erstellern verwenden,
um mit meinem Firebase Server zu kommunizieren.
Danach befinden sich die wichtigsten Änderungen in der ActionCreators-Datei.
Jetzt habe ich keine neuen Aktionen hinzugefügt, sondern die gesamte Kommunikation
mit dem Server wird nun geändert, um mit unserem Firebase Server zu kommunizieren.
Anstatt den Fetch zu verwenden, wie wir es früher getan
haben, werden wir jetzt firestore verwenden.
Wie Sie sehen können, habe ich die auth, firestore,
fireauth und firebasestore aus dem Firebase-Modul importiert, das
ich zuvor im Firebase-Ordner eingerichtet habe.
Und dann wird es mir ermöglichen, mit meinem Firebase-Server zu kommunizieren.
Um eine Sammlung von meiner Firebase zu holen,
sagen wir einfach firestore.collection und geben dann den Namen der Sammlung an.
Und dann können Sie der Sammlung hinzufügen, indem Sie sagen, hinzufügen, wie Sie hier sehen können,
was das spezifische Element, das Sie hinzufügen, in Ihre Sammlung nimmt.
Das ist also das Dokument, das wir unserer Sammlung hinzufügen.
Dies ist also für den Post-Kommentar, wie Sie hier sehen können.
Und wenn Sie das posten, dann werden Sie mit einem DocRef geliefert,
das ist der Verweis auf
das Dokument, mit dem Sie dann das Dokument von Ihrem Server abrufen können.
Die Funktionsweise von Firebase besteht nun darin, dass
die ID getrennt vom tatsächlichen Inhalt der Dokumente bereitgestellt wird.
Firebase speichert also die ID und die Dokumentdaten selbst getrennt.
Also hier muss ich die beiden hier explizit zu
einem JavaScript-Objekt kombinieren, das hier als Kommentar bezeichnet wird.
Wie Sie aus dem Dokument sehen, so dass Sie feststellen, dass, wenn ich
ein Element in eine Sammlung einfüge, es hier einen DocRef zurückgibt.
Und aus dem DocRef kann ich die ID des Dokuments bekommen.
Und was ich hier mache, ist, dass ich
das entsprechende Dokument hier abhole.
Und dann, sobald das Dokument abgerufen wurde, sollte jetzt natürlich das Dokument existieren,
also sollte das immer wahr sein, weil wir gerade das Dokument eingefügt haben.
Aber nur der Vollständigkeit halber mache ich eine explizite Prüfung dafür.
Und danach werden die Daten, die sich im Dokument befinden,
erhalten, indem doc.data gesagt wird, wie Sie hier sehen.
Und dann wird die ID des Dokuments von doc.id erhalten,
also sind diese beiden getrennt.
Aber innerhalb unseres React-Codes haben wir
hier immer die ID und die Daten zusammen als einzelnes JSON-Dokument oder JavaScript-Objekt gespeichert.
Deshalb kombiniere ich
hier die beiden zu einem einzigen JavaScript-Objekt.
Sie werden sehen, wie ich dies wiederholt für, sagen wir zum Beispiel
für kühne Aktionen und so weiter, auch in den ActionCreators.
Und danach füge ich den Kommentar in meinen Redux-Shop hier hinzu,
und der Rest des Codes bleibt als solcher.
Ebenso, wenn Sie Gerichte holen,
werden Sie sehen, wie wir mehrere Gerichte aus der Firebase holen.
So sehen wir firestore.collection Gerichte bekommen und erhalten die Gerichte.
Jetzt, wenn Sie das erhalten, dann wird es mir einen
Snapshot-Wert geben, der die Momentaufnahme des aktuellen Zustands dieser Sammlung ist,
und daraus muss ich jedes Gericht abrufen.
Und dann rekonstruiere ich hier meine Auswahl an Gerichten.
Beachten Sie nun, dass, wie gesagt, die ID und die Daten getrennt sind, also
muss ich sie miteinander kombinieren, denn so verwende ich die Daten in meiner
React-Anwendung, also schiebe ich das in das Geschirr Array.
Und dann endlich die Gerichte zurückgeben, die dann in meinen
Redux Store hier eingefügt werden.
Diese Art von Änderungen wurden also in den ActionCreators vorgenommen.
Jetzt wird der Anmelde- und Abmeldevorgang unten hier behandelt.
Also für die Anmeldung, die Authentifizierung, die wir aus der Firebase importiert haben,
ist die Auth diejenige, die es mir erlaubt, die Anmeldung und Abmeldung durchzuführen.
Also, wenn Sie sich mit E-Mail und Passwort anmelden,
bietet es mit dieser Methode namens SignInWiTheMailAndPassword.
Und dann geben Sie die E-Mail und das Passwort als die beiden Parameter hier.
Und dann ermöglicht es Ihnen, sich anzumelden.
Und wenn Sie sich anmelden, stellt die Auth dieses Objekt namens CurrentUser auf der Authentifizierung zur Verfügung.
So erhalten Sie die Informationen des Benutzers, indem Sie Auth.currentUser hier sagen.
Und auch speichere ich die Benutzerinformationen in meiner Datenbank.
Jetzt verfolge ich keine Token und
solche Dinge explizit, weil dies automatisch von auth für mich verfolgt
wird, was vom Firebase npm-Modul bereitgestellt wird.
Also nutze ich das nur, um die aktuelle Verwendung zu verfolgen.
Wenn der aktuelle Benutzer null ist, weiß ich, dass mein Client
keinen Benutzer am Server angemeldet hat.
Und in ähnlicher Weise, um den Benutzer abzumelden, sage ich einfach auth.signOut.
Die Dokumentation zur Verwendung des Filebase
npm-Moduls ist nun auch in der Firebase-Dokumentation verfügbar.
So können Sie leicht nachsehen, um zu verstehen, wie Sie
Firebase nutzen können, um all diese verschiedenen Funktionen zu nutzen
, die über das Firebase npm-Modul verfügbar sind.
Auch für Favoriten, veröffentlichen wir entweder einen Favoriten und so
müssen Sie dann Artikel posten, also würden Sie sagen, hinzufügen, und
wenn Sie einen Artikel erhalten müssen, werden Sie sagen, get.
Und Sie können sogar ein Element aus einem bestimmten Dokument in den Sammlungen erhalten.
Wenn Sie ein bestimmtes Dokument in der Sammlung möchten, sagen Sie .doc.
Und dann geben Sie hier die ID des Dokuments an.
So können Sie ein bestimmtes Dokument erhalten.
Löschen Sie auch Favoriten, und holen Sie Favoriten und so weiter.
Damit die Favoriten in meiner Firebase gespeichert werden,
werden hier die Favoriten als Benutzer-ID und die Dish ID gespeichert.
Jetzt hat firestore selbst keine Möglichkeit, die
Gerichteninformationen in die Schalen-ID zu füllen.
Also bin ich nur holen alle Gerichte Informationen,
so dass das ist jeder Favorit ist ein Paar, Benutzer und Gericht ID Paar.
Also hole ich das nur in meine Favoriten.
Aber dann bedeutet das auch, dass ich meine Favoriten-Komponente ändern muss, so dass
es die Schüssel ID verwenden und dann in die Gerichte, die
in meinem Redux Store gespeichert sind, indexieren kann, und erhalten Sie die Teller Informationen.
Oder die Alternative wäre, zum Server zu gehen und dann die Informationen zu holen.
Aber da habe ich bereits die Daten über die Gerichte in meinem Redux Store,
weil ich bereits die Abholgerichte gemacht habe, um alle Informationen
über die Gerichte zu holen.
Ich gehe einfach direkt in das Geschirr Objekt in meinem Redux riss und
hole diese Informationen.
Dies bedeutet also auch, dass es Änderungen an der Hauptkomponente gibt.
In der Hauptkomponente würden Sie feststellen, dass, wenn ich den Favoriten hier für
das Gericht Detail mache, ich das Gericht einfach mit diesem DishiD vergleichen müsste.
Also das Gericht hier in meinem Liebling ist die Dishid selbst, also
muss ich nur den Vergleich machen.
Es wird also geringfügige Änderungen an dieser Zeile in der DisHID geben.
Und Sie werden auch bemerken, dass, wenn ich die Favoriten anrufe,
zusätzlich zur Bereitstellung ihrer Favoriten,
ich auch das Geschirr als eine der Requisiten für meine Favoriten liefere.
Das ist also eine weitere Änderung, die Sie in der Hauptkomponente bemerken werden.
Und in ähnlicher Weise
werden Sie in der Lieblingskomponente feststellen, dass
Sie in der Lieblingskomponente unten hier feststellen werden, dass, wenn ich die Lieblingskomponente rendere.
Dann, genau hier in dieser Funktion hier, const Favoriten,
was ich tue, ist, ich gehe in die Favoriten Gerichte,
Gerichte ist eine Reihe von all den Dishids hier, also mappe ich durch, dass.
Also sieh dir jeden Dishid an, dann
habe ich aus dem Geschirr dieses spezielle Gericht herausgefiltert.
Und dann erhalten Sie die DishID, also
hier sehen Sie mich mit dem JavaScript-Array-Filter hier.
Es wird diese spezifische Gericht-Informationen herausfiltern und
dann das bestimmte Gericht rendern.
Dies ist eine zusätzliche Arbeit, die ich in meiner
Lieblingskomponente tun muss, um jedes der Gerichte dort zu rendern.
Also, solche kleinen Modifikationen werden Sie in ein paar der Komponenten bemerken,
insbesondere das Gericht Detail, der Favorit und die Hauptkomponente.
Hier wurden einige kleinere Änderungen vorgenommen, um der
React-Anwendung die Nutzung des Firebase-Servers zu erleichtern.
Dies ist eine kurze Überprüfung, wie
meine React-Anwendung geändert wurde, um mit meinem Firebase Server zu kommunizieren.
Nun, wie bei Angular, hatten wir auch das Angularfire, das
uns eine Möglichkeit bot, zusammen mit Firebase zu nutzen, um mit dem Server zu kommunizieren.
React hat kein solches Gegenstück, also verwende ich direkt das Firebase
npm-Modul, das die grundlegende Basis für den Zugriff auf den Firebase-Server bereitstellt.
Und dann nutzen Sie die Funktionen, die es bietet, um mit meinem
Firebase Server zu kommunizieren.
Verbringen Sie noch einige Zeit damit, diesen Code zu durchlaufen, um zu verstehen, wie
ich Firebase npm-Module 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
React-Anwendung so einrichten können, dass sie mit Firebase-Back-End als Dienst interagieren und
dann verschiedene Operationen unterstützen können, die Sie in Ihrer Anwendung 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.
( MUSIK)