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 einfachen Prototyp. Google AI Studio bietet einen leistungsstarken Build Mode (oft als „Vibe-Coding“ bezeichnet), mit dem Sie Full-Stack-Webanwendungen mithilfe der von Gemini-Modellen gesteuerten Codeerstellung entwerfen, testen und erstellen können.

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.

Fertige Version einer Portfolio-Website

Aufgaben

  • Google AI Studio auffordern, einen Prototyp für eine kollaborative To-do-Webanwendung zu erstellen.
  • Die Firebase-Integration konfigurieren und aktivieren, um eine Firestore-Datenbank bereitzustellen und die Google Log-in-Authentifizierung einzurichten.
  • Die Anwendung in der interaktiven Vorschau-Sandbox testen.
  • Die Anwendung direkt über die Google AI Studio-UI in Cloud Run bereitstellen.

Lerninhalte

  • Verwendung des Build Mode von Google AI Studio, um schnell einen Prototyp für einen Full-Stack-Dienst 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.
  • Prüfung von Datenbankeinträgen und Sicherheitsstatus in der Firebase Console.

Bevorzugen Sie eine Videoanleitung?

2. Projekt einrichten

Prüfen Sie vor dem Start von AI Studio 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 Codelab nach Möglichkeit ein privates Google-Konto. Bei Gruppen-, Unternehmens- oder Schulkonten können Workspace-Richtlinien erzwungen werden, die experimentelle Funktionen oder Cloud-Integrationen deaktivieren.
  2. Prüfen Sie die Abrechnungsdetails für Bereitstellungen:
    • Google Cloud Starter Tier: 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 die Speicherlimits, CPU-Ressourcen und APIs.

3. To-do-App im Build Mode 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-Promptfeld 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.
    Über diesen Link wird das Prompt-Feld automatisch ausgefüllt.
  3. Klicken Sie auf Erstellen , um den Prozess zur Anwendungsgenerierung zu starten.

Wenn der AI Studio-Agent den Bedarf an Datenbankspeicher und sicherer 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 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 Firestore-Berechtigungen aufgrund von Abweichungen bei den Sicherheitsregeln auftreten. In diesem Fall zeigt AI Studio im Chat die Schaltfläche Beheben an, über die Sie den Agenten auffordern können, das Problem automatisch zu diagnostizieren und zu beheben.
    Schaltfläche „Beheben“ in Google AI Studio
  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 sicherzustellen, dass die clientseitigen Handler und Datenbankstatusaktualisierungen korrekt funktionieren.
  5. Wenn Sie das Styling oder Verhalten ändern möchten, weisen Sie den Agenten über das Chatfenster an. 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 mit dem Projekt übereinstimmt, das Sie Ihrem Arbeitsbereich zugeordnet haben.
    • AI Studio generiert automatisch eine eindeutige Dienst-ID für die Cloud Run-Instanz.
    • Optional können Sie als Teil Ihrer Bereitstellungskonfiguration ein benutzerdefiniertes .ai.studio-URL-Präfix angeben (z.B. your-portfolio-name.ai.studio).
  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 auf 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 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 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 der Google Cloud Console 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.

Klicken Sie auf diesen Link, um das Completed Builder Journey Badge zu erhalten.

Wenn Sie fortfahren möchten, rufen Sie goo.gle/builders auf, um das nächste Codelab zu finden.

Weitere Informationen