> ## 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.

# Démarrer votre première application mobile

> Créez PixelGames, une application de jeux au style rétro, en application native iOS et Android avec Agent.

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 <div style={{
    display: "flex",
    gap: "12px",
    margin: "16px 0",
    flexWrap: "wrap",
    alignItems: "center"
  }}>
      <button type="button" onClick={handleCopy} style={{
    ...baseButtonStyle,
    background: "transparent",
    color: "inherit",
    border: "1px solid rgba(127,127,127,0.4)"
  }}>
        Copy the prompt
      </button>
      <button type="button" onClick={handleBuild} style={{
    ...baseButtonStyle,
    background: "#F26207",
    color: "#FFFFFF",
    border: "1px solid #F26207"
  }}>
        Build on Replit ↗
      </button>
    </div>;
};

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

export const pixelGamesPrompt = "Create a mobile app called PixelGames: a retro handheld console UI styled like a classic Game Boy, cream plastic shell, grey screen bezel, olive-green LCD screen with grid lines. Add a D-pad and two round A/B buttons, plus MENU and START buttons below the screen. Show a menu with four games: Blocks, Snake, Racer, and Pinball.";

Créer une application mobile sur Replit fonctionne comme créer une application web : vous décrivez ce
que vous voulez, et Agent écrit le code. Ce guide illustre ce processus avec un seul exemple,
pour que vous voyiez le schéma avant de l'appliquer à votre propre idée.

<Frame caption="Résultat final : le menu de PixelGames et le jeu Blocks sur un téléphone.">
  <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/pixelgames-home-screen.webp?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=dfae6a8f1698297aeda472c149fe9610" alt="Menu de PixelGames listant Blocks, Snake, Racer et Pinball, avec Blocks sélectionné" width="420" height="420" data-path="images/pixelgames/mobile/pixelgames-home-screen.webp" />
</Frame>

<PromptActions prompt={pixelGamesPrompt} campaign="docs-mobile-first-app" />

## Avant de commencer

Il vous suffit d'un [compte Replit](https://replit.com/), gratuit à créer.

L'objectif est de réaliser une boucle complète :

* Le créer avec [Agent](/fr/features/agent/overview)
* Le tester comme une application mobile
* Le publier, puis le partager

Agent est le créateur d'applications IA de Replit. Vous décrivez ce que vous voulez, et il crée l'application, explique
ce qu'il a fait et corrige ce qui ne fonctionne pas.

## 1. Demandez à Agent de créer l'application

Ouvrez Replit et démarrez une nouvelle application. Décrivez ce que vous voulez créer, puis sélectionnez **Mobile app**
comme type d'application.

<AiPrompt>
  {pixelGamesPrompt}
</AiPrompt>

<Frame caption="Agent met en place le projet mobile et l'interface de la console.">
  <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/pixelgames-scaffolding.png?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=f65c88aa83300af9e0aca0528175646a" alt="Le prompt de création de PixelGames saisi sur la page d'accueil de Replit, avec le mode Mobile sélectionné" data-path="images/pixelgames/mobile/pixelgames-scaffolding.png" width="877" height="411" data-path="images/pixelgames/mobile/pixelgames-scaffolding.png" />
</Frame>

## 2. Vérifiez que tout fonctionne dans l'aperçu

Replit simule PixelGames sur iOS ou Android directement dans le volet d'aperçu. C'est le moyen
le plus rapide de vérifier une modification.

<Steps>
  <Step title="Le simulateur démarre automatiquement">
    Replit lance la simulation dès que PixelGames est prêt, sans aucune configuration.
  </Step>

  <Step title="Changez de plateforme avec le menu déroulant">
    Utilisez le menu déroulant **Simulate on...** dans la barre d'outils du volet d'aperçu (à côté des icônes de clé et
    d'actualisation) pour basculer entre **iOS**, **Android** et **Web**.
  </Step>
</Steps>

<Frame caption="Le menu déroulant Simulate on... dans le volet d'aperçu de Replit.">
  <img src="https://mintcdn.com/replit/wpDFPJulnZRpqmW6/images/pixelgames/mobile/replit-simulate-dropdown.png?fit=max&auto=format&n=wpDFPJulnZRpqmW6&q=85&s=261e1358d3acd58025b1f4f00d779a5b" alt="Volet d'aperçu de Replit avec le menu déroulant Simulate on Web, iOS ou Android ouvert" data-path="images/pixelgames/mobile/replit-simulate-dropdown.png" width="1920" height="992" data-path="images/pixelgames/mobile/replit-simulate-dropdown.png" />
</Frame>

### Vérifiez que cela fonctionne vraiment

Utilisez PixelGames comme le ferait un joueur :

* Voyez l'écran **MENU** avec **Blocks** sélectionnable et les trois autres jeux marqués « SOON ».
* Ouvrez Blocks et jouez quelques pièces avec la croix directionnelle et les boutons A/B.
* Vérifiez que le score, le niveau et les lignes se mettent à jour dans l'affichage pendant que vous jouez.

Si quelque chose semble anormal, décrivez ce que vous avez vu à Agent : inutile de chercher le bug
vous-même.

## PixelGames fonctionne

Vous êtes passé d'un simple prompt à un jeu jouable, prévisualisé directement dans Replit.

## Dépannage

<AccordionGroup>
  <Accordion title="Le volet d'aperçu reste vide">
    La première compilation prend une minute ou deux : laissez-lui un peu de temps avant de penser qu'elle est bloquée.
    Si le volet est toujours vide ensuite, vérifiez la console pour repérer une erreur et partagez-la avec Agent.
  </Accordion>

  <Accordion title="Les modifications n'apparaissent pas dans l'aperçu">
    Appuyez sur **R** dans la console pour recharger PixelGames, puis utilisez l'icône d'actualisation de la barre d'outils
    du volet d'aperçu si l'affichage semble toujours obsolète.
  </Accordion>

  <Accordion title="Écran d'erreur rouge dans l'aperçu">
    Cela signifie généralement une erreur JavaScript ou un paquet manquant. Lisez le message : il
    indique souvent le fichier et la ligne exacts. Partagez-le ensuite avec Agent et demandez une correction.
  </Accordion>

  <Accordion title="L'application fonctionne sur le web mais plante sur iOS ou Android (ou inversement)">
    Certains paquets se comportent différemment selon les plateformes : un paquet qui fonctionne sur le web peut ne pas
    prendre en charge le natif, ou nécessiter une configuration différente. Demandez à Agent « Does this package support native? »
    avant de vous y fier.
  </Accordion>

  <Accordion title="La compilation prend beaucoup de temps">
    La première compilation est toujours plus lente car rien n'est encore en cache ; les suivantes devraient être
    plus rapides. Si elle reste lente, demandez à Agent de rechercher les paquets inutiles dans le projet.
  </Accordion>

  <Accordion title="Erreurs Module not found">
    Cela signifie qu'un paquet n'est pas installé, ou qu'il est installé mais que le cache est obsolète. Demandez à Agent de
    l'installer ou de vider le cache, et vérifiez que le nom du paquet ne comporte pas de faute de frappe.
  </Accordion>
</AccordionGroup>

## Étapes suivantes

<CardGroup cols={2}>
  <Card title="Testez-la sur votre téléphone" icon="mobile" href="/fr/build/mobile-preview-testing">
    Découvrez PixelGames comme une vraie application de téléphone : boutons sous le pouce, retour haptique, taille
    d'écran réelle.
  </Card>

  <Card title="Ajouter la connexion" icon="right-to-bracket" href="/fr/build/mobile-login">
    Permettez aux joueurs de se connecter et de sauvegarder leur progression.
  </Card>

  <Card title="Stocker des images dans votre application mobile" icon="image" href="/fr/build/mobile-store-images">
    Enregistrez les photos de profil dans App Storage.
  </Card>

  <Card title="Envoyer des notifications push" icon="bell" href="/fr/build/mobile-push-notifications">
    Prévenez les joueurs lorsqu'un nouveau jeu sort.
  </Card>

  <Card title="Ajouter des paiements" icon="credit-card" href="/fr/build/mobile-payments">
    Faites payer les joueurs pour du contenu dans PixelGames.
  </Card>
</CardGroup>