PRESENTATION PROJET FIL ROUGE

PRESENTATION PROJET FIL ROUGE

Christian Michaud Juillet 2023

Bonjour, il nous a été demandé, lors de la formation, de produire, à partir d'un cahier des charges, un applicatif à réaliser en groupe.C'est la patrie, à laquelle j'ai participé que je vais vous présenté.

Le but de cet applicatif est de mettre en pratique différentes technologies apprises durant cette formation.Le travail en groupe, la sélection des outils, les contraintes imposées ont été sélectionnées afin de montrer nos capacités à devenir Concepteur développeur java full-stack et de nous insérer dans une équipe.

Résumé

Notre équipe constituée au début de quatre personnes, s'est vite retrouvée à trois. Nous avons dû nous adapter. C'est la condition de notre métier.Nous avons utiliser une base de donnée relationnelle: MySQL, pour la programmation : VisualStudioCode ainsi que SpringToolSuite, ainsi que des outils de bureautique afin d'aboutir. Il est temps de passer au vif du sujet.

La société

VIF Software

• Entreprise implantée depuis plus de 40 ans à la Chapelle sur Erdre, fournit un ERP pour l'agro-alimentaire.
• Elle est constituée de 260 collaborateur pour un CA de 25 M€, et à environ 600 clients

Mon stage :

• Entreprise : VIF soflware
• Mon poste : Développeur java au sein de l'équipe édition.

Mon travail: - Validation de la possibilité de mettre en autoformation, une formation interne sur la structure java utilisée dans l'entreprise. A l'origine, cette formation est faite pour des personnes ayant au moins 3 années d'expérience en java avec une connaissance métier et est dispensé par un formateur. - Modifier une barre de tâches ainsi que le menu contextuel associé pour qu'ils deviennent paramétrable. Ceci dans 4 fonctions de préparation de commandes.

Sujet

Gestion des transports

Description

L'application devra permettre à un collaborateur de :

• Réserver un véhicule de service
• gérer le parc de véhicule de service
• Organiser un covoiturage
• Réserver une place sur un covoiturage

La mise en place

Gestion des transports

Notre équipe nous a été dévoilée.Vincent, Rousseau, joseph et moi - Remarques : départ de joseph et maladie pour partie de Vincent

• Lecture et imprégniation du sujet
• Mise en oeuvre du cadre global :
• choix des outils (documentation, dessins...
• dictionnaire de données
• document de spécifications générales
• suivi et découpage des tâches

• Projet sur GitHub versioning
• Base de données

Suivi des tâches avec TRELLO

Cet outil nous a permis de définir, d'affecter et de suivre les avancées du projet

Prise en charge

Mes tâches attribuées :

maquettage de ma partiediagramme de classes métier (création suivi) modèle physique de données (création suivi) dictionnaire de données (pour moité) spécifications générales (ma partie)

Le maquettage

A partir du cahier des charges

Utilisation de Pencil vs BootStrap

Le maquettage suite

Nous avons utiliser Pencil, logiciel gratuit pour faire les maquettes de nos parties.

La version Html / BootStrap est responsive et intègre des modules Angular pour sa gestion

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Partie passager

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Partie conducteur

Utilitaire XAMPP pour la partie base de données

Conception de l'application

• IDE VisualStudioCode

FrameWork Angular 9.4.1 TypeSpript

• IDE SpringToolSuite

FrameWork SpringBoot starter 3.0.2 (parent) Java 17

• Base de Donnée MySQL

phpMyAdmin (monitoring)

Le diagramme de cas d'utilisation général

Conception de l'application

1 - Lecture du cahier des charges et discussions avec le client (points sensibles)2- Diagramme de cas d'utilisation pour identifier les acteurs (profils), le découpage en modules, qui fait quoi (Rousseau) 3- Réalisation des maquettes (pour la projection du client) 4- Réalisation du diagramme de classe 5- Déduction du modèle physique de données 6- Structurer notre application en couches côté back et front: Les frameWorks et IDE nous rendant cette tâche aisée. 7- Développer les différentes parties en vérifiant leur bon interfaçage

Diagramme de classes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Modèle physique de données

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Conception de l'application

L’application a été découpée en couches Pour la partie front nous nous sommes appuyés sur un modèle structuré composé comme suit : • les models : définition des interfaces des objets mappés et des énumérations • les components : découpés en vue html et en classe ts pour son fonctionnement • les services : accès à l’api par les différentes routes par les accès http de l'api REST • les pipes : pour la gestion des filtres et de la transformation des dates (DatePipe) En plus des entités de structure de projet Angular : gestion des routes, des modules … Pour la partie back avec SpringToolSuite nous avons défini le modèle de découpage en package suivant : • les models : définition des entités pour mappage jpa ORM => hybernate => la bdd • les enumerations : exemple (Profil : Collaborateur / Administrateur ) • les repositories : pour les accès/requêtes (hors jpql du crud) DAO • les services : pour les contrôles métiers des flux en provenance et à destination du front (par les controllers) et de la base de donnée (par les repositories) • les controllers : pour le mappage des verbes HTTP et des routes coté serveur • les DTO pour les objets JSON à destination et en provenance de la partie Front • les mappers pour transformer les DTO en Models et vice versa A cela s’ajoute le package utils qui rassemble des fonctionnalités diverses regex, date vers string et vice versa, le package exception pour la gestion de nos exceptions.

Conception de la base de données

1 - En partant du modèle physique de donnéesCréation des models avec les contraintes diverses et variées

Mise en place de la base de données

Extrait de la structure vue de phpMyAdmin

1 - Création de la base sous phpMyAdmin et le paramétrage du application.propertises pour l'accès

2 - En partant du modèle physique de donnéesCréation des models avec leurs caractéristiques : support d'hybernate pour la définition des tables dans notre cas.

3 - Utilisation les dépenses Spring suivantes (pom.xml)Spring AOP gestion des transactions par Spring. Spring Validation permet de valider via des @nnotations les contraintes au niveau des modèles. Déclenchées par @Valid dans les services. Connector-j pour le driver jdbc pour MySQL dans mon cas Spring data jpa pour écrire et récupérer les données dans une bdd (repositories)

Mise en place de la base de données suite

4 - A partir de l'export de phpMyAdmin

Le développement Front

Les routes

• les imports des différents components

• Le tableau des routes avec les routes par défaut '' et '**'

• @ngModule sert à enregistrer tout ce que l'on crée dans Angular et les grouper ensemble ici il est composé de 2 structures imports et exports
• La classe elle même

Sa déclaration pour utilisation dans un component

La structure permet de les différencier

Le développement Front

Les components

• Un fichier .html (la vue)

• Un fichier .ts (la gestion de la vue)
• Un fichier .css (qui prend le pas sur celui de app.component.css)
• Un fichier .spec.ts (pour les tests)

Exemple reserver.component.html

Le développement Front

Le fichier .html

Le développement Front

Le fichier .ts

Exemple reserver.component.ts

Le développement Front

La définition des pipes

Le développement Front

Les services ex: conducteur.service.ts

Le développement Back

Les controllers

• l'ouverture du CRUD vers l'extérieur

• Les @annotations

@RestController qui détermine le type de composant Controller @RequestMapping qui donne le point d’entrée des routes de ce controller. @Autowired injecte une dépendance ici dans Un Service métier : CovoiturageService et Le mapper de DTO du covoiturage : covoiturageMapper. @GetMapping le mappage des routes GET Rest : le premier vide, renvoie tous les covoiturages au format JSON voulu par le DTO via le mapper. Le deuxième : @GetMapping("{/id}")défini la route GET pour un objet unique

Le développement Back

Les controllers 2

Le développement Back

Les services (composants métier)

Le développement Back

Les services 2

Le développement Back

Les models entité JPA mappée vers la base par des @nnotations

@Entity définit une classe Java comme étant persistante

doit posséder un constructeur vide et les getters/setters

Strategy = GenerationType.IDENTITY. Hibernate s’appuie alors sur le mécanisme propre au SGBD pour la production de l’identifiant. Dans le cas de MySQL, c’est l’option AUTO-INCREMENT (.AUTO)

Le développement Back

Les DTO (Data Transfert Object)

Version aménagée des models pour répondre aux besoins du front

Le développement Back

Les mappers

Transforment les DTO en Models et vice versa

Le développement Back

Les mappers 2

Postman

Merci!Avez des questions?