Technologies

Pour réaliser ce projet, plusieurs technologies ont été sélectionnées. L’objectif derrière la conception de Quizine est de mettre en pratique et approfondir les notions que j’ai pu apprendre en formation. Ainsi, certains choix technologiques peuvent sembler plus robustes que nécessaire par rapport aux besoins réels de l’application, mais ils me permettent d’explorer des concepts avancés et de construire une architecture moderne.

Toute application web repose sur deux grands piliers :

Le front-end (ou client) : il correspond à tout ce que l’utilisateur voit et avec quoi il interagit (l’interface graphique et l’affichage des données).
Le back-end (ou serveur) : il gère la logique métier, la communication avec la base de données et le traitement des requêtes envoyées par le client.

Ces deux parties utilisent souvent des technologies différentes, chacune étant optimisée pour ses propres tâches.

Base de données

Le choix d’un système de gestion de base de données (SGBD) dépend des besoins du projet.

SQL ou NoSQL ?

Il existe deux grandes familles de bases de données :

SQL (Structured Query Language) : Données structurées, organisées en tables avec des relations entre elles (exemple : une table « Utilisateurs » liée à une table « Quiz »).
NoSQL (Not Only SQL) : Données non structurées, souvent utilisées pour des applications à très grand volume de données ou pour des besoins plus flexibles (exemple : stocker des documents JSON).

Quizine doit garantir la cohérence et l’intégrité des données (exemple : un quiz doit toujours être lié à des questions valides). Le modèle SQL est donc plus adapté, car il impose des contraintes fortes sur la structure des données.

Quelle base SQL ?

Parmi les bases SQL disponibles, PostgreSQL est de plus en plus populaire, surpassant l’autrefois incontournable MySQL. On peut notamment s’en rendre compte en consultant les résultats du sondage annuel de Stack Overflow sur les technologies les plus utilisées par les développeurs. Celui de 2024 concernant les bases de données est retrouvable ici .

Ses avantages :

Performance et scalabilité : Gère mieux les gros volumes de données.
Respect des standards SQL : Offre des fonctionnalités avancées comme les relations complexes entre les tables.
Sécurité : Meilleure gestion des permissions et de la protection des données.

C’est donc PostgreSQL qui a été retenu pour Quizine.

Back-end

Le back-end est la partie invisible pour l’utilisateur, mais essentielle au bon fonctionnement de Quizine. Il gère la logique métier, le stockage des données, la communication avec le front-end et les aspects de sécurité comme l’authentification.

Langage

Java peut sembler un choix ambitieux pour une application de quiz, mais il s’impose naturellement pour ce projet. C’est le langage que je maîtrise le mieux et sur lequel je me suis formé, ce qui en fait une excellente opportunité pour mettre en application mes connaissances. De plus, Java est reconnu pour sa robustesse et sa scalabilité, des qualités intéressantes même si le projet reste modeste dans un premier temps.

Concernant la gestion des données, j’utilise un ORM (Object-Relational Mapping) pour simplifier la communication avec la base de données. Toutefois, certaines requêtes devront être écrites directement en SQL afin d’optimiser les performances ou de répondre à des besoins spécifiques.

Framework

Pour structurer et accélérer le développement, j’ai choisi Spring Boot, un framework Java largement utilisé dans le monde professionnel. Il permet d’organiser proprement une application et d’accéder à un ensemble de fonctionnalités prêtes à l’emploi, notamment pour la gestion des bases de données, la validation des données et l’authentification par exemple.

Front-end

Le front-end est la partie visible de l’application, celle avec laquelle l’utilisateur interagit. Il repose sur trois langages fondamentaux :

Langages

HTML (HyperText Markup Language) : Il sert à structurer les pages affichées dans le navigateur. Bien que ses balises ne soient pas visibles directement par l’utilisateur, elles jouent un rôle crucial, notamment pour l’accessibilité. En utilisant des balises sémantiques adaptées (<section>, <article>, <nav>, <header>, <footer>, <aside>, etc.) et des attributs spécifiques, on facilite la navigation aux lecteurs d’écran et on améliore le référencement (SEO).
CSS (Cascading Style Sheets) : Il permet de styliser les pages, de définir les couleurs, les polices, l’espacement et le positionnement des éléments. Il est également essentiel pour rendre le site responsive, c’est-à-dire adaptable à différentes tailles d’écrans (ordinateur, tablette, mobile). Cependant, à mesure que le projet grandit, gérer du CSS natif devient laborieux, notamment en raison de la difficulté à maintenir une structure propre et bien organisée.
JavaScript : Contrairement aux deux précédents, JavaScript est un véritable langage de programmation. Il permet d’ajouter de l’interactivité aux pages (animations, mises à jour dynamiques, formulaires interactifs, etc.). Initialement conçu pour être exécuté uniquement dans les navigateurs, il s’est largement étendu grâce à Node.js, qui permet d’utiliser JavaScript aussi côté serveur.

Frameworks

Ne maîtrisant pas encore de framework JavaScript au moment du développement de Quizine, ce projet est l’occasion idéale pour apprendre. Étant donné que la stack back-end repose sur Java, il semble pertinent de choisir Angular, un framework développé et maintenu par Google, souvent utilisé dans des projets d’envergure en entreprise.

Contrairement à React, qui est plus populaire et largement adopté dans l’écosystème web, Angular impose un cadre strict et encourage de bonnes pratiques de développement. Ce cadre inclut notamment l’utilisation de TypeScript, un sur-ensemble de JavaScript développé par Microsoft, qui introduit un typage statique. Grâce à TypeScript, le code devient plus structuré, plus robuste et moins sujet aux erreurs courantes.

Pour la conception de l’interface utilisateur, j’ai testé plusieurs solutions au fil du temps :

Bootstrap : Simple à prendre en main, mais rigide et difficile à personnaliser.
Sass : Un préprocesseur CSS intéressant, mais dont les avantages s’amenuisent avec les évolutions récentes du CSS natif.

Finalement, au fil de mes différents projets, mon choix s’est porté sur Tailwind CSS, un framework qui repose sur un système de classes utilitaires. Contrairement aux approches traditionnelles, Tailwind permet de construire des interfaces rapidement tout en gardant une grande flexibilité. Certains lui reprochent d’alourdir le code HTML, mais ses nombreux atouts (modularité, maintenance simplifiée, compatibilité avec les dark modes, etc.) en font une solution de plus en plus adoptée.

Pour éviter de recréer des composants de zéro, j’envisage également d’utiliser Taiga UI, une bibliothèque de composants conçue pour Angular et compatible avec Tailwind CSS. Contrairement à React, qui dispose de nombreuses bibliothèques UI, les alternatives sont plus limitées sur Angular. Taiga UI semble toutefois être un choix adapté aux besoins du projet.

Stratégie DevOps

Pour assurer un déploiement fluide et une gestion efficace de l’application en production, il est essentiel d’adopter une approche DevOps. Cette méthodologie vise à rapprocher les équipes de développement (Dev) et d’exploitation (Ops) en automatisant un maximum de processus.

Dans le cadre de Quizine, l’objectif est de se familiariser avec ces bonnes pratiques en intégrant deux aspects fondamentaux :

La conteneurisation, pour assurer un déploiement flexible et homogène.
Les pipelines CI/CD, pour automatiser les tests et la mise en production.

Conteneurisation

La conteneurisation permet d’encapsuler une application dans un environnement isolé et portable, garantissant ainsi qu’elle fonctionne de la même manière quel que soit l’endroit où elle est exécutée (machine locale, serveur distant, cloud, etc.). Contrairement aux machines virtuelles, les conteneurs sont plus légers, plus rapides à exécuter et consomment moins de ressources.

Le principal avantage de cette approche est l’indépendance vis-à-vis de l’environnement d’exécution : les éventuels problèmes liés aux différences de configuration entre machines sont éliminés.

Le choix de l’outil pour la conteneurisation s’est naturellement porté sur Docker, qui est devenu la référence en la matière. Il sera utilisé pour :

L’environnement de production, afin de garantir un déploiement uniforme.
L’environnement de développement, pour travailler dans des conditions proches de la production.
Potentiellement l’environnement de test, afin d’assurer une meilleure reproductibilité des erreurs et un diagnostic plus efficace.

Pipelines CI/CD

La CI/CD (Continuous Integration / Continuous Deployment) est une pratique qui consiste à automatiser les étapes de développement, de test et de déploiement d’une application. L’objectif est de réduire les erreurs humaines, d’accélérer le cycle de développement et de garantir une qualité constante du code.

Pour cela, je vais exploiter GitHub Actions, un service intégré à GitHub qui permet de créer des workflows facilement en définissant des étapes automatisées via des fichiers de configuration YAML.

Grâce à cette approche DevOps, Quizine bénéficiera d’un cycle de développement plus fluide, avec des mises en production plus rapides et plus sécurisées. L’objectif à long terme est d’adopter un processus entièrement automatisé, depuis le développement jusqu’au déploiement, afin de gagner en productivité et en fiabilité.