Développements avancés

Node.js & Vue.js

Cédric BRASSEUR

Mis à jour le 18/05/2025

Cédric BRASSEUR

Ancien étudiant de l'Exia.cesi
4 ans consultant chez Amaris, placé chez Euro Information Dev
Auto-entrepreneur depuis début 2020 (Création de sites web, applications mobiles & formateur)

Et vous ?

Nom, prénom
Etudes réalisées
Connaissances sur node & vue
Autres infos appréciées

Plan du cours

Node.js
- Les cas d'utilisation de Node.js
- Installation et mise en place du premier projet Node.js (utilisation de npm,...)
- Les bases de Node.js
- Mise en place d'une API avec Node.js
Vue.js
- Les cas d'utilisation de Vue.js
- Installation et mise en place du premier projet Vue.js
- Les bases de Vue.js
- Mise en place d'une Todo App avec vue.js
Interagir avec son API avec Vue.js et axios
Réaliser des développements plus avancés avec Firebase / Firestore
Sécuriser son API avec de l'authentification (si le temps le permet)
Exercices tout au long de la formation

Node / Vue

Objectifs de la formation

Renforcer son expertise dans un langage de programmation
Créer une application type client / serveur
Communiquer avec une API REST
Mettre en place un système d’authentification sécurisé

Node.js

Les bases

Node est un environnement d'exécution permettant d'interpréter le JavaScript côté serveur.

Node est souvent utilisé dans le domaine de l'API mais il peut être utilisé de plein d'autres façons. Des applis webs, des services de streaming,...

Node - Cas d'utilisations

Installez Node : https://nodejs.org/en/download

Node - Installation et premier projet

Pour vérifier que l'installation s'est bien passée, dans votre terminal tapez :

node -v

Initialiser un projet node

Node - Installation et premier projet

Créer un fichier index.js (vide pour l'instant)

Puis démarrer votre serveur node avec npm

node .\index.js

npm init

Le langage Node.js est un langage à types dynamiques. Voyons quelques bases ensemble afin de bien pouvoir démarrer.

- Les variables

- Les fonctions / méthodes

- Les objets javascript inline

- Exporter un module

- Importer / utiliser un module

- Explications rapides de l'asynchronisme

Node - Les bases

Une variable n'a donc pas de type et est souvent noté via deux notations différentes : let ou const.

let : Permet d'initialiser une variable avec une valeur et pouvoir la modifier par la suite
const : Permet d'initialiser une variable avec une valeur sans pouvoir la modifier par la suite

Node - Les bases

Les variables

Il est possible de variabiliser une fonction ! Nous verrons un exemple plus tard...

De même une fonction n'a pas de type de retour. Si un return est fait dans la fonction quelque chose sera retourné, sinon la fonction ne retourne rien.

Node - Les bases

Les fonctions

On voit deux fonctions appelés de manière différente (l'une en normal, l'autre en inline).
Possibilité de passer des paramètres et retourner des éléments si besoin.

Nous n'allons pas faire d'orienté objet de manière pure et dure dans ce cours, même si c'est possible avec Node.js. Nous n'allons utiliser que des objets dits objets inline (non déclaré, ils vont permettre de passer des arguments sous forme de fonctions)

Node - Les bases

Les objets inline JavaScript

Exemple ici, nous créons un objet avec cette structure (json)

{
	id: 1,
    name : "name",
    sub : {
    	"newProperty" : "new property"
    }
}

On peut vérifier si un objet est null ou vide avec !data directement.

On peut rajouter des propriétés directement à l'objet passé

Lorsque l'on développent en node.js, nous allons utiliser plusieurs fichiers. Pour cela, il nous faut exporter ce qui sera utilisé dans un autre fichier.

Node - Les bases

Exporter un module

En fin de fichier, on met un module.exports avec un objet contenant la liste des fonctions et / ou variables que l'on veut exporter (ici, 5 fonctions et 1 variable)

Il est nécessaire d'importer les modules afin de les référencer sur la page dans lesquels nous voulons les utiliser.

Node - Les bases

Importer un module

En fin de fichier, on met un module.exports avec un objet contenant la liste des fonctions et / ou variables que l'on veut exporter (ici, 5 fonctions et 1 variable)

Attention,
Le chemin est à adapter en fonction d'où se trouvent vos fichiers l'un par rapport à l'autre...

De nombreuses fonctions sont codés pour être asynchrones en node.js. Des adaptations sont à comprendre pour le faire fonctionner.

Node - Les bases

L'asynchronisme (base des bases...)

Déclaration d'une méthode asynchrone qui retourne une Promise (objet d'asynchronisme en node.js)

Appel correspondant

De nombreuses fonctions sont codés pour être asynchrones en node.js. Des adaptations sont à comprendre pour le faire fonctionner.

Node - Les bases

L'asynchronisme (base des bases...)

Les mots clés async / await

Comme vu précédemment, il est possible d'appeler otherAsyncFunction avec les opérateurs .then et .catch pour en interpréter le retour. Mais c'est aussi possible avec le mot clé await.

La différence réside dans la gestion d'erreur à traiter soit même dans l'appelant ici.

La méthode .map() sert à transformer chaque élément d’un tableau pour créer un nouveau tableau.

Node - Les bases

Opération map

Elle peut également être utilisée pour itérer sur un ensemble d'éléments

La spread syntax (...) permet de copier ou étendre un tableau ou un objet.

Node - Les bases

Spread syntax

Ceci peut être également réalisé sur un objet pour en modifier une seule propriété (pratique pour dupliquer un objet sans en changer l'id par exemple)

Démonstration, les bases de node...

Node - Demo

Documentation Node

(Je n'aime pas cette doc... Mais bon)

Node - Demo

Le but de cet exercice est de pratiquer un peu les bases de Node.js vu ensemble

Installez node
Initialiser un projet node
Créer un index.js contenant votre code node
Créer des variables, fonctions, exports, import... (Le sujet importe peu)
Créer des objets inline à passer en paramètre d'une fonction par exemple
Réalisez des imports et des exports de méthodes entre deux fichiers.
Testez un peu l'asynchronisme et posez des questions !

Node - Exercice

Premier exercice...

Envoyer workshop_node.md

Nous allons faire le corrigé de l'exercice ensemble afin d'avoir une base commune entre chaque exercice (N'hésitez pas à partir sur votre code et l'adapter si nécessaire !)

Node - Demo

Node.js

Les tests unitaires

Node - Les tests unitaires

Un test unitaire est utilisé afin de pouvoir vérifier atomiquement que chaque élément de notre code. On va donc vérifier que le code produit bien le résultat attendu.

A savoir :

Systématique pour chaque projet !
Réfléchir efficacement à ce qui doit être testé, inutile de tester si 1 + 1 = 2.
Test Driven Development (TDD): Méthodologie récente visant à démarrer ses développements par des tests unitaires

Jest est un des framework les plus utilisés en javascript (ou ses concurrents Mocha, ou Vitest)

Rien de bien complexe:

On installe le package jest npm install jest --save-dev
On créer un dossier __tests__
On y créer un fichier index.spec.js
Et on y développe les différents tests unitaires !

Jest

On utilise describe pour englober un ensemble de tests cohérents ensemble :

Jest

describe('SampleCode', () => {
  // ... Nos différents tests ici
})

On peut utiliser le mot clé it pour créer un test et avec le mot clé expect, on peut faire une vérification :

it('returnNumberPlusThree should return number plus three', () => {
  	expect(returnNumberPlusThree(5)).toBe(8)
})

Le mot clé test existe aussi, mais il est plus utilisé pour vérifier un ensemble, une fonctionnalité (mais ça fait la même chose) :

test('returnNumberPlusThree should return number plus three', () => {
  	expect(returnNumberPlusThree(5)).toBe(8)
})

On peut également avoir des paramètres à nos tests, dans cet exemple, nos tests vont se lancer 3 fois avec les 3 paramètres différents :

Jest

it.each([
  [0, 3], // Minimal value
  [20, 23], // Random value between
  [100, 103], // Maximal value
])('should return number plus three', (input, expected) => {
  expect(returnNumberPlusThree(input)).toBe(expected)
})

L'objectif est très souvent de tester les bornes minimales et maximales ainsi qu'une valeur au milieu. Dans l'exemple précédent, 0 est le minimum, 100 le maximum.

Mise en place d'un contexte commun à nos différents tests, celui-ci sera donc réinitialisé comme voulu avant chacun des tests du describe :

Jest

const {
	add, 
	substract,
	multiply,
	divide
} = require('../calculator')

describe('Calculator test suite with context for each tests', () => {
	let context

	beforeEach(() => {
		// It doesn't malke so much sense here, but
		// We could use beforeEach to add a similar context for a game
		// Starting with 2 players at the position 1 of a board
		context = {
			numberOne: 10,
			numberTwo: 5
		}
		console.log('Before each test')
	})

	it('add method with two numbers should return addition', () => {
		expect(add(context.numberOne, context.numberTwo)).toBe(15)
	})

	it('substract method with two numbers should return substraction', () => {
		expect(substract(context.numberOne, context.numberTwo)).toBe(5)
	})

	it('multiply method with two numbers should return multiplication', () => {
		expect(multiply(context.numberOne, context.numberTwo)).toBe(50)
	})

	it('divide method with two numbers should return division', () => {
		expect(divide(context.numberOne, context.numberTwo)).toBe(2)
	})
})

Pour démarrer ses tests, vous pouvez définir un script qui va lancer vos tests dans votre package.json

Jest

Afin d'exécuter ce script, il suffit de lancer cette commande dans votre cmd :

npm test

Petit workshop pour pratiquer les tests unitaires avec Jest

Jest - Workshop

Envoyer Workshop_jest.md

Node.js & les APIs

avec Express

Une API est un ensemble de points d'entrés que l'on va pouvoir appeler en requêtes HTTP(s) afin de pouvoir communiquer avec un serveur de manière précise et, si c'est bien fait, sécurisé.

Express, une API ?

Voici une simple API publique :

https://api.chucknorris.io/jokes/random

Ceci est donc un point d'entrée pour récupérer une blague random au format JSON (nous y reviendrons)

Définition et exemples

Les échanges se font via des requêtes HTTP. Ces requêtes sont envoyés avec une request (pour identifier la requête et l'utilisateur) encore une fois au format JSON.
La requête HTTP fait le retour d'information via une response, celle-ci aussi au format JSON.

Express, une API ?

La requête HTTP

Et voici un exemple de response...

Express, une API ?

La requête HTTP

Les interfaces - REST

Representational State Transfer

De manière générale, le Web est composé de REST (états et fonctionnalités basées sur des appels d'URL).
En l'occurrence pour notre exemple notre API tournera sur le port 3000 en local (http://localhost:3000/)

GET

HEAD

PUT

DELETE

POST

OPTIONS

Récupération d'un contenu

Comme GET mais pour le header (méta)

Mise à jour de contenu

Ajout de contenu

Suppression de contenu

Retourne les ressources disponibles

Les interfaces - REST

Utilisation de Postman

Postman est un outil de requêtage REST très pratique.

Conseillé sous Windows

Il permet de faire tout type de requêtes et même de paramétrer les headers ainsi que les autorisations ou le payload qui sera envoyé à la requête. Il va nous servir afin de tester nos développements sans avoir à créer de code pour simuler le client.

Les interfaces - REST

Utilisation de Postman

Demo Postman

La structure JSON

{
	"premiereCollectionTableauObject": [
    	{
          "premierObjet" : {
              "nom": "BRASSEUR",
              "prenom": "Cédric",
          },
        },
        {
          "secondObjet" : {
              "nom": "JEAN", 
              "prenom": "Sébastien",
          },
        },
    ],
    "secondNoeudSimpleValeur" : 10,
},

Le JSON permet de stocker des données comme on le souhaite, sous forme de tableaux, d'objets ou de simple association
clé => valeur

Avantages

Lecture rapide et efficace sans accès réseau (potentiellement)
Format lisible par n'importe quel être humain et n'importe quelle machine (OS)
Utilisable nativement avec un grand nombre de technologies
Stockage de différents types de données
Syntaxe simple et efficace
Habituel pour les développeurs (normalement)

Inconvénients

JSON (très utilisé en JavaScript)

Il faut sécuriser soit même les données sensibles
Pas d'identification précise des données (sous forme de balise par exemple), la structure doit donc être connue avant utilisation.
Une erreur de code peut vite détruire l'intégrité de vos données

JSON et Node

Il est possible de travailler directement avec du json lorsque l'on travaille avec node. La syntaxe ressemble grandement à la notation objet inline et c'est celle ci que nous utiliserons dans la plupart des cas.

Par exemple, importer un fichier .json nous permet d'avoir le contenu json directement sous forme d'objet en node.

Fichier animals.json à la racine

JSON et Node

Dans l'autre sens...

Permet d'écrire les objets du tableau dans un fichier json

Express est un framework permettant de nous simplifier grandement la création de route (minimal API).

Nous allons créer des endpoints qui seront les points d'accès au backend de notre application.

Express, une API ?

Express, c'est quoi ?

Pour info, même si Express n'est plus maintenu, il reste encore très utilisé dans le monde de l'API node (A vérifier, mais il semblerait que Express soit toujours maintenu)

Un projet de continuité d'express existe : Fastify. Fastify, c'est express à la base et ça continue d'être maintenu.

Vous avez sûrement compris, nous allons utiliser npm pour installer node. (Commande à exécuter à la racine du projet, là où se trouve votre package.json)

Express, une API ?

Installer le package node

npm install express

Vous avez sûrement compris, nous allons utiliser npm pour installer node. (Commande à exécuter à la racine du projet, là où se trouve votre package.json)

Initialiser express

L'API doit continuer de tourner pour qu'elle puisse être appelée. Bien qu'il suffise d'un appel à la commande ```node index.js```, il est nécessaire d'indiquer à notre programme ce qu'il doit écouter et sur quel port le faire.

Express, une API ?

Ecouter / Attente des appels des endpoints

Ceci va indiquer à node de continuer d'écouter les appels effectués en local sur le port défini précédemment (3000 pour notre cas)

Maintenant, il ne reste plus qu'à définir les endpoints...

Express, une API ?

Premières routes

Ici, on défini une nouvelle
route '/' (racine) en GET.

res.status(404).send
permet de renvoyer une response d'erreur

res.send(animals)
renvoie la liste des animaux
en JSON et statut 200

Notez deux choses : Le paramètre get est directement dans req.params.id (et non req.body) & nous vérifions toujours si il y a un animal à renvoyer sinon nous envoyons un message d'erreur.

Express, une API ?

Premières routes avec paramètre get

Pour gérer les problèmes de cors, nous avons deux moyens pour le développement. Le premier étant d'utiliser un package nommé cors, installable vie npm.

Express, une API ?

Un problème de cors ?

Ensuite, il suffit d'appeler la méthode pour l'initialiser dans l'app.

Le second moyen est d'ajouter une extension dans le navigateur, personnellement j'utilise celle-ci

Avec une requête HTTP, on l'a vu, on peut envoyer des données associées à la requête. Il est possible d'accéder à ces données (payload) en utilisant un autre package nommé body-parser

Express, une API ?

Gérer le body d'une requête

Ce package va permettre d'accéder directement au payload dans le paramètre request associé à la route.

Donc dans req.body sur l'exemple ci-dessous :

Un exemple de requête POST avec des paramètres dans le body de la requête.

Express, une API ?

Les autres types de requêtes...

Un exemple de requête DELETE avec un paramètre id dans la requête

Express, une API ?

Les autres types de requêtes...

Démo express + Postman

Express - Demo

Documentation Express

Envoyer exercice workshop_express.md

Node - Exercice

L'architecture Client / Serveur

Architecture Client / Serveur

L'architecture Client / Serveur est plutôt simple, il y a plusieurs clients (dans notre cas, des navigateurs d'utilisateurs) et un serveur.
Le navigateur fait tourner le front (visuel) de l'application.
Le serveur contient la logique métier de l'application.
La communication se fait entre les deux via des requêtes http.

Serveur

Client

Requêtes HTTP(s)

Données json

Architecture Client / Serveur

Voici le schéma de ce que nous allons mettre en place au fur et à mesure de l'avancement de la formation et de l'exercice sur la todo app.

Pour l'instant, nous n'avons que mis en place l'API avec express

Nous rajouterons l'authentification et l'utilisation de Directus

Vue.js

Vue.js est un framework de JavaScript permettant de construire des interfaces (front)

Quelques exemples de projets utilisant vue :

Gitlab
Sandbox
Nintendo...

Vue.js - Cas d'utilisation

Code sandbox

Une réalisation perso

Vue est utilisé pour de nombreux frameworks, comme Quasar qui est de plus en plus utilisé aujourd'hui.

Vue.js - Cas d'utilisation

Vuetify

Des infos sur ces frameworks

Vue.js - Cas d'utilisation

Nuxt est un framework basé sur Vue.js qui facilite la création d'applications web, avec rendu côté serveur, routing, génération statique et SEO optimisé...
Vite est un bundler moderne ultra-rapide qui offre un serveur de développement avec hot reload et un build performant.
Next est un framework React pour développer des applications web avec rendu côté serveur, génération statique et API intégrées.
Quasar est un framework Vue.js qui permet de créer des applications web, mobiles et desktop à partir d’un seul codebase avec bcp de composants
Vuetify est une bibliothèque de composants UI pour Vue.js qui permet de concevoir rapidement des interfaces propres.

Vue.js - Installation et premier projet

Ici également nous allons utiliser npm pour créer le projet vue

Créer le projet vue

npm create vue@latest

Initialiser les dépendances

npm update
npm install

Démarrer son projet

npm run dev

Regardons un peu le contenu déjà proposé...

Le template est l'élément parent de tout page vue, l'objectif étant l'encapsulation et la possibilité d'utiliser des particularités de vue dans les balises (que nous verrons plus tard dans ce chapitre)

Vue - Les bases

Le template

Comme une page HTML classique, nous pouvons utiliser des balises HTML afin de définir les éléments qui vont composer notre page. h1, h2, header, footer, div, p,...

Vue - Les bases

Le HTML

Il existe plusieurs manières d'ajouter du css à notre page en général on utilise un fichier main.css pour le css global de notre page (et éventuellement un base.css pour les éléments de base). Et il suffit de l'importer dans le fichier vue (ici, mon main.css est dans src/assets)

Vue - Les bases

Le CSS

Il est aussi possible d'appliquer le css à un composant (ou une page) directement sans impacter l'intégralité de l'application.

Afin de pouvoir travailler en direct avec les éléments vue, il est possible de mettre en place un store qui sera un élément essentiel de notre utilisation de vue.

Vue - Les bases

Le "store"

Vue fonctionne avec un workflow dont il faut connaître certains aspects...

Vue - Les bases

Le workflow

Cliquer ici pour plus de détails

Vue - Les bases

Les data

Les data sont les données qui seront intégrées par vue afin de pouvoir les rendre dynamique sur la page.

Ces données sont accessibles de plusieurs manières dans notre balise template contenant nos tags HTML, exemple le plus simple :

Vue - Les bases

Les méthodes

Les méthodes sont définies dans le script de la page vue et peuvent être utilisées directement associée à des boutons par exemple...

Ici, nous avons deux méthodes accessibles, par exemple depuis l'action d'un bouton

A noter que les données (de data) qui sont reverse sont automatiquement modifiées sur la page sans avoir à recharger la page

Vue - Les bases

Les computed

Les computed sont des éléments calculés sur la page (toujours liés au data) qui sont rafraîchies en fonction de l'évolution du state de la page (des données dans data)

Vue - Les bases

Mounted

Comme on l'a vu sur le workflow de vue, les données sont rechargés à chaque fois en suivant un workflow, par exemple mounted permet de réaliser des opérations à chaque fois que la page est montée (Génération du DOM de la page)

Vue - Les bases

Updated

Comme on l'a vu sur le workflow de vue, les données sont rechargés à chaque fois en suivant un workflow, par exemple updated permet de réaliser des opérations à chaque fois qu'une donnée est modifiée sur la page

Vue - Les bases

Les v-if

Il est possible de conditionner l'affichage d'un tag html avec v-if, prenons un exemple :

La span s'affichera uniquement si la tâche a la propriété isDone à terminée.

N'oubliez pas le todo pour accéder aux propriétés de chaque élément mis dans la liste à puce

Vue - Les bases

Les v-if / v-else-if / v-else

Voici un exemple plus complet avec les trois possibilités de conditions que l'on peut enchaîner dans notre page vue.

N'oubliez pas le todo pour accéder aux propriétés de chaque élément mis dans la liste à puce

Vue - Les bases

Les v-for

Il est possible de boucler l'affichage d'un tag html avec v-for, prenons un exemple :

Ceci permettra d'afficher autant de liste à puce que notre "todoList" contient d'éléments.

Vue - Les bases

Les :class

Nous pouvons conditionner les class CSS données à un tag également...

La class CSS done est ajoutée à toutes les todo qui ont un isDone à true.

Ces class sont souvent (mais pas obligatoirement) définies dans la balise style scoped du fichier vue.

Vue - Les bases

Les formulaires

Voyons un exemple de formulaire ou l'on empêche le rechargement de la page directement via @submit.prevent dans le tag du formulaire. (On remplace le rechargement de la page en passant tout de même les données des inputs et on peut appeler une méthode par exemple...)

Ici, on associe le click sur le button submit à la méthode addTodo.
Et on associe un v-model sur l'input afin de pouvoir récupérer la valeur de l'input dans notre méthode addTodo

Vue - Les bases

Un exemple plus complet de store

Vue - Les bases

Un exemple plus complet de store

Il est aussi possible ici d'appeler des méthodes du workflow vu précédemment, comme "mounted" par exemple...

Démonstration Vue.js

Vue.js - Demo

Documentation Vue.js

Vue.js - Documentation

Vue.js - Exercice

Envoyer le fichier workshop_vue.md

Interactions Node.js & Vue.js

avec axios

Axios - L'import

Axios est une librairie JavaScript qui permet de réaliser des requêtes HTTP de manière assez fluide depuis notre application.

Il faut d'abord installer axios avec npm

npm install axios

Ensuite, il faut importer axios

Axios - Les http requests

Axios propose des méthodes get, delete, post, patch,... Pour créer des appels HTTP (client http) afin de pouvoir récupérer les résultats d'une API.
Voici un exemple avec du get, du delete et du post...

Attention, les méthodes sont asynchrones !

Axios - L'adaptation du code vue

Import et utilisation dans Vue.js

Démonstration Axios

Axios - Demo

Documentation Axios

Axios - Documentation

Exercice - Axios

Envoyer le workshop_axios.md

Les composants

(Vue.js)

Un des avantage de vue est de pouvoir séparer le code en composants custom réutilisables.

Vue.js - Les composants

Image de la doc vue

Un composant offrant la possibilité d'être appelé plusieurs fois avec par exemple une valeur différente.

Prenons un exemple en créant une carte pour chaque animal présent dans la liste d'animaux.

Il est utilisé depuis le template parent de cette façon

Vue.js - Les composants

On l'importe dans le parent pour le rendre accessible dans son template. L'import en début de script et dans le template du parent on appelle le composant

Il est possible de partager des valeurs de manière descendante à nos composants, ce sont les props.

Vue.js - Les composants

Les props

Ici, elles sont définies à droite :animal="animal" signifie que je vais envoyer un objet animal à AnimalCard et ce sera fait autant de fois qu'il n'a été remonté d'animaux dans le parent.

Le code du composant

Parfois nous voulons binder des éléments d'enfant vers leurs parents

Vue.js - Les composants

Les v-model

La data message du parent est maintenant liée aux modifications réalisées dans le composant

Le code du composant

Il est aussi possible de déclencher des events depuis le code de l'enfant pour que ces events soient écoutés par le parent

Vue.js - Les composants

Les events

Le code du parent

Le parent reçoit l'évenement et défini ce qu'il veut faire comme opération dans ce cas (ici, il met à jour la liste d'animaux)

Démo - Les composants vue

Démonstration

Exercice - Les composants vue

Envoyer le workshop_components.md

Exercice - Les composants vue

Corrigé du workshop

Nuxt

Framework Vue.js

Je conseille vivement d'utiliser Nuxt pour ses nombreux avantages https://nuxt.com/

Nuxt

Nous ne verrons pas comment utiliser Nuxt durant cette formation, mais la documentation est excellente !

✅ Rendu côté serveur (SSR) facile à mettre en place pour de meilleures performances et un bon SEO.
✅ Génération de site statique possible (SSG), idéale pour le déploiement sur des hébergements statiques.
✅ Routing automatique basé sur la structure des fichiers dans pages/.
✅ Gestion centralisée des métadonnées SEO via head() ou useHead().
✅ Prise en charge de Vue 3 et de Composition API (depuis Nuxt 3).
✅ Support TypeScript intégré et bien documenté.
✅ Plugins et middleware faciles à configurer pour ajouter des fonctionnalités globales.
✅ Modules Nuxt (auth, i18n, PWA, etc.) qui accélèrent le développement.
✅ Expérience DX (Developer Experience) fluide avec hot reload.
✅ Écosystème actif et communauté dynamique avec une documentation riche.

Directus

Directus - Présentation et documentation

Directus est un headless CMS qui offre de nombreuses fonctionnalités intéressantes pour les développeurs, par exemple :

Interface administrateur complète
Gestion de la géolocalisation
Gestion des collections et des données
Gestion des utilisateurs et authentifications
Sécurisation de vos routes
API intégrées
...

Directus documentation

Directus - Initialisation du projet

Pour utiliser Directus, nous avons besoin de quelques prérequis. Pour commencer, Directus nécessite d'utiliser une version de Node 22+

Pour ceci, nous allons utiliser NVM : Cliquer sur ce lien pour en savoir plus. (N'oubliez pas de redémarrer VSCode après installation de nvm)

Vous pouvez utiliser les commandes suivantes pour installer la version 22.11.0 de node

Prérequis

nvm install 22.11.0
nvm list
nvm use 22.11.0

Directus - Initialisation du projet

Directus s'installe dans un nouveau dossier vide et la commande a exécuter est la suivante

Initialisation

npm init directus-project@latest {project-name}

Nous aurons quelques choix à faire et pour la base de donnée, je vous conseil d'utiliser MySQL qui nécessite le moins de configuration et propose toutes les fonctionnalités de directus (même la géolocalisation). Bien entendu, ceci nécessite d'avoir MySQL en local (via wamp par exemple)

Vous aller devoir créer un compte admin pour directus, mettez ce que vous voulez mais retenez le bien (moi, j'ai mis admin@example.com / Admin123-)

Créez votre base de données sur MySQL vous même, directus ne le fait pas par défaut (en cas d'erreur, voir slide suivante)

Directus - Initialisation du projet

Erreur possible avec MySQL

Dans ce cas, c'est que l'encodage pour votre base ne correspond pas et qu'il y a un problème de nombre d'octets pour une clé spécifique de directus.

Dans ce cas, créez votre base via une commande SQL.

CREATE DATABASE db_name CHARACTER SET utf8 COLLATE utf8_general_ci;

Directus - L'accès admin

L'un des gros avantages de Directus est le panel admin pour administrer votre projet et votre base de données.
Pour démarrer Directus en local, utiliser la commande suivante :

Accès au panel admin

Si l'instance directus est lancée, vous devriez y avoir accès ici : http://localhost:8055/admin/login

L'un des gros avantages de Directus est le panel admin pour administrer votre projet et votre base de données.

npx directus start

Directus - L'accès admin

Nous allons prendre un peu de temps pour faire le tour du panel admin afin de :

Créer des collections
Créer un rôle User
Gérer les accès du rôle user
Créer un utilisateur
Gérer les permissions de manière filtrée
Et nous accèderons en direct à la base de données MySQL via l'extension VSCode "MySql" par Weijan Chen

Le panel admin, petit tour d'horizon

Directus - L'API Directus

Comme expliqué plus tôt, Directus propose une API intégrée qui respecte les droits que nous avons mis en place sur notre rôle, pour l'instant, nos requêtes http seront faites sur le rôle public (N'oubliez pas de gérer les rôles)

Documentation

N'hésitez pas à regarder la doc Directus elle est très bien faite.

Voici le lien

Directus - L'API Directus

Il est possible d'effectuer énormément d'opérations directement avec cette api, voyons en quelques unes...

GET

Pour récupérer des données de la collection animal, vous pouvez appeler le endpoint suivant : http://localhost:8055/items/animal

Notez le /items/ permettant d'accéder à vos collections.

Filtered GET

Nous pouvons également filtrer les données par exemple : http://localhost:8055/items/animal?filter[species][_eq]=Dog

Récupère tous les chiens dont species est égal à Dog.

Liste des opérateurs existants ici

Directus - L'API Directus

Il est possible d'effectuer énormément d'opérations directement avec cette api, voyons en quelques unes...

POST

Pour ajouter des données, c'est le même endpoint http://localhost:8055/items/animal

Il suffit de données un body contenant les données que l'on veut insérer dans la collection.

Si vous ne mettez pas les données marquée en "required" en base de données, vous recevrez une erreur "FAILED_VALIDATION".

Directus - L'API Directus

Il est possible d'effectuer énormément d'opérations directement avec cette api, voyons en quelques unes...

DELETE

Pour supprimer des données, c'est le même endpoint en rajoutant l'id http://localhost:8055/items/animal /{id}

Il est aussi possible de donnée un body afin de filtrer les données que l'on souhaite supprimer, par exemple ce body permet de supprimer toutes les espèces égale à Dog

{
    "query": {
        "filter": {
            "species": {
                "_eq": "Dog"
            }
        }
    }
}

Directus - L'API Directus

Il est possible d'effectuer énormément d'opérations directement avec cette api, voyons en quelques unes...

PATCH

Pour modifier des données, c'est le même endpoint en rajoutant l'id http://localhost:8055/items/animal /{id}

Pensez bien à mettre un endpoint en type PATCH avec un body contenant vos modifications.

{
    "species": "Cat",
    "sound": "Meow",
    "description": "Want to take over the entire world !",
    "status": "published"
}

Directus - Création de compte

Il est possible d'effectuer énormément d'opérations directement avec cette api, voyons en quelques unes...

Create user

Pour ajouter un utilisateur, vous devez ajouter le droit au rôle public en création sur la collection system directus_users

Cliquer sur "System Collections" et autoriser l'ajout d'utilisateur comme ceci

Directus - Création de compte

Il est possible d'effectuer énormément d'opérations directement avec cette api, voyons en quelques unes...

Create user

Un utilisateur a minimum besoin d'un email et d'un mot de passe (le mdp sera hashé directement par Directus).
Pour créer un utilisateur, vous pouvez appeler le endpoint en POST : http://localhost:8055/users

Avec un role (si vous en avez créer un)

{
  "email": "cdric.brasseur@gmail.com",
  "password": "Azerty123-",
  "role": "fc3bae1e-3506-4c47-812c-ad46c22cee2e"
}

Voici un exemple de body

Directus - Authentification

Il est possible d'effectuer énormément d'opérations directement avec cette api, voyons en quelques unes...

Authenticate user

Vous pouvez authentifier un utilisateur avec le endpoint en POST également : http://localhost:8055/auth/login

Il faut un email et un password dans le body

{
    "email": "cdric.brasseur@gmail.com",
    "password": "Azerty123-"
}

Voici un exemple de body

La réponse contiendra 3 éléments

Directus - Le token

Il est possible d'effectuer énormément d'opérations directement avec cette api, voyons en quelques unes...

Utiliser le token

Pour réaliser une requête HTTP en étant authentifié, il suffit de rajouter un header Authorization en bearer token avec le token récupéré précédemment.

Ceci permettant d'identifier l'utilisateur réalisant la requête (afin de pouvoir gérer les droits et rôles de l'utilisateur)

Directus - Endpoint custom

Nous pouvons aussi créer nos endpoint custom (ce qui est très fréquent dans un monde réel afin de vérifier les entrées utilisateur)

Pourquoi créer un endpoint custom ?

La mise en place d'un endpoint custom est souvent nécessaire pour des endpoints particuliers comme :

Développer un endpoint qui utilise un service tier (service de paiement pas exemple)
Développer un endpoint nécessitant des validations particulières
Développer un endpoint avec des objectifs multiples et couplés (par exemple une modification de plusieurs collection en un seul endpoint)
Développer tout ce qui n'est pas possible via l'API basique

Directus - Endpoint custom

Créer un endpoint custom

Pour créer un endpoint custom, utilisez le créateur d'extension de directus. Placez vous dans le dossier extensions de votre projet Directus.

npx create-directus-extension@latest

Choisissez endpoint et suiviez les instructions. Ceci va vous créer un dossier au nom du endpoint choisi et un sous dossier "src". Dans ce sous dossier, vous avez un fichier index.js

export default (router) => {
  router.get('/', (req, res) => res.send('Hello, World!'))
}

Buildez votre extension (cd extensions, puis npm run dev). Puis redémarrez votre directus avec npx directus start.
Enfin vous aurez accès à votre custom endpoint via

http://localhost:8055/custom-endpoint-name

Directus - Endpoint custom

Créer un endpoint custom

De la même façon, il est possible de créer des endpoints avec des sous routes.

export default { 
	id: 'hello', handler: (router) => { 
		router.get('/', (req, res) => res.send('Hello, World!')) 
		router.get('/intro', (req, res) => res.send('Nice to meet you.')) 
		router.get('/goodbye', (req, res) => res.send('Goodbye!')) 
	}, 
}

En réalisant les mêmes étapes de build et de redémarrage de Directus que la slide précédente, vous aurez accès aux endpoints aux URL suivantes :

Directus - Endpoint custom

Custom Endpoint Documentation

La documentation peut vous apporter des informations complémentaires sur ce qu'il est possible de faire dans un endpoint custom, n'hésitez pas à la parcourir !

Directus - Les autres extensions

Extension Creation Documentation

Il existe de nombreux autres types d'extensions qui peuvent être utiles avec Directus...

Par exemple

hooks : Permet d'ajouter une logique custom lors d'un évènement sur votre projet
display : Créer un nouvel affichage custom (avec vue.js)
interface : Créer un nouveau moyen d'afficher / interagir avec les champs
layout, modules, operations, panels, themes, bundles,...

Directus - Le sdk

Pour réaliser ces opérations sans passer par axios, il est possible d'utiliser le sdk de Directus

Voir documentation (exemple authentification)

Nous ne couvrirons pas le développement depuis le SDK Directus, mais c'est une façon de faire efficace également. Ce qu'il faut savoir, c'est que vous allez utiliser directement les outils de Directus pour réaliser les appels à votre API, ce qui peut être plus cohérent dans vos développement mais n'apporte apparemment aucune optimisation particulière.

Tout est faisable via le SDK ou via axios.

Directus - Démo

Démonstration

Directus - Exercice

Envoyer le fichier workshop_directus.md

Firebase

Qu'est-ce que Firebase / Firestore

Documentation : https://firebase.google.com/docs/firestore?hl=fr

Firebase - Présentation et documentation

Créer une base firestore
Créer un api web pour ce projet dans firebase
Créer une première collection avec un document de base correspondant
Récupérer les paramétrages de cet api web
Initialiser la connexion à Firestore
Import de Firebase
InitFireStore()
Documentation et montrer des exemples de requêtage de la BDD firestore CRUD classique

Doc firestore

Firebase - Présentation et documentation

Nous allons rapidement voir Firebase / Firestore et si nous sommes en avance, nous pratiquerons un peu. Mais nous nous concentrerons surtout sur Directus pour les fonctionnalités de dév avancées

CRUD avec firestore et une API

Synchronisation des informations entre la BDD et votre / vos fronts

Firebase - Démonstration

Mise en place de Firestore pour la Todo App

(Nous ne ferons surement pas cet exercice, nous nous concentrerons sur Directus, la partie suivante de la formation)

Firebase - Exercice

Evaluations

Partie pratique

BON COURAGE !

(après c'est fini)

Pas d'évaluation sur ce module !

Mais, je vais regarder vos travaux sur ces deux jours afin de pouvoir donner un avis sur vos compétences à votre responsable de promotion

Développement avancés Node.js & Vue.js

By Cėdric Brasseur

Développement avancés Node.js & Vue.js

Formation Fullstack sur la programmation "avancée" avec les langages node.js & vue.js