Vonageで家族で立ち上がるアプリを作ろう

はじめに

デイリースタンドアップ：多くのアジャイルソフトウェアエンジニアリングチームが、個人の進捗状況をチームメイトに報告したり、ブロックされている問題を表面化したりする方法として採用している簡単なミーティング。毎日、全員が輪になって立ち、同じ3つの質問に答える：

1. 昨日は何をしたんだっけ？

2. 今日は何をしようか？

3. 自分やチームの目標達成を阻む障害や障害物があるか？

これは業界標準だ。しかし、ここVonageのDevRelチームは分散している。つまり、全員が世界中に住んでいるため、毎日同じ部屋に集まって円陣を組み、日々の進捗や障害、目標を報告することは不可能なのです。そのため、代わりにSlackのチャットボットを使って個々にレポートを共有し、チーム全員が閲覧できるように1つの共有チャンネル#standupに流し込んでいます。

Slack stand up

個々のアップデートをリモートで報告するこの方法は、私たちのチームにとって非常に有効だ。私たちは仕事の始めに各自のアップデートを送信し、他のチームのアップデートを1つの統合された場所で見ることができる。

仕事から家族へ

私の仕事チームは世界中に散らばっているだけでなく、家族も世界中に散らばっている。私はシアトル、両親はシカゴ、弟はフロリダに住んでいる。だから、この "Stand Up "のアイデアを家族にも適用してみたら面白いんじゃないかと思ったんだ！

VonageのMessages APIを使って、全員に毎週の最高値と最低値を1つの統合された場所に報告させ、各自が都合のいいときにいつでも見られるようにすることもできる。

前提条件

このチュートリアルを行うには、Vonageアカウントが必要です。今なら 無料まだアカウントをお持ちでない方は、今すぐ無料でサインアップしてください。また、作業中のプロジェクトにスキップしたい場合は、以下をリミックスすることができます。 ファミリースタンドアップアプリをすぐにGlitchでリミックスできます。そうでなければ、ほんの数ステップでゼロからあなた自身のアプリを作ることができます！

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.

Ready to start building?

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

アプリの作り方

Vonageアカウントの作成

まだの方は、無料でVonageアカウントを作成し、ボーナスとしてアカウントに2ユーロが加算され、新しいアプリケーションを使い始めることができます。にアクセスしてください。 Vonageにアクセスし、サインアップの手続きを行ってください。完了すると、Vonageのダッシュボードになります。

Vonage電話番号の購入

• Vonage Dashboardから、左側のメニュー項目をクリックします。 Numbersメニュー項目をクリックします。

• をクリックしてください。 Buy Numbersをクリックすると、国、機能、タイプ、4桁の番号を選択するページに移動します。

  buy numbers

• 現在お住まいの国を選択してください。機能については Voiceタイプは携帯電話でも固定電話でもかまいません。

• をクリックしてください。 Searchをクリックすると、利用可能な電話番号のリストが表示されます。

• オレンジ色の Buyボタンをクリックし、確認画面が表示されたらオレンジ色の Buyボタンをクリックします。これであなたはVonageの電話番号を所有することになります！次のステップは、アプリケーションを作成することです。

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

Nexmo CLIから：

シェルに以下のコマンドを入力する：

• 必ず your_Glitch_URLを実際のURLに置き換えてください！

よりVonageダッシュボード:

• 左側のメニューから Messagesメニュー項目をクリックします。

• オプションを選択する。 Create an applicationオプションを選択します。新しいVonageアプリケーションをセットアップするページが表示されます。

• 以下の項目をフォームに記入してください：

  • Application nameテキストフィールド入力 Family Stand Up App

  • Status URLテキストフィールドにあなたのGlitch URLを入力してください： https://[your Glitch URL].glitch.me/status

  • Inbound URLテキスト・フィールドにグリッチのURLをもう一度入力してください： https://[your Glitch URL].glitch.me/inbound

• それがすべて入ったら、青い Create Applicationボタンをクリックする。

• 必ず公開鍵と秘密鍵のペアを生成して保存してください。

すべてをリンクさせる

これでVonage番号とMessagesアプリケーションが揃いました。あとはこの2つをリンクさせるだけです。

• メッセージ Family Stand Up Appメッセージアプリケーションで Numbersタブを選択します。 Settings.

• アプリケーションに接続したい電話番号の右側にある Linkボタンをクリックします。

これで新しいVonageメッセージは新しいVonageアプリケーションにリンクされ、最後のステップでアプリケーションを構築する準備が整いました！

デフォルトSMS設定の変更

Vonage Dashboardのお客様の名前の下にある Settingsタブを選択して Default SMS Settingを更新し、ご家族から受信したテキストがStand Upアプリにリンクされるようにします。

default sms setting

Glitchでエクスプレス・アプリを作ろう

を編集する。package.jsonファイル

まず、glitch.comにアクセスして新規プロジェクトを作成し、次のテンプレートを選びます。 hello-expressテンプレートを選択します。

ファイルの中で package.jsonファイルで Add a packageドロップダウンで以下の依存関係を検索し、追加します： dotenvそして node-schedule.

dependencies

のベータ版を使用します。 Vonage手動でこのバージョンを入力する： ^2.5.1-beta-1.

を編集する。.envファイル

ファイルに .envファイルに、先ほどVonage Dashboardで作成したVonage固有の認証情報を入力します：

API_KEY=******
API_SECRET=******
APP_ID=******
PRIVATE_KEY_PATH=.data/private.key
NEXMO_NUMBER=******

API Key、API Secret、App ID、Vonage Numbersを置き換えてください。秘密鍵を含めるには、左上の New Fileを選択し、名前を .data/private.key.そのファイルに、音声アプリケーションを作成した際に生成したプライベートキーを貼り付けます。このファイルは、セキュリティ上の理由からコードをリミックスした場合、Glitch内で見えなくなります。

を編集する。server.jsファイル

依存関係、資格情報、定数変数の設定

ファイルの先頭に server.jsファイルの先頭で、Expressサーバーをセットアップし、依存関係を要求し、Vonage認証情報を埋め込みましょう：

// server.js 
require('dotenv').config();
const express = require('express');
const app = express();
const Nexmo = require('nexmo')
const schedule = require('node-schedule');

// Vonage credentials 
const nexmo = new Nexmo({
  apiKey: process.env.API_KEY,
  apiSecret: process.env.API_SECRET,
  applicationId: process.env.APP_ID,
  privateKey: process.env.PRIVATE_KEY_PATH
});

// array of family members' numbers (be sure to change and include the numbers of your *own* family 
const familyNumbers = [18479623979, 18478402296]
// content of SMS (feel free to personalize!)
const standupText = "It's time for family stand up! What have you been up to this week? What were your highs? What were your lows?"
// Array of messages received 
let messages_received = [];

ノードスケジュールを使って週に1回テキストを送信する

ノードスケジュールは、Node.js 用の柔軟なジョブスケジューラです。特定の日付に実行されるジョブ（任意の関数）を、オプションの再帰ルールでスケジュールすることができます。この RecurrenceRule()のコンセプトで、毎週日曜日の午後5時に送信します。そして、家族の電話番号の配列をマッピングし、変数 standupText変数を渡す。

// server.js 
// node-schedule will call the nexmoSend() function and send the text every Sunday at 5pm 
const rule = new schedule.RecurrenceRule();
rule.dayOfWeek = 0;
rule.hour = 17;
rule.minute = 0;
const scheduler = schedule.scheduleJob(rule, function(){
   // mapping through those numbers and sending them each a text with nexmo 
  familyNumbers.map(number => {
    nexmoSend(number, standupText); 
  });
});

毎週SMSを送信し、立ち上がり報告を求める

Vonageと nexmo.channel.send()関数を利用してみよう。関数に TOと FROM番号、メッセージ本文、エラーを処理するロジックを渡します。

// server.js 
// function to send text with Vonage Messages API 
const nexmoSend = (number, text) => { nexmo.channel.send(
  { "type": "sms", "number": number },
  { "type": "sms", "number": process.env.NEXMO_NUMBER },
  {
    "content": {
      "type": "text",
      "text": text
    }
  },
  (err, data) => { console.log("message_uuid: ", data.message_uuid); }
)};   

家族からのSMSメッセージを受け取る

これで、あなたのVonage番号からスタンドアップSMSを送信するコードが手に入りました。しかし、家族の返事をどうするか？私はメッセージを受信し、Glitch内のアプリのフロントエンドに表示することにした。しかし、ここでは世界はあなたのものだ。すべての相手からの返信を待って、1つのまとまったアップデートにまとめてメッセージを送ることもできる。あるいは MongoDBのようなデータベースを使い、データを保存しておくこともできる。

logging

とりあえず、私が思いついた解決策は、受信したメッセージの番号と実際のテキストの両方を配列にプッシュして、アプリのフロントエンドに送信することだった。そうすれば、メッセージを受信した時点で、そのメッセージが見えるようになる！

front end

// server.js 
// function to receive message responses 
const handleInboundSms = (req, res) => {
  const params = Object.assign(req.query, req.body);

  messages_received.push({
    from: params.msisdn,
    standup_report: params.text
  });
  
  // send messages for family members to see on website 
  app.get('/', (req, res) => {
    res.send(messages_received);
  });
  
  // send OK status
  res.status(204).send();
}

ファイナル・エクスプレス・ピース

最後に、アプリを立ち上げて実行するために必要なExpressコンポーネントを埋めていこう。デバッグのために、アプリがどのポートをリッスンしているかを記録しておこう。

// server.js 
app
.route('/webhooks/inbound-sms')
.get(handleInboundSms)
.post(handleInboundSms)

const listener = app.listen(process.env.PORT, () => {
  console.log('Your express app is listening on port ' + listener.address().port);
});

ヘルプを得る

ご質問やコメント、バグを発見された場合は、ぜひお知らせください！どちらからでも結構です：

• ツイートする私たちは Twitter で @VonageDev

• または VonageコミュニティSlackに参加する

さらに読む

• 開発者向けドキュメントは https://developer.nexmo.com