Создание первого приложения с помощью Blazor
Blazor позволяет создавать интерактивные веб-интерфейсы с помощью C#, а не JavaScript.
Вы можете создать приложение-вкладку и приложение бота с помощью Blazor и последней версии Visual Studio.
Примечание.
Набор средств Teams не поддерживает возможность расширения сообщений.
Предварительные требования
Ниже приведен список средств, необходимых для создания и развертывания приложения.
| Установка | Для использования... | |
|---|---|---|
| Visual Studio 2022 | Вы можете установить корпоративную версию в Visual Studio 2022, а также рабочие нагрузки ASP.NET и веб-разработки. Используйте последнюю версию. | |
| Microsoft Teams | Microsoft Teams позволяет взаимодействовать со всеми пользователями, с которыми вы работаете, с помощью приложений для чата, собраний и звонков в одном месте. | |
| Microsoft Edge (рекомендуется) или Google Chrome | Браузера со средствами разработчика. | |
| Туннель разработки | Функции приложений Teams (диалоговые боты, расширения сообщений и входящие веб-перехватчики) требуют входящих подключений. Туннель соединяет систему разработки с Teams. Туннель разработки — это мощный инструмент для безопасного открытия локального узла в Интернете и контроля доступа. Туннель разработки доступен в Visual Studio 2022 версии 17.7.0 или более поздней. или вы также можете использовать ngrok в качестве туннеля для подключения системы разработки к Teams. Он не требуется для приложений, которые содержат только вкладки. Этот пакет устанавливается в каталоге проекта (с помощью npm devDependencies). |
После установки необходимых средств настройте среду разработки.
Установка набора средств Microsoft Teams
Набор средств Teams помогает упростить процесс разработки с помощью инструментов для подготовки и развертывания облачных ресурсов для приложения, публикации в Microsoft Teams Store и многого другого.
Вы можете использовать набор средств с Visual Studio или CLI (интерфейс командной строки) с именем teamsfx.
Скачайте последнюю версию Visual Studio.
Откройте
vs_enterprise__3bed52501a604464b1eff2ce580fd4eb.exeпапку для скачивания.Нажмите кнопку Продолжить на странице Visual Studio Installer , чтобы настроить установку.
Выберите ASP.NET и веб-разработка в разделе Рабочие нагрузки.
Выберите Средства разработки Microsoft Teams в разделе Сведения об установке.
Нажмите кнопку Установить.
Visual Studio будет установлен через несколько минут.
Настройка клиента разработки Teams
Клиент — это как пространство или контейнер для вашей организации в Teams, где вы общаетесь, обмениваются файлами и выполняете собрания. В этом пространстве также можно отправлять и тестировать пользовательское приложение. Давайте проверим, готовы ли вы к разработке с помощью клиента.
Включение отправки пользовательских приложений
После создания приложения необходимо загрузить это приложение в Teams, не распространяя его. Этот процесс называется отправкой пользовательского приложения. Войдите в учетную запись Microsoft 365, чтобы просмотреть этот параметр.
В клиенте Teams выберите значок Приложения .
Выберите Управление приложениями
Выберите Отправить приложение.
Найдите параметр Отправить пользовательское приложение. Если параметр отображается, включена отправка пользовательских приложений.
Примечание.
Если у вас нет возможности отправить пользовательское приложение, обратитесь к администратору Teams.
Создание бесплатного клиента разработчика Teams (необязательно)
Если у вас нет учетной записи разработчика Teams, ее можно получить бесплатно. Присоединяйтесь к программе для разработчиков Microsoft 365!
Перейдите в программу для разработчиков Microsoft 365.
Выберите Присоединиться и следуйте инструкциям на экране.
На экране приветствия выберите Настроить подписку E5.
Настройте свою учетную запись администратора. После завершения отобразится следующий экран.
Войдите в Teams с помощью только что настроенной учетной записи администратора. Убедитесь, что у вас есть параметр Отправить пользовательское приложение в Teams.
Получение бесплатной учетной записи Azure
Если вы хотите разместить приложение или получить доступ к ресурсам в Azure, у вас должна быть подписка Azure. Перед началом работы создайте бесплатную учетную запись.
Теперь у вас есть все средства для настройки учетной записи. Теперь давайте настроим среду разработки и приступим к сборке! Выберите приложение, которое вы хотите создать.
Создание рабочей области проекта для приложения вкладки
Откройте Visual Studio.
Выберите Создать новый проект.
Откроется страница Создание проекта .
В поле поиска введите Microsoft Teams. В результатах поиска выберите Приложение Microsoft Teams.
Нажмите кнопку Далее.
Введите имя проекта и нажмите кнопку Создать.
Выберите Tab в качестве возможности для приложения.
Нажмите Создать.
Приложение-вкладка Teams будет создано через несколько секунд.
Краткое описание создания приложения-вкладки Teams.
Просмотрите этот краткий обзор для создания приложения вкладки Teams.
Обзор исходного кода для приложения вкладки Teams
После создания проекта у вас есть компоненты для создания базового личного приложения. Структуру каталогов проекта можно просмотреть в области Обозревателя решений Visual Studio.
Teams Toolkit создает шаблон для проекта на основе выбранных возможностей. Среди других файлов, Teams Toolkit поддерживает:
| Имя папки | Содержание |
|---|---|
| Значки приложений | Значки приложений, хранимые как PNG-файлы в color.png и outline.png. |
manifest.json |
Манифест приложения (ранее называемый манифестом приложения Teams) для публикации на портале разработчика для Teams хранится в Properties/manifest.json. |
BackendController.cs |
Серверный контроллер предоставляется в для помощи в Controllers/BackendController.cs проверке подлинности. |
Pages/Tab.razor |
Манифест приложения для публикации на портале разработчика для Teams хранится в Properties/manifest.json. |
TeamsFx.cs и JS/src/index.js |
Содержимое используется для инициализации взаимодействия с узлом Teams. |
Вы можете добавить функциональность серверной части, добавив в приложение другие контроллеры ASP.NET Core.
Создание и запуск первого приложения на вкладке Teams
После настройки рабочей области проекта с помощью Набора средств Teams создайте проект вкладки.
Чтобы создать и запустить приложение, выполните приведенные ниже действия.
Выберите Project>Teams Toolkit>Prepare Teams App Dependencies (Подготовка зависимостей приложений Teams).
Войдите в учетную запись Microsoft 365 и нажмите кнопку Продолжить.
Выберите Отладка>Начать отладку или нажмите клавишу F5.
Если появится диалоговое окно Предупреждение системы безопасности , выберите Да.
Выберите Добавить , чтобы установить приложение в Teams.
Поздравляем, ваше первое приложение вкладки работает в вашей локальной среде!
Чтобы разрешить приложению получать сведения о пользователе с помощью Microsoft Graph, выберите Авторизовать.
Выберите Принять.
Ваша фотография и сведения отображаются на вкладке "Личная".
Вы можете выполнять обычные действия по отладке, например задавать точки останова, как если бы это было любое другое веб-приложение. Приложение поддерживает горячую перезагрузку. При изменении любого файла в проекте страница перезагружается.
Остановите отладку в Visual Studio.
Предварительный просмотр первого приложения вкладки Teams
Вы научились создавать, создавать и запускать приложение Teams с возможностью вкладки. Для развертывания приложения в Azure и предварительной версии в Teams необходимо выполнить следующие действия:
Давайте развернем первое приложение с возможностью вкладки в Microsoft Azure с помощью набора средств Teams.
Подготовка приложения вкладки в Azure
Выберите Project Teams Toolkit Provision (Подготовканабора средств>Project> Teams) в облаке.
Введите сведения о подписке и группе ресурсов в диалоговом окне Подготовка :
- Выберите имя подписки в раскрывающемся списке.
- Выберите свою группу ресурсов в раскрывающемся списке.
- Если у вас нет существующей группы ресурсов, можно создать новую группу ресурсов. Чтобы создать новую группу ресурсов, нажмите кнопку Создать> , введите имя > ресурса нажмите кнопку ОК. Выберите расположение в раскрывающемся списке расположение новой группы ресурсов.
- Выберите Подготовка.
Откроется диалоговое окно предупреждения набора средств Teams .
Выберите Подготовка.
Подготовка группы ресурсов в облаке занимает несколько минут.
Нажмите кнопку ОК.
Выберите Просмотреть подготовленные ресурсы для просмотра на портале Azure.
Войдите на портал Azure.
Появится app-dev-rg.
Ваши ресурсы подготавливаются на портале Azure.
Развертывание приложения вкладки в облаке
Выберите Project>Teams Toolkit>Deploy to the Cloud....
Нажмите кнопку ОК.
Приложение вкладки успешно развернуто в облаке!
Предварительный просмотр приложения вкладки в Teams
ВыберитеПредварительная версия набора средств>Project> Teamsв Teams.
Нажмите Добавить.
Поздравляем, ваше первое приложение вкладки работает в вашей среде Azure!
Выберите Авторизовать , чтобы разрешить приложению получать сведения о пользователе с помощью Microsoft Graph.
Выберите Принять.
Ваша фотография и сведения отображаются на вкладке "Личная".
Создание рабочей области проекта для приложения бота
Запустите разработку приложений Teams, создав свое первое приложение. Это приложение использует возможность бота.
Создание проекта бота
Откройте Visual Studio.
Выберите Создать новый проект.
Откроется страница Создание проекта .
В поле поиска введите Microsoft Teams. В результатах поиска выберите Приложение Microsoft Teams.
Нажмите кнопку Далее.
Откроется окно Настройка нового проекта .
Введите имя проекта и нажмите кнопку Создать.
Откроется окно Создание приложения Teams .
Выберите Компонент приложения Teams.
Выберите приложение Command Bot в качестве возможности для приложения.
Нажмите Создать.
Приложение бота Teams будет создано за несколько секунд.
Краткий обзор создания приложения бота Teams.
Просмотрите этот краткий обзор для создания приложения бота Teams.
Обзор исходного кода для приложения бота Teams
После создания проекта у вас есть компоненты для создания базового личного приложения. Структуру каталогов проекта можно просмотреть в области Обозреватель решений последней версии Visual Studio.
Teams Toolkit создает шаблон для проекта на основе выбранных возможностей. Среди других файлов, Teams Toolkit поддерживает:
| Имя папки | Содержание |
|---|---|
| Значки приложений | Значки приложений, хранимые как PNG-файлы в color.png и outline.png. |
manifest.json |
Манифест приложения для публикации на портале разработчика для Teams хранится в Properties/manifest.json. |
BackendController.cs |
Серверный контроллер предоставляется в для помощи в Controllers/BackendController.cs проверке подлинности. |
TeamsFx.cs и JS/src/index.js |
Содержимое используется для инициализации взаимодействия с узлом Teams. |
Вы можете добавить функциональность серверной части, добавив в приложение другие контроллеры ASP.NET Core.
Создание и запуск первого приложения бота
Чтобы создать и запустить приложение локально, выполните следующие действия.
Создание туннеля
Откройте Visual Studio.
Выберите Создать новый проект.
В поле поиска введите ASP.NET. В результатах поиска выберите ASP.NET Core Web App.
Нажмите кнопку Далее.
Введите имя проекта и нажмите кнопку Далее.
Нажмите Создать.
Откроется окно обзора.
В раскрывающемся списке отладки выберите Dev Tunnels (без активного туннеля)>Создать туннель....
Открывается всплывающее окно.
Обновите следующие сведения во всплывающем окне:
- Учетная запись. Введите учетную запись Майкрософт или GitHub.
- Имя: введите имя туннеля.
- Тип туннеля: в раскрывающемся списке выберите Временный.
- Доступ: в раскрывающемся списке выберите Общедоступный.
Нажмите кнопку ОК.
Появится всплывающее окно, показывающее, что туннель разработки успешно создан.
Нажмите кнопку ОК.
Созданный туннель можно найти в раскрывающемся списке отладки следующим образом:
Нажмите клавишу F5 , чтобы запустить приложение в режиме отладки.
Если появится диалоговое окно Предупреждение системы безопасности , выберите Да.
Открывается всплывающее окно.
Нажмите Продолжить.
В новом окне браузера откроется домашняя страница туннеля разработки, и туннель разработки теперь активен.
Перейдите в Visual Studio и выберите Просмотреть выходные > данные.
В раскрывающемся меню консоли вывода выберите Dev Tunnels (Туннели разработки).
В консоли вывода отображается URL-адрес туннеля разработки.
Выберите Project>Teams Toolkit>Prepare Teams App Dependencies (Подготовка зависимостей приложений Teams).
Войдите в учетную запись Microsoft 365 и нажмите кнопку Продолжить.
Выберите Отладка>Начать отладку или нажмите клавишу F5 , чтобы запустить приложение в режиме отладки.
Нажмите Добавить.
Теперь бот успешно работает в Teams! После загрузки приложения открывается сеанс чата с ботом.
Вы можете ввести
helloworld, чтобы отобразить вводную карточку для адаптивной карточки.
Вы можете выполнять обычные действия по отладке, например задавать точки останова, как если бы это было любое другое веб-приложение. Приложение поддерживает горячую перезагрузку. При изменении любого файла в проекте страница перезагружается.
Узнайте, как устранять неполадки, если приложение не выполняется локально.
Чтобы успешно запустить приложение в Teams, убедитесь, что вы включили отправку пользовательских приложений в учетной записи Teams. Дополнительные сведения о отправке пользовательских приложений см. в разделе предварительных требований.
Предварительный просмотр первого приложения бота
Подготовка приложения бота в Azure
Выберите Project Teams Toolkit Provision (Подготовканабора средств>Project> Teams) в облаке.
Введите сведения о подписке и группе ресурсов в диалоговом окне Подготовка :
Выберите имя подписки в раскрывающемся списке.
Выберите свою группу ресурсов в раскрывающемся списке.
Если у вас нет существующей группы ресурсов, можно создать новую группу ресурсов. Чтобы создать новую группу ресурсов, нажмите кнопку Создать> , введите имя > ресурса нажмите кнопку ОК. Выберите расположение в раскрывающемся списке нового расположения группы ресурсов.
Выберите Подготовка.
Откроется диалоговое окно предупреждения набора средств Teams .
Выберите Подготовка.
Подготовка группы ресурсов в облаке занимает несколько минут.
После завершения подготовки нажмите кнопку ОК.
Выберите Просмотреть подготовленные ресурсы для просмотра на портале Azure.
Войдите на портал Azure.
Появится app-dev-rg.
Ваши ресурсы подготовлены на портале Azure!
Развертывание приложения бота в облаке
Выберите Project Teams ToolkitDeploy to the Cloud (Развертываниенабора средств>Project> Teams в облаке).
Нажмите кнопку ОК.
Приложение бота успешно развернуто в облаке!
Предварительный просмотр приложения бота в Teams
ВыберитеПредварительная версия набора средств>Project> Teamsв Teams.
Нажмите Добавить.
Теперь бот успешно работает в Teams! После загрузки приложения открывается сеанс чата с ботом.
Вы можете ввести
helloworld, чтобы отобразить вводную карточку для адаптивной карточки.
Поздравляем!
Вы сделали это!
Вы создали два приложения, каждое из которых имеет разные возможности: приложение вкладки и приложение бота.
Вы завершили руководство по созданию приложений с помощью Blazor.
Возникла проблема с этим разделом? Если это так, отправьте нам отзыв, чтобы мы исправили этот раздел.
Platform Docs
Обратная связь
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделе https://aka.ms/ContentUserFeedback.
Отправить и просмотреть отзыв по