Mon stage de 2ème année chez CIOREM , avez comme objectif final la création du site centre de la suite d’outils de CIOREM , ce site permet la connexion des utilisateurs , modification des droits et accès pour les administrateurs et l’accès aux outils pour les utilisateurs.
Pour ce projet j’ai du m’adapter a l’environnement de travail de l’entreprise , les languages utilisés sont Angular pour le front end et Spring Boot pour le back end . Ce sont deux languages que je n’ai jamais utilisés au par avant , je vais devoir me former sur le tas !
Travailler en mode projet
Ciorem utilise la méthode agile pour travailler , différentes tâches sont demandés puis j’ai du moi même donner une note de difficulté pour estimer le temps nécessaire en utilisant la suite de fibonacci (1,2,3,5,8..).
Sans compter les différents « daily » et « weekly » de communication , au bout de 3 semaines un « sprint review » est opérer , une présentation des avancements de nos tâches attribué , voici un exemple du dernier sprint que j’ai eu avec 1 seul tâche restante :
Le site utilisé est Jira , dans le deuxième tableau on peut voir la tâche restante , Création de la page dashboard admin ( ici la note de difficulté est éstimer a 1 )
Le front end en angular
tout d’abord pour le projet angular , le principe est que chaque partie du site peut être diviser en « module » qui peut être réutilisé sur différentes pages .
Ici un dossier shared contient le footer et la navbar du site qui seront afficher dans toutes les pages .
Un dossier layout contient la forme du site en html pour facilement créer des pages pour inclure la navbar et le footer
Grâce à ce premier code qui ajoute le « layout » chaque page peut juste contenir afficher ce format pour avoir la navbar et le footer si ils sont importer
Petit à petit en créant des modules et du Html CSS de base , j’arrive à ce résultat :
Le style de la page est classique car il sera retravailler par les graphistes de l’entreprise pour définir plus tard la charte graphique
Le bouton se connecter est dynamique , si la personne n’est pas connecter il verra se bouton qui amène à la page ci dessus , Après avoir soumis le formulaire une requête Http est envoyer au côté back end en Spring boot pour répondre à la requête .
Le back end en SPring boot
Le back end va être le cerveau du site , c’est lui qui va répondre a nos calculs et requêtes , pour répondre à la requête précédente de connexion , le système doit répondre à beaucoup de critère de sécurité .Par exemple depuis chez moi actuellement le site ne me permet pas de me connecter :
La console du navigateur me renvoie une erreur car la requête n’a pas aboutis puisque je ne respecte pas les conditions de sécurité . Voici à quoi ressemble les fichiers actuel du back end :
les fichiers sont trier par dossier selon leur fonctions , par exemple entities va former la calsse utilisateur , role , le token reset du mot de passe oublier etc.. , voici la dernière chose que le front à envoyer vers le back :
Il envois une requète de login a l’url d’authentification le back end lui est prêt à récuperer grâce à l’url
Avant je parlais des différentes règles de sécurités , et la provenance par exemple de la requête est actuellement l’une des règles :
L’objetif final de cette requête Http et la sécurité , est d’authentifier l’utilisateur , c’est à dire vérifier que les informations de connexion fournis correspondent à celui d’un compte pour que le backend renvoie un « token » un fichier qui sera stocké localement sur l’oridnateur de la personne de manière crypter contenant les informations de l’utilisateur , ce qui pour le serveur est une bonne chose car il ne devra pas garder en mémoire la session de l’utilisateur .
Voici un exemple de token que renvoie mon backend à gauche , ce token chiffrer est dans la mémoire de l’odrinateur puis c’est le fontend qui va s’amuser à le décoder en quelque chose de lisible pour utiliser les informations , par exemple dans la navbar à la place du bouton se connecter est afficher l’email de l’utilisateur pour montrer qu’il est bien connecter , et si la personne est administrateur alors un bouton supplémentaire Dashboard est afficher , ce qui va rajouter une tâche en plus c’est à dire vérifier est proteger l’accès des pages selon le rôle de l’utilisateur.
Ca sera donc l’objectif de de ce module admin-guard qui va proteger l’accès aux pages que je souhaite seulment au role admin , sinon il est retourner vers l’accueil du site .
Une fois que toutes les verifications sont faites , alors l’utilisateur à enfin accès a sa page dashboard d’administrateur pour pouvoir modifier les rôles et autorisation de ses pairs pour une bonne gestion de sécurité .
Tableau de synthese E4
Ce stage ma appris beaucoup de chose sur les bonnes pratique de travailler en groupe et de s’adapter à son environnement de travail . Si je me rèfère à la grille de compétence :
Exploiter des référentiels … = Mes référentiels ici ont était d’apprendre le language Angular et Springboot , en plus des outils de gestion de projet .
Gérer des sauvegardes = Pendant le développement , plusieurs sauvegardes sur gitlab et en local sont effectuer pour éviter tout risque de perte de données .
Participer a la valorisation de l’image de l’entreprise = Le siteweb avec une bonne gestion des droits va forcément valoriser l’image de l’entrepise surtout quand la charte graphique sera respecté !
Participer a l’évolution d’un site web exploitant les données .. = Ma tâche principal est de développer le SiteWeb et exploiter les données des utilisateurs pour créer un outils de gestion .
Travailler en mode projet = Travailler en méthode agile et gérer les différentes branches du projet .
Mettre en place son environnement d’apprentissage personnel = Installation des composants pour coder , VM , vpn etc.. Puis travailler en local en installants java , node js et autres ..
Gérer son identité personnel et développer son projet pro = Apprendre les nouveaux languages m’apporte beaucoup sur mon CV et sur mes réseaux pour me diversifier , je peux même partager mes projets sur LinkedIn ou autres .