對 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 要求。

      

      圖 3. 應用程式正在執行，並監聽 9000 通訊埠上的 HTTP 要求。

2. 在本機環境中啟動 ngrok 應用程式：

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   將 NGROK_STATIC_DOMAIN 替換為 ngrok 帳戶中的靜態網域。所有要求現在都會重新導向至本機環境，以及應用程式使用的通訊埠。

   

   圖 4. 終端機顯示 ngrok 伺服器執行和重新導向的狀態。

3. ngrok 應用程式也會在本機上啟動網路介面，您可以在瀏覽器中開啟該介面，監控所有活動。

   

   圖 5. ngrok 應用程式代管的網頁介面，未顯示任何 HTTP 要求。

4. 使用測試人員帳戶在新的 Google 文件中預覽個案網址，測試 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. 您可以在本機環境中，透過 ngrok 應用程式代管的網路介面查看 HTTP 要求和回應記錄。

   

   圖 7. 來自 ngrok 應用程式所代管網頁介面的 HTTP 要求。

8. 如要變更應用程式行為，請將 Case 替換為 Case: 內嵌 index.js 的 51。當您儲存檔案時，nodemon 會自動重新載入含有更新後原始碼的應用程式，而 Visual Studio Code 會維持在偵錯模式。

   

   圖 8. 應用程式正在執行，並在載入程式碼變更的 9000 通訊埠上監聽 HTTP 要求。

9. 這次，您可以選取在本地環境中由 ngrok 應用程式代管的網頁介面記錄的最後一個 HTTP 要求，然後按一下 Replay，而不需要在新的 Google 文件中按一下連結，然後等待幾秒鐘。與上次一樣，您的 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 的偵錯模式中，從模組 functions-framework 上的埠 9000 觸發應用程式：

      {
          "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 應用程式也會在本機上啟動網路介面，您可以在瀏覽器中開啟該介面，監控所有活動。

   

   圖 5. ngrok 應用程式代管的網頁介面，未顯示任何 HTTP 要求。

4. 使用測試人員帳戶在新的 Google 文件中預覽個案網址，測試 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. 您可以在本機環境中，透過 ngrok 應用程式代管的網路介面查看 HTTP 要求和回應記錄。

   

   圖 7. 來自 ngrok 應用程式所代管網頁介面的 HTTP 要求。

8. 如要變更應用程式行為，請在 main.py 檔案的 56 中，將 Case 替換為 Case: 內嵌 56。儲存檔案後，Visual Studio Code 會自動重新載入含有更新後原始碼的應用程式，並保持偵錯模式。

   

   圖 8. 應用程式正在執行，並在載入程式碼變更的 9000 通訊埠上監聽 HTTP 要求。

9. 這次，您可以選取在本地環境中由 ngrok 應用程式代管的網頁介面記錄的最後一個 HTTP 要求，然後按一下 Replay，而不需要在新的 Google 文件中按一下連結，然後等待幾秒鐘。與上次一樣，您的 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，藉此設定 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 要求。

      

      圖 3. 應用程式正在執行，並監聽 9000 通訊埠上的 HTTP 要求。

2. 在本機環境中啟動 ngrok 應用程式：

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   將 NGROK_STATIC_DOMAIN 替換為 ngrok 帳戶中的靜態網域。所有要求現在都會重新導向至本機環境，以及應用程式使用的通訊埠。

   

   圖 4. 終端機顯示 ngrok 伺服器執行和重新導向的狀態。

3. ngrok 應用程式也會在本機上啟動網路介面，您可以在瀏覽器中開啟該介面，監控所有活動。

   

   圖 5. ngrok 應用程式代管的網頁介面，未顯示任何 HTTP 要求。

4. 使用測試人員帳戶在新的 Google 文件中預覽個案網址，測試 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. 您可以在本機環境中，透過 ngrok 應用程式代管的網路介面查看 HTTP 要求和回應記錄。

   

   圖 7. 來自 ngrok 應用程式所代管網頁介面的 HTTP 要求。

8. 如要變更應用程式行為，請在 CreateLinkPreview.java 檔案的內嵌 78 中，將 Case 替換為 Case:，重新啟動 mvnDebug 程序，然後重新啟動 Remote Debug Watch，以重新連結並重新啟動偵錯。

9. 這次，您可以選取在本地環境中由 ngrok 應用程式代管的網頁介面記錄的最後一個 HTTP 要求，然後按一下 Replay，而不需要在新的 Google 文件中按一下連結，然後等待幾秒鐘。與上次一樣，你的 Google Workspace 外掛程式正在進行偵錯，因此不會回覆。

10. 從 Visual Studio Code 的偵錯工具恢復執行時，您可以從本機環境中 ngrok 應用程式代管的網頁介面中看到，應用程式會產生回應，其中包含預覽卡的更新版本。