Studio MacoMaco, studio graphique

[DIY] Coder une application de traceur GPS

Dans cet article, je vais vous expliquer comment j’ai codé ma propre application de suivi de localisation GPS pour mon van aménagé. Avant de rentrer dans le vif du sujet, déterminons le périmètre du projet. L’application fonctionnera sur deux téléphones. Le premier téléphone aura le rôle du traceur : il communiquera les points GPS au fur et à mesure du temps à un serveur backend qui se chargera de les enregistrer dans une base de données. Ce téléphone traceur aura donc un accès à internet. Le deuxième téléphone aura un rôle de consultation. Les points GPS seront affichés sur une carte Google Maps.

Nous utiliserons le framework Flutter pour le développement de l’application frontend. Au niveau du backend, nous utiliserons le service Firebase de Google, en particulier le service Firestore qui permet l’accès à une base de données NoSQL.

Rien de mieux qu’un petit schéma pour expliquer le fonctionnement de manière visuelle :

Schéma général de l’architecture du projet

Initialisation du projet

Création du projet Firebase

Rendez-vous sur la console Firebase connecté avec votre compte Google. Puis créez un nouveau projet. Vous pouvez ignorer Google Analytics, nous n’en aurons pas besoin.

Une fois le projet créé, ajoutez une application Android. Choisissez un Android package name ainsi qu’un surnom pour votre application. Pour ma part, ce sera com.macomaco.cams_monitoring & Cams monitoring. Nous n’aurons pas besoin de configurer le Debug signing certificate.

Vous n’aurez pas non plus besoin de télécharger le fichier de configuration (au format JSON).

Création du projet Flutter

Ouvrez un terminal et utilisez le CLI de Flutter pour créer un nouveau projet :

flutter create cams-monitoring
cd cams-monitoring

Ajout des dépendances

Les dépendances suivantes seront nécessaires pour le fonctionnement de l’application. Ajoutez-les à votre fichier pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter

  firebase_core: ^1.11.0
  get_it: ^7.2.0
  cloud_firestore: ^3.1.6
  google_maps_flutter: ^2.1.1
  latlong2: ^0.8.1
  intl: ^0.17.0
  flutter_foreground_task: ^3.5.5
  geolocator: ^8.0.3
  timer_builder: ^2.0.0
  timeago: ^3.1.0

⚠️ Utilisez les dernières versions disponibles ! Rendez-vous sur https://pub.dev pour vérifier que vous utilisez bien les dernières versions.

Enfin, assurez-vous que les dépendances ont bien été ajoutées au projet à l’aide de la commande :

flutter pub get

Configuration de Firebase dans le projet Flutter

Firebase et Flutter s’entendent particulièrement bien, à croire que la même entreprise se cache derrière 😉. Nous utiliserons la suite FlutterFire pour faire dialoguer notre application Flutter avec la base de données Firestore.

Suivez les instructions de la documentation.

Création d’une clé d’API Google Maps

Nous utiliserons Google Maps pour la visualisation des points GPS. Nous aurons donc besoin d’une clé d’API pour utiliser le service. Suivez la documentation du plugin Flutter Google Maps pour ce faire.

Le système de tracking

Le Foreground Service

La difficulté réside dans le fait que notre application doit constamment envoyer des données de localisation. Mais, que se passe-t-il lorsque le téléphone est en veille ? Comment faire pour que le système Android ne tue pas le processus de l’application en charge de l’envoi de ces données ?

Android propose nativement cette fonctionnalité grâce aux Foreground Services (documentation officielle). La dépendance flutter_foreground_task va grandement nous simplifier la tâche pour l’intégration de cette fonctionnalité au sein de notre application Flutter.

Dans un premier temps, suivez les instructions expliquées dans le README de la dépendance pour la configuration de votre application Android.

Ensuite, utilisez le widget WithForegroundTask pour empêcher l’application de s’arrêter quand le Foreground Services est en cours d’exécution. Ce widget doit être le premier widget de votre application (déclaré au-dessus du widget MaterialApp).

runApp(const WithForegroundTask(
  child: MaterialApp(
    home: Home(),
  ),
));

Nous allons maintenant créer un fichier appelé location_callback_handler.dart qui hérite de la classe TaskHandler. Cette classe sera instanciée lorsque l’utilisateur cliquera sur le buton Commencer le tracking.

En cours de rédaction …

';