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

Примечание

Этот quickstart следует шагам, описанным в приложении Build Your First Microsoft Teams, найденном в репозитории Microsoft OfficeDev GitHub.

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

Предварительные условия

  • Для завершения этого quickstart вам потребуется 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
    

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

  • Откройте командную подсказку и создайте новый каталог для проекта вкладки.

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

    yo teams
    
  • Далее вы предоставите ряд значений, которые будут использоваться в файле manifest.jsприложения:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Выберите не включать azure Application Insights. По умолчанию нет; введите n.

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

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

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

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

Важно!

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

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

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

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

  • В редакторе кода создайте новый HTML-файлpersonal.htm l и добавьте следующую разметку:

    <!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/app/web/<yourDefaultTabNameTab>/personal.html
    
  • Откройте manifest.jsв редакторе кода:

    ./src/manifest/manifest.json/
    

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

{
    "entityId": "personalTab",
    "name": "Personal Tab ",
    "contentUrl": "https://{{HOSTNAME}}/<yourDefaultTabNameTab>/personal.html",
    "websiteUrl": "https://{{HOSTNAME}}",
    "scopes": ["personal"]
}

Не забудьте обновить компонент пути "contentURL" yourDefaultTabNameTab с фактическим именем вкладки.

  • Сохраните обновленные manifest.js.

  • Ваша страница контента должна быть подана в IFrame. Откройте Tab.ts в редакторе кода:

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

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

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

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

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

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

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

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

gulp manifest

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

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

gulp build

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

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

gulp serve

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

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

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

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

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

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

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

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

gulp ngrok-serve

Важно!

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

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

  • Откройте Microsoft Teams клиента. Если вы используете веб-версию, вы можете проверить исходный код с помощью средств разработчика браузера.
  • В панели YourTeams слева выберите меню рядом с командой, которую вы используете для тестирования вкладки, и ... выберите команду Manage.
  • На главной панели выберите Приложения из панели вкладок и выберите Upload настраиваемого приложения, расположенного в нижнем правом углу страницы.
  • Откройте каталог проектов, просмотрите папку ./package, выберите папку zip, щелкните правой кнопкой мыши и выберите Открыть. Вкладка будет загружена в Teams.

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

В области navbar, расположенной слева от Teams, выберите меню и выберите приложение ... из списка.

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