Travelsteps

Carnet de voyage
   Travelsteps

Summary : Travelsteps : Online or offline, be able to record on my mobile, steps (notes, photos, videos, Gpx tracks) during a bike trip and build the pages of a #Wordpress website in real time.

Build with #ES6 #react #router #redux #bootstrap #leaflet #intersectionObserver #pwa #serviceworker #wp

>>> Demonstration site.
 
For security reasons, all editing features of the demo site are inhibited and voluntarily terminate in error.
 
This project is in progress …
 
 
 

04/04/2020 – Confinement oblige, je me suis attaqué à un projet qui me tient à cœur.

Après chaque voyage à vélo je fais le constat que je n’ai jamais, ni le temps, ni l’énergie, de mettre en forme les photos et commentaires de voyage.

J’ai utilisé quelque temps l’application Polarsteps. Mais malheureusement les données (notes, photos, itinéraires) ne sont pas vraiment ni exportables, ni réutilisables en dehors de cette application.

Je me suis donc lancé dans le développement de ma propre application : TravelSteps

Travelsteps dois permettre, avec ou sans réseau 4G, d’enregistrer et de regrouper, sur une carte, sous la forme d’étapes, des notes (notes textuelles, photos, vidéos, audio, traces gpx) durant un voyage vélo et de construire en temps réel le site wordpress correspondant pour présenter ces notes..

 
Si l’application est fonctionnellement assez simple, il me faut apprendre pas mal de nouvelles choses, que ce soit en termes de langage de codage, d’API ou de concepts, pour pouvoir développer une telle application.

Pour les spécialistes je ne citerai que le langage js ES6, les bibliothèques react, redux, pour concevoir l’application, la bibliothèque graphique Leaflet pour les cartes, le concept des PWA (application web progressive), le service worker

L’application Travelsteps côté serveur prendra la forme d’un plugin WordPress. Elle pourrait donc être utilisée par quiconque à accès à l’administration de son site wordpress.

Le site que ce soit la visualisation des carnets de voyage ou la partie administration sera côté navigateur sous la forme d’une application SPA (Single Page Application). Elle sera donc accessible via une page web unique depuis un mobile ou un PC.

La saisie des notes (textes, photos, vidéos) et l’ajout de traces gpx pourra se faire en mode connecté (wifi, 4G) ou non connecté.
La mise à jour du site (prise en compte des étapes, des notes et des traces) se fera dés que les éléments auront été transférés au serveur.

 

Voici les premiers écrans de la partie administration qui me permettra de créer un carnet de voyage et de saisir des notes ou des photos en cours de voyage.
 

Page d'accueil
  Page d’accueil
   
Ajout d'un carnet de voyage
  Ajout d’un carnet de voyage
   
Ajout des traces gpx
  Ajout des traces gpx

 Enfin voici la capture d’écran qui correspond au site tel que le verront les internautes sur un grand écran de PC.

 

Travelsteps
Travelsteps – sur écran PC

 

 
 
Mais le mieux est encore de visualiser tout cela sur le site de démo.
 
 
Précisions importantes:

 

Ces pages de démonstration montrent la partie Visualisation et Administration.

 

Les boutons Menu (trois tirets horizontaux) donnent accès aux menus d’administration pour la création / modification / suppression d’un carnet de voyage / d’étapes / traces ou de notes. Ces fonctionnalités sont en temps normales pas visibles de l’internaute qui visualise le carnet de voyage.

 

Sur les sites de démo toutes les fonctionnalités d’édition sont bloquées et se terminent volontairement en erreur.

 
 
Utiliser le bouton pour modifier le mode de visualisation. Vous avez le choix entre le mode Carousel horizontal (Slider) ou le mode Liste verticale (Scroll List)

 

Pour fermer un menu ouvert, il suffit de re-cliquer sur le bouton du menu.
Pour revenir à la page d’accueil, il suffit de cliquer sur le nom du carnet de voyage.
 

La saisie et la visualisation des commentaires n’est pas encore implémentée.
 
 
Ce projet est loin d’être finalisé mais il progresse bien … A suivre donc.
 
 

3 réactions sur “Travelsteps”

  1. J’ai visité le site de démo, c’est vraiment très intéressant, j’ai hâte qui soit fonctionnel. Je fais toujours beaucoup de photos lors de mes voyages et je prends des notes mais je n’ai que rarement le courage de les mettre en forme sur mon site.
    j’attends avec impatience le moment de sa sortie.

  2. Bravo ! Ca me donne envie de m’organiser pour garder quelques souvenirs des futures balades en vélo. Le rendu est excellent, et la « production » au fur et à mesure paraît suffisamment simple pour qu’on ait envie de la faire au fur et à mesure. Bon courage pour la suite, et à bientôt pour des nouvelles j’espère.

  3. Super projet ! J’utilise Polarsteps en ce moment à défaut de mieux. Pouvoir l’utiliser hors ligne et reexploiter les données ailleurs c’est vraiment ce qui manquait. Très sympa l’affichage en mode slider pour suivre étape par étape. C’est top aussi que tu prévoies un plugin WordPress.
    J’ai hâte de pouvoir tester l’application !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

 

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.