Отладка приложений Google Chat

Node.js

Питон

Ява

Node.js

• Последние версии node и npm установлены в вашей локальной среде.

• Последняя версия nodemon , установленная в вашей локальной среде, используется для автоматической перезагрузки:

  npm install -g nodemon

• Приложение HTTP-чата, настроенное для обмена сообщениями. См. разделы «Предварительные условия» , «Настройка среды » и «Публикация приложения в Google Chat» руководства «Краткий старт» . Единственное отличие заключается в том, что необходимо указать имя приложения Debug App и указать URL-адрес конечной точки HTTP , например http://example.com .

• Интегрированная среда разработки (IDE), настроенная в вашей локальной среде и поддерживающая отладку. В этом руководстве для наглядности мы используем интегрированную среду разработки (IDE) Visual Studio Code и её стандартные функции отладки .

• Git установлен в вашей локальной среде.

• Аккаунт ngrok .

Питон

• Последняя версия python3 установлена ​​в вашей локальной среде.
• Последние версии pip и virtualenv установленные в вашей локальной среде, используются для управления пакетами Python и виртуальными средами соответственно.
• Приложение HTTP-чата, настроенное для обмена сообщениями. См. разделы «Предварительные условия» , «Настройка среды » и «Публикация приложения в Google Chat» руководства «Краткий старт» . Единственное отличие заключается в том, что необходимо указать имя приложения Debug App и указать URL-адрес конечной точки HTTP , например http://example.com .
• Интегрированная среда разработки (IDE), настроенная в вашей локальной среде и поддерживающая отладку. В этом руководстве для наглядности мы используем интегрированную среду разработки (IDE) Visual Studio Code и её стандартные функции отладки .
• Git установлен в вашей локальной среде.
• Аккаунт ngrok .
• Последняя версия gcloud установлена ​​и инициализирована в вашей локальной среде.

Ява

• Последняя стабильная версия Java SE 11's JDK установленная в вашей локальной среде.
• Последняя версия Apache Maven , установленная в вашей локальной среде, используется для управления проектами Java.
• Приложение HTTP-чата, настроенное для обмена сообщениями. См. разделы «Предварительные условия» , «Настройка среды » и «Публикация приложения в Google Chat» руководства «Краткий старт» . Единственное отличие заключается в том, что необходимо указать имя приложения Debug App и указать URL-адрес конечной точки HTTP , например http://example.com .
• Интегрированная среда разработки (IDE), настроенная в вашей локальной среде и поддерживающая отладку. В этом руководстве для наглядности мы используем интегрированную среду разработки (IDE) Visual Studio Code и её стандартные функции отладки .
• Git установлен в вашей локальной среде.
• Аккаунт ngrok .
• Последняя версия gcloud установлена ​​и инициализирована в вашей локальной среде.

Node.js

1. Клонируйте репозиторий googleworkspace/google-chat-samples из GitHub в свою локальную среду. Он содержит код приложения для выполнения:

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

2. В среде Visual Studio Code IDE, установленной в вашей локальной среде, выполните следующие действия:

   1. В новом окне откройте папку google-chat-samples/node/basic-app .

   2. Настройте приложение для отладки с автоматической перезагрузкой, добавив два скрипта в файл package.json :

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

   3. Из корневого каталога установите приложение:

      npm install

   4. Создайте и настройте запуск с именем Debug Watch , который запускает скрипт debug-watch , создав файл .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. Добавьте точку останова, которая приостанавливает обработку HTTP-запроса в файле index.js , и запустите запуск и отладку с ранее добавленной конфигурацией Debug Watch . Приложение теперь запущено и прослушивает HTTP-запросы на порту 9000 .

      

      Рисунок 3. Приложение запущено и прослушивает HTTP-запросы на порту 9000 .

3. Запустите приложение ngrok в вашей локальной среде:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   Замените NGROK_STATIC_DOMAIN статическим доменом в вашей учётной записи ngrok . Теперь все запросы будут перенаправляться в вашу локальную среду и на порт, используемый приложением.

   

   Рисунок 4. Терминал с запущенным сервером ngrok и перенаправлением.

4. Веб-интерфейс также запускается на вашем локальном хосте приложением ngrok ; вы можете отслеживать все действия, открыв его в браузере.

   

   Рисунок 5. Веб-интерфейс, размещенный приложением ngrok , не отображает HTTP-запросы.

5. Протестируйте свое приложение Chat, отправив ему личное сообщение:

   • Откройте Google Чат.

     Перейти в Google Чат

   • Нажмите add новый чат .

   • В диалоговом окне введите название вашего чат-приложения.

   • В результатах поиска найдите приложение Chat, нажмите Добавить > Чат .

   • В поле для личных сообщений введите Hello и нажмите enter . Ваше приложение Chat не отвечает, поскольку оно находится в процессе отладки.

6. В Visual Studio Code в вашей локальной среде вы можете увидеть, что выполнение приостановлено на установленной точке останова.

   

   Рисунок 6. Выполнение приостанавливается на установленной точке останова.

7. При возобновлении выполнения из отладчика Visual Studio Code до истечения времени ожидания Google Chat приложение Chat отвечает Your message : Hello .

8. Вы можете проверить журналы HTTP-запросов и ответов из веб-интерфейса, размещенного приложением ngrok в вашей локальной среде.

   

   Рисунок 7. HTTP-запрос от веб-интерфейса, размещенного приложением ngrok .

9. Чтобы изменить поведение приложения, замените Your message Here was your message в строке 35 файла index.json . При сохранении файла nodemon автоматически перезагружает приложение с обновлённым исходным кодом, а Visual Studio Code остаётся в режиме отладки.

   

   Рисунок 8. Приложение запущено и прослушивает HTTP-запросы на порту 9000 с загруженным изменением кода.

10. На этот раз вместо отправки второго сообщения Hello в поле «Здравствуйте», вы можете выбрать последний HTTP-запрос, зарегистрированный в веб-интерфейсе, размещенном приложением ngrok в вашей локальной среде, и нажать Replay . Как и в прошлый раз, ваше приложение Chat не отвечает, поскольку оно находится в процессе активной отладки.

11. При возобновлении выполнения из отладчика Visual Studio Code вы можете увидеть в веб-интерфейсе, размещенном приложением ngrok в вашей локальной среде, что приложение генерирует ответ с обновленной версией сообщения Here was your message : Hello .

Питон

1. Получите новые учетные данные пользователя для использования в качестве учетных данных приложения по умолчанию :

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   Замените PROJECT_ID на идентификатор облачного проекта приложения.

2. Клонируйте репозиторий googleworkspace/google-chat-samples из GitHub в свою локальную среду. Он содержит код приложения:

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

3. В среде Visual Studio Code IDE, установленной в вашей локальной среде, выполните следующие действия:

   1. В новом окне откройте папку google-chat-samples/python/avatar-app .

   2. Создайте новую виртуальную среду для Python env и активируйте ее:

      virtualenv env
      source env/bin/activate

   3. Установите все зависимости проекта с помощью pip в виртуальной среде:

      pip install -r requirements.txt

   4. Создайте файл .vscode/launch.json в корневом каталоге и настройте запуск с именем Debug Watch , который запускает приложение из модуля functions-framework на порту 9000 в режиме отладки в виртуальной среде 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. Добавьте точку останова, которая приостанавливает обработку HTTP-запроса в файле main.py , и запустите запуск и отладку с ранее добавленной конфигурацией Debug Watch . Приложение теперь работает и прослушивает HTTP-запросы на порту 9000 .

      

      Рисунок 3. Приложение запущено и прослушивает HTTP-запросы на порту 9000 .

4. Запустите приложение ngrok в вашей локальной среде:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   Замените NGROK_STATIC_DOMAIN статическим доменом в вашей учётной записи ngrok . Теперь все запросы будут перенаправляться в вашу локальную среду и на порт, используемый приложением.

   

   Рисунок 4. Терминал с запущенным сервером ngrok и перенаправлением.

5. Веб-интерфейс также запускается на вашем локальном хосте приложением ngrok ; вы можете отслеживать все действия, открыв его в браузере.

   

   Рисунок 5. Веб-интерфейс, размещенный приложением ngrok , не отображает HTTP-запросы.

6. Протестируйте свое приложение Chat, отправив ему личное сообщение:

   • Откройте Google Чат.

     Перейти в Google Чат

   • Нажмите add новый чат .

   • В диалоговом окне введите название вашего чат-приложения.

   • В результатах поиска найдите приложение Chat, нажмите Добавить > Чат .

   • В поле для личных сообщений введите Hey! и нажмите enter . Ваше приложение чата не отвечает, поскольку оно находится в процессе отладки.

7. В Visual Studio Code в вашей локальной среде вы можете увидеть, что выполнение приостановлено на установленной точке останова.

   

   Рисунок 6. Выполнение приостанавливается на установленной точке останова.

8. При возобновлении выполнения из отладчика Visual Studio Code до истечения времени ожидания Google Chat приложение Chat отвечает вашим именем и аватаром в сообщении.

9. Вы можете проверить журналы HTTP-запросов и ответов из веб-интерфейса, размещенного приложением ngrok в вашей локальной среде.

   

   Рисунок 7. HTTP-запрос от веб-интерфейса, размещенного приложением ngrok .

10. Чтобы изменить поведение приложения, замените Hello на Hey в строке 51 файла main.py При сохранении файла Visual Studio Code автоматически перезагружает приложение с обновлённым исходным кодом и остаётся в режиме отладки.

    

    Рисунок 8. Приложение запущено и прослушивает HTTP-запросы на порту 9000 с загруженным изменением кода.

11. На этот раз вместо отправки второго сообщения Hey! в поле «Внимание!» вы можете выбрать последний HTTP-запрос, зарегистрированный в веб-интерфейсе, размещенном приложением ngrok в вашей локальной среде, и нажать Replay . Как и в прошлый раз, ваше приложение чата не отвечает, поскольку оно находится в процессе активной отладки.

12. При возобновлении выполнения из отладчика Visual Studio Code вы можете увидеть в веб-интерфейсе, размещенном приложением ngrok в вашей локальной среде, что приложение генерирует ответ с обновленной версией сообщения.

Ява

1. Получите новые учетные данные пользователя для использования в качестве учетных данных приложения по умолчанию :

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   Замените PROJECT_ID на идентификатор облачного проекта приложения.

2. Клонируйте репозиторий googleworkspace/google-chat-samples из GitHub в своей локальной среде, он содержит код приложения:

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

3. В среде Visual Studio Code IDE, установленной в вашей локальной среде, выполните следующие действия:

   1. В новом окне откройте папку google-chat-samples/java/avatar-app .

   2. Настройте проект Maven для локального запуска приложения App на порту 9000 , добавив плагин сборки Cloud Functions Framework function-maven-plugin в файл 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. Теперь вы можете запустить его локально в режиме отладки:

      mvnDebug function:run
      Preparing to execute Maven in debug mode
      Listening for transport dt_socket at address: 8000

   4. Создайте файл .vscode/launch.json в корневом каталоге и настройте запуск с именем Remote Debug Watch , который подключается к ранее запущенному приложению с портом 8000 :

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "java",
              "request": "attach",
              "name": "Remote Debug Watch",
              "projectName": "http-function",
              "hostName": "localhost",
              "port": 8000
          }]
      }
      

   5. Добавьте точку останова, которая приостанавливает обработку HTTP-запроса в файле App.java , и начните подключение и отладку с ранее добавленной конфигурацией Remote Debug Watch . Приложение теперь запущено и прослушивает HTTP-запросы на порту 9000 .

      

      Рисунок 3. Приложение запущено и прослушивает HTTP-запросы на порту 9000 .

4. Запустите приложение ngrok в вашей локальной среде:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   Замените NGROK_STATIC_DOMAIN статическим доменом в вашей учётной записи ngrok . Теперь все запросы будут перенаправляться в вашу локальную среду и на порт, используемый приложением.

   

   Рисунок 4. Терминал с запущенным сервером ngrok и перенаправлением.

5. Веб-интерфейс также запускается на вашем локальном хосте приложением ngrok ; вы можете отслеживать все действия, открыв его в браузере.

   

   Рисунок 5. Веб-интерфейс, размещенный приложением ngrok , не отображает HTTP-запросы.

6. Протестируйте свое приложение Chat, отправив ему личное сообщение:

   • Откройте Google Чат.

     Перейти в Google Чат

   • Нажмите add новый чат .

   • В диалоговом окне введите название вашего чат-приложения.

   • В результатах поиска найдите приложение Chat, нажмите Добавить > Чат .

   • В поле для личных сообщений введите Hey! и нажмите enter . Ваше приложение чата не отвечает, поскольку оно находится в процессе отладки.

7. В Visual Studio Code в вашей локальной среде вы можете увидеть, что выполнение приостановлено на установленной точке останова.

   

   Рисунок 6. Выполнение приостанавливается на установленной точке останова.

8. При возобновлении выполнения из отладчика Visual Studio Code до истечения времени ожидания Google Chat приложение Chat отвечает вашим именем и аватаром в сообщении.

9. Вы можете проверить журналы HTTP-запросов и ответов из веб-интерфейса, размещенного приложением ngrok в вашей локальной среде.

   

   Рисунок 7. HTTP-запрос от веб-интерфейса, размещенного приложением ngrok .

10. Чтобы изменить поведение приложения, замените Hello на Hey в строке 55 файла App.java , перезапустите процесс mvnDebug и перезапустите Remote Debug Watch чтобы повторно подключиться и перезапустить отладку .

11. На этот раз вместо отправки второго сообщения Hey! в поле «В поле» вы можете выбрать последний HTTP-запрос, зарегистрированный в веб-интерфейсе, размещенном приложением ngrok в вашей локальной среде, и нажать Replay . Как и в прошлый раз, ваше приложение чата не отвечает, поскольку оно находится в процессе активной отладки.

12. При возобновлении выполнения из отладчика Visual Studio Code вы можете увидеть в веб-интерфейсе, размещенном приложением ngrok в вашей локальной среде, что приложение генерирует ответ с обновленной версией сообщения.