Erste datenbankgestützte Webanwendung mit Google AI Studio und Cloud SQL erstellen

1. Hinweis

Wenn du schon einmal versucht hast, einen Wochenendlauf mit Freunden oder Nachbarn zu organisieren, weißt du, wie schwierig das sein kann: Treffpunkte gehen in endlosen Gruppenchats verloren, Leute fragen ständig, welches Tempo alle laufen, und Neulinge sind sich nie sicher, wer kommt.

In diesem Codelab erstellen Sie die Web-App Running Club, mit der Sie dieses alltägliche Problem lösen. In dieser App können lokale Läufer ihre Lieblingsstrecken ansehen, Wochenendtreffen planen, mit einem Klick zusagen und mit anderen Läufern chatten.

Warum benötigt diese App eine Datenbank?

Eine Community-App benötigt einen zuverlässigen Speicher, eine Datenbank. Wenn ein Läufer eine neue malerische Route hinzufügt, sich für den Lauf am Samstagmorgen anmeldet oder einen Kommentar mit einer Frage zum Parken postet, dürfen diese Informationen nicht verschwinden, wenn er sein Smartphone schließt oder seinen Computer ausschaltet. In einer Datenbank werden alle Routen, Teilnehmerlisten und Mitgliedernachrichten sicher gespeichert und organisiert. So sehen alle Mitglieder des Clubs aktuelle Informationen, wenn sie die App öffnen.

Sie erstellen diese App im Build-Modus von Google AI Studio. Sie müssen keinen komplexen Code schreiben oder eine technische Infrastruktur einrichten – Sie beschreiben einfach in natürlicher Sprache, was Sie möchten. Google AI Studio generiert die App, verbindet eine echte Cloud SQL for PostgreSQL-Datenbank, um Ihre Daten zu speichern, und veröffentlicht die App live in Cloud Run, damit Ihre Community sie sofort verwenden kann.

Aufgaben

Sie erstellen und starten Running Club, eine Community-Web-App, die Folgendes umfasst:

  • Google Log-in: Schnelle und sichere Anmeldung mit einem bestehenden Google-Konto.
  • Läuferprofile: Mitgliederprofile, in denen Laufpräferenzen und das angestrebte Tempo angegeben sind.
  • Routenbibliothek: Eine Sammlung von Lieblingsrouten in der Nachbarschaft mit Angaben zu Entfernung, Schwierigkeitsgrad und Treffpunkten.
  • Anstehende Läufe: Eine Pinnwand, auf der du anstehende Gruppenläufe organisieren und mit Routen verknüpfen kannst.
  • Einfache Zusagen: Mitglieder können mit einem Klick zusagen und sehen, wer noch kommt.
  • Diskussionen führen: In einem Kommentarbereich für jeden Lauf können Sie Details abstimmen, Fragen stellen und Neuigkeiten teilen.

Lerninhalte

  • So erstellen Sie in Google AI Studio mit einem einzigen Prompt in natürlicher Sprache eine funktionierende Web-App.
  • So richtet Google AI Studio das Google Log-in automatisch ein.
  • So erstellt und verbindet Google AI Studio eine echte Cloud SQL for PostgreSQL-Datenbank, um sich Ihre Daten zu merken.
  • So fügen Sie neue Funktionen hinzu und erweitern Ihre Datenbank, indem Sie einfach mit der KI chatten.
  • So prüfen Sie, ob die Daten Ihres Clubs bei jedem Besuch sicher gespeichert werden.
  • So veröffentlichen Sie Ihre App mit Cloud Run im Internet.
  • So rufen Sie Ihre Live-App und ‑Datenbank in der Google Cloud Console auf.

Voraussetzungen

  • Einen modernen Webbrowser wie Google Chrome.
  • Ein Standard-Google-Konto, mit dem Sie sich in Google AI Studio anmelden können.

Voraussetzungen und Limits für Cloud SQL Starter Edition

Google AI Studio bietet das Google Cloud Starter Tier, mit dem Entwickler generative Apps und verwaltete Datenbanken testen können:

  • Voraussetzungen:
    • Für Personen mit einem Standard-Google-Konto verfügbar.
    • Nicht berechtigte Konten sind unter anderem Konten von Nutzern mit bestehenden oder früheren Google Cloud-Abrechnungskonten sowie Konten, die mit Google Workspace, Google Workspace for Education oder Google for Nonprofits verknüpft sind.
    • Wenn Ihr Konto nicht für das Starter-Tier infrage kommt, können Sie dieses Codelab trotzdem durchführen, indem Sie ein vorhandenes Google Cloud-Projekt mit aktivierter Abrechnung in AI Studio auswählen.
  • Ressourcenspezifikationen:
    • Stellt eine Cloud SQL for PostgreSQL Developer Edition-Instanz mit PostgreSQL 18 bereit.
    • Enthält 0, 5 vCPU, 2 GB RAM und 1 GB Speicher. Das sollte für Hunderte von täglichen Besuchen über einige Monate oder länger ausreichen, je nach Aktivität.
    • Unterstützt Scale-to-Zero, wodurch die Berechnung automatisch pausiert wird, wenn keine aktiven Datenbankverbindungen bestehen, um das Kontingent zu schonen.
  • Quota:
    • Enthält ein kostenloses monatliches Kontingent von 50 Recheneinheiten und 10 GB Speicherplatz.

2. Google AI Studio öffnen und eine neue App starten

Öffnen Sie Google AI Studio in Ihrem Browser, um loszulegen. Dies ist Ihr Arbeitsbereich, in dem Sie Apps erstellen und testen können, indem Sie einfach beschreiben, was Sie benötigen.

Schritt 1: In Google AI Studio anmelden

  1. Öffnen Sie Ihren Webbrowser (z. B. Google Chrome) und rufen Sie aistudio.google.com auf.
  2. Klicken Sie auf Jetzt starten und melden Sie sich mit Ihrem Standard-Google-Konto an, z. B. Ihrem Gmail-Konto.

Jetzt starten

  1. Wenn Sie bei Ihrem ersten Besuch aufgefordert werden, die Nutzungsbedingungen zu lesen, tun Sie das und akzeptieren Sie sie, um fortzufahren.

Schritt 2: Neue Bewerbung starten

  1. Klicken Sie im unteren mittleren Bereich auf Start building (Entwicklung starten) oder im rechten Bereich auf +New App (+ Neue App).

Gleich mit dem Erstellen loslegen

3. Mit einem einfachen Prompt und Firebase Authentication beginnen

Sie benötigen keine komplexen Architekturdiagramme, um loszulegen. Sie können Ihre erste Anwendung starten, die Google-Anmeldung konfigurieren und Ihre Datenbank mit einem einzigen Satz verbinden.

Geben Sie den ersten Prompt ein

Geben Sie im Prompt-Feld des AI Studio-Build-Modus den folgenden Prompt ein und drücken Sie die Eingabetaste:

Build a running club web app with a Cloud SQL database
where members can post upcoming runs.

Neue App für AI Studio

Über diesen Link wird das Prompt-Feld automatisch ausgefüllt.

Arbeitsbereich kennenlernen

Nachdem Sie Ihren Prompt gesendet haben, wird in Google AI Studio der vollständige Anwendungsarbeitsbereich geöffnet. Sehen Sie sich die drei Hauptbereiche auf dem Bildschirm an:

AI Studio-Arbeitsbereich

  • Chat-/Promptfeld (unten): Hier können Sie in natürlicher Sprache mit der KI chatten, um Funktionen hinzuzufügen, Designs anzupassen oder Fragen zu stellen.
  • Bereich „Dateien und Code“ (links): Hier werden die Dateien angezeigt, die von der KI im Hintergrund erstellt werden. Sie müssen keinen Code selbst schreiben oder bearbeiten. In diesem Bereich können Sie jedoch beobachten, wie die KI die einzelnen Teile Ihrer App erstellt.
  • Live-Vorschaufenster (rechte Seite): Hier wird Ihre aktuelle Arbeits-App in Echtzeit angezeigt. Sie können in diesem Fenster auf Schaltflächen klicken, Text in Textfelder eingeben und Ihre App direkt testen, sobald sie generiert wurde.
  • Code-Editor (rechte Seite): Hier wird der tatsächliche Code angezeigt, der von der KI generiert wird. Sie können ihn bearbeiten, wenn Sie möchten, aber es ist nicht erforderlich.
  • Bereitstellung und Freigabe (rechts oben): Hier können Sie Ihre App im Internet bereitstellen und mit anderen teilen.

Was Google AI Studio automatisch erledigt

Während die KI Ihre Anfrage verarbeitet, können Sie beobachten, wie Ihre App Schritt für Schritt erstellt wird:

  1. Google Log‑in einrichten: Die KI integriert automatisch Google Log‑in, damit sich Ihre Läufer sicher mit ihren Google-Konten anmelden können. Sie müssen keine Nutzerpasswörter oder Sicherheitseinstellungen verwalten.
  2. Verbindung zu einer echten Datenbank herstellen: Die KI richtet eine verwaltete Cloud SQL-Datenbank ein, in der die Daten Ihrer Community gespeichert werden. Klicken Sie gegebenenfalls, um die Datenbank für Ihr Projekt zu aktivieren.

Neue App für AI Studio

  1. Datenbanktabellen organisieren (schema.ts): Ein Datenbankschema ist wie eine Sammlung organisierter Tabellen. Die KI erstellt automatisch die Speicherstruktur für Ihre App:
    • Tabelle users: Hier werden Mitgliederprofile, Namen, Avatare und das Lauftempo gespeichert.
    • runs-Tabelle: Hier werden geplante Termine mit Titel, Distanz, Zieltempo, Ort und Datum gespeichert.
    • comments-Tabelle: Hier werden Nachrichten und Fragen gespeichert, die Läufer unter den einzelnen Läufen hinterlassen haben.
    Alle diese Änderungen werden automatisch im Codebereich vorgenommen. Wenn Sie vom Tab Vorschau zum Tab Code wechseln, sehen Sie, wie diese Kategorien organisiert sind. Sie müssen den Code jedoch nicht selbst schreiben, da dies automatisch erfolgt.Neue App für AI StudioHinweis: Sie müssen diesen Code niemals manuell schreiben oder bearbeiten. Die KI aktualisiert ihn für Sie, wenn Sie neue Funktionen anfordern.
  2. Visuelle Benutzeroberfläche erstellen: Die KI erstellt die Webseiten, die Sie auf dem Bildschirm sehen, einschließlich der Kopfzeile, der Liste der anstehenden Läufe, des Formulars zum Erstellen von Veranstaltungen und des Kommentarbereichs.

Authentifizierung bestätigen und Posting ausführen

Wenn die Generierung abgeschlossen ist, testen Sie Ihre neue App im Bereich Vorschau:

  1. Klicken Sie im Vorschaufenster auf Mitglied anmelden oder auf den Button Bald stattfindenden Lauf posten, um die Authentifizierung zu starten.
  2. Authentifizieren Sie sich mit Ihrem Google-Konto über den Firebase Auth-Dialog.
  3. Nach der Anmeldung werden Ihr Google-Profilname und ‑avatar in der Navigationsleiste angezeigt und Ihre Tempos werden automatisch verwaltet.
  4. Geben Sie im Formular „Post Upcoming Run“ (Bevorstehenden Lauf posten) einen Titel ein, z. B. Morning 5K Shakeout.
  5. Wählen Sie ein Datum und eine Uhrzeit aus und geben Sie einen Besprechungsort ein (z. B. Central Park West Entrance).
  6. Klicken Sie auf PublishRun (Lauf veröffentlichen). Neue App für AI Studio
  7. Prüfe, ob der neue Lauf sofort im Feed mit anstehenden Läufen angezeigt wird und ob dein authentifizierter Profilname und das Tempologo als Organisator zu sehen sind. Neue App für AI Studio
  8. Poste eine kurze Nachricht im Diskussionsbereich des Laufs (z. B. Bringing extra water bottles!) und prüfe, ob sie im Kommentarbereich angezeigt wird.

4. Routenbibliothek erstellen

Laufvereine verwenden häufig beliebte lokale Routen. Anstatt immer wieder dieselben Routeninformationen einzugeben, können Mitglieder Lieblingsrouten in einem Katalog speichern und sie bei der Planung eines Laufs anhängen.

KI bitten, die Routenbibliothek hinzuzufügen

Geben Sie im Chat-Promptfeld die folgende Anfrage ein und drücken Sie die Eingabetaste:

Add a route library where members can save favorite
running routes with atitle, distance in km, difficulty,
and start location. When scheduling a run, allow the
organizer to select a route from this library.

Neue App für AI Studio

Dazu erstellt die KI automatisch eine neue Speichertabelle für routes und verbindet sie direkt mit der Tabelle runs. Über diese Verbindung kann Ihre App automatisch Distanz- und Standortdetails abrufen, wenn ein Organisator eine Route auswählt.

(Auch hier müssen Sie diesen Code nicht bearbeiten – die KI aktualisiert die Datenbankstruktur für Sie.)

Neue Routenbibliothek in der Vorschau testen

Sobald die KI die Aktualisierung Ihrer App abgeschlossen hat, können Sie das neue Routen-Feature im Live-Vorschaufenster ausprobieren:

  1. Klicken Sie in der App-Navigation auf den Tab Routenbibliothek. Wenn kein solcher Tab vorhanden ist, sieh dir den unteren Bereich der Live-Vorschau an. Möglicherweise wirst du aufgefordert, auf die Schaltfläche Speichern zu klicken, um die Vorschau zu aktualisieren. Wenn das nicht hilft, versuchen Sie, mit der KI im Chatfenster zu interagieren und zu fragen, wo sich Ihre Routenbibliothek befindet.
  2. Klicken Sie auf Neue Route speichern (oder Route hinzufügen) und geben Sie einige Beispieldetails ein:
    • Routentitel: Riverfront Trail Loop
    • Distanz: 8.5 km
    • Schwierigkeitsgrad: Moderate
    • Startort: Waterfront Pier 4
  3. Klicke auf In Mediathek speichern.
  4. Klicke auf der Karte deiner neuen Route auf die Schaltfläche Lauf planen, um einen Lauf mit dieser Route zu planen. Neue App für AI Studio
  5. Die Angaben zu Distanz, Schwierigkeitsgrad und Ort werden automatisch für dich ausgefüllt.
  6. Klicke auf Publish Run (Lauf veröffentlichen) und prüfe, ob dein neuer Gruppenlauf im Homefeed angezeigt wird.

5. Antwortfunktion und Einladungen für Mitglieder implementieren

Community-Apps leben von der Teilnahme. Du kannst Läufern anzeigen, wer an einem bevorstehenden Lauf teilnimmt, dich mit einem Klick anmelden und einen Einladungslink mit Freunden teilen.

KI bitten, Antworten und Einladungen hinzuzufügen

Geben Sie im Chat-Promptfeld die folgende Anfrage ein und drücken Sie die Eingabetaste:

Allow registered members to RSVP ("Join Run") to any upcoming run.
Show the list of attending runners on each run card, display an
attendee counter, and add a copyable invite link.

So verfolgt die KI Teilnehmer im Hintergrund

Damit Sie im Blick behalten, welche Läufer zu den einzelnen Läufen kommen, erstellt die KI automatisch eine rsvps-Tabelle in Ihrer Datenbank. Stellen Sie sich das wie eine digitale Anmeldeliste vor, in der der Name eines Läufers mit einem bestimmten Event verknüpft wird.

Sie müssen diesen Code nicht schreiben oder bearbeiten. Die KI verwaltet dieses Anmeldeformular automatisch in Ihrer Datenbank.

Antworten und Einladungen in der Vorschau testen

Wenn die KI die Aktualisierung Ihrer App abgeschlossen hat, testen Sie die neuen RSVP-Funktionen im Live-Vorschaufenster:

  1. Suche im Vorschaufenster in deinem Home-Feed nach einem bevorstehenden Lauf.
  2. Klicke auf die Schaltfläche Lauf beitreten oder Zusagen.
  3. Prüfe, ob dein Name und Avatar im Bereich Teilnehmende Läufer angezeigt werden und der Zähler für Teilnehmer um 1 erhöht wurde.
  4. Klicken Sie auf Einladungslink kopieren und prüfen Sie, ob ein Link zum Freigeben generiert wurde.

Neue App für AI Studio

6. Testdatenpersistenz und Cloud SQL Skalierung auf null

Beim Erstellen einer App ist es am wichtigsten, dass die Daten Ihrer Community geschützt sind. Wenn Sie Ihren Browser aktualisieren, den Tab schließen oder Ihren Computer herunterfahren, sollen alle gespeicherten Routen, Zusagen und Diskussionen weiterhin verfügbar sein, wenn Sie zurückkehren.

In diesem Schritt testen Sie, ob Ihre Daten sicher in Ihrer Cloud SQL-Datenbank gespeichert werden. Außerdem erfahren Sie, wie Google Cloud Energie und Kosten spart, wenn Ihre App nicht aktiv ist.

App aktualisieren

  1. Klicken Sie im Vorschaufenster von AI Studio auf die Schaltfläche Neu laden oder aktualisieren Sie den Browsertab.

Neue App für AI Studio

  1. Sehen Sie sich Ihre App in der Vorschau an. Alles, was Sie erstellt haben – Ihr Mitgliederprofil, gespeicherte Routen, geplante Läufe, Zusagen und Kommentare – ist noch da, wo Sie es hinterlassen haben.
  2. Ihre App hat die Informationen nicht nur vorübergehend auf dem Bildschirm angezeigt, sondern sie sicher in Ihrer Cloud SQL-Datenbank gespeichert.

Wie Cloud SQL Energie und Kosten spart („Skalierung auf null“)

Was passiert, wenn mitten in der Nacht niemand die App Ihres Laufclubs verwendet?

  • Automatischer Ruhezustand („Skalierung auf null“): Wenn niemand die App besucht oder sich für Läufe anmeldet, wird die Datenbank automatisch pausiert, um Ressourcen zu sparen.
  • Sofortiges Aktivieren: Sobald ein Läufer die App öffnet oder auf einen Einladungslink klickt, wird die Datenbank sofort mit allen gespeicherten Informationen aktiviert.
  • Keine Leerlaufkosten: Da die App im inaktiven Zustand in den Ruhemodus wechselt, werden keine Rechenressourcen verbraucht, wenn sie nicht verwendet wird.

7. In Cloud Run veröffentlichen und bereitstellen

Nachdem du deine Running Club App erstellt und in der Vorschau getestet hast, kannst du sie jetzt mit deiner Community teilen. Sie müssen kein Webhosting erwerben oder Server konfigurieren. Ihre App kann mit nur einem Klick im Internet veröffentlicht werden.

App im Web veröffentlichen

  1. Klicken Sie rechts oben in Google AI Studio auf die Schaltfläche Veröffentlichen.
  2. Ein Zusammenfassungsfenster mit den Details wird angezeigt:
    • Hosting: Gehostet und bereitgestellt in Google Cloud Run. Neue App für AI Studio
    • Verbundene Dienste: Google Log-in und Ihre Cloud SQL-Datenbank. Neue App für AI Studio
  3. Klicken Sie auf Veröffentlichen, um Ihre App zu starten. Neue App für AI Studio

Live-App öffnen und teilen

  1. Nach Abschluss der Veröffentlichung stellt Google AI Studio Ihre Live-Webadresse zusammen mit einem QR-Code bereit. Neue App für AI Studio
  2. Klicken Sie auf den Link, um Ihre Live-Web-App in einem neuen Browsertab zu öffnen, oder scannen Sie den QR-Code mit der Kamera Ihres Smartphones.
  3. Auf dem Smartphone ausprobieren: Melden Sie sich auf Ihrem Smartphone an, bestätigen Sie die Teilnahme an einem der Läufe, die Sie zuvor auf Ihrem Computer geplant haben, und sehen Sie zu, wie sich die Teilnehmerzahl in Echtzeit aktualisiert – dank Ihrer gemeinsam genutzten Cloud SQL-Datenbank.

8. (Bonus) Ressourcen in der Google Cloud Console prüfen

Wenn Google AI Studio Ihre App erstellt und bereitstellt, wird sie nicht in einer privaten Blackbox eingeschlossen. Stattdessen werden in Ihrem Namen echte, produktionsreife Google Cloud-Dienste erstellt. Die Google Cloud Console ist die Steuerzentrale, in der Sie Ihre Live-App und Datenbank ansehen können.

Schritt 1: Google Cloud Console öffnen

  1. Öffnen Sie in einem neuen Browsertab die Google Cloud Console.
  2. Klicken Sie oben auf dem Bildschirm auf das Drop-down-Menü für das Projekt und wählen Sie das Projekt aus, das für Ihre AI Studio-App erstellt wurde (der Name beginnt in der Regel mit continual-run-).

Schritt 2: Ansehen, wo Ihre Webanwendung ausgeführt wird (Cloud Run)

  1. Geben Sie oben in der Suchleiste Cloud Run ein und wählen Sie den Eintrag aus den Ergebnissen aus. Neue App für AI Studio
  2. Klicken Sie auf den Namen Ihrer App, z. B. running-club. Neue App für AI Studio
  3. Hier können Sie sich die Engine ansehen, auf der Ihre Website gehostet wird:
    • Messwerte: Mithilfe von Grafiken können Sie nachvollziehen, wie viele Nutzer Ihre Website besuchen.
    • Protokolle: Eine Live-Aufzeichnung der Aktivitäten, die zeigt, was passiert, wenn Besucher mit Ihrer App interagieren.

Schritt 3: Datenbank in Aktion sehen (Cloud SQL)

  1. Geben Sie in der Suchleiste oben Cloud SQL ein und wählen Sie das Ergebnis aus.
  2. Klicken Sie auf Ihre PostgreSQL-Datenbankinstanz. Neue App für AI Studio
  3. Hier sehen Sie die Details Ihrer Live-Datenbank. So können Sie prüfen, ob Ihre Datenbank aktiv ist und bereit, die Daten Ihres Laufclubs zu speichern. Neue App für AI Studio

9. Ressourcen bereinigen

Wenn Sie diese App als Übungsprojekt erstellt haben, können Sie sie ganz einfach löschen. Wenn du deine Laufclub-App weiterhin mit deiner Community verwenden möchtest, kannst du sie einfach weiterlaufen lassen.

  1. Klicken Sie in Google AI Studio in der Seitenleiste links auf Meine Apps.
  2. Suche nach der Running Club App.
  3. Klicken Sie auf App löschen oder auf das Papierkorbsymbol. Dadurch wird Ihre Live-Webseite deaktiviert und die Testdatenbank wird in einem Schritt für Sie entfernt. Neue App für AI Studio

10. Glückwunsch

Sie haben Ihre erste datenbankgestützte Webanwendung mit Google AI Studio und Cloud SQL erstellt, angepasst und veröffentlicht.

Über diesen Link kannst du das Badge Builder Journey abgeschlossen erhalten.

goo.gle/builders ist der richtige Ort für Ihr nächstes Lab.

Ihre Erfolge

  • App mit einfacher Sprache erstellt: Eine vollständige App für einen Laufclub mit einfachen Prompts erstellt.
  • Google Log-in aktiviert: Richten Sie automatisch eine sichere Anmeldung mit Google-Konten ein.
  • Echte Datenbank verbunden: Gespeicherte Routen, geplante Läufe, RSVPs und Diskussionen werden sicher in Cloud SQL gespeichert.
  • Funktionen per Konversation hinzugefügt: Durch einfaches Chatten mit der KI wurde eine Routenbibliothek und eine RSVP-Funktion erstellt.
  • Live im Web veröffentlicht: Sie haben Ihre App mit einem Klick im Internet bereitgestellt und auf verschiedenen Geräten getestet.
  • Hinter die Kulissen geschaut: Sie haben sich angesehen, wie Google Cloud Ihre Live-Webanwendung und ‑Datenbank hostet.

Nächste Schritte

Sie können weiterhin mit der KI in Google AI Studio chatten, um Ihre App mit neuen Funktionen zu erweitern:

  • Interaktive Karten: Bitten Sie die KI, Kartenvorschauen und GPS-Routen hinzuzufügen.
  • Laufpartner finden: Die KI kann dir Laufpartner mit ähnlichen Geschwindigkeitszielen vorschlagen.
  • Wettervorhersagen: Die KI kann auf bevorstehenden Laufkarten Wettervorhersagen für das Wochenende anzeigen.
  • Fotos teilen: Fordere die KI auf, Läufern zu erlauben, nach einem Gruppenlauf Fotos zu teilen.

Weitere Informationen