Full-Stack-Apps in Google AI Studio entwickeln

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

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 verfügbar sein soll.
  • Auf npm-Pakete zugreifen: Der Antigravity-Agent kann Pakete aus dem umfangreichen npm-Ökosystem installieren und verwenden.
  • Secrets verwalten: API-Schlüssel und Anmeldedaten sicher verwenden.

npm-Pakete verwenden

Sie müssen npm install nicht manuell ausführen. Bitten Sie den Agent einfach, Funktionen hinzuzufügen, für die ein Paket erforderlich ist. Er kümmert sich dann um die Installation und den Import.

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

Secrets sicher verwalten

Mit serverseitigem Code und der Verwaltung von Secrets können Sie jetzt Apps entwickeln, die mit der Welt interagieren.

  • 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.

Wenn Sie Apps für die reale Welt entwickeln, müssen Sie oft eine Verbindung zu Drittanbieterdiensten wie Twilio, Slack oder Datenbanken herstellen, für die API-Schlüssel erforderlich sind. Sie können Schlüssel manuell hinzufügen. Gehen Sie dazu so vor:

  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 geheimen Tokens hinzu.
  3. Zugriff im Code: Der Agent kann serverseitigen Code schreiben, der sicher auf diese vertraulichen Informationen zugreift (in der Regel über Umgebungsvariablen). So wird sichergestellt, dass sie niemals im clientseitigen Browser angezeigt werden.

Bei Bedarf wird im Chat auch eine Karte angezeigt, in der Sie aufgefordert werden, Schlüssel hinzuzufügen, wenn ein neues Secret erforderlich ist oder wenn in den Umgebungsvariablen des Projekts ein neuer Schlüssel erkannt wird.

OAuth einrichten

Ein wichtiger Anwendungsfall für die Verwaltung von Secrets 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, für die eine OAuth-Authentifizierung erforderlich ist, gibt der Agent Anweisungen zum Einrichten von OAuth für diese Anwendung. Diese Anleitung enthält die erforderlichen Callback-URLs zum Konfigurieren Ihrer OAuth-Anwendung. Sie finden die Callback-URLs auch im Bereich „Einstellungen“ unter Integrationen.

Mehrspielerfunktionen entwickeln

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

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

Beispiel-Prompt: > „Mache daraus ein Multiplayer-Spiel, in dem die Spieler die Cursor der anderen sehen können.“

Tipps zum Testen von Apps im Mehrspielermodus

Sie haben zwei Möglichkeiten, den Mehrspielermodus zu testen, bevor Sie Ihre App bereitstellen.

  1. Öffnen Sie Ihre App im Build-Modus von Google AI Studio auf mehreren Tabs. Wenn Sie im Build-Modus entwickeln, befindet sich Ihre App in einem Entwicklercontainer. Wenn Sie die App in mehreren Tabs öffnen, können Sie mehrere Nutzer simulieren, die Ihre App verwenden.
  2. Teilen Sie die App mit anderen über das Menü Teilen oben rechts. 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

  • Sicherheit von Secrets: Verwenden Sie für vertrauliche Schlüssel immer den Secrets Manager. Sie sollten niemals fest in Ihre Dateien codiert werden.
  • Trennung von Belangen: Die UI-Logik sollte im clientseitigen Framework (React/Angular) und die Geschäftslogik/Datenverarbeitung auf dem Server erfolgen.
  • Fehlerbehandlung: Achten Sie darauf, dass Ihr serverseitiger Code Fehler aus externen API-Aufrufen robust behandelt, um Abstürze der App zu verhindern.

Wie geht es weiter?