https://d226lax1qjow5r.cloudfront.net/blog/blogposts/build-a-whatsapp-currency-conversion-bot-with-node-js/blog_node-js_whatsapp_1200x600.png

Node.jsでWhatsApp通貨変換ボットを作る

最終更新日 May 11, 2021

所要時間:3 分

このチュートリアルでは、Node.js と Vonage を使って簡単な WhatsApp チャットボット を作成します。このボットは基本通貨単位を希望する通貨単位に変換します。

ボットはVonageの メッセージAPIと共に ExpressとNode Frameworkを使用して構築されます。

これは私がボットとチャットしている例です:

Interacting with the finished bot

前提条件

  • Node.js

  • ングロクを使えば、ローカルのウェブサーバをインターネットに公開することができます。Ngrokでローカル環境をセットアップする方法の詳細については、以下を参照してください。 ドキュメントをご覧ください.

  • WhatsAppビジネスアカウントか、このチュートリアルで説明するMessages APIサンドボックスを設定し、番号をホワイトリスト化する。

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

アプリケーションのセットアップ

リポジトリをローカルマシンにクローンすることから始めます: https://github.com/Dotunj/vonage-whatsapp-bot.

次に cdをプロジェクトのディレクトリに移動し、以下のコマンドを実行してプロジェクトの依存関係をインストールする:

npm install

ボットを作る

ボットがWhatsAppメッセージを受信すると、VonageはエンドポイントにHTTPポストリクエストを送信します。リクエストにはメッセージペイロードが含まれる。

app.post("/webhooks/inbound-message", (req, res) => {
  eventEmitter.emit("inbound-message", req.body);
  return res.send("Received Webhook successfully");
});

上記では /webhooks/inbound-messageでルートを定義しました。 inbound-messageイベントを発行し、Vonage に 200 レスポンスを返します。

Node.js イベント・モジュールには EventEmitterクラスが含まれています。Node.jsでのイベントのハンドリングとディスパッチについては こちら.

eventEmitter.on("inbound-message", (body) => {
  performCurrencyConversion(body).catch((err) => console.log(err));
});

イベントが発生するたびに inbound-messageイベントが発生するたびに eventEmitter.on()メソッドもトリガーされます。この関数はリスナー関数を登録します。 performCurrencyConversion()メソッドを呼び出すだけです。

function standardResponse() {
  let response = "Welcome to the WhatsApp Bot For Currency Conversion \n";
  response += "Please use the following format to chat with the Bot \n";
  response += "Convert 5 USD to CAD \n";
  response +=
    "Where 5 is the number of units to convert, USD is the base currency and CAD is the currency you would like to convert to.";
  return response;
}

この standardResponse関数は、ボットとの通信方法をユーザーに知らせる一般的な応答です。

この performCurrencyConversion()メソッドは、ボットに送られたメッセージの内容を解読し、ユーザーにレスポンスを送り返す役割を担っている。

受信したメッセージの内容は、以下のようにして配列に変換される。 split().私たちが合意したメッセージング・フォーマットに基づくと、配列に含まれるアイテムの数は5でなければならない。

メッセージ内容が配列に分割された後、その配列に含まれる項目が5未満の場合、Botの利用方法を知らせる標準応答がユーザーに返送される。

メッセージ内容の長さチェックが成功すれば、配列の 1 番目、2 番目、4 番目のインデックスに含まれる項目が、単位、基 本通貨、変換したい通貨になると考えてよいでしょう。

Coinbaseで換金する

ベース通貨と変換先の通貨がわかったので、これらの通貨コードが有効で、CoinBaseでサポートされていることを確認します。 コインベース.

Coinbase API は、為替レートと同様に通貨を扱うためのエンドポイントを提供します。詳細は Coinbase API の詳細はこちら.

async function getCurrencyCode(baseCurrency, toCurrency) {
  try {
    const currency = await axios.get(`${coinbaseUrl}/currencies`);
    const currencyCode = currency.data.data;
    const isSupportedCurrencyCodes = currencyCode.filter(
      (c) => c.id === baseCurrency || c.id === toCurrency
    );
    if (isSupportedCurrencyCodes.length < 2) return;
    return isSupportedCurrencyCodes;
  } catch (error) {
    console.error(error);
  }
}

ここで getCurrencyCode()関数の出番である。

を受け入れる。 baseCurrencyと一緒に toCurrencyにAPIコールを行い https://api.coinbase.com/v2/currenciesを呼び出し、サポートされているすべての通貨のリストを取得します。そして baseCurrencytoCurrencyの両方のコードがサポートされている通貨のリスト内にあることを確認します。

そのいずれかが見つからない場合、有効な通貨コードを入力するようユーザーに通知するレスポンスが返送される。

次に、通貨コードを getCurrencyCode()関数で通貨コードを検証した後 getBaseExchangeRate()メソッドが呼び出されます。

async function getBaseExchangeRate(baseCurrency, toCurrency) {
  try {
    const response = await axios.get(
      `${coinbaseUrl}/exchange-rates?currency=${baseCurrency}`
    );
    const rates = response.data.data.rates;
    const baseRate = rates[toCurrency];
    return baseRate;
  } catch (error) {
    console.error(error);
  }
}

このメソッドは baseCurrencyとともに toCurrencyも受け付ける。

APIコールは https://api.coinbase.com/v2/exchange-ratesエンドポイントに baseCurrencyコードを currencyクエリ・パラメータの値としてコードを渡します。

このエンドポイントは、基準通貨1単位のレートを返す。次に、このエンドポイントに相当するレートを返すだけです。 toCurrency.

以下は、USDを引数としてエンドポイントを呼び出して受け取ったレスポンスの例である。 baseCurrency:

"data": {
        "currency": "USD",
        "rates": {
            "AED": "3.673015",
            "AFN": "77.06341",
            "ALGO": "1.5885623510722797",
            "ALL": "104.873298",
            "AMD": "481.616228",
            "ANG": "1.794578",
            "AOA": "589.0",
            "ARS": "73.1365",
            ...

基準レートを求めたら、あとは単位に基準レートをかけて、ユーザーが換算しようとしている通貨と等価な金額を求め、その値を小数点第2位で四捨五入するだけである。その後、為替レートを知らせるレスポンスがユーザーに返送される。

この sendWhatsAppMessage()関数はWhatsApp経由でユーザーにレスポンスを返します。

HTTP POSTリクエストは https://messages-sandbox.nexmo.com/v0.1/messagesエンドポイントに from, tomessageフィールドを指定する。

フィールドは fromフィールドはWhatsApp API Sandbox番号です。この番号の取得方法を説明し、環境変数に追加します。フィールドは toフィールドは最初のメッセージを送信した番号で、メッセージのペイロードから取得する。

APIで認証するために、Vonage API KeyとSecret Keyを指定する。同様に、まもなくこれらの値を取得し、環境変数の一部として追加する。

ングロックのセットアップ

アプリケーションは現在ローカルなので、Botがメッセージを受信するたびに、Vonageが先ほど作成したエンドポイントにPOSTリクエストを送信することはできません。Ngrokを使って一時的な公開URLを設定し、アプリがウェブからアクセスできるようにします。

アプリケーションを起動するには、ターミナルから以下のコマンドを実行する:

node index.js

アプリケーションを起動した状態で、2つ目のターミナル・ウィンドウで以下のコマンドを実行し、ngrokを起動する:

ngrok http 3000

このコマンドでは 3000は、Expressアプリケーションが現在リッスンしているポートを指す。

以下のような画面が表示されます:

Ngrok

これがVonage Webhookを設定するために使用されるので、2番目の転送URLに注意してください。

WhatsApp サンドボックスの設定

今回は Vonage WhatsApp サンドボックス本番環境でAPIを使用するにはWhatsAppの承認が必要です。

Messages API Sandbox にアクセスし、あなたの WhatsApp 番号をホワイトリストに登録してください。

The WhatsApp Sandbox

WhatsApp番号を追加し、メッセージの送受信を開始するには、WhatsAppのQRコードをスキャンするか、リンクをクリックし、入力済みのメッセージを送信して下さい。WhatsAppサンドボックス番号を環境変数に追加します。

次に、同じ画面で、先ほど説明した Ngrok の URL を貼り付けて、Inbound Webhook の URL を設定します。URLの最後に /webhooks/inbound-messageをURLの最後に追加することを忘れないでください。

Webhooks

ダッシュボードの ダッシュボード設定ページで API KeyAPI Secret.

環境変数の追加

Botが必要とするすべての環境変数とその値を記したので、次はそれらをプロジェクトに追加します。プロジェクトのディレクトリのルートから .envファイルを作成し、以下の値を追加します:

VONAGE_API_KEY=xxxx
VONAGE_API_SECRET=xxxx
VONAGE_FROM_NUMBER=xxxx

xxxxを、先に記した実際の値に置き換えることをお忘れなく。

テスト

WhatsAppを使ってスマートフォンからメッセージを送信し、ボットの機能を試すことができます。

結論

このチュートリアルでは、Coinbase が提供する為替レートを使って通貨変換を行う簡単な WhatsApp チャットボットを構築する方法を見てきました。このチュートリアルは、Vonage の Messages API を使って WhatsApp でメッセージを送受信する方法を学ぶためのスタートガイドとして役立ちます。

さらに読むことを薦める:

シェア:

https://a.storyblok.com/f/270183/250x250/d288ec8a73/dotun.png
Dotun Jolaoso

Software Developer who loves building awesome tools and products. I currently work with Laravel, PHP and Vue.