Erstellen eines Notfall-Rundfunksystems mit Vonage, Node und MongoDB

In einer Notsituation ist es schwer, etwas richtig zu machen, vor allem, wenn man in Panik ist! Wenn Sie sich in einem Notfall befinden, kann sich etwas so Einfaches wie die Benachrichtigung der richtigen Person, dass Sie Hilfe benötigen, als unmöglich erweisen. Heute werden wir dieses Problem lösen, indem wir eine Webapplikation entwickeln, die es Ihnen ermöglicht, mit einem einzigen Mausklick Ihre Familie per SMS zu benachrichtigen, dass Sie sich in einem Notfall befinden und Ihren Standort zu übermitteln. Wir werden diese Website mit Node.js, Express, MongoDB und der Vonage Messages API erstellen. Node ist ein beliebter Webserver, und Express ist ein Framework, das von Entwicklern häufig zusammen mit diesem verwendet wird. MongoDB ist eine NoSQL-Datenbank, und mit der Vonage Messages API können Sie schnell Nachrichten (z. B. SMS-Nachrichten) programmatisch versenden.

Ihre Webanwendung sieht dann wie folgt aus.

Sie können Kontakte hinzufügen und anzeigen, und wenn Sie die Alarmtaste drücken, wird eine SMS-Nachricht an alle Ihre Kontakte gesendet, um ihnen mitzuteilen, wo Sie sich befinden und dass Sie sich in einem Notfall befinden.

Den gesamten Code für dieses Projekt finden Sie in diesem GitHub-Repository.

Sind Sie bereit anzufangen? Lassen Sie uns eine Notfall-Rundfunk-App erstellen!

Voraussetzungen

Um diesem Tutorial zu folgen, benötigen Sie Node (Sie können hier herunterladen). Außerdem benötigen Sie einen Vonage Account, den Sie hier registrieren. Sie benötigen außerdem ein MongoDB Account.

Nachdem Sie sich für Ihren MongoDB Account registriert haben, müssen Sie eine MongoDB Atlas Datenbank einrichten. in der MongoDB-Dokumentation.

Sobald Sie Ihren Vonage Account erstellt haben, müssen Sie einige Ersteinrichtungen vornehmen.

Installieren Sie die Vonage CLI global mit diesem Befehl:

npm install @vonage/cli -g

Als nächstes konfigurieren Sie die CLI mit Ihrem Vonage API-Schlüssel und -Geheimnis. Sie finden diese Informationen im Developer Dashboard.

vonage config:set --apiKey=VONAGE_API_KEY --apiSecret=VONAGE_API_SECRET

Erstellen Sie ein neues Verzeichnis für Ihr Projekt und legen Sie eine CD darin ab:

mkdir my_project
cd my_project

Verwenden Sie nun die Befehlszeilenschnittstelle, um mit diesem Befehl eine Vonage-Anwendung zu erstellen:

vonage apps:create

Blättern Sie zu Nachrichten, klicken Sie auf die Leertaste und dann auf die Eingabetaste. Jetzt brauchen Sie eine Nummer, damit Sie Anrufe empfangen können. Sie können eine mieten, indem Sie den folgenden Befehl verwenden (ersetzen Sie die Landesvorwahl durch Ihre Vorwahl). Wenn Sie z. B. in Großbritannien leben, ersetzen Sie US durch GB:

vonage numbers:search US
vonage numbers:buy [NUMBER] [COUNTRYCODE]

Verknüpfen Sie nun die Nummer mit Ihrer App:

vonage apps:link --number=VONAGE_NUMBER APP_ID

Aufbau des Rundfunksystems

Um zu beginnen, müssen Sie die JavaScript-Bibliotheken, die Sie für dieses Projekt verwenden werden, wie folgt installieren:

npm install express body-parser dotenv firebase mongodb mongoose @vonage/server-sdk

Erstellen Sie dann eine .env-Datei in Ihrem Projekt und fügen Sie die folgenden Variablen hinzu:

API_KEY=your_vonage_api_key
API_SECRET=your_vonage_secret
APPLICATION_ID=your_vonage_application_id
PRIVATE_KEY=your_vonage_private_key
FROM_NUMBER=your_vonage_number
PORT=5000
MONGO_URL=your_mongodb_url

Stellen Sie sicher, dass Sie alle Angaben nach dem Gleichheitszeichen für jede Variable durch die Informationen aus Ihren Vonage- und MongoDB-Konten ersetzen.

Erstellen Sie nun eine Datei namens app.js und importieren Sie diese Bibliotheken:

require('dotenv/config')
require('mongodb')
const express = require('express')
const Vonage = require('@vonage/server-sdk')
const bodyParser = require('body-parser')
const mongoose = require('mongoose')

Beginnen wir mit der Erstellung einer "Hello, World!" Express-Anwendung. So geht's:

const app = express()

app.get('/', function(req, res) {
    res.send('Hello World!')
})

app.listen(process.env.PORT)

Führen Sie nun Ihren Code wie folgt aus:

node app.js

Wenn Sie diesen Code ausführen und zu Ihrem lokalen Server (http://127.0.0.1:5000) gehen, sollte dort stehen Hello, World!

Fügen Sie nun folgenden Code darunter einconst app = express():

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
    extended: true
}))
app.use(express.static('public'))

Dieser Code hilft Ihnen, POST-Anfragen mit Express zu akzeptieren und weist Express an, statische Dateien aus einem Verzeichnis namens public.

Es ist an der Zeit, Code für die Verbindung zu Ihrer MongoDB-Datenbank hinzuzufügen! Fügen Sie diesen Code zu Ihrer Anwendung hinzu und aktualisieren Sie Ihre .env Datei, um eine Umgebungsvariable namens MONGO_URL die den Link zu Ihrer MongoDB-Datenbank enthält.

mongoose.connect(process.env.MONGO_URL, {
    useNewUrlParser: true,
    useUnifiedTopology: true
})
const contactsSchema = new mongoose.Schema({
    name: String,
    number: Number
})
const Contacts = mongoose.model('Contacts', contactsSchema)

Der obige Code verwendet Mongoose, um sich mit Ihrer MongoDB-Datenbank zu verbinden, erstellt ein Schema für Ihre Kontakte (die Personen, an die Sie eine SMS-Nachricht senden werden) und erstellt ein neues Modell namens Contacts zum Hinzufügen und Abrufen der Kontakte aus Ihrer Datenbank.

Fügen Sie dann diesen Code hinzu, um den Versand von SMS-Nachrichten über die Vonage Messages API zu unterstützen.

const vonage = new Vonage({
    apiKey: process.env.API_KEY,
    apiSecret: process.env.API_SECRET,
    applicationId: process.env.APPLICATION_ID,
    privateKey: process.env.PRIVATE_KEY
})

Der obige Code erstellt ein neues Vonage-Objekt und übergibt den API-Schlüssel, das Geheimnis, die Anwendungs-ID und den privaten Schlüssel für Ihre Anwendung.

Lassen Sie uns nun ein paar Endpunkte erstellen. Fügen Sie den folgenden Code zu app.js:

app.post('/contacts', function(req, res) {
    const contact = new Contacts({
        name: req.body.name
    })
    contact.save()
    res.redirect('/')
})

Wenn Sie nun eine POST-Anfrage an /contactssenden, erstellt dieser Code einen neuen Kontakt in Ihrer MongoDB und leitet den Benutzer zur Homepage weiter.

Lassen Sie uns einen Endpunkt erstellen, um alle Kontakte aus Ihrer Datenbank zu erhalten. Fügen Sie den folgenden Code zu app.js:

app.get('/contacts', function(req, res) {
    Contacts.find({}, function(err, contacts) {
        if(err){
            console.log(err)
       }
       else {
           res.json(contacts)
       }
   })
})

Dieser Code ruft alle Kontakte in Ihrer Datenbank ab und gibt sie als JSON zurück, wenn Sie eine GET-Anfrage an /contacts.

Definieren wir nun einen Endpunkt zum Senden einer SMS. Fügen Sie folgenden Code hinzu app.js:

app.post('/alert', function(req, res) {
    let long = req.body['coordinates']['long']
    let lat = req.body['coordinates']['lat']
    let contacts = req.body['contacts']
    for (let i = 0; i <= contacts.length; i++) {
        vonage.channel.send({
                'type': 'sms',
                "number": contacts[i].number
            }, {
                'type': 'sms',
                "number": process.env.FROM_NUMBER
            }, {
                'content': {
                    'type': 'text',
                    'text': `SOS! Your friend is in an emergency! Their latitude is ${lat} and` +
                        `their longitude is ${long}!`
                }
            },
            (err, data) => {
                if (err) {
                    console.error(err)
                } else {
                    console.log(data.message_uuid)
                }
            }
        )
    }
})

Dieser Endpunkt akzeptiert eine POST-Anfrage mit JSON, die den Breitengrad und den Längengrad des Benutzers sowie eine Liste von Numbers enthält, an die eine SMS gesendet werden soll.

let long = req.body['coordinates']['long']
let lat = req.body['coordinates']['lat']
let contacts = req.body['contacts']

Anschließend werden die Kontakte in einer Schleife durchlaufen und über die Vonage Messages API eine Nachricht an jede Nummer gesendet.

for (let i = 0; i <= contacts.length; i++) {
    vonage.channel.send({
                'type': 'sms',
                'number': contacts[i].number
            }, {
                'type': 'sms',
                'number': process.env.FROM_NUMBER
            }, {
                'content': {
                    'type': 'text',
                    'text': `SOS! Your friend is in an emergency! Their latitude is ${lat} and` +
                        `their longitude is ${long}!`
                }
            },

Schließlich aktualisieren wir unseren Homepage-Endpunkt, um zu verarbeiten, wenn Benutzer die Homepage unserer Webanwendung aufrufen. Ändern Sie diesen Code von vorhin:

app.get('/', function(req, res) {
    res.send('Hello World!')
})

Zu diesem:

app.get('/', function(req, res) {
    res.sendFile('index.html')
})

Ihre Homepage wird nun die Datei index.html anzeigen, die Sie gerade erstellen.

Legen Sie eine neue Datei mit dem Namen index.html an und fügen Sie den folgenden Code ein:

<!DOCTYPE html>
<html lang='en'>
   <head>
      <meta charset='UTF-8'>
      <title>Emergency Broadcast</title>
      <link rel='stylesheet' href='style.css'>
   </head>
   <body>
      <h1 id='top'>Add Contact</h1>
      <form action='/contacts' method='POST'>
         <div>
            <input id='name' class='forms' type='text' name='name' placeholder='name'> <br>
            <input id='number' class='forms' type='text' name='number' placeholder='number'>
         </div>
         <div>
            <input type='submit' value='Add' class='tons' id='add'>
         </div>
      </form>
      <br> <br>
      <h1>Your Contacts</h1>
      <div></div>
      <div id='contacts'></div>
      <button onclick='alert_them()' class='tons' id='alert'>ALERT</button>
   </body>
</html>

Mit dem obigen HTML-Code wird ein Formular erstellt, in das Sie den Namen und die Telefonnummer einer Person eingeben und auf die Schaltfläche Hinzufügen klicken können. Wenn Sie auf Hinzufügen klicken, sendet das Formular eine POST-Anfrage an /contactsund legt damit einen neuen Kontakt in Ihrer Datenbank an. Dieses HTML-Formular hat auch eine ALERT-Schaltfläche. Wenn Sie diese drücken, wird eine POST-Anfrage an /alertund sendet eine SMS-Nachricht an alle Kontakte in Ihrer Datenbank.

Schließlich müssen Sie diesem HTML-Code ein JavaScript hinzufügen, um die Kontaktliste des Benutzers anzuzeigen und die Daten für die Übertragung an /alert.

Fügen Sie nach der Schaltfläche ALERT in Ihrem HTML-Code ein Skript-Tag hinzu und definieren Sie ein Objekt namens data.

<script>
    let data = {}
</script>

Wir verwenden data um die Daten zu speichern, die wir an /alert.

Als nächstes rufen Sie eine Funktion namens httpPostAsync auf und übergeben Sie ‘/contacts’und create_contacts:

<script>
    let data = {}
    httpPostAsync('/contacts', create_contacts)
</script>

Definieren Sie nun create_contacts:

function create_contacts(contacts) {
    data['contacts'] = []
    for (let i = 0; i < contacts.length; i++) {
        let contact = contacts[i]
        data['contacts'].push(contact)
        const newDiv = document.createElement('div')
        newDiv.className = 'left'
        const newContent = document.createTextNode(contact.name)
        newDiv.appendChild(newContent)
        const currentDiv = document.getElementById('contacts')
        document.body.insertBefore(newDiv, currentDiv)
    }
}

Dies ist eine Rückruf-Funktion httpPostAsync wird aufgerufen, wenn sie die Kontaktdaten vom Server erhält. Sie akzeptiert die Kontakte als Parameter (die Kontaktdaten). Zuerst fügt diese Funktion ein Array zu data['contacts']. Dann geht sie in einer Schleife durch die Kontakte vom Server und fügt jeden Kontakt dem Array hinzu und erstellt eine neue HTML div mit dem Namen des jeweiligen Kontakts.

Nun müssen Sie Folgendes definieren httpPostAsync:

function httpPostAsync(theUrl, callback) {
    let xmlHttp = new XMLHttpRequest()
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            callback(JSON.parse(xmlHttp.responseText))
    }
    xmlHttp.open('GET', theUrl, true)
    xmlHttp.send()
}

Dieser Code sendet eine GET-Anforderung an eine URL und übergibt das in der Antwort empfangene JSON an eine Callback-Funktion.

Schließlich müssen Sie eine Funktion definieren, die reagiert, wenn ein Benutzer auf die Schaltfläche ALERT klickt.

function alert_them() {
    function success(position) {
        data['coordinates'] = {}
        data['coordinates'] = position.coords.latitude
        data['coordinates'] = position.coords.longitude
        let xmlHttp = new XMLHttpRequest()
        xmlHttp.open('POST', '/alert', true)
        xmlHttp.setRequestHeader('Content-Type', 'application/json')
        xmlHttp.send(JSON.stringify(data))
        alert('Message Sent!')
    }

    function error() {
        console.log('error')
    }
    if (!navigator.geolocation) {
        console.log('Geolocation is not supported by your browser')
    } else {
        navigator.geolocation.getCurrentPosition(success, error)
    }
}

Diese Funktion prüft, ob navigator.geolocation ist. true. Navigator.geolocation können Sie den Standort des Benutzers ermitteln. Sie müssen prüfen, ob dies der Fall ist, da einige Browser-Versionen dies nicht unterstützen. Wenn es wahr ist, ruft die obige Funktion navigator.geolocation.getCurrentPosition(success, error) auf und übergibt zwei Funktionen: eine, die sich darum kümmert, was passiert, wenn der Browser den Standort des Benutzers erfolgreich ermittelt hat, und eine, die Fehler behandelt.

Die Funktion success Funktion fügt die Koordinaten des Benutzers zu data['coordinates'] und sendet dann eine POST-Anfrage an /alert mit den Daten.

function success(position) {
    data['coordinates'] = {}
    data['coordinates'] = position.coords.latitude
    data['coordinates'] = position.coords.longitude
    let xmlHttp = new XMLHttpRequest()
    xmlHttp.open('POST', '/alert', true)
    xmlHttp.setRequestHeader('Content-Type', 'application/json')
    xmlHttp.send(JSON.stringify(data))
}

Ihr /alert Endpunkt sendet dann eine SMS-Nachricht an alle Kontakte in der Datenbank, um ihnen mitzuteilen, dass der Absender in Schwierigkeiten ist, zusammen mit dem Breiten- und Längengrad des Absenders. Jetzt müssen Sie Ihre Anwendung nur noch mit etwas CSS gestalten. Erstellen Sie eine neue Datei in public mit dem Namen style.css und fügen Sie den folgenden Code ein:

body {
    background-color: lavenderblush;
    text-align: center
}

h1 {
    color: #111;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: -1px;
    line-height: 1;
    text-align: center; 
}

.forms {
    height: 2.5em;
    width: 30%;
}

.tons {
    margin-top: 1em;
    background-color: #4CAF50; /* Green */
    border: none;
    color: #f8f8ff;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 22px;
    font-family: Arial, serif;
}

.custom-field input {
    border: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #f2f2f2;
    padding: 12px;
    border-radius: 3px;
    width: 250px;
    font-size: 14px;
}

#alert {
    margin-bottom: 5em;
    margin-top:1em;
    background-color:red;
}

#alert:hover {
    background-color: black;
}

#add {
    background-color:black;
}

#add:hover {
    background-color: pink;
}

#top {
    margin-top: 5em;
    margin-bottom: 1.5em;
}

.cons{
    font-size: 22px;
}

#number {
    margin-top: 1em;
}

Wenn Sie nun auf die Startseite Ihrer Website gehen, sollten Sie eine Website wie auf dem Bild am Anfang dieses Artikels sehen.

Fügen Sie sich selbst als Kontakt hinzu und drücken Sie auf Alarm.

Sie sollten eine SMS mit Ihrem Längen- und Breitengrad erhalten, die Ihnen mitteilt, dass Sie sich in einem Notfall befinden.

Abschließende Überlegungen

Diese Demo ist nur ein Anfang! Es gibt eine ganze Reihe von Funktionen, die Sie hinzufügen können. Wenn Sie es zum Beispiel in der Produktion einsetzen würden, könnten Sie eine Funktion für verschiedene Benutzer einrichten (Anmeldung mit einem Benutzernamen und einem Passwort usw.). Sie könnten auch Funktionen wie das Bearbeiten von Kontakten und das Hinzufügen von Optionen für die Art des Notfalls hinzufügen. Wenn Sie sich entschließen, auf dieser Demo aufzubauen, würde ich gerne sehen, was Sie tun: Schicken Sie uns unbedingt senden Sie uns Ihre Entwicklungen auf Twitter. Außerdem sollten Sie der Vonage Entwickler-Community beitreten, um weitere großartige Inhalte und Tutorials zu erhalten. Sie können Vonage folgen auf Twitter hier und treten Sie unserem Slack-Kanal hier. Ich hoffe, dieses Tutorial hat Ihnen gefallen! Danke fürs Lesen!