MongoDB AtlasでVonage APIを使う - パート3

このシリーズでは

• Part 1 - MongoDBアトラスとは？

• パート2 - ログインでVonage Verifyを使用する

• パート3 - 顧客とのやり取りにVonageを使う

• パート4 - ユーザー認証にAtlasを使う

• パート5 - 通知にVonage In-App Messagingを使う

引き続き MongoDB Atlas と Vonage API の使い方を紹介します。前編 パート1では、MongoDB Atlas がどんなもので、どんなサービスを提供しているのかを見てきました。パート パート2では、MongoDB を使って登録プロセスをバックアップし、Vonage Verify を使ってユーザーセキュリティを強化する方法を、サンプルアプリケーションを見ながら説明しました。パート3では、注文のために顧客に連絡する方法と、顧客がレストランと話す必要があるときに何ができるかを見ていきます。

どうやってやるんだ？

Vonageは、開発者が顧客に接続するためのさまざまな方法を提供しています。 メッセージAPI.このAPIにより、開発者は様々なチャネルを通してエンドユーザーにメッセージを送ることができます。この記事の時点では、VonageはSMS、MMS、WhatsApp、Facebook Messenger、Viberをサポートしていますが、Vonageは継続的にチャネルの追加に取り組んでいます。このチュートリアルではSMSの送信について説明します。SMSは通常、顧客にメッセージを送る最も簡単な方法です。他のチャネルは、より多くのセットアップを必要とし、追加の制限があるかもしれません。

デモでは、ユーザーが注文をすると、注文を受け取ったことを知らせるSMS通知を送信します。将来的にはこれを拡張して、注文の状況や時間内の配達通知も送ることができます。今すぐ、1つのメッセージを送信します。

完璧な世界であれば、それが顧客との最後のやりとりになるはずだが、私たちは皆、世の中がどのように機能しているかを知っている。もし顧客が配送に問題を抱えたらどうなるだろうか？私たちは 私たちはしかし、もし顧客がその問題を私たちに見せてくれたらどうなるだろうか？そこで Vonage Meetings APIは、ビデオアプリケーションを構築することなく、1対1のビデオチャットをセットアップする簡単な方法です。私たちは、顧客にリンクを送信し、事前に構築されたインターフェイスにドロップするためにそれを使用することができます。

テキストの送信

ユーザーがログインすると、ハンバーガーとソーダが売られているのが見えるはずだ。これは何も不思議なことではありません。サーバー上にAPIエンドポイントがあり、利用可能な在庫をすべて照会してJSON blobとして返します。そして、それをVueJSの変数に追加し、表示するようにします。

let inventory = ref(Array());

async function getInventory() {
    await fetch(import.meta.env.VITE_API_URL + '/api/inventory')
        .then(resp => resp.json())
        .then(data => {
            inventory.value = []
            data.forEach((dish: {name: string, price: string}) => {
                inventory.value.push(dish)
            })
        })
        .catch(err => console.log(err));
}

ユーザーがメニューから何かを選択すると、それを ピニア.PiniaはVueJSのプラグインで、異なるビュー間での情報共有を簡単にします。メニューページから注文ページに移動する際に、カートをここに保存します。Piniaは、異なるビュー間での情報共有を容易にするVueJSのプラグインです。

注文を選択して「チェックアウト」をクリックすると、確認ページが表示されます。ここでも、カートストアから情報を取得し、ページに表示するので、特別なことは何もありません。魔法は "注文を送信 "をクリックしたときに起こります。

VueJSのコードは、カートの内容をバックエンドAPIに送信します。 fetch().サーバー側のコードは注文を受け取り、MongoDBの ordersコレクションに保存します。

const { items } = req.body
const bearerToken = req.header('authorization').split(' ')[1]
const decodedToken = jwt.decode(bearerToken);
const userRecord = await client.db('restaurant_pos_demo').collection('users').findOne({ _id: new ObjectId(decodedToken.user_id) });

const orderTime = new Date().toISOString()
const result = await client.db('restaurant_pos_demo').collection('orders').insertOne({
    items, orderTime, status: 0, lastUpdated: orderTime, user_id: userRecord._id
});

リレーショナル・データベースのバックグラウンドをお持ちの方なら、注文から送信された items注文から送信されたものを新しい orderドキュメントに格納する。私たちは、データを非正規化する代わりに、関連するすべてのアイテムと注文情報をこのドキュメントに保存しています。 inventoryコレクションにリンクするためにアイテムIDだけを保存する)。ドキュメントベースのデータベースは、外部キーを使用して他のドキュメントやコレクションを参照する代わりに、必要なすべての情報をドキュメント内に保持します。各ドキュメントがIDを持つので可能ですが、一般的です。

これは、ドキュメント・ベース・データベースの大きな利点のひとつである。ドキュメントの情報はすべてドキュメント内に格納できるため、外部からの検索を減らすことができます。リレーショナル・データベースでは JOINオペランドを使います。しかし MongoDB では、これは 集約パイプライン.

集計パイプラインを使用すると、一連のクエリを使用してドキュメントを選択および操作し、それらの結果を他の集計クエリにパイプすることができます。この例では、注文ドキュメントに在庫情報を格納するだけなので、集約パイプラインは使用しませんが、集約を使用すると非常に複雑なデータ操作を行うことができます。

注文が保存されると、Messages APIを通じてSMSメッセージが送信されます。ここでは Node.js SDKを呼び出すだけです。 vonage.messages.send().SMSオブジェクトにテキストメッセージ、送信先番号、アプリケーションにリンクした番号（パート1で設定し .envファイルにある)。

await vonage.messages.send(
    new SMS(
        'Your order has been submitted',
        userRecord.phone,
        process.env.VONAGE_FROM
    )
);

これだけで、Messages APIを通じてSMSを送信することができます！ほんの数分で、ユーザーの携帯端末にテキストメッセージが届くはずです。

Vonage Messages API vs Vonage SMS API

もし 開発者向けドキュメントをご覧になった方は、SMSメッセージを送信するためのAPIが2つあることにお気づきでしょう。ひとつは先ほど説明した Messages API で、もうひとつは SMS API です。.なぜ同じことのために2つのAPIがあるのでしょうか？

SMS APIはVonageが提供するオリジナルのAPIのひとつで、SMSが唯一のテキストメッセージ・オプションであった時代に構築されました。そのため、"HTTP APIでSMSを送る "という基本的なものだけでなく、SMS APIを使った以下のような、より高度なSMSインタラクションにも対応しています。 SMPPプロトコル(Short Message Peer-to-Peer protocol)のような、より高度なSMSインタラクションのために作られています。SMPPは通信業界のプロトコルで、アプリケーションとVonageのようなプロバイダーとの間でより直接的なメッセージ交換を可能にします。

Messages APIはより日常的なユーザー向けに設計されている。SMS APIの使いやすさをそのままに、MMSやWhatsAppといったより多くのチャネルに拡張している。より一般的な使い方に特化しているため、SMPPへのアクセスはできません。

新しいプロジェクトにはMessages APIを使用することをお勧めします。SMSとメッセージは、以下の制約に従わなければなりません。 SMSとMessagesは、国ごとのSMSの制限に従わなければなりません。特にSMPPのような低レベルのSMS送信が必要でない限り、Messages APIを使う方がよいでしょう。

ヒューストン、問題発生

ユーザーが注文を送信すると、注文状況画面が表示されます。ここには、追加した MongoDB レコードから返された注文番号が表示され、注文項目そのものを表示するように拡張することもできる。顧客がレストランに連絡する方法なので、"Video Call" ボタンを見てみましょう。

エンドユーザーから見ると、このボタンをクリックすると、新しいウィンドウが開いてビデオ通話が始まる。彼らは、素敵なビジュアルテーマ、カメラとマイクのオンとオフを切り替える機能、ビデオ通話に必要なすべての快適さを備えた会議室に入ります。最大の特徴は、デスクトップとモバイルデバイスの両方で、すべての主要なブラウザで動作することです。

Meeting Login Meeting Interface

Meetings APIはこの記事の時点ではまだベータ版だが、設定は驚くほど簡単だ。最初にやることはテーマの設定だ。これは事前に行うことができ、一度だけ行う必要がある。 テーマを作成するを作成することができます。新しいテーマを設定するには、APIを1回呼び出すだけだ。

const privateKey = readFileSync(process.env.VONAGE_PRIVATE_KEY);
const token = tokenGenerate(process.env.VONAGE_APPLICATION_ID, privateKey);
await fetch('https://api-eu.vonage.com/beta/meetings/themes', {
    method: 'POST',
    body: JSON.stringify({
        theme_name: 'Restaurant Theme',
        main_color: '#a05683',
        brand_text: 'Vonage Restaurant',
        short_company_url: 'my-restaurant'
    }),
    headers: {
        'Authorization': 'Bearer ' + token,
        'Content-Type': 'application/json'
    }
})
    .then(resp => resp.json())
    .then((data: any) => {
        res.json(data)
    })
    .catch(err => console.error(err))

SDKは使わないので、ここでは tokenGenerate()メソッドを使用します。 @vonage/jwtのメソッドを使ってJWTトークンを作成し、APIとやり取りします。次に POSTを呼び出す。以下の Meetings APIリファレンスを参照してください。このAPI呼び出しは、デモの後半で使用するテーマIDを返します。

ミーティングIDを取得したら、それをクライアントに送り返し、新しいウィンドウを開くために使用できるようにする。

app.post('/api/website/video-call', async (req, res) => {
    const { orderNumber } = req.body;
    const privateKey = readFileSync(process.env.VONAGE_PRIVATE_KEY);
    const token = tokenGenerate(process.env.VONAGE_APPLICATION_ID, privateKey);

    fetch('https://api-eu.vonage.com/beta/meetings/rooms', {
        method: 'POST',
        body: JSON.stringify({
            display_name: 'Restaurant Demo',
            type: 'instant',
            theme_id: '6ba90e1b-c27a-45e8-9e49-877634c315b0'
        }),
        headers: {
            'Authorization': 'Bearer ' + token,
            'Content-Type': 'application/json'
        }
    })
        .then(resp => resp.json())
        .then(async (data: any) => {
            console.log('guest url: ' + data._links.guest_url.href)
            console.log('host url: ' + data._links.host_url.href)
            const orderRecord = await client.db('restaurant_pos_demo').collection('orders').updateOne({ _id: new ObjectId(orderNumber) }, { $set: { meetingUrl: data._links.host_url.href}})
                .then(async (document) => {
                    res.json({
                        guest_url: data._links.guest_url.href
                    })
                });
        })
        .catch(err => console.error(err))
});

アプリケーションにビデオ会議を追加するために必要なのは、たった1回の API 呼び出しだけです。ビデオ会議室のUIを設定する必要はなく、WebRTC標準を使用しているため、ほとんどのデバイスで動作する。

結論

Verifyの時と同じように、たった一行のコードでアプリケーションにSMS機能を追加することができます。もし既存のアプリケーションがあれば、同じように簡単です。必要なのは @vonage/server-sdkパッケージをインストールし、新しいクライアントを設定し、SMSを送信したい場所にMessages APIを呼び出す行を追加するだけです。

また、ビデオ会議も簡単に追加できました。新しい会議室の作成は API を呼び出すだけで、フロントエンドのコードを一行も書くことなく、フル機能のビデオ通話ができるようになりました。

レストランはどうやってビデオ通話に参加するのか？これについては今後の記事で取り上げる予定だ。次に、MongoDB Atlasのユーザー認証を使って、管理用バックエンドのユーザー認証をAtlasにオフロードする方法を見ていきます。

• Part 1 - MongoDBアトラスとは？

• パート2 - ログインでVonage Verifyを使用する

• パート3 - 顧客とのやり取りにVonageを使う

• パート4 - ユーザー認証にAtlasを使う

• パート5 - 通知にVonage In-App Messagingを使う