Debugowanie aplikacji Google Chat

Node.js

Python

Java

Node.js

• W środowisku lokalnym zainstalowano najnowsze wersje aplikacji node i npm.

• W środowisku lokalnym zainstalowano najnowszą wersję aplikacji nodemon. Jest ona używana do automatycznego ponownego wczytywania:

  npm install -g nodemon
  

• To aplikacja do obsługi czatu HTTP skonfigurowana do przesyłania wiadomości. Zapoznaj się z sekcjami Wymagania wstępne, Konfigurowanie środowiska i Publikowanie aplikacji w Google Chat w krótkim przewodniku. Jedyne różnice polegają na tym, że w polu Nazwa aplikacji musisz ustawić wartość Debug App, a w polu URL aplikacji ustawić dowolną wartość, np. http://example.com.

• IDE skonfigurowane w środowisku lokalnym z możliwością debugowania. W celach ilustracyjnych używamy narzędzia Visual Studio Code IDE i jego domyślnych funkcji debugowania przedstawionych w tym przewodniku.

• Git zainstalowano w środowisku lokalnym.

• konto ngrok,

Python

• W środowisku lokalnym zainstalowano najnowszą wersję usługi python3.
• Najnowsze wersje pip i virtualenv zainstalowane w środowisku lokalnym są używane odpowiednio do zarządzania pakietami Pythona i środowiskami wirtualnymi.
• To aplikacja do obsługi czatu HTTP skonfigurowana do przesyłania wiadomości. Zapoznaj się z sekcjami Wymagania wstępne, Konfigurowanie środowiska i Publikowanie aplikacji w Google Chat w krótkim przewodniku. Jedyne różnice polegają na tym, że w polu Nazwa aplikacji musisz ustawić wartość Debug App, a w polu URL aplikacji ustawić dowolną wartość, np. http://example.com.
• IDE skonfigurowane w środowisku lokalnym z możliwością debugowania. W celach ilustracyjnych używamy narzędzia Visual Studio Code IDE i jego domyślnych funkcji debugowania przedstawionych w tym przewodniku.
• Git zainstalowano w środowisku lokalnym.
• konto ngrok,
• Najnowsza wersja aplikacji gcloud zainstalowana i zainicjowana w środowisku lokalnym.

Java

• Najnowsza stabilna wersja systemu Java SE 11's JDK zainstalowana w środowisku lokalnym.
• W środowisku lokalnym zainstalowana jest najnowsza wersja pakietu Apache Maven, która służy do zarządzania projektami Java.
• To aplikacja do obsługi czatu HTTP skonfigurowana do przesyłania wiadomości. Zapoznaj się z sekcjami Wymagania wstępne, Konfigurowanie środowiska i Publikowanie aplikacji w Google Chat w krótkim przewodniku. Jedyne różnice polegają na tym, że w polu Nazwa aplikacji musisz ustawić wartość Debug App, a w polu URL aplikacji ustawić dowolną wartość, np. http://example.com.
• IDE skonfigurowane w środowisku lokalnym z możliwością debugowania. W celach ilustracyjnych używamy narzędzia Visual Studio Code IDE i jego domyślnych funkcji debugowania przedstawionych w tym przewodniku.
• Git zainstalowano w środowisku lokalnym.
• konto ngrok,
• Najnowsza wersja aplikacji gcloud zainstalowana i zainicjowana w środowisku lokalnym.

Node.js

1. Sklonujesz repozytorium googleworkspace/google-chat-samples z GitHuba do środowiska lokalnego. Zawiera ono kod aplikacji do wykonania:

   git clone https://github.com/googleworkspace/google-chat-samples.git
   

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

   1. W nowym oknie otwórz folder google-chat-samples/node/basic-app.

   2. Skonfiguruj aplikację pod kątem automatycznego ponownego ładowania debugowania, 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 wyzwala 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 potem rozpocznij uruchamianie i debugowanie z dodaną wcześniej konfiguracją Debug Watch. Aplikacja działa teraz 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 domeną statyczną na koncie ngrok. Wszystkie żądania są teraz przekierowywane do środowiska lokalnego i do portu używanego przez aplikację.

   

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

4. Na serwerze lokalnym uruchamia się też interfejs internetowy przez aplikację ngrok. Możesz monitorować wszystkie działania, otwierając go w przeglądarce.

   

   Rysunek 5. Interfejs internetowy hostowany przez aplikację ngrok nie wykazujący żadnych żądań HTTP.

5. Przetestuj aplikację Google Chat, wysyłając ją na czacie:

   • Otwórz Google Chat.

     Otwórz Google Chat

   • Kliknij Nowy czat add.

   • W oknie wpisz nazwę aplikacji Google Chat.

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

   • W pokoju czatu wpisz Hello i naciśnij enter. Aplikacja Google Chat nie odpowiada, ponieważ trwa debugowanie.

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

   

   Rysunek 6. Wykonanie jest wstrzymane w ustawionym punkcie przerwania.

7. Gdy wznowisz wykonanie za pomocą debugera Visual Studio Code, zanim Google Chat przekroczy limit czasu, aplikacja Google Chat otrzyma odpowiedź Your message : Hello.

8. Możesz wyświetlić logi żądań i odpowiedzi HTTP z interfejsu internetowego hostowanego przez aplikację ngrok w środowisku lokalnym.

   

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

9. Aby zmienić działanie aplikacji, zamień Your message na Here was your message w tekście 35 w index.json. Gdy zapiszesz plik, nodemon automatycznie załaduje ponownie aplikację ze zaktualizowanym kodem źródłowym, a Visual Studio Code pozostanie w trybie debugowania.

   

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

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

11. Gdy wznowisz wykonanie przy pomocy debugera kodu Visual Studio Code, z interfejsu internetowego hostowanego przez aplikację ngrok w Twoim środowisku lokalnym zobaczysz, że generuje ona odpowiedź ze zaktualizowaną wersją komunikatu Here was your message : Hello.

Python

1. Uzyskiwanie nowych danych logowania użytkownika na potrzeby domyślnych danych logowania aplikacji:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login
   

   Zastąp PROJECT_ID identyfikatorem projektu projektu Cloud danej aplikacji.

2. Sklonujesz repozytorium googleworkspace/google-chat-samples z GitHuba do środowiska lokalnego. Zawiera ono kod aplikacji:

   git clone https://github.com/googleworkspace/google-chat-samples.git
   

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

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

   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:

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

   5. Dodaj punkt przerwania, który wstrzymuje przetwarzanie żądania HTTP w pliku main.py, a potem rozpocznij uruchamianie i debugowanie z dodaną wcześniej konfiguracją Debug Watch. Aplikacja działa teraz 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 domeną statyczną na koncie ngrok. Wszystkie żądania są teraz przekierowywane do środowiska lokalnego i do portu używanego przez aplikację.

   

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

5. Na serwerze lokalnym uruchamia się też interfejs internetowy przez aplikację ngrok. Możesz monitorować wszystkie działania, otwierając go w przeglądarce.

   

   Rysunek 5. Interfejs internetowy hostowany przez aplikację ngrok nie wykazujący żadnych żądań HTTP.

6. Przetestuj aplikację Google Chat, wysyłając ją na czacie:

   • Otwórz Google Chat.

     Otwórz Google Chat

   • Kliknij Nowy czat add.

   • W oknie wpisz nazwę aplikacji Google Chat.

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

   • W pokoju czatu wpisz Hey! i naciśnij enter. Aplikacja Google Chat nie odpowiada, ponieważ trwa debugowanie.

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

   

   Rysunek 6. Wykonanie jest wstrzymane w ustawionym punkcie przerwania.

8. Gdy wznowisz wykonywanie kodu za pomocą debugera Visual Studio Code, zanim Google Chat przekroczy limit czasu, aplikacja Google Chat wyśle w wiadomości Twoją nazwę i zdjęcie awatara.

9. Możesz wyświetlić logi żądań i odpowiedzi HTTP z interfejsu internetowego hostowanego przez aplikację ngrok w środowisku lokalnym.

   

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

10. Aby zmienić działanie aplikacji, zamień Hello na Hey w tekście 51 w pliku main.py. Po zapisaniu pliku Visual Studio Code automatycznie załaduje ponownie aplikację ze zaktualizowanym kodem źródłowym i pozostanie w trybie debugowania.

    

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

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

12. Gdy wznowisz wykonanie za pomocą debugera skryptu Visual Studio Code, z interfejsu internetowego hostowanego przez aplikację ngrok w Twoim środowisku lokalnym zobaczysz, że ta aplikacja generuje odpowiedź ze zaktualizowaną wersją komunikatu.

Java

1. Uzyskiwanie nowych danych logowania użytkownika na potrzeby domyślnych danych logowania aplikacji:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login
   

   Zastąp PROJECT_ID identyfikatorem projektu projektu Cloud danej aplikacji.

2. Skopiuj repozytorium googleworkspace/google-chat-samples z GitHuba w środowisku lokalnym. Zawiera ono kod aplikacji:

   git clone https://github.com/googleworkspace/google-chat-samples.git
   

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

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

   2. Skonfiguruj projekt Maven do lokalnego uruchamiania aplikacji HelloChat na porcie 9000, dodając wtyczkę kompilacji Cloud Functions Framework function-maven-plugin w pliku pom.xml:

      ...
      <plugin>
          <groupId>com.google.cloud.functions</groupId>
          <artifactId>function-maven-plugin</artifactId>
          <version>0.11.0</version>
          <configuration>
              <functionTarget>HelloChat</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 skonfiguruj uruchomienie o nazwie Remote Debug Watch, które zostanie dołączone 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 HelloChat.java, a potem rozpocznij podłączanie i debugowanie z dodaną wcześniej konfiguracją Remote Debug Watch. Aplikacja działa teraz i nasłuchuje żądań HTTP na porcie 9000.

      

      Rysunek 3. Aplikacja jest uruchomiona 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 domeną statyczną na koncie ngrok. Wszystkie żądania są teraz przekierowywane do środowiska lokalnego i do portu używanego przez aplikację.

   

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

5. Na serwerze lokalnym uruchamia się też interfejs internetowy przez aplikację ngrok. Możesz monitorować wszystkie działania, otwierając go w przeglądarce.

   

   Rysunek 5. Interfejs internetowy hostowany przez aplikację ngrok nie wykazujący żadnych żądań HTTP.

6. Przetestuj aplikację Google Chat, wysyłając ją na czacie:

   • Otwórz Google Chat.

     Otwórz Google Chat

   • Kliknij Nowy czat add.

   • W oknie wpisz nazwę aplikacji Google Chat.

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

   • W pokoju czatu wpisz Hey! i naciśnij enter. Aplikacja Google Chat nie odpowiada, ponieważ trwa debugowanie.

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

   

   Rysunek 6. Wykonanie jest wstrzymane w ustawionym punkcie przerwania.

8. Gdy wznowisz wykonywanie kodu za pomocą debugera Visual Studio Code, zanim Google Chat przekroczy limit czasu, aplikacja Google Chat wyśle w wiadomości Twoją nazwę i zdjęcie awatara.

9. Możesz wyświetlić logi żądań i odpowiedzi HTTP z interfejsu internetowego hostowanego 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 elementem Hey w tekście 55 w pliku HelloChat.java, ponownie uruchom proces mvnDebug i uruchom ponownie Remote Debug Watch, aby ponownie dołączyć i rozpocząć debugowanie.

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

12. Gdy wznowisz wykonanie za pomocą debugera skryptu Visual Studio Code, z interfejsu internetowego hostowanego przez aplikację ngrok w Twoim środowisku lokalnym zobaczysz, że ta aplikacja generuje odpowiedź ze zaktualizowaną wersją komunikatu.