Comment créer une application d'horaires de transports publics en temps réel ?
Published: 2024-03-01 16:57:28

Il existe un point de rencontre entre l'information en temps réel, les scénarios d'évolution des systèmes de transport public et l'internet des objets (IdO) - appelons-le l'internet des objets de transport (IoTT). Il s'agit d'une application de transport très avancée et conviviale qui fonctionne avec des données en temps réel. Avec des géants comme IBM, Moovit et Google Maps qui cherchent à capitaliser sur le "transport intelligent", l'IoTT est sur le point de révolutionner la façon dont nous percevons le transport, en le rendant plus accessible pour les navetteurs quotidiens.

En tant que développeur, en particulier dans le domaine du développement d'applications mobiles, vous vous demandez peut-être en quoi ce nouveau développement vous concerne et comment vous pouvez y participer. Que vous soyez un passionné d'iOS ou d'Android, un réseau de flux de données en temps réel comme PubNub peut être votre porte d'entrée pour naviguer dans ce changement. Cette nouvelle vague de traitement des informations sur les transports publics rapproche l'avenir passionnant de l'IoTT de la réalité, en imaginant une époque où vous pourriez développer une application de transport pour les appareils mobiles qui permet aux appareils de se connecter à un canal et de communiquer, en diffusant des informations telles que les emplacements actuels ou les destinations. Imaginez un avenir où toutes ces informations en temps réel permettent de regrouper les transports en fonction de ces informations pour une meilleure efficacité.

PubNub est un outil puissant qui est à la pointe de cette évolution et continue d'innover avec sa technologie de pointe et ses services de confiance dans le domaine de l'IoT, soutenus par nos certifications et qualifications renommées. Cela vous donne l'opportunité prometteuse de créer des applications logicielles qui pourraient redéfinir le fonctionnement des systèmes de transport. Ce type d'applications devient de plus en plus important dans l'industrie du transport, s'avérant bénéfique pour les navetteurs, les agences de transport en commun, ainsi que les fournisseurs de services de transport.

Alors, par où commencer ? Mettons les mains dans le cambouis avec un exemple simple. À notre époque, les données publiques sont abondantes et disponibles. Des données sur le zonage public aux horaires du métro, de nombreuses villes offrent des données publiques par le biais d'API faciles à utiliser. Dans cet article, nous nous basons sur l'API BART (Bay Area Rapid Transit), qui fournit un large éventail de mesures, de statistiques et d'horaires pour le plus grand système ferroviaire de la région de la baie, afin de créer une application d'horaires de transport permettant des mises à jour en temps réel, ce qui peut donner un grand coup de pouce aux applications de transport public.

Comment créer une application de transport : Étendue de la programmation
------------------------------------------------------------------------

![](https://www.pubnub.com/cdn/3prze68gbwl1/asset-17suaysk1qa1hy3/51833020ec055e2ee9ecf7de3add5e60/times.png)

Cet article vous explique comment exploiter l'API BART pour créer une application d'horaires de transport public en temps réel, présentant des mises à jour en temps réel et des alertes de service à ses utilisateurs, à l'instar de Google Maps, Moovit et Uber. L'objectif est d'améliorer l'expérience de l'utilisateur en lui fournissant des informations précieuses, depuis les heures de départ jusqu'aux éventuelles perturbations du service. Vous apprendrez à récupérer les emplacements des stations (comme une station de métro ou un arrêt de bus) et à les convertir en géocroquis. Après avoir recueilli les informations, vous localiserez précisément l'utilisateur à San Francisco (ou vous l'imiterez dans notre cas), puis vous ferez correspondre l'emplacement de l'utilisateur avec les stations voisines, ce qui nécessitera davantage d'appels à l'API pour obtenir les données pertinentes.

Une fois que vous avez obtenu les heures de départ estimées, vous les affichez sur une infobox de carte. L'ensemble du processus est simplifié dans un tutoriel étape par étape, accompagné d'extraits de code et d'explications.

Démarrer avec votre application d'horaires de transport
-------------------------------------------------------

Pour créer votre application de transport en temps réel, la configuration est similaire à celle de notre [précédent tutoriel sur la géolocalisation en JavaScript](https://pubnub.com/blog/calculating-geolocation-proximity-w-javascript-geohashing/). Avec l'aide d'algorithmes de planification de trajets efficaces et en utilisant la puissance des données en temps réel, vous pouvez créer une application mobile unique et conviviale pour iOS, Android et d'autres appareils mobiles qui peuvent gérer efficacement les mises à jour en temps réel relatives aux transports publics.

Tout d'abord, vous aurez besoin de "node" et de "npm" pour le module ETA de votre application. Si ces termes ne vous sont pas familiers, jetez un coup d'œil à l'[introduction complète de PubNub à Node.js](https://pubnub.com/blog/node-js-supercharged-by-pubnub/).

Les paquets node utilisés sont :

-   [Browserify](http://browserify.org/) pour utiliser les paquets node dans le navigateur.
    
-   [ngeohash](https://github.com/sunng87/node-geohash) pour encoder la latitude et la longitude dans une chaîne.
    
-   [request](https://github.com/request/request) pour les requêtes HTTP en dehors du navigateur.
    
-   [xml2js](https://github.com/Leonidas-from-XIV/node-xml2js) pour convertir les retours XML en JSON.
    

Ces paquets fournissent les fonctionnalités nécessaires pour appeler les API, gérer les données et effectuer les tâches requises pour notre application. Si vous regardez le code de l'exemple, vous remarquerez que ces paquets sont absents. Vous devez simplement vous rendre dans le dossier de base du projet et taper \`npm install\` dans la ligne de commande. Cela installera les paquets en se basant sur les exigences contenues dans \`package.json\`.

Dans les sections suivantes, nous allons nous plonger dans les spécificités du travail avec les données de géolocalisation, le traitement efficace des notifications push, l'affichage efficace de la localisation des véhicules, et la création d'une grande expérience utilisateur avec votre application. Restez à l'écoute !

Trace de l'utilisateur et emplacement de la carte pour votre application d'horaires de transport en commun
----------------------------------------------------------------------------------------------------------

L'API de géolocalisation HTML5 est un outil pratique qui permet d'accéder à la localisation géographique (longitude et latitude) en fonction de l'IP d'un appareil, de la RFID, du WIFI, de l'adresse MAC Bluetooth, du GPS ou de l'entrée de l'utilisateur. Voici comment l'utiliser pour obtenir la position de l'utilisateur et fournir un suivi en temps réel, comme le font les applications de transport telles qu'Uber ou Google Maps :

```js
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
  //...
```

Ce code vérifie si le navigateur prend en charge la géolocalisation, puis récupère la position actuelle de l'utilisateur. À des fins de test dans ce tutoriel, nous définirons nos coordonnées de manière à ce qu'elles correspondent à un emplacement dans la région de la Baie.

```js
    that.lat = 37.6;
    that.lng = -122.4;
    var lat = that.lat;
    var lng = that.lng;
```

Notre application aura besoin des données de la station pour s'afficher sur la carte. Nous importons ces données depuis \`app.js\`.

```js
    var app = require("./app.js");
```

Ensuite, nous définissons des variables locales pour nos données :

```js
    var json_data, hash_table, hash_matches, destinations;
    …
    json_data_formatted = app.formatted_json;
    hash_table = app.hash_table;
    hash_matches = app.hash_matches;
    destinations = app.destinations;
```

Ensuite, nous allons intégrer PubNub et Google Maps :

```js
    pubs();
    google.maps.event.addDomListener(window, 'load', initialize());
```

La fonction \`pubs()\` est appelée à la ligne 130 et initialise PubNub avec vos clés uniques de publication et d'abonnement. Si vous n'avez pas de clés PubNub, vous pouvez créer [un compte PubNub](https://admin.pubnub.com/signup/) pour les obtenir.

```js
function pubs() {
     var pubnub = new PubNub({
       publishKey: "publish_key",
       subscribeKey: "subscribe_key",
       userId: "UUID"
   });
},
```

La logique de la carte Google est empruntée à l'[un des articles précédents](https://pubnub.com/blog/calculating-geolocation-proximity-w-javascript-geohashing/). La connexion PubNub écoute les messages de coordonnées envoyés au canal "mymaps", puis déplace le marqueur de l'utilisateur en fonction des informations reçues.

La fonction \`initialize()\` de Google Maps est appelée, ajoutant des propriétés à la carte. Il est important d'ajouter un marqueur pour chaque \`hash\_match\`.

```js
    var business_marker = new google.maps.Marker({position: {lat: match_lat, lng: match_lng}, map: map});
    business_marker.setMap(map);
```

Ensuite, un récepteur d'événements est ajouté pour les fenêtres d'information.

```js
    google.maps.event.addListener(business_marker, 'mouseover', function() {
      infowindow.open(map,business_marker);
    });
    google.maps.event.addListener(business_marker, 'mouseout', function() {
      infowindow.close(map,business_marker);
```

Recherche d'horaires de train pour votre application de transport en commun
---------------------------------------------------------------------------

Une fois que vous avez pris soin d'afficher les éléments sur la carte, l'étape suivante consiste à ajouter des informations sur les heures de départ. Pour cela, il faut retourner dans \`app.js\` et remplir les hash\_matches avec des données pour chacune des correspondances.

Dans cet exemple, nous ne sauvegardons que les données de la station Millbrae. Nous faisons un appel Ajax sur les données de Millbrae :

```js
    $.ajax({
      type: "GET",
      url: "data/MLBR.json",
      dataType: "json",
      success: function(file) {
        main_two(file);
      }
    });
```

Cette fonction, \`main\_two\`, formate les données et les prépare à l'interaction avec Google Maps.

### Afficher les horaires de vos transports en commun

Revenons maintenant à \`gmap.js\`. Ici, nous parcourons en boucle les différents noms de destination. Dans ce cas, \`Millbrae\` a été codé en dur, mais idéalement, vous devriez utiliser une variable pour faire correspondre les abréviations entre \`hash\_matches\` et \`destinations\`, en affichant les heures pertinentes.

```js
    var times = destination.times;
    dest_string = dest_string + "<p><i>" + destination.abbreviation + ":" + "</i><p>";
    times.forEach(function(time) {
      dest_string = dest_string + " " + time;
    });
```

Ensuite, spécifiez la fenêtre d'information :

```js
    var infowindow = new google.maps.InfoWindow({
      content: "<b>" + BusinessName + "</b>" +
    "<p>" + dest_string + "</p></p></p>"
    });
```

Et voilà ! Vous avez réussi à afficher des éléments sur une carte et à ajouter des informations sur les heures de départ. Si vous souhaitez en savoir plus sur la cartographie et la géolocalisation en temps réel à l'aide d'API telles que MapBox, MapKit et Google Maps, consultez nos [autres tutoriels](https://pubnub.com/blog/category/tutorials/).

Expérimenter PubNub
-------------------

Que diriez-vous de vous familiariser avec PubNub ? Consultez notre [Live Tour](https://www.pubnub.com/tour/introduction/) pour comprendre les concepts essentiels de chaque application alimentée par PubNub en moins de 5 minutes. Vous pouvez [créer](https://admin.pubnub.com/signup/) un compte PubNub et [commencer à](https://www.pubnub.com/docs) travailler sur votre projet. Travailler avec PubNub peut donner vie à votre application avec des mises à jour en temps réel, des notifications push et une interface conviviale, ouvrant un nouveau champ de possibilités pour les applications de transport.

Que vous soyez un utilisateur Apple ou Android, que vous vous déplaciez en bus, en métro ou en vélos partagés, il est crucial d'avoir une application de transport en temps réel à portée de main. En exploitant les puissantes API de PubNub et les données GTFS facilement accessibles des agences de transport, vous pouvez contribuer à la transformation des transports publics, en créant une solution numérique efficace et conviviale pour les navetteurs, les services de transport et les agences. Pensez-y : plus d'embouteillages, plus d'incertitude quant à l'heure d'arrivée, des transports publics fluides avec des mises à jour en temps réel. Alors pourquoi attendre ? Embarquons dans ce voyage de transformation du système de transport avec PubNub.

#### Contenu

[Comment créer une application de transport : Champ d'application de la programmationCommencer](#h-0)[avec votre application d'horaire de](#h-1)[transportHash](#h-2)[utilisateur](#h-1)[et emplacement de la carte pour votre application d'horaire de transport en communRechercher](#h-2)[des horaires de train pour votre application de transport en communAfficher les](#h-3)[horaires pour votre application de transport en communExpérimenter](#h-4)[PubNub](#h-5)

Comment PubNub peut-il vous aider ?
===================================

Cet article a été publié à l'origine sur [PubNub.com](https://www.pubnub.com/blog/how-to-build-a-realtime-public-transit-schedule-app/)

Notre plateforme aide les développeurs à construire, fournir 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](https://www.pubnub.com/tour/introduction/) pour comprendre les concepts essentiels de chaque application alimentée par PubNub en moins de 5 minutes.

S'installer
-----------

Créez un [compte PubNub](https://admin.pubnub.com/signup/) pour un accès immédiat et gratuit aux clés PubNub.

Commencer
---------

La [documentation PubNub](https://www.pubnub.com/docs) vous permettra de démarrer, quel que soit votre cas d'utilisation ou votre [SDK](https://www.pubnub.com/docs).