Chargement...
Aucun résultat.

Mettez en pratique vos compétences dans la console Google Cloud

Créer des prototypes d'applications dans Google AI Studio

Atelier 25 minutes universal_currency_alt Sans frais show_chart Débutant
info Cet atelier peut intégrer des outils d'IA pour vous accompagner dans votre apprentissage.
Ce contenu n'est pas encore optimisé pour les appareils mobiles.
Pour une expérience optimale, veuillez accéder à notre site sur un ordinateur de bureau en utilisant un lien envoyé par e-mail.

GSP1337

Logo des ateliers d'auto-formation Google Cloud

Présentation

Dans cet atelier, vous allez apprendre à créer rapidement des prototypes d'applications dans Google AI Studio. Vous allez explorer des applications d'IA prédéfinies, apprendre à créer les vôtres à partir de modèles, puis à utiliser et affiner des prompts textuels. Enfin, vous allez découvrir comment gérer et partager vos créations. Pour cet atelier, vous jouerez le rôle d'un développeur de solutions lors d'un hackathon. Votre objectif est de créer et de partager rapidement plusieurs démonstrations de faisabilité d'applications d'IA dans un délai imparti.

Points abordés

Dans cet atelier, vous allez apprendre à :

  • explorer des applications prédéfinies par Google ;
  • créer une application à l'aide d'un modèle et la modifier avec l'assistant de codage ;
  • concevoir une application basée sur des données à partir d'un seul prompt textuel ;
  • enregistrer, télécharger et afficher les prototypes d'applications.

Préparation

Avant de cliquer sur le bouton "Démarrer l'atelier"

Lisez ces instructions. Les ateliers sont minutés, et vous ne pouvez pas les mettre en pause. Le minuteur, qui démarre lorsque vous cliquez sur Démarrer l'atelier, indique combien de temps les ressources Google Cloud resteront accessibles.

Cet atelier pratique vous permet de suivre les activités dans un véritable environnement cloud, et non dans un environnement de simulation ou de démonstration. Des identifiants temporaires vous sont fournis pour vous permettre de vous connecter à Google Cloud le temps de l'atelier.

Pour réaliser cet atelier :

  • Vous devez avoir accès à un navigateur Internet standard (nous vous recommandons d'utiliser Chrome).
Remarque : Ouvrez une fenêtre de navigateur en mode incognito (recommandé) ou de navigation privée pour effectuer cet atelier. Vous éviterez ainsi les conflits entre votre compte personnel et le compte temporaire de participant, qui pourraient entraîner des frais supplémentaires facturés sur votre compte personnel.
  • Vous disposez d'un temps limité. N'oubliez pas qu'une fois l'atelier commencé, vous ne pouvez pas le mettre en pause.
Remarque : Utilisez uniquement le compte de participant pour cet atelier. Si vous utilisez un autre compte Google Cloud, des frais peuvent être facturés à ce compte.

Ouvrir Google AI Studio

  1. Cliquez sur Démarrer l'atelier. Le panneau de l'atelier affiche les identifiants temporaires à utiliser.

    • Remarque : Si l'atelier est payant, vous serez invité à sélectionner un mode de paiement.

  2. Ouvrez Google AI Studio dans une fenêtre de navigation privée. La page de connexion Google s'affiche.

    • Conseil : Pour y accéder plus facilement, placez les onglets de l'atelier et d'AI Studio côte à côte, dans des fenêtres distinctes.

  3. Copiez le nom d'utilisateur ci-dessous, collez-le dans le champ Adresse e-mail, puis cliquez sur Suivant.

    {{{user_0.username | "Username"}}}

  4. Copiez le mot de passe ci-dessous, collez-le dans le champ Saisissez votre mot de passe, puis cliquez sur Suivant.

    {{{user_0.password | "Password"}}}

  5. Acceptez les conditions d'utilisation qui s'affichent à l'écran pour continuer.

Vous êtes maintenant connecté à Google AI Studio avec votre compte de participant temporaire.

Tâche 1 : Explorer une application prédéfinie

En tant que développeur lors d'un hackathon, vous devez tout d'abord analyser rapidement le contexte pour déterminer quels composants de base et exemples sont disponibles. Vous allez commencer par explorer une application de chatbot prédéfinie.

  1. Dans le menu de navigation de gauche, cliquez sur Enable saving (Activer l'enregistrement) au-dessus de l'option "Build" (Créer), puis sélectionnez votre nom d'utilisateur.

  2. Cliquez sur Build (Créer).

  3. Cliquez sur l'onglet Gallery > All apps (Galerie > Toutes les applications), puis faites défiler la galerie de modèles d'applications prédéfinis.

  4. Recherchez l'application ChatterBots et cliquez dessus.

Remarque : Si le message d'erreur Failed to store recent Application (Échec de l'enregistrement de l'application récente) s'affiche, cela signifie que vous n'avez pas accordé l'accès à Google Drive. Pour résoudre ce problème, activez l'accès à Drive depuis la section History (Historique) dans la barre latérale de gauche. Cliquez sur Allow Drive access (Autoriser l'accès à Drive). Dans le pop-up qui s'ouvre, sélectionnez votre compte étudiant (par exemple, student-XX-YYYY@qwiklabs.net) et accordez les autorisations nécessaires pour continuer.

  1. Cliquez sur Allow (Autoriser) pour accorder l'accès au micro.

  2. L'application s'ouvre dans la vue IDE. Prenez quelques instants pour vous familiariser avec l'interface : l'assistant de codage se trouve à gauche, l'éditeur de code/le lecteur de fichiers au centre et un aperçu en direct du chatbot en cours d'exécution à droite.

  3. Prévisualisez l'application, explorez les préréglages de ChatterBot et créez votre propre ChatterBot en fonction des caractéristiques que vous définissez.

  4. Explorez le code généré. Dans l'éditeur de code, cliquez sur le bouton Show file tree view (Afficher l'arborescence des fichiers) pour afficher la structure du code. Cliquez sur un fichier tel que App.tsx pour afficher le code principal de l'application, ou sur un fichier du dossier "components" pour voir comment un élément d'interface utilisateur spécifique est créé.

Code de l'application Chatterbot

Explorer une application prédéfinie

Tâche 2 : Générer un prototype d'application à partir d'un modèle et le modifier

Ensuite, vous avez décidé qu'un utilitaire de flashcards simple serait utile pour votre projet de hackathon. Vous allez en générer un à partir d'un modèle, puis utiliserez l'assistant de codage pour adapter rapidement son apparence à l'identité visuelle de votre projet.

Générer l'application

  1. Cliquez sur Back to start (Retour au début), puis revenez à la page d'accueil en cliquant sur le logo Google AI Studio en haut à gauche.

  2. Dans le menu de navigation de gauche, cliquez sur Build > Start (Créer > Démarrer).

  3. Recherchez le modèle Flash UI (Interface utilisateur Flash) et cliquez dessus pour générer l'application.

Modifier l'application avec l'assistant de codage

  1. Dans le volet Preview (Aperçu) à droite, interagissez avec les flashcards par défaut pour voir comment elles fonctionnent.

  2. Saisissez Large Language Models (Grands modèles de langage) dans le champ de saisie, puis cliquez sur la flèche pour générer un ensemble spécifique à un thème.

  3. À présent, concentrez-vous sur le champ de saisie Code assistant (Assistant de codage) en bas à gauche. Saisissez la commande suivante pour modifier le style et la logique de l'application :

Change la couleur d'arrière-plan des flashcards en vert clair et modifie la logique des flashcards pour qu'une seule puisse être retournée à la fois.
  1. Cliquez sur Send prompt (Envoyer le prompt). Observez l'assistant modifier le code de l'application dans l'éditeur.
Remarque : Si le bouton "Remix" (Remixer) s'affiche, cliquez dessus, puis sur "Apply" (Appliquer) et confirmez.

  1. Une fois le code modifié, testez les deux changements dans le volet Preview (Aperçu). Vérifiez que les flashcards sont vert clair et que vous ne pouvez en retourner qu'une à la fois.

  2. Vous allez ensuite ajouter une fonctionnalité. Dans le champ de saisie de l'assistant de codage, saisissez la nouvelle commande suivante :

Crée un bouton "Ajoute 5 flashcards" pour générer cinq autres flashcards en veillant à ce qu'il n'y ait pas de doublons.

  1. Cliquez sur Send prompt (Envoyer le prompt), puis observez l'assistant ajouter un bouton à l'UI et modifier le code pour inclure la nouvelle logique.

  2. Enfin, testez la nouvelle fonctionnalité dans le volet Preview (Aperçu). Cliquez sur le nouveau bouton Surprends-moi > Ajoute 5 flashcards et vérifiez que cinq flashcards uniques ont été ajoutées à votre ensemble.

  3. Cliquez sur l'icône en forme de crayon à côté du nom de l'application Flash UI (Interface utilisateur Flash), renommez l'application Flashcard Maker (Créateur de flashcards), laissez la description par défaut, puis cliquez sur Save (Enregistrer).

Cliquez sur Vérifier ma progression pour valider l'objectif.

Générer un prototype d'application à partir d'un modèle et le modifier

Tâche 3 : Créer une application à l'aide d'un prompt textuel

Passons maintenant à l'événement principal du hackathon : créer votre fonctionnalité essentielle en partant de zéro. Vous allez créer un planificateur d'itinéraires de voyage en le décrivant dans un langage courant. Plus précisément, vous allez demander au modèle de créer une UI capable d'afficher clairement des données structurées.

  1. Revenez à la galerie de la page Build (Créer).

  2. Dans la barre principale de saisie de prompt textuel en haut de la page, saisissez la demande détaillée suivante :

Crée une application qui génère un itinéraire de voyage de trois jours dans une ville. L'application doit comporter un champ de saisie de la ville. La réponse doit être un plan structuré présentant les jours, les heures et les activités dans un format lisible.

  1. Cliquez sur Build (Créer) et attendez que l'assistant de codage génère l'application complète.

  2. Lorsque l'application s'affiche, testez ses fonctionnalités dans le volet Preview (Aperçu). Dans le champ de saisie de la ville, saisissez Rome, puis appuyez sur ENTRÉE.

  3. Observez le résultat. L'application doit afficher un itinéraire structuré de trois jours à Rome, prouvant que l'IA a réussi à créer une UI basée sur des données à partir de votre prompt textuel.

  4. Cliquez sur l'icône en forme de crayon en haut du panneau, à côté du nom de l'application, renommez l'application AI Travel Itinerary Generator (Générateur d'itinéraires de voyage par IA), conservez la description par défaut, puis cliquez sur Save (Enregistrer).

  5. (Facultatif) Utilisez l'assistant de codage pour modifier n'importe quelle partie de l'application.

Cliquez sur Vérifier ma progression pour valider l'objectif.

Créer une application à l'aide d'un prompt textuel

Tâche 4 : Enregistrer, télécharger et afficher vos applications

Le prototype de votre planificateur de voyage fonctionne. La dernière étape du hackathon consiste à télécharger votre projet et à le partager avec votre équipe.

Votre application est désormais enregistrée dans la section "Your apps" (Vos applications) de la page "Build" (Créer).

  1. Cliquez sur l'icône Download (Télécharger) dans la même barre d'outils. Un fichier ZIP contenant le code source complet de votre application sera téléchargé sur votre ordinateur.

    • Remarque : Vous pouvez utiliser ce code pour poursuivre le développement en local dans votre propre éditeur.

  2. Découvrez comment mettre en ligne votre application. Cliquez sur le bouton Deploy App (Déployer l'application) dans la même barre d'outils.

    • Remarque : Nous n'allons pas effectuer l'intégralité du processus de déploiement dans cet atelier, mais cette étape vous montre la procédure intégrée pour publier votre application sur Google Cloud.

Afficher les prototypes de vos applications

  1. Accédez à la page d'accueil et cliquez sur le logo Google AI Studio en haut à gauche.

  2. Dans le menu de navigation de gauche, cliquez sur Build (Créer).

  3. Cliquez sur l'onglet Your apps > Created by you (Vos applications > Créées par vous) pour afficher les prototypes que vous avez modifiés et créés. Les deux applications Créateur de flashcards et Générateur d'itinéraires de voyage par IA devraient y figurer.

Vue des prototypes d'applications

Félicitations !

Félicitations ! Vous avez utilisé Google AI Studio pour explorer, adapter et créer rapidement des prototypes d'applications fonctionnelles en partant de zéro. Vous avez appris à exploiter des modèles prédéfinis, à modifier du code en langage naturel et à générer une application complète basée sur des données à partir d'un seul prompt textuel. Vous disposez désormais des connaissances nécessaires pour donner vie à vos propres idées en vous aidant de l'IA.

Formations et certifications Google Cloud

Les formations et certifications Google Cloud vous aident à tirer pleinement parti des technologies Google Cloud. Nos cours portent sur les compétences techniques et les bonnes pratiques à suivre pour être rapidement opérationnel et poursuivre votre apprentissage. Nous proposons des formations pour tous les niveaux, à la demande, en salle et à distance, pour nous adapter aux emplois du temps de chacun. Les certifications vous permettent de valider et de démontrer vos compétences et votre expérience en matière de technologies Google Cloud.

Dernière mise à jour du manuel : 12 mars 2026

Dernier test de l'atelier : 12 mars 2026

Copyright 2026 Google LLC. Tous droits réservés. Google et le logo Google sont des marques de Google LLC. Tous les autres noms d'entreprises et de produits peuvent être des marques des entreprises auxquelles ils sont associés.

Avant de commencer

  1. Les ateliers créent un projet Google Cloud et des ressources pour une durée déterminée.
  2. Les ateliers doivent être effectués dans le délai imparti et ne peuvent pas être mis en pause. Si vous quittez l'atelier, vous devrez le recommencer depuis le début.
  3. En haut à gauche de l'écran, cliquez sur Démarrer l'atelier pour commencer.

Utilisez la navigation privée

  1. Copiez le nom d'utilisateur et le mot de passe fournis pour l'atelier
  2. Cliquez sur Ouvrir la console en navigation privée

Connectez-vous à la console

  1. Connectez-vous à l'aide des identifiants qui vous ont été attribués pour l'atelier. L'utilisation d'autres identifiants peut entraîner des erreurs ou des frais.
  2. Acceptez les conditions d'utilisation et ignorez la page concernant les ressources de récupération des données.
  3. Ne cliquez pas sur Terminer l'atelier, à moins que vous n'ayez terminé l'atelier ou que vous ne vouliez le recommencer, car cela effacera votre travail et supprimera le projet.

Ce contenu n'est pas disponible pour le moment

Nous vous préviendrons par e-mail lorsqu'il sera disponible

Parfait !

Nous vous contacterons par e-mail s'il devient disponible

Un atelier à la fois

Confirmez pour mettre fin à tous les ateliers existants et démarrer celui-ci

Utilisez la navigation privée pour effectuer l'atelier

Le meilleur moyen d'exécuter cet atelier consiste à utiliser une fenêtre de navigation privée. Vous éviterez ainsi les conflits entre votre compte personnel et le compte temporaire de participant, qui pourraient entraîner des frais supplémentaires facturés sur votre compte personnel.