Как устранять неполадки в приложениях Google Chat

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

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

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

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

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

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

Семинар

Node.js

Python

Java

Требования

Node.js

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

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

    npm install -g nodemon

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

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

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

  • Аккаунт ngrok.

Python

Java

Как сделать сервис localhost общедоступным

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

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

Как настроить приложение Chat

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

  1. Откройте страницу Google Chat API в Google API Console:

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

  2. Нажмите на вкладку Конфигурация.

  3. Выберите Интерактивные функции > Настройки подключения > Триггеры и задайте URL конечной точки HTTP для триггеров, которые вы хотите протестировать (например, Сообщение), следующим образом:

    https://NGROK_STATIC_DOMAIN

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

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

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

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

Как протестировать приложение Chat

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

Node.js

  1. Клонируйте репозиторий googleworkspace/add-ons-samples с сайта GitHub в локальную среду. В нем содержится код приложения, которое нужно выполнить:

    git clone https://github.com/googleworkspace/add-ons-samples.git

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

    1. В новом окне откройте папку add-ons-samples/node/chat/avatar-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 Chat.

      Перейти в Google Chat

    • Нажмите Создать чат .

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

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

    • В чат-группе прямой переписки введите Hello и нажмите enter. Приложение Chat не отвечает, потому что в нем выполняется активная отладка.

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

    Выполнение приостановлено в точке останова, которую вы задали.

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

  7. Когда вы возобновляете выполнение из отладчика, Visual Studio Codeдо того, как Google Chat завершит работу приложения Chat, оно отвечает на ваше сообщение.

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

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

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

  9. Чтобы изменить поведение приложения, обновите текст ответа в файле index.js. Когда вы сохраняете файл, nodemon автоматически перезагружает приложение с обновленным исходным кодом, а Visual Studio Code остается в режиме отладки.

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

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

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

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

Python

  1. Получите новые учетные данные пользователя для использования с Application Default Credentials:

    gcloud config set project PROJECT_ID
gcloud auth application-default login

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

  2. Клонируйте хранилище googleworkspace/add-ons-samples с сайта GitHub в локальную среду. В нем содержится код приложения:

    git clone https://github.com/googleworkspace/add-ons-samples.git

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

    1. В новом окне откройте папку add-ons-samples/python/chat/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.

      Приложение запущено и ожидает 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 Chat.

      Перейти в Google Chat

    • Нажмите Создать чат .

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

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

    • В чат-группе прямой переписки введите Hey! и нажмите enter. Приложение Chat не отвечает, поскольку в нем выполняется активная отладка.

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

    Выполнение приостановлено в точке останова, которую вы задали.

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

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

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

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

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

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

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

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

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

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

Java

  1. Получите новые учетные данные пользователя для использования с Application Default Credentials:

    gcloud config set project PROJECT_ID
gcloud auth application-default login

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

  2. Клонируйте хранилище googleworkspace/add-ons-samples с сайта GitHub в локальной среде. В нем содержится код приложения:

    git clone https://github.com/googleworkspace/add-ons-samples.git

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

    1. В новом окне откройте папку add-ons-samples/java/chat/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 Chat.

      Перейти в Google Chat

    • Нажмите Создать чат .

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

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

    • В чат-группе прямой переписки введите Hey! и нажмите enter. Приложение Chat не отвечает, поскольку в нем выполняется активная отладка.

  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. Как и в прошлый раз, приложение Chat не отвечает, потому что в нем ведется активная отладка.

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

Отладка в удаленной среде

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

Отладка в удаленной среде

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

Требования

  • Чат-группа с приложением Chat. Вы можете следовать инструкциям из раздела Протестируйте приложение Chat краткого руководства и найти свое приложение Chat, чтобы начать чат-группу.
  • Ваше приложение, запущенное в удаленной среде с отладчиком, включенным на определенном порту, в инструкциях этого руководства обозначается как REMOTE_DEBUG_PORT.
  • Ваша локальная среда может ssh с удаленной.
  • Интегрированная среда разработки, настроенная в локальной среде и поддерживающая отладку. В этом руководстве для иллюстрации мы используем 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, установленной в вашей локальной среде, выполните следующие действия:

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

  2. Создайте файл .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
    }]
}

    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",
        "name": "Debug Remote",
        "hostName": "127.0.0.1",
        "port": LOCAL_DEBUG_PORT
    }]
}

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

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

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

Приложения Chat, которые не являются дополнениями: устранение неполадок с приложениями Google Chat

Следующая документация относится к приложениям Chat, которые не являются дополнениями Google Workspace. Чтобы перенести приложение Chat, которое не является дополнением, ознакомьтесь со статьей Как преобразовать приложение Chat в дополнение Google Workspace.

Чтобы отладить приложение Chat, которое не является дополнением, в локальной среде:

  • На вкладке Chat API Configuration (Конфигурация) в разделе Interactive features (Интерактивные функции) > Connection settings (Настройки подключения) выберите HTTP endpoint URL (URL конечной точки HTTP) и задайте для поля HTTP endpoint URL (URL конечной точки HTTP) значение https://<var>NGROK_STATIC_DOMAIN</var>.
  • Используйте образец кода для приложений Chat, которые не являются дополнениями, из репозитория GitHub googleworkspace/google-chat-samples (google-chat-samples/node/basic-app, google-chat-samples/python/avatar-app или google-chat-samples/java/avatar-app).