Testowanie i debugowanie HTTP w dodatkach do Google Workspace

Node.js

• najnowsze wersje node i npm zainstalowane w środowisku lokalnym;

• Najnowsza wersja aplikacji nodemon zainstalowana w Twoim środowisku lokalnym służy do automatycznego wczytywania:

  npm install -g nodemon

• projekt Google Cloud, Zapoznaj się z sekcjami Wstępne wymagania i Konfigurowanie środowiska w przewodniku Szybki start.

• Kod dodatku Google Workspace do debugowania w środowisku lokalnym. W tym przewodniku, w celach poglądowych, używamy funkcji linku podglądu z przykładu kodu3p-resources z repozytorium GitHubgoogleworkspace/add-ons-samples.

• IDE skonfigurowane w środowisku lokalnym, które umożliwia debugowanie. W tym przewodniku używamy środowiska Visual Studio CodeIDE i jego domyślnych funkcji debugowania.

• konto ngrok.

• Najnowsza wersja gcloud zainstalowana i zainicjowana w Twoim środowisku lokalnym.

Python

• najnowsza wersja python3 zainstalowana w Twoim środowisku lokalnym.
• Najnowsza wersja narzędzi pip i virtualenv zainstalowanych w środowisku lokalnym, które służą odpowiednio do zarządzania pakietami Pythona i środowiskami wirtualnymi.
• projekt Google Cloud, Zapoznaj się z sekcjami Wstępne wymagania i Konfigurowanie środowiska w przewodniku Szybki start.
• Kod dodatku Google Workspace do debugowania w środowisku lokalnym. W tym przewodniku, w celach poglądowych, używamy funkcji linku podglądu z przykładu kodu3p-resources z repozytorium GitHubgoogleworkspace/add-ons-samples.
• IDE skonfigurowane w środowisku lokalnym, które umożliwia debugowanie. W tym przewodniku używamy środowiska Visual Studio CodeIDE i domyślnych funkcji debugowania.
• Konto ngrok.
• Najnowsza wersja gcloud zainstalowana i zainicjowana w Twoim środowisku lokalnym.

Java

• Najnowsza stabilna wersja Java SE 11's JDK zainstalowana w Twoim środowisku lokalnym.
• najnowsza wersja Apache Maven zainstalowana w Twoim środowisku lokalnym, służy do zarządzania projektami w języku Java;
• projekt Google Cloud, Zapoznaj się z sekcjami Wstępne wymagania i Konfigurowanie środowiska w przewodniku Szybki start.
• Kod dodatku Google Workspace do debugowania w środowisku lokalnym. W tym przewodniku, w celach poglądowych, używamy funkcji linku podglądu z przykładu kodu3p-resources z repozytorium GitHubgoogleworkspace/add-ons-samples.
• IDE skonfigurowane w środowisku lokalnym, które umożliwia debugowanie. W tym przewodniku używamy środowiska Visual Studio CodeIDE i domyślnych funkcji debugowania.
• Konto ngrok.
• Najnowsza wersja gcloud zainstalowana i zainicjowana w Twoim środowisku lokalnym.

Node.js

1. W środowisku Visual Studio Code IDE zainstalowanym w środowisku lokalnym:

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

   2. Skonfiguruj aplikację do uruchamiania lokalnego i automatycznego ponownego ładowania, dodając w pliku package.json 1 zależność i 2 skrypty:

      {
          ...
          "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 uruchamia skrypt debug-watch, tworząc plik .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 rozpocznij uruchamianie i debugowanie z dodaną wcześniej konfiguracją Debug Watch. Aplikacja działa i nasłuchuje żądań HTTP na porcie 9000.

      

      Rysunek 3. Aplikacja działa i nasłuchuje żądań HTTP na porcie 9000.

2. Uruchom aplikację ngrok w środowisku lokalnym:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   Zastąp NGROK_STATIC_DOMAIN domeną statyczną na koncie ngrok. Wszystkie żądania są teraz przekierowywane do Twojego lokalnego środowiska i portu używanego przez aplikację.

   

   Rysunek 4. Terminal z uruchomionym serwerem ngrok i przekierowaniem.

3. Aplikacja ngrok uruchamia też interfejs internetowy na Twoim komputerze lokalnym. Możesz monitorować wszystkie działania, otwierając go w przeglądarce.

   

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

4. Przetestuj dodatek Google Workspace, wyświetlając podgląd adresu URL przypadku w nowym dokumencie Google za pomocą konta testowego:

   • Utwórz nowy dokument Google.

     Utwórz nowy dokument Google

   • Wpisz ten link i kliknij enter:

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

   • Kliknij link.

5. W Visual Studio Code w środowisku lokalnym możesz zobaczyć, że wykonanie zostało wstrzymane w miejscu ustawionego punktu przerwania.

   

   Rysunek 6. Wykonywanie jest wstrzymywane w ustawionym punkcie przerwania.

6. Gdy wznowisz wykonywanie kodu w debugerze Visual Studio Codeprzed przekroczeniem limitu czasu przez dodatki Google Workspace, dodatek Google Workspace wyświetli podgląd linku w Google Docs z pamięci podręcznej.

7. Możesz sprawdzić dzienniki żądań i odpowiedzi HTTP w interfejsie internetowym aplikacji ngrok w swoim środowisku lokalnym.

   

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

8. Aby zmienić zachowanie aplikacji, zastąp Case wartością Case: w bloku kodu 51 w pliku index.js. Gdy zapiszesz plik, nodemon automatycznie ponownie wczyta aplikację z zaktualizowanym kodem źródłowym, a Visual Studio Code pozostanie w trybie debugowania.

   

   Rysunek 8. Aplikacja działa i nasłuchuje żądań HTTP na porcie 9000 z załadowanym zmienionym kodem.

9. Tym razem zamiast kliknąć link i poczekać kilka sekund w nowym dokumencie Google, możesz wybrać ostatnie żądanie HTTP zapisane w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym i kliknąć Replay. Podobnie jak poprzednio, wtyczka Google Workspace nie odpowiada, ponieważ jest aktywnie debugowana.

10. Gdy wznowisz wykonywanie kodu w debugerze aplikacji Visual Studio Code, w interfejsie internetowym hostowanym przez aplikację ngrok w Twoim środowisku lokalnym możesz zobaczyć, że aplikacja generuje odpowiedź z aktualizowaną wersją karty podglądu.

Python

1. W środowisku Visual Studio Code IDE zainstalowanym w środowisku lokalnym:

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

   2. Utwórz nowe środowisko wirtualne dla Pythona env i aktywuj je:

      virtualenv env
      source env/bin/activate

   3. Zainstaluj wszystkie zależności projektu za pomocą narzędzia pip w środowisku wirtualnym:

      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 uruchamia 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 rozpocznij uruchamianie i debugowanie z dodaną wcześniej konfiguracją Debug Watch. Aplikacja działa i nasłuchuje żądań HTTP na porcie 9000.

      

      Rysunek 3. Aplikacja działa i nasłuchuje żądań HTTP na porcie 9000.

2. Uruchom aplikację ngrok w środowisku lokalnym:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   Zastąp NGROK_STATIC_DOMAIN domeną statyczną na koncie ngrok. Wszystkie żądania są teraz przekierowywane do Twojego lokalnego środowiska i portu używanego przez aplikację.

   

   Rysunek 4. Terminal z uruchomionym serwerem ngrok i przekierowaniem.

3. Aplikacja ngrok uruchamia też interfejs internetowy na Twoim komputerze lokalnym. Możesz monitorować wszystkie działania, otwierając go w przeglądarce.

   

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

4. Przetestuj dodatek Google Workspace, wyświetlając podgląd adresu URL przypadku w nowym dokumencie Google za pomocą konta testowego:

   • Utwórz nowy dokument Google.

     Utwórz nowy dokument Google

   • Wpisz ten link i kliknij enter:

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

   • Kliknij link.

5. W Visual Studio Code w środowisku lokalnym możesz zobaczyć, że wykonanie zostało wstrzymane w miejscu ustawionego punktu przerwania.

   

   Rysunek 6. Wykonywanie jest wstrzymywane w ustawionym punkcie przerwania.

6. Gdy wznowisz wykonywanie kodu w debugerze Visual Studio Codeprzed przekroczeniem limitu czasu przez dodatki Google Workspace, dodatek Google Workspace wyświetli podgląd linku w Google Docs z pamięci podręcznej.

7. Możesz sprawdzić dzienniki żądań i odpowiedzi HTTP w interfejsie internetowym aplikacji ngrok w swoim środowisku lokalnym.

   

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

8. Aby zmienić zachowanie aplikacji, zastąp Case wartością Case: w pliku 56 w pliku main.py. Po zapisaniu pliku Visual Studio Codeaplikacja automatycznie ponownie wczyta aplikację z zaktualizowanym kodem źródłowym i pozostanie w trybie debugowania.

   

   Rysunek 8. Aplikacja działa i nasłuchuje żądań HTTP na porcie 9000 z załadowanym zmienionym kodem.

9. Tym razem zamiast kliknąć link i poczekać kilka sekund w nowym dokumencie Google, możesz wybrać ostatnie żądanie HTTP zapisane w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym i kliknąć Replay. Podobnie jak poprzednio, wtyczka Google Workspace nie odpowiada, ponieważ jest aktywnie debugowana.

10. Gdy wznowisz wykonywanie kodu w debugerze aplikacji Visual Studio Code, w interfejsie internetowym hostowanym przez aplikację ngrok w Twoim środowisku lokalnym możesz zobaczyć, że aplikacja generuje odpowiedź z aktualizowaną wersją karty podglądu.

Java

1. W środowisku Visual Studio Code IDE zainstalowanym w środowisku lokalnym:

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

   2. Skonfiguruj projekt Maven, aby lokalnie uruchamiać aplikację CreateLinkPreview na porcie 9000, dodając w pliku pom.xml wtyczkę kompilacji Cloud Functions Framework function-maven-plugin:

      ...
      <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. Teraz możesz uruchomić aplikację 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 skonfiguruj uruchomienie o nazwie Remote Debug Watch, które łączy się z aplikacją uruchomioną wcześniej za pomocą portu 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 dołączanie i debugowanie za pomocą wcześniej dodanej konfiguracji Remote Debug Watch. Aplikacja jest teraz uruchomiona i nasłuchuje żądań HTTP na porcie 9000.

      

      Rysunek 3. Aplikacja działa i nasłuchuje żądań HTTP na porcie 9000.

2. Uruchom aplikację ngrok w środowisku lokalnym:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   Zastąp NGROK_STATIC_DOMAIN domeną statyczną na koncie ngrok. Wszystkie żądania są teraz przekierowywane do Twojego lokalnego środowiska i portu używanego przez aplikację.

   

   Rysunek 4. Terminal z uruchomionym serwerem ngrok i przekierowaniem.

3. Aplikacja ngrok uruchamia też interfejs internetowy na Twoim komputerze lokalnym. Możesz monitorować wszystkie działania, otwierając go w przeglądarce.

   

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

4. Przetestuj dodatek Google Workspace, wyświetlając podgląd adresu URL przypadku w nowym dokumencie Google za pomocą konta testowego:

   • Utwórz nowy dokument Google.

     Utwórz nowy dokument Google

   • Wpisz ten link i kliknij enter:

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

   • Kliknij link.

5. W Visual Studio Code w środowisku lokalnym możesz zobaczyć, że wykonanie zostało wstrzymane w miejscu ustawionego punktu przerwania.

   

   Rysunek 6. Wykonywanie jest wstrzymywane w ustawionym punkcie przerwania.

6. Gdy wznowisz wykonywanie kodu w debugerze Visual Studio Codeprzed przekroczeniem limitu czasu przez dodatki Google Workspace, dodatek Google Workspace wyświetli podgląd linku w Google Docs z pamięci podręcznej.

7. Możesz sprawdzić dzienniki żądań i odpowiedzi HTTP w interfejsie internetowym aplikacji ngrok w swoim środowisku lokalnym.

   

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

8. Aby zmienić zachowanie aplikacji, zastąp Case wartością Case: w inline78 pliku CreateLinkPreview.java, ponownie uruchom proces mvnDebug i ponownie uruchom Remote Debug Watch, aby ponownie załączyć i rozpocząć debugowanie.

9. Tym razem zamiast kliknąć link i poczekać kilka sekund w nowym dokumencie Google, możesz wybrać ostatnie żądanie HTTP zapisane w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym i kliknąć Replay. Podobnie jak poprzednio, wtyczka Google Workspace nie odpowiada, ponieważ jest aktywnie debugowana.

10. Gdy wznowisz wykonywanie kodu w debugerze aplikacji Visual Studio Code, w interfejsie internetowym hostowanym przez aplikację ngrok w Twoim środowisku lokalnym zobaczysz, że aplikacja generuje odpowiedź z aktualizowaną wersją karty podglądu.