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 リクエストをリッスンするようになりました。

      

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

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

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

   

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

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

   

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

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

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

     新しい Google ドキュメントを作成

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

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

   • そこにあるリンクをクリックします。

5. ローカル環境の Visual Studio Code で、設定されたブレークポイントで実行が停止されていることがわかります。

   

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

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

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

   

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

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

   

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

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 ファイルを作成し、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", "create_link_preview",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      

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

      

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

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

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

   

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

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

   

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

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

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

     新しい Google ドキュメントを作成

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

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

   • そこにあるリンクをクリックします。

5. ローカル環境の Visual Studio Code で、設定されたブレークポイントで実行が停止されていることがわかります。

   

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

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

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

   

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

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

   

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

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. pom.xml ファイルに Cloud Functions Framework ビルド プラグイン function-maven-plugin を追加して、ポート 9000 でアプリケーション CreateLinkPreview をローカルで実行するように 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 リクエストをリッスンするようになりました。

      

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

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

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

   

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

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

   

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

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

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

     新しい Google ドキュメントを作成

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

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

   • そこにあるリンクをクリックします。

5. ローカル環境の Visual Studio Code で、設定されたブレークポイントで実行が停止されていることがわかります。

   

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

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

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

   

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

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

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

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