Travelsteps

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

Build with #ES6 #react #router #redux #leaflet #pwa #service-worker #wp
 
 

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 j’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 me permettre, avec ou sans réseau 4G, d’être capable d’enregistrer sur mon mobile des étapes (notes textuelles, photos, vidéos) durant un voyage vélo et construire en temps réel les pages de son site WordPress personnel.

 
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écision importante: ce site de démo n’est pas encore optimisé. Donc le temps de chargement de la première page peut être long.

Il reste beaucoup de choses à faire. Notamment du côté Administration pour pouvoir Saisir/Modifier/Supprimer sur mobile un carnet de voyage, des étapes, des notes, des traces gpx …

A suivre donc …

 
 

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.