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

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

Вы можете создать личную вкладку с помощью Node.js и генератора Yeoman, ASP.NET Core или ASP.NET Core MVC.

Создание настраиваемой личной вкладки Node.js и генератора Yeoman

Примечание

В этой статье описаны действия, описанные в создании первого Microsoft Teams приложения Wiki, найденного в репозитории Microsoft OfficeDev GitHub.

Вы можете создать настраиваемую личную вкладку с помощью Teams Yeoman. Приложение также загружается в Teams.

Необходимые условия для Teams приложений

Необходимо иметь представление о следующих предпосылках:

  • Необходимо иметь клиента Office 365 и команду с включенной возможностью загрузки настраиваемых приложений. Дополнительные сведения см. в Office 365 клиента.

    Примечание

    Если у вас нет Office 365 учетной записи, вы можете зарегистрироваться для бесплатной подписки через программу Office 365 разработчика. Подписка остается активной до тех пор, пока вы используете ее для текущей разработки. См. добро пожаловать в программу Office 365 разработчика.

Кроме того, для этого проекта необходимо установить в среде разработки следующие условия:

  • Любой редактор текста или IDE. Вы можете установить и использовать Visual Studio Code бесплатно.

  • Node.js/npm. Используйте последнюю версию LTS. Узел диспетчер пакетов (npm) устанавливается в системе с установкой Node.js.

  • После успешной установки Node.js установите пакеты Yeoman и gulp-cli, введите следующую команду в командной подсказке:

    npm install yo gulp-cli --global
    
  • Установите генератор Microsoft Teams приложений, введите следующую команду в командной подсказке:

    npm install generator-teams --global
    

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

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

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

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

    yo teams
    
  3. Далее укажи ряд значений, используемых в файле manifest.json приложения:

    Снимок экрана открытия генератора

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

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

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

    В настоящее время вы в каталоге проектов. Выберите Ввод.

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

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

    Ваше (компания) имя? (максимум 32 символа)

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

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

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

    Быстрый строительный лес? (Y/n)

    По умолчанию — да; введите n, чтобы ввести свой microsoft Partner ID.

    Введите свой microsoft Partner Id, если он у вас есть? (Оставьте пустым, чтобы пропустить)

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

    Что нужно добавить в проект?

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

    URL-адрес, на котором будет организовано это решение?

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

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

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

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

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

    Хотите включить тестовые рамки и начальные тесты? (y/N)

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

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

    Не включать поддержку ESLint. По умолчанию нет, введите n.

    Хотите использовать приложения Azure Аналитика для телеметрии? (y/N)

    Не включать приложения Azure Аналитика. По умолчанию нет; введите n.

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

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

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

    Используйте клавиши стрелки для выбора Личного (статического).

    Требуется ли поддержка единого входа Azure AD для этой вкладки?

    Не включай поддержку для вкладки Azure AD с одним входом. По умолчанию — да, введите n.

    Важно!

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

    Например: DefaultTabName: MyTab > /MyTabTab/

Добавление личной вкладки

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

  1. В редакторе кода создайте новый файл HTMLpersonal.html и добавьте следующую разметку:

    <!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>
    
  2. Сохраните personal.html в веб-папке приложения в следующем расположении:

    ./src/app/web/<yourDefaultTabNameTab>/personal.html
    
  3. Откройте manifest.json из следующего расположения в редакторе кода:

    ./src/manifest/manifest.json/
    
  4. Добавьте следующее в пустой массив staticTabs () и staticTabs":[] добавьте следующий объект JSON:

    {
        "entityId": "personalTab",
        "name": "Personal Tab ",
        "contentUrl": "https://{{HOSTNAME}}/<yourDefaultTabNameTab>/personal.html",
        "websiteUrl": "https://{{HOSTNAME}}",
        "scopes": ["personal"]
    }
    
  5. Обновите компонент пути contentURL yourDefaultTabNameTab с фактическим именем вкладки.

  6. Сохраните обновленный файл manifest.json.

  7. Чтобы предоставить страницу контента в IFrame, откройте Tab.ts в редакторе кода следующим образом:

    ./src/app/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.ts
    
  8. Добавьте в список декораторов IFrame следующее:

     @PreventIframe("/<yourDefaultAppName>TabNameTab>/personal.html")
    
  9. Сохраните обновленный файл Tab.ts. Код вкладки завершен.

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

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

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

Чтобы проверить вкладку в Teams, необходимо иметь пакет Teams. Это папка zip, которая содержит следующие необходимые файлы:

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

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

gulp manifest

Сборка приложения

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

gulp build

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

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

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

    Снимок экрана домашней страницы

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

    Снимок экрана личной вкладки

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

Microsoft Teams является облачным продуктом и требует, чтобы содержимое вкладки было доступно в облаке с помощью конечных точек HTTPS. Teams не разрешает локальный хостинг. Опубликуйте вкладку на общедоступный URL-адрес или используйте прокси-сервер, который предоставляет локальный порт URL-адресу, относящаяся к Интернету.

Чтобы проверить расширение вкладки, используйте ngrok,встроенный в это приложение. Ngrok — это средство обратного прокси-программного обеспечения. Ngrok создает туннель для общедоступных конечных точек HTTPS локального веб-сервера. Веб-точки сервера доступны во время текущего сеанса на компьютере. Когда компьютер выключен или заснул, служба перестает быть доступной.

В командной подсказке выйдите из localhost и введите следующую команду:

gulp ngrok-serve

Важно!

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

Upload приложение для Teams

Отправка приложения в Teams

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

  2. В левом нижнем углу выберите Приложения.

  3. В левом нижнем углу выберите Upload настраиваемого приложения.

  4. Перейдите в каталог проекта, просмотрите папку ./package, выберите папку zip и откройте.

    Добавление личной вкладки

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

    Загруженная личная вкладка

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

В панели навигации слева слева в Teams выберите эллипсы ●●● и выберите приложение.

Reorder static personal tabs

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

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

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

Добавление registerOnFocused API для вкладок или личных приложений

API registerOnFocused SDK позволяет использовать клавиатуру на Teams. Вы можете вернуться в личное приложение и сохранить фокус на вкладке или личном приложении с помощью ключей Ctrl, Shift и F6. Например, вы можете отойти от личного приложения для поиска чего-либо, а затем вернуться в личное приложение или использовать Ctrl+F6, чтобы обойти необходимые места.

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

export function registerFocusEnterHandler(handler: (navigateForward: boolean) => void): 
void {
  HandlersPrivate.focusEnterHandler = handler;
  handler && sendMessageToParent('registerHandler', ['focusEnter']);
}
function handleFocusEnter(navigateForward: boolean): void
 {
  if (HandlersPrivate.focusEnterHandler)
   {
    HandlersPrivate.focusEnterHandler(navigateForward);
  }
}

После запуска обработка с помощью ключевого слова обработник вызывается с функцией вызова, которая принимает параметр под focusEnter registerFocusEnterHandler focusEnterHandler названием navigateForward . Значение определяет navigateForward тип событий. Вызывается focusEnterHandler только Ctrl+F6, а не клавиша вкладки.
Клавиши, полезные для перемещения событий в Teams, являются следующими:

  • Клавиши forward event -> Ctrl+F6
  • Назад события -> клавиши Ctrl+Shift+F6
case 'focusEnter':     
this.registerFocusEnterHandler((navigateForward: boolean = true) => {
this.sdkWindowMessageHandler.sendRequestMessage(this.frame, this.constants.SdkMessageTypes.focusEnter, [navigateForward]);
// Set focus on iframe or webview
if (this.frame && this.frame.sourceElem) {
  this.frame.sourceElem.focus();
}
return true;
});
}

// callback function to be passed to the handler
private focusEnterHandler: (navigateForward: boolean) => boolean;

// function that gets invoked after handler is registered.
private registerFocusEnterHandler(focusEnterHandler: (navigateForward: boolean) => boolean): void {
this.focusEnterHandler = focusEnterHandler;
this.layoutService.registerAppFocusEnterCallback(this.focusEnterHandler);
}

Личное приложение

В примере показаны варианты добавления API registerOnFocussed

Личное приложение — событие Forward

В примере показаны варианты добавления переадновки API registerOnFocussed

Личное приложение — событие назад

В примере показаны параметры добавления обратного перемещения registerOnFocussed API

Tab

В примере показаны варианты добавления API registerOnFocussed для вкладки

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

См. также