Lasst uns auf dem Bassmarkt angeln gehen.
Wir beginnen mit Firebase,
dem Premium-Angebot von Google.
Lassen Sie uns ein wenig über Firebase verstehen,
einen Firebase-Server konfigurieren,
und dann werden wir uns die Winkelanwendung ansehen,
die ich basierend auf
der vorherigen Winkelanwendung nachrüsten werde, die Sie in der früheren Vorlesung gesehen haben.
Wir werden es ändern, um Firebase als Backend zu nutzen.
So, wie wir am Ende dieser Lektion,
dieser Übung und der folgenden Übung sehen würden,
können wir leicht eine eckige Anwendung durchführen und sie nachrüsten, um
Firebase als Backend als Dienstleister zu nutzen.
Um mit der Reise zu beginnen,
gehen wir zu firebase.google.com, um ein wenig über Firebase zu verstehen.
Ein Thema, das eine ganze Präsentation über Firebase macht,
werde ich Sie schnell durchlaufen, was
auf der Firebase-Website selbst erklärt wurde, weil sie Ihnen
genügend Details darüber geben, wie Firebase selbst verschiedene Funktionen unterstützt.
Lassen Sie uns diese Website durchlaufen, um zu verstehen, wie Firebase funktioniert.
Wenn Sie also auf die Website gehen, wie Sie sehen können,
heißt es, Firebase hilft Ihnen, bessere mobile Apps zu entwickeln und Ihr Geschäft auszubauen.
Und dann, wie Sie hier sehen,
erklärt es Ihnen die Details darüber, wie Sie Ihre Apps
schnell erstellen können, ohne die Backend-Infrastruktur für Ihre Anwendung verwalten zu müssen,
und eine einzige Konsole, die eine Reihe von Produkten enthält, die zusammenarbeiten.
Dies sind also alle von Google angebotenen Produkte, die zusammenarbeiten, um Ihre Back-End-Anforderungen zu erfüllen.
Und auch hier können Sie
viele der ergänzenden Produkte nutzen, die von Google erhältlich sind.
So
werden wir insbesondere in dieser Übung die Cloud Firestore nutzen,
die neue Bereitstellung von Google.
Wir schauen uns später weitere Details dazu an.
Wir untersuchen, wie wir Authentifizierungsunterstützung verwenden können
, die von Firebase zur Authentifizierung von Benutzern zur Verfügung gestellt wird.
Wir werden uns den Cloud-Speicher ansehen, um unsere Bilddateien zu speichern und sie bereitzustellen.
Und dann schauen wir uns auch an, wie wir all diese zusammen mit
dem Firebase-bezogenen Knotenmodul nutzen können, das wir zusammen mit dem
angularfire2-Knotenmodul in unsere Winkelanwendung integrieren
können, so dass wir mit unserem Firebase-Backend als Service kommunizieren können.
Außerdem
sehen wir, wie der
Firebase-Bindestrich selbst verschiedene Funktionen bietet, wie es Ihnen ermöglicht,
verschiedene Benutzerfunktionen für verschiedene Onboarding Ihrer Anwendung bereitzustellen und
wie einfach es ist, Ihr Backend entweder mit einem iOS,
Android oder der Webanwendung zu integrieren .
Insbesondere werden wir uns die Webanwendung und die Verwendung
von JavaScript anschauen und auch die Verwendung, wie wir
dies etwas später in unsere Winkelanwendung integrieren werden.
Und auch, Firebase bietet eine Echtzeit-Datenbank,
sowohl die ursprüngliche Echtzeit-Datenbank,
als auch die neue Cloud Firestone,
ermöglicht es Ihnen, die Daten automatisch zwischen verschiedenen Benutzergeräten zu synchronisieren. Alle
Änderungen,
die auf der Serverseite vorgenommen werden, werden automatisch auf alle Clients
übertragen, und natürlich können Sie weitere Details über Firebase auf dieser Website lesen.
Und der Einstieg ist sehr einfach, da das Basisangebot für Benutzer kostenlos ist.
Also lasst uns anfangen, Firebase zu verwenden.
Wir richten unser Firebase-Konto ein und greifen dann auf unser Backend als Server zu und richten es ein
, den wir dann von unserer Winkelanwendung nutzen werden.
Dies ist also eine kurze Tour durch Firebase,
aber anstatt nur diese anzusehen,
lassen Sie uns reingehen und unsere Hände schmutzig machen,
eine Firebase-Basis
wieder in den Dienst konfigurieren und sie dann in unserer eckigen Anwendung verwenden.
Also, um loszulegen,
wie Sie hier am rechten Rand sehen werden,
heißt es gehen Sie zur Konsole.
Offensichtlich sollten Sie ein Google-Konto haben, um Firebase nutzen zu können.
Das versteht sich von selbst,
und Sie sollten in Ihrem Google-Konto eingeloggt sein.
Wie Sie sehen können,
bin ich bereits in meinem Google-Konto.
Das gibt mir Zugriff auf meine Konsole.
Wenn Sie nicht angemeldet sind,
ist es besser für Sie, sich in Ihrem Google-Konto anzumelden.
Wenn Sie also zur Konsole gehen,
gelangen Sie hier zur Firebase Services-Konsole,
wo Sie Projekte einrichten können.
Wenn Sie also zur Konsole gehen,
wie Sie sehen können, heißt es, fügen Sie ein Projekt hinzu.
Und wie Sie sehen können,
habe ich bereits versucht,
ein anderes Firebase-Projekt einzurichten, bevor ich es Ihnen erklärt habe.
Also lasst uns hier ein Projekt einrichten.
Also klicken wir auf das Add-Projekt,
und das sollte ein schönes kleines Fenster auftauchen,
in dem Sie Informationen eingeben können.
Also nennen wir dieses Projekt als ConfusionServer,
wie Sie es erwarten und konfigurieren es überall dort, wo Sie sich gerade befinden.
Also werde ich es konfigurieren, um
Hong Kong zu verwenden und ein Projekt zu erstellen.
Und sobald Ihr Projekt erstellt wurde,
wird Ihnen dies von Firebase präsentiert.
Und hier, würden Sie sehen, dass das erste, was Sie möchten,
Informationen über Ihre Firebase-Konfiguration
, so dass Sie es in Ihrer Winkelanwendung verwenden können. Um
das zu tun,
klicken Sie hier auf diesen Button.
So heißt es, fügen Sie Firebase zu Ihrer Web-App hinzu.
Und das wird Ihnen eine Reihe von Informationen liefern, die
Sie kopieren und speichern sollten, weil ich
diese Informationen nutzen werde, um
meine Winkelanwendung ein wenig später in der nächsten Übung zu konfigurieren.
Speichern Sie diese Informationen also an einem geeigneten Ort, damit Sie
diese Informationen nutzen können, wenn Sie den Standort Ihres Kunden einrichten.
Im nächsten Schritt werde ich hier ein paar Konten einrichten.
Also lassen Sie mich hier auf die Authentifizierung klicken.
Und wenn die Authentifizierung aktiviert ist,
richten wir die Anmeldemethoden ein, die wir für unseren Firebase-Server verwenden werden,
und in meinem Fall
werde ich das E-Mail-Passwort als eine der Optionen verwenden.
So werden wir das E-Mail-Passwort aktivieren.
Ich werde auch die Google-Anmeldung aktivieren.
Diese beiden sind also aktiviert.
Wenn Sie möchten, können Sie andere Möglichkeiten zur Authentifizierung der Benutzer aktivieren.
Als nächstes gehen Sie zu den Benutzern, jetzt,
wenn Sie sich mit Ihrem Google-Konto bei dieser Anwendung anmelden,
wird dieser Benutzer automatisch zu Ihrem System hinzugefügt.
Aber jetzt werde ich einen Benutzer mit einer E-Mail und einem Passwort einrichten.
Also werde ich eine admin@confusion.net einrichten,
und ich werde hier ein Passwort einrichten und den Benutzer hinzufügen.
Dies wird also ein Benutzer sein,
der sich mit der E-Mail-Passwort-Kombination anmelden kann.
Wir können uns auch anmelden, um auf diesen Zugriff über unser Google-Konto zuzugreifen.
Also meine eckige Anwendung,
werde ich einrichten, um sowohl die
E-Mail-Passwort-Art der Anmeldung als auch durch Google-konto-basierte Anmeldung zu verwenden.
Danach werden wir in den Speicher gehen.
Also werden wir als nächstes Speicher einrichten.
Der Speicher ist also, wo Sie eine Möglichkeit einrichten können,
Dateien auf Ihren Server hochzuladen und sie dann für die Verwendung zur Verfügung zu stellen.
Also dieser Speicher, Ich werde meinen Speicher einrichten, um
die Bilder zu speichern, die wir verwenden und speichern von unserer Server-Site.
Wenn Sie also Speicher einrichten,
wird der Satz von Sicherheitsregeln erstellt,
die angeben, welche Art von Operationen vom Benutzer zugelassen werden.
Es sagt also erlauben lesen,
schreiben: wenn request.auth nicht gleich null ist,
was bedeutet, dass nur Benutzer, die sich bei
diesem Server angemeldet haben, lesen und schreiben können.
Jetzt werde ich dies ändern, um Lesevorgänge für jedermann zu ermöglichen,
aber Schreibvorgänge werden nur von authentifizierten Benutzern erlaubt.
Also werden wir sagen, ich habe es
bekommen, und dann werde ich anfangen.
Also, in den Regeln
werde ich hier auf die Regeln gehen und dann die Regeln ändern,
damit Benutzer vom Server lesen können.
Jetzt können wir es auf einer bestimmten Ordnerebene einrichten,
aber da dies eine einfache Anwendung ist,
werde ich sie auf der gesamten Speicherebene einrichten.
Also, hier, ich werde sagen, erlauben lesen,
und dann werde ich diese Regel ändern, um zu sagen, erlauben lesen,
und ich werde sagen, erlauben Schreiben, wenn Anfrage.
Wie Sie sehen können,
können Benutzer aus dem Speicher lesen.
Jeder Benutzer kann lesen, auch ohne Authentifizierung,
aber das Schreiben ist nur auf Benutzer beschränkt, die sich beim System anmelden.
Dies ist also eine einfache Änderung der Zugriffsregeln,
der Sicherheitsregeln.
Sie können hier ausführlicher sein,
aber im einfachen Beispiel
werde ich dabei bleiben.
Und dann veröffentlichen wir diese Regeln auf unserem Server.
Dann gehe ich zurück zu Dateien, in den Dateien,
werde ich hier einen neuen Ordner mit dem Namen Bilder erstellen.
Nun, wie Sie sehen,
können die Regeln für diesen speziellen Ordner „Bilder“ eingerichtet werden,
so dass Benutzer nur aus diesem Ordner „Bilder“ lesen und dann nur
autorisierte Benutzer in diesen Bilderordner hochladen können, wenn Sie dies wünschen.
Aber im Moment werde ich es als solche belassen,
als die generische Regelgruppe, die ich dort konfiguriert habe.
Gehen Sie nun in den Ordner Bilder.
Ich werde hier eine Reihe von Bildern in diesen Ordner hochladen.
Lassen Sie mich also ein paar Bilder schnappen, die ich für meine Anwendung habe.
Und so hatte ich früher diese Bilder in meinen anderen Anwendungen verwendet.
Ich werde alle diese Bilder auswählen und sie dann in den Google-Speicher hochladen.
Diese Bilder sind in
Ihrer Datei images.zip verfügbar, die ich Ihnen in der vorherigen Übung in der
vorherigen Lektion zur Verfügung gestellt habe.
Laden Sie einfach die Datei images.zip herunter,
oder wenn Sie bereits heruntergeladen haben,
sollten Sie diese Bilder dabei haben, damit Sie sie in die Datei hochladen können.
Wenn Sie diese Bilder hochladen,
können Sie auf eines dieser Bilder klicken und auch feststellen, dass unten unten,
es gibt Ihnen diesen Speicherort.
Sie müssen diese URL für diesen Speicherort kopieren, denn wenn wir unsere Datenbank konfigurieren,
im Bildfeld unserer JSON-Daten,
werden wir jeden von ihnen mit dieser URL für das entsprechende Bild konfigurieren.
Als nächstes werden wir zu dieser Datenbank übergehen.
In der Datenbank haben Sie zwei Möglichkeiten.
Sie können mit der älteren Echtzeit-Datenbank gehen,
die von Google unterstützt wird,
und in der Tat die meisten aktuellen Anwendungen, die Firebase verwenden, verwenden die Echtzeit-Datenbank.
Aber dann, in diesem Kurs,
werden wir die neuere Firestore Beta erkunden.
Die Firestore Beta bietet eine viel umfassendere Echtzeit-Datenbank.
Dies ist also die nächste Generation der Echtzeit-Datenbank und bietet
viel fortgeschrittenere Möglichkeiten,
ihren Speicher für uns abzufragen und automatisch zu skalieren.
Also gehen wir mit der Firestore Beta.
Nun, einer der Gründe für mich, wieder mit
der Firestore Beta zu beginnen, ist einfach, weil es
uns erlaubt, die Informationen in Form von Dokumenten und Sammlungen zu speichern.
Nun, aus unserer Erfahrung mit MongoDB,
wissen wir bereits, wie Dokumente und Sammlungen funktionieren,
und deshalb ist die Firestore Beta eine viel bessere Wahl für uns,
da wir bereits wissen, wie das konfiguriert ist.
Wenn Sie standardmäßig die Standard-Echtzeitdatenbank verwenden möchten,
können Sie dies tun.
Aber die Echtzeitdatenbank speichert alle Ihre Daten in
einem großen Baum und verfügt über eine begrenzte Anzahl von Abfragefunktionen.
Also für die Sicherheitsregeln für meine Firestore,
werde ich mit dem Testmodus gehen,
wo ich es einfach offen lassen werde, damit Leute im Moment lesen und schreiben können.
Und das ist in Ordnung, weil wir nur die Datenbank testen, aber normalerweise
würde ich vorschlagen, hier eine konfiguriertere Art zu verwenden, mit Ihrer Datenbank zu arbeiten.
Also beginnen wir mit einem Testmodus.
Und so richten wir zunächst die Sicherheitsregeln wie diese ein.
Sie können mit einem aufwendigeren Sicherheitstool-Setup gehen.
Wie Sie mit dem Speicher gesehen
haben, hatten wir so eingerichtet, dass Lesevorgänge von
jedermann erlaubt sind, aber Schreibvorgänge sind nur von autorisierten Benutzern erlaubt.
Wir können auch hier eine ähnliche Funktionalität einrichten.
Das ist also der Verwirrungsserver.
Und so
lassen Sie mich in den Regeln zu diesem Speicher gehen und dann einfach die Regel aus dem Speicher hier kopieren,
und wir werden die gleiche Art von Einschränkung hier einrichten.
So werden wir jedem erlauben, zu lesen, aber nur
autorisierte Benutzer, um in die Datenbank zu schreiben.
Also gehen wir zurück zur Datenbank, in den Regeln,
können wir sagen, erlauben lesen: und dann die zweite Zeile werde ich das ersetzen und
sagen lassen schreiben, wenn request.auth nicht gleich null ist.
Also nur Personen, die eingeloggt sind,
werden sie in der Lage sein, Änderungen an den Daten vorzunehmen, so dass wir
zumindest einen gewissen Schutz für meine Daten haben.
Jetzt, hier, können wir jetzt grafisch in die Daten zu unserer Anwendung hinzufügen.
Und das finde ich den schnellsten Weg, die Daten hinzuzufügen.
Wenn Sie die Client-Site einrichten,
können Sie auch Daten von der Client-Site posten, aber
jetzt starten wir, indem wir hier drei Sammlungen hinzufügen.
Also die erste Sammlung, die ich hinzufügen werde, ist Geschirr.
Und wir können Dokumente zum Geschirr hinzufügen,
damit wir unser erstes Dokument hinzufügen können.
Also, um ein Dokument zu den Gerichten hinzuzufügen,
denken Sie daran, dass ich Ihnen die db.json-Datei dort gegeben habe.
So können Sie mit der Datei db.json gehen und dann
Schritt für Schritt jedes der Gerichte hinzufügen, die wir haben.
Also, hier werde ich das erste Gericht hier konfigurieren.
Für das Gericht können wir Firebase erlauben, automatisch die ID für unser Dokument zuzuweisen.
Also lasse ich das automatisch zuweisen.
Also fügen wir hier das erste Gericht hinzu.
Der Name des Feldes und das erste Gericht hier.
Also müssen wir
jedes der Gerichte hier sorgfältig hinzufügen, Stück für Stück.
Also sagen wir Name,
und dann sagen wir Kategorie, die Netz ist.
Und dann werden wir in Bild hinzufügen,
das ich zurückkommen und ein wenig später hinzufügen werde, weil ich
die Bild-URL aus meinem Speicher kopieren und hier verwenden muss.
Dann werden wir es als Hot, Preis beschriftet haben.
Also haben wir Kategorie,
Name, Kategorie, Bild, Etikett, Preis
, Beschreibung, die ich aus meiner db.json-Datei kopieren und einfügen werde.
Und schließlich das Featured Flag,
das ich als Boolean setzen und das in diesem Fall auf true setzen werde.
Dies wird also unser erstes Dokument sein, das wir hier in unsere Datenbank aufnehmen werden.
Sie würden also sofort bemerken, dass
in unserer Datenbank das erste Dokument hinzugefügt wird.
So sehen wir Gerichte und das erste Dokument,
und Sie können die Informationen zu diesem Dokument hier konfiguriert sehen.
So haben wir Kategorie, Beschreibung,
Featured, Bild, Etikett, Name und Preis.
Wir werden hier auch ein weiteres Feld namens CreateDat hinzufügen,
und dies wird ein Zeitstempel sein.
Und der Zeitstempel wäre der heutige Zeitstempel und dann lasse ich dort Zeitwert als solchen.
So können wir auch Zeitstempel hinzufügen, und
wir fügen auch einen weiteren Zeitstempel als UpdateDat und mit dem Zeitstempel hier hinzu.
Also haben wir hier noch zwei Zeitstempel.
Jetzt, für das Bild,
werden wir hier zum Speicher gehen.
Und aus unserem Speicher, in den Bildern,
werden wir die Bilddatei hier auswählen
und dann zum Speicherort der Datei gehen und dann diese URL hier kopieren.
Wenn wir also nur darauf klicken
, wird diese URL kopiert.
Also kommen wir zurück zu
dieser Datenbank und
bearbeiten dann das Bildfeld und fügen dann diese URL dort hinzu.
So können Sie voran gehen und die restlichen Gerichte,
die Promotionen und auch die Führer hinzufügen.
Also, sobald Sie alle Schritte abgeschlossen,
die einige Zeit dauern wird, bis Sie Schritt für Schritt zu tun.
Also lasse ich Sie beenden, all diese Informationen zu Ihrer Firebase hinzuzufügen.
Nachdem Sie also alle Daten in Ihre Datenbank eingegeben haben,
sollten Ihre Gerichte hier vier Gerichte haben.
Stellen Sie erneut sicher, dass Sie
das Bildfeld mit der URL aus diesem Speicher für dieses bestimmte Bild initialisieren.
Sie haben also ein, zwei, drei und vier Gerichte.
Dann haben Sie entsprechend vier Anführer.
Eins, zwei, drei und vier und eine Beförderung ist hier.
Stellen Sie erneut sicher, dass Sie die Images für jedes von
ihnen entsprechend aus dem Firebase-Speicher initialisieren.
Damit ist unser Server komplett konfiguriert.
Unser Firebase-Server verfügt also über alle Daten, die benötigt werden, damit er unseren Plänen gerecht wird.
Wir werden nun mit der nächsten Übung fortfahren,
wo wir unseren Winkelclient so konfigurieren, dass er auf
dieses Firebase-Backend als Dienst zugreifen kann und dann Daten abrufen
und dann auch Daten an ihren Firebase-Server übertragen kann.
Damit schließen wir diese Übung ab.
In dieser Übung haben wir gesehen, wie einfach es für uns ist,
unser Firebase-Backend als Dienst für die Authentifizierung,
zum Speichern und Bereitstellen von Dateien sowie zum Speichern von Informationen in
der Cloud Firestore Datenbank in Form von Sammlungen und Dokumenten innerhalb von Sammlungen zu konfigurieren.
Damit schließen wir diese Übung ab.