Создание личной вкладки

Статья
06/12/2023

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

Важно!

Сведения о том, как создать вкладку с помощью набора средств Teams, см. в статье Создание первого приложения вкладки с помощью JavaScript.
Мы представили расширение "Обзор набора средств Teams" в Visual Studio Code. Эта версия предоставляет множество новых возможностей для разработки приложений. Мы рекомендуем использовать Teams Toolkit версии 5 для создания приложения Teams.

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

Примечание.

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

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

В командной строке установите пакетыYeoman и gulp-cli, введя следующую команду после установки Node.js:
```
npm install yo gulp-cli --global
```
В командной строке установите генератор приложений Microsoft Teams, введя следующую команду:
```
npm install generator-teams --global
```

Ниже приведены этапы создания личной вкладки:

Создайте свое приложение с личной вкладкой
Добавьте страницу содержимого на личную вкладку
Создание пакета приложения
Создайте и запустите свое приложение
Установите безопасный туннель к вашей личной вкладке
Загрузите приложение в Teams

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

В командной строке создайте новый каталог для личной вкладки.
Введите следующую команду в новом каталоге, чтобы запустить генератор приложений Microsoft Teams:
```
yo teams
```
Укажите значения для ряда вопросов, которые генератор приложений Microsoft Teams предложит обновить файл 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.
Примечание.

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

Добавьте страницу содержимое на личную вкладку

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

Создайте новый файл personal.html в Visual Studio Code со следующей разметкой:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>
            <!-- Todo: add your a title here -->
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- inject:css -->
        <!-- endinject -->
    </head>
        <body>
            <h1>Personal Tab</h1>
            <p><img src="/assets/icon.png"></p>
            <p>This is your personal tab!</p>
        </body>
</html>

Сохраните personal.html в общедоступной папке вашего приложения по следующему адресу:
```
./src/public/<yourDefaultTabNameTab>/personal.html
```
Откройте manifest.json из следующего места в Visual Studio Code:
```
 ./src/manifest/manifest.json
```
Добавьте следующее в пустой массив staticTabs (staticTabs":[]) и добавьте следующий объект JSON:
```
{
    "entityId": "personalTab",
    "name": "Personal Tab ",
    "contentUrl": "https://{{PUBLIC_HOSTNAME}}/<yourDefaultTabNameTab>/personal.html",
    "websiteUrl": "https://{{PUBLIC_HOSTNAME}}",
    "scopes": ["personal"]
}
```
Важно!

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

Например: DefaultTabName — MyTab а затем /MyTabTab/
Обновите компонент пути contentURLyourDefaultTabNameTab, указав фактическое имя вкладки.
Сохраните обновленный файл manifest.json.
Откройте Tab.ts в Visual Studio Code из следующего пути, чтобы указать страницу содержимого в iFrame:
```
./src/server/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.ts
```
Добавьте в список декораторов iFrame следующее:
```
 @PreventIframe("/<yourDefaultTabName Tab>/personal.html")
```
Сохраните обновленный файл. Код вкладки завершен.

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

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

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

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

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

gulp build

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

В командной строке введите следующую команду, чтобы запустить локальный веб-сервер:
```
gulp serve
```
В браузере ведите http://localhost:3007/<yourDefaultAppNameTab>/ для просмотра домашней страницы приложения.
Просмотрите http://localhost:3007/<yourDefaultAppNameTab>/personal.html, чтобы найти личную вкладку.

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

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

gulp ngrok-serve

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

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

Перейдите в Teams и выберите Приложения .
Выберите Управление приложениями>Отправка приложения>Отправка пользовательского приложения.
Перейдите в каталог проекта, в папку ./package выберите папку zip и нажмите Открыть.
В диалоговом окне выберите Добавить. Вкладка загружена в Teams.
В левой области Teams выберите многоточие ●●● и выберите загруженное приложение, чтобы просмотреть личную вкладку.

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

Создайте личную вкладку с помощью ASP.NET Core

В командной строке создайте новый каталог для вашего проекта вкладок.
Клонируйте образец репозитория в новый каталог, используя следующую команду, или загрузите исходный код и извлеките файлы:
```
git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
```

Ниже приведены этапы создания личной вкладки:

Создайте свое приложение с личной вкладкой
Обновите и запустите приложение
Установите безопасный туннель к вкладке
Обновите пакет приложения с помощью портала разработчика
Просмотрите приложение в Teams

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

Откройте Visual Studio и выберите Открыть проект или решение.
Перейдите в папкуMicrosoft-Teams-Samples>samples>tab-personal>razor-csharp и откройте PersonalTab.sln
В Visual Studio выберите F5 или нажмите кнопку Начать отладку в меню Отладка приложения, чтобы проверить, правильно ли загружено приложение. В браузере перейдите по следующим URL-адресам:
- <http://localhost:3978/>
- <http://localhost:3978/personalTab>
- <http://localhost:3978/privacy>
- <http://localhost:3978/tou>

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

Startup.cs

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

public void ConfigureServices(IServiceCollection services)
  {
      services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
  }
public void Configure(IApplicationBuilder app)
  {
    app.UseStaticFiles();
    app.UseMvc();
  }

папка wwwroot

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

Index.cshtml

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

Папка AppManifest

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

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

Эти файлы должны быть заархивированы в пакете приложения для использования при загрузке вкладки в Teams. Teams загружает указанный contentUrl в манифесте объект, внедряет его в <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>

Обновите и запустите приложение

Откройте обозреватель решений Visual Studio, перейдите в папку Страницы>Общие, откройте _Layout.cshtml и добавьте следующее в раздел тегов <head>:

<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.0.0/js/MicrosoftTeams.min.js" integrity="sha384-QtTBFeFlfRDZBfwHJHYQp7MdLJ2C3sfAEB1Qpy+YblvjavBye+q87TELpTnvlXw4" crossorigin="anonymous"></script>

В Visual Studio Обозреватель решений откройте файл PersonalTab.cshtml из папки Pages и добавьте microsoftTeams.app.initialize() в <script> теги.
Нажмите кнопку Сохранить.
В Visual Studio выберите F5 или выберитеНачать отладку из меню Отладка вашего приложения.

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

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

ngrok http 3978 --host-header=localhost

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

Перейдите на Портал разработчика.
Откройте Приложения и выберите Импорт приложений.
Имя файла пакета приложения — и tab.zip доступно по /bin/Debug/netcoreapp3.1/tab.zip пути.
Выберите tab.zip и откройте его на портале разработчика.
По умолчанию Идентификатор приложения создается и заполняется в разделе Основная информация.
Добавьте краткое и подробное описание для своего приложения в Описания.
В разделе Информация для разработчиков добавьте необходимые данные, а в разделеВеб-сайт (это должен быть действительный URL-адрес HTTPS) укажите URL-адрес HTTPS ngrok.
В разделе URL-адреса приложений обновите политику конфиденциальности до https://<yourngrokurl>/privacy и условия использования и нажмите кнопкуhttps://<yourngrokurl>/tou Сохранить.
В разделе Функции приложений выберите Личное приложение>Создание первой вкладки личного приложения , введите имя и обновите URL-адрес содержимого на https://<yourngrokurl>/personalTab. Оставьте поле URL-адрес веб-сайта пустым, выберите Контекст как personalTab в раскрывающемся списке и выберите Подтвердить.
Нажмите кнопку Сохранить.
В разделе "Домены" домены из ваших вкладок должны содержать ваш URL-адрес ngrok без префикса HTTPS <yourngrokurl>.ngrok.io.

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

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

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

Создайте личную вкладку с помощью ASP.NET Core MVC

В командной строке создайте новый каталог для вашего проекта вкладок.
Клонируйте образец репозитория в новый каталог, используя следующую команду, или загрузите исходный код и извлеките файлы:
```
git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
```

Ниже приведены этапы создания личной вкладки:

Создайте свое приложение с личной вкладкой
Обновите и запустите приложение
Установите безопасный туннель к вашей вкладке
Обновите пакет приложения с помощью портала разработчика
Просмотрите приложение в Teams

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

Откройте Visual Studio и выберите Открыть проект или решение.
Перейдите на вкладкуMicrosoft-Teams-Samples>samples>tab-personal>mvc-csharp и откройте PersonalTabMVC.sln в Visual Studio.
В Visual Studio выберите F5 или нажмите кнопку Начать отладку в меню Отладка приложения, чтобы проверить, правильно ли загружено приложение. В браузере перейдите по следующим URL-адресам:
- <http://localhost:3978>
- <http://localhost:3978/personalTab>
- <http://localhost:3978/privacy>
- <http://localhost:3978/tou>

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

Startup.cs

public void ConfigureServices(IServiceCollection services)
  {
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
  }
public void Configure(IApplicationBuilder app)
  {
    app.UseStaticFiles();
    app.UseMvc();
  }

папка wwwroot

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

Папка AppManifest

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

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

Эти файлы должны быть заархивированы в пакете приложения для использования при загрузке вкладки в Teams. Teams загружает указанный contentUrl в манифесте объект, внедряет его в 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>

Модели

PersonalTab.cs представляет объект сообщения и методы, которые вызываются изPersonalTabController, когда пользователь выбирает кнопку в представлении PersonalTab View.

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

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

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

Контроллеры

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

Обновите и запустите приложение

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

<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.0.0/js/MicrosoftTeams.min.js" integrity="sha384-QtTBFeFlfRDZBfwHJHYQp7MdLJ2C3sfAEB1Qpy+YblvjavBye+q87TELpTnvlXw4" crossorigin="anonymous"></script>

В Visual Studio Обозреватель решений откройте файл PersonalTab.cshtml из папки Views>PersonalTab и добавьте microsoftTeams.app.initialize() внутри <script> тегов.
Нажмите кнопку Сохранить.
В Visual Studio выберите F5 или выберитеНачать отладку из меню Отладка вашего приложения.

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

ngrok http 3978 --host-header=localhost

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

Перейдите на Портал разработчика.
Откройте Приложения и выберите Импорт приложений.
Имя пакета приложения — tab.zip. Он доступен по следующему пути:
```
/bin/Debug/netcoreapp3.1/tab.zip
```
Выберите tab.zip и откройте его на портале разработчиков.
По умолчанию Идентификатор приложения создается и заполняется в разделе Основная информация.
Добавьте краткое и подробное описание для своего приложения в Описания.
В поле Сведения для разработчика добавьте необходимые сведения, а в поле Веб-сайт (должен быть допустимый URL-адрес HTTPS) укажите URL-адрес HTTPS ngrok.
В разделе URL-адреса приложений обновите политику конфиденциальности до https://<yourngrokurl>/privacy и условия использования и нажмите кнопкуhttps://<yourngrokurl>/tou Сохранить.
В разделе Функции приложений выберите Личное приложение>Создание первой вкладки личного приложения , введите имя и обновите URL-адрес содержимого на https://<yourngrokurl>/personalTab. Оставьте поле URL-адрес веб-сайта пустым, выберите Контекст как personalTab в раскрывающемся списке и выберите Подтвердить.
Нажмите кнопку Сохранить.
В разделе "Домены" домены из ваших вкладок должны содержать ваш URL-адрес ngrok без префикса HTTPS<yourngrokurl>.ngrok.io.

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

Выберите Предварительный просмотр в Teams на панели инструментов Портал разработчика. Портал разработчика сообщает, что пользовательское приложение успешно отправлено. Страница добавления отображается для вашего приложения в Teams.
Выберите Добавить чтобы загрузить вкладку в Teams. Теперь вкладка доступна в 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
Командная строка

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

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

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

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

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

npm install -g @microsoft/teamsfx-cli

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Примечание.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выберите тип проекта:
1. Выполните поиск По запросу Microsoft Teams из раскрывающегося списка шаблонов.
2. Выберите Приложение Microsoft Teams в качестве шаблона.
3. Нажмите кнопку Далее.
  
  Откроется страница Настройка нового проекта .
Настройте сведения о новом проекте.

Выберите следующую конфигурацию проекта:
1. Введите подходящее имя для проекта.
  
  Примечание.
  
  Можно отметить, что имя проекта, которое вы вводите, автоматически заполняется в качестве имени решения . При необходимости можно изменить имя решения, не влияя на имя проекта.
2. Выберите путь к папке, в которой нужно создать рабочую область проекта.
3. При необходимости введите другое имя решения.
4. При необходимости установите флажок сохранить проект и решение в той же папке. В этом руководстве этот параметр не требуется.
5. Нажмите Создать.
  
  Откроется страница Создание приложения Teams .
Выберите Компонент приложения 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 создайте проект вкладки.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поздравляю

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

Изменение порядка статических личных вкладок

Начиная с версии манифеста 1.7, разработчики могут переупорядочивать все вкладки в своем личном приложении. Вы можете переместить вкладку чата бота , которая по умолчанию всегда занимает первую позицию, в любое место в заголовке вкладки личного приложения. Объявлены два зарезервированных entityId ключевых слова вкладки, беседы и сведения.

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


{
   "staticTabs":[
      {
         
      },
      {
         "entityId":"conversations",
         "scopes":[
            "personal"
         ]
      }
   ]
}

Расширение статических вкладок для группового чата, каналов и собраний

Примечание.

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

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

Чтобы расширить статические вкладки для группового чата, каналов и собраний, обновите манифестscopes приложения параметрами и context в свойстве staticTabs .

Ниже приведен пример манифеста приложения, в котором определена статическая вкладка, которая работает во всех областях и контекстах в 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)" 
  }
],

Если контекст не определен в манифесте приложения, по умолчанию Teams рассмотрите следующий контекст:

"context": [ 
   "personalTab",
   "channelTab",
   "privateChatTab", 
   "meetingChatTab", 
   "meetingDetailsTab", 
   "meetingStage" 
]

Настройка статической вкладки в чатах или собраниях

Чтобы настроить интерфейс статической вкладки в чатах, каналах или собраниях, можно использовать setConfig API на вкладке contentUrl для обновления и websiteUrl. Ниже приведен пример:

pages.config.setConfig({ 
  "contentUrl": "https://wwww.contoso.com/teamsapp/thread/" + context.threadId,
   ...}

Только contentUrl изменения и websiteUrl поддерживаются для setConfig, другие свойства не могут быть изменены для статических вкладок.

Пример кода

Название примера	Описание	.NET	Node.js	Манифест
Вкладка личная	Пример приложения, в котором демонстрируется пользовательская личная вкладка с ASP.NET ядром для группового чата, каналов и собраний.	Просмотр	Н/Д	Просмотр

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

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

Создание личной вкладки

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

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

Добавьте страницу содержимое на личную вкладку

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

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

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

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

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

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

Создайте личную вкладку с помощью ASP.NET Core

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

Startup.cs

папка wwwroot

Index.cshtml

Папка AppManifest

.csproj

Обновите и запустите приложение

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

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

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

Создайте личную вкладку с помощью ASP.NET Core MVC

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

Startup.cs

папка wwwroot

Папка AppManifest

.csproj

Модели

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

Контроллеры

Обновите и запустите приложение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поздравляю

Изменение порядка статических личных вкладок

Расширение статических вкладок для группового чата, каналов и собраний

Настройка статической вкладки в чатах или собраниях

Пример кода

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

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

Обратная связь

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