To-do-Webanwendung mit KI starten

1. Einführung

Übersicht

Wo fängt die Entwicklung mit KI heute an? Für die meisten von uns beginnt es mit einer einfachen Anfrage oder einem Prototyp. Google AI Studio bietet einen leistungsstarken Build Mode (oft auch als „Vibe Coding“ bezeichnet), mit dem Sie Full-Stack-Webanwendungen mithilfe von Codeerzeugung auf Basis von Gemini-Modellen entwerfen, testen und erstellen können.

In diesem Codelab entwickeln Sie eine kollaborative To-do-Anwendung mit einer Firestore-Datenbank für nichtflüchtigen Speicher und Firebase Authentication für Nutzeranmeldungen. Der AI Studio-Agent konfiguriert alle Backend-Dienste und schreibt den Code für die Frontend- und Datenbankinteraktion. Wenn die App fertig ist, können Sie sie mit einem einzigen Klick direkt in Cloud Run bereitstellen.

Aufgaben

  • Lassen Sie Google AI Studio einen Prototyp für eine Webanwendung für eine gemeinsame To-do-Liste erstellen.
  • Konfigurieren und aktivieren Sie die Firebase-Integration, um eine Firestore-Datenbank bereitzustellen und die Google Log-in-Authentifizierung einzurichten.
  • Testen Sie die Anwendung in der interaktiven Vorschau-Sandbox.
  • Die Anwendung direkt über die Google AI Studio-Benutzeroberfläche in Cloud Run bereitstellen

Lerninhalte

  • In diesem Video erfahren Sie, wie Sie mit dem Build-Modus von Google AI Studio schnell einen Full-Stack-Dienst mit natürlicher Sprache prototypisieren können.
  • So konfiguriert Google AI Studio automatisch die Integrationen von Firebase Firestore und Firebase Authentication.
  • So stellen Sie Ihre AI Studio-Anwendung als serverlosen Container in Cloud Run bereit.
  • So prüfen Sie Datenbankeinträge und den Sicherheitsstatus in der Firebase Console.

2. Projekt einrichten

Prüfen Sie vor dem Start von AI Studio Ihren Kontostatus und die Voraussetzungen.

Google-Konto- und Ebeneninformationen

  1. Wenn Sie noch kein Google-Konto haben, erstellen Sie ein Google-Konto.
    • Tipp: Verwenden Sie für dieses Lab nach Möglichkeit ein privates Google-Konto. Bei Gruppen-, Unternehmens- oder Konten von Bildungseinrichtungen können Workspace-Richtlinien erzwungen werden, durch die experimentelle Funktionen oder Cloud-Integrationen deaktiviert werden.
  2. Abrechnungsdetails für Bereitstellungen ansehen:
    • Google Cloud-Starter-Stufe: Ermöglicht die kostenlose Veröffentlichung von bis zu zwei Full-Stack-Anwendungen in einer ausgewählten Region, ohne dass ein vollständiges Google Cloud-Rechnungskonto eingerichtet werden muss.
    • Standardbereitstellung: Stellt eine Verbindung zu einem vorhandenen kostenpflichtigen Google Cloud-Projekt her und erweitert Speicherlimits, CPU-Ressourcen und APIs.

3. Aufgaben-App im Build-Modus von AI Studio erstellen

Erstellen wir die Anwendungsshell und fordern wir den KI-Code-Assistenten auf, Sicherheits- und Persistenzebenen zu erstellen.

  1. Rufen Sie das Google AI Studio-Apps-Steuerfeld auf und klicken Sie auf Neue App.
  2. Geben Sie im Chat-Prompt-Feld die Beschreibung für Ihre To-do-App ein: 
    Build a collaborative to-do list application using Firebase as a
backend. Users must be able to securely sign in using Google Sign-In,
view their personal tasks, add new task items, toggle status as
completed, and delete tasks. The database must isolate tasks so users
can only view and modify their own records.
  3. Klicken Sie auf Erstellen, um die App-Generierung zu starten.

Wenn der AI Studio-Agent erkennt, dass eine Datenbank und eine sichere Nutzeranmeldung erforderlich sind, wird der automatisierte Firebase-Konfigurationsablauf ausgelöst.

  1. Nach etwa einer Minute wird im Arbeitsbereich eine Integrationskarte mit der Aufforderung Firebase aktivieren angezeigt.
  2. Klicken Sie auf die Schaltfläche Firebase aktivieren, um die Nutzungsbedingungen zu bestätigen und zu akzeptieren.
  3. Der Agent führt die Einrichtung im Hintergrund aus. Im Detail:
    • Eine Firestore-Datenbankinstanz wird bereitgestellt.
    • Firebase Authentication ist aktiviert und Google Log-in ist aktiviert.
    • Eine Dienstkontokonfiguration wird eingerichtet, z.B. durch Erstellen von src/lib/firebase.ts mit API-Anmeldedaten.
    • Es wird eine firestore.rules mit standardmäßigen Sicherheitsgrenzen (Regeln zur Nutzerisolierung) hinzugefügt.

4. Testen und Wiederholen

Bevor Sie den Dienst live schalten, sollten Sie Validierungsprüfungen in der interaktiven Vorschau durchführen.

  1. Öffnen Sie das Vorschaufenster in Google AI Studio.
  2. Klicken Sie auf die Schaltfläche „Anmelden“, um die Google Log-in-Authentifizierung für die Sandbox auszulösen.
    • Hinweis zum Beheben von Fehlern: Während der Generierung oder des Tests können gelegentlich Laufzeitprobleme, Kompilierungsfehler oder Firestore-Berechtigungsfehler aufgrund von Sicherheitsregeln auftreten, die nicht richtig ausgerichtet sind. In diesem Fall wird in AI Studio im Chat die Schaltfläche Fix (Beheben) angezeigt. Sie können den Agenten dann bitten, das Problem automatisch zu diagnostizieren und zu beheben.
    Ort des Buttons „Google AI Studio Fix“
  3. Fügen Sie nach der Anmeldung mehrere Aufgaben hinzu, z.B. „Cloud Run-Dokumentation lesen“ und „Codelab abschließen“.
  4. Markieren Sie einige Aufgaben als erledigt und löschen Sie eine, um sicherzustellen, dass die clientseitigen Handler und der Datenbankstatus korrekt aktualisiert werden.
  5. Wenn Sie das Styling oder Verhalten ändern möchten, geben Sie dem Agent über das Chatfenster entsprechende Anweisungen. Beispiel:
    • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
    • "Show a count of remaining incomplete tasks at the footer of the task list."
  6. Warten Sie, bis der Agent die Codebasis aktualisiert hat, und sehen Sie sich die Änderungen im Vorschau-Browser an.

5. In Cloud Run bereitstellen

Sobald Ihr Prototyp voll funktionsfähig ist, stellen Sie ihn als öffentlichen Dienst in Cloud Run bereit.

  1. Klicken Sie rechts oben in Google AI Studio auf die Schaltfläche Veröffentlichen, um den Bereitstellungsassistenten zu starten.Speicherort des Veröffentlichungsbuttons in Google AI Studio
  2. Klicken Sie auf Jetzt starten, um Ihr Google Cloud-Projekt zu konfigurieren.
    • Prüfen Sie, ob das Drop-down-Menü Google Cloud-Projekt mit dem Projekt übereinstimmt, das Sie Ihrem Arbeitsbereich zugeordnet haben.
    • AI Studio generiert automatisch eine eindeutige Dienst-ID für die Cloud Run-Instanz.
  3. Wenn Sie die Bereitstellung zum ersten Mal vornehmen und Standardparameter von Google Cloud verwenden, werden Sie möglicherweise aufgefordert, einen Organisationstyp anzugeben und Abrechnungsdetails anzugeben.
  4. Klicken Sie auf App veröffentlichen.
  5. Die Schritte zum Erstellen des Containers, zur Containerregistrierung und zur Dienstbereitstellung erfolgen im Hintergrund. Dieser Vorgang dauert normalerweise 2 bis 4 Minuten.
  6. Wenn die Bereitstellung abgeschlossen ist, kopieren Sie die generierte App-URL und rufen Sie den Link zur Live-Anwendung in einem Browsertab auf.
  7. Testen Sie die Live-Webanwendung in Ihrem Browser.

6. In der Firebase Console prüfen

Sehen Sie sich an, wie die Datenschemas und Nutzer erfasst werden.

  1. Rufen Sie die Firebase Console auf.
  2. Wählen Sie Ihr Projekt aus (mit dem Label AI Studio oder Ihrer manuell verknüpften Projekt-ID).
  3. Wählen Sie im linken Navigationsbereich Erstellen > Firestore-Datenbank aus:
    • Sie können die von Ihrer Anwendung erstellten Datenbank-Sammlungen und -Dokumente ansehen.
    • Prüfen Sie, ob jedes Dokument eine Inhaber-ID hat, die mit den Anmeldedaten des aktiven Nutzers übereinstimmt.
  4. Wählen Sie im Firestore-Bereich den Tab Sicherheit aus, um die automatisch generierten Sicherheitsanweisungen zu prüfen, die Lese- und Schreibberechtigungen auf bestätigte Dokumentinhaber beschränken.
  5. Rufen Sie Sicherheit > Authentifizierung auf, um die Liste der aktiven Nutzeranmeldedaten zu sehen, die während Ihrer Anmeldetests erstellt wurden.

7. Bereinigen

So vermeiden Sie unvorhergesehene Abrechnungsgebühren oder bereinigen Ihre Workspace-Ressourcen:

  1. Rufen Sie in Google AI Studio die Seite „Apps“ auf.
  2. Suchen Sie Ihre Anwendung im Raster oder in der Liste.
  3. Klicken Sie auf das Papierkorbsymbol, um den App-Status zu löschen und die Veröffentlichung des Dienstes in Cloud Run aufzuheben.
  4. Wenn Sie die Bereitstellung mit einem Standardprojekt vorgenommen haben und alle Ressourcen vollständig herunterfahren möchten, rufen Sie die Google Cloud Console-Projekteinstellungen auf und löschen Sie das zugrunde liegende Projekt.

8. Fazit

Glückwunsch! Sie haben eine Full-Stack-Webanwendung direkt in Google AI Studio entworfen, entwickelt und bereitgestellt.

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

Unter goo.gle/builders finden Sie das nächste Lab.

Weitere Informationen