Créer un widget de fiche rando ou groupe de randos

camillemonchicourt commented 3 years ago

Créer un widget intégrable dans un site tiers avec la fiche d'une rando ou la carte d'un groupe de rando avec leurs fiches.

Voir https://selleo.com/blog/how-to-create-embedded-react-widget

camillemonchicourt commented 3 years ago

Besoin complémentaires :

Volonté = Remonter toutes les randos d'un Geotrek-rando, mais sans sortir du site de l'OT
Pouvoir définir la largeur, les couleurs du widget
Pouvoir masquer des contenus
Pouvoir limiter les contenus
Pouvoir centrer la carte sur une portion de contenus
Accéder et afficher les fiches de détail

Exemple de résultat attendu : https://www.izoard-tourisme.fr/en-ete/toutes-les-randonnees

camillemonchicourt commented 3 years ago

2 solutions techniques envisagées :

Une simple, où l'on créé une page dédiée dans le portail, et on intègre celle-ci dans d'autres sites sous forme d'iframe. Ainsi on peut réutiliser des composants React existants, faire une page avec version simplifiée contenant une liste et une carte des randonnées, quelques filtres et la fiche détail de chaque rando. Solution la plus simple mais limitée car sous forme d'iframe, donc pas évident (voire pas possible ?) de customiser les styles, et pas idéal pour s'adapter en largeur et en hauteur au site dans lequel il est intégré
Plus compliqué mais permettant d'aller plus loin : faire un widget javascript dédié. Développement javascript spécifique à maintenir par ailleurs. Permettant d'aller plus loin dans la customisation et l'adaptation au site dans lequel il est intégré (largeur, hauteur, responsive etc...)

camillemonchicourt commented 2 years ago

Le PNR du Haut-Jura a lancé une prestation pour faire développer une première version de ce widget.

La demande :

Le widget s’appuiera sur l'API V2 de Geotrek-Admin pour récupérer tous les éléments nécessaires. L’API du Geotrek-Admin du Parc est accessible via https://geotrekadmin.parc-haut-jura.fr/api/v2/. Le widget devra permettre d’afficher les itinéraires en filtrant sur certains paramètres (portail, communes, pratiques, difficultés, structure...).
Le widget affichera les itinéraires publiés dans une vue liste.
Cette vue liste proposera également une carte affichant à minima les points de départ des itinéraires.
Au clic sur le point de départ sur une carte, une popup permettra d'accéder à la fiche détail d'une itinéraire.
Au clic sur un itinéraire dans la liste, une fiche détail de l'itinéraire sera affichée.
Dans la vue liste, les éléments suivants seront à minima présent : photo principale de l'objet, nom, difficulté, temps, dénivelé
Sur la fiche détail, on retrouvera l'ensemble des éléments textuels (dont POI, zones sensibles, lieux de renseignement, étiquettes...) définis dans Geotrek ainsi que toutes les photos associées à l'itinéraire.
Sur la fiche détail, une carte permettra d'obtenir le détail du tracé de l'itinéraire, son départ et arrivée, son parking, les POI, les zones sensibles, les lieux de renseignement et il sera possible pour l'utilisateur de télécharger les traces gpx/kml de l'objet ainsi que sa fiche pdf.
Lorsque l'utilisateur sera sur une fiche détail, il pourra copier/coller l'URL dans le navigateur et sera automatiquement ramené sur la fiche détail correspondante (gestion à minima de query params dans l'url pour pouvoir partager une rando)
Dans la mesure du possible le widget devra être responsive et s'adapter aux diverses tailles d'écran
L'affordance sera essentielle pour assurer que tout utilisateur puisse utiliser le widget
Le widget devra proposer une manière de gérer les langues pour proposer les contenus publiés associés à la bonne langue
Le widget devra proposer une "customisation" simple permettant à l'intégrateur du widget de définir une couleur primaire utilisée pour colorer en conséquence le contenu du widget
Le widget sera publié sous licence libre sur un dépôt dédié, avec sa documentation de mise en place

La solution proposée par Makina Corpus, retenu pour télécharger la première version de ce widget :

L’objectif de développer ce widget pour Geotrek est bien d’insérer aisément du contenu d’une base Geotrek dans un site web quelconque, déjà existant ou à développer avec tout type de technologie web, notamment avec un CMS standard du marché.
Les personnes mettant à jour ces sites doivent pouvoir insérer un contenu Geotrek dans leur page aussi facilement qu’ils insèrent une vidéo YouTube.
La solution ne s’adresse donc pas à un développeur mais à des personnes créant du contenu.
Pour atteindre cet objectif, différentes solutions ont été évaluées (dont des composants React) ; et c'est la technologie Stencil.js qui a été retenue.
Stencil.js est un compilateur (et non un framework) qui produit des composants web standards (web components).
Ces composants sont utilisables directement par n’importe quelle page web classique. Ils peuvent également être intégrés dans des frameworks comme React, Angular, Vue… : https://stenciljs.com/docs/overview
L’intérêt des web components est d’exploiter au maximum les fonctionnalités natives des navigateurs web, et ainsi de favoriser les performances et l’accessibilité.
Stencil permet d’utiliser le Shadow DOM et donc d’isoler les styles : les CSS définies dans la page parente ne viennent pas déborder/influencer l’aspect du composant. De la même manière, les styles définis dans le composant ne changent pas l’aspect de la page qui le contient.
La compatibilité de Stencil avec différents navigateurs est large (à partir de IE11) grâce à des polyfills qui sont chargés automatiquement, uniquement s’ils sont nécessaires.
Les composants Stencil sont autonomes et contiennent tout le code dont ils ont besoin. Il n’y a donc pas de bibliothèque additionnelle à charger.
Tout développeur JavaScript et notamment React saura construire de nouveaux composants Stencil en fonction des besoins de la communauté.
Stencil simplifie l’expérience des développeurs. Il gère automatiquement un grand nombre de détails et de petites fonctionnalités qui pourraient être frustrantes et consommer du temps si le composant était développé directement en React.

camillemonchicourt commented 2 years ago

La suite des échanges sur le widget a lieu sur son dépôt dédié : https://github.com/GeotrekCE/Geotrek-rando-widget Les développements sont en cours et testables sur https://geotrekce.github.io/Geotrek-rando-widget/?path=/story/geotrek-rando-widget--app

seegwen commented 2 years ago

@camillemonchicourt et @parc-du-haut-jura: un grand merci pour cette initiative et d'avoir rendu le code opensource.

Le widget sera utilisé sur le site internet des itineraires chalaisiens.

camillemonchicourt commented 2 years ago

OK, merci pour ce retour. Le widget est en test sur : https://geotrek.ecrins-parcnational.fr/ressources/technique/2022-test-widget.html

mviadere-openig commented 1 year ago

Bonjour, as-t-on des nouvelles du développement du widget depuis août ?

seegwen commented 1 year ago

@mviadere-openig il y a eu des mises à jour du widget visiblement... Issue 30 - commentaire

camillemonchicourt commented 1 year ago

Oui, comme indiqué plus haut, les infos sur le projet sont sur le dépôt dédié du widget : https://github.com/GeotrekCE/Geotrek-rando-widget Nous avions aussi fait une info sur la première version du widget en juillet 2022 - https://groups.google.com/g/geotrek-fr/c/g7l4krS7bkE/m/kY1rA6NpAAAJ.

Depuis 15 versions sont sorties avec différentes améliorations et corrections - https://github.com/GeotrekCE/Geotrek-rando-widget/releases.

Il y a des pistes d'évolutions ergonomiques et fonctionnelles, mais le widget est fonctionnel, opérationnel et en production sur différents sites.

GeotrekCE / Geotrek-rando-v3

Créer un widget de fiche rando ou groupe de randos #371

La demande :

La solution proposée par Makina Corpus, retenu pour télécharger la première version de ce widget :