OpenAI-, communicatie- en organisatiegegevensfuncties integreren in een Line-Of-Business-app

Artikel
Developer (Gevorderd)
136 minuten om te voltooien

Niveau: Tussenliggend

In deze zelfstudie ziet u hoe Azure OpenAI, Azure Communication Services en Microsoft Graph/Microsoft Graph Toolkit kunnen worden geïntegreerd in een LOB-toepassing (Line-Of-Business) om de gebruikersproductiviteit te verbeteren, de gebruikerservaring te verhogen en LOB-apps naar het volgende niveau te brengen. Belangrijke functies in de toepassing zijn:

AI: gebruikers in staat stellen vragen te stellen in natuurlijke taal en hun antwoorden te converteren naar SQL die kunnen worden gebruikt om een query uit een database uit te voeren, gebruikers toestaan regels te definiëren die kunnen worden gebruikt om automatisch e-mail- en sms-berichten te genereren en te leren hoe natuurlijke taal kan worden gebruikt om gegevens op te halen uit uw eigen aangepaste gegevensbronnen. Azure OpenAI wordt gebruikt voor deze functies.
Communicatie: telefoongesprekken in de app inschakelen voor klanten en functionaliteit voor e-mail/sms-berichten met behulp van Azure Communication Services.
Organisatiegegevens: haal gerelateerde organisatiegegevens op die gebruikers mogelijk nodig hebben (documenten, chats, e-mailberichten, agendagebeurtenissen) terwijl ze met klanten werken om contextwisselingen te voorkomen. Als u toegang verleent tot dit type organisatiegegevens, hoeft de gebruiker niet over te schakelen naar Outlook, Teams, OneDrive, andere aangepaste apps, hun telefoon, enzovoort, omdat de specifieke gegevens en functionaliteit die ze nodig hebben, rechtstreeks in de app worden geleverd. Microsoft Graph en Microsoft Graph Toolkit worden gebruikt voor deze functie.

De toepassing is een eenvoudige app voor klantbeheer waarmee gebruikers hun klanten en gerelateerde gegevens kunnen beheren. Het bestaat uit een front-end die is gebouwd met Behulp van TypeScript waarmee back-end-API's worden aangeroepen om gegevens op te halen, te communiceren met AI-functionaliteit, e-mail/sms-berichten te verzenden en organisatiegegevens op te halen. Hier volgt een overzicht van de toepassingsoplossing die u in deze zelfstudie doorloopt:

Overzicht van Microsoft Cloud-scenario's

In de zelfstudie wordt u begeleid bij het instellen van de vereiste Azure- en Microsoft 365-resources. U wordt ook begeleid bij de code die wordt gebruikt voor het implementeren van de ai-, communicatie- en organisatiegegevensfuncties. Hoewel u geen code hoeft te kopiëren en plakken, kunt u in sommige oefeningen code wijzigen om verschillende scenario's uit te proberen.

Wat u in deze zelfstudie gaat bouwen

Kies uw eigen avontuur

U kunt de volledige zelfstudie van begin tot eind voltooien of specifieke onderwerpen van belang voltooien. De zelfstudie is onderverdeeld in de volgende onderwerpen:

Kloon de projectoefening (vereiste oefening).
AI-oefeningen: Maak een Azure OpenAI-resource en gebruik deze om natuurlijke taal te converteren naar SQL, e-mail-/sms-berichten te genereren en met uw eigen gegevens en documenten te werken.
Communicatieoefeningen: Maak een Azure Communication Services-resource en gebruik deze om telefoongesprekken te voeren vanuit de app en e-mail/sms-berichten te verzenden.
Oefeningen voor organisatiegegevens: maak een registratie van de Microsoft Entra-id-app, zodat Microsoft Graph en Microsoft Graph Toolkit kunnen worden gebruikt om organisatiegegevens in de toepassing te verifiëren en op te halen.

Kies je eigen avontuur. Voltooi de volledige zelfstudie of selecteer specifieke onderwerpgebieden.

Vereisten

Node - Node 20+ en npm 10+ wordt gebruikt voor dit project
git
Visual Studio Code (hoewel Visual Studio Code wordt aanbevolen, kan elke editor worden gebruikt)
Azure-abonnement
Microsoft 365-tenant voor ontwikkelaars
Docker Desktop of een andere OCI-compatibele containerruntime (Open Container Initiative), zoals Podman of nerdctl die geschikt is voor het uitvoeren van een container.

Microsoft Cloud Technologies die in deze zelfstudie worden gebruikt

Azure Communication Services
Azure OpenAI Service
Microsoft Entra ID
Microsoft Graph
Werkset voor Microsoft Graph

Het project klonen

132 minuten resterend

Het codeproject dat in deze zelfstudie wordt gebruikt, is beschikbaar op https://github.com/microsoft/MicrosoftCloud. De opslagplaats van het project bevat zowel client- als servercode die nodig is om het project uit te voeren, zodat u de geïntegreerde functies met betrekking tot kunstmatige intelligentie (AI), communicatie en organisatiegegevens kunt verkennen. Daarnaast fungeert het project als resource om u te helpen bij het opnemen van vergelijkbare functies in uw eigen toepassingen.

In deze oefening gaat u het volgende doen:

Kloon de GitHub-opslagplaats.
Voeg een .env-bestand toe aan het project en werk het bij.

Voordat u doorgaat, moet u ervoor zorgen dat alle vereisten zijn geïnstalleerd en geconfigureerd zoals beschreven in de sectie Vereisten van deze zelfstudie.

De GitHub-opslagplaats klonen en een `.env` bestand maken

Voer de volgende opdracht uit om de Microsoft Cloud GitHub-opslagplaats naar uw computer te klonen.
```
git clone https://github.com/microsoft/MicrosoftCloud
```
Open de map MicrosoftCloud/samples/openai-acs-msgraph in Visual Studio Code.

Notitie

Hoewel we Visual Studio Code in deze zelfstudie gaan gebruiken, kan elke code-editor worden gebruikt om met het voorbeeldproject te werken.
Let op de volgende mappen en bestanden:
- client: toepassingscode aan de clientzijde.
- server: API-code aan serverzijde.
- docker-compose.yml: wordt gebruikt om een lokale PostgreSQL-database uit te voeren.
Wijzig de naam van het .env.example in de hoofdmap van het project in .env.

Open het .env-bestand en neem even de tijd om de sleutels te bekijken die zijn opgenomen:

ENTRAID_CLIENT_ID=
TEAM_ID=
CHANNEL_ID=
OPENAI_API_KEY=
OPENAI_ENDPOINT=
OPENAI_MODEL=gpt-4o
OPENAI_API_VERSION=2024-05-01-preview
POSTGRES_USER=
POSTGRES_PASSWORD=
ACS_CONNECTION_STRING=
ACS_PHONE_NUMBER=
ACS_EMAIL_ADDRESS=
CUSTOMER_EMAIL_ADDRESS=
CUSTOMER_PHONE_NUMBER=
API_PORT=3000
AZURE_AI_SEARCH_ENDPOINT=
AZURE_AI_SEARCH_KEY=
AZURE_AI_SEARCH_INDEX=

Werk de volgende waarden bij in .env. Deze waarden worden door de API-server gebruikt om verbinding te maken met de lokale PostgreSQL-database.
```
POSTGRES_USER=web
POSTGRES_PASSWORD=web-password
```
Nu u het project hebt geïmplementeerd, gaan we enkele van de toepassingsfuncties uitproberen en leren hoe ze zijn gebouwd. Selecteer de onderstaande knop Volgende om door te gaan of naar een specifieke oefening te gaan met behulp van de inhoudsopgave.

AI: Een Azure OpenAI-resource maken en een model implementeren

127 minuten resterend

Als u aan de slag wilt gaan met Azure OpenAI in uw toepassingen, moet u een Azure OpenAI-service maken en een model implementeren dat kan worden gebruikt om taken uit te voeren, zoals het converteren van natuurlijke taal naar SQL, het genereren van inhoud van e-mail/sms-berichten en meer.

In deze oefening gaat u het volgende doen:

Maak een Azure OpenAI-serviceresource.
Een model implementeren.
Werk het .env-bestand bij met waarden uit uw Azure OpenAI-serviceresource.

Overzicht van Microsoft Cloud-scenario's

Een Azure OpenAI-serviceresource maken

Ga naar Azure Portal in uw browser en meld u aan.
Voer openai in de zoekbalk boven aan de portalpagina in en selecteer Azure OpenAI in de opties die worden weergegeven.
Selecteer Maken in de werkbalk.

Notitie

Hoewel deze zelfstudie zich richt op Azure OpenAI, kunt u deze sectie overslaan en rechtstreeks naar de sectie .env File van het project bijwerken hieronder gaan als u een OpenAI-API-sleutel hebt en deze wilt gebruiken. Wijs uw OpenAI API-sleutel toe aan OPENAI_API_KEY in het .env-bestand (u kunt alle andere .env instructies met betrekking tot OpenAI negeren).
Azure OpenAI-modellen zijn beschikbaar in specifieke regio's. Ga naar het azure OpenAI-modelbeschikbaarheidsdocument voor meer informatie over welke regio's het gpt-4o-model ondersteunen dat in deze zelfstudie wordt gebruikt.
Voer de volgende taken uit:
- Selecteer uw Azure-abonnement.
- Selecteer de resourcegroep die u wilt gebruiken (maak indien nodig een nieuwe resourcegroep).
- Selecteer een regio waarin het gpt-4o-model wordt ondersteund op basis van het document dat u eerder hebt bekeken.
- Voer de resourcenaam in. Dit moet een unieke waarde zijn.
- Selecteer de prijscategorie Standard S0 .
Selecteer Volgende totdat u bij het scherm Controleren en verzenden bent. Selecteer Maken.
Zodra uw Azure OpenAI-resource is gemaakt, navigeert u ernaartoe en selecteert u Resourcebeheer -->Sleutels en eindpunt.
Zoek de waarden VOOR SLEUTEL 1 en Eindpunt . U gebruikt beide waarden in de volgende sectie, dus kopieer ze naar een lokaal bestand.
Selecteer Resource Management -->Modelimplementaties.
Selecteer de knop Implementaties beheren om naar Azure OpenAI Studio te gaan.
Selecteer Model implementeren -->Basismodel implementeren op de werkbalk.
Selecteer gpt-4o in de lijst met modellen en selecteer Bevestigen.

Notitie

Azure OpenAI ondersteunt verschillende typen modellen. Elk model kan worden gebruikt om verschillende scenario's af te handelen.
Het volgende dialoogvenster wordt weergegeven. Neem even de tijd om de standaardwaarden te bekijken die worden opgegeven.
Wijzig de waarde tokens per minuutsnelheidslimiet (duizenden) in 100.000. Hierdoor kunt u meer aanvragen naar het model indienen en voorkomen dat u de frequentielimiet bereikt terwijl u de volgende stappen uitvoert.
Selecteer Implementeren.
Zodra het model is geïmplementeerd, selecteert u Playgrounds -->Chat.
In de vervolgkeuzelijst Implementatie moet het gpt-4o-model worden weergegeven.
Neem even de tijd om de tekst van het systeembericht te lezen die is opgegeven. Dit vertelt het model hoe het moet fungeren als de gebruiker ermee communiceert.
Zoek het tekstvak in het chatgebied en voer Samenvatten wat Generatieve AI is en hoe het kan worden gebruikt. Selecteer Enter om het bericht naar het model te verzenden en een antwoord te laten genereren.
Experimenteer met andere prompts en antwoorden. Voer bijvoorbeeld een korte geschiedenis in over het kapitaal van Frankrijk en let op het antwoord dat wordt gegenereerd.

Het projectbestand bijwerken `.env`

Ga terug naar Visual Studio Code en open het .env bestand in de hoofdmap van het project.
Kopieer de waarde SLEUTEL 1 uit uw Azure OpenAI-resource en wijs deze OPENAI_API_KEY toe aan het .env-bestand in de hoofdmap van de map openai-acs-msgraph :
```
OPENAI_API_KEY=<KEY_1_VALUE>
```
Kopieer de *Eindpuntwaarde en wijs deze toe in OPENAI_ENDPOINT het .env-bestand . Verwijder het / teken uit het einde van de waarde als deze aanwezig is.
```
OPENAI_ENDPOINT=<ENDPOINT_VALUE>
```
Notitie

U ziet dat de waarden al OPENAI_MODEL OPENAI_API_VERSION zijn ingesteld in het .env-bestand . De modelwaarde is ingesteld op gpt-4o die overeenkomt met de naam van de modelimplementatie die u eerder in deze oefening hebt gemaakt. De API-versie wordt ingesteld op een ondersteunde waarde die is gedefinieerd in de Referentiedocumentatie van Azure OpenAI.
Sla het .env-bestand op.

De Toepassingsservices starten

Het is tijd om uw toepassingsservices te starten, waaronder de database, API-server en webserver.

In de volgende stappen maakt u drie terminalvensters in Visual Studio Code.
Klik met de rechtermuisknop op het .env-bestand in de lijst met Visual Studio Code-bestanden en selecteer Openen in geïntegreerde terminal. Zorg ervoor dat uw terminal zich in de hoofdmap van het project bevindt - openai-acs-msgraph - voordat u doorgaat.
Kies een van de volgende opties om de PostgreSQL-database te starten:
- Als Docker Desktop is geïnstalleerd en wordt uitgevoerd, voert u deze uit docker-compose up in het terminalvenster en drukt u op Enter.
- Als Podman met podman-compose is geïnstalleerd en uitgevoerd, voert u deze uit podman-compose up in het terminalvenster en drukt u op Enter.
- Als u de PostgreSQL-container rechtstreeks wilt uitvoeren met docker Desktop, Podman, nerdctl of een andere containerruntime die u hebt geïnstalleerd, voert u de volgende opdracht uit in het terminalvenster:
  - Mac, Linux of Windows-subsysteem voor Linux (WSL):
```
[docker | podman | nerdctl] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v $(pwd)/data:/var/lib/postgresql/data -p 5432:5432 postgres
```
  - Windows met PowerShell:
```
[docker | podman] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v ${PWD}/data:/var/lib/postgresql/data -p 5432:5432 postgres
```
Zodra de databasecontainer is gestart, drukt u op het + pictogram in de werkbalk visual Studio Code Terminal om een tweede terminalvenster te maken.
cd in de map server/typescript en voer de volgende opdrachten uit om de afhankelijkheden te installeren en de API-server te starten.
- npm install
- npm start
Druk nogmaals op het + pictogram op de werkbalk van visual Studio Code Terminal om een derde terminalvenster te maken.
cd voer in de clientmap de volgende opdrachten uit om de afhankelijkheden te installeren en de webserver te starten.
- npm install
- npm start
Er wordt een browser gestart en u wordt naar http://localhost:4200.

AI: Natuurlijke taal naar SQL

122 minuten resterend

De aanhalingsteken 'Alleen omdat u niet kunt betekenen dat u moet' is een handige handleiding bij het nadenken over AI-mogelijkheden. Met de natuurlijke taal van Azure OpenAI voor SQL-functies kunnen gebruikers bijvoorbeeld databasequery's in eenvoudig Engels maken. Dit kan een krachtig hulpprogramma zijn om hun productiviteit te verbeteren. Krachtig betekent echter niet altijd passend of veilig. In deze oefening wordt gedemonstreert hoe u deze AI-functie kunt gebruiken, terwijl u ook belangrijke overwegingen bespreekt waarmee u rekening moet houden voordat u besluit deze te implementeren.

Hier volgt een voorbeeld van een query in natuurlijke taal die kan worden gebruikt om gegevens op te halen uit een database:

Get the the total revenue for all companies in London.

Met de juiste prompts converteert Azure OpenAI deze query naar SQL die kan worden gebruikt om resultaten van de database te retourneren. Als gevolg hiervan kunnen niet-technische gebruikers, waaronder bedrijfsanalisten, marketeers en leidinggevenden, gemakkelijker waardevolle informatie ophalen uit databases zonder te grapplen met ingewikkelde SQL-syntaxis of afhankelijk te zijn van beperkte datagrids en filters. Deze gestroomlijnde aanpak kan de productiviteit verhogen door de noodzaak voor gebruikers om hulp te vragen van technische experts weg te nemen.

Deze oefening biedt een beginpunt waarmee u begrijpt hoe natuurlijke taal voor SQL werkt, u een aantal belangrijke overwegingen maakt, nadelen en voor- en nadelen overweegt en u de code laat zien om aan de slag te gaan.

In deze oefening gaat u het volgende doen:

Gebruik GPT-prompts om natuurlijke taal te converteren naar SQL.
Experimenteer met verschillende GPT-prompts.
Gebruik de gegenereerde SQL om een query uit te voeren op de PostgreSQL-database die eerder is gestart.
Retourneer queryresultaten van PostgreSQL en geef deze weer in de browser.

Laten we beginnen met het experimenteren met verschillende GPT-prompts die kunnen worden gebruikt om natuurlijke taal te converteren naar SQL.

De functie Natuurlijke taal gebruiken voor SQL

In de vorige oefening hebt u de database, API's en toepassing gestart. U hebt het .env bestand ook bijgewerkt. Als u deze stappen niet hebt voltooid, volgt u de instructies aan het einde van de oefening voordat u doorgaat.
Ga terug naar de browser (http://localhost:4200) en zoek de sectie Aangepaste query van de pagina onder de datagrid. U ziet dat er al een voorbeeldquerywaarde is opgenomen: Haal de totale omzet voor alle orders op. Groeperen op bedrijf en de stad opnemen.
Selecteer de knop Query uitvoeren . Hiermee wordt de query in natuurlijke taal van de gebruiker doorgegeven aan Azure OpenAI, waardoor deze wordt geconverteerd naar SQL. De SQL-query wordt vervolgens gebruikt om een query uit te voeren op de database en mogelijke resultaten te retourneren.

Voer de volgende aangepaste query uit:

Get the total revenue for Adventure Works Cycles. Include the contact information as well.

Bekijk het terminalvenster met de API-server in Visual Studio Code en u ziet dat de SQL-query wordt weergegeven die is geretourneerd vanuit Azure OpenAI. De JSON-gegevens worden gebruikt door de API's aan de serverzijde om een query uit te voeren op de PostgreSQL-database. Tekenreekswaarden die zijn opgenomen in de query, worden toegevoegd als parameterwaarden om SQL-injectieaanvallen te voorkomen:
```
{ 
    "sql": "SELECT c.company, c.city, c.email, SUM(o.total) AS revenue FROM customers c INNER JOIN orders o ON c.id = o.customer_id WHERE c.company = $1 GROUP BY c.company, c.city, c.email", 
    "paramValues": ["Adventure Works Cycles"] 
}
```
Ga terug naar de browser en selecteer Gegevens opnieuw instellen om alle klanten opnieuw weer te geven in datagrid.

De natuurlijke taal verkennen naar SQL-code

Tip

Als u Visual Studio Code gebruikt, kunt u bestanden rechtstreeks openen door het volgende te selecteren:

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

Typ vervolgens de naam van het bestand dat u wilt openen.

Notitie

Het doel van deze oefening is om te laten zien wat er mogelijk is met natuurlijke taal voor SQL-functionaliteit en hoe u aan de slag kunt gaan. Zoals eerder vermeld, is het belangrijk om te bespreken of dit type AI geschikt is voor uw organisatie voordat u doorgaat met een implementatie. Het is ook noodzakelijk om de juiste promptregels en databasebeveiligingsmaatregelen te plannen om onbevoegde toegang te voorkomen en gevoelige gegevens te beschermen.

Nu u de natuurlijke taal voor SQL-functie in actie hebt gezien, gaan we kijken hoe deze wordt geïmplementeerd.

Open het server-/apiRoutes.ts-bestand en zoek de generateSql route. Deze API-route wordt aangeroepen door de clienttoepassing die wordt uitgevoerd in de browser en wordt gebruikt om SQL te genereren op basis van een query in natuurlijke taal. Zodra de SQL-query is opgehaald, wordt deze gebruikt om een query uit te voeren op de database en resultaten te retourneren.

router.post('/generateSql', async (req, res) => {
    const userPrompt = req.body.prompt;

    if (!userPrompt) {
        return res.status(400).json({ error: 'Missing parameter "prompt".' });
    }

    try {
        // Call Azure OpenAI to convert the user prompt into a SQL query
        const sqlCommandObject = await getSQLFromNLP(userPrompt);

        let result: any[] = [];
        // Execute the SQL query
        if (sqlCommandObject && !sqlCommandObject.error) {
            result = await queryDb(sqlCommandObject) as any[];
        }
        else {
            result = [ { query_error : sqlCommandObject.error } ];
        }
        res.json(result);
    } catch (e) {
        console.error(e);
        res.status(500).json({ error: 'Error generating or running SQL query.' });
    }
});

Let op de volgende functionaliteit in de generateSql route:

De querywaarde van de gebruiker wordt req.body.prompt opgehaald en toegewezen aan een variabele met de naam userPrompt. Deze waarde wordt gebruikt in de GPT-prompt.
Er wordt een getSQLFromNLP() functie aangeroepen om natuurlijke taal te converteren naar SQL.
De gegenereerde SQL wordt doorgegeven aan een functie die queryDb de SQL-query uitvoert en resultaten van de database retourneert.

Open het server-/openAI.ts-bestand in de editor en zoek de getSQLFromNLP() functie. Deze functie wordt aangeroepen door de generatesql route en wordt gebruikt om natuurlijke taal te converteren naar SQL.

async function getSQLFromNLP(userPrompt: string): Promise<QueryData> {
    // Get the high-level database schema summary to be used in the prompt.
    // The db.schema file could be generated by a background process or the 
    // schema could be dynamically retrieved.
    const dbSchema = await fs.promises.readFile('db.schema', 'utf8');

    const systemPrompt = `
    Assistant is a natural language to SQL bot that returns a JSON object with the SQL query and 
    the parameter values in it. The SQL will query a PostgreSQL database.

    PostgreSQL tables with their columns:    

    ${dbSchema}

    Rules:
    - Convert any strings to a PostgreSQL parameterized query value to avoid SQL injection attacks.
    - Return a JSON object with the following structure: { "sql": "", "paramValues": [] }

    Examples:

    User: "Display all company reviews. Group by company."      
    Assistant: { "sql": "SELECT * FROM reviews", "paramValues": [] }

    User: "Display all reviews for companies located in cities that start with 'L'."
    Assistant: { "sql": "SELECT r.* FROM reviews r INNER JOIN customers c ON r.customer_id = c.id WHERE c.city LIKE 'L%'", "paramValues": [] }

    User: "Display revenue for companies located in London. Include the company name and city."
    Assistant: { 
        "sql": "SELECT c.company, c.city, SUM(o.total) AS revenue FROM customers c INNER JOIN orders o ON c.id = o.customer_id WHERE c.city = $1 GROUP BY c.company, c.city", 
        "paramValues": ["London"] 
    }

    User: "Get the total revenue for Adventure Works Cycles. Include the contact information as well."
    Assistant: { 
        "sql": "SELECT c.company, c.city, c.email, SUM(o.total) AS revenue FROM customers c INNER JOIN orders o ON c.id = o.customer_id WHERE c.company = $1 GROUP BY c.company, c.city, c.email", 
        "paramValues": ["Adventure Works Cycles"] 
    }
    `;

    let queryData: QueryData = { sql: '', paramValues: [], error: '' };
    let results = '';

    try {
        results = await callOpenAI(systemPrompt, userPrompt);
        if (results) {
            console.log('results', results);
            const parsedResults = JSON.parse(results);
            queryData = { ...queryData, ...parsedResults };
            if (isProhibitedQuery(queryData.sql)) {
                queryData.sql = '';
                queryData.error = 'Prohibited query.';
            }
        }
    } catch (error) {
        console.log(error);
        if (isProhibitedQuery(results)) {
            queryData.sql = '';
            queryData.error = 'Prohibited query.';
        } else {
            queryData.error = results;
        }
    }

    return queryData;
}

Er wordt een userPrompt parameter doorgegeven aan de functie. De userPrompt waarde is de query in natuurlijke taal die is ingevoerd door de gebruiker in de browser.
A systemPrompt definieert het type AI-assistent dat moet worden gebruikt en regels die moeten worden gevolgd. Dit helpt Azure OpenAI inzicht te hebben in de databasestructuur, welke regels moeten worden toegepast en hoe u de gegenereerde SQL-query en -parameters kunt retourneren.
Een benoemde callOpenAI() functie wordt aangeroepen en de systemPrompt waarden userPrompt worden eraan doorgegeven.
De resultaten worden gecontroleerd om ervoor te zorgen dat er geen verboden waarden worden opgenomen in de gegenereerde SQL-query. Als er verboden waarden worden gevonden, wordt de SQL-query ingesteld op een lege tekenreeks.

Laten we de systeemprompt nader bekijken:

const systemPrompt = `
  Assistant is a natural language to SQL bot that returns a JSON object with the SQL query and 
  the parameter values in it. The SQL will query a PostgreSQL database.

  PostgreSQL tables with their columns:    

  ${dbSchema}

  Rules:
  - Convert any strings to a PostgreSQL parameterized query value to avoid SQL injection attacks.
  - Return a JSON object with the following structure: { "sql": "", "paramValues": [] }

  Examples:

  User: "Display all company reviews. Group by company."      
  Assistant: { "sql": "SELECT * FROM reviews", "paramValues": [] }

  User: "Display all reviews for companies located in cities that start with 'L'."
  Assistant: { "sql": "SELECT r.* FROM reviews r INNER JOIN customers c ON r.customer_id = c.id WHERE c.city LIKE 'L%'", "paramValues": [] }

  User: "Display revenue for companies located in London. Include the company name and city."
  Assistant: { 
    "sql": "SELECT c.company, c.city, SUM(o.total) AS revenue FROM customers c INNER JOIN orders o ON c.id = o.customer_id WHERE c.city = $1 GROUP BY c.company, c.city", 
    "paramValues": ["London"] 
  }

  User: "Get the total revenue for Adventure Works Cycles. Include the contact information as well."
  Assistant: { 
    "sql": "SELECT c.company, c.city, c.email, SUM(o.total) AS revenue FROM customers c INNER JOIN orders o ON c.id = o.customer_id WHERE c.company = $1 GROUP BY c.company, c.city, c.email", 
    "paramValues": ["Adventure Works Cycles"] 
  }
`;

Het type AI-assistent dat moet worden gebruikt, wordt gedefinieerd. In dit geval een 'natuurlijke taal voor SQL-bot'.
Tabelnamen en kolommen in de database worden gedefinieerd. Het schema op hoog niveau dat in de prompt is opgenomen, vindt u in het bestand server/db.schema en ziet er als volgt uit.
```
- customers (id, company, city, email)
- orders (id, customer_id, date, total)
- order_items (id, order_id, product_id, quantity, price)
- reviews (id, customer_id, review, date, comment)
```
Tip

U kunt overwegen om alleen-lezenweergaven te maken die alleen de gegevens bevatten die gebruikers mogen opvragen met natuurlijke taal in SQL.
Er wordt een regel gedefinieerd om tekenreekswaarden te converteren naar een geparameteriseerde querywaarde om SQL-injectieaanvallen te voorkomen.
Er wordt een regel gedefinieerd om altijd een JSON-object te retourneren met de SQL-query en de parameterwaarden erin.
Voorbeeld van gebruikersprompts en de verwachte SQL-query- en parameterwaarden worden opgegeven. Dit wordt 'weinig-shot' leren genoemd. Hoewel LLM's worden getraind op grote hoeveelheden gegevens, kunnen ze met slechts enkele voorbeelden worden aangepast aan nieuwe taken. Een alternatieve benadering is 'zero-shot' waarbij geen voorbeeld wordt gegeven en het model naar verwachting de juiste SQL-query- en parameterwaarden genereert.

De getSQLFromNLP() functie verzendt het systeem en de gebruikersprompts naar een functie met de naam callOpenAI() die zich ook in het server-/openAI.ts-bestand bevindt. De callOpenAI() functie bepaalt of de Azure OpenAI-service of OpenAI-service moet worden aangeroepen door omgevingsvariabelen te controleren. Als er een sleutel, eindpunt en model beschikbaar zijn in de omgevingsvariabelen, wordt Azure OpenAI aangeroepen, anders wordt OpenAI aangeroepen.
```
function callOpenAI(systemPrompt: string, userPrompt: string, temperature = 0, useBYOD = false) {
    const isAzureOpenAI = OPENAI_API_KEY && OPENAI_ENDPOINT && OPENAI_MODEL;

    if (isAzureOpenAI) {
        if (useBYOD) {
            return getAzureOpenAIBYODCompletion(systemPrompt, userPrompt, temperature);
        }
        return getAzureOpenAICompletion(systemPrompt, userPrompt, temperature);
    }

    return getOpenAICompletion(systemPrompt, userPrompt, temperature);
}
```
Notitie

Hoewel we ons in deze zelfstudie richten op Azure OpenAI, wordt in plaats daarvan OpenAI gebruikt als u alleen een OPENAI_API_KEY waarde opgeeft in het .env-bestand . Als u ervoor kiest om OpenAI te gebruiken in plaats van Azure OpenAI, ziet u in sommige gevallen mogelijk andere resultaten.
Zoek de getAzureOpenAICompletion() functie.
```
async function getAzureOpenAICompletion(systemPrompt: string, userPrompt: string, temperature: number): Promise<string> {
    const completion = await createAzureOpenAICompletion(systemPrompt, userPrompt, temperature);
    let content = completion.choices[0]?.message?.content?.trim() ?? '';
    console.log('Azure OpenAI Output: \n', content);
    if (content && content.includes('{') && content.includes('}')) {
        content = extractJson(content);
    }
    return content;
}
```
Deze functie doet het volgende:
- Parameters:
  - systemPrompt, userPrompten temperature zijn de belangrijkste parameters.
    - systemPrompt: informeert het Azure OpenAI-model over de rol en de regels die moeten worden gevolgd.
    - userPrompt: bevat de door de gebruiker verstrekte informatie, zoals invoer in natuurlijke taal of regels voor het genereren van de uitvoer.
    - temperature: Bepaalt het creativiteitsniveau van het antwoord van het model. Een hogere waarde resulteert in meer creatieve uitvoer.
- Voltooiingsgeneratie:
  - De functie roept createAzureOpenAICompletion() aan met systemPrompt, userPrompten temperature om een voltooiing te genereren.
  - Hiermee wordt de inhoud geëxtraheerd uit de eerste keuze in de voltooiing, waardoor eventuele extra witruimte wordt ingekort.
  - Als de inhoud JSON-achtige structuren bevat (aangegeven door de aanwezigheid van { en }), wordt de JSON-inhoud geëxtraheerd.
- Logboekregistratie en retourwaarde:
  - De functie registreert de Azure OpenAI-uitvoer naar de console.
  - Deze retourneert de verwerkte inhoud als een tekenreeks.
Zoek de createAzureOpenAICompletion() functie.
```
async function createAzureOpenAICompletion(systemPrompt: string, userPrompt: string, temperature: number, dataSources?: any[]): Promise<any> {
    const baseEnvVars = ['OPENAI_API_KEY', 'OPENAI_ENDPOINT', 'OPENAI_MODEL'];
    const byodEnvVars = ['AZURE_AI_SEARCH_ENDPOINT', 'AZURE_AI_SEARCH_KEY', 'AZURE_AI_SEARCH_INDEX'];
    const requiredEnvVars = dataSources ? [...baseEnvVars, ...byodEnvVars] : baseEnvVars;
    checkRequiredEnvVars(requiredEnvVars);

    const config = { 
        apiKey: OPENAI_API_KEY,
        endpoint: OPENAI_ENDPOINT,
        apiVersion: OPENAI_API_VERSION,
        deployment: OPENAI_MODEL
    };
    const aoai = new AzureOpenAI(config);
    const completion = await aoai.chat.completions.create({
        model: OPENAI_MODEL, // gpt-4o, gpt-3.5-turbo, etc. Pulled from .env file
        max_tokens: 1024,
        temperature,
        response_format: {
            type: "json_object",
        },
        messages: [
            { role: 'system', content: systemPrompt },
            { role: 'user', content: userPrompt }
        ],
        // @ts-expect-error data_sources is a custom property used with the "Azure Add Your Data" feature
        data_sources: dataSources
    });
    return completion;
}

function checkRequiredEnvVars(requiredEnvVars: string[]) {
    for (const envVar of requiredEnvVars) {
        if (!process.env[envVar]) {
            throw new Error(`Missing ${envVar} in environment variables.`);
        }
    }
}
```
Deze functie doet het volgende:
- Parameters:
  - systemPrompt, userPrompten temperature zijn de belangrijkste parameters die eerder zijn besproken.
  - Een optionele dataSources parameter ondersteunt de functie 'Azure Bring Your Own Data', die verderop in deze zelfstudie wordt behandeld.
- Controle van omgevingsvariabelen:
  - De functie controleert de aanwezigheid van essentiële omgevingsvariabelen, waardoor er een fout wordt gegenereerd als deze ontbreken.
- Configuratieobject:
  - Een config object wordt gemaakt met behulp van waarden uit het .env bestand (OPENAI_API_KEY, OPENAI_ENDPOINT, OPENAI_API_VERSION, ). OPENAI_MODEL Deze waarden worden gebruikt om de URL te maken voor het aanroepen van Azure OpenAI.
- AzureOpenAI-exemplaar:
  - Er wordt een exemplaar gemaakt met behulp van AzureOpenAI het config object. Het AzureOpenAI symbool maakt deel uit van het openai pakket, dat boven aan het bestand moet worden geïmporteerd.
- Een voltooiing genereren:
  - De chat.completions.create() functie wordt aangeroepen met de volgende eigenschappen:
    - model: Hiermee geeft u het GPT-model (bijvoorbeeld gpt-4o, gpt-3.5-turbo) zoals gedefinieerd in uw .env bestand.
    - max_tokens: Hiermee definieert u het maximum aantal tokens voor de voltooiing.
    - temperature: Hiermee stelt u de monsternametemperatuur in. Hogere waarden (bijvoorbeeld 0,9) leveren meer creatieve reacties op, terwijl lagere waarden (bijvoorbeeld 0) meer deterministische antwoorden produceren.
    - response_format: Definieert de antwoordindeling. Hier is het ingesteld om een JSON-object te retourneren. Meer informatie over de JSON-modus vindt u in de referentiedocumentatie van Azure OpenAI.
    - messages: Bevat de berichten voor het genereren van chatvoltooiingen. Dit voorbeeld bevat twee berichten: één van het systeem (gedrag en regels definiëren) en één van de gebruiker (met de prompttekst).
- Retourwaarde:
  - De functie retourneert het voltooiingsobject dat is gegenereerd door Azure OpenAI.

Markeer de volgende regels in de getSQLFromNLP() functie als commentaar:

// if (isProhibitedQuery(queryData.sql)) { 
//     queryData.sql = '';
// }

Sla openAI.ts op. De API-server bouwt automatisch de TypeScript-code opnieuw op en start de server opnieuw op.
Ga terug naar de browser en voer Alle tabelnamen uit de database selecteren in de invoer voor aangepaste query's in. Selecteer Query uitvoeren. Worden tabelnamen weergegeven?
Ga terug naar de getSQLFromNLP() functie in server/openAI.ts en voeg de volgende regel toe aan de Rules: sectie van de systeemprompt en sla het bestand vervolgens op.
```
- Do not allow the SELECT query to return table names, function names, or procedure names.
```
Ga terug naar de browser en voer de volgende taken uit:
- Voer alle tabelnamen uit de database in in de invoer voor aangepaste query's . Selecteer Query uitvoeren. Worden tabelnamen weergegeven?
- Voer alle functienamen uit de database in. Voer de invoer van de aangepaste query in en selecteer Query uitvoeren opnieuw. Worden functienamen weergegeven?
VRAAG: Volgt een model altijd de regels die u in de prompt definieert?

ANTWOORD: Nee! Het is belangrijk te weten dat OpenAI-modellen onverwachte resultaten kunnen retourneren die mogelijk niet overeenkomen met de regels die u hebt gedefinieerd. Het is belangrijk om dat in uw code te plannen.
Ga terug naar de server/openAI.ts en zoek de isProhibitedQuery() functie. Dit is een voorbeeld van naverwerkingscode die kan worden uitgevoerd nadat Azure OpenAI resultaten retourneert. U ziet dat de sql eigenschap wordt ingesteld op een lege tekenreeks als verboden trefwoorden worden geretourneerd in de gegenereerde SQL-query. Dit zorgt ervoor dat als er onverwachte resultaten worden geretourneerd vanuit Azure OpenAI, de SQL-query niet wordt uitgevoerd op de database.
```
function isProhibitedQuery(query: string): boolean {
    if (!query) return false;

    const prohibitedKeywords = [
        'insert', 'update', 'delete', 'drop', 'truncate', 'alter', 'create', 'replace',
        'information_schema', 'pg_catalog', 'pg_tables', 'pg_proc', 'pg_namespace', 'pg_class',
        'table_schema', 'table_name', 'column_name', 'column_default', 'is_nullable',
        'data_type', 'udt_name', 'character_maximum_length', 'numeric_precision',
        'numeric_scale', 'datetime_precision', 'interval_type', 'collation_name',
        'grant', 'revoke', 'rollback', 'commit', 'savepoint', 'vacuum', 'analyze'
    ];
    const queryLower = query.toLowerCase();
    return prohibitedKeywords.some(keyword => queryLower.includes(keyword));
}
```
Notitie

Het is belangrijk om te weten dat dit alleen democode is. Er zijn mogelijk andere verboden trefwoorden vereist om uw specifieke gebruiksvoorbeelden te behandelen als u ervoor kiest om natuurlijke taal te converteren naar SQL. Dit is een functie die u met zorg moet plannen en gebruiken om ervoor te zorgen dat alleen geldige SQL-query's worden geretourneerd en uitgevoerd op de database. Naast verboden trefwoorden moet u ook rekening houden met beveiliging.
Ga terug naar de server/openAI.ts en verwijder de opmerkingen bij de volgende code in de getSQLFromNLP() functie. Sla het bestand op.
```
if (isProhibitedQuery(queryData.sql)) { 
    queryData.sql = '';
}
```

Verwijder de volgende regel uit systemPrompt en sla het bestand op.

- Do not allow the SELECT query to return table names, function names, or procedure names.

Ga terug naar de browser, voer alle tabelnamen uit de database in de invoer voor aangepaste query's opnieuw in en selecteer de knop Query uitvoeren .
Worden er tabelresultaten weergegeven? Zelfs zonder dat de regel is ingesteld, verbiedt de isProhibitedQuery() naverwerkingscode dat type query niet wordt uitgevoerd op de database.
Zoals eerder is besproken, kan het integreren van natuurlijke taal in Line-Of-Business-toepassingen voor SQL heel nuttig zijn voor gebruikers, maar het heeft wel een eigen set overwegingen.

Voordelen:
- Gebruiksvriendelijkheid: deze functie kan database-interactie toegankelijker maken voor gebruikers zonder technische expertise, waardoor de noodzaak van SQL-kennis en mogelijk snellere bewerkingen wordt verminderd.
- Verhoogde productiviteit: bedrijfsanalisten, marketeers, leidinggevenden en andere niet-technische gebruikers kunnen waardevolle informatie ophalen uit databases zonder dat ze op technische experts hoeven te vertrouwen, waardoor de efficiëntie toeneemt.
- Brede toepassing: Met behulp van geavanceerde taalmodellen kunnen toepassingen worden ontworpen voor een breed scala aan gebruikers en gebruiksvoorbeelden.
Overwegingen:
- Beveiliging: Een van de grootste problemen is beveiliging. Als gebruikers kunnen communiceren met databases met natuurlijke taal, moeten er robuuste beveiligingsmaatregelen zijn om onbevoegde toegang of schadelijke query's te voorkomen. U kunt overwegen om een modus alleen-lezen te implementeren om te voorkomen dat gebruikers gegevens wijzigen.
- Gegevensprivacy: bepaalde gegevens zijn mogelijk gevoelig en mogen niet gemakkelijk toegankelijk zijn, dus u moet ervoor zorgen dat de juiste beveiliging en gebruikersmachtigingen aanwezig zijn.
- Nauwkeurigheid: Hoewel de verwerking van natuurlijke taal aanzienlijk is verbeterd, is het niet perfect. Onjuiste interpretatie van gebruikersquery's kan leiden tot onjuiste resultaten of onverwacht gedrag. U moet plannen hoe onverwachte resultaten worden verwerkt.
- Efficiëntie: Er zijn geen garanties dat de SQL die wordt geretourneerd door een query in natuurlijke taal efficiënt is. In sommige gevallen zijn er mogelijk extra aanroepen naar Azure OpenAI vereist als naverwerkingsregels problemen met SQL-query's detecteren.
- Training en gebruikersaanpassing: Gebruikers moeten worden getraind om hun query's correct te formuleren. Hoewel het eenvoudiger is dan het leren van SQL, kan er nog steeds een leercurve worden gebruikt.
Enkele laatste punten die u moet overwegen voordat u verdergaat met de volgende oefening:
- Houd er rekening mee dat 'Alleen omdat je niet kunt betekenen dat je moet' hier van toepassing is. Wees uiterst voorzichtig en zorgvuldig bij het plannen voordat u natuurlijke taal integreert in SQL in een toepassing. Het is belangrijk om inzicht te krijgen in de potentiële risico's en deze te plannen.
- Voordat u dit type technologie gebruikt, moet u mogelijke scenario's bespreken met uw team, databasebeheerders, beveiligingsteam, belanghebbenden en andere relevante partijen om ervoor te zorgen dat deze geschikt zijn voor uw organisatie. Het is belangrijk om te bespreken of natuurlijke taal voor SQL voldoet aan de vereisten voor beveiliging, privacy en eventuele andere vereisten die uw organisatie mogelijk heeft.
- Beveiliging moet een belangrijk aandachtspunt zijn en ingebouwd zijn in het plannings-, ontwikkelings- en implementatieproces.
- Hoewel natuurlijke taal voor SQL zeer krachtig kan zijn, moet er zorgvuldige planning in worden geplaatst om ervoor te zorgen dat prompts vereiste regels hebben en dat de functionaliteit voor naverwerking is opgenomen. Plan extra tijd om dit type functionaliteit te implementeren en te testen en om rekening te houden met scenario's waarin onverwachte resultaten worden geretourneerd.
- Met Azure OpenAI krijgen klanten de beveiligingsmogelijkheden van Microsoft Azure terwijl ze dezelfde modellen uitvoeren als OpenAI. Azure OpenAI biedt privénetwerken, regionale beschikbaarheid en verantwoordelijke AI-inhoudsfiltering. Meer informatie over gegevens, privacy en beveiliging voor Azure OpenAI Service.
U hebt nu gezien hoe u Azure OpenAI kunt gebruiken om natuurlijke taal te converteren naar SQL en meer te leren over de voor- en nadelen van het implementeren van dit type functionaliteit. In de volgende oefening leert u hoe e-mail- en sms-berichten kunnen worden gegenereerd met behulp van Azure OpenAI.

AI: Voltooiingen genereren

112 minuten resterend

Naast de natuurlijke taal van de SQL-functie kunt u azure OpenAI Service ook gebruiken om e-mail- en sms-berichten te genereren om de productiviteit van gebruikers te verbeteren en communicatiewerkstromen te stroomlijnen. Door gebruik te maken van de taalgeneratiemogelijkheden van Azure OpenAI, kunnen gebruikers specifieke regels definiëren, zoals 'Order is vertraagd 5 dagen' en genereert het systeem automatisch contextueel geschikte e-mail- en sms-berichten op basis van deze regels.

Deze mogelijkheid fungeert als een snelstart voor gebruikers, zodat ze een goed ontworpen berichtsjabloon hebben die ze eenvoudig kunnen aanpassen voordat ze verzenden. Het resultaat is een aanzienlijke vermindering van de tijd en moeite die nodig is om berichten op te stellen, zodat gebruikers zich kunnen concentreren op andere belangrijke taken. Bovendien kan de taalgeneratietechnologie van Azure OpenAI worden geïntegreerd in automatiseringswerkstromen, waardoor het systeem autonoom berichten kan genereren en verzenden als reactie op vooraf gedefinieerde triggers. Dit automatiseringsniveau versnelt niet alleen communicatieprocessen, maar zorgt ook voor consistente en nauwkeurige berichten in verschillende scenario's.

In deze oefening gaat u het volgende doen:

Experimenteer met verschillende prompts.
Gebruik prompts om voltooiingen voor e-mail- en sms-berichten te genereren.
Verken code waarmee AI-voltooiingen mogelijk zijn.
Meer informatie over het belang van prompt-engineering en het opnemen van regels in uw prompts.

Laten we aan de slag gaan door te experimenteren met verschillende regels die kunnen worden gebruikt om e-mail- en sms-berichten te genereren.

De functie AI-voltooiingen gebruiken

In een vorige oefening hebt u de database, API's en toepassing gestart. U hebt het .env bestand ook bijgewerkt. Als u deze stappen niet hebt voltooid, volgt u de instructies aan het einde van de oefening voordat u doorgaat.
Ga terug naar de browser (http://localhost:4200) en selecteer Contact customer op een rij in het datagrid, gevolgd door e-mail/sms-klant om naar het scherm Berichtgenerator te gaan.
Dit maakt gebruik van Azure OpenAI om berichtregels die u definieert, te converteren naar e-mail-/sms-berichten. Voer de volgende taken uit:
- Voer een regel in, zoals Order, wordt vijf dagen vertraagd in de invoer en selecteer de knop E-mail/SMS-berichten genereren.
- U ziet een onderwerp en hoofdtekst die zijn gegenereerd voor de e-mail en een kort bericht dat is gegenereerd voor de SMS.
Notitie

Omdat Azure Communication Services nog niet is ingeschakeld, kunt u de e-mail- of sms-berichten niet verzenden.
Sluit het dialoogvenster e-mail/sms in de browser. Nu u deze functie in actie hebt gezien, gaan we kijken hoe deze is geïmplementeerd.

De AI-voltooiingscode verkennen

Tip

Als u Visual Studio Code gebruikt, kunt u bestanden rechtstreeks openen door het volgende te selecteren:

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

Typ vervolgens de naam van het bestand dat u wilt openen.

Open het server-/apiRoutes.ts-bestand en zoek de completeEmailSmsMessages route. Deze API wordt aangeroepen door het front-endgedeelte van de app wanneer de knop E-mail/sms-berichten genereren is geselecteerd. Hiermee worden de waarden voor de gebruikersprompt, het bedrijf en de naam van de contactpersoon opgehaald uit de hoofdtekst en doorgegeven aan de completeEmailSMSMessages() functie in het server-/openAI.ts-bestand . De resultaten worden vervolgens geretourneerd naar de client.

router.post('/completeEmailSmsMessages', async (req, res) => {
    const { prompt, company, contactName } = req.body;

    if (!prompt || !company || !contactName) {
        return res.status(400).json({ 
            status: false, 
            error: 'The prompt, company, and contactName parameters must be provided.' 
        });
    }

    let result;
    try {
        // Call OpenAI to get the email and SMS message completions
    result = await completeEmailSMSMessages(prompt, company, contactName);
    }
    catch (e: unknown) {
        console.error('Error parsing JSON:', e);
    }

    res.json(result);
});

Open het server-/openAI.ts-bestand en zoek de completeEmailSMSMessages() functie.

async function completeEmailSMSMessages(prompt: string, company: string, contactName: string) {
    console.log('Inputs:', prompt, company, contactName);

    const systemPrompt = `
    Assistant is a bot designed to help users create email and SMS messages from data and 
    return a JSON object with the email and SMS message information in it.

    Rules:
    - Generate a subject line for the email message.
    - Use the User Rules to generate the messages. 
    - All messages should have a friendly tone and never use inappropriate language.
    - SMS messages should be in plain text format and NO MORE than 160 characters. 
    - Start the message with "Hi <Contact Name>,\n\n". Contact Name can be found in the user prompt.
    - Add carriage returns to the email message to make it easier to read. 
    - End with a signature line that says "Sincerely,\nCustomer Service".
    - Return a valid JSON object with the emailSubject, emailBody, and SMS message values in it:

    { "emailSubject": "", "emailBody": "", "sms": "" }

    - The sms property value should be in plain text format and NO MORE than 160 characters.
    `;

    const userPrompt = `
    User Rules: 
    ${prompt}

    Contact Name: 
    ${contactName}
    `;

    let content: EmailSmsResponse = { status: true, email: '', sms: '', error: '' };
    let results = '';
    try {
        results = await callOpenAI(systemPrompt, userPrompt, 0.5);
        if (results) {
            const parsedResults = JSON.parse(results);
            content = { ...content, ...parsedResults, status: true };
        }
    }
    catch (e) {
        console.log(e);
        content.status = false;
        content.error = results;
    }

    return content;
}

Deze functie heeft de volgende functies:

systemPrompt wordt gebruikt om te definiëren dat een AI-assistent die geschikt is voor het genereren van e-mail- en sms-berichten vereist is. De systemPrompt volgende omvat ook:
- Regels die de assistent moet volgen om de toon van de berichten, de begin- en eindnotatie, de maximale lengte van sms-berichten en meer te bepalen.
- Informatie over gegevens die moeten worden opgenomen in het antwoord: in dit geval een JSON-object.
userPrompt wordt gebruikt om de regels en naam van de contactpersoon te definiëren die de eindgebruiker wil opnemen als de e-mail- en sms-berichten worden gegenereerd. De order is vertraagd 5 dagen regel die u eerder hebt ingevoerd, is opgenomen in userPrompt.
De functie roept de callOpenAI() functie aan die u eerder hebt verkend om de e-mail- en SMS-voltooiingen te genereren.

Ga terug naar de browser, vernieuw de pagina en selecteer Contact customer op een rij gevolgd door e-mail/sms-klant om opnieuw naar het scherm Berichtgenerator te gaan.
Voer de volgende regels in de invoer van de berichtgenerator in:
- Volgorde staat voor op schema.
- Vertel de klant nooit meer van ons te bestellen, we willen hun bedrijf niet.
Selecteer E-mail/sms-berichten genereren en noteer het bericht. De All messages should have a friendly tone and never use inappropriate language. regel in de systeemprompt overschrijft de negatieve regel in de gebruikersprompt.
Ga terug naar server/openAI.ts* in uw editor en verwijder de All messages should have a friendly tone and never use inappropriate language. regel uit de prompt in de completeEmailSMSMessages() functie. Sla het bestand op.
Ga terug naar de generator voor e-mail/sms-berichten in de browser en voer dezelfde regels opnieuw uit:
- Volgorde staat voor op schema.
- Vertel de klant nooit meer van ons te bestellen, we willen hun bedrijf niet.
Selecteer E-mail/sms-berichten genereren en let op het bericht dat wordt geretourneerd.
Wat gebeurt er in deze scenario's? Wanneer u Azure OpenAI gebruikt, kan inhoudsfiltering worden toegepast om ervoor te zorgen dat de juiste taal altijd wordt gebruikt. Als u OpenAI gebruikt, wordt de regel die is gedefinieerd in de systeemprompt gebruikt om te controleren of het geretourneerde bericht geschikt is.

Notitie

Dit illustreert het belang van het ontwerpen van uw prompts met de juiste informatie en regels om ervoor te zorgen dat de juiste resultaten worden geretourneerd. Lees meer over dit proces in de inleiding tot het vragen van technische documentatie.
Maak de aangebrachte wijzigingen systemPrompt completeEmailSMSMessages()ongedaan, sla het bestand op en voer het opnieuw uit, maar gebruik alleen de Order is ahead of schedule. regel (neem de negatieve regel niet op). Deze keer ziet u dat de e-mail- en sms-berichten worden geretourneerd zoals verwacht.
Enkele laatste punten die u moet overwegen voordat u verdergaat met de volgende oefening:
- Het is belangrijk om een mens in de lus te hebben om gegenereerde berichten te controleren. In dit voorbeeld retourneren azure OpenAI-voltooiingen voorgestelde e-mail- en sms-berichten, maar de gebruiker kan deze overschrijven voordat deze worden verzonden. Als u van plan bent om e-mailberichten te automatiseren, is het belangrijk om ervoor te zorgen dat goedgekeurde berichten worden verzonden. Bekijk AI als copilot, niet als autopilot.
- Voltooiingen zijn alleen zo goed als de regels die u aan de prompt toevoegt. Neem de tijd om uw prompts en de geretourneerde voltooiingen te testen. Overweeg het gebruik van promptstroom om een uitgebreide oplossing te maken die het maken van prototypen, experimenteren, herhalen en implementeren van AI-toepassingen vereenvoudigt. Nodig andere belanghebbenden uit om ook de voltooiingen te bekijken.
- Mogelijk moet u code voor naverwerking opnemen om ervoor te zorgen dat onverwachte resultaten correct worden verwerkt.
- Gebruik systeemprompts om de regels en informatie te definiëren die de AI-assistent moet volgen. Gebruik gebruikersprompts om de regels en informatie te definiëren die de eindgebruiker in de voltooiingen wil opnemen.

AI: Azure OpenAI op uw gegevens

102 minuten resterend

De integratie van De integratie van Azure OpenAI Natural Language Processing (NLP) en voltooiingsmogelijkheden biedt een aanzienlijk potentieel voor het verbeteren van de productiviteit van gebruikers. Door gebruik te maken van de juiste prompts en regels, kan een AI-assistent efficiënt verschillende vormen van communicatie genereren, zoals e-mailberichten, sms-berichten en meer. Deze functionaliteit leidt tot verbeterde gebruikersefficiëntie en gestroomlijnde werkstromen.

Hoewel deze functie vrij krachtig is, kunnen er gevallen zijn waarin gebruikers voltooiingen moeten genereren op basis van de aangepaste gegevens van uw bedrijf. U kunt bijvoorbeeld een verzameling producthandleidingen hebben die lastig kunnen zijn voor gebruikers om te navigeren wanneer ze klanten helpen met installatieproblemen. U kunt ook een uitgebreide reeks veelgestelde vragen (FAQ's) met betrekking tot gezondheidszorgvoordelen onderhouden die lastig kunnen zijn voor gebruikers om door te lezen en de antwoorden te krijgen die ze nodig hebben. In deze gevallen en vele andere, kunt u met Azure OpenAI Service gebruikmaken van uw eigen gegevens om voltooiingen te genereren, zodat u een meer op maat gemaakte en contextuele nauwkeurige reactie op vragen van gebruikers kunt garanderen.

Hier volgt een kort overzicht van hoe de functie 'Bring Your Own Data' werkt vanuit de Documentatie van Azure OpenAI.

Notitie

Een van de belangrijkste functies van Azure OpenAI op uw gegevens is de mogelijkheid om gegevens op te halen en te gebruiken op een manier die de uitvoer van het model verbetert. Azure OpenAI op uw gegevens, samen met Azure AI Search, bepaalt welke gegevens moeten worden opgehaald uit de aangewezen gegevensbron op basis van de gebruikersinvoer en de opgegeven gespreksgeschiedenis. Deze gegevens worden vervolgens uitgebreid en opnieuw verzonden als een prompt naar het OpenAI-model, waarbij opgehaalde informatie wordt toegevoegd aan de oorspronkelijke prompt. Hoewel opgehaalde gegevens worden toegevoegd aan de prompt, wordt de resulterende invoer nog steeds verwerkt door het model, net als elke andere prompt. Zodra de gegevens zijn opgehaald en de prompt is verzonden naar het model, gebruikt het model deze informatie om een voltooiing te bieden.

In deze oefening gaat u het volgende doen:

Maak een aangepaste gegevensbron met behulp van Azure AI Studio.
Implementeer een insluitmodel met behulp van Azure AI Studio.
Aangepaste documenten uploaden.
Start een chatsessie in de Chat-speeltuin om te experimenteren met het genereren van voltooiingen op basis van uw eigen gegevens.
Verken code die gebruikmaakt van Azure AI Search en Azure OpenAI om voltooiingen te genereren op basis van uw eigen gegevens.

Laten we aan de slag gaan door een insluitmodel te implementeren en een aangepaste gegevensbron toe te voegen in Azure AI Studio.

Een aangepaste gegevensbron toevoegen aan Azure AI Studio

Navigeer naar Azure OpenAI Studio en meld u aan met referenties die toegang hebben tot uw Azure OpenAI-resource.
Selecteer Implementaties in het navigatiemenu.
Selecteer Model implementeren -->Basismodel implementeren op de werkbalk.
Selecteer het model text-embedding-ada-002 in de lijst met modellen en selecteer Bevestigen.
Selecteer de volgende opties:
- Implementatienaam: tekst-insluiten-ada-002
- Modelversie: standaard
- Implementatietype: Standaard
- Stel de waarde tokens per minuutfrequentielimiet (duizenden) in op 120K
- Inhoudsfilter: DefaultV2
- Dynamische aanhalingstekens inschakelen: ingeschakeld
Selecteer de knop Implementeren .
Nadat het model is gemaakt, selecteert u Start in het navigatiemenu om naar het welkomstscherm te gaan.
Zoek de tegel Bring Your Own Data op het welkomstscherm en selecteer Nu proberen.
Selecteer Uw gegevens toevoegen gevolgd door Een gegevensbron toevoegen.
Selecteer Bestanden uploaden in de vervolgkeuzelijst Gegevensbron selecteren.
Selecteer in de vervolgkeuzelijst Azure Blob Storage-resource selecteren een nieuwe Azure Blob Storage-resource maken.
Selecteer uw Azure-abonnement in de vervolgkeuzelijst Abonnement .
Selecteer in de vervolgkeuzelijst Azure Blob Storage-resource selecteren een nieuwe Azure Blob Storage-resource maken.
Hiermee gaat u naar Azure Portal, waar u de volgende taken kunt uitvoeren:
- Voer een unieke naam in voor het opslagaccount, zoals byodstorage[Uw achternaam].
- Selecteer een regio die zich dicht bij uw locatie bevindt.
- Selecteer Controleren gevolgd door Maken.
Zodra de blob-opslagresource is gemaakt, gaat u terug naar het dialoogvenster Azure AI Studio en selecteert u de zojuist gemaakte blobopslagresource in de vervolgkeuzelijst Azure Blob Storage-resource selecteren. Als de lijst niet wordt weergegeven, selecteert u het vernieuwingspictogram naast de vervolgkeuzelijst.
CorS (Cross-Origin Resource Sharing) moet zijn ingeschakeld om toegang te krijgen tot uw opslagaccount. Selecteer CORS inschakelen in het dialoogvenster Azure AI Studio.
Selecteer in de vervolgkeuzelijst Azure AI Search-resource selecteren een nieuwe Azure AI Search-resource maken.
Hiermee gaat u terug naar Azure Portal, waar u de volgende taken kunt uitvoeren:
- Voer een unieke naam in voor de AI Search-resource, zoals byodsearch-[Uw achternaam].
- Selecteer een regio die zich dicht bij uw locatie bevindt.
- Selecteer In de sectie Prijscategorie de optie Prijscategorie wijzigen en Selecteer Basic , gevolgd door Selecteren. De gratis laag wordt niet ondersteund, dus u schoont de AI Search-resource aan het einde van deze zelfstudie op.
- Selecteer Controleren gevolgd door Maken.
Zodra de AI Search-resource is gemaakt, gaat u naar de pagina Overzicht van de resource en kopieert u de URL-waarde naar een lokaal bestand.
Selecteer Instellingen -->Sleutels in het navigatiemenu.
Selecteer op de pagina Toegangsbeheer voor API beide om toegang te krijgen tot de service via beheerde identiteit of met behulp van een sleutel. Selecteer Ja wanneer u hierom wordt gevraagd.

Notitie

Hoewel we in deze oefening een API-sleutel gebruiken omdat het toevoegen van roltoewijzingen maximaal tien minuten kan duren, kunt u met wat extra moeite een door het systeem toegewezen beheerde identiteit inschakelen voor toegang tot de service.
Selecteer Sleutels in het linkernavigatiemenu en kopieer de waarde van de primaire beheersleutel naar een lokaal bestand. U hebt de URL- en sleutelwaarden later in de oefening nodig.
Selecteer Instellingen -->Semantische ranker in het navigatiemenu en zorg ervoor dat Gratis is geselecteerd.

Notitie

Als u wilt controleren of de semantische rangschikking beschikbaar is in een specifieke regio, controleert u de pagina Producten beschikbaar per regio op de Azure-website om te zien of uw regio wordt vermeld.
Ga terug naar het dialoogvenster Gegevens toevoegen van Azure AI Studio en selecteer uw zojuist gemaakte zoekresource in de vervolgkeuzelijst Azure AI Search-resource selecteren. Als de lijst niet wordt weergegeven, selecteert u het vernieuwingspictogram naast de vervolgkeuzelijst.
Voer een waarde van byod-search-index in voor de indexnaamwaarde invoeren.
Schakel het selectievakje Vectorzoekopdrachten toevoegen in dit zoekresourcevak in.
Selecteer in de vervolgkeuzelijst Een insluitmodel selecteren het model text-embedding-ada-002 dat u eerder hebt gemaakt.
Selecteer Bladeren naar een bestand in het dialoogvenster Bestanden uploaden.
Navigeer naar de map met klantdocumenten van het project (in de hoofdmap van het project) en selecteer de volgende bestanden:
- Clock A102 Installation Instructions.docx
- Bedrijfs FAQs.docx
Notitie

Deze functie ondersteunt momenteel de volgende bestandsindelingen voor het maken van lokale indexen: .txt, .md, .html, .pdf, .docx en .pptx.
Selecteer Bestanden uploaden. De bestanden worden geüpload naar een fileupload-byod-search-index-container in de blob-opslagresource die u eerder hebt gemaakt.
Selecteer Volgende om naar het dialoogvenster Gegevensbeheer te gaan.
Selecteer Hybride en semantisch in de vervolgkeuzelijst Zoektype.

Notitie

Deze optie biedt ondersteuning voor trefwoorden en vectorzoekopdrachten. Zodra resultaten worden geretourneerd, wordt een secundair classificatieproces toegepast op de resultatenset met behulp van Deep Learning-modellen die de relevantie van de zoekfunctie voor de gebruiker verbeteren. Bekijk de Semantische zoekopdracht in de Documentatie van Azure AI Search voor meer informatie over semantische zoekopdrachten.
Zorg ervoor dat de waarde Selecteer een grootte is ingesteld op 1024.
Selecteer Volgende.
Selecteer DE API-sleutel voor het type Azure-resourceverificatie. Meer informatie over het selecteren van het juiste verificatietype in de documentatie voor Azure AI Search-verificatie.
Selecteer Volgende.
Controleer de details en selecteer Opslaan en sluiten.
Nu uw aangepaste gegevens zijn geüpload, worden de gegevens geïndexeerd en beschikbaar voor gebruik in de Chat-speeltuin. Dit proces kan enkele minuten in beslag nemen. Zodra dit is voltooid, gaat u verder met de volgende sectie.

Uw aangepaste gegevensbron gebruiken in de chatspeeltuin

Zoek de sectie Chatsessie van de pagina in Azure OpenAI Studio en voer de volgende gebruikersquery in:
```
What safety rules are required to install a clock?
```
Nadat u de gebruikersquery hebt ingediend, ziet u een resultaat dat lijkt op het volgende:
Vouw de sectie 1 verwijzingen in het chatantwoord uit en u ziet dat het bestand Clock A102 Installation Instructions.docx wordt weergegeven en dat u het kunt selecteren om het document weer te geven.

Voer het volgende gebruikersbericht in:

What should I do to mount the clock on the wall?

Als het goed is, ziet u een resultaat dat lijkt op het volgende:
Laten we nu experimenteren met het document Veelgestelde vragen over het bedrijf. Voer de volgende tekst in het queryveld Gebruiker in:
```
What is the company's policy on vacation time?
```
U ziet dat er geen informatie is gevonden voor die aanvraag.
Voer de volgende tekst in het queryveld Gebruiker in:
```
How should I handle refund requests?
```
Als het goed is, ziet u een resultaat dat lijkt op het volgende:
Vouw de sectie 1 verwijzingen in het chatantwoord uit en u ziet dat het bestand Company FAQs.docx wordt weergegeven en dat u het kunt selecteren om het document weer te geven.
Selecteer Code weergeven op de werkbalk van de chatspeeltuin.
U kunt schakelen tussen verschillende talen, het eindpunt weergeven en de sleutel van het eindpunt openen. Sluit het dialoogvenster Voorbeeldcode .
Schakel de wisselknop Onbewerkte JSON weergeven boven de chatberichten in. U ziet dat de chatsessie begint met een bericht dat lijkt op het volgende:
```
{
    "role": "system",
    "content": "You are an AI assistant that helps people find information."
}
```
Nu u een aangepaste gegevensbron hebt gemaakt en ermee hebt geëxperimenteerd in de Chat-speeltuin, gaan we kijken hoe u deze kunt gebruiken in de toepassing van het project.

De functie Bring Your Own Data gebruiken in de toepassing

Ga terug naar het project in VS Code en open het .env-bestand . Werk de volgende waarden bij met uw AI Services-eindpunt, -sleutel en -indexnaam. U hebt het eindpunt en de sleutel eerder in deze oefening gekopieerd naar een lokaal bestand.
```
AZURE_AI_SEARCH_ENDPOINT=<AI_SERVICES_ENDPOINT_VALUE>
AZURE_AI_SEARCH_KEY=<AI_SERVICES_KEY_VALUE>
AZURE_AI_SEARCH_INDEX=byod-search-index
```
In een vorige oefening hebt u de database, API's en toepassing gestart. U hebt het .env bestand ook bijgewerkt. Als u deze stappen niet hebt voltooid, volgt u de instructies aan het einde van de vorige oefening voordat u doorgaat.
Zodra de toepassing in de browser is geladen, selecteert u het pictogram Chat Help in de rechterbovenhoek van de toepassing.
De volgende tekst moet worden weergegeven in het chatdialoogvenster:
```
How should I handle a company refund request?
```
Selecteer de knop Help ophalen. Als het goed is, ziet u resultaten die zijn geretourneerd uit het FAQs.docx-document dat u eerder in Azure OpenAI Studio hebt geüpload. Als u het document wilt lezen, kunt u het vinden in de map met klantdocumenten in de hoofdmap van het project.
Wijzig de tekst in het volgende en selecteer de knop Help ophalen:
```
What safety rules are required to install a clock?
```
U ziet nu resultaten die zijn geretourneerd uit de clock A102-installatie Instructions.docx document dat u eerder in Azure OpenAI Studio hebt geüpload. Dit document is ook beschikbaar in de map documenten van de klant in de hoofdmap van het project.

De code verkennen

Tip

Als u Visual Studio Code gebruikt, kunt u bestanden rechtstreeks openen door het volgende te selecteren:

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

Typ vervolgens de naam van het bestand dat u wilt openen.

Ga terug naar de broncode van het project in Visual Studio Code.

Open het server-/apiRoutes.ts-bestand en zoek de completeBYOD route. Deze API wordt aangeroepen wanneer de knop Help ophalen is geselecteerd in het dialoogvenster Chat Help. Hiermee wordt de gebruikersprompt opgehaald uit de hoofdtekst van de aanvraag en doorgegeven aan de completeBYOD() functie in het server-/openAI.ts-bestand . De resultaten worden vervolgens geretourneerd naar de client.

router.post('/completeBYOD', async (req, res) => {
    const { prompt } = req.body;

    if (!prompt) {
        return res.status(400).json({ 
            status: false, 
            error: 'The prompt parameter must be provided.' 
        });
    }

    let result;
    try {
        // Call OpenAI to get custom "bring your own data" completion
    result = await completeBYOD(prompt);
    }
    catch (e: unknown) {
        console.error('Error parsing JSON:', e);
    }

    res.json(result);
});

Open het server-/openAI.ts-bestand en zoek de completeBYOD() functie.
```
async function completeBYOD(userPrompt: string): Promise<string> {
    const systemPrompt = 'You are an AI assistant that helps people find information in documents.';
    return await callOpenAI(systemPrompt, userPrompt, 0, true);
}
```
Deze functie heeft de volgende functies:
- De userPrompt parameter bevat de informatie die de gebruiker heeft getypt in het dialoogvenster Chat Help.
- de systemPrompt variabele definieert dat een AI-assistent die is ontworpen om mensen te helpen informatie te vinden, worden gebruikt.
- callOpenAI() wordt gebruikt om de Azure OpenAI-API aan te roepen en de resultaten te retourneren. Hiermee worden de systemPrompt en waarden en userPrompt de volgende parameters doorgegeven:
  - temperature - De hoeveelheid creativiteit die in het antwoord moet worden opgenomen. In dit geval heeft de gebruiker consistente (minder creatieve) antwoorden nodig, zodat de waarde is ingesteld op 0.
  - useBYOD - Een Booleaanse waarde die aangeeft of AI Search al dan niet samen met Azure OpenAI moet worden gebruikt. In dit geval is deze zo ingesteld true dat ai-zoekfunctionaliteit wordt gebruikt.

De callOpenAI() functie accepteert een useBYOD parameter die wordt gebruikt om te bepalen welke OpenAI-functie moet worden aangeroepen. In dit geval wordt de functie zo true ingesteld useBYOD dat de getAzureOpenAIBYODCompletion() functie wordt aangeroepen.

function callOpenAI(systemPrompt: string, userPrompt: string, temperature = 0, useBYOD = false) {
    const isAzureOpenAI = OPENAI_API_KEY && OPENAI_ENDPOINT && OPENAI_MODEL;

    if (isAzureOpenAI) {
        if (useBYOD) {
            return getAzureOpenAIBYODCompletion(systemPrompt, userPrompt, temperature);
        }
        return getAzureOpenAICompletion(systemPrompt, userPrompt, temperature);
    }

    return getOpenAICompletion(systemPrompt, userPrompt, temperature);
}

Zoek de getAzureOpenAIBYODCompletion() functie in server/openAI.ts. Het is vergelijkbaar met de getAzureOpenAICompletion() functie die u eerder hebt onderzocht, maar wordt weergegeven als een afzonderlijke functie om enkele belangrijke verschillen te markeren die uniek zijn voor het scenario 'Azure OpenAI op uw gegevens' dat beschikbaar is in Azure OpenAI.
```
async function getAzureOpenAIBYODCompletion(systemPrompt: string, userPrompt: string, temperature: number): Promise<string> {
    const dataSources = [
        {
            type: 'azure_search',
            parameters: {
                authentication: {
                    type: 'api_key',
                    key: AZURE_AI_SEARCH_KEY
                },
                endpoint: AZURE_AI_SEARCH_ENDPOINT,
                index_name: AZURE_AI_SEARCH_INDEX
            }
        }
    ];

    const completion = await createAzureOpenAICompletion(systemPrompt, userPrompt, temperature, dataSources) as AzureOpenAIYourDataResponse;
    console.log('Azure OpenAI Add Your Own Data Output: \n', completion.choices[0]?.message);
    for (let citation of completion.choices[0]?.message?.context?.citations ?? []) {
        console.log('Citation Path:', citation.filepath);
    }
    return completion.choices[0]?.message?.content?.trim() ?? '';
}
```
Let op de volgende functionaliteit in de getAzureOpenAIBYODCompletion() functie:
- Er wordt een dataSources eigenschap gemaakt die de AI Search-resource bevatkeyendpoint, en index_name waarden die eerder in deze oefening aan het .env bestand zijn toegevoegd
- De createAzureOpenAICompletion() functie wordt aangeroepen met de systemPrompt, userPrompten temperaturedataSources de waarden. Deze functie wordt gebruikt om de Azure OpenAI-API aan te roepen en de resultaten te retourneren.
- Zodra het antwoord is geretourneerd, worden de bronvermeldingen van het document vastgelegd in de console. De inhoud van het voltooiingsbericht wordt vervolgens teruggezet naar de beller.
Enkele laatste punten die u moet overwegen voordat u verdergaat met de volgende oefening:
- De voorbeeldtoepassing maakt gebruik van één index in Azure AI Search. U kunt meerdere indexen en gegevensbronnen gebruiken met Azure OpenAI. De dataSources eigenschap in de getAzureOpenAIBYODCompletion() functie kan zo nodig worden bijgewerkt om meerdere gegevensbronnen op te nemen.
- De beveiliging moet zorgvuldig worden geëvalueerd met dit type scenario. Gebruikers mogen geen vragen kunnen stellen en resultaten krijgen van documenten waartoe ze geen toegang hebben.
Nu u meer hebt geleerd over Azure OpenAI, prompts, voltooiingen en hoe u uw eigen gegevens kunt gebruiken, gaan we verder met de volgende oefening om te leren hoe communicatiefuncties kunnen worden gebruikt om de toepassing te verbeteren. Als u meer wilt weten over Azure OpenAI, bekijkt u de trainingsinhoud van Azure OpenAI Service aan de slag met Azure OpenAI Service . Aanvullende informatie over het gebruik van uw eigen gegevens met Azure OpenAI vindt u in azure OpenAI in uw gegevensdocumentatie .

Communicatie: Een Azure Communication Services-resource maken

87 minuten resterend

Effectieve communicatie is essentieel voor succesvolle aangepaste bedrijfstoepassingen. Met behulp van Azure Communication Services (ACS) kunt u functies zoals telefoongesprekken, livechat, audio-/videogesprekken en e-mail en sms-berichten toevoegen aan uw toepassingen. Eerder hebt u geleerd hoe Azure OpenAI voltooiingen voor e-mail en sms-berichten kan genereren. Nu leert u hoe u de berichten verzendt. Samen kunnen ACS en OpenAI uw toepassingen verbeteren door communicatie te vereenvoudigen, interacties te verbeteren en de bedrijfsproductiviteit te stimuleren.

In deze oefening gaat u het volgende doen:

Maak een ACS-resource (Azure Communication Services).
Voeg een gratis telefoonnummer toe met bel- en sms-mogelijkheden.
Verbinding maken met een e-maildomein.
Werk het .env-bestand van het project bij met waarden uit uw ACS-resource.

Overzicht van Microsoft Cloud-scenario's

Een Azure Communication Services-resource maken

Ga naar Azure Portal in uw browser en meld u aan als u dat nog niet hebt gedaan.
Typ communicatieservices in de zoekbalk boven aan de pagina en selecteer Communication Services in de opties die worden weergegeven.
Selecteer Maken in de werkbalk.
Voer de volgende taken uit:
- Selecteer uw Azure-abonnement.
- Selecteer de resourcegroep die u wilt gebruiken (maak een nieuwe groep als deze niet bestaat).
- Voer een ACS-resourcenaam in. Dit moet een unieke waarde zijn.
- Selecteer een gegevenslocatie.
Selecteer Beoordelen en maken gevolgd door Maken.
U hebt een nieuwe Azure Communication Services-resource gemaakt. Vervolgens schakelt u telefoongesprekken en sms-mogelijkheden in. U verbindt ook een e-maildomein met de resource.

Mogelijkheden voor bellen en sms inschakelen

Voeg een telefoonnummer toe en zorg ervoor dat het telefoonnummer belmogelijkheden heeft ingeschakeld. U gebruikt dit telefoonnummer om vanuit de app naar een telefoon te bellen.
- Selecteer Telefonie en sms -->Telefoonnummers in het menu Resource.
- Selecteer + Ophalen op de werkbalk (of selecteer de knop Een nummer ophalen) en voer de volgende gegevens in:
  - Land of regio: United States
  - Nummertype: Toll-free
  Notitie
  
  Er is een creditcard vereist voor uw Azure-abonnement om het gratis nummer te maken. Als u geen kaart in het bestand hebt, kunt u het toevoegen van een telefoonnummer overslaan en naar het volgende gedeelte van de oefening gaan waarmee een e-maildomein wordt verbonden. U kunt de app nog steeds gebruiken, maar u kunt niet bellen naar een telefoonnummer.
  - Nummer: Selecteer Toevoegen aan winkelwagen voor een van de vermelde telefoonnummers.
Selecteer Volgende, controleer de details van het telefoonnummer en selecteer Nu kopen.

Notitie

Sms-verificatie voor gratis nummers is nu verplicht in de Verenigde Staten en Canada. Als u sms-berichten wilt inschakelen, moet u verificatie indienen na de aankoop van het telefoonnummer. Hoewel deze zelfstudie dat proces niet doorloopt, kunt u Telefonie- en SMS-documenten> selecteren in het resourcesmenu en de vereiste validatiedocumentatie toevoegen.
Zodra het telefoonnummer is gemaakt, selecteert u het om naar het deelvenster Functies te gaan. Zorg ervoor dat de volgende waarden zijn ingesteld (deze moeten standaard worden ingesteld):
- Selecteer in de sectie Bellen de optie Make calls.
- Selecteer in de sectie SMS de optie Send and receive SMS.
- Selecteer Opslaan.
Kopieer de waarde van het telefoonnummer naar een bestand voor later gebruik. Het telefoonnummer moet dit algemene patroon volgen: +12345678900.

Een e-maildomein verbinden

Voer de volgende taken uit om een verbonden e-maildomein te maken voor uw ACS-resource, zodat u e-mail kunt verzenden. Dit wordt gebruikt om e-mail vanuit de app te verzenden.
- Selecteer E-mail -->Domains in het menu Resource.
- Selecteer Verbinding maken op de werkbalk.
- Selecteer uw abonnement en resourcegroep.
- Selecteer onder de vervolgkeuzelijst E-mailservice de optie Add an email service.
- Geef de e-mailservice een naam, zoals acs-demo-email-service.
- Selecteer Beoordelen en maken gevolgd door Maken.
- Zodra de implementatie is voltooid, selecteert Go to resourceen selecteert u 1-click add om een gratis Azure-subdomein toe te voegen.
- Nadat het subdomein is toegevoegd (het duurt even voordat het is geïmplementeerd), selecteert u het.
- Zodra u zich in het scherm AzureManagedDomain bevindt, selecteert u E-mailservices --MailFrom-adressen> in het menu Resource.
- Kopieer de waarde MailFrom naar een bestand. U gebruikt het later wanneer u het .env-bestand bijwerkt.
- Ga terug naar uw Azure Communication Services-resource en selecteer E-mail -->Domains in het resourcemenu.
- Selecteer Add domain en voer de MailFrom waarde uit de vorige stap in (zorg ervoor dat u het juiste abonnement, de resourcegroep en de e-mailservice selecteert). Selecteer de knop Connect.

Het bestand bijwerken `.env`

Nu uw ACS-telefoonnummer (met bellen en sms is ingeschakeld) en e-maildomein gereed zijn, werkt u de volgende sleutels/waarden bij in het .env-bestand in uw project:
```
ACS_CONNECTION_STRING=<ACS_CONNECTION_STRING>
ACS_PHONE_NUMBER=<ACS_PHONE_NUMBER>
ACS_EMAIL_ADDRESS=<ACS_EMAIL_ADDRESS>
CUSTOMER_EMAIL_ADDRESS=<EMAIL_ADDRESS_TO_SEND_EMAIL_TO>
CUSTOMER_PHONE_NUMBER=<UNITED_STATES_BASED_NUMBER_TO_SEND_SMS_TO>
```
- ACS_CONNECTION_STRING: de connection string waarde uit de sectie Sleutels van uw ACS-resource.
- ACS_PHONE_NUMBER: Wijs uw gratis nummer toe aan de ACS_PHONE_NUMBER waarde.
- ACS_EMAIL_ADDRESS: Wijs uw e-mailadres 'MailTo' toe.
- CUSTOMER_EMAIL_ADDRESS: Wijs een e-mailadres toe waarnaar u e-mail wilt verzenden vanuit de app (omdat de klantgegevens in de database van de app alleen voorbeeldgegevens zijn). U kunt een persoonlijk e-mailadres gebruiken.
- CUSTOMER_PHONE_NUMBER: U moet vanaf vandaag een Verenigde Staten telefoonnummer opgeven vanwege aanvullende verificatie die vereist is in andere landen voor het verzenden van sms-berichten. Als u geen amerikaans nummer hebt, kunt u het leeg laten.

De toepassings- en API-servers starten/opnieuw starten

Voer een van de volgende stappen uit op basis van de oefeningen die u tot nu toe hebt voltooid:

Als u de database, API-server en webserver in een eerdere oefening hebt gestart, moet u de API-server en webserver stoppen en opnieuw opstarten om de .env-bestandswijzigingen op te halen. U kunt de database actief laten.

Zoek de terminalvensters met de API-server en webserver en druk op Ctrl+C om deze te stoppen. Start ze opnieuw door in elk terminalvenster te typen npm start en op Enter te drukken. Ga door naar de volgende oefening.
Als u de database, API-server en webserver nog niet hebt gestart, voert u de volgende stappen uit:
1. In de volgende stappen maakt u drie terminalvensters in Visual Studio Code.
2. Klik met de rechtermuisknop op het .env-bestand in de lijst met Visual Studio Code-bestanden en selecteer Openen in geïntegreerde terminal. Zorg ervoor dat uw terminal zich in de hoofdmap van het project bevindt - openai-acs-msgraph - voordat u doorgaat.
3. Kies een van de volgende opties om de PostgreSQL-database te starten:
  - Als Docker Desktop is geïnstalleerd en wordt uitgevoerd, voert u deze uit docker-compose up in het terminalvenster en drukt u op Enter.
  - Als Podman met podman-compose is geïnstalleerd en uitgevoerd, voert u deze uit podman-compose up in het terminalvenster en drukt u op Enter.
  - Als u de PostgreSQL-container rechtstreeks wilt uitvoeren met docker Desktop, Podman, nerdctl of een andere containerruntime die u hebt geïnstalleerd, voert u de volgende opdracht uit in het terminalvenster:
    - Mac, Linux of Windows-subsysteem voor Linux (WSL):
```
[docker | podman | nerdctl] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v $(pwd)/data:/var/lib/postgresql/data -p 5432:5432 postgres
```
    - Windows met PowerShell:
```
[docker | podman] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v ${PWD}/data:/var/lib/postgresql/data -p 5432:5432 postgres
```
4. Zodra de databasecontainer is gestart, drukt u op het + pictogram in de werkbalk visual Studio Code Terminal om een tweede terminalvenster te maken.
5. cd in de map server/typescript en voer de volgende opdrachten uit om de afhankelijkheden te installeren en de API-server te starten.
  - npm install
  - npm start
6. Druk nogmaals op het + pictogram op de werkbalk van visual Studio Code Terminal om een derde terminalvenster te maken.
7. cd voer in de clientmap de volgende opdrachten uit om de afhankelijkheden te installeren en de webserver te starten.
  - npm install
  - npm start
8. Er wordt een browser gestart en u wordt naar http://localhost:4200.

Communicatie: een telefoongesprek voeren

79 minuten resterend

De integratie van de telefoongesprekken van Azure Communication Services in een aangepaste LOB-toepassing (Line-Of-Business) biedt verschillende belangrijke voordelen voor bedrijven en hun gebruikers:

Maakt naadloze en realtime communicatie mogelijk tussen werknemers, klanten en partners, rechtstreeks vanuit de LOB-toepassing, waardoor u niet meer hoeft te schakelen tussen meerdere platforms of apparaten.
Verbetert de gebruikerservaring en verbetert de algehele operationele efficiëntie.
Vereenvoudigt snelle probleemoplossing, omdat gebruikers snel contact kunnen maken met relevante ondersteuningsteams of deskundigen op het gebied van onderwerpen.

In deze oefening gaat u het volgende doen:

Verken de functie voor telefoongesprekken in de toepassing.
Doorloop de code om te leren hoe de functie voor telefoongesprekken is gebouwd.

De functie Telefoongesprekken gebruiken

In de vorige oefening hebt u een ACS-resource (Azure Communication Services) gemaakt en de database, webserver en API-server gestart. U hebt ook de volgende waarden in het .env-bestand bijgewerkt.
```
ACS_CONNECTION_STRING=<ACS_CONNECTION_STRING>
ACS_PHONE_NUMBER=<ACS_PHONE_NUMBER>
ACS_EMAIL_ADDRESS=<ACS_EMAIL_ADDRESS>
CUSTOMER_EMAIL_ADDRESS=<EMAIL_ADDRESS_TO_SEND_EMAIL_TO>
CUSTOMER_PHONE_NUMBER=<UNITED_STATES_BASED_NUMBER_TO_SEND_SMS_TO>
```
Zorg ervoor dat u de vorige oefening hebt voltooid voordat u doorgaat.
Ga terug naar de browser (http://localhost:4200), zoek de datagrid en selecteer Contact customer gevolgd door Klant bellen in de eerste rij.
Er wordt een onderdeel voor telefoongesprekken toegevoegd aan de koptekst. Voer uw telefoonnummer in dat u wilt bellen (zorg ervoor dat het begint met + en de landcode bevat) en selecteer Bellen. U wordt gevraagd om toegang tot uw microfoon toe te staan.
Selecteer Ophangen om het gesprek te beëindigen. Selecteer Sluiten om het onderdeel voor telefoongesprekken te sluiten.

De code voor telefoongesprekken verkennen

Tip

Als u Visual Studio Code gebruikt, kunt u bestanden rechtstreeks openen door het volgende te selecteren:

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

Typ vervolgens de naam van het bestand dat u wilt openen.

Open het bestand customers-list.component.ts . Het volledige pad naar het bestand is client/src/app/customers-list/customers-list.component.ts.
Houd er rekening mee dat openCallDialog() u een CustomerCall bericht en het telefoonnummer van de klant verzendt met behulp van een gebeurtenisbus.
```
openCallDialog(data: Phone) {
    this.eventBus.emit({ name: Events.CustomerCall, value: data });
}
```
Notitie

De event bus-code vindt u in het bestand eventbus.service.ts als u deze meer wilt verkennen. Het volledige pad naar het bestand is client/src/app/core/eventbus.service.ts.

De functie van het headeronderdeel ngOnInit() abonneert zich op de CustomerCall gebeurtenis die is verzonden door de gebeurtenisbus en geeft het onderdeel telefoongesprek weer. U vindt deze code in header.component.ts.

ngOnInit() {
    this.subscription.add(
        this.eventBus.on(Events.CustomerCall, (data: Phone) => {
            this.callVisible = true; // Show phone call component
            this.callData = data; // Set phone number to call
        })
    );
}

Open phone-call.component.ts. Neem even de tijd om de code weer te geven. Het volledige pad naar het bestand is client/src/app/phone-call/phone-call.component.ts. Let op de volgende belangrijke functies:
- Hiermee haalt u een Azure Communication Services-toegangstoken op door de acsService.getAcsToken() functie aan te roepen in ngOnInit();
- Hiermee voegt u een "telefoonkiezer" toe aan de pagina. U kunt de kiezer zien door te klikken op de invoer van het telefoonnummer in de koptekst.
- Start en beëindigt respectievelijk een aanroep met behulp van de startCall() en endCall() functies.
Voordat u de code bekijkt die het telefoongesprek uitvoert, gaan we kijken hoe het ACS-toegangstoken wordt opgehaald en hoe objecten voor telefoongesprekken worden gemaakt. Zoek de ngOnInit() functie in phone-call.component.ts.
```
async ngOnInit() {
    if (ACS_CONNECTION_STRING) {
        this.subscription.add(
            this.acsService.getAcsToken().subscribe(async (user: AcsUser) => {
                const callClient = new CallClient();
                const tokenCredential = new AzureCommunicationTokenCredential(user.token);
                this.callAgent = await callClient.createCallAgent(tokenCredential);
            })
        );
    }
}
```
Met deze functie worden de volgende acties uitgevoerd:
- Hiermee haalt u een ACS-gebruikers-id en toegangstoken op door de acsService.getAcsToken() functie aan te roepen.
- Zodra het toegangstoken is opgehaald, voert de code de volgende acties uit:
  - Hiermee maakt u een nieuw exemplaar van CallClient en AzureCommunicationTokenCredential gebruikt u het toegangstoken.
  - Hiermee maakt u een nieuw exemplaar van het gebruik van CallAgent de CallClient en AzureCommunicationTokenCredential objecten. Later ziet u dat CallAgent dit wordt gebruikt om een gesprek te starten en te beëindigen.
Open acs.services.ts en zoek de getAcsToken() functie. Het volledige pad naar het bestand is client/src/app/core/acs.service.ts. Met de functie wordt een HTTP GET-aanvraag verzonden naar de /acstoken route die wordt weergegeven door de API-server.
```
getAcsToken(): Observable<AcsUser> {
    return this.http.get<AcsUser>(this.apiUrl + 'acstoken')
    .pipe(
        catchError(this.handleError)
    );
}
```
Een API-serverfunctie met de naam createACSToken() haalt de userId en het toegangstoken op en retourneert deze naar de client. Deze vindt u in het bestand server/typescript/acs.ts .
```
import { CommunicationIdentityClient } from '@azure/communication-identity';

const connectionString = process.env.ACS_CONNECTION_STRING as string;

async function createACSToken() {
if (!connectionString) return { userId: '', token: '' };

const tokenClient = new CommunicationIdentityClient(connectionString);
const { user, token } = await tokenClient.createUserAndToken(["voip"]);
return { userId: user.communicationUserId, token };
}
```
Met deze functie worden de volgende acties uitgevoerd:
- Controleert of er een ACS-waarde connectionString beschikbaar is. Als dat niet zo is, retourneert u een object met een lege userId en token.
- Hiermee maakt u een nieuw exemplaar van CommunicationIdentityClient en geeft u deze door aan deze connectionString instantie.
- Hiermee maakt u een nieuwe gebruiker en token met behulp van tokenClient.createUserAndToken() het bereik Voip.
- Retourneert een object met de userId en token waarden.
Nu u hebt gezien hoe de userId en het token worden opgehaald, gaat u terug naar phone-call.component.ts de functie en zoekt u deze startCall() .

Deze functie wordt aangeroepen wanneer Bellen is geselecteerd in het onderdeel telefoongesprek. Het eerder genoemde object wordt gebruikt CallAgent om een aanroep te starten. De callAgent.startCall() functie accepteert een object dat het nummer aangeeft dat moet worden gebeld en het ACS-telefoonnummer dat wordt gebruikt om de oproep te voeren.

startCall() {
    this.call = this.callAgent?.startCall(
        [{ phoneNumber: this.customerPhoneNumber }], {
        alternateCallerId: { phoneNumber: this.fromNumber }
    });
    console.log('Calling: ', this.customerPhoneNumber);
    console.log('Call id: ', this.call?.id);
    this.inCall = true;

    // Adding event handlers to monitor call state
    this.call?.on('stateChanged', () => {
        console.log('Call state changed: ', this.call?.state);
        if (this.call?.state === 'Disconnected') {
            console.log('Call ended. Reason: ', this.call.callEndReason);
            this.inCall = false;
        }
    });
}

De endCall() functie wordt aangeroepen wanneer Ophangen is geselecteerd in het onderdeel Telefoongesprek.
```
endCall() {
    if (this.call) {
        this.call.hangUp({ forEveryone: true });
        this.call = undefined;
        this.inCall = false;
    }
    else {
        this.hangup.emit();
    }
}
```
Als er een aanroep wordt uitgevoerd, wordt de call.hangUp() functie aangeroepen om de aanroep te beëindigen. Als er geen oproep wordt uitgevoerd, wordt de hangup gebeurtenis verzonden naar het bovenliggende headeronderdeel om het onderdeel voor telefoongesprekken te verbergen.
Voordat u verdergaat met de volgende oefening, gaan we de belangrijkste concepten bekijken die in deze oefening worden behandeld:
- Een ACS-gebruikers-id en -toegangstoken worden opgehaald van de API-server met behulp van de acsService.createUserAndToken() functie.
- Het token wordt gebruikt om een CallClient en CallAgent object te maken.
- Het CallAgent object wordt gebruikt om een aanroep te starten en te beëindigen door respectievelijk de callAgent.startCall() en callAgent.hangUp() functies aan te roepen.
Nu u hebt geleerd hoe telefoongesprekken kunnen worden geïntegreerd in een toepassing, gaan we onze focus verplaatsen naar het gebruik van Azure Communication Services voor het verzenden van e-mail- en sms-berichten.

Communicatie: e-mail en sms-berichten verzenden

69 minuten resterend

Naast telefoongesprekken kan Azure Communication Services ook e-mail- en sms-berichten verzenden. Dit kan handig zijn als u rechtstreeks vanuit de toepassing een bericht naar een klant of een andere gebruiker wilt verzenden.

In deze oefening gaat u het volgende doen:

Ontdek hoe e-mail- en sms-berichten kunnen worden verzonden vanuit de toepassing.
Doorloop de code om te leren hoe de e-mail- en sms-functionaliteit wordt geïmplementeerd.

De e-mail- en sms-functies gebruiken

In een vorige oefening hebt u een ACS-resource (Azure Communication Services) gemaakt en de database, webserver en API-server gestart. U hebt ook de volgende waarden in het .env-bestand bijgewerkt.
```
ACS_CONNECTION_STRING=<ACS_CONNECTION_STRING>
ACS_PHONE_NUMBER=<ACS_PHONE_NUMBER>
ACS_EMAIL_ADDRESS=<ACS_EMAIL_ADDRESS>
CUSTOMER_EMAIL_ADDRESS=<EMAIL_ADDRESS_TO_SEND_EMAIL_TO>
CUSTOMER_PHONE_NUMBER=<UNITED_STATES_BASED_NUMBER_TO_SEND_SMS_TO>
```
Zorg ervoor dat u de oefening hebt voltooid voordat u doorgaat.
Ga terug naar de browser (http://localhost:4200) en selecteer Contact customer gevolgd door e-mail/sms-klant in de eerste rij.
Selecteer het tabblad E-mail/SMS en voer de volgende taken uit:
- Voer een onderwerp en hoofdtekst van een e-mail in en selecteer de knop E-mail verzenden.
- Voer een sms-bericht in en selecteer de knop Sms verzenden.
Notitie

Sms-verificatie voor gratis nummers is nu verplicht in de Verenigde Staten en Canada. Als u sms-berichten wilt inschakelen, moet u verificatie indienen na de aankoop van het telefoonnummer. Hoewel deze zelfstudie dat proces niet doorloopt, kunt u Telefonie- en SMS-documenten selecteren in uw Azure Communication Services-resource> in Azure Portal en de vereiste validatiedocumentatie toevoegen.
Controleer of u de e-mail- en sms-berichten hebt ontvangen. Sms-functionaliteit werkt alleen als u de in de vorige notitie vermelde regelgevingsdocumenten hebt ingediend. Ter herinnering wordt het e-mailbericht verzonden naar de waarde die is gedefinieerd voor CUSTOMER_EMAIL_ADDRESS en wordt het SMS-bericht verzonden naar de waarde die is gedefinieerd CUSTOMER_PHONE_NUMBER in het .env-bestand . Als u geen Verenigde Staten telefoonnummer voor sms-berichten kunt opgeven, kunt u die stap overslaan.

Notitie

Als u het e-mailbericht niet in uw Postvak IN ziet voor het adres dat u hebt gedefinieerd CUSTOMER_EMAIL_ADDRESS in het .env-bestand , controleert u uw spammap.

De e-mailcode verkennen

Tip

Als u Visual Studio Code gebruikt, kunt u bestanden rechtstreeks openen door het volgende te selecteren:

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

Typ vervolgens de naam van het bestand dat u wilt openen.

Open het bestand customers-list.component.ts . Het volledige pad naar het bestand is client/src/app/customers-list/customers-list.component.ts.

Wanneer u Contactpersoon klant hebt geselecteerd, gevolgd door e-mail/sms-klant in het datagrid, heeft het customer-list onderdeel een dialoogvenster weergegeven. Dit wordt verwerkt door de openEmailSmsDialog() functie in het bestand customer-list.component.ts .

openEmailSmsDialog(data: any) {
    if (data.phone && data.email) {
        // Create the data for the dialog
        let dialogData: EmailSmsDialogData = {
            prompt: '',
            title: `Contact ${data.company}`,
            company: data.company,
            customerName: data.first_name + ' ' + data.last_name,
            customerEmailAddress: data.email,
            customerPhoneNumber: data.phone
        }

        // Open the dialog
        const dialogRef = this.dialog.open(EmailSmsDialogComponent, {
            data: dialogData
        });

        // Subscribe to the dialog afterClosed observable to get the dialog result
        this.subscription.add(
            dialogRef.afterClosed().subscribe((response: EmailSmsDialogData) => {
                console.log('SMS dialog result:', response);
                if (response) {
                    dialogData = response;
                }
            })
        );
    }
    else {
        alert('No phone number available.');
    }
}

De openEmailSmsDialog() functie voert de volgende taken uit:

Hiermee wordt gecontroleerd of het data object (dat de rij van de datagrid vertegenwoordigt) een phone en email eigenschap bevat. Als dit het geval is, wordt er een dialogData object gemaakt dat de informatie bevat die moet worden doorgegeven aan het dialoogvenster.
Hiermee opent u het EmailSmsDialogComponent dialoogvenster en geeft u het dialogData object hieraan door.
Hiermee abonneert u zich op de afterClosed() gebeurtenis van het dialoogvenster. Deze gebeurtenis wordt geactiveerd wanneer het dialoogvenster wordt gesloten. Het response object bevat de gegevens die zijn ingevoerd in het dialoogvenster.

Open het bestand email-sms-dialog.component.ts . Het volledige pad naar het bestand is client/src/app/email-sms-dialog/email-sms-dialog.component.ts.
Zoek de sendEmail() functie:
```
sendEmail() {
    if (this.featureFlags.acsEmailEnabled) {
        // Using CUSTOMER_EMAIL_ADDRESS instead of this.data.email for testing purposes
        this.subscription.add(
            this.acsService.sendEmail(this.emailSubject, this.emailBody, 
                this.getFirstName(this.data.customerName), CUSTOMER_EMAIL_ADDRESS /* this.data.email */)
            .subscribe(res => {
                console.log('Email sent:', res);
                if (res.status) {
                    this.emailSent = true;
                }
            })
        );
    }
    else {
        this.emailSent = true; // Used when ACS email isn't enabled
    }
}
```
De sendEmail() functie voert de volgende taken uit:
- Controleert of de acsEmailEnabled functievlag is ingesteld op true. Met deze vlag wordt gecontroleerd of de ACS_EMAIL_ADDRESS omgevingsvariabele een toegewezen waarde heeft.
- Als acsEmailEnabled waar is, wordt de acsService.sendEmail() functie aangeroepen en worden het e-mailonderwerp, de hoofdtekst, de naam van de klant en het e-mailadres van de klant doorgegeven. Omdat de database voorbeeldgegevens bevat, wordt de CUSTOMER_EMAIL_ADDRESS omgevingsvariabele gebruikt in plaats van this.data.email. In een echte toepassing zou de this.data.email waarde worden gebruikt.
- Abonneert u op de sendEmail() functie in de acsService service. Met deze functie wordt een RxJS geretourneerd die het antwoord van de service aan de clientzijde bevat.
- Als het e-mailbericht is verzonden, wordt de emailSent eigenschap ingesteld op true.
Om betere code-inkapseling en hergebruik te bieden, worden services aan de clientzijde zoals acs.service.ts in de toepassing gebruikt. Hierdoor kan alle ACS-functionaliteit op één plaats worden samengevoegd.
Open acs.service.ts en zoek de sendEmail() functie. Het volledige pad naar het bestand is client/src/app/core/acs.service.ts.
```
sendEmail(subject: string, message: string, customerName: string, customerEmailAddress: string) : Observable<EmailSmsResponse> {
    return this.http.post<EmailSmsResponse>(this.apiUrl + 'sendEmail', { subject, message, customerName, customerEmailAddress })
    .pipe(
        catchError(this.handleError)
    );
}
```
De sendEmail() functie in AcsService voert de volgende taken uit:
- Roept de http.post() functie aan en geeft het e-mailonderwerp, het bericht, de naam van de klant en het e-mailadres van de klant door aan de functie. De http.post() functie retourneert een RxJS waarneembaar die het antwoord van de API-aanroep bevat.
- Verwerkt eventuele fouten die door de http.post() functie worden geretourneerd met behulp van de RxJS-operator catchError .
Laten we nu eens kijken hoe de toepassing communiceert met de ACS-e-mailfunctie. Open het acs.ts-bestand en zoek de sendEmail() functie. Het volledige pad naar het bestand is server/typescript/acs.ts.
De sendEmail() functie voert de volgende taken uit:
- Hiermee maakt u een nieuw EmailClient object en geeft u de ACS-verbindingsreeks door aan het object (deze waarde wordt opgehaald uit de ACS_CONNECTION_STRING omgevingsvariabele).
```
const emailClient = new EmailClient(connectionString);
```
- Hiermee maakt u een nieuw EmailMessage object en geeft u de gegevens van de afzender, het onderwerp, het bericht en de geadresseerde door.
```
const msgObject: EmailMessage = {
    senderAddress: process.env.ACS_EMAIL_ADDRESS as string,
    content: {
        subject: subject,
        plainText: message,
    },
    recipients: {
        to: [
            {
                address: customerEmailAddress,
                displayName: customerName,
            },
        ],
    },
};
```
- Verzendt het e-mailbericht met behulp van de emailClient.beginSend() functie en retourneert het antwoord. Hoewel de functie in dit voorbeeld slechts naar één geadresseerde wordt verzonden, kan de beginSend() functie ook worden gebruikt om naar meerdere geadresseerden te verzenden.
```
const poller = await emailClient.beginSend(msgObject);
```
- Wacht totdat het poller object klaar is en stuurt het antwoord naar de beller.

De SMS-code verkennen

Ga terug naar het email-sms-dialog.component.ts bestand dat u eerder hebt geopend. Het volledige pad naar het bestand is client/src/app/email-sms-dialog/email-sms-dialog.component.ts.
Zoek de sendSms() functie:
```
sendSms() {
    if (this.featureFlags.acsPhoneEnabled) {
        // Using CUSTOMER_PHONE_NUMBER instead of this.data.customerPhoneNumber for testing purposes
        this.subscription.add(
            this.acsService.sendSms(this.smsMessage, CUSTOMER_PHONE_NUMBER /* this.data.customerPhoneNumber */)
              .subscribe(res => {
                if (res.status) {
                    this.smsSent = true;
                }
            })
        );
    }
    else {
        this.smsSent = true;
    }
}
```
De sendSMS() functie voert de volgende taken uit:
- Controleert of de acsPhoneEnabled functievlag is ingesteld op true. Met deze vlag wordt gecontroleerd of de ACS_PHONE_NUMBER omgevingsvariabele een toegewezen waarde heeft.
- Als acsPhoneEnabled waar is, wordt de acsService.SendSms() functie aangeroepen en worden het sms-bericht en het telefoonnummer van de klant doorgegeven. Omdat de database voorbeeldgegevens bevat, wordt de CUSTOMER_PHONE_NUMBER omgevingsvariabele gebruikt in plaats van this.data.customerPhoneNumber. In een echte toepassing zou de this.data.customerPhoneNumber waarde worden gebruikt.
- Abonneert u op de sendSms() functie in de acsService service. Met deze functie wordt een RxJS geretourneerd die het antwoord van de service aan de clientzijde bevat.
- Als het SMS-bericht is verzonden, wordt de smsSent eigenschap ingesteld op true.
Open acs.service.ts en zoek de sendSms() functie. Het volledige pad naar het bestand is client/src/app/core/acs.service.ts.
```
sendSms(message: string, customerPhoneNumber: string) : Observable<EmailSmsResponse> {
    return this.http.post<EmailSmsResponse>(this.apiUrl + 'sendSms', { message, customerPhoneNumber })
    .pipe(
        catchError(this.handleError)
    );
}  
```
De sendSms() functie voert de volgende taken uit:
- Roept de http.post() functie aan en geeft het bericht en het telefoonnummer van de klant hieraan door. De http.post() functie retourneert een RxJS waarneembaar die het antwoord van de API-aanroep bevat.
- Verwerkt eventuele fouten die door de http.post() functie worden geretourneerd met behulp van de RxJS-operator catchError .
Laten we ten slotte kijken hoe de toepassing communiceert met de ACS SMS-functie. Open het bestand acs.ts . Het volledige pad naar het bestand is server/typescript/acs.ts en zoek de sendSms() functie.
De sendSms() functie voert de volgende taken uit:
- Hiermee maakt u een nieuw SmsClient object en geeft u de ACS-verbindingsreeks door aan het object (deze waarde wordt opgehaald uit de ACS_CONNECTION_STRING omgevingsvariabele).
```
const smsClient = new SmsClient(connectionString);
```
- Roept de functie aan en geeft het ACS-telefoonnummer (from), het telefoonnummer van de smsClient.send() klant (to) en het sms-bericht door:
```
const sendResults = await smsClient.send({
    from: process.env.ACS_PHONE_NUMBER as string,
    to: [customerPhoneNumber],
    message: message
});
return sendResults;
```
- Retourneert het antwoord op de beller.
In de volgende artikelen vindt u meer informatie over acs-e-mail en sms-functionaliteit:
- E-mail in Azure Communication Services
- SMS in Azure Communication Services
Voordat u verdergaat met de volgende oefening, gaan we de belangrijkste concepten bekijken die in deze oefening worden behandeld:
- Het acs.service.ts-bestand bevat de ACS-e-mail- en SMS-functionaliteit die wordt gebruikt door de toepassing aan de clientzijde. Het verwerkt de API-aanroepen naar de server en retourneert het antwoord op de aanroeper.
- De API aan de serverzijde maakt gebruik van acs EmailClient en SmsClient objecten om e-mail- en sms-berichten te verzenden.
Nu u hebt geleerd hoe e-mail- en sms-berichten kunnen worden verzonden, gaan we onze focus verplaatsen naar het integreren van organisatiegegevens in de toepassing.

Organisatiegegevens: Een Microsoft Entra ID-app-registratie maken

59 minuten resterend

Verbeter de productiviteit van gebruikers door organisatiegegevens (e-mailberichten, bestanden, chats en agendagebeurtenissen) rechtstreeks te integreren in uw aangepaste toepassingen. Met behulp van Microsoft Graph API's en Microsoft Entra ID kunt u naadloos relevante gegevens in uw apps ophalen en weergeven, waardoor gebruikers minder context hoeven te schakelen. Of het nu verwijst naar een e-mailbericht dat naar een klant wordt verzonden, een Teams-bericht bekijkt of een bestand opent, gebruikers kunnen snel de informatie vinden die ze nodig hebben zonder uw app te verlaten, hun besluitvormingsproces te stroomlijnen.

In deze oefening gaat u het volgende doen:

Maak een Microsoft Entra ID-app-registratie zodat Microsoft Graph toegang heeft tot organisatiegegevens en deze in de app kan overbrengen.
Zoek team en channel id's van Microsoft Teams die nodig zijn om chatberichten naar een specifiek kanaal te verzenden.
Werk het .env-bestand van het project bij met waarden uit de registratie van uw Microsoft Entra ID-app.

Overzicht van Microsoft Cloud-scenario's

Een Microsoft Entra ID-app-registratie maken

Ga naar Azure Portal en selecteer Microsoft Entra-id.
Selecteer Beheren -->App-registraties gevolgd door + Nieuwe registratie.
Vul de details van het nieuwe app-registratieformulier in zoals hieronder wordt weergegeven en selecteer Registreren:
- Naam: microsoft-graph-app
- Ondersteunde accounttypen: Accounts in elke organisatiemap (Elke Microsoft Entra ID-tenant - Multitenant)
- URI omleiden:
  - Selecteer toepassing met één pagina (SPA) en voer http://localhost:4200 het veld Omleidings-URI in.
- Selecteer Registreren om de app-registratie te maken.

Selecteer Overzicht in het resourcemenu en kopieer de Application (client) ID waarde naar het Klembord.

Het .env-bestand van het project bijwerken

Open het .env-bestand in uw editor en wijs de Application (client) ID waarde toe aan ENTRAID_CLIENT_ID.
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
```
Als u de mogelijkheid wilt inschakelen om een bericht vanuit de app te verzenden naar een Teams-kanaal, meldt u zich aan bij Microsoft Teams met uw Microsoft 365 dev-tenantaccount (dit wordt vermeld in de voorgestelde vragen voor de zelfstudie).
Zodra u bent aangemeld, vouwt u een team uit en zoekt u een kanaal waarnaar u berichten vanuit de app wilt verzenden. U kunt bijvoorbeeld het bedrijfsteam en het kanaal Algemeen selecteren (of welk team/kanaal u ook wilt gebruiken).
Klik in de teamkoptekst op de drie puntjes (...) en selecteer Koppeling naar team ophalen.
In de koppeling die wordt weergegeven in het pop-upvenster, is de team-id de tekenreeks van letters en cijfers erna team/. In de koppeling 'https://teams.microsoft.com/l/team/19%3ae9b9.../"is de team-id bijvoorbeeld 19%3ae9b9... tot aan het volgende / teken.
Kopieer de team-id en wijs deze TEAM_ID toe in het .env-bestand .
Klik in de kanaalkoptekst op de drie puntjes (...) en selecteer Koppeling naar kanaal ophalen.
In de koppeling die wordt weergegeven in het pop-upvenster, is de kanaal-id de tekenreeks van letters en cijfers erna channel/. In de koppeling 'https://teams.microsoft.com/l/channel/19%3aQK02.../"is de kanaal-id bijvoorbeeld 19%3aQK02... tot aan het volgende / teken.
Kopieer de kanaal-id en wijs deze CHANNEL_ID toe in het .env-bestand .
Sla het env-bestand op voordat u doorgaat.

De toepassings- en API-servers starten/opnieuw starten

Voer een van de volgende stappen uit op basis van de oefeningen die u tot nu toe hebt voltooid:

Als u de database, API-server en webserver in een eerdere oefening hebt gestart, moet u de API-server en webserver stoppen en opnieuw opstarten om de .env-bestandswijzigingen op te halen. U kunt de database actief laten.

Zoek de terminalvensters met de API-server en webserver en druk op Ctrl+C om deze te stoppen. Start ze opnieuw door in elk terminalvenster te typen npm start en op Enter te drukken. Ga door naar de volgende oefening.
Als u de database, API-server en webserver nog niet hebt gestart, voert u de volgende stappen uit:
1. In de volgende stappen maakt u drie terminalvensters in Visual Studio Code.
2. Klik met de rechtermuisknop op het .env-bestand in de lijst met Visual Studio Code-bestanden en selecteer Openen in geïntegreerde terminal. Zorg ervoor dat uw terminal zich in de hoofdmap van het project bevindt - openai-acs-msgraph - voordat u doorgaat.
3. Kies een van de volgende opties om de PostgreSQL-database te starten:
  - Als Docker Desktop is geïnstalleerd en wordt uitgevoerd, voert u deze uit docker-compose up in het terminalvenster en drukt u op Enter.
  - Als Podman met podman-compose is geïnstalleerd en uitgevoerd, voert u deze uit podman-compose up in het terminalvenster en drukt u op Enter.
  - Als u de PostgreSQL-container rechtstreeks wilt uitvoeren met docker Desktop, Podman, nerdctl of een andere containerruntime die u hebt geïnstalleerd, voert u de volgende opdracht uit in het terminalvenster:
    - Mac, Linux of Windows-subsysteem voor Linux (WSL):
```
[docker | podman | nerdctl] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v $(pwd)/data:/var/lib/postgresql/data -p 5432:5432 postgres
```
    - Windows met PowerShell:
```
[docker | podman] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v ${PWD}/data:/var/lib/postgresql/data -p 5432:5432 postgres
```
4. Zodra de databasecontainer is gestart, drukt u op het + pictogram in de werkbalk visual Studio Code Terminal om een tweede terminalvenster te maken.
5. cd in de map server/typescript en voer de volgende opdrachten uit om de afhankelijkheden te installeren en de API-server te starten.
  - npm install
  - npm start
6. Druk nogmaals op het + pictogram op de werkbalk van visual Studio Code Terminal om een derde terminalvenster te maken.
7. cd voer in de clientmap de volgende opdrachten uit om de afhankelijkheden te installeren en de webserver te starten.
  - npm install
  - npm start
8. Er wordt een browser gestart en u wordt naar http://localhost:4200.

Organisatiegegevens: aanmelden bij een gebruiker en een toegangstoken ophalen

51 minuten resterend

Gebruikers moeten zich verifiëren met de Microsoft Entra-id, zodat Microsoft Graph toegang heeft tot organisatiegegevens. In deze oefening ziet u hoe het onderdeel van mgt-login de Microsoft Graph Toolkit kan worden gebruikt om gebruikers te verifiëren en een toegangstoken op te halen. Het toegangstoken kan vervolgens worden gebruikt om aanroepen te doen naar Microsoft Graph.

Notitie

Als u geen kennis hebt met Microsoft Graph, kunt u er meer informatie over vinden in het leertraject Basisinformatie over Microsoft Graph.

In deze oefening gaat u het volgende doen:

Leer hoe u een Microsoft Entra ID-app koppelt aan de Microsoft Graph Toolkit om gebruikers te verifiëren en organisatiegegevens op te halen.
Meer informatie over het belang van bereiken.
Meer informatie over hoe het mgt-login-onderdeel van de Microsoft Graph Toolkit kan worden gebruikt om gebruikers te verifiëren en een toegangstoken op te halen.

In de vorige oefening hebt u een app-registratie gemaakt in Microsoft Entra ID en de toepassingsserver en API-server gestart. U hebt ook de volgende waarden in het .env bestand bijgewerkt (TEAM_ID en CHANNEL_ID zijn optioneel):
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Zorg ervoor dat u de vorige oefening hebt voltooid voordat u doorgaat.
Ga terug naar de browser (http://localhost:4200), selecteer Aanmelden in de header en meld u aan met een beheerdersaccount van uw Microsoft 365 Developer-tenant.

Tip

Meld u aan met uw microsoft 365-tenantbeheerdersaccount voor ontwikkelaars. U kunt andere gebruikers in uw ontwikkelaarstenant bekijken door naar de Microsoft 365-beheercentrum te gaan.
Als u zich voor het eerst aanmeldt bij de toepassing, wordt u gevraagd toestemming te geven voor de machtigingen die door de toepassing zijn aangevraagd. In de volgende sectie leert u meer over deze machtigingen (ook wel 'bereiken' genoemd) terwijl u de code verkent. Selecteer Accepteren om door te gaan.
Zodra u bent aangemeld, ziet u de naam van de gebruiker die in de koptekst wordt weergegeven.

Nu u zich hebt aangemeld, gaan we kijken naar de code die wordt gebruikt om de gebruiker aan te melden en een toegangstoken en gebruikersprofiel op te halen. U vindt meer informatie over het webonderdeel mgt-login dat deel uitmaakt van de Microsoft Graph Toolkit.

Tip

Als u Visual Studio Code gebruikt, kunt u bestanden rechtstreeks openen door het volgende te selecteren:

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

Typ vervolgens de naam van het bestand dat u wilt openen.

Open de client/package.json en u ziet dat de @microsoft/mgt en @microsoft/mgt-components pakketten zijn opgenomen in de afhankelijkheden. Het @microsoft/mgt pakket bevat MSAL-providerfuncties (Microsoft Authentication Library) en webonderdelen, zoals mgt-login en anderen die kunnen worden gebruikt om gebruikers aan te melden en organisatiegegevens op te halen en weer te geven.
Open client/src/main.ts en let op de volgende importbewerkingen uit het @microsoft/mgt-components pakket. De geïmporteerde symbolen worden gebruikt om de Microsoft Graph Toolkit-onderdelen te registreren die in de toepassing worden gebruikt.
```
import { registerMgtLoginComponent, registerMgtSearchResultsComponent, registerMgtPersonComponent,  } from '@microsoft/mgt-components';
```
Schuif naar de onderkant van het bestand en noteer de volgende code:
```
registerMgtLoginComponent();
registerMgtSearchResultsComponent();
registerMgtPersonComponent();
```
Met deze code worden de mgt-login, mgt-search-resultsen mgt-person webonderdelen geregistreerd en ingeschakeld voor gebruik in de toepassing.
Als u het mgt-login-onderdeel wilt gebruiken om gebruikers aan te melden, moet naar de client-id van de Microsoft Entra ID-app (opgeslagen in het .env-bestand als ENTRAID_CLIENT_ID) worden verwezen en gebruikt.
Open graph.service.ts en zoek de init() functie. Het volledige pad naar het bestand is client/src/app/core/graph.service.ts. U ziet de volgende import en code:
```
import { Msal2Provider, Providers, ProviderState } from '@microsoft/mgt';

init() {
    if (!this.featureFlags.microsoft365Enabled) return;

    if (!Providers.globalProvider) {
        console.log('Initializing Microsoft Graph global provider...');
        Providers.globalProvider = new Msal2Provider({
            clientId: ENTRAID_CLIENT_ID,
            scopes: ['User.Read', 'Presence.Read', 'Chat.ReadWrite', 'Calendars.Read', 
                    'ChannelMessage.Read.All', 'ChannelMessage.Send', 'Files.Read.All', 'Mail.Read']
        });
    }
    else {
        console.log('Global provider already initialized');
    }
}
```
Met deze code wordt een nieuw Msal2Provider object gemaakt, waarbij de Client-id van Microsoft Entra ID wordt doorgegeven vanuit uw app-registratie en waarvoor scopes de app toegang aanvraagt. Deze scopes worden gebruikt om toegang aan te vragen tot Microsoft Graph-resources waartoe de app toegang heeft. Nadat het Msal2Provider object is gemaakt, wordt het toegewezen aan het Providers.globalProvider object, dat wordt gebruikt door Microsoft Graph Toolkit-onderdelen om gegevens op te halen uit Microsoft Graph.
Open header.component.html in uw editor en zoek het mgt-login-onderdeel . Het volledige pad naar het bestand is client/src/app/header/header.component.html.
```
@if (this.featureFlags.microsoft365Enabled) {
    <mgt-login class="mgt-dark" (loginCompleted)="loginCompleted()"></mgt-login>
}
```
Met het mgt-login-onderdeel kunnen gebruikers zich aanmelden en toegang krijgen tot een token dat wordt gebruikt met Microsoft Graph. Wanneer u zich hebt aangemeld, wordt de loginCompleted gebeurtenis geactiveerd, waarmee de loginCompleted() functie wordt aangeroepen. Hoewel mgt-login wordt gebruikt in een Angular-onderdeel in dit voorbeeld, is deze compatibel met elke webtoepassing.

Weergave van het mgt-login-onderdeel is afhankelijk van de featureFlags.microsoft365Enabled waarde die wordt ingesteld op true. Met deze aangepaste vlag wordt gecontroleerd op de aanwezigheid van de ENTRAID_CLIENT_ID omgevingsvariabele om te bevestigen dat de toepassing correct is geconfigureerd en kan worden geverifieerd met Microsoft Entra ID. De vlag wordt toegevoegd voor gevallen waarin gebruikers ervoor kiezen om alleen de AI- of communicatieoefeningen in de zelfstudie te voltooien, in plaats van de hele reeks oefeningen te volgen.
Open header.component.ts en zoek de loginCompleted functie. Deze functie wordt aangeroepen wanneer de loginCompleted gebeurtenis wordt verzonden en verwerkt het ophalen van het profiel van de aangemelde gebruiker met behulp van Providers.globalProvider.
```
async loginCompleted() {
    const me = await Providers.globalProvider.graph.client.api('me').get();
    this.userLoggedIn.emit(me);
}
```
In dit voorbeeld wordt een aanroep uitgevoerd naar de Microsoft Graph me API om het profiel van de gebruiker op te halen (me vertegenwoordigt de huidige aangemelde gebruiker). De this.userLoggedIn.emit(me) code-instructie verzendt een gebeurtenis van het onderdeel om de profielgegevens door te geven aan het bovenliggende onderdeel. Het bovenliggende onderdeel is app.component.ts bestand in dit geval. Dit is het hoofdonderdeel voor de toepassing.

Ga naar de documentatie van Microsoft Graph Toolkit voor meer informatie over het mgt-login-onderdeel.
Nu u zich hebt aangemeld bij de toepassing, gaan we kijken hoe organisatorische gegevens kunnen worden opgehaald.

Organisatiegegevens: Bestanden, chats ophalen en berichten verzenden naar Teams

41 minuten resterend

In de digitale omgeving van vandaag werken gebruikers met een breed scala aan organisatiegegevens, waaronder e-mailberichten, chats, bestanden, agendagebeurtenissen en meer. Dit kan leiden tot frequente contextverschuivingen ( schakelen tussen taken of toepassingen) die de focus kunnen verstoren en de productiviteit kunnen verminderen. Een gebruiker die aan een project werkt, moet bijvoorbeeld overschakelen van de huidige toepassing naar Outlook om belangrijke details in een e-mailbericht te vinden of over te schakelen naar OneDrive voor Bedrijven om een gerelateerd bestand te vinden. Deze back-and-forth-actie verstoort de focus en verspilt tijd die beter aan de taak kan worden besteed.

Om de efficiëntie te verbeteren, kunt u organisatiegegevens rechtstreeks integreren in de toepassingen die gebruikers dagelijks gebruiken. Door organisatorische gegevens naar uw toepassingen te brengen, kunnen gebruikers naadloos informatie openen en beheren, waardoor contextverschuivingen worden geminimaliseerd en de productiviteit wordt verbeterd. Daarnaast biedt deze integratie waardevolle inzichten en context, waardoor gebruikers weloverwogen beslissingen kunnen nemen en effectiever kunnen werken.

In deze oefening gaat u het volgende doen:

Meer informatie over hoe het webonderdeel mgt-search-results in de Microsoft Graph Toolkit kan worden gebruikt om te zoeken naar bestanden.
Leer hoe u Microsoft Graph rechtstreeks aanroept om bestanden op te halen uit OneDrive voor Bedrijven en chatberichten van Microsoft Teams.
Meer informatie over het verzenden van chatberichten naar Microsoft Teams-kanalen met behulp van Microsoft Graph.

De functie Organisatiegegevens gebruiken

In een vorige oefening hebt u een app-registratie gemaakt in Microsoft Entra ID en de toepassingsserver en API-server gestart. U hebt ook de volgende waarden in het .env bestand bijgewerkt.
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Zorg ervoor dat u de vorige oefening hebt voltooid voordat u doorgaat.
Ga terug naar de browser (http://localhost:4200). Als u zich nog niet hebt aangemeld, selecteert u Aanmelden in de koptekst en meldt u zich aan met een gebruiker in uw Microsoft 365 Developer-tenant.
Notitie

Naast verificatie van de gebruiker, haalt het webonderdeel mgt-login ook een toegangstoken op dat door Microsoft Graph kan worden gebruikt voor toegang tot bestanden, chats, e-mailberichten, agenda-items en andere organisatiegegevens. Het toegangstoken bevat de bereiken (machtigingen) zoals Chat.ReadWrite, Files.Read.Allen andere bereiken die u eerder hebt gezien:
```
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']
});
```
Selecteer Gerelateerde inhoud weergeven voor de rij Adatum Corporation in de datagrid. Hierdoor worden organisatiegegevens, zoals bestanden, chats, e-mailberichten en agendagebeurtenissen, opgehaald met Behulp van Microsoft Graph. Zodra de gegevens zijn geladen, worden deze weergegeven onder het datagrid in een interface met tabbladen. Het is belangrijk te vermelden dat u op dit moment mogelijk geen gegevens ziet, omdat u nog geen bestanden, chats, e-mailberichten of agendagebeurtenissen voor de gebruiker hebt toegevoegd in uw Microsoft 365-ontwikkelaarstenant. Laten we dat in de volgende stap oplossen.
Uw Microsoft 365-tenant heeft in deze fase mogelijk geen gerelateerde organisatiegegevens voor Adatum Corporation . Voer ten minste een van de volgende acties uit om enkele voorbeeldgegevens toe te voegen:
- Voeg bestanden toe door naar uw Microsoft 365 Developer-tenantreferenties te https://onedrive.com gaan en u aan te melden.
  - Selecteer Mijn bestanden in het linkernavigatievenster.
  - Selecteer + Nieuwe toevoegen en vervolgens Map uploaden vanuit het menu.
  - Selecteer de map documenten van openai-acs-msgraph/customer in het project dat u hebt gekloond.
- Voeg chatberichten en agendagebeurtenissen toe door naar uw Microsoft 365 Developer-tenantreferenties te https://teams.microsoft.com gaan en u aan te melden.
  - Selecteer Teams in het linkernavigatievenster.
  - Selecteer een team en kanaal.
  - Selecteer Een bericht starten.
  - Voer nieuwe bestelling in voor Adatum Corporation voor het onderwerp en eventuele extra tekst die u wilt toevoegen in de berichttekst. Selecteer de knop Posten .
    
    U kunt gerust extra chatberichten toevoegen waarin andere bedrijven worden vermeld die in de toepassing worden gebruikt, zoals Adventure Works Cycles, Contoso Pharmaceuticals en Tailwind Traders.
  - Selecteer Agenda in het linkernavigatievenster.
  - Selecteer Nieuwe vergadering.
  - Voer 'Vergaderen met Adatum Corporation over projectplanning' in als titel en hoofdtekst.
  - Selecteer Opslaan.
- Voeg e-mailberichten toe door naar uw Microsoft 365 Developer-tenantreferenties te https://outlook.com gaan en u aan te melden.
  - Selecteer Nieuwe e-mail.
  - Voer uw persoonlijke e-mailadres in het veld Aan in.
  - Voer nieuwe bestelling in voor Adatum Corporation voor het onderwerp en alles wat u wilt voor het lichaam.
  - Selecteer Verzenden.
Ga terug naar de toepassing in de browser en vernieuw de pagina. Selecteer Gerelateerde inhoud opnieuw weergeven voor de rij Adatum Corporation . U ziet nu gegevens die worden weergegeven op de tabbladen, afhankelijk van de taken die u in de vorige stap hebt uitgevoerd.
Laten we de code verkennen waarmee de functie voor organisatiegegevens in de toepassing wordt ingeschakeld. Om de gegevens op te halen, gebruikt het gedeelte aan de clientzijde van de toepassing het toegangstoken dat is opgehaald door het mgt-login-onderdeel dat u eerder hebt bekeken om aanroepen te doen naar Microsoft Graph-API's.

Bestanden zoeken-code verkennen

Tip

Als u Visual Studio Code gebruikt, kunt u bestanden rechtstreeks openen door het volgende te selecteren:

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

Typ vervolgens de naam van het bestand dat u wilt openen.

Laten we beginnen met het bekijken van hoe bestandsgegevens worden opgehaald uit OneDrive voor Bedrijven. Open files.component.html en neem even de tijd om de code te bekijken. Het volledige pad naar het bestand is client/src/app/files/files.component.html.
Zoek het onderdeel mgt-search-results en noteer de volgende kenmerken:
```
<mgt-search-results 
    class="search-results" 
    entity-types="driveItem" 
    [queryString]="searchText"
    (dataChange)="dataChange($any($event))" 
/>
```
Het onderdeel mgt-search-results maakt deel uit van de Microsoft Graph Toolkit en zoals de naam al aangeeft, wordt het gebruikt om zoekresultaten van Microsoft Graph weer te geven. Het onderdeel maakt gebruik van de volgende functies in dit voorbeeld:
- Het class kenmerk wordt gebruikt om op te geven dat de search-results CSS-klasse moet worden toegepast op het onderdeel.
- Het entity-types kenmerk wordt gebruikt om het type gegevens op te geven dat moet worden gezocht. In dit geval wordt driveItem de waarde gebruikt om te zoeken naar bestanden in OneDrive voor Bedrijven.
- Het queryString kenmerk wordt gebruikt om de zoekterm op te geven. In dit geval is de waarde gebonden aan de searchText eigenschap die wordt doorgegeven aan het bestandsonderdeel wanneer de gebruiker Gerelateerde inhoud voor een rij in de datagrid selecteert. De vierkante haken queryString rond geven aan dat de eigenschap is gebonden aan de searchText waarde.
- De dataChange gebeurtenis wordt geactiveerd wanneer de zoekresultaten worden gewijzigd. In dit geval wordt een klantfunctie met de naam dataChange() aangeroepen in het bestandsonderdeel en worden de gebeurtenisgegevens doorgegeven aan de functie. Het haakje rond dataChange geeft aan dat de gebeurtenis is gebonden aan de dataChange() functie.
- Omdat er geen aangepaste sjabloon wordt opgegeven, wordt de standaardsjabloon mgt-search-results gebruikt om de zoekresultaten weer te geven.
Een alternatief voor het gebruik van onderdelen, zoals mgt-search-results, is het rechtstreeks aanroepen van Microsoft Graph-API's met behulp van code. Als u wilt zien hoe dat werkt, opent u het bestand graph.service.ts en zoekt u de searchFiles() functie. Het volledige pad naar het bestand is client/src/app/core/graph.service.ts.
- U ziet dat een query parameter wordt doorgegeven aan de functie. Dit is de zoekterm die wordt doorgegeven als de gebruiker Gerelateerde inhoud weergeven selecteert voor een rij in de datagrid. Als er geen zoekterm wordt doorgegeven, wordt een lege matrix geretourneerd.
```
async searchFiles(query: string) {
    const files: DriveItem[] = [];
    if (!query) return files;

    ...
}
```
- Er wordt vervolgens een filter gemaakt waarmee het type zoekopdracht wordt gedefinieerd dat moet worden uitgevoerd. In dit geval wordt de code gezocht naar bestanden in OneDrive voor Bedrijven dus driveItem net zoals u eerder hebt gezien met het mgt-search-results onderdeel. Dit is hetzelfde als het doorgeven driveItem aan entity-types het onderdeel mgt-search-results dat u eerder hebt gezien. De query parameter wordt vervolgens toegevoegd aan het queryString filter, samen met ContentType:Document.
```
const filter = {
    "requests": [
        {
            "entityTypes": [
                "driveItem"
            ],
            "query": {
                "queryString": `${query} AND ContentType:Document`
            }
        }
    ]
};
```
- Er wordt vervolgens een aanroep uitgevoerd naar de /search/query Microsoft Graph API met behulp van de Providers.globalProvider.graph.client.api() functie. Het filter object wordt doorgegeven aan de post() functie die de gegevens naar de API verzendt.
```
const searchResults = await Providers.globalProvider.graph.client.api('/search/query').post(filter);
```
- De zoekresultaten worden vervolgens doorlopen om te zoeken hits. Elk hit document bevat informatie over een gevonden document. Een eigenschap met de naam resource bevat de documentmetagegevens en wordt toegevoegd aan de files matrix.
```
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);
            }
        }
    }
}
```
- De files matrix wordt vervolgens geretourneerd naar de aanroeper.
```
return files;
```
Als u deze code bekijkt, kunt u zien dat het webonderdeel mgt-search-results dat u eerder hebt verkend, veel werk voor u doet en de hoeveelheid code die u moet schrijven aanzienlijk vermindert. Er kunnen echter scenario's zijn waarin u Microsoft Graph rechtstreeks wilt aanroepen om meer controle te hebben over de gegevens die naar de API worden verzonden of hoe de resultaten worden verwerkt.
Open het files.component.ts-bestand en zoek de search() functie. Het volledige pad naar het bestand is client/src/app/files/files.component.ts.

Hoewel de hoofdtekst van deze functie als commentaar wordt gegeven vanwege het onderdeel mgt-search-results dat wordt gebruikt, kan de functie worden gebruikt om de aanroep naar Microsoft Graph te maken wanneer de gebruiker Gerelateerde inhoud voor een rij in de datagrid selecteert. De search() functie roept searchFiles() in graph.service.ts aan en geeft de query parameter hieraan door (de naam van het bedrijf in dit voorbeeld). De resultaten van de zoekopdracht worden vervolgens toegewezen aan de data eigenschap van het onderdeel.
```
override async search(query: string) {
    this.data = await this.graphService.searchFiles(query);
}
```
Het bestandsonderdeel kan vervolgens de data eigenschap gebruiken om de zoekresultaten weer te geven. U kunt dit doen met behulp van aangepaste HTML-bindingen of met behulp van een ander Microsoft Graph Toolkit-besturingselement met de naam mgt-file-list. Hier volgt een voorbeeld van het binden van de data eigenschap aan een van de eigenschappen van het onderdeel met de naam files en het verwerken van de itemClick gebeurtenis wanneer de gebruiker interactie heeft met een bestand.
```
<mgt-file-list (itemClick)="itemClick($any($event))" [files]="data"></mgt-file-list>
```
Of u ervoor kiest om het eerder weergegeven onderdeel mgt-search-results te gebruiken of aangepaste code te schrijven om Microsoft Graph aan te roepen, is afhankelijk van uw specifieke scenario. In dit voorbeeld wordt het onderdeel mgt-search-results gebruikt om de code te vereenvoudigen en de hoeveelheid werk te verminderen die u moet doen.

Zoekcode voor Chatberichten in Teams verkennen

Ga terug naar graph.service.ts en zoek de searchChatMessages() functie. U ziet dat deze vergelijkbaar is met de searchFiles() functie die u eerder hebt bekeken.
- Hiermee worden gegevens gefilterd op de API van /search/query Microsoft Graph en worden de resultaten geconverteerd naar een matrix met objecten met informatie over de teamId, channelIden messageId die overeenkomen met de zoekterm.
- Als u de Teams-kanaalberichten wilt ophalen, wordt er een tweede aanroep naar de /teams/${chat.teamId}/channels/${chat.channelId}/messages/${chat.messageId} API en de teamId, channelIden messageId doorgegeven. Hiermee worden de volledige berichtdetails geretourneerd.
- Aanvullende filtertaken worden uitgevoerd en de resulterende berichten worden geretourneerd naar searchChatMessages() de beller.

Open het chats.component.ts-bestand en zoek de search() functie. Het volledige pad naar het bestand is client/src/app/chats/chats.component.ts. De search() functie roept searchChatMessages() in graph.service.ts aan en geeft de query parameter eraan door.

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

De resultaten van de zoekopdracht worden toegewezen aan de data eigenschap van het onderdeel en de gegevensbinding worden gebruikt om de resultatenmatrix te doorlopen en de gegevens weer te geven. In dit voorbeeld wordt een kaartonderdeel Angular Material gebruikt om de zoekresultaten weer te geven.

@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>
}

Teams-chats weergeven

Een bericht verzenden naar een Microsoft Teams-kanaal

Naast het zoeken naar chatberichten van Microsoft Teams, kan een gebruiker ook berichten verzenden naar een Microsoft Teams-kanaal. U kunt dit doen door het /teams/${teamId}/channels/${channelId}/messages eindpunt van Microsoft Graph aan te roepen.

In de volgende code ziet u dat er een URL wordt gemaakt die de teamId en channelId waarden bevat. Waarden voor omgevingsvariabelen worden in dit voorbeeld gebruikt voor de team-id en kanaal-id, maar deze waarden kunnen ook dynamisch worden opgehaald met Behulp van Microsoft Graph. De body constante bevat het bericht dat moet worden verzonden. Vervolgens wordt een POST-aanvraag ingediend en worden de resultaten geretourneerd naar de beller.

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

Het gebruik van dit type functionaliteit in Microsoft Graph biedt een uitstekende manier om de productivbiteit van gebruikers te verbeteren doordat gebruikers rechtstreeks vanuit de toepassing die ze al gebruiken, met Microsoft Teams kunnen communiceren.

Organisatiegegevens: e-mailberichten en agendagebeurtenissen ophalen

21 minuten resterend

In de vorige oefening hebt u geleerd hoe u bestanden ophaalt uit OneDrive voor Bedrijven en chats van Microsoft Teams met behulp van Microsoft Graph en het onderdeel mgt-search-results van Microsoft Graph Toolkit. U hebt ook geleerd hoe u berichten verzendt naar Microsoft Teams-kanalen. In deze oefening leert u hoe u e-mailberichten en agendagebeurtenissen ophaalt uit Microsoft Graph en deze integreert in de toepassing.

In deze oefening gaat u het volgende doen:

Meer informatie over hoe het webonderdeel mgt-search-results in de Microsoft Graph Toolkit kan worden gebruikt om te zoeken naar e-mailberichten en agendagebeurtenissen.
Meer informatie over het aanpassen van het onderdeel mgt-search-results om zoekresultaten op een aangepaste manier weer te geven.
Meer informatie over het rechtstreeks aanroepen van Microsoft Graph om e-mailberichten en agendagebeurtenissen op te halen.

Zoekcode voor e-mailberichten verkennen

Tip

Als u Visual Studio Code gebruikt, kunt u bestanden rechtstreeks openen door het volgende te selecteren:

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

Typ vervolgens de naam van het bestand dat u wilt openen.

In een vorige oefening hebt u een app-registratie gemaakt in Microsoft Entra ID en de toepassingsserver en API-server gestart. U hebt ook de volgende waarden in het .env bestand bijgewerkt.
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Zorg ervoor dat u de vorige oefening hebt voltooid voordat u doorgaat.
Open emails.component.html en neem even de tijd om de code te bekijken. Het volledige pad naar het bestand is client/src/app/emails/emails.component.html.
Zoek het onderdeel mgt-search-results :
```
<mgt-search-results 
  class="search-results" 
  entity-types="message" 
  [queryString]="searchText"
  (dataChange)="dataChange($any($event))">
  <template data-type="result-message"></template>
</mgt-search-results>
```
Dit voorbeeld van het onderdeel mgt-search-results is op dezelfde manier geconfigureerd als het onderdeel dat u eerder hebt bekeken. Het enige verschil is dat het entity-types kenmerk is ingesteld message waarop wordt gebruikt om te zoeken naar e-mailberichten en een lege sjabloon wordt opgegeven.
- Het class kenmerk wordt gebruikt om op te geven dat de search-results CSS-klasse moet worden toegepast op het onderdeel.
- Het entity-types kenmerk wordt gebruikt om het type gegevens op te geven dat moet worden gezocht. In dit geval is messagede waarde .
- Het queryString kenmerk wordt gebruikt om de zoekterm op te geven.
- De dataChange gebeurtenis wordt geactiveerd wanneer de zoekresultaten worden gewijzigd. De functie van dataChange() het e-mailonderdeel wordt aangeroepen, de resultaten worden eraan doorgegeven en er wordt een eigenschap met de naam data bijgewerkt in het onderdeel.
- Er wordt een lege sjabloon gedefinieerd voor het onderdeel. Dit type sjabloon wordt normaal gesproken gebruikt om te definiëren hoe de zoekresultaten worden weergegeven. In dit scenario vertellen we echter dat het onderdeel geen berichtgegevens weergeeft. In plaats daarvan geven we de gegevens zelf weer met behulp van standaardgegevensbinding (in dit geval wordt Angular gebruikt, maar u kunt elke gewenste bibliotheek/framework gebruiken).

Kijk onder het onderdeel mgt-search-results in emails.component.html om de gegevensbindingen te vinden die worden gebruikt om de e-mailberichten weer te geven. In dit voorbeeld wordt de data eigenschap herhaald en wordt het e-mailonderwerp, de hoofdtekstvoorbeeld en een koppeling geschreven om het volledige e-mailbericht weer te geven.

@if (this.data.length) {
    <div>
        @for (email of this.data;track $index) {
            <mat-card>
                <mat-card-header>
                <mat-card-title>{{email.resource.subject}}</mat-card-title>
                <mat-card-subtitle [innerHTML]="email.resource.bodyPreview"></mat-card-subtitle>
                </mat-card-header>
                <mat-card-actions>
                <a mat-stroked-button color="basic" [href]="email.resource.webLink" target="_blank">View Email Message</a>
                </mat-card-actions>
            </mat-card>
        }
    </div>
}

E-mailberichten weergeven

Naast het gebruik van het onderdeel mgt-search-results om berichten op te halen, biedt Microsoft Graph verschillende API's die ook kunnen worden gebruikt om e-mailberichten te doorzoeken. De /search/query API die u eerder hebt gezien, kan zeker worden gebruikt, maar een eenvoudigere optie is de messages API.
Als u wilt zien hoe u deze API aanroept, gaat u terug naar graph.service.ts en zoekt u de searchEmailMessages() functie. Er wordt een URL gemaakt die kan worden gebruikt om het messages eindpunt van Microsoft Graph aan te roepen en de query waarde toe te wijzen aan de $search parameter. De code doet vervolgens een GET-aanvraag en retourneert de resultaten aan de aanroeper. De $search operator zoekt automatisch naar de query waarde in de velden onderwerp, hoofdtekst en afzender.
```
async searchEmailMessages(query:string) {
    if (!query) return [];
    // The $search operator will search the subject, body, and sender fields automatically
    const url = `https://graph.microsoft.com/v1.0/me/messages?$search="${query}"&$select=subject,bodyPreview,from,toRecipients,receivedDateTime,webLink`;
    const response = await Providers.globalProvider.graph.client.api(url).get();
    return response.value;
}
```
Het e-mailonderdeel in emails.component.ts oproepen searchEmailMessages() en geeft de resultaten weer in de gebruikersinterface.
```
override async search(query: string) {
    this.data = await this.graphService.searchEmailMessages(query);
}
```

Zoekcode voor agendagebeurtenissen verkennen

Zoeken naar agendagebeurtenissen kan ook worden uitgevoerd met behulp van het onderdeel mgt-search-results . Het kan het weergeven van de resultaten voor u afhandelen, maar u kunt ook uw eigen sjabloon definiëren die u verderop in deze oefening ziet.
Open calendar-events.component.html en neem even de tijd om de code te bekijken. Het volledige pad naar het bestand is client/src/app/calendar-events/calendar-events.component.html. U ziet dat het vergelijkbaar is met de onderdelen van bestanden en e-mailberichten die u eerder hebt bekeken.
```
<mgt-search-results 
    class="search-results" 
    entity-types="event" 
    [queryString]="searchText"
    (dataChange)="dataChange($any($event))">
    <template data-type="result-event"></template>
</mgt-search-results>
```
Dit voorbeeld van het onderdeel mgt-search-results is op dezelfde manier geconfigureerd als de onderdelen die u eerder hebt bekeken. Het enige verschil is dat het entity-types kenmerk is ingesteld event waarop wordt gebruikt om te zoeken naar agendagebeurtenissen en dat er een lege sjabloon wordt opgegeven.
- Het class kenmerk wordt gebruikt om op te geven dat de search-results CSS-klasse moet worden toegepast op het onderdeel.
- Het entity-types kenmerk wordt gebruikt om het type gegevens op te geven dat moet worden gezocht. In dit geval is eventde waarde .
- Het queryString kenmerk wordt gebruikt om de zoekterm op te geven.
- De dataChange gebeurtenis wordt geactiveerd wanneer de zoekresultaten worden gewijzigd. De functie van dataChange() het agendagebeurtenisonderdeel wordt aangeroepen, de resultaten worden eraan doorgegeven en er wordt een eigenschap met de naam data bijgewerkt in het onderdeel.
- Er wordt een lege sjabloon gedefinieerd voor het onderdeel. In dit scenario geven we aan dat het onderdeel geen gegevens weergeeft. In plaats daarvan geven we de gegevens zelf weer met behulp van standaardgegevensbinding.

Direct onder het mgt-search-results onderdeel in calendar-events.component.html vindt u de gegevensbindingen die worden gebruikt om de agendagebeurtenissen weer te geven. In dit voorbeeld wordt de data eigenschap herhaald en wordt de begindatum, tijd en het onderwerp van de gebeurtenis weggeschreven. Aangepaste functies die zijn opgenomen in het onderdeel, zoals dayFromDateTime() en timeRangeFromEvent() worden aangeroepen om gegevens correct op te maken. De HTML-bindingen bevatten ook een koppeling om de agendagebeurtenis in Outlook weer te geven en de locatie van de gebeurtenis als deze is opgegeven.

@if (this.data.length) {
    <div>
        @for (event of this.data;track $index) {
            <div class="root">
                <div class="time-container">
                    <div class="date">{{ dayFromDateTime(event.resource.start.dateTime)}}</div>
                    <div class="time">{{ timeRangeFromEvent(event.resource) }}</div>
                </div>

                <div class="separator">
                    <div class="vertical-line top"></div>
                    <div class="circle">
                        @if (!this.event.resource.bodyPreview?.includes('Join Microsoft Teams Meeting')) {
                            <div class="inner-circle"></div>
                        }
                    </div>
                    <div class="vertical-line bottom"></div>
                </div>

                <div class="details">
                    <div class="subject">{{ event.resource.subject }}</div>
                    @if (this.event.resource.location?.displayName) {
                        <div class="location">
                            at
                            <a href="https://bing.com/maps/default.aspx?where1={{event.resource.location.displayName}}"
                                target="_blank" rel="noopener"><b>{{ event.resource.location.displayName }}</b></a>
                        </div>
                    }
                    @if (this.event.resource.attendees?.length) {
                        <div class="attendees">
                            @for (attendee of this.event.resource.attendees;track attendee.emailAddress.name) {
                                <span class="attendee">
                                    <mgt-person person-query="{{attendee.emailAddress.name}}"></mgt-person>
                                </span>
                            }
                        </div>
                    }
                    @if (this.event.resource.bodyPreview?.includes('Join Microsoft Teams Meeting')) {
                        <div class="online-meeting">
                            <img class="online-meeting-icon"
                                src="https://img.icons8.com/color/48/000000/microsoft-teams.png" title="Online Meeting" />
                            <a class="online-meeting-link" href="{{ event.resource.onlineMeetingUrl }}">
                                Join Teams Meeting
                            </a>
                        </div>
                    }
                </div>
            </div>
        }
    </div>
}

Naast het zoeken naar agendagebeurtenissen met behulp van de search/query API biedt Microsoft Graph ook een events API die ook kan worden gebruikt om agendagebeurtenissen te doorzoeken. Zoek de searchCalendarEvents() functie in graph.service.ts.
Met searchCalendarEvents() de functie worden begin- en einddatum-/tijdwaarden gemaakt die worden gebruikt voor het definiëren van de periode die moet worden gezocht. Vervolgens wordt een URL gemaakt die kan worden gebruikt om het events eindpunt van Microsoft Graph aan te roepen en de parameter en de query begin- en einddatum-/tijdvariabelen bevat. Vervolgens wordt er een GET-aanvraag gedaan en worden de resultaten geretourneerd naar de beller.
```
async searchCalendarEvents(query:string) {
    if (!query) return [];
    const startDateTime = new Date();
    const endDateTime = new Date(startDateTime.getTime() + (7 * 24 * 60 * 60 * 1000));
    const url = `/me/events?startdatetime=${startDateTime.toISOString()}&enddatetime=${endDateTime.toISOString()}&$filter=contains(subject,'${query}')&orderby=start/dateTime`;

    const response = await Providers.globalProvider.graph.client.api(url).get();
    return response.value;
}
```
- Hier volgt een uitsplitsing van de URL die is gemaakt:
  - Het /me/events gedeelte van de URL wordt gebruikt om op te geven dat de gebeurtenissen van de aangemelde gebruiker moeten worden opgehaald.
  - De startdatetime en enddatetime parameters worden gebruikt om de periode te definiëren die moet worden gezocht. In dit geval retourneert de zoekopdracht gebeurtenissen die binnen de komende 7 dagen beginnen.
  - De $filter queryparameter wordt gebruikt om de resultaten te filteren op de query waarde (in dit geval de bedrijfsnaam die is geselecteerd in de datagrid). De contains() functie wordt gebruikt om te zoeken naar de query waarde in de subject eigenschap van de agendagebeurtenis.
  - De $orderby queryparameter wordt gebruikt om de resultaten te ordenen op basis van de start/dateTime eigenschap.
Zodra de url aanvraag is gemaakt, wordt er een GET-aanvraag ingediend bij de Microsoft Graph API met behulp van de waarde van url en worden de resultaten geretourneerd naar de aanroeper.
Net als bij de vorige onderdelen worden de agendagebeurtenissen (calendar-events.component.ts-bestand ) aanroepen search() en worden de resultaten weergegeven.
```
override async search(query: string) {
    this.data = await this.graphService.searchCalendarEvents(query);
}
```
Notitie

U kunt ook Microsoft Graph-aanroepen uitvoeren vanuit een aangepaste API of toepassing aan de serverzijde. Bekijk de volgende zelfstudie voor een voorbeeld van het aanroepen van een Microsoft Graph API vanuit een Azure-functie.
U hebt nu een voorbeeld gezien van het gebruik van Microsoft Graph om bestanden, chats, e-mailberichten en agendagebeurtenissen op te halen. Dezelfde concepten kunnen ook worden toegepast op andere Microsoft Graph-API's. U kunt bijvoorbeeld de Api voor Microsoft Graph-gebruikers gebruiken om te zoeken naar gebruikers in uw organisatie. U kunt ook de Api voor Microsoft Graph-groepen gebruiken om te zoeken naar groepen in uw organisatie. U kunt de volledige lijst met Microsoft Graph API's bekijken in de documentatie.

Delen via

OpenAI-, communicatie- en organisatiegegevensfuncties integreren in een Line-Of-Business-app

Wat u in deze zelfstudie gaat bouwen

Kies uw eigen avontuur

Vereisten

Microsoft Cloud Technologies die in deze zelfstudie worden gebruikt

Het project klonen

De GitHub-opslagplaats klonen en een .env bestand maken

AI: Een Azure OpenAI-resource maken en een model implementeren

Een Azure OpenAI-serviceresource maken

Het projectbestand bijwerken .env

De Toepassingsservices starten

AI: Natuurlijke taal naar SQL

De functie Natuurlijke taal gebruiken voor SQL

De natuurlijke taal verkennen naar SQL-code

AI: Voltooiingen genereren

De functie AI-voltooiingen gebruiken

De AI-voltooiingscode verkennen

AI: Azure OpenAI op uw gegevens

Een aangepaste gegevensbron toevoegen aan Azure AI Studio

Uw aangepaste gegevensbron gebruiken in de chatspeeltuin

De functie Bring Your Own Data gebruiken in de toepassing

De code verkennen

Communicatie: Een Azure Communication Services-resource maken

Een Azure Communication Services-resource maken

Mogelijkheden voor bellen en sms inschakelen

Een e-maildomein verbinden

Het bestand bijwerken .env

De toepassings- en API-servers starten/opnieuw starten

Communicatie: een telefoongesprek voeren

De functie Telefoongesprekken gebruiken

De code voor telefoongesprekken verkennen

Communicatie: e-mail en sms-berichten verzenden

De e-mail- en sms-functies gebruiken

De e-mailcode verkennen

De SMS-code verkennen

Organisatiegegevens: Een Microsoft Entra ID-app-registratie maken

Een Microsoft Entra ID-app-registratie maken

Het .env-bestand van het project bijwerken

De toepassings- en API-servers starten/opnieuw starten

Organisatiegegevens: aanmelden bij een gebruiker en een toegangstoken ophalen

De aanmeldingsfunctie gebruiken

De aanmeldingscode verkennen

Organisatiegegevens: Bestanden, chats ophalen en berichten verzenden naar Teams

De functie Organisatiegegevens gebruiken

Bestanden zoeken-code verkennen

Zoekcode voor Chatberichten in Teams verkennen

Een bericht verzenden naar een Microsoft Teams-kanaal

Organisatiegegevens: e-mailberichten en agendagebeurtenissen ophalen

Zoekcode voor e-mailberichten verkennen

Zoekcode voor agendagebeurtenissen verkennen

Gefeliciteerd

U hebt deze zelfstudie voltooid

Azure-resources opschonen

Volgende stappen

Documentatie

Trainingsinhoud

Feedback

De GitHub-opslagplaats klonen en een `.env` bestand maken

Het projectbestand bijwerken `.env`

Het bestand bijwerken `.env`