Организационные данные: получение файлов и чатов, а также отправка сообщений в Teams.

В современной цифровой среде пользователи работают с широким набором данных организации, включая сообщения электронной почты, чаты, файлы, события календаря и многое другое. Это может привести к частым сменам контекста — переключению между задачами или приложениями, что может нарушить фокус и снизить производительность. Например, пользователю, работающему над проектом, может потребоваться переключиться с текущего приложения в Outlook, чтобы найти важные сведения в сообщении электронной почты или переключиться на OneDrive для бизнеса, чтобы найти связанный файл. Это действие назад и вперед нарушает фокус и тратит время, которое может быть лучше потрачено на задачу на руку.

Чтобы повысить эффективность, вы можете интегрировать организационные данные непосредственно в приложения, которые пользователи используют ежедневно. Путем привлечения данных организации к приложениям пользователи могут получать доступ к информации и управлять ими более просто, минимизируя сдвиги контекста и повышая производительность. Кроме того, эта интеграция предоставляет ценные аналитические сведения и контекст, что позволяет пользователям принимать обоснованные решения и эффективно работать.

В этом упражнении вы выполните следующие действия.

Узнайте, как веб-компонент mgt-search-results в Microsoft Graph Toolkit можно использовать для поиска файлов.
Узнайте, как вызвать Microsoft Graph непосредственно для получения файлов из OneDrive для бизнеса и сообщений чата из Microsoft Teams.
Узнайте, как отправлять сообщения чата в каналы Microsoft Teams с помощью Microsoft Graph.

Использование функции данных организации

В предыдущем упражнении вы создали регистрацию приложения в идентификаторе Microsoft Entra и запустили сервер приложений и сервер API. Вы также обновили следующие значения в .env файле.
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Прежде чем продолжить, убедитесь, что вы выполнили предыдущее упражнение .
Вернитесь в браузер (http://localhost:4200). Если вы еще не вошли, выберите вход в заголовок и войдите с помощью пользователя из клиента разработчика Microsoft 365.
Замечание

Помимо проверки подлинности пользователя, веб-компонент mgt-login также получает маркер доступа, который может использоваться Microsoft Graph для доступа к файлам, чатам, сообщениям электронной почты, событиям календаря и другим данным организации. Маркер доступа содержит области (разрешения), такие как Chat.ReadWrite, Files.Read.Allи другие, которые вы видели ранее:
```
Providers.globalProvider = new Msal2Provider({
    clientId: ENTRAID_CLIENT_ID, // retrieved from .env file
    scopes: ['User.Read', 'Presence.Read', 'Chat.ReadWrite', 'Calendars.Read', 
             'ChannelMessage.Read.All', 'ChannelMessage.Send', 'Files.Read.All', 'Mail.Read']
});
```
Выберите "Просмотреть связанное содержимое " для строки Adatum Corporation в datagrid. Это приведет к получению данных организации, таких как файлы, чаты, сообщения электронной почты и события календаря с помощью Microsoft Graph. После загрузки данных он будет отображаться под datagrid в интерфейсе табуляции. Важно отметить, что на данный момент вы не видите никаких данных, так как вы еще не добавили какие-либо файлы, чаты, сообщения электронной почты или события календаря для пользователя в клиенте разработчика Microsoft 365. Давайте исправим это на следующем шаге.
На этом этапе у клиента Microsoft 365 могут не быть связанные данные организации для корпорации Adatum . Чтобы добавить некоторые примеры данных, выполните по крайней мере одно из следующих действий:
- Добавьте файлы, посещая https://onedrive.com и выполнив вход с помощью учетных данных клиента разработчика Microsoft 365.
  - Выберите "Мои файлы " в области навигации слева.
  - Выберите +Добавить новую , а затем отправьте папку из меню.
  - Выберите папку документов openai-acs-msgraph/customer из клонированного проекта.
- Добавьте сообщения чата и события календаря, посещая https://teams.microsoft.com и выполнив вход с помощью учетных данных клиента Разработчика Microsoft 365.
  - Выберите Teams в области навигации слева.
  - Выберите команду и канал.
  - Нажмите кнопку "Пуск записи".
  - Введите новый заказ для Adatum Corporation для темы и любого дополнительного текста, который вы хотите добавить в текст сообщения. Нажмите кнопку "Опубликовать ".
    
    Вы можете добавить дополнительные сообщения чата, которые упоминают другие компании, используемые в приложении, такие как Adventure Works Cycles, Contoso Pharmaceuticals и Tailwind Traders.
  - Выберите "Календарь " в области навигации слева.
  - Выберите "Создать собрание".
  - Введите "Встреча с Adatum Corporation о расписании проекта" для названия и текста.
  - Нажмите кнопку "Сохранить".
- Добавьте сообщения электронной почты, посещая https://outlook.com и выполнив вход с помощью учетных данных клиента Разработчика Microsoft 365.
  - Выберите "Создать почту".
  - Введите личный адрес электронной почты в поле "To ".
  - Введите новый заказ, размещенный для Adatum Corporation для темы и все, что вы хотите для тела.
  - Выберите Отправить.
Вернитесь в приложение в браузере и обновите страницу. Снова выберите "Просмотреть связанное содержимое" для строки "Корпорация Adatum". Теперь на вкладках должны отображаться данные в зависимости от того, какие задачи вы выполнили на предыдущем шаге.
Давайте рассмотрим код, который включает функцию данных организации в приложении. Чтобы получить данные, клиентская часть приложения использует маркер доступа, полученный компонентом mgt-login , который вы рассмотрели ранее для вызова API Microsoft Graph.

Изучение кода поиска файлов

Подсказка

Если вы используете Visual Studio Code, вы можете открывать файлы напрямую, выбрав:

Windows/Linux: CTRL +P
Mac: Cmd + P

Затем введите имя файла, который нужно открыть.

Начнем с того, как данные файла извлекаются из OneDrive для бизнеса. Откройте files.component.html и просмотрите код. Полный путь к файлу — client/src/app/files/files.component.html.
Найдите компонент mgt-search-results и обратите внимание на следующие атрибуты:
```
<mgt-search-results 
    class="search-results" 
    entity-types="driveItem" 
    [queryString]="searchText"
    (dataChange)="dataChange($any($event))" 
/>
```
Компонент mgt-search-results является частью Набора средств Microsoft Graph, и, как подразумевает имя, оно используется для отображения результатов поиска из Microsoft Graph. Компонент использует следующие функции в этом примере:
- Атрибут class используется для указания того, что search-results класс CSS должен применяться к компоненту.
- Атрибут entity-types используется для указания типа данных для поиска. В этом случае значение используется driveItem для поиска файлов в OneDrive для бизнеса.
- Атрибут queryString используется для указания термина поиска. В этом случае значение привязано к searchText свойству, передаваемому компоненту файлов , когда пользователь выбирает представление связанного содержимого для строки в datagrid. Квадратные скобки вокруг queryString указывают, что свойство привязано к значению searchText .
- Событие dataChange запускается при изменении результатов поиска. В этом случае в компоненте файловdataChange()функция клиента, а данные события передаются функции. Круглые скобки dataChange указывают на то, что событие привязано к dataChange() функции.
- Так как не указан пользовательский шаблон, встроенный mgt-search-results шаблон по умолчанию используется для отображения результатов поиска.
Альтернативой использованию компонентов, таких как mgt-search-results, является вызов API Microsoft Graph непосредственно с помощью кода. Чтобы узнать, как это работает, откройте файл graph.service.ts и найдите функцию searchFiles() . Полный путь к файлу — client/src/app/core/graph.service.ts.
- Вы заметите, что query параметр передается функции. Это поисковый термин, передаваемый по мере выбора пользователем представления связанного содержимого для строки в datagrid. Если поисковый запрос не передается, возвращается пустой массив.
```
async searchFiles(query: string) {
    const files: DriveItem[] = [];
    if (!query) return files;

    ...
}
```
- Затем создается фильтр, определяющий тип выполняемого поиска. В этом случае код ищет файлы в OneDrive для бизнеса поэтому driveItem используется так же, как вы видели ранее с компонентомmgt-search-results. Это то же самое, что передача driveItementity-types в компонент mgt-search-results , который вы видели ранее. Затем параметр query добавляется в queryString фильтр вместе с ContentType:Document.
```
const filter = {
    "requests": [
        {
            "entityTypes": [
                "driveItem"
            ],
            "query": {
                "queryString": `${query} AND ContentType:Document`
            }
        }
    ]
};
```
- Затем вызов выполняется в /search/query API Microsoft Graph с помощью Providers.globalProvider.graph.client.api() функции. Объект filter передается post() функции, которая отправляет данные в API.
```
const searchResults = await Providers.globalProvider.graph.client.api('/search/query').post(filter);
```
- Затем результаты поиска итерируются для поиска hits. Каждый hit содержит сведения о найденном документе. Свойство с именем resource содержит метаданные документа и добавляется в files массив.
```
if (searchResults.value.length !== 0) {
    for (const hitContainer of searchResults.value[0].hitsContainers) {
        if (hitContainer.hits) {
            for (const hit of hitContainer.hits) {
                files.push(hit.resource);
            }
        }
    }
}
```
- Затем files массив возвращается вызывающей объекту.
```
return files;
```
Просматривая этот код, вы можете увидеть, что веб-компонент mgt-search-results , который вы изучили ранее, выполняет большую работу и значительно сокращает объем кода, который необходимо написать! Однако могут возникнуть сценарии, в которых требуется вызвать Microsoft Graph напрямую, чтобы получить больше контроля над данными, отправленными в API, или способом обработки результатов.
Откройте файл files.component.ts и найдите функцию search() . Полный путь к файлу — client/src/app/files/files.component.ts.

Хотя текст этой функции закомментирован из-за используемого компонента mgt-search-results , функция может использоваться для вызова Microsoft Graph при выборе пользователем представления связанного содержимого для строки в datagrid. Функция search() вызывается searchFiles() в graph.service.ts и передает query параметр в него (имя компании в этом примере). Затем результаты поиска назначаются data свойству компонента.
```
override async search(query: string) {
    this.data = await this.graphService.searchFiles(query);
}
```
Затем компонент файлов может использовать data свойство для отображения результатов поиска. Это можно обрабатывать с помощью пользовательских привязок HTML или с помощью другого элемента управления Microsoft Graph Toolkit с именем mgt-file-list. Ниже приведен пример привязки data свойства к одному из свойств компонента с именем files и обработкой itemClick события по мере взаимодействия пользователя с файлом.
```
<mgt-file-list (itemClick)="itemClick($any($event))" [files]="data"></mgt-file-list>
```
Независимо от того, следует ли использовать компонент mgt-search-results , показанный ранее или написать пользовательский код для вызова Microsoft Graph, будет зависеть от конкретного сценария. В этом примере компонент mgt-search-results используется для упрощения кода и уменьшения объема необходимой работы.

Изучение кода поиска сообщений чата Teams

Вернитесь к graph.service.ts и найдите функцию searchChatMessages() . Вы увидите, что это похоже на searchFiles() функцию, которую вы посмотрели ранее.
- Он публикует данные в API Microsoft Graph /search/query и преобразует результаты в массив объектов, имеющих сведения о teamId, channelIdи messageId которые соответствуют термину поиска.
- Чтобы получить сообщения канала Teams, в API и /teams/${chat.teamId}/channels/${chat.channelId}/messages/${chat.messageId}teamIdAPI выполняется channelId второй вызов, который передается.messageId Возвращает полные сведения о сообщении.
- Выполняются дополнительные задачи фильтрации, а полученные сообщения возвращаются вызывающей searchChatMessages() программе.
Откройте файл chats.component.ts и найдите функцию search() . Полный путь к файлу — client/src/app/chats/chats.component.ts. Функция search() вызывается searchChatMessages() в graph.service.ts и передает query параметр в него.
```
override async search(query: string) {
    this.data = await this.graphService.searchChatMessages(query);
}
```
Результаты поиска назначаются data свойству компонента и привязке данных используются для итерации по массиву результатов и отрисовки данных. В этом примере для отображения результатов поиска используется компонент карточки Angular Material .
```
@if (this.data.length) {
    <div>
        @for (chatMessage of this.data;track chatMessage.id) {
            <mat-card>
                <mat-card-header>
                    <mat-card-title [innerHTML]="chatMessage.summary"></mat-card-title>
                    
                </mat-card-header>
                <mat-card-actions>
                    <a mat-stroked-button color="basic" [href]="chatMessage.webUrl" target="_blank">View Message</a>
                </mat-card-actions>
            </mat-card>
        }
    </div>
}
```

Отправка сообщения в канал Microsoft Teams

Помимо поиска сообщений чата Microsoft Teams, приложение также позволяет пользователю отправлять сообщения в канал Microsoft Teams. Это можно сделать, вызвав конечную точку /teams/${teamId}/channels/${channelId}/messages Microsoft Graph.

В следующем коде вы увидите, что создается URL-адрес, включающий teamId значения и channelId значения. Значения переменной среды используются для идентификатора команды и идентификатора канала в этом примере, но эти значения могут быть динамически получены, а также с помощью Microsoft Graph. Константа body содержит сообщение для отправки. Затем выполняется запрос POST, и результаты возвращаются вызывающей объекту.

async sendTeamsChat(message: string): Promise<TeamsDialogData> {
    if (!message) new Error('No message to send.');
    if (!TEAM_ID || !CHANNEL_ID) new Error('Team ID or Channel ID not set in environment variables. Please set TEAM_ID and CHANNEL_ID in the .env file.');

    const url = `https://graph.microsoft.com/v1.0/teams/${TEAM_ID}/channels/${CHANNEL_ID}/messages`;
    const body = {
        "body": {
            "contentType": "html",
            "content": message
        }
    };
    const response = await Providers.globalProvider.graph.client.api(url).post(body);
    return {
        id: response.id,
        teamId: response.channelIdentity.teamId,
        channelId: response.channelIdentity.channelId,
        message: response.body.content,
        webUrl: response.webUrl,
        title: 'Send Teams Chat'
    };
}

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

Следующий шаг

Организационные данные: получение сообщений электронной почты и событий календаря

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2025-06-13