Создайте и запустите свое первое приложение Microsoft Teams, пользуясь библиотекой React

В этом руководстве вы создадите приложение Microsoft Teams в React — реализацию простого личного приложения, получающего информацию из Microsoft Graph. (Личное приложение — это приложение, которое содержит набор вкладок для индивидуального использования.) В данном руководстве вы узнаете, как устроены приложения Teams, как запустить приложение локально и как развернуть его в Azure.

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

Перед началом работы

Настройте среду разработки, установив необходимые компоненты.

Создание проекта

Используйте набор средств Teams для создания своего первого проекта.

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

  2. Откройте набор средств Teams, выбрав значок Teams на боковой панели:

    Значок Teams на боковой панели Visual Studio Code .

  3. Выберите Создать проект.

    Расположение ссылки "Создать проект" на боковой панели набора средств Teams .

  4. Выберите Создать приложение Teams.

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

  5. На странице выбора возможностей уже будет выбрана возможность Вкладка. Нажмите кнопку ОК.

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

  6. На шаге Тип размещения на клиенте выберите Azure.

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

  7. На этапе Облачные ресурсы нажмите ОК. В этом руководстве вам не понадобятся дополнительные облачные ресурсы.

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

  8. На этапе Язык программирования выберите JavaScript.

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

  9. Выберите папку рабочей области. В папке рабочей области будет создана папка для создаваемого проекта.

  10. Введите подходящее имя для приложения, например helloworld. Имя приложения должно состоять только из букв и цифр. Чтобы продолжить, нажмите клавишу ВВОД.

Создание приложения Teams займет несколько секунд.

Знакомство с исходным кодом

Если вы хотите пропустить этот раздел, вы можете запустить приложение локально.

После того как набор средств Teams настроит ваш проект, у вас появятся компоненты для создания простого личного приложения Teams. Каталоги и файлы проекта отображаются в области проводника Visual Studio Code.

Снимок экрана: файлы проектов приложения для личного приложения в Visual Studio Code.

Набор средств автоматически формирует шаблоны в каталоге проекта на основе возможностей, добавленных во время установки. Набор средств Teams сохраняет свое состояние для вашего приложения в каталоге .fx. Среди других элементов в этом каталоге находятся:

  • Значки приложений, хранимые как PNG-файлы в color.png и outline.png.
  • Манифест приложения для публикации на портале разработчика для Teams, хранимый в manifest.source.json.
  • Параметры, выбранные при создании проекта, хранятся в settings.json.

Так как вы выбрали вкладку во время настройки, набор средств Teams создает шаблоны всего необходимого кода для программирования базовой вкладки в каталоге tabs. В этом каталоге есть несколько важных файлов:

  • tabs/src/index.jsx — точка входа приложения на клиентской стороне, где проводится отрисовка основного компонента App с помощью ReactDOM.render().
  • tabs/src/components/App.jsx несет ответственность за маршрутизацию URL-адресов в приложении. Он вызывает SDK JavaScript для Microsoft Teams, чтобы реализовать обмен сообщениями между вашим приложением и Teams.
  • tabs/src/components/Tab.jsx содержит код для реализации пользовательского интерфейса вашего приложения.
  • tabs/src/components/TabConfig.jsx содержит код для реализации пользовательского интерфейса настройки вашего приложения.

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

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

Запустите приложение локально

Набор средств Teams позволяет запускать приложение локально. Нужно выполнить несколько действий для обеспечения правильной инфраструктуры. Teams ожидает, что:

  • Приложение зарегистрировано в Azure Active Directory. Оно имеет разрешения, связанные с расположением, из которого загружается, и с любыми ресурсами серверной сторонй, которые использует.
  • Веб-API позволяет выполнять задачи проверки подлинности, действуя в качестве прокси-сервера между приложением и Azure Active Directory. Этим занимается набор инструментов Azure Functions Core Tools. Доступ к нему можно получить по URL https://localhost:5000.
  • Ресурсы HTML, CSS и JavaScript, которые составляют клиентскую часть приложения, размещены в локальной службе. Доступ к ней можно получить по URL https://localhost:3000.
  • Манифест приложения создается и существует на портале разработчика для Teams. Teams использует манифест приложения, чтобы сообщить подключенным клиентам, откуда загружать приложение.

После этого приложение можно загрузить в клиенте Teams. Мы используем веб-клиент Teams, чтобы иметь возможность видеть код HTML, CSS и JavaScript в стандартной среде веб-разработки.

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

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

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

    При первом запуске приложения произойдет загрузка всех зависимостей и сборка приложения. По завершении сборки автоматически откроется окно браузера. Для завершения может потребоваться от 3 до 5 минут.

    Набор средств при необходимости выведет запрос на установку локального сертификата. Этот сертификат позволяет Teams загружать приложение из https://localhost. Выберите "Да", когда появится следующее диалоговое окно:

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

  2. Веб-браузер начинает запускать приложение. Если вам будет предложено открыть Teams рабочий стол, выберите Отмена, чтобы оставаться в браузере. Вам также может быть предложено перейти на рабочий Teams в другое время; выберите Teams веб-приложение, когда это произойдет.

    Снимок экрана: выбор веб-версии Teams при запуске

  3. Вам может быть предложено выполнить вход. В этом случае войдите с учетной записью M365.

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

Откроется окно приложения:

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

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

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

При нажатии клавиши F5 набор средств Teams:

  1. Регистрирует приложение в Azure Active Directory.
  2. Загружает неопубликованное приложение в Teams
  3. Запускает серверную часть приложения локально с помощью Azure Functions Core Tools.
  4. Запускает локальную часть приложения, размещенную на клиентской стороне.
  5. Запускает в веб-версии Microsoft Teams в браузере команду, которая предписывает Teams загружать приложение из https://localhost:3000/tab (URL-адреса, зарегистрированого в манифесте приложения).
Научитесь искать и устранять распространенные проблемы при локальном запуске приложения.

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

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

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

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

  2. Выберите Teams набор средств на боковой панели, выбрав значок Teams.

  3. Выберите Положение в облаке.

    Снимок экрана, показывающий команды по подготовкам

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

    Примечание

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

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

    Снимок экрана диалогового временного набора.

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

    Снимок экрана, показывающий полный диалоговое окно подготовка.

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

Примечание

В чем разница между Provision и Deploy?

На шаге Provision будут создаваться ресурсы в Azure и M365 для вашего приложения, но код (HTML, CSS, JavaScript и т.д.) не копируется в ресурсы. Шаг Deploy скопирует код приложения на ресурсы, созданные во время шага по предоставлению. Часто развертывается несколько раз без предоставления новых ресурсов. Так как этап предоставления может занять некоторое время, он отделен от шага развертывания.

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

  1. С Visual Studio Code откройте панель отключки (Ctrl+Shift+D / ⌘⇧-D или Просмотр > Run)
  2. Выберите Пульт запуска (Edge) из выпадаемой конфигурации запуска.
  3. Нажмите кнопку Play, чтобы запустить приложение — теперь он работает удаленно из Azure!
Узнайте, что происходит в ходе развертывания приложения в Azure

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

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

Развертывание включает в себя подготовку ресурсов для активной подписки Azure и развертывание (загрузку) кода клиентской и серверной частей приложения в Azure.

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

Дальнейшие действия

Узнайте о других методах создания приложений Teams: