Prérequis techniques

Ce qu’il faut connaître

Disons-le franchement : si vous n’avez absolument aucune notion en développement web, NodeCG vous sera difficile d’accès.

Pas besoin d’être un·e pro du développement web, néanmoins je pars du principe que vous avez déjà quelques bases, même très simples, dans les différentes notions que nous allons aborder dans ce guide.

Je pars également du principe que vous êtes prêt·e·s à expérimenter, à chercher par vous-même et à consulter les documentations existantes lorsque vous rencontrez un problème ou un bug.

Si vous souhaitez vous lancer dans l’aventure NodeCG, voici une petite cours express des principales notions que vous rencontrerez au fil de ce guide :

HTML, CSS et Javascript

Le trio classique du web :

HTML décrit la structure d’une page : les textes, boutons, images, conteneurs, etc.
CSS définit son apparence : couleurs, tailles, positions, animations, mise en page…
JavaScript lui donne du comportement : réagir à un clic, modifier une information, récupérer des données…

Ainsi pour ce simple bouton , voici ce qu’il y a sous le capot :

html
<button>Cliquez-moi</button>

css
button {
  background: #ff0000;
  color: white;
  border: none;
  cursor:pointer;
}

JavaScript
button.addEventListener('click', () => {
  window.alert('Bouton cliqué !');
});

Dans NodeCG, vous utiliserez ces trois technologies pour créer vos Dashboards (panneau de contrôle) et vos Graphics (éléments graphiques). Vous devez donc au minimum être capable de lire et de modifier du HTML, du CSS et du JavaScript.

Par exemple, pour un tableau des scores (scoreboard) vous allez créer deux éléments en HTML, CSS, JavaScript : l’élément graphique pour l’overlay et le panneau de contrôle pour changer les noms d’équipe, modifier les scores…

Node.js

Node.js permet d’exécuter du JavaScript en dehors d’un navigateur.

NodeCG s’appuie dessus pour faire fonctionner une partie de son environnement et permettre à vos extensions de faire des choses qu’une simple page web ne peut pas faire.

Pas besoin d’en connaître le fonctionnement en profondeur : il faut surtout comprendre que Node.js fait partie de l’environnement dans lequel NodeCG fonctionne.

npm et package.json

npm est l’outil qui permet d’installer et de gérer les dépendances utilisées par un projet Node.js.

Une dépendance est un logiciel ou une bibliothèque dont votre projet a besoin pour fonctionner ou pour fournir certaines fonctionnalités.

Le fichier package.json décrit quant à lui les informations principales d’un projet et les dépendances dont il a besoin.

Vous les rencontrerez très régulièrement dans NodeCG et dans les projets Node en général.

Le terminal

Vous utiliserez régulièrement le terminal pour installer des dépendances, lancer NodeCG ou exécuter différentes commandes.

Si vous savez vous déplacer dans un dossier et lancer une commande, vous avez déjà les bases nécessaires.

JSON

Le JSON est un format très courant pour représenter et échanger des données.

Vous en rencontrerez notamment dans des fichiers de configuration et lorsque différentes parties de votre projet doivent communiquer entre elles.

Savoir lire et modifier des structures JSON simples sera largement suffisant pour commencer.

Git et GitHub (ou Codeberg)

Git permet de conserver l’historique des modifications d’un projet et de revenir à des versions précédentes.

GitHub est notamment utilisé pour héberger et partager des projets Git. Récemment, je m’intéresse de plus en plus à un équivalent : Codeberg.

Git n’est pas indispensable pour débuter avec NodeCG, mais vous le rencontrerez rapidement, notamment pour récupérer des exemples, des extensions ou des projets existants.

Les API

Une API permet à différents logiciels ou services de communiquer entre eux.

Dans NodeCG, cela peut par exemple permettre de récupérer des données depuis un service externe pour les afficher dans un overlay.

Quelques notions de base autour des requêtes HTTP, du JSON et des API pourront donc être utiles plus tard.

Par exemple, j’utilise NodeCG pour communiquer avec OBS Studio et le contrôler à distance grâce aux APIs dédiées.

Et le reste ?

Vous connaissez peut-être d’autres outils plus avancées : TypeScript, des frameworks JavaScript, des bundlers… Vous pouvez évidemment aller plus loin et intégrer ces outils dans vos projets.

Par exemple, mes projets actuels se basent principalement sur TypeScript, Vite et Svelte.

Mais n’allons pas trop vite, l’essentiel est déjà d’être un peu à l’aise avec HTML, CSS et JavaScript, et de comprendre globalement à quoi servent Node, npm, le terminal, JSON, Git et les API.

Si ces notions sont complètement nouvelles pour vous, je vous recommande de prendre un peu de temps pour découvrir les bases du développement web avant de commencer.

Voici quelques ressources pour découvrir ces différentes notions :

HTML, CSS et JavaScript : MDN - Apprendre le développement Web
Apprendre le JavaScript : Javascript.info
Plein de cours gratuits : FreeCodeCamp

Avant de continuer dans l’installation de NodeCG, je vous propose un petit bundle d’initiation pour commencer rapidement. Téléchargement direct