Integrace funkcí OpenAI, komunikace a organizačních dat do obchodní aplikace

Článek
Developer (Středně pokročilý)
136 min do dokončení

Úroveň: Zprostředkující

V tomto kurzu se dozvíte, jak je možné integrovat Azure OpenAI, Azure Communication Services a Microsoft Graph/Microsoft Graph Toolkit do obchodní aplikace( LOB), která zvyšuje produktivitu uživatelů, zvyšuje uživatelské prostředí a rozšiřuje možnosti obchodních aplikací na vyšší úroveň. Mezi klíčové funkce v aplikaci patří:

AI: Umožňuje uživatelům klást otázky v přirozeném jazyce a převádět odpovědi na SQL, které se dají použít k dotazování databáze, umožnit uživatelům definovat pravidla, která se dají použít k automatickému generování e-mailů a sms zpráv a zjistit, jak se dají použít k načítání dat z vlastních zdrojů dat. Pro tyto funkce se používá Azure OpenAI.
Komunikace: Povolte telefonní hovory v aplikaci zákazníkům a funkcím e-mailu/SMS pomocí služeb Azure Communication Services.
Data organizace: Stažení souvisejících dat organizace, která uživatelé můžou potřebovat (dokumenty, chaty, e-maily, události kalendáře) při práci se zákazníky, aby se vyhnuli přepínání kontextu. Poskytnutí přístupu k tomuto typu dat organizace snižuje potřebu, aby uživatel přešel na Outlook, Teams, OneDrive, další vlastní aplikace, telefon atd. vzhledem k tomu, že konkrétní data a funkce, které potřebují, jsou poskytovány přímo v aplikaci. Pro tuto funkci se používají sady Microsoft Graph a Microsoft Graph Toolkit.

Aplikace je jednoduchá aplikace pro správu zákazníků, která umožňuje uživatelům spravovat zákazníky a související data. Skládá se z front-endu vytvořeného pomocí TypeScriptu, který volá back-endová rozhraní API pro načítání dat, interakci s funkcemi AI, odesílání e-mailů a SMS zpráv a načítání dat organizace. Tady je přehled aplikačního řešení, které si projdete v tomto kurzu:

Přehled scénáře Microsoft Cloudu

Tento kurz vás provede procesem nastavení požadovaných prostředků Azure a Microsoftu 365. Provede vás také kódem, který se používá k implementaci funkcí AI, komunikace a dat organizace. I když nebudete muset kopírovat a vkládat kód, některá cvičení budou obsahovat úpravy kódu, abyste vyzkoušeli různé scénáře.

Co vytvoříte v tomto kurzu

Volba vlastního dobrodružství

Celý kurz můžete dokončit od začátku do konce nebo dokončit konkrétní témata, která vás zajímají. Kurz je rozdělený do následujících témat:

Naklonujte cvičení projektu (povinné cvičení).
Cvičení AI: Vytvořte prostředek Azure OpenAI a použijte ho k převodu přirozeného jazyka na SQL, generování e-mailových a SMS zpráv a práci s vlastními daty a dokumenty.
Komunikační cvičení: Vytvořte prostředek služby Azure Communication Services a použijte ho k volání z aplikace a odesílání e-mailových a SMS zpráv.
Cvičení s daty organizace: Vytvoření registrace aplikace Microsoft Entra ID, aby bylo možné k ověřování a načítání dat organizace do aplikace použít Microsoft Graph a Microsoft Graph Toolkit.

Zvolte si vlastní dobrodružství. Dokončete celý kurz nebo vyberte konkrétní oblasti témat.

Požadavky

Uzel – Pro tento projekt se použije uzel 20+ a npm 10 nebo novější.
git
Visual Studio Code (i když se doporučuje Visual Studio Code , můžete použít libovolný editor).
Předplatné Azure
Tenant pro vývojáře Microsoftu 365
Docker Desktop nebo jiný modul runtime kontejneru kompatibilní s OCI (Open Container Initiative), jako je Podman nebo nerdctl schopný spustit kontejner.

Cloudové technologie Microsoftu používané v tomto kurzu

Azure Communication Services
Azure OpenAI Service
Microsoft Entra ID
Microsoft Graph
Sada nástrojů pro Microsoft Graph

Klonování projektu

132 min zbývá

Projekt kódu použitý v tomto kurzu je k dispozici na adrese https://github.com/microsoft/MicrosoftCloud. Úložiště projektu zahrnuje kód na straně klienta i serverový kód potřebný ke spuštění projektu, který umožňuje prozkoumat integrované funkce související s umělou inteligencí (AI), komunikací a daty organizace. Kromě toho projekt slouží jako zdroj, který vás provede začleněním podobných funkcí do vlastních aplikací.

V tomto cvičení:

Naklonujte úložiště GitHub.
Přidejte do projektu soubor .env a aktualizujte ho.

Než budete pokračovat, ujistěte se, že máte nainstalované a nakonfigurované všechny požadavky, jak je popsáno v části Požadavky tohoto kurzu.

Naklonujte úložiště GitHub a vytvořte `.env` soubor.

Spuštěním následujícího příkazu naklonujte do počítače úložiště Microsoft Cloud GitHub.
```
git clone https://github.com/microsoft/MicrosoftCloud
```
Otevřete složku MicrosoftCloud/samples/openai-acs-msgraph v editoru Visual Studio Code.

Poznámka:

I když v tomto kurzu použijeme Visual Studio Code, můžete k práci s ukázkovým projektem použít libovolný editor kódu.
Všimněte si následujících složek a souborů:
- klient: Kód aplikace na straně klienta.
- server: Kód rozhraní API na straně serveru.
- docker-compose.yml: Používá se ke spuštění místní databáze PostgreSQL.
Přejmenujte soubor .env.example v kořenovém adresáři projektu na .env.

Otevřete soubor .env a chvíli se podívejte na klíče, které jsou zahrnuté:

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=

Aktualizujte následující hodnoty v souboru .env. Tyto hodnoty bude server rozhraní API používat k připojení k místní databázi PostgreSQL.
```
POSTGRES_USER=web
POSTGRES_PASSWORD=web-password
```
Teď, když máte projekt na místě, vyzkoušejte některé z funkcí aplikace a zjistěte, jak jsou sestavené. Pokud chcete pokračovat nebo přejít na konkrétní cvičení pomocí obsahu, vyberte níže uvedené tlačítko Další.

AI: Vytvoření prostředku Azure OpenAI a nasazení modelu

127 min zbývá

Pokud chcete ve svých aplikacích začít používat Azure OpenAI, musíte vytvořit službu Azure OpenAI a nasadit model, který se dá použít k provádění úloh, jako je převod přirozeného jazyka na SQL, generování obsahu e-mailů a zpráv SMS a další.

V tomto cvičení:

Vytvořte prostředek služby Azure OpenAI.
Nasazení modelu
Aktualizujte soubor .env hodnotami z prostředku služby Azure OpenAI.

Přehled scénáře Microsoft Cloudu

Vytvoření prostředku služby Azure OpenAI

Navštivte web Azure Portal v prohlížeči a přihlaste se.
Do vyhledávacího panelu v horní části stránky portálu zadejte openai a z možností, které se zobrazí, vyberte Azure OpenAI.
Na panelu nástrojů vyberte Vytvořit .

Poznámka:

I když se tento kurz zaměřuje na Azure OpenAI, pokud máte klíč rozhraní API OpenAI a chcete ho použít, můžete tuto část přeskočit a přejít přímo do části Aktualizovat soubor .env projektu níže. Přiřaďte klíč rozhraní API OpenAI do OPENAI_API_KEY souboru .env (můžete ignorovat jakékoli další .env pokyny související s OpenAI).
Modely Azure OpenAI jsou dostupné v konkrétních oblastech. V dokumentu dostupnosti modelu Azure OpenAI se dozvíte, které oblasti podporují model gpt-4o používaný v tomto kurzu.
Proveďte následující úlohy:
- Vyberte své předplatné Azure.
- Vyberte skupinu prostředků, která se má použít (v případě potřeby vytvořte novou).
- Vyberte oblast, ve které je model gpt-4o podporovaný na základě dokumentu, na který jste se podívali dříve.
- Zadejte název prostředku. Musí se jednat o jedinečnou hodnotu.
- Vyberte cenovou úroveň Standard S0 .
Vyberte Další , dokud se nedostanete na obrazovku Zkontrolovat a odeslat . Vyberte Vytvořit.
Jakmile se prostředek Azure OpenAI vytvoří, přejděte na něj a vyberte Správa prostředků -->Klíče a koncový bod.
Vyhledejte hodnoty KEY 1 a Endpoint. Obě hodnoty použijete v další části, takže je zkopírujte do místního souboru.
Vyberte Správa prostředků –> nasazení modelu.
Výběrem tlačítka Spravovat nasazení přejděte do azure OpenAI Studia.
Na panelu nástrojů vyberte Nasadit model -->Deploy base model.
V seznamu modelů vyberte gpt-4o a vyberte Potvrdit.

Poznámka:

Azure OpenAI podporuje několik různých typů modelů. Každý model lze použít ke zpracování různých scénářů.
Zobrazí se následující dialogové okno. Chvíli se podívejte na zadané výchozí hodnoty.
Změňte hodnotu Tokens per Minute Rate Limit (thousands) na 100 TISÍC. To vám umožní provádět další požadavky na model a vyhnout se dosažení limitu rychlosti při provádění následujících kroků.
Vyberte Nasadit.
Po nasazení modelu vyberte Playgrounds -->Chat.
V rozevíracím seznamu Nasazení by se měl zobrazit model gpt-4o .
Chvíli si přečtěte zadaný text systémové zprávy . To říká modelu, jak s ním uživatel pracuje.
Vyhledejte textové pole v oblasti chatu a zadejte souhrn toho, co je generativní AI a jak se dá použít. Výběrem klávesy Enter odešlete zprávu do modelu a vygenerujte odpověď.
Experimentujte s dalšími výzvami a odpověďmi. Zadejte například krátkou historii o hlavním městě Francie a všimněte si vygenerované odpovědi.

Aktualizace souboru projektu `.env`

Vraťte se do editoru .env Visual Studio Code a otevřete soubor v kořenovém adresáři projektu.
Zkopírujte hodnotu KEY 1 z prostředku Azure OpenAI a přiřaďte ji do OPENAI_API_KEY souboru .env umístěného v kořenové složce openai-acs-msgraph:
```
OPENAI_API_KEY=<KEY_1_VALUE>
```
Zkopírujte hodnotu *Koncový bod a přiřaďte ji do OPENAI_ENDPOINT souboru .env. / Odeberte znak z konce hodnoty, pokud je k dispozici.
```
OPENAI_ENDPOINT=<ENDPOINT_VALUE>
```
Poznámka:

Uvidíte, že hodnoty pro OPENAI_MODEL a OPENAI_API_VERSION jsou už nastavené v souboru .env . Hodnota modelu je nastavená na gpt-4o , která odpovídá názvu nasazení modelu, který jste vytvořili dříve v tomto cvičení. Verze rozhraní API je nastavená na podporovanou hodnotu definovanou v referenční dokumentaci k Azure OpenAI.
Uložte soubor .env.

Spuštění aplikačních služeb

Je čas spustit aplikační služby, včetně databáze, serveru API a webového serveru.

V následujících krocích vytvoříte tři okna terminálu v editoru Visual Studio Code.
Klikněte pravým tlačítkem myši na soubor .env v seznamu souborů editoru Visual Studio Code a vyberte Otevřít v integrovaném terminálu. Než budete pokračovat, ujistěte se, že je váš terminál v kořenovém adresáři projektu – openai-acs-msgraph .
Výběrem jedné z následujících možností spusťte databázi PostgreSQL:
- Pokud máte nainstalovaný a spuštěný Docker Desktop , spusťte docker-compose up ho v okně terminálu a stiskněte Enter.
- Pokud máte podman s nainstalovaným a spuštěným podman-compose , spusťte podman-compose up v okně terminálu a stiskněte Enter.
- Pokud chcete kontejner PostgreSQL spustit přímo pomocí Docker Desktopu, Podmanu, nerdctl nebo jiného nainstalovaného modulu runtime kontejneru, spusťte v okně terminálu následující příkaz:
  - Mac, Linux nebo Subsystém Windows pro 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 s PowerShellem:
```
[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
```
Jakmile se kontejner databáze spustí, stisknutím + ikony na panelu nástrojů Terminálu editoru Visual Studio Code vytvořte druhé okno terminálu.
cddo složky server/typescript a spuštěním následujících příkazů nainstalujte závislosti a spusťte server rozhraní API.
- npm install
- npm start
+ Dalším stisknutím ikony na panelu nástrojů Terminálu editoru Visual Studio Code vytvořte třetí okno terminálu.
cddo složky klienta a spuštěním následujících příkazů nainstalujte závislosti a spusťte webový server.
- npm install
- npm start
Spustí se prohlížeč a budete přesměrováni na http://localhost:4200.

AI: Přirozený jazyk do SQL

122 min zbývá

Citace "Jen proto, že nemůžete neznamená, že byste měli" je užitečným průvodcem při úvahách o možnostech umělé inteligence. Funkce Přirozeného jazyka SQL pro Azure OpenAI například umožňuje uživatelům vytvářet databázové dotazy v prosté angličtině, což může být výkonný nástroj pro zvýšení produktivity. Výkon ale neznamená vždy vhodné ani bezpečné. V tomto cvičení si ukážeme, jak tuto funkci umělé inteligence používat, a zároveň probereme důležité aspekty, které je potřeba vzít v úvahu, než se rozhodnete ji implementovat.

Tady je příklad dotazu v přirozeném jazyce, který se dá použít k načtení dat z databáze:

Get the the total revenue for all companies in London.

Při správných výzev Azure OpenAI převede tento dotaz na SQL, který se dá použít k vrácení výsledků z databáze. V důsledku toho můžou uživatelé, včetně obchodních analytiků, obchodních analytiků a vedoucích pracovníků, snadněji načítat cenné informace z databází bez omezení syntaxe SQL nebo spoléhat se na omezené datovégridy a filtry. Tento zjednodušený přístup může zvýšit produktivitu tím, že eliminuje potřebu uživatelů hledat pomoc od technických odborníků.

Toto cvičení poskytuje výchozí bod, který vám pomůže pochopit, jak funguje přirozený jazyk SQL, seznámíte se s některými důležitými aspekty, začnete přemýšlet o výhodách a nevýhodách a ukážeme vám kód, který vám pomůže začít.

V tomto cvičení:

K převodu přirozeného jazyka na SQL použijte výzvy GPT.
Experimentujte s různými výzvami GPT.
Použijte vygenerovaný SQL k dotazování databáze PostgreSQL spuštěné dříve.
Vrátí výsledky dotazu z PostgreSQL a zobrazí je v prohlížeči.

Začněme experimentováním s různými výzvami GPT, které je možné použít k převodu přirozeného jazyka na SQL.

Použití funkce Přirozeného jazyka k SQL

V předchozím cvičení jste spustili databázi, rozhraní API a aplikaci. Aktualizovali jste také .env soubor. Pokud jste tyto kroky nedokončili, před pokračováním postupujte podle pokynů na konci cvičení.
Vraťte se do prohlížeče (http://localhost:4200) a vyhledejte část Vlastní dotaz na stránce pod datovou mřížkou. Všimněte si, že už je zahrnutá ukázková hodnota dotazu: Získejte celkové výnosy pro všechny objednávky. Seskupte podle společnosti a zahrňte město.
Vyberte tlačítko Spustit dotaz. Tím předáte dotaz přirozeného jazyka uživatele do Azure OpenAI, který ho převede na SQL. Dotaz SQL se pak použije k dotazování databáze a vrátí případné výsledky.

Spusťte následující vlastní dotaz:

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

Prohlédněte si okno terminálu se serverem rozhraní API v editoru Visual Studio Code a všimněte si, že se zobrazí dotaz SQL vrácený z Azure OpenAI. Data JSON používají rozhraní API na straně serveru k dotazování databáze PostgreSQL. Všechny řetězcové hodnoty zahrnuté v dotazu se přidají jako hodnoty parametrů, aby se zabránilo útokům prostřednictvím injektáže SQL:
```
{ 
    "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"] 
}
```
Vraťte se do prohlížeče a výběrem možnosti Obnovit data znovu zobrazte všechny zákazníky v datagridu.

Zkoumání přirozeného jazyka do kódu SQL

Tip

Pokud používáte Visual Studio Code, můžete soubory otevřít přímo tak, že vyberete:

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

Potom zadejte název souboru, který chcete otevřít.

Poznámka:

Cílem tohoto cvičení je ukázat, co je možné v přirozeném jazyce s funkcemi SQL a ukázat, jak ho začít používat. Jak už bylo zmíněno dříve, je důležité prodiskutovat, jestli je tento typ AI vhodný pro vaši organizaci, než budete pokračovat v jakékoli implementaci. Je také nezbytné naplánovat správná pravidla výzvy a bezpečnostní opatření databáze, aby se zabránilo neoprávněnému přístupu a ochraně citlivých dat.

Teď, když jste viděli funkci přirozeného jazyka SQL v akci, pojďme se podívat, jak se implementuje.

Otevřete soubor serveru nebo apiRoutes.ts a vyhledejte trasugenerateSql. Tuto trasu rozhraní API volá aplikace na straně klienta spuštěná v prohlížeči a používá se k vygenerování SQL z dotazu v přirozeném jazyce. Po načtení dotazu SQL se použije k dotazování databáze a vrácení výsledků.

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

Všimněte si následujících funkcí na generateSql trase:

Načte hodnotu dotazu uživatele a req.body.prompt přiřadí ji k proměnné s názvem userPrompt. Tato hodnota se použije v příkazovém řádku GPT.
Volá funkci pro převod přirozeného getSQLFromNLP() jazyka na SQL.
Předá vygenerovaný SQL funkci s názvem queryDb , která spustí dotaz SQL a vrátí výsledky z databáze.

Otevřete soubor serveru nebo openAI.ts v editoru getSQLFromNLP() a vyhledejte funkci. Tato funkce je volána trasou a slouží k převodu generatesql přirozeného jazyka na 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;
}

Do userPrompt funkce se předá parametr. Hodnota userPrompt je dotaz v přirozeném jazyce zadaný uživatelem v prohlížeči.
A systemPrompt definuje typ pomocníka AI, který se má použít, a pravidla, která by se měla dodržovat. To pomáhá Azure OpenAI pochopit strukturu databáze, jaká pravidla se mají použít, a jak vrátit vygenerovaný dotaz a parametry SQL.
Volá se funkce callOpenAI() a systemPrompt userPrompt hodnoty se jí předají.
Výsledky jsou kontrolovány, aby se zajistilo, že do vygenerovaného dotazu SQL nejsou zahrnuté žádné zakázané hodnoty. Pokud jsou nalezeny zakázané hodnoty, dotaz SQL je nastaven na prázdný řetězec.

Pojďme si projít výzvu systému podrobněji:

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

Typ pomocníka AI, který se má použít, je definován. V tomto případě se jedná o přirozený jazyk robota SQL.
Názvy tabulek a sloupce v databázi jsou definovány. Schéma vysoké úrovně, které je součástí výzvy, najdete v souboru server/db.schema a vypadá takto.
```
- customers (id, company, city, email)
- orders (id, customer_id, date, total)
- order_items (id, order_id, product_id, quantity, price)
- reviews (id, customer_id, review, date, comment)
```
Tip

Můžete zvážit vytvoření zobrazení jen pro čtení, která obsahují pouze data, která uživatelé mohou dotazovat pomocí přirozeného jazyka do SQL.
Pravidlo je definováno pro převod libovolných řetězcových hodnot na parametrizovanou hodnotu dotazu, aby se zabránilo útokům prostřednictvím injektáže SQL.
Pravidlo je definováno tak, aby vždy vrátilo objekt JSON s dotazem SQL a hodnotami parametrů.
Zobrazí se ukázkové výzvy uživatele a očekávané hodnoty dotazu a parametrů SQL. To se označuje jako učení s několika snímky. I když jsou LLM vytrénované na velkých objemech dat, je možné je přizpůsobit novým úlohám pouze s několika příklady. Alternativním přístupem je učení s nulovým snímkem, kde není k dispozici žádný příklad a očekává se, že model vygeneruje správné hodnoty dotazu a parametrů SQL.

Funkce getSQLFromNLP() odešle systém a uživatele výzvu k funkci s názvem callOpenAI() , která se nachází také v souboru server/openAI.ts . Funkce callOpenAI() určuje, jestli se má volat služba Azure OpenAI nebo služba OpenAI kontrolou proměnných prostředí. Pokud je klíč, koncový bod a model k dispozici v proměnných prostředí, volá se Azure OpenAI, jinak se volá 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);
}
```
Poznámka:

I když se v tomto kurzu zaměříme na Azure OpenAI, pokud do souboru .env zadáte OPENAI_API_KEY jenom hodnotu, aplikace místo toho použije OpenAI. Pokud se rozhodnete použít OpenAI místo Azure OpenAI, může se v některých případech zobrazit jiné výsledky.
getAzureOpenAICompletion() Vyhledejte funkci.
```
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;
}
```
Tato funkce provede následující:
- Parametry:
  - systemPrompt, userPrompta temperature jsou hlavními parametry.
    - systemPrompt: Informuje model Azure OpenAI o své roli a o pravidlech, která se mají dodržovat.
    - userPrompt: Obsahuje informace poskytnuté uživatelem, například vstup v přirozeném jazyce nebo pravidla pro generování výstupu.
    - temperature: Určuje úroveň kreativity odpovědi modelu. Vyšší hodnota vede k kreativním výstupům.
- Generování dokončení:
  - Funkce volá pomocí createAzureOpenAICompletion() systemPromptfunkce , userPrompta temperature vygeneruje dokončení.
  - Extrahuje obsah z první volby v dokončení a oříznou všechny nadbytečné prázdné znaky.
  - Pokud obsah obsahuje struktury podobné formátu JSON (označené přítomností { a }), extrahuje obsah JSON.
- Protokolování a návratová hodnota:
  - Funkce protokoluje výstup Azure OpenAI do konzoly.
  - Vrátí zpracovaný obsah jako řetězec.
createAzureOpenAICompletion() Vyhledejte funkci.
```
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.`);
        }
    }
}
```
Tato funkce provede následující:
- Parametry:
  - systemPrompt, userPrompta temperature jsou hlavními parametry, které jsou popsány dříve.
  - Volitelný dataSources parametr podporuje funkci Azure Bring Your Own Data, která se bude probírat dále v tomto kurzu.
- Kontrola proměnných prostředí:
  - Funkce ověří přítomnost základních proměnných prostředí a vyvolá chybu, pokud nějaké chybí.
- Objekt konfigurace:
  - Objekt config se vytvoří pomocí hodnot ze .env souboru (OPENAI_API_KEY, OPENAI_ENDPOINT, OPENAI_API_VERSION, OPENAI_MODEL). Tyto hodnoty se používají k vytvoření adresy URL pro volání Azure OpenAI.
- Instance AzureOpenAI:
  - AzureOpenAI Instance je vytvořena pomocí objektuconfig. Symbol AzureOpenAI je součástí openai balíčku, který by se měl importovat v horní části souboru.
- Generování dokončení:
  - Funkce chat.completions.create() se volá s následujícími vlastnostmi:
    - model: Určuje model GPT (např. gpt-4o, gpt-3.5-turbo) definovaný v .env souboru.
    - max_tokens: Definuje maximální počet tokenů pro dokončení.
    - temperature: Nastaví teplotu vzorkování. Vyšší hodnoty (např. 0,9) přinášejí kreativní odpovědi, zatímco nižší hodnoty (např. 0) vytvářejí deterministické odpovědi.
    - response_format: Definuje formát odpovědi. Tady je nastavená tak, aby vracela objekt JSON. Další podrobnosti o režimu JSON najdete v referenční dokumentaci k Azure OpenAI.
    - messages: Obsahuje zprávy pro generování dokončování chatu. Tento příklad obsahuje dvě zprávy: jednu ze systému (definování chování a pravidel) a jednu od uživatele (obsahující text výzvy).
- Návratová hodnota:
  - Funkce vrátí objekt dokončení vygenerovaný službou Azure OpenAI.

Zakomentujte následující řádky funkce getSQLFromNLP() :

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

Uložte openAI.ts. Server rozhraní API automaticky znovu sestaví kód TypeScriptu a restartuje server.
Vraťte se do prohlížeče a zadejte do vstupu Vlastní dotaz všechny názvy tabulek z databáze. Vyberte Spustit dotaz. Zobrazují se názvy tabulek?
Vraťte se k getSQLFromNLP() funkci na serveru nebo openAI.ts a do části příkazového řádku systému přidejte následující pravidlo Rules: a pak soubor uložte.
```
- Do not allow the SELECT query to return table names, function names, or procedure names.
```
Vraťte se do prohlížeče a proveďte následující úlohy:
- Do vstupu Vlastní dotaz zadejte Vybrat všechny názvy tabulek z databáze. Vyberte Spustit dotaz. Zobrazují se názvy tabulek?
- Zadejte příkaz Vybrat všechny názvy funkcí z databáze. Do vstupu vlastního dotazu a znovu vyberte Spustit dotaz . Zobrazují se názvy funkcí?
OTÁZKA: Bude model vždy dodržovat pravidla, která definujete v příkazovém řádku?

ODPOVĚĎ: Ne! Je důležité si uvědomit, že modely OpenAI můžou při příležitosti vrátit neočekávané výsledky, které nemusí odpovídat definovaným pravidlům. V kódu je důležité to naplánovat.
Vraťte se na server nebo openAI.ts a vyhledejte isProhibitedQuery() funkci. Toto je příklad kódu po zpracování, který lze spustit po spuštění Azure OpenAI vrátí výsledky. Všimněte si, že vlastnost nastaví sql na prázdný řetězec, pokud jsou v generovaném dotazu SQL vrácena zakázaná klíčová slova. Tím se zajistí, že pokud se z Azure OpenAI vrátí neočekávané výsledky, dotaz SQL se na databázi nespustí.
```
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));
}
```
Poznámka:

Je důležité si uvědomit, že se jedná pouze o ukázkový kód. Pokud se rozhodnete převést přirozený jazyk na SQL, můžou existovat další zakázaná klíčová slova potřebná k pokrytí konkrétních případů použití. Jedná se o funkci, kterou musíte naplánovat a používat s opatrností, abyste zajistili, že se vrátí a spustí pouze platné dotazy SQL v databázi. Kromě zakázaných klíčových slov budete také muset zohlástit zabezpečení.
Vraťte se na server/openAI.ts a odkomentujte následující kód funkce getSQLFromNLP() . Uložte soubor.
```
if (isProhibitedQuery(queryData.sql)) { 
    queryData.sql = '';
}
```

Odeberte následující pravidlo a systemPrompt soubor uložte.

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

Vraťte se do prohlížeče, znovu zadejte Výběr všech názvů tabulek z databáze do vstupu Vlastní dotaz a vyberte tlačítko Spustit dotaz .
Zobrazují se nějaké výsledky tabulky? I bez pravidla isProhibitedQuery() zakáže kód následného zpracování tento typ dotazu spouštět v databázi.
Jak jsme už zmínili dříve, integrace přirozeného jazyka do SQL v obchodních aplikacích může být pro uživatele docela přínosná, ale přináší vlastní sadu aspektů.

Výhody:
- Uživatelsky přívětivost: Díky této funkci je interakce databáze přístupnější uživatelům bez technických odborných znalostí, což snižuje potřebu znalostí SQL a potenciálně urychlit operace.
- Vyšší produktivita: Obchodní analytici, obchodní analytici, vedoucí pracovníci a další uživatelé, kteří nejsou technickými uživateli, mohou načítat cenné informace z databází, aniž by museli spoléhat na technické odborníky, a tím zvýšit efektivitu.
- Široká aplikace: Pomocí pokročilých jazykových modelů lze aplikace navrhnout tak, aby vyhovovaly široké škále uživatelů a případů použití.
Aspekty:
- Zabezpečení: Jedním z největších obav je zabezpečení. Pokud uživatelé můžou pracovat s databázemi pomocí přirozeného jazyka, musí existovat robustní bezpečnostní opatření, která brání neoprávněnému přístupu nebo škodlivým dotazům. Můžete zvážit implementaci režimu jen pro čtení, abyste uživatelům zabránili v úpravách dat.
- Ochrana osobních údajů: Určitá data můžou být citlivá a neměla by být snadno přístupná, takže budete muset zajistit, aby byla zajištěna správná ochrana a uživatelská oprávnění.
- Přesnost: Zpracování přirozeného jazyka se výrazně zlepšilo, ale není dokonalé. Nesprávná interpretace uživatelských dotazů může vést k nepřesným výsledkům nebo neočekávanému chování. Budete muset naplánovat způsob zpracování neočekávaných výsledků.
- Efektivita: Neexistují žádné záruky, že SQL vrácený z dotazu v přirozeném jazyce bude efektivní. V některých případech se můžou vyžadovat další volání Azure OpenAI, pokud pravidla následného zpracování detekují problémy s dotazy SQL.
- Školení a přizpůsobení uživatelů: Uživatelé musí být natrénovaní tak, aby správně formulovali své dotazy. I když je to jednodušší než učení SQL, stále může existovat křivka učení.
Několik posledních bodů, které je potřeba zvážit před přechodem na další cvičení:
- Mějte na paměti, že tady platí "Jen proto, že to neznamená, že byste měli" použít. Před integrací přirozeného jazyka do sql do aplikace používejte extrémní opatrnost a pečlivé plánování. Je důležité pochopit potenciální rizika a naplánovat je.
- Než použijete tento typ technologie, proberte potenciální scénáře s týmem, správci databází, týmem zabezpečení, zúčastněnými stranami a všemi dalšími relevantními stranami, abyste měli jistotu, že je vhodná pro vaši organizaci. Je důležité prodiskutovat, jestli přirozený jazyk SQL splňuje požadavky na zabezpečení, ochranu osobních údajů a jakékoli další požadavky, které může mít vaše organizace.
- Zabezpečení by mělo být primárním zájmem a mělo by být součástí procesu plánování, vývoje a nasazení.
- I když může být přirozený jazyk SQL velmi výkonný, musí do něj přejít pečlivé plánování, aby se zajistilo, že výzvy mají požadovaná pravidla a že je zahrnuta funkce následného zpracování. Naplánujte si další čas na implementaci a otestování tohoto typu funkčnosti a pro scénáře, ve kterých se vrátí neočekávané výsledky.
- Zákazníci s Azure OpenAI získají možnosti zabezpečení Microsoft Azure a zároveň spouštět stejné modely jako OpenAI. Azure OpenAI nabízí privátní sítě, regionální dostupnost a zodpovědné filtrování obsahu AI. Přečtěte si další informace o datech, ochraně osobních údajů a zabezpečení pro službu Azure OpenAI.
Seznámili jste se s tím, jak pomocí Azure OpenAI převést přirozený jazyk na SQL a seznámit se s klady a nevýhodami implementace tohoto typu funkcí. V dalším cvičení se dozvíte, jak se dají e-maily a SMS zprávy vygenerovat pomocí Azure OpenAI.

AI: Generování dokončování

112 min zbývá

Kromě funkce SQL v přirozeném jazyce můžete také pomocí služby Azure OpenAI generovat e-maily a sms zprávy, které zlepšují produktivitu uživatelů a zjednodušují komunikační pracovní postupy. Díky využití možností generování jazyka Azure OpenAI můžou uživatelé definovat konkrétní pravidla, jako je "Objednávka je zpožděná 5 dnů", a systém automaticky vygeneruje kontextově odpovídající e-maily a ZPRÁVY SMS na základě těchto pravidel.

Tato funkce slouží jako rychlý start pro uživatele a poskytuje jim promyšleně vytvořenou šablonu zpráv, kterou si můžou snadno přizpůsobit před odesláním. Výsledkem je významné zkrácení času a úsilí potřebného k vytváření zpráv, což uživatelům umožňuje soustředit se na další důležité úkoly. Technologie generování jazyka Azure OpenAI je navíc možné integrovat do pracovních postupů automatizace, což systému umožňuje autonomní generování a odesílání zpráv v reakci na předdefinované triggery. Tato úroveň automatizace nejen urychluje komunikační procesy, ale také zajišťuje konzistentní a přesné zasílání zpráv v různých scénářích.

V tomto cvičení:

Experimentujte s různými výzvami.
Pomocí výzev vygenerujte dokončení pro e-mailové zprávy a zprávy SMS.
Prozkoumejte kód, který umožňuje dokončování AI.
Seznamte se s důležitostí přípravy výzvy a zahrnutím pravidel do výzev.

Začněme experimentováním s různými pravidly, která se dají použít k vygenerování e-mailových zpráv a zpráv SMS.

Použití funkce dokončování AI

V předchozím cvičení jste spustili databázi, rozhraní API a aplikaci. Aktualizovali jste také .env soubor. Pokud jste tyto kroky nedokončili, před pokračováním postupujte podle pokynů na konci cvičení.
Vraťte se do prohlížeče (http://localhost:4200) a vyberte Kontaktovat zákazníka na libovolném řádku v datovémgridu následovaný e-mailem nebo SMS zákazníkem a přejděte na obrazovku Generátor zpráv.
To používá Azure OpenAI k převodu pravidel zpráv, která definujete do e-mailových a SMS zpráv. Proveďte následující úlohy:
- Zadejte pravidlo, jako je Například Objednávka, je zpožděno 5 dnů do vstupu a vyberte tlačítko Generovat e-mail/SMS zprávy .
- Zobrazí se předmět a text vygenerovaný pro e-mail a krátká zpráva vygenerovaná pro SMS.
Poznámka:

Protože služba Azure Communication Services ještě není povolená, nebudete moct odesílat e-maily nebo zprávy SMS.
Zavřete dialogové okno e-mailu/SMS v prohlížeči. Teď, když jste tuto funkci viděli v akci, se pojďme podívat, jak je implementovaná.

Prozkoumání kódu dokončování AI

Tip

Pokud používáte Visual Studio Code, můžete soubory otevřít přímo tak, že vyberete:

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

Potom zadejte název souboru, který chcete otevřít.

Otevřete soubor serveru nebo apiRoutes.ts a vyhledejte trasucompleteEmailSmsMessages. Toto rozhraní API se volá front-endovou částí aplikace, když je vybráno tlačítko Generovat e-mail/SMS zprávy . Načte z textu hodnoty výzvy uživatele, společnosti a jména kontaktů a předá je completeEmailSMSMessages() funkci v souboru serveru nebo openAI.ts . Výsledky se pak vrátí klientovi.

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

Otevřete soubor serveru nebo openAI.ts a vyhledejte completeEmailSMSMessages() funkci.

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

Tato funkce má následující funkce:

systemPrompt slouží k definování, že je vyžadován pomocník s umělou inteligencí schopný generovat e-maily a zprávy SMS. Patří sem systemPrompt také:
- Pravidla pro asistenta, která mají následovat, řídí tón zpráv, počáteční a koncový formát, maximální délku zpráv SMS a další.
- Informace o datech, která by měla být zahrnuta v odpovědi – objekt JSON v tomto případě.
userPrompt slouží k definování pravidel a kontaktního jména, které by koncový uživatel chtěl zahrnout jako e-maily a zprávy SMS, jsou generovány. Pravidlo objednávky je zpožděno o 5 dnů , které jste zadali dříve, je součástí userPrompt.
Funkce volá callOpenAI() funkci, kterou jste prozkoumali dříve, a vygeneruje dokončení e-mailu a SMS.

Vraťte se do prohlížeče, aktualizujte stránku a vyberte Kontaktovat zákazníka na libovolném řádku následovaného e-mailem nebo SMS Zákazníkem a znovu se dostanete na obrazovku Generátor zpráv.
Do vstupu Generátor zpráv zadejte následující pravidla:
- Pořadí je před plánem.
- Řekněte zákazníkovi, aby si od nás už nic nezaobjednávejte, ale nechceme, aby si ho objednal.
Vyberte Vygenerovat e-mailové zprávy nebo zprávy SMS a poznamenejte si zprávu. Pravidlo All messages should have a friendly tone and never use inappropriate language. v příkazovém řádku systému přepisuje záporné pravidlo v příkazovém řádku uživatele.
Vraťte se na server nebo openAI.ts* v editoru a odeberte All messages should have a friendly tone and never use inappropriate language. pravidlo z výzvy completeEmailSMSMessages() ve funkci. Uložte soubor.
Vraťte se do generátoru zpráv e-mailu/SMS v prohlížeči a znovu spusťte stejná pravidla:
- Pořadí je před plánem.
- Řekněte zákazníkovi, aby si od nás už nic nezaobjednávejte, ale nechceme, aby si ho objednal.
Vyberte Vygenerovat e-mailové nebo SMS zprávy a všimněte si vrácené zprávy.
Co se v těchto scénářích děje? Při použití Azure OpenAI je možné použít filtrování obsahu, aby se zajistilo, že se vždy používá příslušný jazyk. Pokud používáte OpenAI, použije se pravidlo definované v příkazovém řádku systému k zajištění, že vrácená zpráva je vhodná.

Poznámka:

To ilustruje důležitost přípravy výzev se správnými informacemi a pravidly, aby se zajistilo vrácení správných výsledků. Další informace o tomto procesu najdete v úvodu do technické dokumentace.
Vrácení změn, které jste provedli systemPrompt v completeEmailSMSMessages()souboru, uložte soubor a znovu ho spusťte, ale použijte Order is ahead of schedule. pouze pravidlo (nezahrnujte záporné pravidlo). Tentokrát byste měli vidět e-maily a zprávy SMS, které se vrátily podle očekávání.
Několik posledních bodů, které je potřeba zvážit před přechodem na další cvičení:
- Je důležité mít ve smyčce člověka ke kontrole generovaných zpráv. V tomto příkladu dokončení Azure OpenAI vrátí navrhované e-maily a SMS zprávy, ale uživatel může tyto zprávy před odesláním přepsat. Pokud plánujete automatizovat e-maily, je důležité mít nějaký typ procesu kontroly člověka, aby se zajistilo, že schválené zprávy se odesílají. Zobrazit AI jako kopírovaný objekt, nikoli autopilot.
- Dokončení bude stejně dobré jako pravidla, která do výzvy přidáte. Proveďte čas na otestování výzev a vrácených dokončení. Zvažte použití toku výzvy k vytvoření komplexního řešení, které zjednodušuje vytváření prototypů, experimentování, iterování a nasazování aplikací AI. Pozvěte další účastníky projektu, aby si také zkontrolovali dokončení.
- Možná budete muset zahrnout kód po zpracování, aby se zajistilo správné zpracování neočekávaných výsledků.
- Pomocí systémových výzev můžete definovat pravidla a informace, které má asistent AI dodržovat. Pomocí výzvy uživatele definujte pravidla a informace, které chce koncový uživatel zahrnout do dokončování.

AI: Azure OpenAI na vašich datech

102 min zbývá

Integrace funkcí zpracování přirozeného jazyka Azure OpenAI (NLP) a dokončování nabízí významný potenciál pro zvýšení produktivity uživatelů. Díky využití vhodných výzev a pravidel může asistent umělé inteligence efektivně generovat různé formy komunikace, jako jsou e-mailové zprávy, zprávy SMS a další. Tato funkce vede ke zvýšení efektivity uživatelů a zjednodušených pracovních postupů.

I když je tato funkce sama o sobě velmi výkonná, můžou existovat případy, kdy uživatelé potřebují generovat dokončování na základě vlastních dat vaší společnosti. Můžete mít například kolekci návodů k produktům, které můžou být pro uživatele náročné, když pomáhají zákazníkům s problémy s instalací. Alternativně můžete udržovat komplexní sadu nejčastějších dotazů souvisejících s výhodami zdravotní péče, které můžou uživatelům vyžadovat čtení a získání odpovědí, které potřebují. V těchto případech a mnoha dalších vám služba Azure OpenAI umožňuje využít vlastní data ke generování dokončování, což zajišťuje přesnější odpověď na dotazy uživatelů a kontextově přesnější odpověď.

Tady je rychlý přehled toho, jak funkce Přineste si vlastní data funguje z dokumentace k Azure OpenAI.

Poznámka:

Jednou z klíčových funkcí Azure OpenAI pro vaše data je schopnost načítat a využívat data způsobem, který vylepšuje výstup modelu. Azure OpenAI na vašich datech společně s Azure AI Search určuje, jaká data se mají načítat z určeného zdroje dat na základě vstupu uživatele a poskytnuté historie konverzací. Tato data se pak rozšíří a znovu odešle jako výzvu k modelu OpenAI s připojenými informacemi k původní výzvě. I když se načtená data připojují k příkazovému řádku, výsledný vstup je stále zpracován modelem stejně jako jakákoli jiná výzva. Jakmile se data načtou a výzva se odešle do modelu, použije tento model tyto informace k dokončení.

V tomto cvičení:

Vytvoření vlastního zdroje dat pomocí nástroje Azure AI Studio
Nasaďte model vkládání pomocí azure AI Studia.
Nahrajte vlastní dokumenty.
Zahájení chatové relace v chatovacím hřišti pro experimentování s generováním dokončení na základě vašich vlastních dat.
Prozkoumejte kód, který používá Azure AI Search a Azure OpenAI k vygenerování dokončení na základě vašich vlastních dat.

Začněme nasazením modelu vložení a přidáním vlastního zdroje dat v Azure AI Studiu.

Přidání vlastního zdroje dat do azure AI Studia

Přejděte do Azure OpenAI Studia a přihlaste se pomocí přihlašovacích údajů, které mají přístup k vašemu prostředku Azure OpenAI.
V navigační nabídce vyberte Nasazení .
Vyberte Možnost Nasadit model -->Nasadit základní model na panelu nástrojů.
V seznamu modelů vyberte model pro vložení textu ada-002 a vyberte Potvrdit.
Vyberte následující možnosti:
- Název nasazení: text-embedding-ada-002
- Verze modelu: Výchozí
- Typ nasazení: Standard
- Nastavte hodnotu Tokens per Minute Rate Limit (thousands) na 120 tisíc.
- Filtr obsahu: DefaultV2
- Povolit dynamickou uvozovku: Povoleno
Vyberte tlačítko Nasadit.
Po vytvoření modelu v navigační nabídce vyberte Domovskou stránku a přejděte na úvodní obrazovku.
Na úvodní obrazovce vyhledejte dlaždici Přineste si vlastní data a vyberte Vyzkoušet.
Vyberte Přidat data a potom Přidejte zdroj dat.
V rozevíracím seznamu Vybrat zdroj dat vyberte Nahrát soubory.
V rozevíracím seznamu Vybrat prostředek úložiště objektů blob v Azure vyberte Vytvořit nový prostředek služby Azure Blob Storage.
V rozevíracím seznamu Předplatné vyberte své předplatné Azure.
V rozevíracím seznamu Vybrat prostředek úložiště objektů blob v Azure vyberte Vytvořit nový prostředek služby Azure Blob Storage.
Tím přejdete na web Azure Portal, kde můžete provádět následující úlohy:
- Zadejte jedinečný název účtu úložiště, například byodstorage[Vaše příjmení].
- Vyberte oblast, která je blízko vaší polohy.
- Vyberte Zkontrolovat a pak vytvořit.
Po vytvoření prostředku úložiště objektů blob se vraťte do dialogového okna Azure AI Studio a v rozevíracím seznamu Vyberte prostředek úložiště objektů blob vyberte nově vytvořený prostředek úložiště objektů blob. Pokud ji v seznamu nevidíte, vyberte ikonu aktualizace vedle rozevíracího seznamu.
Aby byl váš účet úložiště přístupný, musí být zapnuté sdílení prostředků mezi zdroji (CORS). V dialogovém okně Azure AI Studio vyberte Zapnout CORS .
V rozevíracím seznamu Vybrat prostředek Azure AI Search vyberte Vytvořit nový prostředek služby Azure AI Search.
Tím se vrátíte na web Azure Portal, kde můžete provádět následující úlohy:
- Zadejte jedinečný název prostředku AI Search, například byodsearch-[Vaše příjmení].
- Vyberte oblast, která je blízko vaší polohy.
- V části Cenová úroveň vyberte Změnit cenovou úroveň a pak vyberte Basic a pak Vyberte. Úroveň Free není podporovaná, takže na konci tohoto kurzu vyčistíte prostředek AI Search.
- Vyberte Zkontrolovat a pak vytvořit.
Po vytvoření prostředku AI Search přejděte na stránku Přehled prostředku a zkopírujte hodnotu Url do místního souboru.
V navigační nabídce vyberte Nastavení -->Keys .
Na stránce Řízení přístupu k rozhraní API vyberte Obě, pokud chcete službě povolit přístup pomocí spravované identity nebo pomocí klíče. Po zobrazení výzvy vyberte Ano .

Poznámka:

I když v tomto cvičení použijeme klíč rozhraní API, protože přidání přiřazení rolí může trvat až 10 minut, s trochou dalšího úsilí můžete povolit bezpečnější přístup ke službě spravované identitě přiřazené systémem.
V levé navigační nabídce vyberte Klíče a zkopírujte hodnotu primárního klíče správce do místního souboru. V pozdější části cvičení budete potřebovat adresu URL a hodnoty klíčů.
V navigační nabídce vyberte Nastavení --Sémantic> ranker a ujistěte se, že je vybraná možnost Free.

Poznámka:

Pokud chcete zkontrolovat, jestli je sémantický ranker dostupný v konkrétní oblasti, podívejte se na stránku Produkty dostupné podle oblastí na webu Azure a zjistěte, jestli je uvedená vaše oblast.
Vraťte se do dialogového okna Přidat data v Azure AI Studio a v rozevíracím seznamu Vyberte prostředek Azure AI Search vyberte nově vytvořený vyhledávací prostředek. Pokud ji v seznamu nevidíte, vyberte ikonu aktualizace vedle rozevíracího seznamu.
Zadejte hodnotu byod-search-index pro Hodnotu názvu indexu.
Zaškrtněte políčko Přidat vektorové vyhledávání do tohoto vyhledávacího prostředku .
V rozevíracím seznamu Vybrat model vložení vyberte model pro vložení ada-002 , který jste vytvořili dříve.
V dialogovém okně Nahrát soubory vyberte Vyhledat soubor.
Přejděte do složky dokumentů zákazníka projektu (nachází se v kořenovém adresáři projektu) a vyberte následující soubory:
- Instalační Instructions.docx clock A102
- Firemní FAQs.docx
Poznámka:

Tato funkce aktuálně podporuje následující formáty souborů pro vytváření místního indexu: .txt, .md, .html, .pdf, .docx a .pptx.
Vyberte Nahrát soubory. Soubory se nahrají do kontejneru fileupload-byod-search-index v prostředku úložiště objektů blob, který jste vytvořili dříve.
Výběrem možnosti Další přejdete do dialogového okna Správa dat.
V rozevíracím seznamu Typ hledání vyberte Hybridní a sémantický.

Poznámka:

Tato možnost poskytuje podporu pro hledání klíčových slov a vektorů. Jakmile se výsledky vrátí, použije se sekundární proces řazení na sadu výsledků pomocí modelů hlubokého učení, což zlepšuje relevanci vyhledávání pro uživatele. Další informace o sémantickém vyhledávání najdete v dokumentaci ke sémantickému vyhledávání ve službě Azure AI Search .
Ujistěte se, že je hodnota Vybrat velikost nastavená na 1024.
Vyberte Další.
Jako typ ověřování prostředků Azure vyberte klíč rozhraní API. Další informace o výběru správného typu ověřování najdete v dokumentaci k ověřování Azure AI Search.
Vyberte Další.
Zkontrolujte podrobnosti a vyberte Uložit a zavřít.
Po nahrání vlastních dat se data indexují a budou dostupná pro použití v chatovacím hřišti. Tento proces může trvat několik minut. Po dokončení pokračujte k další části.

Použití vlastního zdroje dat v chatovacím hřišti

V nástroji Azure OpenAI Studio vyhledejte část relace chatu na stránce a zadejte následující dotaz uživatele:
```
What safety rules are required to install a clock?
```
Po odeslání uživatelského dotazu by se měl zobrazit výsledek podobný následujícímu zobrazení:
Rozbalte oddíl 1 referencí v odpovědi chatu a všimněte si, že je uvedený soubor instalace Clock A102 Instructions.docx a že ho můžete vybrat pro zobrazení dokumentu.

Zadejte následující zprávu uživatele:

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

Měl by se zobrazit výsledek podobný následujícímu zobrazení:
Teď experimentujme s dokumentem Nejčastější dotazy společnosti. Do pole Dotazu uživatele zadejte následující text:
```
What is the company's policy on vacation time?
```
Měli byste vidět, že pro tuto žádost nebyly nalezeny žádné informace.
Do pole Dotazu uživatele zadejte následující text:
```
How should I handle refund requests?
```
Měl by se zobrazit výsledek podobný následujícímu zobrazení:
Rozbalte oddíl s 1 odkazy v odpovědi chatu a všimněte si, že je uvedený soubor FAQs.docx společnosti a že ho můžete vybrat, abyste dokument zobrazili.
Na panelu nástrojů chatovacího hřiště vyberte Zobrazit kód.
Všimněte si, že můžete přepínat mezi různými jazyky, zobrazit koncový bod a získat přístup ke klíči koncového bodu. Zavřete dialogové okno Vzorový kód.
Zapněte přepínač Zobrazit nezpracovaný JSON nad zprávami chatu. Všimněte si, že relace chatu začíná zprávou podobnou následující:
```
{
    "role": "system",
    "content": "You are an AI assistant that helps people find information."
}
```
Když jste teď vytvořili vlastní zdroj dat a experimentovali s ním v chatovacím hřišti, podívejme se, jak ho můžete použít v aplikaci projektu.

Použití funkce Přineste si vlastní data v aplikaci

Vraťte se k projektu ve VS Code a otevřete soubor .env . Aktualizujte následující hodnoty pomocí koncového bodu služby AI Services, klíče a názvu indexu. Zkopírovali jste koncový bod a klíč do místního souboru dříve v tomto cvičení.
```
AZURE_AI_SEARCH_ENDPOINT=<AI_SERVICES_ENDPOINT_VALUE>
AZURE_AI_SEARCH_KEY=<AI_SERVICES_KEY_VALUE>
AZURE_AI_SEARCH_INDEX=byod-search-index
```
V předchozím cvičení jste spustili databázi, rozhraní API a aplikaci. Aktualizovali jste také .env soubor. Pokud jste tyto kroky nedokončili, před pokračováním postupujte podle pokynů na konci předchozího cvičení.
Po načtení aplikace v prohlížeči vyberte ikonu nápovědy chatu v pravém horním rohu aplikace.
V dialogovém okně chatu by se měl zobrazit následující text:
```
How should I handle a company refund request?
```
Vyberte tlačítko Získat nápovědu. Měli byste vidět výsledky vrácené z dokumentu společnosti FAQs.docx , který jste nahráli dříve v nástroji Azure OpenAI Studio. Pokud chcete dokument přečíst, najdete ho ve složce dokumentů zákazníka v kořenovém adresáři projektu.
Změňte text na následující a vyberte tlačítko Získat nápovědu:
```
What safety rules are required to install a clock?
```
Měli byste vidět výsledky vrácené z instalačního Instructions.docx dokumentu Clock A102, který jste nahráli dříve v nástroji Azure OpenAI Studio. Tento dokument je také k dispozici ve složce dokumentů zákazníka v kořenovém adresáři projektu.

Zkoumání kódu

Tip

Pokud používáte Visual Studio Code, můžete soubory otevřít přímo tak, že vyberete:

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

Potom zadejte název souboru, který chcete otevřít.

Vraťte se ke zdrojovému kódu projektu v editoru Visual Studio Code.

Otevřete soubor serveru nebo apiRoutes.ts a vyhledejte trasucompleteBYOD. Toto rozhraní API se volá, když je v dialogovém okně Nápověda chatu vybráno tlačítko Získat nápovědu . Načte výzvu uživatele z textu požadavku a předá ji completeBYOD() funkci v souboru server/openAI.ts . Výsledky se pak vrátí klientovi.

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

Otevřete soubor serveru nebo openAI.ts a vyhledejte completeBYOD() funkci.
```
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);
}
```
Tato funkce má následující funkce:
- Parametr userPrompt obsahuje informace, které uživatel zadal do dialogového okna nápovědy chatu.
- systemPrompt proměnná definuje, že se použije asistent AI navržený tak, aby pomohl lidem najít informace.
- callOpenAI() se používá k volání rozhraní API Azure OpenAI a vrácení výsledků. Předává hodnoty systemPrompt a userPrompt také následující parametry:
  - temperature - Množství kreativity, která se má zahrnout do odpovědi. Uživatel potřebuje v tomto případě konzistentní (méně kreativní) odpovědi, takže hodnota je nastavená na 0.
  - useBYOD – Logická hodnota, která označuje, jestli se má použít AI Search spolu s Azure OpenAI. V tomto případě je nastavená tak true , aby se používala funkce vyhledávání AI.

Funkce callOpenAI() přijímá useBYOD parametr, který slouží k určení funkce OpenAI, která se má volat. V tomto případě se nastaví useBYOD tak true , aby getAzureOpenAIBYODCompletion() funkce byla volána.

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() Vyhledejte funkci na serveru nebo openAI.ts. Je to docela podobné getAzureOpenAICompletion() funkci, kterou jste prozkoumali dříve, ale zobrazuje se jako samostatná funkce, která zvýrazní několik klíčových rozdílů, které jsou jedinečné pro scénář Azure OpenAI pro vaše data, který je k dispozici v 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() ?? '';
}

Všimněte si následujících funkcí funkce getAzureOpenAIBYODCompletion() :

Vytvoří dataSources se vlastnost, která obsahuje prostředek keyendpointAI Search a index_name hodnoty přidané do .env souboru dříve v tomto cvičení.
Funkce createAzureOpenAICompletion() je volána pomocí systemPrompt, userPrompt, temperaturea dataSources hodnoty. Tato funkce se používá k volání rozhraní API Azure OpenAI a vrácení výsledků.
Po vrácení odpovědi se citace dokumentu zaprotokolují do konzoly. Obsah zprávy o dokončení se pak vrátí volajícímu.

Několik posledních bodů, které je potřeba zvážit před přechodem na další cvičení:
- Ukázková aplikace používá jeden index ve službě Azure AI Search. V Azure OpenAI můžete použít více indexů a zdrojů dat. Vlastnost dataSources ve getAzureOpenAIBYODCompletion() funkci lze podle potřeby aktualizovat tak, aby zahrnovala více zdrojů dat.
- Zabezpečení musí být pečlivě vyhodnoceno pomocí tohoto typu scénáře. Uživatelé by se neměli moct ptát a získávat výsledky z dokumentů, ke kterým nemají přístup.
Teď, když jste se seznámili s Azure OpenAI, výzvami, dokončováními a možnostmi použití vlastních dat, přejděme k dalšímu cvičení, kde se dozvíte, jak se dají komunikační funkce použít k vylepšení aplikace. Pokud chcete získat další informace o Azure OpenAI, podívejte se na školicí obsah začínáme se službou Azure OpenAI Service . Další informace o používání vlastních dat s Azure OpenAI najdete v dokumentaci k datům v Azure OpenAI.

Komunikace: Vytvoření prostředku Azure Communication Services

87 min zbývá

Efektivní komunikace je nezbytná pro úspěšné vlastní obchodní aplikace. Pomocí služby Azure Communication Services (ACS) můžete do svých aplikací přidávat funkce, jako jsou telefonní hovory, živý chat, hlasové hovory nebo videohovory a e-mailové zprávy a sms zprávy. Dříve jste se dozvěděli, jak Může Azure OpenAI generovat dokončení pro e-mailové a SMS zprávy. Teď se dozvíte, jak zprávy odeslat. ACS a OpenAI společně můžou vaše aplikace vylepšit zjednodušením komunikace, zlepšením interakcí a zvýšením produktivity firmy.

V tomto cvičení:

Vytvořte prostředek Azure Communication Services (ACS).
Přidejte bezplatné telefonní číslo s možnostmi volání a SMS.
Připojení e-mailové domény
Aktualizujte soubor .env projektu hodnotami z vašeho prostředku služby ACS.

Přehled scénáře Microsoft Cloudu

Vytvoření prostředku Azure Communication Services

Pokud jste to ještě neudělali, navštivte web Azure Portal v prohlížeči a přihlaste se.
Do vyhledávacího panelu v horní části stránky zadejte komunikační služby a z možností, které se zobrazí, vyberte Komunikační služby.
Na panelu nástrojů vyberte Vytvořit .
Proveďte následující úlohy:
- Vyberte své předplatné Azure.
- Vyberte skupinu prostředků, která se má použít (pokud neexistuje, vytvořte novou).
- Zadejte název prostředku služby ACS. Musí se jednat o jedinečnou hodnotu.
- Vyberte umístění dat.
Vyberte Zkontrolovat a vytvořit a pak vytvořit.
Úspěšně jste vytvořili nový prostředek Azure Communication Services. V dalším kroku povolíte možnosti telefonního volání a SMS. Připojíte také e-mailovou doménu k prostředku.

Povolení možností telefonního volání a SMS

Přidejte telefonní číslo a ujistěte se, že má telefonní číslo povolené možnosti volání. Toto telefonní číslo použijete k volání na telefon z aplikace.
- V nabídce Prostředek vyberte telefonní čísla a SMS -->Phone.
- Na panelu nástrojů vyberte + Získat (nebo vyberte tlačítko Získat číslo ) a zadejte následující informace:
  - Země nebo oblast: United States
  - Typ čísla: Toll-free
  Poznámka:
  
  K vytvoření bezplatného čísla se ve vašem předplatném Azure vyžaduje platební karta. Pokud nemáte kartu v souboru, můžete přeskočit přidání telefonního čísla a přejít do další části cvičení, která připojí e-mailovou doménu. Aplikaci můžete dál používat, ale nebudete moct zavolat na telefonní číslo.
  - Číslo: Vyberte Přidat do košíku pro jedno z uvedených telefonních čísel.
Vyberte Další, zkontrolujte podrobnosti o telefonním čísle a vyberte Koupit.

Poznámka:

Ověření sms pro bezplatná čísla je nyní povinné v USA a Kanadě. Pokud chcete povolit zasílání zpráv SMS, musíte po zakoupení telefonního čísla odeslat ověření. I když tento kurz neprojde tímto procesem, můžete v nabídce prostředků vybrat telefonie a SMS -->Regulační dokumenty a přidat požadovanou ověřovací dokumentaci.
Po vytvoření telefonního čísla ho vyberte, abyste se dostali na panel Funkce . Ujistěte se, že jsou nastavené následující hodnoty (měly by být nastavené ve výchozím nastavení):
- V části Volání vyberte Make calls.
- V části SMS vyberte Send and receive SMS.
- Zvolte Uložit.
Zkopírujte hodnotu telefonního čísla do souboru pro pozdější použití. Telefonní číslo by mělo dodržovat tento obecný vzor: +12345678900.

Připojení e-mailové domény

Při vytváření připojené e-mailové domény pro prostředek služby ACS proveďte následující úlohy, abyste mohli odesílat e-maily. Použije se k odesílání e-mailů z aplikace.
- V nabídce Prostředek vyberte E-mail -->Domains .
- Na panelu nástrojů vyberte Připojit doménu .
- Vyberte své předplatné a skupinu prostředků.
- V rozevíracím seznamu E-mailová služba vyberte Add an email service.
- Pojmenujte e-mailovou službu, například acs-demo-email-service.
- Vyberte Zkontrolovat a vytvořit a pak vytvořit.
- Po dokončení nasazení vyberte Go to resourcea vyberte 1-click add , pokud chcete přidat bezplatnou subdoménu Azure.
- Po přidání subdomény (nasazení bude chvíli trvat), vyberte ji.
- Jakmile budete na obrazovce AzureManagedDomain, vyberte v nabídce Prostředek e-mailové služby -->MailFrom adresy.
- Zkopírujte hodnotu MailFrom do souboru. Použijete ho později při aktualizaci souboru .env .
- Vraťte se k prostředku služby Azure Communication Services a v nabídce prostředků vyberte E-mail -->Domains .
- Vyberte Add domain a zadejte MailFrom hodnotu z předchozího kroku (ujistěte se, že jste vybrali správné předplatné, skupinu prostředků a e-mailovou službu). Vyberte tlačítko Connect.

`.env` Aktualizace souboru

Teď, když máte telefonní číslo ACS (s povoleným voláním a SMS) a e-mailovou doménu, aktualizujte v projektu následující klíče/hodnoty v souboru .env :
```
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_STRINGconnection string: Hodnota z oddílu Klíče vašeho prostředku služby ACS.
- ACS_PHONE_NUMBER: Přiřaďte k hodnotě ACS_PHONE_NUMBER číslo bezplatné linky.
- ACS_EMAIL_ADDRESS: Přiřaďte hodnotu e-mailové adresy MailTo.
- CUSTOMER_EMAIL_ADDRESS: Přiřaďte e-mailovou adresu, do které chcete e-mail poslat z aplikace (protože zákaznická data v databázi aplikace jsou jenom ukázková data). Můžete použít osobní e-mailovou adresu.
- CUSTOMER_PHONE_NUMBER: Budete muset zadat telefonní číslo založené na USA (od dnešního dne) kvůli dalšímu ověření, které je vyžadováno v jiných zemích pro odesílání sms zpráv. Pokud nemáte číslo založené na USA, můžete ho nechat prázdné.

Spuštění nebo restartování aplikačních serverů a serverů rozhraní API

Proveďte jeden z následujících kroků na základě cvičení, která jste do tohoto okamžiku dokončili:

Pokud jste databázi, server rozhraní API a webový server spustili v předchozím cvičení, musíte zastavit server rozhraní API a webový server a restartovat je, aby se změny souboru .env obnovily. Databázi můžete nechat spuštěnou.

Vyhledejte terminálová okna se serverem rozhraní API a webovým serverem a stisknutím kombinace kláves CTRL+C je zastavte. Začněte je znovu zadáním npm start do každého okna terminálu a stisknutím klávesy Enter. Pokračujte k dalšímu cvičení.
Pokud jste databázi, server rozhraní API a webový server ještě nezahajovali, proveďte následující kroky:
1. V následujících krocích vytvoříte tři okna terminálu v editoru Visual Studio Code.
2. Klikněte pravým tlačítkem myši na soubor .env v seznamu souborů editoru Visual Studio Code a vyberte Otevřít v integrovaném terminálu. Než budete pokračovat, ujistěte se, že je váš terminál v kořenovém adresáři projektu – openai-acs-msgraph .
3. Výběrem jedné z následujících možností spusťte databázi PostgreSQL:
  - Pokud máte nainstalovaný a spuštěný Docker Desktop , spusťte docker-compose up ho v okně terminálu a stiskněte Enter.
  - Pokud máte podman s nainstalovaným a spuštěným podman-compose , spusťte podman-compose up v okně terminálu a stiskněte Enter.
  - Pokud chcete kontejner PostgreSQL spustit přímo pomocí Docker Desktopu, Podmanu, nerdctl nebo jiného nainstalovaného modulu runtime kontejneru, spusťte v okně terminálu následující příkaz:
    - Mac, Linux nebo Subsystém Windows pro 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 s PowerShellem:
```
[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. Jakmile se kontejner databáze spustí, stisknutím + ikony na panelu nástrojů Terminálu editoru Visual Studio Code vytvořte druhé okno terminálu.
5. cddo složky server/typescript a spuštěním následujících příkazů nainstalujte závislosti a spusťte server rozhraní API.
  - npm install
  - npm start
6. + Dalším stisknutím ikony na panelu nástrojů Terminálu editoru Visual Studio Code vytvořte třetí okno terminálu.
7. cddo složky klienta a spuštěním následujících příkazů nainstalujte závislosti a spusťte webový server.
  - npm install
  - npm start
8. Spustí se prohlížeč a budete přesměrováni na http://localhost:4200.

Komunikace: Telefonní hovor

79 min zbývá

Integrace funkcí telefonního volání v Azure Communication Services do vlastní obchodní aplikace (LOB) nabízí podnikům a jejich uživatelům několik klíčových výhod:

Umožňuje bezproblémovou komunikaci mezi zaměstnanci, zákazníky a partnery v reálném čase přímo z obchodní aplikace a eliminuje nutnost přepínat mezi několika platformami nebo zařízeními.
Vylepšuje uživatelské prostředí a zlepšuje celkovou provozní efektivitu.
Usnadňuje rychlé řešení problémů, protože se uživatelé můžou rychle a snadno spojit s příslušnými týmy podpory nebo odborníky na danou problematiku.

V tomto cvičení:

Prozkoumejte funkci telefonního volání v aplikaci.
Projděte si kód a zjistěte, jak se sestavuje funkce telefonního volání.

Použití funkce telefonního volání

V předchozím cvičení jste vytvořili prostředek služby Azure Communication Services (ACS) a spustili databázi, webový server a server rozhraní API. Aktualizovali jste také následující hodnoty v souboru .env .
```
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>
```
Než budete pokračovat, ujistěte se, že jste dokončili předchozí cvičení .
Vraťte se do prohlížeče (http://localhost:4200), vyhledejte datagrid a v prvním řádku vyberte Kontaktovat zákazníka a potom zavolejte zákazníka.
Do záhlaví se přidá součást telefonního hovoru. Zadejte svoje telefonní číslo, na které chcete zavolat (ujistěte se, že začíná číslem + a obsahuje kód země) a vyberte Zavolat. Zobrazí se výzva, abyste povolili přístup k mikrofonu.
Výběrem možnosti Zavěsit hovor ukončíte. Výběrem možnosti Zavřít zavřete součást telefonního hovoru.

Seznámení s kódem telefonního volání

Tip

Pokud používáte Visual Studio Code, můžete soubory otevřít přímo tak, že vyberete:

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

Potom zadejte název souboru, který chcete otevřít.

Otevřete soubor customers-list.component.ts. Úplná cesta k souboru je client/src/app/customers-list/customers-list.component.ts.
Všimněte si, že openCallDialog() odešle CustomerCall zprávu a telefonní číslo zákazníka pomocí sběrnice událostí.
```
openCallDialog(data: Phone) {
    this.eventBus.emit({ name: Events.CustomerCall, value: data });
}
```
Poznámka:

Kód sběrnice událostí najdete v souboru eventbus.service.ts , pokud vás zajímají další informace. Úplná cesta k souboru je client/src/app/core/eventbus.service.ts.

Funkce komponenty ngOnInit() záhlaví se přihlásí k odběru CustomerCall události odeslané sběrnice událostí a zobrazí součást telefonního hovoru. Tento kód najdete v 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
        })
    );
}

Otevřete phone-call.component.ts. Udělejte si chvilku, než kód exporujete. Úplná cesta k souboru je klient/src/app/phone-call/phone-call.component.ts. Všimněte si následujících klíčových funkcí:
- Načte přístupový token služby Azure Communication Services voláním acsService.getAcsToken() funkce v ngOnInit();
- Přidá na stránku "telefonní číselník". Číselník můžete zobrazit kliknutím na vstup telefonního čísla v záhlaví.
- Spustí a ukončí volání pomocí startCall() funkcí a endCall() funkcí.
Než se podíváme na kód, který provádí telefonní hovor, pojďme se podívat, jak se přístupový token služby ACS načte a jak se vytvářejí objekty telefonního volání. ngOnInit() Vyhledejte funkci v 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);
            })
        );
    }
}
```
Tato funkce provádí následující akce:
- Načte ID uživatele ACS a přístupový token voláním acsService.getAcsToken() funkce.
- Po načtení přístupového tokenu kód provede následující akce:
  - Vytvoří novou instanci CallClient a AzureCommunicationTokenCredential použije přístupový token.
  - Vytvoří novou instanci CallAgent použití CallClient objektů a AzureCommunicationTokenCredential objektů. Později uvidíte, že CallAgent se používá ke spuštění a ukončení hovoru.
Otevřete acs.services.ts a vyhledejte getAcsToken() funkci. Úplná cesta k souboru je client/src/app/core/acs.service.ts. Funkce vytvoří požadavek HTTP GET na trasu /acstoken vystavenou serverem rozhraní API.
```
getAcsToken(): Observable<AcsUser> {
    return this.http.get<AcsUser>(this.apiUrl + 'acstoken')
    .pipe(
        catchError(this.handleError)
    );
}
```
Funkce serveru rozhraní API s názvem createACSToken() načte ID uživatele a přístupový token a vrátí ji klientovi. Najdete ho v souboru 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 };
}
```
Tato funkce provádí následující akce:
- Zkontroluje, jestli je k dispozici hodnota ACS connectionString . Pokud ne, vrátí objekt s prázdným userId a token.
- Vytvoří novou instanci CommunicationIdentityClient a předá connectionString jí hodnotu.
- Vytvoří nového uživatele a token pomocí tokenClient.createUserAndToken() oboru voip.
- Vrátí objekt obsahující hodnoty userId a token hodnoty.
Teď, když jste viděli, jak se id uživatele a token načítají, vraťte se k phone-call.component.ts funkci a vyhledejte ji startCall() .

Tato funkce se volá, když je v komponentě telefonního hovoru vybrána možnost Volání . Používá CallAgent objekt uvedený dříve ke spuštění volání. Funkce callAgent.startCall() přijme objekt představující číslo, které se má zavolat, a telefonní číslo služby ACS použité k volání.

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

Funkce endCall() se volá, když je v komponentě telefonního hovoru vybrána možnost Zavěsit .
```
endCall() {
    if (this.call) {
        this.call.hangUp({ forEveryone: true });
        this.call = undefined;
        this.inCall = false;
    }
    else {
        this.hangup.emit();
    }
}
```
Pokud probíhá volání, volá se call.hangUp() funkce pro ukončení volání. Pokud neprobíhá žádné volání, hangup událost se vygeneruje do nadřazené komponenty záhlaví a skryje komponentu telefonního hovoru.
Než přejdeme k dalšímu cvičení, pojďme se podívat na klíčové koncepty popsané v tomto cvičení:
- Id uživatele ACS a přístupový token se načítají ze serveru rozhraní API pomocí acsService.createUserAndToken() funkce.
- Token slouží k vytvoření objektu a CallAgent objektuCallClient.
- Objekt CallAgent se používá ke spuštění a ukončení volání voláním callAgent.startCall() a callAgent.hangUp() funkcí v uvedeném pořadí.
Teď, když jste se dozvěděli, jak se dají telefonní hovory integrovat do aplikace, přepneme náš fokus na používání služeb Azure Communication Services k odesílání e-mailů a SMS zpráv.

Komunikace: Odesílání e-mailů a SMS zpráv

69 min zbývá

Kromě telefonních hovorů můžou služby Azure Communication Services také posílat e-maily a SMS zprávy. To může být užitečné, když chcete poslat zprávu zákazníkovi nebo jinému uživateli přímo z aplikace.

V tomto cvičení:

Podívejte se, jak se dají e-maily a SMS zprávy odesílat z aplikace.
Projděte si kód a zjistěte, jak se implementují funkce e-mailu a SMS.

Používání funkcí e-mailu a SMS

V předchozím cvičení jste vytvořili prostředek služby Azure Communication Services (ACS) a spustili databázi, webový server a server rozhraní API. Aktualizovali jste také následující hodnoty v souboru .env .
```
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>
```
Než budete pokračovat, ujistěte se, že jste cvičení dokončili.
Vraťte se do prohlížeče (http://localhost:4200) a v prvním řádku vyberte Kontaktovat zákazníka následovaný e-mailem nebo sms zákazníkem .
Vyberte kartu E-mail/SMS a proveďte následující úlohy:
- Zadejte předmět e-mailu a text a vyberte tlačítko Odeslat e-mail.
- Zadejte zprávu SMS a vyberte tlačítko Odeslat SMS .
Poznámka:

Ověření sms pro bezplatná čísla je nyní povinné v USA a Kanadě. Pokud chcete povolit zasílání zpráv SMS, musíte po zakoupení telefonního čísla odeslat ověření. I když tento kurz neprojde tímto procesem, můžete na webu Azure Portal vybrat telefonie a SMS –->Regulační dokumenty z prostředku služby Azure Communication Services a přidat požadovanou dokumentaci k ověření.
Zkontrolujte, že jste dostali e-maily a zprávy SMS. Funkce SMS bude fungovat pouze v případě, že jste odeslali regulační dokumenty uvedené v předchozí poznámce. Připomínáme, že e-mailová zpráva se odešle na hodnotu definovanou pro CUSTOMER_EMAIL_ADDRESS a zpráva SMS se odešle na hodnotu definovanou CUSTOMER_PHONE_NUMBER v souboru .env . Pokud jste nemohli zadat telefonní číslo založené na USA, které byste mohli použít pro zprávy SMS, můžete tento krok přeskočit.

Poznámka:

Pokud nevidíte e-mailovou zprávu ve složce Doručená pošta pro adresu, kterou jste definovali CUSTOMER_EMAIL_ADDRESS v souboru .env , zkontrolujte složku spamu.

Zkoumání e-mailového kódu

Tip

Pokud používáte Visual Studio Code, můžete soubory otevřít přímo tak, že vyberete:

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

Potom zadejte název souboru, který chcete otevřít.

Otevřete soubor customers-list.component.ts. Úplná cesta k souboru je client/src/app/customers-list/customers-list.component.ts.

Když jste v datovémgridu vybrali možnost Kontaktovat zákazníka a potom e-mail/SMS Zákazník , zobrazila customer-list se součást dialogové okno. To zpracovává openEmailSmsDialog() funkce v souboru 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.');
    }
}

Funkce openEmailSmsDialog() provádí následující úlohy:

Zkontroluje, jestli data objekt (který představuje řádek z datagridu) obsahuje phone a email vlastnost. Pokud ano, vytvoří dialogData objekt, který obsahuje informace, které se mají předat do dialogového okna.
EmailSmsDialogComponent Otevře dialogové okno a předá dialogData mu objekt.
Přihlásí se k odběru afterClosed() události dialogového okna. Tato událost se aktivuje při zavření dialogového okna. Objekt response obsahuje informace, které byly zadány do dialogového okna.

Otevřete soubor email-sms-dialog.component.ts. Úplná cesta k souboru je client/src/app/email-sms-dialog/email-sms-dialog.component.ts.
sendEmail() Vyhledejte funkci:
```
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
    }
}
```
Funkce sendEmail() provádí následující úlohy:
- Zkontroluje, jestli acsEmailEnabled je příznak funkce nastavený na true. Tento příznak zkontroluje, jestli ACS_EMAIL_ADDRESS má proměnná prostředí přiřazenou hodnotu.
- Pokud acsEmailEnabled je hodnota true, volá se acsService.sendEmail() funkce a předá se předmět e-mailu, text, jméno zákazníka a e-mailová adresa zákazníka. Vzhledem k tomu, že databáze obsahuje ukázková data, CUSTOMER_EMAIL_ADDRESS používá this.data.emailse místo proměnné prostředí . V reálné aplikaci this.data.email by se hodnota použila.
- Přihlásí se k odběru sendEmail() funkce ve službě acsService . Tato funkce vrátí pozorovatelný RxJS, který obsahuje odpověď ze služby na straně klienta.
- Pokud se e-mail úspěšně odeslal, vlastnost je nastavena emailSent na truehodnotu .
K zajištění lepšího zapouzdření a opětovného použití kódu se používají služby na straně klienta, jako je acs.service.ts , v celé aplikaci. To umožňuje sloučení všech funkcí služby ACS do jednoho místa.
Otevřete acs.service.ts a vyhledejte sendEmail() funkci. Úplná cesta k souboru je 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)
    );
}
```
Funkce sendEmail() v AcsService nástroji provádí následující úlohy:
- http.post() Zavolá funkci a předá jí předmět e-mailu, zprávu, jméno zákazníka a e-mailovou adresu zákazníka. Funkce http.post() vrátí pozorovatelný RxJS, který obsahuje odpověď z volání rozhraní API.
- Zpracovává všechny chyby vrácené http.post() funkcí pomocí operátoru RxJS catchError .
Teď se podíváme, jak aplikace komunikuje s funkcí e-mailu služby ACS. Otevřete soubor acs.ts a vyhledejte sendEmail() funkci. Úplná cesta k souboru je server/typescript/acs.ts.
Funkce sendEmail() provádí následující úlohy:
- Vytvoří nový EmailClient objekt a předá připojovací řetězec služby ACS (tato hodnota se načte z ACS_CONNECTION_STRING proměnné prostředí).
```
const emailClient = new EmailClient(connectionString);
```
- Vytvoří nový EmailMessage objekt a předá odesílatele, předmět, zprávu a informace o příjemci.
```
const msgObject: EmailMessage = {
    senderAddress: process.env.ACS_EMAIL_ADDRESS as string,
    content: {
        subject: subject,
        plainText: message,
    },
    recipients: {
        to: [
            {
                address: customerEmailAddress,
                displayName: customerName,
            },
        ],
    },
};
```
- Odešle e-mail pomocí emailClient.beginSend() funkce a vrátí odpověď. I když funkce odesílá pouze jednomu příjemci v tomto příkladu beginSend() , dá se použít i k odeslání více příjemcům.
```
const poller = await emailClient.beginSend(msgObject);
```
- Čeká na to, poller aby objekt signalizoval, že je hotový, a odešle odpověď volajícímu.

Seznámení s kódem SMS

Vraťte se k email-sms-dialog.component.ts souboru, který jste otevřeli dříve. Úplná cesta k souboru je client/src/app/email-sms-dialog/email-sms-dialog.component.ts.
sendSms() Vyhledejte funkci:
```
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;
    }
}
```
Funkce sendSMS() provádí následující úlohy:
- Zkontroluje, jestli acsPhoneEnabled je příznak funkce nastavený na true. Tento příznak zkontroluje, jestli ACS_PHONE_NUMBER má proměnná prostředí přiřazenou hodnotu.
- Pokud acsPhoneEnabled je hodnota true, zavolá se acsService.SendSms() funkce a předá se zpráva SMS a telefonní číslo zákazníka. Vzhledem k tomu, že databáze obsahuje ukázková data, CUSTOMER_PHONE_NUMBER používá this.data.customerPhoneNumberse místo proměnné prostředí . V reálné aplikaci this.data.customerPhoneNumber by se hodnota použila.
- Přihlásí se k odběru sendSms() funkce ve službě acsService . Tato funkce vrátí pozorovatelný RxJS, který obsahuje odpověď ze služby na straně klienta.
- Pokud byla zpráva SMS úspěšně odeslána, nastaví smsSent vlastnost na true.
Otevřete acs.service.ts a vyhledejte sendSms() funkci. Úplná cesta k souboru je 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)
    );
}  
```
Funkce sendSms() provádí následující úlohy:
- http.post() Zavolá funkci a předá jí zprávu a telefonní číslo zákazníka. Funkce http.post() vrátí pozorovatelný RxJS, který obsahuje odpověď z volání rozhraní API.
- Zpracovává všechny chyby vrácené http.post() funkcí pomocí operátoru RxJS catchError .
Nakonec se podíváme, jak aplikace komunikuje s funkcí ACS SMS. Otevřete soubor acs.ts. Úplná cesta k souboru je server/typescript/acs.ts a vyhledejte sendSms() funkci.
Funkce sendSms() provádí následující úlohy:
- Vytvoří nový SmsClient objekt a předá připojovací řetězec služby ACS (tato hodnota se načte z ACS_CONNECTION_STRING proměnné prostředí).
```
const smsClient = new SmsClient(connectionString);
```
- smsClient.send() Zavolá funkci a předá telefonní číslo služby ACS (from), telefonní číslo zákazníka (to) a SMS zprávu:
```
const sendResults = await smsClient.send({
    from: process.env.ACS_PHONE_NUMBER as string,
    to: [customerPhoneNumber],
    message: message
});
return sendResults;
```
- Vrátí odpověď volajícímu.
Další informace o funkcích E-mailu a SMS služby ACS najdete v následujících článcích:
- E-mail ve službě Azure Communication Services
- SMS ve službě Azure Communication Services
Než přejdeme k dalšímu cvičení, pojďme se podívat na klíčové koncepty popsané v tomto cvičení:
- Soubor acs.service.ts zapouzdřuje funkce ACS a SMS používané aplikací na straně klienta. Zpracovává volání rozhraní API na server a vrací odpověď volajícímu.
- Rozhraní API na straně serveru používá ACS EmailClient a SmsClient objekty k odesílání e-mailových a SMS zpráv.
Teď, když jste se dozvěděli, jak se dají odesílat e-maily a SMS zprávy, pojďme se zaměřit na integraci dat organizace do aplikace.

Data organizace: Vytvoření registrace aplikace Microsoft Entra ID

59 min zbývá

Zvyšte produktivitu uživatelů integrací dat organizace (e-mailů, souborů, chatů a událostí kalendáře) přímo do vlastních aplikací. Pomocí rozhraní Microsoft Graph API a Microsoft Entra ID můžete bezproblémově načítat a zobrazovat relevantní data v rámci vašich aplikací, což snižuje potřebu uživatelů přepínat kontext. Bez ohledu na to, jestli odkazujete na e-mail odeslaný zákazníkovi, kontrolujete zprávu Teams nebo přistupujete k souboru, můžou uživatelé rychle najít informace, které potřebují, aniž by opustili vaši aplikaci, a zjednodušili tak rozhodovací proces.

V tomto cvičení:

Vytvořte registraci aplikace Microsoft Entra ID, aby Microsoft Graph mohl přistupovat k datům organizace a přenést je do aplikace.
Vyhledejte team a channel ID z Microsoft Teams, které jsou potřeba k odesílání chatovacích zpráv do určitého kanálu.
Aktualizujte soubor .env projektu hodnotami z registrace aplikace Microsoft Entra ID.

Přehled scénáře Microsoft Cloudu

Vytvoření registrace aplikace Microsoft Entra ID

Přejděte na Azure Portal a vyberte Microsoft Entra ID.
Vyberte Spravovat -->Registrace aplikací následované + Nová registrace.
Vyplňte podrobnosti nového registračního formuláře aplikace, jak je znázorněno níže, a vyberte Zaregistrovat:
- Název: microsoft-graph-app
- Podporované typy účtů: Účty v libovolném adresáři organizace (libovolný tenant Microsoft Entra ID – Víceklient)
- Identifikátor URI přesměrování:
  - Vyberte jednostránkové aplikace (SPA) a zadejte http://localhost:4200 do pole Identifikátor URI přesměrování.
- Výběrem možnosti Zaregistrovat vytvořte registraci aplikace.

V nabídce prostředků vyberte Přehled a zkopírujte Application (client) ID hodnotu do schránky.

Aktualizace souboru .env projektu

Otevřete soubor .env v editoru a přiřaďte Application (client) ID hodnotu .ENTRAID_CLIENT_ID
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
```
Pokud chcete povolit možnost odeslat zprávu z aplikace do kanálu Teams, přihlaste se k Microsoft Teams pomocí svého účtu tenanta Microsoft 365 pro vývoj (toto je uvedeno v předběžných dotazech pro tento kurz).
Po přihlášení rozbalte tým a najděte kanál, do kterého chcete odesílat zprávy z aplikace. Můžete například vybrat tým společnosti a obecný kanál (nebo jiný tým nebo kanál, který chcete použít).
V záhlaví týmu klikněte na tři tečky (...) a vyberte Získat odkaz na tým.
V odkazu, který se zobrazí v místním okně, id týmu je řetězec písmen a číslic za team/. Například v odkazu "https://teams.microsoft.com/l/team/19%3ae9b9.../", ID týmu je 19%3ae9b9... až do následujícího / znaku.
Zkopírujte ID týmu a přiřaďte ho do TEAM_ID souboru .env.
V záhlaví kanálu klikněte na tři tečky (...) a vyberte Získat odkaz na kanál.
V odkazu, který se zobrazí v místním okně, je ID kanálu řetězec písmen a číslic za channel/. Například v odkazu "https://teams.microsoft.com/l/channel/19%3aQK02.../", ID kanálu je 19%3aQK02... až do následujícího / znaku.
Zkopírujte ID kanálu a přiřaďte ho v CHANNEL_ID souboru .env.
Než budete pokračovat, uložte soubor env .

Spuštění nebo restartování aplikačních serverů a serverů rozhraní API

Proveďte jeden z následujících kroků na základě cvičení, která jste do tohoto okamžiku dokončili:

Pokud jste databázi, server rozhraní API a webový server spustili v předchozím cvičení, musíte zastavit server rozhraní API a webový server a restartovat je, aby se změny souboru .env obnovily. Databázi můžete nechat spuštěnou.

Vyhledejte terminálová okna se serverem rozhraní API a webovým serverem a stisknutím kombinace kláves CTRL+C je zastavte. Začněte je znovu zadáním npm start do každého okna terminálu a stisknutím klávesy Enter. Pokračujte k dalšímu cvičení.
Pokud jste databázi, server rozhraní API a webový server ještě nezahajovali, proveďte následující kroky:
1. V následujících krocích vytvoříte tři okna terminálu v editoru Visual Studio Code.
2. Klikněte pravým tlačítkem myši na soubor .env v seznamu souborů editoru Visual Studio Code a vyberte Otevřít v integrovaném terminálu. Než budete pokračovat, ujistěte se, že je váš terminál v kořenovém adresáři projektu – openai-acs-msgraph .
3. Výběrem jedné z následujících možností spusťte databázi PostgreSQL:
  - Pokud máte nainstalovaný a spuštěný Docker Desktop , spusťte docker-compose up ho v okně terminálu a stiskněte Enter.
  - Pokud máte podman s nainstalovaným a spuštěným podman-compose , spusťte podman-compose up v okně terminálu a stiskněte Enter.
  - Pokud chcete kontejner PostgreSQL spustit přímo pomocí Docker Desktopu, Podmanu, nerdctl nebo jiného nainstalovaného modulu runtime kontejneru, spusťte v okně terminálu následující příkaz:
    - Mac, Linux nebo Subsystém Windows pro 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 s PowerShellem:
```
[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. Jakmile se kontejner databáze spustí, stisknutím + ikony na panelu nástrojů Terminálu editoru Visual Studio Code vytvořte druhé okno terminálu.
5. cddo složky server/typescript a spuštěním následujících příkazů nainstalujte závislosti a spusťte server rozhraní API.
  - npm install
  - npm start
6. + Dalším stisknutím ikony na panelu nástrojů Terminálu editoru Visual Studio Code vytvořte třetí okno terminálu.
7. cddo složky klienta a spuštěním následujících příkazů nainstalujte závislosti a spusťte webový server.
  - npm install
  - npm start
8. Spustí se prohlížeč a budete přesměrováni na http://localhost:4200.

Data organizace: Přihlášení uživatele a získání přístupového tokenu

51 min zbývá

Aby mohl Microsoft Graph získat přístup k datům organizace, musí se uživatelé ověřit pomocí Microsoft Entra ID. V tomto cvičení se dozvíte, jak se dá komponenta mgt-login sady Microsoft Graph Toolkit použít k ověřování uživatelů a načtení přístupového tokenu. Přístupový token se pak dá použít k volání do Microsoft Graphu.

Poznámka:

Pokud s Microsoft Graphem začínáte, můžete se o ní dozvědět víc v studijním programu Základy Microsoft Graphu .

V tomto cvičení:

Zjistěte, jak přidružit aplikaci Microsoft Entra ID k sadě Microsoft Graph Toolkit k ověřování uživatelů a načítání dat organizace.
Seznamte se s důležitostí oborů.
Zjistěte, jak se dá komponenta mgt-login sady Microsoft Graph Toolkit použít k ověřování uživatelů a načtení přístupového tokenu.

V předchozím cvičení jste vytvořili registraci aplikace v Microsoft Entra ID a spustili aplikační server a server rozhraní API. Aktualizovali jste také následující hodnoty v .env souboru (TEAM_ID a CHANNEL_ID jsou volitelné):
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Než budete pokračovat, ujistěte se, že jste dokončili předchozí cvičení .
Vraťte se do prohlížeče (http://localhost:4200), vyberte Přihlásit se v hlavičce a přihlaste se pomocí uživatelského účtu správce z vašeho tenanta Microsoft 365 Developer.

Tip

Přihlaste se pomocí účtu správce tenanta pro vývojáře Microsoftu 365. Další uživatele ve vašem vývojářském tenantovi můžete zobrazit tak, že přejdete na Centrum pro správu Microsoftu 365.
Pokud se k aplikaci přihlašujete poprvé, zobrazí se výzva k vyjádření souhlasu s oprávněními požadovanými aplikací. Další informace o těchto oprávněních (označovaných také jako "obory") najdete v další části při prozkoumání kódu. Pokračujte výběrem možnosti Přijmout .
Po přihlášení by se mělo zobrazit jméno uživatele zobrazeného v záhlaví.

Teď, když jste přihlášení, se podívejme na kód použitý k přihlášení uživatele a načtení přístupového tokenu a profilu uživatele. Dozvíte se o webové komponentě mgt-login , která je součástí sady Microsoft Graph Toolkit.

Tip

Pokud používáte Visual Studio Code, můžete soubory otevřít přímo tak, že vyberete:

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

Potom zadejte název souboru, který chcete otevřít.

Otevřete klienta nebo package.json a všimněte si, že @microsoft/mgt součástí závislostí jsou balíčky.@microsoft/mgt-components Balíček @microsoft/mgt obsahuje funkce zprostředkovatele MSAL (Microsoft Authentication Library) a webové komponenty, jako jsou mgt-login a další, které lze použít k přihlášení uživatelů a načítání a zobrazení dat organizace.
Otevřete klienta/src/main.ts a všimněte si následujících importů @microsoft/mgt-components z balíčku. Importované symboly slouží k registraci komponent sady Microsoft Graph Toolkit, které se používají v aplikaci.
```
import { registerMgtLoginComponent, registerMgtSearchResultsComponent, registerMgtPersonComponent,  } from '@microsoft/mgt-components';
```
Posuňte se do dolní části souboru a poznamenejte si následující kód:
```
registerMgtLoginComponent();
registerMgtSearchResultsComponent();
registerMgtPersonComponent();
```
Tento kód zaregistruje mgt-loginkomponenty , mgt-search-resultsa mgt-person webové komponenty a povolí je pro použití v aplikaci.
Pokud chcete k přihlášení uživatelů použít komponentu mgt-login , musí být id klienta aplikace Microsoft Entra ID (uložené v souboru .env jako ENTRAID_CLIENT_ID) odkazováno a používáno.

Otevřete graph.service.ts a vyhledejte init() funkci. Úplná cesta k souboru je client/src/app/core/graph.service.ts. Zobrazí se následující import a kód:

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

Tento kód vytvoří nový Msal2Provider objekt, který předá ID klienta Microsoft Entra ID z registrace aplikace a scopes pro který bude aplikace požadovat přístup. Slouží scopes k vyžádání přístupu k prostředkům Microsoft Graphu, ke kterým bude aplikace přistupovat. Msal2Provider Po vytvoření je objekt přiřazen k objektuProviders.globalProvider, který používá komponenty sady Microsoft Graph Toolkit k načtení dat z Microsoft Graphu.

Otevřete header.component.html v editoru a vyhledejte komponentu mgt-login . Úplná cesta k souboru je client/src/app/header/header.component.html.
```
@if (this.featureFlags.microsoft365Enabled) {
    <mgt-login class="mgt-dark" (loginCompleted)="loginCompleted()"></mgt-login>
}
```
Komponenta mgt-login umožňuje přihlášení uživatele a poskytuje přístup k tokenu, který se používá s Microsoft Graphem. Po úspěšném přihlášení loginCompleted se aktivuje událost, která volá loginCompleted() funkci. I když se mgt-login používá v rámci komponenty Angular v tomto příkladu, je kompatibilní s jakoukoli webovou aplikací.

Zobrazení komponenty mgt-login závisí na featureFlags.microsoft365Enabled nastavené truehodnotě . Tento vlastní příznak zkontroluje přítomnost ENTRAID_CLIENT_ID proměnné prostředí a ověří, že je aplikace správně nakonfigurovaná a schopná se ověřit na základě ID Microsoft Entra. Příznak se přidá pro případy, kdy se uživatelé rozhodnou dokončit pouze cvičení umělé inteligence nebo komunikace v rámci kurzu, a nikoli sledovat celou posloupnost cvičení.
Otevřete header.component.ts a vyhledejte loginCompleted funkci. Tato funkce se volá při loginCompleted vygenerování události a zpracovává načítání přihlášeného profilu uživatele pomocí Providers.globalProvider.
```
async loginCompleted() {
    const me = await Providers.globalProvider.graph.client.api('me').get();
    this.userLoggedIn.emit(me);
}
```
V tomto příkladu se do rozhraní Microsoft Graph me API provádí volání, které načte profil uživatele (me představuje aktuální přihlášeného uživatele). Příkaz this.userLoggedIn.emit(me) kódu vygeneruje událost ze komponenty, která předá data profilu nadřazené komponentě. Nadřazená komponenta je app.component.ts soubor v tomto případě, což je kořenová komponenta aplikace.

Další informace o komponentě mgt-login najdete v dokumentaci k sadě Microsoft Graph Toolkit .
Teď, když jste se přihlásili k aplikaci, se podíváme na to, jak se dají načíst data organizace.

Data organizace: Načítání souborů, chatů a odesílání zpráv do Teams

41 min zbývá

V dnešním digitálním prostředí pracují uživatelé s širokou škálou dat organizace, včetně e-mailů, chatů, souborů, událostí kalendáře a dalších. To může vést k častým kontextům – přepínání mezi úkoly nebo aplikacemi – což může narušit zaměření a snížit produktivitu. Uživatel pracující na projektu může například potřebovat přepnout ze své aktuální aplikace do Outlooku, aby v e-mailu našli důležité podrobnosti nebo přepněte na OneDrive pro firmy najít související soubor. Tato zpětná akce naruší fokus a ztrácí čas, který by mohl být lépe strávený na úkolu.

Pokud chcete zvýšit efektivitu, můžete integrovat data organizace přímo do aplikací, které uživatelé používají každý den. Přenesením dat organizace do vašich aplikací můžou uživatelé přistupovat k informacím a spravovat je snadněji, minimalizovat posuny kontextu a zvýšit produktivitu. Kromě toho tato integrace poskytuje cenné přehledy a kontext, které uživatelům umožňují provádět informovaná rozhodnutí a efektivněji pracovat.

V tomto cvičení:

Zjistěte, jak se dá webová komponenta mgt-search-results v sadě Microsoft Graph Toolkit použít k hledání souborů.
Zjistěte, jak volat Microsoft Graph přímo k načtení souborů z OneDrive pro firmy a chatovacích zpráv z Microsoft Teams.
Zjistěte, jak posílat chatovací zprávy do kanálů Microsoft Teams pomocí Microsoft Graphu.

Použití funkce organizačních dat

V předchozím cvičení jste vytvořili registraci aplikace v Microsoft Entra ID a spustili aplikační server a server rozhraní API. Aktualizovali jste také následující hodnoty v .env souboru.
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Než budete pokračovat, ujistěte se, že jste dokončili předchozí cvičení .
Vraťte se do prohlížeče (http://localhost:4200). Pokud jste se ještě nepřihlásili, vyberte v záhlaví Přihlásit se a přihlaste se pomocí uživatele z tenanta Microsoftu 365 Developer.
Poznámka:

Kromě ověřování uživatele načte webová komponenta mgt-login také přístupový token, který může Microsoft Graph použít pro přístup k souborům, chatům, e-mailům, událostem kalendáře a dalším datům organizace. Přístupový token obsahuje obory (oprávnění), například Chat.ReadWrite, Files.Read.Alla další, které jste viděli dříve:
```
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 datovémgridu vyberte Zobrazit související obsah pro řádek Adatum Corporation. To způsobí načtení dat organizace, jako jsou soubory, chaty, e-maily a události kalendáře pomocí Microsoft Graphu. Jakmile se data načte, zobrazí se pod datovou mřížkou v rozhraní s kartami. Je důležité zmínit, že v tomto okamžiku se nemusí zobrazovat žádná data, protože jste zatím ve svém vývojářském tenantovi Microsoftu 365 nepřidali žádné soubory, chaty, e-maily nebo události kalendáře. Pojďme to opravit v dalším kroku.
Váš tenant Microsoft 365 nemusí mít v této fázi žádná související data organizace pro společnost Adatum Corporation . Pokud chcete přidat nějaká ukázková data, proveďte alespoň jednu z následujících akcí:
- Přidejte soubory tak https://onedrive.com , že navštívíte a přihlásíte se pomocí svých přihlašovacích údajů tenanta Microsoft 365 Developer.
  - V levém navigačním panelu vyberte Moje soubory .
  - V nabídce vyberte + Přidat nový a pak nahrajte složku.
  - V projektu, který jste naklonovali, vyberte složku openai-acs-msgraph/customer documents.
- Když navštívíte a přihlásíte se pomocí přihlašovacích údajů tenanta Microsoftu 365 pro vývojáře, můžete https://teams.microsoft.com přidávat zprávy chatu a události kalendáře.
  - V levém navigačním panelu vyberte Teams .
  - Vyberte tým a kanál.
  - Vyberte Zahájit příspěvek.
  - Zadejte novou objednávku pro Adatum Corporation pro předmět a veškerý další text, který chcete přidat do textu zprávy. Vyberte tlačítko Publikovat.
    
    Nebojte se přidat další chatové zprávy, které zmiňují další společnosti používané v aplikaci, jako jsou Adventure Works Cycles, Contoso Pharmaceuticals a Tailwind Traders.
  - V levém navigačním panelu vyberte Kalendář .
  - Vyberte Možnost Nová schůzka.
  - Jako název a text zadejte "Meet with Adatum Corporation about project schedule" (Sejít se s Adatum Corporation o plánu projektu).
  - Zvolte Uložit.
- Přidejte e-maily tak https://outlook.com , že navštívíte a přihlásíte se pomocí přihlašovacích údajů tenanta Microsoftu 365 Pro vývojáře.
  - Vyberte Možnost Nová pošta.
  - Do pole To zadejte svoji osobní e-mailovou adresu.
  - Zadejte novou objednávku pro Adatum Corporation pro předmět a cokoliv, co chcete pro tělo.
  - Vyberte Odeslat.
Vraťte se do aplikace v prohlížeči a aktualizujte stránku. Znovu vyberte Zobrazit související obsah pro řádek Adatum Corporation . Teď byste měli vidět data zobrazená na kartách v závislosti na tom, které úlohy jste provedli v předchozím kroku.
Pojďme se podívat na kód, který v aplikaci umožňuje funkci dat organizace. K načtení dat používá část aplikace na straně klienta přístupový token načtený komponentou mgt-login , na kterou jste se podívali dříve, k volání rozhraní Microsoft Graph API.

Zkoumání kódu pro vyhledávání souborů

Tip

Pokud používáte Visual Studio Code, můžete soubory otevřít přímo tak, že vyberete:

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

Potom zadejte název souboru, který chcete otevřít.

Začněme tím, že se podíváme, jak se data souboru načítají z OneDrive pro firmy. Otevřete files.component.html a chvíli se podívejte na kód. Úplná cesta k souboru je client/src/app/files/files.component.html.
Vyhledejte komponentu mgt-search-results a poznamenejte si následující atributy:
```
<mgt-search-results 
    class="search-results" 
    entity-types="driveItem" 
    [queryString]="searchText"
    (dataChange)="dataChange($any($event))" 
/>
```
Komponenta mgt-search-results je součástí sady Microsoft Graph Toolkit a jak název napovídá, používá se k zobrazení výsledků hledání z Microsoft Graphu. Komponenta používá v tomto příkladu následující funkce:
- Atribut class se používá k určení, že search-results třída CSS by měla být použita pro komponentu.
- Atribut entity-types se používá k určení typu dat, která se mají vyhledat. V tomto případě se driveItem hodnota používá k hledání souborů v OneDrive pro firmy.
- Atribut queryString se používá k určení hledaného termínu. V tomto případě je hodnota vázána na searchText vlastnost, která se předává komponentě souborů , když uživatel vybere Zobrazit související obsah pro řádek v datagridu. Hranaté závorky kolem queryString označují, že vlastnost je svázaná s searchText hodnotou.
- Událost dataChange se aktivuje, když se změní výsledky hledání. V tomto případě je v komponentě souborů volána funkce dataChange() zákazníka a data události se předávají funkci. Závorky kolem dataChange označují, že událost je svázaná s dataChange() funkcí.
- Vzhledem k tomu, že není zadána žádná vlastní šablona, použije se výchozí šablona integrovaná mgt-search-results k zobrazení výsledků hledání.
Alternativou k použití komponent, jako jsou mgt-search-results, je volání rozhraní Microsoft Graph API přímo pomocí kódu. Pokud chcete zjistit, jak to funguje, otevřete soubor graph.service.ts a vyhledejte searchFiles() funkci. Úplná cesta k souboru je client/src/app/core/graph.service.ts.
- Všimněte si, že query funkci se předá parametr. Jedná se o hledaný termín, který se předá, když uživatel vybere zobrazit související obsah pro řádek v datovémgridu. Pokud se nepředá žádný hledaný termín, vrátí se prázdné pole.
```
async searchFiles(query: string) {
    const files: DriveItem[] = [];
    if (!query) return files;

    ...
}
```
- Vytvoří se filtr, který definuje typ hledání, který se má provést. V tomto případě kód hledá soubory v OneDrive pro firmy, takže driveItem se používá stejně jako dříve u mgt-search-results komponenty. To je stejné jako předání driveItem do entity-types komponenty mgt-search-results , kterou jste viděli dříve. Parametr query se pak přidá do queryString filtru spolu s parametrem ContentType:Document.
```
const filter = {
    "requests": [
        {
            "entityTypes": [
                "driveItem"
            ],
            "query": {
                "queryString": `${query} AND ContentType:Document`
            }
        }
    ]
};
```
- Volání se pak provede do /search/query rozhraní Microsoft Graph API pomocí Providers.globalProvider.graph.client.api() funkce. Objekt filter se předá post() funkci, která odesílá data do rozhraní API.
```
const searchResults = await Providers.globalProvider.graph.client.api('/search/query').post(filter);
```
- Výsledky hledání se pak itestrují a vyhledají hits. Každá hit obsahuje informace o nalezených dokumentech. Vlastnost s názvem resource obsahuje metadata dokumentu a je přidána files do pole.
```
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);
            }
        }
    }
}
```
- Pole files se pak vrátí volajícímu.
```
return files;
```
Když se podíváte na tento kód, uvidíte, že webová komponenta mgt-search-results , kterou jste prozkoumali dříve, pro vás hodně práce a výrazně snižuje množství kódu, který musíte napsat! Mohou však existovat scénáře, kdy chcete volat Microsoft Graph přímo, abyste měli větší kontrolu nad daty odesílaným do rozhraní API nebo způsobem zpracování výsledků.
Otevřete soubor files.component.ts a vyhledejte search() funkci. Úplná cesta k souboru je client/src/app/files/files.component.ts.

I když je tělo této funkce zakomentováno kvůli používané komponentě výsledků hledání mgt, dá se tato funkce použít k volání Do Microsoft Graphu, když uživatel vybere zobrazit související obsah pro řádek v datovémgridu. Funkce search() volá searchFiles() graph.service.ts a předá query mu parametr (název společnosti v tomto příkladu). Výsledky hledání se pak přiřadí k data vlastnosti komponenty.
```
override async search(query: string) {
    this.data = await this.graphService.searchFiles(query);
}
```
Komponenta souborů pak může vlastnost použít data k zobrazení výsledků hledání. Můžete to zpracovat pomocí vlastních vazeb HTML nebo pomocí jiného ovládacího prvku Microsoft Graph Toolkit s názvem mgt-file-list. Tady je příklad vazby data vlastnosti na jednu z vlastností komponenty s názvem files a zpracováním itemClick události při interakci uživatele se souborem.
```
<mgt-file-list (itemClick)="itemClick($any($event))" [files]="data"></mgt-file-list>
```
Bez ohledu na to, jestli se rozhodnete použít komponentu mgt-search-results zobrazenou dříve, nebo napíšete vlastní kód pro volání Microsoft Graphu, bude záviset na vašem konkrétním scénáři. V tomto příkladu se komponenta mgt-search-results používá ke zjednodušení kódu a snížení množství práce, kterou musíte udělat.

Prozkoumání kódu hledání chatových zpráv v Teams

Vraťte se do graph.service.ts a vyhledejte searchChatMessages() funkci. Uvidíte, že se podobá searchFiles() funkci, na kterou jste se podívali dříve.
- Publikuje data filtrování do rozhraní API Microsoft Graphu /search/query a převede výsledky na pole objektů, které mají informace o objektu teamId, channelIda messageId které odpovídají hledanému termínu.
- Pokud chcete načíst zprávy kanálu Teams, provede se druhé volání rozhraní /teams/${chat.teamId}/channels/${chat.channelId}/messages/${chat.messageId} API a rozhraní teamId, channelIda messageId předá se. Tím se vrátí úplné podrobnosti zprávy.
- Provádí se další úlohy filtrování a výsledné zprávy se vrátí volajícímu searchChatMessages() .

Otevřete soubor chats.component.ts a vyhledejte search() funkci. Úplná cesta k souboru je client/src/app/chats/chats.component.ts. Funkce search() volá searchChatMessages() graph.service.ts a předá query mu parametr.

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

Výsledky hledání jsou přiřazeny vlastnosti data komponenty a datové vazby slouží k iteraci pole výsledků a vykreslení dat. Tento příklad používá komponentu Karty materiálu Angular k zobrazení výsledků hledání.

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

Zobrazení chatů v Teams

Odeslání zprávy do kanálu Microsoft Teams

Kromě hledání chatových zpráv v Microsoft Teams umožňuje aplikace také uživateli posílat zprávy do kanálu Microsoft Teams. Můžete to provést voláním /teams/${teamId}/channels/${channelId}/messages koncového bodu Microsoft Graphu.

V následujícím kódu uvidíte, že se vytvoří adresa URL, která obsahuje hodnoty teamId a channelId hodnoty. Hodnoty proměnných prostředí se používají pro ID týmu a ID kanálu v tomto příkladu, ale tyto hodnoty je možné dynamicky načíst i pomocí Microsoft Graphu. Konstanta body obsahuje zprávu, kterou chcete odeslat. Pak se provede požadavek POST a výsledky se vrátí volajícímu.

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

Využití tohoto typu funkcí v Microsoft Graphu poskytuje skvělý způsob, jak vylepšit produkt uživatele tím, že uživatelům umožní pracovat s Microsoft Teams přímo z aplikace, kterou už používají.

Data organizace: Načítání e-mailů a událostí kalendáře

21 min zbývá

V předchozím cvičení jste se naučili načítat soubory z OneDrive pro firmy a chatů z Microsoft Teams pomocí Microsoft Graphu a komponenty mgt-search-results ze sady Microsoft Graph Toolkit. Dozvěděli jste se také, jak odesílat zprávy do kanálů Microsoft Teams. V tomto cvičení se dozvíte, jak načíst e-mailové zprávy a události kalendáře z Microsoft Graphu a integrovat je do aplikace.

V tomto cvičení:

Zjistěte, jak lze webovou komponentu mgt-search-results v sadě Microsoft Graph Toolkit použít k vyhledávání e-mailů a událostí kalendáře.
Přečtěte si, jak přizpůsobit komponentu mgt-search-results pro vykreslení výsledků hledání vlastním způsobem.
Zjistěte, jak volat Microsoft Graph přímo za účelem načtení e-mailů a událostí kalendáře.

Zkoumání kódu hledání e-mailových zpráv

Tip

Pokud používáte Visual Studio Code, můžete soubory otevřít přímo tak, že vyberete:

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

Potom zadejte název souboru, který chcete otevřít.

V předchozím cvičení jste vytvořili registraci aplikace v Microsoft Entra ID a spustili aplikační server a server rozhraní API. Aktualizovali jste také následující hodnoty v .env souboru.
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Než budete pokračovat, ujistěte se, že jste dokončili předchozí cvičení .
Otevřete emails.component.html a chvíli se podívejte na kód. Úplná cesta k souboru je client/src/app/emails/emails.component.html.
Vyhledejte komponentu 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>
```
Tento příklad komponenty mgt-search-results je nakonfigurovaný stejným způsobem jako v předchozím příkladu. Jediným rozdílem je, že entity-types atribut je nastavený na to, který message slouží k hledání e-mailových zpráv a je zadána prázdná šablona.
- Atribut class se používá k určení, že search-results třída CSS by měla být použita pro komponentu.
- Atribut entity-types se používá k určení typu dat, která se mají vyhledat. V tomto případě je messagehodnota .
- Atribut queryString se používá k určení hledaného termínu.
- Událost dataChange se aktivuje, když se změní výsledky hledání. Volá se dataChange() funkce komponenty e-mailů, výsledky se jí předají a v komponentě se aktualizuje vlastnost s názvem data .
- Pro komponentu je definována prázdná šablona. Tento typ šablony se obvykle používá k definování způsobu vykreslení výsledků hledání. V tomto scénáři ale říkáme komponentě, aby nevykreslila žádná data zpráv. Místo toho vykreslíme data sami pomocí standardní datové vazby (v tomto případě se používá Angular, ale můžete použít libovolnou knihovnu nebo architekturu, kterou chcete).

V emails.component.html vyhledejte datové vazby používané k vykreslení e-mailových zpráv pod komponentou mgt-search-results. Tento příklad iteruje data vlastnost a zapíše předmět e-mailu, náhled textu a odkaz pro zobrazení celé e-mailové zprávy.

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

Zobrazení e-mailových zpráv

Kromě použití komponenty mgt-search-results k načtení zpráv poskytuje Microsoft Graph několik rozhraní API, která lze použít také k vyhledávání e-mailů. Rozhraní /search/query API, které jste viděli dříve, by se určitě dalo použít, ale jednodušší možností je messages rozhraní API.

Pokud chcete zjistit, jak volat toto rozhraní API, vraťte se do graph.service.ts a vyhledejte searchEmailMessages() funkci. Vytvoří adresu URL, která se dá použít k volání messages koncového bodu Microsoft Graphu a přiřadí query hodnotu parametru $search . Kód pak vytvoří požadavek GET a vrátí výsledky volajícímu. Operátor $search vyhledá query hodnotu v polích předmětu, textu a odesílatele automaticky.

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

Komponenta e-mailů umístěná v emails.component.ts volání searchEmailMessages() a zobrazí výsledky v uživatelském rozhraní.
```
override async search(query: string) {
    this.data = await this.graphService.searchEmailMessages(query);
}
```

Prozkoumání kódu vyhledávání událostí kalendáře

Hledání událostí kalendáře lze provést také pomocí komponenty mgt-search-results . Dokáže zpracovat vykreslování výsledků za vás, ale můžete také definovat vlastní šablonu, kterou uvidíte později v tomto cvičení.
Otevřete calendar-events.component.html a chvíli se podívejte na kód. Úplná cesta k souboru je client/src/app/calendar-events/calendar-events.component.html. Uvidíte, že je velmi podobné komponentám souborů a e-mailů, na které jste se podívali dříve.
```
<mgt-search-results 
    class="search-results" 
    entity-types="event" 
    [queryString]="searchText"
    (dataChange)="dataChange($any($event))">
    <template data-type="result-event"></template>
</mgt-search-results>
```
Tento příklad komponenty mgt-search-results je nakonfigurovaný stejným způsobem jako ty, na které jste se podívali dříve. Jediným rozdílem je, že entity-types atribut je nastavený na event to, který slouží k vyhledávání událostí kalendáře a je zadána prázdná šablona.
- Atribut class se používá k určení, že search-results třída CSS by měla být použita pro komponentu.
- Atribut entity-types se používá k určení typu dat, která se mají vyhledat. V tomto případě je eventhodnota .
- Atribut queryString se používá k určení hledaného termínu.
- Událost dataChange se aktivuje, když se změní výsledky hledání. Volá se dataChange() funkce komponenty události kalendáře, výsledky se jí předají a v této komponentě se aktualizuje vlastnost s názvemdata.
- Pro komponentu je definována prázdná šablona. V tomto scénáři říkáme komponentě, aby nevykreslila žádná data. Místo toho vykreslíme data sami pomocí standardní datové vazby.

Přímo pod komponentou mgt-search-results v calendar-events.component.html najdete datové vazby použité k vykreslení událostí kalendáře. Tento příklad iteruje vlastnost data a zapíše počáteční datum, čas a předmět události. Vlastní funkce zahrnuté v komponentě, například dayFromDateTime() a timeRangeFromEvent() jsou volána pro správné formátování dat. Vazby HTML obsahují také odkaz pro zobrazení události kalendáře v Outlooku a umístění události, pokud je zadána.

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

Kromě hledání událostí kalendáře pomocí search/query rozhraní API poskytuje events Microsoft Graph také rozhraní API, které lze použít také k vyhledávání událostí kalendáře. searchCalendarEvents() Vyhledejte funkci v graph.service.ts.
Funkce searchCalendarEvents() vytvoří hodnoty počátečního a koncového data a času, které slouží k definování časového období, které se má prohledávat. Pak vytvoří adresu URL, která se dá použít k volání events koncového bodu Microsoft Graphu query a obsahuje parametr a počáteční a koncové proměnné data a času. Pak se provede požadavek GET a výsledky se vrátí volajícímu.
```
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;
}
```
- Tady je rozpis vytvořené adresy URL:
  - Část /me/events adresy URL slouží k určení, že se mají načíst události přihlášeného uživatele.
  - enddatetime Parametry startdatetime se používají k definování časového období pro vyhledávání. V takovém případě hledání vrátí události, které se spustí během následujících 7 dnů.
  - Parametr $filter dotazu slouží k filtrování výsledků podle query hodnoty (název společnosti vybraný z datagridu v tomto případě). Funkce contains() slouží k vyhledání query hodnoty ve subject vlastnosti události kalendáře.
  - Parametr $orderby dotazu slouží k seřazení výsledků vlastností start/dateTime .
url Po vytvoření se do rozhraní Microsoft Graph API vytvoří požadavek GET s použitím hodnoty url a výsledky se vrátí volajícímu.
Stejně jako u předchozích součástí volá komponenta událostí kalendáře (calendar-events.component.ts soubor) a zobrazuje search() výsledky.
```
override async search(query: string) {
    this.data = await this.graphService.searchCalendarEvents(query);
}
```
Poznámka:

Volání Microsoft Graphu můžete provádět také z vlastní aplikace api nebo serverové aplikace. Podívejte se na následující kurz a podívejte se na příklad volání rozhraní Microsoft Graph API z funkce Azure Functions.
Teď jste viděli příklad použití Microsoft Graphu k načtení souborů, chatů, e-mailových zpráv a událostí kalendáře. Stejné koncepty je možné použít i u jiných rozhraní Microsoft Graph API. K vyhledávání uživatelů ve vaší organizaci můžete například použít rozhraní API pro uživatele Microsoft Graphu. K hledání skupin ve vaší organizaci můžete použít také rozhraní API pro skupiny Microsoft Graphu. Úplný seznam rozhraní Microsoft Graph API můžete zobrazit v dokumentaci.

Sdílet prostřednictvím

Integrace funkcí OpenAI, komunikace a organizačních dat do obchodní aplikace

Co vytvoříte v tomto kurzu

Volba vlastního dobrodružství

Požadavky

Cloudové technologie Microsoftu používané v tomto kurzu

Klonování projektu

Naklonujte úložiště GitHub a vytvořte .env soubor.

AI: Vytvoření prostředku Azure OpenAI a nasazení modelu

Vytvoření prostředku služby Azure OpenAI

Aktualizace souboru projektu .env

Spuštění aplikačních služeb

AI: Přirozený jazyk do SQL

Použití funkce Přirozeného jazyka k SQL

Zkoumání přirozeného jazyka do kódu SQL

AI: Generování dokončování

Použití funkce dokončování AI

Prozkoumání kódu dokončování AI

AI: Azure OpenAI na vašich datech

Přidání vlastního zdroje dat do azure AI Studia

Použití vlastního zdroje dat v chatovacím hřišti

Použití funkce Přineste si vlastní data v aplikaci

Zkoumání kódu

Komunikace: Vytvoření prostředku Azure Communication Services

Vytvoření prostředku Azure Communication Services

Povolení možností telefonního volání a SMS

Připojení e-mailové domény

.env Aktualizace souboru

Spuštění nebo restartování aplikačních serverů a serverů rozhraní API

Komunikace: Telefonní hovor

Použití funkce telefonního volání

Seznámení s kódem telefonního volání

Komunikace: Odesílání e-mailů a SMS zpráv

Používání funkcí e-mailu a SMS

Zkoumání e-mailového kódu

Seznámení s kódem SMS

Data organizace: Vytvoření registrace aplikace Microsoft Entra ID

Vytvoření registrace aplikace Microsoft Entra ID

Aktualizace souboru .env projektu

Spuštění nebo restartování aplikačních serverů a serverů rozhraní API

Data organizace: Přihlášení uživatele a získání přístupového tokenu

Použití funkce přihlášení

Seznámení s přihlašovacím kódem

Data organizace: Načítání souborů, chatů a odesílání zpráv do Teams

Použití funkce organizačních dat

Zkoumání kódu pro vyhledávání souborů

Prozkoumání kódu hledání chatových zpráv v Teams

Odeslání zprávy do kanálu Microsoft Teams

Data organizace: Načítání e-mailů a událostí kalendáře

Zkoumání kódu hledání e-mailových zpráv

Prozkoumání kódu vyhledávání událostí kalendáře

Gratulujeme!

Dokončili jste tento kurz.

Vyčištění prostředků Azure

Další kroky

Dokumentace

Trénovací obsah

Váš názor

Naklonujte úložiště GitHub a vytvořte `.env` soubor.

Aktualizace souboru projektu `.env`

`.env` Aktualizace souboru