測試 HTTP Google Workspace 外掛程式並進行偵錯

Node.js

• 最新版本的 node 和 npm 已安裝 本機環境。

• 在您的本機安裝的最新版 nodemon 用於自動重新載入作業：

  npm install -g nodemon
  

• Google Cloud 專案。 您可以按照這些 必要條件 然後設定 環境 快速入門導覽課程 指南。

• 在本機上偵錯的 Google Workspace 外掛程式程式碼 環境。我們會使用程式碼範例中的預覽連結功能 GitHub 存放區的 3p-resources googleworkspace/add-ons-samples 使用本指南的範例。

• 在本機環境中設定且可進行偵錯的 IDE。我們會使用 Visual Studio Code IDE 及其預設值 中的偵錯功能 本指南。

• ngrok 帳戶。

• 最新版 gcloud 已安裝 並初始化 本機環境。

Python

• 最新版 python3 已安裝 本機環境。
• 最新版本的 pip 和 virtualenv 用於管理 Python 套件和虛擬環境 環境。
• Google Cloud 專案。 您可以按照這些 必要條件 然後設定 環境 快速入門導覽課程 指南。
• 在本機上偵錯的 Google Workspace 外掛程式程式碼 環境。我們會使用程式碼範例中的預覽連結功能 GitHub 存放區的 3p-resources googleworkspace/add-ons-samples 使用本指南的範例。
• 在本機環境中設定且可進行偵錯的 IDE。我們會使用 Visual Studio Code IDE 及其預設值 中的偵錯功能 本指南。
• ngrok 帳戶。
• 最新版 gcloud 已安裝 並初始化 本機環境。

Java

• 最新的 Java SE 11's JDK 穩定版 本機安裝 環境。
• 最新版 Apache Maven 已安裝至本機環境 可用來管理 Java 專案
• Google Cloud 專案。 您可以按照這些 必要條件 然後設定 環境 快速入門導覽課程 指南。
• 在本機上偵錯的 Google Workspace 外掛程式程式碼 環境。我們會使用程式碼範例中的預覽連結功能 GitHub 存放區的 3p-resources googleworkspace/add-ons-samples 使用本指南的範例。
• 在本機環境中設定且可進行偵錯的 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. 建立名為 Debug Watch 的啟動作業並設定觸發條件 debug-watch 指令碼，方法是在.vscode/launch.json 從根目錄進行：

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

   5. 加入中斷點，在 index.js 檔案，然後開始執行 偵錯 已新增 Debug Watch 項設定。應用程式現已 通訊埠 9000 來執行及監聽 HTTP 要求。

      

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

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

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

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

   

   圖 4. 執行並重新導向 ngrok 伺服器的終端機。

3. ngrok 也會在您的 localhost 上啟動網頁介面 應用程式，只要在瀏覽器中開啟應用程式，就能監控所有活動。

   

   圖 5. 由 ngrok 應用程式代管的網頁介面 但沒有 HTTP 要求

4. 在新視窗中顯示案件網址，藉此測試 Google Workspace 外掛程式 使用測試人員帳戶的 Google 文件：

   • 建立新的 Google 文件。

     建立新的 Google 文件

   • 輸入以下連結，然後按下 enter：

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

   • 並按一下連結。

5. 您可以在本機環境的 Visual Studio Code 中，看到 執行作業就會在您設定的中斷點暫停。

   

   圖 6. 執行作業會在您設定的中斷點暫停。

6. 透過 Visual Studio Code 的偵錯工具繼續執行時 Google Workspace 外掛程式逾時之前 在 Google 文件中顯示快取的連結預覽畫面。

7. 您可以從網頁介面查看 HTTP 要求與回應記錄 由本機環境中的 ngrok 應用程式代管。

   

   圖 7. 由 ngrok 應用程式。

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

   

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

9. 這次是不是點選連結 建立新的 Google 文件，您可以選取最近記錄到網路的 HTTP 要求 由本機環境中的 ngrok 應用程式代管的介面 並點選「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 的啟動作業，觸發應用程式的作業 來自偵錯模式通訊埠 9000 的 functions-framework 模組 部署於虛擬環境 env：

      {
          "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 檔案，然後開始執行 偵錯 已新增 Debug Watch 項設定。應用程式現已 通訊埠 9000 來執行及監聽 HTTP 要求。

      

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

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

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

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

   

   圖 4. 執行並重新導向 ngrok 伺服器的終端機。

3. ngrok 也會在您的 localhost 上啟動網頁介面 應用程式，只要在瀏覽器中開啟應用程式，就能監控所有活動。

   

   圖 5. 由 ngrok 應用程式代管的網頁介面 但沒有 HTTP 要求

4. 在新視窗中顯示案件網址，藉此測試 Google Workspace 外掛程式 使用測試人員帳戶的 Google 文件：

   • 建立新的 Google 文件。

     建立新的 Google 文件

   • 輸入以下連結，然後按下 enter：

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

   • 並按一下連結。

5. 您可以在本機環境的 Visual Studio Code 中，看到 執行作業就會在您設定的中斷點暫停。

   

   圖 6. 執行作業會在您設定的中斷點暫停。

6. 透過 Visual Studio Code 的偵錯工具繼續執行時 Google Workspace 外掛程式逾時之前 在 Google 文件中顯示快取的連結預覽畫面。

7. 您可以從網頁介面查看 HTTP 要求與回應記錄 由本機環境中的 ngrok 應用程式代管。

   

   圖 7. 由 ngrok 應用程式。

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

   

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

9. 這次是不是點選連結 建立新的 Google 文件，您可以選取最近記錄到網路的 HTTP 要求 由本機環境中的 ngrok 應用程式代管的介面 並點選「Replay」。與上次一樣的 Google Workspace 外掛程式 則未回覆。

10. 透過 Visual Studio Code 的偵錯工具繼續執行時 您可以從 ngrok 應用程式託管的網頁介面查看 應用程式產生回應的本機環境 更新後的預覽資訊卡

Java

1. 透過安裝在本機環境中的 Visual Studio Code IDE。 ：

   1. 在新視窗中開啟資料夾 add-ons-samples/java/3p-resources。

   2. 設定 Maven 專案以執行應用程式 新增 Cloud Build，以本機通訊埠 9000 上的 CreateLinkPreview 函式架構建構外掛程式 function-maven-plugin pom.xml 檔案：

      ...
      <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 檔案，即可開始附加和 偵錯 已新增 Remote Debug Watch 項設定。申請 現在會在通訊埠 9000 上執行並監聽 HTTP 要求。

      

      圖 3：應用程式正在執行並監聽 HTTP 向通訊埠 9000 發出的要求。

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

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

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

   

   圖 4. 執行並重新導向 ngrok 伺服器的終端機。

3. ngrok 也會在您的 localhost 上啟動網頁介面 應用程式，只要在瀏覽器中開啟應用程式，就能監控所有活動。

   

   圖 5. 由 ngrok 應用程式代管的網頁介面 但沒有 HTTP 要求

4. 在新視窗中顯示案件網址，藉此測試 Google Workspace 外掛程式 使用測試人員帳戶的 Google 文件：

   • 建立新的 Google 文件。

     建立新的 Google 文件

   • 輸入以下連結，然後按下 enter：

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

   • 並按一下連結。

5. 您可以在本機環境的 Visual Studio Code 中，看到 執行作業就會在您設定的中斷點暫停。

   

   圖 6. 執行作業會在您設定的中斷點暫停。

6. 透過 Visual Studio Code 的偵錯工具繼續執行時 Google Workspace 外掛程式逾時之前 在 Google 文件中顯示快取的連結預覽畫面。

7. 您可以從網頁介面查看 HTTP 要求與回應記錄 由本機環境中的 ngrok 應用程式代管。

   

   圖 7. 由 ngrok 應用程式。

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

9. 這次是不是點選連結 建立新的 Google 文件，您可以選取最近記錄到網路的 HTTP 要求 由本機環境中的 ngrok 應用程式代管的介面 並點選「Replay」。與上次一樣的 Google Workspace 外掛程式 則未回覆。

10. 透過 Visual Studio Code 的偵錯工具繼續執行時 您可以從 ngrok 應用程式託管的網頁介面查看 應用程式產生回應的本機環境 更新後的預覽資訊卡