Создание первого приложения бота с помощью JavaScript
Запустите разработку приложений Microsoft Teams с помощью первого приложения Teams. Приложение бота можно создать с помощью Teams с помощью JavaScript.
Приложение имеет возможность, которая поставляется с собственным пользовательским интерфейсом и пользовательским интерфейсом:
В этом руководстве вы узнаете:
- Настройка нового проекта с помощью набора средств Teams.
- Создание приложения бота.
- Развертывание приложения.
Предварительные требования
Установите следующие средства для создания и развертывания приложений.
| Установка | Для использования... | |
|---|---|---|
| Required | ||
| Набор средств Teams | Расширение Microsoft Visual Studio Code, которое создает шаблон проекта для приложения. Используйте последнюю версию. | |
| Microsoft Teams | Microsoft Teams позволяет взаимодействовать со всеми пользователями, с которыми вы работаете, с помощью приложений для чата, собраний и звонков в одном месте. | |
| Node.js | Серверной среды выполнения JavaScript. Дополнительные сведения см . вNode.js таблице совместимости версий для типа проекта. | |
| Microsoft Edge (рекомендуется) или Google Chrome | Браузера со средствами разработчика. | |
| Visual Studio Code; | Сред сборки JavaScript, TypeScript или SharePoint Framework (SPFx). Используйте последнюю версию. | |
| Необязательное | ||
| Средства Azure для Visual Studio Code и Azure CLI | Средства Azure для доступа к хранимым данным или для развертывания облачной серверной части приложения Teams в Azure. | |
| Средства разработчика React для Chrome Or React Developer Tools for Microsoft Edge | Расширение средств разработки в браузере для библиотеки JavaScript React с открытым кодом. | |
| Песочница Microsoft Graph | Обозреватель Microsoft Graph — браузерное средство, которое позволяет выполнять запрос из данных Microsoft Graph. | |
| Портал разработчика Teams | Веб-портал для настройки, управления и распространения приложения Teams, в том числе в вашей организации или Microsoft Teams Store. |
Совет
Если вы работаете с данными Microsoft Graph, вы должны узнать о Microsoft Graph Explorer и добавить его в закладки. Это средство на основе браузера позволяет запрашивать Microsoft Graph за пределами приложения.
Подготовка среды разработки
После установки необходимых средств настройте среду разработки.
Установка набора средств Teams
Microsoft Teams Toolkit помогает упростить процесс разработки с помощью средств для подготовки и развертывания облачных ресурсов для приложения и публикации в Магазине Teams.
Набор средств Teams можно использовать с Visual Studio Code или интерфейсом командной строки TeamsFx CLI.
Откройте Visual Studio Code и выберите Расширения (CTRL+SHIFT+X или Просмотр>расширений).
В поле поиска введите Набор средств Teams.
Нажмите кнопку Установить.
Значок Набора средств
Teams отображается на панели действий Visual Studio Code.
Вы также можете установить Набор средств Teams из Visual Studio Code Marketplace.
Настройка клиента разработки Teams
Клиент — это пространство или контейнер для вашей организации в Teams, где вы общаетесь, обмениваются файлами и выполняете собрания. В этом пространстве также можно отправить и протестировать приложение. Давайте проверим, готовы ли вы к разработке с помощью клиента.
Проверка параметра отправки приложения
После создания пользовательского приложения необходимо отправить приложение в Teams с помощью параметра Отправить пользовательское приложение . Войдите в учетную запись Microsoft 365, чтобы проверить, включен ли этот параметр.
Следующие действия помогут вам проверить, можно ли отправлять приложения в Teams.
В клиенте Teams щелкните значок Приложения .
Выберите Управление приложениями
Выберите Отправить приложение.
Найдите параметр Отправить пользовательское приложение. Если параметр отображается, можно отправить пользовательские приложения.
Примечание.
Если вы не нашли параметр для отправки пользовательского приложения, обратитесь к администратору Teams.
Создание бесплатного клиента разработчика Teams (необязательно)
Если у вас нет учетной записи разработчика Teams, присоединитесь к программе разработчика Microsoft 365.
Перейдите в программу для разработчиков Microsoft 365.
Выберите Присоединиться и следуйте инструкциям на экране.
На экране приветствия выберите Настроить подписку E5.
Настройте свою учетную запись администратора. После завершения отобразится следующий экран:
Войдите в Teams с помощью только что настроенной учетной записи администратора. Убедитесь, что у вас есть параметр Отправить пользовательское приложение в Teams.
Получение бесплатной учетной записи Azure
Если вы хотите разместить приложение или получить доступ к ресурсам в Azure, у вас должна быть подписка Azure. Перед началом работы создайте бесплатную учетную запись.
Теперь у вас есть все средства для настройки учетной записи. Теперь давайте настроим среду разработки и приступим к сборке! Выберите приложение, которое вы хотите создать.
Создание рабочей области проекта для приложения бота
Давайте создадим свое первое приложение-бот.
Возможность бота в приложении Teams создает чат-бота или чат-бота. Вы используете его для выполнения простых и автоматизированных задач, таких как предоставление обслуживания клиентов. Бот взаимодействует с веб-службой и помогает использовать ее предложения. Вы можете получить прогноз погоды, сделать резервирования или любую другую службу, предлагаемую с помощью бота для общения.
Как вы уже подготовились к созданию этих приложений, вы можете настроить новый проект Teams для создания приложения бота.
Из этого руководства вы узнаете:
- Настройка нового проекта бота с помощью набора средств Teams.
- Сведения о структуре каталогов проекта приложения.
Важно!
Боты доступны в облаках сообщества для государственных организаций (GCC), GCC-High и Министерстве обороны (DOD).
Создание рабочей области проекта бота
Если предварительные требования выполнены, давайте начнем!
Примечание.
Пользовательский интерфейс Visual Studio Code отображается из Mac. Она может отличаться в зависимости от операционной системы, версии набора средств Teams и среды.
Откройте Visual Studio Code.
Щелкните значок Набора средств
Teams на панели действий Visual Studio Code.Выберите Создать новое приложение.
Выберите Бот , чтобы создать новый проект бота.
Убедитесь, что базовый бот выбран в качестве функции приложения, которую вы хотите создать в приложении.
Выберите JavaScript в качестве языка.
Выберите Папка по умолчанию , чтобы сохранить корневую папку проекта в расположении по умолчанию.
Вы также можете изменить расположение по умолчанию, выполнив следующие действия.
Нажмите кнопку Обзор.
Выберите расположение рабочей области проекта.
Выберите выбрать папку.
Введите подходящее имя для приложения и нажмите клавишу ВВОД.
Откроется диалоговое окно, в котором необходимо выбрать да или нет, чтобы доверять авторам файлов в этой папке.
Приложение Teams с возможностью бота будет создано за несколько секунд.
После создания приложения набор средств Teams отображает следующее сообщение:
Выберите Локальная отладка , чтобы просмотреть проект.
Краткий обзор создания приложения Teams.
Просмотрите этот краткий обзор для создания приложения Teams.
Обзор исходного кода приложения бота
После завершения формирования шаблонов просмотрите каталоги проектов и файлы в обозревателе в Visual Studio Code.
| Папка и файл | Содержание |
|---|---|
teamsapp.yml |
Основной файл проекта описывает конфигурацию приложения и определяет набор действий, выполняемых на каждом этапе жизненного цикла. |
teamsapp.local.yml |
Это переопределяет teamsapp.yml действия, которые обеспечивают локальное выполнение и отладку. |
.vscode/ |
Файлы VSCode для локальной отладки. |
appPackage/ |
Шаблоны для манифеста приложения Teams. |
adaptiveCards/ |
Адаптивные карточки, отправляемые ботом. |
infra/ |
Шаблоны для подготовки ресурсов Azure. |
index.js |
Точка входа и restify обработчик приложения. |
teamsBot.js |
Обработчик действий Teams. |
Совет
Перед интеграцией своего первого бота в Teams ознакомьтесь с ботами за пределами Teams.
Создание и запуск первого приложения бота
После настройки рабочей области проекта с помощью Набора средств Teams создайте проект бота. Необходимо войти в учетную запись Microsoft 365.
Вход в учетную запись Microsoft 365
Используйте эту учетную запись для входа в Teams. Если вы используете клиент программы разработчика Microsoft 365, учетная запись администратора, настроенная при регистрации, — это учетная запись Microsoft 365.
Откройте Visual Studio Code.
Щелкните значок Набора средств
Teams на боковой панели.Выберите Войти в M365 с помощью учетных данных.
Откроется веб-браузер по умолчанию, чтобы позволить вам войти в учетную запись.
Закройте браузер при появлении запроса и вернитесь в Visual Studio Code.
Вернитесь к набору средств Teams в Visual Studio Code.
Используйте эту учетную запись для входа в Teams. Если вы используете клиент программы разработчика Microsoft 365, учетная запись администратора, настроенная при регистрации, — это учетная запись Microsoft 365.
Теперь вы можете создать приложение и запустить его локально!
Локальная сборка и запуск первого приложения бота
Чтобы создать и запустить приложение в локальной среде, выполните следующие действия:
Выберите F5 в Visual Studio Code, чтобы запустить приложение в режиме отладки.
Примечание.
Если набору средств Teams не удается проверить определенное необходимое условие, вам будет предложено выполнить проверку.
Узнайте, что происходит при локальном запуске приложения в отладчике.
Если вам интересно, при нажатии клавиши F5 набор средств Teams:
- Проверяет все следующие предварительные требования:
- Вы вошли в систему с помощью учетной записи Microsoft 365.
- Для учетной записи Microsoft 365 включена отправка пользовательских приложений.
- Установлена поддерживаемая версия Node.js.
- Порт, необходимый для приложения бота, доступен.
- Установите пакеты npm.
- Запускает Dev Tunnel для создания http-туннеля.
- Регистрирует приложение в идентификаторе Microsoft Entra и настраивает его.
- Регистрирует приложение бота в Bot Framework и настраивает приложение бота.
- Регистрирует приложение на портале разработчика Teams и настраивает его.
- Запускает приложение бота.
- Запускает Teams в веб-браузере и отправляет пользовательское приложение бота.
Примечание.
При первом запуске приложения загружаются все зависимости, и приложение создается. По завершении сборки автоматически откроется окно браузера. Этот процесс может занять от трех до пяти минут.
Teams запускает приложение в веб-браузере.
При появлении запроса войдите с помощью учетной записи Microsoft 365.
Выберите Добавить при появлении запроса на отправку пользовательского приложения-бота в Teams на локальном компьютере или используйте раскрывающееся меню, чтобы добавить приложение бота в команду, чат или собрание.
Теперь бот успешно работает в Teams! После загрузки приложения открывается сеанс чата с ботом.
Вы можете ввести
welcome, чтобы отобразить вводную карточку, и типlearn, чтобы перейти к документации по адаптивной карточке и команде бота.
Вы можете выполнять обычные действия отладки, такие как установка точек останова, как и в любом другом веб-приложении. Откройте файл
bot/teamsBot.jsи найдите методonMessage(). Установите точку останова в любом случае. Затем введите текст.
Узнайте, как устранять неполадки, если приложение не выполняется локально.
Чтобы успешно запустить приложение в Teams, убедитесь, что вы включили отправку пользовательских приложений в учетной записи Teams. Дополнительные сведения о отправке пользовательских приложений см. в разделе предварительных требований.
Важно!
Настраиваемая отправка приложения доступна в облаке сообщества государственных организаций (GCC), GCC-High и DOD.
Совет
Проверьте наличие проблем перед отправкой пользовательского приложения с помощью средства проверки приложения. Это средство входит в набор средств. Исправьте ошибки при отправке приложения.
Развертывание первого приложения Teams
Вы научились создавать, создавать и запускать приложение Teams с возможностью бота. Последний шаг — развертывание приложения в Azure.
Давайте развернем первое приложение с возможностью бота в Azure с помощью набора средств Teams.
Вход в учетную запись Azure
Используйте эту учетную запись для доступа к порталу Microsoft Azure и подготовки новых облачных ресурсов для поддержки приложения.
Откройте Visual Studio Code.
Откройте папку проекта, в которой вы создали приложение бота.
Щелкните значок Набора средств
Teams на боковой панели.Выберите Войти в Azure с помощью учетных данных.
Совет
Если у вас установлено расширение учетной записи AZURE и вы используете ту же учетную запись, этот шаг можно пропустить. Используйте ту же учетную запись, что и в других расширениях.
Откроется веб-браузер по умолчанию, чтобы позволить вам войти в учетную запись.
Закройте браузер при появлении запроса и вернитесь в Visual Studio Code.
В разделе ACCOUNTS боковой панели отображаются две учетные записи по отдельности. В нем также отображается количество доступных для использования подписок Azure. Убедитесь, что у вас есть по крайней мере одна доступная подписка Azure. В противном случае выйдите из нее и используйте другую учетную запись.
Поздравляем, вы создали приложение Teams! Теперь давайте рассмотрим, как развернуть одно из приложений в Azure с помощью набора средств Teams.
Развертывание приложения в Azure
Развертывание состоит из двух этапов. Во-первых, Azure создает необходимые облачные ресурсы (также известные как подготовка). Затем Azure копирует код приложения в созданные облачные ресурсы. В этом руководстве вы развернете приложение бота.
В чем разница между подготовкой и развертыванием?
Шаг подготовки создает ресурсы в Azure и Microsoft 365 для приложения, но не копирует код (HTML, CSS или JavaScript) в ресурсы. Шаг Развертывание копирует код приложения в ресурсы, созданные на этапе подготовки. Обычно развертывание выполняется несколько раз без подготовки новых ресурсов. Так как процесс подготовки может занять некоторое время, он отделен от шага развертывания.
Выберите значок Набор инструментов Teams на боковой панели Visual Studio Code.
Выберите Подготовка.
Выберите подписку, используемую для ресурсов Azure.
Приложение размещается с помощью ресурсов Azure.
В диалоговом окне появится предупреждение о том, что при выполнении ресурсов в Azure могут возникнуть затраты.
Выберите Подготовка.
Процесс подготовки создает ресурсы в облаке Azure. Это может занять некоторое время. Ход выполнения можно отслеживать, наблюдая за диалогами в правом нижнем углу. Через несколько минут вы увидите следующее уведомление:
При необходимости можно просмотреть подготовленные ресурсы. В этом руководстве вам не нужно просматривать ресурсы.
Подготовленный ресурс отображается в разделе СРЕДА .
После завершения подготовки выберите Развернуть на панели ЖИЗНЕННЫЙ цикл .
Как и при подготовке, развертывание занимает некоторое время. Вы можете отслеживать процесс, наблюдая за диалогами в правом нижнем углу. Через несколько минут вы увидите уведомление о завершении.
Теперь вы можете использовать тот же процесс для развертывания приложений Bot и расширения сообщений в Azure.
Запуск развернутого приложения
После завершения действий по подготовке и развертыванию:
Откройте панель отладки (CTRL+SHIFT+D️ / ⇧-D или Просмотр > запуска) в Visual Studio Code.
В раскрывающемся списке конфигурация запуска выберите Запустить удаленное управление (edge).
Выберите Начать отладку (F5). Вам будет предложено загрузить неопубликованное приложение бота в Teams.
Выберите Добавить или используйте раскрывающееся меню, чтобы добавить приложение бота в команду, чат или собрание.
Вы успешно добавили приложение бота в клиент Teams.
Узнайте, что происходит при развертывании приложения в Azure
До развертывания приложение работает локально:
- Серверная часть работает с использованием Azure Functions Core Tools.
- Конечная точка HTTP приложения, в которую Microsoft Teams загружает приложение, работает локально.
Развертывание — это двухэтапный процесс. Вы подготавливаете ресурсы в активной подписке Azure, а затем развертываете или отправляете код серверной части и внешнего интерфейса для приложения в Azure.
- Если серверная часть настроена, использует различные службы Azure, включая Службу приложений Azure и службу хранилища Azure.
- Интерфейсное приложение развертывается в учетной записи хранения Azure, настроенной для статического веб-размещения.
Поздравляем!
Вы сделали это!
Вы создали приложение бота.
Теперь, когда вы научились создавать простое приложение, вы можете перейти к созданию более сложных приложений. Следуйте инструкциям по созданию и развертыванию приложения, и в приложении есть несколько функций.
Вы завершили руководство по созданию бота с помощью JavaScript.
Возникла проблема с этим разделом? Если это так, отправьте нам отзыв, чтобы мы исправили этот раздел.
Platform Docs