HTTP Google Workspace アドオンをテストしてデバッグする

Node.js

• ローカル環境に node と npm インストールされている こと。

• ローカル環境に nodemon インストールされていること。オートチャージに使用されます。

  npm install -g nodemon

• Google Cloud プロジェクト。クイックスタート ガイドの 前提条件と 環境を設定する の手順に沿って操作してください。

• ローカル環境でデバッグする Google Workspace アドオンのコード。このガイドでは、説明のために GitHub リポジトリ googleworkspace/add-ons-samples のコード例 3p-resourcesのプレビュー リンク機能を使用します。

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

• ngrok アカウント。

• ローカル環境に gcloud 最新バージョンがインストールされ 、初期化されていること。

Python

• ローカル環境に python3 インストールされている こと。
• ローカル環境に pip と virtualenv の最新バージョンがインストールされていること。これらは、それぞれ Python パッケージと仮想環境の管理に使用されます。
• Google Cloud プロジェクト。クイックスタート ガイドの 前提条件と 環境を設定する の手順に沿って操作してください 。
• ローカル環境でデバッグする Google Workspace アドオンのコード。このガイドでは、説明のために GitHub リポジトリ googleworkspace/add-ons-samples のコード例 3p-resourcesのプレビュー リンク機能を使用します。
• デバッグ可能な IDE がローカル環境に設定されていること。このガイドでは、説明のために Visual Studio Code IDE とそのデフォルトの デバッグ機能を使用します。
• ngrok アカウント。
• ローカル環境に gcloud 最新バージョンがインストールされ 、初期化されていること。

Java

• ローカル環境に Java SE 11's JDK がインストールされていること。
• ローカル環境に Apache Maven がインストールされていること。Java プロジェクトの管理に使用されます。
• Google Cloud プロジェクト。クイックスタート ガイドの 前提条件と 環境を設定する の手順に沿って操作してください 。
• ローカル環境でデバッグする Google Workspace アドオンのコード。このガイドでは、説明のために GitHub リポジトリ googleworkspace/add-ons-samples のコード例 3p-resourcesのプレビュー リンク機能を使用します。
• デバッグ可能な IDE がローカル環境に設定されていること。このガイドでは、説明のために Visual Studio Code IDE とそのデフォルトの デバッグ機能を使用します。
• ngrok アカウント。
• ローカル環境に gcloud 最新バージョンがインストールされ 、初期化されていること。

Node.js

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

   1. 新しいウィンドウで、add-ons-samples/node/3p-resources フォルダを開きます。

   2. package.json ファイルに 1 つの依存関係と 2 つのスクリプトを追加して、ローカル実行と自動再読み込みデバッグ用にアプリケーションを構成します。

      {
          ...
          "dependencies": {
            ...
            "@google-cloud/functions-framework": "^3.3.0"
          },
          "scripts": {
              ...
              "start": "npx functions-framework --target=createLinkPreview --port=9000",
              "debug-watch": "nodemon --watch ./ --exec npm start"
          }
          ...
      }
      

   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 リクエストをリッスンします。

      

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

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

   

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

   

4. テスター アカウントを使用して新しい Google ドキュメントでケース URL をプレビューして、Google Workspace アドオンをテストします。

   • Google ドキュメントを作成します。

     Google ドキュメントを作成する

   • 次のリンクを入力して enter キーを押します。

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • リンクをクリックします。

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

   

6. Google Workspace アドオンがタイムアウトする前に Visual Studio Code デバッガから実行を再開すると、Google Workspace アドオンは Google ドキュメントにキャッシュからリンク プレビューを表示します。

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

   

8. アプリケーションの動作を変更するには、index.js の 51 行目の Case を Case: に置き換えます。ファイルを保存すると、nodemon は更新されたソースコードでアプリケーションを自動的に再読み込みし、Visual Studio Code はデバッグモードのままになります。

   

9. 今回は、新しい Google ドキュメントでリンクをクリックして数秒待つ代わりに、ローカル環境の ngrok アプリケーションでホストされているウェブ インターフェースに記録された最後の HTTP リクエストを選択して、Replay をクリックします。前回と同様に、Google Workspace アドオン はアクティブに デバッグされているため、応答しません。

10. Visual Studio Code デバッガから実行を再開すると、ローカル環境の ngrok アプリケーションでホストされているウェブ インターフェースから、アプリケーションが更新されたバージョンのプレビュー カードでレスポンスを生成していることを確認できます。

Python

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

   1. 新しいウィンドウで、add-ons-samples/python/3p-resources/create_link_preview フォルダを開きます。

   2. Python env の仮想環境を作成して有効にします。

      virtualenv env
      source env/bin/activate

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

      pip install -r requirements.txt

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

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

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

      

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

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

   

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

   

4. テスター アカウントを使用して新しい Google ドキュメントでケース URL をプレビューして、Google Workspace アドオンをテストします。

   • Google ドキュメントを作成します。

     Google ドキュメントを作成する

   • 次のリンクを入力して enter キーを押します。

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • リンクをクリックします。

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

   

6. Google Workspace アドオンがタイムアウトする前に Visual Studio Code デバッガから実行を再開すると、Google Workspace アドオンは Google ドキュメントにキャッシュからリンク プレビューを表示します。

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

   

8. アプリケーションの動作を変更するには、main.py ファイルの 56 行目の Case を Case: に置き換えます。ファイルを保存すると、Visual Studio Code は更新されたソースコードでアプリケーションを自動的に再読み込みし、デバッグモードのままになります。

   

9. 今回は、新しい Google ドキュメントでリンクをクリックして数秒待つ代わりに、ローカル環境の ngrok アプリケーションでホストされているウェブ インターフェースに記録された最後の HTTP リクエストを選択して、Replay をクリックします。前回と同様に、Google Workspace アドオン はアクティブに デバッグされているため、応答しません。

10. Visual Studio Code デバッガから実行を再開すると、ローカル環境の ngrok アプリケーションでホストされているウェブ インターフェースから、アプリケーションが更新されたバージョンのプレビュー カードでレスポンスを生成していることを確認できます。

Java

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

   1. 新しいウィンドウで、add-ons-samples/java/3p-resources フォルダを開きます。

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

      ...
      <plugin>
          <groupId>com.google.cloud.functions</groupId>
          <artifactId>function-maven-plugin</artifactId>
          <version>0.11.0</version>
          <configuration>
              <functionTarget>CreateLinkPreview</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. CreateLinkPreview.java ファイルで HTTP リクエスト処理を一時停止するブレークポイントを追加し、先ほど追加した Remote Debug Watch 構成でアタッチと デバッグを開始します。これで、アプリケーションが実行され、ポート 9000 で HTTP リクエストをリッスンします。

      

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

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

   

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

   

4. テスター アカウントを使用して新しい Google ドキュメントでケース URL をプレビューして、Google Workspace アドオンをテストします。

   • Google ドキュメントを作成します。

     Google ドキュメントを作成する

   • 次のリンクを入力して enter キーを押します。

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • リンクをクリックします。

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

   

6. Google Workspace アドオンがタイムアウトする前に Visual Studio Code デバッガから実行を再開すると、Google Workspace アドオンは Google ドキュメントにキャッシュからリンク プレビューを表示します。

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

   

8. アプリケーションの動作を変更するには、Case を Case: に置き換え、CreateLinkPreview.java ファイルの 78 行目の mvnDebug プロセスを再起動し、Remote Debug Watch を再起動して再アタッチし、デバッグを再開します。

9. 今回は、新しい Google ドキュメントでリンクをクリックして数秒待つ代わりに、ローカル環境の ngrok アプリケーションでホストされているウェブ インターフェースに記録された最後の HTTP リクエストを選択して、Replay をクリックします。前回と同様に、Google Workspace アドオン はアクティブに デバッグされているため、応答しません。

10. Visual Studio Code デバッガから実行を再開すると、ローカル環境の ngrok アプリケーションでホストされているウェブ インターフェースから、アプリケーションが更新されたバージョンのプレビュー カードでレスポンスを生成していることを確認できます。