Comprendre l'arborescence d'un projet NodeCG

Une fois votre projet NodeCG installé, vous allez rapidement rencontrer plusieurs dossiers et fichiers.

Architecture d’un bundle

Un bundle est un projet NodeCG, constitué d’un ensemble de fichiers et de fichiers : les graphics, des dashboards, des scripts qui tournent en fond dans la partie extension et bien d’autres choses…

Dans un bundle simple comme celui que je vous ai fourni, vous trouverez généralement une structure proche de celle-ci après avoir installé NodeCG :

Télécharger le bundle d’initiation

Directorynodecg-initiation/
- Directoryassets/
  - …
- Directorycfg/
  - …
- Directorydashboard/
  - …
- Directorydb/
  - …
- Directoryextension/
  - …
- Directorygraphics/
  - …
- Directorylogs/
  - …
- Directorynode_modules/
  - …
- package.json
- package-lock.json
- Readme.md

Chaque dossier a un rôle précis, passons en revue les plus courants et les plus importants.

graphics

C’est probablement l’un des dossiers que vous utiliserez le plus.

Il contient les pages HTML qui seront affichées dans OBS. Autrement dit, c’est ici que l’on crée ce que le spectateur va voir à l’écran.

Un graphic peut par exemple être :

un tableau des scores
un bandeau avec le nom d’un joueur
un classement
un compteur, un chronomètre ou un compte à rebours
une animation
ou tout autre élément graphique destiné à être affiché à l’écran

Un graphic est donc essentiellement une page web, conçue pour être affichée dans un navigateur (comme celui d’OBS).

Le bundle d’initiation fourni propose notamment un scoreboard.

Nous verrons plus tard comment créer un graphic et comment l’afficher dans OBS.

dashboard

Le dossier dashboard contient les éléments permettant de piloter les éléments graphiques.

On y retrouve notamment les boutons, champs de texte, sélecteurs et autres contrôles utilisés pendant le live.

Par exemple avec le scoreboard fourni : le dashboard peut contenir des boutons permettant d’augmenter ou de diminuer ce score ou des champs pour modifier les noms des équipes.

On modifie alors les informations depuis le Dashboard, et le Graphic peut être mis à jour en conséquence.

extension

C’est une partie particulièrement puissante de NodeCG, mais aussi plus difficile à prendre en main.

Le dossier extension contient du code exécuté côté serveur de votre bundle. Il permet notamment d’ajouter une logique qui ne doit pas être exécutée directement dans le navigateur, de communiquer avec des services externes ou de gérer des traitements plus complexes.

Pour un premier projet simple, vous pourrez généralement commencer sans toucher à ce dossier. Personnellement, je n’ai commencé à l’utiliser que bien plus tard.

Nous reviendrons dessus plus tard, lorsque nous aurons vu les bases de NodeCG.

package.json

Le package.json est un fichier central (et classique) de votre projet Node.js et donc de votre bundle NodeCG.

Il contient notamment les informations permettant à NodeCG de comprendre votre bundle et de gérer son environnement.

On y retrouvera notamment :

le nom du bundle (qui doit être le même que le nom du dossier)
les dépendances du projet
les informations nécessaires à NodeCG pour déclarer vos dashboards
les informations nécessaires à NodeCG pour déclarer vos graphics.

C’est donc un fichier que vous serez amené à modifier régulièrement au fur et à mesure que votre projet grandira. Nous le verrons plus tard, mais quand développerez un élément graphique ou un élément de dashboard, il faudra le déclarer dans ce fichier.

Si vous avez déjà quelques connaissances de l’environnement Node.js, ce type de fichier ne vous sera probablement pas inconnu.

assets

Le dossier assets peut être utilisé pour stocker des ressources statiques de votre projet : images, vidéos, fichiers audio ou autres fichiers qui doivent être accessibles à votre bundle.

Par exemple :

Directorynodecg-initiation/
- Directoryassets/
  - logo.png
  - background.png
  - musique.mp3

Ce dossier peut devenir très utile dans un projet graphique, mais vous n’aurez pas forcément besoin d’y toucher au tout début. Par exemple, quand je crée des bandeaux pour les festivals de podcast, je stocke tous les logos des podcasts dans ce dossier.

Dans le bundle d’initiation, j’ai ajouté une petite illustration, à vous de jouer avec maintenant.

cfg

Le dossier cfg est destiné aux fichiers de configuration de NodeCG.

A vrai dire, je l’utilise quasiment jamais donc vous pouvez le laisser de côté sans problème.

Le fichier que vous trouverez dedans (nodecg.js) est un template que je réutilise à chaque nouveau projet, pas besoin d’y toucher.

Ma seule utilisation de ce fichier est de pouvoir ouvrir NodeCG au réseau local et pouvoir ainsi ouvrir certains éléments sur d’autres appareils du même réseau.

db

Le dossier db est utilisé par NodeCG pour stocker les données persistantes de votre projet, notamment les Replicants (on y reviendra plus tard)

Il contient généralement un fichier de base de données au format .sqlite3 et géré automatiquement par NodeCG. Généralement, il n’y a rien à toucher ici, tout ce qui se passe dans ce dossier est géré automatiquement.

logs

Le dossier logs contient les fichiers de logs générés par NodeCG ou votre environnement. Ils peuvent être utiles lorsqu’un problème survient et que vous cherchez à comprendre ce qui s’est passé.

Au quotidien, vous n’aurez cependant pas besoin d’y aller régulièrement. Pour être franc, il n’y a jamais rien dans ce dossier chez moi, il est souvent crée automatiquement par NodeCG.

node_modules

node_modules est le dossier créé automatiquement par npm lors de l’installation de NodeCG et qui contient toutes les dépendances nécéssaires au projet.

Quand vous faites :

npm install

npm télécharge les dépendances nécessaires et les place dans node_modules.

package-lock.json

Le fichier package-lock.json est également généré et géré par npm.

Il permet notamment de conserver une trace précise des versions des dépendances installées dans votre projet.

Normalement c’est pareil ici, on n’y touche pas.

A retenir

Comme souvent dans les projets Node on a beaucoup de fichiers et de dossiers sous les yeux, mais pour commencer, retenez surtout ces quatre éléments :

graphics → Les éléments graphiques que l’on pourra afficher dans OBS
dashboard → Les petits modules qui vous permettront de piloter le live
extension → Quand vous serez à l’aise, toute la logique serveur et les fonctionnalités avancées
package.json → Le fichier de configuration du bundle