[{"data":1,"prerenderedAt":487},["ShallowReactive",2],{"\u002Fnext\u002Fdodock\u002Fpersonnalisation\u002Fstudio":3,"section:\u002Fnext\u002Fdodock\u002Fpersonnalisation\u002Fstudio":486},{"id":4,"title":5,"body":6,"description":466,"extension":467,"meta":468,"navigation":469,"path":482,"seo":483,"stem":484,"__hash__":485},"docs\u002F2.next\u002F3.dodock\u002F03.personnalisation\u002Fstudio.md","Studio",{"type":7,"value":8,"toc":445},"minimark",[9,13,17,29,32,37,48,52,65,77,81,86,89,116,119,122,126,129,133,172,176,214,218,221,255,261,265,268,284,287,301,304,308,311,335,338,388,395,399,413,416,435],[10,11,5],"h1",{"id":12},"studio",[14,15,16],"p",{},"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.",[18,19,22],"callout",{"color":20,"icon":21},"amber","i-mdi-flask-outline",[14,23,24,28],{},[25,26,27],"strong",{},"Aperçu."," Studio est présent seulement dans la version en développement de Dodock. Il n'est pas encore disponible sur les sites en production, ni en v5. Ses fonctions et son interface peuvent encore changer.",[14,30,31],{},"L'interface de l'éditeur Studio est en anglais. Les libellés de cette page sont donc ceux de l'éditeur.",[33,34,36],"h2",{"id":35},"prérequis","Prérequis",[14,38,39,40,43,44,47],{},"Avoir le rôle ",[25,41,42],{},"Responsable système"," ou ",[25,45,46],{},"Studio User",".",[33,49,51],{"id":50},"accéder-à-studio","Accéder à Studio",[53,54,55,59],"ol",{},[56,57,58],"li",{},"Ouvrez la recherche (Ctrl+K) et saisissez « Studio App ».",[56,60,61,62,47],{},"Dans la barre latérale du module Studio, cliquez sur ",[25,63,64],{},"Editor",[14,66,67,68,72,73,76],{},"L'éditeur s'ouvre dans un nouvel onglet, à l'adresse ",[69,70,71],"code",{},"\u002Fstudio",". La liste ",[25,74,75],{},"Studio App"," du bureau montre les applications créées.",[33,78,80],{"id":79},"concepts-clés","Concepts clés",[82,83,85],"h3",{"id":84},"applications-studio","Applications Studio",[14,87,88],{},"Une application Studio regroupe :",[90,91,92,98,104,110],"ul",{},[56,93,94,97],{},[25,95,96],{},"Pages"," : les écrans de votre application, chacune accessible à une route définie",[56,99,100,103],{},[25,101,102],{},"Composants"," : des éléments réutilisables (boutons, blocs de texte, conteneurs, images)",[56,105,106,109],{},[25,107,108],{},"Sources de données"," : connexions aux documents Dokos ou à des API externes pour afficher des données dynamiques",[56,111,112,115],{},[25,113,114],{},"Variables"," : valeurs réactives partagées entre les composants d'une page",[82,117,96],{"id":118},"pages",[14,120,121],{},"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.",[82,123,125],{"id":124},"publication","Publication",[14,127,128],{},"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.",[33,130,132],{"id":131},"créer-une-application","Créer une application",[53,134,135,142,157,166],{},[56,136,137,138,141],{},"Dans l'éditeur, créez une application. La boîte de dialogue ",[25,139,140],{},"New App"," s'ouvre.",[56,143,144,145,148,149,152,153,156],{},"Saisissez le ",[25,146,147],{},"Title",". Studio en déduit l'",[25,150,151],{},"App Route"," et l'",[25,154,155],{},"App Name",", que vous pouvez modifier.",[56,158,159,160,165],{},"Si vous êtes développeur, activez l'export vers une application (voir ",[161,162,164],"a",{"href":163},"#exporter-une-application","Exporter une application",").",[56,167,168,169,47],{},"Cliquez sur ",[25,170,171],{},"Create",[33,173,175],{"id":174},"créer-une-page","Créer une page",[53,177,178,181,184,194,197],{},[56,179,180],{},"Ouvrez votre application dans Studio",[56,182,183],{},"Créez une page.",[56,185,186,187,190,191,47],{},"Définissez la ",[25,188,189],{},"Page Route",", par exemple ",[69,192,193],{},"\u002Faccueil",[56,195,196],{},"Définissez le titre de l'onglet du navigateur. Par défaut, c'est le titre de la page.",[56,198,199,200],{},"Concevez la page dans l'éditeur visuel :\n",[90,201,202,205,208,211],{},[56,203,204],{},"Glissez-déposez des composants depuis le panneau de gauche vers le canevas",[56,206,207],{},"Sélectionnez un composant pour modifier ses propriétés, styles et comportements dans le panneau de droite",[56,209,210],{},"Utilisez le panneau des couches pour réorganiser l'arbre des composants",[56,212,213],{},"Ajoutez des sources de données dans les paramètres de la page pour afficher des données dynamiques",[82,215,217],{"id":216},"lier-des-données-aux-composants","Lier des données aux composants",[14,219,220],{},"Pour afficher des données dynamiques dans un composant :",[53,222,223,230,245],{},[56,224,225,226,229],{},"Ajoutez une source de données à la page (paramètres de la page, onglet ",[25,227,228],{},"Ressources",")",[56,231,232,233,236,237,240,241,244],{},"Choisissez le type de source : ",[25,234,235],{},"Document List"," (liste de documents), ",[25,238,239],{},"Document"," (un document) ou ",[25,242,243],{},"API Resource"," (appel d'une URL en GET, POST, PUT ou DELETE).",[56,246,247,248,251,252],{},"Dans les propriétés d'un composant, utilisez une liaison ",[69,249,250],{},"{{ }}"," pour référencer les données, par exemple ",[69,253,254],{},"{{ ma_source.data }}",[14,256,257,258,260],{},"Les expressions ",[69,259,250],{}," sont évaluées dans le contexte de la page : variables, sources de données, route et utilitaires globaux.",[33,262,264],{"id":263},"utiliser-lassistant-ia","Utiliser l'assistant IA",[14,266,267],{},"Studio intègre un assistant IA capable de créer et modifier des pages à partir de descriptions en langage naturel.",[14,269,270,273,274,276,277,280,281,47],{},[25,271,272],{},"Prérequis :"," un ",[25,275,42],{}," doit saisir la clé d'API du fournisseur de modèles dans ",[25,278,279],{},"Studio Settings",", champ ",[25,282,283],{},"AI API Key",[14,285,286],{},"Pour utiliser l'assistant :",[53,288,289,292,295,298],{},[56,290,291],{},"Ouvrez le panneau de chat (icône en haut à droite de l'éditeur)",[56,293,294],{},"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 »",[56,296,297],{},"L'assistant peut proposer un plan que vous approuvez ou affinez avant la génération",[56,299,300],{},"L'assistant applique les modifications directement sur le canevas",[14,302,303],{},"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.",[33,305,307],{"id":306},"publier-une-application","Publier une application",[14,309,310],{},"La publication se fait page par page. Une page modifiée garde sa version publiée tant que vous ne la republiez pas.",[53,312,313,323,329],{},[56,314,315,316,319,320,47],{},"Vérifiez la ",[25,317,318],{},"Route"," de l'application dans ses paramètres, par exemple ",[69,321,322],{},"\u002Fmon-app",[56,324,168,325,328],{},[25,326,327],{},"Publish Page"," pour publier la page ouverte.",[56,330,331,332,47],{},"Pour publier toutes les pages, ouvrez la flèche du bouton et choisissez ",[25,333,334],{},"Publish App",[14,336,337],{},"La même flèche propose aussi :",[339,340,341,354],"table",{},[342,343,344],"thead",{},[345,346,347,351],"tr",{},[348,349,350],"th",{},"Action",[348,352,353],{},"Effet",[355,356,357,368,378],"tbody",{},[345,358,359,365],{},[360,361,362],"td",{},[25,363,364],{},"Revert Changes",[360,366,367],{},"Abandonne les modifications non publiées de la page.",[345,369,370,375],{},[360,371,372],{},[25,373,374],{},"Unpublish Page",[360,376,377],{},"Retire la page du site.",[345,379,380,385],{},[360,381,382],{},[25,383,384],{},"Unpublish App",[360,386,387],{},"Retire toute l'application du site.",[14,389,390,391,394],{},"Une page n'est visible sans connexion que si sa case ",[25,392,393],{},"Allow Guest Access"," est cochée.",[33,396,398],{"id":397},"compilation-de-léditeur","Compilation de l'éditeur",[14,400,401,402,405,406,409,410,412],{},"L'éditeur Studio est une application Vite incluse dans Dodock. La commande ",[69,403,404],{},"bench build"," le compile avec les autres fichiers de ",[69,407,408],{},"frappe",". ",[69,411,71],{}," sert cette compilation.",[33,414,164],{"id":415},"exporter-une-application",[14,417,418,419,422,423,426,427,430,431,434],{},"Vous pouvez exporter une application Studio vers le dossier ",[69,420,421],{},"studio\u002F"," d'une application Dokos. Activez l'export dans les paramètres de l'application et choisissez l'application cible (",[25,424,425],{},"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 ",[69,428,429],{},"studio_page"," avec ses pages, et le fichier ",[69,432,433],{},"router.ts"," si l'application a un script de routage.",[14,436,437,438,441,442,444],{},"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 ",[69,439,440],{},"bench --site \u003Csite> watch-studio"," surveille les dossiers ",[69,443,421],{}," et recopie les fichiers JSON modifiés dans la base.",{"title":446,"searchDepth":447,"depth":448,"links":449},"",1,2,[450,451,452,458,459,462,463,464,465],{"id":35,"depth":448,"text":36},{"id":50,"depth":448,"text":51},{"id":79,"depth":448,"text":80,"children":453},[454,456,457],{"id":84,"depth":455,"text":85},3,{"id":118,"depth":455,"text":96},{"id":124,"depth":455,"text":125},{"id":131,"depth":448,"text":132},{"id":174,"depth":448,"text":175,"children":460},[461],{"id":216,"depth":455,"text":217},{"id":263,"depth":448,"text":264},{"id":306,"depth":448,"text":307},{"id":397,"depth":448,"text":398},{"id":415,"depth":448,"text":164},"Construire et publier des applications web visuelles avec Studio.","md",{"reviewed":469,"last_verified":470,"sources":471},true,"2026-11-04",[472,473,474,475,476,477,478,479,480,481],"frappe\u002Fstudio\u002Fsidebar\u002Fstudio\u002Fstudio.json","frappe\u002Fstudio\u002Fdoctype\u002Fstudio_app\u002Fstudio_app.json","frappe\u002Fstudio\u002Fdoctype\u002Fstudio_app\u002Fstudio_app.py","frappe\u002Fstudio\u002Fdoctype\u002Fstudio_page\u002Fstudio_page.json","frappe\u002Fstudio\u002Fdoctype\u002Fstudio_page_resource\u002Fstudio_page_resource.json","frappe\u002Fstudio\u002Fdoctype\u002Fstudio_settings\u002Fstudio_settings.json","frappe\u002Fstudio\u002Fcommands\u002F__init__.py","studio\u002Ffrontend\u002Fsrc\u002Fcomponents\u002FAppDialog.vue","studio\u002Ffrontend\u002Fsrc\u002Fcomponents\u002FPublishButton.vue","esbuild\u002Fesbuild.js","\u002Fnext\u002Fdodock\u002Fpersonnalisation\u002Fstudio",{"title":5,"description":466},"2.next\u002F3.dodock\u002F03.personnalisation\u002Fstudio","HH4tXfqxmo4bv8DC0Ll9P4ya6gcIk3RPN-K_yCbxAeY",{},1793871798424]