Sebagai developer aplikasi Google Chat, Anda mungkin perlu men-debug kode untuk menguji perubahan atau memecahkan masalah yang kompleks. Melakukan proses debug aplikasi Chat dapat dilakukan dengan berbagai cara tergantung pada arsitektur aplikasi Anda, apa aplikasi, cara aplikasi di-deploy, dan preferensi Anda.
Halaman ini menjelaskan cara men-debug aplikasi HTTP Chat menggunakan ngrok, yaitu platform masuk terpadu yang dapat Anda gunakan untuk menguji lingkungan pengembangan lainnya. Dalam panduan ini, Anda akan menguji perubahan kode dalam 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.
Workshop
Node.js
Python
Java
Prasyarat
Node.js
node
dannpm
versi terbaru diinstal di lingkungan lokal Anda.Versi terbaru
nodemon
diinstal di lokal Anda ini digunakan untuk tujuan pemuatan ulang otomatis:npm install -g nodemon
Aplikasi HTTP Chat yang dikonfigurasi untuk untuk mengirim pesan. Anda dapat mengikuti bagian Prasyarat, Siapkan lingkungan, dan Publikasikan aplikasi ke Google Chat dari Panduan memulai. Satu-satunya perbedaannya, Anda perlu menetapkan App name ke
Debug App
dan URL Aplikasi ke apa pun sepertihttp://example.com
.IDE yang disiapkan di lingkungan lokal Anda yang dapat di-debug. Kita menggunakan
Visual Studio Code
IDE dan default-nya fitur proses debug di 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
diinstal di lingkungan lokal, mereka digunakan untuk mengelola paket Python dan lingkungan virtual lingkungan masing-masing. - Aplikasi HTTP Chat yang
dikonfigurasi untuk
untuk mengirim pesan. Anda dapat mengikuti bagian
Prasyarat,
Siapkan
lingkungan,
dan Publikasikan aplikasi ke Google
Chat dari
Panduan memulai. Satu-satunya
perbedaannya, Anda perlu menetapkan App name ke
Debug App
dan URL Aplikasi ke apa pun sepertihttp://example.com
. - IDE yang disiapkan di lingkungan lokal Anda yang dapat di-debug. Kita menggunakan
Visual Studio Code
IDE dan default-nya fitur proses debug di panduan ini untuk tujuan ilustrasi. Git
diinstal di lingkungan lokal Anda.- Akun
ngrok
. - Versi terbaru
gcloud
diinstal dan diinisialisasi di lingkungan lokal yang fleksibel.
Java
- Versi stabil terbaru
Java SE 11's JDK
diinstal di jaringan lokal Anda lingkungan fleksibel App Engine. - Versi terbaru
Apache Maven
diinstal di lingkungan lokal Anda, yang digunakan untuk mengelola proyek Java. - Aplikasi HTTP Chat yang
dikonfigurasi untuk
untuk mengirim pesan. Anda dapat mengikuti bagian
Prasyarat,
Siapkan
lingkungan,
dan Publikasikan aplikasi ke Google
Chat dari
Panduan memulai. Satu-satunya
perbedaannya, Anda perlu menetapkan App name ke
Debug App
dan URL Aplikasi ke apa pun sepertihttp://example.com
. - IDE yang disiapkan di lingkungan lokal Anda yang dapat di-debug. Kita menggunakan
Visual Studio Code
IDE dan default-nya fitur proses debug di panduan ini untuk tujuan ilustrasi. Git
diinstal di lingkungan lokal Anda.- Akun
ngrok
. - Versi terbaru
gcloud
diinstal dan diinisialisasi di lingkungan lokal yang fleksibel.
Membuat layanan localhost tersedia secara publik
Anda harus menghubungkan lingkungan
lokal Anda ke internet sehingga
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 lingkungan fleksibel. - Buat domain statis di
akun
ngrok
, ini dirujuk sebagaiNGROK_STATIC_DOMAIN
dalam petunjuk panduan ini.
Mengonfigurasi aplikasi Chat
Mengonfigurasi aplikasi Chat untuk mengirim semua permintaan HTTP-nya ke domain statis.
Di konsol Google Cloud, buka halaman Google Chat API:
Klik tab Configuration.
Buka Interactive features > Setelan koneksi dan tetapkan nilai kolom teks URL Aplikasi ke:
https://NGROK_STATIC_DOMAIN
Ganti
NGROK_STATIC_DOMAIN
dengan domain statis di akunngrok
Anda.Klik Simpan.
Gambar 2. Aplikasi Chat mengirimkan semua permintaan HTTP
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 secara otomatis Aplikasi Chat.
Node.js
Clone repositori
googleworkspace/google-chat-samples
dari GitHub ke lingkungan lokal Anda, berisi kode aplikasi untuk jalankan: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
. Mengonfigurasi 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" } ... }
Dari direktori utama, instal aplikasi:
npm install
Membuat dan mengonfigurasi peluncuran bernama
Debug Watch
yang memicu skripdebug-watch
dengan membuat file.vscode/launch.json
di direktori {i>root<i}:{ "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 di
index.js
, lalu mulai jalankan dan proses debug dengan KonfigurasiDebug Watch
ditambahkan sebelumnya. Aplikasi ini kini yang menjalankan dan memproses permintaan HTTP pada port9000
.Gambar 3. Aplikasi berjalan dan memproses HTTP permintaan 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 permintaan lokal Anda lingkungan dan porta yang digunakan oleh aplikasi.Gambar 4. Terminal dengan server
ngrok
yang berjalan dan mengalihkan.Antarmuka web juga dimulai di localhost Anda oleh
ngrok
Anda dapat memantau semua aktivitas dengan membukanya di browser.Gambar 5. Antarmuka web yang dihosting oleh aplikasi
ngrok
tidak menunjukkan permintaan HTTP.Menguji aplikasi Chat Anda dengan mengirimkan permintaan pesan:
Buka Google Chat.
Klik Chat baru
.Dalam dialog, masukkan nama Aplikasi Chat.
Di hasil penelusuran, temukan aplikasi Chat Anda, klik Tambahkan > Chat.
Di ruang pesan langsung, ketik
Hello
, lalu tekanenter
. Nama Aplikasi Chat tidak membalas karena sedang di-debug secara aktif.
Di
Visual Studio Code
di lingkungan lokal Anda, Anda dapat melihat bahwa eksekusi akan dijeda pada titik henti sementara yang telah 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 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 di-host oleh Aplikasi
ngrok
.Untuk mengubah perilaku aplikasi, ganti
Your message
denganHere was your message
inline35
dariindex.json
. Saat Anda menyimpan file,nodemon
akan otomatis memuat ulang aplikasi dengan kode sumber yang diupdate danVisual Studio Code
tetap berada dalam mode debug.Gambar 8. Aplikasi berjalan dan memproses permintaan HTTP di port
9000
dengan perubahan kode dimuat.Kali ini, alih-alih mengirim pesan kedua
Hello
dalam ruang, Anda dapat memilih permintaan HTTP terakhir yang dicatat di antarmuka web yang dihosting oleh aplikasingrok
di lingkungan lokal Anda dan klikReplay
. Sama seperti terakhir kali, aplikasi Chat Anda tidak membalas karena sedang di-debug secara aktif.Saat Anda melanjutkan eksekusi dari debugger
Visual Studio Code
Anda dapat melihat dari antarmuka web yang dihosting oleh aplikasingrok
di lingkungan lokal Anda di mana aplikasi menghasilkan respons dengan versi terbaru dari pesanHere was your message : Hello
.
Python
Dapatkan kredensial pengguna baru untuk digunakan pada Default Aplikasi Kredensial:
gcloud config set project PROJECT_ID
gcloud auth application-default login
Ganti
PROJECT_ID
dengan ID project untuk project Cloud aplikasi.Clone repositori
googleworkspace/google-chat-samples
dari GitHub ke lingkungan lokal Anda, 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
Menginstal semua dependensi project menggunakan
pip
di lingkungan:pip install -r requirements.txt
Buat file
.vscode/launch.json
di direktori root dan mengonfigurasi peluncuran bernamaDebug Watch
yang memicu aplikasi dari modulfunctions-framework
pada port9000
dalam mode debug pada lingkungan virtualenv
:{ "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" ] }] }
Tambahkan titik henti sementara yang menjeda pemrosesan permintaan HTTP di
main.py
, lalu mulai jalankan dan proses debug dengan KonfigurasiDebug Watch
ditambahkan sebelumnya. Aplikasi ini kini yang menjalankan dan memproses permintaan HTTP pada port9000
.Gambar 3. Aplikasi berjalan dan memproses HTTP permintaan 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 permintaan lokal Anda lingkungan dan porta yang digunakan oleh aplikasi.Gambar 4. Terminal dengan server
ngrok
yang berjalan dan mengalihkan.Antarmuka web juga dimulai di localhost Anda oleh
ngrok
Anda dapat memantau semua aktivitas dengan membukanya di browser.Gambar 5. Antarmuka web yang dihosting oleh aplikasi
ngrok
tidak menunjukkan permintaan HTTP.Menguji aplikasi Chat Anda dengan mengirimkan permintaan pesan:
Buka Google Chat.
Klik Chat baru
.Dalam dialog, masukkan nama Aplikasi Chat.
Di hasil penelusuran, temukan aplikasi Chat Anda, klik Tambahkan > Chat.
Di ruang pesan langsung, ketik
Hey!
, lalu tekanenter
. Nama Aplikasi Chat tidak membalas karena sedang di-debug secara aktif.
Di
Visual Studio Code
di lingkungan lokal Anda, Anda dapat melihat bahwa eksekusi akan dijeda pada titik henti sementara yang telah 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 membalas 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 di-host oleh Aplikasi
ngrok
.Untuk mengubah perilaku aplikasi, ganti
Hello
denganHey
secara inline51
dari filemain.py
. Saat Anda menyimpan file,Visual Studio Code
secara otomatis memuat ulang aplikasi dengan kode sumber yang diperbarui dan tetap berada dalam mode debug.Gambar 8. Aplikasi berjalan dan memproses permintaan HTTP di port
9000
dengan perubahan kode dimuat.Kali ini, alih-alih mengirim pesan kedua
Hey!
dalam ruang, Anda dapat memilih permintaan HTTP terakhir yang dicatat di antarmuka web yang dihosting oleh aplikasingrok
di lingkungan lokal Anda dan klikReplay
. Sama seperti terakhir kali, aplikasi Chat Anda tidak membalas karena sedang di-debug secara aktif.Saat Anda melanjutkan eksekusi dari debugger
Visual Studio Code
Anda dapat melihat dari antarmuka web yang dihosting oleh aplikasingrok
di lingkungan lokal Anda di mana aplikasi menghasilkan respons dengan versi pesan yang diperbarui.
Java
Dapatkan kredensial pengguna baru untuk digunakan pada Default Aplikasi Kredensial:
gcloud config set project PROJECT_ID
gcloud auth application-default login
Ganti
PROJECT_ID
dengan ID project untuk project Cloud aplikasi.Clone repositori
googleworkspace/google-chat-samples
dari GitHub di lingkungan lokal Anda, file ini 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
. Mengonfigurasi project Maven untuk menjalankan aplikasi
App
di port9000
secara lokal dengan menambahkan build Framework Cloud Functions pluginfunction-maven-plugin
dalam filepom.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> ...
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 root dan mengonfigurasi 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 di file
App.java
, dan mulailah melampirkan dan proses debug dengan KonfigurasiRemote Debug Watch
ditambahkan sebelumnya. Aplikasi ini kini berjalan dan memproses permintaan HTTP pada port9000
.Gambar 3. aplikasi berjalan dan memproses HTTP permintaan 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 permintaan lokal Anda lingkungan dan porta yang digunakan oleh aplikasi.Gambar 4. Terminal dengan server
ngrok
yang berjalan dan mengalihkan.Antarmuka web juga dimulai di localhost Anda oleh
ngrok
Anda dapat memantau semua aktivitas dengan membukanya di browser.Gambar 5. Antarmuka web yang dihosting oleh aplikasi
ngrok
tidak menunjukkan permintaan HTTP.Menguji aplikasi Chat Anda dengan mengirimkan permintaan pesan:
Buka Google Chat.
Klik Chat baru
.Dalam dialog, masukkan nama Aplikasi Chat.
Di hasil penelusuran, temukan aplikasi Chat Anda, klik Tambahkan > Chat.
Di ruang pesan langsung, ketik
Hey!
, lalu tekanenter
. Nama Aplikasi Chat tidak membalas karena sedang di-debug secara aktif.
Di
Visual Studio Code
di lingkungan lokal Anda, Anda dapat melihat bahwa eksekusi akan dijeda pada titik henti sementara yang telah 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 membalas 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 di-host oleh Aplikasi
ngrok
.Untuk mengubah perilaku aplikasi, ganti
Hello
denganHey
secara inline55
dari fileApp.java
, mulai ulang prosesmvnDebug
, lalu luncurkan kembaliRemote Debug Watch
untuk lampirkan kembali dan memulai ulang proses debug.Kali ini, alih-alih mengirim pesan kedua
Hey!
dalam ruang, Anda dapat memilih permintaan HTTP terakhir yang dicatat di antarmuka web yang dihosting oleh aplikasingrok
di lingkungan lokal Anda dan klikReplay
. Sama seperti terakhir kali, aplikasi Chat Anda tidak membalas karena sedang di-debug secara aktif.Saat Anda melanjutkan eksekusi dari debugger
Visual Studio Code
Anda dapat melihat dari antarmuka web yang dihosting oleh aplikasingrok
di lingkungan lokal Anda di mana aplikasi menghasilkan respons dengan versi pesan yang diperbarui.
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 ikuti bagian Menguji aplikasi Chat Anda Panduan memulai dan telusuri aplikasi Chat.
- Aplikasi yang berjalan di lingkungan jarak jauh dengan debugger
diaktifkan di porta tertentu, itu disebut 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. Kita menggunakan
Visual Studio Code
IDE dan default-nya fitur proses debug di panduan untuk tujuan ilustrasi.
Menghubungkan lingkungan lokal dan jarak jauh Anda
Di lingkungan lokal tempat Anda ingin memulai 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 port lokal Anda lingkungan fleksibel App Engine.REMOTE_USERNAME
: Nama pengguna di lingkungan jarak jauh Anda.REMOTE_ADDRESS
: Alamat lingkungan jarak jauh Anda.REMOTE_DEBUG_PORT
: Port debug di remote Anda lingkungan fleksibel App Engine.
Port debug di lingkungan lokal Anda kini ditautkan ke port debug di lingkungan jarak jauh.
Memulai proses debug
Dari IDE Visual Studio Code
yang diinstal di lingkungan lokal Anda, lakukan perintah
berikut ini:
- Di jendela baru, buka kode sumber aplikasi Anda.
Buat file
.vscode/launch.json
di direktori root dan konfigurasikan meluncurkanDebug Remote
bernama yang terhubung ke port debug di port lokal Anda lingkungan: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 yang fleksibel.Tambahkan titik henti sementara dalam kode sumber aplikasi yang menjeda permintaan HTTP diproses, 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 Anda uji, lalu tekan enter
. Nama
Aplikasi Chat tidak membalas karena sedang aktif
di-debug
di IDE Visual Studio Code
.
Topik terkait
- Pelajari cara mengaktifkan dan log error query.
- Pelajari cara memperbaiki aplikasi Google Chat error 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 tidak dirender atau berfungsi seperti yang diharapkan.