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

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

Configurer OAuth

L'un des principaux cas d'utilisation de la gestion des secrets est la configuration d'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

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