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

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

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

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

Примечание

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

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

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

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

  • Необходимо иметь клиента 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 приложения:

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

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

    Это имя проекта. Вы можете принять предложенное имя, выбрав ключ Enter.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Используйте клавиши со стрелками, чтобы выбрать вкладку Configurable.

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

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

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

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

    Хотите, чтобы эта вкладка была доступна в SharePoint Online? (Y/n)

    Введите n.

    Важно!

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

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

  4. В Visual Studio Code редакторе кода перейдите в каталог проекта и откройте следующий файл:

    ./src/app/scripts/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.tsx
    
  5. Найдите метод и добавьте следующий тег и содержимое в render() <div> верхнюю часть <PanelBody> кода контейнера:

        <PanelBody>
            <div style={styles.section}>
                Hello World! Yo Teams rocks!
            </div>
        </PanelBody>
    
  6. Обязательно сохраните обновленный файл.

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

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

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

Чтобы проверить вкладку в 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>/ следующем изображении:

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

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

    Скриншот страницы конфигурации

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

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

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

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

gulp ngrok-serve

Важно!

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

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

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

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

  2. На левой стороне группы выберите эллипсы ●●● рядом с командой, которую вы используете для тестирования вкладки, и выберите команду Manage.

  3. В главной области выберите Приложения из панели вкладок и Upload настраиваемого приложения, расположенного в нижнем правом углу страницы.

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

    Добавлена вкладка Канала

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

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

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

  8. Выберите Сохранить и вкладка добавляется в вкладку канала.

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

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

См. также