Avant de commencer ce tutoriel, créez un compte PubNub pour obtenir vos clés API. Nous offrons un niveau de bac à sable généreux qui ne vous coûtera pas un centime jusqu'à ce qu'il soit temps de passer à l'échelle !

Les fonctionnalités degéolocalisation et de suivi ne cessent de progresser. Nous sommes passés des cartes statiques à une technologie de cartographie API interactive et dynamique. Cette évolution a mis en évidence le rôle indispensable que joue une API de géolocalisation dans tous les secteurs, de l'économie à la demande à l'internet des objets.

Le suivi en temps réel permet de ratisser large, n'est-ce pas ?

Aperçu du didacticiel sur le suivi de Google Maps

Il s'agit d'un tutoriel en quatre parties sur la création de cartes en temps réel pour le web et le web mobile à l'aide de l'API JavaScript Google Maps et de PubNub. Nous commencerons par les bases pour configurer votre application, puis nous ajouterons des fonctionnalités de géolocalisation en temps réel dans les parties suivantes.

À la fin, vous aurez une application de localisation JavaScript de base avec des marqueurs cartographiques, la localisation d'appareils et des trajectoires de vol, alimentée par l'API JavaScript Google Maps et PubNub.

Configuration de l'API de localisation en temps réel

Actifs du tutoriel

Pour ce tutoriel, nous supposons que vous travaillez avec un navigateur récent sur un ordinateur de bureau ou un appareil mobile.

Configuration de PubNub

Pour commencer, vous aurez besoin de vos clés de publication et d'abonnement PubNub. Si vous n'avez pas de compte, vous pouvez vous inscrire ici, et vos clés de publication et d'abonnement sont disponibles dans le tableau de bord de l'administrateur. Les clés ressemblent à des UUID et commencent par les préfixes "pub-c-" et "sub-c-" respectivement.

Une fois que vous avez vos clés pub/sub, créez une nouvelle application PubNub pour représenter votre application Android (et tout autre système qui communique en utilisant les mêmes canaux). L'application PubNub comprendra des clés de publication et de souscription que les applications pourront utiliser pour les fonctionnalités spécifiées.

Configuration de l'API Google Maps

Pour intégrer Google Maps, vous devez créer une clé API Google Maps. Nous vous recommandons de le faire en utilisant le guide de démarrage ici. Cela permet de créer une clé d'API unique qui peut être verrouillée pour les applications web de votre choix. Une fois que vous avez commencé à créer un certain nombre de projets, vous pouvez gérer vos informations d'identification dans la console API de Google ici.

N'oubliez pas d'activer l'API JavaScript Maps dans la console Google Cloud après avoir créé votre clé API.

Présentation de l'API de localisation en temps réel

Dans cet exemple d'application HTML5 et JavaScript, PubNub fournit la capacité de communication en temps réel qui permet à notre application web de recevoir des événements entrants lorsque la position d'un objet distant (latitude et longitude) change.

La fonctionnalité principale de PubNub que nous utilisons est la messagerie en temps réel. Notre application utilise un canal PubNub pour envoyer et recevoir des événements de changement de position. Dans cet exemple, la même application envoie et reçoit les événements de position, c'est-à-dire qu'elle est à la fois l'éditeur et l'abonné. Dans votre application, le système éditeur (expéditeur) peut être différent du système abonné (destinataire).

Présentation de Google Maps

Nous utiliserons l'API JavaScript Google Maps et le widget HTML5 Map pour ce tutoriel. Le widget HTML5 Map affiche une carte des environs que vous avez configurés. La taille de la carte, la latitude et la longitude du centre de la carte, le niveau de zoom, le style de la carte et d'autres options peuvent être configurés selon vos préférences initiales et mis à jour à la volée.

L'API JavaScript de Google Maps fournit une option de rappel d'initialisation qui appelle une fonction que vous spécifiez lors du chargement de la carte. En outre, nous utiliserons des fonctions telles que Map Markers et Polylines qui vous permettent de placer des marqueurs cartographiques conviviaux et des trajectoires de vol sur la carte à l'endroit ou aux endroits que vous spécifiez (parties 2, 3 et 4). Tous les points sont spécifiés par l'utilisateur et peuvent être mis à jour en temps réel au fur et à mesure des mises à jour.

Présentation du code

Pour travailler avec le code, vous devrez l'intégrer dans votre propre projet à l'aide de CodePen, ou télécharger le code HTML dans un fichier et l'exécuter à l'aide de votre serveur HTTP favori. Nous recommandons d'éditer le code dans l'IDE web CodePen comme ceci :

Une fois dans l'IDE, vous serez en mesure d'effectuer les modifications mineures du code pour faire fonctionner l'application rapidement.

Mise en place et configuration de l'application

La structure de la page web devrait vous être familière si vous avez déjà travaillé avec des applications web. Nous commençons avec une application HTML5 + JavaScript simple qui a une balise DIV pour l'affichage de la carte. Nous incluons la bibliothèque PubNub pour les communications en temps réel dans le HEAD de la page HTML.

Vous devrez également inclure l'API Google Maps à l'aide d'une balise SCRIPT au bas de la page HTML. Consultez la documentation officielle de Google Maps pour obtenir la dernière version.

Notez que vous devrez remplacer la clé de l'API Google Maps et la version dans l'attribut SCRIPT SRC comme indiqué ci-dessus.

Il est utile de préciser que pour que la géolocalisation HTML5 fonctionne, il faut que l'utilisateur autorise explicitement l'accès à la géolocalisation de votre application sur son appareil. La gestion d'une solution de repli gracieuse pour les cas où l'autorisation de localisation est refusée dépasse le cadre de ce tutoriel. Cependant, il est essentiel de s'assurer que vous gérez ces cas dans votre application finale afin d'offrir la meilleure expérience à l'utilisateur.

Les paramètres PubNub sont inclus dans une simple carte JavaScript. Vous pouvez les mettre à jour avec vos propres valeurs comme suit :

pubnub = new PubNub({
    publishKey : "myPublishKey",
    subscribeKey : "mySubscribeKey",
    userId: "myUniqueUserId"
});

Exécution du code

Vous n'avez rien à faire de spécial pour exécuter l'application dans CodePen - elle s'exécute automatiquement à partir de l'éditeur en ligne. Selon l'endroit où vous visualisez l'application (géolocalisation) et les capacités de votre connexion (WiFi ou LTE), il se peut que les emplacements indiqués soient différents (IP to geo versus GPS location). Nous avons constaté que les différents appareils, ainsi que les différents navigateurs, ont leurs propres caractéristiques en matière de précision de localisation, certaines étant plus précises que d'autres.

Prochaines étapes

Notre application est désormais prête. Dans la deuxième partie, nous mettrons en place des marqueurs de carte en direct, qui identifient l'emplacement d'un appareil sur une carte.

Comment PubNub peut-il vous aider ?

Cet article a été publié à l'origine sur PubNub.com

Notre plateforme aide les développeurs à construire, livrer et gérer l'interactivité en temps réel pour les applications web, les applications mobiles et les appareils IoT.

La base de notre plateforme est le réseau de messagerie en temps réel le plus grand et le plus évolutif de l'industrie. Avec plus de 15 points de présence dans le monde, 800 millions d'utilisateurs actifs mensuels et une fiabilité de 99,999 %, vous n'aurez jamais à vous soucier des pannes, des limites de concurrence ou des problèmes de latence causés par les pics de trafic.

Découvrez PubNub

Découvrez le Live Tour pour comprendre les concepts essentiels de chaque application alimentée par PubNub en moins de 5 minutes.

S'installer

Créez un compte PubNub pour un accès immédiat et gratuit aux clés PubNub.

Commencer

La documentation PubNub vous permettra de démarrer, quel que soit votre cas d'utilisation ou votre SDK.