Поделиться через

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

Вкладки — это веб-страницы с поддержкой Teams, встроенные в Microsoft Teams, и это хороший способ начать разработку для Teams. Их можно добавлять в составе канала в команде, в групповом чате или в личном приложении для отдельного пользователя.

Снимок экрана: приложение концептуальной вкладки в клиенте Teams.

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

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

Снимок экрана: готовое приложение

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

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

  Установка Для использования...
Required    
  Visual Studio Code; Сред сборки JavaScript, TypeScript или SharePoint Framework (SPFx). Используйте последнюю версию.
  Microsoft 365 Agents Toolkit Расширение Microsoft Visual Studio Code, которое создает шаблон проекта для вашего приложения. Используйте последнюю версию.
  Node.js Серверной среды выполнения JavaScript. Дополнительные сведения см . вNode.js таблице совместимости версий для типа проекта.
  Microsoft Teams Microsoft Teams позволяет взаимодействовать со всеми пользователями, с которыми вы работаете, с помощью приложений для чата, собраний и звонков в одном месте.
  Microsoft Edge (рекомендуется) или Google Chrome Браузера со средствами разработчика.
Необязательное    
  Средства Azure для Visual Studio Code и Azure CLI Azure средства для доступа к хранимым данным или для развертывания облачной серверной части приложения Teams в Azure.
  средства разработчика React для Chrome или средства разработчика React для Microsoft Edge Расширение средств разработки в браузере для библиотеки JavaScript с открытым кодом React.
  Песочница Microsoft Graph Microsoft Graph Обозреватель, браузерное средство, которое позволяет выполнять запрос из данных Microsoft Graph.
  Портал разработчика Teams Веб-портал для настройки, администрирования и публикации приложения Teams, в том числе в вашей организации или Microsoft Teams Store.

Совет

Если вы работаете с данными Microsoft Graph, следует ознакомиться с Обозреватель Microsoft Graph и добавить их в закладки. Это средство на основе браузера позволяет запрашивать Microsoft Graph за пределами приложения.

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

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

Установка microsoft 365 Agents Toolkit

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

Набор средств агентов можно использовать с Visual Studio Code или интерфейсом командной строки, который называется Microsoft 365 Agents Toolkit CLI (ранее — TeamsFx CLI).

  1. Откройте Visual Studio Code и выберите Расширения (CTRL+SHIFT+X или Просмотреть>расширения).

  2. В поле поиска введите Microsoft 365 Agents Toolkit.

  3. Нажмите кнопку Установить.

    Снимок экрана: установка расширения набора средств агентов.

    Значок Microsoft 365 Agents Toolkit отображается на панели действий Visual Studio Code.

Вы также можете установить набор средств агентов из Visual Studio Code Marketplace.

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

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

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

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

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

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

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

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

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

    Снимок экрана: параметр для отправки пользовательского приложения в Teams.

    Примечание.

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

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

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

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

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

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

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

    Снимок экрана: программа разработчика Microsoft 365.

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

Я столкнулся с проблемой

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

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

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

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

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

На схеме показано, что это приложение имеет три функции. Вкладка выделена.

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

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

Примечание.

Пользовательский интерфейс Visual Studio Code отображается в Mac. Версия и среда набора средств агентов могут отличаться в зависимости от операционной системы.

  1. Откройте Visual Studio Code.

  2. Щелкните значок Microsoft 365 Agents Toolkit (Набор средств microsoft 365 Agents Toolkit) на панели действий Visual Studio Code.

  3. Выберите Создать новый агент или приложение>Teams App.

    На снимках экрана показано расположение ссылки

  4. Выбор других возможностей Teams

    Снимок экрана: выбор других возможностей Teams.

  5. В этом примере выберите Tab в качестве возможности приложения.

    Снимок экрана: выбранная возможность приложения.

  6. Выберите Папка по умолчанию , чтобы сохранить корневую папку проекта в расположении по умолчанию.

    Снимок экрана: выбор расположения по умолчанию.

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

  1. Нажмите кнопку Обзор.

    Снимок экрана: выбор поиска хранилища.

  2. Выберите расположение рабочей области проекта.

  3. Выберите папку Select (Выбрать папку).

    Снимок экрана: выбор папки.

  4. Введите подходящее имя для приложения и нажмите клавишу ВВОД.

    Снимок экрана: где ввести имя приложения.

Приложение-вкладка Teams будет создано за несколько секунд.

Снимок экрана: созданное приложение.

После создания приложения набор средств агентов отображает следующее сообщение:

Снимок экрана: предварительный просмотр проекта.

Для предварительного просмотра проекта можно выбрать Локальная отладка .

Краткий обзор создания приложения Teams. Просмотрите этот краткий обзор для создания приложения Teams.

Создание приложения Teams

Я столкнулся с проблемой

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

Набор средств агентов предоставляет все компоненты для создания приложения. После создания проекта можно просмотреть папки и файлы проекта в проводнике в Visual Studio Code.

Снимок экрана: вкладка

Хотя вы можете выбрать любую платформу пользовательского интерфейса (или не использовать ее), этот пример кода шаблона предоставляет шаблон с React компонентами.

Среди других элементов в этой структуре каталогов набор средств поддерживает:

Folder Содержание
.vscode Файлы VSCode для отладки
appPackage Шаблоны для манифеста приложения
env Файлы среды
infra Шаблоны для подготовки ресурсов Azure
src Исходный код приложения

Следующие файлы можно настроить и продемонстрировать пример реализации, чтобы начать работу.

File Содержание
index.html HTML-файл.
src/Tab/App.css CSS-файл для приложения.
src/Tab/App.tsx Исходный файл tab. Он вызывает teamsjs пакет SDK для получения контекста приложения Microsoft 365, запущенного приложением.
src/index.ts Запуск приложения с помощью пакета SDK для Microsoft Teams.
vite.config.js Конфигурация средства сборки Vite.
nodemon.json Конфигурация для Nodemon для отслеживания и перезапуска сервера.

Ниже приведены файлы проекта microsoft 365 Agents Toolkit. Вы можете ознакомиться с полным руководством на GitHub , чтобы понять, как работает Microsoft 365 Agents Toolkit.

File Содержание
m365agents.yml Это основной файл проекта Набора средств агентов Microsoft 365. Файл проекта определяет два основных элемента: свойства и определения стадии конфигурации.
m365agents.local.yml Это переопределяет m365agents.yml действия, которые обеспечивают локальное выполнение и отладку.

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

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

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

Используйте учетную запись Microsoft 365 для входа в Teams. Если вы используете клиент программы разработчика Microsoft 365, учетная запись администратора, настроенная при регистрации, — это учетная запись Microsoft 365.

  1. Откройте Visual Studio Code.
  2. Щелкните значок Microsoft 365 Agents Toolkit на боковой панели.
  3. Выберите Войти в M365 с помощью учетных данных. Откроется веб-браузер по умолчанию, чтобы позволить вам войти в учетную запись.
  4. Закройте браузер при появлении запроса и вернитесь к Visual Studio Code.
  5. Вернитесь к набору средств агентов в Visual Studio Code.

В разделе ACCOUNTS на боковой панели отображается имя учетной записи Microsoft 365. Если для вашей учетной записи Microsoft 365 включена отправка пользовательских приложений, в наборе средств агентов отображается параметр Включено отправка пользовательских приложений.

Снимок экрана: место входа в Microsoft 365 и Azure.

Теперь вы можете создать приложение и запустить его в локальной среде!

Я столкнулся с проблемой

Создайте и запустите приложение локально в Visual Studio Code

Чтобы создать и запустить приложение локально, выполните следующие действия.

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

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

Если вам интересно, при нажатии клавиши F5 набор средств агентов:

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

Примечание.

Если Набор средств агентов не может проверка определенных предварительных требований, вам будет предложено проверка.

  1. Устанавливает пакеты NPM.
  2. Регистрирует приложение с помощью Microsoft Entra ID и настраивает приложение.
  3. Регистрирует приложение на портале разработчика Teams и настраивает его.
  4. Запускает приложение вкладки.
  5. Запускает Teams в веб-браузере и отправляет приложение вкладки.

Снимок экрана: нажатие клавиши F5.

Примечание.

При первом запуске приложения загружаются все зависимости, и приложение создается. По завершении сборки откроется окно браузера. Этот процесс может занять 3–5 минут.

При необходимости набор инструментов предложит установить локальный сертификат. Этот сертификат позволяет Teams загружать приложение из https://localhost.

Выберите Да, если появится следующий диалог:

Снимок экрана: предупреждение Майкрософт.

Или нажмите кнопку Продолжить в зависимости от операционной системы:

Снимок экрана: запрос на установку SSL-сертификата, чтобы разрешить Teams загружать приложение из localhost на Mac.

Веб-клиент Teams открывается в окне браузера.

Примечание.

Если набор средств не запрашивает установку сертификата, необходимо установить сертификат вручную. Дополнительные сведения см. в разделе Добавление сертификата вручную.

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

Снимок экрана: добавление приложения в Teams.

  1. Поздравляем, ваше первое приложение работает в Teams!

Снимок экрана: готовое приложение

Примечание.

Если вы хотите расширить приложение до Outlook и Microsoft 365, вы можете выбрать отладку приложения с помощью Outlook и Microsoft 365 из раскрывающегося списка ЗАПУСК И ОТЛАДКА в Visual Studio Code.

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

Я столкнулся с проблемой

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

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

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

Вы научились создавать, создавать и запускать приложение Teams с приложением Tab. Последним шагом является развертывание приложения на Azure.

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

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

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

  1. Откройте Visual Studio Code.
  2. Откройте папку проекта, в которой вы создали приложение-вкладку.
  3. Щелкните значок Microsoft 365 Agents Toolkit на боковой панели.
  4. Выберите Войти, чтобы Azure с помощью учетных данных.

Совет

Если у вас установлено расширение учетной записи AZURE и вы используете ту же учетную запись, этот шаг можно пропустить. Используйте ту же учетную запись, что и в других расширениях.

Откроется веб-браузер по умолчанию, чтобы позволить вам войти в учетную запись.

  1. Закройте браузер при появлении запроса и вернитесь к Visual Studio Code.

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

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

Я столкнулся с проблемой

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

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

В чем разница между подготовкой и развертыванием?
Шаг подготовки создает ресурсы в Azure и Microsoft 365 для приложения, но код (HTML, CSS, JavaScript и т. д.) не копируется в ресурсы. Шаг Развертывание копирует код приложения в ресурсы, созданные на этапе подготовки. Обычно развертывание выполняется несколько раз без подготовки новых ресурсов. Так как процесс подготовки может занять некоторое время, он отделен от шага развертывания.

Щелкните значок Microsoft 365 Agents Toolkit на боковой панели Visual Studio Code.

  1. Выберите Подготовка.

    Снимок экрана: команды подготовки.

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

    Снимок экрана: выбор существующей подписки.

  3. Выберите группу ресурсов, используемую для Azure ресурсов.

    Снимок экрана: ресурсы для подготовки.

    Примечание.

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

  4. Выберите Подготовка.

    Снимок экрана: подготовка диалогового окна.

    Процесс подготовки создает ресурсы в Azure облаке. Это может занять некоторое время. Ход выполнения можно отслеживать, наблюдая за диалогами в правом нижнем углу. Через несколько минут вы увидите следующее уведомление:

    Снимок экрана: ресурс, успешно подготовленный в облаке.

    При необходимости можно просмотреть подготовленные ресурсы. В этом руководстве вам не нужно просматривать ресурсы.

    Подготовленный ресурс отображается в разделе СРЕДА .

    Снимок экрана: подготовленный ресурс.

  5. После завершения подготовки выберите Развернуть на панели ЖИЗНЕННЫЙ цикл .

    Снимок экрана: развертывание приложения в облаке.

    Как и при подготовке, развертывание занимает некоторое время. Вы можете отслеживать процесс, наблюдая за диалогами в правом нижнем углу. Через несколько минут вы увидите уведомление о завершении.

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

Примечание.

Приложение размещается с помощью Azure ресурсов.

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

После завершения действий по подготовке и развертыванию:

  1. Откройте панель отладки (CTRL+SHIFT+D️ / ⇧-D или Просмотр > запуска) из Visual Studio Code.

  2. В раскрывающемся списке конфигурация запуска выберите Запустить удаленное управление (edge).

  3. Нажмите кнопку Начать отладку (F5), чтобы запустить приложение с Azure.

    Снимок экрана: удаленный запуск приложения.

  4. Выберите Добавить при появлении запроса на отправку приложения в Teams.

    Снимок экрана: устанавливаемое приложение.

    Поздравляем, ваше первое приложение вкладки работает в вашей Azure среде!

    Снимок экрана: сообщение о запуске приложения сейчас или позже.

Я столкнулся с проблемой

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

До развертывания приложение работает локально:

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

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

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

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

Вы сделали это!

Вы создали приложение вкладки.

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

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

  • Last updated on