Создание первого приложения расширения для сообщений с помощью JavaScript

Начните разработку приложений Microsoft Teams с первого приложения Teams с помощью JavaScript.

В этом руководстве вы узнаете:

• Настройка нового проекта с помощью набора средств Teams.
• Создание приложения расширения сообщений.
• Развертывание приложения.

Это пошаговое руководство поможет вам создать приложение Teams для расширения сообщений с набором средств Teams в Visual Studio Code. После выполнения этого руководства вы увидите следующие выходные данные:

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

• Осталось 5 мин

Установите следующие средства для создания и развертывания приложений.

Подготовка среды разработки

После установки необходимых средств настройте среду разработки.

Установка набора средств Teams

Microsoft Teams Toolkit помогает упростить процесс разработки с помощью средств для подготовки и развертывания облачных ресурсов для приложения и публикации в Магазине Teams.

Набор средств Teams можно использовать с Visual Studio Code или интерфейсом командной строки с именем TeamsFx CLI.

npm install -g @microsoft/teamsfx-cli

sudo npm install -g --unsafe-perm @microsoft/teamsfx-cli

Настройка клиента разработки Teams

Клиент — это пространство или контейнер для вашей организации в Teams, где вы общаетесь, обмениваются файлами и выполняете собрания. В этом пространстве также можно отправить и протестировать приложение. Давайте проверим, готовы ли вы к разработке с помощью клиента.

Проверка параметра отправки приложения

После создания пользовательского приложения необходимо отправить приложение в Teams с помощью параметра Отправить пользовательское приложение . Войдите в учетную запись Microsoft 365, чтобы проверка, если этот параметр включен.

Следующие действия помогут вам проверить, можно ли отправлять приложения в Teams.

1. В клиенте Teams щелкните значок Приложения .

2. Выберите Управление приложениями

3. Выберите Отправить приложение.

4. Найдите параметр Отправить пользовательское приложение. Если параметр отображается, можно отправить пользовательские приложения.

   

   Примечание.

   Если вы не нашли параметр для отправки пользовательского приложения, обратитесь к администратору Teams.

Создание бесплатного клиента разработчика Teams (необязательно)

Если у вас нет учетной записи разработчика Teams, присоединитесь к программе разработчика Microsoft 365.

1. Перейдите в программу для разработчиков Microsoft 365.

2. Выберите Присоединиться и следуйте инструкциям на экране.

3. На экране приветствия выберите Настроить подписку E5.

4. Настройте свою учетную запись администратора. После завершения отобразится следующий экран:

   

5. Войдите в Teams с помощью только что настроенной учетной записи администратора. Убедитесь, что у вас есть параметр Отправить пользовательское приложение в Teams.

Получение бесплатной учетной записи Azure

Если вы хотите разместить приложение или получить доступ к ресурсам в Azure, у вас должна быть подписка Azure. Перед началом работы создайте бесплатную учетную запись.

Создание рабочей области проекта для приложения расширения сообщений

• Осталось 4 мин

Теперь создадим свое первое приложение расширения сообщений.

Возможность расширения сообщений позволяет взаимодействовать с веб-службой с помощью кнопок и форм. Используйте область создания сообщения, командное поле или сообщение непосредственно в клиенте Teams для поиска и запуска действий во внешней системе. Расширения сообщений зависят от ботов для предоставления диалогового окна между пользователем и кодом.

Существует два типа расширений сообщений Teams:

• Команды поиска. Вы можете выполнять поиск во внешних системах и вставлять результаты в сообщение в виде карта.
• Команды действий. Вы можете предоставить пользователям модальное всплывающее окно для сбора или отображения информации. Затем вы можете обработать их взаимодействие и отправить информацию обратно в Teams.

Давайте создадим приложение расширения сообщений с помощью команды поиска. Сначала настройте новый проект Teams для создания приложения расширения сообщений.

В этом руководстве вы узнаете:

1. Настройка нового проекта расширения сообщений с помощью набора средств Teams.
2. Сведения о структуре каталогов проекта приложения.

Создание рабочей области проекта расширения сообщений

Если предварительные требования выполнены, давайте начнем!

Обзор исходного кода приложения расширения сообщений

Расширение сообщений использует Bot Framework для взаимодействия со службой через беседу. После формирования шаблонов просмотрите каталоги и файлы проекта в разделе EXPLORER.

Создание и запуск первого приложения расширения сообщений

• Осталось 3 мин

После настройки рабочей области проекта с помощью Набора средств Teams пришло время создать проект. Необходимо войти в учетную запись Microsoft 365.

Вход в учетную запись Microsoft 365

Войдите с помощью учетной записи администратора, созданной при присоединении к программе разработчика Microsoft 365.

Создание и запуск приложения в локальной среде

Теперь вы можете локально создавать и отлаживать свое первое приложение расширения сообщений Teams.

Локальная сборка и запуск приложения

1. Выберите клавишу F5 в Visual Studio Code, чтобы запустить приложение в режиме отладки.

   Примечание.

   Если набору средств Teams не удается проверить определенное условие, вам будет предложено проверка.

   
   
   Узнайте, что происходит при локальном запуске приложения в отладчике.

   При выборе F5 набор средств Teams выполняет следующие функции:

   1. Проверяет следующие предварительные требования:

      1. Вы вошли в систему с помощью учетной записи Microsoft 365.
      2. Для учетной записи Microsoft 365 включена отправка пользовательских приложений.
      3. Установлена поддерживаемая версия Node.js.
      4. Порт, необходимый для приложения бота, доступен.

   2. Устанавливает пакеты npm

   3. Запускает Dev Tunnel для создания http-туннеля.

   4. Регистрирует приложение в Microsoft Entra ID и настраивает его.

   5. Регистрирует приложение бота в Bot Framework и настраивает его.

   6. Регистрирует приложение на портале разработчика Teams и настраивает его.

   7. Запускает приложение расширения сообщений, размещенное локально.

   8. Запускает Teams в веб-браузере и отправляет приложение Teams.

   

   При первой отладке приложения Teams скачивает зависимости и создает приложение. Этот процесс может занять от 3 до 5 минут.

2. Teams открывается в окне браузера по завершении сборки. При появлении запроса войдите с помощью учетной записи Microsoft 365.

3. Откроется диалоговое окно, в которое можно добавить приложение расширения сообщений в Teams. Нажмите Добавить.

   

   Teams загружает приложение расширения сообщений.

   

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

   • Если вы создали приложение-бот до создания приложения расширения сообщений, Teams загружает расширение сообщений в созданном боте. Отображаются предыдущие сообщения чата приложения бота.
   • Если вы создали расширение для сообщений, Teams загружает приложение в последнем чате, открытом в Teams.

Тестирование приложения

При первой загрузке приложения приложение расширения сообщений открыто для тестирования. Этот пример приложения позволяет выполнять поиск пакетов npm с открытым кодом из реестра программного обеспечения.

Выполнение поискового запроса

Открытие приложения расширения сообщений

Вы протестировали функцию поиска в приложении расширения сообщений на предыдущем шаге. Теперь ознакомьтесь с различными способами открытия приложения расширения сообщений.

Узнайте, как устранить неполадки, если приложение не запускается локально

Чтобы запустить приложение в Teams, у вас должна быть учетная запись разработки Microsoft 365, которая позволяет отправлять пользовательские приложения. Дополнительные сведения о отправке пользовательских приложений см. в разделе Предварительные требования.

Развертывание первого приложения Teams

• Осталось 2 мин

Давайте развернем свое первое приложение расширения сообщений в Azure с помощью набора средств Teams.

Вход в учетную запись Azure

Войдите в учетную запись Azure, чтобы получить доступ к портал Azure Майкрософт и подготовить новые облачные ресурсы для поддержки приложения.

Развертывание приложения в Azure

Развертывание состоит из двух этапов. Во-первых, создаются необходимые облачные ресурсы (также известные как подготовка). Затем код приложения копируется в созданные облачные ресурсы. В этом руководстве вы развернете приложение расширения сообщений.

Запуск развернутого приложения

После завершения действий по подготовке и развертыванию перейдите в раздел Запуск и отладка (CTRL+SHIFT+D или Просмотр > запуска) в наборе средств Teams.

1. Выберите раскрывающееся меню ЗАПУСК И ОТЛАДКА .

2. Выберите Запустить удаленное приложение в Teams (Edge).

3. Нажмите кнопку ▷ .

   

4. Откроется диалоговое окно для установки развернутого приложения в Teams. Нажмите Добавить.

   

   Teams открывает приложение расширения сообщений в последнем чате.

   

Узнайте, что происходит после развертывания приложения в Azure

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

• Серверная часть работает с использованием Azure Functions Core Tools.
• Конечная точка HTTP приложения, в которую Microsoft Teams загружает приложение, работает локально.

Развертывание — это двухэтапный процесс. Вы подготавливаете ресурсы в активной подписке Azure, а затем развертываете или отправляете код серверной части и интерфейсного кода приложения в Azure.

• Если серверная часть настроена, использует различные службы Azure, включая Служба приложений Azure и службу хранилища Azure.
• Интерфейсное приложение развертывается в учетной записи хранения Azure, настроенной для статического веб-размещения.

Поздравляем!

• 100% завершено

Вы завершили руководство по созданию приложения расширения сообщений с помощью JavaScript!

Ты придумала что-то вроде этого?