Gỡ lỗi ứng dụng Google Chat

Node.js

Python

Java

Node.js

• Phiên bản mới nhất của node và npm đã cài đặt trong môi trường cục bộ.

• Phiên bản mới nhất của nodemon đã cài đặt trong môi trường cục bộ của bạn, được dùng cho mục đích tải lại tự động:

  npm install -g nodemon

• Một ứng dụng Chat HTTP được định cấu hình để nhắn tin. Bạn có thể làm theo các phần Điều kiện tiên quyết, Thiết lập môi trường và Phát hành ứng dụng lên Google Chat trong Hướng dẫn bắt đầu nhanh. Điểm khác biệt duy nhất là bạn cần đặt Tên ứng dụng thành Debug App và URL điểm cuối HTTP thành bất kỳ giá trị nào, chẳng hạn như http://example.com.

• Một IDE được thiết lập trong môi trường cục bộ có thể gỡ lỗi. Chúng tôi sử dụng Visual Studio CodeIDE và các tính năng gỡ lỗi mặc định của IDE trong hướng dẫn này cho mục đích minh hoạ.

• Git đã cài đặt trong môi trường cục bộ.

• Tài khoản ngrok.

Python

• Phiên bản mới nhất của python3 được cài đặt trong môi trường cục bộ của bạn.
• Phiên bản mới nhất của pip và virtualenv được cài đặt trong môi trường cục bộ của bạn, chúng được dùng để quản lý các gói Python và môi trường ảo tương ứng.
• Một ứng dụng Chat HTTP được định cấu hình để nhắn tin. Bạn có thể làm theo các phần Điều kiện tiên quyết, Thiết lập môi trường và Phát hành ứng dụng lên Google Chat trong Hướng dẫn bắt đầu nhanh. Điểm khác biệt duy nhất là bạn cần đặt Tên ứng dụng thành Debug App và URL điểm cuối HTTP thành bất kỳ giá trị nào, chẳng hạn như http://example.com.
• Một IDE được thiết lập trong môi trường cục bộ có thể gỡ lỗi. Chúng tôi sử dụng Visual Studio CodeIDE và các tính năng gỡ lỗi mặc định của IDE trong hướng dẫn này cho mục đích minh hoạ.
• Git đã cài đặt trong môi trường cục bộ.
• Tài khoản ngrok.
• Phiên bản mới nhất của gcloud được cài đặt và khởi chạy trong môi trường cục bộ của bạn.

Java

• Phiên bản ổn định mới nhất của Java SE 11's JDK đã cài đặt trong môi trường cục bộ.
• Phiên bản mới nhất của Apache Maven đã cài đặt trong môi trường cục bộ của bạn, được dùng để quản lý các dự án Java.
• Một ứng dụng Chat HTTP được định cấu hình để nhắn tin. Bạn có thể làm theo các phần Điều kiện tiên quyết, Thiết lập môi trường và Phát hành ứng dụng lên Google Chat trong Hướng dẫn bắt đầu nhanh. Điểm khác biệt duy nhất là bạn cần đặt Tên ứng dụng thành Debug App và URL điểm cuối HTTP thành bất kỳ giá trị nào, chẳng hạn như http://example.com.
• Một IDE được thiết lập trong môi trường cục bộ có thể gỡ lỗi. Chúng tôi sử dụng Visual Studio CodeIDE và các tính năng gỡ lỗi mặc định của IDE trong hướng dẫn này cho mục đích minh hoạ.
• Git đã cài đặt trong môi trường cục bộ.
• Tài khoản ngrok.
• Phiên bản mới nhất của gcloud được cài đặt và khởi chạy trong môi trường cục bộ của bạn.

Node.js

1. Sao chép kho lưu trữ googleworkspace/google-chat-samples trên GitHub vào môi trường cục bộ của bạn. Kho lưu trữ này chứa mã của ứng dụng cần thực thi:

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

2. Từ IDE Visual Studio Code được cài đặt trong môi trường cục bộ, hãy làm như sau:

   1. Trong một cửa sổ mới, hãy mở thư mục google-chat-samples/node/basic-app.

   2. Định cấu hình ứng dụng để gỡ lỗi tự động tải lại bằng cách thêm 2 tập lệnh vào tệp package.json:

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

   3. Từ thư mục gốc, hãy cài đặt ứng dụng:

      npm install

   4. Tạo và định cấu hình một lần khởi chạy có tên Debug Watch để kích hoạt tập lệnh debug-watch bằng cách tạo tệp .vscode/launch.json trong thư mục gốc:

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

   5. Thêm một điểm ngắt để tạm dừng quá trình xử lý yêu cầu HTTP trong tệp index.js, rồi bắt đầu chạy và gỡ lỗi bằng cấu hình Debug Watch đã thêm trước đó. Giờ đây, ứng dụng đang chạy và chờ các yêu cầu HTTP trên cổng 9000.

      

      Hình 3. Ứng dụng đang chạy và chờ các yêu cầu HTTP trên cổng 9000.

3. Khởi chạy ứng dụng ngrok trong môi trường cục bộ:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   Thay thế NGROK_STATIC_DOMAIN bằng miền tĩnh trong tài khoản ngrok của bạn. Tất cả yêu cầu hiện được chuyển hướng đến môi trường cục bộ và cổng mà ứng dụng sử dụng.

   

   Hình 4. Thiết bị đầu cuối có máy chủ ngrok đang chạy và chuyển hướng.

4. Giao diện web cũng được ứng dụng ngrok khởi động trên máy chủ cục bộ của bạn, bạn có thể theo dõi tất cả hoạt động bằng cách mở giao diện này trong trình duyệt.

   

   Hình 5. Giao diện web do ứng dụng ngrok lưu trữ không hiển thị yêu cầu HTTP.

5. Kiểm thử ứng dụng Chat bằng cách gửi tin nhắn trực tiếp cho ứng dụng:

   • Mở Google Chat.

     Chuyển đến Google Chat

   • Nhấp vào biểu tượng Cuộc trò chuyện mới add.

   • Trong hộp thoại, hãy nhập tên của ứng dụng Chat.

   • Trong kết quả tìm kiếm, hãy tìm ứng dụng Chat của bạn, nhấp vào Thêm > Chat.

   • Trong không gian tin nhắn trực tiếp, hãy nhập Hello rồi nhấn enter. Ứng dụng Chat của bạn không trả lời vì đang được gỡ lỗi tích cực.

6. Trong Visual Studio Code trong môi trường cục bộ, bạn có thể thấy rằng quá trình thực thi bị tạm dừng tại điểm ngắt đã được đặt.

   

   Hình 6. Quá trình thực thi sẽ tạm dừng tại điểm ngắt đã được đặt.

7. Khi bạn tiếp tục thực thi từ trình gỡ lỗi của Visual Studio Code trước khi Google Chat hết thời gian chờ, ứng dụng Chat sẽ trả lời Your message : Hello.

8. Bạn có thể kiểm tra nhật ký yêu cầu và phản hồi HTTP từ giao diện web do ứng dụng ngrok lưu trữ trong môi trường cục bộ.

   

   Hình 7. Yêu cầu HTTP từ giao diện web do ứng dụng ngrok lưu trữ.

9. Để thay đổi hành vi của ứng dụng, hãy thay thế Your message bằng Here was your message trong dòng 35 của index.json. Khi bạn lưu tệp, nodemon sẽ tự động tải lại ứng dụng bằng mã nguồn đã cập nhật và Visual Studio Code vẫn ở chế độ gỡ lỗi.

   

   Hình 8. Ứng dụng đang chạy và chờ các yêu cầu HTTP trên cổng 9000 với nội dung thay đổi mã được tải.

10. Lần này, thay vì gửi thông báo thứ hai Hello trong không gian, bạn có thể chọn yêu cầu HTTP cuối cùng được ghi lại trên giao diện web do ứng dụng ngrok lưu trữ trong môi trường cục bộ của bạn rồi nhấp vào Replay. Tương tự như lần trước, ứng dụng Chat của bạn không trả lời vì đang được gỡ lỗi.

11. Khi tiếp tục thực thi từ trình gỡ lỗi của Visual Studio Code, bạn có thể thấy từ giao diện web do ứng dụng ngrok lưu trữ trong môi trường cục bộ rằng ứng dụng này tạo ra một phản hồi bằng phiên bản cập nhật của thông báo Here was your message : Hello.

Python

1. Lấy thông tin đăng nhập mới của người dùng để sử dụng cho Thông tin đăng nhập mặc định của ứng dụng:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   Thay thế PROJECT_ID bằng mã dự án cho dự án trên Đám mây của ứng dụng.

2. Sao chép kho lưu trữ googleworkspace/google-chat-samples từ GitHub vào môi trường cục bộ của bạn. Kho lưu trữ này chứa mã ứng dụng:

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

3. Từ IDE Visual Studio Code được cài đặt trong môi trường cục bộ, hãy làm như sau:

   1. Trong một cửa sổ mới, hãy mở thư mục google-chat-samples/python/avatar-app.

   2. Tạo một môi trường ảo mới cho Python env và kích hoạt môi trường đó:

      virtualenv env
      source env/bin/activate

   3. Cài đặt tất cả các phần phụ thuộc của dự án bằng cách sử dụng pip trong môi trường ảo:

      pip install -r requirements.txt

   4. Tạo tệp .vscode/launch.json trong thư mục gốc và định cấu hình một lần chạy có tên Debug Watch để kích hoạt ứng dụng từ mô-đun functions-framework trên cổng 9000 ở chế độ gỡ lỗi trên môi trường ảo env:

      {
          "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. Thêm một điểm ngắt để tạm dừng quá trình xử lý yêu cầu HTTP trong tệp main.py, rồi bắt đầu chạy và gỡ lỗi bằng cấu hình Debug Watch đã thêm trước đó. Giờ đây, ứng dụng đang chạy và chờ các yêu cầu HTTP trên cổng 9000.

      

      Hình 3. Ứng dụng đang chạy và chờ các yêu cầu HTTP trên cổng 9000.

4. Khởi chạy ứng dụng ngrok trong môi trường cục bộ:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   Thay thế NGROK_STATIC_DOMAIN bằng miền tĩnh trong tài khoản ngrok của bạn. Tất cả yêu cầu hiện được chuyển hướng đến môi trường cục bộ và cổng mà ứng dụng sử dụng.

   

   Hình 4. Thiết bị đầu cuối có máy chủ ngrok đang chạy và chuyển hướng.

5. Giao diện web cũng được ứng dụng ngrok khởi động trên máy chủ cục bộ của bạn, bạn có thể theo dõi tất cả hoạt động bằng cách mở giao diện này trong trình duyệt.

   

   Hình 5. Giao diện web do ứng dụng ngrok lưu trữ không hiển thị yêu cầu HTTP.

6. Kiểm thử ứng dụng Chat bằng cách gửi tin nhắn trực tiếp cho ứng dụng:

   • Mở Google Chat.

     Chuyển đến Google Chat

   • Nhấp vào biểu tượng Cuộc trò chuyện mới add.

   • Trong hộp thoại, hãy nhập tên của ứng dụng Chat.

   • Trong kết quả tìm kiếm, hãy tìm ứng dụng Chat của bạn, nhấp vào Thêm > Chat.

   • Trong không gian tin nhắn trực tiếp, hãy nhập Hey! rồi nhấn enter. Ứng dụng Chat của bạn không trả lời vì đang được gỡ lỗi tích cực.

7. Trong Visual Studio Code trong môi trường cục bộ, bạn có thể thấy rằng quá trình thực thi bị tạm dừng tại điểm ngắt đã được đặt.

   

   Hình 6. Quá trình thực thi sẽ tạm dừng tại điểm ngắt đã được đặt.

8. Khi bạn tiếp tục thực thi từ trình gỡ lỗi của Visual Studio Codetrước khi Google Chat hết thời gian chờ, ứng dụng Chat sẽ trả lời bằng tên và ảnh đại diện của bạn trong tin nhắn.

9. Bạn có thể kiểm tra nhật ký yêu cầu và phản hồi HTTP từ giao diện web do ứng dụng ngrok lưu trữ trong môi trường cục bộ.

   

   Hình 7. Yêu cầu HTTP từ giao diện web do ứng dụng ngrok lưu trữ.

10. Để thay đổi hành vi của ứng dụng, hãy thay thế Hello bằng Hey trong dòng 51 của tệp main.py. Khi bạn lưu tệp, Visual Studio Code sẽ tự động tải lại ứng dụng bằng mã nguồn đã cập nhật và vẫn ở chế độ gỡ lỗi.

    

    Hình 8. Ứng dụng đang chạy và chờ các yêu cầu HTTP trên cổng 9000 với nội dung thay đổi mã được tải.

11. Lần này, thay vì gửi thông báo thứ hai Hey! trong không gian, bạn có thể chọn yêu cầu HTTP cuối cùng được ghi lại trên giao diện web do ứng dụng ngrok lưu trữ trong môi trường cục bộ của bạn rồi nhấp vào Replay. Giống như lần trước, ứng dụng Chat của bạn không trả lời vì đang được gỡ lỗi.

12. Khi tiếp tục thực thi từ trình gỡ lỗi của Visual Studio Code, bạn có thể thấy từ giao diện web do ứng dụng ngrok lưu trữ trong môi trường cục bộ rằng ứng dụng tạo ra một phản hồi bằng phiên bản mới của thông báo.

Java

1. Lấy thông tin đăng nhập mới của người dùng để sử dụng cho Thông tin đăng nhập mặc định của ứng dụng:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   Thay thế PROJECT_ID bằng mã dự án cho dự án trên Đám mây của ứng dụng.

2. Sao chép kho lưu trữ googleworkspace/google-chat-samples trên GitHub vào môi trường cục bộ của bạn. Kho lưu trữ này chứa mã ứng dụng:

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

3. Từ IDE Visual Studio Code được cài đặt trong môi trường cục bộ, hãy làm như sau:

   1. Trong một cửa sổ mới, hãy mở thư mục google-chat-samples/java/avatar-app.

   2. Định cấu hình dự án Maven để chạy ứng dụng App trên cổng 9000 cục bộ bằng cách thêm trình bổ trợ bản dựng Google Cloud Functions Framework function-maven-plugin vào tệp pom.xml:

      ...
      <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. Giờ đây, bạn có thể khởi chạy ứng dụng này cục bộ ở chế độ gỡ lỗi:

      mvnDebug function:run
      Preparing to execute Maven in debug mode
      Listening for transport dt_socket at address: 8000

   4. Tạo tệp .vscode/launch.json trong thư mục gốc và định cấu hình một lần khởi chạy có tên Remote Debug Watch để đính kèm vào ứng dụng đã khởi chạy trước đó bằng cổng 8000:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "java",
              "request": "attach",
              "name": "Remote Debug Watch",
              "projectName": "http-function",
              "hostName": "localhost",
              "port": 8000
          }]
      }
      

   5. Thêm một điểm ngắt tạm dừng quá trình xử lý yêu cầu HTTP trong tệp App.java và bắt đầu đính kèm và gỡ lỗi bằng cấu hình Remote Debug Watch đã thêm trước đó. Giờ đây, ứng dụng đang chạy và chờ các yêu cầu HTTP trên cổng 9000.

      

      Hình 3. Ứng dụng đang chạy và chờ các yêu cầu HTTP trên cổng 9000.

4. Khởi chạy ứng dụng ngrok trong môi trường cục bộ:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   Thay thế NGROK_STATIC_DOMAIN bằng miền tĩnh trong tài khoản ngrok của bạn. Tất cả yêu cầu hiện được chuyển hướng đến môi trường cục bộ và cổng mà ứng dụng sử dụng.

   

   Hình 4. Thiết bị đầu cuối có máy chủ ngrok đang chạy và chuyển hướng.

5. Giao diện web cũng được ứng dụng ngrok khởi động trên máy chủ cục bộ của bạn, bạn có thể theo dõi tất cả hoạt động bằng cách mở giao diện này trong trình duyệt.

   

   Hình 5. Giao diện web do ứng dụng ngrok lưu trữ không hiển thị yêu cầu HTTP.

6. Kiểm thử ứng dụng Chat bằng cách gửi tin nhắn trực tiếp cho ứng dụng:

   • Mở Google Chat.

     Chuyển đến Google Chat

   • Nhấp vào biểu tượng Cuộc trò chuyện mới add.

   • Trong hộp thoại, hãy nhập tên của ứng dụng Chat.

   • Trong kết quả tìm kiếm, hãy tìm ứng dụng Chat của bạn, nhấp vào Thêm > Chat.

   • Trong không gian tin nhắn trực tiếp, hãy nhập Hey! rồi nhấn enter. Ứng dụng Chat của bạn không trả lời vì đang được gỡ lỗi tích cực.

7. Trong Visual Studio Code trong môi trường cục bộ, bạn có thể thấy rằng quá trình thực thi bị tạm dừng tại điểm ngắt đã được đặt.

   

   Hình 6. Quá trình thực thi sẽ tạm dừng tại điểm ngắt đã được đặt.

8. Khi bạn tiếp tục thực thi từ trình gỡ lỗi của Visual Studio Codetrước khi Google Chat hết thời gian chờ, ứng dụng Chat sẽ trả lời bằng tên và ảnh đại diện của bạn trong tin nhắn.

9. Bạn có thể kiểm tra nhật ký yêu cầu và phản hồi HTTP từ giao diện web do ứng dụng ngrok lưu trữ trong môi trường cục bộ.

   

   Hình 7. Yêu cầu HTTP từ giao diện web do ứng dụng ngrok lưu trữ.

10. Để thay đổi hành vi của ứng dụng, hãy thay thế Hello bằng Hey trong dòng 55 của tệp App.java, khởi động lại quy trình mvnDebug và khởi chạy lại Remote Debug Watch để đính kèm lại và khởi động lại quá trình gỡ lỗi.

11. Lần này, thay vì gửi thông báo thứ hai Hey! trong không gian, bạn có thể chọn yêu cầu HTTP cuối cùng được ghi lại trên giao diện web do ứng dụng ngrok lưu trữ trong môi trường cục bộ của bạn rồi nhấp vào Replay. Tương tự như lần trước, ứng dụng Chat của bạn không trả lời vì đang được gỡ lỗi.

12. Khi tiếp tục thực thi từ trình gỡ lỗi của Visual Studio Code, bạn có thể thấy từ giao diện web do ứng dụng ngrok lưu trữ trong môi trường cục bộ rằng ứng dụng tạo ra một phản hồi bằng phiên bản mới của thông báo.