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

# Applications mobiles natives

> Apprenez à créer une application mobile native avec Agent, à la tester sur votre téléphone et à la publier sur l'App Store.

export const MobileArchitectureDiagram = () => {
  if (typeof document !== 'undefined' && !document.getElementById('mobile-arch-styles-v3')) {
    const style = document.createElement('style');
    style.id = 'mobile-arch-styles-v3';
    style.textContent = `
      .mobile-arch-v3 {
        --arch-bg: var(--replit-docs-bg, #F6F6F4);
        --arch-surface: var(--replit-docs-bg-elevated, #F1F1EE);
        --arch-border: var(--replit-docs-border, #DEDAD5);
        --arch-text: var(--replit-docs-text, #1D1D1D);
        --arch-muted: var(--replit-docs-text-subtle, #858585);
        --arch-accent: #F26522;
        --arch-accent-soft: #FEF3EE;
      }
      
      .dark .mobile-arch-v3,
      html.dark .mobile-arch-v3,
      [data-theme="dark"] .mobile-arch-v3 {
        --arch-bg: var(--replit-docs-bg, #1E1E1F);
        --arch-surface: var(--replit-docs-bg-elevated, #222223);
        --arch-border: var(--replit-docs-border, #39393D);
        --arch-text: var(--replit-docs-text, #F5F5F5);
        --arch-muted: var(--replit-docs-text-subtle, #8E8F97);
        --arch-accent: #F26522;
        --arch-accent-soft: #1F1A17;
      }

      .arch-panel {
        transition: all 0.25s ease;
      }
      .arch-panel:hover {
        border-color: var(--arch-accent) !important;
      }
    `;
    document.head.appendChild(style);
  }
  const serverItems = [{
    label: 'Database',
    detail: 'PostgreSQL for structured data'
  }, {
    label: 'Object Storage',
    detail: 'Files, images, and media'
  }, {
    label: 'Secrets',
    detail: 'API keys stored securely'
  }, {
    label: 'API routes',
    detail: 'Server-side logic and endpoints'
  }];
  const clientItems = [{
    label: 'Native UI',
    detail: 'Real iOS and Android components'
  }, {
    label: 'Local state',
    detail: 'Fast, offline-capable data'
  }, {
    label: 'Device APIs',
    detail: 'Camera, location, notifications'
  }, {
    label: 'Live reload',
    detail: 'Instant preview via Expo Go'
  }];
  return <div className="mobile-arch-v3" style={{
    padding: '24px',
    borderRadius: '8px',
    border: '1px solid var(--arch-border)',
    background: 'var(--arch-bg)'
  }}>
      {}
      <div style={{
    marginBottom: '20px'
  }}>
        <div style={{
    fontSize: '18px',
    fontWeight: '600',
    color: 'var(--arch-text)'
  }}>
          Architecture
        </div>
        <div style={{
    fontSize: '14px',
    color: 'var(--arch-muted)',
    marginTop: '4px'
  }}>
          Your server runs on Replit. The app runs natively on devices.
        </div>
      </div>

      {}
      <div style={{
    display: 'flex',
    alignItems: 'stretch',
    gap: '16px'
  }}>
        
        {}
        <div className="arch-panel" style={{
    flex: 1,
    padding: '20px',
    borderRadius: '8px',
    border: '1px solid var(--arch-border)',
    background: 'var(--arch-surface)'
  }}>
          <div style={{
    fontSize: '13px',
    color: 'var(--arch-accent)',
    fontWeight: '600',
    marginBottom: '6px'
  }}>
            Replit Cloud
          </div>
          <div style={{
    fontSize: '16px',
    fontWeight: '600',
    color: 'var(--arch-text)',
    marginBottom: '16px'
  }}>
            Server
          </div>
          
          <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '12px'
  }}>
            {serverItems.map(item => <div key={item.label}>
                <div style={{
    fontSize: '14px',
    fontWeight: '500',
    color: 'var(--arch-text)'
  }}>
                  {item.label}
                </div>
                <div style={{
    fontSize: '13px',
    color: 'var(--arch-muted)',
    marginTop: '2px'
  }}>
                  {item.detail}
                </div>
              </div>)}
          </div>
        </div>

        {}
        <div className="arch-panel" style={{
    flex: 1,
    padding: '20px',
    borderRadius: '8px',
    border: '1px solid var(--arch-border)',
    background: 'var(--arch-surface)'
  }}>
          <div style={{
    fontSize: '13px',
    color: 'var(--arch-accent)',
    fontWeight: '600',
    marginBottom: '6px'
  }}>
            User device
          </div>
          <div style={{
    fontSize: '16px',
    fontWeight: '600',
    color: 'var(--arch-text)',
    marginBottom: '16px'
  }}>
            Native app
          </div>
          
          <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '12px'
  }}>
            {clientItems.map(item => <div key={item.label}>
                <div style={{
    fontSize: '14px',
    fontWeight: '500',
    color: 'var(--arch-text)'
  }}>
                  {item.label}
                </div>
                <div style={{
    fontSize: '13px',
    color: 'var(--arch-muted)',
    marginTop: '2px'
  }}>
                  {item.detail}
                </div>
              </div>)}
          </div>
        </div>
      </div>
    </div>;
};

export const MobileStackDiagram = () => {
  if (typeof document !== 'undefined' && !document.getElementById('mobile-stack-styles-v3')) {
    const style = document.createElement('style');
    style.id = 'mobile-stack-styles-v3';
    style.textContent = `
      .mobile-stack-v3 {
        --stack-bg: var(--replit-docs-bg, #F6F6F4);
        --stack-surface: var(--replit-docs-bg-elevated, #F1F1EE);
        --stack-border: var(--replit-docs-border, #DEDAD5);
        --stack-text: var(--replit-docs-text, #1D1D1D);
        --stack-muted: var(--replit-docs-text-subtle, #858585);
        --stack-accent: #F26522;
        --stack-accent-soft: #FEF3EE;
      }
      
      .dark .mobile-stack-v3,
      html.dark .mobile-stack-v3,
      [data-theme="dark"] .mobile-stack-v3 {
        --stack-bg: var(--replit-docs-bg, #1E1E1F);
        --stack-surface: var(--replit-docs-bg-elevated, #222223);
        --stack-border: var(--replit-docs-border, #39393D);
        --stack-text: var(--replit-docs-text, #F5F5F5);
        --stack-muted: var(--replit-docs-text-subtle, #8E8F97);
        --stack-accent: #F26522;
        --stack-accent-soft: #1F1A17;
      }

      .stack-layer {
        transition: all 0.25s ease;
        cursor: pointer;
      }
      .stack-layer:hover,
      .stack-layer.active {
        background: var(--stack-accent-soft) !important;
        border-color: var(--stack-accent) !important;
      }
      .stack-layer .layer-detail {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease;
        margin-top: 0;
      }
      .stack-layer.active .layer-detail {
        max-height: 80px;
        opacity: 1;
        margin-top: 8px;
      }
      
      .platform-item {
        transition: all 0.2s ease;
      }
      .platform-item:hover {
        border-color: var(--stack-accent) !important;
        background: var(--stack-accent-soft) !important;
      }
    `;
    document.head.appendChild(style);
  }
  const handleLayerClick = e => {
    const layer = e.currentTarget;
    const allLayers = document.querySelectorAll('.stack-layer');
    const wasActive = layer.classList.contains('active');
    allLayers.forEach(l => l.classList.remove('active'));
    if (!wasActive) {
      layer.classList.add('active');
    }
  };
  const runAnimation = () => {
    const btn = document.getElementById('stack-animate-btn');
    if (!btn || btn.dataset.running === 'true') return;
    btn.dataset.running = 'true';
    btn.textContent = 'Running...';
    btn.style.opacity = '0.6';
    const layers = document.querySelectorAll('.stack-layer');
    const platforms = document.getElementById('stack-platforms-container');
    let step = 0;
    const totalSteps = layers.length + 1;
    const animate = () => {
      layers.forEach(l => l.classList.remove('active'));
      if (platforms) platforms.style.borderColor = 'var(--stack-border)';
      if (step < layers.length) {
        layers[step].classList.add('active');
        step++;
        setTimeout(animate, 4000);
      } else if (step === layers.length) {
        if (platforms) platforms.style.borderColor = 'var(--stack-accent)';
        step++;
        setTimeout(animate, 4000);
      } else {
        layers.forEach(l => l.classList.remove('active'));
        if (platforms) platforms.style.borderColor = 'var(--stack-border)';
        btn.dataset.running = 'false';
        btn.textContent = 'See the flow';
        btn.style.opacity = '1';
      }
    };
    animate();
  };
  const layers = [{
    title: 'Replit Agent',
    summary: 'Builds your app from a prompt',
    detail: 'Describe what you want in natural language. Agent writes TypeScript code, configures dependencies, and sets up your project.',
    verb: 'writes'
  }, {
    title: 'Your code',
    summary: 'TypeScript + React components',
    detail: 'Your app is standard React code that you own and can customize. No vendor lock-in.',
    verb: 'using'
  }, {
    title: 'Expo',
    summary: 'Development framework',
    detail: 'Expo simplifies React Native development with managed builds, over-the-air updates, and easy access to device APIs.',
    verb: 'simplifies'
  }, {
    title: 'React Native',
    summary: 'Cross-platform UI',
    detail: 'React Native compiles your JavaScript to real native code, not a web view. True native performance.',
    verb: 'compiles to'
  }];
  const platforms = ['iOS', 'Android', 'Web'];
  return <div className="mobile-stack-v3" style={{
    padding: '24px',
    borderRadius: '8px',
    border: '1px solid var(--stack-border)',
    background: 'var(--stack-bg)'
  }}>
      {}
      <div style={{
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: '20px'
  }}>
        <div>
          <div style={{
    fontSize: '18px',
    fontWeight: '600',
    color: 'var(--stack-text)'
  }}>
            Technology stack
          </div>
          <div style={{
    fontSize: '14px',
    color: 'var(--stack-muted)',
    marginTop: '4px'
  }}>
            Tap any layer to learn more
          </div>
        </div>
        <button id="stack-animate-btn" onClick={runAnimation} data-running="false" style={{
    padding: '8px 14px',
    fontSize: '13px',
    color: 'var(--stack-accent)',
    background: 'transparent',
    border: '1px solid var(--stack-accent)',
    borderRadius: '4px',
    cursor: 'pointer'
  }}>
          See the flow
        </button>
      </div>

      {}
      <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '8px'
  }}>
        {layers.map(layer => <div key={layer.title}>
            <div className="stack-layer" onClick={handleLayerClick} style={{
    padding: '16px',
    borderRadius: '8px',
    border: '1px solid var(--stack-border)',
    background: 'var(--stack-surface)'
  }}>
              <div style={{
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center'
  }}>
                <div>
                  <div style={{
    fontSize: '16px',
    fontWeight: '500',
    color: 'var(--stack-text)'
  }}>
                    {layer.title}
                  </div>
                  <div style={{
    fontSize: '14px',
    color: 'var(--stack-muted)',
    marginTop: '4px'
  }}>
                    {layer.summary}
                  </div>
                </div>
                <div style={{
    fontSize: '14px',
    color: 'var(--stack-accent)',
    fontWeight: '500'
  }}>
                  {layer.verb}
                </div>
              </div>
              <div className="layer-detail" style={{
    fontSize: '14px',
    color: 'var(--stack-muted)',
    lineHeight: '1.5'
  }}>
                {layer.detail}
              </div>
            </div>
          </div>)}
      </div>

      {}
      <div id="stack-platforms-container" style={{
    display: 'flex',
    gap: '12px',
    padding: '12px',
    marginTop: '8px',
    borderRadius: '8px',
    border: '1px solid var(--stack-border)',
    background: 'var(--stack-surface)',
    transition: 'border-color 0.25s ease'
  }}>
        {platforms.map(platform => <div key={platform} className="platform-item" style={{
    flex: 1,
    padding: '12px',
    borderRadius: '6px',
    border: '1px solid var(--stack-border)',
    background: 'var(--stack-bg)',
    textAlign: 'center',
    fontSize: '15px',
    fontWeight: '500',
    color: 'var(--stack-text)'
  }}>
            {platform}
          </div>)}
      </div>
    </div>;
};

<Frame>
  <img src="https://mintcdn.com/replit/TlSUj3SmUsRG399T/images/native-mobile-apps/mobile-screen.png?fit=max&auto=format&n=TlSUj3SmUsRG399T&q=85&s=d512e8c7bf0a86ecacd92fbef1f52749" alt="Application mobile s'exécutant dans l'aperçu de l'Éditeur de projet Replit avec le panneau Aperçu sur l'appareil et un code QR" width="1440" height="900" data-path="images/native-mobile-apps/mobile-screen.png" />
</Frame>

Créez des applications iOS et Android avec Agent, prévisualisez-les sur votre téléphone et publiez-les via un flux guidé.

## Premiers pas

Vous pouvez obtenir une application mobile fonctionnelle en quelques étapes :

<Steps>
  <Step title="Créer une application mobile">
    Sur l'écran d'accueil de Replit, décrivez votre idée d'application et sélectionnez **Application mobile** comme type d'application.

    <Frame>
      <img src="https://mintcdn.com/replit/TlSUj3SmUsRG399T/images/native-mobile-apps/prompt.png?fit=max&auto=format&n=TlSUj3SmUsRG399T&q=85&s=21bba53b72382bf6fb0dc37a168de9e8" alt="Invite de l'écran d'accueil Replit avec Application mobile sélectionnée comme type d'application" width="1440" height="900" data-path="images/native-mobile-apps/prompt.png" />
    </Frame>
  </Step>

  <Step title="Tester votre application">
    Vous avez deux façons de prévisualiser une application mobile pendant que vous créez :

    * **Dans l'Éditeur de projet** : Dans le sélecteur d'appareil du panneau Aperçu, choisissez **Simulateur iOS** ou **Émulateur Android**. Un vrai simulateur est diffusé dans l'Éditeur de projet pour que vous puissiez interagir sans quitter Replit. Xcode ou Android Studio ne sont pas requis.
    * **Sur un vrai téléphone avec Expo Go** : Installez [Expo Go](https://expo.dev/go) sur votre iPhone ou appareil Android. Sur ordinateur, sélectionnez **Ouvrir dans Expo Go** dans le panneau Aperçu et scannez le code QR. Dans l'application mobile Replit, appuyez sur **Ouvrir dans Expo Go** en haut de l'aperçu.

    <Frame>
      <img src="https://mintcdn.com/replit/TlSUj3SmUsRG399T/images/native-mobile-apps/workspace.png?fit=max&auto=format&n=TlSUj3SmUsRG399T&q=85&s=6508e73ef3c21dcee8221e884164a23c" alt="Éditeur de projet Replit montrant l'aperçu de l'application et l'option Aperçu sur appareil mobile" width="1440" height="900" data-path="images/native-mobile-apps/workspace.png" />
    </Frame>
  </Step>

  <Step title="Itérer avec Agent">
    Demandez à Agent d'ajouter des fonctionnalités, de connecter des sources de données ou d'intégrer des services. Continuez à tester dans le simulateur ou sur votre téléphone au fur et à mesure que vous itérez.
  </Step>
</Steps>

<Tip>
  Le **Simulateur iOS** et l'**Émulateur Android** de l'Éditeur de projet affichent la version native de votre application, y compris le style propre à chaque plateforme et la plupart des composants natifs. Pour les fonctionnalités qui reposent sur un vrai matériel — vibrations haptiques, caméra, notifications push ou localisation — testez sur un vrai téléphone avec Expo Go.
</Tip>

## Aperçu sur un simulateur ou un émulateur

Replit vous permet d'exécuter et de tester vos applications mobiles sur votre téléphone via Expo. Alternativement, Replit diffuse un vrai **Simulateur iOS** ou **Émulateur Android** directement dans le panneau Aperçu. Les modifications que vous apportez avec Agent se rechargent à chaud dans le simulateur, comme sur un vrai appareil.

<Note>
  Les aperçus du Simulateur iOS et de l'Émulateur Android sont disponibles pour les créateurs avec les forfaits Core, Pro et Enterprise. Applications mobiles uniquement — l'option est masquée pour les projets web uniquement.
</Note>

### Comment ouvrir un simulateur

<Steps>
  <Step title="Ouvrir votre projet mobile">
    Ouvrez un projet comportant un artefact mobile.
  </Step>

  <Step title="Choisir votre appareil">
    Dans le sélecteur d'appareil du panneau Aperçu en haut, choisissez **Simulateur iOS** ou **Émulateur Android**. Le simulateur démarre à la place de l'aperçu web.
  </Step>

  <Step title="Interagir comme sur un vrai appareil">
    Appuyez, faites glisser, tapez et naviguez avec votre souris et votre clavier. Sélectionnez **Redémarrer** dans la barre d'outils pour recharger l'application sans redémarrer le simulateur.
  </Step>
</Steps>

<Tip>
  Le simulateur s'exécute dans le cloud et est diffusé dans votre navigateur, donc rien à télécharger et rien à configurer. Les fichiers de votre projet restent sur Replit.
</Tip>

<Frame>
  <video autoPlay muted loop playsInline src="https://cdn.replit.com/sanity/ios-emulator.mp4" />
</Frame>

### Prise en charge des navigateurs

* **Chrome**, **Safari** et les navigateurs basés sur Chromium sont entièrement pris en charge.
* **Firefox** n'est pas pris en charge. Les options iOS et Android apparaissent désactivées avec une note « Firefox non pris en charge » lorsque vous ouvrez Replit dans Firefox. Il s'agit d'une limitation de la technologie de diffusion qui alimente le simulateur.

### Quand utiliser Expo Go à la place

Utilisez Expo Go sur un vrai téléphone lorsque vous devez tester des fonctionnalités qui reposent sur un vrai matériel ou lorsque vous souhaitez partager un aperçu avec quelqu'un qui n'est pas à votre ordinateur :

* Caméra, microphone, vibrations haptiques ou autres capteurs natifs
* Notifications push
* Localisation GPS réelle
* Partage d'un aperçu en direct avec un coéquipier, un testeur ou un investisseur

Pour ouvrir votre application dans Expo Go, sélectionnez **Ouvrir dans Expo Go** dans le sélecteur d'appareil du panneau Aperçu et scannez le code QR avec l'application [Expo Go](https://expo.dev/go) sur votre téléphone.

### Simulateur en plein écran

Depuis une carte d'artefact mobile, sélectionnez **Plus d'actions** → **Ouvrir dans le Simulateur iOS** ou **Ouvrir dans l'Émulateur Android** pour ouvrir le simulateur dans son propre onglet pour un viewport plus grand.

## Pourquoi créer une application mobile ?

Créez une application mobile lorsque vous souhaitez :

* **Une expérience native** : Performances rapides, interactions fluides et interface utilisateur native à la plateforme.
* **Capacités de l'appareil** : Caméra, notifications push, localisation et bien plus encore.
* **Distribution via l'App Store** : Une liste partageable que les gens peuvent découvrir et installer.

## Fonctionnalités clés

* **Création axée sur l'IA** : Décrivez votre application, et Agent crée une application mobile fonctionnelle.
* **Aperçu dans l'Éditeur de projet** : Testez sur un Simulateur iOS ou un Émulateur Android sans quitter Replit, ou prévisualisez sur votre téléphone avec Expo Go.
* **Full-stack par défaut** : Ajoutez des routes serveur, une base de données, App Storage, des connecteurs et des intégrations IA au fur et à mesure que votre application grandit.
* **Publication guidée** : Publiez sur l'App Store et soumettez des builds sans gérer les chaînes d'outils iOS locales.

## Flux de développement

Il y a trois étapes pour accéder à votre application, chacune avec des audiences et des capacités différentes :

| Étape             | Qui peut y accéder          | Comment y accéder                                          | Idéal pour                    |
| ----------------- | --------------------------- | ---------------------------------------------------------- | ----------------------------- |
| **Développement** | Vous                        | Simulateur de l'Éditeur de projet, ou code QR pour Expo Go | Création et itération         |
| **Déploiement**   | Toute personne avec Expo Go | URL publique avec code QR                                  | Prototypage et démonstrations |
| **App Store**     | Tout le monde               | Téléchargement depuis l'App Store                          | Version de production         |

**Développement** : Lorsque vous démarrez votre application, vous pouvez la prévisualiser dans le **Simulateur iOS** ou l'**Émulateur Android** de l'Éditeur de projet, ou scanner un code QR depuis le panneau Aperçu pour l'ouvrir dans Expo Go sur votre téléphone.

**Déploiement** : Lorsque vous cliquez sur **Publier**, Replit crée une URL publique avec un code QR. Toute personne disposant d'Expo Go peut le scanner et exécuter votre application. C'est idéal pour le prototypage — montrez à des investisseurs, recueillez des commentaires ou testez avec des amis avant de vous engager sur l'App Store.

**App Store** : Lorsque vous soumettez à l'App Store, les utilisateurs peuvent télécharger et installer votre application de façon permanente. Cela nécessite un compte Apple Developer et passe par le processus de révision d'Apple.

## Aperçu de la publication

Lorsque vous publiez pour iOS, le flux se déroule généralement ainsi :

* Publier depuis l'Éditeur de projet
* Soumettre un build sur TestFlight
* Promouvoir un build TestFlight vers l'App Store dans App Store Connect

<Note>
  Pour publier sur TestFlight et soumettre à l'App Store, Apple exige une adhésion au Programme pour développeurs Apple.
</Note>

Pour une présentation complète, consultez le tutoriel [Créer et lancer une application mobile](/fr/tutorials/build-and-launch-a-mobile-app).

## Créer en déplacement

Votre environnement Replit s'exécute dans le cloud, pas sur votre machine locale. Cela signifie que vous pouvez créer des applications mobiles de n'importe où — y compris depuis l'[application mobile Replit](/platforms/mobile-app). Ouvrez votre projet, sollicitez Agent et appuyez sur **Ouvrir dans Expo Go** pour prévisualiser vos modifications sur votre téléphone.

## Comment la technologie fonctionne

Votre application mobile est construite avec une pile de technologies qui fonctionnent ensemble. Cette section explique ce qui alimente votre application et comment les éléments s'articulent.

### La pile technologique

<MobileStackDiagram />

* **React Native** est un framework open source qui vous permet d'écrire une seule base de code et de la compiler pour iOS, Android et le web. Il affiche des composants d'interface utilisateur natifs à la plateforme, pas une webview.
* **Expo** simplifie le développement React Native en gérant les builds, en gérant les modules natifs et en fournissant des outils comme Expo Go pour les aperçus.
* **Expo Go** est une application gratuite que vous installez sur votre téléphone. Elle exécute votre aperçu de développement pour que vous puissiez tester sur un vrai appareil sans construire un binaire natif complet.

Lorsque vous exécutez votre application, le bundler Metro compile votre code et le pousse vers votre appareil. Le premier build prend plus de temps car il n'y a pas de cache. Les builds suivants sont plus rapides.

### Architecture : serveur et client

Lorsque vous publiez une application mobile, vous déployez deux éléments :

1. **Un serveur** qui s'exécute sur Replit dans le cloud. Il gère votre base de données, les routes API, les intégrations IA et la logique back-end.
2. **Une application client** qui s'exécute sur le téléphone de l'utilisateur. Il s'agit de l'application native distribuée via l'App Store ou Expo Go.

<MobileArchitectureDiagram />

Cette séparation vous offre de la flexibilité. Vous pouvez exécuter une logique complexe sur le serveur (où vous avez accès à la base de données, au stockage d'objets et aux connecteurs de Replit) et garder le client léger. En créant, réfléchissez à ce qui doit se passer sur le téléphone par rapport à ce qui doit se passer dans le cloud.

## Considérations

* **Exigences de publication** : Apple définit les exigences pour TestFlight et l'App Store.
* **Publication Android** : Vous pouvez créer des applications multiplateformes pour iOS et Android. La publication sur Google Play n'est pas encore prise en charge via une expérience guidée, mais peut être effectuée manuellement.
* **Modifications natives** : Les modifications telles que les icônes d'application ou les autorisations nécessitent généralement un nouveau build de store.

## Dépannage

Si vous rencontrez des problèmes lors du développement de votre application mobile, consultez [Dépannage des applications mobiles](/tutorials/mobile-app-troubleshooting) pour les problèmes courants et leurs solutions.

## Prochaines étapes

* Découvrez comment Agent fonctionne : [Agent](/fr/core-concepts/agent)
* Explorer les intégrations : [Intégrations](/replitai/integrations)
* Créer en déplacement : [Application mobile Replit](/platforms/mobile-app)
* En savoir plus sur Expo : [Expo](https://expo.dev/)
* Gérer TestFlight et les soumissions : [App Store Connect](https://appstoreconnect.apple.com/)

## FAQ

<AccordionGroup>
  <Accordion title="Qu'est-ce qu'Expo ?">
    Expo est ce qu'Agent utilise pour créer votre application mobile sur Replit. C'est une plateforme et une chaîne d'outils open source pour créer, exécuter et déployer des applications natives multiplateformes avec React Native. En savoir plus sur [https://expo.dev](https://expo.dev).
  </Accordion>

  <Accordion title="Qu'est-ce que React Native ?">
    React Native est un framework open source de Meta pour créer des applications iOS et Android natives en utilisant React et JavaScript ou TypeScript. Il affiche des composants d'interface utilisateur natifs à la plateforme (pas une webview), de sorte que votre application a l'aspect et la convivialité d'une application native.
  </Accordion>

  <Accordion title="Qu'est-ce qu'Expo Go ?">
    Expo Go est une application gratuite que vous installez sur votre téléphone depuis l'App Store ou Google Play. Elle vous permet de prévisualiser votre application mobile pendant le développement sans créer un binaire natif complet. Lorsque vous scannez le code QR dans l'Éditeur de projet, Expo Go télécharge et exécute le code de votre application.
  </Accordion>

  <Accordion title="Quelle est la différence entre Expo Go et un build de développement ?">
    **Expo Go** est une application pré-construite qui exécute votre code. Elle est rapide à configurer mais ne prend en charge que les modules inclus dans le SDK Expo.

    **Les builds de développement** sont des binaires natifs personnalisés qui peuvent inclure n'importe quel module natif. Ils nécessitent plus de configuration (EAS Build ou Xcode/Android Studio local) mais offrent plus de flexibilité.

    Replit utilise Expo Go pour les aperçus de développement. Si vous avez besoin de modules natifs non pris en charge dans Expo Go, vous devrez peut-être explorer les builds de développement via la [documentation d'Expo](https://docs.expo.dev/develop/development-builds/introduction/).
  </Accordion>

  <Accordion title="En quoi est-ce différent d'une application web responsive pour mobile ?">
    Une application web responsive pour mobile est un site web qui adapte sa mise en page dans le navigateur. Une application React Native est une application native installée sur l'appareil qui utilise les API de la plateforme (caméra, vibrations haptiques, notifications push), offre un meilleur accès au matériel et aux capacités hors ligne, et est distribuée via des stores d'applications. Le web responsive peut être idéal pour la portée et l'installation zéro ; le natif est préférable lorsque vous avez besoin des fonctionnalités de l'appareil, des performances ou de la distribution via l'App Store.
  </Accordion>

  <Accordion title="Ai-je besoin d'un Mac ou de Xcode ?">
    Non. Replit et Expo gèrent le processus de build pour vous dans le cloud.
  </Accordion>

  <Accordion title="Puis-je prévisualiser sans compte Apple Developer ?">
    Oui. Vous pouvez prévisualiser dans le Simulateur iOS de l'Éditeur de projet ou avec Expo Go sur votre téléphone. Vous n'avez besoin d'un compte Apple Developer que lorsque vous êtes prêt à publier sur TestFlight ou l'App Store.
  </Accordion>

  <Accordion title="Android est-il pris en charge ?">
    Oui. Vous pouvez créer des applications multiplateformes pour iOS et Android depuis la même base de code. Prévisualisez sur un Émulateur Android dans l'Éditeur de projet ou sur un appareil Android avec Expo Go. La publication sur Google Play peut être effectuée manuellement.
  </Accordion>

  <Accordion title="Qu'en est-il des serveurs et des bases de données ?">
    Utilisez PostgreSQL intégré de Replit, le stockage d'objets, les connecteurs et les intégrations IA — aucune infrastructure séparée requise. Votre serveur s'exécute sur Replit et votre application mobile s'y connecte.
  </Accordion>

  <Accordion title="Dois-je tester dans le simulateur de l'Éditeur de projet ou sur un vrai téléphone ?">
    Utilisez les deux à différents moments. Le **Simulateur iOS** et l'**Émulateur Android** dans l'Éditeur de projet affichent la version native de votre application et couvrent la plupart des tests quotidiens — mise en page, navigation, composants natifs et style de plateforme. Passez à un vrai téléphone avec **Expo Go** lorsque vous devez tester des fonctionnalités qui dépendent du vrai matériel, comme la caméra, les vibrations haptiques, les notifications push ou la localisation GPS.
  </Accordion>
</AccordionGroup>