Table de matiere
Rapport : lab crud
Introduction
figure: Introduction
Dans cette partie, nous avons realisé une application de gestion des projects.
Nous avons développé un système CRUD pour les entités Projets et Tâches en utilisant le framework Laravel, avec des fonctionnalités d’autorisation et authentification et multilingue pour l’interface utilisateur afin de faciliter l’apprentissage des compétences nécessaires à la manipulation efficace de ce framework.
Besoin
Utilisateur : Chef de projet
Définition
Le chef de projet occupe une place essentielle dans le processus de réalisation des projets. Dans cette section, nous explorerons en détail sa méthode de gestion pour mener à bien ces projets.
Carte d’empathie
Figure:Empathie de chef de projet
Compte rendu de l’entretien
Une séance d’empathie a été réalisée avec Abdelatif Soklabi, un formateur web en solicode
-
Ce qu’il dit :
- Créer des projets avec leurs informations et leur contexte.
-
Souhaits :
- Ajouter facilement les informations sur les projets.
- Créer des tâches pour chaque projet au même endroit.
- Faciliter le suivi par mes stagiaires.
-
Ce qu’il fait :
- Utiliser Google Sheets pour définir les tâches pour chaque projet.
- Partager les tâches avec mes stagiaires.
Définir le problème
figure: définir le problème
Passer un temps considérable à consulter et naviguer entre les différents projets en raison de la lenteur du téléchargement des données, causée par un volume important de données.
Analyse fonctionnelle
L’analyse fonctionnelle vise la capture des besoins fonctionnels et l’analyse des spécifications fonctionnelles de manière à déterminer ce que va réaliser le système en terme de métier. C’est ici, qu’on identifie et dégage toutes les fonctionnalités du système à réaliser.
Idéation
Après avoir analysé les besoins du client, une solution émerge sous la forme d’une application web dédiée à la gestion optimisée des projets. Cette solution propose des fonctionnalités avancées visant à simplifier la planification, le suivi et la collaboration.
figure: Ideation
Diagramme de cas d’utilisation
L’utilisation du diagramme de cas d’utilisation simplifie la clarification et l’organisation des besoins en offrant une représentation visuelle des interactions entre les utilisateurs et le système. Cette approche facilite la conception d’une solution logicielle répondant de manière précise et efficace aux besoins identifiés.
Figure : Cas d’utilisation détaillé
Analyse Techniques
L’analyse technique est essentielle pour identifier les besoins non fonctionnels, qui englobent les contraintes d’intégration, de développement et de performances. Ces éléments, comme les exigences liées à la compatibilité avec d’autres systèmes, aux normes de développement et aux objectifs de performance, sont capturés et documentés en amont afin d’orienter efficacement le processus de conception et de développement de l’application.
Capture des besoins techniques
La capture des besoins techniques implique d’identifier et de documenter les exigences précises relatives à l’infrastructure et aux fonctionnalités d’un système. Cette étape essentielle assure la définition claire des paramètres nécessaires à la conception d’une solution logicielle efficace.
Les package à utiliser
figure: Les package utilisé
- Font Awsome Icons:
- Rich Text Editor ckeditor5:
- jQuery:
- Documentation : https://www.npmjs.com/package/jquery
- Version: 3.7.1
- AdminLTE:
- Laravel UI:
- Spatie:
- Laravel Excel:
Gestion des exceptions
figure:Gestion des exceptions
-
Nous avons adopté une approche de gestion des exceptions afin de traiter les erreurs de manière efficace et efficiente.
-
Cette décision découle de la nécessité de gérer les situations anormales qui peuvent survenir lors de l’exécution de notre application, telles que des entrées utilisateur incorrectes, des erreurs de connexion, ou d’autres scénarios imprévus.
-
Nous avions envisagé d’utiliser des exceptions spécifiques pour chaque type d’erreur, mais nous avons rapidement réalisé que cette approche pouvait alourdir notre code et le rendre moins lisible.
-
En effet, la multiplication des blocs “try-catch” pour gérer chaque exception individuellement aurait rendu notre code complexe et difficile à maintenir.
Extension de vs code
Dans cette section, nous présenterons les extensions utilisées dans Visual Studio Code (VS Code).
-
Prettier est un formateur de code largement adopté qui permet d’appliquer un style de code cohérent à l’ensemble de vos projets. Il prend en charge différents langages de programmation et formate automatiquement votre code selon des règles prédéfinies, améliorant ainsi la lisibilité et réduisant les conflits de style.
-
Markdown All in One est une extension complète pour travailler avec des fichiers Markdown dans VS Code. Elle simplifie la création et l’édition de documents Markdown en offrant un large éventail de fonctionnalités et de raccourcis. Du formatage de base aux fonctionnalités avancées, Markdown All in One améliore l’expérience d’écriture et la productivité des utilisateurs de Markdown.
-
Cette extension recherche rapidement (en utilisant ripgrep) votre espace de travail pour les balises de commentaires telles que TODO et FIXME, et les affiche dans une vue arborescente dans la barre d’activités. Cette vue peut être tirée de la barre d’activités vers le volet de l’explorateur (ou n’importe où ailleurs où vous préférez qu’elle soit).
-
JSON est un format de données courant dans les fichiers de configuration tels que package.json ou project.json. Nous l’utilisons également largement dans Visual Studio Code pour nos fichiers de configuration. Lors de l’ouverture d’un fichier se terminant par .json, VS Code propose des fonctionnalités pour simplifier l’écriture ou la modification du contenu du fichier.
-
Luna Paint est une extension pour VS Code qui vous permet de modifier des images raster directement depuis l’éditeur. Il vous suffit d’ouvrir une image depuis l’explorateur et de commencer à l’éditer comme n’importe quel autre fichier.
-
Unit Test Explorer UI for VSC fournit une interface utilisateur extensible pour exécuter vos tests dans VS Code. Elle peut être utilisée avec n’importe quel framework de test s’il existe une extension Test Adapter correspondante.
-
npm Intellisense vous permet de gagner du temps et de l’énergie en fournissant une auto-complétion intelligente pour les importations de paquets npm. Il suggère des noms de paquets au fur et à mesure que vous les saisissez, ce qui facilite l’importation de dépendances dans votre projet.
-
Php debug est un adaptateur de débogage entre VS Code et Xdebug par Derick Rethans. Xdebug est une extension PHP (un fichier .so sous Linux et un fichier .dll sous Windows) qui doit être installée sur votre serveur.
-
Composer “All-in-One” provides complete integration of composer and packagist into Visual Studio Code. The extension provides quick composer commands, IntelliSense for composer.json, code lenses, code actions, schema validation, browsing and searching packages, checking abandoned packages, running user scripts, and it extends VS Code with composer tasks.
-
Desing pattern
Le projet lab-crud est conçu pour illustrer la mise en œuvre des opérations CRUD pour la gestion de projets, en utilisant le pattern Repository. Cette approche permet une manipulation efficace des données et met en avant nos compétences en développement backend. En adoptant cette méthodologie, nous démontrons notre capacité à concevoir et à mettre en place des fonctionnalités robustes et fiables pour la gestion des données dans les applications web.
figure: Desing pattern
Conception
Diagramme de classes globale
figure: diagramme de classe globale
Diagramme de classe de Authorization
figure: diagramme de classe de Authorization
Diagramme de classe de projets
figure: diagramme de classe de projets
Maquettes
List des Projet
figure: List des Projet
Ajouter un Projet
figure: Ajouter un Projet
Modifier un Projet
figure: Modifier le Projet
Details de projet
figure: Details de Projet
schema de navigation
figure: schema de navigation
Réalisation
MVC
figure: MVC
Le Modèle-Vue-Contrôleur (MVC) est un schéma architectural qui sépare une application en trois composants principaux : le modèle, la vue et le contrôleur. Chaque composant répond à des aspects spécifiques du développement. Très utilisé en développement web, le MVC permet de concevoir des projets évolutifs.
Modèle : Gère la logique des données, telles que leur manipulation ou leur affichage. Par exemple, un objet Client peut récupérer des informations de la base de données et les mettre à jour.
Vue : Gère l’interface utilisateur, y compris les champs de texte, menus déroulants, etc., pour une interaction facile.
Contrôleur : Fait le lien entre Modèle et Vue pour traiter la logique métier, les requêtes et la manipulation des données. Par exemple, le contrôleur Client gère les interactions et la mise à jour de la base de données, à travers le modèle Client.
Business exceptions
Conclusion
figure: Conclusion
En conclusion, cette partie de notre projet a été consacrée à la création d’une application de gestion de projets.
Nous avons mis en œuvre un système CRUD pour les entités Projets et Tâches en utilisant le framework Laravel. En plus de cela, nous avons intégré des fonctionnalités d’autorisation et d’authentification pour garantir la sécurité des données.
En outre, nous avons rendu l’interface utilisateur multilingue afin de faciliter l’accessibilité et l’apprentissage des compétences nécessaires à la manipulation efficace de ce framework.
Cette étape marque une avancée significative dans la mise en place d’un outil fonctionnel et convivial pour la gestion de projets, offrant une base solide pour des développements futurs.