https://d226lax1qjow5r.cloudfront.net/blog/blogposts/building-github-actions-with-the-vonage-messages-api/github-whatsapp-1200x600.png

Dillion Megida

Dillion Megida is a Software Engineer in Nigeria, who loves building software solutions on the web. He is also a passionate technical writer who loves sharing his knowledge on various web-related topics across various platforms.

Vonage Messages APIでGithubアクションを構築する

最終更新日 February 4, 2021

#messages-api

#github

#whatsapp

所要時間：4 分

チームにとっても個人にとっても、プロジェクトの成長にとってコミュニケーションは非常に重要だ。メンバー間のコミュニケーションだけでなく、プロジェクトとの直接的なコミュニケーションも重要です。アプリケーションのステータスを手作業でチェックするのは骨の折れる作業です。コミュニケーションAPIを使った自動化がもたらすメリットはそこにあります。アプリでイベントが発生すると、テキスト、音声通話、ソーシャルメディア、その他の手段（APIの機能による）で簡単に通知を受けることができる。

GitHub Actions は GitHub の美しい統合機能で、発生した特定のイベントに基づいてアクションをトリガーすることができます。開発者のクリエイティビティ次第で、いろいろな用途に使えます。そのひとつが、Communication API を使ったメッセージの送信です。

この記事では、WhatsApp チャンネルを使って GitHub Actions と Vonage Messages API を組み合わせる方法を説明します。特定のイベントが発生したら、WhatsApp の番号にメッセージを送信します。API でサポートされている他のチャンネルでも練習できます。

必要な知識この記事を最大限に活用するためには、Node.js アプリケーションの作り方や GitHub Actions の仕組みについての知識が必要です。ここでは GitHub Actions 入門の記事をまずご覧ください。

Githubアクションとは

GitHub Actions を使うと、イベントが発生したときに特定のコマンドを実行することができます。他にもさまざまなイベントがあります。.

GitHubアクションは様々な使い方ができます：

プルリクエストでテストを実行する
ブランチ更新後の自動デプロイ
アプリのステータス、問題、プルリクエストを開発者に伝える
もっともっと

Vonage Messages API - WhatsApp チャンネル

Messages APIをご利用いただくと、WhatsAppチャンネル経由でWhatsApp番号にメッセージを送信できます。APIにアクセスするには、Vonage Developerダッシュボードでアカウントを作成する必要があります。その後、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.

Vonage Developer dashboard for setting up a sandbox

次にWhatsAppチャンネルをサンドボックスに追加。WhatsAppアプリケーションへのリンクが表示され、Vonageへ送信可能なメッセージが入力フィールドに表示されます。デフォルトメッセージは様々です。このチュートリアルでは "yamスライスに参加".WhatsApp ウェブアプリのスクリーンショットはこちら：

WhatsApp app after clicking generated link gotten after adding WhatsApp channel to sandbox

メッセージを送信すると、あなたの番号がサンドボックスのホワイトリストに登録されたことを知らせるメッセージが表示されます。これは、あなたがその番号にメッセージを送信できるようになったことを意味します。

さらに番号を追加したい場合は、追加したいWhatsApp番号を使って同じ相手に同じテキストを送信するだけです。

同じページに似たようなことが書いてある：

Example code for using the WhatsApp API

これは、ホワイトリストに登録された番号にメッセージを送信するためにAPIを呼び出す方法を示しています。このPOSTリクエストは

URL: https://messages-sandbox.nexmo.com/v0.1/messages
ユーザー名とパスワードは -uフラグ（スクリーンショットでは意図的に隠されている）。コロンの前の最初のセットはあなたのAPIキーで、2番目のセットはVonageによって生成されたパスワードです。
いくつかのヘッダー
このデータには from(メッセージ送信用にVonageから与えられたWhatsApp番号)、 to(ホワイトリストに登録された受信者)、そして messageプロパティ。

これは、GitHub Actions でメッセージを送信するために使うものです。

次に、GitHub Actions と Vonage Messages API の使用例を見てみましょう。

GithubアクションとWhatsApp APIを組み合わせる

この例では、実行時に "I am a library" を返す npm ライブラリを作成します。とてもシンプルなアプリなので、GitHub Actions と WhatsApp API の連携に注目しましょう。

環境設定

ターミナルを使い、プロジェクトを置きたいディレクトリに移動し、以下を実行する：

mkdir simple-lib: "simple-lib "というディレクトリを作成する。
cd simple-libそのディレクトリに移動するには
npm init -y設定する package.json
touch index.js: index.jsファイルを作成し、そこにライブラリーの実行コードを記述する。

以下のコードを index.js:

function returnPhrase() {
  return "I am a library";
}

module.exports = returnPhrase;

ライブラリーのテスト・スイートをセットアップしたいとしよう。ターミナルで以下のコマンドを実行する：

npm install -D mocha touch test.js

MochaはJavaScriptアプリケーションのためのテストフレームワークです。テスト・スイートを test.jsを以下のコードで実装します：

const assert = require("assert");
const returnPhrase = require(".");

describe("returnPhrase", function () {
  it("should print the right phrase", function () {
    assert.strictEqual(returnPhrase(), "I am a library");
  });
});

で package.jsonで testプロパティを以下の値に編集する：

"scripts": {
  "test": "mocha"
},

ターミナルで npm run testを実行すると

Result of executing test script

を使って Git リポジトリを初期化し git initを使って Git リポジトリを初期化し、変更をコミットしてこの例用に作成した GitHub リポジトリにプッシュします。

WhatsAppメッセージングの導入

GitHub アクションを実行するには アクションランナー.アクションランナーは、使いたい Messages API の実装を提供します。アクションランナーには二つのファイルが必要です：

action.ymlこれは、受け取る入力や出力される変数など、ランナーのスキーマを提供する。
メインファイル dist/index.js) で参照される実際の実装を提供します。 action.yml.

この例では action.ymlファイルを作成する：

name: 'Vonage WhatsApp Action'
description: 'Action to send WhatsApp messages'
runs:
  using: 'node12'
  main: 'dist/index.js'
inputs:
  message:
    description: The message you want to send to the WhatsApp number
    required: true

では whatsapp.jsファイルを作成しよう。 dist/index.js.このファイルには WhatsApp チャンネルを使ったメッセージ送信に必要なコードが含まれています。

以下は whatsapp.jsファイルの内容です：

const core = require("@actions/core");
const { default: axios } = require("axios");

const env = process.env;

const messageFromInput = core.getInput("message");

const messageToSend =
  `${messageFromInput}\n\n` +
  `Repository: ${env.GITHUB_REPOSITORY}\n` +
  `Workflow name: ${env.GITHUB_WORKFLOW}\n` +
  `Job name: ${env.GITHUB_JOB}`;

Const VONAGE_NUMBER = “<Number from Vonage>”
const WHATSAPP_NUMBER = "<A recipient>";
const API_KEY = “<API Key from your dashboard>”
const API_SECRET = “<API Secret from your dashboard>”

(async () => {
  try {
    await axios({
      method: "post",
      url: "https://messages-sandbox.nexmo.com/v0.1/messages",
      auth: {
        username: API_KEY,
        password: API_SECRET,
      },
      data: {
        from: {
          type: "whatsapp",
          number: VONAGE_NUMBER,
        },
        to: {
          type: "whatsapp",
          number: WHATSAPP_NUMBER,
        },
        message: {
          content: {
            type: "text",
            text: messageToSend,
          },
        },
      },
    });
  } catch (error) {
    core.setFailed(error.message);
  }
})();

@actions/coreは、入力を受け取ったり、変数をエクスポートしたり、アクション間でいろいろなことをするための関数をいくつか含むライブラリです。重要なのは、GitHub上のアクションランナーから入力を受け取ることです。インストールが必要なので、実行してください：

npm i --save @actions/core

Axiosは、ネットワーク・リクエストを行うためのプロミス・ベースのHTTPクライアントです。これはPOSTリクエストを行うために使われる。これもインストールが必要なので、実行してください：

npm i --save axios

process.envは、ワークフロー実行中にGitHubが公開する変数を含む環境変数へのアクセスを提供する。例えば、GitHub は GITHUB_REPOSITORY変数は process.env.GITHUB_REPOSITORY. GitHub のデフォルトの環境変数には、他にも次のようなものがあります。.

A message入力を受け取ります (この設定方法は GitHub Actions の設定セクションで説明します)。WhatsAppのホワイトリストに登録されている番号であれば、どんな番号でも使えますが、Vonageは特にこう言っています：

"+"や "00 "は使わず、国番号で始めてください。例えば、447700900000"

その後、投稿要求が行われ、WhatsAppメッセージがその番号に送信される。

Vonageのコード例にあるように、サーバー認証用のユーザー名とパスワードを指定する。Axios では、これは authオブジェクトで行います。 usernameと passwordプロパティ.

上記のように、WhatsAppメッセージはフォームで送信される：

"**TEST FAILED!!**
Repository: <Repository name>
Workflow name: <Workflow name>
Job name: <Job name>"

もう1つパッケージをインストールする必要がある： @vercel/ncc.このパッケージは、Node.jsファイルを1つのファイルにバンドルするために使用します。私たちはこれを使って whatsapp.jsと使用するすべての依存関係を1つのファイルにバンドルします。

以下を追加 package.json:

"scripts": {
  "test": "mocha",
  "build": "ncc build whatsapp.js -o dist"
},

プッシュする前に npm run buildを実行し、whatsapp.jsのすべてを dist/index.js.

Githubアクションの設定

まず workflowsディレクトリを作成する。 .githubこのディレクトリには、アプリに必要なすべてのワークフローが含まれる。

ワークフローの下に "whatsapp-actions.yml "というファイルを作成します。GitHub アクションでは YAML構文を使います。

この例では、新しいコミットがリポジトリにプッシュされ、テストスクリプトが失敗したときに WhatsApp メッセージを送信します。これがワークフローの内容です：

# .github/workflows/whatsApp-actions.yml
name: Whatsapp actions

on: push

jobs:
  run-tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
      - run: npm i
      - run: npm test
      - name: WhatsApp Message
        if: ${{ failure() }}
        uses: dillionmegida/github-actions@master
        with:
          message: "*TEST FAILED*"

先に進む前に、上記の構成を明確に理解しておこう。

name: Whatsapp actions

この nameプロパティはワークフローの名前を指定します。これは、GitHub の actions タブに表示されるものです。

on: push

この onプロパティは、ワークフローをトリガーするイベントを指定する。この例では pushイベントがそれにあたります。つまり、誰かがリポジトリのブランチに変更をプッシュすると、いつでもワークフローが実行されるということです。以下はその他のイベントを使用できます。複数のイベントを指定することもできます。複数のイベント.

jobs:
  run-tests:
    runs-on: ubuntu-latest

この jobsプロパティは、そのワークフローで実行されるジョブを指定する。最初のジョブに run-tests.GitHub では、ワークフローで実行されているすべてのタスクをそれぞれのジョブ名でグループ化してアクションタブに表示します。

次の行(runs-on)は、ワークフローの実行に使用するOSのタイプとバージョンを指定する。

steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
      - run: npm i
      - run: npm test
      - name: WhatsApp Message
        if: ${{ failure() }}
        uses: dillionmegida/github-actions@master
        with:
          message: "*TEST FAILED*"

求人欄の下には「ステップ」がある。この stepsブロックはジョブを構成するタスクの実行を記述する。

最初の2つのステップでは、アクションは "使用する" actions/checkout@v2そして actions/setup-node@v1. actions/checkout@v2はリポジトリをチェックアウトするためのアクションランナーです。これは、ジョブ環境にリポジトリ内のコードへのアクセスを与えるために必要です。 actions/setup-node@v1はNodeをダウンロードするアクションランナーです。これは npmにアクセスできるようになります。

GitHub アクションを作成するための定型文はスターターワークフローリポジトリ.そこにあるように uses: actions/checkout@v2と actions/setup-node@v1はステップセクションでも使われています。を使ってリポジトリにあるコードを実行できるようにするためです。 npm.

実行 npm iを実行すると package.jsonそして npm testスクリプトを実行する。 testスクリプトを実行する。

ワークフローの次のステップは "WhatsApp Message "グループである。これらの行はWhatsAppメッセージのトリガーとなる。 action.yml.このステップでは、次の行に条件 (if: ${{ failure() }})に条件があり、ジョブの前のステップが失敗したときだけ残りのテストが実行されることを示しています。さらにジョブステータスチェック.

WhatsApp メッセージのステップでは、"uses" アクションを使います。 dillionmegida/github-actions@master(同じリポジトリの master ブランチです) を Messages API コード実装のアクションランナーとして使用します。GitHub はこの時点で action.ymlを検索します。

アクションは、アクションランナー(whatsapp.js)に入力を送信します。 withプロパティを使ってアクションランナー（whatsapp.js）に入力を送信します。入力にはキー messageと値 *TEST FAILED*.アスタリスクはWhatsAppがそのテキストを太字にするために追加される。

Githubアクションのテスト

これで全ての設定が完了したので、あとはリポジトリにプッシュしてワークフローを起動するだけだ。その前に、テストが失敗し、WhatsApp メッセージの実装が実行されることを確認する必要がある。

編集 test.jsを以下のように変更した：

assert.strictEqual(returnPhrase(), "I am not a library");

アプリをバンドルし npm run buildを使って)、変更をコミットし、リポジトリにプッシュします。

プッシュすると、ワークフローがトリガーされ、以下のようなエラーが発生する：

Error from running the workflow

エラーの後、次のようなWhatsAppメッセージが表示される：

Screenshot of WhatsApp message sent to a whitelisted number

結論

GitHub Actionsでできることはたくさんありますし、VonageのコミュニケーションAPIを使えばさらに多くのことができます。ViberやFacebook Messengerでもメッセージを送ることができます。

この記事では、GitHub Actions とは何か、GitHub Actions を強力にするいくつかのユーティリティ、そしてリポジトリへのコミット後にテストスクリプトが失敗したときに WhatsApp メッセージを送信するための Vonage Messages API の統合方法について説明しました。