arrow_back

Serverlose Webanwendung mit Firebase erstellen

Anmelden Teilnehmen
Testen und teilen Sie Ihr Wissen mit unserer Community.
done
Sie erhalten Zugriff auf über 700 praxisorientierte Labs, Skill-Logos und Kurse

Serverlose Webanwendung mit Firebase erstellen

Lab 1 Stunde universal_currency_alt 5 Guthabenpunkte show_chart Mittelstufe
info Dieses Lab kann KI-Tools enthalten, die den Lernprozess unterstützen.
Testen und teilen Sie Ihr Wissen mit unserer Community.
done
Sie erhalten Zugriff auf über 700 praxisorientierte Labs, Skill-Logos und Kurse

GSP643

Logo: Google Cloud-Labs zum selbstbestimmten Lernen

Logo von Pet Theory

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

Architekturdiagramm

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

Schaltfläche „Editor öffnen“

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

Firebase-Backend

Ruby sendet Patrick eine E-Mail:

Ruby

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

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

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

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:

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

Ihre Aufgabe ist es nun, Patrick dabei zu helfen.

Aufgabe 1: Firebase-Anwendung registrieren

Öffnen Sie ein Inkognitofenster, um die Firebase Console aufzurufen.

Geben Sie Folgendes ein, wenn Sie dazu aufgefordert werden:

  • Nutzername:
  • Passwort:
Hinweis:
Ein Firebase-Projekt mit dem Label wurde bereitgestellt. Wählen Sie dieses Projekt aus, um auf Firebase-Produkte zuzugreifen und dieser Anleitung zu folgen.

Geben Sie im Firebase-Bildschirm „Projektübersicht“ die folgenden Befehle ein:

  1. Wählen Sie unter „Fügen Sie Firebase zu Ihrer App hinzu, um zu beginnen“ das Web-Symbol (in der Abbildung unten hervorgehoben) aus.

    Hervorgehobenes Web-Symbol

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

    Pet Theory
  3. Klicken Sie das Kästchen neben „Firebase Hosting für diese App einrichten“ an.

  4. Klicken Sie auf das Drop-down-Menü zum Bereitstellen und wählen Sie Neue Website erstellen aus.

  5. Ändern Sie die Standardeinstellung so, dass das „student“-Präfix enthalten ist.

    student-bucket-{{{ project_0.project_id | "PREFIX" }}}-1 Hinweis:
    Achten Sie darauf, dass das Drop-down-Menü für die Website „student-bucket--1“ enthält, bevor Sie fortfahren. Die Websitedomain basiert auf dieser Einstellung.
  6. Klicken Sie auf die Schaltfläche App registrieren.

  7. Klicken Sie auf Weiter > Weiter > Weiter zur Konsole.

    Hinweis:
    Wenn Sie die Standarddomain der Firebase-Website ändern, müssen Sie auch Änderungen an der lokalen Umgebung vornehmen.
    Sie müssen:
    1. die benutzerdefinierte Website-ID in die Datei firebase.json einfügen (Bereitstellungsziele für Ihre Websites einrichten)
    2. die Website-ID im Befehl firebase deploy --only hosting:student-bucket--1 verwenden

Sie haben nun die Firebase-Anwendung konfiguriert.

Abgeschlossene Aufgabe testen

Klicken Sie auf Fortschritt prüfen.

Ihre Firebase-Anwendung registrieren

Aufgabe 2: Firebase-Produkte aktivieren

Firebase Authentication

Wir richten in der Firebase Console Firebase Authentication ein.

  1. Klicken Sie im linken Navigationsbereich auf das Drop-down-Menü Entwickeln.

  2. Wechseln Sie zur Kachel Authentifizierung und klicken Sie auf Jetzt starten.

  3. Klicken Sie auf den Tab Anmeldemethode und dann auf Google.

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

    {{{ user_0.username | "USERNAME" }}}

    Die Seite sollte nun so aussehen: Schaltfläche zum Aktivieren hervorgehoben und Drop-down-Menü „Support-E‑Mail-Adresse für Projekt“

  5. Überprüfen Sie, ob alles korrekt ist, und klicken Sie dann auf die Schaltfläche Speichern.

    Hinweis:
    Wenn Sie eine benutzerdefinierte Domain mit Firebase verwenden, müssen Sie auch die Einstellung „Autorisierte Domains“ ändern.
  6. Klicken Sie auf den Tab Einstellungen.

  7. Klicken Sie unter der Überschrift Domains auf den Menüpunkt Autorisierte Domains.

    Die Seite sollte nun so aussehen: Autorisierte Domains

  8. Klicken Sie auf Domain hinzufügen.

  9. Geben Sie die folgende Domain ein:

    student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1.web.app Hinweis:
    Wenn Sie die benutzerdefinierte Domain hinzufügen, kann der Firebase-OAuth-Ablauf ordnungsgemäß funktionieren.
  10. Klicken Sie auf Hinzufügen.

Abgeschlossene Aufgabe testen

Klicken Sie auf Fortschritt prüfen.

Firebase Authentication einrichten

Firebase Firestore

Wir richten in der Firebase Console Firebase Authentication ein.

  1. Klicken Sie im linken Navigationsbereich auf das Drop-down-Menü Entwickeln.

  2. Wählen Sie die Kachel Firestore-Datenbank aus und klicken Sie dann auf Datenbank erstellen.

  3. Akzeptieren Sie die Standardeinstellungen und klicken Sie auf Weiter.

  4. Klicken Sie auf Erstellen, um Cloud Firestore bereitzustellen.

  5. Klicken Sie auf den Tab Regeln.

    Hinweis:
    Wir möchten die Sicherheitsregeln für die Firestore-Datenbank aktualisieren, damit die Authentifizierung verwendet wird. In den neuen Regeln erlauben wir Lese-/Schreibzugriff auf die Datenbank, wenn der Nutzer authentifiziert ist.
  6. Aktualisieren Sie die Regeln so:

    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; } } }

Sie haben nun Firebase Authentication und Firestore mit einer benutzerdefinierten Website-Kennung eingerichtet. Die Backend-Konfiguration ist damit 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…

Patrick

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

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:

  • Webauthentifizierung für die Anmeldung
  • Protokollierung von Kundendetails auf der Profilseite
  • Selfservice-Portal für Termine

Ruby

Patrick

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

Ruby, Softwareberaterin

Hallo Patrick,

mit den Firebase-Bibliotheken ist es eigentlich recht einfach.

Firebase bietet einige hervorragende Befehlszeilentools, mit denen du deinen Localhost mit dem Firebase-Backendprojekt verbinden kannst.

Mit firebase init kannst du angeben, welche Produkte du verwenden möchtest.

Wenn dein Projekt eingerichtet ist, kannst du einfach firebase deploy in die Befehlszeile eingeben.

Ruby

Patrick

Patrick, IT-Administrator

Hallo Ruby,

klingt gut. Firebase Hosting gefällt mir immer besser :-)

Patrick

Aufgabe 3: Firebase CLI installieren

Verwenden Sie die IDE, um eine Verbindung zu Firebase herzustellen und die Anwendung bereitzustellen.

Hinweis:
Die Entwicklungsumgebung wurde mit Firebase-Tools vorkonfiguriert.
  1. Kopieren Sie den IDE-Link aus dem Bereich mit den Details zum Lab.

    {{{ project_0.startup_script.service_url | "IDE" }}}
  2. Fügen Sie den Link in einem neuen Inkognitotab ein, um Cloud Code zu öffnen.

  3. Öffnen Sie ein Terminal, indem Sie auf das Anwendungsmenü (Symbol „Anwendungsmenü“) > Terminal > Neues Terminal klicken.

  4. Klonen Sie das GitHub-Repository über die Befehlszeile:

    git clone https://github.com/rosera/pet-theory.git
  5. Klicken Sie im linken Bereich auf das Symbol Explorer und dann auf Ordner öffnen > pet-theory > lab02. Klicken Sie auf OK.

    Hinweis:
    Wenn das Pop-up-Fenster Do you trust the authors of the files in this folder? angezeigt wird, klicken Sie auf das Kästchen und dann auf Yes, I trust the authors.
  6. Öffnen Sie ein Terminal wieder, indem Sie auf das Anwendungsmenü (Symbol „Anwendungsmenü“) > Terminal > Neues Terminal klicken.

  7. Aktualisieren Sie die Knotenpakete:

    npm i

    Beispielausgabe:

    added 630 packages, and audited 631 packages in 42s 69 packages are looking for funding run `npm fund` for details found 0 vulnerabilities npm notice npm notice New minor version of npm available! 10.7.0 -> 10.8.3 npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.3 npm notice To update run: npm install -g npm@10.8.3 npm notice npm warn using --force Recommended protections disabled. up to date, audited 631 packages in 2s 69 packages are looking for funding run `npm fund` for details found 0 vulnerabilities

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. Wenn Sie gefragt werden, ob Firebase Informationen zu Fehlerberichten erheben darf, geben Sie Y ein und drücken Sie die Eingabetaste.

  3. Kopieren Sie die generierte 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).

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

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

6. Bestätigen Sie die Sitzungs-ID, indem Sie auf Ja, das ist meine Sitzungs-ID klicken.

  1. Sie erhalten daraufhin einen Zugriffscode:

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

Beispielausgabe:

✔ Success! Logged in as student-02-21ab4a7ce0d1@qwiklabs.net Hinweis:
Jetzt ist der Localhost mit dem Backend-Firebase-Projekt verknüpft.

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. Sie werden aufgefordert, die Features der Firebase CLI auszuwählen, 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. Wir benötigen die folgenden Produkte:

    • 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 Use an existing project 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 die Eingabetaste und dann auf N, um die Datei firestore.rules zu behalten.
    • Drücken Sie die Eingabetaste und dann auf N, 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.

    Beispielausgabe:

    ✔ Wrote public/404.html ✔ Wrote public/index.html i Writing configuration info to firebase.json... i Writing project information to .firebase... i Writing gitignore file to .gitignore... ✔ Firebase initialization complete!

Die lokale Konfiguration ist jetzt fertig.

Aufgabe 6: In Firebase bereitstellen

Diesen Schritt führen Sie im Terminal aus. Sie sollten sich immer noch 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.

    Erwartete Ausgabe

    { ... "hosting": { "site": "student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1", ... } }
  2. Stellen Sie die Firebase-Anwendung mit dem Wert für die Website-ID bereit, zum Beispiel:

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

    Ausgabe:

    ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://student-bucket-{{{ project_0.project_id| "site" }}}-1.web.app
  3. Kopieren Sie die Hosting-URL (die so aussehen sollte: .web.app) und öffnen Sie sie in einem neuen Inkognitotab.

    https://student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1.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:
    Ihnen wird die Fehlermeldung Browser wird nicht unterstützt oder Drittanbieter-Cookies und ‑Daten sind deaktiviert angezeigt. Aktivieren Sie Cookies im Browser.

    Fehlermeldung zu Drittanbieter-Cookies

    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:

    Profilseite

    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 die 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:student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1

    Ausgabe:

    ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://student-bucket-{{{ project_0.project_id| "site" }}}-1.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.

    Profilformular

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

    Kundenname:

    John

    Telefonnummer des Kunden:

    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:

    Cloud Firestore, Seite „Daten“ mit Tabs

  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.

Der Webanwendung eine Kundenseite hinzufügen

Ziemlich praktisch, oder?

Firestore aktualisiert Clients (Webanwendungen und native mobile Apps) in Echtzeit, ohne dass der Nutzer die Seite aktualisieren oder neu laden muss.

Glückwunsch!

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

Handbuch zuletzt am 16. Oktober 2024 aktualisiert

Lab zuletzt am 16. Oktober 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.

Diese Inhalte sind derzeit nicht verfügbar

Bei Verfügbarkeit des Labs benachrichtigen wir Sie per E-Mail

Sehr gut!

Bei Verfügbarkeit kontaktieren wir Sie per E-Mail