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

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

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

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

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

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

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

Мастер-класс

Node.js

Python

Java

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

Node.js

Python

Java

Сделайте сервис localhost общедоступным.

Для доступа приложения «Чат» к локальной среде необходимо подключить её к интернету. Приложение ngrok используется для перенаправления HTTP-запросов, отправляемых на общедоступный URL-адрес, в вашу локальную среду.

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

Настройте приложение «Чат».

Настройте приложение «Чат» таким образом, чтобы все HTTP-запросы отправлялись на ваш статический домен.

  1. В консоли Google API откройте страницу Google Chat API:

    Перейдите на страницу Google Chat API.

  2. Перейдите на вкладку «Конфигурация» .

  3. Перейдите в раздел «Интерактивные функции» > «Настройки подключения» и установите значение текстового поля «URL конечной точки HTTP» следующим образом:

    https://NGROK_STATIC_DOMAIN

    Замените NGROK_STATIC_DOMAIN на статический домен в вашей учетной записи ngrok .

  4. Нажмите « Сохранить ».

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

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

Протестируйте приложение для чата

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

Node.js

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

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

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

    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 .

      Приложение запущено и принимает HTTP-запросы на порту `9000`.

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

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

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

    Терминал с запущенным сервером `ngrok` и перенаправлением

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

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

    Веб-интерфейс приложения `ngrok` не отображает HTTP-запросы.

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

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

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

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

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

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

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

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

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

    Выполнение приостанавливается на точке останова, которая была установлена.

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

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

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

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

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

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

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

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

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

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

Python

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

    gcloud config set project PROJECT_ID
gcloud auth application-default login

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

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

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

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

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

    2. Создайте новое виртуальное окружение для 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 .

      Приложение запущено и принимает HTTP-запросы на порту `9000`.

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

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

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

    Терминал с запущенным сервером `ngrok` и перенаправлением

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

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

    Веб-интерфейс приложения `ngrok` не отображает HTTP-запросы.

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

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

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

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

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

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

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

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

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

    Выполнение приостанавливается на точке останова, которая была установлена.

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

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

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

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

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

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

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

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

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

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

Java

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

    gcloud config set project PROJECT_ID
gcloud auth application-default login

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

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

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

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

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

    2. Настройте проект Maven для запуска App на локальном порту 9000 , добавив плагин сборки Google 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 .

      Приложение запущено и принимает HTTP-запросы на порту `9000`.

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

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

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

    Терминал с запущенным сервером `ngrok` и перенаправлением

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

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

    Веб-интерфейс приложения `ngrok` не отображает HTTP-запросы.

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

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

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

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

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

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

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

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

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

    Выполнение приостанавливается на точке останова, которая была установлена.

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

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

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

    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 в вашей локальной среде вы увидите, что приложение генерирует ответ с обновленной версией сообщения.

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

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

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

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

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

  • Создайте личное пространство для сообщений в вашем приложении «Чат». Вы можете воспользоваться разделом «Проверка вашего приложения «Чат»» в руководстве по быстрому запуску и найти свое приложение «Чат», чтобы создать такое пространство.
  • Ваше приложение, работающее в удаленной среде с включенным отладчиком на заданном порту, в инструкциях данного руководства обозначается как REMOTE_DEBUG_PORT .
  • Ваша локальная среда может подключаться к удаленной среде ssh .
  • В локальной среде должна быть установлена ​​интегрированная среда разработки (IDE), способная выполнять отладку. В данном руководстве для наглядности мы используем IDE Visual Studio Code и её стандартные функции отладки .

Объедините локальные и удаленные среды.

В локальной среде, из которой вы хотите установить соединение с отладочным клиентом, настройте 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 выполните следующие действия:

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

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

    Node.js 

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

    Python 

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

    Java 

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

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

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

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