Visionneuse d'App

Qu'est-ce que la Visionneuse d'App ?

Lorsque les Agents IA terminent une tâche, la Visionneuse d'App apparaît en haut de la page. Elle vous permet de prévisualiser votre app en direct et d'effectuer des modifications visuelles directement — aucun codage requis.

Avant de commencer

• Le traitement par l'Agent peut prendre un moment — veuillez patienter.
• Vérifiez le panneau Terminal à droite pour voir la progression détaillée. Le panneau Terminal affiche les journaux en temps réel de ce que fait l'Agent IA, y compris la création de fichiers, la génération de code et les éventuelles erreurs rencontrées pendant le processus de build.
• Cliquez sur l'icône Actualiser à tout moment pour recharger la prévisualisation.

Comment utiliser la Visionneuse d'App

Étape 1 : Attendez que la prévisualisation se charge

Une fois que les Agents ont terminé, la Visionneuse d'App charge votre aperçu dans la fenêtre principale de prévisualisation.

⏱️ Cela prend généralement de quelques secondes à une minute.

Si cela prend plus de 2 minutes : cliquez sur l'icône Actualiser dans la barre d'outils de la Visionneuse d'App. Si le problème persiste, vérifiez le panneau Terminal pour voir les erreurs (voir l'étape 3 ci-dessous).

Étape 2 : Prévisualisez votre app

Une fois chargée, vous pouvez voir votre app en direct dans la fenêtre de prévisualisation.

• Desktop / Tablet / Mobile — Utilisez la barre d'outils des appareils en haut de la fenêtre de prévisualisation pour basculer entre les vues et tester l'adaptabilité. La barre d'outils affiche trois icônes représentant les appareils desktop, tablet et mobile. Cliquez sur chaque icône pour voir à quoi ressemble votre app sur différentes tailles d'écran sans quitter la page.
• Open in new tab— Cliquez sur l'icône en forme de flèche dans le coin supérieur droit de la fenêtre de prévisualisation pour ouvrir l'aperçu dans un onglet de navigateur séparé. Cela est particulièrement utile si la prévisualisation intégrée est bloquée ou ne répond pas.

Étape 3 : Vérifiez les erreurs (si quelque chose semble incorrect)

Si votre app ne se charge pas ou semble cassée, vérifiez le panneau Console pour les messages d'erreur.

Le panneau Console se trouve sur le côté droit de l'écran, sous l'onglet Terminal. Il affiche les journaux système et les messages d'erreur générés pendant le processus de build.

Si vous voyez des messages d'erreur en rouge, ils incluent généralement :

• Une description de ce qui s'est mal passé
• Le fichier et le numéro de ligne où l'erreur s'est produite
• Une trace de pile pour aider à identifier la cause racine

Pour corriger les erreurs : (Pour plus de détails, veuillez consulter : Signaler un problème)

• Cliquez sur "Resolve" — l'IA analysera et corrigera automatiquement tous les bugs identifiés.
• La prévisualisation se rechargera une fois les corrections appliquées. Vous pouvez suivre la progression en temps réel via le panneau Terminal.

Pas de bouton "Resolve" ?

Cliquez sur "..." (plus d'options) à côté du dernier message de l'Agent, puis sélectionnez "Feedback" pour signaler le problème à notre équipe de support. Veuillez inclure votre Chat Link et une capture d'écran de l'erreur.

Étape 4 : Modifiez votre app

Méthode 1 : Cliquez pour éditer (recommandé pour les modifications visuelles)

Cliquez directement sur n'importe quel élément dans la fenêtre de prévisualisation. Un éditeur visuel apparaîtra sur le côté gauche de l'écran, vous permettant d'ajuster :

• Couleurs — Modifiez la couleur du texte, la couleur d'arrière-plan ou la couleur de bordure avec un sélecteur de couleur
• Espacement — Ajustez le padding, la marge et l'espace entre les éléments
• Typographie — Modifiez la taille, le poids et la famille de police
• Mise en page — Modifiez l'alignement, les paramètres flexbox ou les propriétés de grille
• Contenu textuel — Éditez le texte directement dans l'éditeur

Une fois une modification effectuée, la prévisualisation se met à jour instantanément afin que vous puissiez voir le résultat en temps réel.

L'éditeur visuel comprend également un onglet Library où vous pouvez parcourir et ajouter des ressources préconçues telles que des icônes, des images et des composants UI à votre projet.

Méthode 2 : Décrivez dans le chat

Dites à l'Agent IA ce que vous voulez modifier en langage naturel. Par exemple :

• "Rendez la couleur d'arrière-plan plus sombre"
• "Réduisez le padding autour de l'en-tête"
• "Changez la couleur du bouton en bleu"

L'IA comprendra votre demande et appliquera les modifications à votre app.

Référence rapide

• Actualiser la prévisualisation – Cliquez sur l'icône Actualiser dans la barre d'outils de la Visionneuse d'App pour recharger la fenêtre de prévisualisation.
• Changer la vue de l'appareil – Utilisez les icônes Desktop, Tablet ou Mobile dans la barre d'outils de prévisualisation pour tester l'apparence de votre app sur différentes tailles d'écran.
• Open in new tab – Cliquez sur l'icône en forme de flèche dans le coin supérieur droit de la fenêtre de prévisualisation pour ouvrir l'aperçu dans un onglet de navigateur séparé.
• Afficher les journaux d'erreurs – Vérifiez le panneau Console sur le côté droit de l'écran pour voir les messages d'erreur et les journaux système.
• Corriger automatiquement les erreurs – Cliquez sur le bouton "Resolve" dans la notification de Signaler un problème pour laisser l'IA corriger tous les bugs identifiés.
• Éditer les éléments visuels – Cliquez sur n'importe quel élément dans la fenêtre de prévisualisation pour ouvrir l'éditeur visuel sur le côté gauche.
• Signaler un problème – Cliquez sur "..." → "Feedback" sur n'importe quel message de l'Agent pour signaler des problèmes à l'équipe de support.

FAQ

Pourquoi ma Visionneuse d'App affiche-t-elle un écran de chargement ?

L'affichage de chargement signifie que le site web est en cours de chargement. La Visionneuse d'App fonctionne normalement. Attendez un moment que la prévisualisation se charge correctement. Si cela prend plus de 2 minutes, essayez de cliquer sur l'icône Actualiser ou de vérifier le panneau Console pour voir les erreurs.

Pourquoi ma Visionneuse d'App affiche-t-elle des messages d'erreur rouges ?

Les Agents peuvent rencontrer des problèmes pendant le processus de build, ce qui peut occasionnellement provoquer des erreurs de page web. Cliquez sur "Resolve", et les Agents répareront l'erreur pour vous. Une fois corrigée, la Visionneuse d'App affichera normalement l'aperçu, il n'y a donc pas lieu de s'inquiéter si des messages d'erreur rouges apparaissent.

Pourquoi ne puis-je pas supprimer le badge Atoms de ma page publiée ?

La suppression du badge nécessite Pro ou supérieur. Vous pouvez mettre à niveau à tout moment depuis Settings → Plans & Billing. Après la mise à niveau, le badge sera automatiquement supprimé de vos pages publiées.

Pour mettre à niveau, cliquez sur votre avatar dans le coin supérieur droit, sélectionnez Settings, puis accédez à Plans & Billing. Choisissez le forfait Pro ou Max et terminez le processus de mise à niveau. Une fois la mise à niveau effectuée, le badge Atoms n'apparaîtra plus sur vos pages publiées.