Studio

Studio est un constructeur visuel d'applications web intégré à Dokos. Il permet de créer des applications complètes — pages, composants, sources de données — sans écrire de code, puis de les publier sur votre site.

L'interface de l'éditeur Studio est en anglais. Les libellés de cette page sont donc ceux de l'éditeur.

Prérequis

Avoir le rôle Responsable système ou Studio User.

Accéder à Studio

1. Ouvrez la recherche (Ctrl+K) et saisissez « Studio App ».
2. Dans la barre latérale du module Studio, cliquez sur Editor.

L'éditeur s'ouvre dans un nouvel onglet, à l'adresse /studio. La liste Studio App du bureau montre les applications créées.

Concepts clés

Applications Studio

Une application Studio regroupe :

• Pages : les écrans de votre application, chacune accessible à une route définie
• Composants : des éléments réutilisables (boutons, blocs de texte, conteneurs, images)
• Sources de données : connexions aux documents Dokos ou à des API externes pour afficher des données dynamiques
• Variables : valeurs réactives partagées entre les composants d'une page

Pages

Une page contient un arbre de blocs (composants visuels), des scripts JavaScript optionnels, des ressources (sources de données) et des variables. Vous concevez la page dans un éditeur visuel à trois panneaux : la liste des composants à gauche, le canevas au centre, et les propriétés à droite.

Publication

Une fois votre application conçue, vous la publiez. Les visiteurs peuvent alors y accéder à l'URL définie pour l'application. Une application Studio est servie comme un générateur de site web.

Créer une application

1. Dans l'éditeur, créez une application. La boîte de dialogue New App s'ouvre.
2. Saisissez le Title. Studio en déduit l'App Route et l'App Name, que vous pouvez modifier.
3. Si vous êtes développeur, activez l'export vers une application (voir Exporter une application).
4. Cliquez sur Create.

Créer une page

1. Ouvrez votre application dans Studio
2. Créez une page.
3. Définissez la Page Route, par exemple /accueil.
4. Définissez le titre de l'onglet du navigateur. Par défaut, c'est le titre de la page.
5. Concevez la page dans l'éditeur visuel :
   • Glissez-déposez des composants depuis le panneau de gauche vers le canevas
   • Sélectionnez un composant pour modifier ses propriétés, styles et comportements dans le panneau de droite
   • Utilisez le panneau des couches pour réorganiser l'arbre des composants
   • Ajoutez des sources de données dans les paramètres de la page pour afficher des données dynamiques

Lier des données aux composants

Pour afficher des données dynamiques dans un composant :

1. Ajoutez une source de données à la page (paramètres de la page, onglet Ressources)
2. Choisissez le type de source : Document List (liste de documents), Document (un document) ou API Resource (appel d'une URL en GET, POST, PUT ou DELETE).
3. Dans les propriétés d'un composant, utilisez une liaison {{ }} pour référencer les données, par exemple {{ ma_source.data }}

Les expressions {{ }} sont évaluées dans le contexte de la page : variables, sources de données, route et utilitaires globaux.

Utiliser l'assistant IA

Studio intègre un assistant IA capable de créer et modifier des pages à partir de descriptions en langage naturel.

Prérequis : un Responsable système doit saisir la clé d'API du fournisseur de modèles dans Studio Settings, champ AI API Key.

Pour utiliser l'assistant :

1. Ouvrez le panneau de chat (icône en haut à droite de l'éditeur)
2. Décrivez ce que vous souhaitez créer ou modifier, par exemple : « Crée une page avec un titre, une liste de tâches et un bouton d'ajout »
3. L'assistant peut proposer un plan que vous approuvez ou affinez avant la génération
4. L'assistant applique les modifications directement sur le canevas

Les conversations IA sont privées : chaque utilisateur ne voit que ses propres sessions. Une session déjà en cours de traitement refuse une nouvelle demande tant qu'elle n'a pas répondu.

Publier une application

La publication se fait page par page. Une page modifiée garde sa version publiée tant que vous ne la republiez pas.

1. Vérifiez la Route de l'application dans ses paramètres, par exemple /mon-app.
2. Cliquez sur Publish Page pour publier la page ouverte.
3. Pour publier toutes les pages, ouvrez la flèche du bouton et choisissez Publish App.

La même flèche propose aussi :

Une page n'est visible sans connexion que si sa case Allow Guest Access est cochée.

Compilation de l'éditeur

L'éditeur Studio est une application Vite incluse dans Dodock. La commande bench build le compile avec les autres fichiers de frappe. /studio sert cette compilation.

Exporter une application

Vous pouvez exporter une application Studio vers le dossier studio/ d'une application Dokos. Activez l'export dans les paramètres de l'application et choisissez l'application cible (Frappe App (for export)). L'export crée un dossier nommé d'après l'application Studio. Il contient la définition JSON de l'application, un dossier studio_page avec ses pages, et le fichier router.ts si l'application a un script de routage.

Les applications exportées sont importées lors de l'installation de l'application ou de la migration du site. En développement, la commande bench --site <site> watch-studio surveille les dossiers studio/ et recopie les fichiers JSON modifiés dans la base.