GSP1051

Übersicht

Cloud Spanner ist der vollständig verwaltete, horizontal skalierbare relationale Datenbankdienst von Google. Kundenunternehmen aus unterschiedlichsten Branchen wie Finanzdienstleistungen, Gaming und Einzelhandel nutzen ihn zur Ausführung anspruchsvollster umfangreicher Arbeitslasten, bei denen Konsistenz und Verfügbarkeit entscheidend sind.

In diesem Lab erstellen und stellen Sie eine Node.js-Anwendung bereit, die mit einer Cloud Spanner-Instanz verbunden ist. Die Node.js-Anwendung ist ein Tool zur Visualisierung von Aktienkursen namens OmegaTrade. Die OmegaTrade-Anwendung speichert Aktienkurse in Cloud Spanner und erstellt Visualisierungen mit Google Charts.

Der Backend-Dienst verwendet das Node.js Express-Framework und stellt mit standardmäßigen Verbindungs-Pooling-, Sitzungs- und Zeitlimitfunktionen eine Verbindung zu Cloud Spanner her.

Aufgaben

• Projektumgebung konfigurieren
• Anwendungscode herunterladen und ansehen
• Backend-Anwendungskomponente bereitstellen
• Beispieldaten für Aktiengeschäfte in die Datenbank importieren
• Frontend-Anwendungskomponente bereitstellen
• Operationen in der OmegaTrade-Anwendung ausführen

Einrichtung und Anforderungen

Vor dem Klick auf „Start Lab“ (Lab starten)

Lesen Sie diese Anleitung. Labs sind zeitlich begrenzt und können nicht pausiert werden. Der Timer beginnt zu laufen, wenn Sie auf Lab starten klicken, und zeigt Ihnen, wie lange Google Cloud-Ressourcen für das Lab verfügbar sind.

In diesem praxisorientierten Lab können Sie die Lab-Aktivitäten in einer echten Cloud-Umgebung durchführen – nicht in einer Simulations- oder Demo-Umgebung. Dazu erhalten Sie neue, temporäre Anmeldedaten, mit denen Sie für die Dauer des Labs auf Google Cloud zugreifen können.

Für dieses Lab benötigen Sie Folgendes:

• Einen Standardbrowser (empfohlen wird Chrome)

Hinweis: Nutzen Sie den privaten oder Inkognitomodus (empfohlen), um dieses Lab durchzuführen. So wird verhindert, dass es zu Konflikten zwischen Ihrem persönlichen Konto und dem Teilnehmerkonto kommt und zusätzliche Gebühren für Ihr persönliches Konto erhoben werden.

• Zeit für die Durchführung des Labs – denken Sie daran, dass Sie ein begonnenes Lab nicht unterbrechen können.

Hinweis: Verwenden Sie für dieses Lab nur das Teilnehmerkonto. Wenn Sie ein anderes Google Cloud-Konto verwenden, fallen dafür möglicherweise Kosten an.

Lab starten und bei der Google Cloud Console anmelden

1. Klicken Sie auf Lab starten. Wenn Sie für das Lab bezahlen müssen, wird ein Dialogfeld geöffnet, in dem Sie Ihre Zahlungsmethode auswählen können. Auf der linken Seite befindet sich der Bereich „Details zum Lab“ mit diesen Informationen:

   • Schaltfläche „Google Cloud Console öffnen“
   • Restzeit
   • Temporäre Anmeldedaten für das Lab
   • Ggf. weitere Informationen für dieses Lab

2. Klicken Sie auf Google Cloud Console öffnen (oder klicken Sie mit der rechten Maustaste und wählen Sie Link in Inkognitofenster öffnen aus, wenn Sie Chrome verwenden).

   Im Lab werden Ressourcen aktiviert. Anschließend wird ein weiterer Tab mit der Seite „Anmelden“ geöffnet.

   Tipp: Ordnen Sie die Tabs nebeneinander in separaten Fenstern an.

   Hinweis: Wird das Dialogfeld Konto auswählen angezeigt, klicken Sie auf Anderes Konto verwenden.

3. Kopieren Sie bei Bedarf den folgenden Nutzernamen und fügen Sie ihn in das Dialogfeld Anmelden ein.

   {{{user_0.username | "Username"}}}

   Sie finden den Nutzernamen auch im Bereich „Details zum Lab“.

4. Klicken Sie auf Weiter.

5. Kopieren Sie das folgende Passwort und fügen Sie es in das Dialogfeld Willkommen ein.

   {{{user_0.password | "Password"}}}

   Sie finden das Passwort auch im Bereich „Details zum Lab“.

6. Klicken Sie auf Weiter.

   Wichtig: Sie müssen die für das Lab bereitgestellten Anmeldedaten verwenden. Nutzen Sie nicht die Anmeldedaten Ihres Google Cloud-Kontos. Hinweis: Wenn Sie Ihr eigenes Google Cloud-Konto für dieses Lab nutzen, können zusätzliche Kosten anfallen.

7. Klicken Sie sich durch die nachfolgenden Seiten:

   • Akzeptieren Sie die Nutzungsbedingungen.
   • Fügen Sie keine Wiederherstellungsoptionen oder Zwei-Faktor-Authentifizierung hinzu (da dies nur ein temporäres Konto ist).
   • Melden Sie sich nicht für kostenlose Testversionen an.

Nach wenigen Augenblicken wird die Google Cloud Console in diesem Tab geöffnet.

Hinweis: Wenn Sie auf Google Cloud-Produkte und ‑Dienste zugreifen möchten, klicken Sie auf das Navigationsmenü oder geben Sie den Namen des Produkts oder Dienstes in das Feld Suchen ein.

Cloud Shell aktivieren

Cloud Shell ist eine virtuelle Maschine, auf der Entwicklertools installiert sind. Sie bietet ein Basisverzeichnis mit 5 GB nichtflüchtigem Speicher und läuft auf Google Cloud. Mit Cloud Shell erhalten Sie Befehlszeilenzugriff auf Ihre Google Cloud-Ressourcen.

1. Klicken Sie oben in der Google Cloud Console auf Cloud Shell aktivieren .

2. Klicken Sie sich durch die folgenden Fenster:

   • Fahren Sie mit dem Informationsfenster zu Cloud Shell fort.
   • Autorisieren Sie Cloud Shell, Ihre Anmeldedaten für Google Cloud API-Aufrufe zu verwenden.

Wenn eine Verbindung besteht, sind Sie bereits authentifiziert und das Projekt ist auf Project_ID, eingestellt. Die Ausgabe enthält eine Zeile, in der die Project_ID für diese Sitzung angegeben ist:

Ihr Cloud-Projekt in dieser Sitzung ist festgelegt als {{{project_0.project_id | "PROJECT_ID"}}}

gcloud ist das Befehlszeilentool für Google Cloud. Das Tool ist in Cloud Shell vorinstalliert und unterstützt die Tab-Vervollständigung.

3. (Optional) Sie können den aktiven Kontonamen mit diesem Befehl auflisten:

gcloud auth list

4. Klicken Sie auf Autorisieren.

Ausgabe:

ACTIVE: * ACCOUNT: {{{user_0.username | "ACCOUNT"}}} Um das aktive Konto festzulegen, führen Sie diesen Befehl aus: $ gcloud config set account `ACCOUNT`

5. (Optional) Sie können die Projekt-ID mit diesem Befehl auflisten:

gcloud config list project

Ausgabe:

[core] project = {{{project_0.project_id | "PROJECT_ID"}}} Hinweis: Die vollständige Dokumentation für gcloud finden Sie in Google Cloud in der Übersicht zur gcloud CLI.

Cloud Spanner-Instanz

Damit Sie dieses Lab schneller durcharbeiten können, wurden die für die OmegaTrade-Anwendung erforderliche Cloud Spanner-Instanz, die Datenbank und Tabellen automatisch für Sie erstellt.

Hier sind einige Details dazu:

Element	Name	Details
Cloud Spanner-Instanz	omegatrade-instance	Instanz auf Projektebene
Cloud Spanner-Datenbank	omegatrade-db	Instanzspezifische Datenbank
Tabelle	Users	Enthält Nutzerkonten
Tabelle	Companies	Enthält den Unternehmensnamen und das Börsensymbol
Tabelle	CompanyStocks	Enthält Aktienwerte
Tabelle	Simulations	Verfolgt den Status jeder Simulation

Aufgabe 1: Erforderliche Google Cloud-APIs aktivieren

Aktivieren Sie zuerst die Google Cloud-APIs für Cloud Spanner, Container Registry und Cloud Run.

1. Geben Sie in der Cloud Shell die folgenden Befehle ein:

gcloud services enable spanner.googleapis.com gcloud services enable artifactregistry.googleapis.com gcloud services enable containerregistry.googleapis.com gcloud services enable run.googleapis.com

Aufgabe 2: Anwendungscode herunterladen und ansehen

1. Laden Sie das Code-Repository zur Verwendung in diesem Lab herunter. Geben Sie in der Cloud Shell Folgendes ein:

git clone https://github.com/GoogleCloudPlatform/training-data-analyst

2. Gehen Sie zu dem Ordner, der den Anwendungscode enthält.

cd training-data-analyst/courses/cloud-spanner/omegatrade/

3. Der Code ist hauptsächlich in zwei Teile unterteilt: Backend und Frontend. Die Anwendungsarchitektur ist im folgenden Diagramm dargestellt:

4. Die Anwendung ist auf eine bereitstellungsspezifische .env-Datei angewiesen, um erfolgreich mit der Cloud Spanner-Instanz zu kommunizieren. Sie erstellen diese Datei in der nächsten Aufgabe.

5. Was das Backend betrifft, werden einige der Bindungen und Interaktionen mit den Cloud Spanner-Tabellen von Node.js-Modellen verwaltet. Drei davon – company.model.js, simulation.model.js und user.model.js – befinden sich im Ordner models. Führen Sie den folgenden Befehl aus, um zum Ordner „models“ zu wechseln:

cd backend/app/models

6. Führen Sie den folgenden Befehl aus, um sich die Datei company.model.js anzusehen. Diese Datei enthält Datenbankoperationen zur Interaktion mit der Tabelle companies.

more company.model.js

Drücken Sie die Leertaste, um die Datei bis zum Ende durchzugehen. Wenn Sie die Datei vorzeitig schließen möchten, geben Sie q ein, um den Befehl more zu beenden.

7. Einige der Frontend-Interaktionen mit diesen Modellen und anderen Strukturen im Node.js-Backend erfolgen über Angular-Komponenten im Ordner components. Führen Sie den folgenden Befehl aus, um zum Ordner „components“ zu wechseln:

cd ../../../frontend/src/app/components

8. Die Komponente company enthält beispielsweise den Basiscode der Anwendung zum Verwalten und Aktualisieren von Unternehmensinformationen.

9. Führen Sie den folgenden Befehl aus, um sich die TypeScript-Konfigurationsdatei namens manage-company.component.ts anzusehen. Diese Datei enthält Methoden zum Löschen oder Bearbeiten eines Unternehmens sowie weitere Aktionen.

more company/manage-company/manage-company.component.ts

Drücken Sie die Leertaste, um die Datei bis zum Ende durchzugehen. Wenn Sie die Datei vorzeitig schließen möchten, geben Sie q ein, um den Befehl more zu beenden.

Aufgabe 3: Backend-Komponente erstellen und bereitstellen

1. Gehen Sie zu dem Ordner, der den Code zum Erstellen und Bereitstellen des Backends enthält.

cd ../../../../backend

2. Erstellen Sie die .env-Datei. Wie bereits erwähnt, enthält diese Datei projektspezifische Informationen, sodass die Backend-Komponente der Anwendung mit der Cloud Spanner-Instanz kommunizieren kann.

Geben Sie in der Cloud Shell den folgenden Befehl ein, um den Nano-Texteditor aufzurufen und eine neue .env-Datei zu erstellen.

nano .env

Fügen Sie den unten aufgeführten Codeblock ein.

PROJECTID = {{{project_0.project_id|Project ID}}} INSTANCE = omegatrade-instance DATABASE = omegatrade-db JWT_KEY = w54p3Y?4dj%8Xqa2jjVC84narhe5Pk EXPIRE_IN = 30d

Drücken Sie Strg + X, um Nano zu beenden, Y, um die Aktualisierung zu bestätigen, und die Eingabetaste, um die Änderungen zu speichern.

3. Bevor Sie fortfahren, müssen Sie aktualisierte Komponenten für npm installieren, damit das Backend ordnungsgemäß kompiliert werden kann. npm ist ein Paketmanager für JavaScript und der Standardpaketmanager für die JavaScript-Laufzeitumgebung Node.js.

nvm install 22.6 npm install npm -g npm install --loglevel=error

4. Erstellen Sie als Nächstes die Backend-Anwendung mit einem Referenz-Dockerfile, das sich im Repository-Ordner befindet.

docker build -t gcr.io/{{{project_0.project_id|Project ID}}}/omega-trade/backend:v1 -f dockerfile.prod . Hinweis: Sie können alle npm notice...-Meldungen, die während des Build-Prozesses angezeigt werden, getrost ignorieren.

5. Bevor Sie das neue Anwendungspaket pushen, führen Sie den folgenden Befehl aus, um Konfigurationsberechtigungen in der Cloud Shell festzulegen.

Geben Sie y ein, wenn Sie gefragt werden, ob Sie fortfahren möchten.

gcloud auth configure-docker

6. Pushen Sie das neu erstellte Anwendungspaket in das Container-Repository für Ihr Qwiklabs-Projekt.

docker push gcr.io/{{{project_0.project_id|Project ID}}}/omega-trade/backend:v1

7. Stellen Sie zum Schluss die Backend-Anwendung mit Cloud Run bereit. Cloud Run ist ein serverloses Bereitstellungsframework, das die Infrastrukturverwaltung abstrahiert und je nach Traffic fast sofort automatisch hoch- oder herunterskaliert.

gcloud run deploy omegatrade-backend --platform managed --region {{{project_0.default_region|Default Region}}} --image gcr.io/{{{project_0.project_id|Project ID}}}/omega-trade/backend:v1 --memory 512Mi --allow-unauthenticated

8. Kopieren Sie die URL, die am Ende der Bereitstellung angezeigt wird. Speichern Sie die URL in Notepad, in einer Textdatei oder an einer anderen leicht zugänglichen Stelle. Diese URL wird für die Frontend-Anwendung bereitgestellt, damit von der Benutzeroberfläche aus über das Backend eine ordnungsgemäße Kommunikation mit der Cloud Spanner-Datenbank möglich ist.

Die URL des Backend-Dienstes hat das folgende Format:

https://omegatrade-backend-zzzyyyxx1x-uw.a.run.app

Aufgabe 4: Beispieldaten für Aktiengeschäfte in die Datenbank importieren

1. Führen Sie den folgenden Befehl im aktuellen Ordner (Haupt-Backend) aus, um Beispieldaten zu Unternehmen und Aktien zu importieren.

unset SPANNER_EMULATOR_HOST node seed-data.js

2. Sie erhalten eine Bestätigung, dass die Tabellen erfolgreich geladen wurden.

Inserting Companies... done Inserting Simulations... done Inserting Stocks... done Data Loaded successfully

3. Klicken Sie auf Fortschritt prüfen.

Beispieldaten für Aktiengeschäfte in die Datenbank importieren

Aufgabe 5: Frontend-Komponente erstellen und bereitstellen

1. Wechseln Sie in das Verzeichnis mit dem Frontend-Code. Rufen Sie den Ordner „environments“ auf, um die Konfigurationsdatei so zu aktualisieren, dass sie auf Ihre Backend-Komponente verweist.

cd ../frontend/src/environments

2. Geben Sie in der Cloud Shell den folgenden Befehl ein, um den Nano-Texteditor aufzurufen und die Datei environment.ts zu öffnen.

nano environment.ts

3. Ersetzen Sie den String http://localhost:3000 durch die Backend-URL.

Hinweis: Achten Sie darauf, den Teil /api/v1/ der URL beizubehalten.

Drücken Sie Strg + X, um Nano zu beenden, Y, um die Aktualisierung zu bestätigen, und die Eingabetaste, um die Änderungen zu speichern.

Die aktualisierte Datei environment.ts sollte in etwa so aussehen:

export const environment = { production: false, name: "dev", // change baseUrl according to backend URL baseUrl:"https://omegatrade-backend-zzzyyyxx1x-uw.a.run.app/api/v1/", // change clientId to actual value you have received from Oauth console clientId: "" };

4. Gehen Sie zum Hauptordner des Frontends.

cd ../..

5. Installieren Sie aktualisierte Komponenten für npm, damit das Frontend ordnungsgemäß kompiliert werden kann.

npm install npm -g npm install --loglevel=error Hinweis: Sie können alle npm WARN config...-Meldungen, die während der Installation angezeigt werden, getrost ignorieren.

6. Erstellen Sie als Nächstes die Frontend-Anwendung mit einem Referenz-Dockerfile, das sich im Repository-Ordner befindet. Die Frontend-Erstellung kann 5 bis 10 Minuten dauern.

docker build -t gcr.io/{{{project_0.project_id|Project ID}}}/omegatrade/frontend:v1 -f dockerfile . Hinweis: Sie können alle npm notice...-Meldungen, die während des Build-Prozesses angezeigt werden, getrost ignorieren.

7. Pushen Sie das neu erstellte Anwendungspaket in das Container-Repository für Ihr Qwiklabs-Projekt.

docker push gcr.io/{{{project_0.project_id|Project ID}}}/omegatrade/frontend:v1

8. Stellen Sie zum Schluss die Frontend-Anwendung mit Cloud Run bereit.

gcloud run deploy omegatrade-frontend --platform managed --region {{{project_0.default_region|Default Region}}} --image gcr.io/{{{project_0.project_id|Project ID}}}/omegatrade/frontend:v1 --allow-unauthenticated

9. Die URL des Frontend-Dienstes hat das unten stehende Format. Sie können direkt auf die URL klicken, um sie zu öffnen, oder die URL kopieren und in die Adressleiste eines neuen Tabs einfügen.

https://omegatrade-frontend-zzzyyyxx1x-uw.a.run.app

Aufgabe 6: Operationen in der OmegaTrade-Anwendung ausführen

1. Klicken Sie auf der Seite zum Starten der Anwendung auf den Link sign up (Registrieren).

2. Erstellen Sie mit den folgenden Details ein neues Konto für ein fiktives Unternehmen namens Spanner1.

Element	Wert
Business email (Geschäftliche E-Mail-Adresse)	admin@spanner1.com
Full Name (Vollständiger Name)	Spanner1 Admin
Password (Passwort)	Spanner1
Confirm your Password (Passwort bestätigen)	Spanner1

3. Ihr Konto wird erstellt und Sie werden angemeldet.

4. Rufen Sie das Dashboard auf und wählen Sie Foobar Inc aus, um das Diagramm zur Aktienperformance von Foobar Inc. aufzurufen. Sie sehen eine Reihe von simulierten Aktienkursen im Zeitverlauf für Foobar Inc.

5. Rufen Sie Manage Company (Unternehmen verwalten) auf und fügen Sie Spanner1 als neues Unternehmen hinzu.

6. Klicken Sie rechts auf der Seite auf Add Company (Unternehmen hinzufügen). Geben Sie im Pop-up-Fenster die folgenden Werte ein:

Element	Wert
Company Name (Unternehmensname)	Spanner1
Short Code (Kurzcode)	SPN

Klicken Sie anschließend auf Save (Speichern).

7. Spanner1 ist jetzt in der Liste der Unternehmen enthalten.

8. Rufen Sie das Dashboard auf und wählen Sie Spanner1 aus, falls es nicht bereits ausgewählt ist. Sie sehen, dass für Spanner1 keine Simulation vorhanden ist. Klicken Sie auf den Link here (hier), um eine Simulation zu generieren.

9. Geben Sie unter Simulate Data (Daten simulieren) die folgenden Informationen an:

Element	Wert
Select Company (Unternehmen auswählen)	Spanner1
Select Interval (Intervall auswählen)	5
Number of Records (Anzahl der Datensätze)	50

Klicken Sie dann auf Simulate (Simulieren).

10. Rufen Sie das Dashboard auf. Das Diagramm für Spanner1 wird im Laufe der Simulation sofort aktualisiert. Die Simulation dauert insgesamt 3 bis 6 Minuten.

11. Mit der OmegaTrade-Anwendung können Sie auch vorhandene Unternehmensinformationen ändern. Klicken Sie auf dem Tab Manage Company (Unternehmen verwalten) unter Action (Aktion) auf das Stiftsymbol für Acme Corp.

12. Ändern Sie den Unternehmensnamen in Coyote Inc. Beachten Sie, dass das Feld Short Code (Kurzcode) in der Benutzeroberfläche nicht geändert werden kann. Klicken Sie auf Update (Aktualisieren), um das Fenster zu schließen und die Änderung zu übernehmen.

13. Die Aktualisierung des Unternehmensnamens erfolgt sofort. Rufen Sie das Dashboard auf. Dort wird nun statt Acme Corp der Name Coyote Inc angezeigt.

14. Gelegentlich sind Datenänderungen erforderlich, die über die Möglichkeiten des Anwendungscodes hinausgehen. Da Sie über die nötigen Berechtigungen verfügen, können Sie die in der OmegaTrade-Anwendung verwendeten Daten aktualisieren, indem Sie direkte Änderungen in der Cloud Spanner-Datenbank vornehmen.

15. Klicken Sie in der Cloud Console auf Navigationsmenü () > Alle Produkte anzeigen > Datenbanken > Spanner.

16. Bestätigen Sie alle eingeblendeten Fenster.

17. Klicken Sie auf den Namen omegatrade-instance und dann unter Datenbanken auf omegatrade-db. Klicken Sie unten auf der Seite in der Liste der Tabellen auf companies.

18. Klicken Sie im linken Bereich auf Daten, um den Tabelleninhalt aufzurufen.

19. Sie aktualisieren den Namen der Entität Bar Industries.

20. Klicken Sie auf das Kästchen in der Zeile Bar Industries. Klicken Sie dann auf Bearbeiten.

21. Sie werden zu Spanner Studio weitergeleitet. Klicken Sie auf + Neuer Tab. Geben Sie die folgende Abfrage ein, um den Wert für companyName von Bar Industries in Consolidated Enterprises Inc zu ändern.

UPDATE companies SET companyName='Consolidated Enterprises Inc' WHERE companyName='Bar Industries'; Hinweis: Im Cloud Spanner-Abfragefenster können Sie den Wert für (Kurzcode) ändern. Der Anwendungscode ist so konzipiert, dass dieser Wert nicht über die Benutzeroberfläche aktualisiert werden kann.

22. Klicken Sie auf Ausführen, um die Änderung zu verarbeiten.

23. Kehren Sie zur Anwendungsseite zurück, aktualisieren Sie den Browser und rufen Sie den Tab Dashboard auf. Sie sehen, dass nun statt Bar Industries der Name Consolidated Enterprises Inc angezeigt wird.

Glückwunsch!

Sie haben eine Node.js-Anwendung bereitgestellt, die mit einer Cloud Spanner-Instanz verbunden ist, über die Anwendung grundlegende Operationen in der Datenbank ausgeführt und Daten direkt in der Datenbank bearbeitet.

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 12. Mai 2025 aktualisiert

Lab zuletzt am 12. Mai 2025 getestet

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