https://d226lax1qjow5r.cloudfront.net/blog/blogposts/create-an-emergency-broadcast-system-with-vonage-node-and-mongodb/emergency-broadcast-system.png

Vonage、Node、MongoDBで緊急放送システムを作る

最終更新日 February 1, 2022
#messages-api
#nodejs
#sms

所要時間：1 分

緊急時には、特にパニックに陥っていると、何事もうまくいかないものだ！緊急事態に陥ったとき、助けが必要なことを適切な人に知らせるという単純なことが、不可能になるかもしれない。今日は、ボタンを1つクリックするだけで、緊急事態の最中であることをテキストで家族に知らせ、位置情報を送信できるウェブアプリを構築することで、この問題を解決します。このウェブサイトは、Node.js、Express、MongoDB、Vonage Messages APIを使って作成します。Nodeは人気のあるウェブサーバーで、Expressは開発者がよく使うフレームワークです。MongoDBはNoSQLデータベースで、Vonage Messages APIを使えば、プログラムによってメッセージ（SMSメッセージなど）を素早く送ることができます。

ウェブ・アプリはこのようになる。

Emergency broadcast web app demo

連絡先を追加して確認し、アラートボタンを押すと、すべての連絡先にSMSメッセージを送信し、あなたの位置と緊急事態であることを知らせることができる。

このプロジェクトのコードはすべて このGitHubリポジトリ.

始める準備はできていますか？緊急放送アプリを作りましょう！

前提条件

このチュートリアルに従うには、Nodeが必要です。 ダウンロードはこちら).また、Vonageアカウントが必要です。 登録はこちらから.また MongoDBアカウント.

MongoDB アカウントを登録したら、MongoDB Atlas データベースをセットアップする必要があります。 MongoDB のドキュメント.

Vonageアカウントを作成したら、いくつかの初期設定を行う必要があります。

このコマンドでVonage CLIをグローバルにインストールします：

npm install @vonage/cli -g

次に、Vonage API キーとシークレットを使って CLI を設定します。この情報は Developer Dashboard で確認できます。

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

プロジェクト用に新しいディレクトリを作成し、そこにCDを入れる：

mkdir my_project
cd my_project

では、CLIを使って次のコマンドでVonageアプリケーションを作成してください：

vonage apps:create

メッセージまでスクロールし、スペースバーをクリックしてエンターキーを押す。電話を受けるには番号が必要です。以下のコマンド（国番号をあなたのコードに置き換える）で番号を借りることができる。例えば、イギリスにいる場合はUSをGBに置き換えてください：

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

その番号をアプリにリンクさせる：

vonage apps:link --number=VONAGE_NUMBER APP_ID

放送システムの構築

まず、このプロジェクトで使用するJavaScriptライブラリを以下のようにインストールする必要がある：

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

次に、プロジェクト内に.envファイルを作成し、以下の変数を追加する：

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

各変数の等号以降を、VonageとMongoDBのアカウント情報で置き換えてください。

という名前のファイルを作成し app.jsという名前のファイルを作成し、これらのライブラリをインポートする：

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

まずは "Hello, World!"Expressアプリを作成することから始めよう。以下がその方法だ：

const app = express()

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

app.listen(process.env.PORT)

さて、コードを次のように実行する：

node app.js

このコードを実行してローカルサーバー (http://127.0.0.1:5000) にアクセスすると、次のように表示されます。 Hello, World!

次に、次のコードを下に追加する。const app = express():

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

このコードは、Express を使って POST リクエストを受け付け、静的ファイルを public.

MongoDB データベースに接続するコードを追加します！このコードをアプリに追加して .envという環境変数を追加します。 MONGO_URLという環境変数を追加します。

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)

上のコードでは Mongoose を使って MongoDB データベースに接続し、連絡先（SMS メッセージを送る相手）のスキーマを作成して Contactsという新しいモデルを作成します。

次に、Vonage messages API を使って SMS メッセージを送信するためのコードを追加します。

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

上記のコードでは、新しいVonageオブジェクトを作成し、APIキー、シークレット、アプリケーションID、アプリのプライベートキーを渡している。

では、エンドポイントをいくつか作ってみよう。次のコードを app.js:

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

に POST リクエストを送ると、このコードは MongoDB に新しいコンタクトを作成し、ユーザーをホームページにリダイレクトします。 /contactsに POST リクエストを送ると、このコードは MongoDB に新しいコンタクトを作成し、ユーザーをホームページにリダイレクトします。

データベースからすべての連絡先を取得するエンドポイントを作成しましょう。以下のコードを app.js:

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

このコードでは、データベースにあるすべての連絡先を取得し、次のようにGETリクエストを送ると、それをJSONとして返します。 /contacts.

では、SMSメッセージを送信するエンドポイントを定義してみよう。次のコードを 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)
                }
            }
        )
    }
})

このエンドポイントは、ユーザーの緯度、経度、SMSメッセージを送信する番号のリストを含むJSONをPOSTリクエストとして受け付けます。

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

そして、連絡先をループし、Vonage Messages APIを使って各番号にメッセージを送る。

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

最後に、ユーザがウェブ・アプリのホームページに移動したときの処理を行うために、ホームページ・エンドポイントを更新しましょう。先ほどのコードを変更してください：

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

これにだ：

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

これで、あなたのホームページは、これから作成するindex.htmlファイルを提供することになる。

index.htmlという新しいファイルを作成し、以下のコードを追加する：

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

上記のHTMLは、人の名前と電話番号を入力し、追加ボタンを押すことができるフォームを作成します。追加ボタンを押すと、フォームはPOSTリクエストを /contactsにPOSTリクエストを送信し、データベースに新しいコンタクトを作成します。このHTMLにはALERTボタンもあります。このHTMLにはALERTボタンもあります。 /alertにPOSTリクエストを送信し、データベース内のすべての連絡先にSMSメッセージを送信します。

最後に、このHTMLにJavaScriptを追加して、ユーザーの連絡先リストを表示し、データを /alert.

HTMLのALERTボタンの後にscriptタグを追加し、dataというオブジェクトを定義します。

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

私たちは dataに送信するデータを /alert.

次に httpPostAsyncを呼び出し ‘/contacts’そして create_contacts:

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

さて、次のように定義する。 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)
    }
}

これはコールバック関数です。 httpPostAsyncが呼び出されます。パラメータとしてcontacts（コンタクトデータ）を受け取ります。まず、この関数は配列を data['contacts'].次に、サーバからのコンタクトをループして各コンタクトを配列に追加し、 各コンタクトの名前を含む新しい HTML divを作成します。

では、次のように定義する必要がある。 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()
}

このコードはURLにGETリクエストを送信し、レスポンスで受け取ったJSONをコールバック関数に渡す。

最後に、ユーザーがALERTボタンをクリックしたときに応答する関数を定義する必要があります。

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

この関数は navigator.geolocationが true. Navigator.geolocationが真かどうかをチェックします。ブラウザのバージョンによってはサポートしていないものもあるので、trueかどうかをチェックする必要があります。もしtrueなら、上の関数は navigator.geolocation.getCurrentPosition(success, error)を呼び出し、2つの関数を渡します。1つはブラウザがユーザーの位置情報の取得に成功した場合の処理で、もう1つはエラー処理です。

この success関数はユーザーの座標を data['coordinates']に追加し /alertに送信します。

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エンドポイントは次に、データベース内のすべての連絡先にSMSメッセージを送信し、送信者の緯度と経度とともに、送信者が困っていることを知らせます。あとは、CSSを使ってアプリをスタイリングするだけだ。publicに style.cssという名前の新しいファイルを作成し、以下のコードを追加します：

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

これで、あなたのウェブサイトのホームページにアクセスすると、冒頭の画像のようなウェブサイトが表示されるはずだ。

自分を連絡先に追加し、アラートを押す。

あなたの経度と緯度を含むテキストを受信し、緊急事態であることを知らせる。

最終的な感想

このデモは出発点に過ぎない！あなたが追加できる機能は山ほどあります。例えば、これを本番で使うのであれば、異なるユーザー（ユーザー名とパスワードでのログインなど）を扱う機能を作りたいでしょう。また、連絡先を編集したり、どのような緊急事態が起こっているかのオプションを追加したりといった機能も追加できるでしょう。もし、このデモをベースにしたものを作ることに決めたら、ぜひ見てみたい。 作ったものをTwitterで送ってください.また、より多くの素晴らしいコンテンツやチュートリアルのためにVonage開発者コミュニティに参加してください。Vonageをフォローする Twitterはこちらそして私たちの Slackチャンネル.このチュートリアルを楽しんでいただけたら幸いです！お読みいただきありがとうございました！

シェア:

https://a.storyblok.com/f/270183/400x394/540f26da70/cory-althoff.png
Cory Althoff元Vonageチームメンバー

コーリー・アルソフはVonageの開発者支援者であり、2冊の著書を持つ：独学プログラマー』と『独学コンピュータ・サイエンティスト』である。The Self-Taught Programmer "はBook Authorityが選ぶ史上最高のプログラミング本のひとつであり、The Next Webは、より優れたソフトウェア・エンジニアになるための10冊の本のひとつに挙げている。 コーリーは妻と娘とともにベイエリアに住んでいる。