Men-debug aplikasi Google Chat

Node.js

Python

Java

Node.js

• node dan npm 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 App URL ke file apa pun seperti http://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 dan virtualenv 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 seperti http://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 seperti http://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.

Node.js

1. Clone repositori googleworkspace/google-chat-samples dari GitHub ke lingkungan lokal Anda, berisi kode aplikasi untuk execute:

   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. 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"
          }
          ...
      }
      

   3. Dari direktori utama, instal aplikasi:

      npm install

   4. Membuat dan mengonfigurasi peluncuran bernama Debug Watch yang memicu skrip debug-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"]
          }]
      }
      

   5. Tambahkan titik henti sementara yang menjeda pemrosesan permintaan HTTP di index.js, lalu mulai jalankan dan proses debug dengan Konfigurasi Debug Watch ditambahkan sebelumnya. Aplikasi ini kini yang menjalankan dan memproses permintaan HTTP pada port 9000.

      

      Gambar 3. Aplikasi berjalan dan memproses HTTP permintaan 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 permintaan lokal Anda lingkungan dan porta yang digunakan oleh aplikasi.

   

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

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

5. Menguji aplikasi Chat Anda dengan mengirimkan permintaan pesan:

   • Buka Google Chat.

     Buka Google Chat

   • Klik Chat baru add.

   • Dalam dialog, masukkan nama Aplikasi Chat.

   • Di hasil penelusuran, temukan aplikasi Chat Anda, klik Tambahkan &gt; Chat.

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

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

7. Saat Anda 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.

   

   Gambar 7. Permintaan HTTP dari antarmuka web yang di-host oleh Aplikasi ngrok.

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

   

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

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

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

Python

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

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

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. Menginstal semua dependensi project menggunakan pip di lingkungan:

      pip install -r requirements.txt

   4. Buat file .vscode/launch.json di direktori root dan mengonfigurasi peluncuran bernama Debug Watch yang memicu aplikasi dari modul functions-framework pada port 9000 dalam mode debug pada 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", "avatar_app",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      

   5. Tambahkan titik henti sementara yang menjeda pemrosesan permintaan HTTP di main.py, lalu mulai jalankan dan proses debug dengan Konfigurasi Debug Watch ditambahkan sebelumnya. Aplikasi ini kini yang menjalankan dan memproses permintaan HTTP pada port 9000.

      

      Gambar 3. Aplikasi berjalan dan memproses HTTP permintaan 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 permintaan lokal Anda lingkungan dan porta yang digunakan oleh aplikasi.

   

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

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

6. Menguji aplikasi Chat Anda dengan mengirimkan permintaan pesan:

   • Buka Google Chat.

     Buka Google Chat

   • Klik Chat baru add.

   • Dalam dialog, masukkan nama Aplikasi Chat.

   • Di hasil penelusuran, temukan aplikasi Chat Anda, klik Tambahkan &gt; Chat.

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

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

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

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 di-host oleh Aplikasi ngrok.

10. Untuk mengubah perilaku aplikasi, ganti Hello dengan Hey secara inline 51 dari file main.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.

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

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

Java

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

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

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. Mengonfigurasi project Maven untuk menjalankan aplikasi App di port 9000 secara lokal dengan menambahkan build Framework Cloud Functions plugin function-maven-plugin dalam file 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. 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 root dan mengonfigurasi 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 di file App.java, dan mulailah melampirkan dan proses debug dengan Konfigurasi Remote Debug Watch ditambahkan sebelumnya. Aplikasi ini kini berjalan dan memproses permintaan HTTP pada port 9000.

      

      Gambar 3. aplikasi berjalan dan memproses HTTP permintaan 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 permintaan lokal Anda lingkungan dan porta yang digunakan oleh aplikasi.

   

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

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

6. Menguji aplikasi Chat Anda dengan mengirimkan permintaan pesan:

   • Buka Google Chat.

     Buka Google Chat

   • Klik Chat baru add.

   • Dalam dialog, masukkan nama Aplikasi Chat.

   • Di hasil penelusuran, temukan aplikasi Chat Anda, klik Tambahkan &gt; Chat.

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

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

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

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 di-host oleh Aplikasi ngrok.

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

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

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