Comment créer une application de géolocalisation ?

Français

Dans le monde d’aujourd’hui, les applications basées sur la localisation deviennent de plus en plus populaires. Presque toutes les autres applications populaires intègrent des fonctions de géolocalisation dans une certaine mesure. Certaines le font pour améliorer l’expérience de l’utilisateur et fournir une expérience plus personnalisée, tandis que d’autres sont construites autour des fonctions de géolocalisation.

Dans cet article, nous allons vous apprendre tout ce que vous devez savoir sur les applications de géolocalisation. Nous parlerons de leurs principales caractéristiques, des types d’applications de géolocalisation et nous expliquerons le processus de création d’une application de géolocalisation du point de vue de l’entreprise. De plus, nous vous guiderons à travers le processus de développement d’une application de géolocalisation en utilisant Back4app et React Native.

Contents

1 Qu’est-ce qu’une application de géolocalisation ?
2 Principales caractéristiques des applications basées sur la localisation
3 Types d’applications de géolocalisation
4 Processus de création d’une application de géolocalisation
5 Comment développer une application de géolocalisation ?
6 Conclusion

Qu’est-ce qu’une application de géolocalisation ?

Une application de géolocalisation est une application mobile ou web qui suit l’emplacement de l’appareil de l’utilisateur. Les applications le font pour personnaliser et améliorer l’expérience de l’utilisateur, fournir des services dépendants de la localisation, à des fins de marketing, à des fins d’information, etc.

Les applications de géolocalisation utilisent différentes technologies pour obtenir la position de l’utilisateur, notamment les suivantes :

Système de positionnement global (GPS)
Système de positionnement global assisté (A-GPS)
Technologies de géolocalisation intérieure
Tours de téléphonie mobile ou WiFi

Chacune des technologies mentionnées a ses avantages et ses inconvénients. Certaines sont plus rapides, d’autres plus précises et plus fiables. Mais ne vous en préoccupez pas trop. La localisation est généralement obtenue par l’appareil lui-même.

Principales caractéristiques des applications basées sur la localisation

Les applications de géolocalisation présentent des caractéristiques très variées, mais la plupart d’entre elles incluent ces fonctions de géolocalisation :

Vue cartographique: La vue cartographique est une fonction essentielle des applications de géolocalisation. Elle fournit aux utilisateurs une représentation visuelle de leur position actuelle et des points d’intérêt. Elle permet aux utilisateurs d’explorer des zones, de trouver des directions et d’effectuer des requêtes géospatiales.
Suivi de la localisation: Les applications de géolocalisation offrent souvent un suivi de la position en temps réel, ce qui permet aux utilisateurs de partager leur position avec d’autres personnes ou de suivre leurs déplacements.
Personnalisation: Les applications de géolocalisation peuvent offrir des fonctions de personnalisation, telles que l’enregistrement des lieux favoris, la définition de préférences pour les types d’itinéraires (par exemple, à pied, en voiture), les paramètres visuels, etc.
Notifications: Certaines applications de géolocalisation utilisent le geofencing pour envoyer des notifications lorsque les utilisateurs entrent ou sortent d’une zone. En outre, elles peuvent envoyer une notification lorsque l’utilisateur se trouve à proximité d’un événement, etc.
Intégration avec d’autres services: De nombreuses applications de géolocalisation s’intègrent à des services ou à des plateformes tiers pour améliorer leurs fonctionnalités. Par exemple, Google s’associe à Booking.com pour proposer des hôtels et à des plateformes de transport pour obtenir des informations sur les transports publics.

Types d’applications de géolocalisation

Il existe de nombreux types d’applications basées sur la localisation, mais examinons-en quelques-uns des principaux.

Applications de navigation

Les applications de navigation sont l’exemple le plus évident d’applications de géolocalisation. Elles sont généralement centrées sur une vue cartographique et offrent des fonctions telles que le suivi de la localisation, la recherche de commerces à proximité, l’exécution de requêtes géographiques et la fourniture d’itinéraires.

Exemples : Google Maps, Waze, Sygic GPS.

Applications à la demande

Les applications à la demande sont un autre exemple populaire d’applications de géolocalisation. Ces applications vous permettent de vous faire conduire, de commander de la nourriture, de faire des courses, etc. Les services à la demande utilisent la localisation de l’utilisateur pour afficher les trajets, les magasins et les restaurants à proximité. En outre, ils assurent un suivi en temps réel des commandes.

Exemples : Uber, Uber Eats, Lyft.

Réseaux sociaux et applications de rencontre

Les applications de médias sociaux sont généralement moins transparentes quant à leur utilisation de la géolocalisation. La plupart des applications de médias sociaux utilisent la localisation de l’utilisateur pour offrir une expérience personnalisée, mettre en relation des personnes, étiqueter des images et des photos, et afficher des contenus populaires au niveau régional.

Exemples : Facebook, Instagram, Tinder.

Applications touristiques

Les applications touristiques utilisent la localisation de l’utilisateur pour recommander des hôtels, des événements, des expériences, etc. à proximité.

Exemples : Airbnb, Booking, Eventbrite.

Applications de remise en forme

La plupart des applications de fitness, en particulier les applications de course à pied, intègrent la géolocalisation. La géolocalisation leur permet de suivre les itinéraires des utilisateurs, de calculer la distance parcourue, la vitesse moyenne de course, le dénivelé, etc.

Exemples : Strava, GoogleFit, RunKeeper.

Processus de création d’une application de géolocalisation

La création d’une application mobile géolocalisée peut s’avérer une tâche ardue. Mais ne vous inquiétez pas ! Les étapes suivantes vous permettront de créer une excellente application de géolocalisation.

Étape 1 : Définir l’objectif de l’application de géolocalisation

La première étape de la création d’une application de géolocalisation consiste à définir son objectif et ses principales caractéristiques. Demandez-vous quel problème votre application va résoudre et qui est le public cible.

Une fois que vous savez cela, il est temps d’étudier le marché. Trouvez vos concurrents et réfléchissez à ce qui rend votre application meilleure que toutes celles qui existent déjà.

Étape 2 : Choisir les technologies

La partie cruciale du développement d’une bonne application de géolocalisation est le choix de la bonne pile technologique. Votre application sera probablement divisée en deux parties : le backend et le frontend.

Lorsque vous choisissez les outils dorsaux, réfléchissez au type de données que vous allez stocker, à l’endroit où elles seront stockées, etc. Inversement, lorsque vous choisissez les technologies frontales, optez pour celles qui vous permettront de créer une application réactive au design élégant.

En outre, vous aurez besoin d’une API de géolocalisation. Lorsque vous choisissez une API de géolocalisation, envisagez différentes options telles que Google Maps, OpenStreetMap et MapBox. Veillez à choisir l’API de géolocalisation qui convient le mieux à votre type d’application.

Étape 3 : Conception de l’application

Cette étape est la plus importante du point de vue de l’utilisateur. Lors de la conception de votre application, veillez à ce qu’elle soit attrayante, facile à utiliser et dotée d’un nombre décent de fonctionnalités. Respectez les bonnes pratiques UI/UX et réfléchissez à la manière dont l’utilisateur final utilisera votre application de géolocalisation.

Étape 4 : Créer un MVP

Avant de créer une application à part entière, il est conseillé de créer un produit minimum viable (MVP). Le MVP doit contenir suffisamment de fonctionnalités pour être utilisable par les premiers utilisateurs, qui vous feront part de leurs commentaires. Ces commentaires vous permettront de valider votre idée et d’améliorer votre produit.

Étape 5 : Version complète et mise à disposition

La dernière étape à franchir est la création d’une version complète de l’application. Vérifiez le carnet de commandes de votre projet et mettez en œuvre toutes les autres fonctionnalités essentielles. Corrigez tous les bugs et publiez votre application géolocalisée.

Après la publication, vous devrez bien sûr assurer la maintenance de votre application. L’API de géolocalisation peut changer au fil du temps. Vous devrez ajouter la prise en charge de systèmes d’exploitation plus récents, corriger les bogues, ajouter de nouvelles fonctionnalités, etc.

Comment développer une application de géolocalisation ?

Dans cette section d’article, nous allons voir comment construire une application de géolocalisation en utilisant Back4app et React Native avec Expo.

Conditions préalables

Expérience avec JavaScript, en particulier ES6.
Compréhension de base de React Native (et Expo).
JavaScript IDE installé sur votre machine locale.
émulateur Android ou un appareil Android physique.

Qu’est-ce que Back4app ?

Back4app est un excellent outil pour construire rapidement des applications modernes sans avoir besoin de compétences avancées en codage. La plateforme est livrée avec de nombreuses fonctionnalités utiles, telles que la gestion des utilisateurs, l’authentification, les bases de données en temps réel, les fonctions Cloud Code, les intégrations sociales, les API, et bien plus encore.

Avec Back4app, vous pouvez vous concentrer sur les parties importantes de votre application, comme la fonctionnalité principale et le design, sans vous soucier du backend ou de l’infrastructure compliquée.

De plus, Back4app offre un plan gratuit pour les tests et les essais. Au fur et à mesure que votre application grandit, vous pouvez passer à un plan premium avec des prix transparents et prévisibles.

Aperçu du projet

Pour démontrer la puissance de Back4app, nous allons construire une application simple de géolocalisation. L’application permettra aux utilisateurs de visualiser la carte, de voir les lieux stockés dans la base de données et d’effectuer des requêtes géospatiales. Les requêtes géospatiales incluront le tri des lieux par distance, la recherche de lieux à l’intérieur de la distance, etc. Le backend de notre application sera géré par Back4app, et nous utiliserons React Native et Google Maps sur le frontend.

Créer l’application Back4app

Les étapes suivantes requièrent que vous ayez un compte Back4app. Si vous n’en avez pas encore, inscrivez-vous gratuitement!

Lorsque vous vous connectez, vous êtes redirigé vers votre liste d’applications. Pour créer une nouvelle application, cliquez sur “Créer une nouvelle application”.

Back4app Construire une nouvelle application

Back4app nous permet de déployer deux types d’applications soit :

Backend as a Service (BaaS ) – une solution backend à part entière, ou
Conteneurs en tant que service (CaaS ) – une plateforme de déploiement de logiciels conteneurisés.

Puisque nous construisons une application de géolocalisation, nous choisirons “Backend as a Service”.

Ensuite, donnez un nom à votre application, sélectionnez “NoSQL” comme base de données et cliquez sur “Créer”.

Back4app prendra un peu de temps pour préparer tout ce qui est nécessaire à votre application. Une fois que votre application est prête, vous serez redirigé vers la vue de la base de données de votre application.

Créer des classes de base de données

Nous devons maintenant nous occuper de la base de données.

Comme mentionné dans l’introduction du projet, nous voulons stocker des lieux dans la base de données et les afficher sur la carte. Nous devrons créer une nouvelle classe de base de données pour contenir ces lieux.

Créez une nouvelle classe en cliquant sur le bouton “Créer une classe”. Nommez-la Place, activez “Lecture et écriture publiques” et cliquez sur “Créer une classe et ajouter des colonnes”.

Ajoutez ensuite les trois colonnes suivantes :

+-------------+-------------+--------------------+----------+
| Data type   | Name        | Default value      | Required |
+-------------+-------------+--------------------+----------+
| String      | name        | <leave blank>      | yes      |
+-------------+-------------+--------------------+----------+
| String      | description | <leave blank>      | no       |
+-------------+-------------+--------------------+----------+
| GeoPoint    | location    | <leave blank>      | yes      |
+-------------+-------------+--------------------+----------+

Une fois la classe créée, ajoutez quelques exemples de lieux à la base de données. Exemple :

Vous pouvez également importer cette exportation de la base de données des États américains. Pour l’importer, utilisez le bouton à trois points en haut à droite de l’écran, sélectionnez “Import > Class Data”, puis sélectionnez le fichier.

Nous avons réussi à créer une classe de base de données et à la remplir. La partie backend de notre projet est maintenant terminée. C’était facile !

Code Frontend

Dans cette section, nous allons nous occuper de la partie frontale de notre application de géolocalisation.

Projet Init

Les étapes suivantes nécessitent l’installation de Node. Si vous ne l’avez pas, téléchargez-le.

Commencez par créer un projet Expo :

$ npx create-expo-app@latest back4app-geolocation-app --template blank@sdk-49

Nous avons utilisé le modèle blank@sdk-49 parce que nous voulons utiliser la dernière version du SDK Expo.

L’Expo prendra environ une minute pour préparer tout ce qui est nécessaire à votre projet. Une fois que votre projet est prêt, changez votre répertoire courant en celui-ci. Démarrez ensuite le serveur de développement Expo :

$ cd back4app-geolocation-app
$ expo start

Appuyez sur A sur votre clavier pour ouvrir l’application dans l’émulateur ou l’appareil Android connecté.

Cartes React Native

Pour afficher la carte, nous utiliserons react-native-maps. React Native Maps est un excellent package qui fournit des composants de carte pour iOS et Android. Il prend en charge Google Maps et MapKit.

Commencez par l’installer via npm :

$ npx expo install react-native-maps

Ensuite, remplacez le contenu de votre App.js pour y inclure le fichier comme suit :

// App.js

import React from "react";
import {StyleSheet, View} from "react-native";
import MapView from "react-native-maps";

const initialRegion = {
  latitude: 30.0000,
  longitude: -100.0000,
  latitudeDelta: 64,
  longitudeDelta: 64,
};

export default function App() {
  return (
    <View style={styles.container}>
      <MapView
        initialRegion={initialRegion}
        style={styles.map}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    zIndex: 10,
    width: "100%",
    height: "100%",
  },
});

Si vous ouvrez l’application maintenant, vous devriez pouvoir voir la carte.

Recherche de l’emplacement de l’utilisateur

Pour récupérer les emplacements des utilisateurs, nous utiliserons le paquetage expo-location.

Commencez par l’installer via npm :

$ npx expo install expo-location

Avant d’accéder à la localisation de l’utilisateur, nous devons lui demander sa permission. Pour ce faire, nous pouvons utiliser la fonction Expo intégrée appelée requestForegroundPermissionsAsync() dans la fonction useEffect() comme suit :

// App.js

import React, {useEffect, useState} from "react";
import {StyleSheet, View} from "react-native";
import MapView, {Marker} from "react-native-maps";
import * as Location from "expo-location";

// ...

export default function App() {

  const [location, setLocation] = useState(null);

  useEffect(() => {
    (async () => {
      let {status} = await Location.requestForegroundPermissionsAsync();
      if (status !== "granted") {
        console.error("Permission to access location was denied.");
        return;
      }
      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
    })();
  }, []);

  return (
    <View style={styles.container}>
      <MapView
        initialRegion={initialRegion}
        style={styles.map}
      >
        {location && (
          <Marker
            title="You are here"
            description={`
              ${location.coords.latitude.toFixed(4)},
              ${location.coords.longitude.toFixed(4)}
            `}
            coordinate={{
              latitude: location.coords.latitude,
              longitude: location.coords.longitude,
            }}
            pinColor="blue"
          />
        )}
      </MapView>
    </View>
  );
}

// ...

Au démarrage de l’application, nous demandons à l’utilisateur l’autorisation d’accéder à sa position approximative. Si l’accès est accordé, nous stockons alors la localisation dans l’état de localisation en utilisant useState().
Nous avons mis à jour l’instruction de retour pour afficher la localisation de l’utilisateur (si la localisation n’est pas nulle).

Relancez l’application et vous devriez voir un marqueur bleu indiquant votre position actuelle.

Installer Parse

Comme vous le savez peut-être, Back4app est basé sur la plateforme Parse. Si nous voulons interagir avec la base de données de Back4app ou Back4app en général, nous devons installer le SDK Parse.

Tout d’abord, installez le SDK Parse :

$ npx expo install [email protected] @react-native-async-storage/async-storage

J’ai utilisé la version 3.5.1 de Parse, car la version plus récente ne fonctionne pas bien avec Expo SDK 49.

Ensuite, créez une instance de Parse dans App.js juste sous les importations :

// App.js

// ...

import Parse from "parse/react-native.js";
import AsyncStorage from "@react-native-async-storage/async-storage";

Parse.setAsyncStorage(AsyncStorage);
Parse.initialize(
  process.env.EXPO_PUBLIC_PARSE_APPLICATION_ID,
  process.env.EXPO_PUBLIC_PARSE_JAVASCRIPT_KEY,
);
Parse.serverURL = "https://parseapi.back4app.com/";

// ...

Nous utiliserons des variables d’environnement au lieu de coder en dur l’ID de l’application Parse et la clé JavaScript. Depuis le SDK 49, Expo charge automatiquement les variables environnementales à partir du fichier .env.local.

Créez un fichier .env.local à la racine du projet avec le contenu suivant :

EXPO_PUBLIC_PARSE_APPLICATION_ID=<parse_app_id>
EXPO_PUBLIC_PARSE_JAVASCRIPT_KEY=<parse_javascript_key>

Veillez à remplacer et par votre identifiant et votre clé. Pour obtenir vos identifiants, naviguez dans votre application Back4app et sélectionnez “Paramètres de l’application > Sécurité et clés” dans la barre latérale.

Extraire des lieux de la base de données

Pour récupérer des lieux dans la base de données, nous utiliserons l’instance Parse que nous avons créée à l’étape précédente.

Nous devons d’abord créer un nouveau Parse.Query sur la classe Place, puis lancer find() pour exécuter la requête. Ensuite, nous transformons les résultats dans notre format de marqueur.

Modifiez votre App.js comme suit :

// App.js

// ...

export default function App() {

  // ...

  const [places, setPlaces] = useState([]);

  useEffect(() => {
    // ...

    // fetch `Place` objects from the database
    const placesQuery = new Parse.Query("Place");
    placesQuery.find().then((places) => {
      places = places.map((place) => {
        return {
          title: place.get("name"),
          description: place.get("description"),
          coordinate: {
            latitude: place.get("location").latitude,
            longitude: place.get("location").longitude,
          },
        };
      });
      setPlaces(places);
    });
  }, []);

  return (
    <View style={styles.container}>
      <MapView
        initialRegion={initialRegion}
        style={styles.map}
      >
        // ...
        {places.map((place, index) => (
          <Marker
            key={index}
            title={place.title}
            description={place.description}
            coordinate={place.coordinate}
          />
        ))}
      </MapView>
    </View>
  );
}

// ...

Nous avons utilisé useState() pour créer un autre état qui contient des marqueurs de lieux.
Nous avons mis à jour le hook useEffect() pour obtenir les lieux de la base de données au démarrage de l’application.
Nous avons modifié la fonction de rendu pour afficher les marqueurs de lieu sur la carte.

Ouvrez à nouveau votre application et vous devriez voir tous les lieux.

Géoquêtes

Dans cette dernière section, nous verrons comment effectuer des requêtes géospatiales à l’aide de Back4app.

Parse est livré avec une classe nommée GeoPoint. La classe GeoPoint représente un point de latitude/longitude et nous permet de calculer les distances entre deux GeoPointset d’effectuer des requêtes basées sur la proximité.

Nous nous appuierons sur cette classe pour mettre en œuvre les deux fonctionnalités suivantes :

Trier les lieux à partir de la position de l’utilisateur en fonction de la distance.
Trouver des lieux dans un rayon de X kilomètres autour de la position de l’utilisateur.

Allez-y et ajoutez ce qui suit à votre App.js:

// App.js

// ...

const maxDistance = 3000;

export default function App() {

  // ...

  const sortPlacesByProximity = async () => {
    let parseQuery = new Parse.Query("Place");
    let locationGeoPoint = new Parse.GeoPoint(
        location.coords.latitude,
        location.coords.longitude
    );
    parseQuery.near("location", locationGeoPoint);

    let results = await parseQuery.find();
    for (let result of results) {
      console.log(result.get("name"));
    }
  };

  const findPlacesWithinDistance = async () => {
    let parseQuery = new Parse.Query("Place");
    let locationGeoPoint = new Parse.GeoPoint(
        location.coords.latitude,
        location.coords.longitude
    );
    parseQuery.withinKilometers("location", locationGeoPoint, maxDistance);

    let results = await parseQuery.find();
    for (let result of results) {
      console.log(result.get("name"));
    }
  }

  const moveUserToRandomLocation = () => {
    setLocation({
      coords: {
        latitude: Math.random() * (-78.848974 - -103.520833) + 31.3845,
        longitude: Math.random() * (-78.848974 - -123.885444) + -123.885444,
      }
    });
  };

  return (
    <View style={styles.container}>
      <View style={styles.buttonContainer}>
        <Button
          title="Sort places by proximity"
          color="#239658"
          onPress={sortPlacesByProximity}
        />
        <Button
          title={`Find places within ${maxDistance} km`}
          color="#239658"
          onPress={findPlacesWithinDistance}
        />
        <Button
          title="Move user to random location"
          color="#061124"
          onPress={moveUserToRandomLocation}
        />
      </View>
      // ...
    </View>
  );
}

const styles = StyleSheet.create({
  // ...
  buttonContainer: {
    zIndex: 25,
    width: "100%",
    position: "absolute",
    bottom: 0,
    marginVertical: 4,
    display: "flex",
    gap: 4,
  },
});

sortPlacesByProximity() et findPlacesWithinDistance() transforment d’abord la position de l’utilisateur en GeoPoint, créent un Parse.Query, puis exécutent une fonction géo spécifique.
moveUserToRandomLocation() est utilisée pour déplacer l’utilisateur vers un lieu aléatoire à l’intérieur des États-Unis. Cette méthode est principalement utilisée pour tester les deux méthodes mentionnées précédemment.
Nous avons également ajouté trois boutons pour déclencher les fonctions correspondantes.

N’oubliez pas l’importation en tête de fichier :

import {Button, StyleSheet, View} from "react-native";

Relancez le serveur et vous devriez voir ce qui suit :

Testez les requêtes géographiques en cliquant sur le bouton “Trier les lieux par proximité” :

LOG  Arizona
LOG  Idaho
LOG  Oklahoma
LOG  Florida
LOG  New York

Faites de même pour la fonctionnalité à distance :

LOG  Arizona
LOG  Idaho
LOG  Oklahoma

Enfin, déplacez l’utilisateur vers un lieu aléatoire et testez à nouveau les requêtes géographiques.

Conclusion

Dans cet article, nous avons construit avec succès une application de géolocalisation. L’application permet aux utilisateurs d’afficher la carte, de voir leur position, de récupérer des lieux dans la base de données et d’effectuer des requêtes géographiques. Vous devriez maintenant avoir une bonne compréhension du fonctionnement et de la construction des applications de géolocalisation.

Voici quelques idées que vous pouvez mettre en œuvre pour tester votre compréhension :

Suivi de la localisation de l’utilisateur en temps réel (le marqueur de l’utilisateur doit se déplacer lorsque l’appareil bouge)
Historique de la localisation de l’utilisateur (les utilisateurs devraient pouvoir consulter l’historique de leur localisation)
Navigation (affichage du chemin depuis l’emplacement de l’utilisateur jusqu’à un emplacement personnalisé)

Le code source est disponible sur le dépôt GitHub back4app-geolocation-app.