Informations rapides sur Ginku
- Mon rôle
- Conception de l’interface, développement front-end et backend, intégration de l’API et déploiement.
- Plateformes
- Application web responsive et application Android.
- Technologies principales
- Vue.js 3, Vite, Tailwind CSS, Node.js, Express et Capacitor.
- Infrastructure
- Docker, Caddy et GitHub Actions.
Le besoin de départ
Une interface plus directe pour les transports de Besançon
Je consulte régulièrement les horaires du réseau Ginko et je souhaitais disposer d’une interface plus directe, avec une navigation claire et moins d’étapes pour accéder aux prochains passages.
Le projet est également lié à mon expérience de l’accessibilité numérique. Certaines informations essentielles peuvent devenir difficiles à retrouver lorsque la structure d’une interface est complexe ou que la navigation avec une technologie d’assistance n’a pas été suffisamment prise en compte.
J’ai donc commencé Ginku avec un objectif précis : rassembler les informations utiles du réseau dans une application simple, responsive et utilisable au clavier comme avec un lecteur d’écran.
Fonctionnalités
Ce que permet l’application
Ginku ne se limite plus à l’affichage des horaires. Ses différentes pages permettent de retrouver les informations du réseau à partir d’une ligne, d’un arrêt, de la position de l’utilisateur ou du numéro d’un véhicule.
Recherche centralisée
La recherche de l’accueil permet de retrouver une ligne, un arrêt ou un véhicule depuis un seul champ. Les résultats sont regroupés par type afin de faciliter leur identification.
Horaires et favoris
Chaque arrêt affiche les prochains passages regroupés par ligne et par destination. Une ligne peut être ajoutée aux favoris pour retrouver directement ses trois prochains horaires depuis l’accueil.
Les données des favoris sont actualisées automatiquement toutes les trente secondes.
Arrêts proches
Avec l’autorisation de l’utilisateur, Ginku utilise la géolocalisation de l’appareil pour afficher les arrêts les plus proches, leur distance et les prochains passages.
Un lien permet également d’ouvrir un itinéraire vers l’arrêt sélectionné dans Google Maps.
Lignes et directions
Les lignes sont organisées par catégories, notamment les tramways, les Lianes et les lignes urbaines. L’utilisateur peut consulter les arrêts d’une ligne et inverser son sens de circulation.
Informations de trafic
Une page rassemble l’état du réseau, les perturbations en cours ou prévues et les messages associés aux différentes lignes.
Informations sur les véhicules
À partir du numéro d’un véhicule, Ginku peut afficher les informations disponibles sur ses équipements, son accessibilité, son énergie et certaines données en temps réel comme l’affluence ou sa position.
Accessibilité
Des choix d’accessibilité intégrés au code
L’accessibilité de Ginku ne repose pas uniquement sur son apparence. J’ai intégré plusieurs comportements destinés à rendre la navigation plus compréhensible avec un clavier ou un lecteur d’écran.
À chaque changement de page, le focus est déplacé vers le titre principal afin que l’utilisateur sache immédiatement où il se trouve. Un lien d’évitement permet également de rejoindre directement le contenu principal.
Les boutons possèdent des intitulés explicites, la page active est indiquée dans la navigation et les icônes purement décoratives sont masquées aux technologies d’assistance.
Les changements importants, comme l’actualisation des arrêts proches, sont annoncés à l’aide de zones dynamiques. La fenêtre de mise à jour Android gère également le déplacement du focus, sa restauration après fermeture et la navigation avec la touche Échap.
- Structure HTML sémantique
- Lien d’évitement
- Navigation au clavier
- Gestion du focus entre les pages
- Intitulés accessibles pour les boutons
- Annonces dynamiques avec aria-live
- Fenêtres modales avec gestion du focus
- Réduction des animations selon les préférences du système
Architecture
Une architecture séparant l’interface et les données
Le front-end est une application Vue.js 3 construite avec Vite et Vue Router. Il communique avec un backend Node.js et Express qui sert d’intermédiaire avec l’API Ginko.
Ce backend évite d’exposer la clé de l’API dans le navigateur. Il normalise certaines réponses et utilise plusieurs durées de cache selon la nature des données : les informations en temps réel sont conservées moins longtemps que les informations plus stables sur les lignes ou les véhicules.
Il évite également de lancer plusieurs requêtes identiques lorsqu’un même appel est déjà en cours.
La version Web est déployée avec Docker. Caddy sert l’application et transmet les requêtes adressées à l’API vers le conteneur backend.
Application Android
Du site responsive à l’application Android
J’ai utilisé Capacitor pour transformer le front-end Vue.js existant en application Android sans maintenir une seconde interface séparée.
La version Android utilise les fonctionnalités natives de Capacitor pour la géolocalisation et la conservation des préférences. Les favoris et le thème sélectionné peuvent ainsi être conservés directement sur l’appareil.
J’ai également développé un plugin Android spécifique pour gérer les mises à jour distribuées depuis GitHub. Lorsque l’application détecte une version plus récente, une fenêtre accessible propose de télécharger le nouvel APK. Le téléchargement passe par le gestionnaire Android et l’installation s’ouvre une fois le fichier récupéré.
Automatisation
Une publication Android automatisée
La création de l’application Android est automatisée avec GitHub Actions.
Lorsqu’un tag de version au format vX.Y.Z est envoyé sur GitHub, le workflow installe les dépendances, construit le front-end, synchronise Capacitor et génère un APK signé.
La signature est vérifiée avant que l’APK soit ajouté automatiquement à une release GitHub. Les informations sensibles du certificat de signature restent protégées dans les secrets du dépôt.
Difficultés et apprentissages
Ce que ce projet m’a appris
Gérer des données dont la fréquence de mise à jour varie
Les horaires, la position des véhicules et les informations générales ne peuvent pas utiliser la même durée de cache. J’ai donc adapté la stratégie de mise en cache à chaque type de donnée afin de limiter les appels sans afficher trop longtemps des informations devenues anciennes.
Fiabiliser la géolocalisation
La fonctionnalité des arrêts proches doit gérer les autorisations refusées, les délais d’attente, les positions indisponibles et les déplacements de l’utilisateur. Elle arrête également les actualisations inutiles lorsque la page n’est plus visible.
Conserver une navigation accessible dans une SPA
Avec Vue Router, le navigateur ne replace pas automatiquement le focus lors d’un changement de vue. J’ai dû ajouter cette gestion pour que la navigation reste compréhensible avec un lecteur d’écran.
Distribuer une application en dehors du Play Store
La version Android m’a amené à travailler sur la signature d’un APK, les versions, les permissions d’installation, les releases GitHub et l’automatisation de la compilation.
Faire évoluer un projet sans tout réécrire
Le même front-end fonctionne aujourd’hui dans le navigateur et dans l’application Android. Capacitor m’a permis d’ajouter des fonctions natives tout en conservant l’architecture Vue.js existante.
Voir Ginku
Ginku est toujours en cours d’évolution. Son code source est public et l’application peut être utilisée depuis un navigateur ou installée sur un appareil Android.