测试和调试 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 文件中添加一个依赖项和两个脚本，以便为本地运行和自动重新加载调试配置应用：

      {
          ...
          "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 上启动 Web 界面。您可以在浏览器中打开该报告，以监控所有活动。

   

4. 使用测试人员账号在新的 Google 文档中预览支持请求网址，以测试您的 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 应用托管的 Web 界面查看 HTTP 请求和响应日志。

   

8. 如需更改应用行为，请将 index.js 的 51 行中的 Case 替换为 Case:。保存文件后，nodemon 会自动使用更新后的源代码重新加载应用，而 Visual Studio Code 会保持调试模式。

   

9. 这次，您不必点击链接并在新 Google 文档中等待几秒钟，而是可以选择本地环境中由 ngrok 应用托管的 Web 界面上记录的最后一个 HTTP 请求，然后点击 Replay。与上次一样，您的 Google Workspace 插件未回复，因为它正在积极进行调试。

10. 从 Visual Studio Code 调试程序恢复执行后，您可以从本地环境中由 ngrok 应用托管的 Web 界面中看到，该应用会生成包含更新版预览卡片的响应。

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 请求。

      

2. 在本地环境中启动 ngrok 应用：

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   将 NGROK_STATIC_DOMAIN 替换为 ngrok 账号中的静态网域。现在，所有请求都会重定向到您的本地环境和应用使用的端口。

   

3. ngrok 应用还会在您的 localhost 上启动一个 Web 界面，您可以在浏览器中打开该界面以监控所有活动。

   

4. 使用测试人员账号在新的 Google 文档中预览支持请求网址，以测试您的 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 应用托管的 Web 界面查看 HTTP 请求和响应日志。

   

8. 如需更改应用行为，请将 main.py 文件的 56 行中的 Case 替换为 Case:。保存文件后，Visual Studio Code 会自动使用更新后的源代码重新加载应用，并保持调试模式。

   

9. 这次，您不必点击链接并在新 Google 文档中等待几秒钟，而是可以选择本地环境中由 ngrok 应用托管的 Web 界面上记录的最后一个 HTTP 请求，然后点击 Replay。与上次一样，您的 Google Workspace 插件未回复，因为它正在积极进行调试。

10. 从 Visual Studio Code 调试程序恢复执行后，您可以从本地环境中由 ngrok 应用托管的 Web 界面中看到，该应用会生成包含更新版预览卡片的响应。

Java

1. 在本地环境中安装的 Visual Studio Code IDE 中，执行以下操作：

   1. 在新窗口中，打开文件夹 add-ons-samples/java/3p-resources。

   2. 将 Cloud Functions 框架构建插件 function-maven-plugin 添加到 pom.xml 文件中，以便将 Maven 项目配置为在本地端口 9000 上运行应用 CreateLinkPreview：

      ...
      <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 文件，并配置一个名为 Remote Debug Watch 的启动，将其附加到之前在端口 8000 上启动的应用：

      {
          "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 上启动一个 Web 界面，您可以在浏览器中打开该界面以监控所有活动。

   

4. 使用测试人员账号在新的 Google 文档中预览支持请求网址，以测试您的 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 应用托管的 Web 界面查看 HTTP 请求和响应日志。

   

8. 如需更改应用行为，请将 CreateLinkPreview.java 文件的 78 行中的 Case 替换为 Case:，重启 mvnDebug 进程，然后重新启动 Remote Debug Watch 以重新附加并重启调试。

9. 这次，您不必点击链接并在新 Google 文档中等待几秒钟，而是可以选择本地环境中由 ngrok 应用托管的 Web 界面上记录的最后一个 HTTP 请求，然后点击 Replay。与上次一样，您的 Google Workspace 插件未回复，因为它正在积极进行调试。

10. 从 Visual Studio Code 调试程序恢复执行后，您可以从本地环境中由 ngrok 应用托管的 Web 界面中看到，该应用会生成包含更新版预览卡片的响应。