對 Google Chat 應用程式進行偵錯

Node.js

Python

Java

Node.js

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

• 在您的本機環境中nodemon 安裝最新版 nodemon，用於自動重新載入：

  npm install -g nodemon

• 已設定訊息功能的 HTTP Chat 應用程式。您可以按照先決條件、設定環境和將應用程式發布至 Google Chat 的快速入門指南各節操作。唯一不同的是，您需要將「應用程式名稱」設為 Debug App，並將「HTTP 端點網址」設為 http://example.com 等網址。

• 本機環境中設定的 IDE，可進行偵錯。在本指南中，我們使用 Visual Studio Code IDE 和預設的偵錯功能，僅供說明之用。

• Git installed 在本機環境中。

• ngrok 帳戶。

Python

• 本機環境中已安裝最新版 python3。
• 本機環境中安裝的最新版 pip 和 virtualenv，分別用於管理 Python 套件和虛擬環境。
• 已設定訊息功能的 HTTP Chat 應用程式。您可以按照先決條件、設定環境和將應用程式發布至 Google Chat 的快速入門指南各節操作。唯一不同的是，您需要將「應用程式名稱」設為 Debug App，並將「HTTP 端點網址」設為 http://example.com 等網址。
• 本機環境中設定的 IDE，可進行偵錯。在本指南中，我們使用 Visual Studio Code IDE 和預設的偵錯功能，僅供說明之用。
• Git installed 在本機環境中。
• ngrok 帳戶。
• 在您的本機環境中安裝並初始化最新版 gcloud。

Java

• 本機環境中Java SE 11's JDK 安裝的最新穩定版。
• 本機環境中Apache Maven 已安裝最新版本，用於管理 Java 專案。
• 已設定訊息功能的 HTTP Chat 應用程式。您可以按照先決條件、設定環境和將應用程式發布至 Google Chat 的快速入門指南各節操作。唯一不同的是，您需要將「應用程式名稱」設為 Debug App，並將「HTTP 端點網址」設為 http://example.com 等網址。
• 本機環境中設定的 IDE，可進行偵錯。在本指南中，我們使用 Visual Studio Code IDE 和預設的偵錯功能，僅供說明之用。
• Git installed 在本機環境中。
• ngrok 帳戶。
• 在您的本機環境中安裝並初始化最新版 gcloud。

Node.js

1. 從 GitHub 將 googleworkspace/google-chat-samples 存放區複製到本機環境，其中包含要執行的應用程式程式碼：

   git clone https://github.com/googleworkspace/google-chat-samples.git

2. 在您本機環境中安裝的 Visual Studio Code IDE 中，執行下列操作：

   1. 在新視窗中開啟資料夾 google-chat-samples/node/basic-app。

   2. 在 package.json 檔案中新增兩個指令碼，設定應用程式以自動重新載入的方式進行偵錯：

      {
          ...
          "scripts": {
              ...
              "debug": "node --inspect index.js",
              "debug-watch": "nodemon --watch ./ --exec npm run debug"
          }
          ...
      }
      

   3. 從根目錄安裝應用程式：

      npm install

   4. 建立並設定名為 Debug Watch 的啟動程序，方法是在根目錄中建立 .vscode/launch.json 檔案，藉此觸發 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 要求。

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

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

   

   圖 4. 終端機，其中 ngrok 伺服器正在執行並重新導向。

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

   

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

5. 傳送直接訊息給 Chat 應用程式，測試應用程式：

   • 開啟 Google Chat。

     前往 Google Chat

   • 按一下「發起新即時通訊」圖示 add。

   • 在對話方塊中輸入 Chat 應用程式名稱。

   • 在搜尋結果中找到 Chat 應用程式，然後依序點選「新增」>「Chat」。

   • 在即時訊息空間中輸入 Hello，然後按下 enter。您的 Chat 應用程式正在進行偵錯，因此不會回覆。

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

   

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

7. 從偵錯工具繼續執行時，Google Chat 會在 Chat 應用程式回覆 Your message : Hello 前逾時。Visual Studio Code

8. 您可以透過本機環境中 ngrok 應用程式代管的網頁介面，查看 HTTP 要求和回應記錄。

   

   圖 7. 由 ngrok 應用程式代管的網頁介面發出的 HTTP 要求。

9. 如要變更應用程式行為，請將 Your message 替換為 Here was your message，並內嵌 35 的 index.json。儲存檔案時，nodemon 會自動重新載入應用程式，並使用更新後的原始碼，而 Visual Studio Code 仍處於偵錯模式。

   

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

10. 這次您不必在聊天室中傳送第二則訊息 Hello，只要在本地環境中，選取 ngrok 應用程式代管的網頁介面上記錄的最後一筆 HTTP 要求，然後按一下 Replay 即可。與上次相同，由於系統正在積極偵錯，因此 Chat 應用程式不會回覆。

11. 從 Visual Studio Code 的偵錯工具繼續執行時，您可以在本機環境中由 ngrok 應用程式代管的網頁介面中看到，應用程式會產生含有更新版訊息 Here was your message : Hello 的回應。

Python

1. 取得新的使用者憑證，以便用於應用程式預設憑證：

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   將 PROJECT_ID 替換為應用程式的 Cloud 專案專案 ID。

2. 從 GitHub 將 googleworkspace/google-chat-samples 存放區複製到本機環境，其中包含應用程式程式碼：

   git clone https://github.com/googleworkspace/google-chat-samples.git

3. 在您本機環境中安裝的 Visual Studio Code IDE 中，執行下列操作：

   1. 在新視窗中開啟資料夾 google-chat-samples/python/avatar-app。

   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", "avatar_app",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      

   5. 在 main.py 檔案中新增中斷點，暫停處理 HTTP 要求，然後使用先前新增的 Debug Watch 設定開始執行及偵錯。應用程式現已開始執行，並監聽通訊埠 9000 的 HTTP 要求。

      

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

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

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

   

   圖 4. 終端機，其中 ngrok 伺服器正在執行並重新導向。

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

   

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

6. 傳送直接訊息給 Chat 應用程式，測試應用程式：

   • 開啟 Google Chat。

     前往 Google Chat

   • 按一下「發起新即時通訊」圖示 add。

   • 在對話方塊中輸入 Chat 應用程式名稱。

   • 在搜尋結果中找到 Chat 應用程式，然後依序點選「新增」>「Chat」。

   • 在即時訊息空間中輸入 Hey!，然後按下 enter。您的 Chat 應用程式正在進行偵錯，因此不會回覆。

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

   

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

8. 從偵錯工具繼續執行時，Google Chat 會在 Chat 應用程式逾時前，在訊息中回覆您的名稱和顯示圖片。Visual Studio Code

9. 您可以透過本機環境中 ngrok 應用程式代管的網頁介面，查看 HTTP 要求和回應記錄。

   

   圖 7. 由 ngrok 應用程式代管的網頁介面發出的 HTTP 要求。

10. 如要變更應用程式行為，請將 Hello 替換為 Hey 內嵌 51 main.py 檔案。儲存檔案時，Visual Studio Code 會自動重新載入應用程式，並使用更新後的原始碼，同時維持偵錯模式。

    

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

11. 這次您不必在聊天室中傳送第二則訊息 Hey!，只要在本地環境中，選取 ngrok 應用程式代管的網頁介面上記錄的最後一筆 HTTP 要求，然後按一下 Replay 即可。與上次相同，由於系統正在積極偵錯，因此 Chat 應用程式不會回覆。

12. 從 Visual Studio Code 的偵錯工具繼續執行時，您可以在本機環境中由 ngrok 應用程式代管的網頁介面中看到，應用程式會產生含有更新版訊息的回覆。

Java

1. 取得新的使用者憑證，以便用於應用程式預設憑證：

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   將 PROJECT_ID 替換為應用程式的 Cloud 專案專案 ID。

2. 在您的本機環境中，從 GitHub 複製 googleworkspace/google-chat-samples 存放區，其中包含應用程式程式碼：

   git clone https://github.com/googleworkspace/google-chat-samples.git

3. 在您本機環境中安裝的 Visual Studio Code IDE 中，執行下列操作：

   1. 在新視窗中開啟資料夾 google-chat-samples/java/avatar-app。

   2. 在 pom.xml 檔案中新增 Google Cloud Functions Framework 建構外掛程式 function-maven-plugin，將 Maven 專案設定為在本機的 9000 連接埠上執行應用程式 App：

      ...
      <plugin>
          <groupId>com.google.cloud.functions</groupId>
          <artifactId>function-maven-plugin</artifactId>
          <version>0.11.0</version>
          <configuration>
              <functionTarget>App</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. 在 App.java 檔案中新增中斷點，暫停 HTTP 要求處理程序，然後開始附加及偵錯，並使用先前新增的 Remote Debug Watch 設定。應用程式現已開始執行，並監聽通訊埠 9000 的 HTTP 要求。

      

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

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

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

   

   圖 4. 終端機，其中 ngrok 伺服器正在執行並重新導向。

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

   

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

6. 傳送直接訊息給 Chat 應用程式，測試應用程式：

   • 開啟 Google Chat。

     前往 Google Chat

   • 按一下「發起新即時通訊」圖示 add。

   • 在對話方塊中輸入 Chat 應用程式名稱。

   • 在搜尋結果中找到 Chat 應用程式，然後依序點選「新增」>「Chat」。

   • 在即時訊息空間中輸入 Hey!，然後按下 enter。您的 Chat 應用程式正在進行偵錯，因此不會回覆。

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

   

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

8. 從偵錯工具繼續執行時，Google Chat 會在 Chat 應用程式逾時前，在訊息中回覆您的名稱和顯示圖片。Visual Studio Code

9. 您可以透過本機環境中 ngrok 應用程式代管的網頁介面，查看 HTTP 要求和回應記錄。

   

   圖 7. 由 ngrok 應用程式代管的網頁介面發出的 HTTP 要求。

10. 如要變更應用程式行為，請將 Hello 替換為 Hey 內嵌 55 的 App.java 檔案，重新啟動 mvnDebug 程序，然後重新啟動 Remote Debug Watch，重新附加並重新啟動偵錯。

11. 這次您不必在聊天室中傳送第二則訊息 Hey!，只要在本地環境中，選取 ngrok 應用程式代管的網頁介面上記錄的最後一筆 HTTP 要求，然後按一下 Replay 即可。與上次相同，由於系統正在積極偵錯，因此 Chat 應用程式不會回覆。

12. 從 Visual Studio Code 的偵錯工具繼續執行時，您可以在本機環境中由 ngrok 應用程式代管的網頁介面中看到，應用程式會產生含有更新版訊息的回覆。