Создание настраиваемой вкладки каналов и групп с Node.js и генератором Yeoman для Microsoft TeamsCreate a custom channel and group tab with Node.js and the Yeoman Generator for Microsoft Teams

Примечание

Это руководство соответствует действиям, описанным в статье Создание первого вики-сайта приложения Microsoft Teams , который находится в репозитории Microsoft OfficeDev GitHub.This quickstart follows the steps outlined in the Build Your First Microsoft Teams App Wiki found in the Microsoft OfficeDev GitHub repository.

В этом руководстве мы рассмотрим создание настраиваемой вкладки каналов и групп с помощью генератора Yeoman Teams.In this quickstart we'll walk-through creating a custom channel and group tab using the Teams Yeoman generator.

Предварительные требованияPrerequisites

  • Для выполнения этого руководства вам потребуется клиент Office 365 и группа, настроенная с разрешенной отправкой пользовательских приложений .To complete this quickstart you will need an Office 365 tenant and a team configured with Allow uploading custom apps enabled. Чтобы узнать больше, ознакомьтесь со статьей Подготовка клиента Office 365.To learn more, see Prepare your Office 365 tenant.

    • Если у вас в настоящее время нет учетной записи Office 365, вы можете получить бесплатную подписку в программе для разработчиков Office 365.If you don't currently have an Office 365 account, you can sign up for a free subscription through the Office 365 Developer Program. Подписка останется активной до тех пор, пока вы ее используете для текущей разработки.The subscription will remain active as long as you're using it for ongoing development. Ознакомьтесь со статьей Добро пожаловать в программу для разработчиков Office 365.See Welcome to the Office 365 Developer Program.

Кроме того, для этого проекта необходимо установить следующие компоненты в среде разработки:In addition, this project requires that you have the following installed in your development environment:

  • Любой текстовый редактор или IDE.Any text editor or IDE. Вы можете установить и использовать Visual Studio Code бесплатно.You can install and use Visual Studio Code for free.

  • Node. js/NPM.Node.js/npm. Следует использовать последнюю версию LTS.You should use the latest LTS version. Диспетчер пакетов узла (NPM) будет установлен в системе с установкой Node. js.The Node Package Manager (npm) will install into your system with the installation of Node.js.

  • После успешной установки Node. js установите пакеты Yeoman и gulp – CLI , введя в командной строке следующую команду:After you've successfully installed Node.js, install the Yeoman and gulp-cli packages by typing the following in your command prompt:

npm install yo gulp-cli --global
  • Установите генератор приложений Microsoft Teams, введя в командной строке следующую команду:Install the Microsoft Teams Apps generator by typing the following in your command prompt:
npm install generator-teams --global

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

  • Откройте командную строку и создайте новый каталог для проекта со вкладками.Open a command prompt and create a new directory for your tab project.

  • Чтобы запустить генератор, перейдите к новому каталогу и введите следующую команду:To start the generator, navigate to your new directory and type the following command:

yo teams
  • Далее вы задаете ряд значений, которые будут использоваться в файле manifest. JSON приложения:Next, you'll provide a series of values that will be used in your application's manifest.json file:

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

Имя вашего решенияWhat is your solution name?

Это имя проекта.This is your project name. Вы можете принять предложенное имя, нажав клавишу ВВОД.You can accept the suggested name by pressing enter.

Где следует разместить файлы?Where do you want to place the files?

В настоящее время вы находитесь в каталоге проекта.You're currently in your project directory. Нажмите клавишу ВВОД.Press enter.

Название проекта приложения Microsoft Teams?Title of your Microsoft Teams app project?

Это имя пакета приложения, которое будет использоваться в манифесте и описании приложения.This is your app package name and will be used in the app manifest and description.

Имя вашей компании? (максимум 32 символов)Your (company) name? (max 32 characters)

В манифесте приложения будет использоваться название вашей компании.Your company name will be used in the app manifest.


Какую версию манифеста вы хотите использовать?Which manifest version would you like to use?

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

Введите свой идентификатор партнера Майкрософт (если он есть). (Оставьте пустым для пропуска)Enter your Microsoft Partner Id, if you have one? (Leave blank to skip)

Это поле не является обязательным и должно использоваться только в том случае, если вы уже участвуете в сети партнерской корпорации Майкрософт.This field isn't required and should only be used if you're already part of the Microsoft Partner Network.

Что вы хотите добавить в проект?What do you want to add to your project?

Выберите ( * ) вкладку.Select ( * ) A Tab.

URL-адрес, на котором будет размещаться это решение?The URL where you will host this solution?

По умолчанию генератор предлагает URL-адрес веб-сайтов Azure.By default the generator suggests an Azure Web Sites URL. Вы будете тестировать ваше приложение только локально, поэтому для этого краткого руководства не требуется действительный URL-адрес.You'll only be testing your app locally, therefore, a valid URL is not necessary to complete this quickstart.

Вы хотите включить тестовую платформу и начальные тесты? (y/N)Would you like to include Test framework and initial tests? (y/N)

Выберите вариант не включать тестовую платформу для этого проекта.Choose not to include a test framework for this project. Значение по умолчанию: Да; Введите n.The default is yes; enter n.

Вы хотите использовать для телеметрии Azure Application Insights? (y/N)Would you like to use Azure Applications Insights for telemetry? (y/N)

Не включайте Azure Application Insights.Choose not to include Azure Application Insights. Значение по умолчанию — нет; Введите n.The default is no; enter n.

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

Присвойте вкладке имя. Это имя вкладки будет использоваться в рамках проекта в качестве компонента файла или URL-пути.Name your tab. This tab name will be used throughout your project as a file/URL path component.

Вы хотите создать настраиваемую или статическую вкладку?Do you want to create a configurable or static tab?

С помощью клавиш со стрелками выберите Настраиваемая вкладка.Use the arrow keys to select configurable tab.

Какие области вы планируете использовать для вкладки?What scopes do you intend to use for your Tab?

Вы можете выбрать команду и/или групповой чатYou can select a Team and/or a group chat

Вы хотите, чтобы эта вкладка была доступна в SharePoint Online? (Y/n)Do you want this tab to be available in SharePoint Online? (Y/n)

Выберите n.Select n.

Важно!

Компонент Path йоурдефаулттабнаметаб, указанный в этом кратком руководстве, — это значение, введенное в генератор для имени вкладки по умолчанию , а также для вкладкиWord.The path component yourDefaultTabNameTab, referenced in this quickstart, is the value that you entered in the generator for Default Tab Name plus the word Tab.

Пример: дефаулттабнаме: митаб => /митабтаб/For example: DefaultTabName: MyTab => /MyTabTab/

В каталоге проекта перейдите к следующему:In your project directory, navigate to the following:

./src/app/scripts/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.tsx

Здесь вы найдете логику вкладки.That is where you'll find your tab logic. Нахождение render() метода и добавление следующего <div> тега и содержимого в начало <PanelBody> кода контейнера:Locate the render() method and add the following <div> tag and content to the top of the <PanelBody> container code:

    <PanelBody>
        <div style={styles.section}>
            Hello World! Yo Teams rocks!
        </div>
    </PanelBody>

Обязательно сохраните обновленный файл.Make sure to save the updated file.

Построение и запуск приложенияBuild and Run Your Application

Откройте командную строку в каталоге проекта, чтобы выполнить следующие задачи.Open a command prompt in your project directory to complete the next tasks.

Создание пакета приложенияCreate the app package

Для тестирования вкладки в Teams необходим пакет приложения.You'll need an app package to test your tab in Teams. Это ZIP-папка, содержащая следующие обязательные файлы:It's a zip folder that contains the following required files:

  • Значок с полным цветом , измеряющий 192 x 192 пикселей.A full color icon measuring 192 x 192 pixels.
  • Прозрачный значок структуры , измеряющий 32 x 32 пикселей.A transparent outline icon measuring 32 x 32 pixels.
  • Файл manifest. JSON , задающий атрибуты приложения.A manifest.json file that specifies the attributes of your app.

Пакет создается с помощью задачи gulp, которая проверяет файл manifest. JSON и создает папку ZIP в файле ./package directory.The package is created via a gulp task that validates the manifest.json file and generates the zip folder in the ./package directory. В командной строки введите:In the command prompt enter:

gulp manifest

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

Команда Build преобразует решение в папку ./dist. .The build command transpiles your solution into the ./dist folder. Затем введите:Next,enter:

gulp build

Запуск приложения на localhostRun your application in localhost

Запустите локальный веб-сервер, введя следующие команды:Start a local web server by entering the following:

gulp serve

Введите http://localhost:3007/<yourDefaultAppNameTab>/ в браузере и просмотрите домашнюю страницу приложения:Enter http://localhost:3007/<yourDefaultAppNameTab>/ in your browser and view your application's home page:

снимок экрана: Домашняя страница

Чтобы просмотреть страницу настройки вкладки, перейдите на страницу https://localhost:3007/<yourDefaultAppNameTab>/config.html .To view your tab configuration page go to https://localhost:3007/<yourDefaultAppNameTab>/config.html. Должны отображаться следующие сведения:You should see the following:

снимок экрана страницы конфигурации

Установка безопасного туннеля для вкладкиEstablish a secure tunnel to your tab

Microsoft Teams является полностью облачным продуктом и требует, чтобы содержимое вкладки было доступно из облака с использованием конечных точек HTTPS.Microsoft Teams is an entirely cloud-based product and requires that your tab content be available from the cloud using HTTPS endpoints. В Teams не разрешается локальное размещение, поэтому необходимо либо опубликовать вкладку на общедоступном URL-адресе, либо использовать прокси-сервер, который будет предоставлять локальный порт URL-адресу, доступному для выхода в Интернет.Teams doesn't allow local hosting, therefore, you need to either publish your tab to a public URL or use a proxy that will expose your local port to an internet-facing URL.

Чтобы протестировать расширение вкладки, вы будете использовать ngrok, встроенный в это приложение.To test your tab extension, you'll use ngrok, which is built into this application. Ngrok — это программное средство обратного прокси-сервера, которое создает туннель для общедоступных конечных точек HTTPS на локальном веб-сервере.Ngrok is a reverse proxy software tool that will create a tunnel to your locally running web server's publicly-available HTTPS endpoints. Конечные точки веб-сервера будут доступны в текущем сеансе на локальном компьютере.Your server's web endpoints will be available during the current session on your local machine. При завершении работы компьютера или переходе в спящий режим служба становится недоступной.When the machine is shut down or goes to sleep the service will no longer be available.

В командной строки выйдите из localhost и введите следующую команду:In your command prompt, exit localhost and enter the following:

gulp ngrok-serve

Важно!

После того как вкладка загружена в Microsoft Teams и успешно сохранена, ее можно просмотреть в коллекции вкладок, добавить ее на панель вкладок и взаимодействовать с ней до завершения сеанса туннеля ngrok.After your tab has been uploaded to Microsoft teams and successfully saved, you can view it in the tabs gallery, add it to the tabs bar, and interact with it until your ngrok tunnel session ends. Если вы перезапустите сеанс ngrok, вам потребуется обновить свое приложение с помощью нового URL-адреса.If you restart your ngrok session, you'll need to update your app with the new URL.

Отправка приложения в TeamsUpload your application to Teams

  • Откройте клиент Microsoft Teams.Open the Microsoft Teams client. Если вы используете версию на основе веб-сайта , вы можете проверить интерфейсный код с помощью средств разработчикав браузере.If you use the web based version you can inspect your front-end code using your browser's developer tools.
  • На панели йоуртеамс слева выберите ... меню рядом с командой, которую вы используете для тестирования вкладки, и выберите пункт Управление командой.In the YourTeams panel on the left, select the ... menu next to the team that you're using to test your tab and choose Manage team.
  • В главной панели выберите приложения из панели вкладок и нажмите кнопку Отправить пользовательское приложение , расположенное в правом нижнем углу страницы.In the main panel select Apps from the tab bar and choose Upload a custom app located in the lower right-hand corner of the page.
  • Откройте каталог проекта, перейдите в папку ./паккаже , выберите папку ZIP пакет приложения и нажмите кнопку Открыть.Open your project directory, browse to the ./package folder, select the app package zip folder and choose Open. Вкладка будет загружена в Teams.Your tab will upload into Teams.
  • Вернитесь к команде, выберите канал, в котором необходимо отобразить вкладку, нажмите ➕ на панели вкладок и выберите вкладку в коллекции.Return to your team, choose the channel where you would like to display the tab, select ➕ from the tab bar, and choose your tab from the gallery.
  • Следуйте инструкциям по добавлению вкладки. Обратите внимание, что для вкладки канал/группа существует настраиваемое диалоговое окно настройки.Follow the directions for adding a tab. Note that there's a custom configuration dialog for your channel/group tab.
  • Нажмите кнопку сохранить , и вкладка будет добавлена на панель вкладок канала.Select Save and your tab will be added to the channel's tab bar.