Testowanie i debugowanie dodatków HTTP do Google Workspace

Jako programista dodatków do Google Workspace być może musisz debugować kod, aby: testować zmiany i rozwiązywać złożone problemy. Debugowanie dodatków do Google Workspace można przeprowadzić na wiele różnych sposobów w zależności od architektury aplikacji, jak działa aplikacja, jak jest wdrożona i jakie są ustawienia.

Na tej stronie wyjaśniamy, jak debugować dodatek HTTP do Google Workspace za pomocą ngrok, czyli ujednoliconą platformę ruchu przychodzącego, której można używać do testowania rozwiązań lokalnych środowiska programistycznego. W tym przewodniku testujesz zmiany w kodzie i rozwiązywać problemy w środowisku zdalnym.

Debuguj z lokalnego środowiska programistycznego

W tej sekcji korzystasz z dodatku do Google Workspace, który będzie wykonywane w środowisku lokalnym.

Rysunek 1. Debuguj w lokalnym środowisku programistycznym.

Wymagania wstępne

Node.js

• Najnowsze wersje aplikacji node i npm zainstalowana w Twoim lokalnym środowisku.

• Najnowsza wersja aplikacji nodemon zainstalowana w Twoim regionie jest używany do automatycznego ponownego wczytywania:

  npm install -g nodemon
  

• Projekt Google Cloud – Możesz obserwować Wymagania wstępne i Skonfiguruj w krótkim wprowadzeniu .

• Kod dodatku Google Workspace do debugowania w Twoim regionie dla środowiska. Korzystamy z funkcji linku do podglądu z przykładowego kodu 3p-resources z repozytorium GitHub googleworkspace/add-ons-samples. w tym przewodniku.

• IDE skonfigurowane w środowisku lokalnym z możliwością debugowania. Wykorzystujemy Visual Studio Code IDE i jego środowisko domyślne debugowania funkcji w w tym przewodniku.

• konto ngrok,

• Najnowsza wersja aplikacji gcloud zainstalowano i zainicjowane w w środowisku lokalnym.

Python

• Najnowsza wersja aplikacji python3 zainstalowano w Twoim lokalnym środowisku.
• Najnowsza wersja pip oraz Aplikacja virtualenv została zainstalowana w lokalnym środowisku, służą do zarządzania pakietami Pythona oraz środowisk Google Cloud.
• Projekt Google Cloud – Możesz obserwować Wymagania wstępne i Skonfiguruj w krótkim wprowadzeniu .
• Kod dodatku Google Workspace do debugowania w lokalnym środowisku dla środowiska. Korzystamy z funkcji linku do podglądu z przykładowego kodu 3p-resources z repozytorium GitHub googleworkspace/add-ons-samples. w tym przewodniku.
• IDE skonfigurowane w środowisku lokalnym z możliwością debugowania. Wykorzystujemy Visual Studio Code IDE i jego środowisko domyślne debugowania funkcji w w tym przewodniku.
• konto ngrok,
• Najnowsza wersja aplikacji gcloud zainstalowano i zainicjowane w w środowisku lokalnym.

Java

• Najnowsza stabilna wersja aplikacji Java SE 11's JDK zainstalowana lokalnie dla środowiska.
• Najnowsza wersja aplikacji Apache Maven jest zainstalowana w Twoim środowisku lokalnym, służy do zarządzania projektami Java.
• Projekt Google Cloud – Możesz obserwować Wymagania wstępne i Skonfiguruj w krótkim wprowadzeniu .
• Kod dodatku Google Workspace do debugowania w lokalnym środowisku dla środowiska. Korzystamy z funkcji linku do podglądu z przykładowego kodu 3p-resources z repozytorium GitHub googleworkspace/add-ons-samples. w tym przewodniku.
• IDE skonfigurowane w środowisku lokalnym z możliwością debugowania. Wykorzystujemy Visual Studio Code IDE i jego środowisko domyślne debugowania funkcji w w tym przewodniku.
• konto ngrok,
• Najnowsza wersja aplikacji gcloud zainstalowano i zainicjowane w w środowisku lokalnym.

Udostępnij usługę lokalnego hosta publicznie

Musisz połączyć lokalne środowisko z internetem, aby Dodatek do Google Workspace ma do niego dostęp. Używana jest aplikacja ngrok do przekierowywania żądań HTTP wysyłanych na publiczny adres URL do Twojego środowiska lokalnego.

1. W przeglądarce w środowisku lokalnym zaloguj się na konto ngrok.
2. Zainstaluj aplikację i skonfiguruj urządzenie authtoken w Twoim regionie. i środowisko.
3. Utwórz domenę statyczną w ngrok, nosi ono nazwę NGROK_STATIC_DOMAIN omówione w instrukcjach w tym przewodniku.

Tworzenie i instalowanie wdrożenia dodatku

1. Skonfiguruj dodatek do Google Workspace tak, aby wysyłał wszystkie żądania HTTP do: domenę statyczną. Plik wdrożenia powinien wyglądać tak:

   {
     "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"
           }
         ]
       }
     }
   }
   

   Zastąp NGROK_STATIC_DOMAIN domeną statyczną w ngrok.

2. Ustaw w projekcie Google Cloud użycie:

   gcloud config set project PROJECT_ID
   

3. Uzyskiwanie nowych danych logowania użytkownika na potrzeby ustawienia Ustawienie domyślne aplikacji Dane logowania:

   gcloud auth application-default login
   

   Zamień PROJECT_ID na identyfikator projektu dla projektu aplikacji Google Cloud.

4. Utwórz wdrożenie:

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

   Zastąp DEPLOYMENT_FILE_PATH ścieżką Twojego pliku plik wdrożenia.

5. Zainstaluj wdrożenie:

   gcloud workspace-add-ons deployments install manageSupportCases
   

Rysunek 2. Dodatek do Google Workspace wysyła wszystkie żądania HTTP do domeny statycznej. Służba publiczna ngrok jest pomostem między Dodatek do Google Workspace i uruchamiany kod aplikacji lokalnie.

Testowanie dodatku do Google Workspace

Możesz lokalnie wdrażać, testować, debugować i automatycznie ładować ponownie Dodatek do Google Workspace.

Uwaga: dodatek do Google Workspace działa w Cloud Functions

Node.js

1. Z IDE Visual Studio Code zainstalowanego w Twoim środowisku lokalnym wykonaj te czynności:

   1. Otwórz folder w nowym oknie add-ons-samples/node/3p-resources

   2. Skonfiguruj aplikację pod kątem lokalnego uruchamiania i automatycznego ponownego ładowania debugowania przez dodaj jedną zależność i 2 skrypty w pliku 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. Zainstaluj aplikację z katalogu głównego:

      npm install
      

   4. Utwórz i skonfiguruj uruchomienie o nazwie Debug Watch, które aktywuje skrypt debug-watch przez utworzenie pliku .vscode/launch.json w katalogu głównym:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "node",
              "request": "launch",
              "name": "Debug Watch",
              "cwd": "${workspaceRoot}",
              "runtimeExecutable": "npm",
              "runtimeArgs": ["run-script", "debug-watch"]
          }]
      }
      

   5. Dodaj punkt przerwania, który wstrzymuje przetwarzanie żądania HTTP w pliku index.js i uruchom debugowanie za pomocą Konfiguracja Debug Watch została dodana wcześniej. Aplikacja jest teraz uruchomione i nasłuchiwane żądania HTTP na porcie 9000.

      

      Rysunek 3. Aplikacja działa i nasłuchuje HTTP do portu 9000.

2. Uruchom aplikację ngrok w środowisku lokalnym:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   Zastąp NGROK_STATIC_DOMAIN domeną statyczną w swoje konto ngrok. Wszystkie prośby są teraz przekierowywane do i port używany przez aplikację.

   

   Rysunek 4. Terminal z serwerem ngrok uruchomionym i przekierowującym.

3. Interfejs internetowy jest również uruchamiany na lokalnym hoście przez interfejs ngrok możesz monitorować wszystkie działania, otwierając ją w przeglądarce.

   

   Rysunek 5. Interfejs internetowy hostowany przez aplikację ngrok nie wyświetla żadnych żądań HTTP.

4. Przetestuj dodatek do Google Workspace, wyświetlając podgląd adresu URL zgłoszenia w nowym Dokument Google z kontem testera:

   • Utwórz nowy dokument Google.

     Tworzenie nowego pliku w Dokumentach Google

   • Wpisz poniższy link i naciśnij enter:

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • Kliknij link.

5. W narzędziu Visual Studio Code w Twoim środowisku lokalnym możesz zobaczyć, że wykonanie jest wstrzymane w ustawionym punkcie przerwania.

   

   Rysunek 6. Wykonanie jest wstrzymane w ustawionym punkcie przerwania.

6. Gdy wznowisz wykonanie kodu z debugera Visual Studio Code przed upływem czasu ważności dodatków do Google Workspace. wyświetla podgląd linku w dokumencie Google z pamięci podręcznej.

7. Logi żądań i odpowiedzi HTTP możesz sprawdzić z poziomu interfejsu internetowego. hostowane przez aplikację ngrok w Twoim środowisku lokalnym.

   

   Rysunek 7. Żądanie HTTP z interfejsu internetowego hostowanego przez ngrok aplikacja.

8. Aby zmienić działanie aplikacji, zamień Case na Case: w tekście 51 z index.js. Gdy zapiszesz plik, nodemon automatycznie odświeża aplikację ze zaktualizowanym kodem źródłowym, Visual Studio Code pozostaje w trybie debugowania.

   

   Rysunek 8. Aplikacja działa i nasłuchuje żądań HTTP na porcie 9000 z załadowaną zmianą kodu.

9. Tym razem zamiast klikać link i czekać kilka sekund nowego dokumentu Google, możesz wybrać ostatnie żądanie HTTP zarejestrowane w sieci interfejs hostowany przez aplikację ngrok w Twoim środowisku lokalnym i kliknij Replay. Tak samo jak ostatnio, Twój dodatek do Google Workspace nie odpowiada, ponieważ trwa debugowanie.

10. Gdy wznowisz wykonanie kodu z debugera Visual Studio Code możesz zobaczyć z interfejsu internetowego hostowanego przez aplikację ngrok w środowisko lokalne, z którym aplikacja generuje odpowiedź zaktualizowanej wersji karty podglądu.

Python

1. Z IDE Visual Studio Code zainstalowanego w Twoim środowisku lokalnym wykonaj te czynności:

   1. Otwórz folder w nowym oknie add-ons-samples/python/3p-resources/create_link_preview

   2. Utwórz nowe środowisko wirtualne dla języka Python env i aktywuj je:

      virtualenv env
      source env/bin/activate
      

   3. Zainstaluj wszystkie zależności projektu za pomocą interfejsu pip w środowisku wirtualnym środowisko:

      pip install -r requirements.txt
      

   4. Utwórz plik .vscode/launch.json w katalogu głównym i skonfiguruj uruchomienie o nazwie Debug Watch, które wyzwala aplikację z modułu functions-framework na porcie 9000 w trybie debugowania w środowisku wirtualnym 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. Dodaj punkt przerwania, który wstrzymuje przetwarzanie żądania HTTP w pliku main.py i uruchom debugowanie za pomocą Konfiguracja Debug Watch została dodana wcześniej. Aplikacja jest teraz uruchomione i nasłuchiwane żądania HTTP na porcie 9000.

      

      Rysunek 3. Aplikacja działa i nasłuchuje HTTP do portu 9000.

2. Uruchom aplikację ngrok w środowisku lokalnym:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   Zastąp NGROK_STATIC_DOMAIN domeną statyczną w swoje konto ngrok. Wszystkie prośby są teraz przekierowywane do i port używany przez aplikację.

   

   Rysunek 4. Terminal z serwerem ngrok uruchomionym i przekierowującym.

3. Interfejs internetowy jest również uruchamiany na lokalnym hoście przez interfejs ngrok możesz monitorować wszystkie działania, otwierając ją w przeglądarce.

   

   Rysunek 5. Interfejs internetowy hostowany przez aplikację ngrok nie wyświetla żadnych żądań HTTP.

4. Przetestuj dodatek do Google Workspace, wyświetlając podgląd adresu URL zgłoszenia w nowym Dokument Google z kontem testera:

   • Utwórz nowy dokument Google.

     Tworzenie nowego pliku w Dokumentach Google

   • Wpisz poniższy link i naciśnij enter:

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • Kliknij link.

5. W narzędziu Visual Studio Code w Twoim środowisku lokalnym możesz zobaczyć, że wykonanie jest wstrzymane w ustawionym punkcie przerwania.

   

   Rysunek 6. Wykonanie jest wstrzymane w ustawionym punkcie przerwania.

6. Gdy wznowisz wykonanie kodu z debugera Visual Studio Code przed upływem czasu ważności dodatków do Google Workspace. wyświetla podgląd linku w dokumencie Google z pamięci podręcznej.

7. Logi żądań i odpowiedzi HTTP możesz sprawdzić z poziomu interfejsu internetowego. hostowane przez aplikację ngrok w Twoim środowisku lokalnym.

   

   Rysunek 7. Żądanie HTTP z interfejsu internetowego hostowanego przez ngrok aplikacja.

8. Aby zmienić działanie aplikacji, zamień Case na Case: w tekście 56 z pliku main.py. Gdy zapiszesz plik, Visual Studio Code automatycznie wczytuje ponownie aplikację ze zaktualizowanym kodem źródłowym, pozostanie w trybie debugowania.

   

   Rysunek 8. Aplikacja działa i nasłuchuje żądań HTTP na porcie 9000 z załadowaną zmianą kodu.

9. Tym razem zamiast klikać link i czekać kilka sekund nowego dokumentu Google, możesz wybrać ostatnie żądanie HTTP zarejestrowane w sieci interfejs hostowany przez aplikację ngrok w Twoim środowisku lokalnym i kliknij Replay. Tak samo jak ostatnio, Twój dodatek do Google Workspace nie odpowiada, ponieważ trwa debugowanie.

10. Gdy wznowisz wykonanie kodu z debugera Visual Studio Code możesz zobaczyć z interfejsu internetowego hostowanego przez aplikację ngrok w środowisko lokalne, z którym aplikacja generuje odpowiedź zaktualizowanej wersji karty podglądu.

Java

1. Z IDE Visual Studio Code zainstalowanego w Twoim środowisku lokalnym wykonaj te czynności:

   1. Otwórz folder w nowym oknie add-ons-samples/java/3p-resources

   2. Konfigurowanie projektu Maven do uruchamiania aplikacji CreateLinkPreview na porcie 9000 lokalnie przez dodanie chmury Wtyczka do kompilacji function-maven-plugin w ramach platformy Functions Plik 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. Możesz go teraz uruchomić lokalnie w trybie debugowania:

      mvnDebug function:run
      Preparing to execute Maven in debug mode
      Listening for transport dt_socket at address: 8000
      

   4. Utwórz plik .vscode/launch.json w katalogu głównym i skonfigurować uruchomienie o nazwie Remote Debug Watch, które wiąże się z plikiem aplikacja uruchomiona wcześniej na porcie 8000:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "java",
              "request": "attach",
              "name": "Remote Debug Watch",
              "projectName": "http-function",
              "hostName": "localhost",
              "port": 8000
          }]
      }
      

   5. Dodaj punkt przerwania, który wstrzymuje przetwarzanie żądania HTTP w pliku CreateLinkPreview.java i rozpocznij załączanie i debugowanie za pomocą Konfiguracja Remote Debug Watch została dodana wcześniej. Ta aplikacja jest uruchomione i nasłuchujące żądania HTTP na porcie 9000.

      

      Rysunek 3. Aplikacja jest uruchomiona i nasłuchuje HTTP żądania do portu 9000.

2. Uruchom aplikację ngrok w środowisku lokalnym:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   Zastąp NGROK_STATIC_DOMAIN domeną statyczną w swoje konto ngrok. Wszystkie prośby są teraz przekierowywane do i port używany przez aplikację.

   

   Rysunek 4. Terminal z serwerem ngrok uruchomionym i przekierowującym.

3. Interfejs internetowy jest również uruchamiany na lokalnym hoście przez interfejs ngrok możesz monitorować wszystkie działania, otwierając ją w przeglądarce.

   

   Rysunek 5. Interfejs internetowy hostowany przez aplikację ngrok nie wyświetla żadnych żądań HTTP.

4. Przetestuj dodatek do Google Workspace, wyświetlając podgląd adresu URL zgłoszenia w nowym Dokument Google z kontem testera:

   • Utwórz nowy dokument Google.

     Tworzenie nowego pliku w Dokumentach Google

   • Wpisz poniższy link i naciśnij enter:

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • Kliknij link.

5. W narzędziu Visual Studio Code w Twoim środowisku lokalnym możesz zobaczyć, że wykonanie jest wstrzymane w ustawionym punkcie przerwania.

   

   Rysunek 6. Wykonanie jest wstrzymane w ustawionym punkcie przerwania.

6. Gdy wznowisz wykonanie kodu z debugera Visual Studio Code przed upływem czasu ważności dodatków do Google Workspace. wyświetla podgląd linku w dokumencie Google z pamięci podręcznej.

7. Logi żądań i odpowiedzi HTTP możesz sprawdzić z poziomu interfejsu internetowego. hostowane przez aplikację ngrok w Twoim środowisku lokalnym.

   

   Rysunek 7. Żądanie HTTP z interfejsu internetowego hostowanego przez ngrok aplikacja.

8. Aby zmienić działanie aplikacji, zamień Case na Case: w tekście 78 z pliku CreateLinkPreview.java, uruchom ponownie mvnDebug i uruchom ponownie aplikację Remote Debug Watch, aby podłączyć i uruchomić ponownie i debugowaniu.

9. Tym razem zamiast klikać link i czekać kilka sekund nowego dokumentu Google, możesz wybrać ostatnie żądanie HTTP zarejestrowane w sieci interfejs hostowany przez aplikację ngrok w Twoim środowisku lokalnym i kliknij Replay. Tak samo jak ostatnio, Twój dodatek do Google Workspace nie odpowiada, ponieważ trwa debugowanie.

10. Gdy wznowisz wykonanie kodu z debugera Visual Studio Code możesz zobaczyć z interfejsu internetowego hostowanego przez aplikację ngrok w środowisko lokalne, z którym aplikacja generuje odpowiedź zaktualizowanej wersji karty podglądu.

Debuguj ze środowiska zdalnego

W tej sekcji korzystasz z dodatku do Google Workspace, który jest wykonywane w środowisku zdalnym.

Rysunek 9. Debuguj ze środowiska zdalnego.

Wymagania wstępne

• Twój dodatek do Google Workspace został wdrożony i zainstalowany.
• Twoja aplikacja działająca w środowisku zdalnym z debugerem włączony na danym porcie, odwołuje się on do: REMOTE_DEBUG_PORT.
• Środowisko lokalne może ssh z Twoim środowiskiem zdalnym.
• IDE skonfigurowane w środowisku lokalnym z możliwością debugowania. Wykorzystujemy Visual Studio Code IDE i jego środowisko domyślne funkcji debugowania w tej do celów ilustracyjnych.

Połącz środowiska lokalne i zdalne

w środowisku lokalnym, z którego chcesz zainicjować klienta debugowania; skonfiguruj tunel SSH:

ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS

Zastąp następujące elementy:

• LOCAL_DEBUG_PORT: port debugowania w sieci lokalnej dla środowiska.
• REMOTE_USERNAME: nazwa użytkownika w środowisku zdalnym.
• REMOTE_ADDRESS: adres środowiska zdalnego.
• REMOTE_DEBUG_PORT: port debugowania na pilocie dla środowiska.

Port debugowania w środowisku lokalnym jest teraz połączony z portem debugowania w i środowisku zdalnemu.

Rozpocznij debugowanie

W środowisku IDE Visual Studio Code zainstalowanego w Twoim środowisku lokalnym wykonaj :

1. W nowym oknie otwórz kod źródłowy aplikacji.

2. Utwórz plik .vscode/launch.json w katalogu głównym i skonfiguruj uruchom o nazwie Debug Remote i dołącza do portu debugowania w środowisku lokalnym środowisko:

   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
       }]
   }
   

   Zastąp LOCAL_DEBUG_PORT portem debugowania w w środowisku lokalnym.

3. Dodaj w kodzie źródłowym aplikacji punkt przerwania, który wstrzymuje żądanie HTTP przetwarzanie danych i rozpoczęcie uruchamiania debugowanie przy użyciu konfiguracji Debug Remote dodanej wcześniej.

Interakcja z zainstalowanym dodatkiem do Google Workspace. Twoje Dodatek do Google Workspace nie odpowiada, ponieważ jest aktywny debugowane w środowisku IDE Visual Studio Code.

Powiązane artykuły

Dowiedz się, jak wysyłać zapytania dotyczące logów błędów.