Debugowanie aplikacji Google Chat

Node.js

Python

Java

Node.js

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

• Najnowsza wersja pakietu nodemon zainstalowana w środowisku lokalnym jest używana do automatycznego ponownego wczytywania:

  npm install -g nodemon
  

• aplikację czatu HTTP skonfigurowaną do przesyłania wiadomości. Wykonaj czynności opisane w sekcjach Wymagania wstępne, Konfigurowanie środowiska i Publikowanie aplikacji w Google Chat w Krótkim przewodniku. Jedyną różnicą jest ustawienie w polu Nazwa aplikacji wartości Debug App, a w polu Adres URL aplikacji dowolnej wartości, np. http://example.com.

• Skonfigurowane w środowisku lokalnym IDE, które można debugować. Do celów poglądowych używamy IDE Visual Studio Code i jego domyślnych funkcji debugowania w tym przewodniku.

• Git została zainstalowana w Twoim środowisku lokalnym.

• konto ngrok,

Python

• Najnowsza wersja aplikacji python3 zainstalowana w środowisku lokalnym.
• Najnowsza wersja pip i virtualenv zainstalowana w środowisku lokalnym służy do zarządzania pakietami Pythona i środowiskami wirtualnymi odpowiednio do zarządzania pakietami Pythona.
• aplikację czatu HTTP skonfigurowaną do przesyłania wiadomości. Wykonaj czynności opisane w sekcjach Wymagania wstępne, Konfigurowanie środowiska i Publikowanie aplikacji w Google Chat w Krótkim przewodniku. Jedyną różnicą jest ustawienie w polu Nazwa aplikacji wartości Debug App, a w polu Adres URL aplikacji dowolnej wartości, np. http://example.com.
• Skonfigurowane w środowisku lokalnym IDE, które można debugować. Do celów poglądowych używamy IDE Visual Studio Code i jego domyślnych funkcji debugowania w tym przewodniku.
• Git została zainstalowana w Twoim środowisku lokalnym.
• konto ngrok,
• Najnowsza wersja pakietu gcloud zainstalowana i zainicjowana w środowisku lokalnym.

Java

• Najnowsza stabilna wersja aplikacji Java SE 11's JDK zainstalowana w środowisku lokalnym.
• Najnowsza wersja pakietu Apache Maven zainstalowana w środowisku lokalnym jest używana do zarządzania projektami Java.
• aplikację czatu HTTP skonfigurowaną do przesyłania wiadomości. Wykonaj czynności opisane w sekcjach Wymagania wstępne, Konfigurowanie środowiska i Publikowanie aplikacji w Google Chat w Krótkim przewodniku. Jedyną różnicą jest ustawienie w polu Nazwa aplikacji wartości Debug App, a w polu Adres URL aplikacji dowolnej wartości, np. http://example.com.
• Skonfigurowane w środowisku lokalnym IDE, które można debugować. Do celów poglądowych używamy IDE Visual Studio Code i jego domyślnych funkcji debugowania w tym przewodniku.
• Git została zainstalowana w Twoim środowisku lokalnym.
• konto ngrok,
• Najnowsza wersja pakietu gcloud zainstalowana i zainicjowana w środowisku lokalnym.

Node.js

1. Skopiuj 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 debugowanie automatycznego ponownego ładowania, dodając w pliku package.json 2 skrypty:

      {
          ...
          "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 będzie uruchamiać skrypt debug-watch. W tym celu utwórz w katalogu głównym plik .vscode/launch.json:

      {
          "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 użyciem konfiguracji Debug Watch dodanej wcześniej. 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.

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 portu używanego przez aplikację.

   

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

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

   

   Rysunek 5. Interfejs internetowy hostowany przez aplikację ngrok, który nie pokazuje żadnych żądań HTTP.

5. Przetestuj swoją aplikację do obsługi czatu, wysyłając do niej wiadomość 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ę do obsługi czatu i kliknij Dodaj > Google Chat.

   • W pokoju czatu wpisz Hello i naciśnij enter. Aplikacja Google Chat nie odpowiada, ponieważ jest w trakcie debugowania.

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

   

   Rysunek 6. Wykonanie jest wstrzymywane w ustawionym punkcie przerwania.

7. Gdy wznowisz wykonywanie kodu przez debugera Visual Studio Code, zanim Google Chat odpowie na żądanie Your message : Hello, zanim upłynie czas oczekiwania na odpowiedź Google Chat.

8. Logi żądań i odpowiedzi HTTP możesz sprawdzać 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, zamień Your message na Here was your message w tekście 35 w index.json. Gdy zapiszesz plik, nodemon automatycznie ponownie wczyta aplikację ze 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ładowaną zmianą kodu.

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

11. Po wznowieniu działania z debugera Visual Studio Code zobaczysz w interfejsie internetowym udostępnianym przez aplikację ngrok w środowisku lokalnym, że aplikacja generuje odpowiedź ze zaktualizowaną wersją komunikatu Here was your message : Hello.

Python

1. Uzyskiwanie nowych danych logowania użytkownika do wykorzystania 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 aplikacji.

2. Skopiuj 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ą 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 będzie 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", "hello_chat",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      

   5. Dodaj punkt przerwania, który wstrzymuje przetwarzanie żądania HTTP w pliku main.py, i rozpocznij uruchamianie i debugowanie z użyciem konfiguracji Debug Watch dodanej wcześniej. 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.

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 portu używanego przez aplikację.

   

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

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

   

   Rysunek 5. Interfejs internetowy hostowany przez aplikację ngrok, który nie pokazuje żadnych żądań HTTP.

6. Przetestuj swoją aplikację do obsługi czatu, wysyłając do niej wiadomość 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ę do obsługi czatu i kliknij Dodaj > Google Chat.

   • W pokoju czatu wpisz Hey! i naciśnij enter. Aplikacja Google Chat nie odpowiada, ponieważ jest w trakcie debugowania.

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

   

   Rysunek 6. Wykonanie jest wstrzymywane w ustawionym punkcie przerwania.

8. Gdy wznowisz wykonywanie kodu z debugera aplikacji Visual Studio Code, zanim upłynie limit czasu Google Chat, aplikacja Google Chat prześle w wiadomości Twoją nazwę i zdjęcie awatara.

9. Logi żądań i odpowiedzi HTTP możesz sprawdzać 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, zamień Hello na Hey w tekście 51 w pliku main.py. Po zapisaniu pliku Visual Studio Code automatycznie ponownie wczytuje aplikację ze zaktualizowanym kodem źródłowym i pozosta w trybie debugowania.

    

    Rysunek 8. Aplikacja działa 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 hostowanym przez aplikację ngrok w środowisku lokalnym i kliknąć Replay. Tak jak ostatnio, aplikacja Google Chat nie odpowiada, ponieważ jest obecnie debugowana.

12. Po wznowieniu działania z debugera Visual Studio Code zobaczysz w interfejsie internetowym udostępnianym przez aplikację ngrok w środowisku lokalnym, że aplikacja generuje odpowiedź ze zaktualizowaną wersją komunikatu.

Java

1. Uzyskiwanie nowych danych logowania użytkownika do wykorzystania 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 aplikacji.

2. Sklonuj 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 tak, aby aplikacja HelloChat była uruchamiana lokalnie na porcie 9000. W tym celu dodaj wtyczkę function-maven-plugin do kompilacji Cloud Functions Framework 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 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 plik .vscode/launch.json w katalogu głównym i skonfiguruj uruchomienie o nazwie Remote Debug Watch, które będzie dołączać do aplikacji uruchomionej wcześniej przez port 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 żądań HTTP w pliku HelloChat.java, i rozpocznij dołączanie i debugowanie za pomocą konfiguracji Remote Debug Watch dodanej wcześniej. Aplikacja działa teraz i nasłuchuje żądań HTTP na porcie 9000.

      

      Rys. 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 portu używanego przez aplikację.

   

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

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

   

   Rysunek 5. Interfejs internetowy hostowany przez aplikację ngrok, który nie pokazuje żadnych żądań HTTP.

6. Przetestuj swoją aplikację do obsługi czatu, wysyłając do niej wiadomość 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ę do obsługi czatu i kliknij Dodaj > Google Chat.

   • W pokoju czatu wpisz Hey! i naciśnij enter. Aplikacja Google Chat nie odpowiada, ponieważ jest w trakcie debugowania.

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

   

   Rysunek 6. Wykonanie jest wstrzymywane w ustawionym punkcie przerwania.

8. Gdy wznowisz wykonywanie kodu z debugera aplikacji Visual Studio Code, zanim upłynie limit czasu Google Chat, aplikacja Google Chat prześle w wiadomości Twoją nazwę i zdjęcie awatara.

9. Logi żądań i odpowiedzi HTTP możesz sprawdzać 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 wierszem Hello w tekście 55 w pliku HelloChat.java, uruchom ponownie proces mvnDebug i uruchom ponownie Remote Debug Watch, aby ponownie podłączyć i uruchomić debugowanie.Hey

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

12. Po wznowieniu działania z debugera Visual Studio Code zobaczysz w interfejsie internetowym udostępnianym przez aplikację ngrok w środowisku lokalnym, że aplikacja generuje odpowiedź ze zaktualizowaną wersją komunikatu.