Sujet du stage: 

Pendant ma deuxième semaine de stage, j'ai commencé à développer des formulaires pour ajouter du contenu à l'application. Pour ce faire, j'ai utilisé Angular et son interface en ligne de commande. En ouvrant le terminal, j'ai navigué vers le répertoire de mon projet et j'ai exécuté une commande spécifique à Angular CLI: ng g c nom-composant. Cette commande m'a permis de générer un nouveau composant, qui va être essentiel pour la création de formulaires.

Pendant mon travail sur le formulaire, j'ai réalisé qu'il fallait connecter celui-ci à une API. Pour cela, j'ai générer un service dans Angular. Ce service agit comme un intermédiaire entre mon composant de formulaire et l'API. J'ai utilisé Angular CLI pour créer ce service en exécutant la commande suivante dans mon terminal :

ng generate service inscription-api

Cette commande a automatiquement créé les fichiers nécessaires pour mon service, notamment le fichier TypeScript (.ts) contenant la logique pour interagir avec l'API. Ensuite, j'ai pu injecter ce service dans mon composant de formulaire afin de gérer les requêtes vers l'API et le traitement des données récupérées.

De plus, pour créer ces formulaires, je me suis appuyé sur la documentation d'Angular Formly. Cette ressource s'est avérée extrêmement utile pour comprendre les meilleures pratiques et les fonctionnalités disponibles lors de la création de formulaires avec Angular. En suivant les exemples et les instructions fournies dans la documentation, j'ai pu rapidement mettre en place des formulaires réactifs et dynamiques, tout en assurant une expérience utilisateur optimale.

J'ai également pris part à une réunion avec les clients pour faire le point sur l'avancement du projet. Cette réunion a été l'occasion de présenter les progrès réalisés jusqu'à présent, de discuter des fonctionnalités développées et ainsi de recueillir les retours et les suggestions des clients. La communication avec les clients est essentielle pour s'assurer que le projet répond à leurs besoins et attentes, et cette réunion a permis de renforcer cette collaboration. En écoutant attentivement les commentaires des clients, nous avons pu ajuster notre approche et prendre des décisions éclairées pour la suite du projet. 

Pendant cette semaine, j'ai poursuivi mon travail sur les formulaires d'ajout, mais j'ai également commencé à développer des fonctionnalités de liste pour afficher les données de la base sous forme de table. En parallèle de ces tâches, j'ai dû intégrer des composants préexistants dans mes formulaires. Pour cela, j'ai fait appel à la documentation d'Angular Material, qui m'a fourni des directives claires sur la façon d'intégrer ces composants de manière efficace et conforme aux normes de conception. Cette documentation m'a grandement facilité la tâche en m'offrant des exemples et des explications détaillées sur l'utilisation de chaque composant.

Pour intégrer les fonctionnalités de récupération (get), de mise à jour (update) et de création (create) des données dans l'application, j'ai développé des méthodes dans le service associé. Ces méthodes sont essentielles pour communiquer avec l'API et effectuer des opérations CRUD (Create, Read, Update, Delete). Voici comment j'ai implémenté ces méthodes dans le service :

1. getAll() : Cette méthode permet de récupérer toutes les données de la source de données. Elle effectue une requête GET à l'API pour récupérer la liste complète des éléments.

2. getSingle(id) : Cette méthode permet de récupérer un élément spécifique en fonction de son identifiant. Elle prend en paramètre l'identifiant de l'élément à récupérer et effectue une requête GET à l'API pour obtenir les détails de cet élément.

3. update(data) : Cette méthode permet de mettre à jour un élément existant. Elle prend en paramètre les données de l'élément à mettre à jour et effectue une requête PUT ou PATCH à l'API pour effectuer la mise à jour.

4. create(data) : Cette méthode permet de créer un nouvel élément. Elle prend en paramètre les données de l'élément à créer et effectue une requête POST à l'API pour ajouter cet élément à la source de données.

J'ai également conçu des formulaires permettant la modification des données présentées dans les tables. Cette fonctionnalité permet aux utilisateurs de mettre à jour facilement les informations existantes, directement depuis l'interface de l'application. En ajoutant cette capacité à la gestion des formulaires d'ajout et des listes, elle offre une expérience fluide et intuitive pour la gestion des données.

Pendant l'implémentation des validateurs dans les formulaires, j'ai rencontré quelques difficultés, notamment lors de la validation des codes postaux. Le principal défi résidait dans la mise en place de règles de validation précises pour les codes postaux, sachant qu'ils peuvent varier d'un pays à l'autre en termes de format et de longueur. Pour relever ce défi, j'ai choisi d'utiliser une expression régulière (regex) pour définir le format attendu du code postal. J'ai également utiliser un regex pour la date.

J'ai également ajouté une fonctionnalité à la fin de chaque formulaire, que ce soit lors d'un ajout ou d'une modification, qui affiche une snackbar. Cette snackbar sert à fournir une confirmation visuelle à l'utilisateur pour lui indiquer que l'opération a été effectuée avec succès. Cette approche améliore l'expérience utilisateur en offrant un retour d'information immédiat sur les actions effectuées.

J'ai poursuivi la création de différentes pages qui offrent chacune une fonctionnalité spécifique, notamment l'affichage d'un tableau de données, l'ajout de nouvelles données et la modification des données existantes. Chaque page a été conçue pour répondre à un besoin particulier de l'application, offrant ainsi une expérience utilisateur complète et intuitive. En développant ces pages, j'ai veillé à ce qu'elles soient cohérentes en termes de conception et qu'elles offrent une navigation fluide entre les différentes fonctionnalités.

Pendant cette dernière semaine, j'ai découvert comment créer un formulaire dans un dialogue qui s'ouvre comme une pop-up. Cette approche permet d'améliorer l'expérience utilisateur en focalisant l'attention sur une tâche spécifique sans interrompre le flux principal de l'application. En implémentant cette fonctionnalité, j'ai appris à utiliser les composants de dialogue fournis par Angular Material, ainsi que les techniques pour intégrer un formulaire à l'intérieur de celui-ci. Cette expérience m'a permis d'ajouter une dimension interactive supplémentaire à l'application, offrant aux utilisateurs une manière plus intuitive d'interagir avec les données.

Pendant cette dernière semaine, j'ai découvert une fonctionnalité très intéressante : le composant Autocomplete d'Angular Material. Concrètement, j'ai appris à mettre en place un champ de saisie dans lequel l'utilisateur peut commencer à taper du texte, et des suggestions sont automatiquement affichées en fonction de ce qu'il a entré. Cette fonctionnalité est particulièrement utile lorsque l'utilisateur doit choisir parmi un grand nombre d'options, car elle lui permet de trouver rapidement ce qu'il cherche. En découvrant l'Autocomplete, j'ai réalisé son potentiel pour simplifier et optimiser les interfaces utilisateur de mes applications, offrant ainsi une expérience plus fluide et intuitive aux utilisateurs.