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 Multiplayer-Erlebnisse in Echtzeit 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 sichtbar sein soll.
  • auf npm-Pakete zugreifen: Der Antigravity Agent kann Pakete aus dem umfangreichen npm-Ökosystem installieren und verwenden.
  • Secrets verwalten: Verwenden Sie API-Schlüssel und Anmeldedaten sicher.

npm-Pakete verwenden

Sie müssen npm install nicht manuell ausführen. Bitten Sie den Agent einfach, eine Funktion 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 von der externen API abzurufen."

Secrets sicher verwalten

Mit serverseitigem Code und der Verwaltung von Secrets können Sie jetzt Anwendungen erstellen, die mit der Außenwelt 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.

Beim Erstellen von Anwendungen für den praktischen Einsatz müssen Sie häufig eine Verbindung zu Drittanbieterdiensten (z. B. 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 Secret-Tokens hinzu.
  3. Im Code darauf zugreifen: Der Agent kann serverseitigen Code schreiben, der sicher auf diese Secrets zugreift (in der Regel über Umgebungsvariablen), sodass sie nie für den clientseitigen Browser sichtbar sind.

Bei Bedarf zeigt der Agent im Chat auch eine Karte an, auf der Sie aufgefordert werden, Schlüssel hinzuzufügen, wenn ein neues Secret erforderlich ist oder wenn eine neue Umgebungsvariable im Projekt erkannt wird.

Firebase-Integration für Datenbank und Authentifizierung

Mit Google AI Studio können Sie jetzt ganz einfach eine Datenbank oder Authentifizierung zu Ihrer App hinzufügen. Dazu ist eine Firebase-Integration erforderlich. 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öglichen Sie Ihren Nutzern, sich sicher in Ihrer Anwendung anzumelden, indem sie die Abläufe „Über Google anmelden“ verwenden.

Bitten Sie den Agent einfach, „eine Datenbank zu meiner App hinzuzufügen“ oder „Google-Anmeldung einzurichten“. Er kümmert sich dann um die erforderliche Konfiguration und Codeerstellung.

Mit Firebase können Sie kostenlos starten und optional mit einem kostenpflichtigen Konto skalieren, wenn Sie mehr Kontingent benötigen oder kostenpflichtige Funktionen verwenden möchten.

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 Ihre Eingabeaufforderung 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 Anweisungen enthalten die erforderlichen Callback-URLs zum Konfigurieren Ihrer OAuth-Anwendung. Sie finden die Callback-URLs auch im Einstellungsbereich unter Integrationen.

Multiplayer-Erlebnisse entwickeln

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 gemeinsames Whiteboard oder ein Multiplayer-Spiel zu erstellen.
  • Synchronisierte Sitzungen: Der Server verwaltet den Status, sodass mehrere Nutzer in Echtzeit mit derselben Anwendungsinstanz interagieren können.

Beispiel für eine Eingabeaufforderung: > "Erstelle ein Multiplayer-Spiel, in 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 im Google AI Studio-Entwicklungsmodus in mehreren Tabs. Wenn Sie im Build-Modus entwickeln, befindet sich Ihre App in einem Entwicklungscontainer. Wenn Sie die App in mehreren Tabs öffnen, können Sie simulieren, dass mehrere Spieler Ihre App verwenden.
  2. Geben Sie die App rechts oben über das Menü Teilen für andere frei. Verwenden Sie dann die freigegebene URL auf dem Tab Integrationen des Menüs Teilen , um die App mit den Spielern zu verwenden, für die Sie sie freigegeben haben.

Best Practices

  • Sicherheit von Secrets: Verwenden Sie immer den Secret Manager für vertrauliche Schlüssel. Sie dürfen sie niemals fest in Ihre Dateien codieren.
  • Trennung von Zuständigkeiten: Bewahren Sie Ihre UI-Logik im clientseitigen Framework (React/Angular) und Ihre Geschäftslogik/Datenverarbeitung auf der Serverseite auf.
  • Fehlerbehandlung: Achten Sie darauf, dass Ihr serverseitiger Code Fehler aus externen API-Aufrufen robust verarbeitet, um zu verhindern, dass die App abstürzt.

Wie geht es weiter?