Создание вкладки "канал" и "Группа" для Microsoft TeamsBuild a channel and group tab for Microsoft Teams

В этом руководстве описывается создание простой вкладки канала (также известной как вкладка группы ), которая является полноэкранной страницей для канала команды или чата.In this tutorial, you'll build a basic channel tab (also known as a group tab ), which is a full-screen page for a team channel or chat. В отличие от вкладки личных сведений, пользователи могут настроить некоторые аспекты вкладки такого типа (например, переименовать вкладку, чтобы она была осмысленной для канала).Unlike a personal tab, users can configure some aspects of this kind of tab (for example, rename the tab so it's meaningful to their channel).

Ваше назначениеYour assignment

Не давно, ваша организация создала приложение Teams, которое использует вкладку для отображения важных контактных сведений (служба технической поддержки, HR и т. д.).Not long ago, your organization created a Teams app that uses a tab to display important contact information (help desk, HR, etc.). Тем не менее, так как это личная вкладка, каждый пользователь должен установить эту вкладку, чтобы она была доступна, а внедрение ниже ожидаемого.However, since it's a personal tab, each user must install the tab to see it and adoption is lower than expected. Другими словами, слишком много сотрудников по-прежнему не знают, как связаться со службой поддержки.In other words, too many workers still don't know how to reach the help desk.

Вы можете упростить поиск этих сведений путем создания вкладки канала, которая будет изменять нагрузку, требующую от всех пользователей устанавливать приложение.You can make this information easier to find by building a channel tab, which will remove the burden of requiring everyone to install an app. Вместо этого один пользователь может добавить вкладку в канал или чат для получения преимуществ целой группы.Instead, one user can add the tab in a channel or chat for the benefit of an entire group.

Что вы узнаетеWhat you'll learn

  • Создание проекта приложения с помощью набора инструментов Microsoft Teams для Visual Studio CodeCreate an app project using the Microsoft Teams Toolkit for Visual Studio Code
  • Определите некоторые конфигурации приложений и формирование шаблонов, относящихся к вкладкам каналов и группIdentify some of the app configurations and scaffolding relevant to channel and group tabs
  • Создание содержимого вкладкиCreate tab content
  • Создание контента для страницы конфигурации вкладкиCreate content for a tab's configuration page
  • Ввод предлагаемого имени вкладкиProvide a suggested tab name
  • Создание и запуск приложения на локальном компьютереBuild and run your app locally
  • Загрузка неопубликованных ваше приложение в Teams для тестированияSideload your app in Teams for testing

Перед началом работыBefore you begin

Если вы еще не сделали это, убедитесь, что вы знаете и установите необходимые компоненты для разработки Teams.If you haven't yet, make sure you understand and install the Teams development prerequisites.

1. Создайте проект приложения.1. Create your app project

Набор средств Microsoft Teams помогает настроить приложение и настроить формирование шаблонов, относящихся к вкладкам каналов и групп, включая основную страницу конфигурации и страницу контента, на которой отображается "Hello, World!".The Microsoft Teams Toolkit helps configure your app and set up scaffolding relevant to channel and group tabs, including a basic configuration page and content page that displays a "Hello, World!" Сообщение.message.

Совет

Если вы еще не создали проект приложения Teams, возможно, вам будет полезно выполнить приведенные выше инструкции по более подробному объяснению проектов.If you haven't created a Teams app project before, you might find it helpful to follow these instructions that explain projects in more detail.

  1. В Visual Studio Code выберите Microsoft Teams на левой панели активности и выберите создать приложение Teams.
  2. При появлении соответствующего запроса войдите в систему с помощью учетной записи разработчика Microsoft 365.When prompted, sign in with your Microsoft 365 development account.
  3. На экране добавить возможности выберите вкладка Далее.On the Add capabilities screen, select Tab then Next.
  4. Введите имя приложения Teams.Enter a name for your Teams app. (Это имя приложения по умолчанию, а также имя каталога проекта приложения на локальном компьютере.)(This is the default name for your app and also the name of the app project directory on your local machine.)
  5. Проверьте параметры вкладки " Личные" и " Группа" или "канал Teams" .Check the Personal tab and Group or Teams channel tab options. (Скоро вы узнаете, зачем нужны оба типа вкладок.)(You'll soon learn why you need both types of tabs.)
  6. В нижней части экрана нажмите кнопку Готово , чтобы настроить проект.Select Finish at the bottom of the screen to configure your project.

2. определение соответствующих компонентов проекта приложения2. Identify relevant app project components

Многие конфигурации приложений и формирование шаблонов настраиваются автоматически при создании проекта с помощью набора инструментов Teams.Much of the app configurations and scaffolding are set up automatically when you create your project with the Teams Toolkit. Рассмотрим основные компоненты для создания вкладки "канал" и "Группа".Let's look at the main components for building a channel and group tab.

Конфигурации приложенийApp configurations

Вы можете просматривать и обновлять конфигурации приложений с помощью App Studio, которая включена в набор средств.You can view and update your app configurations using App Studio, which is included in the toolkit.

Во время установки набор инструментов изначально настроил два основных компонента вкладок "канал" и "Группа":During setup, the toolkit initially configured two essential components of channel and group tabs:

  • Страница "Конфигурация ": диалоговое окно для добавления вкладки в канал или чат.Configuration page : The dialog for adding a tab to a channel or chat. (В App Studio можно найти эту страницу, перейдя на вкладки > вкладке Группа ).(In App Studio, you can find this page by going to Tabs > Team tab.)
  • Страница содержимого : где отображается основное содержимое.Content page : Where you display your primary content. (В App Studio можно найти эту страницу, перейдя на вкладки > добавить личную вкладку ).(In App Studio, you can find this page by going to Tabs > Add a personal tab.)

Формирование шаблонов приложенийApp scaffolding

Формирование шаблонов приложений предоставляет компоненты для отображения вкладки "личные сведения" в Teams.The app scaffolding provides the components for rendering your personal tab in Teams. Существует множество способов, с которыми вы можете работать, но теперь вам нужно сосредоточиться на следующих задачах:There's a lot you can work with, but for now you only need to focus on the following:

  • Два файла, расположенные в src/components каталоге проекта:Two files located in the src/components directory of your project:
    • Tab.js для отображения страницы содержимого вкладки.Tab.js for rendering your tab's content page.
    • TabConfig.js для отображения страницы конфигурации вкладки.TabConfig.js for rendering your tab's configuration page.
  • Клиентский пакет SDK Microsoft Teams JavaScript, который предварительно загружен в интерфейсных компонентах проекта.Microsoft Teams JavaScript client SDK, which comes pre-loaded in your project's front-end components.

3. Настройка страницы контента вкладки3. Customize your tab content page

Скопируйте и обновите следующий фрагмент кода, используя сведения, которые относятся к вашей организации, или, в целях простоты, используйте код как есть.Copy and update the following snippet with information that's relevant to your organization or, for the sake of time, use the code as is.

<div>
  <h1>Important Contacts</h1>
    <ul>
      <li>Help Desk: <a href="mailto:support@company.com">support@company.com</a></li>
      <li>Human Resources: <a href="mailto:hr@company.com">hr@company.com</a></li>
      <li>Facilities: <a href="mailto:facilities@company.com">facilities@company.com</a></li>
    </ul>
</div>

Перейдите в src/components каталог и откройте его Tab.js .Go to the src/components directory and open Tab.js. Нахождение render() функции и вставка содержимого внутри return() (как показано на рисунке).Locate the render() function and paste your content inside return() (as shown).

render() {

    let userName = Object.keys(this.state.context).length > 0 ? this.state.context['upn'] : "";

    return (
    <div>
      <h1>Important Contacts</h1>
        <ul>
          <li>Help Desk: <a href="mailto:support@company.com">support@company.com</a></li>
          <li>Human Resources: <a href="mailto:hr@company.com">hr@company.com</a></li>
          <li>Facilities: <a href="mailto:facilities@company.com">facilities@company.com</a></li>
        </ul>
    </div>
    );
}

Добавьте следующее правило App.css (также размещено в src/components ), чтобы ссылки электронной почты легче читались независимо от того, какая тема используется.Add the following rule to App.css (also located in src/components) so the email links are easier to read no matter which theme is used.

a {
  color: inherit;
}

4. Настройка страницы настройки вкладки4. Customize your tab configuration page

У каждой вкладки в канале или чата есть страница конфигурации, в которой по крайней мере один вариант установки, отображаемый при добавлении приложения пользователями.Every tab in a channel or chat has a configuration page, a dialog with at least one setup option that displays when users add your app. По умолчанию на странице конфигурации запрашиваются пользователи, хотят ли они уведомлять канал или чат при установке вкладки.The configuration page by default asks users if they want to notify the channel or chat when the tab is installed.

Добавление настраиваемого контента на страницу конфигурации.Add some custom content to your configuration page. Перейдите в src/components каталог проекта, откройте TabConfig.js и обновите содержимое заполнителя в return() (как показано в следующем примере).Go to your project's src/components directory, open TabConfig.js, and update the placeholder content inside return() (as shown in the following example).

return (
    <div>
      <h1>Add My Contoso Contacts</h1>
      <div>
        Select <b>Save</b> to add our organization's important contacts to this workspace.
      </div>
    </div>
);

Совет

Как минимум, укажите некоторые краткие сведения о приложении на этой странице, так как это может быть первый раз, когда пользователи узнают об этом.At minimum, provide some brief information about your app on this page since this may be the first time users are learning about it. Кроме того, можно включить настраиваемые параметры конфигурации или Рабочий процесс проверки подлинности, который распространен на страницах настройки вкладок.You also could include custom configuration options or an authentication workflow, which is common on tab configuration pages.

5. Введите предлагаемое имя вкладки.5. Provide a suggested tab name

При добавлении вкладки "канал" или "Группа" по умолчанию отображается имя приложения (например, First-App ).When you add a channel or group tab, by default the app name displays (for example, first-app ).

Это может быть разумно в зависимости от того, что вы назначите для вашего приложения, но вы можете указать имя, которое лучше в контексте совместной работы группы (например, " Контакты группы ").This may be fine depending on what you call your app, but you may want to provide a name that makes more sense in the context of group collaboration (for example, Team Contacts ).

В TabConfig.js перейдите на страницу microsoftTeams.settings.setSettings .In TabConfig.js, go to microsoftTeams.settings.setSettings. Добавьте suggestedDisplayName свойство с именем вкладки, которое будет отображаться по умолчанию (как показано).Add the suggestedDisplayName property with the tab name you want to display by default (as shown). Используйте предоставленное имя или создайте собственное.Use the provided name or create your own. (По умолчанию при желании пользователи могут изменить имя.)(By default, users to change the name if they want.)

microsoftTeams.settings.setSettings({
  "contentUrl": "https://localhost:3000/tab",
  "suggestedDisplayName": "Team Contacts"
});

6. Построение и запуск приложения6. Build and run your app

В течение этого времени вы создадите и запустите свое приложение локально.In the interest of time, you'll build and run your app locally.

(Эти сведения также доступны в наборе инструментов README .)(This information is also available in the toolkit README.)

  1. В терминале перейдите к корневому каталогу проекта приложения и запустите его npm install .In a terminal, go to the root directory of your app project and run npm install.
  2. Выполните команду npm start .Run npm start.

По завершении компиляции успешно выполняется.Once complete, there's a Compiled successfully! сообщение в терминале.message in the terminal. Ваше приложение запущено https://localhost:3000 .Your app is running on https://localhost:3000.

7. Загрузка неопубликованных ваше приложение в Teams7. Sideload your app in Teams

Ваше приложение готово к тестированию в Teams.Your app is ready to test in Teams. Для этого необходимо иметь учетную запись, позволяющую выполнять загрузку неопубликованных приложений.To do this, you must have an account that allows app sideloading. (Если вы не знаете этого, Узнайте о том, как получить учетную запись разработки Teams.)(If you aren't sure you have that, learn about getting a Teams development account.)

  1. В Visual Studio Code нажмите клавишу F5 , чтобы запустить веб-клиент Teams.In Visual Studio Code, press the F5 key to launch a Teams web client.
  2. Чтобы отобразить содержимое приложения в Teams, укажите, что приложение работает ( localhost ) является надежным:To display your app content in Teams, specify that where your app is running (localhost) is trustworthy:
    1. Откройте новую вкладку в том же окне браузера (Google Chrome по умолчанию), которое открывалось после нажатия клавиши F5.Open a new tab in the same browser window (Google Chrome by default) which opened after pressing F5.
    2. Перейдите к https://localhost:3000/tab странице и перейдите к ней.Go to https://localhost:3000/tab and proceed to the page.
  3. Вернитесь в Teams.Go back to Teams. В диалоговом окне выберите команду Добавить в группу или Добавить в чат , а затем выберите канал или чат, который вы можете использовать для тестирования.In the dialog, select Add to a team or Add to a chat and locate a channel or chat you can use for testing.
  4. Выберите Настройка вкладки. Страница конфигурации отображается в диалоговом окне.Select Set up a tab. The configuration page displays in a dialog.
    Снимок экрана: страница настройки вкладки каналов.
  5. Нажмите кнопку сохранить , чтобы настроить вкладку. Отображается страница содержимое.Select Save to configure the tab. The content page displays.
    Снимок экрана: вкладка _OL_QUOTE_PLACEHOLDER_канал_OL_QUOTE_PLACEHOLDER_ со статическим представлением контента.

ПрекрасноWell done

Поздравляем!Congratulations! У вас есть приложение Teams с вкладкой для отображения содержимого в каналах и беседах.You have a Teams app with a tab for displaying useful content in channels and chats.

ПодробнееLearn more

Следующий урокNext lesson

Вы знаете, как создать вкладку для совместной работы.You know how to build a tab for collaboration. Хотите попробовать создать другой тип приложения Teams?Want to try building a different kind of Teams app?