Prüfpunkte
Register your app
/ 30
Set up authentication
/ 35
Add a customer page to your web app
/ 35
Serverlose Webanwendung mit Firebase erstellen
- GSP643
- Übersicht
- Lernziele
- Aufgabe 1: Die Firebase-Umgebung bereitstellen
- Aufgabe 2: Firebase CLI installieren
- Aufgabe 3: Firestore-Datenbank einrichten
- Aufgabe 4: Firebase-Projekt erstellen
- Aufgabe 5: App registrieren
- Aufgabe 6: Bei Firebase authentifizieren und bereitstellen
- Aufgabe 7: Authentifizierung und eine Datenbank einrichten
- Aufgabe 8: Szenario: Anwendung einrichten
- Aufgabe 9: Firestore Authentication konfigurieren und der Webanwendung eine Anmeldemethode hinzufügen
- Aufgabe 10: Anwendung bereitstellen
- Aufgabe 11: Der Webanwendung eine Kundenseite hinzufügen
- Aufgabe 12: Nutzer Termine planen lassen
- Aufgabe 13: Echtzeitaktualisierungen von Firestore testen
- Das wars! Sie haben das Lab erfolgreich abgeschlossen.
GSP643
Übersicht
Vor zwölf Jahren gründete Lily die Tierklinikkette „Pet Theory“, die in den letzten Jahren stark gewachsen ist. Weil das alte Terminplanungssystem die gestiegene Arbeitslast nicht verarbeiten kann und Kunden selbst keine Termine vereinbaren können, bat Lily ihren IT-Administrator Patrick und die Softwareberaterin Ruby, ein skalierbares cloudbasiertes System zu entwickeln. In diesem Lab erstellen Sie eine vollwertige Firebase-Webanwendung, mit der Nutzer in Echtzeit Informationen eingeben und Termine vereinbaren können.
Architektur
Dieses Diagramm gibt Ihnen einen Überblick über die zu verwendenden Dienste und darüber, wie sie miteinander verbunden sind.
Lernziele
Aufgaben in diesem Lab:
- Die Firebase API im Google Cloud-Projekt aktivieren
- Ein Firebase-Projekt erstellen und konfigurieren
- Firestore-Sicherheitsregeln konfigurieren, um die serverseitige Authentifizierung und Autorisierung zu automatisieren
- Der Webanwendung einen Google Log-in hinzufügen
- Die Datenbank so konfigurieren, dass Nutzer ihre Kontaktdaten hinzufügen können
- Den erforderlichen Code implementieren, damit Nutzer Termine vereinbaren können
- Die Echtzeit-Aktualisierungsfunktion von Firebase in Ihrer Webanwendung testen
Vorbereitung
Dies ist ein Lab für Fortgeschrittene. Es setzt Vertrautheit mit der Cloud Console und Shell-Umgebungen voraus. Erfahrung mit Firebase ist hilfreich, aber nicht zwingend erforderlich. Bevor Sie mit diesem Lab beginnen, sollten Sie das folgende Lab abgeschlossen haben:
Außerdem sollten Sie mit dem Bearbeiten von Dateien vertraut sein. Sie können dafür einen beliebigen Texteditor verwenden (z. B. nano
oder vi
) oder den Code-Editor von Cloud Shell nutzen. Dieser wird in der oberen Funktionsleiste aufgerufen:
Sobald Sie bereit sind, können Sie im nächsten Schritt Ihre Lab-Umgebung einrichten.
Aufgabe 1: Die Firebase-Umgebung bereitstellen
Ruby sendet Patrick eine E-Mail:
Ruby, Softwareberaterin |
Hallo Patrick, das hat letzte Woche ja sehr gut geklappt. Ich freue mich, dass wir die Daten der Klinik nach Firestore migrieren konnten. Wie es aussieht, ist unsere nächste Aufgabe, die Pet Theory-Website mithilfe von Firebase zu hosten. Ruby |
Patrick, IT-Administrator |
Hallo Ruby, von Hosting mit Firebase habe ich noch nie etwas gehört, was hat das für Vorteile? Was muss ich da als Erstes tun? Patrick |
Ruby, Softwareberaterin |
Hallo Patrick, der Hauptvorteil von Firebase Hosting ist, dass es serverlos ist. Es muss also keine Infrastruktur verwaltet werden. In der Anwendung sind auch Sicherheitsregeln eingebettet, sodass Berechtigungen eingeschränkt werden können, um Probleme bei der Verarbeitung von Kundendaten zu vermeiden. Praktisch ist außerdem das Bezahlmodell, das auf der tatsächlichen Nutzung basiert. Firebase ist also die ideale Entwicklungsplattform für unseren Anwendungsfall. Ruby |
Patrick, IT-Administrator |
Hallo Ruby, klingt, als würde Firebase die Sicherheits- und Infrastrukturverwaltung (also einen Großteil meiner Arbeit) deutlich einfacher machen. Herrlich, nicht mehr für inaktive Server zahlen zu müssen! Patrick |
Ruby sendet Patrick einige Hintergrundinformationen und gemeinsam besprechen sie dann die nächsten Schritte. Das ist Patricks To-do-Liste:
- Firestore CLI zum Google Cloud-Projekt hinzufügen
- Firestore-Datenbank erstellen
- Firebase-Projekt konfigurieren
- Sicherheitsrichtlinien festlegen
Ihre Aufgabe ist es nun, Patrick dabei zu helfen.
Aufgabe 2: Firebase CLI installieren
-
Kopieren Sie den IDE-Link aus dem Bereich mit den Details zum Lab und fügen Sie ihn in einen neuen Browsertab ein, um Cloud Code zu öffnen.
-
Öffnen Sie ein Terminalfenster, um zur Befehlszeile zu gelangen. Klicken Sie im linken Bereich auf das Anwendungsmenü () > Terminal > Neues Terminal.
-
Klonen Sie das GitHub-Repository über die Befehlszeile:
-
Klicken Sie im linken Bereich auf das Symbol Explorer und dann auf Ordner öffnen > pet-theory > lab02. Klicken Sie auf OK.
-
Wenn das Pop-up-Fenster
Vertrauen Sie den Autoren der Dateien in diesem Ordner?
angezeigt wird, klicken Sie auf das Kästchen und dann auf Ja, ich vertraue den Autoren. -
Öffnen Sie ein Terminal wieder, indem Sie auf das Anwendungsmenü () > Terminal > Neues Terminal klicken.
-
Installieren Sie die nötigen Knotenpakete:
Ausgabe:
Jetzt können Sie eine Firestore-Datenbank erstellen.
Aufgabe 3: Firestore-Datenbank einrichten
Bereiten Sie im Terminalfenster die Umgebung zum Verwenden einer Firestore-Datenbank vor.
- Firestore-Datenbank erstellen:
gcloud firestore databases create --location={{{project_0.default_region|REGION}}}
Jetzt können Sie ein Firestore-Projekt erstellen und es mit Ihrem Google Cloud-Konto verknüpfen.
Aufgabe 4: Firebase-Projekt erstellen
Öffnen Sie die Firebase Console in einem Inkognitofenster.
-
Klicken Sie auf das Kontosymbol rechts oben und prüfen Sie, ob es sich um das Qwiklabs-Teilnehmerkonto handelt, das Ihnen für dieses Lab zur Verfügung gestellt wurde.
-
Klicken Sie dann auf Projekt hinzufügen. Wenn Sie nach einem Projektnamen gefragt werden, wählen Sie die Projekt-ID aus dem Drop-down-Menü aus.
-
Akzeptieren Sie die Nutzungsbedingungen von Firebase und klicken Sie auf Weiter. Bestätigen Sie den „Pay as you go“-Abrechnungstarif.
-
Klicken Sie auf Weiter und deaktivieren Sie auf der folgenden Seite Google Analytics für Ihr Firebase-Projekt.
-
Klicken Sie dann auf Firebase hinzufügen. Wenn Sie darauf hingewiesen werden, dass das neue Projekt bereit ist, klicken Sie auf Weiter.
Abgeschlossene Aufgabe testen
Klicken Sie auf Fortschritt prüfen.
Aufgabe 5: App registrieren
Nach Abschluss des letzten Schritts sollten Sie sich in der Firebase Console befinden. Wenn Sie diese Seite schließen, öffnen Sie einen weiteren Inkognitotab und verwenden Sie den folgenden Link, um zur Firebase Console zu gelangen.
- Wählen Sie unter „Fügen Sie Firebase zu Ihrer App hinzu, um zu beginnen“ das Web-Symbol (in der Abbildung unten hervorgehoben) aus.
-
Wenn Sie nach einem App-Namen gefragt werden, geben Sie Pet Theory ein.
-
Klicken Sie das Kästchen neben „Firebase Hosting für diese App einrichten“ an.
-
Klicken Sie auf die Schaltfläche App registrieren.
-
Klicken Sie auf Weiter > Weiter > Weiter zur Konsole. Sie sollten jetzt die folgende Seite sehen:
Sie haben nun Firebase für das Projekt konfiguriert. Als Nächstes initialisieren Sie das Projekt als Referenz für den Firebase-Host.
Abgeschlossene Aufgabe testen
Klicken Sie auf Fortschritt prüfen.
Aufgabe 6: Bei Firebase authentifizieren und bereitstellen
Verwenden Sie die IDE, um eine Verbindung zu Firebase herzustellen und die Anwendung bereitzustellen. Geben Sie die Befehle in das Terminalfenster im Editor ein.
- Authentifizieren Sie sich bei Firebase:
-
Wenn Sie gefragt werden, ob Firebase Informationen zu Fehlerberichten erheben darf, geben Sie Y ein und drücken Sie die Eingabetaste.
-
Kopieren Sie die URL, fügen Sie sie in einem neuen Inkognitotab ein und drücken Sie die Eingabetaste (direktes Klicken auf den Link führt zu einem Fehler).
-
Wählen Sie Ihr Lab-Konto aus und klicken Sie auf Zulassen. Klicken Sie auf Ja, ich habe diesen Befehl ausgeführt, um fortzufahren, und bestätigen Sie die Sitzungs-ID, indem Sie auf Ja, das ist meine Sitzungs-ID klicken. Sie erhalten daraufhin einen Zugriffscode:
-
Kopieren Sie den Zugriffscode, fügen Sie ihn in die Cloud Shell-Eingabeaufforderung Autorisierungscode eingeben: ein und drücken Sie die Eingabetaste. Die Ausgabe sollte in etwa so aussehen:
Ausgabe:
- Initialisieren Sie nun ein Firebase-Projekt im aktuellen Arbeitsverzeichnis:
Folgen Sie nun der Anleitung zum Einrichten des Projektverzeichnisses und der Firebase-Produkte.
- Sie werden aufgefordert, die Features der Firebase CLI auszuwählen, die Sie in diesem Ordner einrichten möchten. Verwenden Sie die Pfeiltasten und die Leertaste, um Firestore und Hosting auszuwählen. Achten Sie darauf, dass Ihre Shell mit dem folgenden Code übereinstimmt, und drücken Sie dann die Eingabetaste:
- Gehen Sie dann die restlichen Schritte zur Konfiguration von Firebase durch.
- Gehen Sie zu Use an existing project und drücken Sie die Eingabetaste.
- Wählen Sie die Qwiklabs-Projekt-ID in der Liste aus (sie beginnt mit „qwiklabs-gcp-“) und drücken Sie die Eingabetaste.
- Drücken Sie die Eingabetaste und dann auf N, um die Datei firestore.rules zu behalten.
- Drücken Sie die Eingabetaste und dann auf Y, um die Datei firestore.indexes.json zu behalten.
- Drücken Sie die Eingabetaste, um das öffentliche Verzeichnis zu behalten, und dann auf N, um das Umschreiben der Datei „/index.html“ zu verbieten.
- Drücken Sie die Eingabetaste und wählen Sie für das Einrichten automatischer Erstellungen und Bereitstellungen mit GitHub N aus.
- Wenn Sie aufgefordert werden, die Datei „404.html“ zu überschreiben, geben Sie N ein.
- Wenn Sie aufgefordert werden, die Datei „index.html“ zu überschreiben, geben Sie N ein.
Sie sollten folgende Ausgabe erhalten:
Die lokale Konfiguration ist jetzt fertig. Als Nächstes richten Sie die Datenbank-Authentifizierung ein, um Zugriff zwischen den Diensten zu gewähren.
Aufgabe 7: Authentifizierung und eine Datenbank einrichten
Kehren Sie zur Firebase Console zurück, um diese Aufgabe zu erledigen.
-
Klicken Sie im linken Navigationsmenü auf die Schaltfläche Projektübersicht.
-
Wechseln Sie zur Kachel Authentifizierung und klicken Sie auf Jetzt starten.
-
Klicken Sie auf Anmeldemethode und dann auf Google.
-
Klicken Sie rechts oben auf die Schaltfläche zum Aktivieren und wählen Sie unter Support-E‑Mail-Adresse für Projekt Ihr Lab-Konto aus der Drop-down-Liste aus. Die Seite sollte nun so aussehen:
- Überprüfen Sie, ob alles korrekt ist, und klicken Sie dann auf die Schaltfläche Speichern.
Sie haben nun die Firebase-Authentifizierung eingerichtet. Im folgenden Schritt hosten Sie die Anwendung mit Firebase.
Abgeschlossene Aufgabe testen
Klicken Sie auf Fortschritt prüfen.
Aufgabe 8: Szenario: Anwendung einrichten
Sie haben Patrick geholfen, eine funktionierende Firebase Hosting-Umgebung einzurichten, in der Webentwickler Code erstellen können. Patrick hat jedoch noch nie Firebase Authentication aktiviert und auch noch nie Code in Firebase erstellt, weshalb er Ruby um Hilfe bittet…
Patrick, IT-Administrator |
Hallo Ruby, danke für die vielen Tipps! Die Firebase-Umgebung scheint vollständig eingerichtet zu sein. Meine nächste Aufgabe ist, den Code für die Websiteentwickler bereitzustellen. Kannst du mir erklären, was ich dafür tun muss? Patrick |
Ruby, Softwareberaterin |
Hallo Patrick, das freut mich! Ich schicke dir gleich eine Anleitung dazu, wie du die Anwendung ausführst und die folgenden Features hinzufügst:
Ruby |
Patrick, IT-Administrator |
Hallo Ruby, das klingt nach ziemlich viel Arbeit. Heißt das, ich muss jedes Mal, wenn ich etwas Neues hinzufüge, strukturelle Änderungen vornehmen? Und vermutlich dauert es ja auch eine ganze Weile, die Aktualisierungen zu prüfen… Patrick |
Ruby, Softwareberaterin |
Hallo Patrick, mit den Firebase-Bibliotheken ist es eigentlich recht einfach. Und zum Prüfen der Aktualisierungen brauchst du nur Du nimmst also Änderungen vor, stellst die Anwendung bereit und siehst die Änderungen dann direkt auf der Website. Ruby |
Patrick, IT-Administrator |
Hallo Ruby, klingt gut. Firebase Hosting gefällt mir immer besser :-) Patrick |
Patrick weiß nun, was zu tun ist. Helfen Sie ihm, Pet Theory als Firebase-Anwendung bereitzustellen.
Aufgabe 9: Firestore Authentication konfigurieren und der Webanwendung eine Anmeldemethode hinzufügen
Kehren Sie zum Terminalfenster zurück, um diese Aufgabe zu erledigen. Die Befehlszeile sollte noch von der vorherigen Firebase-Initialisierung offen sein.
- Führen Sie den folgenden Befehl aus, um die Ordner und Dateien im Verzeichnis
lab02
aufzulisten:
- Die Ausgabe sollte ungefähr so aussehen:
- Verwenden Sie den Code-Editor, um
pet-theory/lab02/firestore.rules
zu öffnen:
Aufgabe 10: Anwendung bereitstellen
Nach Abschluss der Änderungen können Sie die Anwendung bereitstellen. Sie sollten sich immer noch im Ordner pet-theory/lab02 befinden.
- Führen Sie den folgenden Befehl aus, um die Firebase-Anwendung bereitzustellen:
Ausgabe:
- Kopieren Sie die Hosting-URL (die so aussehen sollte:
[PROJECT-ID].web.app
) und öffnen Sie sie in einem neuen Tab. - Klicken Sie auf Über Google anmelden:
- Wählen Sie Ihr Google-Konto aus. Die folgende Seite wird geöffnet:
Sie haben nun Code erstellt, mit dem Nutzer per Google-Authentifizierung auf die Anwendung zugreifen können.
Aufgabe 11: Der Webanwendung eine Kundenseite hinzufügen
Kehren Sie zum Terminalfenster zurück und verwenden Sie den Editor, um sich die Dateien im Ordner public anzusehen.
- Öffnen Sie die Datei
customer.js
und fügen Sie den folgenden Code ein:
- Öffnen Sie die Datei
styles.css
und fügen Sie den folgenden Code ein:
- Führen Sie in der Befehlszeile den folgenden Befehl aus:
Ausgabe:
- Gehen Sie zum Tab mit der Anwendung und aktualisieren Sie die Seite mit CMD + Umschalttaste + R (Mac) oder Strg + Umschalttaste + R (Windows). Durch eine einfache Aktualisierung werden die erforderlichen Updates nicht angezeigt. Geben Sie einige Kundeninformationen ein, z. B. einen Namen und eine Telefonnummer, und klicken Sie auf Profil speichern.
- Kehren Sie zur Firebase Console zurück und klicken Sie auf Entwickeln > Firestore-Datenbank, um sich die gespeicherten Profilinformationen anzusehen:
- Kehren Sie zur Seite mit der Webanwendung zurück und klicken Sie auf den Link Termine. Es wird eine leere Seite angezeigt, da der Termin-Code noch nicht erstellt wurde.
Abgeschlossene Aufgabe testen
Klicken Sie auf Fortschritt prüfen.
Aufgabe 12: Nutzer Termine planen lassen
Erstellen Sie die Seite, über die Nutzer Termine vereinbaren können.
-
Kehren Sie zum Tab mit dem Code-Editor zurück. Sie fügen Code in zwei Dateien im Verzeichnis
public
ein. -
Wählen Sie im seitlichen Menü appointments.html aus und fügen Sie folgenden Code ein:
- Öffnen Sie nun die Datei appointments.js und fügen Sie den folgenden Code ein:
- Nachdem die Dateien nun erstellt wurden, sehen Sie sich die Änderungen an. Führen Sie den folgenden Befehl in Cloud Shell aus, um die Anwendung bereitzustellen:
Ausgabe:
- Aktualisieren Sie den Tab mit der Webanwendung, in dem Ihnen vorhin die leere Seite angezeigt wurde. Tragen Sie nun einige Termine ein:
-
Klicken Sie nun in der Firebase Console auf Entwickeln > Firestore-Datenbank und wählen Sie die Sammlung
appointments
aus, die Sie gerade unter Ihrer Nutzer-ID erstellt haben. -
Es sollte eine ähnliche Sammlung aus Termin-Codes angezeigt werden:
Aufgabe 13: Echtzeitaktualisierungen von Firestore testen
Firestore ist eine Echtzeitdatenbank. Ergänzen Sie die Anwendung um Updates in Echtzeit, um davon zu profitieren.
-
Öffnen Sie einen neuen Browsertab und gehen Sie zu [PROJECT ID].web.app, melden Sie sich mithilfe der Google-Schaltfläche an und klicken Sie auf Termine.
-
Legen Sie die beiden Tabs nebeneinander. Tragen Sie im ersten Browserfenster einen neuen Termin ein.
-
Auf dem anderen Tab sehen Sie, dass der Termin automatisch hinzugefügt wurde, ohne dass die Seite aktualisiert werden musste.
Ziemlich praktisch, oder? Firestore aktualisiert Clients (Webanwendungen und native mobile Apps) in Echtzeit, ohne dass der Nutzer die Seite aktualisieren oder neu laden muss.
- Gehen Sie zur Firebase Console, klicken Sie auf den Tab Daten in Cloud Firestore und bearbeiten Sie die Daten. Sie können sogar die Sammlung
appointments
im Nutzerdatensatz löschen. Beide Browserfenster werden in Echtzeit aktualisiert.
Das wars! Sie haben das Lab erfolgreich abgeschlossen.
Im Verlauf dieses Labs haben Sie mit Firebase eine robuste, serverlose Webanwendung erstellt. Sie haben zuerst ein Firebase-Projekt erstellt und konfiguriert und dann Firestore-Sicherheitsregeln hinzugefügt, um die serverseitige Authentifizierung und Autorisierung zu automatisieren. Anschließend haben Sie Google Log-in in die Webanwendung integriert und die Datenbank so konfiguriert, dass Nutzer Kontaktdaten und Termine hinzufügen können. Zuletzt haben Sie Code bereitgestellt, der es Nutzern ermöglicht, Termine zu planen. Und Sie haben gesehen, wie die Echtzeit-Aktualisierungsfunktion von Firebase funktioniert. Sie können jetzt weitere Labs in diesem Lernpfad absolvieren.
Weitere Informationen
- Google Cloud – Was bedeutet serverlos?
Google Cloud-Schulungen und -Zertifizierungen
In unseren Schulungen erfahren Sie alles zum optimalen Einsatz unserer Google Cloud-Technologien und können sich entsprechend zertifizieren lassen. Unsere Kurse vermitteln technische Fähigkeiten und Best Practices, damit Sie möglichst schnell mit Google Cloud loslegen und Ihr Wissen fortlaufend erweitern können. Wir bieten On-Demand-, Präsenz- und virtuelle Schulungen für Anfänger wie Fortgeschrittene an, die Sie individuell in Ihrem eigenen Zeitplan absolvieren können. Mit unseren Zertifizierungen weisen Sie nach, dass Sie Experte im Bereich Google Cloud-Technologien sind.
Anleitung zuletzt am 24. Juni 2024 aktualisiert
Lab zuletzt am 24. Juni 2024 getestet
© 2024 Google LLC. Alle Rechte vorbehalten. Google und das Google-Logo sind Marken von Google LLC. Alle anderen Unternehmens- und Produktnamen können Marken der jeweils mit ihnen verbundenen Unternehmen sein.