Google utilise la technologie IA pour traduire le contenu dans votre langue préférée. Les traductions générées par IA peuvent contenir des erreurs.

Lancez votre site Web de portfolio avec l'IA

1. Introduction

Présentation

Où commence la création avec l'IA aujourd'hui ? Pour la plupart d'entre nous, elle commence par une requête ou un prototype. Google AI Studio propose un mode Création puissant (souvent appelé "codage d'ambiance") qui vous permet de concevoir, de tester et de créer des applications Web à l'aide de la génération de code basée sur les modèles Gemini.

Dans cet atelier de programmation, vous allez créer un site Web de portfolio personnel. L'agent AI Studio écrira le code d'interface. Une fois l'application finalisée, vous la déploierez directement sur Cloud Run en un seul clic.

Objectifs de l'atelier

Demander à Google AI Studio de prototyper un site Web de portfolio personnel.
Tester l'application dans le bac à sable d'aperçu interactif.
Déployer l'application sur Cloud Run directement depuis l'interface utilisateur de Google AI Studio.

Points abordés

Comment utiliser le mode Création de Google AI Studio pour prototyper rapidement un service d'interface à l'aide du langage naturel.
Comment déployer votre application AI Studio en tant que conteneur sans serveur sur Cloud Run.

2. Configuration du projet

Avant de lancer AI Studio, vérifiez l'état de votre compte et les prérequis.

Compte Google et informations de niveau

Si vous n'avez pas encore de compte Google, créez-en un.
- Conseil : Si possible, utilisez un compte Google personnel pour cet atelier. Les comptes de groupe, d'entreprise ou d'établissement scolaire peuvent appliquer des règles Workspace qui désactivent les fonctionnalités expérimentales ou les intégrations cloud.
Consultez les informations de facturation pour les déploiements :
- Niveau Starter Google Cloud : permet de publier jusqu'à deux applications Full Stack dans une région sélectionnée sans frais, sans avoir à créer de compte de facturation Google Cloud complet.
- Déploiement standard : se connecte à un projet Google Cloud payant existant et augmente les limites de stockage, les ressources de processeur et les API.

3. Créer un site Web de portfolio en mode Création d'AI Studio

Créez l'enveloppe de l'application et demandez à l'assistant de code IA de créer la mise en page de l'interface.

Accédez au panneau Applications de Google AI Studio, puis cliquez sur Nouvelle application.

Dans le champ du prompt du chat, saisissez la description de votre application de portfolio :

Build a professional personal portfolio website. The site should
have a modern, responsive design and sections for my biography,
projects showcase, skills, and links to my professional profiles
(e.g., GitHub, LinkedIn).

Cliquez sur Créer pour lancer le processus de génération de l'application.

4. Testez, testez... et testez.

Avant de lancer le service en direct, exécutez des vérifications de validation dans l'aperçu interactif.

Ouvrez le volet d'aperçu dans Google AI Studio.
Interagissez avec les boutons de navigation, les liens ou les mises en page dans le bac à sable d'aperçu pour vérifier l'expérience visuelle.
- Remarque sur la résolution des erreurs : lors de la génération ou des tests, vous pouvez parfois rencontrer des problèmes d'exécution ou des erreurs de compilation. Dans ce cas, AI Studio affiche un bouton Corriger dans le chat, ce qui vous permet de demander à l'agent de diagnostiquer et de résoudre automatiquement le problème.
Si vous souhaitez modifier le style ou le comportement, demandez-le à l'agent dans la fenêtre de chat. Exemple :
- "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
- "Include a new section to showcase my recent presentations and talks."
Attendez que l'agent mette à jour la base de code et vérifiez le navigateur d'aperçu pour voir les mises à jour.

5. Déployer dans Cloud Run

Une fois votre prototype entièrement fonctionnel, déployez-le en tant que service public sur Cloud Run.

En haut à droite de Google AI Studio, cliquez sur le bouton Publier pour lancer l'assistant de déploiement.
Cliquez sur Premiers pas pour configurer votre projet Google Cloud.
- Vérifiez que le menu déroulant Projet Google Cloud cible correspond au projet que vous avez associé à votre espace de travail.
- AI Studio génère automatiquement un identifiant de service unique pour l'instance Cloud Run.
Si vous effectuez un déploiement pour la première fois et que vous utilisez les paramètres Google Cloud standards, vous serez peut-être invité à spécifier un type d'organisation et à fournir des informations de facturation.
Cliquez sur Publier l'application.
Les étapes de création, d'enregistrement et de déploiement du conteneur s'effectuent en arrière-plan. Ce processus prend normalement entre deux et quatre minutes.
Une fois le déploiement terminé, copiez l'URL de l'application générée et accédez au lien de l'application en direct dans un onglet de navigateur.
Testez l'application Web en direct dans votre navigateur.

6. (FACULTATIF) Ajouter un domaine personnalisé

Par défaut, Cloud Run héberge votre service sur un sous-domaine run.app géré par Google. Si vous souhaitez utiliser un domaine personnel (tel que yourname.com ou portfolio.yourname.com), vous pouvez mapper un domaine personnalisé à votre service.

Étape 1 : Ajouter un mappage de domaine dans Cloud Run

Accédez à la page "Mappages de domaines Cloud Run" dans la console Google Cloud.
Cliquez sur Ajouter un mappage.
Sélectionnez le service Cloud Run que vous souhaitez mapper dans le menu déroulant.
Saisissez votre nom de domaine personnalisé (par exemple, yourname.com ou portfolio.yourname.com).
Cliquez sur Suivant ou Continuer. Cloud Run affiche les enregistrements DNS (tels que les enregistrements A/AAAA ou CNAME) que vous devez créer auprès de votre bureau d'enregistrement de noms de domaine.

Étape 2 : Configurer votre bureau d'enregistrement de noms de domaine

Connectez-vous au panneau d'administration de votre bureau d'enregistrement de noms de domaine (par exemple, Squarespace, GoDaddy ou Namecheap).
Ouvrez la page de configuration de la gestion DNS ou des paramètres DNS de votre domaine.
Créez les enregistrements DNS correspondant aux valeurs affichées dans l'assistant de mappage Cloud Run :
- Pour les mappages de domaines apex (par exemple, yourname.com), ajoutez les enregistrements A et AAAA listés.
- Pour les mappages de sous-domaines (par exemple, portfolio.yourname.com), ajoutez l'enregistrement CNAME listé.
Enregistrez les modifications de la configuration DNS.

Étape 3 : Attendre le provisionnement du certificat SSL

Une fois les modifications DNS propagées :

Google Cloud provisionne automatiquement un certificat SSL/TLS géré pour votre connexion sécurisée.
Ce processus prend généralement environ 15 minutes, mais peut durer jusqu'à 24 heures en fonction de la propagation DNS.
Une fois l'opération terminée, votre domaine personnalisé sera redirigé en toute sécurité vers votre site Web de portfolio.

7. Effectuer un nettoyage

Pour éviter des frais de facturation imprévus ou libérer de l'espace dans les ressources de votre espace de travail :

Dans Google AI Studio, accédez à la page "Applications".
Recherchez votre application dans la grille ou la liste.
Cliquez sur l'icône de corbeille pour supprimer l'état de l'application et annuler la publication du service dans Cloud Run.
Si vous avez effectué le déploiement à l'aide d'un projet standard et que vous souhaitez arrêter complètement toutes les ressources, accédez aux paramètres du projet Google Cloud Console et supprimez le projet sous-jacent.

8. Conclusion

Félicitations ! Vous avez conçu, développé et déployé un site Web de portfolio directement depuis Google AI Studio.

En savoir plus

Cliquez sur ce lien pour obtenir le badge Parcours du créateur terminé.

Pour poursuivre votre parcours, accédez à goo.gle/builders pour votre prochain atelier.