Comment j’ai créé la fonction « Itinéraires » de TPGwidget

Nicolas Ettlin
TPGwidget
Published in
4 min readAug 28, 2016

L’une des fonctions les plus demandées pour mon application de transports en commun TPGwidget était une fonction qui permet de savoir quelles lignes prendre pour se rendre d’un point A à un point B, autrement dit, une fonction itinéraires.

Premières maquettes

J’ai tout d’abord dessiné sur papier des croquis de l’interface. C’est pour moi très important de passer par cette étape, car lorsque l’on la code directement notre imagination est souvent limitée par certaines considérations techniques.

Pour la page d’accueil, j’ai simplement dessiné une interface qui permet d’indiquer où on va et quand.

Quant à la page listant les trajets possibles, j’avais déjà une idée plus ou moins précise dans ma tête pour son interface, que j’ai dessinée également.

Ne me jugez surtout pas sur mes talents de dessinateur 😛

Données

L’API open data des transports publics genevois ne possède malheureusement aucune fonctionnalité permettant de rechercher un itinéraire. Les applications qui proposent une fonction « Itinéraire » (comme tpg+, tpg offline ou Itinera) reposent sur l’API non officielle des CFF proposée par opendata.ch.

Cependant, cette API pose un autre problème : les arrêts sont nommés selon la terminologie des CFF. Par exemple, Bel-Air devient Genève, Bel-Air. Certains noms d’arrêts sont même très différents de ceux utilisés par les TPG, par exemple l’arrêt Grand-Lancy qui devient Grand-Lancy, Pl. du 1er Août 1.

L’inverse est aussi vrai : si un utilisateur demande un itinéraire vers l’arrêt Rive, l’API pense qu’il s’agit de Rive-de-Gier, en France. Et je ne vous parle même pas des arrêts TPG qui ont des noms portant à confusion, comme Canada

C’est pour toutes ces raisons que j’ai codé en Node.js un petit utilitaire nommé transport.opendata.ch-data.tpg.ch. Ce petit script qui ne brille pas par son nom va chercher sur les serveurs open data des TPG la liste de tous les arrêts, puis pour chaque arrêt il va trouver l’arrêt CFF le plus proche. Toutes ces données sont finalement exportées vers une base de données, et le tour est joué !

En bleu les noms d’arrêts TPG, en vert les noms d’arrêts CFF

Création de la fonctionnalité

Après avoir dessiné l’interface et trouvé les données qu’il me fallait, il ne me restait plus qu’à coder la fonction dans l’application.

Page d’accueil

Pour la page d’accueil de la fonction Itinéraire (que l’on voit tout au début de cet article), j’ai mis des boutons pour sélectionner les arrêts de départ et d’arrivée, avec une autocomplétion, et un date picker pour sélectionner la date et l’heure du trajet.

J’ai utilisé une photo d’André Knoerr tout en haut de la page d’accueil, où l’on voit un tram, un trolleybus et un bus. Quoi de mieux pour illustrer une fonction itinéraires ?

Marche et trains CFF

Les données de transport.opendata.ch comportent naturellement les horaires des trains CFF, je les ai donc ajoutés à l’application. J’ai également ajouté une icône pour la marche à pied.

Pages d’erreur

J’ai créé des pages d’erreurs pour les rares fois où il est impossible de trouver un itinéraire, ou si l’utilisateur a fait une erreur (par exemple oublié de mettre son lieu d’arrivée).

Adaptation Android

TPGwidget étant disponible depuis un mois sur Android, j’ai fini par adapter la fonction Itinéraire d’iOS à Android.

📲 Téléchargez dès maintenant TPGwidget pour iOS ou pour Android

--

--