https://a.storyblok.com/f/270183/139315/e0e4adb096/nexmo-typeform-sms.png

Node.jsとMessages APIを使ってTypeformが送信されたらSMSを送る

最終更新日 May 4, 2021

所要時間:4 分

このチュートリアルでは、SMSを送信する方法について説明します。 タイプフォームが送信されたときに Nexmo Messages APIとNode.jsフレームワーク Hapi.

この例では、Typeformに接続できるWebhookを作成し、誰かがフォームを完了したときに通知するようにします。Nexmo Messages API を使用して、日付と回答を表示するためのリンクを含む SMS メッセージを送信します。

このコードは からダウンロードできます。リポジトリからダウンロードできます。

前提条件

これを実行するにはアカウントを作成する必要があるので、以下の設定をしておくこと:

この例のコードは Node.jshapi フレームワーク.Node.jsのバージョン8.9.0以上で動作します。

Nodeのバージョンは、コマンドラインで node -vをコマンドラインで実行することで確認できる。8.9.0以上であれば問題ありません。そうでない場合は、古いバージョンのhapiを使ってください。

スケルトン・アプリケーションの作成

Typeformから受信したWebhookを受け取るには、少なくとも1つの POSTルートを持つアプリケーションをセットアップする必要があります。まずは基本的なアプリケーションを POSTルートを持つ基本的なアプリケーションを構築することから始めます。

新しいフォルダで、以下を実行して新しいNode.jsアプリケーションを起動する。

npm init -y

次に、プロジェクトの依存関係をインストールする:

npm i hapi nexmo@beta

hapiサーバーを作成する

ハピは設定中心のシンプルなフレームワークです。開発者はインフラ構築に時間を費やす代わりに、再利用可能なアプリケーション・ロジックを書くことに集中できる。入力検証、キャッシュ、認証、その他ウェブやサービス・アプリケーションを構築するのに不可欠な機能が組み込まれているので、気に入っている。

アプリケーションのメイン・ファイルを作成するには、ルート・ディレクトリにある index.js.これがWebhookサーバーになります。

この新しいファイルに、以下のコードを追加する:

const Hapi = require('hapi');

// create the hapi server and listen on port 3000
const server = Hapi.server({
  port: 3000,
  host: 'localhost'
});

// create a POST route for http://localhost:3000/
server.route({
  method: 'POST',
  path: '/',
  handler: (request, h) => {

    // return a 200 OK HTTP status code
    return h.response().code(200)
  }
});

// initialize the server using async/await
const init = async () => {
  await server.start();
  console.log(`Server running at: ${server.info.uri}`);
};

// log any error and exit
process.on('unhandledRejection', (err) => {
  console.log(err);
  process.exit(1);
});

// run the server
init();

メッセージ&ディスパッチ・アプリケーションの作成

新しいメッセージ&ディスパッチアプリケーションを Nexmoダッシュボード.

このブログ記事の目的には、インバウンドやステータスのウェブフックは必要ないので、これらのフィールドに http://example.comを使うことができます。

Create an applicationCreate Application

をクリックすることも忘れないでください。 公開鍵/秘密鍵ペアの生成リンクをクリックしてください。これにより private.key.

システム上の private.keyファイルを探し、アプリケーションのルート・フォルダーに移動します。

アプリのセットアップを完了するには アプリケーションの作成ボタンをクリックして、アプリのセットアップを完了します。

アプリケーションIDを控えておいてください。次のステップで必要になります。

Messages APIを使用してSMSを送信する。

このブログ記事の最後の部分は、Typeformが作成したリクエストを受け取り、そのデータを含むSMSメッセージを送信することである。

メッセージ メッセージAPIがすべて処理してくれる。私たちは Nexmo Node JS クライアントライブラリを使ってSMSを送信します。

スケルトン・アプリケーションを作成したときに、ライブラリをインストールしたはずだ。 index.jsファイルでそれをrequireし Nexmoインスタンスを初期化する必要があります。 private.keyメッセージ&ディスパッチアプリケーションを作成したときにダウンロードしたライブラリへのパスです。

の一番上に index.jsを置き換えて NEXMO_API_KEY, NEXMO_API_SECRET, NEXMO_APPLICATION_IDそして NEXMO_APPLICATION_PRIVATE_KEY_PATHを自分の認証情報に置き換えてください:

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

また、作成したルートハンドラを更新し、Typeformが送信されたときにSMSメッセージを送信するようにします。忘れずに YOUR_NUMBERをあなたの電話番号に置き換えてください。先頭の +または 00電話番号を入力するときは、447700900000のように国番号から始めます:

server.route({
  method: 'POST',
  path: '/',
  handler: (request, h) => {
    nexmo.channel.send(
      { "type": "sms", "number": "YOUR_NUMBER" },
      { "type": "sms", "number": "NEXMO" },
      {
        "content": {
          "type": "text",
          "text": `New submission in Typeform ${request.payload.form_response.definition.title} on ${new Date(request.payload.form_response.submitted_at).toDateString()}. You can view it at https://admin.typeform.com/form/${request.payload.form_response.form_id}/results#responses`
        }
      },
      (err, data) => { console.log(data.message_uuid); }
    );

    return h.response().code(200)
  }
});

この状態で、以下のコマンドを実行してサーバーを立ち上げる:

node index.js

アプリは港で起動する 3000.

Ngrokを使ってこのポートを世界に開き、生成されたURLをメモしておこう。

Ngrok outputngrok output

Ngrokの便利な使い方をご紹介します。を使ったことがない方は、こちらをご覧ください。

TLDR?以下のコマンドを実行すれば、(インストールされていれば)Ngrokを起動できる:

ngrok http 3000

WebhookをTypeformに接続する

Webhookが完成したので、次はそれをTypeformに接続しましょう。TypeformとWebhookを接続する方法については、Typeformのヘルプを参照してください。 WebhookをTypeformに接続する方法.typeformガイドの接続先URLはpastebinではなく、上記のコマンドで取得したngrokのURLを使ってください。

をクリックするとすぐに Test Webhookをクリックするとすぐに、詳細が記載されたSMSメッセージが届きます。

typeform webhookWebhook

結論

私たちは hapi サーバーを使って Typeform に接続された Webhook をセットアップし、ユーザーがフォームに入力するたびに Nexmo Messages API を使って SMS メッセージを送信しています。さらに、フォームの各レスポンスを SMS で送信したり、あるいは Facebookメッセンジャーを使うこともできます。

NexmoのAPIをもっと使いこなしたいとお考えの方は、こちらをご覧ください:

シェア:

https://a.storyblok.com/f/270183/384x384/dabe7c5397/laka.png
Alex Lakatosヴォネージの卒業生

Alex Lakatos は Nexmo の JavaScript デベロッパーアドボケイトです。余暇には Mozilla で Tech Speaker や Reps Mentor としてボランティアをしている。オープンウェブでJavaScriptを開発する彼は、日々その限界を押し広げている。ロンドンでプログラミングをしていないときは、世界中を旅するのが好きなので、空港のラウンジでばったり会うこともある。