Создание вкладки канала или вкладки группы

  • Статья

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

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

Примечание.

В этом разделе представлена версия 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 файлов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Это поле не является обязательным и заполняется только в том случае, если вы уже являетесь участником 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 и выберите ПриложенияMicrosoft Teams Store .

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

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

    Снимок экрана: отправка вкладки канала.

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

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

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

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

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

    Снимок экрана: вкладка отправленного канала в Teams.

    Вкладка канала или группы успешно создана и добавлена в 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.

    Вкладка канала или группы успешно создана и добавлена в Teams.

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

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

Примечание.

Набор средств 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 для разработки приложений Teams с помощью Blazor Server в .NET.

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

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

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

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

    Снимок экрана: Visual Studio Installer с параметрами продолжения, выделенными красным цветом.

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

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

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

    Снимок экрана: предварительная версия Visual Studio Enterprise с параметром Asp.NET, веб-разработка и средства разработки Microsoft Teams в разделе сведения об установке и установке выделены красным цветом.

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

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

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

Включить параметр отправки пользовательского приложения

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

У вас уже есть клиент и есть ли у вас доступ администратора? Давайте проверка, если вы действительно делаете!

Проверьте, можно ли отправить пользовательское приложение в Teams:

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

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

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

    Снимок экрана: параметр для отправки пользовательского приложения в Teams.

    Примечание.

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

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

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

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

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

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

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

    Снимок экрана: программа разработчика Microsoft 365 с подписками разработчика Microsoft 365 для приложения blazor.

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

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

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

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

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

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

Снимок экрана: приложение Blazor с окончательными выходными данными приложения вкладки после успешного завершения пошагового руководства.

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

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

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

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

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

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

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

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

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

    Снимок экрана: Visual Studio с параметром

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

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

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

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

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

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

      Снимок экрана: создание проекта с выделенным красным цветом параметром

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

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

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

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

      Примечание.

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

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

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

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

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

      Снимок экрана: экран для настройки нового проекта в Visual Studio.

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

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

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

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

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

    Снимок экрана: страница для создания нового приложения вкладки Teams.

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

Снимок экрана: советы по началу работы при создании приложения в Visual Studio.

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

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

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

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

Снимок экрана: обозреватель решений, в котором отображаются компоненты для создания простого личного приложения в 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).

    Снимок экрана: выбор параметра для подготовки зависимостей приложения Teams для проекта в Visual Studio.

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

    Снимок экрана: выбор учетной записи Microsoft 365.

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

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

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

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

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

    Снимок экрана: параметр

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

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

    Снимок экрана: параметр добавления приложения blazor в команду.

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

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

  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) в облаке.

    Снимок экрана: выбор подготовки в параметрах облака для проекта в Visual Studio.

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

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

    Снимок экрана: диалоговое окно подготовки для выбора подписки, учетной записи Azure и группы ресурсов.

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

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

    Снимок экрана: параметр для выбора подготовки в предупреждении о появлении набора средств Teams.

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

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

    Снимок экрана: приложение успешно подготовлено в облаке.

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

    Снимок экрана: выбор варианта просмотра подготовленных ресурсов в диалоговом окне сведений о наборе средств Teams.

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

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

    Снимок экрана: приложение Blazor с ресурсами, подготовленными в портал Azure.

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

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

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

    Снимок экрана: выбор варианта развертывания в облаке для проекта в Visual Studio.

  2. Нажмите ОК.

    Снимок экрана: параметр ОК для выбора момента успешного развертывания приложения Blazor в облаке.

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

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

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

    Снимок экрана: выбор предварительного просмотра в параметрах Teams для проекта в Visual Studio.

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

    Снимок экрана: параметр добавления приложения Blazor в Teams.

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

    Снимок экрана: приложение работает в среде Azure.

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

    Снимок экрана: параметр авторизации для фото профиля пользователя на вкладке

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

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

    Снимок экрана: параметр принять запрошенные разрешения.

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

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

    Снимок экрана: личная вкладка с основными сведениями.

Поздравляю

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

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

Примечание.

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

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

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

  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 свойство в манифесте приложения, чтобы обеспечить обратную совместимость ранее закрепленных вкладок. Так как теперь можно закрепить только статические вкладки, важно, чтобы предыдущие настраиваемые вкладки продолжали поддерживаться.

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

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

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