Vue d'ensemble de l'interface
L’App Builder s’ouvre comme un espace de travail unique dans votre navigateur. Cette page nomme chacune de ses parties, pour que le reste du guide puisse y faire référence.
L’en-tête
Section intitulée « L’en-tête »La barre en haut de l’écran porte l’identité de votre projet et les actions principales : le nom du projet, les actions d’enregistrement et de partage, annuler et rétablir, et le passage d’une zone de l’éditeur à l’autre.
La barre d’outils
Section intitulée « La barre d’outils »Une barre verticale d’icônes court le long du bord gauche. Chaque icône ouvre un panneau ancré :
- Conversations : vos fils de discussion avec l’AI Builder. Voir Travailler avec l’AI Builder.
- Layers : les couches de la carte de votre application.
- Data : un seul panneau pour toutes vos données, avec deux entrées : votre Datastore et votre base de données Supabase. Voir Données et bases de données.
- Map Controls : les widgets de votre application et leurs paramètres. Voir Widgets.
- GitHub : votre dépôt, ses commits et ses diffs. Voir GitHub.
- History : les instantanés de votre projet. Voir Éditeur de code et historique.
En bas de la barre, Project Settings ouvre les réglages de votre application dans une seule fenêtre, par-dessus l’éditeur : son nom, les modèles d’IA qu’elle peut utiliser, et sa publication. Le bouton Publish de l’en-tête ouvre la même fenêtre sur Publish app. Voir Publier votre application.
La zone de gauche : chat et panneaux
Section intitulée « La zone de gauche : chat et panneaux »Le côté gauche de l’espace de travail accueille le panneau de chat, où vous parlez à l’AI Builder, et le panneau contextuel de la section de la barre d’outils que vous avez ouverte. Vous pouvez redimensionner cette zone, et passer du chat au panneau actif.
La zone de droite : aperçu, code, espace de travail
Section intitulée « La zone de droite : aperçu, code, espace de travail »Le côté droit est celui où votre application prend vie, à travers quelques onglets :
- Preview : l’application en direct, mise à jour à mesure que vous ou l’IA faites des modifications. Voir Qu’est-ce que l’App Builder pour savoir comment l’aperçu démarre.
- Code : l’éditeur de code, où vous lisez et modifiez les vrais fichiers de votre projet.
- Workspace : les fichiers et la structure de votre projet, ainsi que la mémoire de votre projet.
Quand votre application en cours d’exécution lève une erreur, un panneau d’erreur s’ouvre sous l’aperçu et montre ce qui n’a pas fonctionné, pour que vous et l’AI Builder puissiez le corriger rapidement.
La barre latérale droite
Section intitulée « La barre latérale droite »Une seconde barre, plus étroite, court le long du bord droit, et elle agit sur ce que vous avez sélectionné plutôt que sur le projet dans son ensemble :
- Style : l’apparence de la couche sélectionnée.
- Popup : ce que voient les visiteurs de votre application quand ils cliquent sur une entité de cette couche.
- Widget parameters : les paramètres du widget sélectionné.
Sélectionnez une couche dans le panneau Layers, et les deux premiers la suivent. Cliquez sur l’icône du panneau déjà ouvert pour le replier. Quand rien n’est sélectionné, chaque panneau le dit plutôt que d’afficher un formulaire vide.
C’est le même découpage que dans le Map Builder : la barre de gauche est l’endroit d’où viennent les choses, la barre de droite celui où vous façonnez celle que vous avez choisie.
Tout, à la main ou avec l’IA
Section intitulée « Tout, à la main ou avec l’IA »L’App Builder est un véritable IDE. Vous pouvez le piloter entièrement à la main : modifier le code, brancher un widget, connecter une base de données. L’AI Builder travaille exactement sur le même projet : vous pouvez lui passer la main et la reprendre à tout moment.