> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://documentation.celestory.io/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Votre premier projet : de la page blanche au premier écran # 🚀 Votre premier projet : de la page blanche au premier écran Votre compte est créé, la page d'accueil est vide, et il y a ce grand bouton « Nouveau projet ». Cet article vous tient la main de ce clic jusqu'au moment où une phrase que vous avez écrite s'affiche dans un vrai lecteur. 🎬 **Le résultat attendu** : une application minuscule mais complète — elle démarre, elle affiche votre phrase, elle s'arrête. Rien de plus, et c'est exactement le but : vous aurez touché tous les gestes fondateurs de Celestory au moins une fois. **Le temps nécessaire** : environ 10 minutes, dont deux passées sur un mur que presque tout le monde rencontre et que personne ne voit venir. On l'a mis au bon endroit dans le parcours, juste avant que vous ne tombiez dedans. 🔺 Aucun prérequis technique. Vous n'écrirez pas une ligne de code, et vous n'aurez besoin d'aucun fichier, image ou son. --- ${frame}[Vidéo : Votre premier projet](https://celestory-docs-videos.netlify.app/fr/construction-graphe/votre-premier-projet.html) ## 1️⃣ Créer le projet Sur la page d'accueil, cliquez la carte **Nouveau projet** — son sous-titre annonce la couleur : *« Démarrer un nouveau projet vide à partir de zéro »*. Une fenêtre s'ouvre et vous demande **quatre choses**, et quatre seulement : | Champ | Obligatoire ? | À quoi ça sert | |---|---|---| | **Nom du projet** | ✅ Oui | Le nom affiché partout. Tant qu'il est vide, un message rouge « Le nom du projet est requis » reste sous le champ. | | **Les crédits de votre experience** | Non | Vos remerciements, votre signature. Modifiable plus tard. | | **Description du projet** | Non | Un résumé libre. Modifiable plus tard. | | **Image** | Non | La vignette de la carte du projet sur votre page d'accueil. | Remplissez le nom, laissez le reste tel quel, cliquez **Créer**. L'éditeur s'ouvre directement sur votre nouveau projet. ⚠️ **On ne vous demande pas de choisir un modèle.** Contrairement à ce que laisse croire l'existence de plusieurs templates dans Celestory, cette fenêtre n'en propose aucun : tout nouveau projet est créé en **Chatbot**, sans alternative possible à cet instant. Si vous vouliez un Roman visuel, ce sera un module à ajouter ensuite — pas une case à cocher ici. --- ## 2️⃣ Faire l'inventaire : ce que Celestory vient de créer pour vous Prenez dix secondes pour regarder ce que vous avez sous les yeux. Ça vaut le coup, parce que c'est très peu — et que savoir *à quel point* c'est peu vous évitera beaucoup de confusion. **Dans le graphe, il y a exactement un bloc** : un rectangle vert nommé **Départ**, posé un peu en haut à gauche de la zone de travail. C'est tout. Pas de dialogue d'exemple, pas de choix, pas de fil. **En coulisses, il y a déjà trois menus** (le bouton bleu du projet en haut à gauche → **Menus**) : - un **Menu principal** avec un unique bouton **Démarrer** déjà branché sur votre module ; - un **ATH** transparent avec un bouton ⏸️ ; - un menu **Pause** en superposition, avec **Reprendre** et **Sauvegarder & quitter**. **Et il n'y a rien d'autre** : zéro variable, zéro personnage, zéro décor, zéro ressource de contenu. La liste des personnages de votre module Chatbot est littéralement vide. 🔺 C'est la clé du parcours qui suit : les menus sont prêts à lancer une histoire, mais **l'histoire, elle, est vide**. Un projet neuf est une coquille fonctionnelle autour d'un contenu inexistant. --- ## 3️⃣ Poser votre premier bloc — et le relier dans le même geste C'est ici que se joue la différence entre une première séance réussie et vingt minutes de perplexité. Il existe deux façons d'ajouter un bloc ; **une seule est recommandée pour votre tout premier**. ### ✨ La bonne méthode : tirer un fil dans le vide Regardez le bord droit du bloc **Départ** : il porte un petit **triangle creux**. Ce triangle est sa sortie. 1. Cliquez sur ce triangle et **faites glisser** vers une zone vide du graphe, à droite. 2. Relâchez **dans le vide**. 3. Un menu **« Connecter à… »** s'ouvre, avec un champ de recherche. 4. Tapez `alerte` et choisissez l'entrée **Alerte (in)**. Le bloc **Alerte** apparaît là où vous avez relâché la souris, **et il est déjà relié** au bloc Départ. Un geste, deux problèmes réglés. 🔺 **Pourquoi Alerte et pas Dialogue ?** Parce qu'Alerte ne demande qu'une chose : du texte. Le bloc **Dialogue**, lui, commence par vous demander *« Choisir votre premier personnage: »* — et comme votre projet n'en a aucun, vous devriez d'abord en créer un. Une excellente deuxième étape, une mauvaise première. ⚠️ **Le menu « Blocs les plus utilisés » vous ment un peu.** Sur un projet neuf, cette section est pré-remplie avec quatre blocs choisis d'avance — **Alerte, Assignation, Choix, Condition** — alors que vous n'avez encore rien utilisé. Et Dialogue, qui aurait dû y figurer, n'y est pas : il se trouve plus bas, dans **Autres blocs**. Ne cherchez pas de logique dans ce classement tant que vous n'avez pas réellement construit quelque chose. ### 🔺 Les autres méthodes, et le piège qui va avec Vous pouvez aussi ajouter un bloc par le bouton **Ajouter un bloc** de la barre du haut, ou par un **clic droit** sur le graphe → **Ajouter un bloc**. - Le **clic droit** pose le bloc là où vous avez cliqué : c'est propre, mais le bloc arrive **non relié**. - Le **bouton de la barre du haut** pose le bloc au centre de la vue… sauf tant que vous n'avez ni déplacé ni zoomé le graphe. Sur un projet fraîchement créé, ce centre vaut encore `0,0` — c'est-à-dire **exactement la position du bloc Départ**. ⚠️ **Un bloc peut en recouvrir un autre au pixel près, sans le moindre avertissement.** Celestory empile les blocs sans jamais tester s'ils se chevauchent. Si vous utilisez le bouton de la barre du haut comme tout premier geste, votre nouveau bloc se posera *sur* le bloc Départ et vous croirez qu'il ne s'est rien passé. Le remède est simple : faites glisser le bloc du dessus pour découvrir celui du dessous — ou, mieux, utilisez la méthode du fil tiré dans le vide. ### 🔎 Au passage : triangles et cercles Sur les bords des blocs, deux formes coexistent : - les **triangles** portent le flux de l'histoire (l'ordre dans lequel les choses se passent) ; - les **cercles** portent des valeurs (un texte, un nombre, une image). Et dans les deux cas : **creux = rien n'est branché**, **plein = quelque chose est branché**. Un coup d'œil suffit donc pour savoir si votre graphe tient debout. Retenez-le, on y revient à l'étape 6. --- ## 4️⃣ Écrire votre phrase **Double-cliquez** sur le bloc Alerte. ⚠️ Un **simple clic ne fait que sélectionner** le bloc — il ne l'ouvre pas. C'est la cause numéro un du « je n'arrive pas à éditer mon bloc » chez les débutants. Double-clic, toujours. Une fenêtre flottante s'ouvre. Elle contient : - tout en haut, un champ **« Ajouter un titre personnalisé… »** — c'est le nom que le bloc affichera dans le graphe. Facultatif, mais très utile dès que votre graphe dépasse cinq blocs ; - plus bas, un champ par **point** du bloc. Celui qui vous intéresse s'appelle **`texte`**. 🔺 Les noms de points sont traduits dans la langue de l'interface (`texte`, `image`), sauf les deux points de flux `in` et `out`, qui restent en anglais dans toutes les langues. Cliquez dans le champ `texte` et écrivez votre phrase — par exemple : > Bonjour, et bienvenue dans ma toute première expérience Celestory. C'est un éditeur de texte enrichi : le gras, les listes et les polices sont disponibles dans sa barre d'outils. Pour ce premier essai, du texte brut suffit largement. Refermez la fenêtre du bloc. Le graphe affiche maintenant deux blocs reliés par un fil. ✅ --- ## 5️⃣ Sauvegarder — à la main, maintenant ⚠️ **Celestory ne sauvegarde jamais tout seul.** Il n'y a aucune sauvegarde automatique, aucun enregistrement périodique en tâche de fond, et **aucun avertissement si vous fermez l'onglet**. Le navigateur vous laissera partir sans un mot, et tout ce que vous venez de faire disparaîtra. Deux façons de sauvegarder, elles font la même chose : - le bouton **disquette** de la barre du haut (son infobulle dit : *« Sauvegarder le graphe dans le cloud. »*) ; - le raccourci **`Cmd+S`** (`Ctrl+S` sous Windows). Un bandeau *« Sauvegarde du projet… »* apparaît, puis un bandeau vert **« Project saved »** — oui, en anglais, même dans une interface en français. Tant que vous n'avez pas vu ce bandeau vert, rien n'est à l'abri. ⚠️ Le raccourci est ignoré tant que votre curseur est dans un champ de saisie (comme le champ `texte` de l'Alerte) : cliquez d'abord sur le graphe, puis faites `Cmd+S`. 🔺 Prenez tout de suite l'habitude du `Cmd+S` après chaque changement qui vous a coûté un effort. C'est le seul filet de sécurité qui existe. --- ## 6️⃣ Jouer Cliquez le bouton **Jouer le module courant** (icône ▶, en haut à droite de la barre). Son infobulle annonce `Maj+P`, mais ce raccourci ne fait rien : cliquez sur le bouton. Deux fenêtres s'ouvrent : - **Tester en jouant** — le lecteur lui-même, une fenêtre au format téléphone (360 × 680 pixels, le format portrait par défaut de tout nouveau projet) ; - **Débogue** — un petit panneau à droite, avec trois onglets : **Général**, **Variables**, **Affichage**. Votre phrase doit apparaître dans le lecteur. 🎉 Puis plus rien : c'est normal, la sortie du bloc Alerte n'est reliée à aucune suite, donc l'histoire s'arrête là. Vous venez de construire, de bout en bout, une expérience Celestory qui fonctionne. 🔺 **Deux façons de jouer, à ne pas confondre.** Le clic direct sur le bouton lance **« Jouer le module courant »** : il démarre *directement* au bloc Départ et saute complètement vos menus. Si vous survolez le bouton sans cliquer, un petit menu propose en plus **« Ouvrir le menu Menu principal »** : celui-là affiche votre écran d'accueil, avec son bouton **Démarrer**, comme le verra un vrai utilisateur. Testez les deux : ils ne racontent pas la même chose. 🔺 Bonne nouvelle au passage : le lecteur joue **l'état actuel de votre éditeur**, pas la dernière version sauvegardée. Vous n'avez donc pas besoin de sauvegarder pour tester. Vous avez besoin de sauvegarder pour **ne pas perdre** ce que vous testez. --- ## 🧱 Le mur : « j'ai appuyé sur Jouer et il ne se passe rien » C'est le mur annoncé en introduction, et il est presque inévitable si vous avez ajouté votre bloc autrement que par le fil tiré dans le vide. **Le symptôme.** Vous cliquez Jouer. La fenêtre s'ouvre, le décor par défaut s'affiche… et rien d'autre. Pas de texte, pas de bouton, pas de message d'erreur. Si vous êtes passé par le menu d'accueil, le bouton **Démarrer** répond bien — l'écran devient simplement vide. **La cause.** Le bloc **Départ** n'est relié à rien. Celestory sait par où commencer, mais n'a aucune idée de ce qui vient après, alors il ne fait rien. Un bloc posé sans être branché est un bloc mort. ⚠️ **Et surtout : personne ne vous le dira.** Celestory sait détecter trois erreurs de compilation — aucun bloc de départ, plusieurs blocs de départ, un type de bloc introuvable — mais ces erreurs ne sont affichées **dans aucune interface**. Elles ne partent que dans la console technique du navigateur, que vous n'avez aucune raison d'ouvrir. Le silence n'est donc pas le signe que tout va bien : c'est juste du silence. **Le diagnostic en trois secondes.** Deux réflexes, dans cet ordre : 1. **Regardez les triangles.** Sur le bord droit du bloc Départ, un triangle **creux** signifie : rien ne part d'ici. C'est votre réponse. 2. **Lisez la fenêtre Débogue**, onglet **Général**. Elle affiche **« Bloc courant »** avec son identifiant et son nom. Si elle vous dit obstinément que le bloc courant est `start`, c'est que la lecture n'a jamais avancé d'un pas. Le bouton **« Centrer la vue sur le bloc »** ramène même le graphe pile sur le coupable. **La correction.** Faites glisser un fil du triangle du bloc Départ jusqu'au triangle d'entrée (à gauche) de votre bloc Alerte. Relancez. C'est réglé. 🔺 Ce mur-là est le premier d'une petite famille de pannes qui ne disent pas leur nom. Une fois que votre premier écran fonctionne, l'article **Quand rien ne marche, et que rien ne le dit** recense les suivantes : décors qui ne se chargent pas, répliques invisibles, histoires qui se figent. Gardez-le sous la main, mais pas avant d'avoir fini celui-ci. --- ## ✅ Le récapitulatif en six gestes 1. **Nouveau projet** → un nom → **Créer**. (Pas de choix de modèle : ce sera un Chatbot.) 2. Constater qu'il y a **un seul bloc**, trois menus, et rien d'autre. 3. **Tirer un fil** depuis le triangle du bloc Départ vers le vide → **Alerte (in)**. 4. **Double-cliquer** le bloc Alerte → écrire sa phrase dans le champ `texte`. 5. **`Cmd+S`** → attendre le bandeau vert. 6. Cliquer **Jouer le module courant** → lire sa phrase à l'écran. Si un jour un projet refuse de démarrer, remontez cette liste à l'envers : neuf fois sur dix, la réponse est à l'étape 3. --- → Prochaine étape : vous avez relié deux blocs sans vraiment regarder ce que vous faisiez. L'article **Relier deux blocs : le fil, les triangles et les cercles** explique ce que ces formes signifient, ce qui peut se brancher sur quoi, et pourquoi certains fils sont refusés. 🔗