Alerte routière par SMS à l'aide de Vonage et de l'API de Google Maps

Vue d'ensemble

Dans ce monde trépidant où les éléments de la vie sont en perpétuel mouvement, les utilisateurs apprécient de pouvoir récupérer des informations de la manière la plus pratique possible. Ce n'est pas toujours facile, surtout dans des pays comme l'Inde, où la couverture du réseau internet est plus faible dans les zones reculées.

Supposons par exemple que vous êtes sur le point de quitter le bureau pour rentrer chez vous après une journée bien remplie et que vous voulez vérifier s'il y a du trafic sur votre itinéraire, mais que votre connexion internet est lente. Et si vous pouviez envoyer un SMS avec vos lieux de départ et d'arrivée et obtenir instantanément des informations sur le trafic ? Cela vous sauverait la vie !

Dans cet article, je vais montrer comment vous pouvez créer une alerte trafic par SMS en utilisant Vonage et l'API Google Maps dans Node.js.

Conditions préalables

Avant de commencer, assurez-vous d'avoir installé les éléments suivants :

• Node.js. Node.js est un environnement d'exécution JavaScript open-source et multiplateforme.

• ngrok - Un Account gratuit est nécessaire. Cet outil permet aux développeurs d'exposer un serveur de développement local à l'Internet.

• CLI de Vonage - Une fois que Node.js est installé, vous pouvez utiliser npm install -g @vonage/cli pour l'installer. Cet outil vous permet de créer et de gérer vos applications Vonage.

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Une fois que vous avez créé un Account, vous pouvez trouver votre clé API et votre secret API en haut du tableau de bord de l'API de Vonage.

Une fois que vous avez reçu la clé API et le secret APIvous pouvez les utiliser pour l SMS API.

API Google Maps

Nous aurons également besoin de API de direction Google. Créez un Account Google et connectez-vous pour accéder aux crédits gratuits pour l'utilisation de l'API Google et de la clé API.

Pour obtenir la clé API de Google Maps :

• Accéder à la Plateforme Google Maps > Page des informations d'identification.

• Sur la page Credentials, cliquez sur Créer des informations d'identification > Clé API. La clé clé API créée affiche votre nouvelle clé API.

• Cliquez sur Fermer. La nouvelle clé API est listée sur la page Credentials sous Clés API.

Répartition des problèmes

La mise en œuvre de cette application peut être décomposée en trois parties :

1. Recevoir et lire le message SMS.

2. Extrayez les lieux d'origine et de destination du texte du SMS et obtenez les détails du trafic à partir de l'API de Google Maps.

3. Traiter les données relatives au trafic et renvoyer le SMS dans un format textuel et lisible par l'homme.

Mise en place

Comme notre application sera développée en Node.js, assurez-vous d'avoir Nodejs soit installé dans le système.

Installez les dépendances en lançant cette commande dans votre terminal :

Créez un fichier unique nommé App.js qui exécutera l'application sur le port 3000 et gérera tous les traitements à l'intérieur de celui-ci.

Nous avons utilisé le paquetage dotenv npm pour obtenir les variables d'environnement. Grâce à cela, nous pouvons stocker des secrets en toute sécurité.

const app = require('express')()
const bodyParser = require('body-parser')

if (process.env.NODE_ENV !== "production") {
    require("dotenv").config();
}

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))

app.listen(process.env.PORT || 3000, "127.0.0.1", () => {
    console.log("Server Running on Port ", process.env.PORT || 3000);
});

Pour stocker et accéder aux variables d'environnement, créez un fichier .env dans votre répertoire racine et ajoutez les propriétés.

PORT = 3000

Ces propriétés sont accessibles à l'aide de process.env.PORT

Recevoir des SMS

La première étape consiste à recevoir le SMS et à le lire. Vonage fournit un SDK Node.js permettant d'utiliser des clients SMS au sein de notre application Node.

Vous pouvez suivre ce tutoriel ce tutoriel sur la façon dont vous pouvez recevoir le Message dans une application Node.js

L'étape suivante consiste à configurer l'API entrante et à l'ajouter à la console Vonage. Ainsi, chaque fois qu'un SMS est envoyé à notre numéro, l'API entrante sera appelée et nous pourrons lire ce SMS.

Il existe un tutoriel détaillé sur la façon dont vous pouvez configurer l'API entrante et lire les SMS..

L'API entrante est ce que nous exposons à toute application tierce à laquelle ils envoient les données.

Tous GET ou POST que notre API /webhooks/inbound-sms entrante sera transmise à la fonction handleInboundSms à la fonction

app.route("/webhooks/inbound-sms")
.get(handleInboundSms)
.post(handleInboundSms);

function handleInboundSms(request, response) {
    // reads the SMS body
    const params = Object.assign(request.query, request.body);

    // process the SMS text
    getTrafficDetailsAndSendSMS(params);

    // notify that we have received SMS
    response.status(204).send();
}

Pour faire fonctionner cette API entrante, nous devons mettre notre application en ligne. Nous pouvons le faire en utilisant ngrok.

Pour mettre l'application en service, il faut d'abord installer ngrok.

Puis exécuter l'application node localement

Une fois que l'application locale est en cours d'exécution, nous pouvons la mapper et la mettre en ligne à l'aide de ngrok.

Résultat attendu :

Une fois l'application en ligne, nous recevrons une URL publique, par exemple https://58c8-103-179-3-99.in.ngrok.io

Ajoutez cette URL au tableau de bord de Vonage afin que nous puissions écouter l'API entrante.

Maintenant que nous sommes en mesure de recevoir le SMS, traitons le texte et obtenons les informations routières de Google.

Obtenir des informations sur le trafic entre deux itinéraires à l'aide de l'API Google Maps

Pour extraire les informations relatives à la source et à la destination des SMS que nous recevons par l'intermédiaire de l'API Inbound, le texte du SMS doit être dans un certain format afin de pouvoir être mieux analysé. J'ai créé un modèle simple qui est plus facile à traiter.

Par exemple, pour recevoir des informations sur le trafic entre Mumbai et Pune, créons le SMS suivant :

Traffic between Mumbai and Pune

Dans l'exemple ci-dessus, Mumbai est la source, et Pune est la destination.

Dans la fonction getTrafficDetailsAndSendSMS(params); nous pouvons prendre le corps du SMS et en extraire la source.

function getTrafficDetailsAndSendSMS(params) {
    // get the source and destination by parsing the text
    const { origin, destination } = parseText(params);

    // get the traffic details and routes
    const routes = getTrafficDetails({ origin, destination });

    // send back the SMS
    sendSMS(params.msisdn, routes);
}

Analyse du texte

Pour trouver les itinéraires, nous devrons extraire la source et la destination des SMS que nous avons reçus.

La méthode parseText(params) extrait la source et la destination du texte du SMS et les renvoie.

function parseText({ text }) {
    let sampleText = "Traffic between mumbai and pune";
    if (text) {
   	 sampleText = text;
    }

    sampleText = sampleText.trim();
    const characters = sampleText.split(" ");
    const origin = characters[2];
    const destination = characters[4];

    return { origin, destination };
}

Obtenir des détails sur le trafic

Maintenant, ceci source et destination peuvent être transmises à l'API Google Distance Matrix API de Google qui obtient les détails du trafic.

Pour effectuer un appel à l'API depuis notre application, nous avons besoin de axiosNous allons donc ajouter cette dépendance.

Pour obtenir les informations sur le trafic, nous devons passer le paramètre departure_time dans le paramètre de la requête. Nous passons now comme valeur pour obtenir les détails du trafic actuel.

En outre, nous avons fixé le mode comme driving. Ceci peut être configuré et peut être accepté par le biais du SMS en même temps que les itinéraires afin d'offrir une meilleure expérience à l'utilisateur.

async function getTrafficDetails({ origins, destinations }) {
    try {
   	 const YOUR_API_KEY = process.env.GOOGLE_MAP_API_KEY;
   	 const mode = "driving";
   	 const departure_time = "now";

   	 var  config = {
   		 method:  "get",
   		 url:  `https://maps.googleapis.com/maps/api/directions/json?origins=${origins}&destinations=${destinations}&mode=${mode}&departure_time=${departure_time}&language=en-US&key=${YOUR_API_KEY}`,
   	 };

   	 let response = await axios(config);
   	 response = await response.data;

   	 const  routes = getRoutes(response);
   	 return  routes.join(" \n\n ");
    } catch (e) {
   	 console.error("There was some error while getting routes details", e);
    }
}

Voici un exemple de réponse de l'API Google Maps.

const response = {
  	routes: [
    	{
      	bounds: {
        	northeast: { lat: 41.8781139, lng: -87.6297872 },
        	southwest: { lat: 34.0523525, lng: -118.2435717 },
      	},
      	copyrights: "Map data ©2022 Google, INEGI",
      	legs: [
        	{
          	distance: { text: "579 km", value: 932311 },
          	duration: { text: "8 hours 48 mins", value: 31653 },
          	duration_in_traffic: { text: "8 hours 55 mins", value: 932311 },
          	end_address: "Panvel",
          	end_location: { lat: 37.0842449, lng: -94.513284 },
          	start_address: "Mumbai",
          	start_location: { lat: 41.8781139, lng: -87.6297872 },
          	steps: [],
          	traffic_speed_entry: [],
          	via_waypoint: [],
        	},
        	{
          	distance: { text: "217 km", value: 349512 },
          	duration: { text: "3 hours 17 mins", value: 11799 },
          	duration_in_traffic: { text: "3 hours 40 mins", value: 932311 },
          	end_address: "Alephata",
          	end_location: { lat: 35.4675612, lng: -97.5164077 },
          	start_address: "Panvel",
          	start_location: { lat: 37.0842449, lng: -94.513284 },
          	steps: [],
          	traffic_speed_entry: [],
          	via_waypoint: [],
        	},
        	{
          	distance: { text: "1,328 km", value: 2137682 },
          	duration: { text: "19 hours 28 mins", value: 70097 },
          	duration_in_traffic: { text: "20 hours 22 mins", value: 932311 },
          	end_address: "Pune",
          	end_location: { lat: 34.0523525, lng: -118.2435717 },
          	start_address: "Alephata",
          	start_location: { lat: 35.4675612, lng: -97.5164077 },
          	steps: [],
          	traffic_speed_entry: [],
          	via_waypoint: [],
        	},
      	],
      	summary: "I-55 S and I-44",
      	warnings: [],
      	waypoint_order: [0, 1],
    	},
  	],
  	status: "OK",
	};

Vérifier la structure complète de la réponse

Nous avons traité la réponse que nous avons reçue de l'API Google Direction et en avons tiré une chaîne lisible qui indique les différents itinéraires possibles ainsi que le temps et la distance nécessaires pour atteindre la destination.

Pour former la chaîne, nous avons pris tous les chemins pour les routes données, leur distance et le temps nécessaire pour atteindre la destination normalement et avec du trafic.

Nous convertirons tous les itinéraires en une chaîne lisible par l'homme, puis nous les renverrons ensemble.

Pour traiter la réponse, nous utiliserons des fonctions d'aide.

const  getRoutes = ({ routes }) => {

// calculate the overall distance of all the routes

return  routes.reduce((a, b, l) => {
const { legs } = b;

 

let  via = "";
let  normalTime = 0;
let  timeInTraffic = 0;

 

// for each route, calculate the distance path wise, from one to another

const  distance = legs.reduce((x, y, i) => {

const { distance, duration, duration_in_traffic, steps, start_address, end_address } = y;

normalTime += getTimeInMinutes(duration.text);

timeInTraffic += getTimeInMinutes(duration_in_traffic.text);

 

if (i !== legs.length - 1) {

via = via ? via + " -> " + end_address : end_address;

}

const  string = `From ${start_address} to ${end_address} it takes ${duration.text} normally and ${duration_in_traffic.text} in traffic to cover a distance of ${distance.text}`;

x.push(string);
return  x;
}, []);

// for the final string
const  finalString = `Route${l + 1} via ${via} will take ${processTime(
normalTime
)} normally and ${processTime(
timeInTraffic
)} in traffic. Path via breakdown is: ${distance.join(" AND ")}`;

// push the string
a.push(finalString);
return  a;
}, []);
};

// helper function extract to hours and minutes from text
// and return time in minutes

const  getTimeInMinutes = (timeText) => {

timeText = timeText.split(" ");

let  hrs = timeText[0];

let  mins = timeText[2];

return  parseInt(hrs) * 60 + parseInt(mins);

};

 

// helper function to get hours and mins from the time

const  processTime = (time) => {

const  hrs = Math.floor(time / 60);

const  mins = time % 60;

return  `${hrs} hours ${mins} mins`;

};

Cette méthode nous renvoie le tableau des itinéraires avec la distance via le chemin en temps normal et dans le trafic et nous pouvons les renvoyer dans un format textuel.

Renvoyer le SMS avec les détails du trafic

Dans la fonction getTrafficDetails() nous traitons une réponse de l'API sur le trafic et utilisons cette réponse pour générer un texte contenant les détails du trafic. Le texte de sortie ressemble à ceci :

"Route1 via Panvel -> Alephata will take 31 hours 33 mins normally and 32 hours 57 mins in traffic. Path via breakdown is:  From Mumbai to Panvel it takes 8 hours 48 mins normally and 8 hours 55 mins in traffic to cover a distance of 579 km AND From Panvel to Alephata it takes 3 hours 17 mins normally and 3 hours 40 mins in traffic to cover a distance of 217 km AND From Alephata to Pune it takes 19 hours 28 mins normally and 20 hours 22 mins in traffic to cover a distance of 1,328 km"

"Route2 via Eastern Express Highway -> Lonavala will take 11 hours 33 mins normally and 12 hours 57 mins in traffic. Path via breakdown is:  From Mumbai to Eastern Express Highway it takes 7 hours 48 mins normally and 7 hours 55 mins in traffic to cover a distance of 579 km AND From Eastern Express Highway to Lonavala it takes 2 hours 17 mins normally and 2 hours 40 mins in traffic to cover a distance of 200 km AND From Lonavala to Pune it takes 1 hours 28 mins normally and 2 hours 22 mins in traffic to cover a distance of 1,28 km"

Le texte généré contient le temps nécessaire pour atteindre la destination à partir du lieu d'origine pendant les heures normales et les heures de pointe. Nous pouvons renvoyer cette information au même numéro de téléphone que celui à partir duquel nous avons reçu l'entrée.

Nous pouvons utiliser l'API SMS de Vonage pour renvoyer les informations. Lorsque nous recevons le SMS, nous recevons également le numéro de portable de l'expéditeur auquel nous pouvons renvoyer le SMS.

async function sendSMS(msisdn, routes) {
    try {
   	 const data = qs.stringify({
   		 from: "Vonage APIs",
   		 text: routes,
   		 to: msisdn,
   		 api_key: process.env.VONAGE_API_KEY,
   		 api_secret: process.env.VONAGE_API_SECRET,
   	 });

   	 const config = {
   		 method: "post",
   		 url: "https://rest.nexmo.com/sms/json",
   		 headers: {
   		 "Content-Type": "application/x-www-form-urlencoded",
   		 },
   		 data: data,
   	 };

   	 let response = await axios(config);
   	 response = await response.data;
    } catch (e) {
   	 console.error("There was some error while sending sms", e);
    }
}

Vous pouvez trouver le code source de cette application ici

Conclusion

Maintenant que nous avons créé l'alerte trafic instantanée par notification SMS, vous pouvez vous référer à cet article pour créer un système d'alerte différent par SMS, ou via WhatsApp en utilisant l'API de messages de Vonage. Vonage Messages API.

L'engagement de la communauté est toujours le bienvenu. Rejoignez Vonage sur GitHub pour des exemples de code et la Communauté Slack pour des questions ou des commentaires. Envoyez aux développeurs de Vonage un tweet et faites-leur part de quelque chose de cool que vous avez construit en utilisant les API de Vonage.

Vous pouvez également me contacter sur mon blog learnersbucket.com où j'écris des articles sur le développement web.