แก้ไขข้อบกพร่องของแอป Google Chat

Node.js

Python

Java

Node.js

• node และ npm เวอร์ชันล่าสุด ติดตั้ง ในสภาพแวดล้อมในพื้นที่ของคุณ

• nodemon เวอร์ชันล่าสุดติดตั้งในสภาพแวดล้อมในเครื่องของคุณ ซึ่งใช้เพื่อวัตถุประสงค์ในการเติมเงินอัตโนมัติ

  npm install -g nodemon

• แอปแชท HTTP ที่กำหนดค่าไว้สำหรับการรับส่งข้อความ คุณทำตามส่วนข้อกำหนดเบื้องต้น ตั้งค่า สภาพแวดล้อม และเผยแพร่แอปไปยัง Google Chat ของคู่มือฉบับย่อได้ ความแตกต่างเพียงอย่างเดียวคือคุณต้องตั้งค่าชื่อแอปเป็น Debug App และURL ปลายทาง HTTP เป็นอะไรก็ได้ เช่น http://example.com

• IDE ที่ตั้งค่าในสภาพแวดล้อมในเครื่องซึ่งสามารถแก้ไขข้อบกพร่องได้ เราใช้ Visual Studio Code IDE และฟีเจอร์การแก้ไขข้อบกพร่องเริ่มต้นใน คู่มือนี้เพื่อเป็นตัวอย่าง

• Git ติดตั้ง ในสภาพแวดล้อมในเครื่อง

• บัญชี ngrok

Python

• python3 ติดตั้ง ในสภาพแวดล้อมในเครื่อง
• เมื่อติดตั้ง pip และ virtualenv เวอร์ชันล่าสุดในสภาพแวดล้อม ในเครื่อง ระบบจะใช้เพื่อจัดการแพ็กเกจ Python และสภาพแวดล้อม เสมือนตามลำดับ
• แอปแชท HTTP ที่กำหนดค่าไว้สำหรับการรับส่งข้อความ คุณทำตามส่วนข้อกำหนดเบื้องต้น ตั้งค่า สภาพแวดล้อม และเผยแพร่แอปไปยัง Google Chat ของคู่มือฉบับย่อได้ ความแตกต่างเพียงอย่างเดียวคือคุณต้องตั้งค่าชื่อแอปเป็น Debug App และURL ปลายทาง HTTP เป็นอะไรก็ได้ เช่น http://example.com
• IDE ที่ตั้งค่าในสภาพแวดล้อมในเครื่องซึ่งสามารถแก้ไขข้อบกพร่องได้ เราใช้ Visual Studio Code IDE และฟีเจอร์การแก้ไขข้อบกพร่องเริ่มต้นใน คู่มือนี้เพื่อเป็นตัวอย่าง
• Git ติดตั้ง ในสภาพแวดล้อมในเครื่อง
• บัญชี ngrok
• gcloud เวอร์ชันล่าสุดที่ติดตั้ง และเริ่มต้นใน สภาพแวดล้อมในเครื่อง

Java

• Java SE 11's JDK เวอร์ชันเสถียรล่าสุดที่ติดตั้งในสภาพแวดล้อม ภายในของคุณ
• เวอร์ชันล่าสุดของ Apache Maven ติดตั้งในสภาพแวดล้อมในเครื่อง ใช้เพื่อจัดการโปรเจ็กต์ Java
• แอปแชท HTTP ที่กำหนดค่าไว้สำหรับการรับส่งข้อความ คุณทำตามส่วนข้อกำหนดเบื้องต้น ตั้งค่า สภาพแวดล้อม และเผยแพร่แอปไปยัง Google Chat ของคู่มือฉบับย่อได้ ความแตกต่างเพียงอย่างเดียวคือคุณต้องตั้งค่าชื่อแอปเป็น Debug App และทริกเกอร์ข้อความ URL ปลายทาง HTTP เป็นอะไรก็ได้ เช่น http://example.com
• IDE ที่ตั้งค่าในสภาพแวดล้อมในเครื่องซึ่งสามารถแก้ไขข้อบกพร่องได้ เราใช้ Visual Studio Code IDE และฟีเจอร์การแก้ไขข้อบกพร่องเริ่มต้นใน คู่มือนี้เพื่อเป็นตัวอย่าง
• Git ติดตั้ง ในสภาพแวดล้อมในเครื่อง
• บัญชี ngrok
• gcloud เวอร์ชันล่าสุดที่ติดตั้ง และเริ่มต้นใน สภาพแวดล้อมในเครื่อง

Node.js

1. โคลนgoogleworkspace/add-ons-samplesที่เก็บจาก GitHub ไปยังสภาพแวดล้อมในเครื่อง ซึ่งมีโค้ดของแอปพลิเคชันที่จะ ดำเนินการ

   git clone https://github.com/googleworkspace/add-ons-samples.git

2. จาก Visual Studio Code IDE ที่ติดตั้งในสภาพแวดล้อมในเครื่อง ให้ทำดังนี้

   1. เปิดโฟลเดอร์ในหน้าต่างใหม่ add-ons-samples/node/chat/avatar-app

   2. กำหนดค่าแอปพลิเคชันสำหรับการแก้ไขข้อบกพร่องในการโหลดอัตโนมัติโดยการเพิ่มสคริปต์ 2 รายการในไฟล์ package.json ดังนี้

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

   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. เพิ่มเบรกพอยต์ที่หยุดการประมวลผลคำขอ HTTP ในไฟล์ index.js และเริ่มเรียกใช้และ แก้ไขข้อบกพร่องด้วยการกำหนดค่า Debug Watchที่เพิ่มไว้ก่อนหน้านี้ ตอนนี้แอปพลิเคชัน ทำงานและรอรับคำขอ HTTP ในพอร์ต 9000 แล้ว

      

      รูปที่ 3 แอปพลิเคชันกำลังทำงานและรอคำขอ HTTP ในพอร์ต 9000

3. เปิดใช้แอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่อง

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   แทนที่ NGROK_STATIC_DOMAIN ด้วยโดเมนแบบคงที่ในบัญชี ngrok ของคุณ ตอนนี้ระบบจะเปลี่ยนเส้นทางคำขอทั้งหมดไปยังสภาพแวดล้อมในเครื่องและพอร์ตที่แอปพลิเคชันใช้

   

   รูปที่ 4 เทอร์มินัลที่มีngrokเซิร์ฟเวอร์ทํางานและเปลี่ยนเส้นทาง

4. ngrok แอปพลิเคชันจะเริ่มอินเทอร์เฟซเว็บใน localhost ด้วย คุณสามารถตรวจสอบกิจกรรมทั้งหมดได้โดยเปิดในเบราว์เซอร์

   

   รูปที่ 5 อินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชัน ngrok ซึ่งไม่แสดงคำขอ HTTP

5. ทดสอบแอป Chat โดยส่งข้อความส่วนตัว ไปที่แอป

   • เปิด Google Chat

     ไปที่ Google Chat

   • คลิกแชทใหม่ add

   • ในกล่องโต้ตอบ ให้ป้อนชื่อ แอป Chat

   • ในผลการค้นหา ให้ค้นหาแอป Chat คลิกเพิ่ม > Chat

   • ในพื้นที่ข้อความส่วนตัว ให้พิมพ์ Hello แล้วกด enter แอป Chat ของคุณไม่ตอบกลับเนื่องจากกำลัง แก้ไขข้อบกพร่องอยู่

6. ใน Visual Studio Code ในสภาพแวดล้อมในเครื่อง คุณจะเห็นว่า การดำเนินการหยุดชั่วคราวที่จุดพักที่ตั้งไว้

   

   รูปที่ 6 การดำเนินการจะหยุดชั่วคราวที่จุดพักที่ตั้งไว้

7. เมื่อคุณดำเนินการต่อจากดีบักเกอร์ Visual Studio Code ก่อนที่ Google Chat จะหมดเวลา แอป Chat จะตอบกลับข้อความของคุณ

8. คุณสามารถตรวจสอบบันทึกคำขอและการตอบกลับ HTTP จากอินเทอร์เฟซเว็บ ที่โฮสต์โดยแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่อง

   

   รูปที่ 7 คำขอ HTTP จากอินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชัน ngrok

9. หากต้องการเปลี่ยนลักษณะการทำงานของแอปพลิเคชัน ให้อัปเดตข้อความตอบกลับในไฟล์ index.js เมื่อคุณบันทึกไฟล์ nodemon จะโหลดแอปพลิเคชันอีกครั้งโดยอัตโนมัติด้วยซอร์สโค้ดที่อัปเดตแล้ว และ Visual Studio Code จะยังคงอยู่ในโหมดแก้ไขข้อบกพร่อง

   

   รูปที่ 8 แอปพลิเคชันกำลังทำงานและรอรับคำขอ HTTP ในพอร์ต 9000 โดยมีการโหลดการเปลี่ยนแปลงโค้ด

10. คราวนี้แทนที่จะส่งข้อความที่ 2 Hello ในพื้นที่ทำงาน คุณ สามารถเลือกคำขอ HTTP สุดท้ายที่บันทึกไว้ในอินเทอร์เฟซเว็บซึ่งโฮสต์โดยแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่อง แล้วคลิก Replay เช่นเดียวกับครั้งที่แล้ว แอป Chat ของคุณจะไม่ตอบกลับ เนื่องจากเรากำลังแก้ไขข้อบกพร่องอยู่

11. เมื่อดำเนินการต่อจากดีบักเกอร์ของ Visual Studio Code คุณจะเห็นจากอินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชัน ngrok ใน สภาพแวดล้อมในเครื่องว่าแอปพลิเคชันสร้างการตอบกลับด้วย ข้อความเวอร์ชันที่อัปเดตแล้ว

Python

1. รับข้อมูลเข้าสู่ระบบของผู้ใช้ใหม่เพื่อใช้สำหรับข้อมูลรับรองเริ่มต้นของแอปพลิเคชัน

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   แทนที่ PROJECT_ID ด้วย รหัสโปรเจ็กต์ สำหรับโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของแอป

2. โคลนgoogleworkspace/add-ons-samplesที่เก็บจาก GitHub ไปยังสภาพแวดล้อมในเครื่อง ซึ่งมีโค้ดของแอปพลิเคชัน

   git clone https://github.com/googleworkspace/add-ons-samples.git

3. จาก Visual Studio Code IDE ที่ติดตั้งในสภาพแวดล้อมในเครื่อง ให้ทำดังนี้

   1. เปิดโฟลเดอร์ในหน้าต่างใหม่ add-ons-samples/python/chat/avatar-app

   2. สร้างสภาพแวดล้อมเสมือนใหม่สำหรับ Python env แล้วเปิดใช้งาน

      virtualenv env
      source env/bin/activate

   3. ติดตั้งทรัพยากร Dependency ของโปรเจ็กต์ทั้งหมดโดยใช้ pip ในสภาพแวดล้อมเสมือน

      pip install -r requirements.txt

   4. สร้างไฟล์ .vscode/launch.json ในไดเรกทอรีรากและ กำหนดค่าการเปิดตัวชื่อ Debug Watch ที่ทริกเกอร์แอปพลิเคชัน จากโมดูล functions-framework ในพอร์ต 9000 ในโหมดแก้ไขข้อบกพร่อง ในสภาพแวดล้อมเสมือน 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. เพิ่มเบรกพอยต์ที่หยุดการประมวลผลคำขอ HTTP ในไฟล์ main.py และเริ่มเรียกใช้และ แก้ไขข้อบกพร่องด้วยการกำหนดค่า Debug Watchที่เพิ่มไว้ก่อนหน้านี้ ตอนนี้แอปพลิเคชัน ทำงานและรอรับคำขอ HTTP ในพอร์ต 9000 แล้ว

      

      รูปที่ 3 แอปพลิเคชันกำลังทำงานและรอคำขอ HTTP ในพอร์ต 9000

4. เปิดใช้แอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่อง

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   แทนที่ NGROK_STATIC_DOMAIN ด้วยโดเมนแบบคงที่ในบัญชี ngrok ของคุณ ตอนนี้ระบบจะเปลี่ยนเส้นทางคำขอทั้งหมดไปยังสภาพแวดล้อมในเครื่องและพอร์ตที่แอปพลิเคชันใช้

   

   รูปที่ 4 เทอร์มินัลที่มีngrokเซิร์ฟเวอร์ทํางานและเปลี่ยนเส้นทาง

5. ngrok แอปพลิเคชันจะเริ่มอินเทอร์เฟซเว็บใน localhost ด้วย คุณสามารถตรวจสอบกิจกรรมทั้งหมดได้โดยเปิดในเบราว์เซอร์

   

   รูปที่ 5 อินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชัน ngrok ซึ่งไม่แสดงคำขอ HTTP

6. ทดสอบแอป Chat โดยส่งข้อความส่วนตัว ไปที่แอป

   • เปิด Google Chat

     ไปที่ Google Chat

   • คลิกแชทใหม่ add

   • ในกล่องโต้ตอบ ให้ป้อนชื่อ แอป Chat

   • ในผลการค้นหา ให้ค้นหาแอป Chat คลิกเพิ่ม > Chat

   • ในพื้นที่ข้อความส่วนตัว ให้พิมพ์ Hey! แล้วกด enter แอป Chat ของคุณไม่ตอบกลับเนื่องจากกำลัง ดีบักอยู่

7. ใน Visual Studio Code ในสภาพแวดล้อมในเครื่อง คุณจะเห็นว่า การดำเนินการหยุดชั่วคราวที่จุดพักที่ตั้งไว้

   

   รูปที่ 6 การดำเนินการจะหยุดชั่วคราวที่จุดพักที่ตั้งไว้

8. เมื่อคุณดำเนินการต่อจากดีบักเกอร์ Visual Studio Code ก่อนที่ Google Chat จะหมดเวลา แอป Chat จะตอบกลับด้วยชื่อและรูปโปรไฟล์ของคุณในข้อความ

9. คุณสามารถตรวจสอบบันทึกคำขอและการตอบกลับ HTTP จากอินเทอร์เฟซเว็บ ที่โฮสต์โดยแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่อง

   

   รูปที่ 7 คำขอ HTTP จากอินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชัน ngrok

10. หากต้องการเปลี่ยนลักษณะการทำงานของแอปพลิเคชัน ให้แทนที่ Hello ด้วย Hey ในไฟล์ main.py เมื่อบันทึกไฟล์ Visual Studio Code ระบบจะโหลดแอปพลิเคชันใหม่โดยอัตโนมัติด้วยซอร์สโค้ดที่อัปเดตแล้วและ ยังคงอยู่ในโหมดแก้ไขข้อบกพร่อง

    

    รูปที่ 8 แอปพลิเคชันกำลังทำงานและรอคำขอ HTTP ในพอร์ต 9000 โดยมีการโหลดการเปลี่ยนแปลงโค้ด

11. คราวนี้แทนที่จะส่งข้อความที่ 2 Hey! ในพื้นที่ทำงาน คุณ สามารถเลือกคำขอ HTTP สุดท้ายที่บันทึกไว้ในอินเทอร์เฟซเว็บซึ่งโฮสต์โดยแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่อง แล้วคลิก Replay เช่นเดียวกับครั้งที่แล้ว แอป Chat ของคุณจะไม่ตอบกลับ เนื่องจากเรากำลังแก้ไขข้อบกพร่องอยู่

12. เมื่อดำเนินการต่อจากดีบักเกอร์ของ Visual Studio Code คุณจะเห็นจากอินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชัน ngrok ใน สภาพแวดล้อมในเครื่องว่าแอปพลิเคชันสร้างการตอบกลับด้วย ข้อความเวอร์ชันที่อัปเดตแล้ว

Java

1. รับข้อมูลเข้าสู่ระบบของผู้ใช้ใหม่เพื่อใช้สำหรับข้อมูลรับรองเริ่มต้นของแอปพลิเคชัน

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   แทนที่ PROJECT_ID ด้วย รหัสโปรเจ็กต์ สำหรับโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของแอป

2. โคลนgoogleworkspace/add-ons-samplesที่เก็บจาก GitHub ในสภาพแวดล้อมในเครื่อง ซึ่งมีโค้ดของแอปพลิเคชัน

   git clone https://github.com/googleworkspace/add-ons-samples.git

3. จาก Visual Studio Code IDE ที่ติดตั้งในสภาพแวดล้อมในเครื่อง ให้ทำดังนี้

   1. เปิดโฟลเดอร์ในหน้าต่างใหม่ add-ons-samples/java/chat/avatar-app

   2. กำหนดค่าโปรเจ็กต์ Maven เพื่อเรียกใช้แอปพลิเคชัน App ในพอร์ต 9000 ในเครื่องโดยเพิ่มปลั๊กอินบิลด์ Google Cloud Functions Framework function-maven-plugin ในไฟล์ 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. ตอนนี้คุณเปิดใช้ในเครื่องในโหมดแก้ไขข้อบกพร่องได้แล้วโดยทำดังนี้

      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. เพิ่มเบรกพอยต์ที่หยุดการประมวลผลคำขอ HTTP ชั่วคราวในไฟล์ App.java แล้วเริ่มการแนบและ การแก้ไขข้อบกพร่องด้วยการกำหนดค่า Remote Debug Watchที่เพิ่มไว้ก่อนหน้านี้ ตอนนี้แอปพลิเคชันทำงานและรอรับคำขอ HTTP ในพอร์ต 9000 แล้ว

      

      รูปที่ 3 แอปพลิเคชันกำลังทำงานและรอรับคำขอ HTTP บนพอร์ต 9000

4. เปิดใช้แอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่อง

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   แทนที่ NGROK_STATIC_DOMAIN ด้วยโดเมนแบบคงที่ในบัญชี ngrok ของคุณ ตอนนี้ระบบจะเปลี่ยนเส้นทางคำขอทั้งหมดไปยังสภาพแวดล้อมในเครื่องและพอร์ตที่แอปพลิเคชันใช้

   

   รูปที่ 4 เทอร์มินัลที่มีngrokเซิร์ฟเวอร์ทํางานและเปลี่ยนเส้นทาง

5. ngrok แอปพลิเคชันจะเริ่มอินเทอร์เฟซเว็บใน localhost ด้วย คุณสามารถตรวจสอบกิจกรรมทั้งหมดได้โดยเปิดในเบราว์เซอร์

   

   รูปที่ 5 อินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชัน ngrok ซึ่งไม่แสดงคำขอ HTTP

6. ทดสอบแอป Chat โดยส่งข้อความส่วนตัว ไปที่แอป

   • เปิด Google Chat

     ไปที่ Google Chat

   • คลิกแชทใหม่ add

   • ในกล่องโต้ตอบ ให้ป้อนชื่อ แอป Chat

   • ในผลการค้นหา ให้ค้นหาแอป Chat คลิกเพิ่ม > Chat

   • ในพื้นที่ข้อความส่วนตัว ให้พิมพ์ Hey! แล้วกด enter แอป Chat ของคุณไม่ตอบกลับเนื่องจากกำลัง ดีบักอยู่

7. ใน Visual Studio Code ในสภาพแวดล้อมในเครื่อง คุณจะเห็นว่า การดำเนินการหยุดชั่วคราวที่จุดพักที่ตั้งไว้

   

   รูปที่ 6 การดำเนินการจะหยุดชั่วคราวที่จุดพักที่ตั้งไว้

8. เมื่อคุณดำเนินการต่อจากดีบักเกอร์ Visual Studio Code ก่อนที่ Google Chat จะหมดเวลา แอป Chat จะตอบกลับด้วยชื่อและรูปโปรไฟล์ของคุณในข้อความ

9. คุณสามารถตรวจสอบบันทึกคำขอและการตอบกลับ HTTP จากอินเทอร์เฟซเว็บ ที่โฮสต์โดยแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่อง

   

   รูปที่ 7 คำขอ HTTP จากอินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชัน ngrok

10. หากต้องการเปลี่ยนลักษณะการทำงานของแอปพลิเคชัน ให้แทนที่ Hello ด้วย Hey inline 55 ของไฟล์ App.java รีสตาร์ทกระบวนการ mvnDebug และ เปิด Remote Debug Watch อีกครั้งเพื่อแนบและรีสตาร์ท การแก้ไขข้อบกพร่อง

11. คราวนี้แทนที่จะส่งข้อความที่ 2 Hey! ในพื้นที่ทำงาน คุณ สามารถเลือกคำขอ HTTP สุดท้ายที่บันทึกไว้ในอินเทอร์เฟซเว็บซึ่งโฮสต์โดยแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่อง แล้วคลิก Replay เช่นเดียวกับครั้งที่แล้ว แอป Chat ของคุณจะไม่ตอบกลับ เนื่องจากเรากำลังแก้ไขข้อบกพร่องอยู่

12. เมื่อดำเนินการต่อจากดีบักเกอร์ของ Visual Studio Code คุณจะเห็นจากอินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชัน ngrok ใน สภาพแวดล้อมในเครื่องว่าแอปพลิเคชันสร้างการตอบกลับด้วย ข้อความเวอร์ชันที่อัปเดตแล้ว