To-do-Webanwendung mit KI starten

1. Einführung

Übersicht

Wo beginnt die Entwicklung mit KI heute? Für die meisten von uns mit einer einfachen Abfrage oder einem Prototyp. Google AI Studio bietet einen leistungsstarken Build-Modus (oft als „Vibe-Coding“ bezeichnet), mit dem Sie Full-Stack-Webanwendungen entwerfen, testen und erstellen können. Die Codeerstellung wird dabei von Gemini-Modellen unterstützt.

In diesem Codelab erstellen 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 Back-End-Dienste und schreibt den Code für die Front-End- und Datenbankinteraktion. Sobald die App fertig ist, können Sie sie mit einem einzigen Klick direkt in Cloud Run bereitstellen.

Aufgaben

  • Google AI Studio auffordern, einen Prototyp einer kollaborativen To-do-Listen-Webanwendung zu erstellen
  • Firebase-Integration konfigurieren und aktivieren, um eine Firestore-Datenbank bereitzustellen und die Google-Anmeldung einzurichten
  • Anwendung in der interaktiven Vorschau-Sandbox testen
  • Anwendung direkt über die Google AI Studio-UI in Cloud Run bereitstellen

Lerninhalte

  • Verwendung des Build-Modus von Google AI Studio, um schnell einen Prototyp eines Full-Stack-Dienstes in natürlicher Sprache zu erstellen
  • Automatische Konfiguration der Firebase Firestore- und Authentication-Integrationen durch Google AI Studio
  • Bereitstellung Ihrer AI Studio-Anwendung als serverloser Container in Cloud Run
  • Datenbanksätze und Sicherheitsstatus in der Firebase Console prüfen

2. Projekt einrichten

Bevor Sie AI Studio starten, prüfen Sie Ihren Kontostatus und die Voraussetzungen.

Google-Konto und Informationen zur Ebene

  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 Schulkonten können Workspace-Richtlinien gelten, die experimentelle Funktionen oder Cloud-Integrationen deaktivieren.
  2. Prüfen Sie die Abrechnungsdetails für Bereitstellungen:
    • Google Cloud Starter-Ebene: Ermöglicht die Veröffentlichung von bis zu zwei Full-Stack-Anwendungen in einer ausgewählten Region kostenlos, 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 die Speicherlimits, CPU-Ressourcen und APIs.

3. To-do-App im Build-Modus von AI Studio erstellen

Erstellen wir die Anwendungshülle und fordern wir den KI-Codeassistenten auf, Sicherheits- und Persistenzebenen zu erstellen.

  1. Rufen Sie das Google AI Studio-Apps-Panel auf und klicken Sie auf Neue App.
  2. Geben Sie im Chat-Prompt-Feld die Beschreibung für Ihre To-do-Anwendung 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 den Prozess zur Anwendungsgenerierung zu starten.

Wenn der AI Studio-Agent den Bedarf an Datenbankspeicher und einer sicheren Nutzeranmeldung erkennt, wird der automatisierte Firebase-Konfigurationsablauf ausgelöst.

  1. Nach etwa einer Minute wird im Arbeitsbereich eine Integrationskarte zum Aktivieren von Firebase 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 Hintergrundkonfiguration aus. Im Detail:
    • Eine Firestore-Datenbankinstanz wird bereitgestellt.
    • Firebase Authentication ist aktiviert und die Google-Anmeldung ist ebenfalls aktiviert.
    • Eine Dienstkontokonfiguration wird eingerichtet (z.B. Erstellen von src/lib/firebase.ts mit API-Anmeldedaten).
    • Eine firestore.rules-Datei mit Standardsicherheitsgrenzen (Regeln zur Nutzerisolation) wird hinzugefügt.

4. Testen und Wiederholen

Bevor Sie den Dienst live starten, führen Sie Validierungsprüfungen in der interaktiven Vorschau aus.

  1. Öffnen Sie das Vorschaufenster in Google AI Studio.
  2. Klicken Sie auf die Schaltfläche „Anmelden“, um die Google Log-in-Authentifizierung in der Sandbox auszulösen.
    • Hinweis zur Fehlerbehebung: Während der Generierung oder beim Testen können gelegentlich Laufzeitprobleme, Kompilierungsfehler oder Fehler bei den Firestore-Berechtigungen aufgrund von Abweichungen bei den Sicherheitsregeln auftreten. In diesem Fall zeigt AI Studio im Chat die Schaltfläche Beheben an. 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“, „Codelab abschließen“).
  4. Legen Sie einige Aufgaben als abgeschlossen fest und löschen Sie eine, um zu prüfen, ob die clientseitigen Handler und Datenbankstatusaktualisierungen korrekt funktionieren.
  5. Wenn Sie das Design oder Verhalten ändern möchten, geben Sie dem Agenten über das Chatfenster 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 prüfen Sie die Aktualisierungen im Vorschau-Browser.

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 die Drop-down-Liste Google Cloud-Projekt das Projekt enthält, das Sie mit Ihrem Arbeitsbereich verknüpft haben.
    • AI Studio generiert automatisch eine eindeutige Dienst-ID für die Cloud Run-Instanz.
  3. Wenn Sie zum ersten Mal bereitstellen 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. Kopieren Sie nach Abschluss der Bereitstellung 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 verfolgt 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:
    • Sehen Sie sich die Datenbanksammlungen und -dokumente an, die von Ihrer Anwendung erstellt wurden.
    • Prüfen Sie, ob jedes Dokument eine Eigentümer-ID hat, die mit den aktiven Anmeldedaten für die Nutzerauthentifizierung übereinstimmt.
  4. Wählen Sie im Firestore-Panel den Tab Sicherheit aus, um die automatisch generierten Sicherheitsanweisungen zu prüfen, die die Lese- und Schreibberechtigungen auf bestätigte Dokumenteigentümer beschränken.
  5. Rufen Sie Sicherheit > Authentifizierung auf, um die Liste der aktiven Anmeldedaten zu sehen, die während Ihrer Anmeldetests ausgefüllt wurden.

7. Bereinigen

So vermeiden Sie unvorhergesehene Abrechnungsgebühren oder bereinigen Ihre Arbeitsbereichsressourcen:

  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 Projekteinstellungen in der Google Cloud Console auf und löschen Sie das zugrunde liegende Projekt.

8. Fazit

Das wars! Sie haben das Lab erfolgreich abgeschlossen. Sie haben eine kollaborative Full-Stack-Webanwendung direkt in Google AI Studio entworfen, entwickelt und bereitgestellt.

Wenn Sie das Badge für den Abschluss eines Labs für Entwickler erhalten und ein weiteres Lab finden möchten, um Ihre Reise fortzusetzen, rufen Sie goo.gle/builders auf.

Weitere Informationen