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.
Gambar 1. Lakukan debug di lingkungan pengembangan lokal.
Bengkel
Node.js
Python
Java
Prasyarat
Node.js
- Versi terbaru
node
dannpm
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 sepertihttp://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
- Versi terbaru
python3
diinstal di lingkungan lokal Anda. - Versi terbaru
pip
danvirtualenv
yang diinstal di lingkungan lokal Anda, masing-masing digunakan untuk mengelola paket Python dan lingkungan virtual. - 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 sepertihttp://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
. - 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 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 sepertihttp://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
. - Versi terbaru
gcloud
diinstal dan diinisialisasi di lingkungan lokal Anda.
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.
- Pada browser di lingkungan lokal Anda, login ke akun
ngrok
. - Instal aplikasi dan siapkan
authtoken
di lingkungan lokal Anda. - Buat domain statis di akun
ngrok
Anda, yang dirujuk sebagaiNGROK_STATIC_DOMAIN
dalam petunjuk panduan ini.
Mengonfigurasi aplikasi Chat
Konfigurasikan aplikasi Chat untuk mengirim semua permintaan HTTP ke domain statis Anda.
Di konsol Google Cloud, buka halaman Google Chat API:
Klik tab Configuration.
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 akunngrok
Anda.Klik Save.
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
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
Dari IDE
Visual Studio Code
yang diinstal di lingkungan lokal Anda, lakukan hal berikut:- Di jendela baru, buka folder
google-chat-samples/node/basic-app
. 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" } ... }
Dari direktori utama, instal aplikasi:
npm install
Buat dan konfigurasikan peluncuran bernama
Debug Watch
yang memicu skripdebug-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"] }] }
Tambahkan titik henti sementara yang menjeda pemrosesan permintaan HTTP dalam file
index.js
, dan mulai jalankan dan lakukan proses debug dengan konfigurasiDebug Watch
yang ditambahkan sebelumnya. Aplikasi kini berjalan dan memproses permintaan HTTP di port9000
.Gambar 3. Aplikasi berjalan dan memproses permintaan HTTP pada port
9000
.
- Di jendela baru, buka folder
Luncurkan aplikasi
ngrok
di lingkungan lokal Anda:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
Ganti
NGROK_STATIC_DOMAIN
dengan domain statis di akunngrok
Anda. Semua permintaan kini dialihkan ke lingkungan lokal Anda dan port yang digunakan oleh aplikasi.Gambar 4. Terminal dengan server
ngrok
yang berjalan dan mengalihkan.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
yang tidak menampilkan permintaan HTTP.Uji aplikasi Chat Anda dengan mengirimkan pesan langsung:
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 tekanenter
. Aplikasi Chat Anda tidak dibalas karena sedang di-debug secara aktif.
Pada
Visual Studio Code
di lingkungan lokal, Anda dapat melihat bahwa eksekusi dijeda pada titik henti sementara yang ditetapkan.Gambar 6. Eksekusi dijeda pada titik henti sementara yang ditetapkan.
Saat melanjutkan eksekusi dari debugger
Visual Studio Code
sebelum Google Chat kehabisan waktu, aplikasi Chat membalasYour message : Hello
.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
.Untuk mengubah perilaku aplikasi, ganti
Your message
denganHere was your message
35
inline dariindex.json
. Saat Anda menyimpan file ini,nodemon
akan otomatis memuat ulang aplikasi dengan kode sumber yang telah diperbarui danVisual Studio Code
akan tetap berada dalam mode debug.Gambar 8. Aplikasi berjalan dan memproses permintaan HTTP pada port
9000
dengan perubahan kode yang dimuat.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 aplikasingrok
di lingkungan lokal Anda, lalu mengklikReplay
. Sama seperti terakhir kali, aplikasi Chat Anda tidak membalas karena sedang di-debug secara aktif.Saat melanjutkan eksekusi dari debugger
Visual Studio Code
, Anda dapat melihat dari antarmuka web yang dihosting oleh aplikasingrok
di lingkungan lokal Anda bahwa aplikasi menghasilkan respons dengan versi pesanHere was your message : Hello
yang telah diupdate.
Python
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.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
Dari IDE
Visual Studio Code
yang diinstal di lingkungan lokal Anda, lakukan hal berikut:- Di jendela baru, buka folder
google-chat-samples/python/avatar-app
. Buat lingkungan virtual baru untuk Python
env
lalu aktifkan:virtualenv env
source env/bin/activate
Instal semua dependensi project menggunakan
pip
di lingkungan virtual:pip install -r requirements.txt
Buat file
.vscode/launch.json
di direktori utama dan konfigurasi peluncuran bernamaDebug Watch
yang memicu aplikasi dari modulfunctions-framework
pada port9000
dalam mode debug di lingkungan virtualenv
:{ "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" ] }] }
Tambahkan titik henti sementara yang menjeda pemrosesan permintaan HTTP dalam file
main.py
, dan mulai jalankan dan lakukan proses debug dengan konfigurasiDebug Watch
yang ditambahkan sebelumnya. Aplikasi kini berjalan dan memproses permintaan HTTP di port9000
.Gambar 3. Aplikasi berjalan dan memproses permintaan HTTP pada port
9000
.
- Di jendela baru, buka folder
Luncurkan aplikasi
ngrok
di lingkungan lokal Anda:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
Ganti
NGROK_STATIC_DOMAIN
dengan domain statis di akunngrok
Anda. Semua permintaan kini dialihkan ke lingkungan lokal Anda dan port yang digunakan oleh aplikasi.Gambar 4. Terminal dengan server
ngrok
yang berjalan dan mengalihkan.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
yang tidak menampilkan permintaan HTTP.Uji aplikasi Chat Anda dengan mengirimkan pesan langsung:
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 tekanenter
. Aplikasi Chat Anda tidak membalas karena sedang di-debug secara aktif.
Pada
Visual Studio Code
di lingkungan lokal, Anda dapat melihat bahwa eksekusi dijeda pada titik henti sementara yang ditetapkan.Gambar 6. Eksekusi dijeda pada titik henti sementara yang ditetapkan.
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.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
.Untuk mengubah perilaku aplikasi, ganti
Hello
denganHey
51
dari filemain.py
. Saat Anda menyimpan file,Visual Studio Code
akan otomatis memuat ulang aplikasi dengan kode sumber yang telah diperbarui dan tetap dalam mode debug.Gambar 8. Aplikasi berjalan dan memproses permintaan HTTP pada port
9000
dengan perubahan kode yang dimuat.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 aplikasingrok
di lingkungan lokal Anda, lalu mengklikReplay
. Sama seperti terakhir kali, aplikasi Chat Anda tidak membalas karena sedang di-debug secara aktif.Saat melanjutkan eksekusi dari debugger
Visual Studio Code
, Anda dapat melihat dari antarmuka web yang dihosting oleh aplikasingrok
di lingkungan lokal Anda bahwa aplikasi menghasilkan respons dengan versi pesan yang telah diupdate.
Java
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.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
Dari IDE
Visual Studio Code
yang diinstal di lingkungan lokal Anda, lakukan hal berikut:- Di jendela baru, buka folder
google-chat-samples/java/avatar-app
. Konfigurasikan project Maven untuk menjalankan aplikasi
HelloChat
di port9000
secara lokal dengan menambahkan plugin build Cloud Functions Frameworkfunction-maven-plugin
di filepom.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> ...
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
Buat file
.vscode/launch.json
di direktori utama dan konfigurasi peluncuran bernamaRemote Debug Watch
yang dilampirkan ke aplikasi yang sebelumnya diluncurkan dengan port8000
:{ "version": "0.2.0", "configurations": [{ "type": "java", "request": "attach", "name": "Remote Debug Watch", "projectName": "http-function", "hostName": "localhost", "port": 8000 }] }
Tambahkan titik henti sementara yang menjeda pemrosesan permintaan HTTP dalam file
HelloChat.java
, dan mulai melampirkan dan proses debug dengan konfigurasiRemote Debug Watch
yang ditambahkan sebelumnya. Aplikasi sekarang berjalan dan memproses permintaan HTTP pada port9000
.Gambar 3. aplikasi sedang berjalan dan memproses permintaan HTTP pada port
9000
.
- Di jendela baru, buka folder
Luncurkan aplikasi
ngrok
di lingkungan lokal Anda:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
Ganti
NGROK_STATIC_DOMAIN
dengan domain statis di akunngrok
Anda. Semua permintaan kini dialihkan ke lingkungan lokal Anda dan port yang digunakan oleh aplikasi.Gambar 4. Terminal dengan server
ngrok
yang berjalan dan mengalihkan.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
yang tidak menampilkan permintaan HTTP.Uji aplikasi Chat Anda dengan mengirimkan pesan langsung:
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 tekanenter
. Aplikasi Chat Anda tidak membalas karena sedang di-debug secara aktif.
Pada
Visual Studio Code
di lingkungan lokal, Anda dapat melihat bahwa eksekusi dijeda pada titik henti sementara yang ditetapkan.Gambar 6. Eksekusi dijeda pada titik henti sementara yang ditetapkan.
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.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
.Untuk mengubah perilaku aplikasi, ganti
Hello
denganHey
55
inline dari fileHelloChat.java
, mulai ulang prosesmvnDebug
, lalu luncurkan kembaliRemote Debug Watch
untuk melampirkan kembali dan memulai ulang proses debug.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 aplikasingrok
di lingkungan lokal Anda, lalu mengklikReplay
. Sama seperti terakhir kali, aplikasi Chat Anda tidak membalas karena sedang di-debug secara aktif.Saat melanjutkan eksekusi dari debugger
Visual Studio Code
, Anda dapat melihat dari antarmuka web yang dihosting oleh aplikasingrok
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.
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:
- Di jendela baru, buka kode sumber aplikasi Anda.
Buat file
.vscode/launch.json
di direktori utama dan konfigurasikan peluncuran bernamaDebug 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.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
.
Topik terkait
- Pelajari cara enable dan mengkueri log error.
- Pelajari cara memperbaiki error aplikasi Google Chat seperti "Aplikasi tidak merespons", "Google Chat API hanya tersedia untuk pengguna Google Workspace", atau "Pengguna dapat dikecualikan dari ruang".
- Pelajari cara memperbaiki error kartu seperti pesan kartu, dialog, atau pratinjau link yang tidak dirender atau berfungsi seperti yang diharapkan.