Passer au contenu principal

Documentation Index

Fetch the complete documentation index at: https://docs.replit.com/llms.txt

Use this file to discover all available pages before exploring further.

⏰ Durée estimée : 10 minutes À la fin de ce guide, vous aurez une petite application publiée à une URL que vous pourrez partager.
L'application Runwell publiée ouverte dans un nouvel onglet de navigateur — le résultat de ce guide : un suivi de course premium partageable
Vous allez créer un suivi de course. L’application est ciblée : elle vous offre une première version complète sans avoir besoin de planifier un grand projet.

​
Avant de commencer

Vous avez besoin d’un compte Replit. L’objectif est de terminer une boucle complète :
  • Créer avec Agent,
  • Tester l’application,
  • Publier et partager.
Agent est le constructeur IA de Replit. Décrivez ce que vous voulez, et Agent vous aide à créer, expliquer et corriger l’application.

​
Créer la première version

1

Démarrer une nouvelle application

2

Demander à Agent la première version

Le prompt est divisé en quatre courtes sections pour que Agent reçoive une intention claire plutôt qu’un mur de texte :
  • Contexte — ce qu’est l’application et à qui elle s’adresse.
  • Direction visuelle — son apparence et son ressenti.
  • Périmètre — les écrans à créer et ce que chacun doit afficher.
  • Données et navigation — les données d’exemple à utiliser et comment la mise en page s’adapte au mobile et au bureau.
Agent peut afficher un plan avant de construire. Vérifiez que le plan inclut les écrans Accueil, Ajouter une course et Progression, des données d’exemple de courses et de kilométrage de chaussures, et les mises en page mobile + bureau.Si quelque chose d’important manque, demandez à Agent de mettre à jour le plan avant qu’il commence à construire.
3

Explorer avant de construire (optionnel)

Si vous souhaitez que Agent réfléchisse au design avant d’écrire du code, activez Plan à côté du champ de prompt. Le mode Plan permet à Agent de poser des questions de clarification et de produire un plan structuré que vous pouvez examiner avant d’approuver la construction — utile pour des projets plus importants que celui-ci.En savoir plus sur le mode Plan.
4

Attendre pendant qu'Agent construit

Agent planifie, génère et assemble l’application. Cela prend généralement quelques minutes — vous pouvez suivre la progression dans le panneau de chat pendant qu’il travaille.
Agent en cours de construction — le panneau de chat affiche le prompt Runwell et le plan d'Agent avec un statut 'Planification de l'architecture frontend', tandis que le volet droit montre un espace réservé avant que l'aperçu soit généré
5

Confirmer que l'application fonctionne dans Preview

Quand Agent a terminé, ouvrez Preview et utilisez l’application comme un visiteur. Preview est l’endroit où vous testez l’application pendant que vous la construisez, avant de la publier.Vérifiez que vous pouvez :
  • Ouvrir Ajouter une course et choisir outdoor ou tapis de course.
  • Entrer la distance, la durée et des notes.
  • Enregistrer la course.
  • Voir la course apparaître dans Courses récentes.
  • Voir la distance hebdomadaire et le kilométrage des chaussures se mettre à jour.
  • Voir une recommandation ou un insight encourageant.
  • Actualiser la page et utiliser l’application à nouveau.
  • Redimensionner Preview à la largeur d’un téléphone.
Si quelque chose ne fonctionne pas, décrivez le symptôme à Agent. Vous n’avez pas besoin de diagnostiquer le code vous-même.
L'application Runwell dans Preview, avec un thème sombre et des accents vert citron — le logo Runwell, un héros 'Prêt à courir' avec une image de coureur, une carte de métriques de volume hebdomadaire avec une barre de progression citron, une liste de Courses récentes et un bouton Enregistrer une course
Vous souhaitez explorer des variations visuelles avant de publier ? Consultez Design avec Canvas pour générer des looks alternatifs côte à côte et appliquer celui que vous préférez.
6

Publier votre application

Quand Preview fonctionne, vous pouvez publier de deux façons :
  • Depuis le chat Agent : après que Agent a terminé la construction, il suggère le déploiement avec une carte Publier intégrée. Confirmez votre sous-domaine, choisissez qui peut accéder à l’application et sélectionnez Publier.
  • Depuis le panneau Outils et fichiers : ouvrez Publication pour configurer les mêmes options. Utilisez ce chemin si vous avez fermé la carte intégrée ou si vous souhaitez publier plus tard.
Dans les deux cas, la publication crée une version publique de votre application avec une URL que vous pouvez partager.
L'éditeur de projet affichant la carte Publier intégrée dans le chat Agent avec un champ de sous-domaine, des options d'accès et un bouton Publier
7

Ouvrir votre application publiée

Ouvrez l’URL publique dans un nouvel onglet de navigateur et répétez les mêmes vérifications. L’application doit fonctionner en dehors de l’éditeur de projet avant que vous la partagiez.Si l’application publiée se comporte différemment de Preview, consultez les journaux de publication et les paramètres de production dont l’application a besoin. Pour les problèmes courants de publication, consultez Résoudre les problèmes de publication.
L'application Runwell publiée ouverte dans un nouvel onglet de navigateur, avec le logo Runwell, le héros coureur avec 'Prêt à courir', la carte Volume hebdomadaire et le bouton Enregistrer une course

​
🎉 Félicitations — vous avez publié votre première application

Vous êtes passé d’un seul prompt à une URL en ligne et partageable. En chemin, vous avez :
  • Décrit Runwell à Agent et obtenu une première version fonctionnelle.
  • Testé dans Preview pour confirmer que les courses s’enregistrent et que les totaux hebdomadaires se mettent à jour.
  • Publié l’application et ouvert son URL publique.
C’est la boucle que suit chaque projet Replit — prompt, test, amélioration, publication.

​
Étapes suivantes

Design avec Canvas

Explorez des variations visuelles de Runwell et appliquez un nouveau design sans tout reconstruire.

Construire en parallèle

Exécutez plusieurs tâches Agent à la fois pour que différentes parties de l’application avancent ensemble.

Vibe coding 101

Apprenez à guider Agent de l’idée à l’application fonctionnelle.

Ajouter une base de données

Sauvegardez l’historique des courses après actualisation.