Journal Twistolol

Tiens, quand passe mon bus ? Allez, je suis un mec connecté, je n'ai qu'à sortir mon smartphone et à aller voir sur le site web de mon transporteur favoris (à défaut), j'ai nommé Twisto ! Mais bon, c'est dommage, je suis obligé d'aller sur leur site web pas super ergonomique sur téléphone pour rentrer les informations de mon arrêt et ainsi accéder à l'information que je demande, à savoir, le temps que je vais attendre dans le froid avant de monter dans mon bus. Eh oui, mon smartphone n'est ni un Iphone, ni un terminal Android puisque je suis l'heureux propriétaire d'un HP pré 3 qui tourne sous WebOS, et sous WebOS, les applications sont rares, mais bon, on peut comprendre les éditeurs au vu du presque abandon récent de la plate forme.

Du coup, le premier truc auquel on peut penser c'est "et si je réalisais moi même cette application, comment ça se passerait ?". Leur site a été refait récemment, on peut supposer qu'ils en ont profité pour faire un truc hyper clean et parfait, avec une méthode d'accès aux informations logique et bien faite. Bon, donc premier réflexe, regarder un peu la source de leur page d'accueil. Le code m'a l'air un peu anarchique, je crois qu'on peut dire que la page a été généré par je ne sais quoi (Tout indique que c'est de l'ASP.NET derrière, les extensions sont en ".aspx", il y a des variables telles que "aspnetForm", etc...). Bon, c'est un peu plus clair si on passe sur la page dédiée aux horaires en temps réel. Je recherche la partie qui m'intéresse et je vois qu'il s'agit d'une iframe qui charge une page web du site twisto.fr ... sur le port 8080 ! Tiens, l'extension de la page est en ".php". Ok, donc le module qui permet d'avoir des horaires en temps réel est fait en PHP et est géré par un autre serveur web. La preuve en image en texte :

sebastien@ubuplop:~$ telnet twisto.fr 80
Trying 109.205.65.60...
Connected to twisto.fr.
Escape character is '^]'.
GET / HTTP/1.1
HOST: twisto.fr

HTTP/1.1 301 Moved Permanently
Content-Length: 150
Content-Type: text/html
Location: http://www.twisto.fr/
Server: Microsoft-IIS/6.0
X-Powered-By: ASP.NET
Date: Thu, 02 Feb 2012 19:11:48 GMT

sebastien@ubuplop:~$ telnet twisto.fr 8080
Trying 109.205.65.60...
Connected to twisto.fr.
Escape character is '^]'.
GET / HTTP/1.1
Host: www.twisto.fr:8080

HTTP/1.1 200 OK
Date: Thu, 02 Feb 2012 19:13:07 GMT
Server: Apache/2.2.8 (Win32)
X-Powered-By: PHP/5.2.5
Transfer-Encoding: chunked
Content-Type: text/html

Bon, je passerais sur la page que l'on peut trouver si l'on va sur la racine du site de twisto qui tourne sur le port 8080 qui dit tout haut "Bonjour, je m'appelle Kévin et je viens d'installer un serveur web". J'allais dire "Kévin, 15 ans", mais je me suis retenu, quand même, ils ont pensé à supprimer la page pointée par le lien nommé "phpinfo", bon, on se doute de ce qui pouvait s'y trouver (soit la photo d'un tractopelle, soit un phpinfo).

J'en oublie un peu le pourquoi de ma venue : savoir comment ils récupèrent les informations inhérentes au temps d'attente dans le froid. Bon, le seul code que j'ai c'est un Veuillez patienter et une requête en AJAX (même si on ne peut pas vraiment dire qu'il s'agisse d'AJAX, puisque vous allez voir que le format de donnée utilisé n'est pas toujours au format XML (oups je spoil) mais il s'agit bien de javascript asynchrone).

Pour étudier ça, je vais donc laisser un peu Firefox pour continuer mon étude et ouvrir un bien meilleur outil : Wireshark. Hop, il regarde ce qu'il se passe sur ma carte réseau pendant que je fais une requête standard d'accès aux horaires, et dès que j'ai fini, je vais regarder le résultat de la capture. Bon, après la page "Veuillez patienter", on obtient la page normale, qui nous demande d'abord quelle ligne on veut. À partir de là, on va envoyer la ligne et récupérer les deux destinations possibles pour demander à l'utilisateur la direction du bus. Et c'est là où ça devient comique. Après une requête POST contenant une variable "a" un peu bizarre ("refresh_list") et le numéro de la ligne, on obtient une réponse sous la forme ... d'un code javascript ! Le code est simple : il crée un array vide et le remplit. Non, bon, comme c'est assez drôle je vais le mettre ici :

temp = Array();
temp[temp.length] = Array('','S..lectionnez une destination');
temp[temp.length] = Array('A','Herouville st-clair');
temp[temp.length] = Array('R','Carpiquet rue des ecoles');

Voila, alors, déja, en javascript, il y a un truc vraiment génial, c'est la méthode push sur les arrays. Ça rend le code plus agréable à lire. Mais bien joué à celui qui a fait ça, ça me serait jamais venu à l'esprit. Je note en vu d'une éventuelle participation à l'IOCCC. Ah, et aussi, j'ai envie de dire, "JSON".

Bref, c'est marrant, mais du coup j'ai envie de savoir où c'est utilisé. Du coup j'ouvre Firebug et je regarde un peu tous les fichiers javascript qu'il me propose. Il y en a un qui contient en première ligne le nom et le prénom de quelqu'un. Comme une recherche Google m'indique que cette personne est de la région bas normande et qu'elle travaille dans l'informatique, on peut supposer qu'il s'agit d'une personne ayant travaillé sur le site de Twisto. C'est peut être pas très sympa que son nom soit disponible publiquement de cette manière.
L'objet Ajax semble défini dans le javascript obscurci, c'est dommage. J'ai pas trop envie de chercher à savoir ce qu'il fait du coup. Enfin bon, je suppose qu'une fois que la réponse est reçue, le script l'execute puis joue avec la variable "temp".

Voila, il fallait s'y attendre, j'ai épuisé un peu tout le croustillant. Je vais juste finir avec l'affichage des résultats. Une fois qu'on a bien renseigné sa ligne, sa direction et son arrêt, le script codifie tout ça et l'envoie au serveur. Tiens on va s'arrêter un peu sur la codification des arrêts. Quand le serveur envoie la liste des arrêts (sous la même forme que la liste des directions), il envoie le nom de l'arrêt et un identifiant sous la forme -1493171984_7051. Je reconnais les quatre derniers chiffres, il s'agit du numéro de l'arrêt : il est écrit en gros quand on arrive à l'arrêt de bus et si on l'envoie par SMS on obtient les informations sur les bus à venir. Par contre l'autre identifiant doit être un identifiant interne.
Bon, ok, on a la direction et l'identifiant de l'arrêt. On va donc envoyer le tout au serveur pour avoir les horaires ! Et là, dernière petite blague, voici ce qu'il y a dans les variables envoyées en POST au serveur : le numéro de la ligne (normal), la direction (sous la forme d'une lettre : A ou R, normal aussi) et ... l'identifiant de l'arrêt tel qu'il a été envoyé par le serveur (-1493171984_7051) ET l'identifiant de gauche (-1493171984) ET l'identifiant de droite (7051) ... Une seule de ces trois informations aurait suffit à mon avis ...

Voila, on a envoyé tout ça au serveur et là on attend plus que nos horaires. Tiens ça tombe bien, on reçoit une page web en guise de réponse ! Son contenu est simple : il y a un message "veuillez patienter", et un script qui va envoyer une requête POST avec en paramètre la référence de l'arrêt (en un seul exemplaire cette fois ci, seul l'identifiant interne bizarre sera renvoyé) et un autre paramètre qui doit être un numéro d'identification de la requête ... Ou alors j'ai manqué un truc. Et c'est juste après la fin de cette étape totalement inutile que l'on peut voir s'afficher nos horaires !

J'imaginais un truc plutôt bien fait, ben on dirait que je m'étais trompé. Du coup ça motive moins à faire une petite appli vite fait pour aller lire dans tout ce bazar.

Pour conclure, Twisto fait aussi bien des sites web qu'ils choisissent des trams.
Bon allez, je me moque mais Twisto, c'est pas une mauvaise boite non plus, les sites web c'est pas leur métier, et leur métier, ils le font plutôt bien, et puis, en terme de sites de compagnie de transport, on peut trouver bien pire ! Du coup je me demande qui a fait leur site web, si c'est un stagiaire sous payé, ça va, si c'est un prestataire hors de prix, c'était de l'arnaque. Mais quand même, Twisto, si vous m'aviez pris en stage en première année, je vous promets que j'aurais pas fait pire.