Créer un système de diffusion d'urgence avec Vonage, Node et MongoDB

Il est difficile de faire quelque chose de bien en cas d'urgence, surtout si l'on panique ! Si vous êtes dans une situation d'urgence, quelque chose d'aussi simple que de faire savoir à la bonne personne que vous avez besoin d'aide peut s'avérer impossible. Aujourd'hui, nous allons résoudre ce problème en créant une application web qui vous permet de cliquer sur un seul bouton pour avertir votre famille que vous êtes en pleine situation d'urgence par texto et envoyer votre position. Nous créerons ce site web en utilisant Node.js, Express, MongoDB et l'API Messages de Vonage. Node est un serveur web populaire, et Express est un cadre que les développeurs utilisent souvent avec lui. MongoDB est une base de données NoSQL, et l'API Messages de Vonage vous permet d'envoyer rapidement des messages (tels que des SMS) de manière programmatique.

Votre application web ressemblera à ceci.

Vous pouvez ajouter des contacts, les voir, et lorsque vous appuyez sur le bouton d'alerte, il envoie un SMS à tous vos contacts, les informant de votre position et du fait que vous êtes en situation d'urgence.

Comme vous le suivez, vous pouvez trouver tout le code de ce projet dans ce dépôt GitHub.

Prêt à commencer ? Créons une application de diffusion d'urgence !

Conditions préalables

Pour suivre ce tutoriel, vous avez besoin de Node (que vous pouvez télécharger ici). Vous avez également besoin d'un Account Vonage, que vous pouvez vous inscrire ici. Vous aurez également besoin d'un Account MongoDB.

Après avoir ouvert un compte MongoDB, vous devez configurer une base de données MongoDB Atlas, ce que vous pouvez apprendre à faire dans la documentation de MongoDB. dans la documentation de MongoDB.

Une fois que vous avez créé votre Account Vonage, vous devez procéder à la configuration initiale.

Installez le CLI de Vonage globalement avec cette commande :

npm install @vonage/cli -g

Ensuite, configurez le CLI avec votre clé et votre secret API Vonage. Vous trouverez ces informations dans le tableau de bord du développeur.

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

Créez un nouveau répertoire pour votre projet et placez-y un CD :

mkdir my_project
cd my_project

Maintenant, utilisez le CLI pour créer une application Vonage avec cette commande :

vonage apps:create

Faites défiler jusqu'à Messages, cliquez sur la barre d'espacement et appuyez sur Entrée. Vous avez maintenant besoin d'un numéro pour pouvoir recevoir des appels. Vous pouvez en louer un en utilisant la commande suivante (en remplaçant le code du pays par votre code). Par exemple, si vous êtes en Grande-Bretagne, remplacez US par GB :

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

Reliez maintenant le numéro à votre application :

vonage apps:link --number=VONAGE_NUMBER APP_ID

Construction du système de radiodiffusion

Pour commencer, vous devez installer les bibliothèques JavaScript que vous utiliserez pour ce projet comme suit :

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

Ensuite, créez un fichier .env dans votre projet et ajoutez les variables suivantes :

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

Veillez à remplacer tout ce qui se trouve après chaque signe égal pour chaque variable par les informations de vos comptes Vonage et MongoDB.

Maintenant, créez un fichier appelé app.js et importez ces bibliothèques :

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

Commençons par créer une application "Hello, World!" Express. Voici comment procéder :

const app = express()

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

app.listen(process.env.PORT)

Maintenant, exécutez votre code comme suit :

node app.js

Lorsque vous exécutez ce code et que vous vous rendez sur votre serveur local (http://127.0.0.1:5000), le message suivant doit apparaître Hello, World!

Maintenant, ajoutez ce code en dessousconst app = express():

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

Ce code vous aide à accepter des requêtes POST à l'aide d'Express et indique à Express de servir des fichiers statiques à partir d'un répertoire appelé public.

Il est temps d'ajouter du code pour se connecter à votre base de données MongoDB ! Ajoutez ce code à votre application et mettez à jour votre fichier .env pour inclure une variable d'environnement appelée MONGO_URL qui contient le lien vers votre base de données MongoDB.

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)

Le code ci-dessus utilise Mongoose pour se connecter à votre base de données MongoDB, crée un schéma pour vos contacts (les personnes à qui vous enverrez un SMS) et crée un nouveau modèle appelé Contacts pour ajouter et récupérer les contacts de votre base de données.

Ensuite, ajoutez ce code pour aider à envoyer des SMS à l'aide de l'API de messages de Vonage.

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

Le code ci-dessus crée un nouvel objet Vonage et transmet votre clé API, votre secret, l'identifiant de l'application et la clé privée de votre application.

Maintenant, créons quelques points d'extrémité. Ajoutez le code suivant à app.js:

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

Désormais, lorsque vous envoyez une requête POST à /contactsce code crée un nouveau contact dans votre base de données MongoDB et redirige l'utilisateur vers la page d'accueil.

Créons un point d'accès pour récupérer tous les contacts de votre base de données. Ajoutez le code suivant à app.js:

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

Ce code récupère tous les contacts de votre base de données et les renvoie sous forme de JSON lorsque vous envoyez une requête GET à /contacts.

Définissons maintenant un point de terminaison pour l'envoi d'un SMS. Ajoutez ce code à 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)
                }
            }
        )
    }
})

Ce point d'accès accepte une requête POST avec JSON contenant la latitude et la longitude de l'utilisateur, ainsi qu'une liste de numéros auxquels envoyer un SMS.

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

Ensuite, il parcourt les contacts et utilise l'API Messages de Vonage pour envoyer un message à chaque numéro.

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}!`
                }
            },

Enfin, mettons à jour notre point de terminaison homepage pour gérer les cas où les utilisateurs se rendent sur la page d'accueil de notre application web. Modifiez le code précédent :

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

A cela :

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

Maintenant, votre page d'accueil servira le fichier index.html, que vous êtes sur le point de créer.

Créez un nouveau fichier appelé index.html et ajoutez le code suivant :

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

Le code HTML ci-dessus crée un formulaire qui vous permet de saisir le nom et le numéro d'une personne et d'appuyer sur un bouton Ajouter. Lorsque vous appuyez sur Ajouter, le formulaire envoie une requête POST à /contactsce qui crée un nouveau contact dans votre base de données. Ce code HTML comporte également un bouton ALERT. Lorsque vous appuyez sur ce bouton, il envoie une requête POST à /alertqui envoie un SMS à tous les contacts de votre base de données.

Enfin, vous devez ajouter du JavaScript à ce code HTML pour afficher la liste des contacts de l'utilisateur et préparer les données à envoyer à /alert.

Après le bouton ALERT dans votre HTML, ajoutez une balise de script et définissez un objet appelé data.

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

Nous utiliserons data pour stocker les données à envoyer à /alert.

Ensuite, appelez une fonction appelée httpPostAsync et transmet ‘/contacts’et create_contacts:

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

Définissons maintenant 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)
    }
}

Il s'agit d'une fonction de rappel httpPostAsync sera appelée lorsqu'elle recevra les données de contact du serveur. Elle accepte les contacts comme paramètre (les données de contact). Tout d'abord, cette fonction ajoute un tableau à data['contacts']. Ensuite, elle parcourt les contacts du serveur, ajoute chaque contact au tableau et crée un nouveau fichier HTML div avec le nom de chaque contact.

Vous devez maintenant définir 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()
}

Ce code envoie une requête GET à une URL et transmet le JSON reçu en réponse à une fonction de rappel.

Enfin, vous devez définir une fonction qui réagit lorsqu'un utilisateur clique sur le bouton ALERTE.

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

Cette fonction vérifie si navigator.geolocation est true. Navigator.geolocation vous permet d'obtenir la localisation de l'utilisateur. Vous devez vérifier si elle est vraie car certaines versions de navigateurs ne la prennent pas en charge. Si c'est le cas, la fonction ci-dessus appelle navigator.geolocation.getCurrentPosition(success, error) et transmet deux fonctions : une qui gère ce qui se passe si le navigateur réussit à obtenir l'emplacement de l'utilisateur et une qui gère les erreurs.

La fonction success ajoute les coordonnées de l'utilisateur à data['coordinates'] puis envoie une requête POST à /alert avec les données.

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

Votre point d'extrémité /alert envoie alors un SMS à tous les contacts de la base de données, les informant que l'expéditeur est en difficulté et leur indiquant sa latitude et sa longitude. Il ne vous reste plus qu'à styliser votre application avec du CSS. Créez un nouveau fichier dans public appelé style.css et ajoutez le code suivant :

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

Lorsque vous allez sur la page d'accueil de votre site web, vous devriez voir un site web comme l'image au début de cet article.

Ajoutez votre nom en tant que contact et appuyez sur l'alerte.

Vous devriez recevoir un texte contenant votre longitude et votre latitude vous informant que vous êtes en situation d'urgence.

Réflexions finales

Cette démo n'est qu'un point de départ ! Vous pouvez y ajouter une multitude de fonctionnalités. Par exemple, si vous l'utilisiez en production, vous voudriez créer une fonction permettant de gérer différents utilisateurs (se connecter avec un nom d'utilisateur et un mot de passe, etc.) Vous pourriez également ajouter des fonctionnalités telles que la modification des contacts et l'ajout d'options pour le type d'urgence en cours. Si vous décidez de vous inspirer de cette démo, j'aimerais beaucoup voir ce que vous faites. n'oubliez pas de nous envoyer vos créations sur Twitter. N'oubliez pas non plus de rejoindre la communauté des développeurs de Vonage pour découvrir d'autres contenus et tutoriels géniaux. Vous pouvez suivre Vonage sur Twitter ici et rejoindre notre canal Slack ici. J'espère que vous avez apprécié ce tutoriel ! Merci d'avoir lu !