Hello World с Blazor - Teams

Blazor позволяет создавать интерактивные веб-интерфейсы с помощью C#, а не JavaScript.

Вы можете создать приложение-вкладку и приложение бота с помощью Blazor и последней версии Visual Studio.

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

Примечание.

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

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

Осталось 8 мин

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

	Установка	Для использования...
	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
Командная строка

Скачайте последнюю версию Visual Studio.
Откройте vs_enterprise__3bed52501a604464b1eff2ce580fd4eb.exe папку для скачивания.
Нажмите кнопку Продолжить на странице Visual Studio Installer , чтобы настроить установку.
Выберите ASP.NET и веб-разработка в разделе Рабочие нагрузки.
Выберите Средства разработки Microsoft Teams в разделе Сведения об установке.
Нажмите кнопку Установить.

Visual Studio будет установлен через несколько минут.

Чтобы установить Интерфейс командной строки TeamsFx, используйте npm диспетчер пакетов:

npm install -g @microsoft/teamsfx-cli

В зависимости от конфигурации может потребоваться использовать sudo для установки интерфейса командной строки:

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

Это условие чаще встречается в системах Linux и macOS.

Убедитесь, что вы добавили глобальный кэш npm в PATH. Этот шаг обычно выполняется в рамках установщика Node.js.

С командой можно использовать cli teamsfx . Убедитесь, что команда работает, выполнив команду teamsfx -h.

Предостережение

Перед запуском TeamsFx в терминалах PowerShell необходимо включить политику удаленного подписанного выполнения для PowerShell.

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

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

Включение отправки пользовательских приложений

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

В клиенте Teams выберите значок Приложения .
Выберите Управление приложениями
Выберите Отправить приложение.
Найдите параметр Отправить пользовательское приложение. Если параметр отображается, включена отправка пользовательских приложений.

Примечание.

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

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

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

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

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

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

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

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

Осталось 7 мин

Откройте Visual Studio.
Выберите Создать новый проект.

Откроется страница Создание проекта .
В поле поиска введите Microsoft Teams. В результатах поиска выберите Приложение Microsoft Teams.
Нажмите кнопку Далее.
Введите имя проекта и нажмите кнопку Создать.
Выберите Tab в качестве возможности для приложения.
Нажмите Создать.

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

Краткое описание создания приложения-вкладки 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

Осталось 6 мин

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

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

Выберите Project>Teams Toolkit>Prepare Teams App Dependencies (Подготовка зависимостей приложений Teams).
Войдите в учетную запись Microsoft 365 и нажмите кнопку Продолжить.
Выберите Отладка>Начать отладку или нажмите клавишу F5.
Если появится диалоговое окно Предупреждение системы безопасности , выберите Да.
Выберите Добавить , чтобы установить приложение в Teams.

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

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

Предварительный просмотр первого приложения вкладки Teams

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

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

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

Подготовка приложения вкладки в Azure

Выберите Project Teams Toolkit Provision (Подготовканабора средств>Project> Teams) в облаке.
Введите сведения о подписке и группе ресурсов в диалоговом окне Подготовка :
1. Выберите имя подписки в раскрывающемся списке.
2. Выберите свою группу ресурсов в раскрывающемся списке.
3. Если у вас нет существующей группы ресурсов, можно создать новую группу ресурсов. Чтобы создать новую группу ресурсов, нажмите кнопку Создать> , введите имя > ресурса нажмите кнопку ОК. Выберите расположение в раскрывающемся списке расположение новой группы ресурсов.
4. Выберите Подготовка.
Откроется диалоговое окно предупреждения набора средств Teams .
Выберите Подготовка.

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

Появится app-dev-rg.

Ваши ресурсы подготавливаются на портале Azure.

Развертывание приложения вкладки в облаке

Выберите Project>Teams Toolkit>Deploy to the Cloud....
Нажмите кнопку ОК.

Приложение вкладки успешно развернуто в облаке!

Предварительный просмотр приложения вкладки в Teams

ВыберитеПредварительная версия набора средств>Project> Teamsв Teams.
Нажмите Добавить.

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

Ваша фотография и сведения отображаются на вкладке "Личная".

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

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

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

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

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

Откройте Visual Studio.
Выберите Создать новый проект.

Откроется страница Создание проекта .
В поле поиска введите Microsoft Teams. В результатах поиска выберите Приложение Microsoft Teams.
Нажмите кнопку Далее.

Откроется окно Настройка нового проекта .
Введите имя проекта и нажмите кнопку Создать.

Откроется окно Создание приложения Teams .
Выберите Компонент приложения Teams.
Выберите приложение Command Bot в качестве возможности для приложения.
Нажмите Создать.

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

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

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

Графическое представление показывает процесс создания приложения-бота jTeams.

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

После создания проекта у вас есть компоненты для создания базового личного приложения. Структуру каталогов проекта можно просмотреть в области Обозреватель решений последней версии Visual Studio.

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

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.

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

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

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

Создание туннеля

dev tunnel
ngrok

Откройте Visual Studio.
Выберите Создать новый проект.
В поле поиска введите ASP.NET. В результатах поиска выберите ASP.NET Core Web App.
Нажмите кнопку Далее.
Введите имя проекта и нажмите кнопку Далее.
Нажмите Создать.

Откроется окно обзора.
В раскрывающемся списке отладки выберите Dev Tunnels (без активного туннеля)>Создать туннель....

Открывается всплывающее окно.
Обновите следующие сведения во всплывающем окне:
1. Учетная запись. Введите учетную запись Майкрософт или GitHub.
2. Имя: введите имя туннеля.
3. Тип туннеля: в раскрывающемся списке выберите Временный.
4. Доступ: в раскрывающемся списке выберите Общедоступный.
Нажмите кнопку ОК.

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

Созданный туннель можно найти в раскрывающемся списке отладки следующим образом:
Нажмите клавишу F5 , чтобы запустить приложение в режиме отладки.
Если появится диалоговое окно Предупреждение системы безопасности , выберите Да.

Открывается всплывающее окно.
Нажмите Продолжить.

В новом окне браузера откроется домашняя страница туннеля разработки, и туннель разработки теперь активен.
Перейдите в Visual Studio и выберите Просмотреть выходные > данные.
В раскрывающемся меню консоли вывода выберите Dev Tunnels (Туннели разработки).

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

Используйте ngrok или командную строку для создания туннеля к общедоступным конечным точкам HTTPS локального веб-сервера. Выполните следующую команду в ngrok:

ngrok http --host-header=localhost 3978

Совет

Если вы столкнулись с ERR_NGROK_4018, выполните действия, описанные в командной строке, чтобы зарегистрироваться и проверить подлинность ngrok. Затем выполните ngrok http --host-header=localhost 3978 команду .

В окне отображается URL-адрес HTTPS.

Снимок экрана: URL-адрес HTTPS ngrok.

Выберите Project>Teams Toolkit>Prepare Teams App Dependencies (Подготовка зависимостей приложений Teams).
Войдите в учетную запись Microsoft 365 и нажмите кнопку Продолжить.
Выберите Отладка>Начать отладку или нажмите клавишу F5 , чтобы запустить приложение в режиме отладки.
Нажмите Добавить.

Теперь бот успешно работает в Teams! После загрузки приложения открывается сеанс чата с ботом.

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

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

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

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

Предварительный просмотр первого приложения бота

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

Подготовка приложения бота в Azure

Выберите Project Teams Toolkit Provision (Подготовканабора средств>Project> Teams) в облаке.
Введите сведения о подписке и группе ресурсов в диалоговом окне Подготовка :
1. Выберите имя подписки в раскрывающемся списке.
2. Выберите свою группу ресурсов в раскрывающемся списке.
3. Если у вас нет существующей группы ресурсов, можно создать новую группу ресурсов. Чтобы создать новую группу ресурсов, нажмите кнопку Создать> , введите имя > ресурса нажмите кнопку ОК. Выберите расположение в раскрывающемся списке нового расположения группы ресурсов.
4. Выберите Подготовка.
  
  Откроется диалоговое окно предупреждения набора средств Teams .
Выберите Подготовка.

Подготовка группы ресурсов в облаке занимает несколько минут.
После завершения подготовки нажмите кнопку ОК.
Выберите Просмотреть подготовленные ресурсы для просмотра на портале Azure.
Войдите на портал Azure.

Появится app-dev-rg.

Ваши ресурсы подготовлены на портале Azure!

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

Выберите Project Teams ToolkitDeploy to the Cloud (Развертываниенабора средств>Project> Teams в облаке).
Нажмите кнопку ОК.

Приложение бота успешно развернуто в облаке!

Предварительный просмотр приложения бота в Teams

ВыберитеПредварительная версия набора средств>Project> Teamsв Teams.
Нажмите Добавить.

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

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

100% завершено

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

Вы создали два приложения, каждое из которых имеет разные возможности: приложение вкладки и приложение бота.

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

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

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