Men-debug aplikasi Google Chat

Node.js

Python

Java

Node.js

• Versi terbaru node dan npm terinstal di lingkungan lokal Anda.

• Versi terbaru nodemon yang diinstal di lingkungan lokal Anda, yang digunakan untuk tujuan pemuatan ulang otomatis:

  npm install -g nodemon
  

• Aplikasi Chat HTTP yang dikonfigurasi untuk pesan. Anda dapat mengikuti bagian Prasyarat, Menyiapkan lingkungan, dan Memublikasikan aplikasi ke Google Chat di Panduan memulai. Satu-satunya perbedaan adalah Anda perlu menetapkan App name ke Debug App dan App URL ke apa pun seperti http://example.com.

• IDE yang disiapkan di lingkungan lokal Anda yang dapat melakukan debug. Kami menggunakan Visual Studio Code IDE dan fitur proses debug defaultnya dalam panduan ini untuk tujuan ilustrasi.

• Git terinstal di lingkungan lokal Anda.

• Akun ngrok.

Python

• Versi terbaru python3 yang diinstal di lingkungan lokal Anda.
• pip dan virtualenv versi terbaru yang diinstal di lingkungan lokal Anda, masing-masing digunakan untuk mengelola paket Python dan lingkungan virtual.
• Aplikasi Chat HTTP yang dikonfigurasi untuk pesan. Anda dapat mengikuti bagian Prasyarat, Menyiapkan lingkungan, dan Memublikasikan aplikasi ke Google Chat di Panduan memulai. Satu-satunya perbedaan adalah Anda perlu menetapkan App name ke Debug App dan App URL ke apa pun seperti http://example.com.
• IDE yang disiapkan di lingkungan lokal Anda yang dapat melakukan debug. Kami menggunakan Visual Studio Code IDE dan fitur proses debug defaultnya dalam panduan ini untuk tujuan ilustrasi.
• Git terinstal di lingkungan lokal Anda.
• Akun ngrok.
• Versi terbaru gcloud diinstal dan diinisialisasi di lingkungan lokal Anda.

Java

• Versi stabil terbaru Java SE 11's JDK yang diinstal di lingkungan lokal Anda.
• Versi terbaru Apache Maven yang diinstal di lingkungan lokal Anda, digunakan untuk mengelola project Java.
• Aplikasi Chat HTTP yang dikonfigurasi untuk pesan. Anda dapat mengikuti bagian Prasyarat, Menyiapkan lingkungan, dan Memublikasikan aplikasi ke Google Chat di Panduan memulai. Satu-satunya perbedaan adalah Anda perlu menetapkan App name ke Debug App dan App URL ke apa pun seperti http://example.com.
• IDE yang disiapkan di lingkungan lokal Anda yang dapat melakukan debug. Kami menggunakan Visual Studio Code IDE dan fitur proses debug defaultnya dalam panduan ini untuk tujuan ilustrasi.
• Git terinstal di lingkungan lokal Anda.
• Akun ngrok.
• Versi terbaru gcloud diinstal dan diinisialisasi di lingkungan lokal Anda.

Node.js

1. Clone repositori googleworkspace/google-chat-samples dari GitHub ke lingkungan lokal Anda. Repositori ini berisi kode aplikasi yang akan dijalankan:

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

2. Dari Visual Studio Code IDE yang diinstal di lingkungan lokal Anda, lakukan hal berikut:

   1. Di jendela baru, buka folder google-chat-samples/node/basic-app.

   2. Konfigurasikan aplikasi untuk debug pemuatan ulang otomatis dengan menambahkan dua skrip dalam file package.json:

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

   3. Dari direktori root, instal aplikasi:

      npm install
      

   4. Buat dan konfigurasi peluncuran bernama Debug Watch yang memicu skrip debug-watch dengan membuat file .vscode/launch.json di direktori root:

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

   5. Tambahkan titik henti sementara yang menjeda pemrosesan permintaan HTTP dalam file index.js, dan mulai jalankan dan lakukan proses debug dengan konfigurasi Debug Watch yang ditambahkan sebelumnya. Aplikasi tersebut kini berjalan dan memproses permintaan HTTP pada port 9000.

      

      Gambar 3. Aplikasi sedang berjalan dan memproses permintaan HTTP pada port 9000.

3. Luncurkan aplikasi ngrok di lingkungan lokal Anda:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   Ganti NGROK_STATIC_DOMAIN dengan domain statis di akun ngrok Anda. Semua permintaan kini dialihkan ke lingkungan lokal Anda dan port yang digunakan oleh aplikasi.

   

   Gambar 4. Terminal dengan server ngrok yang berjalan dan melakukan pengalihan.

4. Antarmuka web juga dimulai di localhost oleh aplikasi ngrok. Anda dapat memantau semua aktivitas dengan membukanya di browser.

   

   Gambar 5. Antarmuka web yang dihosting oleh aplikasi ngrok tidak menampilkan permintaan HTTP.

5. Uji aplikasi Chat Anda dengan mengirimkan pesan langsung:

   • Buka Google Chat.

     Buka Google Chat

   • Klik Chat baru add.

   • Pada dialog, masukkan nama aplikasi Chat Anda.

   • Di hasil penelusuran, temukan aplikasi Chat Anda, klik Add > Chat.

   • Di ruang pesan langsung, ketik Hello, lalu tekan enter. Aplikasi Chat Anda tidak membalas karena sedang di-debug secara aktif.

6. Pada Visual Studio Code di lingkungan lokal, Anda dapat melihat bahwa eksekusi dijeda pada titik henti sementara yang ditetapkan.

   

   Gambar 6. Eksekusi dijeda di titik henti sementara yang telah ditetapkan.

7. Saat Anda melanjutkan eksekusi dari debugger Visual Studio Code sebelum waktu tunggu Google Chat habis, aplikasi Chat akan membalas Your message : Hello.

8. Anda dapat memeriksa log permintaan dan respons HTTP dari antarmuka web yang dihosting oleh aplikasi ngrok di lingkungan lokal Anda.

   

   Gambar 7. Permintaan HTTP dari antarmuka web yang dihosting oleh aplikasi ngrok.

9. Untuk mengubah perilaku aplikasi, ganti Your message dengan Here was your message 35 inline dari index.json. Saat Anda menyimpan file ini, nodemon akan otomatis memuat ulang aplikasi dengan kode sumber yang diperbarui dan Visual Studio Code tetap dalam mode debug.

   

   Gambar 8. Aplikasi sedang berjalan dan memproses permintaan HTTP pada port 9000 dengan perubahan kode dimuat.

10. Kali ini, daripada mengirim pesan kedua Hello di ruang, Anda dapat memilih permintaan HTTP terakhir yang dicatat ke dalam log di antarmuka web yang dihosting oleh aplikasi ngrok di lingkungan lokal Anda, lalu klik Replay. Sama seperti terakhir kali, aplikasi Chat Anda tidak membalas karena sedang di-debug secara aktif.

11. Saat melanjutkan eksekusi dari debugger Visual Studio Code, Anda dapat melihat dari antarmuka web yang dihosting oleh aplikasi ngrok di lingkungan lokal bahwa aplikasi menghasilkan respons dengan versi terbaru pesan Here was your message : Hello.

Python

1. Dapatkan kredensial pengguna baru yang akan digunakan untuk Kredensial Default Aplikasi:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login
   

   Ganti PROJECT_ID dengan project ID untuk project Cloud aplikasi.

2. Clone repositori googleworkspace/google-chat-samples dari GitHub ke lingkungan lokal Anda. repositori ini berisi kode aplikasi:

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

3. Dari Visual Studio Code IDE yang diinstal di lingkungan lokal Anda, lakukan hal berikut:

   1. Di jendela baru, buka folder google-chat-samples/python/avatar-app.

   2. Buat lingkungan virtual baru untuk Python env dan aktifkan:

      virtualenv env
      source env/bin/activate
      

   3. Instal semua dependensi project menggunakan pip di lingkungan virtual:

      pip install -r requirements.txt
      

   4. Buat file .vscode/launch.json di direktori utama dan konfigurasikan peluncuran bernama Debug Watch yang memicu aplikasi dari modul functions-framework pada port 9000 dalam mode debug di lingkungan virtual env:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "python",
              "request": "launch",
              "name": "Debug Watch",
              "python": "${workspaceFolder}/env/bin/python3",
              "module": "functions_framework",
              "args": [
                  "--target", "hello_chat",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      

   5. Tambahkan titik henti sementara yang menjeda pemrosesan permintaan HTTP dalam file main.py, dan mulai jalankan dan lakukan proses debug dengan konfigurasi Debug Watch yang ditambahkan sebelumnya. Aplikasi tersebut kini berjalan dan memproses permintaan HTTP pada port 9000.

      

      Gambar 3. Aplikasi sedang berjalan dan memproses permintaan HTTP pada port 9000.

4. Luncurkan aplikasi ngrok di lingkungan lokal Anda:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   Ganti NGROK_STATIC_DOMAIN dengan domain statis di akun ngrok Anda. Semua permintaan kini dialihkan ke lingkungan lokal Anda dan port yang digunakan oleh aplikasi.

   

   Gambar 4. Terminal dengan server ngrok yang berjalan dan melakukan pengalihan.

5. Antarmuka web juga dimulai di localhost oleh aplikasi ngrok. Anda dapat memantau semua aktivitas dengan membukanya di browser.

   

   Gambar 5. Antarmuka web yang dihosting oleh aplikasi ngrok tidak menampilkan permintaan HTTP.

6. Uji aplikasi Chat Anda dengan mengirimkan pesan langsung:

   • Buka Google Chat.

     Buka Google Chat

   • Klik Chat baru add.

   • Pada dialog, masukkan nama aplikasi Chat Anda.

   • Di hasil penelusuran, temukan aplikasi Chat Anda, klik Add > Chat.

   • Di ruang pesan langsung, ketik Hey!, lalu tekan enter. Aplikasi Chat Anda tidak membalas karena sedang di-debug secara aktif.

7. Pada Visual Studio Code di lingkungan lokal, Anda dapat melihat bahwa eksekusi dijeda pada titik henti sementara yang ditetapkan.

   

   Gambar 6. Eksekusi dijeda di titik henti sementara yang telah ditetapkan.

8. Saat melanjutkan eksekusi dari debugger Visual Studio Code sebelum Google Chat habis waktu, aplikasi Chat akan membalas dengan nama dan foto avatar Anda dalam pesan.

9. Anda dapat memeriksa log permintaan dan respons HTTP dari antarmuka web yang dihosting oleh aplikasi ngrok di lingkungan lokal Anda.

   

   Gambar 7. Permintaan HTTP dari antarmuka web yang dihosting oleh aplikasi ngrok.

10. Untuk mengubah perilaku aplikasi, ganti Hello dengan Hey inline 51 dari file main.py. Jika Anda menyimpan file ini, Visual Studio Code akan otomatis memuat ulang aplikasi dengan kode sumber yang diperbarui dan tetap dalam mode debug.

    

    Gambar 8. Aplikasi sedang berjalan dan memproses permintaan HTTP pada port 9000 dengan perubahan kode dimuat.

11. Kali ini, daripada mengirim pesan kedua Hey! di ruang, Anda dapat memilih permintaan HTTP terakhir yang dicatat ke dalam log di antarmuka web yang dihosting oleh aplikasi ngrok di lingkungan lokal Anda, lalu klik Replay. Sama seperti terakhir kali, aplikasi Chat Anda tidak membalas karena sedang di-debug secara aktif.

12. Saat melanjutkan eksekusi dari debugger Visual Studio Code, Anda dapat melihat dari antarmuka web yang dihosting oleh aplikasi ngrok di lingkungan lokal bahwa aplikasi menghasilkan respons dengan versi pesan yang diperbarui.

Java

1. Dapatkan kredensial pengguna baru yang akan digunakan untuk Kredensial Default Aplikasi:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login
   

   Ganti PROJECT_ID dengan project ID untuk project Cloud aplikasi.

2. Clone repositori googleworkspace/google-chat-samples dari GitHub di lingkungan lokal Anda. repositori ini berisi kode aplikasi:

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

3. Dari Visual Studio Code IDE yang diinstal di lingkungan lokal Anda, lakukan hal berikut:

   1. Di jendela baru, buka folder google-chat-samples/java/avatar-app.

   2. Konfigurasikan project Maven untuk menjalankan aplikasi HelloChat pada port 9000 secara lokal dengan menambahkan plugin build Cloud Functions Framework function-maven-plugin di file pom.xml:

      ...
      <plugin>
          <groupId>com.google.cloud.functions</groupId>
          <artifactId>function-maven-plugin</artifactId>
          <version>0.11.0</version>
          <configuration>
              <functionTarget>HelloChat</functionTarget>
              <port>9000</port>
          </configuration>
      </plugin>
      ...
      

   3. Sekarang, Anda dapat meluncurkannya secara lokal dalam mode debug:

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

   4. Buat file .vscode/launch.json di direktori utama dan konfigurasikan peluncuran bernama Remote Debug Watch yang dilampirkan ke aplikasi yang sebelumnya diluncurkan dengan port 8000:

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

   5. Tambahkan titik henti sementara yang menjeda pemrosesan permintaan HTTP dalam file HelloChat.java, dan mulai melampirkan dan melakukan proses debug dengan konfigurasi Remote Debug Watch yang ditambahkan sebelumnya. Aplikasi tersebut sedang berjalan dan memproses permintaan HTTP di port 9000.

      

      Gambar 3. Aplikasi sedang berjalan dan memproses permintaan HTTP pada port 9000.

4. Luncurkan aplikasi ngrok di lingkungan lokal Anda:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   Ganti NGROK_STATIC_DOMAIN dengan domain statis di akun ngrok Anda. Semua permintaan kini dialihkan ke lingkungan lokal Anda dan port yang digunakan oleh aplikasi.

   

   Gambar 4. Terminal dengan server ngrok yang berjalan dan melakukan pengalihan.

5. Antarmuka web juga dimulai di localhost oleh aplikasi ngrok. Anda dapat memantau semua aktivitas dengan membukanya di browser.

   

   Gambar 5. Antarmuka web yang dihosting oleh aplikasi ngrok tidak menampilkan permintaan HTTP.

6. Uji aplikasi Chat Anda dengan mengirimkan pesan langsung:

   • Buka Google Chat.

     Buka Google Chat

   • Klik Chat baru add.

   • Pada dialog, masukkan nama aplikasi Chat Anda.

   • Di hasil penelusuran, temukan aplikasi Chat Anda, klik Add > Chat.

   • Di ruang pesan langsung, ketik Hey!, lalu tekan enter. Aplikasi Chat Anda tidak membalas karena sedang di-debug secara aktif.

7. Pada Visual Studio Code di lingkungan lokal, Anda dapat melihat bahwa eksekusi dijeda pada titik henti sementara yang ditetapkan.

   

   Gambar 6. Eksekusi dijeda di titik henti sementara yang telah ditetapkan.

8. Saat melanjutkan eksekusi dari debugger Visual Studio Code sebelum Google Chat habis waktu, aplikasi Chat akan membalas dengan nama dan foto avatar Anda dalam pesan.

9. Anda dapat memeriksa log permintaan dan respons HTTP dari antarmuka web yang dihosting oleh aplikasi ngrok di lingkungan lokal Anda.

   

   Gambar 7. Permintaan HTTP dari antarmuka web yang dihosting oleh aplikasi ngrok.

10. Untuk mengubah perilaku aplikasi, ganti Hello dengan Hey inline 55 dari file HelloChat.java, mulai ulang proses mvnDebug, lalu luncurkan kembali Remote Debug Watch untuk melampirkan kembali dan memulai ulang proses debug.

11. Kali ini, daripada mengirim pesan kedua Hey! di ruang, Anda dapat memilih permintaan HTTP terakhir yang dicatat ke dalam log di antarmuka web yang dihosting oleh aplikasi ngrok di lingkungan lokal Anda, lalu klik Replay. Sama seperti terakhir kali, aplikasi Chat Anda tidak membalas karena sedang di-debug secara aktif.

12. Saat melanjutkan eksekusi dari debugger Visual Studio Code, Anda dapat melihat dari antarmuka web yang dihosting oleh aplikasi ngrok di lingkungan lokal bahwa aplikasi menghasilkan respons dengan versi pesan yang diperbarui.