Aller au contenu

Chouette Copro : mode offline sur une application mobile

L’absence de couverture réseau vous empêche d’effectuer votre travail ? Découvrez comment nous avons permis aux utilisateurs de l’application mobile Chouette Copro de mener à bien leurs missions même en offline.

Contactez-nous
Imagile

Chouette Copro est une start-up créée en 2016 spécialisée dans le suivi des travaux et entretien rapportés par les syndics et occupants de logement ou d’immeuble.

Grâce à une plateforme numérique, les gestionnaires de syndics peuvent faire remonter des problématiques rencontrées dans leurs immeubles et suivre l’avancée des différents sujets, de la prise en compte de la demande, à la finalisation du chantier.

Page d'accueil de l'application Chouette Copro listant les tickets d'un gestionnaire
Page d'accueil de l'application Chouette Copro listant les tickets d'un gestionnaire

Pour réaliser leurs visites, les gestionnaires utilisent une application mobile qui encapsule l’application web.

Depuis cette application disponible sur IOS, les utilisateurs peuvent créer des visites, réaliser des signalements et des observations.

Initialement, une application mobile avait été créée par les équipes de développement de notre client, mais elle n’a jamais été publiée.

Alors que notre client souhaitait la mettre à disposition de ses utilisateurs, l’application avait engrangé bien trop de dettes techniques. Il a été décidé de repartir sur une toute nouvelle application bénéficiant des dernières technologies, notamment avec l’ajout de Hotwire Native.

De cette manière, l’application est devenue plus simple à maintenir et les développements plus rapides à réaliser.

Besoin de simplifier l’expérience de vos utilisateurs ou répondre à des objectifs stratégiques, commerciaux, marketing ou opérationnels ?

Vous ne savez pas vers quels types d’application vous tourner : Natives, hybrides…

Nous vous accompagnons de manière agile afin de vous proposer des solutions pertinentes à vos demandes.

 

L’utilisation de l’application est limitée à une utilisation exclusivement en ligne. Or les utilisateurs n’ont pas toujours de couverture réseau lors de leurs visites et ne peuvent donc pas réaliser de tickets dans ces lieux (caves, garages…).

Afin de lever les freins à l’utilisation de cette application mobile dans ces cas spécifiques, nous avons mis en place un système d’utilisation online/offline.

Écran natif de création d'une nouvelle visite
Écran natif de création d'une nouvelle visite
Écran natif de création d'un nouveau signalement
Écran natif de création d'un nouveau signalement

Dans une utilisation hors ligne, les données saisies dans l’application mobile ne peuvent pas être envoyées sur le serveur. Il faut alors mettre en place un système de cache capable de sauvegarder localement ces données.

Une fois que l’appareil de l’utilisateur retrouve du réseau, les données peuvent être envoyées sur le serveur.

Fiche d'une visite
Fiche d'une visite

Pour accélérer la mise en place de cette fonctionnalité, un bouton de synchronisation des données a d’abord été intégré afin de lancer l’import des données sur les serveurs web.

Mais dans un second temps, ce bouton a été supprimé et remplacé par une synchronisation automatique ne nécessitant aucune action de la part de l’utilisateur. L’expérience utilisateur est devenue ainsi plus fluide, tout en limitant le risque d’oubli d’import par l’utilisateur.

Liste des visites enregistrées
Liste des visites enregistrées

Un indicateur sur l’état de la synchronisation des données a également été ajouté pour tenir l’utilisateur informé du statut de ses tickets.

Pour permettre une utilisation hors ligne d’une application mobile, des vues natives IOS et Android doivent être utilisées.

Une vue native est un écran composé des éléments de l’interface du système d’exploitation d’un téléphone. Pour IOS nous utilisons l’outil SwiftUI et sur Android, Jetpack compose, mais des applications plus datées peuvent nécessiter l’utilisation d’outils plus anciens comme Kotlin ou Swift.

Application SwiftUI
Application SwiftUI
Application Jetpack compose
Application Jetpack compose

Ces vues natives reprennent l’agencement des templates web codés en HTML affichés en ligne.

À l’aide de Hotwire Native, nous définissons les écrans natifs qui devront remplacer les vues web ainsi que les routes entre ces vues pour une navigation hors ligne.

L’intérêt des vues natives en mode hors connexion réside dans le fait qu’elles peuvent accéder aux données du téléphone (base de données, fichiers, cache).

Les gestionnaires peuvent ainsi mener leurs missions sans interruption, même sans réseau. Les données seront préservées dans la mémoire du téléphone de l’utilisateur, le temps qu’il retrouve le réseau nécessaire pour les transférer sur le serveur.

L’autre avantage des vues natives est la performance d’affichage.

Le rendu d’une page native ne nécessite pas de chargement préalable de fichiers HTML ou JS. Chaque élément visuel provient directement du terminal (mobile, tablette). L’expérience utilisateur devient ainsi complètement fluide.

Besoin d'une application mobile performante, polyvalente et disponible à chaque instant ?

Contactez-nous pour définir ensemble vos besoins et bénéficier d’une solution sur mesure.

Lors du design des vues natives, notre équipe d’intégrateurs a procédé à l’adaptation des écrans à la charte graphique de notre client.
Les boutons, les liens, le haut de page et d’autres éléments utilisent les couleurs principales de Chouette Copro.

Pour changer le style des éléments natifs, nous devons les surcharger pour les adapter au design prévu.

Cependant, nous faisons en sorte de surcharger le moins d’éléments possible, et ce pour plusieurs raisons :

  • En surchargeant les composants natifs du système, nous prenons le risque d’une disparité de styles entre les éléments natifs et le reste de l’application, dès lors que le système du téléphone passe à une version supérieure.
    En minimisant nos actions, nous limitons le risque d‘incompatibilité et de maintenance lourde.
  • D’une version à une autre, l’expérience utilisateur évolue. En appliquant un style spécifique sur ces composants, nous ne pourrons pas bénéficier de ces nouveautés. Il serait dommage que les utilisateurs ne puissent pas profiter d’une nouvelle interface plus intuitive.
    Les champs de formulaire comme les sélecteurs de date par exemple sont de bons exemples en matière d’évolution des interfaces mobile.
  • Il est important de conserver un design proche des applications « classiques » afin de conserver une expérience utilisateur fluide : l’utilisateur ouvre une application et non un site web, il s’attend donc à retrouver une utilisation répondant aux standards des applications.

Aujourd’hui l’application mobile de Chouette Copro est couramment utilisée par les gestionnaires de syndics. Elle s’intègre parfaitement pour une utilisation sur terrain, même dans des conditions dégradées.

L’application évolue au rythme des remontées des utilisateurs afin d’être la plus utile et pratique possible.

Depuis 2016, l'entreprise Imagile nous accompagne dans le développement de nos outils. Le marché de la gestion de syndic étant très concurrentiel, nous devons nous adapter et proposer des solutions pratiques et innovantes pour satisfaire nos utilisateurs. Les développeurs d'Imagile travaillent de pair avec nos équipes de développement interne afin de faire grandir notre entreprise toujours plus rapidement. Je ne peux que recommander cette entreprise, qui a toujours su nous écouter, nous conseiller et nous proposer des solutions adaptées et répondant parfaitement à nos objectifs.
Phiilippe Joubert
Philippe Joubert Fondateur et dirigeant de Chouette Copro

Notre approche vous séduit ?

Contactez-nous, ou venez nous rencontrer pour discuter de vos projets.