Full-Stack-Apps in Google AI Studio entwickeln

Google AI Studio unterstützt jetzt die Full-Stack-Entwicklung, sodass Sie Anwendungen erstellen können, die über clientseitige Prototypen hinausgehen. Mit einer serverseitigen Laufzeit können Sie Secrets verwalten, eine Verbindung zu externen APIs herstellen und Echtzeit-Multiplayer-Erlebnisse erstellen.

Serverseitige Laufzeit

Google AI Studio-Anwendungen können jetzt eine serverseitige Komponente (Node.js) enthalten. Damit können Sie

  • Serverseitige Logik ausführen: Führen Sie Code aus, der nicht für den Client sichtbar sein soll.
  • Auf npm-Pakete zugreifen: Der Antigravity-Agent kann Pakete aus dem umfangreichen npm-Ökosystem installieren und verwenden.
  • Secrets verarbeiten: API-Schlüssel und Anmeldedaten sicher verwenden.

npm-Pakete verwenden

Sie müssen npm install nicht manuell ausführen. Bitten Sie den KI-Agenten einfach, eine Funktion hinzuzufügen, die ein Paket erfordert. Er übernimmt dann die Installation und den Import.

Beispiel: > „Verwende axios, um Daten von der externen API abzurufen.“

Secrets sicher verwalten

Mit serverseitigem Code und Secret-Management können Sie jetzt Apps erstellen, die mit der Welt interagieren.

Gemini API-Schlüssel

Wenn Sie eine neue App erstellen, die die Gemini API verwendet, konfiguriert AI Studio Ihren GEMINI_API_KEY automatisch als serverseitiges Secret. Eine manuelle Einrichtung ist nicht erforderlich. Sie können diesen Schlüssel in den Einstellungen im Bereich Secrets aufrufen. Die Gemini API-Aufrufe Ihrer App werden über serverseitigen Code mit diesem Schlüssel ausgeführt, sodass er im Browser nie offengelegt wird.

API-Schlüssel von Drittanbietern

Für andere Dienste können Sie API-Schlüssel manuell hinzufügen:

  • Drittanbieter-APIs: Stellen Sie eine Verbindung zu Diensten wie Stripe, SendGrid oder benutzerdefinierten REST APIs her.
  • Datenbanken: Stellen Sie eine Verbindung zu externen Datenbanken her (z.B. über Supabase, Firebase oder MongoDB Atlas), um Daten über die Sitzung hinaus zu speichern.

Beim Erstellen von realen Anwendungen müssen Sie oft eine Verbindung zu Drittanbieterdiensten (wie Twilio, Slack oder Datenbanken) herstellen, die API-Schlüssel erfordern. So fügen Sie Schlüssel manuell hinzu:

  1. Secret hinzufügen: Rufen Sie in Google AI Studio das Menü Einstellungen auf und suchen Sie nach dem Bereich „Secrets“.
  2. Schlüssel speichern: Fügen Sie hier Ihre API-Schlüssel oder Secret-Tokens hinzu.
  3. Zugriff im Code: Der Agent kann serverseitigen Code schreiben, der sicher auf diese Secrets zugreift (normalerweise über Umgebungsvariablen). So wird sichergestellt, dass sie nie im clientseitigen Browser offengelegt werden.

Bei Bedarf zeigt der KI-Agent auch eine Karte im Chat an, auf der Sie aufgefordert werden, Schlüssel hinzuzufügen, wenn ein neues Secret benötigt wird oder wenn ein neuer Schlüssel in den Umgebungsvariablen des Projekts erkannt wird.

Firebase-Integration für Datenbank und Authentifizierung

In Google AI Studio können Sie jetzt ganz einfach über eine Firebase-Integration eine Datenbank oder Authentifizierung zu Ihrer App hinzufügen. Der Antigravity-Agent kann die folgenden Dienste automatisch für Sie bereitstellen und einrichten:

  • Firestore-Datenbank: Eine flexible, skalierbare NoSQL-Cloud-Datenbank zum Speichern und Synchronisieren von Daten für die client- und serverseitige Entwicklung.
  • Firebase Authentication: Ermöglicht Ihren Nutzern, sich über „Über Google anmelden“-Abläufe sicher in Ihrer Anwendung anzumelden.

Bitten Sie den KI-Agenten einfach, „meiner App eine Datenbank hinzuzufügen“ oder „Google Log-in einzurichten“. Er übernimmt dann die erforderliche Konfiguration und Codegenerierung für Sie. Beim Erstellen von Android-Apps werden durch die Firebase-Integration auch Firebase AI Logic und Firebase App Check für sichere clientseitige Gemini API-Aufrufe bereitgestellt.

Firebase kann kostenlos genutzt werden. Sie können jederzeit ein Upgrade auf ein kostenpflichtiges Konto durchführen, wenn Sie ein größeres Kontingent oder kostenpflichtige Funktionen benötigen.

Google Workspace APIs

Mit Google AI Studio können Sie Apps erstellen, die mit Google Workspace APIs verbunden sind. So können Ihre Nutzer mit ihren echten Daten arbeiten: E‑Mails, Tabellen, Dokumente, Kalendertermine und mehr, alles in Ihrer App. Sie müssen kein Google Cloud-Projekt mehr einrichten, OAuth konfigurieren oder Ihre API manuell verwalten.

Funktionsweise

Sie haben zwei Möglichkeiten, eine Workspace-Integration hinzuzufügen:

  • Im Chatbereich beschreiben: Sagen Sie dem KI-Agenten im Chatbereich unten einfach, was Sie möchten. Beispiele: „Erstelle einen Ausgaben-Tracker, der Belege in meiner Google-Tabelle protokolliert“ oder „Erstelle ein Dashboard, das meine ungelesenen Gmail-Nachrichten zusammenfasst.“
  • Über den Bereich „Integrationen“ auswählen: Öffnen Sie im Build-Modus in der rechten Seitenleiste den Bereich Integrationen und aktivieren Sie die Workspace-App, die Sie verbinden möchten.

Wenn Sie eine Workspace-App hinzufügen, führt AI Studio automatisch Folgendes aus:

  1. Verbindet die erforderliche Google API mit Ihrer App.
  2. Generiert den serverseitigen Code zum Aufrufen der API.
  3. Fügt einen sicheren Ablauf für „Über Google anmelden“ hinzu, damit Endnutzer Ihrer App den Zugriff auf ihre eigenen Daten autorisieren können.

Unterstützte Apps

Die folgenden Google Workspace-Apps sind verfügbar:

Anwendung Was Sie erstellen können
Google Kalender Termine und Kalender lesen, erstellen und verwalten
Google Chat Unterhaltungen und Gruppenbereiche lesen und damit interagieren
Google Docs Dokumente erstellen, lesen, aktualisieren und formatieren
Google Drive Dateien und Ordner organisieren, suchen und verwalten
Google Formulare Umfragen erstellen, Fragen aktualisieren und Antworten abrufen
Gmail E‑Mail-Inhalte lesen, senden und verwalten
Google Notizen Notizen, Listen und Anhänge verwalten
Google Meet Videoanrufe planen und verwalten
Kontakte Kontakte synchronisieren und verwalten
Google Sheets Tabellendaten lesen, schreiben und formatieren
Google Präsentationen Präsentationen erstellen und ändern
Google Tasks Aufgaben erstellen, verwalten und organisieren

Authentifizierung und Berechtigungen

Als Entwickler müssen Sie keine OAuth-Clients konfigurieren, Anmeldedaten verwalten oder ein Google Cloud-Projekt einrichten. AI Studio übernimmt all das für Sie.

Apps mit integrierten Workspace APIs verwenden „Über Google anmelden“, um Endnutzer zu authentifizieren. Wenn ein Nutzer Ihre App öffnet, wird er aufgefordert, sich anzumelden und die spezifischen Berechtigungen zu gewähren, die Ihre App benötigt (z. B. Lesezugriff auf seinen Kalender oder die Möglichkeit, eine Tabelle zu bearbeiten). Ihre App greift nur auf die Daten der Person zu, die sie verwendet. Jeder Nutzer autorisiert den Zugriff auf sein eigenes Konto.

Beispiele für Prompts

Hier sind einige Ideen für den Einstieg in Workspace-Integrationen:

  • „Erstelle eine App, die meinen Google Kalender liest und in Gmail für jedes Meeting eine E‑Mail zur Vorbereitung entwirft.“
  • „Erstelle ein Tool, das ein Google-Dokument in eine Zusammenfassung mit 5 Folien in Google Präsentationen umwandelt.“
  • „Erstelle einen Ausgaben-Tracker, bei dem ich einen Beleg hochlade, Gemini die Details extrahiert und eine neue Zeile in meiner Google-Tabelle hinzufügt.“

OAuth einrichten

Ein wichtiger Anwendungsfall für die Secret-Verwaltung ist die Einrichtung von OAuth, um eine Verbindung zu anderen Websites oder Apps herzustellen. Wenn Ihr Prompt Anweisungen zum Herstellen einer Verbindung zu einer Drittanbieter-App enthält, die eine OAuth-Authentifizierung erfordert, stellt der Agent Anweisungen zum Einrichten von OAuth für diese Anwendung bereit. Diese Anleitung enthält die erforderlichen Callback-URLs zum Konfigurieren Ihrer OAuth-Anwendung. Sie finden die Callback-URLs auch unter Integrationen im Bereich „Einstellungen“.

Mehrspielermodus erstellen

Die Full-Stack-Laufzeit ermöglicht Funktionen für die Zusammenarbeit in Echtzeit.

  • Echtzeitstatus: Sie können den Agent bitten, Funktionen wie „einen Live-Chat“, „ein kollaboratives Whiteboard“ oder „ein Mehrspieler-Spiel“ zu erstellen.
  • Synchronisierte Sitzungen: Der Server verwaltet den Status, sodass mehrere Nutzer in Echtzeit mit derselben Anwendungsinstanz interagieren können.

Beispiel-Prompt: > „Mach daraus ein Mehrspieler-Spiel, bei dem die Spieler die Cursor der anderen sehen können.“

Tipps zum Testen von Multiplayer-Apps

Sie können den Mehrspielermodus auf zwei Arten testen, bevor Sie Ihre App bereitstellen.

  1. Öffnen Sie Ihre App in mehreren Tabs im Google AI Studio-Build-Modus. Wenn Sie im Build-Modus entwickeln, befindet sich Ihre Anwendung in einem Entwicklungscontainer. Wenn Sie die App in mehreren Tabs öffnen, können Sie mehrere Spieler simulieren, die Ihre App verwenden.
  2. Teilen Sie die App über das Menü Teilen oben rechts mit anderen. Verwenden Sie dann die freigegebene URL auf dem Tab Integrationen des Menüs Teilen, um die App mit den Spielern zu verwenden, mit denen Sie Ihre App geteilt haben.

Best Practices

  • Gemini API-Aufrufe: Ihr GEMINI_API_KEY wird automatisch als serverseitiges Secret konfiguriert. Führen Sie mit diesem Schlüssel Gemini API-Aufrufe über Ihren serverseitigen Code aus. Sie können es im Bereich Secrets aufrufen.
  • Sicherheit von Secrets: Verwenden Sie für sensible Schlüssel immer den Secrets Manager. Codieren Sie sie niemals in Ihren Dateien.
  • Trennung der Zuständigkeiten: Behalten Sie die UI-Logik im clientseitigen Framework (React/Angular) und die Geschäftslogik/Datenverarbeitung auf der Serverseite bei.
  • Fehlerbehandlung: Achten Sie darauf, dass Ihr serverseitiger Code Fehler von externen API-Aufrufen zuverlässig verarbeitet, um Abstürze der App zu verhindern.

Wie geht es weiter?