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

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

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

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

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

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

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

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

Agent Toolkit помогает упростить процесс разработки с помощью средств для подготовки и развертывания облачных ресурсов для приложения, публикации в Microsoft Teams Store и многого другого.
Набор средств можно использовать с Visual Studio или CLI (интерфейс командной строки).

npm install -g @microsoft/atk-cli

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

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

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

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

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

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

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

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

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

   

   Примечание.

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

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

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

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

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

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

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

   

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

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

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

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

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

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

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

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

   

   Откроется страница Создание проекта .

3. В поле поиска введите Microsoft Teams. В результатах поиска выберите Агенты Microsoft 365.

4. Нажмите кнопку Далее.

   

5. Введите имя проекта и нажмите кнопку Создать.

   

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

7. Нажмите Создать.

   

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

   

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

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

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

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

1. Выберите Project>Microsoft 365 Agents Toolkit (Выбор>учетной записи Microsoft 365).

   

2. Войдите в учетную запись Microsoft 365 и нажмите кнопку Продолжить.

   

3. Выберите Отладка>Начать отладку или нажмите клавишу F5.

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

   

5. Выберите Добавить , чтобы установить приложение в Teams.

   

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

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

   

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

   

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

   

8. Выберите Принять.

   

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

   

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

10. Остановите отладку в Visual Studio.

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

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

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

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

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

1. Выберите ProjectMicrosoft 365 Agents Toolkit Provision (Подготовка набора средств> агентов Project> Microsoft 365) в облаке.

   

2. Введите сведения о подписке и группе ресурсов в диалоговом окне Подготовка :

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

   

   Откроется диалоговое окно предупреждения набора средств агентов Microsoft 365 .

3. Нажмите OK.

   

4. Выберите Просмотреть подготовленные ресурсы, чтобы просмотреть портал Azure.

   

5. Войдите в портал Azure.

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

   

   Ресурсы подготовлены в портал Azure.

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

1. Выберите Project>Microsoft 365 Agents Toolkit>Deploy to the Cloud ....

   

2. Нажмите OK.

   

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

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

1. Выберите Project>Microsoft 365 Agents Toolkit Preview>в Teams.

   

2. Нажмите Добавить.

   

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

   

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

   

4. Выберите Принять.

   

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

   

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

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

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

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

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

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

   

   Откроется страница Создание проекта .

3. В раскрывающемся списке выберите Microsoft 365. В результатах поиска выберите Агенты Microsoft 365.

4. Нажмите кнопку Далее.

   

   Откроется окно Настройка нового проекта .

5. Введите имя проекта и нажмите кнопку Создать.

   

   Откроется окно Создание агентов Microsoft 365 .

6. Выберите Компонент Бота Teams.

7. Выберите приложение Команда чата в качестве возможности для приложения.

8. Нажмите Создать.

   

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

   

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

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

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

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

ngrok http --host-header=localhost 3978

1. Выберите Project>Microsoft 365 Agents Toolkit (Выбор>учетной записи Microsoft 365).

   

2. Войдите в учетную запись Microsoft 365 и нажмите кнопку Продолжить.

   

3. Выберите Отладка>Начать отладку или нажмите клавишу F5 , чтобы запустить приложение в режиме отладки.

4. Нажмите Добавить.

   

5. Выберите Открыть, чтобы открыть приложение в личных область.

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

   

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

   

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

   

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

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

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

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

1. Выберите ProjectMicrosoft 365 Agents Toolkit Provision (Подготовка набора средств> агентов Project> Microsoft 365) в облаке.

   

2. Введите сведения о подписке и группе ресурсов в диалоговом окне Подготовка :

   1. Выберите имя подписки в раскрывающемся списке.

   2. Выберите свою группу ресурсов в раскрывающемся списке.

   3. Если у вас нет существующей группы ресурсов, можно создать новую группу ресурсов. Чтобы создать новую группу ресурсов, нажмите кнопку Создать> , введите имя > ресурса нажмите кнопку ОК. Выберите расположение в раскрывающемся списке нового расположения группы ресурсов.

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

      

      Откроется диалоговое окно предупреждения набора средств агентов Microsoft 365 .

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

   

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

4. После завершения подготовки нажмите кнопку ОК.

   

5. Выберите Просмотреть подготовленные ресурсы, чтобы просмотреть портал Azure.

   

6. Войдите в портал Azure.

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

   

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

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

1. Выберите Project>Microsoft 365 Agents ToolkitDeploy to the Cloud (Развернуть в облаке).>

   

2. Нажмите OK.

   

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

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

1. Выберите Project>Microsoft 365 Agents Toolkit Preview>в Teams.

   

2. Нажмите Добавить.

   

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

   

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

   

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

• 100% завершено

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

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

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