Contexte

Le Labo Louppe est spécialisé dans la prévention (santé) dans différents secteurs (entreprise, école, ville, hôpital …). Une partie de leur activité consiste à réaliser des outils de communication sur mesure (infographie, sites, support d’expositions …). La société souhaitait acquérir un outil sur mesure leur permettant la création et l’administration de mini-jeux pour leurs clients.

Mission

La création de cette solution a nécessité la recherche de solutions et le développement pour différents besoins :

• Créer et administrer en autonomie les mini-jeux dans un back-office
• Avoir un front-end responsive unique permettant d’être consulté sur téléphone, tablette, pc, télévision tactile…
• Déploiement en ligne des mini-jeux avec mises à jour instantanées
• Déploiement hors ligne sur Raspberry Pi, d’une sélection de mini-jeux
• Stockage de chaque partie et générations de statistiques de jeux en ligne + export PDF

1 - Back-office

1.1 - Besoin

Le client désirait avoir de l’autonomie et un certain degré de customisation dans la création de ses mini-jeux, mais également de pouvoir les administrer facilement.

Les rôles du back-office :

• Création des mini-jeux
• Stockage des données
• Interface d’administration et relation entre les différents services (build, statistiques, back-up …)
• Délivrer le contenu des jeux à travers une API REST

1.2 - Solution

J’ai opté pour la solution que propose Sanity (sanity.io), qui est un headless CMS en ligne, managé qui propose une solution simple, peu couteuse par rapport aux besoins du projet, et offrant une interface claire et fluide. Cette solution m’a permis de construire efficacement une interface personnalisée pour le client, et de pouvoir construire tout autour les workflows de travail. Cette solution a aussi l’avantage de ne pas nécessiter de frais d’entretien et d’hébergement supplémentaire sur l’année, permettant au client d’avoir une autonomie complète et l’assurance d’une haute disponibilité.

1.3 - Réalisations

• Paramétrage des schémas de données et relations
• Création des différentes sections (collection, liste clients, build, génération statistiques …)
• Création de composants React personnalisés en s’aidant du Kit ui disponible
• Build et déploiement via la CLI

1.4 - Technologies

Sanity, React, Typescript, CLI, CSS

2 - Front-end

2.1 - Besoin

Pour une question de simplicité, il était préférable de contenir tout le front-end dans une seule codebase, devant répondre aux différents besoins :

• Mini-jeux animés
• Affichage de n’importe quel mini-jeux
• Adapté à tous les écrans
• Déployable en ligne, alimentée par l’API REST du back-office
• Déploiement unitaire sur Raspberry Pi d’une sélection de jeux, utilisable hors ligne, avec stockage et remontée des parties réalisées.

2.2 - Solution

Pour répondre à ces différents besoins, j’ai opté pour le framework Next.js, qui permet l’utilisation de librairie React, facilitant l’intégration d’animations et de comportement réactifs. Il a également permis la navigation dans les différentes étapes des mini-jeux sans donner au joueur la possibilité de modifier l’état du state à travers la modification éventuelle de l’url.

Le framework a également facilité la création de différents types de déploiement au travers de configurations personnalisées.

Ex: npm run build env MODE=server

Permettant le build du projet de façon traditionnelle, déployable en ligne avec rendu SSR

Ex: npm run build env MODE=static GAME_ID=94fdacb0-7a4e-4b28-2eb-3d5b626102d9,1f6bd60d-fe03-4935-a6a5-1477e5fy6fe4

Permettant de build et d’importer tous les éléments static nécessaires (fonts custom, images, infos jeux …), afin réaliser une image docker utilisable sans connexion.

2.3 - Technologies

Next.js, React, Typescript, Css Module, Zod, Zustand, Tanstack Query

3 - Déploiement

3.1 - Besoin

Nous avions besoin de proposer l’accès aux mini-jeux depuis 2 points d’accès :

• Utilisation en ligne, depuis un smartphone, ordinateur, tablette…
• Hors ligne, déploiement Raspberry Pi, utilisation à travers une Tv tactile

3.2 - Solution 1

Pour l’utilisation en ligne, nous avons fait le choix d’un hébergement sur un VPS OVH. J’ai donc paramétré l’environnement Debian, ainsi qu’un reverse Proxy et le nom de domaine.

3.2 - Technologies 1

Debian, SSH, PM2, Caddy, Let’s Encrypt

3.2 - Solution 2

Pour une utilisation hors ligne sur Raspberry Pi, et pour simplifier au maximum le processus de déploiement pour le client, j’ai décidé d’utiliser Docker. Le workflow étant le suivant :

• Le client crée ses mini-jeux sur le back-office
• Dans l’onglet « Build » il sélectionne la liste des jeux à build
• En appuyant sur le bouton « Build » la CI/CD de Github action est enclenchée, il récupère le repo en local, fetch les données du jeu, télécharge les éléments static et créer un build dans une image Docker
• En retour le client, obtiens une ligne de commande prête à l’emploi qui permet en une ligne de commande dans son Raspberry, d’avoir le projet installé et prêt à livrer.

Pour une installation plus rapide, j’ai également préparé une image pré-installée de Raspbery Pi OS avec les dépendances nécessaires.

3.2 - Technologies 2

Raspeberry Pi, Docker, Github actions, CI/CD, Debian, Balena Etcher

3.3 - Défis rencontrés

• Le client disposant de Raspberry d’ancienne génération avec 1go de Ram, il a fallu tester différentes configurations afin d’obtenir un bon rendu du projet.
• Suite à la mise jour de l’OS, les drivers qui autrefois permettaient d’utiliser leur écran tactile, ont par ailleurs évolués, entrainant des problèmes de compatibilité et des défaillances sur la détection du tactile. Il a donc été nécessaire de retrouver l’origine du problème, en inspectant les changements historiques des drivers qui ont été effectués sur le kernel, afin de pouvoir installer la bonne version de ce dernier.

4 - Analytique

4.1 - Besoin

Le client souhaitait obtenir un rapport des parties effectuées sur les différents jeux, afin de proposer un résumé sous forme de PDF à leurs clients.

4.2 - Solution

Il était d’abord nécessaire de trouver un moyen de stockage en ligne pour ces données, je me suis donc tourné vers MongoAtlas, qui propose des bases de données managées, ainsi qu’un outil Atlas Charts, qui répond parfaitement au besoin. En créant un template général et y injectant des variables (Id du jeux, dates d’exploitations), il était alors possible de générer des statistiques, mis à jour en direct, et permettant un export PDF.

4.3 - Technologies

MongoDB, MongoAtlas Charts

4.4 - Défis rencontrés

• Comme les Raspberry Pi sont hors ligne, il a donc fallu réfléchir à une solution pour stocker temporairement les données des jeux et faire remonter les informations vers la base de donnée. J’ai donc privilégié une option simple : le stockage dans un fichier JSONB en local, et une interface d’export dans le projet, pour faire la synchronisation des données.