Debugowanie aplikacji Google Chat

Node.js

Python

Java

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

• Aplikacja HTTP Chat skonfigurowana do obsługi wiadomości. Możesz postępować zgodnie z sekcjami Warunki wstępne, Konfigurowanie środowiska i Publikowanie aplikacji w Google Chat w Przewodniku szybkiego startu. Jedyną różnicą jest to, że musisz ustawić Nazwa aplikacji na Debug App, a adres URL punktu końcowego HTTP na dowolną wartość, np. http://example.com.

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

• Git zainstalowany w środowisku lokalnym.

• Konto ngrok.

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.
• Aplikacja HTTP Chat skonfigurowana do obsługi wiadomości. Możesz postępować zgodnie z sekcjami Warunki wstępne, Konfigurowanie środowiska i Publikowanie aplikacji w Google Chat w Przewodniku szybkiego startu. Jedyną różnicą jest to, że musisz ustawić Nazwa aplikacji na Debug App, a adres URL punktu końcowego HTTP na dowolną wartość, np. http://example.com.
• IDE skonfigurowane w środowisku lokalnym, które umożliwia debugowanie. W tym przewodniku używamy środowiska Visual Studio CodeIDE i domyślnych funkcji debugowania.
• Git zainstalowany w środowisku lokalnym.
• 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;
• Aplikacja HTTP Chat skonfigurowana do obsługi wiadomości. Możesz postępować zgodnie z sekcjami Warunki wstępne, Konfigurowanie środowiska i Publikowanie aplikacji w Google Chat w Przewodniku szybkiego startu. Jedyną różnicą jest to, że musisz ustawić Nazwa aplikacji na Debug App, a adres URL punktu końcowego HTTP na dowolną wartość, np. http://example.com.
• IDE skonfigurowane w środowisku lokalnym, które umożliwia debugowanie. W tym przewodniku używamy środowiska Visual Studio CodeIDE i domyślnych funkcji debugowania.
• Git zainstalowany w środowisku lokalnym.
• Konto ngrok.
• Najnowsza wersja gcloud zainstalowana i zainicjowana w Twoim środowisku lokalnym.

Node.js

1. Sklonuj 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 środowisku Visual Studio Code IDE zainstalowanym w środowisku lokalnym:

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

   2. Skonfiguruj aplikację do debugowania automatycznego przeładowania, dodając 2 skrypty do 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 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.

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 Twojego lokalnego środowiska i portu używanego przez aplikację.

   

   Rysunek 4. Terminal z uruchomionym serwerem ngrok i przekierowaniem.

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

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

   • Otwórz Google Chat.

     Otwórz Google Chat

   • Kliknij Nowy czat add.

   • W oknie wpisz nazwę aplikacji do czatu.

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

   • W polu czatu wpisz Hello i naciśnij enter. Twoja aplikacja 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 miejscu ustawionego punktu przerwania.

   

   Rysunek 6. Wykonywanie jest wstrzymywane w ustawionym punkcie przerwania.

7. Gdy wznowisz wykonywanie kodu w debugerze Visual Studio Code przed przekroczeniem limitu czasu przez Google Chat, aplikacja Chat odpowie Your message : Hello.

8. 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.

9. Aby zmienić zachowanie aplikacji, zastąp Your message kodem Here was your message w elementach 35 w elementach index.json. Po zapisaniu pliku 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.

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

11. Gdy wznowisz wykonywanie aplikacji Visual Studio Code za pomocą jej debugera, zobaczysz w interfejsie internetowym hostowanym przez aplikację ngrok w Twoim środowisku lokalnym, że aplikacja wygenerowała odpowiedź z aktualną wersją wiadomości Here was your message : Hello.

Python

1. Uzyskaj nowe dane logowania użytkownika, które będą używane do domyślnego uwierzytelniania aplikacji:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   Zastąp PROJECT_ID identyfikatorem projektu aplikacji w Google Cloud.

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

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

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

   1. W nowym oknie otwórz folder google-chat-samples/python/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ą 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", "avatar_app",
                  "--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.

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 Twojego lokalnego środowiska i portu używanego przez aplikację.

   

   Rysunek 4. Terminal z uruchomionym serwerem ngrok i przekierowaniem.

5. 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.

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

   • Otwórz Google Chat.

     Otwórz Google Chat

   • Kliknij Nowy czat add.

   • W oknie wpisz nazwę aplikacji do czatu.

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

   • W polu czatu wpisz Hey! i kliknij enter. Twoja aplikacja do czatu nie odpowiada, ponieważ jest aktywnie debugowana.

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

8. Gdy wznowisz wykonywanie z debugera Visual Studio Code, zanim Google Chat przekroczy limit czasu, aplikacja Google Chat odpowie z Twoim imieniem i nazwiskiem oraz awatarem w wiadomości.

9. 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.

10. Aby zmienić zachowanie aplikacji, zastąp Hello wartością Hey w pliku 51 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.

11. Tym razem zamiast wysyłać drugą wiadomość Hey! w pokoju możesz wybrać ostatnie żądanie HTTP zapisane w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym i kliknąć Replay. Podobnie jak poprzednio, Twoja aplikacja Chat nie odpowiada, ponieważ jest obecnie debugowana.

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

Java

1. Uzyskaj nowe dane logowania użytkownika, które będą używane do domyślnego uwierzytelniania aplikacji:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   Zastąp PROJECT_ID identyfikatorem projektu aplikacji w Google Cloud.

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

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

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

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

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

      ...
      <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. 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 App.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.

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 Twojego lokalnego środowiska i portu używanego przez aplikację.

   

   Rysunek 4. Terminal z uruchomionym serwerem ngrok i przekierowaniem.

5. 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.

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

   • Otwórz Google Chat.

     Otwórz Google Chat

   • Kliknij Nowy czat add.

   • W oknie wpisz nazwę aplikacji do czatu.

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

   • W polu czatu wpisz Hey! i kliknij enter. Twoja aplikacja do czatu nie odpowiada, ponieważ jest aktywnie debugowana.

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

8. Gdy wznowisz wykonywanie z debugera Visual Studio Code, zanim Google Chat przekroczy limit czasu, aplikacja Google Chat odpowie z Twoim imieniem i nazwiskiem oraz awatarem w wiadomości.

9. 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.

10. Aby zmienić zachowanie aplikacji, zastąp Hello wartością Hey w tagu inline55 pliku App.java, ponownie uruchom proces mvnDebug i ponownie uruchom Remote Debug Watch, aby ponownie dołączyć i wznowić debugowanie.

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

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