Passer au contenu principal
Ce tutoriel vous guide à travers le processus de « vibe coding » sur Replit — de la conception d’une idée jusqu’à la publication d’une application complète. Ce tutoriel construira une visualisation de carte interactive des parcs de San Francisco, en récupérant des données externes et en utilisant des frameworks modernes. Vous verrez comment exploiter Replit Agent pour le développement initial, les raffinements et le débogage.

​
La philosophie du vibe coding

Le vibe coding consiste moins à écrire chaque ligne de code qu’à guider les outils IA avec votre vision et vos connaissances du domaine. C’est un processus itératif de prompting, de révision et de raffinement. Points clés à retenir de la vidéo :
  • Conceptualiser d’abord : Commencez avec une idée claire de ce que vous voulez construire. Visualiser le produit final aide, surtout lors du prompting de l’IA.
  • La connaissance du domaine est un atout : Connaître les frameworks pertinents (comme Leaflet.js pour les cartes) ou les sources de données (comme OpenStreetMap) améliore considérablement les résultats générés par l’IA.
  • Développement itératif : Anticipez le débogage et le raffinement. Les outils IA sont puissants, mais ce sont des collaborateurs, pas des baguettes magiques.

​
Projet : carte des parcs de San Francisco

L’objectif est de construire une carte interactive affichant les parcs et espaces publics de San Francisco. Énoncé du problème : L’objectif est une carte interactive pour découvrir les parcs et espaces publics de San Francisco. Solution : Un outil interactif utilisant Leaflet.js et les données OpenStreetMap. Leçons clés :
  • Prompter l’IA efficacement.
  • Traiter des données externes.
  • Déboguer et gérer les erreurs.

​
Construire avec Replit Agent

Replit Agent peut échafauder des projets entiers, configurer des environnements et générer du code initial.
1

Rédiger le prompt initial

Un bon prompt est spécifique. Nous indiquons à Agent :
  • L’objectif : « Aide-moi à créer une application de carte minimaliste pour visualiser les parcs de San Francisco. »
  • Les technologies clés : « Tu devrais utiliser leaflet pour la visualisation de carte et récupérer des données depuis OpenStreetMap. »
  • Des types de données spécifiques d’OpenStreetMap (après recherche) : Formations naturelles (forêts, plages, îlots, entrées de grotte) et lieux de loisirs (parcs, jardins).
Pour en savoir plus sur la rédaction de prompts efficaces, consultez cet article.
2

Joindre une maquette

Les aides visuelles aident Agent à comprendre la mise en page et les fonctionnalités souhaitées. Un simple croquis ou une maquette peut être joint directement au prompt.
Croquis de maquette de l'application de carte
3

Processus d'Agent

  1. Création du plan : Agent décrit les étapes qu’il va suivre. Examinez et approuvez ce plan.
    Création du plan par Replit Agent
  2. Aperçu visuel : Agent diffuse un aperçu visuel de l’interface de l’application.
    Aperçu visuel de Replit Agent
  3. Configuration de l’environnement : Agent configure l’environnement de développement en installant les langages et packages nécessaires — aucune configuration manuelle requise.
  4. Construction de l’application : Agent écrit le code pour le front-end et le back-end.
  5. Checkpoints : Agent crée des checkpoints (commits Git) pour que vous puissiez revenir en arrière si quelque chose tourne mal.
4

Déboguer avec Agent

Les erreurs arrivent. Utilisez les DevTools du navigateur (en particulier les onglets Console et Réseau) pour trouver les messages d’erreur.
  • Observer : La carte s’est chargée, mais aucun point de données n’est apparu.
  • Investiguer : La console affichait une erreur : « Failed to fetch map features error cannot read properties of undefined reading natural. »
  • Informer Agent : Collez le message d’erreur directement dans le chat avec Agent. Agent tentera de déboguer et de corriger le problème.
    Console du navigateur affichant une erreur
Dans la vidéo, Agent a identifié un problème avec l’analyse de la réponse de l’API Overpass et a ajouté une gestion robuste des erreurs, ce qui a résolu le problème.

​
Raffinement avec le mode Lite

Une fois qu’Agent a construit le MVP, utilisez le mode Lite pour des modifications plus petites et plus ciblées. Le mode Lite est optimisé pour les changements rapides.
La carte initiale était fonctionnelle mais pouvait être plus belle. Prompt à Agent : « Peux-tu utiliser un style carto plus minimaliste pour OpenStreetMap ? Carto lite. »Cela repose sur la connaissance que « Carto lite » est un thème reconnu pour les cartes Leaflet.
Un raffinement courant est l’ajout d’un mode sombre. Prompt à Agent : « Peux-tu ajouter un mode sombre à mon application et utiliser carto dark pour la carte en mode sombre ? »
Replit Agent implémentant le mode sombre
Agent va :
  • Lire les fichiers pour le contexte.
  • Apporter des modifications aux fichiers nécessaires (par exemple, fournisseurs de thème, styles).
  • Redémarrer l’application pour appliquer les changements.
L’ajout du mode sombre a nécessité plusieurs itérations :
  1. L’implémentation initiale avait un bouton de basculement qui fonctionnait pour la carte mais disparaissait ensuite. Retour : « Le bouton de basculement de thème fonctionne pour la carte, mais il disparaît quand on clique dessus. Le bouton de basculement de thème devrait être dans la barre de navigation latérale et le thème devrait être appliqué à la barre de navigation latérale. »
  2. Problèmes avec plusieurs boutons de basculement et des références de composants incorrectes (side nav vs. sidebar). Retour et guidance : « Maintenant il y a deux boutons de basculement de thème. L’un contrôle la carte, l’autre contrôle la barre de navigation latérale. Fusionnez-les en un seul dans la barre. Maintenant mettez à jour le CSS. » Quand Agent fait une hypothèse incorrecte (par ex. composant SideNav), le pointer explicitement vers le fichier correct (@Sidebar) aide.
  3. Correction finale pour s’assurer que le bouton de basculement du mode sombre dans la barre latérale bascule correctement le thème de la carte vers Carto Dark. Retour : « Maintenant le bouton de basculement du mode sombre dans @Sidebar ne bascule pas la carte vers carto dark. »
Ce processus met en évidence l’aspect « conversation » du vibe coding. Soyez descriptif et guidez l’IA.

​
Publier votre application

Replit rend la publication simple.
  1. Sélectionnez le bouton Publish.
  2. Agent suggère une configuration de publication (par exemple, nom de l’application, commandes de build et d’exécution). Examinez et confirmez.
  3. Si votre application utilise des clés API ou d’autres informations sensibles, stockez-les dans Secrets. Agent les utilisera de manière sécurisée.
  4. Sélectionnez Publish. Replit regroupe votre application et la rend accessible en ligne.
    Écran de déploiement Replit
Votre application publiée aura une URL publique (par exemple, park-mapper.replit.app). Les modifications apportées dans votre environnement de développement n’affecteront pas la version publiée jusqu’à ce que vous cliquiez sur Republish.

​
Récapitulatif et prochaines étapes

Ce tutoriel est passé d’une idée à une application de carte interactive publiée sans écrire une seule ligne de code manuellement. Replit Agent a été utilisé pour le travail intensif, avec le mode Lite pour les raffinements, en tirant parti des connaissances du domaine et d’un processus de débogage itératif. Prochaines étapes possibles pour l’application Park Mapper :
  • Ajouter une base de données pour stocker les données des parcs de manière persistante (éviter une nouvelle récupération à chaque chargement).
  • Permettre aux utilisateurs de sauvegarder ou de mettre en favoris des parcs.
  • Implémenter un filtrage avancé.
  • Améliorer le style et ajouter des icônes personnalisées pour les marqueurs de carte.
  • Améliorer la réactivité mobile (par exemple, s’assurer que les filtres sont accessibles sur mobile).
Le vibe coding consiste à itérer, expérimenter et guider l’IA pour donner vie à vos idées. N’ayez pas peur des erreurs ; elles font partie du processus !