Créer votre première application Web basée sur une base de données avec Google AI Studio et Cloud SQL

1. Avant de commencer

Si vous avez déjà essayé d'organiser une course le week-end avec des amis ou des voisins, vous savez à quel point cela peut être compliqué : les lieux de rendez-vous se perdent dans des discussions de groupe interminables, les gens demandent constamment à quel rythme tout le monde court et les nouveaux venus ne savent jamais vraiment qui sera là.

Dans cet atelier de programmation, vous allez résoudre ce problème quotidien en créant Running Club, une application Web conviviale où les coureurs locaux peuvent parcourir leurs itinéraires préférés, planifier des rencontres le week-end, confirmer leur présence en un clic et discuter avec d'autres coureurs.

Pourquoi cette application a-t-elle besoin d'une base de données ?

Une application communautaire a besoin d'une mémoire fiable, appelée base de données. Lorsqu'un coureur ajoute un nouveau parcours pittoresque, confirme sa participation à la course du samedi matin ou publie un commentaire sur le stationnement, ces informations ne peuvent pas disparaître lorsqu'il ferme son téléphone ou éteint son ordinateur. Une base de données permet de stocker et d'organiser toutes les routes, les listes de participants et les messages des membres de manière sécurisée. Ainsi, tous les membres du club voient des informations à jour chaque fois qu'ils ouvrent l'application.

Vous allez créer cette application à l'aide du mode Créer de Google AI Studio. Vous n'avez pas besoin d'écrire de code complexe ni de configurer vous-même l'infrastructure technique. Il vous suffit de décrire ce que vous souhaitez dans un langage courant. Google AI Studio génère l'application, connecte une véritable base de données Cloud SQL pour PostgreSQL pour mémoriser vos données et publie l'application en direct sur Cloud Run afin que votre communauté puisse commencer à l'utiliser immédiatement.

Ce que vous allez faire

Vous allez créer et lancer Running Club, une application Web communautaire qui inclut :

• Google Sign-In : connexion rapide et sécurisée à l'aide d'un compte Google existant.
• Profils de coureur : profils de membres qui présentent les préférences de course et l'allure cible.
• Bibliothèque d'itinéraires : collection de vos itinéraires préférés dans le quartier, avec la distance, la difficulté des côtes et les points de rendez-vous.
• Planning des prochaines courses : tableau d'événements permettant d'organiser les prochaines courses en groupe et de les associer à des itinéraires.
• RSVP simplifiés : un bouton sur lequel les membres peuvent cliquer pour indiquer qu'ils participeront à l'événement et voir qui d'autre sera présent.
• Organiser des discussions : un espace de commentaires est disponible pour chaque course afin de coordonner les détails, poser des questions et partager des informations.

Points abordés

• Découvrez comment créer une application Web fonctionnelle dans Google AI Studio à l'aide d'un seul prompt en langage clair.
• Comment Google AI Studio configure automatiquement Google Sign-In.
• Découvrez comment Google AI Studio crée et connecte une véritable base de données Cloud SQL pour PostgreSQL pour mémoriser vos données.
• Ajoutez de nouvelles fonctionnalités et développez votre base de données simplement en discutant avec l'IA.
• Découvrez comment vérifier que les données de votre club sont enregistrées de manière sécurisée lors de chaque visite.
• Découvrez comment publier votre application sur Internet avec Cloud Run.
• Découvrez comment afficher votre application et votre base de données en direct dans la console Google Cloud.

Prérequis

• Un navigateur Web récent, tel que Google Chrome
• Un compte Google standard pour vous connecter à Google AI Studio.

Éligibilité et limites de l'édition Cloud SQL Starter

Points forts du niveau Starter : vous pouvez créer et déployer jusqu'à deux applications full stack avec Cloud SQL sans frais et sans configurer de compte de facturation.

Google AI Studio propose le niveau Starter Google Cloud pour aider les développeurs à tester des applications génératives et des bases de données gérées :

• Éligibilité :
  • Disponible pour les personnes utilisant un compte Google standard.
  • Les comptes non éligibles incluent les utilisateurs disposant d'un compte de facturation Google Cloud existant ou passé, ainsi que les comptes associés à Google Workspace, Google Workspace for Education ou Google pour les associations.
  • Si votre compte n'est pas éligible au niveau Starter, vous pouvez quand même suivre cet atelier de programmation en sélectionnant un projet Google Cloud existant avec la facturation activée dans AI Studio.
• Spécifications des ressources :
  • Provisionne une instance Cloud SQL pour PostgreSQL Developer Edition exécutant PostgreSQL 18.
  • Inclut 0, 5 vCPU, 2 Go de RAM et 1 Go de stockage. Cela devrait suffire pour générer des centaines de visites quotidiennes pendant quelques mois ou plus, selon l'activité.
  • Il est compatible avec la mise à l'échelle à zéro, qui met automatiquement en pause le calcul lorsqu'il n'y a aucune connexion active à la base de données pour économiser du quota.
• Quota :
  • Inclut un quota mensuel sans frais de 50 unités de calcul et de 10 Go de stockage.

2. Ouvrir Google AI Studio et démarrer une application

Pour commencer, ouvrez Google AI Studio dans votre navigateur. Il s'agit de votre espace de création. Vous pouvez y créer et tester des applications en décrivant simplement ce dont vous avez besoin.

Étape 1 : Connectez-vous à Google AI Studio

1. Ouvrez votre navigateur Web (Google Chrome, par exemple), puis accédez à aistudio.google.com.
2. Cliquez sur Commencer et connectez-vous avec votre compte Google standard (tel que votre compte Gmail).

3. Si des conditions d'utilisation s'affichent lors de votre première visite, lisez-les et acceptez-les pour continuer.

Étape 2 : Remplissez une demande de participation

1. Dans le panneau central en bas, cliquez sur Start building (Commencer à créer) ou sur +New App (Nouvelle application) dans le panneau de droite.

3. Commencer avec un prompt simple et Firebase Authentication

Vous n'avez pas besoin de diagrammes d'architecture complexes pour commencer. Vous pouvez lancer votre application initiale, configurer Se connecter avec Google et connecter votre base de données en une seule phrase.

Saisissez le prompt initial.

Dans le champ du prompt du mode Créer d'AI Studio, saisissez le prompt suivant et appuyez sur Entrée :

Build a running club web app with a Cloud SQL database
where members can post upcoming runs.

Ce lien remplira automatiquement le champ du prompt pour vous.

Comprendre votre espace de travail

Une fois votre requête envoyée, Google AI Studio ouvre l'espace de travail complet de l'application. Prenez un instant pour examiner les trois zones principales de votre écran :

• Zone de chat / de requête (en bas) : c'est ici que vous continuez à discuter avec l'IA en langage clair pour ajouter des fonctionnalités, ajuster des conceptions ou poser des questions.
• Zone Fichiers et code (à gauche) : affiche les fichiers créés par l'IA en coulisses. Vous n'avez pas besoin d'écrire ni de modifier le code vous-même, mais ce panneau vous permet de voir l'IA créer les éléments de votre application.
• Fenêtre d'aperçu en direct (à droite) : elle affiche votre application en temps réel. Vous pouvez cliquer sur des boutons, saisir du texte dans des champs de texte et tester votre application directement dans cette fenêtre dès qu'elle est générée.
• L'éditeur de code (à droite) : il affiche le code généré par l'IA. Vous pouvez le modifier si vous le souhaitez, mais ce n'est pas obligatoire.
• Déploiement et partage (en haut à droite) : c'est ici que vous pouvez déployer votre application sur Internet et la partager avec d'autres utilisateurs.

Ce que Google AI Studio fait automatiquement

Pendant que l'IA traite votre demande, vous pouvez la voir créer votre application étape par étape :

1. Configure Google Sign-In : l'IA intègre automatiquement Google Sign-In pour que vos coureurs puissent se connecter de manière sécurisée avec leur compte Google. Vous n'avez pas besoin de gérer les mots de passe ni les paramètres de sécurité des utilisateurs.
2. Connecte une base de données réelle : l'IA configure une base de données Cloud SQL gérée pour stocker les données de votre communauté. Si vous y êtes invité, cliquez pour activer la base de données pour votre projet.

3. Organise vos tableaux de données (schema.ts) : imaginez un schéma de base de données comme une collection de feuilles de calcul organisées. L'IA crée automatiquement la structure de stockage de votre application :
   • Table users : stocke les profils des membres, leurs noms, leurs avatars et leur allure de course.
   • runs table : stocke les événements planifiés avec leur titre, leur distance, leur allure cible, leur lieu et leur date.
   • Table comments : stocke les messages et les questions laissés par les coureurs pour chaque course.
   Toutes ces modifications sont effectuées automatiquement dans la zone de code. Vous pouvez voir comment ces catégories sont organisées en passant de l'onglet Aperçu à l'onglet Code. Mais vous n'avez pas besoin d'écrire le code vous-même, tout est fait automatiquement.(Remarque : Vous n'avez jamais besoin d'écrire ni de modifier ce code manuellement. L'IA le met à jour pour vous chaque fois que vous demandez de nouvelles fonctionnalités.)
4. Crée l'interface visuelle : l'IA crée les pages Web que vous voyez à l'écran, y compris l'en-tête, la liste des courses à venir, le formulaire de création d'événements et la section des commentaires.

Vérifier l'authentification et exécuter la publication

Une fois la génération terminée, testez votre nouvelle application dans le volet Preview (Aperçu) :

1. Dans la fenêtre d'aperçu, cliquez sur Member Sign In (Connexion des membres) ou sur le bouton Post Upcoming Run (Publier la prochaine course), qui déclenchera l'authentification.
2. Authentifiez-vous avec votre compte Google à l'aide de la boîte de dialogue Firebase Auth.
3. Une fois connecté, le nom et l'avatar de votre profil Google s'affichent dans la barre de navigation, et vos préférences de rythme sont gérées automatiquement.
4. Dans le formulaire "Post Upcoming Run" (Publier une course à venir), saisissez un titre (par exemple, Morning 5K Shakeout).
5. Sélectionnez une date et une heure, puis saisissez le lieu de la réunion (par exemple, Central Park West Entrance).
6. Cliquez sur PublishRun.
7. Vérifiez que la nouvelle course apparaît immédiatement dans le flux des courses à venir, avec le nom de votre profil authentifié et votre badge d'allure en tant qu'organisateur.
8. Publiez un message rapide dans la section de discussion de la course (par exemple, Bringing extra water bottles!) et vérifiez qu'il apparaît dans le fil de commentaires.

4. Créer une bibliothèque de routes

Les clubs de course à pied réutilisent souvent les itinéraires locaux populaires. Au lieu de saisir les mêmes informations d'itinéraire à chaque fois, vous pouvez permettre aux membres d'enregistrer leurs itinéraires favoris dans un catalogue et de les joindre lorsqu'ils planifient une course.

Demandez à l'IA d'ajouter la bibliothèque de routes.

Dans le champ du prompt, saisissez la requête suivante et appuyez sur Entrée :

Add a route library where members can save favorite
running routes with atitle, distance in km, difficulty,
and start location. When scheduling a run, allow the
organizer to select a route from this library.

Comment l'IA associe les itinéraires aux courses en coulisses

Pour que cela fonctionne, l'IA crée automatiquement une table de stockage pour les itinéraires et la connecte directement à la table des courses. Cette connexion permet à votre application d'importer automatiquement les informations sur la distance et la localisation chaque fois qu'un organisateur choisit un itinéraire.

(Encore une fois, vous n'avez pas besoin de toucher à ce code. L'IA met à jour la structure de la base de données pour vous.)

Tester votre nouvelle bibliothèque d'itinéraires dans l'aperçu

Une fois que l'IA a fini de mettre à jour votre application, essayez la nouvelle fonctionnalité de route dans la fenêtre d'aperçu en direct :

1. Dans la navigation de l'application, cliquez sur l'onglet Bibliothèque de routes. Si cet onglet n'existe pas, vérifiez en bas de l'aperçu en direct. Il peut vous être demandé d'appuyer sur le bouton Enregistrer pour actualiser l'aperçu. Si cela ne vous aide pas, essayez d'interagir avec l'IA dans la fenêtre de chat et demandez où se trouve votre bibliothèque de trajets.
2. Cliquez sur Enregistrer le nouvel itinéraire (ou Ajouter un itinéraire), puis saisissez des exemples d'informations :
   • Titre de l'itinéraire : Riverfront Trail Loop
   • Distance : 8.5 km
   • Difficulté : Moderate
   • Lieu de départ : Waterfront Pier 4
3. Cliquez sur Enregistrer dans la bibliothèque.
4. Planifiez une course à l'aide de cet itinéraire en cliquant sur le bouton Planifier une course directement sur la fiche de votre nouvel itinéraire.
5. Vous remarquerez que la distance, la difficulté et les informations sur le lieu sont automatiquement renseignées.
6. Cliquez sur Publish Run (Publier la course) et vérifiez que votre nouvelle course en groupe apparaît dans le flux d'accueil.

5. Implémenter les RSVP et les invitations de membres

Les applications communautaires fonctionnent grâce à la participation des utilisateurs. Vous pouvez permettre aux coureurs de voir qui participe à une course à venir, de s'inscrire en un clic et de partager un lien d'invitation avec leurs amis.

Demander à l'IA d'ajouter des réponses et des invitations

Dans le champ du prompt, saisissez la requête suivante et appuyez sur Entrée :

Allow registered members to RSVP ("Join Run") to any upcoming run.
Show the list of attending runners on each run card, display an
attendee counter, and add a copyable invite link.

Comment l'IA suit les participants en coulisses

Pour savoir quels coureurs participent à chaque course, l'IA crée automatiquement un tableau rsvps dans votre base de données. Il s'agit d'une feuille d'inscription numérique qui associe le nom d'un coureur à un événement spécifique.

(Vous n'avez pas besoin d'écrire ni de modifier ce code. L'IA gère automatiquement cette feuille d'inscription dans votre base de données.)

Tester les réponses et les invitations dans l'aperçu

Une fois que l'IA a fini de mettre à jour votre application, testez les nouvelles fonctionnalités de confirmation dans la fenêtre d'aperçu en direct :

1. Dans la fenêtre d'aperçu, recherchez une course à venir dans votre flux d'accueil.
2. Cliquez sur le bouton Rejoindre la course (ou Confirmer votre participation).
3. Vérifiez que votre nom et votre avatar apparaissent dans la section Coureurs participants et que le compteur de participants a augmenté de 1.
4. Cliquez sur Copier le lien d'invitation et vérifiez qu'un lien partageable est généré.

6. Persistance des données de test et scaling à zéro instance Cloud SQL

Lorsque vous créez une application, le plus important est de savoir que les informations de votre communauté sont en sécurité. Si vous actualisez votre navigateur, fermez l'onglet ou éteignez votre ordinateur, vous souhaitez que tous vos itinéraires enregistrés, vos confirmations de présence et vos discussions soient toujours là à votre retour.

Dans cette étape, vous allez vérifier que vos données sont enregistrées de manière sécurisée dans votre base de données Cloud SQL et découvrir comment Google Cloud permet d'économiser de l'énergie et de réduire les coûts lorsque votre application est inactive.

Testez l'actualisation de votre application

1. Cliquez sur le bouton Recharger dans la fenêtre d'aperçu AI Studio (ou actualisez l'onglet de votre navigateur).

2. Examinez votre application dans l'aperçu : vous remarquerez que tout ce que vous avez créé (votre profil de membre, vos itinéraires enregistrés, vos courses planifiées, vos confirmations de présence et vos commentaires) est toujours là où vous l'avez laissé.
3. Votre application n'a pas seulement stocké les informations temporairement sur votre écran, elle les a stockées de manière sécurisée dans votre base de données Cloud SQL.

Comment Cloud SQL permet d'économiser de l'énergie et de réduire les coûts (scaling à zéro instance)

Que se passe-t-il lorsque personne n'utilise votre application de club de course au milieu de la nuit ?

• Mise en veille automatique (« scaling à zéro instance ») : lorsque personne ne consulte l'application ni ne s'inscrit à des courses, la base de données se met automatiquement en pause pour économiser des ressources.
• Réveil instantané : dès qu'un coureur ouvre l'application ou clique sur un lien d'invitation, la base de données se réveille instantanément avec toutes les informations enregistrées.
• Aucun coût d'inactivité : comme elle se met en veille lorsqu'elle est inactive, vous n'utilisez pas de ressources de calcul lorsque l'application est inactive.

Pourquoi une vraie base de données est-elle importante ? Parce que l'IA a organisé vos informations dans des tables connectées, votre application reste ordonnée. Par exemple, si une course est annulée et supprimée, tous les commentaires qui y sont associés sont automatiquement supprimés pour éviter toute confusion.

7. Publier et déployer sur Cloud Run

Maintenant que votre application Running Club est créée et testée dans l'aperçu, il est temps de la partager avec votre communauté. Vous n'avez pas besoin d'acheter d'hébergement Web ni de configurer de serveurs. Vous pouvez lancer votre application sur Internet en un seul clic.

Publier votre application sur le Web

1. En haut à droite de Google AI Studio, cliquez sur le bouton Publier.
2. Une fenêtre récapitulative s'affiche pour confirmer les informations :
   • Hébergement : hébergé et déployé sur Google Cloud Run.
   • Services associés : Google Sign-In et votre base de données Cloud SQL.
3. Cliquez sur Publier pour lancer votre application.

Ouvrir et partager votre application en direct

1. Une fois la publication terminée, Google AI Studio vous fournit l'adresse Web de votre application ainsi qu'un code QR.
2. Cliquez sur le lien pour ouvrir votre application Web en direct dans un nouvel onglet de navigateur ou scannez le code QR avec l'appareil photo de votre téléphone.
3. Essayez-le sur votre téléphone : connectez-vous sur votre téléphone, confirmez votre participation à l'une des courses que vous avez planifiées plus tôt sur votre ordinateur, et regardez le nombre de participants se mettre à jour en temps réel grâce à votre base de données Cloud SQL partagée.

8. (Bonus) Inspecter vos ressources dans la console Google Cloud

Exploration bonus : cette étape est entièrement facultative. Votre application est déjà en ligne et opérationnelle. Si vous souhaitez en savoir plus sur Google Cloud et découvrir ce que l'IA a créé en coulisses, suivez les étapes pour explorer votre infrastructure en direct.

Lorsque Google AI Studio crée et déploie votre application, il ne l'enferme pas dans une boîte noire privée. Il crée à votre place de véritables services Google Cloud prêts pour la production. Considérez la console Google Cloud comme le panneau de contrôle où vous pouvez afficher votre application et votre base de données en direct.

Étape 1 : Ouvrez la console Google Cloud

1. Dans un nouvel onglet de navigateur, ouvrez la console Google Cloud.
2. En haut de l'écran, cliquez sur le menu déroulant du projet et sélectionnez celui créé pour votre application AI Studio (son nom commence généralement par continual-run-).

Étape 2 : Découvrez où votre application Web s'exécute (Cloud Run)

1. Dans la barre de recherche en haut, saisissez Cloud Run, puis sélectionnez-le dans les résultats.
2. Cliquez sur le nom de votre application (par exemple, running-club).
3. Vous pouvez explorer le moteur qui héberge votre site Web :
   • Métriques : graphiques utiles indiquant le nombre de personnes qui visitent votre site Web.
   • Journaux : enregistrement en direct de l'activité, qui indique ce qui se passe lorsque les visiteurs interagissent avec votre application.

Étape 3 : Voir votre base de données en action (Cloud SQL)

1. Dans la barre de recherche en haut, saisissez Cloud SQL, puis sélectionnez-le dans les résultats.
2. Cliquez sur votre instance de base de données PostgreSQL.
3. Vous pouvez y consulter les détails de votre base de données en direct, ce qui confirme qu'elle est active et prête à stocker les données de votre club de course.

9. Effectuer un nettoyage des ressources

Si vous avez créé cette application en tant que projet d'entraînement, vous pouvez facilement la supprimer. Si vous prévoyez de continuer à utiliser votre application Running Club avec votre communauté, vous pouvez la laisser en cours d'exécution.

1. Dans Google AI Studio, cliquez sur Mes applications dans la barre latérale de gauche.
2. Recherchez l'application Running Club.
3. Cliquez sur Supprimer l'application (ou sur l'icône en forme de corbeille). Votre page Web en ligne est alors désactivée et la base de données de test est supprimée en une seule étape.

10. Félicitations

Vous avez créé, personnalisé et publié votre première application Web basée sur une base de données à l'aide de Google AI Studio et Cloud SQL.

Cliquez ici pour obtenir le badge Parcours Builder terminé.

Pour poursuivre votre parcours, rendez-vous sur goo.gle/builders pour accéder à votre prochain atelier.

Ce que vous avez accompli

• Création d'une application avec un langage simple : création d'une application complète de club de course à pied avec des requêtes simples.
• Google Sign-In activé : configurez automatiquement une connexion sécurisée avec des comptes Google.
• Connexion à une base de données réelle : les itinéraires enregistrés, les courses planifiées, les RSVP et les discussions sont stockés de manière sécurisée dans Cloud SQL.
• Ajout de fonctionnalités par conversation : créez une bibliothèque d'itinéraires et un suivi des RSVP en discutant simplement avec l'IA.
• Publiée sur le Web : vous avez déployé votre application sur Internet en un clic et l'avez testée sur différents appareils.
• Exploration des coulisses : vous avez découvert comment Google Cloud héberge votre application Web et votre base de données en direct.

Étape suivante

Vous pouvez continuer à discuter avec l'IA dans Google AI Studio pour étendre votre application avec de nouvelles fonctionnalités :

• Cartes interactives : demandez à l'IA d'ajouter des aperçus de cartes et des itinéraires GPS.
• Trouver un partenaire de course : demandez à l'IA de vous suggérer des partenaires de course ayant des objectifs de rythme similaires.
• Prévisions météo : demandez à l'IA d'afficher les prévisions météo du week-end sur les prochaines fiches de course.
• Partage de photos : demandez à l'IA d'autoriser les coureurs à partager des photos après une course en groupe.

Documentation complémentaire

• Documentation Google AI Studio
• Déployer des applications depuis Google AI Studio
• Présentation de Cloud SQL pour PostgreSQL
• Codage assisté par l'IA et Cloud SQL
• Documentation Cloud Run