Exercice

Il est maintenant temps de mettre en pratique tout ce que nous avons vu dans ce chapitre.

Pour cet exercice, nous allons :

  • créer un sous-composant réutilisable, qui contient l’adresse et permet un two-way data binding sur la fiche d’un employé,

  • améliorer la fiche d’un employé en ajoutant une carte, à l’aide d’OpenStreetMaps, qui permet de localiser l’adresse saisie. Utiliser la librairie Leaflet à cet effet et faire les interactions entre JavaScript et Blazor pour afficher la carte avec un marqueur. La récupération des données GPS d’une adresse peut se faire à l’aide de l’API nominatim : https://nominatim.org/release-docs/develop/api/Search/,

  • ajouter un loader réutilisable lors du chargement de la fiche d’un employé et de la liste des employés,

  • créer le back-end et faire communiquer l’application Blazor avec cette dernière. La communication doit être résiliente et gérer les éventuels soucis de connexion. Ce back-end permettra de lire et d’écrire les employés ainsi que de récupérer les données "statiques" (comme la liste des pays et des postes),

  • ajouter la possibilité de créer un nouvel employé et styliser l’application à l’aide d’une libraire pour implémenter Material Design (MatBlazor).

Étant donné que cet ouvrage...

Pour consulter la suite, découvrez le livre suivant :
couv_EIBLAZ.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Interactions avancées entre composants
Suivant
Présentation du pattern Flux/Redux