Hapi.jsとNexmo Messages APIを使ってGlitchでSMSボットを作る

メッセージ メッセージAPIを使用すると、SMS、MMS、いくつかの一般的なソーシャルチャットアプリケーションのような複数のチャネルを介してメッセージを送信するために単一のAPIを利用することができます。受信したメッセージを処理し、メッセージの内容をどうするかを決定し、それに応じて返信を送信することができます。このブログポストでは、数字に関するランダムな事実を教えてくれるシンプルなボットの作り方について説明します。

グリッチは、開発者がサーバーのセットアップに煩わされることなく、アプリのビルドとデプロイをすぐに実行できるオンライン開発者環境です。このプラットフォーム上のアプリはすべてリミックスやパーソナライズが可能で、コードを共有し、仕組みを理解するのに最適な場所となっている。

前提条件

このチュートリアルを始める前に、すでにJavascriptとNode.jsの基本的な理解を持っていると便利です。

GlitchでHapi.jsアプリを起動する

Glitchは常にインターフェースと機能を改善しています。 サインインボタンをクリックし、GithubかFacebookを選択してログインする。

Create a new account on Glitch

その後 新規プロジェクトボタンをクリックする。3つの選択肢があります、 ホームページ, ハローエクスプレスそして hello-sqlite.このチュートリアルでは hello-expressを使用することで、Node.jsとnpmがすでにインストールされた環境が得られるからだ。

Click New Project button to get started

追加のノードパッケージをインストールするには、コマンドラインから コンソールボタンをクリックします。

Click Console button on Glitch status window

をクリックすると、ステータス・ウィンドウを切り替えることができます。 ステータスボタンをクリックすることで切り替えることができる。そこから、bash環境で標準的なCLIコマンドをすべて使うことができる。唯一の違いは、Glitchでは pnpmの代わりに npm.

グリッチの使用 エクスプレスをデフォルトのNode.jsフレームワークとして使用していますが、アプリを Hapi.jsへの変換はそれほど複雑ではない。

Click Status button near the top of the sidebar

削除 expressそして body-parserをプロジェクトから削除する：

以下のコマンドでHapi.jsをインストールする：

コンソールとエディターは自動的に同期しないので、次のコマンドを実行してください。 refreshコマンドを実行して package.jsonコマンドを実行してください。

Status of application shows an error

また、アプリケーションのステータスがエラーを表示していることにも気づくだろう。デフォルトの server.jsファイルがまだ express.

これを修正するには server.jsの内容を次のコードに置き換える：

const Hapi = require('hapi');

// Create a server with a host and port
const server = Hapi.server({
  port: 8000
});

const init = async () => {
  // Add a basic route
  server.route({
    method: 'GET',
    path: '/',
    handler: function(request, h) {
      return 'hello world';
    }
  });
  
  // Start the server
  await server.start();
  console.log('Server running at:', server.info.uri);
};

init();

アプリケーションを表示しようとすると、空白のページに次のような文字が表示されるはずだ。 こんにちは世界.

静的ファイルの提供

メッセージの大部分はサーバー側で処理されるとはいえ、ボット用の基本的なランディングページのようなものがあるといいでしょう。そのためには、ブラウザーからアプリケーションにアクセスしようとしたときに、基本的なHTMLページを提供すればいい。

不活性はhapi.js用の静的ファイルとディレクトリのハンドラープラグインです。以下のコマンドでコンソールからプロジェクトにインストールしてください：

pnpm install inert --save

物事を複雑にしないために、ランディングページに必要なすべてのファイルを publicフォルダに配置します。ファイルを index.htmlファイルを viewsフォルダから publicフォルダに移動させることができます。

Move files into public folder

コンソールからコマンドラインで行うこともできる。

それが終わったら server.jsファイルを修正する。 publicフォルダーから以下のようにファイルを提供する：

const Hapi = require('hapi');
const Path = require('path');
const Inert = require('inert');

// Create a server with a host and port
const server = Hapi.server({
  port: 8000,
  routes: {
    files: {
      relativeTo: Path.join(__dirname, 'public')
    }
  }
});

const init = async () => {
  await server.register(Inert);

  // Add the route
  server.route({
    method: 'GET',
    path: '/{param*}',
    handler: {
      directory: {
        path: '.',
        redirectToSlash: true,
        index: true
      }
    }
  });
  
  // Start the server
  await server.start();
  console.log('Server running at:', server.info.uri);
};

init();

の代わりに hello worldの代わりに、アプリはデフォルトのGlitch index.htmlファイルを提供しているはずだ。このファイルは自由にカスタマイズできる。

Nexmo 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.

This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

API credentials on the dashboard

Glitchアプリに戻って Node.js用Nexmo REST APIクライアントをインストールする：

pnpm install nexmo@beta --save

プロジェクトを更新すると package.jsonはこのようになるはずだ：

Glitch status window

これで自分のボットを作り始める準備ができた。このチュートリアルでは、NumbersAPIを使って、数字に関するランダムな雑学を返すボットを作る方法を説明します。 NumbersAPIという、数字に関する面白い事実を返すAPIを使います。しかし、ボットの応答を生成するために他のAPIを使用することは自由です。

SMSによるメッセージの送受信

バーチャル電話番号の取得

Messages APIを使ってSMSを送受信するには、次のものも必要です。 仮想電話番号これは、物理的な電話回線やデバイスに縛られないことを除けば、標準的な電話番号と同じです。

お好きな国の現地番号、サポートする機能、携帯電話、固定電話、フリーダイヤルなどの番号の種類をお選びいただけます。

Buy numbers

マイナンバーが発行されると、以下のページに表示されます。 あなたのNumbersセクションに表示されます。右端にある鉛筆のアイコンをクリックしてください。 管理列の下にある鉛筆のアイコンをクリックして、受信ウェブフックURLを設定します。これはSMSを受信するために必要です。SMSがあなたの番号に送信されると、このURLにメッセージのペイロードと共にリクエストが送信されます。 POSTリクエストがメッセージのペイロードと共にこのURLに送信されます。

inbound webhook URL

メッセージアプリケーションの作成

次に アプリケーションの作成ページに移動します。 メッセージとディスパッチセクションに移動します。アプリケーション名と、GlitchアプリのURLをホストとするウェブフックURLを入力してください。また、公開鍵と秘密鍵のペアを生成する必要があります。 private.keyファイルをダウンロードするよう促されます。

Generate key

次に、オレンジ色の アプリケーションの作成ボタンをクリックします。次の画面では、バーチャル・ナンバーと申請書をリンクさせることができます。 リンクボタンをクリックします。 管理ボタンをクリックします。

Create application

最後に、外部アカウントをリンクするかどうか尋ねられますが、今はそのままにしておいてください。

Link any external accounts

ファイルを private.keyファイルをGlitchにアップロードし、それを秘密にするには、ファイルを .dataフォルダにファイルを作成することができます。このフォルダの内容は、あなたと、あなたがプロジェクトに追加した信頼できる共同作業者のみが見ることができます。先ほどダウンロードした private.keyの内容をこの新しいファイルにコピーしてください。

Private Key

認証情報の設定

グリッチは 環境変数をサポートしている。 .envファイルを通して環境変数をサポートしています。これは、API認証情報やプロジェクトのその他のプライベートデータを安全に保存する方法です。APIキー、シークレット、Nexmo仮想番号、MessagesアプリケーションID、秘密鍵パスを .envファイルに設定します。

それぞれの値は文字列である必要があるので、必ず引用符で囲んでください。SMSメッセージの送信に使用する新しいNexmoインスタンスを初期化するために、これらの値を参照します。

Set up .env file

API認証情報を server.jsファイルに追加し、新しいNexmoインスタンスを初期化します。

const NEXMO_API_KEY = process.env.NEXMO_API_KEY;
const NEXMO_API_SECRET = process.env.NEXMO_API_SECRET;
const NEXMO_APPLICATION_ID = process.env.NEXMO_APPLICATION_ID;
const NEXMO_APPLICATION_PRIVATE_KEY_PATH = process.env.NEXMO_APPLICATION_PRIVATE_KEY_PATH;
const NEXMO_NUMBER = process.env.NEXMO_NUMBER;

const Nexmo = require('nexmo');

const nexmo = new Nexmo({
  apiKey: NEXMO_API_KEY,
  apiSecret: NEXMO_API_SECRET,
  applicationId: NEXMO_APPLICATION_ID,
  privateKey: NEXMO_APPLICATION_PRIVATE_KEY_PATH
});

受信SMSの受信

着信SMSを受信するには、誰かがバーチャル番号にSMSを送信したときに発生する着信リクエストを処理するルートを追加する必要があります。 POSTリクエストを処理するルートを追加する必要があります。次のルートを server.jsファイルに追加します：

server.route({
  method: 'POST',
  path: '/inbound-sms',
  handler: (request, h) => {
    const payload = request.payload;
    console.log(payload);
    return h.response().code(200); 
  }
});

ここで pathパラメータは、先に設定したバーチャル番号の受信ウェブフックURLと一致しなければならない。すべてが正しく接続されていることを確認するために、バーチャル番号にSMSを送信します。ステータスウィンドウにメッセージのペイロードが表示されるはずです。

Message payload printed in the status window

SMSの送信応答を送信する

次に、メッセージの内容を抽出し、それを使ってランダムなファクトを NumbersAPI.SMSの内容が数字であるかどうかをチェックする関数を書くことができ、そうでない場合は、数字を尋ねる応答を返すことができます。

function parseSms(payload) {
  const message = payload.text;
  const phone = payload.msisdn;
  
  const isNum = /^\d+$/.test(message);
  console.log(isNum);
  
  if (isNum) {
    getFactSms(message, phone);
  } else {
    smsResponse("Sorry, but Numbot can only give you facts about whole numbers. Try something like 42.", phone);
  }
}

という行を console.log(payload)という行を、新しい parseSms()関数の呼び出しに置き換える。メッセージの内容が数値の場合、次の関数を呼び出していることに気づくだろう。 getFactSms().これはNumbers APIを呼び出す関数で、ユーザーにランダムな事実を送り返します。

そのためには、基本的な GETリクエストを行う必要がある。これを実行するライブラリはたくさんありますが、比較的単純なリクエストなので、ネイティブのNode.jsの httpモジュールを使います。

const http = require('http');

function getFactSms(number, phone) {
  return http.get(
    {
      host: 'numbersapi.com',
      path: '/' + number
    },
    function(response) {
      let fact = '';
      response.on('data', function(d) {
        fact += d;
      });
      response.on('end', function() {
        smsResponse(fact, phone);
      });
    }
  );
}

最後の関数 smsResponse()は、ランダムなファクトをユーザに送り返すトリガとなります。

function smsResponse(fact, phone) {
  nexmo.channel.send(
    { "type": "sms", "number": phone },
    { "type": "sms", "number": NEXMO_NUMBER },
    {
      "content": {
        "type": "text",
        "text": fact
      }
    },
    (err, data) => { console.log(data.message_uuid); }
  )
}

これで完了だ。これで基本的なSMSボットができあがり、送信した番号に関するランダムな事実を返信します。