Testowanie i debugowanie HTTP w dodatkach do Google Workspace

Node.js

• Najnowsze wersje node i npm zainstalowane w środowisku lokalnym.

• Najnowsza wersja nodemon zainstalowana w środowisku lokalnym. Jest używana do automatycznego doładowywania:

  npm install -g nodemon

• Projekt Google Cloud. Postępuj zgodnie z instrukcjami w sekcjach Wymagania wstępne i Konfigurowanie środowiska w krótkim wprowadzeniu.

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

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

• Konto ngrok.

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

Python

• Najnowsza wersja python3 zainstalowana w środowisku lokalnym.
• Najnowsza wersja pip i virtualenv zainstalowana w środowisku lokalnym. Służą one do zarządzania pakietami Pythona i wirtualnymi środowiskami.
• Projekt Google Cloud. Postępuj zgodnie z instrukcjami w sekcjach Wymagania wstępne i Konfigurowanie środowiska w krótkim wprowadzeniu.
• Kod dodatku Google Workspace do debugowania w środowisku lokalnym. W tym przewodniku używamy funkcji linku podglądu z przykładowego kodu3p-resources z repozytorium GitHubgoogleworkspace/add-ons-samples w celach ilustracyjnych.
• Środowisko IDE skonfigurowane w środowisku lokalnym, które umożliwia debugowanie. W tym przewodniku używamy Visual Studio CodeIDE i jego domyślnych funkcji debugowania w celach ilustracyjnych.
• Konto ngrok.
• Najnowsza wersja pakietu gcloud zainstalowana i zainicjowana w środowisku lokalnym.

Java

• Najnowsza stabilna wersja Java SE 11's JDK zainstalowana w środowisku lokalnym.
• Najnowsza wersja Apache Maven zainstalowana w środowisku lokalnym. Służy do zarządzania projektami Java.
• Projekt Google Cloud. Postępuj zgodnie z instrukcjami w sekcjach Wymagania wstępne i Konfigurowanie środowiska w krótkim wprowadzeniu.
• Kod dodatku Google Workspace do debugowania w środowisku lokalnym. W tym przewodniku używamy funkcji linku podglądu z przykładowego kodu3p-resources z repozytorium GitHubgoogleworkspace/add-ons-samples w celach ilustracyjnych.
• Środowisko IDE skonfigurowane w środowisku lokalnym, które umożliwia debugowanie. W tym przewodniku używamy Visual Studio CodeIDE i jego domyślnych funkcji debugowania w celach ilustracyjnych.
• Konto ngrok.
• Najnowsza wersja pakietu gcloud zainstalowana i zainicjowana w środowisku lokalnym.

Node.js

1. W Visual Studio Code IDE zainstalowanym w środowisku lokalnym wykonaj te czynności:

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

   2. Skonfiguruj aplikację do lokalnego uruchamiania i automatycznego przeładowywania debugowania, dodając 1 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 wywołuje 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 za pomocą dodanej wcześniej konfiguracji Debug Watch. 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 statyczną domeną na koncie ngrok. Wszystkie żądania są teraz przekierowywane do środowiska lokalnego i portu używanego przez aplikację.

   .

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

   

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

   • Utwórz dokument Google.

     Utwórz dokument Google

   • Wpisz ten link i naciśnij 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 ustawionym punkcie przerwania.

   

6. Gdy wznowisz wykonywanie w Visual Studio Code debuggerze zanim dodatki do Google Workspace przekroczą limit czasu, dodatek do Google Workspace wyświetli podgląd linku w Dokumencie Google z pamięci podręcznej.

7. Dzienniki żądań i odpowiedzi HTTP możesz sprawdzić w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym.

   

8. Aby zmienić działanie aplikacji, zastąp Case ciągiem Case: w wierszu 51 w pliku index.js. Gdy zapiszesz plik, nodemon automatycznie ponownie załaduje aplikację ze zaktualizowanym kodem źródłowym, a Visual Studio Code pozostanie w trybie debugowania.

   

9. Tym razem zamiast klikać link i czekać kilka sekund w nowym dokumencie Google możesz wybrać ostatnie żądanie HTTP zarejestrowane w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym i kliknąć Replay. Podobnie jak ostatnio, dodatek do Google Workspace nie odpowiada, ponieważ jest aktywnie debugowany.

10. Gdy wznowisz wykonywanie w debuggerze Visual Studio Code, w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym zobaczysz, że aplikacja generuje odpowiedź ze zaktualizowaną wersją karty podglądu.

Python

1. W Visual Studio Code IDE zainstalowanym w środowisku lokalnym wykonaj te czynności:

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

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

      virtualenv env
      source env/bin/activate

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

      pip install -r requirements.txt

   4. Utwórz w katalogu głównym plik .vscode/launch.json 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 za pomocą dodanej wcześniej konfiguracji Debug Watch. 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 statyczną domeną na koncie ngrok. Wszystkie żądania są teraz przekierowywane do środowiska lokalnego i portu używanego przez aplikację.

   .

3. Aplikacja ngrok uruchamia też interfejs internetowy na Twoim lokalnym hoście. Monitoruj wszystkie działania, otwierając go w przeglądarce.

   

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

   • Utwórz dokument Google.

     Utwórz dokument Google

   • Wpisz ten link i naciśnij 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 ustawionym punkcie przerwania.

   

6. Gdy wznowisz wykonywanie w Visual Studio Code debuggerze zanim dodatki do Google Workspace przekroczą limit czasu, dodatek do Google Workspace wyświetli podgląd linku w Dokumencie Google z pamięci podręcznej.

7. Dzienniki żądań i odpowiedzi HTTP możesz sprawdzić w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym.

   

8. Aby zmienić działanie aplikacji, zastąp Case ciągiem Case: w wierszu 56 w pliku main.py. Gdy zapiszesz plik, Visual Studio Code aplikacja automatycznie wczyta się ponownie ze zaktualizowanym kodem źródłowym i  pozostanie w trybie debugowania.

   

9. Tym razem zamiast klikać link i czekać kilka sekund w nowym dokumencie Google możesz wybrać ostatnie żądanie HTTP zarejestrowane w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym i kliknąć Replay. Podobnie jak ostatnio, dodatek do Google Workspace nie odpowiada, ponieważ jest aktywnie debugowany.

10. Gdy wznowisz wykonywanie w debuggerze Visual Studio Code, w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym zobaczysz, że aplikacja generuje odpowiedź ze zaktualizowaną wersją karty podglądu.

Java

1. W Visual Studio Code IDE zainstalowanym w środowisku lokalnym wykonaj te czynności:

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

   2. Skonfiguruj projekt Maven, aby uruchamiać aplikacjęCreateLinkPreview lokalnie na porcie 9000, dodając wtyczkę kompilacji Cloud Functions Framework function-maven-plugin do plikupom.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. Teraz możesz uruchomić go 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 w katalogu głównym plik .vscode/launch.json i skonfiguruj uruchomienie o nazwie Remote Debug Watch, które dołącza do aplikacji uruchomionej 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 dołączanie i debugowanie za pomocą dodanej wcześniej konfiguracji Remote Debug Watch. 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 statyczną domeną na koncie ngrok. Wszystkie żądania są teraz przekierowywane do środowiska lokalnego i portu używanego przez aplikację.

   .

3. Aplikacja ngrok uruchamia też interfejs internetowy na Twoim lokalnym hoście. Monitoruj wszystkie działania, otwierając go w przeglądarce.

   

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

   • Utwórz dokument Google.

     Utwórz dokument Google

   • Wpisz ten link i naciśnij 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 ustawionym punkcie przerwania.

   

6. Gdy wznowisz wykonywanie w Visual Studio Code debuggerze zanim dodatki do Google Workspace przekroczą limit czasu, dodatek do Google Workspace wyświetli podgląd linku w Dokumencie Google z pamięci podręcznej.

7. Dzienniki żądań i odpowiedzi HTTP możesz sprawdzić w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym.

   

8. Aby zmienić działanie aplikacji, zastąp Case słowem Case: w wierszu 78 w pliku CreateLinkPreview.java, uruchom ponownie proces mvnDebug i ponownie uruchom Remote Debug Watch, aby ponownie podłączyć i uruchomić debugowanie.

9. Tym razem zamiast klikać link i czekać kilka sekund w nowym dokumencie Google możesz wybrać ostatnie żądanie HTTP zarejestrowane w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym i kliknąć Replay. Podobnie jak ostatnio, dodatek do Google Workspace nie odpowiada, ponieważ jest aktywnie debugowany.

10. Gdy wznowisz wykonywanie w debuggerze Visual Studio Code, w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym zobaczysz, że aplikacja generuje odpowiedź ze zaktualizowaną wersją karty podglądu.