Эта страница переведена с помощью Cloud Translation API.

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

Как разработчику приложений Google Chat вам может потребоваться отладка кода для проверки изменений или устранения сложных проблем. Отладку приложений чата можно выполнять разными способами в зависимости от архитектуры вашего приложения, его функций, способа его развертывания и ваших предпочтений.

На этой странице объясняется, как отлаживать приложение HTTP Chat с помощью ngrok — единой входящей платформы, которую можно использовать для тестирования локальных сред разработки. В этом руководстве вы тестируете изменения кода в локальной среде и устраняете проблемы в удаленной среде.

Отладка из локальной среды разработки

В этом разделе вы взаимодействуете с приложением чата, которое выполняется в вашей локальной среде.

Отладка из локальной среды разработки

Рисунок 1. Отладка в локальной среде разработки.

мастерская

Node.js

Питон

Джава

Предварительные условия

Node.js

Последние версии node и npm , установленные в вашей локальной среде.
Последняя версия nodemon , установленная в вашей локальной среде, используется для автоматической перезагрузки:
```
npm install -g nodemon
```
Приложение HTTP Chat, настроенное для обмена сообщениями. Вы можете следовать разделам «Предварительные требования» , «Настройка среды » и «Публикация приложения в Google Chat» краткого руководства . Единственное отличие состоит в том, что вам необходимо установить имя приложения Debug App и URL-адрес приложения , например http://example.com .
IDE, установленная в вашей локальной среде и поддерживающая отладку. В этом руководстве в целях иллюстрации мы используем Visual Studio Code IDE и ее функции отладки по умолчанию.
Git установлен в вашей локальной среде.
Аккаунт ngrok .

Питон

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

Джава

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

Сделайте службу localhost общедоступной.

Вам необходимо подключить локальную среду к Интернету, чтобы приложение Chat могло получить к ней доступ. Приложение ngrok используется для перенаправления HTTP-запросов, сделанных на общедоступный URL-адрес, в вашу локальную среду.

В браузере в вашей локальной среде войдите в свою учетную запись ngrok .
Установите приложение и настройте authtoken в своей локальной среде.
Создайте статический домен в своей учетной записи ngrok , в инструкциях этого руководства он обозначается как NGROK_STATIC_DOMAIN .

Настройте приложение чата

Настройте приложение Chat для отправки всех HTTP-запросов в ваш статический домен.

В консоли Google Cloud откройте страницу Google Chat API:
Перейдите на страницу API Google Chat.
Откройте вкладку Конфигурация .
Перейдите в «Интерактивные функции» > «Настройки подключения» и установите значение текстового поля «URL-адрес приложения »:
```
https://NGROK_STATIC_DOMAIN
```
Замените NGROK_STATIC_DOMAIN на статический домен в вашей учетной записи ngrok .
Нажмите Сохранить .

Приложение Chat отправляет все свои HTTP-запросы в статический домен.

Рисунок 2. Приложение Chat отправляет все свои HTTP-запросы в статический домен. Публичная служба ngrok действует как мост между приложением Chat и кодом приложения, который выполняется локально.

Протестируйте приложение Чат

Вы можете локально развернуть, настроить, протестировать, отладить и автоматически перезагрузить приложение Chat.

Node.js

Клонируйте репозиторий googleworkspace/google-chat-samples из GitHub в вашу локальную среду. Он содержит код приложения для выполнения:
```
git clone https://github.com/googleworkspace/google-chat-samples.git
```
В среде 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 .
Запустите приложение ngrok в своей локальной среде:
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
Замените NGROK_STATIC_DOMAIN на статический домен в вашей учетной записи ngrok . Все запросы теперь перенаправляются в вашу локальную среду и порт, используемый приложением.
Рисунок 4. Терминал с запущенным и перенаправленным сервером ngrok .
Веб-интерфейс также запускается на вашем локальном хосте с помощью приложения ngrok , вы можете отслеживать все действия, открыв его в браузере.
Рисунок 5. Веб-интерфейс приложения ngrok , в котором нет HTTP-запросов.
Проверьте свое приложение Chat, отправив ему прямое сообщение:
- Откройте Google Чат.
  Перейти в чат Google
- Нажмите новый чат ».
- В диалоговом окне введите название вашего приложения чата.
- В результатах поиска найдите свое приложение Chat, нажмите «Добавить» > «Чат» .
- В области прямых сообщений введите Hello и нажмите enter . Ваше приложение чата не отвечает, поскольку оно активно отлаживается.
В Visual Studio Code в вашей локальной среде вы можете видеть, что выполнение приостанавливается в установленной точке останова.
Рисунок 6. Выполнение приостанавливается в установленной точке останова.
Когда вы возобновляете выполнение Visual Studio Code из отладчика до истечения времени ожидания Google Chat, приложение Chat отвечает на Your message : Hello .
Вы можете проверить журналы HTTP-запросов и ответов из веб-интерфейса, размещенного приложением ngrok в вашей локальной среде.
Рисунок 7. HTTP-запрос из веб-интерфейса приложения ngrok .
Чтобы изменить поведение приложения, замените Your message на Here was your message , встроенное в строку 35 файла index.json . Когда вы сохраняете файл, nodemon автоматически перезагружает приложение с обновленным исходным кодом, а Visual Studio Code остается в режиме отладки.
Рис. 8. Приложение запущено и прослушивает HTTP-запросы на порту 9000 с загруженным изменением кода.
На этот раз вместо отправки второго сообщения Hello в пространстве вы можете выбрать последний HTTP-запрос, зарегистрированный в веб-интерфейсе, размещенном приложением ngrok в вашей локальной среде, и нажать Replay . Как и в прошлый раз, ваше приложение чата не отвечает, поскольку оно активно отлаживается.
Когда вы возобновляете выполнение из отладчика Visual Studio Code вы можете видеть из веб-интерфейса, размещенного приложением ngrok в вашей локальной среде, что приложение генерирует ответ с обновленной версией сообщения. Here was your message : Hello .

Питон

Получите новые учетные данные пользователя для использования в качестве учетных данных приложения по умолчанию :
```
gcloud config set project PROJECT_ID
gcloud auth application-default login
```
Замените PROJECT_ID идентификатором облачного проекта приложения.
Клонируйте репозиторий googleworkspace/google-chat-samples из GitHub в свою локальную среду. Он содержит код приложения:
```
git clone https://github.com/googleworkspace/google-chat-samples.git
```
В среде Visual Studio Code IDE, установленной в вашей локальной среде, выполните следующие действия:
1. В новом окне откройте папку google-chat-samples/python/avatar-app .
2. Создайте новую виртуальную среду для env Python и активируйте ее:
```
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", "hello_chat",
            "--port", "9000",
            "--debug"
        ]
    }]
}
```
5. Добавьте точку останова, которая приостанавливает обработку HTTP-запроса в файле main.py , и начните работу и отладку с добавленной ранее конфигурацией Debug Watch . Приложение теперь работает и прослушивает HTTP-запросы на порту 9000 .
  Рисунок 3. Приложение запущено и прослушивает HTTP-запросы на порту 9000 .
Запустите приложение ngrok в своей локальной среде:
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
Замените NGROK_STATIC_DOMAIN на статический домен в вашей учетной записи ngrok . Все запросы теперь перенаправляются в вашу локальную среду и порт, используемый приложением.
Рисунок 4. Терминал с запущенным и перенаправленным сервером ngrok .
Веб-интерфейс также запускается на вашем локальном хосте с помощью приложения ngrok , вы можете отслеживать все действия, открыв его в браузере.
Рисунок 5. Веб-интерфейс приложения ngrok , в котором нет HTTP-запросов.
Проверьте свое приложение Chat, отправив ему прямое сообщение:
- Откройте Google Чат.
  Перейти в чат Google
- Нажмите новый чат ».
- В диалоговом окне введите название вашего приложения чата.
- В результатах поиска найдите свое приложение Chat, нажмите «Добавить» > «Чат» .
- В области прямого сообщения введите Hey! и нажмите enter . Ваше приложение чата не отвечает, поскольку оно активно отлаживается.
В Visual Studio Code в вашей локальной среде вы можете видеть, что выполнение приостанавливается в установленной точке останова.
Рисунок 6. Выполнение приостанавливается в установленной точке останова.
Когда вы возобновляете выполнение Visual Studio Code из отладчика до истечения времени ожидания Google Chat, приложение Chat отвечает вашим именем и изображением аватара в сообщении.
Вы можете проверить журналы HTTP-запросов и ответов из веб-интерфейса, размещенного приложением ngrok в вашей локальной среде.
Рисунок 7. HTTP-запрос из веб-интерфейса приложения ngrok .
Чтобы изменить поведение приложения, замените Hello на Hey в строке 51 файла main.py Когда вы сохраняете файл, Visual Studio Code автоматически перезагружает приложение с обновленным исходным кодом и остается в режиме отладки.
Рисунок 8. Приложение запущено и прослушивает HTTP-запросы на порту 9000 с загруженным изменением кода.
На этот раз вместо отправки второго сообщения Hey! в этом пространстве вы можете выбрать последний HTTP-запрос, зарегистрированный в веб-интерфейсе, размещенном приложением ngrok в вашей локальной среде, и нажать Replay . Как и в прошлый раз, ваше приложение чата не отвечает, поскольку оно активно отлаживается.
Когда вы возобновляете выполнение из отладчика Visual Studio Code вы можете видеть в веб-интерфейсе, размещенном приложением ngrok в вашей локальной среде, что приложение генерирует ответ с обновленной версией сообщения.

Джава

Получите новые учетные данные пользователя для использования в качестве учетных данных приложения по умолчанию :
```
gcloud config set project PROJECT_ID
gcloud auth application-default login
```
Замените PROJECT_ID идентификатором облачного проекта приложения.
Клонируйте репозиторий googleworkspace/google-chat-samples с GitHub в вашей локальной среде. Он содержит код приложения:
```
git clone https://github.com/googleworkspace/google-chat-samples.git
```
В среде Visual Studio Code IDE, установленной в вашей локальной среде, выполните следующие действия:
1. В новом окне откройте папку google-chat-samples/java/avatar-app .
2. Настройте проект Maven для локального запуска приложения HelloChat на порту 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>HelloChat</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-запроса в файле HelloChat.java , и начните подключение и отладку с помощью добавленной ранее конфигурации Remote Debug Watch . Приложение теперь работает и прослушивает HTTP-запросы на порту 9000 .
  Рисунок 3. Приложение запущено и прослушивает HTTP-запросы на порту 9000 .
Запустите приложение ngrok в своей локальной среде:
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
Замените NGROK_STATIC_DOMAIN на статический домен в вашей учетной записи ngrok . Все запросы теперь перенаправляются в вашу локальную среду и порт, используемый приложением.
Рисунок 4. Терминал с запущенным и перенаправленным сервером ngrok .
Веб-интерфейс также запускается на вашем локальном хосте с помощью приложения ngrok , вы можете отслеживать все действия, открыв его в браузере.
Рисунок 5. Веб-интерфейс приложения ngrok , в котором нет HTTP-запросов.
Проверьте свое приложение Chat, отправив ему прямое сообщение:
- Откройте Google Чат.
  Перейти в чат Google
- Нажмите новый чат ».
- В диалоговом окне введите название вашего приложения чата.
- В результатах поиска найдите свое приложение Chat, нажмите «Добавить» > «Чат» .
- В области личных сообщений введите Hey! и нажмите enter . Ваше приложение чата не отвечает, поскольку оно активно отлаживается.
В Visual Studio Code в вашей локальной среде вы можете видеть, что выполнение приостанавливается в установленной точке останова.
Рисунок 6. Выполнение приостанавливается в установленной точке останова.
Когда вы возобновляете выполнение Visual Studio Code из отладчика до истечения времени ожидания Google Chat, приложение Chat отвечает вашим именем и изображением аватара в сообщении.
Вы можете проверить журналы HTTP-запросов и ответов из веб-интерфейса, размещенного приложением ngrok в вашей локальной среде.
Рисунок 7. HTTP-запрос из веб-интерфейса приложения ngrok .
Чтобы изменить поведение приложения, замените Hello на Hey в строке 55 файла HelloChat.java , перезапустите процесс mvnDebug и перезапустите Remote Debug Watch , чтобы повторно подключиться и перезапустить отладку .
На этот раз вместо отправки второго сообщения Hey! в этом пространстве вы можете выбрать последний HTTP-запрос, зарегистрированный в веб-интерфейсе, размещенном приложением ngrok в вашей локальной среде, и нажать Replay . Как и в прошлый раз, ваше приложение чата не отвечает, поскольку оно активно отлаживается.
Когда вы возобновляете выполнение из отладчика Visual Studio Code вы можете видеть в веб-интерфейсе, размещенном приложением ngrok в вашей локальной среде, что приложение генерирует ответ с обновленной версией сообщения.

Отладка из удаленной среды

В этом разделе вы взаимодействуете со своим приложением чата, которое выполняется в удаленной среде.

Отладка из удаленной среды

Рисунок 9. Отладка из удаленной среды.

Предварительные условия

Место для прямых сообщений с вашим приложением Chat. Вы можете следовать разделу «Проверка приложения чата» в кратком руководстве и найти свое приложение чата, чтобы запустить его.
Ваше приложение, работающее в удаленной среде с включенным отладчиком на определенном порту, в инструкциях этого руководства обозначается как REMOTE_DEBUG_PORT .
Ваша локальная среда может ssh к удаленной среде по протоколу SSH.
IDE, установленная в вашей локальной среде и поддерживающая отладку. В этом руководстве в целях иллюстрации мы используем Visual Studio Code IDE и ее функции отладки по умолчанию.

Подключите локальную и удаленную среду

В локальной среде, из которой вы хотите инициировать соединение клиента отладки, настройте SSH-туннель:

ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS

Замените следующее:

LOCAL_DEBUG_PORT : порт отладки в вашей локальной среде.
REMOTE_USERNAME : имя пользователя в вашей удаленной среде.
REMOTE_ADDRESS : адрес вашей удаленной среды.
REMOTE_DEBUG_PORT : порт отладки в вашей удаленной среде.

Порт отладки в вашей локальной среде теперь связан с портом отладки в вашей удаленной среде.

Начать отладку

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

В новом окне откройте исходный код вашего приложения.

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

Node.js

{
    "version": "0.2.0",
    "configurations": [{
        "type": "node",
        "request": "attach",
        "name": "Debug Remote",
        "address": "127.0.0.1",
        "port": LOCAL_DEBUG_PORT
    }]
}

Питон

{
    "version": "0.2.0",
    "configurations": [{
        "type": "python",
        "request": "attach",
        "name": "Debug Remote",
        "connect": {
            "host": "127.0.0.1",
            "port": LOCAL_DEBUG_PORT
        }
    }]
}

Джава

{
    "version": "0.2.0",
    "configurations": [{
        "type": "java",
        "request": "attach",
        "name": "Debug Remote",
        "hostName": "127.0.0.1",
        "port": LOCAL_DEBUG_PORT
    }]
}

Замените LOCAL_DEBUG_PORT портом отладки в вашей локальной среде.

Добавьте точку останова в исходный код вашего приложения, которая приостанавливает обработку HTTP-запроса, и начните выполнение и отладку с добавленной ранее конфигурацией Debug Remote .

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

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

Отладка из локальной среды разработки

мастерская

Node.js

Питон

Джава

Предварительные условия

Node.js

Питон

Джава

Сделайте службу localhost общедоступной.

Настройте приложение чата

Протестируйте приложение Чат

Node.js

Питон

Джава

Отладка из удаленной среды

Предварительные условия

Подключите локальную и удаленную среду

Начать отладку

Node.js

Питон

Джава

похожие темы