Le Rugbynistère App
Première application mobile du média rugby, développée sous Ionic Framework avec une API dédiée et un espace membre connecté au site.
Le Rugbynistère est un média rugby dont j'avais déjà recodé entièrement le site. Il lui manquait depuis longtemps une application mobile : le chantier a démarré en décembre 2016. Le travail ne s'est pas limité à l'application : mon planning se répartissait entre elle, les évolutions du site, et surtout le développement d'une API pour faire communiquer les deux. C'est ce dernier point qui commandait le reste.
Ionic, une API Laravel, et un jeton pour tenir les deux
L'application a été développée avec Ionic Framework. Ionic est un framework hybride : l'interface est écrite avec les technologies du web, puis embarquée dans une coque native publiée sur les deux magasins d'applications. Cela veut dire une seule base de code pour iOS et Android, au prix d'une interface qui s'exécute dans une vue web plutôt qu'en composants natifs.
Côté serveur, la partie Laravel était l'ossature réelle. L'application n'embarquait pas de contenu : elle interrogeait l'API, qui exposait les articles, les compétitions, les clubs, les joueurs, les matchs, le programme TV et les résultats. Écrire cette API a donc été une tâche à part entière.
L'enjeu le plus structurant était la continuité de session. Un lecteur du Rugbynistère n'est pas seulement un lecteur : il commente, met des articles en favori, et s'il est abonné bénéficie d'avantages réservés aux membres. Il fallait que l'application le reconnaisse comme le site le reconnaissait, sans quoi elle n'aurait été qu'un lecteur d'articles. L'authentification passe par un jeton JWT : un jeton signé que le client conserve et renvoie à chaque appel, ce qui permet de reconnaître une identité sans dépendre du cookie de session d'un navigateur. C'est ce mécanisme qui rendait l'espace membre possible sur mobile.
Ce que l'application proposait
- Consultation des articles, avec favoris et commentaires
- Calendrier des matchs et classements des compétitions, avec codes couleurs
- Fiches compétitions, clubs, joueurs et matchs
- Programme TV et résultats de la semaine
- Espace membre avec authentification par jeton JWT
La navigation principale tenait dans trois onglets (Accueil, Programme TV, Résultats), le reste des rubriques passant par le menu. Sur l'écran d'article, la fiche du match concerné (les deux écussons, la compétition, le score) venait se placer sous la signature du journaliste, et le corps de texte renvoyait vers les fiches des entités citées.
Une migration de framework en cours de route
La particularité de ce projet tient à un écart : environ quatre mois de développement, mais une sortie sur l'App Store et le Play Store dix mois après le début du chantier. Ce délai correspond au temps d'absorber les montées de version d'Ionic, de la version 1 à la version 3.
Ce n'était pas un simple changement de numéro. Ionic 1 reposait sur AngularJS, quand Ionic 2 puis 3 reposent sur Angular et TypeScript : un autre framework, un autre modèle de composants, un autre langage. Les deux figurent dans les technologies de ce projet.
La suite appartient au même récit : en 2019, déçus des performances d'Ionic, nous sommes repartis de zéro sur une deuxième application, en React Native cette fois, adossée à une nouvelle API. Cette première version reste ce qui a rendu la seconde possible.
Besoin de créer un site internet à Perpignan ?
Comme pour ce projet, créons ensemble un site unique, performant et à votre image.