OpenAI, İletişim ve Kurumsal Veri Özelliklerini İş Kolu Uygulamasıyla Tümleştirme

Makale
Developer (Orta)
Tamamlanması için 136 dakika kaldı

Düzey: Ara

Bu öğreticide Azure OpenAI, Azure İletişim Hizmetleri ve Microsoft Graph/Microsoft Graph Toolkit'in kullanıcı üretkenliğini artırmak, kullanıcı deneyimini yükseltmek ve LOB uygulamalarını bir sonraki düzeye çıkarmak için bir İş Kolu (LOB) uygulamasıyla nasıl tümleştirilebileceği gösterilmektedir. Uygulamadaki temel özellikler şunlardır:

Yapay zeka: Kullanıcıların doğal dilde sorular sormasını ve yanıtlarını veritabanını sorgulamak için kullanılabilecek SQL'e dönüştürmesini, kullanıcıların otomatik olarak e-posta ve SMS iletileri oluşturmak için kullanılabilecek kurallar tanımlamasına olanak tanıyabilir ve kendi özel veri kaynaklarınızdan veri almak için doğal dilin nasıl kullanılabileceğini öğrenebilirsiniz. Bu özellikler için Azure OpenAI kullanılır.
İletişim: Azure İletişim Hizmetleri kullanarak müşterilere uygulama içi telefon çağrısını ve E-posta/SMS işlevselliğini etkinleştirin.
Kuruluş Verileri: Bağlam değiştirmeden kaçınmak için müşterilerle birlikte çalışırken kullanıcıların ihtiyaç duyabileceği ilgili kuruluş verilerini (belgeler, sohbetler, e-postalar, takvim olayları) çekin. Bu tür kuruluş verilerine erişim sağlamak, ihtiyaç duyduğu belirli veriler ve işlevler doğrudan uygulamada sağlandığından kullanıcının Outlook, Teams, OneDrive, diğer özel uygulamalara, telefonlarına vb. geçiş yapma gereksinimini azaltır. Bu özellik için Microsoft Graph ve Microsoft Graph Araç Seti kullanılır.

Uygulama, kullanıcıların müşterilerini ve ilgili verilerini yönetmesine olanak tanıyan basit bir müşteri yönetimi uygulamasıdır. Verileri almak, yapay zeka işlevleriyle etkileşime geçmek, e-posta/SMS iletileri göndermek ve kuruluş verilerini çekmek için arka uç API'lerini çağıran TypeScript kullanılarak oluşturulmuş bir ön uç içerir. İşte bu öğreticide iz göreceğiniz uygulama çözümüne genel bir bakış:

Microsoft Bulut senaryosuna genel bakış

Öğretici, gerekli Azure ve Microsoft 365 kaynaklarını ayarlama işleminde size yol gösterir. Ayrıca yapay zeka, iletişim ve kurumsal veri özelliklerini uygulamak için kullanılan kodda size yol gösterir. Kod kopyalayıp yapıştırmanız gerekmeyecek olsa da, bazı alıştırmalarda farklı senaryoları denemek için kodu değiştirmeniz gerekir.

Bu Öğreticide Neler Oluşturacaksınız?

Kendi Maceranızı Seçin

Öğreticinin tamamını baştan sona tamamlayabilir veya ilgilendiğiniz belirli konuları tamamlayabilirsiniz. Öğretici aşağıdaki konulara ayrılmıştır:

Proje Alıştırması'nı kopyalama (gerekli alıştırma).
Yapay Zeka Alıştırmaları: Azure OpenAI kaynağı oluşturun ve bunu kullanarak doğal dili SQL'e dönüştürün, e-posta/SMS iletileri oluşturun ve kendi verilerinizle belgelerinizle çalışın.
İletişim Alıştırmaları: bir Azure İletişim Hizmetleri kaynağı oluşturun ve uygulamadan telefon aramaları yapmak ve e-posta/SMS mesajları göndermek için bu kaynağı kullanın.
Kurumsal Veri Alıştırmaları: Kuruluş verilerinin kimliğini doğrulamak ve uygulamaya çekmek için Microsoft Graph ve Microsoft Graph Toolkit'in kullanılabilmesi için bir Microsoft Entra ID uygulama kaydı oluşturun.

Kendi maceranı seç. Öğreticinin tamamını tamamlayın veya belirli konu alanlarını seçin.

Önkoşullar

Node - Bu proje için Düğüm 20+ ve npm 10+ kullanılacak
git
Visual Studio Code (Visual Studio Code önerilse de, herhangi bir düzenleyici kullanılabilir)
Azure Aboneliği
Microsoft 365 geliştirici kiracısı
Docker Desktop veya Podman gibi başka bir OCI (Open Container Initiative) uyumlu kapsayıcı çalışma zamanı veya kapsayıcı çalıştırabilen nerdctl.

Bu Öğreticide kullanılan Microsoft Bulut Teknolojileri

Azure İletişim Hizmetleri
Azure OpenAI Service
Microsoft Entra Kimlik
Microsoft Graph
Microsoft Graph Araç Seti

Projeyi Kopyalama

132 dakika kaldı

Bu öğreticide kullanılan kod projesine adresinden https://github.com/microsoft/MicrosoftCloudulaşabilirsiniz. Projenin deposu, projeyi çalıştırmak için gereken hem istemci tarafı hem de sunucu tarafı kodu içerir ve yapay zeka (AI), iletişim ve kuruluş verileriyle ilgili tümleşik özellikleri keşfetmenizi sağlar. Ayrıca proje, benzer özellikleri kendi uygulamalarınıza dahil etme konusunda size yol gösteren bir kaynak görevi görür.

Bu alıştırmada şunları yapacaksınız:

GitHub deposunu kopyalayın.
Projeye bir .env dosyası ekleyin ve güncelleştirin.

Devam etmeden önce, bu öğreticinin Önkoşullar bölümünde açıklandığı gibi tüm önkoşulların yüklü ve yapılandırılmış olduğundan emin olun.

GitHub Deposunu Kopyalama ve Dosya Oluşturma `.env`

Microsoft Cloud GitHub Deposunu makinenize kopyalamak için aşağıdaki komutu çalıştırın.
```
git clone https://github.com/microsoft/MicrosoftCloud
```
Visual Studio Code'da MicrosoftCloud/samples/openai-acs-msgraph klasörünü açın.

Not

Bu öğretici boyunca Visual Studio Code kullanacağız ancak örnek projeyle çalışmak için herhangi bir kod düzenleyicisi kullanılabilir.
Aşağıdaki klasörlere ve dosyalara dikkat edin:
- client: İstemci tarafı uygulama kodu.
- sunucu: Sunucu tarafı API kodu.
- docker-compose.yml: Yerel bir PostgreSQL veritabanını çalıştırmak için kullanılır.
Projenin kökündeki .env.example dosyasını .env olarak yeniden adlandırın.

.env dosyasını açın ve aşağıdaki anahtarlara göz atın:

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=

.env dosyasında aşağıdaki değerleri güncelleştirin. Bu değerler API sunucusu tarafından yerel PostgreSQL veritabanına bağlanmak için kullanılır.
```
POSTGRES_USER=web
POSTGRES_PASSWORD=web-password
```
Artık projeyi tamamladığınıza göre, uygulama özelliklerinden bazılarını deneyelim ve bunların nasıl derlendiğini öğrenelim. İçindekiler tablosunu kullanarak devam etmek veya belirli bir alıştırmaya atlamak için aşağıdaki İleri düğmesini seçin.

AI: Azure OpenAI Kaynağı Oluşturma ve Model Dağıtma

127 dakika kaldı

Uygulamalarınızda Azure OpenAI kullanmaya başlamak için bir Azure OpenAI Hizmeti oluşturmanız ve doğal dili SQL'e dönüştürme, e-posta/SMS iletisi içeriği oluşturma gibi görevleri gerçekleştirmek için kullanılabilecek bir model dağıtmanız gerekir.

Bu alıştırmada şunları yapacaksınız:

Azure OpenAI Hizmeti kaynağı oluşturun.
Model dağıtma.
.env dosyasını Azure OpenAI hizmet kaynağınızdaki değerlerle güncelleştirin.

Microsoft Bulut senaryosuna genel bakış

Azure OpenAI Hizmeti Kaynağı Oluşturma

Tarayıcınızda Azure portalını ziyaret edin ve oturum açın.
Portal sayfasının üst kısmındaki arama çubuğuna openai yazın ve görüntülenen seçeneklerden Azure OpenAI'yi seçin.
Araç çubuğunda Oluştur'u seçin.

Not

Bu öğretici Azure OpenAI'ye odaklansa da, bir OpenAI API anahtarınız varsa ve bunu kullanmak istiyorsanız, bu bölümü atlayabilir ve doğrudan aşağıdaki Projenin .env Dosyasını Güncelleştir bölümüne gidebilirsiniz. OpenAI API anahtarınızı OPENAI_API_KEY .env dosyasında öğesine atayın (OpenAI ile ilgili diğer .env yönergeleri yoksayabilirsiniz).
Azure OpenAI modelleri belirli bölgelerde kullanılabilir. Bu öğreticide kullanılan gpt-4o modelini destekleyen bölgeleri öğrenmek için Azure OpenAI modeli kullanılabilirlik belgesini ziyaret edin.
Aşağıdaki görevleri gerçekleştirin:
- Azure aboneliği seçin.
- Kullanılacak kaynak grubunu seçin (gerekirse yeni bir grup oluşturun).
- Daha önce incelediğiniz belgeye göre gpt-4o modelinin desteklendiği bir bölge seçin.
- Kaynak adını girin. Bu, benzersiz bir değer olmalıdır.
- Standart S0 fiyatlandırma katmanını seçin.
Gözden Geçir ve gönder ekranına gelene kadar İleri'yi seçin. Oluştur'u belirleyin.
Azure OpenAI kaynağınız oluşturulduktan sonra kaynağınıza gidin ve Kaynak Yönetimi -->Anahtarlar ve Uç Nokta'yı seçin.
ANAHTAR 1 ve Uç Nokta değerlerini bulun. Sonraki bölümde her iki değeri de kullanacaksınız, bu nedenle bunları yerel bir dosyaya kopyalayın.
Kaynak Yönetimi -->Model dağıtımları'ı seçin.
Azure OpenAI Studio'ya gitmek için Dağıtımları Yönet düğmesini seçin.
Araç çubuğunda Modeli dağıt -->Temel modeli dağıt'ı seçin.
Model listesinden gpt-4o'yu ve ardından Onayla'yı seçin.

Not

Azure OpenAI birkaç farklı model türünü destekler. Her model farklı senaryoları işlemek için kullanılabilir.
Aşağıdaki iletişim kutusu görüntülenir. Sağlanan varsayılan değerleri incelemek için biraz zaman ayırın.
Dakika Başına Belirteç Hız Sınırı (binler) değerini 100.000 olarak değiştirin. Bu, modele daha fazla istekte bulunmanıza ve izleyen adımları gerçekleştirirken hız sınırına gitmekten kaçınmanıza olanak sağlar.
Dağıt'ı seçin.
Model dağıtıldıktan sonra Oyun Alanları -->Sohbet'i seçin.
Dağıtım açılan listesinde gpt-4o modeli görüntülenmelidir.
Sağlanan Sistem iletisi metnini okumak için bir dakika bekleyin. Bu, modele kullanıcı etkileşimde bulunurken nasıl davranacaklarını bildirir.
Sohbet alanındaki metin kutusunu bulun ve Oluşturan yapay zekanın ne olduğunu ve nasıl kullanılabileceğini özetle yazın. İletiyi modele göndermek ve bir yanıt oluşturmasını sağlamak için Enter'ı seçin.
Diğer istemler ve yanıtlarla denemeler yapın. Örneğin, Fransa'nın başkenti hakkında kısa bir geçmiş girin ve oluşturulan yanıta dikkat edin.

Proje `.env` Dosyasını Güncelleştirme

Visual Studio Code'a geri dönün ve dosyayı projenin kökünde açın .env .
Azure OpenAI kaynağınızdan KEY 1 değerini kopyalayın ve openai-acs-msgraph klasörünün kökünde bulunan .env dosyasına atayın OPENAI_API_KEY :
```
OPENAI_API_KEY=<KEY_1_VALUE>
```
*Uç nokta değerini kopyalayın ve .env dosyasında öğesine atayın OPENAI_ENDPOINT . / Varsa, değerin sonundaki karakteri kaldırın.
```
OPENAI_ENDPOINT=<ENDPOINT_VALUE>
```
Not

ve değerlerinin OPENAI_MODEL OPENAI_API_VERSION .env dosyasında zaten ayarlandığını göreceksiniz. Model değeri, bu alıştırmada daha önce oluşturduğunuz model dağıtım adıyla eşleşen gpt-4o olarak ayarlanır. API sürümü, Azure OpenAI başvuru belgelerinde tanımlanan desteklenen bir değere ayarlanır.
.env dosyasını kaydedin.

Uygulama Hizmetleri'ni başlatma

Veritabanı, API sunucusu ve web sunucusu gibi uygulama hizmetlerinizi başlatmanın zamanı geldi.

Aşağıdaki adımlarda Visual Studio Code'da üç terminal penceresi oluşturacaksınız.
Visual Studio Code dosya listesinde .env dosyasına sağ tıklayın ve Tümleşik Terminalde Aç'ı seçin. Devam etmeden önce terminalinizin projenin kökünde (openai-acs-msgraph ) olduğundan emin olun.
PostgreSQL veritabanını başlatmak için aşağıdaki seçeneklerden birini seçin:
- Docker Desktop'ı yüklü ve çalışıyor durumdaysa terminal penceresinde çalıştırın docker-compose up ve Enter tuşuna basın.
- Podman-compose yüklü ve çalışıyor podman varsa, terminal penceresinde komutunu çalıştırın podman-compose up ve Enter tuşuna basın.
- PostgreSQL kapsayıcısını docker Desktop, Podman, nerdctl veya yüklediğiniz başka bir kapsayıcı çalışma zamanını kullanarak doğrudan çalıştırmak için terminal penceresinde aşağıdaki komutu çalıştırın:
  - Mac, Linux veya Linux için Windows Alt Sistemi (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
```
  - PowerShell ile Windows:
```
[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
```
Veritabanı kapsayıcısı başlatıldıktan sonra, ikinci bir terminal penceresi oluşturmak için Visual Studio Code Terminal araç çubuğundaki simgeye basın+.
cd yazın ve bağımlılıkları yüklemek ve API sunucusunu başlatmak için aşağıdaki komutları çalıştırın.
- npm install
- npm start
+ Üçüncü bir terminal penceresi oluşturmak için Visual Studio Code Terminal araç çubuğundaki simgeye yeniden basın.
cd ve aşağıdaki komutları çalıştırarak bağımlılıkları yükleyin ve web sunucusunu başlatın.
- npm install
- npm start
Bir tarayıcı başlatılır ve adresine yönlendirilirsiniz http://localhost:4200.

Yapay Zeka: Doğal Dilden SQL'e

122 dakika kaldı

"Yalnızca bunu yapmalısınız anlamına gelmez" alıntısı, yapay zeka özelliklerini düşünürken yararlı bir kılavuzdur. Örneğin, Azure OpenAI'nin sql'e doğal dili özelliği, kullanıcıların veritabanı sorgularını düz İngilizce olarak oluşturmasına olanak tanır ve bu da üretkenliğini artırmak için güçlü bir araç olabilir. Ancak, güçlü her zaman uygun veya güvenli anlamına gelmez. Bu alıştırmada bu yapay zeka özelliğinin nasıl kullanılacağı gösterilirken, uygulamaya karar vermeden önce göz önünde bulundurulması gereken önemli noktalar ele alınacaktır.

Veritabanından veri almak için kullanılabilecek bir doğal dil sorgusu örneği aşağıda verilmişti:

Get the the total revenue for all companies in London.

Uygun istemlerle, Azure OpenAI bu sorguyu veritabanından sonuç döndürmek için kullanılabilecek SQL'e dönüştürür. Sonuç olarak, iş analistleri, pazarlamacılar ve yöneticiler de dahil olmak üzere teknik olmayan kullanıcılar, karmaşık SQL söz dizimiyle boğuşmadan veya kısıtlanmış veri kılavuzlarına ve filtrelere güvenmeden veritabanlarından değerli bilgileri daha kolay alabilir. Bu kolaylaştırılmış yaklaşım, kullanıcıların teknik uzmanlardan yardım isteme gereksinimini ortadan kaldırarak üretkenliği artırabilir.

Bu alıştırma, SQL'e doğal dilin nasıl çalıştığını anlamanıza, bazı önemli noktaları size tanıtmanıza, avantajları ve dezavantajları düşünmenize yardımcı olacak ve başlangıç kodunu göstermenize yardımcı olacak bir başlangıç noktası sağlar.

Bu alıştırmada şunları yapacaksınız:

Doğal dili SQL'e dönüştürmek için GPT istemlerini kullanın.
Farklı GPT istemleriyle denemeler yapın.
Daha önce başlatılan PostgreSQL veritabanını sorgulamak için oluşturulan SQL'i kullanın.
PostgreSQL'den sorgu sonuçlarını döndür ve tarayıcıda görüntüle.

Doğal dili SQL'e dönüştürmek için kullanılabilecek farklı GPT istemleriyle denemeler yaparak başlayalım.

Doğal Dilden SQL'e Özelliğini Kullanma

Önceki alıştırmada veritabanını, API'leri ve uygulamayı başlattınız. Dosyayı da güncelleştirmişsiniz .env . Bu adımları tamamlamadıysanız devam etmeden önce alıştırmanın sonundaki yönergeleri izleyin.
Tarayıcıya (http://localhost:4200) dönün ve datagrid'in altındaki sayfanın Özel Sorgu bölümünü bulun. Örnek sorgu değerinin zaten dahil olduğuna dikkat edin: Tüm siparişlerin toplam gelirini alın. Şirkete göre gruplandırın ve şehri dahil edin.
Sorguyu Çalıştır düğmesini seçin. Bu, kullanıcının doğal dil sorgusunu SQL'e dönüştürecek olan Azure OpenAI'ye geçirir. Sql sorgusu daha sonra veritabanını sorgulamak ve olası sonuçları döndürmek için kullanılır.

Aşağıdaki Özel Sorguyu çalıştırın:

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

Visual Studio Code'da API sunucusunu çalıştıran terminal penceresini görüntüleyin ve Azure OpenAI'den döndürülen SQL sorgusunu görüntülediğine dikkat edin. JSON verileri sunucu tarafı API'leri tarafından PostgreSQL veritabanını sorgulamak için kullanılır. Sorguya dahil edilen tüm dize değerleri, SQL ekleme saldırılarını önlemek için parametre değerleri olarak eklenir:
```
{ 
    "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"] 
}
```
Datagrid'de tüm müşterileri yeniden görüntülemek için tarayıcıya dönün ve Verileri Sıfırla'yı seçin.

Sql Code'a Doğal Dili Keşfetme

İpucu

Visual Studio Code kullanıyorsanız, şunları seçerek dosyaları doğrudan açabilirsiniz:

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

Ardından açmak istediğiniz dosyanın adını yazın.

Not

Bu alıştırmanın amacı, SQL işlevselliği için doğal dil ile mümkün olan şeyleri göstermek ve kullanmaya başlamayı göstermektir. Daha önce de belirtildiği gibi, herhangi bir uygulamaya geçmeden önce bu yapay zeka türünün kuruluşunuz için uygun olup olmadığını tartışmanız önemlidir. Ayrıca yetkisiz erişimi önlemek ve hassas verileri korumak için uygun istem kurallarını ve veritabanı güvenlik önlemlerini planlamak da şarttır.

SQL özelliğinin doğal dilinin nasıl çalıştığını gördüğünüze göre şimdi nasıl uygulandığını inceleyelim.

sunucu/apiRoutes.ts dosyasını açın ve yolu bulungenerateSql. Bu API yolu, tarayıcıda çalışan istemci tarafı uygulaması tarafından çağrılır ve doğal dil sorgusundan SQL oluşturmak için kullanılır. SQL sorgusu alındıktan sonra veritabanını sorgulamak ve sonuçları döndürmek için kullanılır.

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

Yolda aşağıdaki işlevlere generateSql dikkat edin:

kullanıcı sorgu değerini 'den req.body.prompt alır ve adlı userPromptbir değişkene atar. Bu değer GPT isteminde kullanılır.
Doğal dili SQL'e dönüştürmek için bir getSQLFromNLP() işlev çağırır.
Oluşturulan SQL'i, SQL sorgusunu yürüten ve veritabanından sonuçlar döndüren adlı queryDb bir işleve geçirir.

Düzenleyicinizde sunucu/openAI.ts dosyasını açın ve işlevi bulungetSQLFromNLP(). Bu işlev yol tarafından çağrılır generatesql ve doğal dili SQL'e dönüştürmek için kullanılır.

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

İşleve bir userPrompt parametre geçirilir. userPrompt Değer, tarayıcıda kullanıcı tarafından girilen doğal dil sorgusudur.
A systemPrompt , kullanılacak yapay zeka yardımcısı türünü ve izlenmesi gereken kuralları tanımlar. Bu, Azure OpenAI'nin veritabanı yapısını, hangi kuralların uygulanacağını ve oluşturulan SQL sorgusunu ve parametrelerini nasıl döndüreceklerini anlamasına yardımcı olur.
adlı callOpenAI() bir işlev çağrılır systemPrompt ve ve userPrompt değerleri bu işleve geçirilir.
Sonuçlar, oluşturulan SQL sorgusuna yasaklanmış değer eklenmediğinden emin olmak için denetlenir. Yasaklanmış değerler bulunursa, SQL sorgusu boş bir dizeye ayarlanır.

Şimdi sistem istemini daha ayrıntılı inceleyelim:

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

Kullanılacak yapay zeka yardımcısı türü tanımlanır. Bu durumda "SQL botu için doğal dil".
Veritabanındaki tablo adları ve sütunlar tanımlanır. İstemde yer alan üst düzey şema server/db.schema dosyasında bulunabilir ve aşağıdaki gibi görünür.
```
- customers (id, company, city, email)
- orders (id, customer_id, date, total)
- order_items (id, order_id, product_id, quantity, price)
- reviews (id, customer_id, review, date, comment)
```
İpucu

Yalnızca kullanıcıların SQL'e doğal dil kullanarak sorgulamasına izin verilen verileri içeren salt okunur görünümler oluşturmayı düşünebilirsiniz.
SQL ekleme saldırılarını önlemek için herhangi bir dize değerini parametreli sorgu değerine dönüştürmek için bir kural tanımlanır.
Sql sorgusu ve içindeki parametre değerleriyle her zaman bir JSON nesnesi döndürmek için bir kural tanımlanır.
Örnek kullanıcı istemleri ve beklenen SQL sorgusu ve parametre değerleri sağlanır. Bu, "az çekim" öğrenme olarak adlandırılır. LLM'ler büyük miktarda veri üzerinde eğitilse de, yalnızca birkaç örnekle yeni görevlere uyarlanabilir. Alternatif bir yaklaşım, örnek sağlanmayan ve modelin doğru SQL sorgusu ve parametre değerlerini oluşturmasının beklendiği "sıfır çekim" öğrenme yaklaşımıdır.

İşlev, getSQLFromNLP() sistem ve kullanıcı istemlerini sunucu/openAI.ts dosyasında da bulunan adlı callOpenAI() bir işleve gönderir. İşlev, callOpenAI() ortam değişkenlerini denetleyerek Azure OpenAI hizmetinin mi yoksa OpenAI hizmetinin mi çağrılması gerektiğini belirler. Ortam değişkenlerinde bir anahtar, uç nokta ve model varsa Azure OpenAI çağrılır, aksi takdirde OpenAI çağrılır.
```
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);
}
```
Not

Bu öğretici boyunca Azure OpenAI'ye odaklanacağız ancak .env dosyasında yalnızca bir OPENAI_API_KEY değer sağlarsanız, uygulama bunun yerine OpenAI kullanır. Azure OpenAI yerine OpenAI kullanmayı seçerseniz bazı durumlarda farklı sonuçlar görebilirsiniz.
İşlevi getAzureOpenAICompletion() bulun.
```
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;
}
```
Bu işlev aşağıdakileri yapar:
- Parametreler:
  - systemPrompt, userPromptve temperature ana parametrelerdir.
    - systemPrompt: Rolünü ve izlenmesi gereken kuralları Azure OpenAI modeline bildirir.
    - userPrompt: Doğal dil girişi veya çıkışı oluşturmak için kurallar gibi kullanıcı tarafından sağlanan bilgileri içerir.
    - temperature: Modelin yanıtının yaratıcılık düzeyini belirler. Daha yüksek bir değer daha yaratıcı çıkışlar elde eder.
- Tamamlama Oluşturma:
  - İşlev, bir tamamlama oluşturmak için , userPromptve temperature ile systemPromptçağrılarcreateAzureOpenAICompletion().
  - Tamamlanmadaki ilk seçenekten içeriği ayıklar ve ek boşluklar kırpılır.
  - İçerik JSON benzeri yapılar içeriyorsa (ve }varlığıyla { gösterilir), JSON içeriğini ayıklar.
- Günlüğe Kaydetme ve Dönüş Değeri:
  - İşlev, Azure OpenAI çıkışını konsola günlüğe kaydeder.
  - İşlenen içeriği dize olarak döndürür.
İşlevi createAzureOpenAICompletion() bulun.
```
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.`);
        }
    }
}
```
Bu işlev aşağıdakileri yapar:
- Parametreler:
  - systemPrompt, userPromptve temperature daha önce ele alınan ana parametrelerdir.
  - İsteğe bağlı dataSources bir parametre, bu öğreticinin ilerleyen bölümlerinde ele alınacak olan "Azure Kendi Verilerini Getir" özelliğini destekler.
- Ortam Değişkenleri Denetimi:
  - İşlev, temel ortam değişkenlerinin varlığını doğrulayarak eksik bir hata oluşturur.
- Yapılandırma Nesnesi:
  - Dosyadaki config .env (OPENAI_API_KEY, OPENAI_ENDPOINT, , OPENAI_API_VERSIONOPENAI_MODEL) değerler kullanılarak bir nesne oluşturulur. Bu değerler, Azure OpenAI'yi çağırmak için URL'yi oluşturmak için kullanılır.
- AzureOpenAI Örneği:
  - nesnesi kullanılarak config bir AzureOpenAI örneği oluşturulur. AzureOpenAI Simgesi, dosyanızın en üstünde içeri aktarılması gereken paketin bir parçasıdıropenai.
- Tamamlama Oluşturma:
  - chat.completions.create() İşlev aşağıdaki özelliklerle çağrılır:
    - model: Dosyanızda .env tanımlandığı gibi GPT modelini (gpt-4o, gpt-3.5-turbo gibi) belirtir.
    - max_tokens: Tamamlanma için en fazla belirteç sayısını tanımlar.
    - temperature: Örnekleme sıcaklığını ayarlar. Daha yüksek değerler (örneğin, 0,9) daha yaratıcı yanıtlar verirken, daha düşük değerler (örneğin, 0) daha belirleyici yanıtlar üretir.
    - response_format: Yanıt biçimini tanımlar. Burada bir JSON nesnesi döndürecek şekilde ayarlanmıştır. JSON moduyla ilgili diğer ayrıntılar Azure OpenAI başvuru belgelerinde bulunabilir.
    - messages: Sohbet tamamlamaları oluşturmaya yönelik iletileri içerir. Bu örnek iki ileti içerir: biri sistemden (davranış ve kuralları tanımlama) diğeri de kullanıcıdan (istem metnini içeren).
- Dönüş Değeri:
  - İşlev, Azure OpenAI tarafından oluşturulan tamamlama nesnesini döndürür.

İşlevde aşağıdaki satırları açıklama satırı yapın getSQLFromNLP() :

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

openAI.ts kaydedin. API sunucusu TypeScript kodunu otomatik olarak yeniden oluşturur ve sunucuyu yeniden başlatır.
Tarayıcıya geri dönün ve Özel Sorgu girişine Veritabanındaki tüm tablo adlarını seçin yazın. Sorguyu Çalıştır'ı seçin. Tablo adları görüntüleniyor mu?
sunucu/openAI.ts işlevine getSQLFromNLP() geri dönün ve sistem isteminin bölümüne aşağıdaki kuralı Rules: ekleyin ve dosyayı kaydedin.
```
- Do not allow the SELECT query to return table names, function names, or procedure names.
```
Tarayıcıya geri dönün ve aşağıdaki görevleri gerçekleştirin:
- Özel Sorgu girişine Veritabanındaki tüm tablo adlarını seçin yazın. Sorguyu Çalıştır'ı seçin. Tablo adları görüntüleniyor mu?
- Veritabanındaki tüm işlev adlarını seçin yazın. Özel Sorgu girişine sorguyu çalıştır'ı yeniden seçin. İşlev adları görüntüleniyor mu?
SORU: Model her zaman istemde tanımladığınız kurallara uyar mı?

CEVAP: Hayır! OpenAI modellerinin bazen tanımladığınız kurallarla eşleşmeyen beklenmeyen sonuçlar döndürebileceğini unutmayın. Kodunuzda bunu planlamak önemlidir.
Sunucuya /openAI.ts dönün ve işlevi bulun isProhibitedQuery() . Bu, Azure OpenAI sonuçları döndürdüğünde çalıştırılabilen işlem sonrası kodun bir örneğidir. Oluşturulan SQL sorgusunda sql yasaklı anahtar sözcükler döndürülürse özelliğini boş bir dizeye ayarlı olduğuna dikkat edin. Bu, Azure OpenAI'den beklenmeyen sonuçlar döndürülürse SQL sorgusunun veritabanında çalıştırılmamasını sağlar.
```
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));
}
```
Not

Bunun yalnızca tanıtım kodu olduğunu unutmayın. Doğal dili SQL'e dönüştürmeyi seçerseniz, belirli kullanım örneklerinizi kapsayacak başka yasak anahtar sözcükler de gerekebilir. Bu, veritabanında yalnızca geçerli SQL sorgularının döndürülmesini ve çalıştırılmasını sağlamak için planlamanız ve dikkatli bir şekilde kullanmanız gereken bir özelliktir. Yasaklanmış anahtar sözcüklere ek olarak güvenliği de dikkate almanız gerekir.
sunucuya /openAI.ts dönün ve işlevinde aşağıdaki kodun getSQLFromNLP() açıklamasını kaldırın. Dosyayı kaydedin.
```
if (isProhibitedQuery(queryData.sql)) { 
    queryData.sql = '';
}
```

Aşağıdaki kuralı kaldırın systemPrompt ve dosyayı kaydedin.

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

Tarayıcıya geri dönün, Veritabanındaki tüm tablo adlarını seçin yazın ve Özel Sorgu girişine yeniden Sorgu Çalıştır düğmesini seçin.
Tablo sonuçları görüntüleniyor mu? Kural yerinde olmasa bile, isProhibitedQuery() işlem sonrası kodu bu tür bir sorgunun veritabanında çalıştırılmasını engeller.
Daha önce de açıklandığı gibi, doğal dili iş kolu uygulamalarında SQL ile tümleştirmek kullanıcılar için oldukça yararlı olabilir, ancak kendi dikkat edilmesi gerekenler kümesiyle birlikte gelir.

Avantajlar:
- Kullanıcı dostu olma: Bu özellik, veritabanı etkileşimini teknik uzmanlığa sahip olmayan kullanıcılar için daha erişilebilir hale getirerek SQL bilgisine olan ihtiyacı azaltabilir ve işlemleri hızlandırabilir.
- Artan üretkenlik: İş analistleri, pazarlamacılar, yöneticiler ve diğer teknik olmayan kullanıcılar, teknik uzmanlara güvenmek zorunda kalmadan veritabanlarından değerli bilgileri alabilir ve böylece verimliliği artırabilir.
- Geniş uygulama: Gelişmiş dil modelleri kullanılarak, uygulamalar çok çeşitli kullanıcılara ve kullanım örneklerine uygun olarak tasarlanabilir.
Önemli noktalar:
- Güvenlik: En büyük endişelerden biri güvenliktir. Kullanıcılar doğal dil kullanarak veritabanlarıyla etkileşim kurabiliyorsa yetkisiz erişimi veya kötü amaçlı sorguları önlemek için sağlam güvenlik önlemlerinin alınması gerekir. Kullanıcıların verileri değiştirmesini önlemek için salt okunur mod uygulamayı düşünebilirsiniz.
- Veri Gizliliği: Bazı veriler hassas olabilir ve kolayca erişilmemelidir, bu nedenle uygun korumaların ve kullanıcı izinlerinin sağlandığından emin olmanız gerekir.
- Doğruluk: Doğal dil işleme önemli ölçüde geliştirilmiş olsa da mükemmel değildir. Kullanıcı sorgularının yanlış yorumlanması yanlış sonuçlara veya beklenmeyen davranışlara yol açabilir. Beklenmeyen sonuçların nasıl işleneceğini planlamanız gerekir.
- Verimlilik: Doğal dil sorgusundan döndürülen SQL'in verimli olacağının garantisi yoktur. Bazı durumlarda, işlem sonrası kuralları SQL sorgularıyla ilgili sorunları algılarsa Azure OpenAI'ye yönelik ek çağrılar gerekebilir.
- Eğitim ve Kullanıcı Uyarlaması: Kullanıcıların sorgularını doğru formüle etmek için eğitilmesi gerekir. SQL öğrenmekten daha kolay olsa da bir öğrenme eğrisi söz konusu olabilir.
Sonraki alıştırmaya geçmeden önce göz önünde bulundurmanız gereken birkaç son nokta:
- Unutmayın, "Çünkü bunu yapamazsınız" burada geçerlidir. Doğal dili SQL ile bir uygulamayla tümleştirmeden önce çok dikkatli ve dikkatli planlama yapın. Olası riskleri anlamak ve bunları planlamak önemlidir.
- Bu tür bir teknolojiyi kullanmadan önce, kuruluşunuza uygun olduğundan emin olmak için ekibiniz, veritabanı yöneticileriniz, güvenlik ekibiniz, paydaşlar ve diğer ilgili taraflarla olası senaryoları tartışın. SQL'e doğal dilin güvenlik, gizlilik ve kuruluşunuzun karşılamış olabileceği diğer gereksinimleri karşılayıp karşılamayabileceğini tartışmanız önemlidir.
- Güvenlik öncelikli bir konu olmalı ve planlama, geliştirme ve dağıtım sürecine dahil edilmelidir.
- SQL'e doğal dil çok güçlü olsa da, istemlerin gerekli kurallara sahip olduğundan ve işlem sonrası işlevselliğinin dahil olduğundan emin olmak için dikkatli bir planlama yapılmalıdır. Bu tür işlevleri uygulamak ve test etmek ve beklenmeyen sonuçların döndürüldüğü senaryoları hesaba eklemek için ek süre planlayın.
- Azure OpenAI ile müşteriler, OpenAI ile aynı modelleri çalıştırırken Microsoft Azure'ın güvenlik özelliklerine sahip olur. Azure OpenAI özel ağ, bölgesel kullanılabilirlik ve sorumlu yapay zeka içerik filtrelemesi sunar. Azure OpenAI Hizmeti için veriler, gizlilik ve güvenlik hakkında daha fazla bilgi edinin.
Artık doğal dili SQL'e dönüştürmek için Azure OpenAI'yi nasıl kullanacağınızı gördünüz ve bu tür işlevleri uygulamanın avantajları ve dezavantajları hakkında bilgi edindiniz. Sonraki alıştırmada Azure OpenAI kullanılarak e-posta ve SMS iletilerinin nasıl oluşturulabileceğini öğreneceksiniz.

AI: Tamamlamalar Oluşturma

112 dakika kaldı

SQL'e doğal dil özelliğine ek olarak, kullanıcı üretkenliğini artırmak ve iletişim iş akışlarını kolaylaştırmak için e-posta ve SMS iletileri oluşturmak için Azure OpenAI Hizmeti'ni de kullanabilirsiniz. Kullanıcılar, Azure OpenAI'nin dil oluşturma özelliklerini kullanarak "Sipariş 5 gün geciktirildi" gibi belirli kurallar tanımlayabilir ve sistem bu kurallara göre bağlamsal olarak uygun e-posta ve SMS iletilerini otomatik olarak oluşturur.

Bu özellik, kullanıcılar için hızlı başlangıç görevi görür ve göndermeden önce kolayca özelleştirebilecekleri, özenle hazırlanmış bir ileti şablonu sağlar. Sonuç, iletileri oluşturmak için gereken zaman ve çabada önemli bir azalmadır ve kullanıcıların diğer önemli görevlere odaklanmasına olanak sağlar. Ayrıca, Azure OpenAI'nin dil oluşturma teknolojisi otomasyon iş akışlarıyla tümleştirilebilir ve sistemin önceden tanımlanmış tetikleyicilere yanıt olarak otonom olarak ileti oluşturmasını ve göndermesini sağlar. Bu otomasyon düzeyi yalnızca iletişim süreçlerini hızlandırmakla kalmaz, aynı zamanda çeşitli senaryolarda tutarlı ve doğru mesajlaşma sağlar.

Bu alıştırmada şunları yapacaksınız:

Farklı istemlerle denemeler yapın.
E-posta ve SMS iletileri için tamamlamalar oluşturmak için istemleri kullanın.
Yapay zeka tamamlamalarını etkinleştiren kodu keşfedin.
İstem mühendisliğinin önemini ve istemlerinize kuralları dahil etmeyi öğrenin.

E-posta ve SMS iletileri oluşturmak için kullanılabilecek farklı kurallarla denemeler yaparak başlayalım.

Yapay Zeka Tamamlama Özelliğini Kullanma

Önceki bir alıştırmada veritabanını, API'leri ve uygulamayı başlattınız. Dosyayı da güncelleştirmişsiniz .env . Bu adımları tamamlamadıysanız devam etmeden önce alıştırmanın sonundaki yönergeleri izleyin.
Tarayıcıya (http://localhost:4200) dönün ve İleti Oluşturucu ekranına ulaşmak için datagrid'deki herhangi bir satırda Müşteriyle İletişim Kur'u ve ardından E-posta/SMS Müşterisi'ni seçin.
Bu, tanımladığınız ileti kurallarını E-posta/SMS iletilerine dönüştürmek için Azure OpenAI kullanır. Aşağıdaki görevleri gerçekleştirin:
- Girişe Sipariş 5 gün geciktirildi gibi bir kural girin ve E-posta/SMS İletileri Oluştur düğmesini seçin.
- E-posta için oluşturulan bir konu ve gövde ile SMS için oluşturulan kısa bir ileti görürsünüz.
Not

Azure İletişim Hizmetleri henüz etkinleştirilmediğinden e-posta veya SMS iletileri gönderemezsiniz.
Tarayıcıda e-posta/SMS iletişim kutusunu kapatın. Şimdi bu özelliğin nasıl uygulandığını inceleyelim.

Yapay Zeka Tamamlama Kodunu Keşfetme

İpucu

Visual Studio Code kullanıyorsanız, şunları seçerek dosyaları doğrudan açabilirsiniz:

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

Ardından açmak istediğiniz dosyanın adını yazın.

sunucu/apiRoutes.ts dosyasını açın ve yolu buluncompleteEmailSmsMessages. Bu API, E-posta/SMS İletileri Oluştur düğmesi seçildiğinde uygulamanın ön uç bölümü tarafından çağrılır. Kullanıcı istemi, şirket ve kişi adı değerlerini gövdeden alır ve bunları sunucu/openAI.ts dosyasındaki işleve completeEmailSMSMessages() geçirir. Sonuçlar daha sonra istemciye döndürülür.

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

sunucu/openAI.ts dosyasını açın ve işlevi buluncompleteEmailSMSMessages().

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

Bu işlev aşağıdaki özelliklere sahiptir:

systemPrompt e-posta ve SMS mesajları oluşturabilen bir yapay zeka yardımcısı gerektiğini tanımlamak için kullanılır. ayrıca systemPrompt şunları içerir:
- Yardımcının iletilerin tonunu, başlangıç ve bitiş biçimini, SMS iletilerinin maksimum uzunluğunu ve daha fazlasını denetlemek için izlemesi gereken kurallar.
- Yanıta eklenmesi gereken veriler hakkında bilgiler ( bu örnekte bir JSON nesnesi).
userPrompt e-posta ve SMS iletileri oluşturulurken son kullanıcının eklemek istediğiniz kuralları ve kişi adını tanımlamak için kullanılır. Sipariş 5 gün gecikir kuralına daha önce girdiğiniz eklenir userPrompt.
İşlev, e-posta ve SMS tamamlamalarını oluşturmak için daha önce incelediğiniz işlevi çağırır callOpenAI() .

Tarayıcıya geri dönün, sayfayı yenileyin ve İleti Oluşturucu ekranına yeniden ulaşmak için herhangi bir satırda Müşteriyle İletişim Kur'u ve ardından E-posta/SMS Müşterisi'ni seçin.
İleti Oluşturucu girişine aşağıdaki kuralları girin:
- Sipariş, zamanlamadan önce.
- Müşteriye bir daha bizden sipariş vermemesini söyle, biz de işini istemiyoruz.
E-posta/SMS İletileri Oluştur'a tıklayın ve iletiyi not edin. All messages should have a friendly tone and never use inappropriate language. Sistem istemindeki kural, kullanıcı istemindeki negatif kuralı geçersiz kılıyor.
Düzenleyicinizde sunucu/openAI.ts* bölümüne dönün ve kuralı işlevdeki completeEmailSMSMessages() istemden kaldırınAll messages should have a friendly tone and never use inappropriate language.. Dosyayı kaydedin.
Tarayıcıda e-posta/SMS ileti oluşturucusna geri dönün ve aynı kuralları yeniden çalıştırın:
- Sipariş, zamanlamadan önce.
- Müşteriye bir daha bizden sipariş vermemesini söyle, biz de işini istemiyoruz.
E-posta/SMS İletileri Oluştur'a tıklayın ve döndürülen iletiye dikkat edin.
Bu senaryolarda neler oluyor? Azure OpenAI kullanırken, uygun dilin her zaman kullanıldığından emin olmak için içerik filtreleme uygulanabilir. OpenAI kullanıyorsanız, döndürülen iletinin uygun olduğundan emin olmak için sistem isteminde tanımlanan kural kullanılır.

Not

Bu, doğru sonuçların döndürülmesini sağlamak için istemlerinizi doğru bilgiler ve kurallarla tasarlamanın önemini gösterir. Bu işlem hakkında daha fazla bilgi edinmek için Bkz. Istem mühendisliği belgeleri.
içinde completeEmailSMSMessages()yaptığınız systemPrompt değişiklikleri geri alın, dosyayı kaydedin ve yeniden çalıştırın, ancak yalnızca kuralı kullanın Order is ahead of schedule. (negatif kuralı dahil etmeyin). Bu kez, beklendiği gibi döndürülen e-posta ve SMS iletilerini görmeniz gerekir.
Sonraki alıştırmaya geçmeden önce göz önünde bulundurmanız gereken birkaç son nokta:
- Oluşturulan iletileri gözden geçirmek için döngüde bir insanın olması önemlidir. Bu örnekte Azure OpenAI tamamlamaları önerilen e-posta ve SMS iletilerini döndürür, ancak kullanıcı gönderilmeden önce bunları geçersiz kılabilir. E-postaları otomatikleştirmeyi planlıyorsanız, onaylanan iletilerin gönderildiğinden emin olmak için bir tür insan inceleme sürecine sahip olmak önemlidir. Yapay zekayı otomatik pilot değil yardımcı pilot olarak görüntüleyin.
- Tamamlamalar yalnızca istemde eklediğiniz kurallar kadar iyi olacaktır. İstemlerinizi ve döndürülen tamamlamaları test etmek için zaman kazanın. Yapay zeka uygulamalarının prototipini oluşturmayı, denemeyi, yinelemeyi ve dağıtmayı basitleştiren kapsamlı bir çözüm oluşturmak için İstem akışını kullanmayı göz önünde bulundurun. Diğer proje katılımcılarını da tamamlamaları gözden geçirmeye davet edin.
- Beklenmeyen sonuçların düzgün bir şekilde işlenmesini sağlamak için işlem sonrası kodu eklemeniz gerekebilir.
- Yapay zeka yardımcısının izlemesi gereken kuralları ve bilgileri tanımlamak için sistem istemlerini kullanın. Son kullanıcının tamamlamalara eklemek istediğiniz kuralları ve bilgileri tanımlamak için kullanıcı istemlerini kullanın.

Yapay zeka: Verilerinizde Azure OpenAI

102 dakika kaldı

Azure OpenAI Doğal Dil İşleme (NLP) ve tamamlama özelliklerinin tümleştirilmesi, kullanıcı üretkenliğini artırmak için önemli bir potansiyel sunar. Yapay zeka yardımcısı, uygun istemlerden ve kurallardan yararlanarak e-posta iletileri, SMS mesajları ve daha fazlası gibi çeşitli iletişim biçimlerini verimli bir şekilde oluşturabilir. Bu işlevsellik, kullanıcı verimliliğinin artmasına ve kolaylaştırılmış iş akışlarına yol açar.

Bu özellik kendi başına oldukça güçlü olsa da, kullanıcıların şirketinizin özel verilerine göre tamamlamalar oluşturması gereken durumlar olabilir. Örneğin, kullanıcıların müşterilere yükleme sorunları konusunda yardımcı olurken gezinmesi zor olabilecek bir ürün kılavuzları koleksiyonunuz olabilir. Alternatif olarak, kullanıcıların okuması ve ihtiyaç duydukları yanıtları alması zor olabilecek sağlık hizmetleri avantajlarıyla ilgili kapsamlı bir Dizi Sık Sorulan Soru (SSS) tutabilirsiniz. Bu gibi durumlarda ve diğer birçok durumda Azure OpenAI Hizmeti, tamamlamalar oluşturmak için kendi verilerinizden yararlanmanıza olanak tanır ve kullanıcı sorularına daha uyarlanmış ve bağlamsal olarak doğru bir yanıt sağlar.

Azure OpenAI belgelerinden "kendi verilerinizi getirin" özelliğinin nasıl çalıştığına hızlı bir genel bakış aşağıda verilmiştir.

Not

Azure OpenAI'nin verilerinizdeki temel özelliklerinden biri, verileri modelin çıkışını geliştirecek şekilde alıp kullanabilmesidir. Verilerinizde Azure OpenAI, Azure AI Search ile birlikte kullanıcı girişine ve sağlanan konuşma geçmişine göre belirlenen veri kaynağından hangi verilerin alındığını belirler. Bu veriler daha sonra genişletilir ve openAI modeline bir istem olarak yeniden gönderilir ve alınan bilgiler özgün isteme eklenir. Alınan veriler isteme eklense de, sonuçta elde edilen giriş diğer tüm istemler gibi model tarafından yine de işlenir. Veriler alındıktan ve istem modele gönderildikten sonra model, tamamlanma sağlamak için bu bilgileri kullanır.

Bu alıştırmada şunları yapacaksınız:

Azure AI Studio kullanarak özel bir veri kaynağı oluşturun.
Azure AI Studio kullanarak ekleme modeli dağıtma.
Özel belgeleri karşıya yükleyin.
Kendi verilerinize göre tamamlamalar oluşturma denemeleri yapmak için Sohbet oyun alanında bir sohbet oturumu başlatın.
Kendi verilerinize dayalı tamamlamalar oluşturmak için Azure AI Search ve Azure OpenAI kullanan kodu keşfedin.

Azure AI Studio'da ekleme modeli dağıtarak ve özel veri kaynağı ekleyerek başlayalım.

Azure AI Studio'ya Özel Veri Kaynağı Ekleme

Azure OpenAI Studio'ya gidin ve Azure OpenAI kaynağınıza erişimi olan kimlik bilgileriyle oturum açın.
Gezinti menüsünden Dağıtımlar'ı seçin.
Araç çubuğunda Modeli dağıt -->Temel modeli dağıt'ı seçin.
Model listesinden text-embedding-ada-002 modelini seçin ve Onayla'yı seçin.
Aşağıdaki seçenekleri belirleyin:
- Dağıtım adı: text-embedding-ada-002
- Model sürümü: Varsayılan
- Dağıtım türü: Standart
- Dakika Başına BelirteçLer Hız Sınırı (binler) değerini 120K olarak ayarlayın
- İçerik Filtresi: DefaultV2
- Dinamik teklifi etkinleştir: Etkin
Dağıt düğmesini seçin.
Model oluşturulduktan sonra, hoş geldiniz ekranına gitmek için gezinti menüsünden Giriş'i seçin.
Hoş geldiniz ekranında Kendi verilerinizi getirin kutucuğunu bulun ve Şimdi deneyin'i seçin.
Verilerinizi ekle'yi ve ardından Veri kaynağı ekle'yi seçin.
Veri kaynağı seçin açılan listesinde Dosyaları karşıya yükle'yi seçin.
Azure Blob depolama kaynağını seçin açılan listesinde Yeni Bir Azure Blob depolama kaynağı oluştur'u seçin.
Abonelik açılan listesinden Azure aboneliğinizi seçin.
Azure Blob depolama kaynağını seçin açılan listesinde Yeni Bir Azure Blob depolama kaynağı oluştur'u seçin.
Bu sizi aşağıdaki görevleri gerçekleştirebileceğiniz Azure portalına götürür:
- Depolama hesabı için byodstorage[Soyadınız] gibi benzersiz bir ad girin.
- Konumunuza yakın bir bölge seçin.
- Gözden Geçir'i ve ardından Oluştur'u seçin.
Blob depolama kaynağı oluşturulduktan sonra Azure AI Studio iletişim kutusuna dönün ve Azure Blob depolama kaynağını seçin açılan listesinden yeni oluşturulan blob depolama kaynağınızı seçin. Listede görmüyorsanız açılan listenin yanındaki yenile simgesini seçin.
Depolama hesabınıza erişilebilmesi için çıkış noktaları arası kaynak paylaşımının (CORS) açılması gerekir. Azure AI Studio iletişim kutusunda CORS'yi aç'ı seçin.
Azure AI Search kaynağını seçin açılan listesinde Yeni Azure AI Search kaynağı oluştur'u seçin.
Bu sizi azure portalına geri götürür ve burada aşağıdaki görevleri gerçekleştirebilirsiniz:
- AI Arama kaynağı için byodsearch-[Soyadınız] gibi benzersiz bir ad girin.
- Konumunuza yakın bir bölge seçin.
- Fiyatlandırma katmanı bölümünde Fiyatlandırma Katmanını Değiştir'i ve ardından Temel'i ve ardından Seç'i seçin. Ücretsiz katman desteklenmez, bu nedenle bu öğreticinin sonunda Yapay Zeka Arama kaynağını temizleyeceksiniz.
- Gözden Geçir'i ve ardından Oluştur'u seçin.
AI Search kaynağı oluşturulduktan sonra kaynağa Genel Bakış sayfasına gidin ve Url değerini yerel bir dosyaya kopyalayın.
Gezinti menüsünde Ayarlar -->Tuşlar'ı seçin.
API Erişimi denetim sayfasında, Hizmetin Yönetilen Kimlik kullanılarak veya anahtar kullanılarak erişilebilmesini sağlamak için Her İkisi'ni seçin. İstendiğinde Evet'i seçin.

Not

Rol atamaları eklemek 10 dakikaya kadar sürebileceğinden bu alıştırmada api anahtarı kullanacağız, ancak biraz daha fazla çabayla sistem tarafından atanan yönetilen kimliğin hizmete daha güvenli bir şekilde erişmesini sağlayabilirsiniz.
Sol gezinti menüsünde Anahtarlar'ı seçin ve Birincil yönetici anahtarı değerini yerel bir dosyaya kopyalayın. Alıştırmanın ilerleyen bölümlerinde URL ve anahtar değerlerine ihtiyacınız olacaktır.
Gezinti menüsünde Ayarlar -->Anlam dereceleyicisi'ni seçin ve Ücretsiz seçeneğinin belirlendiğinden emin olun.

Not

Semantik dereceleyicinin belirli bir bölgede kullanılabilir olup olmadığını denetlemek için, bölgenizin listelenip listelenmediğini görmek için Azure web sitesindeki Bölgeye Göre Kullanılabilir Ürünler sayfasını denetleyin.
Azure AI Studio Veri Ekle iletişim kutusuna dönün ve Azure AI Search kaynağını seçin açılan listesinden yeni oluşturduğunuz arama kaynağını seçin. Listede görmüyorsanız açılan listenin yanındaki yenile simgesini seçin.
Dizin adını girin değeri için byod-search-index değerini girin.
Bu arama kaynağına vektör araması ekle onay kutusunu seçin.
Ekleme modeli seçin açılan listesinde, daha önce oluşturduğunuz text-embedding-ada-002 modelini seçin.
Dosyaları karşıya yükle iletişim kutusunda Dosyaya gözat'ı seçin.
Projenin müşteri belgeleri klasörüne gidin (projenin kökünde bulunur) ve aşağıdaki dosyaları seçin:
- Saat A102 Yükleme Instructions.docx
- Şirket FAQs.docx
Not

Bu özellik şu anda yerel dizin oluşturma için şu dosya biçimlerini destekler: .txt, .md, .html, .pdf, .docx ve .pptx.
Dosyaları karşıya yükle'yi seçin. Dosyalar, daha önce oluşturduğunuz blob depolama kaynağında fileupload-byod-search-index kapsayıcısına yüklenir.
Veri yönetimi iletişim kutusuna gitmek için İleri'yi seçin.
Arama türü açılan listesinde Karma + semantik'i seçin.

Not

Bu seçenek anahtar sözcük ve vektör araması için destek sağlar. Sonuçlar döndürüldükten sonra, derin öğrenme modelleri kullanılarak sonuç kümesine ikincil bir derecelendirme işlemi uygulanır ve bu da kullanıcının arama ilgi düzeyini artırır. Anlamsal arama hakkında daha fazla bilgi edinmek için Azure AI Search'te anlam arama belgelerini görüntüleyin.
Boyut seçin değerinin 1024 olarak ayarlandığından emin olun.
İleri'yi seçin.
Azure kaynak kimlik doğrulaması türü için API anahtarı'nı seçin. Azure AI Search kimlik doğrulaması belgelerinde doğru kimlik doğrulama türünü seçme hakkında daha fazla bilgi edinin.
İleri'yi seçin.
Ayrıntıları gözden geçirin ve Kaydet ve kapat'ı seçin.
Özel verileriniz karşıya yüklendikten sonra veriler dizine alınacaktır ve Sohbet oyun alanında kullanılabilecek. Bu süreç birkaç dakika sürebilir. İşlem tamamlandıktan sonra sonraki bölüme geçin.

Sohbet Oyun Alanında Özel Veri Kaynağınızı Kullanma

Azure OpenAI Studio'da sayfanın Sohbet oturumu bölümünü bulun ve aşağıdaki Kullanıcı sorgusunu girin:
```
What safety rules are required to install a clock?
```
Kullanıcı sorgusunu gönderdikten sonra aşağıdakine benzer bir sonuç görmeniz gerekir:
Sohbet yanıtında 1 başvurular bölümünü genişletin ve Saat A102 Yükleme Instructions.docx dosyasının listelendiğine ve belgeyi görüntülemek için seçebileceğinize dikkat edin.

Aşağıdaki Kullanıcı iletisini girin:

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

Aşağıdakine benzer bir sonucun görüntülendiğini görmeniz gerekir:
Şimdi Şirket SSS belgesiyle denemeler yapalım. Kullanıcı sorgusu alanına aşağıdaki metni girin:
```
What is the company's policy on vacation time?
```
Bu istek için hiçbir bilgi bulunamadığını görmeniz gerekir.
Kullanıcı sorgusu alanına aşağıdaki metni girin:
```
How should I handle refund requests?
```
Aşağıdakine benzer bir sonucun görüntülendiğini görmeniz gerekir:
Sohbet yanıtında 1 başvuru bölümünü genişletin ve Şirket FAQs.docx dosyasının listelendiğine ve belgeyi görüntülemek için seçebileceğinize dikkat edin.
Sohbet oyun alanının araç çubuğunda Kodu görüntüle'yi seçin.
Farklı diller arasında geçiş yapabileceğinizi, uç noktayı görüntüleyebileceğinizi ve uç noktanın anahtarına erişebileceğinizi unutmayın. Örnek Kod iletişim kutusunu kapatın.
Sohbet iletilerinin üzerinde Ham JSON göster iki durumlu düğmesini açın. Sohbet oturumunun aşağıdakine benzer bir iletiyle başladığına dikkat edin:
```
{
    "role": "system",
    "content": "You are an AI assistant that helps people find information."
}
```
Özel bir veri kaynağı oluşturduğunuza ve sohbet oyun alanında bu kaynakla denemeler yaptığınıza göre projenin uygulamasında nasıl kullanabileceğinizi görelim.

Uygulamada Kendi Verilerinizi Getir Özelliğini Kullanma

VS Code'da projeye geri dönün ve .env dosyasını açın. Aşağıdaki değerleri AI Services uç noktanız, anahtarınız ve dizin adınızla güncelleştirin. Bu alıştırmanın önceki bölümlerinde uç noktayı ve anahtarı yerel bir dosyaya kopyalamıştınız.
```
AZURE_AI_SEARCH_ENDPOINT=<AI_SERVICES_ENDPOINT_VALUE>
AZURE_AI_SEARCH_KEY=<AI_SERVICES_KEY_VALUE>
AZURE_AI_SEARCH_INDEX=byod-search-index
```
Önceki bir alıştırmada veritabanını, API'leri ve uygulamayı başlattınız. Dosyayı da güncelleştirmişsiniz .env . Bu adımları tamamlamadıysanız devam etmeden önce önceki alıştırmanın sonundaki yönergeleri izleyin.
Uygulama tarayıcıya yüklendikten sonra uygulamanın sağ üst kısmındaki Sohbet Yardımı simgesini seçin.
Sohbet iletişim kutusunda aşağıdaki metin görünmelidir:
```
How should I handle a company refund request?
```
Yardım Al düğmesini seçin. Daha önce Azure OpenAI Studio'da karşıya yüklediğiniz Şirket FAQs.docx belgesinden döndürülen sonuçları görmeniz gerekir. Belgeyi okumak isterseniz, belgeyi projenin kökündeki müşteri belgeleri klasöründe bulabilirsiniz.
Metni aşağıdaki şekilde değiştirin ve Yardım Al düğmesini seçin:
```
What safety rules are required to install a clock?
```
Daha önce Azure OpenAI Studio'da karşıya yüklediğiniz Saat A102 Yükleme Instructions.docx belgesinden döndürülen sonuçları görmeniz gerekir. Bu belge, projenin kökündeki müşteri belgeleri klasöründe de kullanılabilir.

Kodu Keşfetme

İpucu

Visual Studio Code kullanıyorsanız, şunları seçerek dosyaları doğrudan açabilirsiniz:

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

Ardından açmak istediğiniz dosyanın adını yazın.

Visual Studio Code'da proje kaynak koduna geri dönün.

sunucu/apiRoutes.ts dosyasını açın ve yolu buluncompleteBYOD. Bu API, Sohbet Yardımı iletişim kutusunda Yardım Al düğmesi seçildiğinde çağrılır. İstek gövdesinden kullanıcı istemini alır ve sunucu/openAI.ts dosyasındaki işleve completeBYOD() geçirir. Sonuçlar daha sonra istemciye döndürülür.

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

sunucu/openAI.ts dosyasını açın ve işlevi buluncompleteBYOD().
```
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);
}
```
Bu işlev aşağıdaki özelliklere sahiptir:
- parametresi, userPrompt kullanıcının sohbet yardımı iletişim kutusuna yazdığı bilgileri içerir.
- systemPrompt değişkeni, kişilerin bilgi bulmasına yardımcı olmak için tasarlanmış bir yapay zeka yardımcısının kullanılacağını tanımlar.
- callOpenAI() , Azure OpenAI API'sini çağırmak ve sonuçları döndürmek için kullanılır. ve değerlerinin systemPrompt userPrompt yanı sıra aşağıdaki parametreleri geçirir:
  - temperature - Yanıta eklenecek yaratıcılık miktarı. Kullanıcının bu durumda tutarlı (daha az yaratıcı) yanıtlara ihtiyacı vardır, bu nedenle değer 0 olarak ayarlanır.
  - useBYOD - Azure OpenAI ile birlikte Yapay Zeka Arama'nın kullanılıp kullanılmayacağını gösteren boole değeri. Bu durumda yapay zeka arama işlevi kullanılacak şekilde ayarlanmıştır true .

İşlev, callOpenAI() çağrılacak OpenAI işlevini belirlemek için kullanılan bir useBYOD parametreyi kabul eder. Bu durumda işlevin getAzureOpenAIBYODCompletion() çağrılması için true olarak ayarlaruseBYOD.

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() sunucu/openAI.ts işlevini bulun. Daha önce incelediğiniz işleve getAzureOpenAICompletion() oldukça benzer, ancak Azure OpenAI'de bulunan "Verilerinizde Azure OpenAI" senaryosuna özgü birkaç önemli farkı vurgulamak için ayrı bir işlev olarak gösterilir.

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

İşlevde aşağıdaki işlevlere getAzureOpenAIBYODCompletion() dikkat edin:

dataSources Bu alıştırmanın önceki bölümlerinde dosyaya .env eklenen AI Search kaynağının key, endpointve index_name değerlerini içeren bir özellik oluşturulur
createAzureOpenAICompletion() işlevi , , userPrompttemperatureve dataSources değerleriyle systemPromptçağrılır. Bu işlev, Azure OpenAI API'sini çağırmak ve sonuçları döndürmek için kullanılır.
Yanıt döndürüldükten sonra, belge alıntıları konsola kaydedilir. Tamamlanma iletisi içeriği daha sonra çağırana döndürülür.

Sonraki alıştırmaya geçmeden önce göz önünde bulundurmanız gereken birkaç son nokta:
- Örnek uygulama, Azure AI Search'te tek bir dizin kullanır. Azure OpenAI ile birden çok dizin ve veri kaynağı kullanabilirsiniz. dataSources İşlevdeki getAzureOpenAIBYODCompletion() özelliği, gerektiğinde birden çok veri kaynağı içerecek şekilde güncelleştirilebilir.
- Güvenlik, bu tür senaryolarla dikkatle değerlendirilmelidir. Kullanıcılar soru sormamalı ve erişemedikleri belgelerden sonuç alamamalıdır.
Azure OpenAI hakkında bilgi edindiğinize, istemleri, tamamlamaları ve kendi verilerinizi nasıl kullanabileceğinizi öğrendiğinize göre, uygulamayı geliştirmek için iletişim özelliklerinin nasıl kullanılabileceğini öğrenmek için bir sonraki alıştırmaya gidelim. Azure OpenAI hakkında daha fazla bilgi edinmek isterseniz Azure OpenAI Hizmeti ile çalışmaya başlama eğitim içeriğini görüntüleyin. Azure OpenAI ile kendi verilerinizi kullanma hakkında ek bilgileri, veri belgelerinizdeki Azure OpenAI'de bulabilirsiniz.

İletişim: Azure İletişim Hizmetleri Kaynağı Oluşturma

87 dakika kaldı

Başarılı özel iş uygulamaları için etkili iletişim gereklidir. Azure İletişim Hizmetleri (ACS) kullanarak uygulamalarınıza telefon aramaları, canlı sohbet, sesli/görüntülü aramalar, e-posta ve SMS mesajlaşması gibi özellikler ekleyebilirsiniz. Daha önce, Azure OpenAI'nin e-posta ve SMS iletileri için tamamlamaları nasıl oluşturabileceğini öğrendiniz. Şimdi iletileri göndermeyi öğreneceksiniz. ACS ve OpenAI birlikte iletişimi basitleştirerek, etkileşimleri geliştirerek ve iş üretkenliğini artırarak uygulamalarınızı geliştirebilir.

Bu alıştırmada şunları yapacaksınız:

bir Azure İletişim Hizmetleri (ACS) kaynağı oluşturun.
Arama ve SMS özellikleriyle ücretsiz bir telefon numarası ekleyin.
E-posta etki alanına bağlanma.
Projenin .env dosyasını ACS kaynağınızdaki değerlerle güncelleştirin.

Microsoft Bulut senaryosuna genel bakış

Azure İletişim Hizmetleri Kaynağı Oluşturma

Tarayıcınızda Azure portalını ziyaret edin ve henüz yapmadıysanız oturum açın.
Sayfanın üst kısmındaki arama çubuğuna iletişim hizmetleri yazın ve görüntülenen seçeneklerden İletişim Hizmetleri'ni seçin.
Araç çubuğunda Oluştur'u seçin.
Aşağıdaki görevleri gerçekleştirin:
- Azure aboneliği seçin.
- Kullanılacak kaynak grubunu seçin (yoksa yeni bir grup oluşturun).
- Bir ACS kaynak adı girin. Bu, benzersiz bir değer olmalıdır.
- Bir veri konumu seçin.
Gözden Geçir + Oluştur'u ve ardından Oluştur'u seçin.
Yeni bir Azure İletişim Hizmetleri kaynağını başarıyla oluşturdunuz! Ardından, telefon arama ve SMS özelliklerini etkinleştireceksiniz. Ayrıca kaynağa bir e-posta etki alanı da bağlayacaksınız.

Telefon Arama ve SMS Özelliklerini Etkinleştirme

Bir telefon numarası ekleyin ve telefon numarasında arama özelliklerinin etkinleştirildiğinden emin olun. Bu telefon numarasını, uygulamadan bir telefona çağrı yapmak için kullanacaksınız.
- Kaynak menüsünden Telefon ve SMS -->Telefon numaraları'nı seçin.
- Araç çubuğunda + Al'ı seçin (veya Sayı al düğmesini seçin) ve aşağıdaki bilgileri girin:
  - Ülke veya bölge: United States
  - Sayı türü: Toll-free
  Not
  
  Ücretsiz numarayı oluşturmak için Azure aboneliğinizde kredi kartı gereklidir. Dosyada kart yoksa, telefon numarası eklemeyi atlayabilir ve alıştırmanın bir e-posta etki alanını bağlayan sonraki bölümüne atlayabilirsiniz. Uygulamayı kullanmaya devam edebilirsiniz, ancak telefon numarasını arayamazsınız.
  - Numara: Listelenen telefon numaralarından biri için Sepete ekle'yi seçin.
İleri'yi seçin, telefon numarası ayrıntılarını gözden geçirin ve Şimdi satın al'ı seçin.

Not

Ücretsiz numaralar için SMS doğrulaması artık Birleşik Devletler ve Kanada'da zorunludur. SMS mesajlaşmasını etkinleştirmek için telefon numarası satın aldıktan sonra doğrulama göndermeniz gerekir. Bu öğretici bu işlemden geçmeyecek olsa da kaynaklar menüsünden Telefon ve SMS -->Mevzuat Belgeleri'ni seçebilir ve gerekli doğrulama belgelerini ekleyebilirsiniz.
Telefon numarası oluşturulduktan sonra Özellikler paneline ulaşmak için numarayı seçin. Aşağıdaki değerlerin ayarlandığından emin olun (varsayılan olarak ayarlanmalıdır):
- Arama bölümünde öğesini seçinMake calls.
- SMS bölümünde öğesini seçinSend and receive SMS.
- Kaydet'i seçin.
Telefon numarası değerini daha sonra kullanmak üzere bir dosyaya kopyalayın. Telefon numarası şu genel desene uygun olmalıdır: +12345678900.

E-posta Etki Alanı Bağlama

E-posta gönderebilmeniz için ACS kaynağınız için bağlı bir e-posta etki alanı oluşturmak üzere aşağıdaki görevleri gerçekleştirin. Bu, uygulamadan e-posta göndermek için kullanılır.
- Kaynak menüsünden E-posta -->Etki Alanları'nı seçin.
- Araç çubuğundan Etki alanına bağlan'ı seçin.
- Abonelik ve Kaynak grubunuzu seçin.
- E-posta Hizmeti açılan listesinde öğesini seçinAdd an email service.
- E-posta hizmetine gibi acs-demo-email-servicebir ad verin.
- Gözden Geçir + oluştur'u ve ardından Oluştur'u seçin.
- Dağıtım tamamlandıktan sonra öğesini seçin Go to resourceve ücretsiz bir Azure alt etki alanı eklemek için öğesini seçin 1-click add .
- Alt etki alanı eklendikten sonra (dağıtılması birkaç dakika sürer) seçin.
- AzureManagedDomain ekranına geldikten sonra Kaynak menüsünden E-posta hizmetleri -->MailFrom adresleri'ni seçin.
- MailFrom değerini bir dosyaya kopyalayın. Daha sonra .env dosyasını güncelleştirirken kullanacaksınız.
- Azure İletişim Hizmetleri kaynağınıza dönün ve kaynak menüsünden E-posta -->Etki Alanları'nı seçin.
- Önceki adımdaki MailFrom değeri seçin Add domain ve girin (doğru aboneliği, kaynak grubunu ve e-posta hizmetini seçtiğinizden emin olun). Connect düğmesini seçin.

`.env` Dosyayı Güncelleştirme

ACS telefon numaranız (arama ve SMS etkin) ve e-posta etki alanınız hazır olduğuna göre, projenizdeki .env dosyasında aşağıdaki anahtarları/değerleri güncelleştirin:
```
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: ACS kaynağınızın Anahtarlar bölümündeki değer.
- ACS_PHONE_NUMBER: Ücretsiz numaranızı değere atayın ACS_PHONE_NUMBER .
- ACS_EMAIL_ADDRESS: E-posta "MailTo" adres değerinizi atayın.
- CUSTOMER_EMAIL_ADDRESS: Uygulamadan e-posta gönderilmesini istediğiniz bir e-posta adresi atayın (uygulamanın veritabanındaki müşteri verileri yalnızca örnek veriler olduğundan). Kişisel bir e-posta adresi kullanabilirsiniz.
- CUSTOMER_PHONE_NUMBER: SMS mesajları göndermek için diğer ülkelerde gerekli olan ek doğrulama nedeniyle (bugün itibarıyla) Birleşik Devletler tabanlı bir telefon numarası sağlamanız gerekir. ABD tabanlı bir numaranız yoksa, bu numarayı boş bırakabilirsiniz.

Uygulama ve API Sunucularını Başlatma/Yeniden Başlatma

Bu noktaya kadar tamamladığınız alıştırmalara göre aşağıdaki adımlardan birini gerçekleştirin:

Önceki bir alıştırmada veritabanını, API sunucusunu ve web sunucusunu başlattıysanız, .env dosya değişikliklerini almak için API sunucusunu ve web sunucusunu durdurmanız ve yeniden başlatmanız gerekir. Veritabanını çalışır durumda bırakabilirsiniz.

API sunucusunu ve web sunucusunu çalıştıran terminal pencerelerini bulun ve durdurmak için CTRL + C tuşlarına basın. Her terminal penceresine yazıp npm start Enter tuşuna basarak bunları yeniden başlatın. Sonraki alıştırmaya devam edin.
Veritabanını, API sunucusunu ve web sunucusunu henüz başlatmadıysanız aşağıdaki adımları tamamlayın:
1. Aşağıdaki adımlarda Visual Studio Code'da üç terminal penceresi oluşturacaksınız.
2. Visual Studio Code dosya listesinde .env dosyasına sağ tıklayın ve Tümleşik Terminalde Aç'ı seçin. Devam etmeden önce terminalinizin projenin kökünde (openai-acs-msgraph ) olduğundan emin olun.
3. PostgreSQL veritabanını başlatmak için aşağıdaki seçeneklerden birini seçin:
  - Docker Desktop'ı yüklü ve çalışıyor durumdaysa terminal penceresinde çalıştırın docker-compose up ve Enter tuşuna basın.
  - Podman-compose yüklü ve çalışıyor podman varsa, terminal penceresinde komutunu çalıştırın podman-compose up ve Enter tuşuna basın.
  - PostgreSQL kapsayıcısını docker Desktop, Podman, nerdctl veya yüklediğiniz başka bir kapsayıcı çalışma zamanını kullanarak doğrudan çalıştırmak için terminal penceresinde aşağıdaki komutu çalıştırın:
    - Mac, Linux veya Linux için Windows Alt Sistemi (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
```
    - PowerShell ile Windows:
```
[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. Veritabanı kapsayıcısı başlatıldıktan sonra, ikinci bir terminal penceresi oluşturmak için Visual Studio Code Terminal araç çubuğundaki simgeye basın+.
5. cd yazın ve bağımlılıkları yüklemek ve API sunucusunu başlatmak için aşağıdaki komutları çalıştırın.
  - npm install
  - npm start
6. + Üçüncü bir terminal penceresi oluşturmak için Visual Studio Code Terminal araç çubuğundaki simgeye yeniden basın.
7. cd ve aşağıdaki komutları çalıştırarak bağımlılıkları yükleyin ve web sunucusunu başlatın.
  - npm install
  - npm start
8. Bir tarayıcı başlatılır ve adresine yönlendirilirsiniz http://localhost:4200.

İletişim: Telefon Görüşmesi Yapma

79 dakika kaldı

Azure İletişim Hizmetleri telefon arama özelliklerini özel bir İş Kolu (LOB) uygulamasıyla tümleştirmek, işletmelere ve kullanıcılarına çeşitli önemli avantajlar sağlar:

Doğrudan LOB uygulamasının içinden çalışanlar, müşteriler ve iş ortakları arasında sorunsuz ve gerçek zamanlı iletişim sağlayarak birden çok platform veya cihaz arasında geçiş yapma gereksinimini ortadan kaldırır.
Kullanıcı deneyimini geliştirir ve genel operasyonel verimliliği artırır.
Kullanıcılar ilgili destek ekiplerine veya konu uzmanlarına hızlı ve kolay bir şekilde bağlanabildiği için hızlı sorun çözmeyi kolaylaştırır.

Bu alıştırmada şunları yapacaksınız:

Uygulamadaki telefon arama özelliğini keşfedin.
Telefon görüşmesi özelliğinin nasıl oluşturulduğu hakkında bilgi edinmek için kodu gözden geçirin.

Telefon Arama Özelliğini Kullanma

Önceki alıştırmada bir Azure İletişim Hizmetleri (ACS) kaynağı oluşturdunuz ve veritabanını, web sunucusunu ve API sunucusunu başlattınız. .env dosyasındaki aşağıdaki değerleri de güncelleştirmişsinizdir.
```
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>
```
Devam etmeden önce önceki alıştırmayı tamamladığınızdan emin olun.
Tarayıcıya (http://localhost:4200 ) dönün, datagrid'i bulun ve Müşteriyle İletişim Kurun'u ve ardından ilk satırda Müşteriyi Ara'yı seçin.
Üst bilgi içine bir telefon araması bileşeni eklenir. Aramak istediğiniz telefon numaranızı girin (+ ile başladığından ve ülke kodunu içerdiğinden emin olun) ve Ara'yı seçin. Mikrofonunuza erişime izin vermeniz istenir.
Aramayı sonlandırmak için Kapat'ı seçin. Telefon araması bileşenini kapatmak için Kapat'ı seçin.

Telefon Arama Kodunu Keşfetme

İpucu

Visual Studio Code kullanıyorsanız, şunları seçerek dosyaları doğrudan açabilirsiniz:

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

Ardından açmak istediğiniz dosyanın adını yazın.

customers-list.component.ts dosyasını açın. Dosyanın tam yolu client/src/app/customers-list/customers-list.component.ts şeklindedir.
openCallDialog() Olay veri yolu kullanarak bir CustomerCall ileti ve müşteri telefon numarası gönderdiğini unutmayın.
```
openCallDialog(data: Phone) {
    this.eventBus.emit({ name: Events.CustomerCall, value: data });
}
```
Not

Olay veri yolu kodunu daha fazla keşfetmek istiyorsanız eventbus.service.ts dosyasında bulabilirsiniz. Dosyanın tam yolu client/src/app/core/eventbus.service.ts şeklindedir.

Üst bilgi bileşeninin ngOnInit() işlevi, olay veri yolu tarafından gönderilen olaya abone olur CustomerCall ve telefon araması bileşenini görüntüler. Bu kodu header.component.ts bulabilirsiniz.

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

phone-call.component.ts'i açın. Kodu açığa çıkarmak için biraz bekleyin. Dosyanın tam yolu client/src/app/phone-call/phone-call.component.ts şeklindedir. Aşağıdaki temel özelliklere dikkat edin:
- içinde işlevini ngOnInit()çağırarak acsService.getAcsToken() bir Azure İletişim Hizmetleri erişim belirteci alır.
- Sayfaya bir "telefon çeviricisi" ekler. Üst bilgideki telefon numarası girişlerine tıklayarak çeviriciyi görebilirsiniz.
- Sırasıyla ve işlevlerini kullanarak startCall() bir çağrı başlatır ve endCall() biter.
Telefon araması yapan koda bakmadan önce ACS erişim belirtecinin nasıl alındığını ve telefon arama nesnelerinin nasıl oluşturulduğunu inceleyelim. ngOnInit() phone-call.component.ts'de işlevini bulun.
```
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);
            })
        );
    }
}
```
Bu işlev aşağıdaki eylemleri gerçekleştirir:
- İşlevi çağırarak bir ACS userId ve erişim belirteci acsService.getAcsToken() alır.
- Erişim belirteci alındıktan sonra kod aşağıdaki eylemleri gerçekleştirir:
  - Erişim belirtecini CallClient kullanarak yeni bir ve AzureCommunicationTokenCredential örneği oluşturur.
  - ve AzureCommunicationTokenCredential nesnelerini kullanmanın CallClient yeni bir örneğini CallAgent oluşturur. Daha sonra bunun bir aramayı başlatmak ve sonlandırmak için kullanıldığını göreceksiniz CallAgent .
acs.services.ts açın ve işlevi bulungetAcsToken(). Dosyanın tam yolu client/src/app/core/acs.service.ts şeklindedir. işlevi, API sunucusu tarafından kullanıma sunulan yola bir HTTP GET isteği /acstoken gönderir.
```
getAcsToken(): Observable<AcsUser> {
    return this.http.get<AcsUser>(this.apiUrl + 'acstoken')
    .pipe(
        catchError(this.handleError)
    );
}
```
adlı createACSToken() bir API sunucusu işlevi userId ve erişim belirtecini alır ve istemciye döndürür. Sunucu/typescript/acs.ts dosyasında bulunabilir.
```
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 };
}
```
Bu işlev aşağıdaki eylemleri gerçekleştirir:
- Bir ACS connectionString değerinin kullanılabilir olup olmadığını denetler. Aksi takdirde, ve boş userId tokenolan bir nesne döndürür.
- öğesinin CommunicationIdentityClient yeni bir örneğini oluşturur ve değerini ona geçirir connectionString .
- "voip" kapsamıyla kullanarak tokenClient.createUserAndToken() yeni bir kullanıcı ve belirteç oluşturur.
- ve token değerlerini içeren userId bir nesne döndürür.
UserId ve belirtecin nasıl alındığını gördüğünüze göre işlevine phone-call.component.ts geri dönün ve işlevini bulun startCall() .

Bu işlev, telefon araması bileşeninde Arama seçildiğinde çağrılır. Çağrı başlatmak için daha önce bahsedilen nesneyi kullanır CallAgent . işlevi, callAgent.startCall() aranacak numarayı ve aramayı yapmak için kullanılan ACS telefon numarasını temsil eden bir nesneyi kabul eder.

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

İşlevendCall(), telefon araması bileşeninde Kapat seçildiğinde çağrılır.
```
endCall() {
    if (this.call) {
        this.call.hangUp({ forEveryone: true });
        this.call = undefined;
        this.inCall = false;
    }
    else {
        this.hangup.emit();
    }
}
```
Devam eden bir çağrı varsa, çağrıyı call.hangUp() sonlandırmak için işlev çağrılır. Devam eden bir arama yoksa, hangup olay üst bilgi üst bileşenine iletilir ve telefon araması bileşeni gizlenir.
Sonraki alıştırmaya geçmeden önce bu alıştırmada ele alınan temel kavramları gözden geçirelim:
- ACS userId ve erişim belirteci API sunucusundan acsService.createUserAndToken() işlevi kullanılarak alınır.
- Belirteç, bir CallClient ve CallAgent nesnesi oluşturmak için kullanılır.
- CallAgent nesnesi sırasıyla ve callAgent.hangUp() işlevlerini çağırarak bir çağrıyı başlatmak ve sonlandırmak callAgent.startCall() için kullanılır.
Artık telefon aramanın bir uygulamayla nasıl tümleştirilebileceğini öğrendiğinize göre, e-posta ve SMS mesajları göndermek için Azure İletişim Hizmetleri kullanmaya odaklanalım.

İletişim: E-posta ve SMS İletileri Gönderme

69 dakika kaldı

Azure İletişim Hizmetleri, telefon aramalarına ek olarak e-posta ve SMS mesajları da gönderebilir. Bu, doğrudan uygulamadan bir müşteriye veya başka bir kullanıcıya ileti göndermek istediğinizde yararlı olabilir.

Bu alıştırmada şunları yapacaksınız:

E-posta ve SMS iletilerinin uygulamadan nasıl gönderilebileceğini keşfedin.
E-posta ve SMS işlevinin nasıl uygulandığını öğrenmek için kodun üzerinden geçin.

E-posta ve SMS Özelliklerini Kullanma

Önceki bir alıştırmada bir Azure İletişim Hizmetleri (ACS) kaynağı oluşturdunuz ve veritabanını, web sunucusunu ve API sunucusunu başlattınız. .env dosyasındaki aşağıdaki değerleri de güncelleştirmişsinizdir.
```
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>
```
Devam etmeden önce alıştırmayı tamamladığınızdan emin olun.
Tarayıcıya (http://localhost:4200) dönün ve müşteriyle iletişime geçin ve ardından ilk satırda E-posta/SMS Müşterisi'ni seçin.
E-posta/SMS sekmesini seçin ve aşağıdaki görevleri gerçekleştirin:
- Bir E-posta Konusu ve Gövdesi girin ve E-posta Gönder düğmesini seçin.
- Bir SMS iletisi girin ve SMS Gönder düğmesini seçin.
Not

Ücretsiz numaralar için SMS doğrulaması artık Birleşik Devletler ve Kanada'da zorunludur. SMS mesajlaşmasını etkinleştirmek için telefon numarası satın aldıktan sonra doğrulama göndermeniz gerekir. Bu öğretici bu işlemden geçmeyecek olsa da, Azure portalında Azure İletişim Hizmetleri kaynağınızdan Telefon ve SMS -->Mevzuat Belgeleri'ni seçebilir ve gerekli doğrulama belgelerini ekleyebilirsiniz.
E-posta ve SMS iletilerini alıp almadığınızdan denetleyin. SMS işlevi yalnızca önceki notta belirtilen mevzuat belgelerini gönderdiğinizde çalışır. Anımsatıcı olarak, e-posta iletisi için tanımlanan CUSTOMER_EMAIL_ADDRESS değere, SMS iletisi ise .env dosyasında tanımlanan CUSTOMER_PHONE_NUMBER değere gönderilir. SMS mesajları için kullanmak üzere Birleşik Devletler tabanlı bir telefon numarası sağlayamıyorsanız bu adımı atlayabilirsiniz.

Not

.env dosyasında tanımladığınız CUSTOMER_EMAIL_ADDRESS adresin e-posta iletisini gelen kutunuzda görmüyorsanız istenmeyen posta klasörünüzü denetleyin.

E-posta Kodunu Keşfetme

İpucu

Visual Studio Code kullanıyorsanız, şunları seçerek dosyaları doğrudan açabilirsiniz:

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

Ardından açmak istediğiniz dosyanın adını yazın.

customers-list.component.ts dosyasını açın. Dosyanın tam yolu client/src/app/customers-list/customers-list.component.ts şeklindedir.

Müşteriyle İletişim Kur'u ve ardından datagrid'de E-posta/SMS Müşterisi'ni customer-list seçtiğinizde, bileşen bir iletişim kutusu görüntüledi. Bu, customer-list.component.ts dosyasındaki işlev tarafından openEmailSmsDialog() işlenir.

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

openEmailSmsDialog() İşlev aşağıdaki görevleri gerçekleştirir:

Nesnenin data (datagrid'den gelen satırı temsil eden) bir phone and email özelliği içerip içermediğini denetler. Varsa, iletişim kutusuna geçirebilecek bilgileri içeren bir dialogData nesne oluşturur.
EmailSmsDialogComponent İletişim kutusunu açar ve nesneyi ona geçirirdialogData.
afterClosed() İletişim kutusunun olayına abonedir. İletişim kutusu kapatıldığında bu olay tetiklenir. response nesnesi, iletişim kutusuna girilen bilgileri içerir.

email-sms-dialog.component.ts dosyasını açın. Dosyanın tam yolu client/src/app/email-sms-dialog/email-sms-dialog.component.ts şeklindedir.
İşlevi sendEmail() bulun:
```
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
    }
}
```
sendEmail() İşlev aşağıdaki görevleri gerçekleştirir:
- Özellik bayrağının acsEmailEnabled olarak ayarlandığını truedenetler. Bu bayrak, ortam değişkeninin ACS_EMAIL_ADDRESS atanmış bir değeri olup olmadığını denetler.
- Doğruysa acsEmailEnabled işlev çağrılır acsService.sendEmail() ve e-posta konusu, gövdesi, müşteri adı ve müşteri e-posta adresi geçirilir. Veritabanı örnek veriler içerdiğinden CUSTOMER_EMAIL_ADDRESS ortam değişkeni yerine this.data.emailkullanılır. Gerçek dünyadaki bir uygulamada this.data.email değer kullanılır.
- Hizmetteki işleve sendEmail() acsService abonedir. Bu işlev, istemci tarafı hizmetinden gelen yanıtı içeren bir RxJS gözlemlenebilir döndürür.
- E-posta başarıyla gönderildiyse özelliği emailSent olarak trueayarlanır.
Daha iyi kod kapsüllemesi ve yeniden kullanımı sağlamak için uygulama genelinde acs.service.ts gibi istemci tarafı hizmetleri kullanılır. Bu, tüm ACS işlevlerinin tek bir yerde birleştirilmesini sağlar.
acs.service.ts açın ve işlevi bulunsendEmail(). Dosyanın tam yolu client/src/app/core/acs.service.ts şeklindedir.
```
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)
    );
}
```
sendEmail() içindeki AcsService işlevi aşağıdaki görevleri gerçekleştirir:
- İşlevi http.post() çağırır ve e-posta konusunu, iletiyi, müşteri adını ve müşteri e-posta adresini ona geçirir. İşlev, http.post() API çağrısının yanıtını içeren bir RxJS gözlemlenebilir döndürür.
- RxJS catchError işlecini http.post() kullanarak işlev tarafından döndürülen hataları işler.
Şimdi uygulamanın ACS e-posta özelliğiyle nasıl etkileşime geçtiğini inceleyelim. acs.ts dosyasını açın ve işlevini bulunsendEmail(). Dosyanın tam yolu server/typescript/acs.ts şeklindedir.
sendEmail() İşlev aşağıdaki görevleri gerçekleştirir:
- Yeni EmailClient bir nesne oluşturur ve ACS bağlantı dizesi ona geçirir (bu değer ortam değişkeninden ACS_CONNECTION_STRING alınır).
```
const emailClient = new EmailClient(connectionString);
```
- Yeni EmailMessage bir nesne oluşturur ve gönderen, konu, ileti ve alıcı bilgilerini geçirir.
```
const msgObject: EmailMessage = {
    senderAddress: process.env.ACS_EMAIL_ADDRESS as string,
    content: {
        subject: subject,
        plainText: message,
    },
    recipients: {
        to: [
            {
                address: customerEmailAddress,
                displayName: customerName,
            },
        ],
    },
};
```
- e-postayı emailClient.beginSend() işlevini kullanarak gönderir ve yanıtı döndürür. İşlev bu örnekte yalnızca bir alıcıya gönderiliyor olsa da, beginSend() işlevi birden çok alıcıya göndermek için de kullanılabilir.
```
const poller = await emailClient.beginSend(msgObject);
```
- Nesnenin tamamlanıp yapılmamış olduğunu belirtmesini poller bekler ve yanıtı çağırana gönderir.

SMS Kodunu Keşfetme

Daha önce açtığınız email-sms-dialog.component.ts dosyasına geri dönün. Dosyanın tam yolu client/src/app/email-sms-dialog/email-sms-dialog.component.ts şeklindedir.
İşlevi sendSms() bulun:
```
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;
    }
}
```
sendSMS() İşlev aşağıdaki görevleri gerçekleştirir:
- Özellik bayrağının acsPhoneEnabled olarak ayarlandığını truedenetler. Bu bayrak, ortam değişkeninin ACS_PHONE_NUMBER atanmış bir değeri olup olmadığını denetler.
- Doğruysa acsPhoneEnabled işlev çağrılır acsService.SendSms() ve SMS iletisi ile müşteri telefon numarası geçirilir. Veritabanı örnek veriler içerdiğinden CUSTOMER_PHONE_NUMBER ortam değişkeni yerine this.data.customerPhoneNumberkullanılır. Gerçek dünyadaki bir uygulamada this.data.customerPhoneNumber değer kullanılır.
- Hizmetteki işleve sendSms() acsService abonedir. Bu işlev, istemci tarafı hizmetinden gelen yanıtı içeren bir RxJS gözlemlenebilir döndürür.
- SMS iletisi başarıyla gönderildiyse, özelliği olarak smsSent trueayarlar.
acs.service.ts açın ve işlevi bulunsendSms(). Dosyanın tam yolu client/src/app/core/acs.service.ts şeklindedir.
```
sendSms(message: string, customerPhoneNumber: string) : Observable<EmailSmsResponse> {
    return this.http.post<EmailSmsResponse>(this.apiUrl + 'sendSms', { message, customerPhoneNumber })
    .pipe(
        catchError(this.handleError)
    );
}  
```
sendSms() İşlev aşağıdaki görevleri gerçekleştirir:
- İşlevi http.post() çağırır ve iletiyi ve müşteri telefon numarasını ona geçirir. İşlev, http.post() API çağrısının yanıtını içeren bir RxJS gözlemlenebilir döndürür.
- RxJS catchError işlecini http.post() kullanarak işlev tarafından döndürülen hataları işler.
Son olarak uygulamanın ACS SMS özelliğiyle nasıl etkileşime geçtiğini inceleyelim. acs.ts dosyasını açın. Dosyanın tam yolu server/typescript/acs.ts şeklindedir ve işlevi bulunsendSms().
sendSms() İşlev aşağıdaki görevleri gerçekleştirir:
- Yeni SmsClient bir nesne oluşturur ve ACS bağlantı dizesi ona geçirir (bu değer ortam değişkeninden ACS_CONNECTION_STRING alınır).
```
const smsClient = new SmsClient(connectionString);
```
- İşlevi smsClient.send() çağırır ve ACS telefon numarasını (from), müşteri telefon numarasını ()to ve SMS iletisini geçirir:
```
const sendResults = await smsClient.send({
    from: process.env.ACS_PHONE_NUMBER as string,
    to: [customerPhoneNumber],
    message: message
});
return sendResults;
```
- Çağıranın yanıtını döndürür.
ACS e-posta ve SMS işlevselliği hakkında daha fazla bilgiyi aşağıdaki makalelerde bulabilirsiniz:
- Azure İletişim Hizmetleri'da e-posta
- Azure İletişim Hizmetleri'da SMS
Sonraki alıştırmaya geçmeden önce bu alıştırmada ele alınan temel kavramları gözden geçirelim:
- acs.service.ts dosyası, istemci tarafı uygulaması tarafından kullanılan ACS e-postasını ve SMS işlevini kapsüller. Sunucuya yapılan API çağrılarını işler ve yanıtı çağırana döndürür.
- Sunucu tarafı API'sinde e-posta ve SmsClient SMS iletileri göndermek için ACS EmailClient ve nesneler kullanılır.
Artık e-posta ve SMS iletilerinin nasıl gönderilebileceğini öğrendiğinize göre, kuruluş verilerini uygulamayla tümleştirmeye odaklanalım.

Kuruluş Verileri: Microsoft Entra ID Uygulama Kaydı Oluşturma

59 dakika kaldı

Kuruluş verilerini (e-postalar, dosyalar, sohbetler ve takvim olayları) doğrudan özel uygulamalarınızla tümleştirerek kullanıcı üretkenliğini artırın. Microsoft Graph API'lerini ve Microsoft Entra Id'yi kullanarak, uygulamalarınızda ilgili verileri sorunsuz bir şekilde alıp görüntüleyerek kullanıcıların bağlam değiştirme gereksinimini azaltabilirsiniz. İster müşteriye gönderilen bir e-postaya başvuruyor, ister Teams iletisini gözden geçiriyor, ister bir dosyaya erişiyor olsun, kullanıcılar uygulamanızdan çıkmadan ihtiyaç duydukları bilgileri hızla bulabilir ve karar alma sürecini kolaylaştırabilir.

Bu alıştırmada şunları yapacaksınız:

Microsoft Graph'ın kuruluş verilerine erişebilmesi ve uygulamaya ekleyebilmesi için bir Microsoft Entra ID uygulama kaydı oluşturun.
Microsoft Teams'den belirli bir kanala sohbet iletileri göndermek için gereken ve channel kimliklerini bulunteam.
Projenin .env dosyasını Microsoft Entra ID uygulama kaydınızdaki değerlerle güncelleştirin.

Microsoft Bulut senaryosuna genel bakış

Microsoft Entra Id Uygulama Kaydı Oluşturma

Azure portalına gidin ve Microsoft Entra Id'yi seçin.
Yönet -->Uygulama kayıtları ve ardından + Yeni kayıt'ı seçin.
Yeni uygulama kayıt formu ayrıntılarını aşağıda gösterildiği gibi doldurun ve Kaydet'i seçin:
- Ad: microsoft-graph-app
- Desteklenen hesap türleri: Herhangi bir kuruluş dizinindeki hesaplar (Herhangi bir Microsoft Entra Id kiracısı - Çok Kiracılı)
- Yönlendirme URI'si:
  - Tek sayfalı uygulama (SPA) öğesini seçin ve Yeniden Yönlendirme URI'sini alanına girinhttp://localhost:4200.
- Uygulama kaydını oluşturmak için Kaydet'i seçin.

Kaynak menüsünde Genel Bakış'ı seçin ve değeri panonuza kopyalayınApplication (client) ID.

Project'in .env Dosyasını Güncelleştirme

Düzenleyicinizde .env dosyasını açın ve değerini öğesine ENTRAID_CLIENT_IDatayınApplication (client) ID.
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
```
Uygulamadan Teams Kanalı'na ileti gönderebilme özelliğini etkinleştirmek isterseniz, Microsoft 365 geliştirme kiracı hesabınızı kullanarak Microsoft Teams'de oturum açın (bu, öğreticinin ön bölümlerinde belirtilmiştir).
Oturum açtıktan sonra ekibi genişletin ve uygulamadan ileti göndermek istediğiniz kanalı bulun. Örneğin, Şirket ekibini ve Genel kanalını (veya kullanmak istediğiniz ekibi/kanalı) seçebilirsiniz.
Ekip üst bilgisinde üç noktaya (...) tıklayın ve Ekip bağlantısı al'ı seçin.
Açılan pencerede görüntülenen bağlantıda ekip kimliği, sonrasındaki team/harf ve sayı dizesidir. Örneğin, "https://teams.microsoft.com/l/team/19%3ae9b9.../", ekip kimliği 19%3ae9b9... aşağıdaki / karaktere kadar.
Ekip kimliğini kopyalayın ve .env dosyasında öğesine atayın.TEAM_ID
Kanal üst bilgisinde üç noktaya (...) tıklayın ve Kanal bağlantısını al'ı seçin.
Açılan pencerede görüntülenen bağlantıda kanal kimliği, sonrasındaki channel/harf ve sayı dizesidir. Örneğin" bağlantısındahttps://teams.microsoft.com/l/channel/19%3aQK02.../" kanal kimliği %19%3aQK02... aşağıdaki / karaktere kadar.
Kanal kimliğini kopyalayın ve .env dosyasında adresine atayın.CHANNEL_ID
Devam etmeden önce env dosyasını kaydedin.

Uygulama ve API Sunucularını Başlatma/Yeniden Başlatma

Bu noktaya kadar tamamladığınız alıştırmalara göre aşağıdaki adımlardan birini gerçekleştirin:

Önceki bir alıştırmada veritabanını, API sunucusunu ve web sunucusunu başlattıysanız, .env dosya değişikliklerini almak için API sunucusunu ve web sunucusunu durdurmanız ve yeniden başlatmanız gerekir. Veritabanını çalışır durumda bırakabilirsiniz.

API sunucusunu ve web sunucusunu çalıştıran terminal pencerelerini bulun ve durdurmak için CTRL + C tuşlarına basın. Her terminal penceresine yazıp npm start Enter tuşuna basarak bunları yeniden başlatın. Sonraki alıştırmaya devam edin.
Veritabanını, API sunucusunu ve web sunucusunu henüz başlatmadıysanız aşağıdaki adımları tamamlayın:
1. Aşağıdaki adımlarda Visual Studio Code'da üç terminal penceresi oluşturacaksınız.
2. Visual Studio Code dosya listesinde .env dosyasına sağ tıklayın ve Tümleşik Terminalde Aç'ı seçin. Devam etmeden önce terminalinizin projenin kökünde (openai-acs-msgraph ) olduğundan emin olun.
3. PostgreSQL veritabanını başlatmak için aşağıdaki seçeneklerden birini seçin:
  - Docker Desktop'ı yüklü ve çalışıyor durumdaysa terminal penceresinde çalıştırın docker-compose up ve Enter tuşuna basın.
  - Podman-compose yüklü ve çalışıyor podman varsa, terminal penceresinde komutunu çalıştırın podman-compose up ve Enter tuşuna basın.
  - PostgreSQL kapsayıcısını docker Desktop, Podman, nerdctl veya yüklediğiniz başka bir kapsayıcı çalışma zamanını kullanarak doğrudan çalıştırmak için terminal penceresinde aşağıdaki komutu çalıştırın:
    - Mac, Linux veya Linux için Windows Alt Sistemi (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
```
    - PowerShell ile Windows:
```
[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. Veritabanı kapsayıcısı başlatıldıktan sonra, ikinci bir terminal penceresi oluşturmak için Visual Studio Code Terminal araç çubuğundaki simgeye basın+.
5. cd yazın ve bağımlılıkları yüklemek ve API sunucusunu başlatmak için aşağıdaki komutları çalıştırın.
  - npm install
  - npm start
6. + Üçüncü bir terminal penceresi oluşturmak için Visual Studio Code Terminal araç çubuğundaki simgeye yeniden basın.
7. cd ve aşağıdaki komutları çalıştırarak bağımlılıkları yükleyin ve web sunucusunu başlatın.
  - npm install
  - npm start
8. Bir tarayıcı başlatılır ve adresine yönlendirilirsiniz http://localhost:4200.

Kuruluş Verileri: Bir Kullanıcıda Oturum Açma ve Erişim Belirteci Alma

51 dakika kaldı

Microsoft Graph'ın kuruluş verilerine erişebilmesi için kullanıcıların Microsoft Entra ID ile kimlik doğrulaması yapabilmesi gerekir. Bu alıştırmada Microsoft Graph Toolkit'in mgt-login bileşeninin kullanıcıların kimliğini doğrulamak ve erişim belirteci almak için nasıl kullanılabileceğini göreceksiniz. Erişim belirteci daha sonra Microsoft Graph'a çağrı yapmak için kullanılabilir.

Not

Microsoft Graph'ı yeni kullanıyorsanız microsoft graph temel bilgileri öğrenme yolunda bu konuda daha fazla bilgi edinebilirsiniz.

Bu alıştırmada şunları yapacaksınız:

Kullanıcıların kimliğini doğrulamak ve kuruluş verilerini almak için bir Microsoft Entra ID uygulamasını Microsoft Graph Araç Seti ile ilişkilendirmeyi öğrenin.
Kapsamların önemi hakkında bilgi edinin.
Microsoft Graph Toolkit'in mgt-login bileşeninin kullanıcıların kimliğini doğrulamak ve erişim belirteci almak için nasıl kullanılabileceğini öğrenin.

Önceki alıştırmada, Microsoft Entra Id'de bir uygulama kaydı oluşturdunuz ve uygulama sunucusunu ve API sunucusunu başlattınız. Ayrıca dosyasındaki (TEAM_ID ve CHANNEL_ID isteğe bağlı) aşağıdaki değerleri .env güncelleştirmişsinizdir:
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Devam etmeden önce önceki alıştırmayı tamamladığınızdan emin olun.
Tarayıcıya ()http://localhost:4200 dönün, üst bilgide Oturum Aç'ı seçin ve Microsoft 365 Geliştirici kiracınızdan bir yönetici kullanıcı hesabı kullanarak oturum açın.

İpucu

Microsoft 365 geliştirici kiracısı yönetici hesabınızla oturum açın. Microsoft 365 yönetim merkezi giderek geliştirici kiracınızdaki diğer kullanıcıları görüntüleyebilirsiniz.
Uygulamada ilk kez oturum açıyorsanız, uygulama tarafından istenen izinleri onaylamanız istenir. Kodu keşfederken sonraki bölümde bu izinler ("kapsamlar" olarak da adlandırılır) hakkında daha fazla bilgi edineceksiniz. Devam etmek için Kabul Et'i seçin.
Oturum açtıktan sonra, üst bilgide görüntülenen kullanıcının adını görmeniz gerekir.

Artık oturum açtığınıza göre, kullanıcıda oturum açmak ve erişim belirteci ile kullanıcı profilini almak için kullanılan koda bakalım. Microsoft Graph Araç Seti'nin parçası olan mgt-login web bileşeni hakkında bilgi edineceksiniz.

İpucu

Visual Studio Code kullanıyorsanız, şunları seçerek dosyaları doğrudan açabilirsiniz:

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

Ardından açmak istediğiniz dosyanın adını yazın.

İstemciyi/package.json açın ve paketlerinin @microsoft/mgt @microsoft/mgt-components bağımlılıklara dahil olduğuna dikkat edin. Paket, @microsoft/mgt MSAL (Microsoft Authentication Library) sağlayıcı özelliklerini ve mgt-login gibi web bileşenlerini ve kullanıcıları oturum açmak ve kuruluş verilerini almak ve görüntülemek için kullanılabilecek diğer bileşenleri içerir.
client/src/main.ts dosyasını açın ve paketten aşağıdaki içeri aktarma işlemlerine @microsoft/mgt-components dikkat edin. İçeri aktarılan simgeler, uygulamada kullanılan Microsoft Graph Araç Seti bileşenlerini kaydetmek için kullanılır.
```
import { registerMgtLoginComponent, registerMgtSearchResultsComponent, registerMgtPersonComponent,  } from '@microsoft/mgt-components';
```
Dosyanın en altına kaydırın ve aşağıdaki kodu not edin:
```
registerMgtLoginComponent();
registerMgtSearchResultsComponent();
registerMgtPersonComponent();
```
Bu kod , mgt-search-resultsve web bileşenlerini kaydeder mgt-loginve mgt-person uygulamada kullanılmasını sağlar.
Kullanıcıları oturum açmak için mgt-login bileşenini kullanmak için Microsoft Entra ID uygulamasının istemci kimliğine (.env dosyasında olarak ENTRAID_CLIENT_IDdepolanır) başvurulması ve kullanılması gerekir.

graph.service.ts açın ve işlevi buluninit(). Dosyanın tam yolu client/src/app/core/graph.service.ts şeklindedir. Aşağıdaki içeri aktarma ve kodu görürsünüz:

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

Bu kod, uygulama kaydınızdan Microsoft Entra ID istemci kimliğini geçirerek ve scopes uygulamanın erişim isteğinde bulunacağı yeni Msal2Provider bir nesne oluşturur. scopes, uygulamanın erişeceği Microsoft Graph kaynaklarına erişim istemek için kullanılır. Msal2Provider Nesne oluşturulduktan sonra, Microsoft Graph Toolkit bileşenleri tarafından Microsoft Graph'tan veri almak için kullanılan nesneye atanırProviders.globalProvider.

düzenleyicinizde header.component.html açın ve mgt-login bileşenini bulun. Dosyanın tam yolu client/src/app/header/header.component.html.
```
@if (this.featureFlags.microsoft365Enabled) {
    <mgt-login class="mgt-dark" (loginCompleted)="loginCompleted()"></mgt-login>
}
```
mgt-login bileşeni, kullanıcının oturum açmasını sağlar ve Microsoft Graph ile kullanılan bir belirteci erişim sağlar. Oturum başarıyla açıldıktan loginCompleted sonra, işlevi çağıran loginCompleted() olay tetikler. Bu örnekteki bir Angular bileşeninde mgt-login kullanılmış olsa da, herhangi bir web uygulamasıyla uyumludur.

mgt-login bileşeninin görüntülenmesi, olarak ayarlanan değere truebağlıdırfeatureFlags.microsoft365Enabled. Bu özel bayrak, uygulamanın düzgün yapılandırıldığını ve Microsoft Entra Kimliği'ne göre kimlik doğrulaması yapabildiğini onaylamak için ortam değişkeninin varlığını ENTRAID_CLIENT_ID denetler. Bayrağı, kullanıcıların tüm alıştırma dizisini takip etmek yerine yalnızca öğreticideki yapay zeka veya İletişim alıştırmalarını tamamlamayı seçtiği durumları barındırmak için eklenir.
header.component.ts açın ve işlevi bulunloginCompleted. Bu işlev, olay yayıldığında loginCompleted çağrılır ve kullanarak Providers.globalProvideroturum açmış kullanıcının profilini almayı işler.
```
async loginCompleted() {
    const me = await Providers.globalProvider.graph.client.api('me').get();
    this.userLoggedIn.emit(me);
}
```
Bu örnekte, kullanıcının profilini almak için Microsoft Graph me API'sine bir çağrı yapılmaktadır (me geçerli oturum açmış kullanıcıyı temsil eder). this.userLoggedIn.emit(me) Kod deyimi, profil verilerini üst bileşene geçirmek için bileşenden bir olay yayar. Üst bileşen, bu durumda uygulamanın kök bileşeni olan app.component.ts dosyadır.

mgt-login bileşeni hakkında daha fazla bilgi edinmek için Microsoft Graph Araç Seti belgelerini ziyaret edin.
Uygulamada oturum açtığınıza göre kuruluş verilerinin nasıl alınabileceğine bakalım.

Kuruluş Verileri: Dosyaları Alma, Sohbetler ve Teams'e İleti Gönderme

41 dakika kaldı

Günümüzün dijital ortamında kullanıcılar e-postalar, sohbetler, dosyalar, takvim etkinlikleri ve daha fazlası dahil olmak üzere çok çeşitli kuruluş verileriyle çalışır. Bu, sık sık bağlam kaymalarına (görevler veya uygulamalar arasında geçiş yapma) yol açabilir ve bu da odağı kesintiye uğratabilir ve üretkenliği azaltabilir. Örneğin, bir proje üzerinde çalışan bir kullanıcının e-postadaki önemli ayrıntıları bulmak için geçerli uygulamasından Outlook'a geçmesi veya ilgili bir dosyayı bulmak için OneDrive İş geçmesi gerekebilir. Bu ileri geri eylem odaklanmayı kesintiye uğratır ve eldeki göreve daha iyi harcanabilecek zamanı boşa harcar.

Verimliliği artırmak için kuruluş verilerini kullanıcıların her gün kullandığı uygulamalarla doğrudan tümleştirebilirsiniz. Kullanıcılar, uygulamalarınıza kurumsal veriler getirerek bilgilere daha sorunsuz bir şekilde erişebilir ve bu bilgileri yönetebilir, bağlam değişikliklerini en aza indirir ve üretkenliği geliştirir. Buna ek olarak, bu tümleştirme değerli içgörüler ve bağlam sağlayarak kullanıcıların bilinçli kararlar almalarına ve daha etkili çalışmalarına olanak tanır.

Bu alıştırmada şunları yapacaksınız:

Microsoft Graph Araç Seti'ndeki mgt-search-results web bileşeninin dosyaları aramak için nasıl kullanılabileceğini öğrenin.
Microsoft Teams'den OneDrive İş ve sohbet iletilerinden dosya almak için Microsoft Graph'ı doğrudan çağırmayı öğrenin.
Microsoft Graph kullanarak Microsoft Teams kanallarına sohbet iletileri göndermeyi öğrenin.

Kuruluş Verileri Özelliğini Kullanma

Önceki bir alıştırmada Microsoft Entra Id'de bir uygulama kaydı oluşturdunuz ve uygulama sunucusunu ve API sunucusunu başlattınız. Dosyada aşağıdaki değerleri .env de güncelleştirmişsinizdir.
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Devam etmeden önce önceki alıştırmayı tamamladığınızdan emin olun.
Tarayıcıya (http://localhost:4200) geri dönün. Henüz oturum açmadıysanız, üst bilgide Oturum Aç'ı seçin ve Microsoft 365 Geliştirici kiracınızdan bir kullanıcıyla oturum açın.
Not

Mgt-login web bileşeni, kullanıcının kimliğini doğrulamaya ek olarak Microsoft Graph tarafından dosyalara, sohbetlere, e-postalara, takvim olaylarına ve diğer kuruluş verilerine erişmek için kullanılabilecek bir erişim belirteci de alır. Erişim belirteci, daha önce gördüğünüz , Files.Read.Allve gibi Chat.ReadWritekapsamları (izinler) içerir:
```
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']
});
```
Datagrid'de Adatum Corporation satırı için İlgili İçeriği Görüntüle'yi seçin. Bu, dosyalar, sohbetler, e-postalar ve takvim olayları gibi kuruluş verilerinin Microsoft Graph kullanılarak alınmasına neden olur. Veriler yüklendikten sonra, sekmeli bir arabirimde datagrid'in altında görüntülenir. Microsoft 365 geliştirici kiracınızda kullanıcı için henüz herhangi bir dosya, sohbet, e-posta veya takvim etkinliği eklemediğiniz için bu noktada veri göremeyebileceğini belirtmek önemlidir. Bunu bir sonraki adımda düzeltelim.
Microsoft 365 kiracınızın bu aşamada Adatum Corporation ile ilgili kuruluş verileri olmayabilir. Örnek veriler eklemek için aşağıdaki eylemlerden en az birini gerçekleştirin:
- Microsoft 365 Geliştirici kiracı kimlik bilgilerinizi kullanarak dosyaları ziyaret edip https://onedrive.com oturum açarak ekleyin.
  - Sol gezinti bölmesinde Dosyalarım'ı seçin.
  - + Yeni ekle'yi ve ardından menüden Klasör karşıya yükle'yi seçin.
  - Kopyaladığınız projeden openai-acs-msgraph/customer documents klasörünü seçin.
- Microsoft 365 Geliştirici kiracısı kimlik bilgilerinizi ziyaret edip https://teams.microsoft.com oturum açarak sohbet iletileri ve takvim etkinlikleri ekleyin.
  - Sol gezinti bölmesinde Teams'i seçin.
  - Bir ekip ve kanal seçin.
  - Gönderi başlat'ı seçin.
  - Konu için Adatum Corporation için yeni sipariş ve ileti gövdesine eklemek istediğiniz ek metinleri girin. Gönder düğmesini seçin.
    
    Adventure Works Cycles, Contoso Pharmaceuticals ve Tailwind Traders gibi uygulamada kullanılan diğer şirketlerden bahseden ek sohbet mesajları ekleyebilirsiniz.
  - Sol gezinti bölmesinde Takvim'i seçin.
  - Yeni toplantı'ya tıklayın.
  - Başlık ve gövde için "Adatum Corporation ile proje zamanlaması hakkında toplantı yap" yazın.
  - Kaydet'i seçin.
- Microsoft 365 Geliştirici kiracı kimlik bilgilerinizi kullanarak ziyaret edip https://outlook.com oturum açarak e-posta ekleyin.
  - Yeni posta'ya tıklayın.
  - Kişisel e-posta adresinizi Son alanına girin.
  - Adatum Corporation'a konu için yeni sipariş ve ceset için istediğiniz her şeyi girin.
  - Gönder'i seçin.
Tarayıcıda uygulamaya geri dönün ve sayfayı yenileyin. Adatum Corporation satırı için İlgili İçeriği Görüntüle'yi yeniden seçin. Şimdi, önceki adımda hangi görevleri gerçekleştirdiğinize bağlı olarak sekmelerde görüntülenen verileri görmeniz gerekir.
Şimdi uygulamadaki kuruluş verileri özelliğini etkinleştiren kodu inceleyelim. Verileri almak için uygulamanın istemci tarafı bölümü, Microsoft Graph API'lerine çağrı yapmak için daha önce baktığınız mgt-login bileşeni tarafından alınan erişim belirtecini kullanır.

Dosya Arama Kodunu Keşfetme

İpucu

Visual Studio Code kullanıyorsanız, şunları seçerek dosyaları doğrudan açabilirsiniz:

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

Ardından açmak istediğiniz dosyanın adını yazın.

Dosya verilerinin OneDrive İş nasıl alınıyor konusuna bakarak başlayalım. files.component.html açın ve kodu incelemek için biraz bekleyin. Dosyanın tam yolu client/src/app/files/files.component.html.
mgt-search-results bileşenini bulun ve aşağıdaki özniteliklere dikkat edin:
```
<mgt-search-results 
    class="search-results" 
    entity-types="driveItem" 
    [queryString]="searchText"
    (dataChange)="dataChange($any($event))" 
/>
```
mgt-search-results bileşeni Microsoft Graph Araç Seti'nin bir parçasıdır ve adından da anlaşılacağı gibi Microsoft Graph'tan gelen arama sonuçlarını görüntülemek için kullanılır. Bileşen bu örnekte aşağıdaki özellikleri kullanır:
- class özniteliği, CSS sınıfının bileşene search-results uygulanması gerektiğini belirtmek için kullanılır.
- entity-types özniteliği, aranacak veri türünü belirtmek için kullanılır. Bu durumda, değeri driveItem OneDrive İş dosyaları aramak için kullanılır.
- queryString özniteliği, arama terimini belirtmek için kullanılır. Bu durumda, değer, kullanıcı veri kılavuzundaki searchText bir satır için İlgili İçeriği Görüntüle'yi seçtiğinde dosyalar bileşenine geçirilen özelliğe bağlıdır. Çevresindeki queryString köşeli ayraçlar özelliğin değere searchText bağlı olduğunu gösterir.
- Arama dataChange sonuçları değiştiğinde olay tetikler. Bu durumda, adlı dataChange() bir müşteri işlevi dosya bileşeninde çağrılır ve olay verileri işleve geçirilir. Çevresindeki dataChange parantez, olayın işleve dataChange() bağlı olduğunu gösterir.
- Özel şablon sağlandığından, arama sonuçlarını görüntülemek için yerleşik mgt-search-results varsayılan şablon kullanılır.
mgt-search-results gibi bileşenleri kullanmanın bir alternatifi, Microsoft Graph API'lerini doğrudan kod kullanarak çağırmaktır. Bunun nasıl çalıştığını görmek için graph.service.ts dosyasını açın ve işlevi bulunsearchFiles(). Dosyanın tam yolu client/src/app/core/graph.service.ts şeklindedir.
- İşleve bir query parametre geçirildiğini fark edeceksiniz. Bu, kullanıcı datagrid'deki bir satır için İlgili İçeriği Görüntüle'yi seçtiğinde geçirilen arama terimidir. Hiçbir arama terimi geçirilmezse boş bir dizi döndürülür.
```
async searchFiles(query: string) {
    const files: DriveItem[] = [];
    if (!query) return files;

    ...
}
```
- Ardından, gerçekleştirilecek arama türünü tanımlayan bir filtre oluşturulur. Bu durumda kod OneDrive İş dosyaları arar, bu nedenle driveItem bileşende mgt-search-results daha önce gördüğünüz gibi kullanılır. Bu, daha önce gördüğünüz mgt-search-results bileşenine geçirme driveItem entity-types işlemiyle aynıdır. Ardından query parametresi ile ContentType:Documentbirlikte filtreye queryString eklenir.
```
const filter = {
    "requests": [
        {
            "entityTypes": [
                "driveItem"
            ],
            "query": {
                "queryString": `${query} AND ContentType:Document`
            }
        }
    ]
};
```
- Ardından işlevi kullanılarak Microsoft Graph API'sine /search/query Providers.globalProvider.graph.client.api() bir çağrı yapılır. filter nesnesi, verileri API'ye post() gönderen işleve geçirilir.
```
const searchResults = await Providers.globalProvider.graph.client.api('/search/query').post(filter);
```
- Arama sonuçları daha sonra konumunu hitsbulmak için yinelenir. Her hit birinde bulunan bir belgeyle ilgili bilgiler bulunur. adlı resource özellik belge meta verilerini içerir ve diziye files eklenir.
```
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);
            }
        }
    }
}
```
- Dizi files daha sonra çağırana döndürülür.
```
return files;
```
Bu koda baktığınızda, daha önce keşfettiniz mgt-search-results web bileşeninin sizin için çok fazla iş yaptığını ve yazmanız gereken kod miktarını önemli ölçüde azalttığını görebilirsiniz! Ancak, API'ye gönderilen veriler veya sonuçların nasıl işlendiği üzerinde daha fazla denetim sahibi olmak için Doğrudan Microsoft Graph'ı çağırmak istediğiniz senaryolar olabilir.
files.component.ts dosyasını açın ve işlevi bulunsearch(). Dosyanın tam yolu client/src/app/files/files.component.ts şeklindedir.

Bu işlevin gövdesi, kullanılan mgt-search-results bileşeni nedeniyle açıklama satırı yapılsa da, kullanıcı datagrid'deki bir satır için İlgili İçeriği Görüntüle'yi seçtiğinde Microsoft Graph çağrısı yapmak için işlev kullanılabilir. search() İşlev graph.service.ts çağırır searchFiles() ve parametresini query ona geçirir (bu örnekteki şirketin adı). Arama sonuçları daha sonra bileşenin data özelliğine atanır.
```
override async search(query: string) {
    this.data = await this.graphService.searchFiles(query);
}
```
Dosyalar bileşeni daha sonra arama sonuçlarını görüntülemek için özelliğini kullanabilir data . Bunu özel HTML bağlamaları kullanarak veya adlı mgt-file-listbaşka bir Microsoft Graph Araç Seti denetimi kullanarak işleyebilirsiniz. Aşağıda, özelliği adlı bileşenin özelliklerinden files birine bağlama data ve kullanıcı bir dosyayla etkileşim kurarken olayı işleme itemClick örneği verilmiştir.
```
<mgt-file-list (itemClick)="itemClick($any($event))" [files]="data"></mgt-file-list>
```
Daha önce gösterilen mgt-search-results bileşenini kullanmayı mı yoksa Microsoft Graph'ı çağırmak için özel kod yazmayı mı tercih ettiğiniz, senaryonuza bağlıdır. Bu örnekte, kodu basitleştirmek ve yapmanız gereken iş miktarını azaltmak için mgt-search-results bileşeni kullanılır.

Teams Sohbet İletileri Arama Kodunu Keşfetme

graph.service.ts dönün ve işlevi bulunsearchChatMessages(). Daha önce baktığınız işleve searchFiles() benzer olduğunu göreceksiniz.
- Filtre verilerini Microsoft Graph API'sine /search/query gönderir ve sonuçları , channelIdmessageId ve arama teamIdterimiyle eşleşen bilgileri olan bir nesne dizisine dönüştürür.
- Teams kanal iletilerini almak için API'ye /teams/${chat.teamId}/channels/${chat.channelId}/messages/${chat.messageId} ve teamId, öğesine channelIdikinci bir çağrı yapılır ve messageId geçirilir. Bu, ileti ayrıntılarının tamamını döndürür.
- Ek filtreleme görevleri gerçekleştirilir ve sonuçta elde edilen iletiler çağırana döndürülür searchChatMessages() .

chats.component.ts dosyasını açın ve işlevi bulunsearch(). Dosyanın tam yolu client/src/app/chats/chats.component.ts şeklindedir. İşlev, search() graph.service.ts çağırır searchChatMessages() ve parametresini query ona geçirir.

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

Aramanın sonuçları bileşenin data özelliğine atanır ve sonuç dizisinde yineleme yapmak ve verileri işlemek için veri bağlama kullanılır. Bu örnekte, arama sonuçlarını görüntülemek için Bir Angular Malzeme kartı bileşeni kullanılır.

@if (this.data.length) {
    <div>
        @for (chatMessage of this.data;track chatMessage.id) {
            <mat-card>
                <mat-card-header>
                    <mat-card-title [innerHTML]="chatMessage.summary"></mat-card-title>
                    <!-- <mat-card-subtitle [innerHTML]="chatMessage.body"></mat-card-subtitle> -->
                </mat-card-header>
                <mat-card-actions>
                    <a mat-stroked-button color="basic" [href]="chatMessage.webUrl" target="_blank">View Message</a>
                </mat-card-actions>
            </mat-card>
        }
    </div>
}

Teams Sohbetlerini Görüntüleme

Microsoft Teams Kanalına İleti Gönderme

Uygulama, Microsoft Teams sohbet iletilerini aramaya ek olarak kullanıcının Microsoft Teams kanalına ileti göndermesine de olanak tanır. Bu, Microsoft Graph'ın /teams/${teamId}/channels/${channelId}/messages uç noktası çağrılarak yapılabilir.

Aşağıdaki kodda ve channelId değerlerini içeren bir URL oluşturulduğunu teamId göreceksiniz. Ortam değişkeni değerleri bu örnekte ekip kimliği ve kanal kimliği için kullanılır, ancak bu değerler Microsoft Graph kullanılarak da dinamik olarak alınabilir. sabiti body gönderilecek iletiyi içerir. Ardından bir POST isteği yapılır ve sonuçlar arayana döndürülür.

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

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

Microsoft Graph'ta bu tür işlevlerden yararlanılması, kullanıcıların microsoft teams ile doğrudan kullanmakta oldukları uygulamadan etkileşim kurmasına olanak tanıyarak kullanıcı üretkenliğini artırmak için harika bir yol sağlar.

Kuruluş Verileri: E-postaları ve Takvim Olaylarını Alma

21 dakika kaldı

Önceki alıştırmada, Microsoft Graph'ı ve Microsoft Graph Toolkit'teki mgt-search-results bileşenini kullanarak Microsoft Teams'den OneDrive İş ve sohbetlerden dosya almayı öğrendiniz. Ayrıca Microsoft Teams kanallarına ileti göndermeyi de öğrendiniz. Bu alıştırmada, Microsoft Graph'ten e-posta iletilerini ve takvim olaylarını almayı ve bunları uygulamayla tümleştirmeyi öğreneceksiniz.

Bu alıştırmada şunları yapacaksınız:

Microsoft Graph Araç Seti'ndeki mgt-search-results web bileşeninin e-postaları ve takvim etkinliklerini aramak için nasıl kullanılabileceğini öğrenin.
Arama sonuçlarını özel bir şekilde işlemek için mgt-search-results bileşenini özelleştirmeyi öğrenin.
E-postaları ve takvim olaylarını almak için Microsoft Graph'ı doğrudan çağırmayı öğrenin.

E-posta İletileri Arama Kodunu Keşfetme

İpucu

Visual Studio Code kullanıyorsanız, şunları seçerek dosyaları doğrudan açabilirsiniz:

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

Ardından açmak istediğiniz dosyanın adını yazın.

Önceki bir alıştırmada Microsoft Entra Id'de bir uygulama kaydı oluşturdunuz ve uygulama sunucusunu ve API sunucusunu başlattınız. Dosyada aşağıdaki değerleri .env de güncelleştirmişsinizdir.
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Devam etmeden önce önceki alıştırmayı tamamladığınızdan emin olun.
emails.component.html açın ve kodu incelemek için biraz bekleyin. Dosyanın tam yolu client/src/app/emails/emails.component.html.
mgt-search-results bileşenini bulun:
```
<mgt-search-results 
  class="search-results" 
  entity-types="message" 
  [queryString]="searchText"
  (dataChange)="dataChange($any($event))">
  <template data-type="result-message"></template>
</mgt-search-results>
```
mgt-search-results bileşeninin bu örneği, daha önce baktığınız bileşenle aynı şekilde yapılandırılmıştır. Tek fark, özniteliğin entity-types e-posta iletilerini aramak için kullanıldığı ve boş bir şablonun sağlandığı ayar message olmasıdır.
- class özniteliği, CSS sınıfının bileşene search-results uygulanması gerektiğini belirtmek için kullanılır.
- entity-types özniteliği, aranacak veri türünü belirtmek için kullanılır. Bu durumda, değeri olur message.
- queryString özniteliği, arama terimini belirtmek için kullanılır.
- Arama dataChange sonuçları değiştiğinde olay tetikler. E-posta bileşeninin dataChange() işlevi çağrılır, sonuçlar buna geçirilir ve adlı data bir özellik bileşende güncelleştirilir.
- Bileşen için boş bir şablon tanımlanır. Bu şablon türü normalde arama sonuçlarının nasıl işlendiğini tanımlamak için kullanılır. Ancak bu senaryoda bileşene ileti verilerini işlememelerini söylüyoruz. Bunun yerine, standart veri bağlamayı kullanarak verileri kendimiz işleyeceğiz (Bu durumda Angular kullanılır, ancak istediğiniz kitaplığı/çerçeveyi kullanabilirsiniz).

E-posta iletilerini işlemek için kullanılan veri bağlamalarını bulmak için emails.component.html'daki mgt-search-results bileşeninin altına bakın. Bu örnek özelliğinde data yinelenir ve e-posta konusunu, gövde önizlemesini ve e-posta iletisinin tamamını görüntülemek için bir bağlantı yazar.

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

E-posta İletilerini Görüntüleme

Microsoft Graph, iletileri almak için mgt-search-results bileşenini kullanmanın yanı sıra, e-postaları aramak için de kullanılabilecek çeşitli API'ler sağlar. Daha /search/query önce gördüğünüz API kesinlikle kullanılabilir, ancak api daha kolay bir seçenektir messages .

Bu API'yi çağırmayı görmek için graph.service.ts dönün ve işlevi bulunsearchEmailMessages(). Microsoft Graph'ın uç noktasını çağırmak messages için kullanılabilecek bir URL oluşturur ve değeri parametresine $search atarquery. Kod daha sonra bir GET isteği yapar ve sonuçları çağırana döndürür. işleci $search konu, gövde ve gönderen alanlarındaki değeri otomatik olarak arar query .

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

emails.component.ts aramalarında bulunan e-posta bileşeni, searchEmailMessages() sonuçları kullanıcı arabiriminde görüntüler.
```
override async search(query: string) {
    this.data = await this.graphService.searchEmailMessages(query);
}
```

Takvim Olayları Arama Kodunu Keşfetme

Takvim olaylarını arama, mgt-search-results bileşeni kullanılarak da gerçekleştirilebilir. Sonuçları sizin için işlemeyi işleyebilir, ancak bu alıştırmanın devamında göreceğiniz kendi şablonunuzu da tanımlayabilirsiniz.
calendar-events.component.html açın ve kodu incelemek için biraz bekleyin. Dosyanın tam yolu client/src/app/calendar-events/calendar-events.component.html. Daha önce baktığınız dosya ve e-posta bileşenlerine çok benzer olduğunu göreceksiniz.
```
<mgt-search-results 
    class="search-results" 
    entity-types="event" 
    [queryString]="searchText"
    (dataChange)="dataChange($any($event))">
    <template data-type="result-event"></template>
</mgt-search-results>
```
mgt-search-results bileşeninin bu örneği, daha önce baktığınız bileşenlerle aynı şekilde yapılandırılır. Tek fark, özniteliğin entity-types takvim olaylarını aramak için kullanıldığı ve boş bir şablonun sağlandığı ayar event olmasıdır.
- class özniteliği, CSS sınıfının bileşene search-results uygulanması gerektiğini belirtmek için kullanılır.
- entity-types özniteliği, aranacak veri türünü belirtmek için kullanılır. Bu durumda, değeri olur event.
- queryString özniteliği, arama terimini belirtmek için kullanılır.
- Arama dataChange sonuçları değiştiğinde olay tetikler. Takvim olayı bileşeninin dataChange() işlevi çağrılır, sonuçlar buna geçirilir ve adlı data bir özellik bileşende güncelleştirilir.
- Bileşen için boş bir şablon tanımlanır. Bu senaryoda bileşene veri işlememelerini söylüyoruz. Bunun yerine standart veri bağlamayı kullanarak verileri kendimiz işleyeceğiz.

calendar-events.component.html bileşenin mgt-search-results hemen altında takvim olaylarını işlemek için kullanılan veri bağlamalarını bulabilirsiniz. Bu örnek özelliğinde data yinelenir ve olayın başlangıç tarihini, saatini ve konusunu yazar. ve gibi dayFromDateTime() timeRangeFromEvent() bileşene dahil edilen özel işlevler, verileri düzgün biçimlendirmek için çağrılır. HTML bağlamaları ayrıca Outlook'taki takvim olayını ve belirtildiyse olayın konumunu görüntülemek için bir bağlantı içerir.

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

Microsoft Graph, API'yi kullanarak search/query takvim olaylarını aramaya ek olarak takvim olaylarını aramak için de kullanılabilecek bir events API sağlar. searchCalendarEvents() graph.service.ts'de işlevini bulun.
İşlev, searchCalendarEvents() aranacak zaman aralığını tanımlamak için kullanılan başlangıç ve bitiş tarihi/saat değerlerini oluşturur. Ardından Microsoft Graph'ın uç noktasını çağırmak events için kullanılabilecek bir URL oluşturur ve parametresi ile query başlangıç ve bitiş tarihi/saat değişkenlerini içerir. Daha sonra bir GET isteği yapılır ve sonuçlar çağırana döndürülür.
```
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;
}
```
- Oluşturulan URL'nin dökümü aşağıdadır:
  - URL'nin /me/events bölümü, oturum açmış kullanıcının olaylarının alınması gerektiğini belirtmek için kullanılır.
  - startdatetime ve enddatetime parametreleri, aranacak zaman aralığını tanımlamak için kullanılır. Bu durumda, arama sonraki 7 gün içinde başlayan olayları döndürür.
  - Sorgu $filter parametresi, sonuçları query değere göre filtrelemek için kullanılır (bu örnekte datagrid'den seçilen şirket adı). contains() işlevi, takvim olayının query özelliğindeki subject değeri aramak için kullanılır.
  - Sorgu $orderby parametresi, sonuçları start/dateTime özelliğine göre sıralamak için kullanılır.
url oluşturulduktan sonra, değerini url kullanarak Microsoft Graph API'sine bir GET isteği yapılır ve sonuçlar çağırana döndürülür.
Önceki bileşenlerde olduğu gibi, takvim olayları bileşeni (calendar-events.component.ts dosyası) çağrılar search() ve sonuçları görüntüler.
```
override async search(query: string) {
    this.data = await this.graphService.searchCalendarEvents(query);
}
```
Not

Microsoft Graph çağrılarını özel bir API'den veya sunucu tarafı uygulamasından da yapabilirsiniz. Azure İşlevi'nden Microsoft Graph API'sini çağırma örneğini görmek için aşağıdaki öğreticiyi görüntüleyin.
Artık dosyaları, sohbetleri, e-posta iletilerini ve takvim olaylarını almak için Microsoft Graph kullanma örneğini gördünüz. Aynı kavramlar diğer Microsoft Graph API'lerine de uygulanabilir. Örneğin, kuruluşunuzdaki kullanıcıları aramak için Microsoft Graph kullanıcıları API'sini kullanabilirsiniz. Kuruluşunuzdaki grupları aramak için Microsoft Graph grupları API'sini de kullanabilirsiniz. Microsoft Graph API'lerinin tam listesini belgelerde görüntüleyebilirsiniz.

Aracılığıyla paylaş

OpenAI, İletişim ve Kurumsal Veri Özelliklerini İş Kolu Uygulamasıyla Tümleştirme

Bu Öğreticide Neler Oluşturacaksınız?

Kendi Maceranızı Seçin

Önkoşullar

Bu Öğreticide kullanılan Microsoft Bulut Teknolojileri

Projeyi Kopyalama

GitHub Deposunu Kopyalama ve Dosya Oluşturma .env

AI: Azure OpenAI Kaynağı Oluşturma ve Model Dağıtma

Azure OpenAI Hizmeti Kaynağı Oluşturma

Proje .env Dosyasını Güncelleştirme

Uygulama Hizmetleri'ni başlatma

Yapay Zeka: Doğal Dilden SQL'e

Doğal Dilden SQL'e Özelliğini Kullanma

Sql Code'a Doğal Dili Keşfetme

AI: Tamamlamalar Oluşturma

Yapay Zeka Tamamlama Özelliğini Kullanma

Yapay Zeka Tamamlama Kodunu Keşfetme

Yapay zeka: Verilerinizde Azure OpenAI

Azure AI Studio'ya Özel Veri Kaynağı Ekleme

Sohbet Oyun Alanında Özel Veri Kaynağınızı Kullanma

Uygulamada Kendi Verilerinizi Getir Özelliğini Kullanma

Kodu Keşfetme

İletişim: Azure İletişim Hizmetleri Kaynağı Oluşturma

Azure İletişim Hizmetleri Kaynağı Oluşturma

Telefon Arama ve SMS Özelliklerini Etkinleştirme

E-posta Etki Alanı Bağlama

.env Dosyayı Güncelleştirme

Uygulama ve API Sunucularını Başlatma/Yeniden Başlatma

İletişim: Telefon Görüşmesi Yapma

Telefon Arama Özelliğini Kullanma

Telefon Arama Kodunu Keşfetme

İletişim: E-posta ve SMS İletileri Gönderme

E-posta ve SMS Özelliklerini Kullanma

E-posta Kodunu Keşfetme

SMS Kodunu Keşfetme

Kuruluş Verileri: Microsoft Entra ID Uygulama Kaydı Oluşturma

Microsoft Entra Id Uygulama Kaydı Oluşturma

Project'in .env Dosyasını Güncelleştirme

Uygulama ve API Sunucularını Başlatma/Yeniden Başlatma

Kuruluş Verileri: Bir Kullanıcıda Oturum Açma ve Erişim Belirteci Alma

Oturum Açma Özelliğini Kullanma

Oturum Açma Kodunu Keşfetme

Kuruluş Verileri: Dosyaları Alma, Sohbetler ve Teams'e İleti Gönderme

Kuruluş Verileri Özelliğini Kullanma

Dosya Arama Kodunu Keşfetme

Teams Sohbet İletileri Arama Kodunu Keşfetme

Microsoft Teams Kanalına İleti Gönderme

Kuruluş Verileri: E-postaları ve Takvim Olaylarını Alma

E-posta İletileri Arama Kodunu Keşfetme

Takvim Olayları Arama Kodunu Keşfetme

Tebrikler!

Bu öğreticiyi tamamladınız

Azure Kaynaklarını Temizleme

Sonraki Adımlar

Belgeler

Eğitim İçeriği

Geri Bildirim

GitHub Deposunu Kopyalama ve Dosya Oluşturma `.env`

Proje `.env` Dosyasını Güncelleştirme

`.env` Dosyayı Güncelleştirme