Dane organizacyjne: pobieranie plików, czatów i wysyłanie wiadomości do Teams

W dzisiejszym środowisku cyfrowym użytkownicy pracują z szeroką gamą danych organizacyjnych, w tym wiadomości e-mail, czatów, plików, wydarzeń kalendarza i nie tylko. Może to prowadzić do częstych zmian kontekstu — przełączania między zadaniami lub aplikacjami — co może zakłócić skupienie się i zmniejszyć produktywność. Na przykład użytkownik pracujący nad projektem może wymagać przełączenia się z bieżącej aplikacji do programu Outlook w celu znalezienia kluczowych szczegółów w wiadomości e-mail lub przełączenia się na OneDrive dla Firm w celu znalezienia powiązanego pliku. To działanie z powrotem i z powrotem zakłóca skupienie się i marnuje czas, który może być lepiej spędzony na zadaniu.

Aby zwiększyć wydajność, możesz zintegrować dane organizacyjne bezpośrednio z aplikacjami, których użytkownicy używają codziennie. Dzięki wprowadzeniu danych organizacji do aplikacji użytkownicy mogą bezproblemowo uzyskiwać dostęp do informacji i zarządzać nimi, minimalizując zmiany kontekstu i zwiększając produktywność. Ponadto ta integracja zapewnia cenne szczegółowe informacje i kontekst, umożliwiając użytkownikom podejmowanie świadomych decyzji i wydajniejszą pracę.

W tym ćwiczeniu wykonasz następujące czynności:

Dowiedz się, jak składnik internetowy mgt-search-results w zestawie narzędzi Microsoft Graph Może służyć do wyszukiwania plików.
Dowiedz się, jak wywołać program Microsoft Graph bezpośrednio w celu pobrania plików z OneDrive dla Firm i wiadomości czatu z usługi Microsoft Teams.
Dowiedz się, jak wysyłać wiadomości czatu do kanałów usługi Microsoft Teams przy użyciu programu Microsoft Graph.

Korzystanie z funkcji danych organizacyjnych

W poprzednim ćwiczeniu utworzono rejestrację aplikacji w usłudze Microsoft Entra ID i uruchomiono serwer aplikacji i serwer interfejsu API. Zaktualizowano również następujące wartości w .env pliku.
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Przed kontynuowaniem upewnij się, że wykonano poprzednie ćwiczenie .
Wróć do przeglądarki (http://localhost:4200). Jeśli jeszcze nie zalogowałeś się, wybierz pozycję Zaloguj się w nagłówku i zaloguj się przy użyciu użytkownika z dzierżawy deweloperów platformy Microsoft 365.
Uwaga / Notatka

Oprócz uwierzytelniania użytkownika składnik internetowy mgt-login pobiera również token dostępu, który może być używany przez program Microsoft Graph do uzyskiwania dostępu do plików, czatów, wiadomości e-mail, zdarzeń kalendarza i innych danych organizacji. Token dostępu zawiera zakresy (uprawnienia), takie jak Chat.ReadWrite, Files.Read.Alli inne, które pokazano wcześniej:
```
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']
});
```
Wybierz pozycję Wyświetl powiązaną zawartość dla wiersza Adatum Corporation w usłudze datagrid. Spowoduje to pobranie danych organizacji, takich jak pliki, czaty, wiadomości e-mail i zdarzenia kalendarza przy użyciu programu Microsoft Graph. Po załadowaniu danych będzie ona wyświetlana poniżej parametru datagrid w interfejsie z kartami. Ważne jest, aby wspomnieć, że w tym momencie nie widzisz żadnych danych, ponieważ nie dodano jeszcze żadnych plików, czatów, wiadomości e-mail ani wydarzeń kalendarza dla użytkownika w dzierżawie deweloperów platformy Microsoft 365. Naprawmy to w następnym kroku.
Twoja dzierżawa platformy Microsoft 365 może nie mieć żadnych powiązanych danych organizacyjnych dla firmy Adatum Corporation na tym etapie. Aby dodać przykładowe dane, wykonaj co najmniej jedną z następujących akcji:
- Dodaj pliki, odwiedzając https://onedrive.com i logując się przy użyciu poświadczeń dzierżawy dewelopera platformy Microsoft 365.
  - Wybierz pozycję Moje pliki w obszarze nawigacji po lewej stronie.
  - Wybierz pozycję + Dodaj nowy , a następnie pozycję Przekaż folder z menu.
  - Wybierz folder openai-acs-msgraph/customer documents z sklonowanego projektu.
- Dodaj wiadomości czatu i zdarzenia kalendarza, odwiedzając https://teams.microsoft.com i logując się przy użyciu poświadczeń dzierżawy dewelopera platformy Microsoft 365.
  - Wybierz pozycję Teams w obszarze nawigacji po lewej stronie.
  - Wybierz zespół i kanał.
  - Wybierz pozycję Rozpocznij wpis.
  - Wprowadź nowe zamówienie złożone dla Adatum Corporation dla tematu i dowolny dodatkowy tekst, który chcesz dodać w treści wiadomości. Wybierz przycisk Opublikuj .
    
    Możesz dodać dodatkowe wiadomości czatu, które wspominają inne firmy używane w aplikacji, takie jak Adventure Works Cycles, Contoso Pharmaceuticals i Tailwind Traders.
  - Wybierz pozycję Kalendarz w obszarze nawigacji po lewej stronie.
  - Wybierz pozycję Nowe spotkanie.
  - Wprowadź tekst "Meet with Adatum Corporation about project schedule" (Poznaj z firmą Adatum Corporation) jako tytuł i treść.
  - Wybierz Zapisz.
- Dodaj wiadomości e-mail, odwiedzając https://outlook.com i logując się przy użyciu poświadczeń dzierżawy dewelopera platformy Microsoft 365.
  - Wybierz pozycję Nowa poczta.
  - Wprowadź osobisty adres e-mail w polu Do .
  - Wprowadź nowe zamówienie złożone dla Adatum Corporation dla tematu i wszystko, co chcesz dla ciała.
  - Wybierz Wyślij.
Wróć do aplikacji w przeglądarce i odśwież stronę. Ponownie wybierz pozycję Wyświetl powiązaną zawartość dla wiersza Adatum Corporation . Dane powinny być teraz wyświetlane na kartach w zależności od zadań wykonywanych w poprzednim kroku.
Przyjrzyjmy się kodowi, który umożliwia funkcję danych organizacji w aplikacji. Aby pobrać dane, część po stronie klienta aplikacji używa tokenu dostępu pobranego przez składnik mgt-login , który został wcześniej przyjrzeny w celu wykonania wywołań do interfejsów API programu Microsoft Graph.

Eksplorowanie kodu wyszukiwania plików

Wskazówka

Jeśli używasz programu Visual Studio Code, możesz otwierać pliki bezpośrednio, wybierając pozycję:

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

Następnie wpisz nazwę pliku, który chcesz otworzyć.

Zacznijmy od przyjrzenia się sposobowi pobierania danych plików z OneDrive dla Firm. Otwórz files.component.html i pośmiń chwilę na przejrzenie kodu. Pełna ścieżka do pliku to client/src/app/files/files.component.html.
Znajdź składnik mgt-search-results i zanotuj następujące atrybuty:
```
<mgt-search-results 
    class="search-results" 
    entity-types="driveItem" 
    [queryString]="searchText"
    (dataChange)="dataChange($any($event))" 
/>
```
Składnik mgt-search-results jest częścią zestawu narzędzi Microsoft Graph Toolkit i jak wskazuje nazwa, jest używany do wyświetlania wyników wyszukiwania z programu Microsoft Graph. Składnik używa następujących funkcji w tym przykładzie:
- Atrybut służy do określania class , że search-results klasa CSS powinna być stosowana do składnika.
- Atrybut entity-types służy do określania typu danych do wyszukania. W tym przypadku wartość jest driveItem używana do wyszukiwania plików w OneDrive dla Firm.
- Atrybut queryString służy do określania terminu wyszukiwania. W takim przypadku wartość jest powiązana z searchText właściwością, która jest przekazywana do składnika plików , gdy użytkownik wybierze pozycję Wyświetl powiązaną zawartość dla wiersza w usłudze datagrid. Nawiasy kwadratowe wokół queryString wskazują, że właściwość jest powiązana z wartością searchText .
- Zdarzenie dataChange jest uruchamiane po zmianie wyników wyszukiwania. W takim przypadku funkcja klienta o nazwie dataChange() jest wywoływana w składniku plików , a dane zdarzenia są przekazywane do funkcji. Nawias wokół dataChange wskazuje, że zdarzenie jest powiązane z funkcją dataChange() .
- Ponieważ nie podano szablonu niestandardowego, domyślny szablon wbudowany mgt-search-results jest używany do wyświetlania wyników wyszukiwania.
Alternatywą dla używania składników, takich jak mgt-search-results, jest wywołanie interfejsów API programu Microsoft Graph bezpośrednio przy użyciu kodu. Aby zobaczyć, jak to działa, otwórz plik graph.service.ts i znajdź searchFiles() funkcję. Pełna ścieżka do pliku to client/src/app/core/graph.service.ts.
- Zauważysz, że query parametr jest przekazywany do funkcji. Jest to termin wyszukiwania, który jest przekazywany, gdy użytkownik wybiera pozycję Wyświetl powiązaną zawartość dla wiersza w usłudze datagrid. Jeśli termin wyszukiwania nie zostanie przekazany, zwracana jest pusta tablica.
```
async searchFiles(query: string) {
    const files: DriveItem[] = [];
    if (!query) return files;

    ...
}
```
- Następnie zostanie utworzony filtr, który definiuje typ wyszukiwania do wykonania. W takim przypadku kod wyszukuje pliki w OneDrive dla Firm, więc driveItem jest używany tak jak pokazano wcześniej w składnikumgt-search-results. Jest to takie samo, jak przekazywanie driveItem do entity-types składnika mgt-search-results , który został wyświetlony wcześniej. Parametr query jest następnie dodawany do filtru queryString wraz z parametrem ContentType:Document.
```
const filter = {
    "requests": [
        {
            "entityTypes": [
                "driveItem"
            ],
            "query": {
                "queryString": `${query} AND ContentType:Document`
            }
        }
    ]
};
```
- Następnie wykonano wywołanie interfejsu /search/query API programu Microsoft Graph przy użyciu Providers.globalProvider.graph.client.api() funkcji . Obiekt filter jest przekazywany do post() funkcji, która wysyła dane do interfejsu API.
```
const searchResults = await Providers.globalProvider.graph.client.api('/search/query').post(filter);
```
- Wyniki wyszukiwania są następnie iterowane w celu zlokalizowania hits. Każdy hit zawiera informacje o odnalezionym dokumencie. Właściwość o nazwie resource zawiera metadane dokumentu i jest dodawana do tablicy 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);
            }
        }
    }
}
```
- Tablica files jest następnie zwracana do obiektu wywołującego.
```
return files;
```
Patrząc przez ten kod, możesz zobaczyć, że omówiony wcześniej składnik internetowy mgt-search-results wykonuje wiele pracy dla Ciebie i znacznie zmniejsza ilość kodu, który trzeba napisać! Jednak mogą istnieć scenariusze, w których chcesz wywołać program Microsoft Graph bezpośrednio, aby mieć większą kontrolę nad danymi wysyłanymi do interfejsu API lub sposobem przetwarzania wyników.
Otwórz plik files.component.ts i znajdź search() funkcję. Pełna ścieżka do pliku to client/src/app/files/files.component.ts.

Mimo że treść tej funkcji jest oznaczona jako komentarz ze względu na używany składnik mgt-search-results , funkcja może służyć do wywołania programu Microsoft Graph, gdy użytkownik wybierze pozycję Wyświetl powiązaną zawartość dla wiersza w usłudze datagrid. Funkcja search() wywołuje searchFiles() graph.service.ts i przekazuje query do niego parametr (nazwa firmy w tym przykładzie). Wyniki wyszukiwania są następnie przypisywane do data właściwości składnika.
```
override async search(query: string) {
    this.data = await this.graphService.searchFiles(query);
}
```
Składnik plików może następnie użyć data właściwości , aby wyświetlić wyniki wyszukiwania. Można to obsłużyć przy użyciu niestandardowych powiązań HTML lub za pomocą innej kontrolki zestawu narzędzi Microsoft Graph Toolkit o nazwie mgt-file-list. Oto przykład powiązania data właściwości z jedną z właściwości składnika o nazwie files i obsługi itemClick zdarzenia podczas interakcji użytkownika z plikiem.
```
<mgt-file-list (itemClick)="itemClick($any($event))" [files]="data"></mgt-file-list>
```
Niezależnie od tego, czy zdecydujesz się użyć składnika mgt-search-results pokazanego wcześniej, czy napisać kod niestandardowy do wywołania programu Microsoft Graph, będzie zależeć od konkretnego scenariusza. W tym przykładzie składnik mgt-search-results służy do uproszczenia kodu i zmniejszenia ilości pracy, którą należy wykonać.

Eksplorowanie kodu wyszukiwania wiadomości czatu w aplikacji Teams

Wróć do graph.service.ts i znajdź searchChatMessages() funkcję. Zobaczysz, że jest ona podobna do searchFiles() funkcji, którą wcześniej przyjrzeno.
- Publikuje on filtry danych do interfejsu /search/query API programu Microsoft Graph i konwertuje wyniki na tablicę obiektów, które zawierają informacje o teamIdobiekcie , channelIdi messageId zgodne z terminem wyszukiwania.
- Aby pobrać komunikaty kanału usługi Teams, drugie wywołanie jest wykonywane do interfejsu /teams/${chat.teamId}/channels/${chat.channelId}/messages/${chat.messageId}teamIdchannelIdAPI i , i messageId są przekazywane. Spowoduje to zwrócenie pełnych szczegółów komunikatu.
- Wykonywane są dodatkowe zadania filtrowania, a wynikowe komunikaty są zwracane z searchChatMessages() do obiektu wywołującego.

Otwórz plik chats.component.ts i znajdź search() funkcję. Pełna ścieżka do pliku to client/src/app/chats/chats.component.ts. Funkcja search() wywołuje searchChatMessages() graph.service.ts i przekazuje query do niego parametr .

override async search(query: string) {
    this.data = await this.graphService.searchChatMessages(query);
}

Wyniki wyszukiwania są przypisywane do data właściwości składnika, a powiązanie danych służy do iterowania przez tablicę wyników i renderowania danych. W tym przykładzie użyto składnika karty Angular Material do wyświetlenia wyników wyszukiwania.

@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-subtitle [innerHTML]="chatMessage.body"></mat-card-subtitle> -->
                </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>
}

Wyświetlanie czatów w aplikacji Teams

Wysyłanie wiadomości do kanału usługi Microsoft Teams

Oprócz wyszukiwania wiadomości czatów w aplikacji Microsoft Teams aplikacja umożliwia również użytkownikowi wysyłanie wiadomości do kanału usługi Microsoft Teams. Można to zrobić, wywołując /teams/${teamId}/channels/${channelId}/messages punkt końcowy programu Microsoft Graph.

W poniższym kodzie zobaczysz, że zostanie utworzony adres URL zawierający teamId wartości i channelId . Wartości zmiennych środowiskowych są używane dla identyfikatora zespołu i identyfikatora kanału w tym przykładzie, ale te wartości mogą być również pobierane dynamicznie przy użyciu programu Microsoft Graph. Stała body zawiera komunikat do wysłania. Następnie zostanie wykonane żądanie POST, a wyniki zostaną zwrócone do elementu wywołującego.

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'
    };
}

Korzystanie z tego typu funkcji w programie Microsoft Graph zapewnia doskonały sposób ulepszania produktu użytkownika dzięki umożliwieniu użytkownikom interakcji z usługą Microsoft Teams bezpośrednio z aplikacji, z której już korzystają.

Następny krok

Dane organizacyjne: pobieranie wiadomości e-mail i zdarzeń kalendarza

Sprzężenie zwrotne

Czy ta strona była pomocna?

Last updated on 2025-06-13