Debugowanie aplikacji Google Chat

Node.js

Python

Java

Node.js

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

• Najnowsza wersja nodemon zainstalowana w środowisku lokalnym, używana do automatycznego doładowania:

  npm install -g nodemon

• Aplikacja w Google Chat HTTP skonfigurowana do wysyłania wiadomości. Postępuj zgodnie z instrukcjami w sekcjach Wymagania wstępne, Konfigurowanie środowiska i Publikowanie aplikacji w Google Chat w krótkim wprowadzeniu. Jedyna różnica polega na tym, że musisz ustawić nazwę aplikacji na Debug App, a adres URL punktu końcowego HTTP na dowolną wartość, np. http://example.com.

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

• Git zainstalowany w środowisku lokalnym.

• Konto ngrok.

Python

• Najnowsza wersja python3 zainstalowana w środowisku lokalnym.
• Najnowsza wersja pip i virtualenv zainstalowana w środowisku lokalnym. Służą one odpowiednio do zarządzania pakietami Pythona i środowiskami wirtualnymi.
• Aplikacja w Google Chat HTTP skonfigurowana do wysyłania wiadomości. Postępuj zgodnie z instrukcjami w sekcjach Wymagania wstępne, Konfigurowanie środowiska i Publikowanie aplikacji w Google Chat w krótkim wprowadzeniu. Jedyna różnica polega na tym, że musisz ustawić nazwę aplikacji na Debug App, a adres URL punktu końcowego HTTP na dowolną wartość, np. http://example.com.
• Środowisko IDE skonfigurowane w środowisku lokalnym, które umożliwia debugowanie. W tym przewodniku używamy Visual Studio Code IDE i jego domyślnych funkcji debugowania w celach ilustracyjnych.
• Git zainstalowany w środowisku lokalnym.
• 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, która służy do zarządzania projektami w języku Java.
• Aplikacja w Google Chat HTTP skonfigurowana do wysyłania wiadomości. Postępuj zgodnie z instrukcjami w sekcjach Wymagania wstępne, Konfigurowanie środowiska i Publikowanie aplikacji w Google Chat w krótkim wprowadzeniu. Jedyna różnica polega na tym, że musisz ustawić nazwę aplikacji na Debug App, a adres URL punktu końcowego HTTP aktywatora Wiadomość na dowolną wartość, np. http://example.com.
• Środowisko IDE skonfigurowane w środowisku lokalnym, które umożliwia debugowanie. W tym przewodniku używamy Visual Studio Code IDE i jego domyślnych funkcji debugowania w celach ilustracyjnych.
• Git zainstalowany w środowisku lokalnym.
• Konto ngrok.
• Najnowsza wersja pakietu gcloud zainstalowana i zainicjowana w środowisku lokalnym.

Node.js

1. Sklonuj repozytorium googleworkspace/add-ons-samples z GitHuba na środowisko lokalne. Zawiera ono kod aplikacji do wykonania:

   git clone https://github.com/googleworkspace/add-ons-samples.git

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

   1. W nowym oknie otwórz folder add-ons-samples/node/chat/avatar-app.

   2. Skonfiguruj aplikację do debugowania z automatycznym przeładowywaniem, dodając 2 skrypty w pliku package.json:

      {
          ...
          "scripts": {
              ...
              "debug": "node --inspect index.js",
              "debug-watch": "nodemon --watch ./ --exec npm run debug"
          }
          ...
      }
      

   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, a następnie uruchom i debuguj za pomocą dodanej wcześniej konfiguracji 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.

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

   

   Rysunek 4. Terminal z ngrok działającym serwerem i przekierowaniem.

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

   

   Rysunek 5. Interfejs internetowy hostowany przez aplikację ngrok, w którym nie widać żądań HTTP.

5. Przetestuj aplikację do czatu, wysyłając do niej wiadomość bezpośrednią:

   • Otwórz Google Chat.

     Otwórz Google Chat

   • Kliknij Nowy czat add.

   • W oknie wpisz nazwę aplikacji do obsługi czatu w Google Chat.

   • W wynikach wyszukiwania znajdź aplikację do Google Chat i kliknij Dodaj > Chat.

   • W polu czatu wpisz Hello i naciśnij enter. Aplikacja do Google Chat nie odpowiada, ponieważ jest aktywnie debugowana.

6. W Visual Studio Code w środowisku lokalnym możesz zobaczyć, że wykonanie zostało wstrzymane w ustawionym punkcie przerwania.

   

   Rysunek 6. Wykonywanie jest wstrzymane w ustawionym punkcie przerwania.

7. Gdy wznowisz wykonywanie w debuggerze Visual Studio Code, zanim Google Chat przekroczy limit czasu, aplikacja w Google Chat odpowie na Twoją wiadomość.

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

   

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

9. Aby zmienić działanie aplikacji, zaktualizuj tekst odpowiedzi w pliku index.js. Gdy zapiszesz plik, nodemon automatycznie ponownie załaduje 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 ze wczytaną zmianą kodu.

10. Tym razem zamiast wysyłać drugi komunikat Hello w pokoju możesz wybrać ostatnie żądanie HTTP zarejestrowane w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym i kliknąć Replay. Podobnie jak ostatnio aplikacja do Google Chat nie odpowiada, ponieważ jest aktywnie debugowana.

11. 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ą wiadomości.

Python

1. Uzyskaj nowe dane logowania użytkownika, które będą używane w domyślnym uwierzytelnianiu aplikacji:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   Zastąp PROJECT_ID identyfikatorem projektu projektu w chmurze aplikacji.

2. Sklonuj repozytorium googleworkspace/add-ons-samples z GitHuba na środowisko lokalne. Zawiera ono kod aplikacji:

   git clone https://github.com/googleworkspace/add-ons-samples.git

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

   1. W nowym oknie otwórz folder add-ons-samples/python/chat/avatar-app.

   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ą 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", "avatar_app",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      

   5. Dodaj punkt przerwania, który wstrzymuje przetwarzanie żądania HTTP w pliku main.py, a następnie uruchom i debuguj za pomocą dodanej wcześniej konfiguracji 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.

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

   

   Rysunek 4. Terminal z ngrok działającym serwerem i przekierowaniem.

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

   

   Rysunek 5. Interfejs internetowy hostowany przez aplikację ngrok, w którym nie widać żądań HTTP.

6. Przetestuj aplikację do czatu, wysyłając do niej wiadomość bezpośrednią:

   • Otwórz Google Chat.

     Otwórz Google Chat

   • Kliknij Nowy czat add.

   • W oknie wpisz nazwę aplikacji do obsługi czatu w Google Chat.

   • W wynikach wyszukiwania znajdź aplikację do Google Chat i kliknij Dodaj > Chat.

   • W polu czatu wpisz Hey! i naciśnij enter. Aplikacja Google Chat nie odpowiada, ponieważ jest aktywnie debugowana.

7. W Visual Studio Code w środowisku lokalnym możesz zobaczyć, że wykonanie zostało wstrzymane w ustawionym punkcie przerwania.

   

   Rysunek 6. Wykonywanie jest wstrzymane w ustawionym punkcie przerwania.

8. Gdy wznowisz wykonywanie w debuggerze Visual Studio Code, zanim Google Chat przekroczy limit czasu, aplikacja w Google Chat odpowie Twoim imieniem i nazwiskiem oraz zdjęciem awatara w wiadomości.

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

   

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

10. Aby zmienić działanie aplikacji, zastąp Hello ciągiem Hey 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.

    

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

11. Tym razem zamiast wysyłać drugi komunikat Hey! w pokoju możesz wybrać ostatnie żądanie HTTP zarejestrowane w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym i kliknąć Replay. Podobnie jak ostatnio, aplikacja do Google Chat nie odpowiada, ponieważ jest aktywnie debugowana.

12. 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ą wiadomości.

Java

1. Uzyskaj nowe dane logowania użytkownika, które będą używane w domyślnym uwierzytelnianiu aplikacji:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   Zastąp PROJECT_ID identyfikatorem projektu projektu w chmurze aplikacji.

2. Sklonuj repozytorium googleworkspace/add-ons-samples z GitHub w środowisku lokalnym. Zawiera ono kod aplikacji:

   git clone https://github.com/googleworkspace/add-ons-samples.git

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

   1. W nowym oknie otwórz folder add-ons-samples/java/chat/avatar-app.

   2. Skonfiguruj projekt Maven, aby uruchamiać aplikację App lokalnie na porcie 9000, dodając w pliku pom.xml wtyczkę do kompilacji Google 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>App</functionTarget>
              <port>9000</port>
          </configuration>
      </plugin>
      ...
      

   3. Możesz teraz 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 z portem 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 App.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.

      

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

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

   

   Rysunek 4. Terminal z ngrok działającym serwerem i przekierowaniem.

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

   

   Rysunek 5. Interfejs internetowy hostowany przez aplikację ngrok, w którym nie widać żądań HTTP.

6. Przetestuj aplikację do czatu, wysyłając do niej wiadomość bezpośrednią:

   • Otwórz Google Chat.

     Otwórz Google Chat

   • Kliknij Nowy czat add.

   • W oknie wpisz nazwę aplikacji do obsługi czatu w Google Chat.

   • W wynikach wyszukiwania znajdź aplikację do Google Chat i kliknij Dodaj > Chat.

   • W polu czatu wpisz Hey! i naciśnij enter. Aplikacja Google Chat nie odpowiada, ponieważ jest aktywnie debugowana.

7. W Visual Studio Code w środowisku lokalnym możesz zobaczyć, że wykonanie zostało wstrzymane w ustawionym punkcie przerwania.

   

   Rysunek 6. Wykonywanie jest wstrzymane w ustawionym punkcie przerwania.

8. Gdy wznowisz wykonywanie w debuggerze Visual Studio Code, zanim Google Chat przekroczy limit czasu, aplikacja w Google Chat odpowie Twoim imieniem i nazwiskiem oraz zdjęciem awatara w wiadomości.

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

   

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

10. Aby zmienić działanie aplikacji, zastąp Hello słowem Hey w wierszu 55 w pliku App.java, uruchom ponownie proces mvnDebug i ponownie uruchom Remote Debug Watch, aby ponownie podłączyć i uruchomić debugowanie.

11. Tym razem zamiast wysyłać drugi komunikat Hey! w pokoju możesz wybrać ostatnie żądanie HTTP zarejestrowane w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym i kliknąć Replay. Podobnie jak ostatnio aplikacja do Google Chat nie odpowiada, ponieważ jest aktywnie debugowana.

12. 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ą wiadomości.