Men-debug aplikasi Google Chat

Sebagai developer aplikasi Google Chat, Anda mungkin perlu men-debug kode untuk menguji perubahan atau memecahkan masalah yang kompleks. Proses debug aplikasi Chat dapat dilakukan dengan berbagai cara, bergantung pada arsitektur aplikasi, fungsi aplikasi, cara aplikasi di-deploy, dan preferensi Anda.

Halaman ini menjelaskan cara men-debug aplikasi Chat HTTP menggunakan ngrok, yang merupakan platform masuk terpadu yang dapat Anda gunakan untuk menguji lingkungan pengembangan lokal. Dalam panduan ini, Anda akan menguji perubahan kode di lingkungan lokal dan memecahkan masalah di lingkungan jarak jauh.

Men-debug dari lingkungan pengembangan lokal

Di bagian ini, Anda akan berinteraksi dengan aplikasi Chat yang dijalankan di lingkungan lokal Anda.

Men-debug dari lingkungan
pengembangan lokal

Gambar 1. Lakukan debug di lingkungan pengembangan lokal.

Bengkel

Node.js

Python

Java

Prasyarat

Node.js

  • Versi terbaru node dan npm diinstal di lingkungan lokal Anda.
  • Versi terbaru nodemon yang diinstal di lingkungan lokal Anda digunakan untuk tujuan pemuatan ulang otomatis:

    npm install -g nodemon
    
  • Aplikasi HTTP Chat yang dikonfigurasikan untuk fitur pesan. Anda dapat mengikuti bagian Prasyarat, Menyiapkan lingkungan, dan Memublikasikan aplikasi ke Google Chat pada Panduan memulai. Satu-satunya perbedaan adalah Anda perlu menetapkan App name ke Debug App dan App URL ke nama seperti http://example.com.

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

  • Git diinstal di lingkungan lokal Anda.

  • Akun ngrok.

Python

Java

Membuat layanan localhost tersedia secara publik

Anda harus menghubungkan lingkungan lokal ke internet agar aplikasi Chat dapat mengaksesnya. Aplikasi ngrok digunakan untuk mengalihkan permintaan HTTP yang dibuat ke URL publik ke lingkungan lokal Anda.

  1. Pada browser di lingkungan lokal Anda, login ke akun ngrok.
  2. Instal aplikasi dan siapkan authtoken di lingkungan lokal Anda.
  3. Buat domain statis di akun ngrok Anda, yang dirujuk sebagai NGROK_STATIC_DOMAIN dalam petunjuk panduan ini.

Mengonfigurasi aplikasi Chat

Konfigurasikan aplikasi Chat untuk mengirim semua permintaan HTTP ke domain statis Anda.

  1. Di konsol Google Cloud, buka halaman Google Chat API:

    Buka halaman Google Chat API

  2. Klik tab Configuration.

  3. Buka Fitur interaktif > Setelan koneksi, lalu tetapkan nilai kolom teks URL Aplikasi ke:

    https://NGROK_STATIC_DOMAIN
    

    Ganti NGROK_STATIC_DOMAIN dengan domain statis di akun ngrok Anda.

  4. Klik Save.

Aplikasi Chat mengirimkan semua permintaan HTTP ke domain statis

Gambar 2. Aplikasi Chat mengirimkan semua permintaan HTTP-nya ke domain statis. Layanan publik ngrok berfungsi sebagai jembatan antara aplikasi Chat dan kode aplikasi yang dijalankan secara lokal.

Menguji aplikasi Chat

Anda dapat men-deploy, mengonfigurasi, menguji, men-debug, dan memuat ulang otomatis aplikasi Chat secara lokal.

Node.js

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

    git clone https://github.com/googleworkspace/google-chat-samples.git
    
  2. Dari IDE Visual Studio Code yang diinstal di lingkungan lokal Anda, lakukan hal berikut:

    1. Di jendela baru, buka folder google-chat-samples/node/basic-app.
    2. Konfigurasikan aplikasi agar 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 utama, instal aplikasi:

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

      {
          "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 kini berjalan dan memproses permintaan HTTP di port 9000.

      Aplikasi berjalan dan memproses permintaan HTTP pada port `9000`

      Gambar 3. Aplikasi 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.

    Terminal dengan server `ngrok` berjalan
dan mengalihkan

    Gambar 4. Terminal dengan server ngrok yang berjalan dan mengalihkan.

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

    Antarmuka web yang dihosting oleh aplikasi `ngrok` yang tidak menunjukkan permintaan HTTP

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

  5. Uji aplikasi Chat Anda dengan mengirimkan pesan langsung:

    • Buka Google Chat.

      Buka Google Chat

    • Klik Chat baru .

    • 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 dibalas 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.

    Eksekusi dijeda pada titik henti sementara yang
ditetapkan

    Gambar 6. Eksekusi dijeda pada titik henti sementara yang ditetapkan.

  7. Saat melanjutkan eksekusi dari debugger Visual Studio Code sebelum Google Chat kehabisan waktu, aplikasi Chat 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.

    Permintaan HTTP dari antarmuka web yang dihosting oleh aplikasi `ngrok`

    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 telah diperbarui dan Visual Studio Code akan tetap berada dalam mode debug.

    Aplikasi berjalan dan memproses permintaan HTTP di port
`9000` dengan perubahan kode
yang dimuat

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

  10. Kali ini, daripada mengirim pesan kedua Hello dalam 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 mengklik 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 Anda bahwa aplikasi menghasilkan respons dengan versi pesan Here was your message : Hello yang telah diupdate.

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 yang berisi kode aplikasi:

    git clone https://github.com/googleworkspace/google-chat-samples.git
    
  3. Dari IDE Visual Studio Code 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 lalu 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 konfigurasi 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 kini berjalan dan memproses permintaan HTTP di port 9000.

      Aplikasi berjalan dan memproses permintaan HTTP pada port `9000`

      Gambar 3. Aplikasi 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.

    Terminal dengan server `ngrok` berjalan
dan mengalihkan

    Gambar 4. Terminal dengan server ngrok yang berjalan dan mengalihkan.

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

    Antarmuka web yang dihosting oleh aplikasi `ngrok` yang tidak menunjukkan permintaan HTTP

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

  6. Uji aplikasi Chat Anda dengan mengirimkan pesan langsung:

    • Buka Google Chat.

      Buka Google Chat

    • Klik Chat baru .

    • 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.

    Eksekusi dijeda pada titik henti sementara yang
ditetapkan

    Gambar 6. Eksekusi dijeda pada titik henti sementara yang ditetapkan.

  8. Saat Anda melanjutkan eksekusi dari debugger Visual Studio Code sebelum Google Chat kehabisan waktu, aplikasi Chat dibalas 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.

    Permintaan HTTP dari antarmuka web yang dihosting oleh aplikasi `ngrok`

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

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

    Aplikasi berjalan dan memproses permintaan HTTP di port
`9000` dengan perubahan kode
yang dimuat

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

  11. Kali ini, daripada mengirim pesan kedua Hey! dalam 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 mengklik 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 Anda bahwa aplikasi menghasilkan respons dengan versi pesan yang telah diupdate.

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, yang berisi kode aplikasi:

    git clone https://github.com/googleworkspace/google-chat-samples.git
    
  3. Dari IDE Visual Studio Code 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 di 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 konfigurasi 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 proses debug dengan konfigurasi Remote Debug Watch yang ditambahkan sebelumnya. Aplikasi sekarang berjalan dan memproses permintaan HTTP pada port 9000.

      Aplikasi 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.

    Terminal dengan server `ngrok` berjalan
dan mengalihkan

    Gambar 4. Terminal dengan server ngrok yang berjalan dan mengalihkan.

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

    Antarmuka web yang dihosting oleh aplikasi `ngrok` yang tidak menunjukkan permintaan HTTP

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

  6. Uji aplikasi Chat Anda dengan mengirimkan pesan langsung:

    • Buka Google Chat.

      Buka Google Chat

    • Klik Chat baru .

    • 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.

    Eksekusi dijeda pada titik henti sementara yang
ditetapkan

    Gambar 6. Eksekusi dijeda pada titik henti sementara yang ditetapkan.

  8. Saat Anda melanjutkan eksekusi dari debugger Visual Studio Code sebelum Google Chat kehabisan waktu, aplikasi Chat dibalas 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.

    Permintaan HTTP dari antarmuka web yang dihosting oleh aplikasi `ngrok`

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

  10. Untuk mengubah perilaku aplikasi, ganti Hello dengan Hey 55 inline 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! dalam 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 mengklik 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 Anda bahwa aplikasi menghasilkan respons dengan versi pesan yang telah diupdate.

Men-debug dari lingkungan jarak jauh

Di bagian ini, Anda akan berinteraksi dengan aplikasi Chat yang dijalankan di lingkungan jarak jauh.

Men-debug dari lingkungan
jarak jauh

Gambar 9. Melakukan debug dari lingkungan jarak jauh.

Prasyarat

  • Ruang pesan langsung dengan aplikasi Chat Anda. Anda dapat mengikuti bagian Menguji aplikasi Chat di Panduan memulai dan menelusuri aplikasi Chat untuk memulainya.
  • Aplikasi yang berjalan di lingkungan jarak jauh dengan debugger yang diaktifkan pada port tertentu, akan dirujuk sebagai REMOTE_DEBUG_PORT dalam petunjuk panduan ini.
  • Lingkungan lokal Anda dapat melakukan ssh ke lingkungan jarak jauh Anda.
  • IDE yang disiapkan di lingkungan lokal Anda yang dapat di-debug. Kami menggunakan Visual Studio Code IDE dan fitur proses debug defaultnya dalam panduan ini untuk tujuan ilustrasi.

Menghubungkan lingkungan lokal dan jarak jauh Anda

Di lingkungan lokal tempat Anda ingin memulai koneksi klien debug, siapkan tunnel SSH:

ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS

Ganti kode berikut:

  • LOCAL_DEBUG_PORT: Port debug di lingkungan lokal Anda.
  • REMOTE_USERNAME: Nama pengguna di lingkungan jarak jauh Anda.
  • REMOTE_ADDRESS: Alamat lingkungan jarak jauh Anda.
  • REMOTE_DEBUG_PORT: Port debug di lingkungan jarak jauh Anda.

Port debug di lingkungan lokal Anda kini ditautkan ke port debug di lingkungan jarak jauh Anda.

Memulai proses debug

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

  1. Di jendela baru, buka kode sumber aplikasi Anda.
  2. Buat file .vscode/launch.json di direktori utama dan konfigurasikan peluncuran bernama Debug Remote yang dilampirkan ke port debug di lingkungan lokal Anda:

    Node.js

    {
        "version": "0.2.0",
        "configurations": [{
            "type": "node",
            "request": "attach",
            "name": "Debug Remote",
            "address": "127.0.0.1",
            "port": LOCAL_DEBUG_PORT
        }]
    }
    

    Python

    {
        "version": "0.2.0",
        "configurations": [{
            "type": "python",
            "request": "attach",
            "name": "Debug Remote",
            "connect": {
                "host": "127.0.0.1",
                "port": LOCAL_DEBUG_PORT
            }
        }]
    }
    

    Java

    {
        "version": "0.2.0",
        "configurations": [{
            "type": "java",
            "request": "attach",
            "name": "Debug Remote",
            "hostName": "127.0.0.1",
            "port": LOCAL_DEBUG_PORT
        }]
    }
    

    Ganti LOCAL_DEBUG_PORT dengan port debug di lingkungan lokal Anda.

  3. Tambahkan titik henti sementara dalam kode sumber aplikasi yang menjeda pemrosesan permintaan HTTP, lalu mulai jalankan dan proses debug dengan konfigurasi Debug Remote yang ditambahkan sebelumnya.

Di ruang pesan langsung dengan aplikasi Chat Anda, ketik apa pun yang ingin diuji, lalu tekan enter. Aplikasi Chat Anda tidak membalas karena sedang di-debug secara aktif di IDE Visual Studio Code.