https://d226lax1qjow5r.cloudfront.net/blog/blogposts/automated-orders-with-whatsapp-and-node-dr/Blog_WhatsApp_Node-js_1200x600.png

WhatsAppとNode.jsで自動注文を可能にする方法

最終更新日 May 5, 2021

所要時間:1 分

自動化された注文は、次のような方法で顧客と対話できるようにする絶好の機会です。 WhatsApp.短い商品リストであれば、メッセージのやり取りで注文を完了させることも可能です。行列に並んでいる間に注文を済ませることも可能です。また、WhatsAppを利用しているため、SMSでは不統一に表示されるメディアや位置情報などの注文プロセスをいつでも補強することができます。

Node.jsサービスを構築するには、以下をご利用ください。 VonageのWhatsAppサンドボックス.この例では薬局を想定しています。顧客はあなたにメッセージを送ることで、処方箋の再処方可能リストを受け取り、選択した処方箋をテキストで送信して注文することができます。

前提条件

VonageのMessages API Sandboxを使用する利点は、WhatsAppビジネスアカウントがなくてもテストが可能なことです。Nodeをインストールし Vonage デベロッパーアカウントをお持ちであれば、インストール、コピー、貼り付けを行うだけで利用可能です。必要なもの

  • ノードとnpm

  • Expressとボディ・パーサー・ミドルウェア

  • について Vonage Node.jsベータSDK

  • メッセージAPIサンドボックス]でホワイトリストに登録されたWhatsApp使用端末

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.

もっと少ないステップで済ませたいなら グリッチの例をリミックスする.

ノード・アプリケーションの作成

まず、アプリケーション用の新しいディレクトリを作成し、次のコマンドを実行します。 npm initを実行して package.json.で使用するパッケージをインストールする。 npm install express body-parser node@beta -s.そして server.jsファイルを作成し、コーディングを始めよう!

この例のサーバーは、普通のExpress.jsサーバーとよく似ている。 body-parserを使い、ポート3000でリスンしている。Webhook用のエンドポイントと、後述するヘルパー関数をスタブアウトすることができます。それ以外には、サーバーに必要なものはあまりありません:

// init server
const express = require('express');
const app = express();
const bodyParser = require('body-parser');

app.use(express.static('public'));
app.use(bodyParser.json());

// create a Nexmo client

// when someone messages the number linked to this app, this endpoint "answers"
app.post('/answer', function(req, res) {});

// this endpoint receives information about events in the app
app.post('/event', function(req, res) {});

function addOrder(customer, order) {}

app.listen(3000);

テストデータの追加

アプリケーションを実行するには、VonageのAPIに接続するNexmoクライアントを作成するためのAPI認証情報と、いくつかのテストデータが必要です。

Nexmoクライアントは、APIキーとシークレット、アプリケーションID、アプリケーションの秘密鍵で初期化されます。APIキーとシークレットは 入門ページで確認できます。ダッシュボードの アプリケーションページから既存のアプリケーションを使用することもできますし、新規に作成することもできます。Nexmoクライアントに提供する秘密鍵は、鍵そのものでも、それを含むファイルへのパスでもかまいません。

この場合、Nexmoクライアントに重要なオプションを追加します。 apiHostをサンドボックス用に変更します。これにより、WhatsAppビジネスアカウントの代わりにサンドボックスのテスト番号にメッセージを送信することができます:

// create a Nexmo client
const Nexmo = require('nexmo');
const nexmo = new Nexmo({
  apiKey: '12ab3456',
  apiSecret: '12345abcdeFGH',
  applicationId: '12a34b5c-6789-0d12-34e5-6fa789bcde0f',
  privateKey: __dirname + '/private.key' 
}, {
  apiHost: 'messages-sandbox.nexmo.com'
});

処方箋注文システムのモックアップを作るのに、それほど高度なテストデータは必要ない。最も単純な現実のシステムでさえ、何らかのデータストアを使用していることは間違いないが、リレーショナルデータを模倣した配列をいくつかハードコーディングすることができる。ホワイトリストに登録したWhatsApp Numbersの配列と、いくつかの薬の配列を作成する。3番目の prescriptions行列を作成し、配列のインデックスをIDとして使用する。最後に、受信オーダー用に空の配列を残すことができる:

var customers = ['441234567890', '15121234567'];
var medications = ['paracetamol','infant paracetamol','ibuprofen','throat lozenges'];
var prescriptions = [[1,2],[0,1,3]];
var orders = [];

メッセージを聞く

メッセージ メッセージAPIサンドボックスでは、いくつかのウェブフックを設定するオプションがあります。そのためには インバウンドウェブフックが必要です。まだ設定していない場合は、次の形式のエンドポイントを追加します。 https://[YOUR-SERVER]/answer.この例では必須ではありませんが、エンドポイントに ステータスエンドポイントも追加できます。 https://[YOUR-SERVER]/event.

インバウンドメッセージ

サーバーに作成した /answerエンドポイントは、メッセージを送信した番号とメッセージテキストを含むリクエストを受け取ります。番号に関連する顧客インデックスと同様に、これらを格納する変数を宣言します。返信テキスト用の変数も必要でしょう。

ロジックを実行する前に、メッセージの相手が実際にあなたの顧客であるかどうかを確認してください。もしそうであれば、そのメッセージに処方箋を持っている薬のIDが含まれているかどうかを確認することができます。注文がなければ、利用可能な薬のリストを送ることができます。そうでなければ、注文をシステムに追加することができます。

Nexmoクライアントを使ってWhatsAppメッセージを送信できます。送信元番号に from_numberを送信先の番号に、サンドボックスの番号を送信元の番号に、そして生成した返信文に textを入力します。

最後に、メッセージの受信を確認し、返信を終える:

// when someone messages the number linked to this app, this endpoint "answers"
app.post('/answer', function(req, res) {
  var from_number = req.body.from.number;
  var customer = customers.indexOf(from_number);
  var message = req.body.message.content.text;
  var reply;
  
  if (customer > -1) {
    // check to see if this is an order
    var order = parseInt(message);
    if (isNaN(order)) {    
      // if not, list available prescriptions
      reply = 'Available prescriptions:\n' +
          prescriptions[customer].map(p => medications[p] + ' (press ' + p + ')');
    } else {
      reply = addOrder(customer, order);
    }
    
    nexmo.channel.send({
      type: 'whatsapp',
      number: from_number
    }, {
      type: 'whatsapp',
      number: '14151234567'
    }, {
      content: {
        type: 'text',
        text: reply
      }
    }, console.log);
  }
  res.status(204).end();
});

ステータス・メッセージ

この /eventエンドポイントはこの例では何もしませんが、将来必要になったときのために追加しておくとよいでしょう。今のところ必要なのは 2xxステータスを送り返し、レスポンスを終了させるだけです:

// this endpoint receives information about events in the app
app.post('/event', function(req, res) {
  res.status(204).end();
});

注文の追加

テストデータの配列を使っているので、注文の追加はかなり速い。このアプリケーションではエラーチェックは最低限しか行わず、すべてがうまくいったと仮定しています。そのため addOrder関数は短いものですが、実際のデータストアではもっと長くなるでしょう。

まず、顧客が注文を許可されているかどうかを確認します。もし許可されていなければ、エラーの通知を送ります。もし許可されていれば、その注文を orders配列に追加し、注文数だけの注文番号を生成します。この例では、注文は薬局が準備するためにコンソールに表示されます。この関数は、顧客に注文が準備中であることを知らせるメッセージを返します:

function addOrder(customer, order) {
  if (prescriptions[customer].indexOf(order) > -1) {
    orders.push({customer: customer, medication: order});
    var orderNum = orders.length;
    console.log('New order received: order #' + orderNum + ', ' + medications[order]);
    return 'Thank you, you can pick up ' + medications[order] + ' in one hour. ' +
      'Reference order number ' + orderNum + '.';
  } else {
    return 'You don\'t have a prescription matching that number. Please try again.';
  }
}

次のステップ

アプリケーションをテストするには、Nodeでサーバーを起動します。 node server.js.サンドボックスの番号にWhatsAppでメッセージを送ると、処方箋のリストが返信されます。オプションで表示されるIDの一つで再度返信すると、確認が取れるはずです。

テストするときは、コンソールも開いておいてください。薬局側の注文通知がそこに表示されます。

基本的なシステムができたので、もちろんそれを実際のデータやロジックに置き換えることができる。また、テキストだけでなく、メディアや位置情報など、ビジネスに関連するデータを送信することもできます。実際に使えるようになったら WhatsAppビジネスプロフィールを申請し、WhatsApp上で顧客に注文システムをライブ配信することができます。

シェア:

https://a.storyblok.com/f/270183/250x250/f231d97f1b/garann-means.png
Garann Meansデベロッパー・エデュケーター

私はJavaScript開発者で、Vonageの開発者教育者です。長年にわたり、テンプレート、Node.js、プログレッシブ・ウェブ・アプリケーション、そしてオフライン・ファースト戦略に熱中してきましたが、私がいつも本当に愛しているのは、便利できちんと文書化されたAPIです。私の目標は、当社のAPIを使用するお客様の体験を、私がお手伝いできる最高のものにすることです。