# Extranet Client
Cette section du wiki sera entièrement consacrée à l'extranet client qui vient d'être refondu.

L'objectif principal de cette refonte de l'extranet était de donner un nouveau souffle au portail client déjà existant sur le site. Développé en PHP et connecté aux bases de données Adhara et Zoho, le code était dispersé entre le serveur principal et le module de connexion.

Aujourd'hui, l'intégralité du site est accessible depuis le serveur adhara.fr, hébergé sur le serveur Vercel. De plus, l'ensemble du code peut être consulté sur [ce dépôt GitHub](https://github.com/ThePrimesBros/extranet-client-adhara).

## Utilité
Cet extranet, destiné aux clients, a pour objectif d'informer le client dans le cadre d'une démarche de qualité sur les formations qu'il a déjà suivies et sur celles qu'il devra suivre dans les jours, semaines ou mois à venir. Bien qu'il ne soit pas utilisé très fréquemment (sauf pendant les périodes de fin d'année par les entreprises), il est essentiel que celui-ci fonctionne correctement pour s'inscrire dans la démarche de qualité d'Adhara France.

## Technologies Utilisées
Comme mentionné précédemment, la technologie précédemment utilisée était PHP, en continuité avec le site Joomla qui hébergeait l'ensemble. Aujourd'hui, dans une optique d'amélioration, d'optimisation et de test, il a été choisi d'utiliser ReactJS et TailwindCSS pour la partie front-end, ainsi que PHP / NodeJS pour la partie back-end.

### Partie Back-end :
La partie back-end est actuellement gérée grâce à une API personnelle créée en PHP. Bien que la première démarche ait été de créer une API en NodeJS, plusieurs complications liées à la base de données OVH ont conduit à la décision de créer une API à partir de zéro en PHP. Celle-ci se trouve à la racine du dossier `site_php` dans le dossier `api`.

### Partie Front-end :
La partie front-end est gérée grâce au framework ReactJS. La technologie utilisée en arrière-plan est TypeScript, qui facilite le typage et permet donc de connaître précisément les données qui en ressortiront. Même si cela peut sembler complexe au début, d'excellents tutoriels expliquent son fonctionnement. ReactJS fait partie des frameworks les plus utilisés tout en étant très accessible. Les possibilités qu'il offre sont quasiment infinies.
En ce qui concerne TailwindCSS, semblable à Bootstrap, il s'agit d'une bibliothèque de classes CSS bien plus détaillée et élaborée que Bootstrap.

## Fonctionnement

Le fonctionnement du projet est très simple. Celui-ci se divise en deux partie, la production et le développement.

### Développement
Le site de développement fonctionne en local au travers de Docker.
Pour ce faire voici les différentes étapes à suivre.

1. Cloner le repo suivant
```bash
git clone https://github.com/ThePrimesBros/extranet-client-adhara.git
```

2. Lancer le projet
```bash
cd ./votre-dossier/extranet-client-adhara
docker compose up -d
npm run dev
```
/!\ Il se peut que Docker ne soit pas nécessaire, dans ce cas, `npm run dev` à la racine du projet sera amplement suffisant.

Le projet se créera et se lancera. Vous pourrez ainsi retrouvez celui-ci sur le port 3000 du localhost : [http://localhost:3000](http://localhost:3000)
Vous pouvez ainsi commencer à travailler sur le projet en local.

### Production
Pour ce qui est de l'envrionnement de production, tout est gérer avec Github et Vercel. Vercel est une entreprise de développement (NextJS, Vercel...) qui propose des services d'hébergement gratuit pour les applications web utilisants des frameworks Javascript tels que React, NextJS, VueJS...

Pour appliquer les modifications de l'envrionnement de développement, voici les étapes à suivre : 

1. Push toutes les modifications sur le repo
```bash
git checkout -b nom_de_la_branche
git add .
git commit -m "cf. ReadMe"
git push origin nom_de_la_branche
```
/!\ Attention, dans le commit j'ai précisé 'cf. ReadMe', qui signifie voir le ReadMe. Lorsque vous faite un push sur l'environnement de production, renseigner impérativement le ReadMe avec les modifications que vous avez apportez sous le format suivant : 
```
version_majeur.version_feateur.version_fix - Titre des modification - Date de push
Texte de descriptions sur les modifications apportés.

/!\ Version_majeur = 1, 2, 3..., A changé si vraiment il y a eu un gros changement sur le projet (Ajout de grosses fonctionnalités…)
Version_mineur = 1.1, 1.2, 1.3... A changé a chaque fois qu'une nouvelle feature est apporté au projet (Bouton d'export, Modal…)
Version_fix = 1.1.1, 1.1.2... A changé à chaque fois qu'un fix ou une modification minime est apporté au projet (Correction d'orthographes, changement de lien…)
```
2. Merge tout sur la branche develop puis sur main depuis Github.
En faisant cela, cela executera les tests puis procédera au déploiement automatique sur Vercel.

3. Voir sur Vercel si tout est ok
Il suffit de ce rendre sur le site de [Vercel](https://vercel.com/dashboard) et de s'y connecter. Vous aurez ici la liste de toutes vos applications qui seront hébergé par Vercel. En cliquer sur `extranet-client-adhara`, vous aurez accès à tous les vital du site.

## Notes de Raphaël
(A supprimer si tous est réglé)
Pour le moment, je possède les droits sur tous les repos, je vais faire en sorte que Nicolas possède les droits d'admin sur tous et qu'il les donnent chaque années au nouvelle alternant. Pour Github, il n'y aura pas trop de problèmes, je ferais la transition fin Aout, début Septembre. Pour Vercel, je pense que cela risque d'être un peu plus délicats, il faudra surement voir avec Nicolas, pour qu'il se créé un compte sur Vercel et qu'il procède au déploiement de son côté aussi. Je regarderai avec lui fin Aout, début Septembre aussi.

Voilà tout ce qu'il y a à savoir sur l'Extranet Client, son fonctionnement et de son déploiement. En cas d'oubli, d'imprécision ou d'ajout de nouvelle fonctionnalité, merci de corriger le wiki ou de le mettre à jour avec tout ce qui doit y être ajouté.