Integrera OpenAI-, kommunikations- och organisationsdatafunktioner i en branschspecifik app

Artikel
Developer (Medel)
136 minuter för att slutföra

Nivå: Mellanliggande

Den här självstudien visar hur Azure OpenAI, Azure Communication Services och Microsoft Graph/Microsoft Graph Toolkit kan integreras i ett verksamhetsspecifikt program (LOB) för att förbättra användarproduktiviteten, höja användarupplevelsen och ta LOB-appar till nästa nivå. Viktiga funktioner i programmet är:

AI: Gör det möjligt för användare att ställa frågor på naturligt språk och konvertera sina svar till SQL som kan användas för att fråga en databas, tillåta användare att definiera regler som kan användas för att automatiskt generera e-postmeddelanden och SMS och lära sig hur naturligt språk kan användas för att hämta data från dina egna anpassade datakällor. Azure OpenAI används för dessa funktioner.
Kommunikation: Aktivera telefonsamtal i appen till kunder och e-post-/SMS-funktioner med Hjälp av Azure Communication Services.
Organisationsdata: Hämta relaterade organisationsdata som användarna kan behöva (dokument, chattar, e-postmeddelanden, kalenderhändelser) när de arbetar med kunder för att undvika kontextväxling. Att ge åtkomst till den här typen av organisationsdata minskar behovet av att användaren byter till Outlook, Teams, OneDrive, andra anpassade appar, deras telefon osv. eftersom de specifika data och funktioner de behöver tillhandahålls direkt i appen. Microsoft Graph och Microsoft Graph Toolkit används för den här funktionen.

Programmet är en enkel kundhanteringsapp som gör det möjligt för användare att hantera sina kunder och relaterade data. Den består av en klientdel som skapats med TypeScript som anropar serverdels-API:er för att hämta data, interagera med AI-funktioner, skicka e-post/SMS och hämta organisationsdata. Här är en översikt över den programlösning som du går igenom i den här självstudien:

Översikt över Microsoft Cloud-scenario

Självstudien beskriver hur du konfigurerar nödvändiga Azure- och Microsoft 365-resurser. Den vägleder dig också genom koden som används för att implementera ai-, kommunikations- och organisationsdatafunktionerna. Även om du inte kommer att behöva kopiera och klistra in kod, kommer vissa av övningarna att få dig att ändra kod för att prova olika scenarier.

Vad du ska skapa i den här självstudien

Välj ditt eget äventyr

Du kan slutföra hela självstudien från början till slut eller slutföra specifika ämnen av intresse. Självstudien är uppdelad i följande avsnitt:

Klona projektövningen (obligatorisk övning).
AI-övningar: Skapa en Azure OpenAI-resurs och använd den för att konvertera naturligt språk till SQL, generera e-post/SMS och arbeta med dina egna data och dokument.
Kommunikationsövningar: Skapa en Azure Communication Services-resurs och använd den för att ringa telefonsamtal från appen och skicka e-post/SMS.
Organisationsdataövningar: Skapa en Microsoft Entra ID-appregistrering så att Microsoft Graph och Microsoft Graph Toolkit kan användas för att autentisera och hämta organisationsdata till programmet.

Välj ditt eget äventyr. Slutför hela självstudien eller välj specifika ämnesområden.

Förutsättningar

Node – Node 20+ och npm 10+ används för det här projektet
git
Visual Studio Code (även om Visual Studio Code rekommenderas kan alla redigeringsprogram användas)
Azure-prenumeration
Microsoft 365-utvecklarklientorganisation
Docker Desktop eller en annan OCI-kompatibel containerkörning (Open Container Initiative), till exempel Podman eller nerdctl som kan köra en container.

Microsoft Cloud Technologies som används i den här självstudien

Azure Communication Services
Azure OpenAI Service
Microsoft Entra ID
Microsoft Graph
Microsoft Graph Toolkit

Klona projektet

132 minuter kvar

Kodprojektet som används i den här självstudien finns på https://github.com/microsoft/MicrosoftCloud. Projektets lagringsplats innehåller både kod på klientsidan och på serversidan som krävs för att köra projektet, så att du kan utforska de integrerade funktionerna som rör artificiell intelligens (AI), kommunikation och organisationsdata. Dessutom fungerar projektet som en resurs som hjälper dig att införliva liknande funktioner i dina egna program.

I den här övningen kommer du att:

Klona github-lagringsplatsen.
Lägg till en .env-fil i projektet och uppdatera den.

Innan du fortsätter kontrollerar du att du har alla förutsättningar installerade och konfigurerade enligt beskrivningen i avsnittet Förutsättningar i den här självstudien.

Klona GitHub-lagringsplatsen och skapa en `.env` fil

Kör följande kommando för att klona Microsoft Cloud GitHub-lagringsplatsen till datorn.
```
git clone https://github.com/microsoft/MicrosoftCloud
```
Öppna mappen MicrosoftCloud/samples/openai-acs-msgraph i Visual Studio Code.

Kommentar

Även om vi använder Visual Studio Code i den här självstudien kan alla kodredigerare användas för att arbeta med exempelprojektet.
Observera följande mappar och filer:
- klient: Programkod på klientsidan.
- server: API-kod på serversidan.
- docker-compose.yml: Används för att köra en lokal PostgreSQL-databas.
Byt namn på .env.example i projektets rot till .env.

Öppna .env-filen och ta en stund att titta igenom de nycklar som ingår:

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=

Uppdatera följande värden i .env. Dessa värden används av API-servern för att ansluta till den lokala PostgreSQL-databasen.
```
POSTGRES_USER=web
POSTGRES_PASSWORD=web-password
```
Nu när du har projektet på plats ska vi prova några av programfunktionerna och lära dig hur de skapas. Välj knappen Nästa nedan för att fortsätta eller gå vidare till en specifik övning med hjälp av innehållsförteckningen.

AI: Skapa en Azure OpenAI-resurs och distribuera en modell

127 minuter kvar

För att komma igång med Azure OpenAI i dina program måste du skapa en Azure OpenAI-tjänst och distribuera en modell som kan användas för att utföra uppgifter som att konvertera naturligt språk till SQL, generera e-post/SMS-meddelandeinnehåll med mera.

I den här övningen kommer du att:

Skapa en Azure OpenAI Service-resurs.
Distribuera en modell.
Uppdatera .env-filen med värden från din Azure OpenAI-tjänstresurs.

Översikt över Microsoft Cloud-scenario

Skapa en Azure OpenAI-tjänstresurs

Besök Azure Portal i webbläsaren och logga in.
Ange openai i sökfältet överst på portalsidan och välj Azure OpenAI bland de alternativ som visas.
Välj Skapa i verktygsfältet.

Kommentar

Den här självstudien fokuserar på Azure OpenAI, men om du har en OpenAI API-nyckel och vill använda den kan du hoppa över det här avsnittet och gå direkt till avsnittet Uppdatera projektets .env-fil nedan. Tilldela din OpenAI API-nyckel till OPENAI_API_KEY i .env-filen (du kan ignorera andra .env instruktioner som rör OpenAI).
Azure OpenAI-modeller är tillgängliga i specifika regioner. Gå till dokumentet om tillgänglighet för Azure OpenAI-modellen för att lära dig vilka regioner som stöder gpt-4o-modellen som används i den här självstudien.
Utför följande uppgifter:
- Välj din Azure-prenumerationen.
- Välj den resursgrupp som ska användas (skapa en ny om det behövs).
- Välj en region där gpt-4o-modellen stöds baserat på det dokument som du tittade på tidigare.
- Ange resursnamnet. Det måste vara ett unikt värde.
- Välj prisnivån Standard S0.
Välj Nästa tills du kommer till skärmen Granska + skicka . Välj Skapa.
När din Azure OpenAI-resurs har skapats navigerar du till den och väljer Resurshantering –> Nycklar och slutpunkt .
Leta upp nyckel 1- och slutpunktsvärdena. Du använder båda värdena i nästa avsnitt så kopiera dem till en lokal fil.
Välj Resurshantering –> Modelldistributioner.
Välj knappen Hantera distributioner för att gå till Azure OpenAI Studio.
Välj Distribuera modell –> Distribuera basmodell i verktygsfältet.
Välj gpt-4o i listan med modeller och välj Bekräfta.

Kommentar

Azure OpenAI stöder flera olika typer av modeller. Varje modell kan användas för att hantera olika scenarier.
Följande dialogruta visas. Ta en stund att undersöka standardvärdena som tillhandahålls.
Ändra värdet för token per minuthastighetsgräns (tusentals) till 100 000. På så sätt kan du göra fler begäranden till modellen och undvika att nå hastighetsgränsen när du utför de steg som följer.
Välj distribuera.
När modellen har distribuerats väljer du Playgrounds -->Chat.
Listrutan Distribution bör visa gpt-4o-modellen.
Ta en stund att läsa igenom systemmeddelandetexten som tillhandahålls. Detta talar om för modellen hur den ska fungera när användaren interagerar med den.
Leta upp textrutan i chattområdet och ange Sammanfatta vad Generativ AI är och hur den kan användas. Välj Retur för att skicka meddelandet till modellen och få det att generera ett svar.
Experimentera med andra frågor och svar. Ange till exempel Ange en kort historik om frankrikes huvudstad och lägg märke till svaret som genereras.

Uppdatera projektets `.env` fil

Gå tillbaka till Visual Studio Code och öppna .env filen i projektets rot.
Kopiera värdet KEY 1 från Azure OpenAI-resursen och tilldela det till OPENAI_API_KEY i .env-filen som finns i roten i mappen openai-acs-msgraph:
```
OPENAI_API_KEY=<KEY_1_VALUE>
```
Kopiera värdet *Endpoint och tilldela det till OPENAI_ENDPOINT i .env-filen . / Ta bort tecknet från slutet av värdet om det finns.
```
OPENAI_ENDPOINT=<ENDPOINT_VALUE>
```
Kommentar

Du ser dessa värden för OPENAI_MODEL och har redan angetts i .env-filenOPENAI_API_VERSION. Modellvärdet är inställt på gpt-4o som matchar modelldistributionsnamnet som du skapade tidigare i den här övningen. API-versionen är inställd på ett värde som stöds och definieras i Azure OpenAI-referensdokumentationen.
Spara .env-filen.

Starta Application Services

Det är dags att starta dina programtjänster, inklusive databasen, API-servern och webbservern.

I följande steg skapar du tre terminalfönster i Visual Studio Code.
Högerklicka på .env-filen i Visual Studio Code-fillistan och välj Öppna i integrerad terminal. Kontrollera att terminalen finns i roten av projektet – openai-acs-msgraph – innan du fortsätter.
Välj något av följande alternativ för att starta PostgreSQL-databasen:
- Om du har Docker Desktop installerat och körs kör du docker-compose up i terminalfönstret och trycker på Retur.
- Om du har Podman med podman-compose installerat och körs kör podman-compose up du i terminalfönstret och trycker på Retur.
- Kör följande kommando i terminalfönstret om du vill köra PostgreSQL-containern direkt med antingen Docker Desktop, Podman, nerdctl eller någon annan containerkörning som du har installerat:
  - Mac, Linux eller Windows-undersystem för 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 med 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
```
När databascontainern startar trycker du på + ikonen i verktygsfältet i Visual Studio Code-terminalen för att skapa ett andra terminalfönster.
cdi mappen server/typescript och kör följande kommandon för att installera beroendena och starta API-servern.
- npm install
- npm start
Tryck på + ikonen igen i verktygsfältet i Visual Studio Code-terminalen för att skapa ett tredje terminalfönster.
cdi klientmappen och kör följande kommandon för att installera beroendena och starta webbservern.
- npm install
- npm start
En webbläsare startas och du tas till http://localhost:4200.

AI: Naturligt språk till SQL

122 minuter kvar

Citatet "Just because you can doesn't mean you should" är en användbar guide när du tänker på AI-funktioner. Azure OpenAI:s naturliga språk till SQL-funktion gör det till exempel möjligt för användare att göra databasfrågor på vanlig engelska, vilket kan vara ett kraftfullt verktyg för att förbättra produktiviteten. Men kraftfulla betyder inte alltid lämpligt eller säkert. Den här övningen visar hur du använder den här AI-funktionen samtidigt som du diskuterar viktiga saker att tänka på innan du bestämmer dig för att implementera den.

Här är ett exempel på en fråga med naturligt språk som kan användas för att hämta data från en databas:

Get the the total revenue for all companies in London.

Med rätt frågor konverterar Azure OpenAI den här frågan till SQL som kan användas för att returnera resultat från databasen. Därför kan icke-tekniska användare, inklusive affärsanalytiker, marknadsförare och chefer, lättare hämta värdefull information från databaser utan att brottas med invecklad SQL-syntax eller förlita sig på begränsade datagrids och filter. Den här effektiva metoden kan öka produktiviteten genom att eliminera behovet av att användarna söker hjälp från tekniska experter.

Den här övningen ger en startpunkt som hjälper dig att förstå hur naturligt språk i SQL fungerar, presentera några viktiga överväganden, få dig att tänka på fördelar och nackdelar och visa dig koden för att komma igång.

I den här övningen kommer du att:

Använd GPT-prompter för att konvertera naturligt språk till SQL.
Experimentera med olika GPT-frågor.
Använd den genererade SQL-filen för att köra frågor mot PostgreSQL-databasen som startades tidigare.
Returnera frågeresultat från PostgreSQL och visa dem i webbläsaren.

Vi börjar med att experimentera med olika GPT-frågor som kan användas för att konvertera naturligt språk till SQL.

Använda funktionen Naturligt språk till SQL

I föregående övning startade du databasen, API:erna och programmet. Du har också uppdaterat .env filen. Om du inte har slutfört de här stegen följer du anvisningarna i slutet av övningen innan du fortsätter.
Gå tillbaka till webbläsaren (http://localhost:4200) och leta upp avsnittet Anpassad fråga på sidan under datagrid. Observera att ett exempelfrågevärde redan ingår: Hämta den totala intäkten för alla beställningar. Gruppera efter företag och inkludera staden.
Välj knappen Kör fråga. Detta skickar användarens fråga med naturligt språk till Azure OpenAI som konverterar den till SQL. SQL-frågan används sedan för att köra frågor mot databasen och returnera eventuella resultat.

Kör följande anpassade fråga:

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

Visa terminalfönstret som kör API-servern i Visual Studio Code och observera att den visar SQL-frågan som returneras från Azure OpenAI. JSON-data används av API:erna på serversidan för att köra frågor mot PostgreSQL-databasen. Alla strängvärden som ingår i frågan läggs till som parametervärden för att förhindra SQL-inmatningsattacker:
```
{ 
    "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"] 
}
```
Gå tillbaka till webbläsaren och välj Återställ Data för att visa alla kunder igen i datagrid.

Utforska naturligt språk till SQL Code

Dricks

Om du använder Visual Studio Code kan du öppna filer direkt genom att välja:

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

Skriv sedan namnet på den fil som du vill öppna.

Kommentar

Målet med den här övningen är att visa vad som är möjligt med naturligt språk till SQL-funktioner och visa hur du kommer igång med den. Som tidigare nämnts är det viktigt att diskutera om den här typen av AI är lämplig för din organisation innan du fortsätter med någon implementering. Det är också absolut nödvändigt att planera för lämpliga snabbregler och databassäkerhetsåtgärder för att förhindra obehörig åtkomst och skydda känsliga data.

Nu när du har sett funktionen naturligt språk till SQL i praktiken ska vi undersöka hur den implementeras.

Öppna filen server/apiRoutes.ts och leta upp generateSql vägen. Den här API-vägen anropas av programmet på klientsidan som körs i webbläsaren och används för att generera SQL från en fråga med naturligt språk. När SQL-frågan har hämtats används den för att köra frågor mot databasen och returnera resultat.

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

Observera följande funktioner i generateSql vägen:

Den hämtar användarfrågevärdet från req.body.prompt och tilldelar det till en variabel med namnet userPrompt. Det här värdet används i GPT-prompten.
Den anropar en getSQLFromNLP() funktion för att konvertera naturligt språk till SQL.
Den skickar den genererade SQL-filen till en funktion med namnet queryDb som kör SQL-frågan och returnerar resultat från databasen.

Öppna filen server/openAI.ts i redigeringsprogrammet och leta upp getSQLFromNLP() funktionen. Den här funktionen anropas av generatesql vägen och används för att konvertera naturligt språk till 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;
}

En userPrompt parameter skickas till funktionen. Värdet userPrompt är den fråga på naturligt språk som användaren anger i webbläsaren.
A systemPrompt definierar vilken typ av AI-assistent som ska användas och regler som ska följas. Detta hjälper Azure OpenAI att förstå databasstrukturen, vilka regler som ska tillämpas och hur du returnerar den genererade SQL-frågan och parametrarna.
En funktion med namnet callOpenAI() anropas och systemPrompt userPrompt värdena skickas till den.
Resultatet kontrolleras för att säkerställa att inga förbjudna värden ingår i den genererade SQL-frågan. Om otillåtna värden hittas är SQL-frågan inställd på en tom sträng.

Nu ska vi gå igenom systemprompten i detalj:

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"] 
  }
`;

Vilken typ av AI-assistent som ska användas definieras. I det här fallet ett "naturligt språk till SQL-robot".
Tabellnamn och kolumner i databasen definieras. Det övergripande schemat som ingår i prompten finns i filen server/db.schema och ser ut så här.
```
- 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)
```
Dricks

Du kan överväga att skapa skrivskyddade vyer som endast innehåller de data som användarna kan köra frågor mot med naturligt språk till SQL.
En regel definieras för att konvertera alla strängvärden till ett parameteriserat frågevärde för att undvika SQL-inmatningsattacker.
En regel definieras för att alltid returnera ett JSON-objekt med SQL-frågan och parametervärdena i den.
Exempel på användarprompter och förväntade SQL-fråge- och parametervärden tillhandahålls. Detta kallas för "few-shot"-inlärning. Även om LLM:er tränas på stora mängder data kan de anpassas till nya uppgifter med bara några få exempel. En alternativ metod är "zero-shot"-inlärning där inget exempel anges och modellen förväntas generera rätt SQL-fråge- och parametervärden.

Funktionen getSQLFromNLP() skickar system- och användarprompter till en funktion med namnet callOpenAI() som också finns i filen server/openAI.ts . Funktionen callOpenAI() avgör om Azure OpenAI-tjänsten eller OpenAI-tjänsten ska anropas genom att kontrollera miljövariabler. Om en nyckel, slutpunkt och modell är tillgängliga i miljövariablerna anropas Azure OpenAI, annars anropas OpenAI.
```
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);
}
```
Kommentar

Även om vi fokuserar på Azure OpenAI i den här självstudien använder programmet OpenAI i stället om du bara anger ett OPENAI_API_KEY värde i .env-filen . Om du väljer att använda OpenAI i stället för Azure OpenAI kan du se olika resultat i vissa fall.
getAzureOpenAICompletion() Leta upp funktionen.
```
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;
}
```
Den här funktionen gör följande:
- Parametrar:
  - systemPrompt, userPromptoch temperature är huvudparametrarna.
    - systemPrompt: Informerar Azure OpenAI-modellen om dess roll och vilka regler som ska följas.
    - userPrompt: Innehåller information från användaren, till exempel indata från naturligt språk eller regler för att generera utdata.
    - temperature: Avgör kreativitetsnivån för modellens svar. Ett högre värde resulterar i mer kreativa utdata.
- Generering av slutförande:
  - Funktionen anropar createAzureOpenAICompletion() med systemPrompt, userPromptoch temperature för att generera ett slutförande.
  - Det extraherar innehållet från det första valet i slutförandet och trimmar eventuella extra blanksteg.
  - Om innehållet innehåller JSON-liknande strukturer (vilket indikeras av förekomsten av { och }) extraherar det JSON-innehållet.
- Loggning och returvärde:
  - Funktionen loggar Azure OpenAI-utdata till konsolen.
  - Det returnerar det bearbetade innehållet som en sträng.
createAzureOpenAICompletion() Leta upp funktionen.
```
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.`);
        }
    }
}
```
Den här funktionen gör följande:
- Parametrar:
  - systemPrompt, userPromptoch temperature är huvudparametrarna som beskrevs tidigare.
  - En valfri dataSources parameter stöder funktionen "Azure Bring Your Own Data", som beskrivs senare i den här självstudien.
- Kontroll av miljövariabler:
  - Funktionen verifierar förekomsten av viktiga miljövariabler, vilket utlöser ett fel om några saknas.
- Konfigurationsobjekt:
  - Ett config objekt skapas med hjälp av värden från .env filen (OPENAI_API_KEY, , OPENAI_API_VERSIONOPENAI_ENDPOINT, OPENAI_MODEL). Dessa värden används för att skapa URL:en för att anropa Azure OpenAI.
- AzureOpenAI-instans:
  - En instans av skapas med hjälp av AzureOpenAI config objektet. Symbolen AzureOpenAI är en del av openai paketet, som ska importeras överst i filen.
- Genererar ett slutförande:
  - Funktionen chat.completions.create() anropas med följande egenskaper:
    - model: Anger GPT-modellen (t.ex. gpt-4o, gpt-3.5-turbo) enligt definitionen i .env filen.
    - max_tokens: Definierar det maximala antalet token för slutförandet.
    - temperature: Anger samplingstemperaturen. Högre värden (t.ex. 0,9) ger mer kreativa svar, medan lägre värden (t.ex. 0) ger mer deterministiska svar.
    - response_format: Definierar svarsformatet. Här är det inställt på att returnera ett JSON-objekt. Mer information om JSON-läget finns i Referensdokumentationen för Azure OpenAI.
    - messages: Innehåller meddelanden för att generera chattavslut. Det här exemplet innehåller två meddelanden: ett från systemet (definiera beteende och regler) och ett från användaren (som innehåller prompttexten).
- Returvärde:
  - Funktionen returnerar slutförandeobjektet som genererats av Azure OpenAI.

Kommentera ut följande rader i getSQLFromNLP() funktionen:

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

Spara openAI.ts. API-servern återskapar automatiskt TypeScript-koden och startar om servern.
Gå tillbaka till webbläsaren och ange Markera alla tabellnamn från databasen i indata för anpassad fråga. Välj Kör fråga. Visas tabellnamn?
Gå tillbaka till getSQLFromNLP() funktionen i server/openAI.ts och lägg till följande regel i Rules: avsnittet i systemprompten och spara sedan filen.
```
- Do not allow the SELECT query to return table names, function names, or procedure names.
```
Gå tillbaka till webbläsaren och utför följande uppgifter:
- Ange Välj alla tabellnamn från databasen i indata för anpassad fråga . Välj Kör fråga. Visas tabellnamn?
- Ange Välj alla funktionsnamn från databasen. I indata för anpassad fråga och välj Kör fråga igen. Visas funktionsnamn?
FRÅGA: Kommer en modell alltid att följa de regler som du definierar i prompten?

SVAR: Nej! Det är viktigt att observera att OpenAI-modeller kan returnera oväntade resultat ibland som kanske inte matchar de regler som du har definierat. Det är viktigt att planera för det i koden.
Gå tillbaka till server/openAI.ts och leta upp isProhibitedQuery() funktionen. Det här är ett exempel på kod efter bearbetning som kan köras när Azure OpenAI returnerar resultat. Observera att egenskapen sql anges till en tom sträng om otillåtna nyckelord returneras i den genererade SQL-frågan. Detta säkerställer att sql-frågan inte körs mot databasen om oväntade resultat returneras från Azure OpenAI.
```
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));
}
```
Kommentar

Det är viktigt att observera att detta bara är demokod. Det kan finnas andra otillåtna nyckelord som krävs för att täcka dina specifika användningsfall om du väljer att konvertera naturligt språk till SQL. Det här är en funktion som du måste planera för och använda med försiktighet för att säkerställa att endast giltiga SQL-frågor returneras och körs mot databasen. Förutom otillåtna nyckelord måste du också ta hänsyn till säkerheten.
Gå tillbaka till server/openAI.ts och avkommenteras följande kod i getSQLFromNLP() funktionen. Spara filen.
```
if (isProhibitedQuery(queryData.sql)) { 
    queryData.sql = '';
}
```

Ta bort följande regel från systemPrompt och spara filen.

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

Gå tillbaka till webbläsaren anger du Markera alla tabellnamn från databasen i indata för anpassad fråga igen och välj knappen Kör fråga.
Visas några tabellresultat? Även utan regeln på plats isProhibitedQuery() förbjuder efterbearbetningskoden den typen av fråga från att köras mot databasen.
Som tidigare nämnts kan integrering av naturligt språk till SQL i branschspecifika program vara ganska fördelaktigt för användarna, men det kommer med en egen uppsättning överväganden.

Fördelar:
- Användarvänlighet: Den här funktionen kan göra databasinteraktion mer tillgänglig för användare utan teknisk expertis, vilket minskar behovet av SQL-kunskaper och potentiellt påskyndar driften.
- Ökad produktivitet: Affärsanalytiker, marknadsförare, chefer och andra icke-tekniska användare kan hämta värdefull information från databaser utan att behöva förlita sig på tekniska experter, vilket ökar effektiviteten.
- Brett program: Med hjälp av avancerade språkmodeller kan program utformas för att tillgodose en mängd olika användare och användningsfall.
Överväganden:
- Säkerhet: Ett av de största problemen är säkerheten. Om användarna kan interagera med databaser med naturligt språk måste det finnas robusta säkerhetsåtgärder för att förhindra obehörig åtkomst eller skadliga frågor. Du kan överväga att implementera ett skrivskyddat läge för att förhindra att användare ändrar data.
- Datasekretess: Vissa data kan vara känsliga och bör inte vara lättillgängliga, så du måste se till att rätt skydd och användarbehörigheter finns på plats.
- Noggrannhet: Bearbetningen av naturligt språk har förbättrats avsevärt, men den är inte perfekt. Feltolkning av användarfrågor kan leda till felaktiga resultat eller oväntat beteende. Du måste planera för hur oväntade resultat ska hanteras.
- Effektivitet: Det finns inga garantier för att SQL som returneras från en fråga med naturligt språk blir effektiv. I vissa fall kan ytterligare anrop till Azure OpenAI krävas om efterbearbetningsregler identifierar problem med SQL-frågor.
- Utbildnings- och användaranpassning: Användarna måste tränas att formulera sina frågor korrekt. Även om det är enklare än att lära sig SQL kan det fortfarande finnas en inlärningskurva.
Några sista punkter att tänka på innan du går vidare till nästa övning:
- Kom ihåg att "Bara för att du kan betyder det inte att du borde" gäller här. Var mycket försiktig och planera noggrant innan du integrerar naturligt språk i SQL i ett program. Det är viktigt att förstå de potentiella riskerna och planera för dem.
- Innan du använder den här typen av teknik ska du diskutera potentiella scenarier med ditt team, databasadministratörer, säkerhetsteam, intressenter och andra relevanta parter för att säkerställa att det är lämpligt för din organisation. Det är viktigt att diskutera om naturligt språk till SQL uppfyller säkerhet, sekretess och andra krav som din organisation kan ha.
- Säkerhet bör vara ett primärt problem och inbyggt i planerings-, utvecklings- och distributionsprocessen.
- Även om naturligt språk till SQL kan vara mycket kraftfullt, måste noggrann planering gå in i det för att säkerställa att uppmaningarna har nödvändiga regler och att efterbearbetningsfunktioner ingår. Planera för ytterligare tid för att implementera och testa den här typen av funktioner och ta hänsyn till scenarier där oväntade resultat returneras.
- Med Azure OpenAI får kunderna säkerhetsfunktionerna i Microsoft Azure när de kör samma modeller som OpenAI. Azure OpenAI erbjuder privata nätverk, regional tillgänglighet och ansvarsfull AI-innehållsfiltrering. Läs mer om data, sekretess och säkerhet för Azure OpenAI Service.
Nu har du sett hur du använder Azure OpenAI för att konvertera naturligt språk till SQL och lärt dig om fördelarna och nackdelarna med att implementera den här typen av funktioner. I nästa övning får du lära dig hur e-postmeddelanden och SMS kan genereras med Hjälp av Azure OpenAI.

AI: Generera slutföranden

112 minuter kvar

Förutom funktionen naturligt språk till SQL kan du även använda Azure OpenAI Service för att generera e-postmeddelanden och SMS för att förbättra användarproduktiviteten och effektivisera kommunikationsarbetsflödena. Genom att använda Azure OpenAI:s språkgenereringsfunktioner kan användarna definiera specifika regler, till exempel "Order is delayed 5 days" (Order is delayed 5 days), och systemet genererar automatiskt kontextuellt lämpliga e-postmeddelanden och SMS baserat på dessa regler.

Den här funktionen fungerar som en start för användarna, vilket ger dem en genomtänkt mall för meddelanden som de enkelt kan anpassa innan de skickar. Resultatet är en betydande minskning av den tid och det arbete som krävs för att skapa meddelanden, så att användarna kan fokusera på andra viktiga uppgifter. Dessutom kan Azure OpenAI:s språkgenereringsteknik integreras i automatiseringsarbetsflöden, vilket gör det möjligt för systemet att generera och skicka meddelanden autonomt som svar på fördefinierade utlösare. Den här automatiseringsnivån påskyndar inte bara kommunikationsprocesserna utan säkerställer även konsekventa och korrekta meddelanden i olika scenarier.

I den här övningen kommer du att:

Experimentera med olika frågor.
Använd anvisningarna för att generera slutföranden för e-post och SMS.
Utforska kod som möjliggör AI-slutföranden.
Lär dig mer om vikten av snabb teknik och att inkludera regler i dina frågor.

Nu ska vi komma igång genom att experimentera med olika regler som kan användas för att generera e-postmeddelanden och SMS.

Använda ai-slutförandefunktionen

I en tidigare övning startade du databasen, API:erna och programmet. Du har också uppdaterat .env filen. Om du inte har slutfört de här stegen följer du anvisningarna i slutet av övningen innan du fortsätter.
Gå tillbaka till webbläsaren (http://localhost:4200) och välj Kontakta kunden på valfri rad i datagrid följt av E-post/SMS-kund för att komma till skärmen Meddelandegenerator.
Detta använder Azure OpenAI för att konvertera meddelanderegler som du definierar till e-post/SMS. Utför följande uppgifter:
- Ange en regel som Order fördröjs 5 dagar i indata och välj knappen Generera e-post/SMS .
- Du ser ett ämne och en brödtext som genereras för e-postmeddelandet och ett kort meddelande som genereras för SMS:et.
Kommentar

Eftersom Azure Communication Services inte är aktiverat än kan du inte skicka e-postmeddelandet eller SMS:et.
Stäng dialogrutan e-post/SMS i webbläsaren. Nu när du har sett den här funktionen i praktiken ska vi undersöka hur den implementeras.

Utforska koden för AI-slutförande

Dricks

Om du använder Visual Studio Code kan du öppna filer direkt genom att välja:

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

Skriv sedan namnet på den fil som du vill öppna.

Öppna filen server/apiRoutes.ts och leta upp completeEmailSmsMessages vägen. Det här API:et anropas av klientdelen av appen när knappen Generera e-post/SMS har valts. Den hämtar värdena för användarprompt, företag och kontaktnamn från brödtexten och skickar dem till completeEmailSMSMessages() funktionen i filen server/openAI.ts . Resultatet returneras sedan till klienten.

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

Öppna filen server/openAI.ts och leta upp completeEmailSMSMessages() funktionen.

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

Den här funktionen har följande funktioner:

systemPrompt används för att definiera att en AI-assistent som kan generera e-post och SMS krävs. Omfattar systemPrompt även:
- Regler för assistenten att följa för att kontrollera tonen i meddelandena, start- och slutformatet, den maximala längden på SMS-meddelanden med mera.
- Information om data som ska ingå i svaret – ett JSON-objekt i det här fallet.
userPrompt används för att definiera de regler och kontaktnamn som slutanvändaren vill inkludera när e-post och SMS genereras. Regeln Order fördröjs 5 dagar som du angav tidigare ingår i userPrompt.
Funktionen anropar funktionen callOpenAI() som du utforskade tidigare för att generera e-post- och SMS-slutföranden.

Gå tillbaka till webbläsaren uppdaterar du sidan och väljer Kontakta kunden på valfri rad följt av E-post/SMS-kund för att komma till skärmen Meddelandegenerator igen.
Ange följande regler i meddelandegeneratorns indata:
- Ordningen ligger före schemat.
- Be kunden att aldrig beställa från oss igen, vi vill inte ha deras verksamhet.
Välj Generera e-post/SMS och notera meddelandet. Regeln All messages should have a friendly tone and never use inappropriate language. i systemprompten överskrider den negativa regeln i användarprompten.
Gå tillbaka till server/openAI.ts* i redigeringsprogrammet och ta bort All messages should have a friendly tone and never use inappropriate language. regeln från kommandotolken i completeEmailSMSMessages() funktionen. Spara filen.
Gå tillbaka till generatorn för e-post/SMS-meddelanden i webbläsaren och kör samma regler igen:
- Ordningen ligger före schemat.
- Be kunden att aldrig beställa från oss igen, vi vill inte ha deras verksamhet.
Välj Generera e-post/SMS och observera meddelandet som returneras.
Vad händer i dessa scenarier? När du använder Azure OpenAI kan innehållsfiltrering användas för att säkerställa att lämpligt språk alltid används. Om du använder OpenAI används regeln som definierats i systemprompten för att säkerställa att meddelandet som returneras är lämpligt.

Kommentar

Detta illustrerar vikten av att skapa dina frågor med rätt information och regler för att säkerställa att rätt resultat returneras. Läs mer om den här processen i introduktionen till teknisk dokumentation.
Ångra ändringarna du gjorde systemPrompt i , completeEmailSMSMessages()spara filen och kör den igen men använd Order is ahead of schedule. bara regeln (inkludera inte den negativa regeln). Den här gången bör du se att e-postmeddelanden och SMS returneras som förväntat.
Några sista punkter att tänka på innan du går vidare till nästa övning:
- Det är viktigt att ha en människa i loopen för att granska genererade meddelanden. I det här exemplet returnerar Azure OpenAI-slutföranden föreslagna e-postmeddelanden och SMS, men användaren kan åsidosätta dem innan de skickas. Om du planerar att automatisera e-postmeddelanden är det viktigt att ha någon typ av mänsklig granskningsprocess för att säkerställa att godkända meddelanden skickas ut. Visa AI som en andrepilot, inte en autopilot.
- Slutföranden är bara lika bra som de regler som du lägger till i prompten. Ta dig tid att testa dina frågor och slutföranden som returneras. Överväg att använda Prompt Flow för att skapa en omfattande lösning som förenklar prototyper, experimentering, iterering och distribution av AI-program. Bjud in andra projektintressenter att granska slutförandena också.
- Du kan behöva inkludera kod efter bearbetning för att säkerställa att oväntade resultat hanteras korrekt.
- Använd systemprompter för att definiera de regler och den information som AI-assistenten ska följa. Använd användarprompter för att definiera de regler och den information som slutanvändaren vill inkludera i slutförandena.

AI: Azure OpenAI på dina data

102 minuter kvar

Integreringen av AZURE OpenAI Natural Language Processing (NLP) och kompletteringsfunktionerna ger en betydande potential för att förbättra användarproduktiviteten. Genom att använda lämpliga uppmaningar och regler kan en AI-assistent effektivt generera olika former av kommunikation, till exempel e-postmeddelanden, SMS med mera. Den här funktionen leder till ökad användareffektivitet och effektivare arbetsflöden.

Även om den här funktionen är ganska kraftfull på egen hand kan det finnas fall där användarna behöver generera slutföranden baserat på företagets anpassade data. Du kan till exempel ha en samling produkthandböcker som kan vara svåra för användarna att navigera när de hjälper kunder med installationsproblem. Du kan också ha en omfattande uppsättning vanliga frågor och svar om sjukvårdsförmåner som kan vara svåra för användarna att läsa igenom och få de svar de behöver. I dessa fall och många andra gör Azure OpenAI Service att du kan använda dina egna data för att generera slutföranden, vilket säkerställer ett mer skräddarsytt och kontextuellt korrekt svar på användarfrågor.

Här är en snabb översikt över hur funktionen "bring your own data" fungerar från Azure OpenAI-dokumentationen.

Kommentar

En av de viktigaste funktionerna i Azure OpenAI för dina data är dess förmåga att hämta och använda data på ett sätt som förbättrar modellens utdata. Azure OpenAI på dina data, tillsammans med Azure AI Search, avgör vilka data som ska hämtas från den avsedda datakällan baserat på användarens indata och tillhandahållen konversationshistorik. Dessa data utökas och skickas sedan igen som en uppmaning till OpenAI-modellen, med hämtad information som läggs till i den ursprungliga prompten. Även om hämtade data läggs till i prompten bearbetas de resulterande indata fortfarande av modellen som alla andra uppmaningar. När data har hämtats och prompten har skickats till modellen använder modellen den här informationen för att tillhandahålla ett slutförande.

I den här övningen kommer du att:

Skapa en anpassad datakälla med Hjälp av Azure AI Studio.
Distribuera en inbäddningsmodell med Hjälp av Azure AI Studio.
Ladda upp anpassade dokument.
Starta en chattsession på chattlekplatsen för att experimentera med att generera slutföranden baserat på dina egna data.
Utforska kod som använder Azure AI Search och Azure OpenAI för att generera slutföranden baserat på dina egna data.

Nu ska vi komma igång genom att distribuera en inbäddningsmodell och lägga till en anpassad datakälla i Azure AI Studio.

Lägga till en anpassad datakälla i Azure AI Studio

Gå till Azure OpenAI Studio och logga in med autentiseringsuppgifter som har åtkomst till din Azure OpenAI-resurs.
Välj Distributioner på navigeringsmenyn.
Välj Välj Distribuera modell –->Distribuera basmodell i verktygsfältet.
Välj modellen text-embedding-ada-002 i listan över modeller och välj Bekräfta.
Välj ett av följande alternativ:
- Distributionsnamn: text-embedding-ada-002
- Modellversion: Standard
- Distributionstyp: Standard
- Ange värdet token per minuthastighetsgräns (tusentals) till 120 000
- Innehållsfilter: DefaultV2
- Aktivera dynamiskt citat: Aktiverat
Välj knappen Distribuera.
När modellen har skapats väljer du Start på navigeringsmenyn för att gå till välkomstskärmen.
Leta upp panelen Bring your own data (Ta med egna data ) på välkomstskärmen och välj Prova nu.
Välj Lägg till dina data följt av Lägg till en datakälla.
I listrutan Välj datakälla väljer du Ladda upp filer.
Under listrutan Välj Azure Blob Storage-resurs väljer du Skapa en ny Azure Blob Storage-resurs.
Välj din Azure-prenumeration i listrutan Prenumeration .
Under listrutan Välj Azure Blob Storage-resurs väljer du Skapa en ny Azure Blob Storage-resurs.
Detta tar dig till Azure Portal där du kan utföra följande uppgifter:
- Ange ett unikt namn för lagringskontot, till exempel byodstorage[Ditt efternamn].
- Välj en region som är nära din plats.
- Välj Granska följt av Skapa.
När bloblagringsresursen har skapats går du tillbaka till dialogrutan Azure AI Studio och väljer den nyligen skapade bloblagringsresursen i listrutan Välj Azure Blob Storage-resurs . Om du inte ser den i listan väljer du uppdateringsikonen bredvid listrutan.
Resursdelning mellan ursprung (CORS) måste aktiveras för att ditt lagringskonto ska kunna nås. Välj Aktivera CORS i dialogrutan Azure AI Studio.
Under listrutan Välj Azure AI Search-resurs väljer du Skapa en ny Azure AI Search-resurs.
Detta tar dig tillbaka till Azure Portal där du kan utföra följande uppgifter:
- Ange ett unikt namn för AI Search-resursen, till exempel byodsearch-[Ditt efternamn].
- Välj en region som är nära din plats.
- I avsnittet Prisnivå väljer du Ändra prisnivå och sedan Basic följt av Välj. Den kostnadsfria nivån stöds inte, så du rensar AI Search-resursen i slutet av den här självstudien.
- Välj Granska följt av Skapa.
När AI Search-resursen har skapats går du till resursöversiktssidan och kopierar URL-värdet till en lokal fil.
Välj Inställningar –> Nycklar i navigeringsmenyn.
På sidan API-åtkomstkontroll väljer du Båda för att aktivera tjänsten som ska nås med hjälp av hanterad identitet eller med hjälp av en nyckel. Välj Ja när du uppmanas att göra det.

Kommentar

Även om vi använder en API-nyckel i den här övningen eftersom det kan ta upp till 10 minuter att lägga till rolltilldelningar, kan du med lite extra ansträngning göra det möjligt för en systemtilldelad hanterad identitet att komma åt tjänsten på ett säkrare sätt.
Välj Nycklar i den vänstra navigeringsmenyn och kopiera värdet primär administratörsnyckel till en lokal fil. Du behöver URL-adressen och nyckelvärdena senare i övningen.
Välj Inställningar -->Semantisk ranker i navigeringsmenyn och se till att Kostnadsfri är valt.

Kommentar

Om du vill kontrollera om semantisk rankning är tillgänglig i en viss region kontrollerar du sidan Tillgängliga produkter per region på Azure-webbplatsen för att se om din region visas.
Gå tillbaka till Azure AI Studio Dialogrutan Lägg till data och välj din nyligen skapade sökresurs i listrutan Välj Azure AI Search-resurs. Om du inte ser den i listan väljer du uppdateringsikonen bredvid listrutan.
Ange ett värde för byod-search-index för värdet Ange indexnamnet .
Markera kryssrutan Lägg till vektorsökning i den här sökresursen .
I listrutan Välj en inbäddningsmodell väljer du modellen text-embedding-ada-002 som du skapade tidigare.
I dialogrutan Ladda upp filer väljer du Bläddra efter en fil.
Gå till projektets kunddokumentmapp (som finns i projektets rot) och välj följande filer:
- Klocka A102 Installation Instructions.docx
- Företagets FAQs.docx
Kommentar

Den här funktionen stöder för närvarande följande filformat för att skapa lokala index: .txt, .md, .html, .pdf, .docx och .pptx.
Välj Ladda upp filer. Filerna laddas upp till en fileupload-byod-search-index-container i bloblagringsresursen som du skapade tidigare.
Välj Nästa för att gå till dialogrutan Datahantering .
I listrutan Söktyp väljer du Hybrid + semantik.

Kommentar

Det här alternativet ger stöd för nyckelords- och vektorsökning. När resultaten har returnerats tillämpas en sekundär rangordningsprocess på resultatuppsättningen med hjälp av djupinlärningsmodeller som förbättrar användarens sökrelevans. Mer information om semantisk sökning finns i dokumentationen för semantisk sökning i Azure AI Search .
Kontrollera att värdet Välj en storlek är inställt på 1024.
Välj Nästa.
Som Azure-resursautentiseringstyp väljer du API-nyckel. Läs mer om att välja rätt autentiseringstyp i dokumentationen för Azure AI Search-autentisering.
Välj Nästa.
Granska informationen och välj Spara och stäng.
Nu när dina anpassade data har laddats upp indexeras data och är tillgängliga för användning i chattlekplatsen. Processen kan ta några minuter. När det är klart fortsätter du till nästa avsnitt.

Använda din anpassade datakälla i chattlekplatsen

Leta upp avsnittet Chattsession på sidan i Azure OpenAI Studio och ange följande användarfråga:
```
What safety rules are required to install a clock?
```
När du har skickat användarfrågan bör du se ett resultat som liknar följande som visas:
Expandera avsnittet 1 referenser i chattsvaret och observera att filen Clock A102 Installation Instructions.docx visas och att du kan välja den för att visa dokumentet.

Ange följande användarmeddelande:

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

Du bör se ett resultat som liknar följande som visas:
Nu ska vi experimentera med dokumentet Vanliga frågor och svar om företag. Ange följande text i fältet Användarfråga :
```
What is the company's policy on vacation time?
```
Du bör se att ingen information hittades för den begäran.
Ange följande text i fältet Användarfråga :
```
How should I handle refund requests?
```
Du bör se ett resultat som liknar följande som visas:
Expandera avsnittet med 1 referenser i chattsvaret och observera att filen Company FAQs.docx visas och att du kan välja den för att visa dokumentet.
Välj Visa kod i verktygsfältet i chattlekplatsen.
Observera att du kan växla mellan olika språk, visa slutpunkten och komma åt slutpunktens nyckel. Stäng dialogrutan Exempelkod.
Aktivera växlingsknappen Visa rå JSON ovanför chattmeddelandena. Observera att chattsessionen börjar med ett meddelande som liknar följande:
```
{
    "role": "system",
    "content": "You are an AI assistant that helps people find information."
}
```
Nu när du har skapat en anpassad datakälla och experimenterat med den i chattlekplatsen ska vi se hur du kan använda den i projektets program.

Använda funktionen Bring Your Own Data i programmet

Gå tillbaka till projektet i VS Code och öppna .env-filen. Uppdatera följande värden med din AI Services-slutpunkt, nyckel och indexnamn. Du kopierade slutpunkten och nyckeln till en lokal fil tidigare i den här övningen.
```
AZURE_AI_SEARCH_ENDPOINT=<AI_SERVICES_ENDPOINT_VALUE>
AZURE_AI_SEARCH_KEY=<AI_SERVICES_KEY_VALUE>
AZURE_AI_SEARCH_INDEX=byod-search-index
```
I en tidigare övning startade du databasen, API:erna och programmet. Du har också uppdaterat .env filen. Om du inte har slutfört de här stegen följer du anvisningarna i slutet av den tidigare övningen innan du fortsätter.
När programmet har lästs in i webbläsaren väljer du ikonen Chatthjälp längst upp till höger i programmet.

Följande text bör visas i chattdialogrutan:

How should I handle a company refund request?

Välj knappen Få hjälp. Du bör se resultat som returneras från dokumentet Company FAQs.docx som du laddade upp tidigare i Azure OpenAI Studio. Om du vill läsa igenom dokumentet kan du hitta det i mappen kunddokument i projektets rot.
Ändra texten till följande och välj knappen Få hjälp:
```
What safety rules are required to install a clock?
```
Du bör se resultat som returneras från dokumentet Clock A102 Installation Instructions.docx som du laddade upp tidigare i Azure OpenAI Studio. Det här dokumentet är också tillgängligt i mappen kunddokument i projektets rot.

Utforska koden

Dricks

Om du använder Visual Studio Code kan du öppna filer direkt genom att välja:

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

Skriv sedan namnet på den fil som du vill öppna.

Gå tillbaka till projektets källkod i Visual Studio Code.

Öppna filen server/apiRoutes.ts och leta upp completeBYOD vägen. Det här API:et anropas när knappen Få hjälp väljs i dialogrutan Chatthjälp. Den hämtar användarprompten från begärandetexten och skickar den completeBYOD() till funktionen i filen server/openAI.ts . Resultatet returneras sedan till klienten.

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

Öppna filen server/openAI.ts och leta upp completeBYOD() funktionen.
```
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);
}
```
Den här funktionen har följande funktioner:
- Parametern userPrompt innehåller den information som användaren skrev i chatthjälpdialogrutan.
- variabeln systemPrompt definierar att en AI-assistent som är utformad för att hjälpa människor att hitta information kommer att användas.
- callOpenAI() används för att anropa Azure OpenAI-API:et och returnera resultatet. Den skickar systemPrompt värdena och userPrompt samt följande parametrar:
  - temperature - Mängden kreativitet att ta med i svaret. Användaren behöver konsekventa (mindre kreativa) svar i det här fallet så värdet är inställt på 0.
  - useBYOD – Ett booleskt värde som anger om AI Search ska användas tillsammans med Azure OpenAI. I det här fallet är den inställd på så att true AI Search-funktioner används.

Funktionen callOpenAI() accepterar en useBYOD parameter som används för att avgöra vilken OpenAI-funktion som ska anropas. I det här fallet anges useBYOD den getAzureOpenAIBYODCompletion() till så att true funktionen anropas.

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

getAzureOpenAIBYODCompletion() Leta upp funktionen i server/openAI.ts. Det liknar den getAzureOpenAICompletion() funktion som du undersökte tidigare, men visas som en separat funktion för att markera några viktiga skillnader som är unika för scenariot "Azure OpenAI på dina data" som är tillgängligt i 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() ?? '';
}

Observera följande funktioner i getAzureOpenAIBYODCompletion() funktionen:

En dataSources egenskap skapas som innehåller AI Search-resursens key, endpointoch index_name värden som lades till i filen tidigare i den här övningen .env
Funktionen createAzureOpenAICompletion() anropas med systemPromptvärdena , userPrompt, temperatureoch dataSources . Den här funktionen används för att anropa Azure OpenAI API och returnera resultatet.
När svaret har returnerats loggas dokumentcitaten till konsolen. Innehållet i slutförandemeddelandet returneras sedan till anroparen.

Några sista punkter att tänka på innan du går vidare till nästa övning:
- Exempelprogrammet använder ett enda index i Azure AI Search. Du kan använda flera index och datakällor med Azure OpenAI. Egenskapen dataSources i getAzureOpenAIBYODCompletion() funktionen kan uppdateras så att den innehåller flera datakällor efter behov.
- Säkerheten måste utvärderas noggrant med den här typen av scenario. Användare ska inte kunna ställa frågor och få resultat från dokument som de inte kan komma åt.
Nu när du har lärt dig mer om Azure OpenAI, frågor, slutföranden och hur du kan använda dina egna data går vi till nästa övning för att lära dig hur kommunikationsfunktioner kan användas för att förbättra programmet. Om du vill veta mer om Azure OpenAI kan du visa Kom igång med Azure OpenAI Service-utbildningsinnehåll. Mer information om hur du använder dina egna data med Azure OpenAI finns i Azure OpenAI i din datadokumentation .

Kommunikation: Skapa en Azure Communication Services-resurs

87 minuter kvar

Effektiv kommunikation är avgörande för lyckade anpassade affärsprogram. Genom att använda Azure Communication Services (ACS) kan du lägga till funktioner som telefonsamtal, livechatt, ljud-/videosamtal och e-post- och SMS-meddelanden i dina program. Tidigare har du lärt dig hur Azure OpenAI kan generera slutföranden för e-post och SMS. Nu får du lära dig hur du skickar meddelandena. Tillsammans kan ACS och OpenAI förbättra dina program genom att förenkla kommunikationen, förbättra interaktionerna och öka affärsproduktiviteten.

I den här övningen kommer du att:

Skapa en Azure Communication Services-resurs (ACS).
Lägg till ett avgiftsfritt telefonnummer med samtals- och SMS-funktioner.
Anslut en e-postdomän.
Uppdatera projektets .env-fil med värden från acs-resursen.

Översikt över Microsoft Cloud-scenario

Skapa en Azure Communication Services-resurs

Besök Azure Portal i webbläsaren och logga in om du inte redan har gjort det.
Skriv kommunikationstjänster i sökfältet överst på sidan och välj Kommunikationstjänster bland de alternativ som visas.
Välj Skapa i verktygsfältet.
Utför följande uppgifter:
- Välj din Azure-prenumerationen.
- Välj den resursgrupp som ska användas (skapa en ny om den inte finns).
- Ange ett ACS-resursnamn. Det måste vara ett unikt värde.
- Välj en dataplats.
Välj Granska + Skapa följt av Skapa.
Du har skapat en ny Azure Communication Services-resurs! Därefter aktiverar du funktioner för telefonsamtal och SMS. Du ansluter också en e-postdomän till resursen.

Aktivera funktioner för telefonsamtal och SMS

Lägg till ett telefonnummer och se till att telefonnumret har samtalsfunktioner aktiverade. Du använder det här telefonnumret för att ringa till en telefon från appen.
- Välj Telefoni och SMS -->Telefonnummer på resursmenyn.
- Välj + Hämta i verktygsfältet (eller välj knappen Hämta ett nummer ) och ange följande information:
  - Land eller region: United States
  - Nummertyp: Toll-free
  Kommentar
  
  Ett kreditkort krävs i din Azure-prenumeration för att skapa det avgiftsfria numret. Om du inte har ett kort i filen kan du hoppa över att lägga till ett telefonnummer och gå vidare till nästa avsnitt i övningen som ansluter en e-postdomän. Du kan fortfarande använda appen, men kommer inte att kunna ringa upp till ett telefonnummer.
  - Nummer: Välj Lägg till i kundvagn för ett av de telefonnummer som visas.
Välj Nästa, granska telefonnummerinformationen och välj Köp nu.

Kommentar

SMS-verifiering för avgiftsfria nummer är nu obligatoriskt i USA och Kanada. Om du vill aktivera SMS-meddelanden måste du skicka verifiering efter köpet av telefonnumret. Även om den här självstudien inte går igenom den processen kan du välja Telefoni och SMS –->Regeldokument på resursmenyn och lägga till den valideringsdokumentation som krävs.
När telefonnumret har skapats väljer du det för att komma till panelen Funktioner . Kontrollera att följande värden har angetts (de ska anges som standard):
- I avsnittet Samtal väljer du Make calls.
- I avsnittet SMS väljer du Send and receive SMS.
- Välj Spara.
Kopiera värdet för telefonnummer till en fil för senare användning. Telefonnumret bör följa det här allmänna mönstret: +12345678900.

Ansluta en e-postdomän

Utför följande uppgifter för att skapa en ansluten e-postdomän för din ACS-resurs så att du kan skicka e-post. Detta används för att skicka e-post från appen.
- Välj E-post –> Domäner på resursmenyn.
- Välj Anslut domän i verktygsfältet.
- Välj din prenumeration och resursgrupp.
- Under listrutan E-posttjänst väljer du Add an email service.
- Ge e-posttjänsten ett namn som acs-demo-email-service.
- Välj Granska + skapa följt av Skapa.
- När distributionen är klar väljer du Go to resourceoch väljer 1-click add för att lägga till en kostnadsfri Azure-underdomän.
- När underdomänen har lagts till (det tar en stund att distribuera den) väljer du den.
- När du är på skärmen AzureManagedDomain väljer du E-posttjänster – MailFrom-adresser> från resursmenyn.
- Kopiera värdet MailFrom till en fil. Du kommer att använda den senare när du uppdaterar .env-filen .
- Gå tillbaka till din Azure Communication Services-resurs och välj E-post –> Domäner från resursmenyn.
- Välj Add domain och ange MailFrom värdet från föregående steg (se till att du väljer rätt prenumeration, resursgrupp och e-posttjänst). Välj knappen Connect.

`.env` Uppdatera filen

Nu när ditt ACS-telefonnummer (med samtal och SMS aktiverat) och e-postdomänen är klara uppdaterar du följande nycklar/värden i .env-filen i projektet:
```
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: Värdet connection string från avsnittet Nycklar i din ACS-resurs.
- ACS_PHONE_NUMBER: Tilldela ditt avgiftsfria nummer till ACS_PHONE_NUMBER värdet.
- ACS_EMAIL_ADDRESS: Tilldela adressvärdet e-post "MailTo".
- CUSTOMER_EMAIL_ADDRESS: Tilldela en e-postadress som du vill att e-post ska skickas till från appen (eftersom kunddata i appens databas endast är exempeldata). Du kan använda en personlig e-postadress.
- CUSTOMER_PHONE_NUMBER: Du måste ange ett USA baserat telefonnummer (från och med idag) på grund av ytterligare verifiering som krävs i andra länder för att skicka SMS. Om du inte har ett USA-baserat nummer kan du lämna det tomt.

Starta/starta om programmet och API-servrarna

Utför något av följande steg baserat på de övningar som du har slutfört fram till den här punkten:

Om du startade databasen, API-servern och webbservern i en tidigare övning måste du stoppa API-servern och webbservern och starta om dem för att hämta filändringarna i .env . Du kan låta databasen köras.

Leta upp terminalfönstren som kör API-servern och webbservern och tryck på CTRL + C för att stoppa dem. Starta dem igen genom att npm start skriva i varje terminalfönster och trycka på Retur. Fortsätt till nästa övning.
Om du inte har startat databasen, API-servern och webbservern ännu utför du följande steg:
1. I följande steg skapar du tre terminalfönster i Visual Studio Code.
2. Högerklicka på .env-filen i Visual Studio Code-fillistan och välj Öppna i integrerad terminal. Kontrollera att terminalen finns i roten av projektet – openai-acs-msgraph – innan du fortsätter.
3. Välj något av följande alternativ för att starta PostgreSQL-databasen:
  - Om du har Docker Desktop installerat och körs kör du docker-compose up i terminalfönstret och trycker på Retur.
  - Om du har Podman med podman-compose installerat och körs kör podman-compose up du i terminalfönstret och trycker på Retur.
  - Kör följande kommando i terminalfönstret om du vill köra PostgreSQL-containern direkt med antingen Docker Desktop, Podman, nerdctl eller någon annan containerkörning som du har installerat:
    - Mac, Linux eller Windows-undersystem för 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 med 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. När databascontainern startar trycker du på + ikonen i verktygsfältet i Visual Studio Code-terminalen för att skapa ett andra terminalfönster.
5. cdi mappen server/typescript och kör följande kommandon för att installera beroendena och starta API-servern.
  - npm install
  - npm start
6. Tryck på + ikonen igen i verktygsfältet i Visual Studio Code-terminalen för att skapa ett tredje terminalfönster.
7. cdi klientmappen och kör följande kommandon för att installera beroendena och starta webbservern.
  - npm install
  - npm start
8. En webbläsare startas och du tas till http://localhost:4200.

Kommunikation: Ringa ett telefonsamtal

79 minuter kvar

Integreringen av Azure Communication Services telefonsamtalsfunktioner i ett anpassat verksamhetsspecifikt program (LOB) ger flera viktiga fördelar för företag och deras användare:

Möjliggör sömlös och realtidskommunikation mellan anställda, kunder och partner, direkt från LOB-programmet, vilket eliminerar behovet av att växla mellan flera plattformar eller enheter.
Förbättrar användarupplevelsen och förbättrar den övergripande drifteffektiviteten.
Underlättar snabb problemlösning eftersom användarna snabbt kan ansluta till relevanta supportteam eller ämnesexperter snabbt och enkelt.

I den här övningen kommer du att:

Utforska telefonsamtalsfunktionen i programmet.
Gå igenom koden för att lära dig hur telefonsamtalsfunktionen skapas.

Använda telefonsamtalsfunktionen

I föregående övning skapade du en Azure Communication Services-resurs (ACS) och startade databasen, webbservern och API-servern. Du har också uppdaterat följande värden i .env-filen .
```
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>
```
Kontrollera att du har slutfört föregående övning innan du fortsätter.
Gå tillbaka till webbläsaren (http://localhost:4200) letar du upp datagrid och väljer Kontakta kund följt av Samtalskund på den första raden.
En telefonsamtalskomponent läggs till i rubriken. Ange ditt telefonnummer som du vill ringa (se till att det börjar med + och innehåller landskoden) och välj Ring. Du uppmanas att tillåta åtkomst till mikrofonen.
Välj Lägg på för att avsluta samtalet. Välj Stäng för att stänga telefonsamtalskomponenten.

Utforska telefonsamtalskoden

Dricks

Om du använder Visual Studio Code kan du öppna filer direkt genom att välja:

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

Skriv sedan namnet på den fil som du vill öppna.

Öppna filen customers-list.component.ts . Den fullständiga sökvägen till filen är client/src/app/customers-list/customers-list.component.ts.
Observera att openCallDialog() skickar ett CustomerCall meddelande och kundens telefonnummer med hjälp av en händelsebuss.
```
openCallDialog(data: Phone) {
    this.eventBus.emit({ name: Events.CustomerCall, value: data });
}
```
Kommentar

Händelsebusskoden finns i filen eventbus.service.ts om du är intresserad av att utforska den mer. Den fullständiga sökvägen till filen är client/src/app/core/eventbus.service.ts.

Huvudkomponentens funktion prenumererar på händelsen som CustomerCall skickas ngOnInit() av händelsebussen och visar telefonsamtalskomponenten. Du hittar den här koden i 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
        })
    );
}

Öppna phone-call.component.ts. Ta en stund att visa koden. Den fullständiga sökvägen till filen är client/src/app/phone-call/phone-call.component.ts. Observera följande viktiga funktioner:
- Hämtar en Åtkomsttoken för Azure Communication Services genom att anropa acsService.getAcsToken() funktionen i ngOnInit();
- Lägger till en "telefonuppringare" på sidan. Du kan se uppringaren genom att klicka på telefonnummerinmatningen i rubriken.
- Startar och avslutar ett anrop med respektive startCall() endCall() funktioner.
Innan vi tittar på koden som ringer telefonsamtalet ska vi undersöka hur ACS-åtkomsttoken hämtas och hur telefonsamtalsobjekt skapas. ngOnInit() Leta upp funktionen i 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);
            })
        );
    }
}
```
Den här funktionen utför följande åtgärder:
- Hämtar ett ACS userId och åtkomsttoken genom att anropa acsService.getAcsToken() funktionen.
- När åtkomsttoken har hämtats utför koden följande åtgärder:
  - Skapar en ny instans av och AzureCommunicationTokenCredential med hjälp av CallClient åtkomsttoken.
  - Skapar en ny instans av CallAgent att använda objekten CallClient och AzureCommunicationTokenCredential . Senare ser du att CallAgent används för att starta och avsluta ett anrop.
Öppna acs.services.ts och leta upp getAcsToken() funktionen. Den fullständiga sökvägen till filen är client/src/app/core/acs.service.ts. Funktionen gör en HTTP GET-begäran till den väg som /acstoken exponeras av API-servern.
```
getAcsToken(): Observable<AcsUser> {
    return this.http.get<AcsUser>(this.apiUrl + 'acstoken')
    .pipe(
        catchError(this.handleError)
    );
}
```
En API-serverfunktion med namnet createACSToken() hämtar userId och åtkomsttoken och returnerar den till klienten. Den finns i filen 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 };
}
```
Den här funktionen utför följande åtgärder:
- Kontrollerar om ett ACS-värde connectionString är tillgängligt. Annars returnerar ett objekt med ett tomt userId och token.
- Skapar en ny instans av CommunicationIdentityClient och skickar värdet till den connectionString .
- Skapar en ny användare och token med hjälp av tokenClient.createUserAndToken() omfånget "voip".
- Returnerar ett objekt som innehåller userId värdena och token .
Nu när du har sett hur userId och token hämtas går du tillbaka till phone-call.component.ts och letar upp startCall() funktionen.

Den här funktionen anropas när Samtal har valts i telefonsamtalskomponenten. Det använder objektet CallAgent som nämndes tidigare för att starta ett anrop. Funktionen callAgent.startCall() accepterar ett objekt som representerar numret som ska anropas och det ACS-telefonnummer som används för att ringa samtalet.

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

Funktionen endCall() anropas när Hang Up väljs i telefonsamtalskomponenten.
```
endCall() {
    if (this.call) {
        this.call.hangUp({ forEveryone: true });
        this.call = undefined;
        this.inCall = false;
    }
    else {
        this.hangup.emit();
    }
}
```
Om ett anrop pågår call.hangUp() anropas funktionen för att avsluta anropet. Om inget samtal pågår hangup skickas händelsen till huvudkomponenten för att dölja telefonsamtalskomponenten.
Innan vi går vidare till nästa övning ska vi gå igenom de viktigaste begreppen som beskrivs i den här övningen:
- Ett ACS userId och en åtkomsttoken hämtas från API-servern med hjälp av acsService.createUserAndToken() funktionen .
- Token används för att skapa ett CallClient och CallAgent -objekt.
- Objektet CallAgent används för att starta och avsluta ett anrop genom att anropa callAgent.startCall() funktionerna och callAgent.hangUp() .
Nu när du har lärt dig hur telefonsamtal kan integreras i ett program ska vi byta fokus till att använda Azure Communication Services för att skicka e-post och SMS.

Kommunikation: Skicka e-post och SMS

69 minuter kvar

Utöver telefonsamtal kan Azure Communication Services även skicka e-post och SMS. Detta kan vara användbart när du vill skicka ett meddelande till en kund eller annan användare direkt från programmet.

I den här övningen kommer du att:

Utforska hur e-postmeddelanden och SMS kan skickas från programmet.
Gå igenom koden för att lära dig hur e-post- och SMS-funktionerna implementeras.

Använda e-post- och SMS-funktionerna

I en tidigare övning skapade du en Azure Communication Services-resurs (ACS) och startade databasen, webbservern och API-servern. Du har också uppdaterat följande värden i .env-filen .
```
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>
```
Kontrollera att du har slutfört övningen innan du fortsätter.
Gå tillbaka till webbläsaren (http://localhost:4200) och välj Kontakta kund följt av E-post/SMS-kund på den första raden.
Välj fliken E-post/SMS och utför följande uppgifter:
- Ange ett e-postämne och brödtext och välj knappen Skicka e-post.
- Ange ett SMS och välj knappen Skicka SMS .
Kommentar

SMS-verifiering för avgiftsfria nummer är nu obligatoriskt i USA och Kanada. Om du vill aktivera SMS-meddelanden måste du skicka verifiering efter köpet av telefonnumret. Även om den här självstudien inte går igenom den processen kan du välja Telefoni och SMS –-Regeldokument från din Azure Communication Services-resurs> i Azure Portal och lägga till den valideringsdokumentation som krävs.
Kontrollera att du har fått e-postmeddelandet och SMS:et. SMS-funktionen fungerar bara om du har skickat in de regeldokument som nämns i föregående anteckning. Som en påminnelse skickas e-postmeddelandet till det värde som definierats för CUSTOMER_EMAIL_ADDRESS och SMS-meddelandet skickas till det värde som definierats för CUSTOMER_PHONE_NUMBER i .env-filen . Om du inte kunde ange ett USA baserat telefonnummer som ska användas för SMS kan du hoppa över det steget.

Kommentar

Om du inte ser e-postmeddelandet i inkorgen för den adress som du har definierat för CUSTOMER_EMAIL_ADDRESS i .env-filen kontrollerar du skräppostmappen.

Utforska e-postkoden

Dricks

Om du använder Visual Studio Code kan du öppna filer direkt genom att välja:

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

Skriv sedan namnet på den fil som du vill öppna.

Öppna filen customers-list.component.ts . Den fullständiga sökvägen till filen är client/src/app/customers-list/customers-list.component.ts.

När du valde Kontakta kund följt av E-post/SMS-kund i datagrid visade komponenten customer-list en dialogruta. Detta hanteras av openEmailSmsDialog() funktionen i filen 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.');
    }
}

Funktionen openEmailSmsDialog() utför följande uppgifter:

Kontrollerar om objektet data (som representerar raden från datagrid) innehåller en phone och email -egenskap. Om den gör det skapas ett dialogData objekt som innehåller den information som ska skickas till dialogrutan.
EmailSmsDialogComponent Öppnar dialogrutan och skickar objektet dialogData till den.
Prenumererar på afterClosed() händelsen i dialogrutan. Den här händelsen utlöses när dialogrutan stängs. Objektet response innehåller den information som angavs i dialogrutan.

Öppna filen email-sms-dialog.component.ts . Den fullständiga sökvägen till filen är client/src/app/email-sms-dialog/email-sms-dialog.component.ts.
sendEmail() Leta upp funktionen:
```
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
    }
}
```
Funktionen sendEmail() utför följande uppgifter:
- Kontrollerar om funktionsflaggan acsEmailEnabled är inställd på true. Den här flaggan kontrollerar om ACS_EMAIL_ADDRESS miljövariabeln har ett tilldelat värde.
- Om acsEmailEnabled är sant acsService.sendEmail() anropas funktionen och e-postmeddelandets ämne, brödtext, kundnamn och kundens e-postadress skickas. Eftersom databasen innehåller exempeldata CUSTOMER_EMAIL_ADDRESS används miljövariabeln i stället för this.data.email. I ett verkligt program this.data.email används värdet.
- Prenumererar på sendEmail() funktionen i acsService tjänsten. Den här funktionen returnerar en RxJS-observerbar som innehåller svaret från klienttjänsten.
- Om e-postmeddelandet har skickats är egenskapen emailSent inställd på true.
För att ge bättre kodkapsling och återanvändning används tjänster på klientsidan, till exempel acs.service.ts i hela programmet. Detta gör att alla ACS-funktioner kan konsolideras till en enda plats.
Öppna acs.service.ts och leta upp sendEmail() funktionen. Den fullständiga sökvägen till filen är 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)
    );
}
```
Funktionen sendEmail() i AcsService utför följande uppgifter:
- http.post() Anropar funktionen och skickar e-postämnet, meddelandet, kundnamnet och kundens e-postadress till den. Funktionen http.post() returnerar en RxJS-observerbar som innehåller svaret från API-anropet.
- Hanterar eventuella fel som returneras av http.post() funktionen med RxJS-operatorn catchError .
Nu ska vi undersöka hur programmet interagerar med ACS-e-postfunktionen. Öppna filen acs.ts och leta upp sendEmail() funktionen. Den fullständiga sökvägen till filen är server/typescript/acs.ts.
Funktionen sendEmail() utför följande uppgifter:
- Skapar ett nytt EmailClient objekt och skickar ACS-anslutningssträng till det (det här värdet hämtas från ACS_CONNECTION_STRING miljövariabeln).
```
const emailClient = new EmailClient(connectionString);
```
- Skapar ett nytt EmailMessage objekt och skickar avsändar-, ämnes-, meddelande- och mottagarinformation.
```
const msgObject: EmailMessage = {
    senderAddress: process.env.ACS_EMAIL_ADDRESS as string,
    content: {
        subject: subject,
        plainText: message,
    },
    recipients: {
        to: [
            {
                address: customerEmailAddress,
                displayName: customerName,
            },
        ],
    },
};
```
- Skickar e-postmeddelandet med hjälp av emailClient.beginSend() funktionen och returnerar svaret. Även om funktionen bara skickar till en mottagare i det här exemplet beginSend() kan funktionen även användas för att skicka till flera mottagare.
```
const poller = await emailClient.beginSend(msgObject);
```
- poller Väntar på att objektet ska signalera att det är klart och skickar svaret till anroparen.

Utforska SMS-koden

Gå tillbaka till den email-sms-dialog.component.ts fil som du öppnade tidigare. Den fullständiga sökvägen till filen är client/src/app/email-sms-dialog/email-sms-dialog.component.ts.
sendSms() Leta upp funktionen:
```
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;
    }
}
```
Funktionen sendSMS() utför följande uppgifter:
- Kontrollerar om funktionsflaggan acsPhoneEnabled är inställd på true. Den här flaggan kontrollerar om ACS_PHONE_NUMBER miljövariabeln har ett tilldelat värde.
- Om acsPhoneEnabled är sant acsService.SendSms() anropas funktionen och SMS-meddelandet och kundens telefonnummer skickas. Eftersom databasen innehåller exempeldata CUSTOMER_PHONE_NUMBER används miljövariabeln i stället för this.data.customerPhoneNumber. I ett verkligt program this.data.customerPhoneNumber används värdet.
- Prenumererar på sendSms() funktionen i acsService tjänsten. Den här funktionen returnerar en RxJS-observerbar som innehåller svaret från klienttjänsten.
- Om SMS-meddelandet har skickats ställs egenskapen in på smsSent true.
Öppna acs.service.ts och leta upp sendSms() funktionen. Den fullständiga sökvägen till filen är 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)
    );
}  
```
Funktionen sendSms() utför följande uppgifter:
- http.post() Anropar funktionen och skickar meddelandet och kundens telefonnummer till den. Funktionen http.post() returnerar en RxJS-observerbar som innehåller svaret från API-anropet.
- Hanterar eventuella fel som returneras av http.post() funktionen med RxJS-operatorn catchError .
Slutligen ska vi undersöka hur programmet interagerar med ACS SMS-funktionen. Öppna filen acs.ts . Den fullständiga sökvägen till filen är server/typescript/acs.ts och leta upp sendSms() funktionen.
Funktionen sendSms() utför följande uppgifter:
- Skapar ett nytt SmsClient objekt och skickar ACS-anslutningssträng till det (det här värdet hämtas från ACS_CONNECTION_STRING miljövariabeln).
```
const smsClient = new SmsClient(connectionString);
```
- smsClient.send() Anropar funktionen och skickar ACS-telefonnumret (from), kundens telefonnummer (to) och SMS:et:
```
const sendResults = await smsClient.send({
    from: process.env.ACS_PHONE_NUMBER as string,
    to: [customerPhoneNumber],
    message: message
});
return sendResults;
```
- Returnerar svaret till anroparen.
Du kan läsa mer om ACS-e-post och SMS-funktioner i följande artiklar:
- E-post i Azure Communication Services
- SMS i Azure Communication Services
Innan vi går vidare till nästa övning ska vi gå igenom de viktigaste begreppen som beskrivs i den här övningen:
- Filen acs.service.ts kapslar in acs-e-post och SMS-funktioner som används av programmet på klientsidan. Den hanterar API-anropen till servern och returnerar svaret till anroparen.
- API:et på serversidan använder ACS EmailClient och SmsClient objekt för att skicka e-post och SMS.
Nu när du har lärt dig hur e-postmeddelanden och SMS kan skickas ska vi byta fokus till att integrera organisationsdata i programmet.

Organisationsdata: Skapa en Appregistrering för Microsoft Entra-ID

59 minuter kvar

Förbättra användarproduktiviteten genom att integrera organisationsdata (e-post, filer, chattar och kalenderhändelser) direkt i dina anpassade program. Genom att använda Microsoft Graph-API:er och Microsoft Entra-ID kan du smidigt hämta och visa relevanta data i dina appar, vilket minskar användarnas behov av att byta kontext. Oavsett om det handlar om att referera till ett e-postmeddelande som skickas till en kund, granska ett Teams-meddelande eller komma åt en fil kan användarna snabbt hitta den information de behöver utan att lämna din app, vilket effektiviserar deras beslutsprocess.

I den här övningen kommer du att:

Skapa en Microsoft Entra ID-appregistrering så att Microsoft Graph kan komma åt organisationsdata och föra in dem i appen.
Leta upp team och channel ID:n från Microsoft Teams som behövs för att skicka chattmeddelanden till en specifik kanal.
Uppdatera projektets .env-fil med värden från din Microsoft Entra ID-appregistrering.

Översikt över Microsoft Cloud-scenario

Skapa en Appregistrering för Microsoft Entra-ID

Gå till Azure Portal och välj Microsoft Entra-ID.
Välj Hantera -->Appregistreringar följt av + Ny registrering.
Fyll i information om det nya appregistreringsformuläret enligt nedan och välj Registrera:
- Namn: microsoft-graph-app
- Kontotyper som stöds: Konton i valfri organisationskatalog (Alla Microsoft Entra-ID-klientorganisationer – multitenant)
- Omdirigerings-URI:
  - Välj Ensidesprogram (SPA) och ange http://localhost:4200 i fältet Omdirigerings-URI .
- Välj Registrera för att skapa appregistreringen.

Välj Översikt på resursmenyn och kopiera Application (client) ID värdet till Urklipp.

Uppdatera projektets .env-fil

Öppna .env-filen i redigeringsprogrammet och tilldela Application (client) ID värdet till ENTRAID_CLIENT_ID.
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
```
Om du vill aktivera möjligheten att skicka ett meddelande från appen till en Teams-kanal loggar du in på Microsoft Teams med ditt Microsoft 365 dev-klientkonto (detta nämns i förhandsreplikerna för självstudien).
När du har loggat in expanderar du ett team och hittar en kanal som du vill skicka meddelanden till från appen. Du kan till exempel välja företagsteamet och kanalen Allmänt (eller vilket team/kanal du vill använda).
I teamrubriken klickar du på de tre punkterna (...) och väljer Hämta länk till teamet.
I länken som visas i popup-fönstret är team-ID:t strängen med bokstäver och siffror efter team/. I länken "https://teams.microsoft.com/l/team/19%3ae9b9.../"är till exempel team-ID:t 19%3ae9b9... upp till följande / tecken.
Kopiera team-ID:t och tilldela det till TEAM_ID i .env-filen .
I kanalrubriken klickar du på de tre punkterna (...) och väljer Hämta länk till kanal.
I länken som visas i popup-fönstret är kanal-ID:t strängen med bokstäver och siffror efter channel/. I länken "https://teams.microsoft.com/l/channel/19%3aQK02.../"är kanal-ID:t till exempel 19%3aQK02... upp till följande / tecken.
Kopiera kanal-ID:t och tilldela det till CHANNEL_ID i .env-filen .
Spara env-filen innan du fortsätter.

Starta/starta om programmet och API-servrarna

Utför något av följande steg baserat på de övningar som du har slutfört fram till den här punkten:

Om du startade databasen, API-servern och webbservern i en tidigare övning måste du stoppa API-servern och webbservern och starta om dem för att hämta filändringarna i .env . Du kan låta databasen köras.

Leta upp terminalfönstren som kör API-servern och webbservern och tryck på CTRL + C för att stoppa dem. Starta dem igen genom att npm start skriva i varje terminalfönster och trycka på Retur. Fortsätt till nästa övning.
Om du inte har startat databasen, API-servern och webbservern ännu utför du följande steg:
1. I följande steg skapar du tre terminalfönster i Visual Studio Code.
2. Högerklicka på .env-filen i Visual Studio Code-fillistan och välj Öppna i integrerad terminal. Kontrollera att terminalen finns i roten av projektet – openai-acs-msgraph – innan du fortsätter.
3. Välj något av följande alternativ för att starta PostgreSQL-databasen:
  - Om du har Docker Desktop installerat och körs kör du docker-compose up i terminalfönstret och trycker på Retur.
  - Om du har Podman med podman-compose installerat och körs kör podman-compose up du i terminalfönstret och trycker på Retur.
  - Kör följande kommando i terminalfönstret om du vill köra PostgreSQL-containern direkt med antingen Docker Desktop, Podman, nerdctl eller någon annan containerkörning som du har installerat:
    - Mac, Linux eller Windows-undersystem för 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 med 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. När databascontainern startar trycker du på + ikonen i verktygsfältet i Visual Studio Code-terminalen för att skapa ett andra terminalfönster.
5. cdi mappen server/typescript och kör följande kommandon för att installera beroendena och starta API-servern.
  - npm install
  - npm start
6. Tryck på + ikonen igen i verktygsfältet i Visual Studio Code-terminalen för att skapa ett tredje terminalfönster.
7. cdi klientmappen och kör följande kommandon för att installera beroendena och starta webbservern.
  - npm install
  - npm start
8. En webbläsare startas och du tas till http://localhost:4200.

Organisationsdata: Logga in en användare och hämta en åtkomsttoken

51 minuter kvar

Användarna måste autentisera med Microsoft Entra-ID för att Microsoft Graph ska få åtkomst till organisationsdata. I den här övningen får du se hur Komponenten för Microsoft Graph Toolkit mgt-login kan användas för att autentisera användare och hämta en åtkomsttoken. Åtkomsttoken kan sedan användas för att göra anrop till Microsoft Graph.

Kommentar

Om du inte har använt Microsoft Graph tidigare kan du lära dig mer om det i utbildningsvägen Grunderna i Microsoft Graph.

I den här övningen kommer du att:

Lär dig hur du associerar en Microsoft Entra-ID-app med Microsoft Graph Toolkit för att autentisera användare och hämta organisationsdata.
Lär dig mer om omfattningens betydelse.
Lär dig hur Microsoft Graph Toolkits mgt-login-komponent kan användas för att autentisera användare och hämta en åtkomsttoken.

I föregående övning skapade du en appregistrering i Microsoft Entra-ID och startade programservern och API-servern. Du har också uppdaterat följande värden i .env filen (TEAM_ID och CHANNEL_ID är valfria):
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Kontrollera att du har slutfört föregående övning innan du fortsätter.
Gå tillbaka till webbläsaren (http://localhost:4200) väljer du Logga in i rubriken och loggar in med ett administratörsanvändarkonto från din Microsoft 365 Developer-klientorganisation.

Dricks

Logga in med ditt administratörskonto för Microsoft 365-utvecklarens klientorganisation. Du kan visa andra användare i utvecklarklientorganisationen genom att gå till Administrationscenter för Microsoft 365.
Om du loggar in på programmet för första gången uppmanas du att godkänna de behörigheter som begärs av programmet. Du får lära dig mer om dessa behörigheter (kallas även "omfång") i nästa avsnitt när du utforskar koden. Välj Acceptera för att fortsätta.
När du har loggat in bör du se namnet på användaren som visas i rubriken.

Nu när du har loggat in ska vi titta på koden som används för att logga in på användaren och hämta en åtkomsttoken och en användarprofil. Du får lära dig mer om webbkomponenten mgt-login som ingår i Microsoft Graph Toolkit.

Dricks

Om du använder Visual Studio Code kan du öppna filer direkt genom att välja:

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

Skriv sedan namnet på den fil som du vill öppna.

Öppna klienten/package.json och observera att paketen @microsoft/mgt och @microsoft/mgt-components ingår i beroendena. Paketet @microsoft/mgt innehåller MSAL-providerfunktioner (Microsoft Authentication Library) och webbkomponenter som mgt-login och andra som kan användas för att logga in användare och hämta och visa organisationsdata.
Öppna klienten/src/main.ts och lägg märke till följande importer från @microsoft/mgt-components paketet. De importerade symbolerna används för att registrera de Microsoft Graph Toolkit-komponenter som används i programmet.
```
import { registerMgtLoginComponent, registerMgtSearchResultsComponent, registerMgtPersonComponent,  } from '@microsoft/mgt-components';
```
Rulla längst ned i filen och notera följande kod:
```
registerMgtLoginComponent();
registerMgtSearchResultsComponent();
registerMgtPersonComponent();
```
Den här koden registrerar webbkomponenterna mgt-login, mgt-search-resultsoch mgt-person och gör att de kan användas i programmet.
Om du vill använda komponenten mgt-login för att logga in användare måste Microsoft Entra ID-appens klient-ID (lagras i .env-filen som ENTRAID_CLIENT_ID) refereras till och användas.

Öppna graph.service.ts och leta upp init() funktionen. Den fullständiga sökvägen till filen är client/src/app/core/graph.service.ts. Följande import och kod visas:

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

Den här koden skapar ett nytt Msal2Provider objekt som skickar Microsoft Entra-ID-klient-ID:t från din appregistrering och scopes som appen begär åtkomst för. scopes Används för att begära åtkomst till Microsoft Graph-resurser som appen kommer åt. När objektet Msal2Provider har skapats tilldelas det objektet Providers.globalProvider , som används av Microsoft Graph Toolkit-komponenter för att hämta data från Microsoft Graph.

Öppna header.component.html i redigeringsprogrammet och leta upp komponenten mgt-login . Den fullständiga sökvägen till filen är client/src/app/header/header.component.html.
```
@if (this.featureFlags.microsoft365Enabled) {
    <mgt-login class="mgt-dark" (loginCompleted)="loginCompleted()"></mgt-login>
}
```
Komponenten mgt-login aktiverar användarinloggning och ger åtkomst till en token som används med Microsoft Graph. Vid lyckad inloggning loginCompleted utlöses händelsen, som anropar loginCompleted() funktionen. Även om mgt-login används i en Angular-komponent i det här exemplet är den kompatibel med alla webbprogram.

Visningen av komponenten mgt-login beror på värdet featureFlags.microsoft365Enabled som anges till true. Den här anpassade flaggan söker efter förekomsten av ENTRAID_CLIENT_ID miljövariabeln för att bekräfta att programmet är korrekt konfigurerat och kan autentisera mot Microsoft Entra-ID. Flaggan läggs till för att hantera fall där användarna väljer att endast slutföra AI- eller kommunikationsövningarna i självstudien, i stället för att följa hela sekvensen med övningar.
Öppna header.component.ts och leta upp loginCompleted funktionen. Den här funktionen anropas när loginCompleted händelsen genereras och hanterar hämtning av den inloggade användarens profil med .Providers.globalProvider
```
async loginCompleted() {
    const me = await Providers.globalProvider.graph.client.api('me').get();
    this.userLoggedIn.emit(me);
}
```
I det här exemplet görs ett anrop till Microsoft Graph me API för att hämta användarens profil (me representerar den aktuella inloggade användaren). Kodsatsen this.userLoggedIn.emit(me) genererar en händelse från komponenten för att skicka profildata till den överordnade komponenten. Den överordnade komponenten är app.component.ts fil i det här fallet, som är rotkomponenten för programmet.

Mer information om komponenten mgt-login finns i dokumentationen för Microsoft Graph Toolkit .
Nu när du har loggat in på programmet ska vi titta på hur organisationsdata kan hämtas.

Organisationsdata: Hämta filer, chattar och skicka meddelanden till Teams

41 minuter kvar

I dagens digitala miljö arbetar användarna med en mängd olika organisationsdata, inklusive e-postmeddelanden, chattar, filer, kalenderhändelser med mera. Detta kan leda till frekventa kontextväxlingar – växling mellan uppgifter eller program – som kan störa fokus och minska produktiviteten. En användare som arbetar med ett projekt kan till exempel behöva växla från sitt aktuella program till Outlook för att hitta viktig information i ett e-postmeddelande eller växla till OneDrive för företag för att hitta en relaterad fil. Den här åtgärden fram och tillbaka stör fokus och slösar bort tid som skulle kunna spenderas bättre på den aktuella uppgiften.

För att förbättra effektiviteten kan du integrera organisationsdata direkt i de program som användarna använder varje dag. Genom att ta in organisationsdata i dina program kan användarna komma åt och hantera information mer sömlöst, minimera kontextskiftningar och förbättra produktiviteten. Dessutom ger den här integreringen värdefulla insikter och sammanhang som gör det möjligt för användare att fatta välgrundade beslut och arbeta mer effektivt.

I den här övningen kommer du att:

Lär dig hur webbkomponenten mgt-search-results i Microsoft Graph Toolkit kan användas för att söka efter filer.
Lär dig hur du anropar Microsoft Graph direkt för att hämta filer från OneDrive för företag och chattmeddelanden från Microsoft Teams.
Förstå hur du skickar chattmeddelanden till Microsoft Teams-kanaler med hjälp av Microsoft Graph.

Använda funktionen Organisationsdata

I en tidigare övning skapade du en appregistrering i Microsoft Entra-ID och startade programservern och API-servern. Du har också uppdaterat följande värden i .env filen.
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Kontrollera att du har slutfört föregående övning innan du fortsätter.
Gå tillbaka till webbläsaren (http://localhost:4200). Om du inte redan har loggat in väljer du Logga in i rubriken och loggar in med en användare från din Microsoft 365 Developer-klientorganisation.
Kommentar

Förutom att autentisera användaren hämtar webbkomponenten mgt-login även en åtkomsttoken som kan användas av Microsoft Graph för att komma åt filer, chattar, e-postmeddelanden, kalenderhändelser och andra organisationsdata. Åtkomsttoken innehåller de omfång (behörigheter) som Chat.ReadWrite, Files.Read.Alloch andra som du såg tidigare:
```
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']
});
```
Välj Visa relaterat innehåll för raden Adatum Corporation i datagrid. Detta gör att organisationsdata som filer, chattar, e-postmeddelanden och kalenderhändelser hämtas med hjälp av Microsoft Graph. När data har lästs in visas de under datagrid i ett gränssnitt med flikar. Det är viktigt att nämna att du kanske inte ser några data just nu eftersom du inte har lagt till några filer, chattar, e-postmeddelanden eller kalenderhändelser för användaren i microsoft 365-utvecklarklientorganisationen ännu. Nu ska vi åtgärda det i nästa steg.
Din Microsoft 365-klientorganisation kanske inte har några relaterade organisationsdata för Adatum Corporation i det här skedet. Om du vill lägga till exempeldata utför du minst en av följande åtgärder:
- Lägg till filer genom att besöka https://onedrive.com och logga in med dina autentiseringsuppgifter för Microsoft 365 Developer-klientorganisationen.
  - Välj Mina filer i det vänstra navigeringsfältet.
  - Välj + Lägg till ny och sedan Mappuppladdning från menyn.
  - Välj mappen openai-acs-msgraph/customer documents från projektet som du klonade.
- Lägg till chattmeddelanden och kalenderhändelser genom att besöka https://teams.microsoft.com och logga in med dina autentiseringsuppgifter för Microsoft 365 Developer-klientorganisationen.
  - Välj Teams i det vänstra navigeringsfältet.
  - Välj ett team och en kanal.
  - Välj Starta ett inlägg.
  - Ange Ny order för Adatum Corporation för ämnet och eventuell ytterligare text som du vill lägga till i meddelandetexten. Välj knappen Publicera.
    
    Lägg gärna till ytterligare chattmeddelanden som nämner andra företag som används i programmet, till exempel Adventure Works Cycles, Contoso Pharmaceuticals och Tailwind Traders.
  - Välj Kalender i det vänstra navigeringsfältet.
  - Välj Nytt möte.
  - Ange "Meet with Adatum Corporation about project schedule" (Möte med Adatum Corporation om projektschema) för rubriken och brödtexten.
  - Välj Spara.
- Lägg till e-postmeddelanden genom att besöka https://outlook.com och logga in med dina autentiseringsuppgifter för Microsoft 365 Developer-klientorganisationen.
  - Välj Ny e-post.
  - Ange din personliga e-postadress i fältet Till .
  - Ange Ny beställning för Adatum Corporation för ämnet och allt du vill ha för brödtexten.
  - Välj Skicka.
Gå tillbaka till programmet i webbläsaren och uppdatera sidan. Välj Visa relaterat innehåll igen för raden Adatum Corporation . Du bör nu se data som visas på flikarna beroende på vilka uppgifter du utförde i föregående steg.
Nu ska vi utforska koden som möjliggör funktionen för organisationsdata i programmet. För att hämta data använder klientdelen av programmet den åtkomsttoken som hämtades av komponenten mgt-login som du tittade på tidigare för att göra anrop till Microsoft Graph-API:er.

Utforska sökkod för filer

Dricks

Om du använder Visual Studio Code kan du öppna filer direkt genom att välja:

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

Skriv sedan namnet på den fil som du vill öppna.

Vi börjar med att titta på hur fildata hämtas från OneDrive för företag. Öppna files.component.html och ta en stund att titta igenom koden. Den fullständiga sökvägen till filen är client/src/app/files/files.component.html.
Leta upp komponenten mgt-search-results och notera följande attribut:
```
<mgt-search-results 
    class="search-results" 
    entity-types="driveItem" 
    [queryString]="searchText"
    (dataChange)="dataChange($any($event))" 
/>
```
Komponenten mgt-search-results är en del av Microsoft Graph Toolkit och som namnet antyder används den för att visa sökresultat från Microsoft Graph. Komponenten använder följande funktioner i det här exemplet:
- Attributet class används för att ange att search-results CSS-klassen ska tillämpas på komponenten.
- Attributet entity-types används för att ange vilken typ av data som ska sökas efter. I det här fallet används driveItem värdet för att söka efter filer i OneDrive för företag.
- Attributet queryString används för att ange söktermen. I det här fallet är värdet bundet till egenskapen searchText som skickas till filkomponenten när användaren väljer Visa relaterat innehåll för en rad i datagrid. Hakparenteserna runt queryString anger att egenskapen är bunden till searchText värdet.
- Händelsen dataChange utlöses när sökresultatet ändras. I det här fallet anropas en kundfunktion med namnet dataChange() i filkomponenten och händelsedata skickas till funktionen. Parentesen runt dataChange anger att händelsen är bunden till dataChange() funktionen.
- Eftersom ingen anpassad mall har angetts används den inbyggda mgt-search-results standardmallen för att visa sökresultaten.
Ett alternativ till att använda komponenter som mgt-search-results är att anropa Microsoft Graph-API:er direkt med hjälp av kod. Om du vill se hur det fungerar öppnar du filen graph.service.ts och letar upp searchFiles() funktionen. Den fullständiga sökvägen till filen är client/src/app/core/graph.service.ts.
- Du kommer att märka att en query parameter skickas till funktionen. Det här är söktermen som skickas när användaren väljer Visa relaterat innehåll för en rad i datagrid. Om ingen söktermer skickas returneras en tom matris.
```
async searchFiles(query: string) {
    const files: DriveItem[] = [];
    if (!query) return files;

    ...
}
```
- Ett filter skapas sedan som definierar vilken typ av sökning som ska utföras. I det här fallet söker koden efter filer i OneDrive för företag så driveItem används precis som du såg tidigare med komponentenmgt-search-results. Det här är samma sak som att skicka driveItem till entity-types komponenten mgt-search-results som du såg tidigare. Parametern query läggs sedan till i queryString filtret tillsammans med ContentType:Document.
```
const filter = {
    "requests": [
        {
            "entityTypes": [
                "driveItem"
            ],
            "query": {
                "queryString": `${query} AND ContentType:Document`
            }
        }
    ]
};
```
- Ett anrop görs sedan till /search/query Microsoft Graph API med hjälp av Providers.globalProvider.graph.client.api() funktionen . Objektet filter skickas till funktionen post() som skickar data till API:et.
```
const searchResults = await Providers.globalProvider.graph.client.api('/search/query').post(filter);
```
- Sökresultaten itereras sedan genom för att hitta hits. Var och hit en innehåller information om ett dokument som hittades. En egenskap med namnet resource innehåller dokumentmetadata och läggs till i matrisen files .
```
if (searchResults.value.length !== 0) {
    for (const hitContainer of searchResults.value[0].hitsContainers) {
        if (hitContainer.hits) {
            for (const hit of hitContainer.hits) {
                files.push(hit.resource);
            }
        }
    }
}
```
- Matrisen files returneras sedan till anroparen.
```
return files;
```
När du tittar igenom den här koden kan du se att webbkomponenten mgt-search-results som du utforskade tidigare gör mycket arbete åt dig och avsevärt minskar mängden kod du måste skriva! Det kan dock finnas scenarier där du vill anropa Microsoft Graph direkt för att få mer kontroll över de data som skickas till API:et eller hur resultatet bearbetas.
Öppna filen files.component.ts och leta upp search() funktionen. Den fullständiga sökvägen till filen är client/src/app/files/files.component.ts.

Även om brödtexten i den här funktionen kommenteras ut på grund av att komponenten mgt-search-results används, kan funktionen användas för att göra anropet till Microsoft Graph när användaren väljer Visa relaterat innehåll för en rad i datagrid. Funktionen search() anropar searchFiles() i graph.service.ts och skickar parametern query till den (namnet på företaget i det här exemplet). Resultatet av sökningen tilldelas sedan till komponentens data egenskap.
```
override async search(query: string) {
    this.data = await this.graphService.searchFiles(query);
}
```
Filkomponenten kan sedan använda data egenskapen för att visa sökresultaten. Du kan hantera detta med hjälp av anpassade HTML-bindningar eller med hjälp av en annan Microsoft Graph Toolkit-kontroll med namnet mgt-file-list. Här är ett exempel på hur du binder data egenskapen till en av komponentens egenskaper med namnet files och hanterar itemClick händelsen när användaren interagerar med en fil.
```
<mgt-file-list (itemClick)="itemClick($any($event))" [files]="data"></mgt-file-list>
```
Om du väljer att använda komponenten mgt-search-results som visades tidigare eller skriva anpassad kod för att anropa Microsoft Graph beror på ditt specifika scenario. I det här exemplet används komponenten mgt-search-results för att förenkla koden och minska mängden arbete som du måste utföra.

Utforska Teams sökkod för chattmeddelanden

Gå tillbaka för att graph.service.ts och leta upp searchChatMessages() funktionen. Du ser att den liknar den searchFiles() funktion som du tittade på tidigare.
- Den publicerar filterdata till Microsoft Graphs /search/query API och konverterar resultatet till en matris med objekt som har information om teamId, channelIdoch messageId som matchar söktermen.
- För att hämta Teams-kanalmeddelandena görs ett andra anrop till API:et /teams/${chat.teamId}/channels/${chat.channelId}/messages/${chat.messageId} teamIdoch , channelIdoch messageId skickas. Detta returnerar den fullständiga meddelandeinformationen.
- Ytterligare filtreringsuppgifter utförs och de resulterande meddelandena returneras från searchChatMessages() till anroparen.

Öppna filen chats.component.ts och leta upp search() funktionen. Den fullständiga sökvägen till filen är client/src/app/chats/chats.component.ts. Funktionen search() anropar searchChatMessages() i graph.service.ts och skickar parametern till den query .

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

Resultatet av sökningen tilldelas egenskapen för data komponenten och databindningen används för att iterera genom resultatmatrisen och återge data. I det här exemplet används en Angular Material-kortkomponent för att visa sökresultaten.

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

Visa Teams-chattar

Skicka ett meddelande till en Microsoft Teams-kanal

Förutom att söka efter Microsoft Teams chattmeddelanden tillåter programmet även en användare att skicka meddelanden till en Microsoft Teams-kanal. Detta kan göras genom att anropa slutpunkten för /teams/${teamId}/channels/${channelId}/messages Microsoft Graph.

I följande kod ser du att en URL skapas som innehåller teamId värdena och channelId . Miljövariabelvärden används för team-ID och kanal-ID i det här exemplet, men dessa värden kan hämtas dynamiskt och med hjälp av Microsoft Graph. Konstanten body innehåller meddelandet som ska skickas. En POST-begäran görs sedan och resultatet returneras till anroparen.

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

Genom att utnyttja den här typen av funktioner i Microsoft Graph kan du förbättra användarproduktiviteten genom att tillåta användare att interagera med Microsoft Teams direkt från det program som de redan använder.

Organisationsdata: Hämta e-postmeddelanden och kalenderhändelser

21 minuter kvar

I föregående övning lärde du dig att hämta filer från OneDrive för företag och chattar från Microsoft Teams med hjälp av Microsoft Graph och komponenten mgt-search-results från Microsoft Graph Toolkit. Du har också lärt dig hur du skickar meddelanden till Microsoft Teams-kanaler. I den här övningen får du lära dig hur du hämtar e-postmeddelanden och kalenderhändelser från Microsoft Graph och integrerar dem i programmet.

I den här övningen kommer du att:

Lär dig hur webbkomponenten mgt-search-results i Microsoft Graph Toolkit kan användas för att söka efter e-postmeddelanden och kalenderhändelser.
Lär dig hur du anpassar komponenten mgt-search-results för att återge sökresultat på ett anpassat sätt.
Lär dig hur du anropar Microsoft Graph direkt för att hämta e-postmeddelanden och kalenderhändelser.

Utforska sökkod för e-postmeddelanden

Dricks

Om du använder Visual Studio Code kan du öppna filer direkt genom att välja:

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

Skriv sedan namnet på den fil som du vill öppna.

I en tidigare övning skapade du en appregistrering i Microsoft Entra-ID och startade programservern och API-servern. Du har också uppdaterat följande värden i .env filen.
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Kontrollera att du har slutfört föregående övning innan du fortsätter.
Öppna emails.component.html och ta en stund att titta igenom koden. Den fullständiga sökvägen till filen är client/src/app/emails/emails.component.html.
Leta upp komponenten 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>
```
Det här exemplet på komponenten mgt-search-results konfigureras på samma sätt som du tittade på tidigare. Den enda skillnaden är att entity-types attributet är inställt message på som används för att söka efter e-postmeddelanden och att en tom mall tillhandahålls.
- Attributet class används för att ange att search-results CSS-klassen ska tillämpas på komponenten.
- Attributet entity-types används för att ange vilken typ av data som ska sökas efter. I det här fallet är messagevärdet .
- Attributet queryString används för att ange söktermen.
- Händelsen dataChange utlöses när sökresultatet ändras. E-postkomponentens funktion anropas, resultatet skickas dataChange() till den och en egenskap med namnet data uppdateras i komponenten.
- En tom mall definieras för komponenten. Den här typen av mall används normalt för att definiera hur sökresultaten ska återges. I det här scenariot uppmanar vi dock komponenten att inte återge några meddelandedata. I stället renderar vi data själva med hjälp av standarddatabindning (Angular används i det här fallet, men du kan använda vilket bibliotek/ramverk du vill).

Titta under komponenten mgt-search-results i emails.component.html för att hitta de databindningar som används för att återge e-postmeddelandena. Det här exemplet itererar genom data egenskapen och skriver ut e-postämnet, brödtextförhandsgranskningen och en länk för att visa det fullständiga e-postmeddelandet.

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

Visa e-postmeddelanden

Förutom att använda komponenten mgt-search-results för att hämta meddelanden tillhandahåller Microsoft Graph flera API:er som även kan användas för att söka efter e-postmeddelanden. Det /search/query API som du såg tidigare kan säkert användas, men ett enklare alternativ är API:et messages .
Om du vill se hur du anropar det här API:et searchEmailMessages() går du tillbaka till graph.service.ts och letar upp funktionen. Den skapar en URL som kan användas för att anropa messages slutpunkten för Microsoft Graph och tilldelar query värdet till parametern $search . Koden gör sedan en GET-begäran och returnerar resultatet till anroparen. Operatorn $search söker query automatiskt efter värdet i ämnes-, brödtext- och avsändarfälten.
```
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;
}
```
E-postkomponenten som finns i emails.component.ts anropar searchEmailMessages() och visar resultatet i användargränssnittet.
```
override async search(query: string) {
    this.data = await this.graphService.searchEmailMessages(query);
}
```

Utforska sökkod för kalenderhändelser

Du kan också söka efter kalenderhändelser med hjälp av komponenten mgt-search-results . Den kan hantera rendering av resultaten åt dig, men du kan också definiera din egen mall som du ser senare i den här övningen.
Öppna calendar-events.component.html och ta en stund att titta igenom koden. Den fullständiga sökvägen till filen är client/src/app/calendar-events/calendar-events.component.html. Du ser att det liknar de filer och e-postkomponenter som du tittade på tidigare.
```
<mgt-search-results 
    class="search-results" 
    entity-types="event" 
    [queryString]="searchText"
    (dataChange)="dataChange($any($event))">
    <template data-type="result-event"></template>
</mgt-search-results>
```
Det här exemplet på komponenten mgt-search-results har konfigurerats på samma sätt som de som du tittade på tidigare. Den enda skillnaden är att entity-types attributet är inställt event på som används för att söka efter kalenderhändelser och att en tom mall tillhandahålls.
- Attributet class används för att ange att search-results CSS-klassen ska tillämpas på komponenten.
- Attributet entity-types används för att ange vilken typ av data som ska sökas efter. I det här fallet är eventvärdet .
- Attributet queryString används för att ange söktermen.
- Händelsen dataChange utlöses när sökresultatet ändras. Kalenderhändelsekomponentens funktion anropas, resultatet skickas dataChange() till den och en egenskap med namnet data uppdateras i komponenten.
- En tom mall definieras för komponenten. I det här scenariot uppmanar vi komponenten att inte återge några data. I stället renderar vi data själva med hjälp av standarddatabindning.

Direkt under komponenten mgt-search-results i calendar-events.component.html hittar du de databindningar som används för att återge kalenderhändelserna. Det här exemplet itererar genom data egenskapen och skriver ut startdatum, tid och ämne för händelsen. Anpassade funktioner som ingår i komponenten, till exempel dayFromDateTime() och timeRangeFromEvent() anropas för att formatera data korrekt. HTML-bindningarna innehåller också en länk för att visa kalenderhändelsen i Outlook och platsen för händelsen om en har angetts.

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

Förutom att söka efter kalenderhändelser med hjälp av API:et search/query tillhandahåller Microsoft Graph även ett events API som även kan användas för att söka efter kalenderhändelser. searchCalendarEvents() Leta upp funktionen i graph.service.ts.
Funktionen searchCalendarEvents() skapar start- och slutdatum/tid-värden som används för att definiera tidsperioden för sökning. Den skapar sedan en URL som kan användas för att anropa events slutpunkten för Microsoft Graph och innehåller parametern query och variablerna start- och slutdatum/tid. En GET-begäran görs sedan och resultatet returneras till anroparen.
```
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;
}
```
- Här är en uppdelning av url:en som har skapats:
  - Delen /me/events av URL:en används för att ange att händelserna för den inloggade användaren ska hämtas.
  - Parametrarna startdatetime och enddatetime används för att definiera tidsperioden för sökning. I det här fallet returnerar sökningen händelser som startar inom de närmaste 7 dagarna.
  - Frågeparametern $filter används för att filtrera resultatet efter query värdet (det företagsnamn som valts från datagrid i det här fallet). Funktionen contains() används för query att leta efter värdet i subject egenskapen för kalenderhändelsen.
  - Frågeparametern $orderby används för att sortera resultatet efter start/dateTime egenskapen.
När den url har skapats görs en GET-begäran till Microsoft Graph-API:et med hjälp av url värdet för och resultaten returneras till anroparen.
Precis som med de tidigare komponenterna anropar komponenten calendar-events (calendar-events.component.ts fil) och visar search() resultatet.
```
override async search(query: string) {
    this.data = await this.graphService.searchCalendarEvents(query);
}
```
Kommentar

Du kan även göra Microsoft Graph-anrop från ett anpassat API eller ett program på serversidan. Visa följande självstudie för att se ett exempel på hur du anropar ett Microsoft Graph-API från en Azure-funktion.
Nu har du sett exempel på hur du använder Microsoft Graph för att hämta filer, chattar, e-postmeddelanden och kalenderhändelser. Samma begrepp kan även tillämpas på andra Microsoft Graph-API:er. Du kan till exempel använda API:et för Microsoft Graph-användare för att söka efter användare i din organisation. Du kan också använda API:et för Microsoft Graph-grupper för att söka efter grupper i din organisation. Du kan visa den fullständiga listan över Microsoft Graph-API:er i dokumentationen.

Dela via

Integrera OpenAI-, kommunikations- och organisationsdatafunktioner i en branschspecifik app

Vad du ska skapa i den här självstudien

Välj ditt eget äventyr

Förutsättningar

Microsoft Cloud Technologies som används i den här självstudien

Klona projektet

Klona GitHub-lagringsplatsen och skapa en .env fil

AI: Skapa en Azure OpenAI-resurs och distribuera en modell

Skapa en Azure OpenAI-tjänstresurs

Uppdatera projektets .env fil

Starta Application Services

AI: Naturligt språk till SQL

Använda funktionen Naturligt språk till SQL

Utforska naturligt språk till SQL Code

AI: Generera slutföranden

Använda ai-slutförandefunktionen

Utforska koden för AI-slutförande

AI: Azure OpenAI på dina data

Lägga till en anpassad datakälla i Azure AI Studio

Använda din anpassade datakälla i chattlekplatsen

Använda funktionen Bring Your Own Data i programmet

Utforska koden

Kommunikation: Skapa en Azure Communication Services-resurs

Skapa en Azure Communication Services-resurs

Aktivera funktioner för telefonsamtal och SMS

Ansluta en e-postdomän

.env Uppdatera filen

Starta/starta om programmet och API-servrarna

Kommunikation: Ringa ett telefonsamtal

Använda telefonsamtalsfunktionen

Utforska telefonsamtalskoden

Kommunikation: Skicka e-post och SMS

Använda e-post- och SMS-funktionerna

Utforska e-postkoden

Utforska SMS-koden

Organisationsdata: Skapa en Appregistrering för Microsoft Entra-ID

Skapa en Appregistrering för Microsoft Entra-ID

Uppdatera projektets .env-fil

Starta/starta om programmet och API-servrarna

Organisationsdata: Logga in en användare och hämta en åtkomsttoken

Använda inloggningsfunktionen

Utforska inloggningskoden

Organisationsdata: Hämta filer, chattar och skicka meddelanden till Teams

Använda funktionen Organisationsdata

Utforska sökkod för filer

Utforska Teams sökkod för chattmeddelanden

Skicka ett meddelande till en Microsoft Teams-kanal

Organisationsdata: Hämta e-postmeddelanden och kalenderhändelser

Utforska sökkod för e-postmeddelanden

Utforska sökkod för kalenderhändelser

Grattis!

Du har slutfört den här självstudien

Rensa Azure-resurser

Nästa steg

Dokumentation

Träningsinnehåll

Feedback

Klona GitHub-lagringsplatsen och skapa en `.env` fil

Uppdatera projektets `.env` fil

`.env` Uppdatera filen