Verkehrswarnung per SMS mit Vonage und Google Maps API

Übersicht

In dieser hektischen und geschäftigen Welt, in der das Leben ständig in Bewegung ist, legen die Nutzer Wert darauf, Informationen so bequem wie möglich abzurufen. Das ist nicht immer einfach, vor allem in Ländern wie Indien, wo die Internetabdeckung in abgelegenen Gebieten schwächer ist.

Nehmen wir an, Sie wollen nach einem anstrengenden Tag das Büro verlassen, um nach Hause zu fahren, und möchten prüfen, ob auf Ihrer Route Stau herrscht, aber Ihre Internetverbindung ist langsam. Wie wäre es, wenn Sie eine SMS mit Ihrem Start- und Zielort senden könnten, um sofort die Verkehrsinformationen zu erhalten? Das wäre ein wahrer Lebensretter!

In diesem Artikel zeige ich, wie man mit Vonage und Google Maps API in Node.js eine Verkehrsmeldung per SMS erstellen kann.

Voraussetzungen

Bevor Sie beginnen, vergewissern Sie sich, dass Sie die folgenden Komponenten installiert haben:

• Node.js. Node.js ist eine quelloffene, plattformübergreifende JavaScript-Laufzeitumgebung.

• ngrok - Ein kostenloser Account ist erforderlich. Mit diesem Tool können Entwickler einen lokalen Entwicklungsserver für das Internet freigeben.

• Vonage CLI - Sobald Node.js installiert ist, können Sie mit npm install -g @vonage/cli installieren. Mit diesem Tool können Sie Ihre Vonage-Applikationen erstellen und verwalten.

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Sobald Sie einen Account erstellt haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf der Seite Vonage-API-Dashboard.

Sobald Sie den API-Schlüssel und API-Geheimniserhalten haben, können Sie sie für die SMS API.

Google Maps API

Wir benötigen außerdem Google Richtungs-API. Erstellen Sie einen Google Account und melden Sie sich an, um kostenloses Guthaben für die Nutzung der Google API und den API-Schlüssel.

Um den Google Maps API-Schlüssel zu erhalten:

• Besuchen Sie die Google Maps-Plattform > Seite Anmeldeinformationen.

• Klicken Sie auf der Seite Credentials auf Anmeldeinformationen erstellen > API-Schlüssel. Die Seite API-Schlüssel Dialogfeld zeigt Ihren neu erstellten API-Schlüssel.

• Klicken Sie auf Schließen. Der neue API-Schlüssel wird auf der Seite Credentials unter API-Schlüssel.

Problemaufschlüsselung

Die Umsetzung dieser Anwendung kann in drei Teile gegliedert werden:

1. Empfangen und Lesen der SMS-Nachricht.

2. Extrahieren Sie die Quell- und Zielorte aus dem SMS-Text und holen Sie sich die Verkehrsinformationen von Google Maps API.

3. Verarbeitung der Verkehrsdaten und Rücksendung der SMS in einem textlichen und menschenlesbaren Format.

Einrichtung

Da unsere Anwendung in Node.js entwickelt wird, stellen Sie sicher, dass Sie über Nodejs im System installiert haben.

Installieren Sie die Abhängigkeiten, indem Sie diesen Befehl in Ihrem Terminal ausführen:

Erstellen Sie eine einzelne Datei namens App.js die die Anwendung auf Port 3000 ausführt und die gesamte Verarbeitung in ihr abwickelt.

Wir haben das dotenv npm-Paket verwendet, um die Umgebungsvariablen zu erhalten. Auf diese Weise können wir Geheimnisse sicher speichern.

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);
});

Um die Umgebungsvariablen zu speichern und darauf zuzugreifen, erstellen Sie eine .env Datei in Ihrem Stammverzeichnis und fügen Sie die Eigenschaften hinzu.

PORT = 3000

Auf diese Eigenschaften kann man mit process.env.PORT

SMS-Empfang

Der erste Schritt besteht darin, die SMS zu empfangen und zu lesen. Vonage stellt ein Node.js SDK zur Verfügung, um SMS-Clients innerhalb unserer Node-Anwendung zu nutzen.

Sie können dieser Anleitung folgen diesem Tutorium folgen, wie Sie die Nachricht in einer Node.js-Anwendung empfangen können

Der nächste Schritt besteht darin, die Inbound-API zu konfigurieren und sie zur Vonage-Konsole hinzuzufügen. Auf diese Weise wird die Inbound-API immer dann aufgerufen, wenn eine SMS an unsere Nummer gesendet wird, und wir können diese SMS lesen.

Es gibt eine detaillierte Anleitung, wie Sie die eingehende API einrichtet und die SMS liest.

Die Inbound-API ist das, was wir jeder Drittanwendung zur Verfügung stellen, an die sie die Daten senden.

Jede GET oder POST Anfrage, die unsere eingehende API /webhooks/inbound-sms empfängt, wird an die handleInboundSms Funktion übergeben.

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();
}

Damit diese eingehende API funktioniert, müssen wir unsere Anwendung in Betrieb nehmen. Das können wir tun, indem wir ngrok.

Um die Anwendung in Betrieb zu nehmen, müssen Sie zunächst ngrok einrichten.

Und führen Sie dann die Node-App lokal aus

Sobald die lokale Anwendung läuft, können wir sie abbilden und mit ngrok in Betrieb nehmen.

Erwartetes Ergebnis:

Sobald die App live ist, erhalten wir eine öffentliche URL, zum Beispiel https://58c8-103-179-3-99.in.ngrok.io

Fügen Sie diese URL zum Vonage-Dashboard hinzu, damit wir die eingehende API abhören können.

Da wir nun in der Lage sind, die SMS zu empfangen, sollten wir den Text verarbeiten und die Verkehrsinformationen von Google abrufen.

Abrufen der Verkehrsinformationen zwischen zwei Routen mit Google Maps API

Um die Quell- und Zielinformationen aus den SMS zu extrahieren, die wir über die Inbound-API erhalten, muss der SMS-Text in einem bestimmten Format vorliegen, damit er besser geparst werden kann. Ich habe eine einfache Vorlage erstellt, die leichter zu verarbeiten ist.

Um beispielsweise Informationen über den Verkehr zwischen Mumbai und Pune zu erhalten, erstellen wir die folgende SMS:

Traffic between Mumbai and Pune

Im obigen Beispiel, Mumbai die Quelle, und Pune ist das Ziel.

In der getTrafficDetailsAndSendSMS(params); Funktion können wir den Text der SMS nehmen und dann die Quelle extrahieren.

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);
}

Text parsen

Um die Routen zu finden, müssen wir die Quelle und das Ziel aus den erhaltenen SMS extrahieren.

Die Methode parseText(params) Methode extrahiert die Quelle und das Ziel aus dem SMS-Text und gibt diese zurück.

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 };
}

Details zum Verkehr erhalten

Nun diese source und destination können an die Google Entfernungsmatrix-API übergeben werden, die die Verkehrsdaten abruft.

Um einen API-Aufruf von unserer Anwendung aus zu tätigen, benötigen wir axiosbenötigen, also fügen wir diese Abhängigkeit hinzu.

Um die Verkehrsinformationen zu erhalten, müssen wir den departure_time im Abfrageparameter übergeben. Wir übergeben now als Wert, um die aktuellen Verkehrsinformationen zu erhalten.

Außerdem haben wir die mode als driving. Dies kann konfigurierbar gemacht werden und kann durch die SMS zusammen mit den Routen akzeptiert werden, um eine bessere Benutzererfahrung zu bieten.

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);
    }
}

Es folgt eine Beispielantwort von der Google Maps API.

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",
	};

Prüfen Sie die vollständige Antwortstruktur

Wir haben die Antwort, die wir von der Google Direction API erhalten haben, verarbeitet und daraus eine lesbare Zeichenkette gebildet, die die verschiedenen Routen, die wir nehmen können, sowie die Zeit und die Entfernung, die wir zum Erreichen des Ziels benötigen, anzeigt.

Zur Bildung der Zeichenfolge wurden alle Pfade für die gegebenen Routen, ihre Entfernung und die Zeit, um das Ziel normal und mit Verkehr zu erreichen, herangezogen.

Wir konvertieren alle Routen in eine für Menschen lesbare Zeichenkette und geben sie dann zusammen zurück.

Zur Verarbeitung der Antwort werden wir Hilfsfunktionen verwenden.

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`;

};

Diese Methode liefert uns eine Reihe von Routen mit der Entfernung über den Weg in normaler Zeit und im Verkehr und wir können sie in einem Textformat zurückgeben.

Senden Sie die SMS mit den Verkehrsinformationen zurück

In der getTrafficDetails() Funktion verarbeiten wir eine Verkehrs-API-Antwort und verwenden diese Antwort, um einen Text zu erzeugen, der die Verkehrsdetails enthält. Der Ausgabetext sieht wie folgt aus:

"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"

Dieser generierte Text enthält die Zeit, die benötigt wird, um das Ziel vom Ausgangsort aus zu normalen und zu Stoßzeiten zu erreichen. Wir können diese Informationen an dieselbe Telefonnummer zurücksenden, von der wir die Eingabe erhalten haben.

Wir können die Vonage SMS API nutzen, um die Informationen zurückzusenden. Wenn wir die SMS erhalten, bekommen wir auch die Handynummer des Absenders, an die wir die SMS zurücksenden können.

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);
    }
}

Den Quellcode dieser Anwendung finden Sie hier

Schlussfolgerung

Nachdem wir nun die sofortige Verkehrswarnung per SMS-Benachrichtigung erstellt haben, können Sie sich auf diesen Artikel beziehen, um ein anderes Warnsystem per SMS oder über WhatsApp zu erstellen, indem Sie Vonage Messages API.

Das Engagement der Community ist immer willkommen. Werden Sie Mitglied bei Vonage auf GitHub für Codebeispiele und den Gemeinschaft Slack für Fragen oder Feedback. Senden Sie den Entwicklern von Vonage einen Tweet und lassen Sie sie wissen, was Sie mit Hilfe der Vonage APIs entwickelt haben.

Sie können mich auch über meinen Blog erreichen learnersbucket.com wo ich Artikel über Webentwicklung schreibe.