Le but de ce TP est de découvrir l’ajouts de composants tiers et l’utilisation des services.
Dans un premier temps, nous allons créer la page de randonnée en cours.
Vous veillerez à bien transmettre la Randonnée en tant que paramètre de navigation.
Nous allons ensuite ajouter les différents blocs de contenu.
div vide pour l’emplacement de la map GoogleDans le cadre de ce cours, nous utiliserons le composant Angular-Map (AGM) plutôt que le composant natif Ionic.
Le composant natif n’est accessible que pour Android et IoS, il s’appuie sur l’utilisation native du composant cartographique. Le composant Angular s’appuie quant à lui sur le SDK Javascript.
Je vous invite à suivre le getting-started du composant pour son installation. Seule la partie “Setting up Angular Google Maps” nous intéresse ici.
Vous aurez besoin également d’une clé API Google, que vous pouvez récupérer sur la page dédiée.
Vous pouvez désormais ajouter le composant au sein de vos pages.
Dans le cadre de notre application, nous ne considérerons qu’un usage actif de la géolocalisation. Cela signifie que nous ne chercherons à mettre à jour l’itinéraire de l’utilisateur que si la page de la randonnée à ouverte.
Nous aurons besoin ici du composant natif Ionic geolocation.
Pour la gestion des collisions, vous pouvez réaliser ça de manière manuelle lorsque la page est active. Vous pouvez également considerer l’utilisation des geofence.
La gestion du tracé du parcours n’est pas documenté dans le composant Angular utilisé. Cependant, il s’agit de l’encapsulation du SDK JS, une issue Github existe et propose une solution.
Afin de faciliter la lecture du code source, le code métier ne doit pas être présent dans le contrôleur. Je vous invite ainsi à générer un service Angular dédié à la gestion de la geolocalisation de l’utilisateur et à la détection de la collision avec les étapes à valider.
Le service doit être instancié dans un module adapté, qui doit être importé par le module racine.