Google Chat アプリをデバッグする

Node.js

Python

Java

Node.js

• node と npm の最新バージョンがローカル環境にインストールされている。

• 最新バージョンの nodemon がローカル環境にインストールされており、自動再読み込みのために使用されます。

  npm install -g nodemon
  

• メッセージング用に構成された HTTP チャットアプリ。クイックスタート ガイドの前提条件、環境を設定する、アプリを Google Chat に公開するをご覧ください。唯一の違いは、[App name] を Debug App に設定し、[App URL] を http://example.com などに設定する必要があることです。

• デバッグ可能なローカル環境でセットアップされた IDE。説明のため、このガイドでは Visual Studio Code IDE とデフォルトのデバッグ機能を使用しています。

• Git がローカル環境にインストールされている。

• ngrok アカウント。

Python

• 最新バージョンの python3 がローカル環境にインストールされている。
• ローカル環境に最新バージョンの pip と virtualenv がインストールされており、それぞれ Python パッケージと仮想環境の管理に使用されます。
• メッセージング用に構成された HTTP チャットアプリ。クイックスタート ガイドの前提条件、環境を設定する、アプリを Google Chat に公開するをご覧ください。唯一の違いは、[App name] を Debug App に設定し、[App URL] を http://example.com などに設定する必要があることです。
• デバッグ可能なローカル環境でセットアップされた IDE。説明のため、このガイドでは Visual Studio Code IDE とデフォルトのデバッグ機能を使用しています。
• Git がローカル環境にインストールされている。
• ngrok アカウント。
• ローカル環境に最新バージョンの gcloud がインストールされ、初期化されている。

Java

• ローカル環境にインストールされている Java SE 11's JDK の最新の安定版。
• 最新バージョンの Apache Maven がローカル環境にインストールされており、Java プロジェクトの管理に使用されます。
• メッセージング用に構成された HTTP チャットアプリ。クイックスタート ガイドの前提条件、環境を設定する、アプリを Google Chat に公開するをご覧ください。唯一の違いは、[App name] を Debug App に設定し、[App URL] を http://example.com などに設定する必要があることです。
• デバッグ可能なローカル環境でセットアップされた IDE。説明のため、このガイドでは Visual Studio Code IDE とデフォルトのデバッグ機能を使用しています。
• Git がローカル環境にインストールされている。
• ngrok アカウント。
• ローカル環境に最新バージョンの gcloud がインストールされ、初期化されている。

Node.js

1. GitHub からローカル環境に googleworkspace/google-chat-samples リポジトリのクローンを作成します。ここには、実行するアプリケーションのコードが含まれています。

   git clone https://github.com/googleworkspace/google-chat-samples.git
   

2. ローカル環境にインストールされている Visual Studio Code IDE から、次の操作を行います。

   1. 新しいウィンドウで、google-chat-samples/node/basic-app フォルダを開きます。

   2. package.json ファイルに 2 つのスクリプトを追加して、自動再読み込みのデバッグ用にアプリを構成します。

      {
          ...
          "scripts": {
              ...
              "debug": "node --inspect index.js",
              "debug-watch": "nodemon --watch ./ --exec npm run debug"
          }
          ...
      }
      

   3. ルート ディレクトリからアプリケーションをインストールします。

      npm install
      

   4. ルート ディレクトリに .vscode/launch.json ファイルを作成して、スクリプト debug-watch をトリガーする Debug Watch という名前の起動を作成して構成します。

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "node",
              "request": "launch",
              "name": "Debug Watch",
              "cwd": "${workspaceRoot}",
              "runtimeExecutable": "npm",
              "runtimeArgs": ["run-script", "debug-watch"]
          }]
      }
      

   5. index.js ファイルに HTTP リクエストの処理を一時停止するブレークポイントを追加し、以前に追加した Debug Watch 構成で実行とデバッグを開始します。これでアプリケーションが実行され、ポート 9000 で HTTP リクエストをリッスンします。

      

      図 3. アプリケーションは実行されており、ポート 9000 で HTTP リクエストをリッスンしています。

3. ローカル環境で ngrok アプリケーションを起動します。

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   NGROK_STATIC_DOMAIN は、ngrok アカウントの静的ドメインに置き換えます。これで、すべてのリクエストがローカル環境とアプリケーションで使用されるポートにリダイレクトされます。

   

   図 4. ngrok サーバーが実行され、リダイレクトされているターミナル。

4. ウェブ インターフェースも ngrok アプリケーションによって localhost で起動され、ブラウザで開いてすべてのアクティビティをモニタリングできます。

   

   図 5. ngrok アプリケーションがホストするウェブ インターフェース。HTTP リクエストは表示されません。

5. ダイレクト メッセージを送信して Chat アプリをテストします。

   • Google Chat を開きます。

     Google Chat に移動

   • [New chat] add をクリックします。

   • ダイアログで、Chat アプリの名前を入力します。

   • 検索結果で Chat アプリを見つけて、[追加] > [Chat] をクリックします。

   • ダイレクト メッセージ スペースに「Hello」と入力して、enter キーを押します。デバッグ中であるため、チャットアプリは応答しません。

6. ローカル環境の Visual Studio Code では、設定されたブレークポイントで実行が一時停止していることを確認できます。

   

   図 6. 設定されたブレークポイントで実行が一時停止します。

7. Google Chat が Your message : Hello に対する応答を Google Chat がタイムアウトする前に、Visual Studio Code のデバッガから実行を再開すると、

8. HTTP リクエストとレスポンスのログは、ローカル環境の ngrok アプリケーションによってホストされているウェブ インターフェースから確認できます。

   

   図 7. ngrok アプリケーションがホストするウェブ インターフェースからの HTTP リクエスト。

9. アプリの動作を変更するには、Your message を、index.json の Here was your message インライン 35 に置き換えます。ファイルを保存すると、nodemon は更新されたソースコードでアプリケーションを自動的に再読み込みしますが、Visual Studio Code はデバッグモードのままです。

   

   図 8. コードの変更が読み込まれ、ポート 9000 でアプリケーションが実行され、HTTP リクエストをリッスンします。

10. 今回は、スペースで 2 番目のメッセージ Hello を送信する代わりに、ローカル環境の ngrok アプリケーションによってホストされているウェブ インターフェースで最後にログに記録された HTTP リクエストを選択し、Replay をクリックします。前回と同様、Chat アプリはデバッグ中のため応答しません。

11. Visual Studio Code のデバッガから実行を再開すると、ローカル環境の ngrok アプリケーションによってホストされているウェブ インターフェースから、アプリケーションが最新バージョンのメッセージ Here was your message : Hello を含むレスポンスを生成していることがわかります。

Python

1. アプリケーションのデフォルト認証情報に使用する新しいユーザー認証情報を取得します。

   gcloud config set project PROJECT_ID
   gcloud auth application-default login
   

   PROJECT_ID は、アプリの Cloud プロジェクトのプロジェクト ID に置き換えます。

2. GitHub からローカル環境に googleworkspace/google-chat-samples リポジトリのクローンを作成します。このリポジトリにはアプリケーション コードが含まれています。

   git clone https://github.com/googleworkspace/google-chat-samples.git
   

3. ローカル環境にインストールされている Visual Studio Code IDE から、次の操作を行います。

   1. 新しいウィンドウで、google-chat-samples/python/avatar-app フォルダを開きます。

   2. Python env 用の新しい仮想環境を作成し、有効にします。

      virtualenv env
      source env/bin/activate
      

   3. 仮想環境で pip を使用して、すべてのプロジェクトの依存関係をインストールします。

      pip install -r requirements.txt
      

   4. ルート ディレクトリに .vscode/launch.json ファイルを作成し、Debug Watch という名前の起動を構成します。これにより、仮想環境 env のデバッグモードのポート 9000 で、モジュール functions-framework からアプリがトリガーされます。

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "python",
              "request": "launch",
              "name": "Debug Watch",
              "python": "${workspaceFolder}/env/bin/python3",
              "module": "functions_framework",
              "args": [
                  "--target", "hello_chat",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      

   5. main.py ファイルに HTTP リクエストの処理を一時停止するブレークポイントを追加し、以前に追加した Debug Watch 構成で実行とデバッグを開始します。これでアプリケーションが実行され、ポート 9000 で HTTP リクエストをリッスンします。

      

      図 3. アプリケーションは実行されており、ポート 9000 で HTTP リクエストをリッスンしています。

4. ローカル環境で ngrok アプリケーションを起動します。

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   NGROK_STATIC_DOMAIN は、ngrok アカウントの静的ドメインに置き換えます。これで、すべてのリクエストがローカル環境とアプリケーションで使用されるポートにリダイレクトされます。

   

   図 4. ngrok サーバーが実行され、リダイレクトされているターミナル。

5. ウェブ インターフェースも ngrok アプリケーションによって localhost で起動され、ブラウザで開いてすべてのアクティビティをモニタリングできます。

   

   図 5. ngrok アプリケーションがホストするウェブ インターフェース。HTTP リクエストは表示されません。

6. ダイレクト メッセージを送信して Chat アプリをテストします。

   • Google Chat を開きます。

     Google Chat に移動

   • [New chat] add をクリックします。

   • ダイアログで、Chat アプリの名前を入力します。

   • 検索結果で Chat アプリを見つけて、[追加] > [Chat] をクリックします。

   • ダイレクト メッセージ スペースに「Hey!」と入力して、enter キーを押します。デバッグ中であるため、チャットアプリは応答しません。

7. ローカル環境の Visual Studio Code では、設定されたブレークポイントで実行が一時停止していることを確認できます。

   

   図 6. 設定されたブレークポイントで実行が一時停止します。

8. Google Chat がタイムアウトする前に Visual Studio Code のデバッガから実行を再開すると、Chat アプリは、メッセージに名前とアバターの画像を返します。

9. HTTP リクエストとレスポンスのログは、ローカル環境の ngrok アプリケーションによってホストされているウェブ インターフェースから確認できます。

   

   図 7. ngrok アプリケーションがホストするウェブ インターフェースからの HTTP リクエスト。

10. アプリケーションの動作を変更するには、Hello を、main.py ファイルの Hey インライン 51 に置き換えます。ファイルを保存すると、Visual Studio Code はアプリケーションを自動的に更新済みのソースコードで再読み込みし、デバッグモードのままです。

    

    図 8. コードの変更が読み込まれ、ポート 9000 でアプリケーションが実行され、HTTP リクエストをリッスンします。

11. 今回は、スペースで 2 番目のメッセージ Hey! を送信する代わりに、ローカル環境の ngrok アプリケーションによってホストされているウェブ インターフェースで最後にログに記録された HTTP リクエストを選択し、Replay をクリックします。前回と同様、Chat アプリはデバッグ中のため応答しません。

12. Visual Studio Code のデバッガから実行を再開すると、ローカル環境の ngrok アプリケーションによってホストされているウェブ インターフェースから、アプリケーションが最新バージョンのメッセージでレスポンスを生成したことがわかります。

Java

1. アプリケーションのデフォルト認証情報に使用する新しいユーザー認証情報を取得します。

   gcloud config set project PROJECT_ID
   gcloud auth application-default login
   

   PROJECT_ID は、アプリの Cloud プロジェクトのプロジェクト ID に置き換えます。

2. ローカル環境で GitHub から googleworkspace/google-chat-samples リポジトリのクローンを作成します。このリポジトリにはアプリケーション コードが含まれています。

   git clone https://github.com/googleworkspace/google-chat-samples.git
   

3. ローカル環境にインストールされている Visual Studio Code IDE から、次の操作を行います。

   1. 新しいウィンドウで、google-chat-samples/java/avatar-app フォルダを開きます。

   2. pom.xml ファイルに Cloud Functions Framework ビルド プラグイン function-maven-plugin を追加して、ポート 9000 でアプリケーション HelloChat をローカルで実行するように Maven プロジェクトを構成します。

      ...
      <plugin>
          <groupId>com.google.cloud.functions</groupId>
          <artifactId>function-maven-plugin</artifactId>
          <version>0.11.0</version>
          <configuration>
              <functionTarget>HelloChat</functionTarget>
              <port>9000</port>
          </configuration>
      </plugin>
      ...
      

   3. これで、ローカルでデバッグモードで起動できるようになりました。

      mvnDebug function:run
      Preparing to execute Maven in debug mode
      Listening for transport dt_socket at address: 8000
      

   4. ルート ディレクトリにファイル .vscode/launch.json を作成し、ポート 8000 で以前に起動したアプリケーションに接続する Remote Debug Watch という名前の起動を構成します。

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "java",
              "request": "attach",
              "name": "Remote Debug Watch",
              "projectName": "http-function",
              "hostName": "localhost",
              "port": 8000
          }]
      }
      

   5. HelloChat.java ファイルに HTTP リクエストの処理を一時停止するブレークポイントを追加し、以前に追加した Remote Debug Watch 構成でアタッチとデバッグを開始します。これでアプリケーションが実行され、ポート 9000 で HTTP リクエストをリッスンします。

      

      図 3. アプリケーションはポート 9000 で実行され、HTTP リクエストをリッスンしています。

4. ローカル環境で ngrok アプリケーションを起動します。

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   NGROK_STATIC_DOMAIN は、ngrok アカウントの静的ドメインに置き換えます。これで、すべてのリクエストがローカル環境とアプリケーションで使用されるポートにリダイレクトされます。

   

   図 4. ngrok サーバーが実行され、リダイレクトされているターミナル。

5. ウェブ インターフェースも ngrok アプリケーションによって localhost で起動され、ブラウザで開いてすべてのアクティビティをモニタリングできます。

   

   図 5. ngrok アプリケーションがホストするウェブ インターフェース。HTTP リクエストは表示されません。

6. ダイレクト メッセージを送信して Chat アプリをテストします。

   • Google Chat を開きます。

     Google Chat に移動

   • [New chat] add をクリックします。

   • ダイアログで、Chat アプリの名前を入力します。

   • 検索結果で Chat アプリを見つけて、[追加] > [Chat] をクリックします。

   • ダイレクト メッセージ スペースに「Hey!」と入力して、enter キーを押します。デバッグ中であるため、チャットアプリは応答しません。

7. ローカル環境の Visual Studio Code では、設定されたブレークポイントで実行が一時停止していることを確認できます。

   

   図 6. 設定されたブレークポイントで実行が一時停止します。

8. Google Chat がタイムアウトする前に Visual Studio Code のデバッガから実行を再開すると、Chat アプリは、メッセージに名前とアバターの画像を返します。

9. HTTP リクエストとレスポンスのログは、ローカル環境の ngrok アプリケーションによってホストされているウェブ インターフェースから確認できます。

   

   図 7. ngrok アプリケーションがホストするウェブ インターフェースからの HTTP リクエスト。

10. アプリの動作を変更するには、Hello を HelloChat.java ファイルの Hey インライン 55 に置き換え、mvnDebug プロセスを再起動し、Remote Debug Watch を再起動してデバッグを再接続して再起動します。

11. 今回は、スペースで 2 番目のメッセージ Hey! を送信する代わりに、ローカル環境の ngrok アプリケーションによってホストされているウェブ インターフェースで最後にログに記録された HTTP リクエストを選択し、Replay をクリックします。前回と同様、Chat アプリはデバッグ中のため応答しません。

12. Visual Studio Code のデバッガから実行を再開すると、ローカル環境の ngrok アプリケーションによってホストされているウェブ インターフェースから、アプリケーションが最新バージョンのメッセージでレスポンスを生成したことがわかります。