Développer des applications Full Stack dans Google AI Studio

Google AI Studio est désormais compatible avec le développement full stack, ce qui vous permet de créer des applications qui vont au-delà des prototypes côté client. Avec un environnement d'exécution côté serveur, vous pouvez gérer les secrets, vous connecter à des API externes et créer des expériences multijoueurs en temps réel.

Environnement d'exécution côté serveur

Les applications Google AI Studio peuvent désormais inclure un composant côté serveur (Node.js). Ceci vous permet d'effectuer les opérations suivantes :

  • Exécuter la logique côté serveur : exécutez le code qui ne doit pas être exposé au client.
  • Accès aux packages npm : l'agent Antigravity peut installer et utiliser des packages du vaste écosystème npm.
  • Gérer les secrets : utilisez les clés API et les identifiants de manière sécurisée.

Utiliser des packages npm

Vous n'avez pas besoin d'exécuter manuellement npm install. Il vous suffit de demander à l'agent d'ajouter une fonctionnalité qui nécessite un package. Il gérera l'installation et l'importation.

Exemple : > "Utilise axios pour extraire les données de l'API externe."

Gérer les secrets de manière sécurisée

Grâce au code côté serveur et à la gestion des secrets, vous pouvez désormais créer des applications qui interagissent avec le monde.

Clé API Gemini

Lorsque vous créez une application qui utilise l'API Gemini, AI Studio configure automatiquement votre GEMINI_API_KEY en tant que secret côté serveur. Aucune configuration manuelle n'est requise. Vous pouvez afficher cette clé dans le panneau Secrets des paramètres. Les appels à l'API Gemini de votre application sont effectués à partir du code côté serveur à l'aide de cette clé. Elle n'est donc jamais exposée dans le navigateur.

Clés API tierces

Pour les autres services, vous pouvez ajouter des clés API manuellement :

  • API tierces : connectez-vous à des services tels que Stripe, SendGrid ou des API REST personnalisées.
  • Bases de données : connectez-vous à des bases de données externes (par exemple, via Supabase, Firebase ou MongoDB Atlas) pour conserver les données au-delà de la session.

Lorsque vous créez des applications réelles, vous devez souvent vous connecter à des services tiers (comme Twilio, Slack ou des bases de données) qui nécessitent des clés API. Vous pouvez ajouter des clés manuellement en procédant comme suit :

  1. Ajouter un secret : accédez au menu Paramètres de Google AI Studio et recherchez la section "Secrets".
  2. Stocker votre clé : ajoutez vos clés API ou jetons secrets ici.
  3. Accès dans le code : l'agent peut écrire du code côté serveur qui accède à ces secrets de manière sécurisée (généralement via des variables d'environnement), en s'assurant qu'ils ne sont jamais exposés au navigateur côté client.

Si nécessaire, l'agent affichera également une fiche dans le chat vous invitant à ajouter des clés chaque fois qu'un nouveau secret est nécessaire ou qu'une nouvelle clé est détectée dans les variables d'environnement du projet.

Intégration de Firebase pour la base de données et l'authentification

Google AI Studio vous permet désormais d'ajouter facilement une base de données ou une authentification à votre application grâce à une intégration Firebase. L'agent Antigravity peut provisionner et configurer automatiquement les services suivants pour vous :

  • Base de données Firestore : base de données cloud NoSQL flexible et évolutive qui permet de stocker et de synchroniser les données nécessaires pour le développement côté client et côté serveur.
  • Firebase Authentication : permettez à vos utilisateurs de se connecter de manière sécurisée à votre application à l'aide des flux "Se connecter avec Google".

Il vous suffit de demander à l'agent d'ajouter une base de données à votre application ou de configurer la connexion avec Google. Il s'occupera de la configuration et de la génération de code nécessaires.

Firebase vous permet de commencer sans frais et, si vous le souhaitez, de passer à un compte payant lorsque vous avez besoin de plus de quota ou de fonctionnalités payantes.

APIs Google Workspace

Google AI Studio vous permet de créer des applications qui se connectent aux API Google Workspace. Vos utilisateurs peuvent ainsi travailler avec leurs données réelles (e-mails, feuilles de calcul, documents, événements d'agenda, etc.) directement dans votre application. Vous n'avez plus besoin de configurer un projet Google Cloud, de configurer OAuth ni de gérer manuellement votre API.

Fonctionnement

Vous pouvez ajouter une intégration Workspace de deux manières :

  • Décrivez-le dans le panneau de chat : il vous suffit d'indiquer à l'agent ce que vous souhaitez dans le panneau de chat en bas de l'écran. Par exemple, "Crée un outil de suivi des dépenses qui enregistre les reçus dans ma feuille de calcul Google Sheets" ou "Crée un tableau de bord qui résume mes messages Gmail non lus".
  • Sélectionner dans le panneau "Intégrations" : ouvrez le panneau Intégrations dans la barre latérale de droite du mode Création, puis activez l'application Workspace que vous souhaitez connecter.

Lorsque vous ajoutez une application Workspace, AI Studio effectue automatiquement les actions suivantes :

  1. Configure l'API Google nécessaire pour votre application.
  2. Génère le code côté serveur pour appeler l'API.
  3. Ajoute un flux "Se connecter avec Google" sécurisé pour que les utilisateurs finaux de votre application puissent autoriser l'accès à leurs propres données.

Applis compatibles

Les applications Google Workspace suivantes sont disponibles :

Application Ce que vous pouvez créer
Google Agenda Lire, créer et gérer des événements et des agendas
Google Chat Lire les conversations et les espaces de groupe, et y participer
Google Docs Créer, lire, mettre à jour et mettre en forme des documents
Google Drive Organiser, rechercher et gérer des fichiers et des dossiers
Google Forms Créer des enquêtes, modifier des questions et récupérer des réponses
Gmail Lire, envoyer et gérer le contenu des e-mails
Google Keep Gérer les notes, les listes et les pièces jointes
Google Meet Planifier et gérer des appels vidéo
Contacts Synchroniser et gérer les contacts
Google Sheets Lire, écrire et mettre en forme des données de feuille de calcul
Google Slides Créer et modifier des présentations
Google Tasks Créer, gérer et organiser des tâches

Authentification et autorisations

En tant que développeur, vous n'avez pas besoin de configurer des clients OAuth, de gérer des identifiants ni de configurer un projet Google Cloud. AI Studio s'en charge pour vous.

Les applications intégrant les API Workspace utilisent "Se connecter avec Google" pour authentifier les utilisateurs finaux. Lorsqu'un utilisateur ouvre votre application, il est invité à se connecter et à accorder les autorisations spécifiques dont votre application a besoin (par exemple, un accès en lecture seule à son agenda ou la possibilité de modifier une feuille de calcul). Votre application n'accède qu'aux données de la personne qui l'utilise. Chaque utilisateur autorise l'accès à son propre compte.

Exemples de prompts

Voici quelques idées pour commencer à utiliser les intégrations Workspace :

  • "Crée une application qui lit mon agenda Google Agenda et rédige des e-mails de préparation dans Gmail pour chaque réunion."
  • "Crée un outil qui prend un document Google Docs et génère une présentation de cinq diapositives dans Google Slides."
  • "Crée un outil de suivi des dépenses dans lequel je peux importer un reçu, Gemini extrait les informations et ajoute une ligne dans ma feuille de calcul Google Sheets."

Configurer OAuth

L'un des principaux cas d'utilisation de la gestion des secrets consiste à configurer OAuth pour se connecter à d'autres sites Web ou applications. Lorsque votre requête inclut des instructions sur la connexion à une application tierce nécessitant une authentification OAuth, l'agent vous explique comment configurer OAuth pour cette application. Ces instructions incluront les URL de rappel nécessaires pour configurer votre application OAuth. Vous trouverez également les URL de rappel sous Intégrations dans le panneau "Paramètres".

Créer des expériences multijoueurs

Le runtime complet permet d'utiliser des fonctionnalités de collaboration en temps réel.

  • État en temps réel : vous pouvez demander à l'agent de créer des fonctionnalités telles qu'un chat en direct, un tableau blanc collaboratif ou un jeu multijoueur.
  • Sessions synchronisées : le serveur gère l'état, ce qui permet à plusieurs utilisateurs d'interagir avec la même instance d'application en temps réel.

Exemple de requête : > "Fais-en un jeu multijoueur où les joueurs peuvent voir les curseurs des autres."

Conseils pour tester les applications multijoueurs

Vous pouvez tester le mode multijoueur de deux façons avant de déployer votre application.

  1. Ouvrez votre application en mode Créer de Google AI Studio dans plusieurs onglets. Lorsque vous développez en mode "Build" (Compilation), votre application se trouve dans un conteneur de développement. Ouvrir l'application dans plusieurs onglets vous permettra de simuler plusieurs joueurs utilisant votre application.
  2. Partagez l'application avec d'autres utilisateurs à l'aide du menu Partager en haut à droite. Ensuite, utilisez l'URL partagée de l'onglet Intégrations du menu Partager pour utiliser l'application avec les lecteurs avec lesquels vous l'avez partagée.

Bonnes pratiques

  • Appels de l'API Gemini : votre GEMINI_API_KEY est automatiquement configuré en tant que secret côté serveur. Effectuez des appels d'API Gemini à partir de votre code côté serveur à l'aide de cette clé. Vous pouvez l'afficher dans le panneau Secrets.
  • Sécurité des secrets : utilisez toujours Secret Manager pour les clés sensibles. Ne les codez jamais en dur dans vos fichiers.
  • Séparation des préoccupations : conservez votre logique d'UI dans le framework côté client (React/Angular) et votre logique métier/gestion des données côté serveur.
  • Gestion des erreurs : assurez-vous que votre code côté serveur gère les erreurs de manière robuste lors des appels d'API externes pour éviter le plantage de l'application.

Et maintenant ?