Aller au contenu

Vue d'ensemble

L’éditeur, c’est l’écran qui s’ouvre quand tu ouvres un projet. Tu y parles à l’agent, tu regardes ton app se construire en direct, tu la retouches et tu la publies. Il tient en trois zones : une barre en haut, un panneau à gauche (le chat avec l’agent ou le mode Design) et, à droite, l’aperçu de ton app avec ses onglets.

De gauche à droite :

Élément À quoi il sert
Masquer le panneau / Afficher le panneau Replie ou rouvre le panneau de gauche pour donner toute la largeur à l’aperçu. Si l’agent travaille pendant que le panneau est replié, un point turquoise clignote sur le bouton. Ton choix est retenu d’une visite à l’autre.
Nom du projet Le nom affiché dans ton tableau de bord. Il se change dans les paramètres du projet.
Badge de version (v12) Ouvre l’Historique des versions : tu peux consulter une ancienne version et la restaurer. Voir Versions et historique.
Aperçu · Code · Images · Changements Les quatre onglets de la partie droite (détaillés plus bas). Sur un petit écran, seules les icônes restent visibles.
Télécharger le code (.zip) Télécharge tout le code de la version affichée. Voir Le code.
Paramètres du projet (icône de réglages) Nom, consignes pour l’agent, publication, backend, connecteurs, secrets et suppression. Voir Paramètres du projet.
Publier Met ton app en ligne. Le bouton indique où tu en es : Publier (jamais publiée), Publication… (en cours), Mettre à jour (une version plus récente que celle en ligne existe) ou Publié (la version en ligne est la dernière). Voir Publier ton app.

Le panneau de gauche : Chat, Design (et Kameleoon)

Section intitulée « Le panneau de gauche : Chat, Design (et Kameleoon) »

En haut du panneau, une bascule choisit ce qu’il affiche :

  • Chat : la conversation avec l’agent. Tu décris ce que tu veux, il modifie ton app et tu suis chaque étape de son travail. C’est le mode par défaut. Voir Le chat avec l’agent.
  • Design (avec le badge Gratuit) : tu retouches toi-même textes, couleurs, polices et espacements, sans l’agent et sans dépenser de crédits. Voir Le mode Design.
  • Kameleoon : n’apparaît que si ton compte Kameleoon est connecté et que le projet est relié à un site Kameleoon. Tu y gères tes expériences et tes objectifs. Voir Le panneau Kameleoon.

Bon à savoir :

  • Le chat reste chargé quand tu passes en Design : le texte que tu étais en train d’écrire est gardé.
  • Quand l’agent démarre, l’éditeur revient tout seul au chat pour que tu suives son travail. Si tu regardes un autre mode pendant qu’il travaille, un point animé apparaît sur Chat.
  • Tu peux élargir ou rétrécir le panneau en faisant glisser la séparation entre le panneau et l’aperçu.

Aperçu

Ton app en direct, qui se met à jour pendant que l’agent écrit le code. Tailles d’écran, barre d’adresse, logs du serveur et bandeau d’erreur avec Corriger. En savoir plus.

Code

Le code de ton app dans un vrai éditeur (Monaco, celui de VS Code) : lire, modifier, créer des fichiers, enregistrer. En savoir plus.

Images

La bibliothèque des images du projet : envoyer ton logo et tes photos, les renommer, les joindre au chat. En savoir plus.

Changements

Ce que chaque version a changé, fichier par fichier, ligne par ligne. En savoir plus.

Changer d’onglet ne recharge ni l’aperçu ni l’éditeur de code : tu retrouves chaque onglet tel que tu l’as laissé.

  1. Décris ton idée dans le chat, par exemple :

    Le site d'un studio de yoga à Lyon, avec le planning des cours et un formulaire de réservation.
  2. Regarde l’app se construire dans l’aperçu. À la toute première génération, un écran « Highwind construit ton app » montre les fichiers écrits, puis l’app apparaît dès que la page est prête.

  3. Affine en discutant : « mets des couleurs plus chaudes », « ajoute une page tarifs »… Pour viser un élément précis, utilise Sélectionner un élément dans le menu + du chat.

  4. Retouche les détails toi-même en passant en Design : un titre, une couleur, une police. C’est gratuit.

  5. Publie avec le bouton Publier en haut à droite, puis Mettre à jour à chaque nouvelle version que tu veux mettre en ligne.

La première fois que tu ouvres un projet qui a déjà une version (et quand l’agent a fini de travailler), une courte visite en quatre étapes te montre l’essentiel :

  1. Demande ce que tu veux : la zone de saisie du chat.
  2. Retouche sans l’agent : la bascule vers le mode Design.
  3. Le code est à toi : les onglets Code, Images et Changements.
  4. Publie en un clic : le bouton Publier.

Avance avec Suivant, termine avec C’est parti, ou quitte à tout moment avec Passer la visite (ou Échap). La visite ne s’affiche qu’une seule fois par compte.