Étude de cas

Vigie marine. Les baleines du Saint-Laurent, saisies au large et cartographiées.

Le Réseau d’observation des mammifères marins recueille les observations de baleines, de phoques et de tortues faites par des citoyens et par ses membres observateurs. L’outil qui portait cette collecte reposait sur un arrière-plan vieillissant : chaque ajout d’espèce, chaque nouveau compte, chaque correction de contenu demandait une intervention de développeur. Nous l’avons rebâti au complet en Vue.js et Laravel, sur des versions à jour, en reproduisant l’interface à l’identique : les observateurs ont retrouvé l’application qu’ils connaissaient. Ce qui a changé est ailleurs — un panneau d’administration qui remet l’opération courante entre les mains du ROMM, et une saisie qui fonctionne même sans réseau, au large.

ClientRéseau d’observation des mammifères marins
Année2026
TypeApplication web de science participative
PortéeSaisie, carte publique, administration
ExpertiseDéveloppement web
SolutionReprise et refonte de logiciel
SecteurConservation
Outil de visualisation de Vigie marine : carte du Saint-Laurent couverte d'observations de mammifères marins, avec filtres par date, espèce et type d'observation
Le point de départ

Une collecte qui fonctionnait, mais que personne au ROMM ne pouvait faire évoluer.

Le problème n’était pas la saisie d’observations : elle se faisait. Le problème était tout ce qui l’entourait. L’arrière-plan avait vieilli, et la moindre opération d’administration devenait une demande de développement — avec le délai et le coût qui vont avec.

Pour une organisation de conservation dont la saison d’observation est courte, attendre une intervention externe pour ajouter une espèce ou activer un compte n’est pas un inconvénient : c’est de la donnée perdue.

Ce qui bloquait au quotidien
  1. 1

    Ajouter une espèce à la liste d’observation demandait une intervention dans le code.

  2. 2

    Créer ou désactiver un compte de membre observateur passait par une demande externe.

  3. 3

    Modifier le texte d’une page d’information exigeait un déploiement.

  4. 4

    Les listes du formulaire — types d’embarcation, niveaux de certitude, distances — étaient figées.

L’application

Un formulaire en trois étapes, conçu pour être rempli sur un pont de bateau.

La saisie doit rester praticable à une main, sur un téléphone, avec du vent et un réseau incertain. D’où le découpage en étapes courtes plutôt qu’un formulaire unique à faire défiler : une logique qui fonctionnait déjà et que la refonte a reproduite écran pour écran.

Accueil de Vigie marine avec ses deux portes d'entrée : observation citoyenne et connexion des membres observateurs du ROMM
Deux publics, deux parcours : le citoyen soumet sans compte, le membre observateur se connecte.
Première étape du formulaire de Vigie marine : plateforme d'observation, date, visibilité, échelle de Beaufort et sélection de la position sur une carte Leaflet
Étape 1 — la plateforme d’observation, les conditions en mer et la position, cliquée sur la carte ou relevée par géolocalisation.
Deuxième étape du formulaire de Vigie marine : sélection de l'espèce observée, niveau de certitude, nombre d'individus, distance et photo
Étape 2 — l’espèce parmi 36 entrées administrables, le niveau de certitude, le nombre d’individus et la photo.
Outil de visualisation publique de Vigie marine : carte du Saint-Laurent, filtres par date, espèce, type d'observation et membre, et graphique des observations par jour
La carte publique : les observations validées, filtrables par date, espèce, type et membre.
Au large, sans réseau

Une baleine ne repasse pas quand le signal revient.

C’était une exigence du ROMM dès le départ, et elle vient directement du terrain : sur le fleuve, la couverture cellulaire disparaît bien avant l’estuaire. Une application qui exige une connexion pour afficher son formulaire perd l’observation — et une observation perdue ne se rattrape pas.

Vigie marine est donc une application web progressive. Un agent de service met en cache l’interface et les listes de référence au premier chargement ; l’observateur peut ensuite ouvrir la saisie en pleine mer, sur un téléphone sans barre de signal.

Formulaire de saisie de Vigie marine entièrement affiché alors que l'appareil n'a aucune connexion : la mention « Vous êtes hors ligne » apparaît en rouge et la carte reste visible

Réseau coupé, page rechargée : le formulaire, ses listes et la carte répondent quand même. Seul l’indicateur change de couleur.

  • Le formulaire complet reste disponible : plateformes d’observation, espèces, échelle de Beaufort, plages de distance.
  • Les tuiles de carte déjà consultées restent affichées, donc la position se pointe encore à l’écran.
  • L’application indique clairement son état — « Vous êtes hors ligne » — plutôt que d’échouer en silence.
  • Installable depuis le navigateur, elle s’ouvre en plein écran comme une application du téléphone.
Le panneau d’administration

L’administration courante revient à l’équipe du ROMM.

C’est le cœur du mandat. Ajouter une espèce ou activer un compte est devenu un geste d’une minute plutôt qu’une demande de développement. Nous restons au dossier pour ce qui mérite vraiment du développement — l’interface, elle, ne devrait jamais attendre après nous.

Contenu des pages

Les textes d’accueil, les avertissements de la carte publique et les consignes de saisie se modifient directement, en français et en anglais.

Comptes utilisateurs

Création, activation et retrait des membres observateurs, distincts des citoyens qui soumettent une observation ponctuelle.

Observations soumises

Consultation, correction et validation des observations reçues avant leur diffusion sur la carte publique.

Entités du formulaire

Les listes qui alimentent la saisie — espèces, types d’embarcation, niveaux de certitude, plages de distance — s’administrent sans toucher au code.

Sous le capot

Vue.js à l’interface, Laravel à l’arrière-plan.

Une interface Vue.js pour la saisie, la carte Leaflet et le panneau d’administration ; un arrière-plan Laravel pour les comptes, les permissions et la validation des observations avant diffusion.

Vue.jsLaravelPHPLeafletApplication web progressive (PWA)Agent de service et cache hors ligneInstallable sur iOS et AndroidBilingue français-anglaisPanneau d’administration sur mesureCarte publique de diffusion
Résultats

Autonome au quotidien, accompagné pour la suite.

L’objectif n’était pas de rendre le ROMM indépendant de nous, mais de sortir l’administration courante du chemin critique. Nous restons leur partenaire de développement : le temps qui partait en demandes de routine sert maintenant à faire avancer la plateforme.

Autonome au quotidien

Espèces, types d’embarcation, comptes et contenu des pages s’administrent depuis l’interface. Une saison d’observation ne dépend plus d’une demande de développement pour avancer.

Deux publics, une seule base de données

Les observations citoyennes et celles des membres observateurs alimentent le même jeu de données, avec des parcours de saisie et des niveaux de validation distincts.

Des données qui circulent

Les observations validées sont diffusées publiquement sur une carte filtrable, en collaboration avec l’Observatoire global du Saint-Laurent et le gouvernement du Canada.

Disponibles pour de nouveaux projets

Construisons quelque chosede concret.

Développeurs chevronnés, assistés par l'IA : on livre plus vite, sans sacrifier la qualité. Dites-nous ce que vous voulez construire. On vous dira à quelle vitesse on peut le livrer.

Parler à DevActif
La confiance d'équipes qui construisent
Produits SaaSProcessus IAPlateformes de donnéesLogiciels et outils internes