Suivi de l'emplacement en temps réel avec React Native et PubNub

Ce tutoriel montre la construction d'une application de suivi de localisation en temps réel à l'aide de React Native et PubNub. Nous allons créer deux applications: une application "Trackee" (celle en cours de suivi) et une application "Tracker" (qui reçoit des mises à jour de localisation).

Le suivi de l'emplacement en temps réel est crucial pour de nombreux services à la demande, y compris le covoiturage (Uber, Lyft), la livraison de nourriture (Uber Eats, Doordash) et la gestion de la flotte de drones. Ce guide fournit une approche pratique et étape par étape pour mettre en œuvre cette fonctionnalité.

Vidéo présentant l'application en action

Caractéristiques de clé:

• Les motif réagissent natifs et PubNub pour l'échange de données en temps réel.
• nécessite une clé API Google Maps et un compte PubNub.
• développe à la fois une application Trackee et Tracker.
• utilise l'API Geolocation et le mécanisme de publication / souscript de PubNub.
• Convient pour diverses applications, de la tension au suivi des commandes.

Prérequis:

• REACT REACT BASIQUE Connaissance native. (Voir le guide officiel de la configuration: [Lien vers le guide officiel])
• un compte PubNub ([lien vers la inscription PubNub])
• Une touche API Google Maps ([Lien vers la page de la clé de l'API Google Maps])

Environnement de développement:

• nœud v10.15.0
• npm 6.4.1
• yarn 1.16.0
• réactif-natif 0,59,9
• réactif-natif-maps 0,24,2
• PubNub-React 1.2.0

Code source:

• Application Trackee: [lien vers Trackee App Repo]
• Application Tracker: [Lien vers le tracker App Repo]

Configuration de l'application Trackee:

1. Créer un nouveau projet natif React: react-native init trackeeApp
2. Accédez au répertoire du projet: cd trackeeApp
3. Installer react-native-maps (Suivez les instructions sur [lien to React-Native-Maps Installation]).
4. Installez le SDK PubNub React: yarn add pubnub-react

Le code d'application Trackee (app.js) implique la configuration de la carte, en utilisant l'API Geolocation pour suivre l'emplacement et la publication des mises à jour de l'emplacement de PubNub à l'aide de la méthode publish. La méthode du cycle de vie componentDidUpdate garantit que les modifications de localisation sont immédiatement envoyées. Android et iOS nécessitent une manipulation légèrement différente pour l'animation des mises à jour du marqueur. La gestion des erreurs et le nettoyage dans componentWillUnmount sont également inclus.

Configuration de l'application Tracker:

Suivez les mêmes étapes que l'application Trackee, créant un projet nommé trackerApp. La différence clé réside dans l'abonnement au canal PubNub à l'aide de la méthode subscribe et à la mise à jour de la carte en fonction des données de localisation reçues.

Vidéo montrant des analyses en temps réel sur PubNub

Test:

Les tests impliquent l'exécution de l'application Trackee (idéalement en mode de libération sur le simulateur iOS avec emplacement simulé) et l'application Tracker sur un émulateur Android. Les analyses en temps réel de PubNub peuvent vérifier la transmission des données.

Conclusion:

Cette implémentation de base présente le suivi de l'emplacement en temps réel. De nombreuses applications sont possibles, notamment la tension, le suivi des commandes et la surveillance des actifs.

FAQS:

L'article se termine par une section complète de la FAQ concernant les questions courantes sur la mise en œuvre du suivi de l'emplacement en temps réel dans React Native, y compris les autorisations de gestion, le suivi des arrière-plans, l'optimisation, la gestion des erreurs, les tests, le géofencing, la sécurité des données et le partage des données de localisation avec d'autres utilisateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!