J’ai eu la chance de rejoindre la super équipe du journal La Provence en tant que Développeur Fullstack.

J’ai pu travailler dans les locaux historiques de La Provence à Marseille. Ce sont les locaux où il y a les rotatives pour imprimer le journal.

Il y a maintenant des nouveaux locaux tout neuf depuis le rachat de La Provence par la CMA CGM.

Quand on pense au journal, quand il s’agit de la partie web on se dit : « c’est facile, c’est juste un site web avec des articles ».

Alors, voici une liste non exhaustive des choses qui gravitent autour :

• La gestion des abonnements (articles premium)
• La gestion des abonnements (journal physique)
• Distribution des journeaux aux abonnés
• Paye des livreurs
• Régie publicité
• Gestion des bons de commandes des commerciaux en physique

Voilà. Maintenant que les bases sont posées on peut parler de ma mission.

Pour donner un peu de contexte, il est utile de préciser que La Provence a une volonté d’unifier et de moderniser les technologies utilisées pour faciliter les recrutements et le passage d’un projet à l’autre.

Il y a donc eu beaucoup de refontes des projets pour passer ça sur du Javascript/Typescript (NextJS côté front, NestJS côté back). Ce qui fait que même si j’ai été recruté pour faire du développement backend à la base, je peux quand même intervenir sur du frontend. Et oui ! C’est des technologies JS côté backend ET frontend (pour la plupart des projets maintenant).

Je précise également que La Provence s’occupe aussi de Corse Matin.

J’ai directement commencé avec un gros ticket très difficile histoire de bien rentrer dans le bain.

Comme le front a subi une refonte, tout le tunnel d’abonnement pour s’abonner au journal a changé. Voilà à quoi il ressemblait avant la refonte :

Le design a été changé et bien sûr la technologie utilisée aussi (pour moderniser et rattraper la dette technique) :

Comme le front a subi un changement, la logique côté back change aussi. En plus, il y a eu une migration sur des nouveaux outils utilisés par les équipes marketing. Il faut donc adapter : la structure de données renvoyée vers le front, la gestion des paiements avec Stripe et enfin la logique métier.

Deux routes à implémenter :

• Une route de gestion paiement
  • Logique métier pour les outils interne (notamment de gestion des livraisons des journaux)
  • La création de la subscription côté stripe
• Une route de gestion des droits
  • Une fois que le paiement est validé, un webhook stripe appel notre route back pour mettre à jour les droits utilisateurs

Bien sûr pour chaque projet et chaque nouvelle route il fallait :

• Écrire les tests unitaires
• Écrire les tests e2e (end to end)
• Mettre à jour le Swagger (pour avoir une interface visuelle des routes pour simplifier la vie des devs front)

À la base, j’ai vraiment été recruté comme développeur backend mais ils avaient besoin de renfort en front. Donc je me suis dit « let’s go ». Surtout que je suis un grand fan de NextJS (comme je fais beaucoup de projets persos avec cette techno en plus de mes précédentes expériences).

Le site officiel a été modernisé en NextJS lui aussi. J’ai pu intervenir sur de nombreux tickets. Je vous épargne les tickets de bug et on va plutôt parler des features que j’ai développées.

J’ai pu intégrer une bannière pour inciter les utilisateurs à lire un article dans l’application. J’avais accès aux maquettes Figma créées par notre super Designeuse.

Le principe de l’app banner c’est d’ouvrir le store pour télécharger l’application si l’utilisateur n’a pas encore l’application OU d’ouvrir directement l’application si l’utilisateur la possède.

Or, par soucis de sécurité, il est impossible de savoir les applications installées par l’utilisateur depuis le navigateur (et heureusement !). Donc toute la difficulté a été de trouver un moyen de contourner ce problème.

Bien sûr j’y suis arrivé ! En ouvrant l’application par défaut et si erreur je fallback vers le store :)

Deuxième difficulté : ouvrir l’app store ou le google play store en fonction de l’appareil de l’utilisateur.

Et enfin, il fallait également adapter l’app banner (avec tous les liens et les styles) en fonction du contexte (La Provence ou Corse Matin) via les variables d’environnement.

J’ai dû implémenter un bandeau newsletter politique. Il existait déjà sous format OM (football) donc j’ai dû l’adapter.

Plutôt que de recréer un composant newsletter adapté à la politique, j’ai créer un composant générique pour qu’il s’adapte pour la version OM ou la version politique. L’idée derrière ça, c’est de pouvoir le réutiliser quand il y aura d’autres newsletter (plutôt que de recréer un nouveau composant à chaque fois).

Le Design System (ou système de conception) peut être assimilé à une bibliothèque de composants dans laquelle se servir lors de la conception du développement d’un projet web. Il englobe des « bibliothèques » (libraries) et des « guides de style » (styleguides). Le Design System regroupe ce que l’on appelle la charte ergonomique et la charte graphique.

Source : Design System Adimeo

C’est beaucoup de travail mais ça a beaucoup d’avantages. Le design system est donc un projet à part entière au sein de La Provence. C’est tous les composants front réutilisables dans plusieurs projets. Il suffit juste d’importer la librairie créée par nos soins.