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 địa phương.

• Phiên bản mới nhất của nodemon đã được cài đặt trong thiết bị cục bộ của bạn tệp này được dùng cho mục đích tự động tải lại:

  npm install -g nodemon
  

• Một ứng dụng HTTP Chat được định cấu hình cho nhắn tin. Bạn có thể theo dõi các phần Điều kiện tiên quyết, Thiết lập môi trường, và Xuất bản ứng dụng lên Google Cuộc trò chuyện của Hướng dẫn nhanh. Chỉ điểm khác biệt là bạn cần đặt Tên ứng dụng thành Debug App và URL ứng dụng đến bất cứ thứ gì 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 Code IDE và mặc định của IDE gỡ lỗi trong hướng dẫn này chỉ mang tính minh hoạ.

• Git đã cài đặt trong môi trường địa phương.

• Tài khoản ngrok.

Python

• Phiên bản mới nhất của python3 đã cài đặt trong môi trường địa phương.
• 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ộ, chúng được dùng để quản lý các gói Python và các phiên bản ảo môi trường tương ứng.
• Một ứng dụng HTTP Chat được định cấu hình cho nhắn tin. Bạn có thể theo dõi các phần Điều kiện tiên quyết, Thiết lập môi trường, và Xuất bản ứng dụng lên Google Cuộc trò chuyện của Hướng dẫn nhanh. Chỉ điểm khác biệt là bạn cần đặt Tên ứng dụng thành Debug App và URL ứng dụng đến bất cứ thứ gì 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 Code IDE và mặc định của IDE gỡ lỗi trong hướng dẫn này chỉ mang tính minh hoạ.
• Git đã cài đặt trong môi trường địa phương.
• Tài khoản ngrok.
• Phiên bản mới nhất của gcloud đã cài đặt và khởi chạy trong môi trường cục bộ.

Java

• Phiên bản ổn định mới nhất của Java SE 11's JDK được cài đặt trong cấu hình môi trường.
• Phiên bản mới nhất của Apache Maven được cài đặt trong môi trường cục bộ của bạn, nó được dùng để quản lý các dự án Java.
• Một ứng dụng HTTP Chat được định cấu hình cho nhắn tin. Bạn có thể theo dõi các phần Điều kiện tiên quyết, Thiết lập môi trường, và Xuất bản ứng dụng lên Google Cuộc trò chuyện của Hướng dẫn nhanh. Chỉ điểm khác biệt là bạn cần đặt Tên ứng dụng thành Debug App và URL ứng dụng đến bất cứ thứ gì 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 Code IDE và mặc định của IDE gỡ lỗi trong hướng dẫn này chỉ mang tính minh hoạ.
• Git đã cài đặt trong môi trường địa phương.
• Tài khoản ngrok.
• Phiên bản mới nhất của gcloud đã cài đặt và khởi chạy trong môi trường cục bộ.

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ộ, tệp này chứa mã của ứng dụng để 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ộ của bạn, hãy làm như sau:

   1. Trong 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 để tự động tải lại gỡ lỗi bằng cách thêm các tập lệnh trong 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, cài đặt ứng dụng:

      npm install
      

   4. Tạo và định cấu hình 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 điểm ngắt sẽ tạm dừng xử lý yêu cầu HTTP trong index.js tệp và bắt đầu chạy và gỡ lỗi bằng tính năng Đã thêm cấu hình Debug Watch trước đó. Ứng dụng hiện chạy và theo dõi các yêu cầu HTTP trên cổng 9000.

      

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

3. 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 thiết bị cục bộ của bạn môi trường và cổng được ứ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. Một giao diện web cũng được bắt đầu trên máy chủ cục bộ của bạn bằng ngrok , bạn có thể giám sát tất cả hoạt động bằng cách mở ứng dụng 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 nào.

5. Kiểm tra ứng dụng Chat bằng cách gửi ứng dụng trực tiếp thông báo:

   • Mở Google Chat.

     Truy cập 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 > Trò chuyện.

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

6. Trong Visual Studio Code của 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 đã đặt.

   

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

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

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

   

   Hình 7. Yêu cầu HTTP từ giao diện web được lưu trữ bởi Ứng dụng ngrok.

9. Để thay đổi hành vi của ứng dụng, hãy thay thế Your message bằng Here was your message cùng 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 đã cập nhật mã nguồn và Visual Studio Code vẫn ở chế độ gỡ lỗi.

   

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

10. Lần này, thay vì gửi tin nhắn 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 được lưu trữ bởi ứng dụng ngrok 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 không trả lời vì đang được tích cực gỡ lỗi.

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

Python

1. Thu nạp thông tin đăng nhập của người dùng mới để sử dụng cho chế độ Ứng dụng mặc định Thông tin xác thực:

   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ộ, tệp này chứa mã xử lý ứ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ộ của bạn, hãy làm như sau:

   1. Trong 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ả phần phụ thuộc của dự án bằng pip trong môi trường ảo môi trường:

      pip install -r requirements.txt
      

   4. Tạo tệp .vscode/launch.json trong thư mục gốc rồi định cấu hình khởi 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 điểm ngắt sẽ tạm dừng xử lý yêu cầu HTTP trong main.py tệp và bắt đầu chạy và gỡ lỗi bằng tính năng Đã thêm cấu hình Debug Watch trước đó. Ứng dụng hiện chạy và theo dõi các yêu cầu HTTP trên cổng 9000.

      

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

4. 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 thiết bị cục bộ của bạn môi trường và cổng được ứ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. Một giao diện web cũng được bắt đầu trên máy chủ cục bộ của bạn bằng ngrok , bạn có thể giám sát tất cả hoạt động bằng cách mở ứng dụng 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 nào.

6. Kiểm tra ứng dụng Chat bằng cách gửi ứng dụng trực tiếp thông báo:

   • Mở Google Chat.

     Truy cập 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 > Trò chuyện.

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

7. Trong Visual Studio Code của 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 đã đặt.

   

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

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

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

   

   Hình 7. Yêu cầu HTTP từ giao diện web được lưu trữ bởi Ứng dụng ngrok.

10. Để thay đổi hành vi của ứng dụng, hãy thay thế Hello bằng Hey cùng dòng 51 trong số tệp main.py. Khi bạn lưu tệp, Visual Studio Code 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à theo dõi các yêu cầu HTTP trên cổng 9000 đã tải thay đổi mã.

11. Lần này, thay vì gửi tin nhắn 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 được lưu trữ bởi ứng dụng ngrok 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 tích cực gỡ lỗi.

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

Java

1. Thu nạp thông tin đăng nhập của người dùng mới để sử dụng cho chế độ Ứng dụng mặc định Thông tin xác thực:

   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 trong môi trường cục bộ, tệp này chứa mã xử lý ứ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ộ của bạn, hãy làm như sau:

   1. Trong 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 đó chuyển đổi 9000 cục bộ bằng cách thêm bản dựng Cloud Functions Framework trình bổ trợ function-maven-plugin trong 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ể chạy ứng dụng 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 rồi định cấu hình khởi chạy có tên Remote Debug Watch đính kèm với ứng dụng đã chạy trước đó với 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 điểm ngắt sẽ tạm dừng xử lý yêu cầu HTTP trong App.java tệp rồi bắt đầu đính kèm và gỡ lỗi bằng tính năng Đã thêm cấu hình Remote Debug Watch trước đó. Ứng dụng này hiện đang chạy và theo dõi các yêu cầu HTTP trên cổng 9000.

      

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

4. 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 thiết bị cục bộ của bạn môi trường và cổng được ứ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. Một giao diện web cũng được bắt đầu trên máy chủ cục bộ của bạn bằng ngrok , bạn có thể giám sát tất cả hoạt động bằng cách mở ứng dụng 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 nào.

6. Kiểm tra ứng dụng Chat bằng cách gửi ứng dụng trực tiếp thông báo:

   • Mở Google Chat.

     Truy cập 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 > Trò chuyện.

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

7. Trong Visual Studio Code của 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 đã đặt.

   

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

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

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

   

   Hình 7. Yêu cầu HTTP từ giao diện web được lưu trữ bởi Ứng dụng ngrok.

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

11. Lần này, thay vì gửi tin nhắn 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 được lưu trữ bởi ứng dụng ngrok 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 không trả lời vì đang được tích cực gỡ lỗi.

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