Debugowanie aplikacji Google Chat

Node.js

Python

Java

Node.js

• Najnowsze wersje aplikacji node i npm zainstalowana w Twoim lokalnym środowisku.

• Najnowsza wersja aplikacji nodemon zainstalowana w Twoim regionie jest używany do automatycznego ponownego wczytywania:

  npm install -g nodemon
  

• Aplikacja do obsługi czatu HTTP skonfigurowana pod kątem i wysyłanie wiadomości. Możesz obserwować Wymagania wstępne Skonfiguruj i opublikuj aplikację w Google Czat Krótki przewodnik Jedyna różnica jest taka, że w polu Nazwa aplikacji musisz ustawić wartość Debug App oraz URL aplikacji na przykład na http://example.com.

• IDE skonfigurowane w środowisku lokalnym z możliwością debugowania. Wykorzystujemy Visual Studio Code IDE i jego środowisko domyślne debugowania funkcji w w tym przewodniku.

• Git zainstalowano w Twoim lokalnym środowisku.

• konto ngrok,

Python

• Najnowsza wersja aplikacji python3 zainstalowano w Twoim lokalnym środowisku.
• Najnowsza wersja pip oraz Aplikacja virtualenv została zainstalowana w lokalnym środowisku, służą do zarządzania pakietami Pythona oraz środowisk Google Cloud.
• Aplikacja do obsługi czatu HTTP skonfigurowana pod kątem i wysyłanie wiadomości. Możesz obserwować Wymagania wstępne Skonfiguruj i opublikuj aplikację w Google Czat Krótki przewodnik Jedyna różnica jest taka, że w polu Nazwa aplikacji musisz ustawić wartość Debug App oraz URL aplikacji na przykład na http://example.com.
• IDE skonfigurowane w środowisku lokalnym z możliwością debugowania. Wykorzystujemy Visual Studio Code IDE i jego środowisko domyślne debugowania funkcji w w tym przewodniku.
• Git zainstalowano w Twoim lokalnym środowisku.
• konto ngrok,
• Najnowsza wersja aplikacji gcloud zainstalowano i zainicjowane w w środowisku lokalnym.

Java

• Najnowsza stabilna wersja aplikacji Java SE 11's JDK zainstalowana lokalnie dla środowiska.
• Najnowsza wersja aplikacji Apache Maven jest zainstalowana w Twoim środowisku lokalnym, służy do zarządzania projektami Java.
• Aplikacja do obsługi czatu HTTP skonfigurowana pod kątem i wysyłanie wiadomości. Możesz obserwować Wymagania wstępne Skonfiguruj i opublikuj aplikację w Google Czat Krótki przewodnik Jedyna różnica jest taka, że w polu Nazwa aplikacji musisz ustawić wartość Debug App oraz URL aplikacji na przykład na http://example.com.
• IDE skonfigurowane w środowisku lokalnym z możliwością debugowania. Wykorzystujemy Visual Studio Code IDE i jego środowisko domyślne debugowania funkcji w w tym przewodniku.
• Git zainstalowano w Twoim lokalnym środowisku.
• konto ngrok,
• Najnowsza wersja aplikacji gcloud zainstalowano i zainicjowane w w środowisku lokalnym.

Node.js

1. Klonowanie repozytorium googleworkspace/google-chat-samples z GitHuba do środowiska lokalnego, zawiera on kod aplikacji wykonaj:

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

2. Z IDE Visual Studio Code zainstalowanego w Twoim środowisku lokalnym wykonaj te czynności:

   1. Otwórz folder w nowym oknie google-chat-samples/node/basic-app

   2. Skonfiguruj aplikację pod kątem automatycznego ponownego ładowania debugowania przez dodanie 2 elementów 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 aktywuje skrypt debug-watch przez utworzenie pliku .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 uruchom debugowanie za pomocą Konfiguracja Debug Watch została dodana wcześniej. Aplikacja jest teraz uruchomione i nasłuchiwane żądania HTTP na porcie 9000.

      

      Rysunek 3. Aplikacja działa i nasłuchuje HTTP do portu 9000.

3. Uruchom aplikację ngrok w środowisku lokalnym:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   Zastąp NGROK_STATIC_DOMAIN domeną statyczną w swoje konto ngrok. Wszystkie prośby są teraz przekierowywane do i port używany przez aplikację.

   

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

4. Interfejs internetowy jest również uruchamiany na lokalnym hoście przez interfejs ngrok możesz monitorować wszystkie działania, otwierając ją w przeglądarce.

   

   Rysunek 5. Interfejs internetowy hostowany przez aplikację ngrok nie wyświetla żadnych żądań HTTP.

5. Przetestuj aplikację Google Chat, wysyłając ją bezpośrednio wiadomość:

   • Otwórz Google Chat.

     Otwórz Google Chat

   • Kliknij Nowy czat add.

   • W oknie wpisz nazwę swojego aplikacja Google Chat.

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

   • W pokoju czatu wpisz Hello i naciśnij enter. Twoje Aplikacja do obsługi czatu nie odpowiada, ponieważ jest aktywnie debugowania.

6. W narzędziu Visual Studio Code w Twoim ś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 kodu z debugera Visual Studio Code przed upływem limitu czasu oczekiwania w Google Chat odpowiedzi: Your message : Hello.

8. Logi żądań i odpowiedzi HTTP możesz sprawdzić z poziomu interfejsu internetowego. hostowane przez aplikację ngrok w Twoim środowisku lokalnym.

   

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

9. Aby zmienić działanie aplikacji, zamień Your message na Here was your message (w tekście 35) komponentu index.json. Po zapisaniu pliku, nodemon automatycznie ponownie załaduje aplikację z zaktualizowany kod źródłowy, a Visual Studio Code pozostaje 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 wysłać drugą wiadomość Hello w pokoju, może wybrać ostatnie żądanie HTTP zarejestrowane w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym i kliknij Replay. Tak jak ostatnio, aplikacja Google Chat nie odpowiada ponieważ trwa debugowanie.

11. Gdy wznowisz wykonanie kodu z debugera Visual Studio Code możesz zobaczyć z interfejsu internetowego hostowanego przez aplikację ngrok w środowisko lokalne, z którym aplikacja generuje odpowiedź zaktualizowana wersja wiadomości Here was your message : Hello.

Python

1. Uzyskiwanie nowych danych logowania użytkownika na potrzeby ustawienia Ustawienie domyślne aplikacji Dane logowania:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login
   

   Zamień PROJECT_ID na identyfikator projektu dla projektu Cloud aplikacji.

2. Klonowanie repozytorium googleworkspace/google-chat-samples z GitHuba do środowiska lokalnego, zawiera on kod aplikacji:

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

3. Z IDE Visual Studio Code zainstalowanego w Twoim środowisku lokalnym wykonaj te czynności:

   1. Otwórz folder w nowym oknie 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 środowisko:

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

   5. Dodaj punkt przerwania, który wstrzymuje przetwarzanie żądania HTTP w pliku main.py i uruchom debugowanie za pomocą Konfiguracja Debug Watch została dodana wcześniej. Aplikacja jest teraz uruchomione i nasłuchiwane żądania HTTP na porcie 9000.

      

      Rysunek 3. Aplikacja działa i nasłuchuje HTTP do portu 9000.

4. Uruchom aplikację ngrok w środowisku lokalnym:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   Zastąp NGROK_STATIC_DOMAIN domeną statyczną w swoje konto ngrok. Wszystkie prośby są teraz przekierowywane do i port używany przez aplikację.

   

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

5. Interfejs internetowy jest również uruchamiany na lokalnym hoście przez interfejs ngrok możesz monitorować wszystkie działania, otwierając ją w przeglądarce.

   

   Rysunek 5. Interfejs internetowy hostowany przez aplikację ngrok nie wyświetla żadnych żądań HTTP.

6. Przetestuj aplikację Google Chat, wysyłając ją bezpośrednio wiadomość:

   • Otwórz Google Chat.

     Otwórz Google Chat

   • Kliknij Nowy czat add.

   • W oknie wpisz nazwę swojego aplikacja Google Chat.

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

   • W pokoju czatu wpisz Hey! i naciśnij enter. Twoje Aplikacja do obsługi czatu nie odpowiada, ponieważ trwa aktywnie debugowania.

7. W narzędziu Visual Studio Code w Twoim ś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 wykonanie kodu z debugera Visual Studio Code przed upływem limitu czasu oczekiwania w Google Chat odpowiedzi zawiera Twoją nazwę użytkownika oraz zdjęcie awatara w wiadomości.

9. Logi żądań i odpowiedzi HTTP możesz sprawdzić z poziomu interfejsu internetowego. hostowane przez aplikację ngrok w Twoim środowisku lokalnym.

   

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

10. Aby zmienić działanie aplikacji, zamień Hello na Hey w tekście 51 z pliku main.py. Gdy zapiszesz plik, Visual Studio Code automatycznie wczytuje ponownie aplikację ze zaktualizowanym kodem źródłowym, pozostanie 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 wysłać drugą wiadomość Hey! w pokoju, może wybrać ostatnie żądanie HTTP zarejestrowane w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym i kliknij Replay. Tak jak ostatnio, aplikacja Google Chat nie odpowiada ponieważ trwa debugowanie.

12. Gdy wznowisz wykonanie kodu z debugera Visual Studio Code możesz zobaczyć z interfejsu internetowego hostowanego przez aplikację ngrok w środowisko lokalne, z którym aplikacja generuje odpowiedź zaktualizowaną wersję wiadomości.

Java

1. Uzyskiwanie nowych danych logowania użytkownika na potrzeby ustawienia Ustawienie domyślne aplikacji Dane logowania:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login
   

   Zamień PROJECT_ID na identyfikator projektu dla projektu Cloud aplikacji.

2. Klonowanie repozytorium googleworkspace/google-chat-samples z GitHuba w środowisku lokalnym zawiera on kod aplikacji:

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

3. Z IDE Visual Studio Code zainstalowanego w Twoim środowisku lokalnym wykonaj te czynności:

   1. Otwórz folder w nowym oknie google-chat-samples/java/avatar-app

   2. Skonfiguruj projekt Maven do uruchamiania aplikacji App port 9000 lokalnie przez dodanie kompilacji Cloud Functions Framework wtyczka 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>App</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 skonfigurować uruchomienie o nazwie Remote Debug Watch, które wiąże się z plikiem aplikacja uruchomiona 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 App.java i rozpocznij załączanie i debugowanie za pomocą Konfiguracja Remote Debug Watch została dodana wcześniej. Ta aplikacja jest uruchomione i nasłuchujące żądania HTTP na porcie 9000.

      

      Rysunek 3. Aplikacja jest uruchomiona i nasłuchuje HTTP żądania do portu 9000.

4. Uruchom aplikację ngrok w środowisku lokalnym:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   Zastąp NGROK_STATIC_DOMAIN domeną statyczną w swoje konto ngrok. Wszystkie prośby są teraz przekierowywane do i port używany przez aplikację.

   

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

5. Interfejs internetowy jest również uruchamiany na lokalnym hoście przez interfejs ngrok możesz monitorować wszystkie działania, otwierając ją w przeglądarce.

   

   Rysunek 5. Interfejs internetowy hostowany przez aplikację ngrok nie wyświetla żadnych żądań HTTP.

6. Przetestuj aplikację Google Chat, wysyłając ją bezpośrednio wiadomość:

   • Otwórz Google Chat.

     Otwórz Google Chat

   • Kliknij Nowy czat add.

   • W oknie wpisz nazwę swojego aplikacja Google Chat.

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

   • W pokoju czatu wpisz Hey! i naciśnij enter. Twoje Aplikacja do obsługi czatu nie odpowiada, ponieważ trwa aktywnie debugowania.

7. W narzędziu Visual Studio Code w Twoim ś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 wykonanie kodu z debugera Visual Studio Code przed upływem limitu czasu oczekiwania w Google Chat odpowiedzi zawiera Twoją nazwę użytkownika oraz zdjęcie awatara w wiadomości.

9. Logi żądań i odpowiedzi HTTP możesz sprawdzić z poziomu interfejsu internetowego. hostowane przez aplikację ngrok w Twoim środowisku lokalnym.

   

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

10. Aby zmienić działanie aplikacji, zamień Hello na Hey w tekście 55 pliku App.java, ponownie uruchom proces mvnDebug i uruchom ponownie aplikację Remote Debug Watch, aby podłączyć ją ponownie i uruchomić ponownie i debugowaniu.

11. Tym razem zamiast wysłać drugą wiadomość Hey! w pokoju, może wybrać ostatnie żądanie HTTP zarejestrowane w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym i kliknij Replay. Tak jak ostatnio, aplikacja Google Chat nie odpowiada ponieważ trwa debugowanie.

12. Gdy wznowisz wykonanie kodu z debugera Visual Studio Code możesz zobaczyć z interfejsu internetowego hostowanego przez aplikację ngrok w środowisko lokalne, z którym aplikacja generuje odpowiedź zaktualizowaną wersję wiadomości.