Halaman ini diterjemahkan oleh Cloud Translation API.

Menguji dan men-debug Add-on Google Workspace HTTP

Sebagai developer Add-on Google Workspace, Anda mungkin perlu men-debug kode untuk menguji perubahan atau memecahkan masalah yang kompleks. Men-debug Add-on Google Workspace 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 Add-on Google Workspace HTTP 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 Add-on Google Workspace yang dijalankan di lingkungan lokal Anda.

Men-debug dari pengembangan lokal
lingkungan

Gambar 1. Lakukan debug di lingkungan pengembangan lokal.

Prasyarat

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
```
Project Google Cloud. Anda dapat mengikuti bagian Prasyarat, dan Siapkan lingkungan dari Panduan Memulai kami.
Kode Add-on Google Workspace untuk di-debug di kode lokal Anda lingkungan fleksibel App Engine. Kami menggunakan fitur link pratinjau dari contoh kode 3p-resources dari repositori GitHub googleworkspace/add-ons-samples dalam panduan ini untuk tujuan ilustrasi.
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.
Akun ngrok.
Versi terbaru gcloud diinstal dan diinisialisasi di lingkungan lokal yang relevan.

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.
Project Google Cloud. Anda dapat mengikuti bagian Prasyarat, dan Siapkan lingkungan dari Panduan Memulai kami.
Kode Add-on Google Workspace untuk di-debug di kode lokal Anda lingkungan fleksibel App Engine. Kami menggunakan fitur link pratinjau dari contoh kode 3p-resources dari repositori GitHub googleworkspace/add-ons-samples dalam panduan ini untuk tujuan ilustrasi.
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.
Akun ngrok.
Versi terbaru gcloud diinstal dan diinisialisasi di lingkungan lokal yang relevan.

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.
Project Google Cloud. Anda dapat mengikuti bagian Prasyarat, dan Siapkan lingkungan dari Panduan Memulai kami.
Kode Add-on Google Workspace untuk di-debug di kode lokal Anda lingkungan fleksibel App Engine. Kami menggunakan fitur link pratinjau dari contoh kode 3p-resources dari repositori GitHub googleworkspace/add-ons-samples dalam panduan ini untuk tujuan ilustrasi.
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.
Akun ngrok.
Versi terbaru gcloud diinstal dan diinisialisasi di lingkungan lokal yang relevan.

Membuat layanan localhost tersedia secara publik

Anda harus menghubungkan lingkungan lokal Anda ke internet sehingga Add-on Google Workspace 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 sebagai NGROK_STATIC_DOMAIN dalam petunjuk panduan ini.

Membuat dan menginstal deployment add-on

Konfigurasi Add-on Google Workspace untuk mengirim semua permintaan HTTP-nya ke domain statis. File deployment Anda akan terlihat seperti berikut:

{
  "oauthScopes": [
    "https://www.googleapis.com/auth/workspace.linkpreview",
    "https://www.googleapis.com/auth/workspace.linkcreate"
  ],
  "addOns": {
    "common": {
      "name": "Manage support cases",
      "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png",
      "layoutProperties": {
        "primaryColor": "#dd4b39"
      }
    },
    "docs": {
      "linkPreviewTriggers": [
        {
          "runFunction": "NGROK_STATIC_DOMAIN",
          "patterns": [
            {
              "hostPattern": "example.com",
              "pathPrefix": "support/cases"
            },
            {
              "hostPattern": "*.example.com",
              "pathPrefix": "cases"
            },
            {
              "hostPattern": "cases.example.com"
            }
          ],
          "labelText": "Support case",
          "localizedLabelText": {
            "es": "Caso de soporte"
          },
          "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png"
        }
      ],
      "createActionTriggers": [
        {
          "id": "createCase",
          "labelText": "Create support case",
          "localizedLabelText": {
            "es": "Crear caso de soporte"
          },
          "runFunction": "$URL2",
          "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png"
        }
      ]
    }
  }
}

Ganti NGROK_STATIC_DOMAIN dengan domain statis di akun ngrok.

Tetapkan project Google Cloud yang akan digunakan:
```
gcloud config set project PROJECT_ID
```
Dapatkan kredensial pengguna baru untuk digunakan pada Default Aplikasi Kredensial:
```
gcloud auth application-default login
```
Ganti PROJECT_ID dengan ID project untuk project Google Cloud aplikasi.

Buat deployment:

gcloud workspace-add-ons deployments create manageSupportCases \
    --deployment-file=DEPLOYMENT_FILE_PATH

Ganti DEPLOYMENT_FILE_PATH dengan jalur file deployment.

Instal deployment:

gcloud workspace-add-ons deployments install manageSupportCases

Add-on Google Workspace mengirimkan semua permintaan HTTP ke
domain statis

Gambar 2. Add-on Google Workspace mengirimkan semua permintaan HTTP ke domain statis. Layanan publik ngrok berfungsi sebagai jembatan antara Add-on Google Workspace dan kode aplikasi yang dijalankan secara lokal.

Menguji Add-on Google Workspace

Anda dapat men-deploy, menguji, men-debug, dan memuat ulang secara otomatis Add-on Google Workspace.

Node.js

Dari IDE Visual Studio Code yang diinstal di lingkungan lokal Anda, lakukan hal berikut:
1. Di jendela baru, buka folder add-ons-samples/node/3p-resources.
2. Mengonfigurasi aplikasi untuk operasi lokal dan pemuatan ulang otomatis dengan menambahkan satu dependensi dan dua skrip dalam file package.json:
```
{
    ...
    "dependencies": {
      ...
      "@google-cloud/functions-framework": "^3.3.0"
    },
    "scripts": {
        ...
        "start": "npx functions-framework --target=createLinkPreview --port=9000",
        "debug-watch": "nodemon --watch ./ --exec npm start"
    }
    ...
}
```
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.
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.
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.
Uji Add-on Google Workspace Anda dengan melihat pratinjau URL kasus di Dokumen Google dengan akun penguji:
- Buat Dokumen Google baru.
  
  Membuat Dokumen Google baru
- Ketik link berikut, lalu tekan enter:
```
https://example.com/support/case/?name=Name1&description=Description1&priority=P1
```
- Klik linknya.
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 Add-on Google Workspace kehabisan waktu Add-on Google Workspace menampilkan pratinjau link di Google Dokumen dari cache.
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 Case dengan Case: secara inline 51 dari index.js. Saat Anda menyimpan file, nodemon akan otomatis memuat ulang aplikasi dengan kode sumber yang diperbarui dan Visual Studio Code tetap dalam mode debug.

Gambar 8. Aplikasi berjalan dan memproses permintaan HTTP di port 9000 dengan perubahan kode dimuat.
Kali ini, alih-alih mengeklik tautan dan menunggu beberapa detik di dokumen Google baru, Anda dapat memilih permintaan HTTP terakhir yang dicatat di web antarmuka yang dihosting oleh aplikasi ngrok di lingkungan lokal Anda dan klik Replay. Sama seperti terakhir kali, Add-on Google Workspace 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 aplikasi ngrok di lingkungan lokal Anda di mana aplikasi menghasilkan respons dengan versi terbaru dari kartu pratinjau.

Python

Dari IDE Visual Studio Code yang diinstal di lingkungan lokal Anda, lakukan hal berikut:
1. Di jendela baru, buka folder add-ons-samples/python/3p-resources/create_link_preview.
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", "create_link_preview",
            "--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.
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.
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.
Uji Add-on Google Workspace Anda dengan melihat pratinjau URL kasus di Dokumen Google dengan akun penguji:
- Buat Dokumen Google baru.
  
  Membuat Dokumen Google baru
- Ketik link berikut, lalu tekan enter:
```
https://example.com/support/case/?name=Name1&description=Description1&priority=P1
```
- Klik linknya.
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 Add-on Google Workspace kehabisan waktu Add-on Google Workspace menampilkan pratinjau link di Google Dokumen dari cache.
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 Case dengan Case: inline 56 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.
Kali ini, alih-alih mengeklik tautan dan menunggu beberapa detik di dokumen Google baru, Anda dapat memilih permintaan HTTP terakhir yang dicatat di web antarmuka yang dihosting oleh aplikasi ngrok di lingkungan lokal Anda dan klik Replay. Sama seperti terakhir kali, Add-on Google Workspace 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 aplikasi ngrok di lingkungan lokal Anda di mana aplikasi menghasilkan respons dengan versi terbaru dari kartu pratinjau.

Java

Dari IDE Visual Studio Code yang diinstal di lingkungan lokal Anda, lakukan hal berikut:
1. Di jendela baru, buka folder add-ons-samples/java/3p-resources.
2. Mengonfigurasi project Maven untuk menjalankan aplikasi CreateLinkPreview pada port 9000 secara lokal dengan menambahkan Cloud Plugin build 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>CreateLinkPreview</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 CreateLinkPreview.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.
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.
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.
Uji Add-on Google Workspace Anda dengan melihat pratinjau URL kasus di Dokumen Google dengan akun penguji:
- Buat Dokumen Google baru.
  
  Membuat Dokumen Google baru
- Ketik link berikut, lalu tekan enter:
```
https://example.com/support/case/?name=Name1&description=Description1&priority=P1
```
- Klik linknya.
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 Add-on Google Workspace kehabisan waktu Add-on Google Workspace menampilkan pratinjau link di Google Dokumen dari cache.
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 Case dengan Case: inline 78 dari file CreateLinkPreview.java, mulai ulang mvnDebug proses lama, dan luncurkan kembali Remote Debug Watch untuk melampirkan kembali dan memulai ulang proses debug.
Kali ini, alih-alih mengeklik tautan dan menunggu beberapa detik di dokumen Google baru, Anda dapat memilih permintaan HTTP terakhir yang dicatat di web antarmuka yang dihosting oleh aplikasi ngrok di lingkungan lokal Anda dan klik Replay. Sama seperti terakhir kali, Add-on Google Workspace 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 aplikasi ngrok di lingkungan lokal Anda di mana aplikasi menghasilkan respons dengan versi terbaru dari kartu pratinjau.

Men-debug dari lingkungan jarak jauh

Di bagian ini, Anda akan berinteraksi dengan Add-on Google Workspace yang dijalankan di lingkungan jarak jauh.

Men-debug dari jarak jauh
lingkungan

Gambar 9. Melakukan debug dari lingkungan jarak jauh.

Prasyarat

Add-on Google Workspace Anda telah di-deploy dan diinstal.
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 meluncurkan Debug 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 relevan.

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.

Berinteraksilah dengan Add-on Google Workspace yang terinstal. Nama Add-on Google Workspace tidak membalas karena statusnya masih aktif di-debug di IDE Visual Studio Code.

Topik terkait

Pelajari cara mengkueri log error.