AG Chart , AG Grid et Tailwindcss

Groupe ( 09 )

Application de gestion d'hôtel avec AG Chart , AG Grids et Tailwindcss

Membres

• Sampaio Falcao Eduardo
• Simonis Tom
• Ciborowski Dawid
• Demir Ahmet Kusay
• Koubai Omar

Objectif

Vinci Hotel Manager est une application BI conçue pour explorer et démontrer les capacités maximales de AG Chart et AG Grid en utilisant une base de données contenant plus de 12 000 données pour générer nos graphiques et tableaux tout en maintenant un site web rapide, efficace et dynamique.

Le frontend a été conçu pour explorer les capacités de Tailwindcss afin de construire une interface moderne, dynamique, esthétique et responsive.

Guide d'installation

1. Télécharger directement via le répertoire GitHub ou cloner le projet :

git clone https://github.com/Edufalcao14/Projet-Web-3-Hotel-APP.git

2. Accédez d'abord au répertoire de l'API en utilisant la commande suivante :

cd api

3. Installer les dépendances nécessaires :

npm i

4. Lancez l'API :

npm start

5. Ensuite, accédez au répertoire fronted : Vinci-Hotel avec la commande suivante :

cd ..
cd vinci-hotel

6. Installer les dépendances nécessaires :

npm i

7. Lancez le frontend :

npm run dev

8. Lancer le serveur sur le navigateur (de préférence Chrome ou Firefox via : http://localhost:3000.

Architecture de l'application

Notre application repose sur une architecture headless, assurant une distinction nette entre le front-end et le back-end, lesquels interagissent par d'appels API

API :

Notre API utilise une architecture MVC (Model-View-Controller)

db/ : Contient les fichiers d'initialisation SQL ( PostgresSQL ) utilisés pour générer notre base de données.

models/ : Contient les fichiers JavaScript pour la gestion des données et des opérations CRUD (Create, Read, Update, Delete) sur notre base de données.

routes/ : Contient les fichiers JavaScript pour la gestion des routes de l'application.

requests/ : Contient les fichiers HTTPS pour tester les routes de notre application.

app.js : Point d'entrée de l'application. Configure le serveur Express, les middlewares ainsi que les routes.

Frontend :

Notre frontend utilise une architecture MPA hybride combinant SSR, SSG, et CSR, selon les besoins de chaque page ou composant.

app/ : Contient toutes les pages de l'application. Avec Next.js, ce dossier est également utilisé pour générer automatiquement les routes associées, facilitant ainsi l'organisation et la navigation dans l'application.

components/ : Regroupe tous les composants réutilisables de l'application, notamment les graphiques AG Charts. Ce dossier centralise les éléments de l'interface utilisateur (UI) pour en faciliter la gestion et leur réutilisation dans le projet.

routes/ : Contient les fichiers JavaScript pour la gestion des routes de l'application.

public/ : Contient toutes les images et icons directement dans l'application.

services/api/ : Regroupe toutes les fonctions utilisées pour effectuer les requêtes (fetch) vers notre API et récupérer les données. Ce dossier centralise la logique de communication avec l'API, rendant le code plus structuré et maintenable.

Technologies utilisées

API :

• Express : Pour la structure de l'API et la gestion des routes.
• Python : Utilisé pour le genérer des données pour notre base de données.
• PostgresSQL : Base de données pour stocker nos données.

Frontend :

• Next.js : Pour la gestion des pages frontend, la gestion des routes, ainsi que pour la génération des pages JavaScript et HTML. Permet de créer l'applications web en offrant des fonctionnalités comme le rendu côté serveur (SSR), la génération de pages statiques (SSG), et la gestion automatique des routes basée sur le système de fichiers.

Outils et bibliothèques

• AG Chart : Utilisé pour générer des graphiques dynamiques et interactifs.
• AG Grid : Utilisé pour générer des tableaux interactifs à partir de données.
• Tailwindcss : Framework CSS utilitaire permettant de styliser rapidement le frontend.
• React : Permet de construire des composants réutilisables et gère leur état à l'aide du "Virtual DOM".
• npm : Gestionnaire de paquets pour Node.js.