Contexte :

Nous avons une application historique de gestion des séminaires au laboratoire, développé en PHP dont voici l'interface

Parlons du développement de l'application

Tech Stack

Sequelize & Sequelize-cli

Qu'est-ce que Sequelize?

• Bibliothèque ORM (Object-Relational Mapping) pour Node.js qui simplifie la communication avec la base de données
• Permet aux développeurs de travailler avec la base de données en utilisant des objets et des méthodes plutôt que des requêtes SQL.
• Prend en charge plusieurs bases de données relationnelles, telles que PostgreSQL, MySQL, SQLite, MSSQL, etc.

Installation de Sequelize.js

• Installer le module sequelize via NPM.
• Installer le module de pilote de base de donnée, par exemple mysql2 ou pg

Exemple de connexion à la base de données

						const { Sequelize } = require('sequelize');

						const sequelize = new Sequelize('database', 'username', 'password', {
						  host: 'localhost',
						  dialect: 'postgres',
						});
					

Définition de modèles

• Un modèle dans Sequelize.js est une représentation de la table dans la base de données.

							const { Sequelize, DataTypes } = require('sequelize');
							const sequelize = new Sequelize('database', 'username', 'password', {
							  host: 'localhost',
							  dialect: 'postgres',
							});

							const User = sequelize.define('User', {
							  name: {
							    type: DataTypes.STRING,
							    allowNull: false,
							  },
							  email: {
							    type: DataTypes.STRING,
							    allowNull: false,
							    unique: true,
							  },
							  password: {
							    type: DataTypes.STRING,
							    allowNull: false,
							  },
							});
						

Opération CRUD

• Sequelize.js fournit des méthodes pour effectuer des opérations CRUD (Create, Read, Update, Delete) sur les modèles.

						// Créer un utilisateur
						const user = await User.create({
						  name: 'John Doe',
						  email: 'john.doe@example.com',
						  password: 'password',
						});

						// Récupérer tous les utilisateurs
						const users = await User.findAll();

						// Récupérer un utilisateur par ID
						const user = await User.findByPk(1);

						// Mettre à jour un utilisateur
						await user.update({ name: 'Jane Doe' });

						// Supprimer un utilisateur
						await user.destroy();
					

Sequelize CLI

• outil en ligne de commande pour faciliter la création et la gestion de modèles Sequelize.js.
• Gestion des modifications de la structure de la base de données en créant des scripts qui peuvent être exécutés dans n'importe quel environnement.
• Déploiements plus faciles et plus sûrs en garantissant que la base de données est cohérente entre les différents environnements.

Exemple

						#initialiser un projet Sequelize
						sequelize init

						# Générer un nouveau modèle
						sequelize model:generate --name User --attributes name:string,email:string,password:string

						# Appliquer les migrations en attente
						sequelize db:migrate

						# Annuler la dernière migration
						sequelize db:migrate:undo

						# Générer un fichier de migration pour ajouter une colonne à la table User
						sequelize migration:generate --name add_column_to_users_table

					

On définit nos relations dans nos modèles, et on génère une migration à appliquer

							sequelize migration:generate
						

							'use strict';
	
							/** @type {import('sequelize-cli').Migration} */
							module.exports = {
							  async up (queryInterface, Sequelize) {
								await queryInterface.addConstraint('UserCategories', {
								  fields: ['userId'],
								  type: 'foreign key',
								  name: 'userid',
								  references:{
									table: 'Users',
									field: 'id'
								  },
								  onDelete: 'cascade',
								  onUpdate: 'cascade'
								})
							  },
						  
							  async down (queryInterface, Sequelize) {
								await queryInterface.removeConstraint('UserCategories','userid')
							  }
							};
	
						

EXPRESS JS

Les avantages d'Express JS

• Facilité d'utilisation
• Flexibilité
• Performance
• Gestion des erreurs
• Middlewares tiers
• Large communauté

Pour créer un serveur web de base :

						const express = require('express');
						const app = express();

						app.get('/', (req, res) => {
  							res.send('Bonjour, monde!');
						});

						app.listen(3000, () => {
						  console.log('Serveur démarré sur le port 3000');
						});
					

Exemple middleware

						function validateUserData(req, res, next) {
							const { name, email, age } = req.body;
							if (!name || !email || !age) {
							  return res.status(400).send('Données utilisateur manquantes');
							}
							if (age < 18) {
							  return res.status(400).send('L\'utilisateur doit être majeur');
							}
							next();
						  }
						  
						  app.post('/users', validateUserData, (req, res) => {
							// Code de création de l'utilisateur
						  });
					

UX et UI Design

• Prototypage de l'application
• Test de l'UI et de l'UX
• Retours utilisateurs avant la mise en ligne
• Prévoir en amont les composants de l'application
• Gain de temps lors de l'intégration

FIGMA

Figma est un outil en ligne pour pouvoir concevoir rapidement et simplement des maquettes pour des pages web, par exemple. Il existes d'autres programmes comme Adobe XD, PenPot etc ...

Vue3 & Composition API

• Vue3 est la dernière version de Vue.js, un framework de développement d'interface utilisateur.
• La Composition API est une nouvelle façon d'écrire des composants Vue en utilisant des fonctions plutôt que des options.
• Composabilité grâce aux composants
• Reactivité
• Performant grace au DOM virtuel
• Documentation très bien fournie, et en français
• Apprentissage facile par rapport aux autres frameworks

Les fondamentaux de Vue 3

• Vue3 utilise une syntaxe simple et intuitive pour créer des composants
• Les composants Vue sont constitués de deux parties :
  • Le template, qui définit la structure de la page, et
  • Le code JavaScript, qui définit la logique de l'interface utilisateur.
• Vue3 utilise le système de "Reactivity" pour gérer la mise à jour de l'interface utilisateur en temps réel.

Avantages de Vue3 et la Composition API

• Améliorations significatives en termes de performances et de taille de bundle par rapport à Vue2
• La Composition API rend le code plus modulaire, plus lisible et plus facile à réutiliser.
• La Composition API permet de séparer la logique de l'interface utilisateur de la structure de la page, ce qui facilite la maintenance et l'évolution de l'application.

Exemple composant Vue3 avec la Composition API

Bibliothèques Vue3

• Vue router
• Vuex

Vue router

• Vue Router est un routeur officiel pour les applications Vue.js
• Gère les transitions de page de manière fluide et intuitive.
• Définit des routes pour chaque page de l'application, ainsi que des paramètres de navigation tels que les paramètres de query et les paramètres dynamiques.

Vuex

• Outil officiel de gestion d'état pour les applications Vue.js,
• Stocke des données dans un "store" global, qui peut être accédé par tous les composants de l'application.
• Facilite la gestion des états complexes, tels que les données asynchrones ou les états de l'interface utilisateur.

TailWind CSS

• Tailwind est un framework CSS qui fourni des classes CSS prédéfinies pour chaque propriété CSS
• Permet de créer rapidement et facilement des mises en page complexes sans avoir à écrire beaucoup de CSS personnalisé.
• Offre une série de classes prédéfinies pour les attributs d'accessibilité
• Facile à maintenir, car toutes les classes utilisées sont définies dans un seul fichier, pas besoin de parcourir tout le CSS

Installation de Tailwind CSS

							npm install -D tailwindcss postcss autoprefixer
							npx tailwindcss init -p
						

							/** @type {import('tailwindcss').Config} */
							module.exports = {
							  content: [
							    "./index.html",
							    "./src/**/*.{js,ts,jsx,tsx}",
							  ],
							  theme: {
							    extend: {},
							  },
							  plugins: [],
							}
						

							@tailwind base;
							@tailwind components;
							@tailwind utilities;
						

Quelques exemples

Centrer un élément horizontalement et verticalement :

						

							
Contenu centré
						  
  
					

Créer un bouton avec une couleur de fond et une couleur de texte personnalisées :

						
							Cliquer ici