> ## 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.
# Créez et publiez votre première application
> Créez un suivi de course premium avec Agent, testez-le dans Preview et publiez-le à une URL que vous pouvez partager.
export const PromptActions = ({prompt = "", campaign = "docs-prompt-actions"}) => {
const LZ_SRC = "https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js";
const ensureLZString = () => {
if (typeof document === "undefined") return;
if (window.LZString) return;
if (document.querySelector(`script[src="${LZ_SRC}"]`)) return;
const s = document.createElement("script");
s.src = LZ_SRC;
s.async = true;
document.head.appendChild(s);
};
const handleCopy = async e => {
const btn = e.currentTarget;
if (!prompt) return;
try {
await navigator.clipboard.writeText(prompt);
} catch {
const ta = document.createElement("textarea");
ta.value = prompt;
document.body.appendChild(ta);
ta.select();
try {
document.execCommand("copy");
} catch {}
document.body.removeChild(ta);
}
const original = btn.dataset.label || btn.innerText;
btn.dataset.label = original;
btn.innerText = "Copied!";
setTimeout(() => {
if (btn.isConnected) btn.innerText = original;
}, 1500);
};
const handleBuild = () => {
if (!prompt || typeof window === "undefined") return;
const utm = `utm_source=replit-docs&utm_medium=docs&utm_campaign=${encodeURIComponent(campaign)}&utm_content=prompt-actions`;
let url;
if (window.LZString) {
const encoded = window.LZString.compressToEncodedURIComponent(prompt);
url = `https://replit.com/?prompt=${encoded}&referrer=replit-docs&${utm}`;
} else {
url = `https://replit.com/?prompt=${encodeURIComponent(prompt)}&referrer=replit-docs&${utm}`;
}
window.open(url, "_blank", "noopener,noreferrer");
};
ensureLZString();
const baseButtonStyle = {
display: "inline-flex",
alignItems: "center",
gap: "6px",
padding: "8px 16px",
borderRadius: "8px",
fontSize: "14px",
fontWeight: 500,
cursor: "pointer",
lineHeight: 1.2,
fontFamily: "inherit",
textDecoration: "none"
};
return
;
};
export const RUNWELL_PROMPT = `Build a premium running tracker app called Runwell.
## Context
Runwell is a running tracker for runners who want to log runs, track progress, monitor shoe mileage, and stay motivated.
The first version should feel polished and useful, but stay focused. Use realistic sample data. Do not require login or a database yet.
## Visual direction
The app should feel premium, athletic, motivating, modern, dark and high-contrast, and designed for runners. Use black or near-black backgrounds, neon lime accents, rounded cards, subtle gradients and shadows, clean typography, compact metric cards, map-style route previews, and shoe cards with mileage progress.
## Scope
Build three screens: Home, Add Run, and Progress. Do not build Activity or Profile yet.
The Home screen should show a greeting, today's running recommendation, this week's total distance, weekly goal progress, recent runs, and shoe mileage cards. The Add Run screen should let a runner add a run with type (outdoor or treadmill), distance, duration, average pace, average heart rate, shoe used, and notes; saving should update recent runs, weekly totals, and shoe mileage. The Progress screen should show weekly distance, run count, total time, average pace, a weekly distance chart, a pace trend chart, and an encouraging insight.
## Data and navigation
Use realistic sample data. Keep data in the current session only. On mobile, use bottom navigation for Home, Add Run, and Progress; on desktop, use a dashboard-style layout. Make the Add Run action prominent on both.`;
⏰ *Durée estimée : 10 minutes*
À la fin de ce guide, vous aurez une petite application publiée à une URL que vous pourrez partager.
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](https://replit.com).
L'objectif est de terminer une boucle complète :
* Créer avec [Agent](/fr/references/agent/overview),
* 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
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.
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](/fr/references/agent/plan-mode).
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.
Quand Agent a terminé, ouvrez [Preview](/fr/core-concepts/project-editor/editor-and-tools/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.
Vous souhaitez explorer des variations visuelles avant de publier ? Consultez [Design avec Canvas](/fr/build/design-with-canvas) pour générer des looks alternatifs côte à côte et appliquer celui que vous préférez.
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.
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](/build/troubleshooting).
## 🎉 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
Explorez des variations visuelles de Runwell et appliquez un nouveau design sans tout reconstruire.
Exécutez plusieurs tâches Agent à la fois pour que différentes parties de l'application avancent ensemble.
Apprenez à guider Agent de l'idée à l'application fonctionnelle.
Sauvegardez l'historique des courses après actualisation.
