Создание первого приложения с помощью SPFx
SharePoint Framework (SPFx) — это модель разработки для создания клиентских решений для Microsoft Teams и SharePoint. Приложение SPFx Teams размещено в Microsoft 365. Она обеспечивает полную поддержку для разработки и размещения клиентского решения SPFx. Решение SharePoint Framework можно интегрировать с:
- Данные SharePoint и расширение Microsoft Teams.
- Бизнес-API, защищенные с помощью Идентификатора Microsoft Entra.
В этом руководстве начните разработку приложений Microsoft Teams с помощью SPFx, создав свое первое приложение с возможностью вкладки.
Примечание.
Набор средств Teams предоставляет только возможность вкладки в приложении Teams, созданном с помощью SharePoint Framework. Возможности расширения для ботов и сообщений недоступны.
Предварительные условия
Ниже приведен список средств, необходимых для создания и развертывания приложений.
| Установка | Для использования... | |
|---|---|---|
| Required | ||
| Visual Studio Code | JavaScript или TypeScript— среды сборки. Используйте последнюю версию. | |
| Набор средств Teams | Расширение Microsoft Visual Studio Code, которое создает шаблон проекта для приложения. Используйте Набор средств Teams версии 5. | |
| Node.js | Серверной среды выполнения JavaScript. Дополнительные сведения см . вNode.js таблице совместимости версий для типа проекта. | |
| Microsoft Edge (рекомендуется) или Google Chrome | Браузера со средствами разработчика. | |
| Необязательное | ||
| Песочница 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.
Учетная запись администратора сайта семейства SharePoint
Убедитесь, что у вас есть учетная запись администратора для семейства веб-сайтов SharePoint. Эта учетная запись требуется при развертывании для размещения. Если вы используете клиент программы разработчика Microsoft 365, вы можете использовать учетную запись администратора, созданную в то время.
Теперь у вас есть все инструменты и настроена учетная запись. Теперь давайте настроим среду разработки и приступим к сборке!
Создание рабочей области проекта для приложения вкладки
В этом руководстве описаны действия по созданию, сборке и развертыванию приложения Teams с помощью SharePoint Framework SPFx. Это приложение будет иметь возможность вкладки.
Из этого руководства вы узнаете:
Важно!
Перед созданием рабочей области проекта убедитесь, что вы не вошли в учетную запись Microsoft 365 или Azure.
Создание проекта
Если предварительные требования выполнены, давайте начнем!
Откройте Visual Studio Code.
Щелкните значок Набора средств
Teams на панели действий Visual Studio Code.Выберите Создать приложение.
Выберите Вкладка.
Выберите SPFx.
Выберите Создать новое решение SPFx.
Выберите параметр для формирования шаблонов.
Выберите React в разделе Платформа .
Нажмите клавишу ВВОД , чтобы принять имя веб-части по умолчанию.
Выберите папку Рабочей области , выбрав нужную папку.
Введите подходящее имя приложения . Нажмите клавишу ВВОД.
После создания приложения набор средств Teams отображает следующее сообщение:
Выберите Локальная отладка , чтобы просмотреть проект.
Teams Toolkit вызывает Yeoman CLI для формирования шаблона приложения Teams и установки необходимых зависимостей в процессе.
Формирование шаблонов занимает несколько минут.
Краткий обзор создания приложения Teams.
Знакомство с исходным кодом
После создания проекта у вас есть компоненты для создания базового личного приложения. Каталоги и файлы проектов можно просмотреть в области Обозревателя Visual Studio Code.
Набор средств создает шаблон в каталоге проекта для возможности вкладки.
Среди других элементов в этом каталоге набор средств Teams содержит:
- appPackage: содержит значки приложения и
color.pngoutline.png. -
manifest.local.json: содержит манифест приложения для локальной отладки. -
manifest.json: содержит манифест приложения для публикации на портале разработчика для Teams. -
.vscode/Settings.json: параметры, выбранные при создании проекта.
При выборе проекта веб-части SPFx к пользовательскому интерфейсу относятся следующие файлы:
-
SPFx/src/webparts/{webpart}: содержит веб-часть SPFx. -
.vscode/launch.json: описывает конфигурации отладки, доступные в палитре отладки.
Создание приложения вкладки
После настройки рабочей области проекта с помощью Набора средств Teams создайте проект вкладки. Необходимо войти в учетную запись Microsoft 365.
На этой странице вы узнаете, как создать и запустить свое первое приложение.
Вход в учетную запись Microsoft 365
Используйте учетную запись Microsoft 365 для входа в Teams. Если вы используете клиент программы разработчика Microsoft 365, учетная запись администратора, настроенная при регистрации, — это учетная запись Microsoft 365.
Откройте Visual Studio Code.
Щелкните значок Набора средств
Teams на боковой панели.Выберите Войти в M365.
Откроется веб-браузер по умолчанию, чтобы позволить вам войти в учетную запись.
Войдите в учетную запись Microsoft 365, используя свои учетные данные.
Закройте браузер при появлении запроса и вернитесь в Visual Studio Code.
Вернитесь к набору средств Teams в Visual Studio Code.
В разделе ACCOUNTS на боковой панели отображается имя учетной записи Microsoft 365.
Теперь вы можете создать приложение и запустить его локально!
Создайте и запустите приложение локально в Visual Studio Code
Чтобы создать и запустить приложение локально, выполните следующие действия.
Щелкните значок Запуск и отладка
на боковой панели Visual Studio Code.Выберите один из следующих параметров для запуска и отладки приложения.
Teams workbench (Edge)
Teams workbench (Chrome)
Нажмите кнопку воспроизведения или клавишу F5 , чтобы начать отладку.
Примечание.
При первом запуске приложения загружаются все зависимости, и приложение создается. Окно браузера автоматически открывается и загружает SharePoint Workbench по завершении сборки. Этот процесс может занять несколько минут.
При необходимости набор средств может предложить установить локальный сертификат. Этот сертификат позволяет Teams загружать приложение из
https://localhost.Выберите Да , если появится следующее диалоговое окно:
Веб-клиент Teams открывается в окне браузера.
Выберите Добавить при появлении запроса на отправку пользовательского приложения в Teams на локальном компьютере.
Выберите версию веб-приложения, если вам будет предложено переключиться на классический компьютер Teams. Код HTML, CSS и JavaScript можно просмотреть в стандартной среде веб-разработки.
Выберите Загрузить сценарии отладки, если вам будет предложено загрузить скрипты отладки перед отправкой пользовательского приложения в Teams.
Поздравляем, ваше первое приложение работает в Teams!
Теперь приложение должно быть запущено. Вы можете отлаживать приложение как любую другую веб-часть SPFx (например, задание точек останова).
Совет
Попробуйте разместить точки останова в методе SPFx/src/webparts/{webpart}/{webpart}.ts render и перезагрузить окно браузера. Visual Studio Code остановится на точках останова в коде.
Узнайте, что происходит при использовании Local Workbench для отладки приложения.
Local workbench — это параметр по умолчанию для запуска и отладки приложения в Visual Studio Code. В этом руководстве рекомендуется выполнить отладку приложения с помощью Teams workbench, однако для просмотра макетов веб-частей можно выбрать локальную рабочую среду.
Примечание.
Этот интерфейс предназначен только для изучения того, как веб-часть может отображаться на мобильных устройствах или планшетах. Вам потребуется написать код для включения их в приложение, а затем развернуть его для просмотра.
Чтобы изучить макеты веб-частей с помощью локальной рабочей среды:
Выберите Local workbench и нажмите клавишу F5 , чтобы запустить и отладить приложение.
В браузере откроется веб-часть SharePoint Workbench , где можно добавлять, изменять и удалять веб-части.
Выберите Добавить веб-часть в столбце один + значок, чтобы добавить веб-часть.
Выберите веб-часть в меню.
Выберите Добавить новый раздел + значок, чтобы выбрать макет столбца для веб-частей.
Используйте этот интерфейс, чтобы опробовать различные макеты веб-частей:
- Просмотр данных веб-частей для макета.
- Попробуйте изменить различные макеты, текст, цвет и многое другое.
- Используйте кнопку Предварительный просмотр для просмотра веб-частей.
- Просмотр макета веб-части на разных мобильных устройствах или планшетных устройствах.
- Сохраните или отмените любые изменения в макете, чтобы продолжить работу с возможными макетами.
Закройте окно браузера, чтобы остановить отладку локальной рабочей среды, когда вы будете готовы.
Развертывание первого приложения Teams
Вы научились создавать, создавать и запускать приложение Teams с возможностью tab. Последний шаг — развертывание приложения.
Давайте развернем первое приложение с возможностью tab в SharePoint с помощью набора средств Teams.
На этой странице вы узнаете, как:
Развертывание приложения в SharePoint
Убедитесь, что в развертывании существует каталог приложений SharePoint. Если он не существует, создайте его. Создание каталога приложений может занять до 15 минут.
Откройте Visual Studio Code.
Выберите набор средств Teams на боковой панели, щелкнув значок Teams.
Выберите Подготовка в разделе ЖИЗНЕННЫЙ ЦИКЛ.
Набор средств обновляет ход выполнения в правом нижнем углу. Через несколько секунд вы увидите следующее уведомление:
После завершения подготовки выберите Развернуть в разделе ЖИЗНЕННЫЙ ЦИКЛ.
Пакет приложения создается и передается на сайт SharePoint. Набор средств Teams отображает сообщение с локальным путем, по которому сохраняется пакет приложения.
После сборки пакета Набор средств Teams отображает сообщение с URL-адресом сайта SharePoint, на который был отправлен пакет приложения.
Вы можете опубликовать в Teams или выбрать сайт SharePoint.
- Публикация в Teams (#publish в teams)
- Выберите ссылку на сайт SharePoint (#select-the-link-of-sharepoint-site)
Публикация в Teams
Выберите Опубликовать в Teams.
Выберите Портал администрирования.
Выберите Управление приложениями и выполните поиск приложения в разделе поиска, чтобы выбрать свое приложение.
Выберите Опубликовать , чтобы опубликовать приложение в Teams.
Откройте приложение Teams (или войдите в ).
https://teams.microsoft.comВыберите тройную точку на боковой панели, а затем выберите Все приложения.
Приложение отображается в категории Приложения, созданные для вашей организации . Вы можете добавить приложение оттуда.
Выберите свое приложение и нажмите кнопку Добавить.
Поздравляем! Теперь приложение добавлено в Teams.
Выберите ссылку на сайт SharePoint
Выберите ссылку на сайт SharePoint.
На сайте SharePoint откроется домашняя страница "Приложения". Выполните процедуру распространения приложения в SharePoint.
Распространение пакета приложения в SharePoint
Пакет приложения, отправленный, можно найти на сайте SharePoint. Чтобы распространить приложение и синхронизировать его с Teams, выполните следующие действия:
Выберите Распространение приложений для SharePoint.
Откроется домашняя страница Приложения для SharePoint. Ваше приложение отображается на этой странице.
Перейдите на вкладку ФАЙЛЫ .
Выберите развернутый пакет, а затем выберите Синхронизировать с Teams.
Примечание.
Процесс синхронизации с Teams может занять несколько минут. В браузере появится сообщение о том, что приложение успешно синхронизировано с Teams.
Откройте приложение Teams (или войдите в ).
https://teams.microsoft.comВыберите тройную точку на боковой панели, а затем выберите Все приложения.
Приложение будет помещено в категорию Приложения, созданные для вашей организации . Вы можете добавить приложение оттуда.
Выберите свое приложение и нажмите кнопку Добавить.
Поздравляем! Теперь приложение добавлено в Teams.
Возникла проблема с этим разделом? Если это так, отправьте нам отзыв, чтобы мы исправили этот раздел.
Platform Docs