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:

• Daten in eine Firestore-Datenbank importieren

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

Hinweis: Die Entwicklungsumgebung wurde mit Firebase-Tools vorkonfiguriert.

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

2. Öffnen Sie ein Terminalfenster, um zur Befehlszeile zu gelangen. Klicken Sie im linken Bereich auf das Anwendungsmenü () > Terminal > Neues Terminal.

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

git clone https://github.com/rosera/pet-theory.git

4. Klicken Sie im linken Bereich auf das Symbol Explorer und dann auf Ordner öffnen > pet-theory > lab02. Klicken Sie auf OK.

5. Öffnen Sie ein Terminalfenster.

6. Installieren Sie die nötigen Knotenpakete:

npm i && npm audit fix --force

Ausgabe:

+ firebase-tools@10.7.0 added 3 packages from 11 contributors, removed 1 package and updated 8 packages in 79.808s

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.

1. Legen Sie als Projektregion fest:

gcloud config set compute/region {{{project_0.default_region|REGION}}}

2. Aktivieren Sie App Engine-Anwendungen:

   gcloud app create --region={{{project_0.startup_script.app_region|REGION}}}

3. Erstellen Sie eine Firestore-Datenbank:

   gcloud firestore databases create --region={{{project_0.startup_script.app_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.

Hinweis: Das Lab umfasst Berechtigungen für Firebase. Kopieren Sie den Link in der Firebase Console, um Firebase aufzurufen. Authentifizieren Sie sich bei Firebase mit dem für dieses Lab bereitgestellten Nutzernamen/Passwort.

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

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

3. Akzeptieren Sie die Nutzungsbedingungen von Firebase und klicken Sie auf Weiter. Bestätigen Sie den „Pay as you go“-Abrechnungstarif.

4. Klicken Sie auf Weiter und deaktivieren Sie auf der folgenden Seite Google Analytics für Ihr Firebase-Projekt.

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

Firebase-Projekt erstellen

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.

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.

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

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

4. Klicken Sie auf die Schaltfläche App registrieren.

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

App registrieren

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.

1. Authentifizieren Sie sich bei Firebase:

firebase login --no-localhost

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

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

✔ Success! Logged in as gcpstaging86673_student@qwiklabs.net

6. Initialisieren Sie nun ein Firebase-Projekt im aktuellen Arbeitsverzeichnis:

firebase init

Folgen Sie nun der Anleitung zum Einrichten des Projektverzeichnisses und der Firebase-Produkte.

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

? 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

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

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

1. Klicken Sie im linken Navigationsmenü auf die Schaltfläche Projektübersicht.

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

3. Klicken Sie auf Anbieter für Anmeldungen 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. Die Seite sollte nun so aussehen:

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

Authentifizierung und eine Datenbank einrichten

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: Webauthentifizierung für die Anmeldung Protokollierung von Kundendetails auf der Profilseite Selfservice-Portal für Termine 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 firebase deploy in die Befehlszeile einzugeben. 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.

1. Führen Sie den folgenden Befehl aus, um die Ordner und Dateien im Verzeichnis lab02 aufzulisten:

ls -1

2. Die Ausgabe sollte ungefähr so aussehen:

README.md firebase.json firestore.indexes.json firestore.rules node_modules package-lock.json package.json public solution

3. Verwenden Sie den Code-Editor, um pet-theory/lab02/firestore.rules zu öffnen:

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; } } } Hinweis: Die Firestore-Datenbank ist so konfiguriert, dass Nutzer nur auf ihre eigenen Daten zugreifen können. Die Datei „firestore.rules“ enthält die Sicherheitsregeln für die Firestore-Datenbank. Weitere Informationen finden Sie unter Erste Schritte mit Cloud Firestore-Sicherheitsregeln.

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.

1. Führen Sie den folgenden Befehl aus, um die Firebase-Anwendung bereitzustellen:

firebase deploy

Ausgabe:

✔ Deploy complete! Project Console: https://console.firebase.google.com/project/qwiklabs-gcp-7d652f8cf1f91cce/overview Hosting URL: https://qwiklabs-gcp-01-8be196f95006.web.app

2. Kopieren Sie die Hosting-URL (die so aussehen sollte: [PROJECT-ID].web.app) und öffnen Sie sie in einem neuen Tab.
3. 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. 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.

4. Wählen Sie Ihr Google-Konto aus. Die folgende Seite wird geöffnet:

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.

Ein kleines Unternehmen wie Pet Theory verfügt weder über die Ressourcen noch über die Kompetenzen dafür. In diesem Fall ist es viel besser, wenn sich die Nutzer mit ihrem bestehenden Google-Konto anmelden (oder anderen Identitätsanbietern).

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.

1. Öffnen Sie die Datei 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 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 Befehlszeile den folgenden Befehl aus:

firebase deploy

Ausgabe:

✔ Deploy complete! Project Console: https://console.firebase.google.com/project/qwiklabs-gcp-7d652f8cf1f91cce/overview Hosting URL: https://qwiklabs-gcp-01-8be196f95006.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. Geben Sie einige Kundeninformationen ein, z. B. einen Namen und eine Telefonnummer, und klicken Sie auf Profil speichern.

5. Kehren Sie zur Firebase Console zurück und klicken Sie auf Entwickeln > Firestore-Datenbank, um sich die gespeicherten Profilinformationen anzusehen:

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

Aufgabe 12: Nutzer Termine planen lassen

Erstellen Sie die Seite, über die Nutzer Termine vereinbaren können.

1. Kehren Sie zum Tab mit dem Code-Editor zurück. Sie fügen Code in zwei Dateien im Verzeichnis public ein.

2. Wählen Sie im seitlichen Menü appointments.html aus und fügen Sie folgenden Code ein:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Pet Theory appointments</title> <script src="/__/firebase/6.4.2/firebase-app.js"></script> <script src="/__/firebase/6.4.2/firebase-auth.js"></script> <script src="/__/firebase/6.4.2/firebase-firestore.js"></script> <script src="/__/firebase/init.js"></script> <link type="text/css" rel="stylesheet" href="styles.css" /> </head> <body> <div id="message"> <h2>Scheduled appointments</h2> <div id="appointments"></div> <hr/> <h2>Schedule a new appointment</h2> <select id="timeslots"> <option value="0">Choose time</option> </select> <br><br> <button id="makeAppointment">Schedule</button> </div> <script src="appointments.js"></script> </body> </html>

3. Öffnen Sie nun die Datei appointments.js und fügen Sie den folgenden Code ein:

let user; firebase.auth().onAuthStateChanged(function(newUser) { user = newUser; if (user) { const db = firebase.firestore(); const appColl = db.collection('customers').doc(user.email).collection('appointments'); appColl.orderBy('time').onSnapshot(function(snapshot) { const div = document.getElementById('appointments'); div.innerHTML = ''; snapshot.docs.forEach(appointment => { div.innerHTML += formatDate(appointment.data().time) + '<br/>'; }) if (div.innerHTML == '') { div.innerHTML = 'No appointments scheduled'; } }); } }); const timeslots = document.getElementById('timeslots'); getOpenTimes().forEach(time => { timeslots.add(new Option(formatDate(time), time)); }); document.getElementById('makeAppointment').addEventListener('click', function(ev) { const millis = parseInt(timeslots.selectedOptions[0].value); if (millis > 0) { const db = firebase.firestore(); db.collection('customers').doc(user.email).collection('appointments').add({ time: millis }) timeslots.remove(timeslots.selectedIndex); } }) function getOpenTimes() { const retVal = []; let startDate = new Date(); startDate.setMinutes(0); startDate.setSeconds(0); startDate.setMilliseconds(0); let millis = startDate.getTime(); while (retVal.length < 5) { const hours = Math.floor(Math.random() * 5) + 1; millis += hours * 3600 * 1000; if (isDuringOfficeHours(millis)) { retVal.push(millis); } } return retVal; } function isDuringOfficeHours(millis) { const aDate = new Date(millis); return aDate.getDay() != 0 && aDate.getDay() != 6 && aDate.getHours() >= 9 && aDate.getHours() <= 17; } function formatDate(millis) { const aDate = new Date(millis); const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; return days[aDate.getDay()] + ' ' + aDate.getDate() + ' ' + months[aDate.getMonth()] + ', ' + aDate.getHours() + ':' + (aDate.getMinutes() < 10? '0'+aDate.getMinutes(): aDate.getMinutes()); }

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

firebase deploy

Ausgabe:

✔ Deploy complete! Project Console: https://console.firebase.google.com/project/qwiklabs-gcp-7d652f8cf1f91cce/overview Hosting URL: https://qwiklabs-gcp-01-8be196f95006.web.app

5. Aktualisieren Sie den Tab mit der Webanwendung, in dem Ihnen vorhin die leere Seite angezeigt wurde. Tragen Sie nun einige Termine ein:

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

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

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

2. Legen Sie die beiden Tabs nebeneinander. Tragen Sie im ersten Browserfenster einen neuen Termin ein.

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

4. 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 30. Januar 2024 aktualisiert

Lab zuletzt am 8. Januar 2023 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.