Создание настраиваемой вкладки

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

Примечание.

В этом разделе представлена версия 2.0.x клиентской библиотеки JavaScript (TeamsJS) Microsoft Teams. Если вы используете более раннюю версию, ознакомьтесь с обзором библиотеки TeamsJS , чтобы узнать о различиях между последней версией TeamsJS и более ранними версиями.

Создание настраиваемой вкладки с помощью Node.js

1. В командной строке установите пакетыYeoman и gulp-cli, введя следующую команду после установки Node.js:

   npm install yo gulp-cli --global
   

2. В командной строке установите генератор приложений Microsoft Teams, введя следующую команду:

   npm install generator-teams --global
   

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

1. В командной строке создайте каталог для настраиваемой вкладки.

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

   yo teams
   

3. Укажите значения для ряда вопросов, которые генератор приложений Microsoft Teams предложит обновить manifest.json файл:

   

Ряд вопросов по обновлению файла manifest.json

• Как называется решение?

  Имя решения — это имя проекта. Вы можете принять предложенное имя, нажав ВВОД.

• Где следует разместить файлы?

  Вы находитесь в каталоге проекта. Выберите ВВОД.

• Название вашего проекта приложения Microsoft Teams?

  Название — это имя пакета приложения, которое используется в манифесте и описании приложения. Введите название или выберите ВВОД чтобы принять имя по умолчанию.

• Ваше имя (или название вашей компании)? (макс. 32 символа)

  Название вашей компании можно использовать в манифесте приложения. Введите название компании или выберите ВВОД чтобы принять имя по умолчанию.

• Какую версию манифеста вы хотите использовать?

  Выберите схему по умолчанию.

• Быстрое формирование шаблонов? (Г/н)

  Значение по умолчанию — "да". Введите n, чтобы указать свой идентификатор партнера Microsoft.

• Введите идентификатор партнера Майкрософт, если он у вас есть? (Оставьте пустым, чтобы пропустить)

  Это поле не является обязательным и должно использоваться только в том случае, если вы уже являетесь участником Программы Microsoft Cloud Partner Program, ранее известной как Microsoft Partner Network.

• Что вы хотите добавить в проект?

  Выберите ( * ) Вкладка.

• URL-адрес для размещения этого решения?

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

• Хотели бы вы показывать индикатор загрузки при загрузке приложения или вкладки?

  Выберите нет, чтобы включить индикатор загрузки приложения или вкладки. Значение по умолчанию — "нет". Введите n.

• Вы хотите, чтобы личные приложения отображались без строки заголовков вкладок?

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

• Вы хотите включить платформу тестирования и начальные тесты? (y/N)

  Выберите нет, чтобы включить тестовую среду для этого проекта. Значение по умолчанию — "нет". Введите n.

• Вы хотите включить поддержку ESLint? (y/N)

  Выберите нет, чтобы включить поддержку ESLint. Значение по умолчанию — "нет". Введите n.

• Вы хотите использовать Azure Application Insights для телеметрии? (y/N)

  Выберите нет чтобы включить Azure Application Insights. Значение по умолчанию — "нет". Введите n.

• Имя вкладки по умолчанию (не более 16 символов)?

  Назовите свою вкладку. Это имя вкладки используется в вашем проекте как компонент пути к файлу или URL-адресу.

• Какую вкладку вы хотели бы создать?

  С помощью клавиш со стрелками выберите вкладку Настраиваемая.

• Какие области вы собираетесь использовать для вкладки?

  Вы можете выбрать команду или групповой чат.

• Требуется ли поддержка Microsoft Entra единого входа для вкладки?

  Не включайте Microsoft Entra поддержку единого входа для вкладки. Значение по умолчанию — да, введите n.

• Вы хотите, чтобы эта вкладка была доступна в SharePoint Online? (Г/н)

  Введите N.

Важно!

Компонент пути yourDefaultTabNameTab— это значение, которое вы ввели в генератор для Имени вкладки по умолчанию а также слово Вкладка. Например, DefaultTabName это MyTab, а затем /MyTabTab/.

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

У вас должен быть пакет приложения для создания и запуска приложения в Teams. Пакет приложения создается с помощью задачи gulp, которая проверяет файл manifest.json и создает zip-папку в каталоге ./package. В командной строке введите следующую команду:

gulp manifest

Создайте и запустите приложение

Создание приложения

Введите следующую команду в командной строке, чтобы перенести решение в папку ./dist:

gulp build

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

1. В командной строке введите следующую команду, чтобы запустить локальный веб-сервер:

   gulp serve
   

2. В браузере ведите http://localhost:3007/<yourDefaultAppNameTab>/ для просмотра домашней страницы приложения.

   

3. Чтобы просмотреть страницу конфигурации вкладки, перейдите в http://localhost:3007/<yourDefaultAppNameTab>/config.html.

   

Установите безопасный туннель к вашей вкладке

Чтобы установить безопасный туннель к своей вкладке, выйдите из локального хоста и введите следующую команду:

gulp ngrok-serve

Важно!

После того, как ваша вкладка загружена в Microsoft Teams через ngrok и успешно сохранена, вы можете просматривать ее в Teams до завершения сеанса туннеля. При перезапуске сеанса ngrok необходимо обновить приложение с новым URL-адресом.

Загрузите свое приложение в Teams

1. Перейдите в Teams и выберите Приложения .

2. Выберите Управление приложениями>Отправка приложения>Отправка пользовательского приложения.

3. Перейдите в каталог проекта, в папку ./package выберите папку zip пакета приложения и нажмите Открыть.

   

4. В диалоговом окне выберите Добавить. Вкладка загружена в Teams.

   Если добавить не отображается в диалоговом окне, удалите следующий код из манифеста zip-папки отправленного пакета приложения. Снова запакуйте папку и отправьте ее в Teams.

   "staticTabs": [],
   "bots": [],
   "connectors": [],
   "composeExtensions": [],
   

5. Следуйте указаниям по добавлению вкладки. Существует диалоговое окно настраиваемой конфигурации для настраиваемой вкладки.

6. Выберите Сохранить и вкладка будет добавлена на панель вкладок канала.

   

   Настраиваемая вкладка успешно создана и добавлена в Teams.

Создание настраиваемой вкладки с ASP.NET Core

1. В командной строке создайте новый каталог для вашего проекта вкладок.

2. Клонируйте образец репозитория в новый каталог, используя следующую команду, или загрузите исходный код и извлеките файлы:

   git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
   

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

1. Откройте Visual Studio и выберите Открыть проект или решение.

2. Перейдите в папку Microsoft-Teams-Samples>samples>tab-channel-group>razor-csharp и откройте channelGroupTab.sln.

3. В Visual Studio выберите F5 или нажмите кнопку Начать отладку в меню Отладка приложения, чтобы проверить, правильно ли загружено приложение. В браузере перейдите по следующим URL-адресам:

   • https://localhost:3978/
   • https://localhost:3978/privacy
   • https://localhost:3978/tou

Просмотр исходного кода

Startup.cs

Этот проект был создан на основе пустого шаблона веб-приложения ASP.NET Core 3.1 с установленным флажкомДополнительно * Настроить для HTTPS при установке. Службы MVC регистрируются с помощью метода ConfigureServices() инфраструктуры внедрения зависимостей Кроме того, пустой шаблон по умолчанию не позволяет обслуживать статическое содержимое, поэтому промежуточное ПО для статических файлов добавляется в метод Configure() с помощью следующего кода:

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc(options => options.EnableEndpointRouting = false);
}

public void Configure(IApplicationBuilder app)
{
    app.UseStaticFiles();
    app.UseMvc();
}

папка wwwroot

В ASP.NET Core корневая веб-папка — это место, где приложение ищет статические файлы.

Index.cshtml

ASP.NET Core рассматривает файлы с именем Index как стандартную или домашнюю страницу сайта. Когда URL-адрес браузера указывает на корень сайта, Index.cshtml отображается как домашняя страница вашего приложения.

Tab.cs

Этот файл C# содержит метод, который вызывается из Tab.cshtml во время настройки.

Папка AppManifest

Эта папка содержит следующие необходимые файлы пакета приложения:

• Полноцветный значок размером 192 x 192 пикселя.
• Прозрачный контурный значок размером 32 x 32 пикселя.
• Файл manifest.json, определяющий атрибуты приложения.

Эти файлы нужно заархивировать в пакете приложения для использования при загрузке вкладки в Teams. Когда пользователь решает добавить или обновить вкладку, Teams загружает указанный configurationUrl в манифесте объект, внедряет его в Iframe и отрисовывает на вкладке.

.csproj

В окне обозревателя решений Visual Studio щелкните правой кнопкой мыши проект и выберите Редактировать файл проекта. В конце файла вы видите следующий код, который создает и обновляет вашу zip-папку при сборке приложения:

<PropertyGroup>
    <PostBuildEvent>powershell.exe Compress-Archive -Path \"$(ProjectDir)AppManifest\*\" -DestinationPath \"$(TargetDir)tab.zip\" -Force</PostBuildEvent>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Include="AppManifest\icon-outline.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\icon-color.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\manifest.json">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
  </ItemGroup>

Установите безопасный туннель к вашей вкладке

В командной строке в корневом каталоге проекта выполните следующую команду, чтобы установить безопасный туннель на вкладку:

ngrok http 3978 --host-header=localhost

Убедитесь, что командная строка с ngrok запущена и запишите URL-адрес.

Обновите приложение

1. Откройте Visual Studio Обозреватель решений, перейдите в папку Pages>Shared и откройте файл _Layout.cshtml, а затем добавьте в раздел тегов следующее:

   <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
   <script src="https://res.cdn.office.net/teams-js/2.2.0/js/MicrosoftTeams.min.js" 
     integrity="sha384yBjE++eHeBPzIg+IKl9OHFqMbSdrzY2S/LW3qeitc5vqXewEYRWegByWzBN/chRh" 
     crossorigin="anonymous" >
   </script>
   

   Важно!

   Не копируйте и не вставляйте URL-адреса <script src="..."> с этой страницы, так как они не представляют собой последнюю версию. Чтобы получить последнюю версию TeamsJS, всегда перейдите к API JavaScript Microsoft Teams.

2. Вставьте вызов microsoftTeams.app.initialize(); в тег script.

3. В Visual Studio Обозреватель решений перейдите в папку Pages и откройте Файл Tab.cshtml.

   В Файле Tab.cshtml приложение предоставляет пользователю два варианта отображения вкладки с красным или серым значком. Кнопка "Выбрать серый" или "Выбрать красный" активирует saveGray() или saveRed() , соответственно, задает pages.config.setValidityState(true)и включает сохранить на странице конфигурации. Этот код сообщает Teams, что настройка требований завершена, и вы можете продолжить установку. Параметры pages.config.setConfig заданы. Наконец, saveEvent.notifySuccess() вызывается , чтобы указать, что URL-адрес содержимого успешно разрешен.

4. Обновите значения websiteUrl и contentUrl в каждой функции с помощью URL-адреса ngrok HTTPS на вкладке.

   Теперь ваш код должен включать следующее: y8rCgT2b с заменой на URL-адрес ngrok:

   
       let saveGray = () => {
           microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
               microsoftTeams.pages.config.setConfig({
                   websiteUrl: `https://y8rCgT2b.ngrok.io`,
                   contentUrl: `https://y8rCgT2b.ngrok.io/gray/`,
                   entityId: "grayIconTab",
                   suggestedDisplayName: "MyNewTab",
                   removeUrl: ""
               });
               saveEvent.notifySuccess();
           });
       }
   
       let saveRed = () => {
           microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
               microsoftTeams.pages.config.setConfig({
                   websiteUrl: `https://y8rCgT2b.ngrok.io`,
                   contentUrl: `https://y8rCgT2b.ngrok.io/red/`,
                   entityId: "redIconTab",
                   suggestedDisplayName: "MyNewTab",
                   removeUrl: ""
               });
               saveEvent.notifySuccess();
           });
       }
   

5. Сохраните обновленный Tab.cshtml.

Создайте и запустите приложение

1. В Visual Studio выберите F5 или выберитеНачать отладку из меню Отладка.

2. Убедитесь, что ngrok работает правильно, открыв браузер и открыв страницу содержимого по URL-адресу HTTPS ngrok, который был указан в окне командной команды.

   Совет

   Для выполнения действий, которые предоставляются в этой статье, необходимо запускать как приложение в Visual Studio, так и ngrok. Если вам нужно остановить запуск приложения в Visual Studio для работы с приложением, не отключайте ngrok. Он прослушивает и возобновляет маршрутизировать запрос приложения при перезапуске в Visual Studio. Если вам нужно перезапустить службу ngrok, она возвращает новый URL-адрес и вам нужно обновить приложение с новым URL-адресом.

Обновите пакет приложения с помощью портала разработчика

1. Перейдите в Teams. Если вы используете веб-версию, вы можете проверить код интерфейсной части с помощью средств для разработчиков.

2. Перейдите на Портал разработчика.

3. Откройте Приложения и выберите Импорт приложений.

4. Имя пакета приложения — tab.zip. Он доступен по следующему пути:

   /bin/Debug/netcoreapp3.1/tab.zip
   

5. Выберите tab.zip и откройте его на портале разработчика.

6. По умолчанию Идентификатор приложения создается и заполняется в разделе Основная информация.

7. Добавьте краткое и подробное описание для своего приложения в Описания.

8. В разделе Информация для разработчиков добавьте необходимые данные, а в разделеВеб-сайт (это должен быть действительный URL-адрес HTTPS) укажите URL-адрес HTTPS ngrok.

9. В URL-адресах приложений измените политику конфиденциальности на https://<yourngrokurl>/privacy и условия использования на https://<yourngrokurl>/tou и сохраните.

10. В разделе Функции приложения выберите Группирование и приложение канала. Обновите URL-адрес конфигурации с помощью https://<yourngrokurl>/tab и выберите для вкладки Область.

11. Нажмите кнопку Сохранить.

12. В разделе "Домены" домены из ваших вкладок должны содержать ваш URL-адрес ngrok без префикса HTTPS <yourngrokurl>.ngrok.io.

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

1. Выберите Предварительный просмотр в Teams на панели инструментов Портал разработчика. Портал разработчика сообщает, что пользовательское приложение успешно отправлено. Страница добавления отображается для вашего приложения в Teams.

2. Выберите Добавить в команду, чтобы настроить вкладку в команде. Настройте вкладку и выберите Сохранить. Теперь вкладка доступна в Teams.

   

   Настраиваемая вкладка успешно создана и добавлена в Teams.

Создание настраиваемой вкладки с ASP.NET Core MVC

1. В командной строке создайте новый каталог для вашего проекта вкладок.

2. Клонируйте образец репозитория в новый каталог, используя следующую команду, или загрузите исходный код и извлеките файлы:

   git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
   

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

1. Откройте Visual Studio и выберите Открыть проект или решение.

2. Перейдите в папку Microsoft-Teams-Samples>samples>tab-channel-group>mvc-csharp и откройте ChannelGroupTabMVC.sln.

3. В Visual Studio выберите F5 или нажмите кнопку Начать отладку в меню Отладка приложения, чтобы проверить, правильно ли загружено приложение. В браузере перейдите по следующим URL-адресам:

   • https://localhost:3978/
   • https://localhost:3978/privacy
   • https://localhost:3978/tou

Просмотр исходного кода

Startup.cs

Этот проект был создан на основе пустого шаблона веб-приложения ASP.NET Core 3.1 с установленным флажкомДополнительно — настроить для HTTPS при установке. Службы MVC регистрируются с помощью метода ConfigureServices() инфраструктуры внедрения зависимостей Кроме того, пустой шаблон по умолчанию не позволяет обслуживать статическое содержимое, поэтому промежуточное ПО для статических файлов добавляется в метод Configure() с помощью следующего кода:

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc(options => options.EnableEndpointRouting = false);
}

public void Configure(IApplicationBuilder app)
{
    app.UseStaticFiles();
    app.UseMvc();
}

папка wwwroot

В ASP.NET Core корневая веб-папка — это место, где приложение ищет статические файлы.

Папка AppManifest

Эта папка содержит следующие необходимые файлы пакета приложения:

• Полноцветный значок размером 192 x 192 пикселя.
• Прозрачный контурный значок размером 32 x 32 пикселя.
• Файл manifest.json, определяющий атрибуты приложения.

Эти файлы нужно заархивировать в пакете приложения для использования при загрузке вкладки в Teams.

.csproj

В окне обозревателя решений Visual Studio щелкните правой кнопкой мыши проект и выберите Редактировать файл проекта. В конце файла вы увидите следующий код, который создает и обновляет zip-папку при сборке приложения:

<PropertyGroup>
    <PostBuildEvent>powershell.exe Compress-Archive -Path \"$(ProjectDir)AppManifest\*\" -DestinationPath \"$(TargetDir)tab.zip\" -Force</PostBuildEvent>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Include="AppManifest\icon-outline.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\icon-color.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\manifest.json">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
  </ItemGroup>

Модели

ChannelGroup.cs представляет объект сообщения и методы, которые можно вызывать из контроллеров во время настройки.

Представления

Различные представления в ASP.NET Core MVC:

• Домашняя страница: ASP.NET Core рассматривает файлы с именем Index как домашнюю страницу сайта по умолчанию. Если URL-адрес браузера указывает на корень сайта, файл Index.cshtml может отображаться в качестве домашней страницы приложения.

• Общий. Разметка частичного представления _Layout.cshtml содержит общую структуру страницы приложения и общие визуальные элементы, которые также ссылались на библиотеку Teams.

Контроллеры

Контроллеры используют свойство ViewBag для динамической передачи значений представлениям.

Установите безопасный туннель к вашей вкладке

В командной строке в корневом каталоге проекта выполните следующую команду, чтобы установить безопасный туннель на вкладку:

ngrok http 3978 --host-header=localhost

Убедитесь, что командная строка с ngrok запущена и запишите URL-адрес.

Обновите приложение

1. Откройте Visual Studio Обозреватель решений, перейдите в папку Представления>общие, откройте файл _Layout.cshtml и добавьте в раздел теги следующее:

   <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
   <script src="https://res.cdn.office.net/teams-js/2.2.0/js/MicrosoftTeams.min.js" 
     integrity="sha384yBjE++eHeBPzIg+IKl9OHFqMbSdrzY2S/LW3qeitc5vqXewEYRWegByWzBN/chRh" 
     crossorigin="anonymous" >
   </script>
   

   Важно!

   Не копируйте и не вставляйте URL-адреса <script src="..."> с этой страницы, так как они не представляют собой последнюю версию. Чтобы получить последнюю версию SDK, всегда переходите к API JavaScript для Microsoft Teams.

2. Вставьте вызов microsoftTeams.app.initialize(); в тег script.

3. В Visual Studio Обозреватель решений перейдите в папку Tab и откройте файл Tab.cshtml.

   В Файле Tab.cshtml приложение предоставляет пользователю два варианта отображения вкладки с красным или серым значком. Кнопка "Выбрать серый" или "Выбрать красный" активирует saveGray() или saveRed() , соответственно, задает pages.config.setValidityState(true)и включает сохранить на странице конфигурации. Этот код сообщает Teams, что настройка требований завершена, и вы можете продолжить установку. Параметры pages.config.setConfig заданы. Наконец, saveEvent.notifySuccess() вызывается, чтобы указать, что URL-адрес содержимого успешно разрешен.

4. Обновите значения websiteUrl и contentUrl в каждой функции с помощью URL-адреса ngrok HTTPS на вкладке.

   Теперь ваш код должен включать следующее: y8rCgT2b с заменой на URL-адрес ngrok:

   
       let saveGray = () => {
           microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
               microsoftTeams.pages.config.setConfig({
                   websiteUrl: `https://y8rCgT2b.ngrok.io`,
                   contentUrl: `https://y8rCgT2b.ngrok.io/gray/`,
                   entityId: "grayIconTab",
                   suggestedDisplayName: "MyNewTab",
                   removeUrl:""
               });
               saveEvent.notifySuccess();
           });
       }
   
       let saveRed = () => {
           microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
               microsoftTeams.pages.config.setConfig({
                   websiteUrl: `https://y8rCgT2b.ngrok.io`,
                   contentUrl: `https://y8rCgT2b.ngrok.io/red/`,
                   entityId: "redIconTab",
                   suggestedDisplayName: "MyNewTab",
                   removeUrl:""
               });
               saveEvent.notifySuccess();
           });
       }
   

5. Обязательно сохраните обновленный Tab.cshtml.

Создайте и запустите приложение

1. В Visual Studio выберите F5 или выберитеНачать отладку из меню Отладка.

2. Убедитесь, что ngrok работает правильно, открыв браузер и открыв страницу содержимого по URL-адресу HTTPS ngrok, который был указан в окне командной команды.

   Совет

   Для выполнения действий, которые предоставляются в этой статье, необходимо запускать как приложение в Visual Studio, так и ngrok. Если вам нужно остановить запуск приложения в Visual Studio для работы с приложением, не отключайте ngrok. Он прослушивает и возобновляет маршрутизировать запрос приложения при перезапуске в Visual Studio. Если вам нужно перезапустить службу ngrok, она возвращает новый URL-адрес и вам нужно обновить приложение с новым URL-адресом.

Обновите пакет приложения с помощью портала разработчика

1. Перейдите в Teams. Если вы используете веб-версию, вы можете проверить код интерфейсной части с помощью средств для разработчиков.

2. Перейдите на Портал разработчика.

3. Откройте Приложения и выберите Импорт приложений.

4. Имя пакета приложения — tab.zip. Он доступен по следующему пути:

   /bin/Debug/netcoreapp3.1/tab.zip
   

5. Выберите tab.zip и откройте его на портале разработчиков.

6. По умолчанию Идентификатор приложения создается и заполняется в разделе Основная информация.

7. Добавьте краткое и подробное описание для своего приложения в Описания.

8. В разделе Информация для разработчиков добавьте необходимые данные, а в разделеВеб-сайт (это должен быть действительный URL-адрес HTTPS) укажите URL-адрес HTTPS ngrok.

9. В URL-адресах приложений измените политику конфиденциальности на https://<yourngrokurl>/privacy и условия использования на https://<yourngrokurl>/tou и сохраните.

10. В разделе Функции приложения выберите Группирование и приложение канала. Обновите URL-адрес конфигурации с помощью https://<yourngrokurl>/tab и выберите для вкладки Область.

11. Нажмите кнопку Сохранить.

12. В разделе "Домены" домены из ваших вкладок должны содержать ваш URL-адрес ngrok без префикса HTTPS <yourngrokurl>.ngrok.io.

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

1. Выберите Предварительный просмотр в Teams на панели инструментов Портал разработчика. Портал разработчика сообщает, что пользовательское приложение успешно отправлено. Страница добавления отображается для вашего приложения в Teams.

2. Выберите Добавить в команду, чтобы настроить вкладку в команде. Настройте вкладку и выберите Сохранить. Теперь вкладка доступна в Teams.

   

   Настраиваемая вкладка успешно создана и добавлена в Teams.

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

Примечание.

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

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

	Установка	Для использования...
Required
	Visual Studio версии 17.2.0, предварительная версия 2.1	Выберите Visual Studio Enterprise 2022 Preview (версия 17.2.0, предварительная версия 2.1).
	Microsoft Teams	Microsoft Teams для совместной работы со всеми пользователями с помощью приложений для чата, собраний и звонков — все в одном месте.
	Microsoft Edge (рекомендуется) или Google Chrome	Браузера со средствами разработчика.

Подготовка среды разработки

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

Установка набора средств Microsoft Teams

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

Последняя версия Visual Studio

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

Чтобы установить расширение Microsoft Teams Toolkit, выполните следующие действия.

1. Скачайте последнюю версию Visual Studio.

2. Откройте vs_enterprise__3bed52501a604464b1eff2ce580fd4eb.exe папку для скачивания.

3. Нажмите кнопку Продолжить на странице Visual Studio Installer, чтобы настроить установку.

   

4. Выберите ASP.NET и веб-разработка в разделе Рабочие нагрузки.

5. Выберите Средства разработки Microsoft Teams в разделе Сведения об установке.

6. Нажмите кнопку Установить.

   

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:

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

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

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

   

   Примечание.

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

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

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

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

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

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

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

   

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

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

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

Теперь у вас есть все инструменты и настроены учетные записи. Теперь давайте настроим среду разработки и приступим к сборке!

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

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

В этом руководстве описаны действия по созданию, запуску и развертыванию первого приложения Teams с помощью .NET/Blazor.

На этой странице вы узнаете:

1. Настройка нового проекта вкладки с помощью набора средств Teams
2. Сведения о структуре каталогов приложения

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

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

1. Страница создания проекта . Вы можете выбрать тип проекта.
2. Настройка страницы нового проекта. Вы можете ввести сведения о проекте.
3. Создание страницы приложения Teams. Вы можете выбрать возможности приложения Teams.

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

1. Откройте последнюю версию Visual Studio.

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

   

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

3. Выберите сведения о проекте.

   Выберите тип проекта:

   1. Выполните поиск По запросу Microsoft Teams из раскрывающегося списка шаблонов.

   2. Выберите Приложение Microsoft Teams в качестве шаблона.

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

      

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

4. Настройте сведения о новом проекте.

   Выберите следующую конфигурацию проекта:

   1. Введите подходящее имя для проекта.

      Примечание.

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

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

   3. При необходимости введите другое имя решения.

   4. При необходимости установите флажок сохранить проект и решение в той же папке. В этом руководстве этот параметр не требуется.

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

      

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

5. Выберите Компонент приложения Teams.

   Выберите функцию приложения:

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

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

   

Приложение вкладки 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 проверке подлинности.
Pages/Tab.razor	Манифест приложения для публикации на портале разработчика для Teams хранится в Properties/manifest.json.
TeamsFx.cs и JS/src/index.js	Содержимое используется для инициализации взаимодействия с узлом Teams.

Вы можете добавить функции серверной части, добавив в приложение другие контроллеры ASP.NET Core.

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

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

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

1. Выберите Project>Teams Toolkit>Prepare Teams App Dependencies (Подготовка зависимостей приложений Teams).

   

2. Выберите учетную запись Microsoft 365 или Добавить учетную запись для входа.

   

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

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

   При выборе F5 набор средств Teams:

   1. Регистрирует приложение с помощью Microsoft Entra ID.
   2. Регистрирует приложение для отправки в Teams.
   3. Запускает серверную часть приложения, запущенную локально.
   4. Запускает интерфейс приложения, размещенного локально.
   5. Запускает Teams в веб-браузере с помощью команды, чтобы указать Teams отправить пользовательское приложение (URL-адрес регистрируется в манифесте приложения).

4. Установите самозаверяющий SSL-сертификат для локальной отладки, если требуется.

   

   Teams загружается в веб-браузере.

5. Выберите Добавить в команду при появлении запроса на установку приложения в Teams.

   

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

   

6. Перейдите по странице, чтобы просмотреть сведения о пользователе.

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

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

   

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

   

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

   

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

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

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

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

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

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

1. Подготовка приложения вкладки в облаке. Вы можете подготовить приложение вкладки в облаке.

2. Развертывание приложения вкладки в облаке. Приложение вкладок можно развернуть в облаке.

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

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

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

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

   

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

   1. Выберите имя подписки в раскрывающемся списке Имя подписки .
   2. Выберите группу ресурсов в раскрывающемся списке Группа ресурсов или нажмите кнопку Создать , чтобы добавить группу ресурсов, созданную для приложения.
   3. Выберите регион, если создана новая группа ресурсов.
   4. Выберите Подготовка.

   

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

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

   

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

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

   

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

   

6. Войдите в учетную запись портал Azure в запросе на вход.

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

   

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

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

1. Выберите Project Teams ToolkitDeploy to the Cloud (Развертываниенабора средств>Project> Teams в облаке).

   

2. Нажмите OK.

   

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

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

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

   

2. Выберите Добавить при появлении запроса на установку приложения в Teams.

   

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

   

3. Перейдите по странице, чтобы просмотреть сведения о пользователе.

   

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

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

   

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

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

   

Поздравляю

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

Перенос настраиваемой вкладки на статическую вкладку

Примечание.

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

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

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

1. Переместите логику конфигурации из configurationUrl пространства кода в contentUrl пространство кода.

2. Добавьте свойство в staticTabsманифест приложения с scopes параметрами и context . Ниже приведен пример манифеста приложения, в котором определена статическая вкладка, которая работает во всех областях и контекстах в Teams.

   "staticTabs": [ 
     { 
     "entityId": "homeTab", 
     "scopes": [ 
       "personal",  
       "groupChat",
       "team"
      ], 
     "context": [ 
       "personalTab",
       "channelTab", 
       "privateChatTab", 
       "meetingChatTab", 
       "meetingDetailsTab", 
       "meetingSidePanel", 
       "meetingStage" 
      ], 
      "name": "Contoso", 
      "contentUrl": "https://contoso.com/content (displayed in Teams canvas)", 
      "websiteUrl": "https://contoso.com/content (displayed in web browser)" 
     }
   ],
   

   Дополнительные сведения см. на странице конфигурации и статической вкладке.

Если приложение поддерживает настраиваемую вкладку, необходимо сохранить configurableTab свойство в манифесте приложения, чтобы обеспечить обратную совместимость ранее закрепленных вкладок. Так как теперь можно закрепить только статические вкладки, важно, чтобы предыдущие настраиваемые вкладки продолжали поддерживаться.

Следующий этап

Создать страницу контента

Дополнительные ресурсы

• Создание вкладок для Teams
• Создание личной вкладки
• Портал разработчика Teams
• Добавление страницы SharePoint в виде вкладки в Teams
• Схема манифеста для Teams