Vue d'ensemble de l'interface
À quoi sert cet écran
L’écran App Builder est un espace de travail unique comportant quatre zones fixes. Savoir où se trouve chacune — et ce que fait chaque bouton d’en-tête — est ce qui rend la suite d’App Builder rapide à lire.
Avant de commencer
| Pour faire ceci | Il vous faut |
|---|---|
| Ouvrir App Builder | la permission d’accès App Builder |
Ouvrir l’écran
Build › App Builder dans la barre latérale, puis l’onglet App Designer.
L’interface de l’App Builder est divisée en plusieurs zones clés, chacune ayant un rôle spécifique dans le flux de conception d’applications.
📸 Capture d’ecran : L’espace de travail App Builder avec une application ouverte. Repères : (1) l’en-tête avec nom, pastille de statut et version, (2) la barre d’onglets, (3) la palette de composants, (4) le canevas, (5) les boutons d’enregistrement et de publication.
Mise en page principale
┌────────────────────────────────────────────────────────────────────────┐
│ App Header Bar │
│ [App Name Input] [Status Badge] [Version] | Action Buttons │
├────────────────────────────────────────────────────────────────────────┤
│ Tab Bar: [App Designer] [Setup Wizard] [Applications] │
└────────────────────────────────────────────────────────────────────────┤
│ │ [Auto-Organize][Instructions] │
│ Component │ │
│ Palette │ │
│ │ │
│ - Search │ Flow Canvas │
│ - Custom │ │
│ - Tabs │ │
│ - Component Grid │ │
└────────────────────┴───────────────────────────────────────────────────┘
Composants de l’interface
| Composant | Emplacement | Fonction |
|---|---|---|
| App Header | Barre supérieure | Nom de l’application, statut, version et boutons d’action |
| Tab Bar | Au-dessus du canevas | Basculer entre App Designer, Setup Wizard et Applications |
| Component Palette | Barre latérale gauche | Bibliothèque de modèles de composants glissables |
| Flow Canvas | Zone centrale | Espace de travail visuel pour concevoir l’architecture |
| Config Modal | Popup central | Configurer les propriétés du composant sélectionné |
App Header Bar
| Élément | Description |
|---|---|
| App Name Input | Champ texte pour le nom de l’application |
| Status Badge | Affiche “Draft” (orange) ou “Published” (vert) |
| Version Display | Version actuelle (ex. v1.0.0) |
| Save Button | Sauvegarde rapide pour les brouillons existants |
| Refresh Button | Effacer le canevas pour une nouvelle application |
| Save Draft Button | Enregistrer l’application comme brouillon |
| Publish Button | Publier l’application pour l’accès de l’équipe |
États des boutons : Désactivé (grisé) lorsque l’action n’est pas disponible, loading (spinner) lorsqu’en cours, activé lorsque prêt.
Scénario
Comprendre pourquoi le bouton Publish ne réagit pas.
- Lisez d’abord la pastille de statut. Brouillon et Publié se comportent différemment, et la pastille est le moyen le plus rapide de savoir lequel vous avez sous les yeux.
- Vérifiez le champ du nom. Une application sans nom ne peut pas être publiée, et le bouton n’en dit rien.
- Regardez l’état du bouton lui-même. Grisé signifie indisponible, un indicateur d’activité signifie qu’un enregistrement est en cours — dans ce second cas, attendre est la solution, pas recliquer.
- S’il reste désactivé, passez à l’onglet Applications et vérifiez que vous modifiez bien ce que vous croyez. Modifier une application publiée ne se comporte pas comme modifier un brouillon.
En cas de problème
| Symptôme | Cause | Comment vérifier | Solution |
|---|---|---|---|
| Un bouton d’en-tête est grisé | L’action est indisponible dans l’état courant | La pastille de statut et le nom | Complétez ce qui manque ; publier exige un nom |
| Un bouton affiche un indicateur d’activité | Un enregistrement ou une publication est en cours | — | Attendez ; recliquer ne fait rien |
| Le canevas est vide après un rafraîchissement | Refresh vide le canevas pour une nouvelle application | La pastille de statut | Rechargez le brouillon depuis Applications |
Pour aller plus loin
- Palette de composants — la zone suivante