Руководство по созданию приложения на вкладке "Панель мониторинга" - Teams

Это пошаговое руководство поможет вам создать вкладку панели мониторинга, добавить новое мини-приложение на панель мониторинга и реализовать API Graph. Вы увидите следующие выходные данные:

Снимок экрана: окончательные выходные данные панели мониторинга.

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

Осталось 23 мин

Установка	Для использования
Visual Studio Code;	Сред сборки JavaScript, TypeScript или SharePoint Framework (SPFx). Используйте версию 1.55 или более позднюю.
Набор средств Teams или Интерфейс командной строки TeamsFx	Расширение Microsoft Visual Studio Code, которое создает шаблон проекта для вашего приложения. Используйте Набор средств Teams версии 5.
Программа для разработчиков Microsoft 365	Учетная запись Teams с соответствующими разрешениями для установки приложения.
Node.js	Серверной среды выполнения JavaScript. Дополнительные сведения см . вNode.js таблице совместимости версий для типа проекта.
Microsoft Teams	Microsoft Teams для совместной работы со всеми пользователями, с которыми вы работаете, с помощью приложений для чата, собраний и звонков в одном месте.
Microsoft Edge (рекомендуется) или Google Chrome	Браузера со средствами разработчика.

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

Осталось 22 мин

Teams Toolkit поддерживает создание панели мониторинга и формирования шаблонов.

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

Щелкните значок Набора средств Teams на панели действий Visual Studio Code.
Выберите Создать новое приложение.
Выберите Вкладка , чтобы создать проект вкладки.
Выберите Панель мониторинга.
Выберите TypeScript в качестве языка программирования.
Выберите Папка по умолчанию , чтобы сохранить корневую папку проекта в расположении по умолчанию.
Введите подходящее имя для приложения и нажмите клавишу ВВОД.

Приложение-вкладка Teams будет создано за несколько секунд.

После создания приложения набор средств Teams отображает следующее сообщение:
Щелкните значок Набора средств Teams на боковой панели.
Выберите Войти в Microsoft 365.
Щелкните ссылку Войти.
Выберите F5 , чтобы запустить приложение в режиме отладки.
Нажмите Добавить.
Выберите Открыть.

Панель мониторинга приложения tab успешно создана в Teams.

Teams также поддерживает различные темы, включая темные и высококонтрастные темы.
- Темная тема
- Тема с высокой контрастностью
На следующем рисунке показано использование темной темы в классическом клиенте Teams:

На следующем рисунке показано использование темы высокой контрастности в классическом клиенте Teams:

В Командной интерфейсе командной строки TeamsFx:

Если вы предпочитаете интерактивный режим, выполните teamsfx new команду, а затем используйте клавиатуру для прохождения того же потока, что и в Visual Studio Code.
Если вы предпочитаете неинтерактивный режим, введите все необходимые параметры в одной команде:

teamsfx new--interactive false--capabilities "dashboard-tab"--programming-language "TypeScript"--folder "./"--app-name dashboard-cli-001

Обзор исходного кода приложения

Осталось 22 мин

После создания проекта можно просмотреть папки и файлы проекта в Обозреватель в Visual Studio Code. Основная реализация панели мониторинга находится в папке tabs.

Folder	Содержание
`.vscode`	Visual Studio Code файлы для отладки.
`appPackage`	Шаблоны для манифеста приложения Teams.
`env`	Файлы среды.
`infra`	Шаблоны для подготовки ресурсов Azure.
`src`	Исходный код для приложения Teams на панели мониторинга.

Следующие файлы предоставляют бизнес-логику для вкладки панели мониторинга. Вы можете обновить файлы в соответствии с требованиями бизнес-логики. Реализация по умолчанию предоставляет отправную точку для начала работы.

File	Содержание
`src/models/chartModel.ts`	Модель данных для мини-приложения диаграммы.
`src/models/listModel.ts`	Модель данных для мини-приложения списка.
`src/services/chartService.ts`	Реализация извлечения данных для мини-приложения диаграммы.
`src/services/listService.ts`	Реализация извлечения данных для мини-приложения списка.
`src/dashboards/SampleDashboard.tsx`	Пример реализации макета панели мониторинга.
`src/styles/ChartWidget.css`	Файл стиля мини-приложения диаграммы.
`src/styles/ListWidget.css`	Файл стиля мини-приложения списка.
`src/widgets/ChartWidget.tsx`	Реализация мини-приложения, которая может отображать диаграмму.
`src/widgets/ListWidget.tsx`	Реализация мини-приложения, которая может отображать список.
`src/App.css`	Стиль маршрута приложения.
`src/App.tsx`	Маршрут приложения.

Следующие файлы являются файлами, связанными с проектом. Как правило, настраивать эти файлы не требуется.

File	Содержание
`src/index.css`	Стиль точки входа приложения.
`src/index.tsx`	Точка входа приложения.
`src/internal/addNewScopes.ts`	Добавлена реализация новых областей.
`src/internal/context.ts`	Контекст TeamsFx.
`src/internal/login.ts`	Реализация входа.
`src/internal/singletonContext.ts`	Реализация экземпляра TeamsUserCredential singleton.

Добавление мини-приложения на панель мониторинга

Осталось 20 мин

Чтобы добавить новое мини-приложение на панель мониторинга, выполните следующие действия.

Определение модели данных
Создание службы извлечения данных
Создание файла мини-приложения
Добавление мини-приложения на панель мониторинга

Определение модели данных

В Visual Studio Code перейдите кразделу Моделиsrc>explorer>.
Создайте файл sampleModel.ts .
Добавьте следующий код в файл sampleModel.ts :
```
  export interface SampleModel {
  content: string;
  }
```

Создание службы извлечения данных

Примечание.

Вы можете реализовать службу для получения данных из серверной службы или microsoft API Graph.

В Visual Studio Code перейдите кразделу Службыsrc>EXPLORER>.
Создайте файл sampleService.ts .

Добавьте следующий код в файл sampleService.ts :

import { SampleModel } from "../models/sampleModel";

export const getSampleData = (): SampleModel => {
  return { content: "Hello world!" };
  };

Снимок экрана: создание файла sampleService.ts в папке службы в Visual Studio Code.

В Visual Studio Code перейдите в разделМини-приложенияsrc>explorer>.
Создайте файл SampleWidget.tsx .

Добавьте следующий код в файл SampleWidget.tsx :

import { Button, Text } from "@fluentui/react-components";
import { BaseWidget } from "@microsoft/teamsfx-react";
import { SampleModel } from "../models/sampleModel";
import { getSampleData } from "../services/sampleService";
interface SampleWidgetState 
{
  data?: SampleModel;
}
export class SampleWidget extends BaseWidget<any, SampleWidgetState>
{
  override async getData(): Promise<SampleWidgetState>
  {
    return { data: getSampleData() };
  }
  override header(): JSX.Element | undefined
  {
    return <Text>Sample Widget</Text>;
  }
  override body(): JSX.Element | undefined
  {
    return <div>{this.state.data?.content}</div>;
  }
  override footer(): JSX.Element | undefined
  {
    return <Button>View Details</Button>;
  }
}

Чтобы добавить мини-приложение на панель мониторинга, выполните следующие действия.

В Visual Studio Code перейдите в раздел панелимониторинга> Обозреватель >src>SampleDashboard.tsx.
Добавьте мини-приложение на панель мониторинга, обновив override layout() метод :
```
override layout(): JSX.Element | undefined {
  return (<>
      <ListWidget />
      <ChartWidget />
      <SampleWidget />
    </>
  );
} 
```
Необязательно. См. следующий код, чтобы добавить мини-приложение в столбец:
```
.one-column {
  display: grid;
  gap: 20 px;
  grid-template-rows: 1fr 1fr;
}
```
```
override layout(): JSX.Element | undefined {
  return (<>
      <ListWidget />
      <div className="one-column">
        <ChartWidget />
        <SampleWidget />
      </div>
   </>
  );
}
```
После добавления всех необходимых сведений для создания мини-приложения сохраните соответствующие файлы.

Измененный макет и мини-приложение календаря можно просмотреть на панели мониторинга.

Добавление единого входа и вызова API Graph

Осталось 15 мин

Вы узнали, как создать вкладку панели мониторинга и добавить на нее новое мини-приложение. Давайте добавим единый вход (SSO) и вызов API graph на вкладку панели мониторинга.

Добавление единого входа

Чтобы добавить единый вход, выполните следующие действия.

1. Создание манифеста приложения Microsoft Entra.

Чтобы создать манифест приложения Microsoft Entra, выполните следующие действия.

В Visual Studio Code перейдите к проводнику.
Создайте файл aad.manifest.json .

Добавьте следующий код в файл aad.manifest.json :

{
  "id": "${{AAD_APP_OBJECT_ID}}",
  "appId": "${{AAD_APP_CLIENT_ID}}",
  "name": "dashboardDemo",
  "accessTokenAcceptedVersion": 2,
  "signInAudience": "AzureADMyOrg",
  "optionalClaims": {
      "idToken": [],
      "accessToken": [
          {
            "name": "idtyp",
            "source": null,
            "essential": false,
            "additionalProperties": []
          }
      ],
      "saml2Token": []
  },
  "requiredResourceAccess": [
      {
        "resourceAppId": "Microsoft Graph",
        "resourceAccess": [
            {
              "id": "User.Read", 
              "type": "Scope"
            }
        ]
      }
  ],
   "oauth2Permissions": [
      {
        "adminConsentDescription": "Allows Teams to call the app's web APIs as the current user.",
        "adminConsentDisplayName": "Teams can access app's web APIs",
        "id": "${{AAD_APP_ACCESS_AS_USER_PERMISSION_ID}}",
        "isEnabled": true,
        "type": "User",
        "userConsentDescription": "Enable Teams to call this app's web APIs with the same rights that you have",
        "userConsentDisplayName": "Teams can access app's web APIs and make requests on your behalf",
        "value": "access_as_user"
      }
  ],
  "preAuthorizedApplications": [
      {
          "appId": "1fec8e78-bce4-4aaf-ab1b-5451cc387264",
          "permissionIds": 
          ["${{AAD_APP_ACCESS_AS_USER_PERMISSION_ID}}"]
      },
      {
          "appId": "5e3ce6c0-2b1f-4285-8d4b-75ee78787346",
          "permissionIds": 
          ["${{AAD_APP_ACCESS_AS_USER_PERMISSION_ID}}"]
      },
      {
          "appId": "d3590ed6-52b3-4102-aeff-aad2292ab01c",
          "permissionIds": 
          ["${{AAD_APP_ACCESS_AS_USER_PERMISSION_ID}}"]
      },
      {
          "appId": "00000002-0000-0ff1-ce00-000000000000",
          "permissionIds": 
          ["${{AAD_APP_ACCESS_AS_USER_PERMISSION_ID}}"]
      },
      {
          "appId": "bc59ab01-8403-45c6-8796-ac3ef710b3e3",
          "permissionIds": 
          ["${{AAD_APP_ACCESS_AS_USER_PERMISSION_ID}}"]
      },
      {
          "appId": "0ec893e0-5785-4de6-99da-4ed124e5296c",
          "permissionIds": 
          ["${{AAD_APP_ACCESS_AS_USER_PERMISSION_ID}}"]
      },
      {
          "appId": "4765445b-32c6-49b0-83e6-1d93765276ca",
          "permissionIds": 
          ["${{AAD_APP_ACCESS_AS_USER_PERMISSION_ID}}"]
      },
      {
          "appId": "4345a7b9-9a63-4910-a426-35363201d503",
          "permissionIds": 
          ["${{AAD_APP_ACCESS_AS_USER_PERMISSION_ID}}"]
      }
  ],
  "identifierUris": 
  ["api://${{TAB_DOMAIN}}/${{AAD_APP_CLIENT_ID}}"],
  "replyUrlsWithType": [
    {
      "url": "${{TAB_ENDPOINT}}/auth-end.html",
      "type": "Web"
    },
    {
      "url": "${{TAB_ENDPOINT}}/auth-end.html?clientId=${{AAD_APP_CLIENT_ID}}",
      "type": "Spa"
    },
    {
      "url": "${{TAB_ENDPOINT}}/blank-auth-end.html",
      "type": "Spa"
    }
  ]
}

Снимок экрана: добавление кода манифеста приложения Microsoft Entra.

2. Обновление манифеста приложения Teams.

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

В Visual Studio Code перейдите в раздел Explorer>appPackage>manifest.json.

Добавьте следующий код после допустимого свойства domains в файл manifest.json :

  "webApplicationInfo": {
  "id": "${{AAD_APP_CLIENT_ID}}",
  "resource": "api://${{TAB_DOMAIN}}/${{AAD_APP_CLIENT_ID}}"
  }

Снимок экрана: добавление сведений о веб-приложении в манифест.

3. Обновите файлы конфигурации набора средств Teams.

Чтобы обновить код конфигурации Набора средств Teams в файлах teamsapp.yml и teamsapp.local.yml , выполните следующие действия:

teamsapp.yml
teamsapp.local.yml

Добавьте код в .provision

  - uses: aadApp/create
    with:
        name: "YOUR_AAD_APP_NAME"
        generateClientSecret: true
        signInAudience: "AzureADMyOrg"
    writeToEnvironmentFile:
        clientId: AAD_APP_CLIENT_ID
        clientSecret: SECRET_AAD_APP_CLIENT_SECRET
        objectId: AAD_APP_OBJECT_ID
        tenantId: AAD_APP_TENANT_ID
        authority: AAD_APP_OAUTH_AUTHORITY
        authorityHost: AAD_APP_OAUTH_AUTHORITY_HOST

  - uses: aadApp/update
    with:
      manifestPath: "./aad.manifest.json"
      outputFilePath: ./build/aad.manifest.${{TEAMSFX_ENV}}.json

Снимок экрана: добавление кода aadApp/create и aadApp/update.

Добавьте следующий код под действием cli/runNpmCommandbuild app и именем:

  env:
  REACT_APP_CLIENT_ID: ${{AAD_APP_CLIENT_ID}}
  REACT_APP_START_LOGIN_PAGE_URL: ${{TAB_ENDPOINT}}/auth-start.html

Снимок экрана: сведения о коде реагирования для cli.

Добавьте код в .provision


  - uses: aadApp/create
    with:
        name: "YOUR_AAD_APP_NAME"
        generateClientSecret: true
        signInAudience: "AzureADMyOrg"
    writeToEnvironmentFile:
        clientId: AAD_APP_CLIENT_ID
        clientSecret: SECRET_AAD_APP_CLIENT_SECRET
        objectId: AAD_APP_OBJECT_ID
        tenantId: AAD_APP_TENANT_ID
        authority: AAD_APP_OAUTH_AUTHORITY
        authorityHost: AAD_APP_OAUTH_AUTHORITY_HOST

  - uses: aadApp/update
    with:
      manifestPath: "./aad.manifest.json"
      outputFilePath: ./build/aad.manifest.${{TEAMSFX_ENV}}.json

Снимок экрана: добавление кода aadApp/create и aadApp/update.

В действии file/createOrUpdateEnvironmentFile**добавьте следующий код:

  REACT_APP_CLIENT_ID: ${{AAD_APP_CLIENT_ID}}
  REACT_APP_START_LOGIN_PAGE_URL: ${{TAB_ENDPOINT}}/auth-start.html

Снимок экрана: информация для кодов реагирования.

4. Обновление исходного кода.

Создание файловauth-start.html и auth-end.html в общедоступной папке.

Добавьте код в файлыauth-start.html и auth-end.html .

auth-start
проверка подлинности

Добавьте следующий код в auth-start.html:

  <!--The Teams authentication flow process uses this file to assist with retrieval of the access token.-->
  <!--If you're not familiar with this process, don't alter or remove this file from your project.-->
  <html>
    <head>
      <title>Sign-in Start Page</title>
      <meta charset="utf-8" />
    </head>

    <body>
    <script src="https://res.cdn.office.net/teams-js/2.7.1/js/MicrosoftTeams.min.js" integrity="sha384-4Gy2G+qxzDVdrdemcVqKVQvaSK1Ghg3x6xcsaMLPc/pw7KPtiogHGM97LTWF2PWg" crossorigin="anonymous"></script>
      <script
        type="text/javascript"
        src="https://alcdn.msauth.net/browser/2.21.0/js/msal-browser.min.js"
        integrity="sha384-s/NxjjAgw1QgpDhOlVjTceLl4axrp5nqpUbCPOEQy1PqbFit9On6uw2XmEF1eq0s"
        crossorigin="anonymous">
      </script>
      <script type="text/javascript">
        microsoftTeams.app.initialize().then(() => {
          microsoftTeams.app.getContext().then(async (context) => {
            // Generate random state string and store it, so we can verify it in the callback
            var currentURL = new URL(window.location);
            var clientId = currentURL.searchParams.get("clientId");
            var scope = currentURL.searchParams.get("scope");
            var loginHint = currentURL.searchParams.get("loginHint");

            const msalConfig = {
              auth: {
                clientId: clientId,
                authority: `https://login.microsoftonline.com/${context.user.tenant.id}`,
                navigateToLoginRequestUrl: false
              },
              cache: {
                cacheLocation: "sessionStorage",
              },
            }
            const msalInstance = new msal.PublicClientApplication(msalConfig);
            const scopesArray = scope.split(" ");
            const scopesRequest = {
              scopes: scopesArray,
              redirectUri: window.location.origin + `/auth-end.html?clientId=${clientId}`,
              loginHint: loginHint
            };
            await msalInstance.loginRedirect(scopesRequest);
          });
        });
        </script>
    </body>
  </html>

Добавьте следующий код в auth-end.html:

  <!--The Teams authentication flow process uses this file to assist with retrieval of the access token.-->
  <!--If you're not familiar with this process, don't alter or remove this file from your project.-->
  <html>
    <head>
      <title>Sign-in End Page</title>
      <meta charset="utf-8" />
    </head>

    <body>
    <script src="https://res.cdn.office.net/teams-js/2.7.1/js/MicrosoftTeams.min.js" integrity="sha384-4Gy2G+qxzDVdrdemcVqKVQvaSK1Ghg3x6xcsaMLPc/pw7KPtiogHGM97LTWF2PWg" crossorigin="anonymous"></script>
      <script
        type="text/javascript"
        src="https://alcdn.msauth.net/browser/2.21.0/js/msal-browser.min.js"
        integrity="sha384-s/NxjjAgw1QgpDhOlVjTceLl4axrp5nqpUbCPOEQy1PqbFit9On6uw2XmEF1eq0s"
        crossorigin="anonymous">
      </script>
      <script type="text/javascript">
        var currentURL = new URL(window.location);
        var clientId = currentURL.searchParams.get("clientId");

        microsoftTeams.app.initialize().then(() => {
          microsoftTeams.app.getContext().then(async (context) => {
            const msalConfig = {
              auth: {
                clientId: clientId,
                authority: `https://login.microsoftonline.com/${context.user.tenant.id}`,
                navigateToLoginRequestUrl: false
              },
              cache: {
                cacheLocation: "sessionStorage",
              },
            }
            const msalInstance = new window.msal.PublicClientApplication(msalConfig);
            msalInstance.handleRedirectPromise()
              .then((tokenResponse) => 
              {
                if (tokenResponse !== null) 
                {
                  microsoftTeams.authentication.notifySuccess(JSON.stringify({
                    sessionStorage: sessionStorage
                  }));
                } else {
                  microsoftTeams.authentication.notifyFailure("Get empty response.");
                }
              }).catch((error) => 
              {
                microsoftTeams.authentication.notifyFailure(JSON.stringify(error));
              });
          });
        });
      </script>
    </body>
  </html>

Вы добавили файлы единого входа в проект и необходимо вызвать API Graph.

Добавление API Graph вызова

Чтобы добавить API Graph, выполните следующие действия.

Пакет SDK для TeamsFx реализует вызов API graph.

В Visual Studio Code перейдите кразделу ListService.tsслужб>src>EXPLORER>.

Обновите следующий код в listService.ts:

/**
  * Retrieve sample data
  * @returns data for list widget
  */
import {TeamsUserCredentialContext} from "../internal/singletonContext";
import {
  createMicrosoftGraphClientWithCredential,
  TeamsUserCredential,
  } from "@microsoft/teamsfx";
  import { ListModel } from "../models/listModel";
  import { loginAction } from "../internal/login";
export const getListData = async (): Promise<ListModel[]> => {
  await loginAction(["User.Read"]);
  let credential = TeamsUserCredentialContext.getInstance().getCredential();
  const graphClient = createMicrosoftGraphClientWithCredential(credential, 
  ["User.Read",
  ]);
  const me = await graphClient.api("/me").get();
  return [
    {
      id: me.id,
      title: me.displayName,
      content: me.mail,
    },
  ];
  // {
  //   id: "id1",
  //   title: "Sample title",
  //   content: "Sample description",
  // },
  // {
  //   id: "id2",
  //   title: "Sample title",
  //   content: "Sample description",
  // },
  // {
  //   id: "id3",
  //   title: "Sample title",
  //   content: "Sample description",
  // },
}

Перейдите в раздел Explorer>src>widgets>ListWidget.tsx.

Обновите , export default class ListWidget() чтобы добавить мини-приложение профиля пользователя.

 export default class ListWidget extends BaseWidget<any, IListWidgetState> {
   async getData(): Promise<IListWidgetState> {
     return { data: await getListData() };

Единый вход и API Graph отображает профиль пользователя, выполнившего вход, в мини-приложении списка.

Выполнение задачи

Осталось 10 мин

Ты придумала что-то вроде этого?

Снимок экрана: окончательные выходные данные панели мониторинга.

Поздравляем!

100% завершено

Вы завершили работу с этим руководством!

Поделиться через

Создание панели мониторинга в Teams

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

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

Обзор исходного кода приложения

Добавление мини-приложения на панель мониторинга

Определение модели данных

Создание службы извлечения данных

Создание файла мини-приложения

Добавление мини-приложения на панель мониторинга

Добавление единого входа и вызова API Graph

Добавление единого входа

Добавление API Graph вызова

Выполнение задачи

Поздравляем!