Создание первого приложения расширения для сообщений с помощью JavaScript
Начните разработку приложений Microsoft Teams с первого приложения Teams с помощью JavaScript.
В этом руководстве вы узнаете:
- Настройка нового проекта с помощью набора средств Teams.
- Создание приложения расширения сообщений.
- Развертывание приложения.
Это пошаговое руководство поможет вам создать приложение Teams для расширения сообщений с набором средств Teams в Visual Studio Code. После выполнения этого руководства вы увидите следующие выходные данные:
Предварительные требования
Установите следующие средства для создания и развертывания приложений.
| Установка | Для использования... | |
|---|---|---|
| Required | ||
| Visual Studio Code | Среды сборки JavaScript или TypeScript. Используйте последнюю версию. | |
| Набор средств Teams | Расширение Microsoft Visual Studio Code, которое создает шаблон проекта для вашего приложения. Используйте последнюю версию. | |
| Node.js | Серверная среда выполнения JavaScript. Дополнительные сведения см . вNode.js таблице совместимости версий. | |
| Microsoft Teams | Совместная работа с людьми, с которыми вы работаете, с помощью приложений для чатов, собраний и звонков в одном месте. | |
| Microsoft Edge (рекомендуется) или Google Chrome | Браузер со средствами разработчика, необходимыми для отладки и тестирования. | |
| Учетная запись разработчика Microsoft 365 | Доступ к учетной записи Teams с соответствующими разрешениями для установки пользовательского приложения. | |
| Необязательное | ||
| Средства Azure для Visual Studio Code и Azure CLI | Средства Azure для доступа к хранимым данным или для развертывания облачной серверной части приложения Teams в Azure. | |
| средства разработчика React для Chrome или средства разработчика React для Microsoft Edge | Расширение средств разработки в браузере для библиотеки JavaScript с открытым кодом React. |
Подготовка среды разработки
После установки необходимых средств настройте среду разработки.
Установка набора средств 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.
Давайте создадим приложение расширения сообщений с помощью команды поиска. Сначала настройте новый проект Teams для создания приложения расширения сообщений.
В этом руководстве вы узнаете:
- Настройка нового проекта расширения сообщений с помощью набора средств Teams.
- Сведения о структуре каталогов проекта приложения.
Создание рабочей области проекта расширения сообщений
Если предварительные требования выполнены, давайте начнем!
Примечание.
Отображаемый пользовательский интерфейс Visual Studio Code может отличаться в зависимости от операционной системы, версии набора средств, темы и среды.
Откройте Visual Studio Code.
Щелкните значок Набора средств
Teams на панели действий Visual Studio Code.Выберите Создать новое приложение.
Выберите Расширение сообщений.
Выберите Настраиваемые результаты поиска.
Выберите Начать с бота.
Выберите JavaScript.
Выберите Папка по умолчанию , чтобы сохранить корневую папку проекта в расположении по умолчанию.
Вы также можете изменить расположение по умолчанию, выполнив следующие действия.
Нажмите кнопку Обзор.
Выберите расположение рабочей области проекта.
Выберите Выбрать папку.
Введите подходящее имя для приложения. Выберите ВВОД.
Teams Toolkit создаст приложение за несколько секунд.
После создания приложения набор средств Teams отображает следующее сообщение:
Обзор исходного кода приложения расширения сообщений
Расширение сообщений использует Bot Framework для взаимодействия со службой через беседу. После формирования шаблонов просмотрите каталоги и файлы проекта в разделе EXPLORER.
| Папка и файл | Содержание |
|---|---|
teamsapp.yml |
Основной файл проекта описывает конфигурацию приложения и определяет набор действий, выполняемых на каждом этапе жизненного цикла. |
teamsapp.local.yml |
Переопределяет teamsapp.yml действиями, которые обеспечивают локальное выполнение и отладку. |
.vscode/ |
Visual Studio Code файлы для локальной отладки. |
appPackage/ |
Шаблоны для манифеста приложения Teams. |
infra/ |
Шаблоны для подготовки ресурсов Azure. |
index.js |
Точка входа и restify обработчик приложения. |
Совет
Ознакомьтесь с ботами и расширением сообщений за пределами Teams, прежде чем интегрировать приложение в Teams.
Создание и запуск первого приложения расширения сообщений
После настройки рабочей области проекта с помощью Набора средств Teams пришло время создать проект. Необходимо войти в учетную запись Microsoft 365.
Вход в учетную запись Microsoft 365
Войдите с помощью учетной записи администратора, созданной при присоединении к программе разработчика Microsoft 365.
Откройте Visual Studio Code.
Щелкните значок Набора средств
Teams на панели действий.Выберите Войти в Microsoft 365 с помощью учетных данных. Откроется веб-браузер по умолчанию, чтобы разрешить вход.
Закройте браузер после входа с помощью учетных данных.
Вернитесь к набору средств Teams в Visual Studio Code.
В разделе ACCOUNTS на боковой панели отображается имя учетной записи Microsoft 365. Если для учетной записи Microsoft 365 включена отправка пользовательских приложений, набор средств Teams отображает включенную загрузку неопубликованных приложений.
Теперь вы можете создать приложение и запустить его локально!
Создание и запуск приложения в локальной среде
Теперь вы можете локально создавать и отлаживать свое первое приложение расширения сообщений Teams.
Локальная сборка и запуск приложения
Выберите клавишу F5 в Visual Studio Code, чтобы запустить приложение в режиме отладки.
Примечание.
Если набору средств Teams не удается проверить определенное условие, вам будет предложено проверка.
Узнайте, что происходит при локальном запуске приложения в отладчике.
При выборе F5 набор средств Teams выполняет следующие функции:
Проверяет следующие предварительные требования:
- Вы вошли в систему с помощью учетной записи Microsoft 365.
- Для учетной записи Microsoft 365 включена отправка пользовательских приложений.
- Установлена поддерживаемая версия Node.js.
- Порт, необходимый для приложения бота, доступен.
Устанавливает пакеты npm
Запускает Dev Tunnel для создания http-туннеля.
Регистрирует приложение в Microsoft Entra ID и настраивает его.
Регистрирует приложение бота в Bot Framework и настраивает его.
Регистрирует приложение на портале разработчика Teams и настраивает его.
Запускает приложение расширения сообщений, размещенное локально.
Запускает Teams в веб-браузере и отправляет приложение Teams.
При первой отладке приложения Teams скачивает зависимости и создает приложение. Этот процесс может занять от 3 до 5 минут.
Teams открывается в окне браузера по завершении сборки. При появлении запроса войдите с помощью учетной записи Microsoft 365.
Откроется диалоговое окно, в которое можно добавить приложение расширения сообщений в Teams. Нажмите Добавить.
Teams загружает приложение расширения сообщений.
Так как приложения расширения сообщений используют боты для взаимодействия между пользователем и веб-службой, приложение загружается в чат бота.
- Если вы создали приложение-бот до создания приложения расширения сообщений, Teams загружает расширение сообщений в созданном боте. Отображаются предыдущие сообщения чата приложения бота.
- Если вы создали расширение для сообщений, Teams загружает приложение в последнем чате, открытом в Teams.
Тестирование приложения
При первой загрузке приложения приложение расширения сообщений открыто для тестирования. Этот пример приложения позволяет выполнять поиск пакетов npm с открытым кодом из реестра программного обеспечения.
Выполнение поискового запроса
Введите имя пакета npm с открытым кодом в поле поиска расширения сообщения, например cli. Расширение сообщения отображает список соответствующих элементов.
Выберите один из элементов из списка. Приложение создает адаптивную карточку с элементом в области создания сообщения, чтобы вы могли отправить его в чате или канале.
Выберите ВВОД. Приложение расширения сообщений отправляет адаптивную карточку с элементом в чате или канале.
Открытие приложения расширения сообщений
Вы протестировали функцию поиска в приложении расширения сообщений на предыдущем шаге. Теперь ознакомьтесь с различными способами открытия приложения расширения сообщений.
Открытие приложения из командного окна
Введите / имя приложения расширения сообщений в командном поле.
Приложение откроется в командном окне, и его можно использовать для выполнения запроса.
Примечание.
- Использование / для открытия приложения расширения сообщений из командного поля работает только в новом клиенте Teams.
- Используйте @ , чтобы открыть приложение расширения сообщений из командного окна в классическом клиенте Teams.
Открытие приложения из области создания сообщений
Выберите три точки в нижней части области создания сообщения.
Выберите приложение расширения сообщений.
Приложение расширения сообщений загружается с параметрами для выполнения поиска.
Открытие приложения из отправленных пользовательских приложений
Выберите Приложения>Управление приложениями.
Выберите раскрывающийся список приложений в списке приложений и выберите Личное приложение.
Появится диалоговое окно с предложением опробовать приложение. Если выбрать пункт Получил, диалоговое окно исчезнет. Выберите Попробовать.
Список приложений расширения сообщений появится в последней версии чата Teams. Выберите приложение расширения сообщений в списке.
Узнайте, как устранить неполадки, если приложение не запускается локально
Чтобы запустить приложение в Teams, у вас должна быть учетная запись разработки Microsoft 365, которая позволяет отправлять пользовательские приложения. Дополнительные сведения о отправке пользовательских приложений см. в разделе Предварительные требования.
Развертывание первого приложения Teams
Давайте развернем свое первое приложение расширения сообщений в Azure с помощью набора средств Teams.
Вход в учетную запись Azure
Войдите в учетную запись Azure, чтобы получить доступ к портал Azure Майкрософт и подготовить новые облачные ресурсы для поддержки приложения.
Откройте Visual Studio Code.
Откройте папку проекта, в которой вы создали приложение расширения сообщений.
Щелкните значок Набора средств
Teams на панели действий.Выберите Войти в Azure с помощью учетных данных. Откроется веб-браузер по умолчанию, чтобы разрешить вход.
Совет
Если у вас установлено расширение учетной записи AZURE и вы используете ту же учетную запись, этот шаг можно пропустить.
Закройте браузер при появлении запроса и вернитесь к Visual Studio Code.
В разделе ACCOUNTS боковой панели указано количество доступных для использования подписок Azure. Убедитесь, что у вас есть по крайней мере одна доступная подписка Azure. В противном случае выйдите из нее и используйте другую учетную запись.
Развертывание приложения в Azure
Развертывание состоит из двух этапов. Во-первых, создаются необходимые облачные ресурсы (также известные как подготовка). Затем код приложения копируется в созданные облачные ресурсы. В этом руководстве вы развернете приложение расширения сообщений.
В чем разница между подготовкой и развертыванием?
Шаг подготовки создает ресурсы в Azure и Microsoft 365 для приложения, но код (например, HTML, CSS или JavaScript) не копируется в ресурсы. Шаг Развертывание копирует код приложения в ресурсы, созданные на этапе подготовки. Обычно развертывание выполняется несколько раз без подготовки новых ресурсов. Так как этап подготовки занимает некоторое время, он отделен от шага развертывания.
Щелкните значок Набора средств Teams на панели действий Visual Studio Code.
Выберите Подготовка.
Выберите подписку.
Выберите группу ресурсов.
Если у вас нет группы ресурсов для выбора, вы можете создать новую группу ресурсов, выполнив следующие действия.
Выберите + Создать группу ресурсов.
Выберите имя по умолчанию или введите подходящее имя для группы ресурсов.
Выберите расположение для группы ресурсов.
В диалоговом окне появится предупреждение о том, что при запуске ресурсов в Azure могут возникнуть затраты. Выберите Подготовка.
Процесс подготовки создает ресурсы в облаке Azure. Это может занять некоторое время. Через несколько минут появится следующее сообщение:
При необходимости можно просмотреть подготовленные ресурсы. В этом руководстве вам не нужно просматривать ресурсы.
Подготовленный ресурс отображается в разделе СРЕДА.
В разделе ЖИЗНЕННЫЙ цикл выберите Развернуть.
Появится диалоговое окно с запросом на развертывание ресурсов в среде разработки. Нажмите Развернуть.
Как и при подготовке, развертывание занимает некоторое время. Через несколько минут появится сообщение о завершении.
Запуск развернутого приложения
После завершения действий по подготовке и развертыванию перейдите в раздел Запуск и отладка (CTRL+SHIFT+D или Просмотр > запуска) в наборе средств Teams.
Выберите раскрывающееся меню ЗАПУСК И ОТЛАДКА .
Выберите Запустить удаленное приложение в Teams (Edge).
Нажмите кнопку ▷ .
Откроется диалоговое окно для установки развернутого приложения в Teams. Нажмите Добавить.
Teams открывает приложение расширения сообщений в последнем чате.
Узнайте, что происходит после развертывания приложения в Azure
Перед развертыванием приложение запускается локально.
- Серверная часть работает с использованием Azure Functions Core Tools.
- Конечная точка HTTP приложения, в которую Microsoft Teams загружает приложение, работает локально.
Развертывание — это двухэтапный процесс. Вы подготавливаете ресурсы в активной подписке Azure, а затем развертываете или отправляете код серверной части и интерфейсного кода приложения в Azure.
- Если серверная часть настроена, использует различные службы Azure, включая Служба приложений Azure и службу хранилища Azure.
- Интерфейсное приложение развертывается в учетной записи хранения Azure, настроенной для статического веб-размещения.
Поздравляем!
Вы завершили руководство по созданию приложения расширения сообщений с помощью JavaScript!
Ты придумала что-то вроде этого?
Возникла проблема с этим разделом? Если это так, отправьте нам отзыв, чтобы мы исправили этот раздел.
Platform Docs
Обратная связь
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделе https://aka.ms/ContentUserFeedback.
Отправить и просмотреть отзыв по