GSP643

Übersicht

Vor zwölf Jahren hat Lily die Tierklinikkette Pet Theory gegründet, die in den letzten Jahren stark gewachsen ist. Weil das alte Terminplanungssystem die gestiegene Arbeitslast nicht verarbeiten kann und Kundinnen 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 Nutzerinnen und 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:

• Firestore-Sicherheitsregeln konfigurieren, um die serverseitige Authentifizierung und Autorisierung zu automatisieren
• Der Webanwendung einen Google Log-in hinzufügen
• Die Datenbank so konfigurieren, dass Nutzerinnen und Nutzer ihre Kontaktdaten hinzufügen können
• Den erforderlichen Code implementieren, damit Nutzerinnen und Nutzer Termine vereinbaren können
• Die Echtzeit-Aktualisierungsfunktion von Firebase in Ihrer Webanwendung testen

Vorbereitung

Dies ist ein Lab für Fortgeschrittene. Es setzt Kenntnisse der Cloud Console und Wissen über 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:

• Daten in eine Firestore-Datenbank importieren

Außerdem sollten Sie mit dem Bearbeiten von Dateien vertraut sein. Sie können dafür Ihren bevorzugten Texteditor verwenden (z. B. nano oder vi) oder den Code-Editor von Cloud Shell nutzen. Dieser befindet sich in der oberen Funktionsleiste:

Sobald Sie bereit sind, können Sie im nächsten Schritt Ihre Lab-Umgebung einrichten.

Firebase-Backend

Ruby sendet Patrick eine E-Mail:

Ruby sendet Patrick einige Hintergrundinformationen und gemeinsam besprechen sie dann die nächsten Schritte. Das ist Patricks To-do-Liste:

• Firebase-Projekt konfigurieren
• Sicherheitsrichtlinien festlegen
• Firestore CLI dem Google Cloud-Projekt hinzufügen

Ihre Aufgabe ist es nun, Patrick dabei zu helfen.

Aufgabe 1: Firebase-Anwendung registrieren

Öffnen Sie ein Inkognitofenster und rufen Sie die Firebase Console auf.

Geben Sie Folgendes ein, wenn Sie dazu aufgefordert werden:

• Nutzername:
• Passwort:

1. Akzeptieren Sie die Nutzungsbedingungen von Firebase und klicken Sie auf Weiter.

2. Klicken Sie auf der Seite „Projektübersicht“ auf + App hinzufügen und wählen Sie das Websymbol aus.

3. Wenn Sie nach einem App-Namen gefragt werden, geben Sie Pet Theory ein.

4. Klicken Sie das Kästchen neben Firebase Hosting für diese App einrichten an.

5. Wählen Sie im Drop-down-Menü für die Website Neue Website erstellen aus oder achten Sie darauf, dass sie mit Ihrer Projekt-ID übereinstimmt (oder den Angaben unter „Details zum Lab“ entspricht).

6. Klicken Sie auf den Button App registrieren.

7. Klicken Sie in den folgenden Schritten (Firebase SDK hinzufügen, Firebase CLI installieren und In Firebase Hosting bereitstellen) auf Weiter oder Zur Console, um zum Haupt-Dashboard zurückzukehren.

Sie haben nun die Firebase-Anwendung konfiguriert.

Abgeschlossene Aufgabe testen

Klicken Sie auf Fortschritt prüfen.

Aufgabe 2: Firebase-Produkte aktivieren

Firebase Authentication

Richten Sie in der Firebase Console Firebase Authentication ein, damit sich Nutzerinnen und Nutzer über Google anmelden können.

1. Klicken Sie im linken Navigationsmenü auf Authentifizierung. Sie finden diese Option unter Projektverknüpfungen oder Produktkategorien > Sicherheit, falls sie nicht angepinnt ist.

2. Klicken Sie bei Ihrem ersten Besuch auf Jetzt starten.

3. Wählen Sie auf dem Tab Anmeldemethode in der Liste der Anbieter Google aus.

4. Klicken Sie im Konfigurationsdialogfeld auf den Schalter Aktivieren.

5. Wählen Sie im Drop-down-Menü die E‑Mail-Adresse für den Support aus und klicken Sie auf Speichern.

6. Klicken Sie oben auf der Seite „Authentifizierung“ auf den Tab Einstellungen, um die benutzerdefinierte Domain für die Autorisierung hinzuzufügen.

7. Wählen Sie im Menü auf der linken Seite des Einstellungsbereichs Autorisierte Domains aus.

8. Klicken Sie auf Domain hinzufügen.

9. Geben Sie die folgende Domain an (fügen Sie dabei Ihre Projekt-ID ein, falls erforderlich):

   {{{ project_0.project_id | PROJECT_ID }}}.web.app

10. Klicken Sie auf Hinzufügen.

Abgeschlossene Aufgabe testen

Klicken Sie auf Fortschritt prüfen.

Firebase Firestore

Richten Sie als Nächstes die Firestore-Datenbank ein.

1. Klicken Sie im linken Navigationsmenü unter Datenbanken und Speicher auf Firestore.

2. Klicken Sie auf der Cloud Firestore-Landingpage auf den Button Datenbank erstellen.

3. Wählen Sie unter Schritt 1: Version auswählen die Option Standard Edition aus und klicken Sie auf Weiter.

4. Wählen Sie unter Schritt 2: Datenbank-ID und Standort den entsprechenden Standort aus (z. B. nam5 oder übernehmen Sie die Standardangabe) und klicken Sie auf Weiter.

5. Wählen Sie unter Schritt 3: Konfigurieren die Option Im Testmodus starten aus und klicken Sie auf Erstellen.

6. Wenn die Datenbank bereitgestellt wurde, klicken Sie auf den Tab Regeln.

7. Ersetzen Sie die Sicherheitsregeln durch die folgenden Angaben, um authentifizierten Nutzerinnen und Nutzern das Lesen/Schreiben ihrer eigenen Daten zu ermöglichen:

   rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /customers/{email} { allow read, write: if request.auth.token.email == email; } match /customers/{email}/{document=**} { allow read, write: if request.auth.token.email == email; } } }

Klicken Sie auf Veröffentlichen, um die Änderungen in Firebase bereitzustellen.

Sie haben nun Firebase Authentication und Firestore eingerichtet. Die Backend-Konfiguration ist abgeschlossen.

Firebase Localhost

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…

Aufgabe 3: Repository klonen und Abhängigkeiten installieren

In dieser Aufgabe klonen Sie mit Cloud Shell und dem Cloud Shell-Editor den Anwendungscode und installieren die erforderlichen Node.js-Pakete.

1. Öffnen Sie im selben Inkognitofenster, in dem Sie die Firebase Console verwenden, einen neuen Tab, rufen Sie die Google Cloud Console auf und akzeptieren Sie die Nutzungsbedingungen, falls Sie dazu aufgefordert werden.

2. Klicken Sie in der Symbolleiste der Google Cloud Console auf Cloud Shell aktivieren.

3. Führen Sie im Cloud Shell-Terminal den folgenden Befehl aus, um die Lab-Dateien aus dem Cloud Storage-Bucket zu kopieren:

   gcloud storage cp -r gs://spls/gsp643/pet-theory .

4. Klicken Sie in der Cloud Shell-Symbolleiste auf den Button Editor öffnen, um den Code aufzurufen und zu bearbeiten.

5. Gehen Sie im Cloud Shell-Editor im Datei-Explorer zum Ordner pet-theory/lab02.

6. Öffnen Sie ein Terminal im Cloud Shell-Editor (oder verwenden Sie das vorhandene Cloud Shell-Terminal) und wechseln Sie zum Verzeichnis lab02:

   cd pet-theory/lab02

7. Führen Sie den folgenden Befehl aus, um die Node.js-Pakete zu installieren:

   npm install Hinweis: In der Cloud Shell-Umgebung sind Node.js und npm bereits vorinstalliert.

Jetzt können Sie die Anwendung mit dem Backend-Firebase-Projekt verknüpfen.

Aufgabe 4: Firebase-Zugriff autorisieren

Stellen Sie in der IDE eine Verbindung zu Firebase her und stellen Sie die Anwendung bereit.

1. Geben Sie den folgenden Befehl ein, um den Zugriff auf das Firebase-Projekt zu autorisieren:

   firebase login --no-localhost

   Hinweis:

   Firebase versucht, die lokale Umgebung zu autorisieren, eine Verbindung zum Firebase-Projekt herzustellen. Achten Sie daher darauf, dass die Browseraktivitäten in einem Inkognitofenster stattfinden, um diese Aktion mit den entsprechenden Anmeldedaten auszuführen.

2. Geben Sie Y ein, um Gemini-Funktionen in Firebase zu aktivieren.

3. Wenn Sie gefragt werden, ob Firebase Informationen zu Fehlerberichten erheben darf, geben Sie Y ein und drücken Sie die Eingabetaste.

4. Klicken Sie auf die generierte URL, um einen weiteren Tab im selben Inkognitofenster zu öffnen.

5. Wählen Sie Ihr Lab-Konto aus und klicken Sie auf Zulassen.

6. Klicken Sie auf Ja, ich habe diesen Befehl ausgeführt, um fortzufahren.

7. Klicken Sie auf Ja, das ist meine Sitzungs-ID, um Ihre Sitzungs-ID zu bestätigen.

8. Kopieren Sie den generierten 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:

Beispielausgabe:

Firebase ist jetzt verbunden und autorisiert. Im nächsten Schritt initialisieren Sie die zu verwendenden Firebase-Produkte.

Aufgabe 5: Firebase-Produkte initialisieren

Teilen Sie Firebase in der IDE mit, welche Produkte erforderlich sind.

1. Initialisieren Sie ein neues Firebase-Projekt im aktuellen Arbeitsverzeichnis:

   firebase init

   Hinweis:

   Folgen Sie nun der Anleitung zum Einrichten des Projektverzeichnisses und der Firebase-Produkte. Wählen Sie die Features der Firebase CLI aus, die Sie in diesem Ordner einrichten möchten. Mit den Pfeiltasten können Sie in der Liste nach oben und unten gehen. Durch Drücken der LEERTASTE können Sie die Produktoptionen auswählen.

2. Wählen Sie die folgenden Produkte aus:

   • Firestore
   • Hosting

3. 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:

   ? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. ◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default insta ◉ Firestore: Configure security rules and indexes files for Firestore ◯ Functions: Configure a Cloud Functions directory and its files ❯◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys ◯ Hosting: Set up GitHub Action deploys ◯ Storage: Configure a security rules file for Cloud Storage

4. Gehen Sie die restlichen Schritte zur Konfiguration von Firebase durch:

   • Gehen Sie zu Ein vorhandenes Projekt verwenden und drücken Sie die Eingabetaste.
   • Wählen Sie Ihre Projekt-ID in der Liste aus und drücken Sie die Eingabetaste.
   • Drücken Sie N und dann die Eingabetaste, um die Datei firestore.rules zu behalten.
   • Drücken Sie N und dann die Eingabetaste, um die Datei firestore.indexes.json zu behalten.
   • Drücken Sie die Eingabetaste, um das öffentliche Verzeichnis zu behalten.
   • Drücken Sie N, um das Umschreiben der Datei index.html zu verbieten, und dann die Eingabetaste.
   • Drücken Sie N, wenn Sie gefragt werden, ob Sie automatische Builds und Bereitstellungen mit GitHub einrichten möchten, und drücken Sie die Eingabetaste.
   • Drücken Sie N, wenn Sie aufgefordert werden, die Datei 404.html zu überschreiben.
   • Wenn Sie aufgefordert werden, die Datei index.html zu überschreiben, drücken Sie N.
   • Drücken Sie Y, wenn Sie gefragt werden, ob Sie Agent Skills für Firebase installieren möchten, und dann die Eingabetaste.

   Beispielausgabe:

   ✔ Agent skills installation started ✔ Wrote configuration info to firebase.json ✔ Wrote project information to .firebaserc ✔ Wrote .gitignore ✔ Firebase initialization complete!

Die lokale Konfiguration ist jetzt fertig.

Aufgabe 6: In Firebase bereitstellen

Diesen Schritt führen Sie in Cloud Shell aus. Sie sollten sich im Code-Editor im Ordner pet-theory/lab02 befinden.

1. Bearbeiten Sie die Datei firebase.json und fügen Sie im Abschnitt hosting einen Wert für site ein:

   { ... "hosting": { "site": "{{{ project_0.project_id | PROJECT_ID }}}", ... } }

2. Öffnen Sie das Terminal und stellen Sie Ihre Firebase-Anwendung mit dem Wert für die Website-ID bereit, zum Beispiel:

   firebase deploy --only hosting:{{{ project_0.project_id | PROJECT_ID }}}

   Ausgabe:

   ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://{{{ project_0.project_id| "site" }}}.web.app

3. Klicken Sie auf die generierte Hosting-URL (die so aussehen sollte: .web.app), um sie in einem neuen Inkognitotab zu öffnen:

   https://{{{ project_0.project_id | PROJECT_ID }}}.web.app

   Wichtig:

   Persönliche Anmeldedaten dürfen in diesem Lab nicht zur Authentifizierung verwendet werden. Nutzen Sie für den Google Log-in das Konto .

4. Klicken Sie auf Über Google anmelden:

   Hinweis:

   Wenn Ihnen die Fehlermeldung Browser wird nicht unterstützt oder Drittanbieter-Cookies und ‑Daten sind deaktiviert angezeigt wird, aktivieren Sie Cookies im Browser.

   

   Klicken Sie dazu in Chrome auf das Auge-Symbol rechts neben dem URL-Tab und dann auf die blauen Links im Pop-up. Klicken Sie auf den Link Website funktioniert nicht?, um die Browsereinstellungen zu ändern und Cookies zu akzeptieren.

5. Melden Sie sich mit dem zur Verfügung gestellten Nutzernamen an, zum Beispiel . Die folgende Seite wird geöffnet:

   

   Ein kleines Unternehmen wie Pet Theory verfügt weder über die Ressourcen noch über die Kompetenzen dafür. In diesem Fall kann es von Vorteil sein, wenn sich Nutzerinnen und Nutzer mit ihrem bestehenden Google-Konto (oder anderen Identitätsanbietern) anmelden können.

   Hinweis:

   Die Passwortverwaltung ist eine schwierige Aufgabe und kann das Unternehmen zusätzlichen Risiken aussetzen. Außerdem möchten Nutzer nicht noch eine Nutzer-ID und noch ein Passwort erstellen.

Sie haben nun Code erstellt, mit dem Nutzer per Google-Authentifizierung auf die Anwendung zugreifen können.

Aufgabe 7: 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.

1. Öffnen Sie die Datei public/customer.js und fügen Sie den folgenden Code ein:

   let user; firebase.auth().onAuthStateChanged(function(newUser) { user = newUser; if (user) { const db = firebase.firestore(); db.collection("customers").doc(user.email).onSnapshot(function(doc) { const cust = doc.data(); if (cust) { document.getElementById('customerName').setAttribute('value', cust.name); document.getElementById('customerPhone').setAttribute('value', cust.phone); } document.getElementById('customerEmail').innerText = user.email; }); } }); document.getElementById('saveProfile').addEventListener('click', function(ev) { const db = firebase.firestore(); var docRef = db.collection('customers').doc(user.email); docRef.set({ name: document.getElementById('customerName').value, email: user.email, phone: document.getElementById('customerPhone').value, }) })

2. Öffnen Sie die Datei public/styles.css und fügen Sie den folgenden Code ein:

   body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; } #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; } #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; } #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; } #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;} #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; } #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; } #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; } @media (max-width: 600px) { body, #message { margin-top: 0; background: white; box-shadow: none; } body { border-top: 16px solid #ffa100; } }

3. Führen Sie in der Terminal-Befehlszeile den folgenden Befehl aus:

   firebase deploy --only hosting:{{{ project_0.project_id | PROJECT_ID }}}

   Ausgabe:

   ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://{{{ project_0.project_id | PROJECT_ID }}}.web.app

4. 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.

   

5. Geben Sie einige Kundeninformationen ein, zum Beispiel einen Namen und eine Telefonnummer:

   Kundenname:

   John

   Telefonnummer:

   98473757454

6. Klicken Sie auf Profil speichern.

7. Kehren Sie zur Firebase Console zurück.

8. Klicken Sie auf Entwickeln > Firestore-Datenbank, um sich die gespeicherten Profilinformationen anzusehen:

   

9. 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.

Ziemlich praktisch, oder?

Firestore aktualisiert Clients (Webanwendungen und native mobile Apps) in Echtzeit, ohne dass die Seite aktualisiert oder neu geladen werden muss.

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 eingebunden und die Datenbank so konfiguriert, dass Nutzerinnen und Nutzer Kontaktdaten und Termine hinzufügen können. Zuletzt haben Sie Code bereitgestellt, der es Nutzerinnen und 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 31. Mai 2026 aktualisiert

Lab zuletzt am 31. Mai 2026 getestet

© 2026 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.