Mengintegrasikan Fitur Data OpenAI, Komunikasi, dan Organisasi ke dalam Aplikasi Lini Bisnis

Tingkat: Menengah

Tutorial ini menunjukkan bagaimana Azure OpenAI, Azure Communication Services, dan Microsoft Graph/Microsoft Graph Toolkit dapat diintegrasikan ke dalam aplikasi Line of Business (LOB) untuk meningkatkan produktivitas pengguna, meningkatkan pengalaman pengguna, dan membawa aplikasi LOB ke tingkat berikutnya. Fitur utama dalam aplikasi meliputi:

• AI: Memungkinkan pengguna untuk mengajukan pertanyaan dalam bahasa alami dan mengonversi jawaban mereka ke SQL yang dapat digunakan untuk mengkueri database, memungkinkan pengguna untuk menentukan aturan yang dapat digunakan untuk secara otomatis menghasilkan pesan email dan SMS, dan mempelajari bagaimana bahasa alami dapat digunakan untuk mengambil data dari sumber data kustom Anda sendiri. Azure OpenAI digunakan untuk fitur-fitur ini.
• Komunikasi: Mengaktifkan panggilan telepon dalam aplikasi ke pelanggan dan fungsionalitas Email/SMS menggunakan Azure Communication Services.
• Data Organisasi: Tarik data organisasi terkait yang mungkin diperlukan pengguna (dokumen, obrolan, email, acara kalender) saat mereka bekerja dengan pelanggan untuk menghindari peralihan konteks. Menyediakan akses ke jenis data organisasi ini mengurangi kebutuhan pengguna untuk beralih ke Outlook, Teams, OneDrive, aplikasi kustom lainnya, ponsel mereka, dll. karena data dan fungsionalitas tertentu yang mereka butuhkan disediakan langsung di aplikasi. Microsoft Graph dan Microsoft Graph Toolkit digunakan untuk fitur ini.

Aplikasi ini adalah aplikasi manajemen pelanggan sederhana yang memungkinkan pengguna untuk mengelola pelanggan mereka dan data terkait. Ini terdiri dari front-end yang dibangun menggunakan TypeScript yang memanggil API back-end untuk mengambil data, berinteraksi dengan fungsionalitas AI, mengirim pesan email/SMS, dan menarik data organisasi. Berikut adalah gambaran umum solusi aplikasi yang akan Anda telusuri dalam tutorial ini:

Tutorial ini akan memandikan Anda melalui proses penyiapan sumber daya Azure dan Microsoft 365 yang diperlukan. Ini juga akan memancang Anda melalui kode yang digunakan untuk mengimplementasikan fitur AI, komunikasi, dan data organisasi. Meskipun Anda tidak akan diminta untuk menyalin dan menempelkan kode, beberapa latihan akan meminta Anda mengubah kode untuk mencoba skenario yang berbeda.

Apa yang akan Anda Bangun dalam Tutorial ini

Pilih Petualangan Anda Sendiri

Anda dapat menyelesaikan seluruh tutorial dari awal hingga akhir atau menyelesaikan topik tertentu yang menarik. Tutorial ini dipecah menjadi topik berikut:

• Kloning Latihan Proyek (latihan yang diperlukan).
• Latihan AI: Buat sumber daya Azure OpenAI dan gunakan untuk mengonversi bahasa alami ke SQL, menghasilkan pesan email/SMS, dan bekerja dengan data dan dokumen Anda sendiri.
• Latihan Komunikasi: Buat sumber daya Azure Communication Services dan gunakan untuk melakukan panggilan telepon dari aplikasi dan mengirim pesan email/SMS.
• Latihan Data Organisasi: Buat pendaftaran aplikasi MICROSOFT Entra ID sehingga Microsoft Graph dan Microsoft Graph Toolkit dapat digunakan untuk mengautentikasi dan menarik data organisasi ke dalam aplikasi.

Prasyarat

• Node - Node 20+ dan npm 10+ akan digunakan untuk proyek ini
• git
• Visual Studio Code (meskipun Visual Studio Code disarankan, editor apa pun dapat digunakan)
• Langganan Azure
• Penyewa pengembang Microsoft 365
• Docker Desktop atau runtime kontainer yang sesuai dengan OCI (Open Container Initiative) lain seperti Podman, atau nerdctl yang mampu menjalankan kontainer.

Microsoft Cloud Technologies yang digunakan dalam Tutorial ini

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

Mengkloning Proyek

• Tersisa 132 menit

Proyek kode yang digunakan dalam tutorial ini tersedia di https://github.com/microsoft/MicrosoftCloud. Repositori proyek mencakup kode sisi klien dan sisi server yang diperlukan untuk menjalankan proyek, memungkinkan Anda menjelajahi fitur terintegrasi yang terkait dengan kecerdasan buatan (AI), komunikasi, dan data organisasi. Selain itu, proyek ini berfungsi sebagai sumber daya untuk memandu Anda dalam menggabungkan fitur serupa ke dalam aplikasi Anda sendiri.

Dalam latihan ini, Anda akan:

• Klon repositori GitHub.
• Tambahkan file .env ke dalam proyek dan perbarui.

Sebelum melanjutkan, pastikan Anda memiliki semua prasyarat yang diinstal dan dikonfigurasi seperti yang diuraikan di bagian Prasyarat tutorial ini.

Mengkloning Repositori GitHub dan Membuat .env File

1. Jalankan perintah berikut untuk mengkloning Repositori GitHub Microsoft Cloud ke komputer Anda.

   git clone https://github.com/microsoft/MicrosoftCloud
   

2. Buka folder MicrosoftCloud/samples/openai-acs-msgraph di Visual Studio Code.

   Catatan

   Meskipun kita akan menggunakan Visual Studio Code sepanjang tutorial ini, editor kode apa pun dapat digunakan untuk bekerja dengan proyek sampel.

3. Perhatikan folder dan file berikut:

   • klien: Kode aplikasi sisi klien.
   • server: Kode API sisi server.
   • docker-compose.yml: Digunakan untuk menjalankan database PostgreSQL lokal.

4. Ganti nama .env.example di akar proyek menjadi .env.

5. Buka file .env dan luangkan waktu sejenak untuk melihat melalui kunci yang disertakan:

   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=
   

6. Perbarui nilai berikut di .env. Nilai-nilai ini akan digunakan oleh server API untuk menyambungkan ke database PostgreSQL lokal.

   POSTGRES_USER=web
   POSTGRES_PASSWORD=web-password
   

7. Sekarang setelah Anda memiliki proyek, mari kita coba beberapa fitur aplikasi dan pelajari bagaimana mereka dibangun. Pilih tombol Berikutnya di bawah ini untuk melanjutkan atau melompat ke latihan tertentu menggunakan daftar isi.

AI: Membuat Sumber Daya Azure OpenAI dan Menyebarkan Model

• Tersisa 127 menit

Untuk mulai menggunakan Azure OpenAI di aplikasi Anda, Anda perlu membuat Layanan Azure OpenAI dan menyebarkan model yang dapat digunakan untuk melakukan tugas seperti mengonversi bahasa alami ke SQL, menghasilkan konten pesan email/SMS, dan banyak lagi.

Dalam latihan ini, Anda akan:

• Buat sumber daya Azure OpenAI Service.
• Menyebarkan model.
• Perbarui file .env dengan nilai dari sumber daya layanan Azure OpenAI Anda.

Membuat Sumber Daya Layanan Azure OpenAI

1. Kunjungi portal Azure di browser Anda dan masuk.

2. Masukkan openai di bilah pencarian di bagian atas halaman portal dan pilih Azure OpenAI dari opsi yang muncul.

   

3. Pilih Buat di toolbar.

   Catatan

   Meskipun tutorial ini berfokus pada Azure OpenAI, jika Anda memiliki kunci OPENAI API dan ingin menggunakannya, Anda dapat melewati bagian ini dan langsung masuk ke bagian Perbarui File .env Proyek di bawah ini. Tetapkan kunci OpenAI API Anda ke OPENAI_API_KEY dalam file .env (Anda dapat mengabaikan instruksi lain .env yang terkait dengan OpenAI).

4. Model Azure OpenAI tersedia di wilayah tertentu. Kunjungi dokumen ketersediaan model Azure OpenAI untuk mempelajari wilayah mana yang mendukung model gpt-4o yang digunakan dalam tutorial ini.

5. Lakukan tugas-tugas berikut:

   • Pilih langganan Azure Anda.
   • Pilih grup sumber daya yang akan digunakan (buat yang baru jika diperlukan).
   • Pilih wilayah tempat model gpt-4o didukung berdasarkan dokumen yang Anda lihat sebelumnya.
   • Masukkan nama sumber daya. Nilainya harus unik.
   • Pilih tingkat harga S0 Standar.

6. Pilih Berikutnya hingga Anda masuk ke layar Tinjau + kirim . Pilih Buat.

7. Setelah sumber daya Azure OpenAI Anda dibuat, navigasikan ke sumber daya dan pilih Manajemen Sumber Daya -->Kunci dan Titik Akhir .

8. Temukan nilai KEY 1 dan Titik Akhir. Anda akan menggunakan kedua nilai di bagian berikutnya sehingga menyalinnya ke file lokal.

   

9. Pilih Manajemen Sumber Daya -->.

10. Pilih tombol Kelola Penyebaran untuk masuk ke Azure OpenAI Studio.

11. Pilih Sebarkan model -->Sebarkan model dasar di toolbar.

    

12. Pilih gpt-4o dari daftar model dan pilih Konfirmasi.

    Catatan

    Azure OpenAI mendukung beberapa jenis model yang berbeda. Setiap model dapat digunakan untuk menangani skenario yang berbeda.

13. Dialog berikut akan ditampilkan. Luangkan waktu sejenak untuk memeriksa nilai default yang disediakan.

    

14. Ubah nilai Token per Batas Tarif Menit (ribuan) menjadi 100 ribu. Ini akan memungkinkan Anda untuk membuat lebih banyak permintaan ke model dan menghindari mencapai batas tarif saat Anda melakukan langkah-langkah berikut.

15. Pilih Sebarkan.

16. Setelah model disebarkan, pilih Playgrounds -->Chat.

17. Dropdown Penyebaran harus menampilkan model gpt-4o .

    

18. Luangkan waktu sejenak untuk membaca teks pesan Sistem yang disediakan. Ini memberi tahu model cara bertindak saat pengguna berinteraksi dengannya.

19. Temukan kotak teks di area obrolan dan masukkan Ringkas apa itu AI Generatif dan cara penggunaannya. Pilih Enter untuk mengirim pesan ke model dan membuatnya menghasilkan respons.

20. Bereksperimenlah dengan perintah dan respons lainnya. Misalnya, masukkan Berikan riwayat singkat tentang ibu kota Prancis dan perhatikan respons yang dihasilkan.

Memperbarui File Proyek .env

1. Kembali ke Visual Studio Code dan buka .env file di akar proyek.

2. Salin nilai KEY 1 dari sumber daya Azure OpenAI Anda dan tetapkan ke OPENAI_API_KEY dalam file .env yang terletak di akar folder openai-acs-msgraph:

   OPENAI_API_KEY=<KEY_1_VALUE>
   

3. Salin *Nilai titik akhir dan tetapkan ke OPENAI_ENDPOINT dalam file .env . / Hapus karakter dari akhir nilai jika ada.

   OPENAI_ENDPOINT=<ENDPOINT_VALUE>
   

   Catatan

   Anda akan melihat bahwa nilai untuk OPENAI_MODEL dan OPENAI_API_VERSION sudah diatur dalam file .env . Nilai model diatur ke gpt-4o yang cocok dengan nama penyebaran model yang Anda buat sebelumnya dalam latihan ini. Versi API diatur ke nilai yang didukung yang ditentukan dalam dokumentasi referensi Azure OpenAI.

4. Simpan file .env.

Memulai Layanan Aplikasi

Saatnya untuk memulai layanan aplikasi Anda termasuk database, server API, dan server web.

1. Dalam langkah-langkah berikut, Anda akan membuat tiga jendela terminal di Visual Studio Code.

   

2. Klik kanan pada file .env di daftar file Visual Studio Code dan pilih Buka di Terminal Terintegrasi. Pastikan terminal Anda berada di akar proyek - openai-acs-msgraph - sebelum melanjutkan.

3. Pilih dari salah satu opsi berikut untuk memulai database PostgreSQL:

   • Jika Anda telah menginstal dan menjalankan Docker Desktop , jalankan docker-compose up di jendela terminal dan tekan Enter.

   • Jika Anda memiliki Podman dengan podman-compose yang terinstal dan berjalan, jalankan podman-compose up di jendela terminal dan tekan Enter.

   • Untuk menjalankan kontainer PostgreSQL secara langsung menggunakan Docker Desktop, Podman, nerdctl, atau runtime kontainer lain yang telah Anda instal, jalankan perintah berikut di jendela terminal:

     • Mac, Linux, atau Subsistem Windows untuk Linux (WSL):

       [docker | podman | nerdctl] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v $(pwd)/data:/var/lib/postgresql/data -p 5432:5432 postgres
       

     • Windows dengan PowerShell:

       [docker | podman] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v ${PWD}/data:/var/lib/postgresql/data -p 5432:5432 postgres
       

4. Setelah kontainer database dimulai, tekan + ikon di toolbar Terminal Visual Studio Code untuk membuat jendela terminal kedua.

   

5. cd ke folder server/typescript dan jalankan perintah berikut untuk menginstal dependensi dan memulai api server.

   • npm install
   • npm start

6. + Tekan ikon lagi di toolbar Terminal Visual Studio Code untuk membuat jendela terminal ketiga.

7. cd ke folder klien dan jalankan perintah berikut untuk menginstal dependensi dan memulai server web.

   • npm install
   • npm start

8. Browser akan diluncurkan dan Anda akan dibawa ke http://localhost:4200.

   

AI: Bahasa Alami ke SQL

• Tersisa 122 menit

Kutipan "Hanya karena Anda tidak dapat berarti Anda harus" adalah panduan yang berguna saat memikirkan kemampuan AI. Misalnya, fitur bahasa alami Azure OpenAI ke SQL memungkinkan pengguna membuat kueri database dalam bahasa Inggris biasa, yang dapat menjadi alat yang ampuh untuk meningkatkan produktivitas mereka. Namun, kuat tidak selalu berarti tepat atau aman. Latihan ini akan menunjukkan cara menggunakan fitur AI ini sambil juga membahas pertimbangan penting yang perlu diingat sebelum memutuskan untuk menerapkannya.

Berikut adalah contoh kueri bahasa alami yang dapat digunakan untuk mengambil data dari database:

Get the the total revenue for all companies in London.

Dengan perintah yang tepat, Azure OpenAI akan mengonversi kueri ini ke SQL yang dapat digunakan untuk mengembalikan hasil dari database. Akibatnya, pengguna non-teknis termasuk analis bisnis, pemasar, dan eksekutif dapat lebih mudah mengambil informasi berharga dari database tanpa bergulat dengan sintaks SQL yang rumit atau mengandalkan datagrid dan filter yang dibatasi. Pendekatan yang disederhanakan ini dapat meningkatkan produktivitas dengan menghilangkan kebutuhan pengguna untuk mencari bantuan dari pakar teknis.

Latihan ini menyediakan titik awal yang akan membantu Anda memahami cara kerja bahasa alami untuk SQL, memperkenalkan Anda pada beberapa pertimbangan penting, membuat Anda berpikir tentang pro dan kontra, dan menunjukkan kode untuk memulai.

Dalam latihan ini, Anda akan:

• Gunakan perintah GPT untuk mengonversi bahasa alami ke SQL.
• Bereksperimenlah dengan permintaan GPT yang berbeda.
• Gunakan SQL yang dihasilkan untuk mengkueri database PostgreSQL yang dimulai sebelumnya.
• Mengembalikan hasil kueri dari PostgreSQL dan menampilkannya di browser.

Mari kita mulai dengan bereksperimen dengan permintaan GPT berbeda yang dapat digunakan untuk mengonversi bahasa alami ke SQL.

Menggunakan Bahasa Alami untuk Fitur SQL

1. Dalam latihan sebelumnya, Anda memulai database, API, dan aplikasi. Anda juga memperbarui .env file. Jika Anda tidak menyelesaikan langkah-langkah tersebut, ikuti instruksi di akhir latihan sebelum melanjutkan.

2. Kembali ke browser (http://localhost:4200) dan temukan bagian Kueri Kustom dari halaman di bawah datagrid. Perhatikan bahwa nilai kueri sampel sudah disertakan: Dapatkan total pendapatan untuk semua pesanan. Kelompokkan menurut perusahaan dan sertakan kota.

   

3. Pilih tombol Jalankan Kueri . Ini akan meneruskan kueri bahasa alami pengguna ke Azure OpenAI yang akan mengonversinya ke SQL. Kueri SQL kemudian akan digunakan untuk mengkueri database dan mengembalikan hasil potensial apa pun.

4. Jalankan Kueri Kustom berikut ini:

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

5. Lihat jendela terminal yang menjalankan server API di Visual Studio Code dan perhatikan bahwa jendela tersebut menampilkan kueri SQL yang dikembalikan dari Azure OpenAI. Data JSON digunakan oleh API sisi server untuk mengkueri database PostgreSQL. Setiap nilai string yang disertakan dalam kueri ditambahkan sebagai nilai parameter untuk mencegah serangan injeksi SQL:

   { 
       "sql": "SELECT c.company, c.city, c.email, SUM(o.total) AS revenue FROM customers c INNER JOIN orders o ON c.id = o.customer_id WHERE c.company = $1 GROUP BY c.company, c.city, c.email", 
       "paramValues": ["Adventure Works Cycles"] 
   }
   

6. Kembali ke browser dan pilih Reset Data untuk melihat semua pelanggan lagi di datagrid.

Menjelajahi Bahasa Alami ke Kode SQL

1. Sekarang setelah Anda melihat bahasa alami untuk fitur SQL dalam tindakan, mari kita periksa bagaimana penerapannya.

2. Buka file server/apiRoutes.ts dan temukan rute.generateSql Rute API ini dipanggil oleh aplikasi sisi klien yang berjalan di browser dan digunakan untuk menghasilkan SQL dari kueri bahasa alami. Setelah kueri SQL diambil, kueri tersebut digunakan untuk mengkueri database dan mengembalikan hasil.

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

   Perhatikan fungsionalitas berikut dalam generateSql rute:

   • Ini mengambil nilai kueri pengguna dari req.body.prompt dan menetapkannya ke variabel bernama userPrompt. Nilai ini akan digunakan dalam prompt GPT.
   • Ini memanggil getSQLFromNLP() fungsi untuk mengonversi bahasa alami ke SQL.
   • Ini meneruskan SQL yang dihasilkan ke fungsi bernama queryDb yang menjalankan kueri SQL dan mengembalikan hasil dari database.

3. Buka file server/openAI.ts di editor Anda dan temukan fungsi .getSQLFromNLP() Fungsi ini dipanggil oleh generatesql rute dan digunakan untuk mengonversi bahasa alami ke SQL.

   async function getSQLFromNLP(userPrompt: string): Promise<QueryData> {
       // Get the high-level database schema summary to be used in the prompt.
       // The db.schema file could be generated by a background process or the 
       // schema could be dynamically retrieved.
       const dbSchema = await fs.promises.readFile('db.schema', 'utf8');
   
       const systemPrompt = `
       Assistant is a natural language to SQL bot that returns a JSON object with the SQL query and 
       the parameter values in it. The SQL will query a PostgreSQL database.
   
       PostgreSQL tables with their columns:    
   
       ${dbSchema}
   
       Rules:
       - Convert any strings to a PostgreSQL parameterized query value to avoid SQL injection attacks.
       - Return a JSON object with the following structure: { "sql": "", "paramValues": [] }
   
       Examples:
   
       User: "Display all company reviews. Group by company."      
       Assistant: { "sql": "SELECT * FROM reviews", "paramValues": [] }
   
       User: "Display all reviews for companies located in cities that start with 'L'."
       Assistant: { "sql": "SELECT r.* FROM reviews r INNER JOIN customers c ON r.customer_id = c.id WHERE c.city LIKE 'L%'", "paramValues": [] }
   
       User: "Display revenue for companies located in London. Include the company name and city."
       Assistant: { 
           "sql": "SELECT c.company, c.city, SUM(o.total) AS revenue FROM customers c INNER JOIN orders o ON c.id = o.customer_id WHERE c.city = $1 GROUP BY c.company, c.city", 
           "paramValues": ["London"] 
       }
   
       User: "Get the total revenue for Adventure Works Cycles. Include the contact information as well."
       Assistant: { 
           "sql": "SELECT c.company, c.city, c.email, SUM(o.total) AS revenue FROM customers c INNER JOIN orders o ON c.id = o.customer_id WHERE c.company = $1 GROUP BY c.company, c.city, c.email", 
           "paramValues": ["Adventure Works Cycles"] 
       }
       `;
   
       let queryData: QueryData = { sql: '', paramValues: [], error: '' };
       let results = '';
   
       try {
           results = await callOpenAI(systemPrompt, userPrompt);
           if (results) {
               console.log('results', results);
               const parsedResults = JSON.parse(results);
               queryData = { ...queryData, ...parsedResults };
               if (isProhibitedQuery(queryData.sql)) {
                   queryData.sql = '';
                   queryData.error = 'Prohibited query.';
               }
           }
       } catch (error) {
           console.log(error);
           if (isProhibitedQuery(results)) {
               queryData.sql = '';
               queryData.error = 'Prohibited query.';
           } else {
               queryData.error = results;
           }
       }
   
       return queryData;
   }
   

   • Parameter userPrompt diteruskan ke fungsi . Nilainya userPrompt adalah kueri bahasa alami yang dimasukkan oleh pengguna di browser.
   • systemPrompt menentukan jenis asisten AI yang akan digunakan dan aturan yang harus diikuti. Ini membantu Azure OpenAI memahami struktur database, aturan apa yang akan diterapkan, dan cara mengembalikan kueri dan parameter SQL yang dihasilkan.
   • Fungsi bernama callOpenAI() dipanggil dan systemPrompt nilai dan userPrompt diteruskan ke fungsi tersebut.
   • Hasilnya diperiksa untuk memastikan tidak ada nilai yang dilarang yang disertakan dalam kueri SQL yang dihasilkan. Jika nilai yang dilarang ditemukan, kueri SQL diatur ke string kosong.

4. Mari kita telusuri permintaan sistem secara lebih rinci:

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

   • Jenis asisten AI yang akan digunakan ditentukan. Dalam hal ini "bahasa alami untuk bot SQL".

   • Nama tabel dan kolom dalam database ditentukan. Skema tingkat tinggi yang disertakan dalam prompt dapat ditemukan dalam file server/db.schema dan terlihat seperti berikut ini.

     - customers (id, company, city, email)
     - orders (id, customer_id, date, total)
     - order_items (id, order_id, product_id, quantity, price)
     - reviews (id, customer_id, review, date, comment)
     

     Tip

     Anda dapat mempertimbangkan untuk membuat tampilan baca-saja yang hanya berisi pengguna data yang diizinkan untuk mengkueri menggunakan bahasa alami ke SQL.

   • Aturan didefinisikan untuk mengonversi nilai string apa pun ke nilai kueri berparameter untuk menghindari serangan injeksi SQL.

   • Aturan didefinisikan untuk selalu mengembalikan objek JSON dengan kueri SQL dan nilai parameter di dalamnya.

   • Contoh perintah pengguna dan kueri SQL dan nilai parameter yang diharapkan disediakan. Ini disebut sebagai pembelajaran "beberapa tembakan". Meskipun LLM dilatih pada sejumlah besar data, mereka dapat disesuaikan dengan tugas baru hanya dengan beberapa contoh. Pendekatan alternatif adalah pembelajaran "zero-shot" di mana tidak ada contoh yang disediakan dan model diharapkan menghasilkan nilai kueri dan parameter SQL yang benar.

5. Fungsi ini getSQLFromNLP() mengirimkan permintaan sistem dan pengguna ke fungsi bernama callOpenAI() yang juga terletak di file server/openAI.ts . Fungsi ini callOpenAI() menentukan apakah layanan Azure OpenAI atau layanan OpenAI harus dipanggil dengan memeriksa variabel lingkungan. Jika kunci, titik akhir, dan model tersedia dalam variabel lingkungan maka Azure OpenAI dipanggil, jika tidak, OpenAI dipanggil.

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

   Catatan

   Meskipun kita akan fokus pada Azure OpenAI sepanjang tutorial ini, jika Anda hanya menyediakan OPENAI_API_KEY nilai dalam file .env , aplikasi akan menggunakan OpenAI sebagai gantinya. Jika Anda memilih untuk menggunakan OpenAI alih-alih Azure OpenAI, Anda mungkin melihat hasil yang berbeda dalam beberapa kasus.

6. getAzureOpenAICompletion() Temukan fungsi .

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

   Fungsi ini melakukan hal berikut:

   • Parameter:

     • systemPrompt, userPrompt, dan temperature adalah parameter utama.
       • systemPrompt: Menginformasikan model Azure OpenAI tentang perannya dan aturan yang harus diikuti.
       • userPrompt: Berisi informasi yang disediakan pengguna seperti input bahasa alami atau aturan untuk menghasilkan output.
       • temperature: Menentukan tingkat kreativitas respons model. Nilai yang lebih tinggi menghasilkan output yang lebih kreatif.

   • Pembuatan Penyelesaian:

     • Fungsi memanggil createAzureOpenAICompletion() dengan systemPrompt, userPrompt, dan temperature untuk menghasilkan penyelesaian.
     • Ini mengekstrak konten dari pilihan pertama dalam penyelesaian, memangkas spasi kosong tambahan.
     • Jika konten berisi struktur seperti JSON (ditunjukkan oleh keberadaan { dan }), konten JSON akan diekstrak.

   • Nilai Pengelogan dan Pengembalian:

     • Fungsi ini mencatat output Azure OpenAI ke konsol.
     • Ini mengembalikan konten yang diproses sebagai string.

7. createAzureOpenAICompletion() Temukan fungsi .

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

   Fungsi ini melakukan hal berikut:

   • Parameter:

     • systemPrompt, userPrompt, dan temperature adalah parameter utama yang dibahas sebelumnya.
     • Parameter opsional dataSources mendukung fitur "Azure Bring Your Own Data", yang akan dibahas nanti dalam tutorial ini.

   • Pemeriksaan Variabel Lingkungan:

     • Fungsi ini memverifikasi adanya variabel lingkungan penting, melemparkan kesalahan jika ada yang hilang.

   • Objek Konfigurasi:

     • Objek config dibuat menggunakan nilai dari .env file (OPENAI_API_KEY, , OPENAI_ENDPOINT, OPENAI_API_VERSIONOPENAI_MODEL). Nilai-nilai ini digunakan untuk membuat URL untuk memanggil Azure OpenAI.

   • Instans AzureOpenAI:

     • Instans AzureOpenAI dibuat menggunakan objek config. Simbol AzureOpenAI adalah bagian openai dari paket, yang harus diimpor di bagian atas file Anda.

   • Menghasilkan Penyelesaian:

     • Fungsi chat.completions.create() ini dipanggil dengan properti berikut:
       • model: Menentukan model GPT (misalnya, gpt-4o, gpt-3.5-turbo) seperti yang didefinisikan dalam file Anda .env .
       • max_tokens: Menentukan jumlah maksimum token untuk penyelesaian.
       • temperature: Mengatur suhu pengambilan sampel. Nilai yang lebih tinggi (misalnya, 0,9) menghasilkan respons yang lebih kreatif, sementara nilai yang lebih rendah (misalnya, 0) menghasilkan jawaban yang lebih deterministik.
       • response_format: Menentukan format respons. Di sini, diatur untuk mengembalikan objek JSON. Detail selengkapnya tentang mode JSON dapat ditemukan di dokumentasi referensi Azure OpenAI.
       • messages: Berisi pesan untuk menghasilkan penyelesaian obrolan. Contoh ini mencakup dua pesan: satu dari sistem (menentukan perilaku dan aturan) dan satu dari pengguna (berisi teks perintah).

   • Nilai Pengembalian:

     • Fungsi mengembalikan objek penyelesaian yang dihasilkan oleh Azure OpenAI.

8. Komentari baris berikut dalam getSQLFromNLP() fungsi:

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

9. Simpan openAI.ts. Server API akan secara otomatis membangun ulang kode TypeScript dan menghidupkan ulang server.

10. Kembali ke browser dan masukkan Pilih semua nama tabel dari database ke dalam input Kueri Kustom. Pilih Jalankan Kueri. Apakah nama tabel ditampilkan?

11. Kembali ke getSQLFromNLP() fungsi di server/openAI.ts dan tambahkan aturan berikut ke Rules: bagian prompt sistem lalu simpan file.

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

12. Kembali ke browser dan lakukan tugas berikut:

    • Masukkan Pilih semua nama tabel dari database ke dalam input Kueri Kustom. Pilih Jalankan Kueri. Apakah nama tabel ditampilkan?
    • Masukkan Pilih semua nama fungsi dari database. ke dalam input Kueri Kustom dan pilih Jalankan Kueri lagi. Apakah nama fungsi ditampilkan?

13. PERTANYAAN: Apakah model akan selalu mengikuti aturan yang Anda tentukan dalam perintah?

    JAWABAN: Tidak! Penting untuk dicatat bahwa model OpenAI dapat mengembalikan hasil yang tidak terduga sesekali yang mungkin tidak cocok dengan aturan yang telah Anda tentukan. Penting untuk merencanakannya dalam kode Anda.

14. Kembali ke server/openAI.ts dan temukan fungsi .isProhibitedQuery() Ini adalah contoh kode pasca-pemrosesan yang dapat dijalankan setelah Azure OpenAI mengembalikan hasil. Perhatikan bahwa properti mengatur sql properti ke string kosong jika kata kunci yang dilarang dikembalikan dalam kueri SQL yang dihasilkan. Ini memastikan bahwa jika hasil yang tidak terduga dikembalikan dari Azure OpenAI, kueri SQL tidak akan dijalankan terhadap database.

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

    Catatan

    Penting untuk dicatat bahwa ini hanya kode demo. Mungkin ada kata kunci terlarang lain yang diperlukan untuk mencakup kasus penggunaan spesifik Anda jika Anda memilih untuk mengonversi bahasa alami ke SQL. Ini adalah fitur yang harus Anda rencanakan dan gunakan dengan hati-hati untuk memastikan bahwa hanya kueri SQL yang valid yang dikembalikan dan dijalankan terhadap database. Selain kata kunci yang dilarang, Anda juga perlu memperhitungkan keamanan.

15. Kembali ke server/openAI.ts dan hapus komentar kode berikut dalam getSQLFromNLP() fungsi . Simpan file.

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

16. Hapus aturan berikut dari systemPrompt dan simpan file.

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

17. Kembali ke browser, masukkan Pilih semua nama tabel dari database ke input Kueri Kustom lagi dan pilih tombol Jalankan Kueri .

18. Apakah ada hasil tabel yang ditampilkan? Bahkan tanpa aturan di tempat, isProhibitedQuery() kode pasca-pemrosesan melarang jenis kueri tersebut dijalankan terhadap database.

19. Seperti yang dibahas sebelumnya, mengintegrasikan bahasa alami ke SQL dalam lini aplikasi bisnis bisa sangat bermanfaat bagi pengguna, tetapi itu datang dengan serangkaian pertimbangannya sendiri.

    Keuntungan:

    • Keramahan pengguna: Fitur ini dapat membuat interaksi database lebih mudah diakses oleh pengguna tanpa keahlian teknis, mengurangi kebutuhan akan pengetahuan SQL dan berpotensi mempercepat operasi.

    • Peningkatan produktivitas: Analis bisnis, pemasar, eksekutif, dan pengguna non-teknis lainnya dapat mengambil informasi berharga dari database tanpa harus mengandalkan pakar teknis, sehingga meningkatkan efisiensi.

    • Aplikasi luas: Dengan menggunakan model bahasa lanjutan, aplikasi dapat dirancang untuk memenuhi berbagai pengguna dan kasus penggunaan.

    Pertimbangan:

    • Keamanan: Salah satu kekhawatiran terbesar adalah keamanan. Jika pengguna dapat berinteraksi dengan database menggunakan bahasa alami, perlu ada langkah-langkah keamanan yang kuat untuk mencegah akses yang tidak sah atau kueri berbahaya. Anda dapat mempertimbangkan untuk menerapkan mode baca-saja untuk mencegah pengguna memodifikasi data.

    • Privasi Data: Data tertentu mungkin sensitif dan tidak boleh mudah diakses, jadi Anda harus memastikan perlindungan yang tepat dan izin pengguna telah diberlakukan.

    • Akurasi: Meskipun pemrosesan bahasa alami telah meningkat secara signifikan, itu tidak sempurna. Salah menafsirkan kueri pengguna dapat menyebabkan hasil yang tidak akurat atau perilaku yang tidak terduga. Anda harus merencanakan bagaimana hasil yang tidak terduga akan ditangani.

    • Efisiensi: Tidak ada jaminan bahwa SQL yang dikembalikan dari kueri bahasa alami akan efisien. Dalam beberapa kasus, panggilan tambahan ke Azure OpenAI mungkin diperlukan jika aturan pasca-pemrosesan mendeteksi masalah dengan kueri SQL.

    • Pelatihan dan Adaptasi Pengguna: Pengguna perlu dilatih untuk merumuskan kueri mereka dengan benar. Meskipun lebih mudah daripada mempelajari SQL, masih ada kurva pembelajaran yang terlibat.

20. Beberapa poin akhir yang perlu dipertimbangkan sebelum melanjutkan ke latihan berikutnya:

    • Ingatlah bahwa, "Hanya karena Anda tidak dapat berarti Anda harus" berlaku di sini. Gunakan perencanaan yang sangat hati-hati dan hati-hati sebelum mengintegrasikan bahasa alami ke SQL ke dalam aplikasi. Penting untuk memahami potensi risiko dan merencanakannya.
    • Sebelum menggunakan jenis teknologi ini, diskusikan skenario potensial dengan tim Anda, administrator database, tim keamanan, pemangku kepentingan, dan pihak terkait lainnya untuk memastikan bahwa itu sesuai untuk organisasi Anda. Penting untuk dibahas jika bahasa alami ke SQL memenuhi keamanan, privasi, dan persyaratan lain yang mungkin dimiliki organisasi Anda.
    • Keamanan harus menjadi perhatian utama dan dibangun dalam proses perencanaan, pengembangan, dan penyebaran.
    • Meskipun bahasa alami ke SQL bisa sangat kuat, perencanaan yang cermat harus masuk ke dalamnya untuk memastikan permintaan memiliki aturan yang diperlukan dan fungsionalitas pasca-pemrosesan disertakan. Rencanakan waktu tambahan untuk menerapkan dan menguji jenis fungsionalitas ini dan untuk memperhitungkan skenario di mana hasil yang tidak terduga dikembalikan.
    • Dengan Azure OpenAI, pelanggan mendapatkan kemampuan keamanan Microsoft Azure sambil menjalankan model yang sama dengan OpenAI. Azure OpenAI menawarkan jaringan privat, ketersediaan regional, dan pemfilteran konten AI yang bertanggung jawab. Pelajari selengkapnya tentang Data, privasi, dan keamanan untuk Azure OpenAI Service.

21. Anda sekarang telah melihat cara menggunakan Azure OpenAI untuk mengonversi bahasa alami ke SQL dan mempelajari tentang pro dan kontra penerapan jenis fungsionalitas ini. Dalam latihan berikutnya, Anda akan mempelajari bagaimana pesan email dan SMS dapat dibuat menggunakan Azure OpenAI.

AI: Menghasilkan Penyelesaian

• Tersisa 112 menit

Selain bahasa alami ke fitur SQL, Anda juga dapat menggunakan Layanan Azure OpenAI untuk menghasilkan pesan email dan SMS untuk meningkatkan produktivitas pengguna dan menyederhanakan alur kerja komunikasi. Dengan menggunakan kemampuan pembuatan bahasa Azure OpenAI, pengguna dapat menentukan aturan tertentu seperti "Pesanan tertunda 5 hari" dan sistem akan secara otomatis menghasilkan email dan pesan SMS yang sesuai kontekstual berdasarkan aturan tersebut.

Kemampuan ini berfungsi sebagai jump start bagi pengguna, memberi mereka templat pesan yang dibuat dengan cermat yang dapat mereka sesuaikan dengan mudah sebelum mengirim. Hasilnya adalah pengurangan waktu dan upaya yang signifikan yang diperlukan untuk membuat pesan, memungkinkan pengguna untuk fokus pada tugas penting lainnya. Selain itu, teknologi pembuatan bahasa Azure OpenAI dapat diintegrasikan ke dalam alur kerja otomatisasi, memungkinkan sistem untuk secara otonom menghasilkan dan mengirim pesan sebagai respons terhadap pemicu yang telah ditentukan sebelumnya. Tingkat otomatisasi ini tidak hanya mempercepat proses komunikasi tetapi juga memastikan olahpesan yang konsisten dan akurat di berbagai skenario.

Dalam latihan ini, Anda akan:

• Bereksperimenlah dengan perintah yang berbeda.
• Gunakan perintah untuk menghasilkan penyelesaian untuk pesan email dan SMS.
• Jelajahi kode yang memungkinkan penyelesaian AI.
• Pelajari tentang pentingnya rekayasa yang diminta dan menyertakan aturan dalam perintah Anda.

Mari kita mulai dengan bereksperimen dengan aturan berbeda yang dapat digunakan untuk menghasilkan pesan email dan SMS.

Menggunakan Fitur Penyelesaian AI

1. Dalam latihan sebelumnya, Anda memulai database, API, dan aplikasi. Anda juga memperbarui .env file. Jika Anda tidak menyelesaikan langkah-langkah tersebut, ikuti instruksi di akhir latihan sebelum melanjutkan.

2. Kembali ke browser (http://localhost:4200) dan pilih Hubungi Pelanggan di baris mana pun di datagrid diikuti oleh Email/SMS Pelanggan untuk masuk ke layar Generator Pesan.

3. Ini menggunakan Azure OpenAI untuk mengonversi aturan pesan yang Anda tentukan menjadi pesan Email/SMS. Lakukan tugas-tugas berikut:

   • Masukkan aturan seperti Pesanan tertunda 5 hari ke dalam input dan pilih tombol Buat Pesan Email/SMS.

     

   • Anda akan melihat subjek dan isi yang dihasilkan untuk email dan pesan singkat yang dihasilkan untuk SMS.

   Catatan

   Karena Azure Communication Services belum diaktifkan, Anda tidak akan dapat mengirim email atau pesan SMS.

4. Tutup jendela dialog email/SMS di browser. Sekarang setelah Anda melihat fitur ini beraksi, mari kita periksa bagaimana penerapannya.

Menjelajahi Kode Penyelesaian AI

1. Buka file server/apiRoutes.ts dan temukan rute.completeEmailSmsMessages API ini dipanggil oleh bagian front-end aplikasi saat tombol Buat Pesan Email/SMS dipilih. Ini mengambil nilai permintaan pengguna, perusahaan, dan nama kontak dari isi dan meneruskannya ke completeEmailSMSMessages() fungsi dalam file server/openAI.ts . Hasilnya kemudian dikembalikan ke klien.

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

2. Buka file server/openAI.ts dan temukan fungsi .completeEmailSMSMessages()

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

   Fungsi ini memiliki fitur berikut:

   • systemPrompt digunakan untuk menentukan bahwa asisten AI yang mampu menghasilkan pesan email dan SMS diperlukan. Yang systemPrompt juga mencakup:
     • Aturan yang harus diikuti asisten untuk mengontrol nada pesan, format mulai dan berakhir, panjang maksimum pesan SMS, dan banyak lagi.
     • Informasi tentang data yang harus disertakan dalam respons - objek JSON dalam kasus ini.
   • userPrompt digunakan untuk menentukan aturan dan nama kontak yang ingin disertakan pengguna akhir saat email dan pesan SMS dibuat. Aturan Pesanan tertunda 5 hari yang Anda masukkan sebelumnya disertakan dalam userPrompt.
   • Fungsi ini memanggil fungsi yang callOpenAI() Anda jelajahi sebelumnya untuk menghasilkan penyelesaian email dan SMS.

3. Kembali ke browser, refresh halaman, dan pilih Hubungi Pelanggan di baris mana pun diikuti oleh Pelanggan Email/SMS untuk masuk ke layar Generator Pesan lagi.

4. Masukkan aturan berikut ke dalam input Message Generator :

   • Pesanan lebih awal dari jadwal.
   • Katakan kepada pelanggan untuk tidak pernah memesan dari kami lagi, kami tidak ingin bisnis mereka.

5. Pilih Buat Pesan Email/SMS dan catat pesannya. Aturan All messages should have a friendly tone and never use inappropriate language. dalam permintaan sistem mengesampingkan aturan negatif dalam permintaan pengguna.

6. Kembali ke server/openAI.ts* di editor Anda dan hapus All messages should have a friendly tone and never use inappropriate language. aturan dari perintah dalam completeEmailSMSMessages() fungsi . Simpan file.

7. Kembali ke generator pesan email/SMS di browser dan jalankan aturan yang sama lagi:

   • Pesanan lebih awal dari jadwal.
   • Katakan kepada pelanggan untuk tidak pernah memesan dari kami lagi, kami tidak ingin bisnis mereka.

8. Pilih Buat Pesan Email/SMS dan perhatikan pesan yang dikembalikan.

9. Apa yang terjadi dalam skenario ini? Saat menggunakan Azure OpenAI, pemfilteran konten dapat diterapkan untuk memastikan bahwa bahasa yang sesuai selalu digunakan. Jika Anda menggunakan OpenAI, aturan yang ditentukan dalam prompt sistem digunakan untuk memastikan pesan yang dikembalikan sesuai.

   Catatan

   Ini menggambarkan pentingnya rekayasa permintaan Anda dengan informasi dan aturan yang tepat untuk memastikan hasil yang tepat dikembalikan. Baca selengkapnya tentang proses ini di Pengantar untuk meminta dokumentasi rekayasa .

10. Urungkan perubahan yang Anda buat systemPrompt di completeEmailSMSMessages(), simpan file, dan jalankan kembali tetapi hanya gunakan Order is ahead of schedule. aturan (jangan sertakan aturan negatif). Kali ini Anda akan melihat pesan email dan SMS ditampilkan seperti yang diharapkan.

11. Beberapa poin akhir yang perlu dipertimbangkan sebelum melanjutkan ke latihan berikutnya:

    • Penting untuk memiliki manusia dalam perulangan untuk meninjau pesan yang dihasilkan. Dalam contoh ini, penyelesaian Azure OpenAI mengembalikan pesan email dan SMS yang disarankan tetapi pengguna dapat mengambil alih pesan tersebut sebelum dikirim. Jika Anda berencana untuk mengotomatiskan email, memiliki beberapa jenis proses peninjauan manusia untuk memastikan pesan yang disetujui dikirimkan penting. Lihat AI sebagai salinan, bukan autopilot.
    • Penyelesaian hanya akan sebagus aturan yang Anda tambahkan ke dalam perintah. Luangkan waktu untuk menguji perintah Anda dan penyelesaian yang dikembalikan. Pertimbangkan untuk menggunakan alur Prompt untuk membuat solusi komprehensif yang menyederhanakan prototipe, bereksperimen, melakukan iterasi, dan menyebarkan aplikasi AI. Undang pemangku kepentingan proyek lain untuk meninjau penyelesaian juga.
    • Anda mungkin perlu menyertakan kode pasca-pemrosesan untuk memastikan hasil yang tidak terduga ditangani dengan benar.
    • Gunakan perintah sistem untuk menentukan aturan dan informasi yang harus diikuti asisten AI. Gunakan permintaan pengguna untuk menentukan aturan dan informasi yang ingin disertakan pengguna akhir dalam penyelesaian.

AI: Azure OpenAI pada data Anda

• Tersisa 102 menit

Integrasi Azure OpenAI Natural Language Processing (NLP) dan kemampuan penyelesaian menawarkan potensi signifikan untuk meningkatkan produktivitas pengguna. Dengan memanfaatkan perintah dan aturan yang sesuai, asisten AI dapat secara efisien menghasilkan berbagai bentuk komunikasi, seperti pesan email, pesan SMS, dan banyak lagi. Fungsionalitas ini menyebabkan peningkatan efisiensi pengguna dan alur kerja yang disederhanakan.

Meskipun fitur ini cukup kuat sendiri, mungkin ada kasus di mana pengguna perlu menghasilkan penyelesaian berdasarkan data kustom perusahaan Anda. Misalnya, Anda mungkin memiliki kumpulan manual produk yang mungkin menantang bagi pengguna untuk menavigasi saat mereka membantu pelanggan dengan masalah penginstalan. Atau, Anda dapat mempertahankan serangkaian Tanya Jawab Umum (FAQ) yang komprehensif yang terkait dengan manfaat layanan kesehatan yang dapat membuktikan tantangan bagi pengguna untuk membaca dan mendapatkan jawaban yang mereka butuhkan. Dalam kasus ini dan banyak lainnya, Azure OpenAI Service memungkinkan Anda memanfaatkan data Anda sendiri untuk menghasilkan penyelesaian, memastikan respons yang lebih disesuaikan dan akurat secara kontekstual terhadap pertanyaan pengguna.

Berikut adalah gambaran umum singkat tentang cara kerja fitur "bawa data Anda sendiri" dari dokumentasi Azure OpenAI.

Dalam latihan ini, Anda akan:

• Buat sumber data kustom menggunakan portal Azure AI Foundry.
• Sebarkan model penyematan menggunakan portal Azure AI Foundry.
• Unggah dokumen kustom.
• Mulai sesi obrolan di taman bermain Obrolan untuk bereksperimen dengan menghasilkan penyelesaian berdasarkan data Anda sendiri.
• Jelajahi kode yang menggunakan Azure AI Search dan Azure OpenAI untuk menghasilkan penyelesaian berdasarkan data Anda sendiri.

Mari kita mulai dengan menyebarkan model penyematan dan menambahkan sumber data kustom di Azure AI Foundry.

Menambahkan Sumber Data Kustom ke Azure AI Foundry

1. Navigasi ke Azure OpenAI Studio dan masuk dengan kredensial yang memiliki akses ke sumber daya Azure OpenAI Anda.

2. Pilih Penyebaran dari menu navigasi.

3. Pilih Pilih Sebarkan model -->Sebarkan model dasar di toolbar.

4. Pilih model text-embedding-ada-002 dari daftar model dan pilih Konfirmasi.

5. Pilih opsi berikut:

   • Nama penyebaran: text-embedding-ada-002
   • Versi model: Default
   • Jenis penyebaran: Standar
   • Atur nilai Token per Batas Tarif Menit (ribuan) ke 120 Ribu
   • Filter Konten: DefaultV2
   • Aktifkan kutipan dinamis: Diaktifkan

6. Pilih tombol Sebarkan.

7. Setelah model dibuat, pilih Beranda dari menu navigasi untuk masuk ke layar selamat datang.

8. Temukan petak peta Bawa data Anda sendiri di layar selamat datang dan pilih Coba sekarang.

   

9. Pilih Tambahkan data Anda diikuti dengan Tambahkan sumber data.

10. Di menu dropdown Pilih sumber data, pilih Unggah file.

11. Di bawah menu dropdown Pilih sumber daya penyimpanan Azure Blob, pilih Buat sumber daya penyimpanan Azure Blob baru.

12. Pilih langganan Azure Anda di menu dropdown Langganan .

13. Di bawah menu dropdown Pilih sumber daya penyimpanan Azure Blob, pilih Buat sumber daya penyimpanan Azure Blob baru.

14. Ini akan membawa Anda ke portal Azure tempat Anda dapat melakukan tugas-tugas berikut:

    • Masukkan nama unik untuk akun penyimpanan seperti byodstorage[Nama Belakang Anda].
    • Pilih wilayah yang dekat dengan lokasi Anda.
    • Pilih Tinjau diikuti dengan Buat.

15. Setelah sumber daya penyimpanan blob dibuat, kembali ke dialog Azure AI Foundry dan pilih sumber daya penyimpanan blob yang baru dibuat dari dropdown Pilih sumber daya penyimpanan Azure Blob. Jika Anda tidak melihatnya tercantum, pilih ikon refresh di samping menu dropdown.

16. Berbagi sumber daya lintas asal (CORS) perlu diaktifkan agar akun penyimpanan Anda dapat diakses. Pilih Aktifkan cors dalam dialog Azure AI Foundry.

    

17. Di bawah menu tarik-turun Pilih sumber daya Pencarian Azure AI, pilih Buat sumber daya Pencarian Azure AI baru.

18. Ini akan membawa Anda kembali ke portal Azure tempat Anda dapat melakukan tugas-tugas berikut:

    • Masukkan nama unik untuk sumber daya Pencarian AI seperti byodsearch-[Nama Belakang Anda].
    • Pilih wilayah yang dekat dengan lokasi Anda.
    • Di bagian Tingkat harga, pilih Ubah Tingkat Harga dan pilih Dasar diikuti dengan Pilih. Tingkat gratis tidak didukung, jadi Anda akan membersihkan sumber daya Pencarian AI di akhir tutorial ini.
    • Pilih Tinjau diikuti dengan Buat.

19. Setelah sumber daya Pencarian AI dibuat, buka halaman Gambaran Umum sumber daya dan salin nilai Url ke file lokal.

    

20. Pilih Pengaturan -->Kunci di menu navigasi.

21. Pada halaman kontrol Akses API, pilih Keduanya untuk mengaktifkan layanan yang akan diakses dengan menggunakan Identitas Terkelola atau dengan menggunakan kunci. Pilih Ya ketika diminta.

    Catatan

    Meskipun kita akan menggunakan kunci API dalam latihan ini karena menambahkan penetapan peran dapat memakan waktu hingga 10 menit, dengan sedikit upaya tambahan, Anda dapat mengaktifkan identitas terkelola yang ditetapkan sistem untuk mengakses layanan dengan lebih aman.

22. Pilih Kunci di menu navigasi kiri dan salin nilai Kunci admin utama ke file lokal. Anda akan memerlukan URL dan nilai kunci nanti dalam latihan.

23. Pilih Pengaturan -->Peringkat semantik di menu navigasi dan pastikan bahwa Gratis dipilih.

    Catatan

    Untuk memeriksa apakah peringkat semantik tersedia di wilayah tertentu, Periksa halaman Produk yang Tersedia menurut Wilayah di situs web Azure untuk melihat apakah wilayah Anda tercantum.

24. Kembali ke dialog Azure AI Foundry Tambahkan Data dan pilih sumber daya pencarian yang baru dibuat dari menu dropdown Pilih sumber daya Azure AI Search. Jika Anda tidak melihatnya tercantum, pilih ikon refresh di samping menu dropdown.

25. Masukkan nilai byod-search-index untuk Masukkan nilai nama indeks.

26. Pilih kotak centang Tambahkan pencarian vektor ke sumber daya pencarian ini.

27. Di menu dropdown Pilih model penyematan, pilih model text-embedding-ada-002 yang Anda buat sebelumnya.

28. Dalam dialog Unggah file, pilih Telusuri file.

29. Navigasikan ke folder dokumen pelanggan proyek (terletak di akar proyek) dan pilih file berikut:

    • Instructions.docx Penginstalan Clock A102
    • FAQs.docx Perusahaan

    Catatan

    Fitur ini saat ini mendukung format file berikut untuk pembuatan indeks lokal: .txt, .md, .html, .pdf, .docx, dan .pptx.

30. Pilih Unggah file. File akan diunggah ke dalam kontainer fileupload-byod-search-index di sumber daya penyimpanan blob yang Anda buat sebelumnya.

31. Pilih Berikutnya untuk masuk ke dialog Manajemen data .

32. Di menu dropdown Jenis pencarian, pilih Hibrid + semantik.

    Catatan

    Opsi ini menyediakan dukungan untuk pencarian kata kunci dan vektor. Setelah hasil dikembalikan, proses peringkat sekunder diterapkan ke tataan hasil menggunakan model pembelajaran mendalam yang meningkatkan relevansi pencarian untuk pengguna. Untuk mempelajari selengkapnya tentang pencarian semantik, lihat dokumentasi Pencarian Semantik di Azure AI Search .

33. Pastikan nilai Pilih ukuran diatur ke 1024.

34. Pilih Selanjutnya.

35. Untuk jenis autentikasi sumber daya Azure, pilih kunci API. Pelajari selengkapnya tentang memilih jenis autentikasi yang tepat dalam dokumentasi autentikasi Azure AI Search.

36. Pilih Selanjutnya.

37. Tinjau detail dan pilih Simpan dan tutup.

38. Sekarang setelah data kustom Anda diunggah, data akan diindeks dan tersedia untuk digunakan di playground Obrolan. Proses ini mungkin memakan waktu beberapa menit. Setelah selesai, lanjutkan ke bagian berikutnya.

Menggunakan Sumber Data Kustom Anda di Chat Playground

1. Temukan bagian Sesi obrolan dari halaman di Azure OpenAI Studio dan masukkan kueri Pengguna berikut:

   What safety rules are required to install a clock?
   

2. Setelah mengirimkan kueri pengguna, Anda akan melihat hasil yang mirip dengan yang ditampilkan berikut ini:

   

3. Perluas bagian 1 referensi dalam respons obrolan dan perhatikan bahwa file Instructions.docx Penginstalan Clock A102 tercantum dan Anda dapat memilihnya untuk melihat dokumen.

4. Masukkan pesan Pengguna berikut:

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

5. Anda akan melihat hasil yang mirip dengan yang ditampilkan berikut ini:

   

6. Sekarang mari kita bereksperimen dengan dokumen FAQ Perusahaan. Masukkan teks berikut ke dalam bidang Kueri pengguna:

   What is the company's policy on vacation time?
   

7. Anda akan melihat bahwa tidak ada informasi yang ditemukan untuk permintaan tersebut.

8. Masukkan teks berikut ke dalam bidang Kueri pengguna:

   How should I handle refund requests?
   

9. Anda akan melihat hasil yang mirip dengan yang ditampilkan berikut ini:

   

10. Perluas bagian 1 referensi dalam respons obrolan dan perhatikan bahwa file FAQs.docx Perusahaan tercantum dan Anda dapat memilihnya untuk melihat dokumen.

11. Pilih Tampilkan kode di toolbar playground Obrolan.

    

12. Perhatikan bahwa Anda dapat beralih di antara bahasa yang berbeda, melihat titik akhir, dan mengakses kunci titik akhir. Tutup jendela dialog Kode Sampel.

    

13. Aktifkan tombol Tampilkan JSON mentah di atas pesan obrolan. Perhatikan bahwa sesi obrolan dimulai dengan pesan yang mirip dengan yang berikut ini:

    {
        "role": "system",
        "content": "You are an AI assistant that helps people find information."
    }
    

14. Sekarang setelah Anda membuat sumber data kustom dan bereksperimen dengannya di taman bermain Obrolan, mari kita lihat bagaimana Anda dapat menggunakannya di aplikasi proyek.

Menggunakan Fitur Bawa Data Anda Sendiri di Aplikasi

1. Kembali ke proyek di VISUAL Code dan buka file .env . Perbarui nilai berikut dengan titik akhir, kunci, dan nama indeks Layanan AI Anda. Anda menyalin titik akhir dan kunci ke file lokal sebelumnya dalam latihan ini.

   AZURE_AI_SEARCH_ENDPOINT=<AI_SERVICES_ENDPOINT_VALUE>
   AZURE_AI_SEARCH_KEY=<AI_SERVICES_KEY_VALUE>
   AZURE_AI_SEARCH_INDEX=byod-search-index
   

2. Dalam latihan sebelumnya, Anda memulai database, API, dan aplikasi. Anda juga memperbarui .env file. Jika Anda tidak menyelesaikan langkah-langkah tersebut, ikuti instruksi di akhir latihan sebelumnya sebelum melanjutkan.

3. Setelah aplikasi dimuat di browser, pilih ikon Bantuan Obrolan di kanan atas aplikasi.

   

4. Teks berikut akan muncul dalam dialog obrolan:

   How should I handle a company refund request?
   

5. Pilih tombol Dapatkan Bantuan . Anda akan melihat hasil yang dikembalikan dari dokumen Company FAQs.docx yang Anda unggah sebelumnya di Azure OpenAI Studio. Jika Anda ingin membaca dokumen, Anda dapat menemukannya di folder dokumen pelanggan di akar proyek.

6. Ubah teks menjadi berikut ini dan pilih tombol Dapatkan Bantuan :

   What safety rules are required to install a clock?
   

7. Anda akan melihat hasil yang dikembalikan dari dokumen Instructions.docx Penginstalan Clock A102 yang Anda unggah sebelumnya di Azure OpenAI Studio. Dokumen ini juga tersedia di folder dokumen pelanggan di akar proyek.

Menjelajahi Kode

1. Kembali ke kode sumber proyek di Visual Studio Code.

2. Buka file server/apiRoutes.ts dan temukan rute.completeBYOD API ini dipanggil saat tombol Dapatkan Bantuan dipilih dalam dialog Bantuan Obrolan. Ini mengambil permintaan pengguna dari isi permintaan dan meneruskannya ke completeBYOD() fungsi dalam file server/openAI.ts . Hasilnya kemudian dikembalikan ke klien.

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

3. Buka file server/openAI.ts dan temukan fungsi .completeBYOD()

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

   Fungsi ini memiliki fitur berikut:

   • Parameter userPrompt berisi informasi yang diketik pengguna ke dalam dialog bantuan obrolan.
   • systemPrompt variabel menentukan bahwa asisten AI yang dirancang untuk membantu orang menemukan informasi akan digunakan.
   • callOpenAI() digunakan untuk memanggil Azure OpenAI API dan mengembalikan hasilnya. Ini meneruskan systemPrompt nilai dan userPrompt serta parameter berikut:
     • temperature - Jumlah kreativitas untuk disertakan dalam respons. Pengguna membutuhkan jawaban yang konsisten (kurang kreatif) dalam hal ini sehingga nilai diatur ke 0.
     • useBYOD - Nilai boolean yang menunjukkan apakah akan menggunakan AI Search bersama dengan Azure OpenAI atau tidak. Dalam hal ini, ini diatur ke true sehingga fungsionalitas Pencarian AI akan digunakan.

4. Fungsi callOpenAI() menerima useBYOD parameter yang digunakan untuk menentukan fungsi OpenAI mana yang akan dipanggil. Dalam hal ini, diatur useBYOD ke true sehingga getAzureOpenAIBYODCompletion() fungsi akan dipanggil.

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

5. getAzureOpenAIBYODCompletion() Temukan fungsi di server/openAI.ts. Ini sangat mirip dengan fungsi yang getAzureOpenAICompletion() Anda periksa sebelumnya, tetapi ditampilkan sebagai fungsi terpisah untuk menyoroti beberapa perbedaan utama yang unik untuk skenario "Azure OpenAI pada data Anda" yang tersedia di Azure OpenAI.

   async function getAzureOpenAIBYODCompletion(systemPrompt: string, userPrompt: string, temperature: number): Promise<string> {
       const dataSources = [
           {
               type: 'azure_search',
               parameters: {
                   authentication: {
                       type: 'api_key',
                       key: AZURE_AI_SEARCH_KEY
                   },
                   endpoint: AZURE_AI_SEARCH_ENDPOINT,
                   index_name: AZURE_AI_SEARCH_INDEX
               }
           }
       ];
   
       const completion = await createAzureOpenAICompletion(systemPrompt, userPrompt, temperature, dataSources) as AzureOpenAIYourDataResponse;
       console.log('Azure OpenAI Add Your Own Data Output: \n', completion.choices[0]?.message);
       for (let citation of completion.choices[0]?.message?.context?.citations ?? []) {
           console.log('Citation Path:', citation.filepath);
       }
       return completion.choices[0]?.message?.content?.trim() ?? '';
   }
   

   Perhatikan fungsionalitas berikut dalam getAzureOpenAIBYODCompletion() fungsi:

   • Properti dataSources dibuat yang berisi nilai sumber daya keyPencarian AI , , endpointdan index_name yang ditambahkan ke .env file sebelumnya dalam latihan ini
   • Fungsi createAzureOpenAICompletion() ini dipanggil dengan systemPromptnilai , , userPrompttemperature, dan dataSources . Fungsi ini digunakan untuk memanggil Azure OpenAI API dan mengembalikan hasilnya.
   • Setelah respons dikembalikan, kutipan dokumen dicatat ke konsol. Konten pesan penyelesaian kemudian dikembalikan ke pemanggil.

6. Beberapa poin akhir yang perlu dipertimbangkan sebelum melanjutkan ke latihan berikutnya:

   • Aplikasi sampel menggunakan satu indeks di Azure AI Search. Anda dapat menggunakan beberapa indeks dan sumber data dengan Azure OpenAI. dataSources Properti dalam fungsi dapat diperbarui getAzureOpenAIBYODCompletion() untuk menyertakan beberapa sumber data sesuai kebutuhan.
   • Keamanan harus dievaluasi dengan hati-hati dengan jenis skenario ini. Pengguna seharusnya tidak dapat mengajukan pertanyaan dan mendapatkan hasil dari dokumen yang tidak dapat mereka akses.

7. Sekarang setelah Anda mempelajari tentang Azure OpenAI, perintah, penyelesaian, dan bagaimana Anda dapat menggunakan data Anda sendiri, mari kita pergi ke latihan berikutnya untuk mempelajari bagaimana fitur komunikasi dapat digunakan untuk meningkatkan aplikasi. Jika Anda ingin mempelajari selengkapnya tentang Azure OpenAI, lihat Konten pelatihan Mulai menggunakan Azure OpenAI Service . Informasi tambahan tentang menggunakan data Anda sendiri dengan Azure OpenAI dapat ditemukan di Azure OpenAI pada dokumentasi data Anda.

Komunikasi: Membuat Sumber Daya Azure Communication Services

• Tersisa 87 menit

Komunikasi yang efektif sangat penting untuk aplikasi bisnis kustom yang sukses. Dengan menggunakan Azure Communication Services (ACS), Anda dapat menambahkan fitur seperti panggilan telepon, obrolan langsung, panggilan audio/video, dan pesan email dan SMS ke aplikasi Anda. Sebelumnya, Anda mempelajari bagaimana Azure OpenAI dapat menghasilkan penyelesaian untuk pesan email dan SMS. Sekarang, Anda akan mempelajari cara mengirim pesan. Bersama-sama, ACS dan OpenAI dapat meningkatkan aplikasi Anda dengan menyederhanakan komunikasi, meningkatkan interaksi, dan meningkatkan produktivitas bisnis.

Dalam latihan ini, Anda akan:

• Buat sumber daya Azure Communication Services (ACS).
• Tambahkan nomor telepon bebas telunjuk dengan kemampuan panggilan dan SMS.
• Menyambungkan domain email.
• Perbarui file .env proyek dengan nilai dari sumber daya ACS Anda.

Membuat Sumber Daya Azure Communication Services

1. Kunjungi portal Azure di browser Anda dan masuk jika Anda belum melakukannya.

2. Ketik layanan komunikasi di bilah pencarian di bagian atas halaman dan pilih Communication Services dari opsi yang muncul.

   

3. Pilih Buat di toolbar.

4. Lakukan tugas-tugas berikut:

   • Pilih langganan Azure Anda.
   • Pilih grup sumber daya yang akan digunakan (buat yang baru jika tidak ada).
   • Masukkan nama sumber daya ACS. Nilainya harus unik.
   • Pilih lokasi data.

5. Pilih Tinjau + Buat diikuti dengan Buat.

6. Anda berhasil membuat sumber daya Azure Communication Services baru! Selanjutnya, Anda akan mengaktifkan kemampuan panggilan telepon dan SMS. Anda juga akan menyambungkan domain email ke sumber daya.

Mengaktifkan Kemampuan Panggilan Telepon dan SMS

1. Tambahkan nomor telepon dan pastikan bahwa nomor telepon mengaktifkan kemampuan panggilan. Anda akan menggunakan nomor telepon ini untuk memanggil telepon dari aplikasi.

   • Pilih Telepon dan SMS -->Nomor telepon dari menu Sumber Daya.

   • Pilih + Dapatkan di toolbar (atau pilih tombol Dapatkan nomor ) dan masukkan informasi berikut:

     • Negara atau wilayah: United States
     • Jenis angka: Toll-free

     Catatan

     Kartu kredit diperlukan pada langganan Azure Anda untuk membuat nomor bebas pulsa. Jika Anda tidak memiliki kartu, jangan ragu untuk melompati penambahan nomor telepon dan melompat ke bagian berikutnya dari latihan yang menghubungkan domain email. Anda masih dapat menggunakan aplikasi, tetapi tidak akan dapat memanggil nomor telepon.

     • Nomor: Pilih Tambahkan ke keranjang untuk salah satu nomor telepon yang tercantum.

2. Pilih Berikutnya, tinjau detail nomor telepon, dan pilih Beli sekarang.

   Catatan

   Verifikasi SMS untuk nomor bebas pulsa sekarang wajib di Amerika Serikat dan Kanada. Untuk mengaktifkan pesan SMS, Anda harus mengirimkan verifikasi setelah pembelian nomor telepon. Meskipun tutorial ini tidak akan melalui proses tersebut, Anda dapat memilih Telepon dan SMS -->Dokumen Peraturan dari menu sumber daya dan menambahkan dokumentasi validasi yang diperlukan.

3. Setelah nomor telepon dibuat, pilih untuk masuk ke panel Fitur . Pastikan bahwa nilai berikut diatur (nilai tersebut harus diatur secara default):

   • Di bagian Panggilan , pilih Make calls.
   • Di bagian SMS , pilih Send and receive SMS.
   • Pilih Simpan.

4. Salin nilai nomor telepon ke dalam file untuk digunakan nanti. Nomor telepon harus mengikuti pola umum ini: +12345678900.

Menyambungkan Domain Email

1. Lakukan tugas berikut untuk membuat domain email yang tersambung untuk sumber daya ACS Anda sehingga Anda bisa mengirim email. Ini akan digunakan untuk mengirim email dari aplikasi.

   • Pilih Email -->Domain dari menu Sumber Daya.
   • Pilih Sambungkan domain dari toolbar.
   • Pilih Grup Langganan dan Sumber Daya Anda.
   • Di bawah menu dropdown Layanan Email, pilih Add an email service.
   • Beri nama layanan email seperti acs-demo-email-service.
   • Pilih Tinjau + buat diikuti dengan Buat.
   • Setelah penyebaran selesai, pilih Go to resource, dan pilih 1-click add untuk menambahkan subdomain Azure gratis.
   • Setelah subdomain ditambahkan (perlu beberapa saat untuk disebarkan), pilih subdomain.
   • Setelah Anda berada di layar AzureManagedDomain , pilih Layanan email -->MailDari alamat dari menu Sumber Daya.
   • Salin nilai MailFrom ke file. Anda akan menggunakannya nanti saat memperbarui file .env .
   • Kembali ke sumber daya Azure Communication Services Anda dan pilih Email -->Domains dari menu sumber daya.
   • Pilih Add domain dan masukkan MailFrom nilai dari langkah sebelumnya (pastikan Anda memilih langganan, grup sumber daya, dan layanan email yang benar). Pilih tombol Connect.

.env Memperbarui File

1. Sekarang setelah nomor telepon ACS Anda (dengan panggilan dan SMS diaktifkan) dan domain email siap, perbarui kunci/nilai berikut dalam file .env di proyek Anda:

   ACS_CONNECTION_STRING=<ACS_CONNECTION_STRING>
   ACS_PHONE_NUMBER=<ACS_PHONE_NUMBER>
   ACS_EMAIL_ADDRESS=<ACS_EMAIL_ADDRESS>
   CUSTOMER_EMAIL_ADDRESS=<EMAIL_ADDRESS_TO_SEND_EMAIL_TO>
   CUSTOMER_PHONE_NUMBER=<UNITED_STATES_BASED_NUMBER_TO_SEND_SMS_TO>
   

   • ACS_CONNECTION_STRING: Nilai connection string dari bagian Kunci sumber daya ACS Anda.

   • ACS_PHONE_NUMBER: Tetapkan nomor bebas ongkos Anda ke ACS_PHONE_NUMBER nilai .

   • ACS_EMAIL_ADDRESS: Tetapkan nilai alamat "MailTo" email Anda.

   • CUSTOMER_EMAIL_ADDRESS: Tetapkan alamat email yang ingin Anda kirimi email dari aplikasi (karena data pelanggan dalam database aplikasi hanyalah data sampel). Anda dapat menggunakan alamat email pribadi.

   • CUSTOMER_PHONE_NUMBER: Anda harus memberikan nomor telepon berbasis Amerika Serikat (mulai hari ini) karena verifikasi tambahan yang diperlukan di negara lain untuk mengirim pesan SMS. Jika Anda tidak memiliki nomor berbasis AS, Anda dapat membiarkannya kosong.

Memulai/Menghidupkan ulang Aplikasi dan Api Server

Lakukan salah satu langkah berikut berdasarkan latihan yang Anda selesaikan hingga saat ini:

• Jika Anda memulai database, server API, dan server web dalam latihan sebelumnya, Anda perlu menghentikan server API dan server web dan memulai ulang untuk mengambil perubahan file .env . Anda dapat membiarkan database berjalan.

  Temukan jendela terminal yang menjalankan server API dan server web dan tekan CTRL + C untuk menghentikannya. Mulai lagi dengan mengetik npm start di setiap jendela terminal dan menekan Enter. Lanjutkan ke latihan berikutnya.

• Jika Anda belum memulai database, server API, dan server web, selesaikan langkah-langkah berikut:

  1. Dalam langkah-langkah berikut, Anda akan membuat tiga jendela terminal di Visual Studio Code.

     

  2. Klik kanan pada file .env di daftar file Visual Studio Code dan pilih Buka di Terminal Terintegrasi. Pastikan terminal Anda berada di akar proyek - openai-acs-msgraph - sebelum melanjutkan.

  3. Pilih dari salah satu opsi berikut untuk memulai database PostgreSQL:

     • Jika Anda telah menginstal dan menjalankan Docker Desktop , jalankan docker-compose up di jendela terminal dan tekan Enter.

     • Jika Anda memiliki Podman dengan podman-compose yang terinstal dan berjalan, jalankan podman-compose up di jendela terminal dan tekan Enter.

     • Untuk menjalankan kontainer PostgreSQL secara langsung menggunakan Docker Desktop, Podman, nerdctl, atau runtime kontainer lain yang telah Anda instal, jalankan perintah berikut di jendela terminal:

       • Mac, Linux, atau Subsistem Windows untuk Linux (WSL):

         [docker | podman | nerdctl] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v $(pwd)/data:/var/lib/postgresql/data -p 5432:5432 postgres
         

       • Windows dengan PowerShell:

         [docker | podman] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v ${PWD}/data:/var/lib/postgresql/data -p 5432:5432 postgres
         

  4. Setelah kontainer database dimulai, tekan + ikon di toolbar Terminal Visual Studio Code untuk membuat jendela terminal kedua.

     

  5. cd ke folder server/typescript dan jalankan perintah berikut untuk menginstal dependensi dan memulai api server.

     • npm install
     • npm start

  6. + Tekan ikon lagi di toolbar Terminal Visual Studio Code untuk membuat jendela terminal ketiga.

  7. cd ke folder klien dan jalankan perintah berikut untuk menginstal dependensi dan memulai server web.

     • npm install
     • npm start

  8. Browser akan diluncurkan dan Anda akan dibawa ke http://localhost:4200.

     

Komunikasi: Melakukan Panggilan Telepon

• Tersisa 79 menit

Mengintegrasikan kemampuan panggilan telepon Azure Communication Services ke dalam aplikasi Line of Business (LOB) kustom menawarkan beberapa manfaat utama bagi bisnis dan penggunanya:

• Memungkinkan komunikasi yang lancar dan real time antara karyawan, pelanggan, dan mitra, langsung dari dalam aplikasi LOB, menghilangkan kebutuhan untuk beralih antara beberapa platform atau perangkat.
• Meningkatkan pengalaman pengguna dan meningkatkan efisiensi operasional secara keseluruhan.
• Memfasilitasi penyelesaian masalah yang cepat, karena pengguna dapat dengan cepat terhubung dengan tim dukungan yang relevan atau pakar materi pelajaran dengan cepat dan mudah.

Dalam latihan ini, Anda akan:

• Jelajahi fitur panggilan telepon di aplikasi.
• Telusuri kode untuk mempelajari bagaimana fitur panggilan telepon dibuat.

Menggunakan Fitur Panggilan Telepon

1. Dalam latihan sebelumnya Anda membuat sumber daya Azure Communication Services (ACS) dan memulai database, server web, dan server API. Anda juga memperbarui nilai berikut dalam file .env .

   ACS_CONNECTION_STRING=<ACS_CONNECTION_STRING>
   ACS_PHONE_NUMBER=<ACS_PHONE_NUMBER>
   ACS_EMAIL_ADDRESS=<ACS_EMAIL_ADDRESS>
   CUSTOMER_EMAIL_ADDRESS=<EMAIL_ADDRESS_TO_SEND_EMAIL_TO>
   CUSTOMER_PHONE_NUMBER=<UNITED_STATES_BASED_NUMBER_TO_SEND_SMS_TO>
   

   Pastikan Anda telah menyelesaikan latihan sebelumnya sebelum melanjutkan.

2. Kembali ke browser (http://localhost:4200), temukan datagrid, dan pilih Hubungi Pelanggan diikuti dengan Hubungi Pelanggan di baris pertama.

   

3. Komponen panggilan telepon akan ditambahkan ke header. Masukkan nomor telepon yang ingin Anda panggil (pastikan dimulai dengan + dan sertakan kode negara) dan pilih Panggil. Anda akan diminta untuk mengizinkan akses ke mikrofon Anda.

   

4. Pilih Putuskan untuk mengakhiri panggilan. Pilih Tutup untuk menutup komponen panggilan telepon.

Menjelajahi Kode Panggilan Telepon

1. Buka file customers-list.component.ts. Jalur lengkap ke file adalah client/src/app/customers-list/customers-list.component.ts.

2. Perhatikan bahwa openCallDialog() mengirim CustomerCall pesan dan nomor telepon pelanggan menggunakan bus peristiwa.

   openCallDialog(data: Phone) {
       this.eventBus.emit({ name: Events.CustomerCall, value: data });
   }
   

   Catatan

   Kode bus peristiwa dapat ditemukan di file eventbus.service.ts jika Anda tertarik untuk menjelajahinya lebih lanjut. Jalur lengkap ke file adalah client/src/app/core/eventbus.service.ts.

3. Fungsi komponen ngOnInit() header berlangganan peristiwa yang CustomerCall dikirim oleh bus peristiwa dan menampilkan komponen panggilan telepon. Anda dapat menemukan kode ini di header.component.ts.

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

4. Buka phone-call.component.ts. Luangkan waktu sejenak untuk mengekspos kode. Jalur lengkap ke file adalah client/src/app/phone-call/phone-call.component.ts. Perhatikan fitur utama berikut:

   • Mengambil token akses Azure Communication Services dengan memanggil acsService.getAcsToken() fungsi di ngOnInit();
   • Menambahkan "pemutar nomor telepon" ke halaman. Anda dapat melihat dialer dengan mengklik input nomor telepon di header.
   • Memulai dan mengakhiri panggilan menggunakan startCall() fungsi dan endCall() masing-masing.

5. Sebelum melihat kode yang melakukan panggilan telepon, mari kita periksa bagaimana token akses ACS diambil dan bagaimana objek panggilan telepon dibuat. ngOnInit() Temukan fungsi di phone-call.component.ts.

   async ngOnInit() {
       if (ACS_CONNECTION_STRING) {
           this.subscription.add(
               this.acsService.getAcsToken().subscribe(async (user: AcsUser) => {
                   const callClient = new CallClient();
                   const tokenCredential = new AzureCommunicationTokenCredential(user.token);
                   this.callAgent = await callClient.createCallAgent(tokenCredential);
               })
           );
       }
   }
   

   Fungsi ini melakukan tindakan berikut:

   • Mengambil userId ACS dan token akses dengan memanggil acsService.getAcsToken() fungsi .
   • Setelah token akses diambil, kode melakukan tindakan berikut:
     • Membuat instans CallClient baru dan AzureCommunicationTokenCredential menggunakan token akses.
     • Membuat instans baru menggunakan CallAgentCallClient objek dan AzureCommunicationTokenCredential . Nantinya Anda akan melihat bahwa CallAgent digunakan untuk memulai dan mengakhiri panggilan.

6. Buka acs.services.ts dan temukan getAcsToken() fungsi . Jalur lengkap ke file adalah client/src/app/core/acs.service.ts. Fungsi ini membuat permintaan HTTP GET ke rute yang /acstoken diekspos oleh server API.

   getAcsToken(): Observable<AcsUser> {
       return this.http.get<AcsUser>(this.apiUrl + 'acstoken')
       .pipe(
           catchError(this.handleError)
       );
   }
   

7. Fungsi server API bernama createACSToken() mengambil userId dan token akses dan mengembalikannya ke klien. Ini dapat ditemukan di file server/typescript/acs.ts .

   import { CommunicationIdentityClient } from '@azure/communication-identity';
   
   const connectionString = process.env.ACS_CONNECTION_STRING as string;
   
   async function createACSToken() {
   if (!connectionString) return { userId: '', token: '' };
   
   const tokenClient = new CommunicationIdentityClient(connectionString);
   const { user, token } = await tokenClient.createUserAndToken(["voip"]);
   return { userId: user.communicationUserId, token };
   }
   

   Fungsi ini melakukan tindakan berikut:

   • Memeriksa apakah nilai ACS connectionString tersedia. Jika tidak, mengembalikan objek dengan kosong userId dan token.
   • Membuat instans CommunicationIdentityClient baru dan meneruskan nilainya connectionString .
   • Membuat pengguna dan token baru menggunakan tokenClient.createUserAndToken() dengan cakupan "voip".
   • Mengembalikan objek yang berisi userId nilai dan token .

8. Sekarang setelah Anda melihat bagaimana userId dan token diambil, kembali ke phone-call.component.ts dan temukan startCall() fungsi .

9. Fungsi ini dipanggil ketika Panggilan dipilih dalam komponen panggilan telepon. Ini menggunakan objek yang CallAgent disebutkan sebelumnya untuk memulai panggilan. Fungsi callAgent.startCall() menerima objek yang mewakili nomor untuk dihubungi dan nomor telepon ACS yang digunakan untuk melakukan panggilan.

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

10. Fungsi endCall() ini dipanggil saat Hang Up dipilih di komponen panggilan telepon.

    endCall() {
        if (this.call) {
            this.call.hangUp({ forEveryone: true });
            this.call = undefined;
            this.inCall = false;
        }
        else {
            this.hangup.emit();
        }
    }
    

    Jika panggilan sedang berlangsung, call.hangUp() fungsi dipanggil untuk mengakhiri panggilan. Jika tidak ada panggilan yang sedang berlangsung, hangup peristiwa dipancarkan ke komponen induk header untuk menyembunyikan komponen panggilan telepon.

11. Sebelum melanjutkan ke latihan berikutnya, mari kita tinjau konsep utama yang tercakup dalam latihan ini:

    • UserId ACS dan token akses diambil dari server API menggunakan fungsi .acsService.createUserAndToken()
    • Token digunakan untuk membuat CallClient objek dan CallAgent .
    • Objek CallAgent digunakan untuk memulai dan mengakhiri panggilan dengan memanggil callAgent.startCall() fungsi dan callAgent.hangUp() masing-masing.

12. Sekarang setelah Anda mempelajari bagaimana panggilan telepon dapat diintegrasikan ke dalam aplikasi, mari kita alihkan fokus kita untuk menggunakan Azure Communication Services untuk mengirim email dan pesan SMS.

Komunikasi: Mengirim Email dan Pesan SMS

• Tersisa 69 menit

Selain panggilan telepon, Azure Communication Services juga dapat mengirim pesan email dan SMS. Ini dapat berguna ketika Anda ingin mengirim pesan ke pelanggan atau pengguna lain langsung dari aplikasi.

Dalam latihan ini, Anda akan:

• Jelajahi bagaimana pesan email dan SMS dapat dikirim dari aplikasi.
• Telusuri kode untuk mempelajari bagaimana fungsionalitas email dan SMS diterapkan.

Menggunakan Fitur Email dan SMS

1. Dalam latihan sebelumnya, Anda membuat sumber daya Azure Communication Services (ACS) dan memulai database, server web, dan server API. Anda juga memperbarui nilai berikut dalam file .env .

   ACS_CONNECTION_STRING=<ACS_CONNECTION_STRING>
   ACS_PHONE_NUMBER=<ACS_PHONE_NUMBER>
   ACS_EMAIL_ADDRESS=<ACS_EMAIL_ADDRESS>
   CUSTOMER_EMAIL_ADDRESS=<EMAIL_ADDRESS_TO_SEND_EMAIL_TO>
   CUSTOMER_PHONE_NUMBER=<UNITED_STATES_BASED_NUMBER_TO_SEND_SMS_TO>
   

   Pastikan Anda telah menyelesaikan latihan sebelum melanjutkan.

2. Kembali ke browser (http://localhost:4200) dan pilih Hubungi Pelanggan diikuti dengan Email/SMS Pelanggan di baris pertama.

   

3. Pilih tab Email/SMS dan lakukan tugas berikut:

   • Masukkan Subjek dan Isi Email dan pilih tombol Kirim Email.
   • Masukkan pesan SMS dan pilih tombol Kirim SMS .

   

   Catatan

   Verifikasi SMS untuk nomor bebas pulsa sekarang wajib di Amerika Serikat dan Kanada. Untuk mengaktifkan pesan SMS, Anda harus mengirimkan verifikasi setelah pembelian nomor telepon. Meskipun tutorial ini tidak akan melalui proses tersebut, Anda dapat memilih Telepon dan SMS -->Dokumen Peraturan dari sumber daya Azure Communication Services Anda di portal Azure dan menambahkan dokumentasi validasi yang diperlukan.

4. Periksa apakah Anda menerima email dan pesan SMS. Fungsionalitas SMS hanya akan berfungsi jika Anda mengirimkan dokumen peraturan yang disebutkan dalam catatan sebelumnya. Sebagai pengingat, pesan email akan dikirim ke nilai yang ditentukan dan CUSTOMER_EMAIL_ADDRESS pesan SMS akan dikirim ke nilai yang ditentukan untuk CUSTOMER_PHONE_NUMBER dalam file .env . Jika Anda tidak dapat menyediakan nomor telepon berbasis Amerika Serikat untuk digunakan untuk pesan SMS, Anda dapat melewati langkah tersebut.

   Catatan

   Jika Anda tidak melihat pesan email di kotak masuk untuk alamat yang Anda tentukan CUSTOMER_EMAIL_ADDRESS di file .env , periksa folder spam Anda.

Menjelajahi Kode Email

1. Buka file customers-list.component.ts. Jalur lengkap ke file adalah client/src/app/customers-list/customers-list.component.ts.

2. Saat Anda memilih Hubungi Pelanggan diikuti oleh Pelanggan Email/SMS di datagrid, customer-list komponen menampilkan kotak dialog. Ini ditangani oleh openEmailSmsDialog() fungsi dalam file customer-list.component.ts .

   openEmailSmsDialog(data: any) {
       if (data.phone && data.email) {
           // Create the data for the dialog
           let dialogData: EmailSmsDialogData = {
               prompt: '',
               title: `Contact ${data.company}`,
               company: data.company,
               customerName: data.first_name + ' ' + data.last_name,
               customerEmailAddress: data.email,
               customerPhoneNumber: data.phone
           }
   
           // Open the dialog
           const dialogRef = this.dialog.open(EmailSmsDialogComponent, {
               data: dialogData
           });
   
           // Subscribe to the dialog afterClosed observable to get the dialog result
           this.subscription.add(
               dialogRef.afterClosed().subscribe((response: EmailSmsDialogData) => {
                   console.log('SMS dialog result:', response);
                   if (response) {
                       dialogData = response;
                   }
               })
           );
       }
       else {
           alert('No phone number available.');
       }
   }
   

   Fungsi openEmailSmsDialog() melakukan tugas-tugas berikut:

   • Memeriksa untuk melihat apakah data objek (yang mewakili baris dari datagrid) berisi phone properti dan email . Jika ya, objek akan membuat dialogData objek yang berisi informasi untuk diteruskan ke dialog.
   • Membuka kotak EmailSmsDialogComponent dialog dan meneruskan objek ke dialogData dalamnya.
   • Berlangganan ke afterClosed() peristiwa kotak dialog. Kejadian ini diaktifkan saat kotak dialog ditutup. Objek response berisi informasi yang dimasukkan ke dalam kotak dialog.

3. Buka file email-sms-dialog.component.ts. Jalur lengkap ke file adalah client/src/app/email-sms-dialog/email-sms-dialog.component.ts.

4. sendEmail() Temukan fungsi:

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

   Fungsi sendEmail() melakukan tugas-tugas berikut:

   • Memeriksa untuk melihat apakah acsEmailEnabled bendera fitur diatur ke true. Bendera ini memeriksa untuk melihat apakah ACS_EMAIL_ADDRESS variabel lingkungan memiliki nilai yang ditetapkan.
   • Jika acsEmailEnabled benar, fungsi dipanggil acsService.sendEmail() dan subjek email, isi, nama pelanggan, dan alamat email pelanggan diteruskan. Karena database berisi data sampel, CUSTOMER_EMAIL_ADDRESS variabel lingkungan digunakan alih-alih this.data.email. Dalam aplikasi this.data.email dunia nyata, nilai akan digunakan.
   • Berlangganan ke sendEmail() fungsi dalam acsService layanan. Fungsi ini mengembalikan RxJS yang dapat diamati yang berisi respons dari layanan sisi klien.
   • Jika email berhasil dikirim, emailSent properti diatur ke true.

5. Untuk memberikan enkapulasi dan penggunaan kembali kode yang lebih baik, layanan sisi klien seperti acs.service.ts digunakan di seluruh aplikasi. Ini memungkinkan semua fungsionalitas ACS dikonsolidasikan ke dalam satu tempat.

6. Buka acs.service.ts dan temukan fungsi .sendEmail() Jalur lengkap ke file adalah client/src/app/core/acs.service.ts.

   sendEmail(subject: string, message: string, customerName: string, customerEmailAddress: string) : Observable<EmailSmsResponse> {
       return this.http.post<EmailSmsResponse>(this.apiUrl + 'sendEmail', { subject, message, customerName, customerEmailAddress })
       .pipe(
           catchError(this.handleError)
       );
   }
   

   Fungsi sendEmail() dalam AcsService melakukan tugas-tugas berikut:

   • http.post() Memanggil fungsi dan meneruskan subjek email, pesan, nama pelanggan, dan alamat email pelanggan ke dalamnya. Fungsi mengembalikan http.post() RxJS yang dapat diamati yang berisi respons dari panggilan API.
   • Menangani kesalahan apa pun yang dikembalikan oleh http.post() fungsi menggunakan operator RxJS catchError .

7. Sekarang mari kita periksa bagaimana aplikasi berinteraksi dengan fitur email ACS. Buka file acs.ts dan temukan fungsi .sendEmail() Jalur lengkap ke file adalah server/typescript/acs.ts.

8. Fungsi sendEmail() melakukan tugas-tugas berikut:

   • Membuat objek baru EmailClient dan meneruskan string koneksi ACS ke objek tersebut (nilai ini diambil dari ACS_CONNECTION_STRING variabel lingkungan).

     const emailClient = new EmailClient(connectionString);
     

   • Membuat objek baru EmailMessage dan meneruskan informasi pengirim, subjek, pesan, dan penerima.

     const msgObject: EmailMessage = {
         senderAddress: process.env.ACS_EMAIL_ADDRESS as string,
         content: {
             subject: subject,
             plainText: message,
         },
         recipients: {
             to: [
                 {
                     address: customerEmailAddress,
                     displayName: customerName,
                 },
             ],
         },
     };
     

   • Mengirim email menggunakan emailClient.beginSend() fungsi dan mengembalikan respons. Meskipun fungsi ini hanya mengirim ke satu penerima dalam contoh ini, beginSend() fungsi juga dapat digunakan untuk mengirim ke beberapa penerima.

     const poller = await emailClient.beginSend(msgObject);
     

   • Menunggu objek memberi poller sinyal bahwa objek selesai dan mengirim respons ke pemanggil.

Menjelajahi Kode SMS

1. Kembali ke file email-sms-dialog.component.ts yang Anda buka sebelumnya. Jalur lengkap ke file adalah client/src/app/email-sms-dialog/email-sms-dialog.component.ts.

2. sendSms() Temukan fungsi:

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

   Fungsi sendSMS() melakukan tugas-tugas berikut:

   • Memeriksa untuk melihat apakah acsPhoneEnabled bendera fitur diatur ke true. Bendera ini memeriksa untuk melihat apakah ACS_PHONE_NUMBER variabel lingkungan memiliki nilai yang ditetapkan.
   • Jika acsPhoneEnabled benar, fungsi dipanggil acsService.SendSms() dan pesan SMS dan nomor telepon pelanggan diteruskan. Karena database berisi data sampel, CUSTOMER_PHONE_NUMBER variabel lingkungan digunakan alih-alih this.data.customerPhoneNumber. Dalam aplikasi this.data.customerPhoneNumber dunia nyata, nilai akan digunakan.
   • Berlangganan ke sendSms() fungsi dalam acsService layanan. Fungsi ini mengembalikan RxJS yang dapat diamati yang berisi respons dari layanan sisi klien.
   • Jika pesan SMS berhasil dikirim, pesan SMS akan mengatur smsSent properti ke true.

3. Buka acs.service.ts dan temukan fungsi .sendSms() Jalur lengkap ke file adalah client/src/app/core/acs.service.ts.

   sendSms(message: string, customerPhoneNumber: string) : Observable<EmailSmsResponse> {
       return this.http.post<EmailSmsResponse>(this.apiUrl + 'sendSms', { message, customerPhoneNumber })
       .pipe(
           catchError(this.handleError)
       );
   }  
   

   Fungsi sendSms() melakukan tugas-tugas berikut:

   • http.post() Memanggil fungsi dan meneruskan pesan dan nomor telepon pelanggan ke fungsi tersebut. Fungsi mengembalikan http.post() RxJS yang dapat diamati yang berisi respons dari panggilan API.
   • Menangani kesalahan apa pun yang dikembalikan oleh http.post() fungsi menggunakan operator RxJS catchError .

4. Terakhir, mari kita periksa bagaimana aplikasi berinteraksi dengan fitur ACS SMS. Buka file acs.ts. Jalur lengkap ke file adalah server/typescript/acs.ts dan temukan sendSms() fungsi .

5. Fungsi sendSms() melakukan tugas-tugas berikut:

   • Membuat objek baru SmsClient dan meneruskan string koneksi ACS ke objek tersebut (nilai ini diambil dari ACS_CONNECTION_STRING variabel lingkungan).

     const smsClient = new SmsClient(connectionString);
     

   • smsClient.send() Memanggil fungsi dan meneruskan nomor telepon ACS (from), nomor telepon pelanggan (to), dan pesan SMS:

     const sendResults = await smsClient.send({
         from: process.env.ACS_PHONE_NUMBER as string,
         to: [customerPhoneNumber],
         message: message
     });
     return sendResults;
     

   • Mengembalikan respons ke pemanggil.

6. Anda dapat mempelajari selengkapnya tentang fungsionalitas email dan SMS ACS di artikel berikut:

   • Email di Azure Communication Services
   • SMS di Azure Communication Services

7. Sebelum melanjutkan ke latihan berikutnya, mari kita tinjau konsep utama yang tercakup dalam latihan ini:

   • File acs.service.ts merangkum fungsionalitas email dan SMS ACS yang digunakan oleh aplikasi sisi klien. Ini menangani panggilan API ke server dan mengembalikan respons ke pemanggil.
   • API sisi server menggunakan ACS EmailClient dan SmsClient objek untuk mengirim pesan email dan SMS.

8. Sekarang setelah Anda mempelajari bagaimana pesan email dan SMS dapat dikirim, mari kita alihkan fokus kita untuk mengintegrasikan data organisasi ke dalam aplikasi.

Data Organisasi: Membuat Pendaftaran Aplikasi ID Microsoft Entra

• Tersisa 59 menit

Tingkatkan produktivitas pengguna dengan mengintegrasikan data organisasi (email, file, obrolan, dan acara kalender) langsung ke aplikasi kustom Anda. Dengan menggunakan API Microsoft Graph dan ID Microsoft Entra, Anda dapat mengambil dan menampilkan data yang relevan dengan lancar dalam aplikasi Anda, mengurangi kebutuhan pengguna untuk beralih konteks. Baik itu merujuk email yang dikirim ke pelanggan, meninjau pesan Teams, atau mengakses file, pengguna dapat dengan cepat menemukan informasi yang mereka butuhkan tanpa meninggalkan aplikasi Anda, menyederhanakan proses pengambilan keputusan mereka.

Dalam latihan ini, Anda akan:

• Buat pendaftaran aplikasi ID Microsoft Entra sehingga Microsoft Graph dapat mengakses data organisasi dan membawanya ke dalam aplikasi.
• Temukan team dan channel Id dari Microsoft Teams yang diperlukan untuk mengirim pesan obrolan ke saluran tertentu.
• Perbarui file .env proyek dengan nilai dari pendaftaran aplikasi ID Microsoft Entra Anda.

Membuat Pendaftaran Aplikasi ID Microsoft Entra

1. Buka portal Azure dan pilih MICROSOFT Entra ID.

2. Pilih Kelola -->Pendaftaran aplikasi diikuti oleh + Pendaftaran baru.

3. Isi detail formulir pendaftaran aplikasi baru seperti yang ditunjukkan di bawah ini dan pilih Daftar:

   • Nama: microsoft-graph-app
   • Jenis akun yang didukung: Akun di direktori organisasi apa pun (Penyewa ID Microsoft Entra apa pun - Multipenyewa)
   • URI Pengalihan:
     • Pilih Aplikasi halaman tunggal (SPA) dan masukkan http://localhost:4200 di bidang URI Pengalihan.
   • Pilih Daftar untuk membuat pendaftaran aplikasi.

   

1. Pilih Gambaran Umum di menu sumber daya dan salin nilai ke Application (client) ID clipboard Anda.

   

Memperbarui File .env Proyek

1. Buka file .env di editor Anda dan tetapkan nilainya Application (client) ID ke ENTRAID_CLIENT_ID.

   ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
   

2. Jika Anda ingin mengaktifkan kemampuan untuk mengirim pesan dari aplikasi ke Saluran Teams, masuk ke Microsoft Teams menggunakan akun penyewa Microsoft 365 dev Anda (ini disebutkan dalam pra-reqs untuk tutorial).

3. Setelah masuk, perluas tim, dan temukan saluran yang ingin Anda kirimi pesan dari aplikasi. Misalnya, Anda dapat memilih tim Perusahaan dan saluran Umum (atau tim/saluran apa pun yang ingin Anda gunakan).

   

4. Di header tim, klik tiga titik (...) dan pilih Dapatkan tautan ke tim.

5. Di tautan yang muncul di jendela popup, ID tim adalah string huruf dan angka setelah team/. Misalnya, dalam tautan "https://teams.microsoft.com/l/team/19%3ae9b9.../", ID tim adalah 19%3ae9b9... hingga karakter berikut / .

6. Salin ID tim dan tetapkan ke TEAM_ID dalam file .env .

7. Di header saluran, klik tiga titik (...) dan pilih Dapatkan tautan ke saluran.

8. Di tautan yang muncul di jendela popup, ID saluran adalah string huruf dan angka setelah channel/. Misalnya, dalam tautan "https://teams.microsoft.com/l/channel/19%3aQK02.../", ID saluran adalah 19%3aQK02... hingga karakter berikut / .

9. Salin ID saluran dan tetapkan ke CHANNEL_ID dalam file .env .

10. Simpan file env sebelum melanjutkan.

Memulai/Menghidupkan ulang Aplikasi dan Api Server

Lakukan salah satu langkah berikut berdasarkan latihan yang Anda selesaikan hingga saat ini:

• Jika Anda memulai database, server API, dan server web dalam latihan sebelumnya, Anda perlu menghentikan server API dan server web dan memulai ulang untuk mengambil perubahan file .env . Anda dapat membiarkan database berjalan.

  Temukan jendela terminal yang menjalankan server API dan server web dan tekan CTRL + C untuk menghentikannya. Mulai lagi dengan mengetik npm start di setiap jendela terminal dan menekan Enter. Lanjutkan ke latihan berikutnya.

• Jika Anda belum memulai database, server API, dan server web, selesaikan langkah-langkah berikut:

  1. Dalam langkah-langkah berikut, Anda akan membuat tiga jendela terminal di Visual Studio Code.

     

  2. Klik kanan pada file .env di daftar file Visual Studio Code dan pilih Buka di Terminal Terintegrasi. Pastikan terminal Anda berada di akar proyek - openai-acs-msgraph - sebelum melanjutkan.

  3. Pilih dari salah satu opsi berikut untuk memulai database PostgreSQL:

     • Jika Anda telah menginstal dan menjalankan Docker Desktop , jalankan docker-compose up di jendela terminal dan tekan Enter.

     • Jika Anda memiliki Podman dengan podman-compose yang terinstal dan berjalan, jalankan podman-compose up di jendela terminal dan tekan Enter.

     • Untuk menjalankan kontainer PostgreSQL secara langsung menggunakan Docker Desktop, Podman, nerdctl, atau runtime kontainer lain yang telah Anda instal, jalankan perintah berikut di jendela terminal:

       • Mac, Linux, atau Subsistem Windows untuk Linux (WSL):

         [docker | podman | nerdctl] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v $(pwd)/data:/var/lib/postgresql/data -p 5432:5432 postgres
         

       • Windows dengan PowerShell:

         [docker | podman] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v ${PWD}/data:/var/lib/postgresql/data -p 5432:5432 postgres
         

  4. Setelah kontainer database dimulai, tekan + ikon di toolbar Terminal Visual Studio Code untuk membuat jendela terminal kedua.

     

  5. cd ke folder server/typescript dan jalankan perintah berikut untuk menginstal dependensi dan memulai api server.

     • npm install
     • npm start

  6. + Tekan ikon lagi di toolbar Terminal Visual Studio Code untuk membuat jendela terminal ketiga.

  7. cd ke folder klien dan jalankan perintah berikut untuk menginstal dependensi dan memulai server web.

     • npm install
     • npm start

  8. Browser akan diluncurkan dan Anda akan dibawa ke http://localhost:4200.

     

Data Organisasi: Memasukkan Pengguna dan Mendapatkan Token Akses

• Tersisa 51 menit

Pengguna perlu mengautentikasi dengan ID Microsoft Entra agar Microsoft Graph dapat mengakses data organisasi. Dalam latihan ini, Anda akan melihat bagaimana komponen Microsoft Graph Toolkit mgt-login dapat digunakan untuk mengautentikasi pengguna dan mengambil token akses. Token akses kemudian dapat digunakan untuk melakukan panggilan ke Microsoft Graph.

Dalam latihan ini, Anda akan:

• Pelajari cara mengaitkan aplikasi ID Microsoft Entra dengan Microsoft Graph Toolkit untuk mengautentikasi pengguna dan mengambil data organisasi.
• Pelajari tentang pentingnya cakupan.
• Pelajari bagaimana komponen mgt-login Microsoft Graph Toolkit dapat digunakan untuk mengautentikasi pengguna dan mengambil token akses.

Menggunakan Fitur Masuk

1. Pada latihan sebelumnya, Anda membuat pendaftaran aplikasi di MICROSOFT Entra ID dan memulai server aplikasi dan server API. Anda juga memperbarui nilai berikut dalam .env file (TEAM_ID dan CHANNEL_ID bersifat opsional):

   ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
   TEAM_ID=<TEAMS_TEAM_ID>
   CHANNEL_ID=<TEAMS_CHANNEL_ID>
   

   Pastikan Anda telah menyelesaikan latihan sebelumnya sebelum melanjutkan.

2. Kembali ke browser (http://localhost:4200), pilih Masuk di header, dan masuk menggunakan akun pengguna admin dari penyewa Pengembang Microsoft 365 Anda.

   Tip

   Masuk dengan akun admin penyewa pengembang Microsoft 365 Anda. Anda dapat melihat pengguna lain di penyewa pengembang Anda dengan membuka pusat admin Microsoft 365.

3. Jika Anda masuk ke aplikasi untuk pertama kalinya, Anda akan diminta untuk menyetujui izin yang diminta oleh aplikasi. Anda akan mempelajari selengkapnya tentang izin ini (juga disebut "cakupan") di bagian berikutnya saat Anda menjelajahi kode. Pilih Terima untuk melanjutkan.

4. Setelah masuk, Anda akan melihat nama pengguna yang ditampilkan di header.

   

Menjelajahi Kode Masuk

Sekarang setelah Anda masuk, mari kita lihat kode yang digunakan untuk masuk ke pengguna dan mengambil token akses dan profil pengguna. Anda akan mempelajari tentang komponen web mgt-login yang menjadi bagian dari Microsoft Graph Toolkit.

1. Buka klien/package.json dan perhatikan bahwa @microsoft/mgt paket dan @microsoft/mgt-components disertakan dalam dependensi. Paket berisi @microsoft/mgt fitur penyedia MSAL (Microsoft Authentication Library) dan komponen web seperti mgt-login dan lainnya yang dapat digunakan untuk memasukkan pengguna dan mengambil dan menampilkan data organisasi.

2. Buka client/src/main.ts dan perhatikan impor berikut dari @microsoft/mgt-components paket. Simbol yang diimpor digunakan untuk mendaftarkan komponen Microsoft Graph Toolkit yang digunakan dalam aplikasi.

   import { registerMgtLoginComponent, registerMgtSearchResultsComponent, registerMgtPersonComponent,  } from '@microsoft/mgt-components';
   

3. Gulir ke bagian bawah file dan perhatikan kode berikut:

   registerMgtLoginComponent();
   registerMgtSearchResultsComponent();
   registerMgtPersonComponent();
   

   Kode ini mendaftarkan mgt-loginkomponen web , mgt-search-results, dan mgt-person dan memungkinkannya untuk digunakan dalam aplikasi.

4. Untuk menggunakan komponen mgt-login untuk memasukkan pengguna, Id klien aplikasi ID Microsoft Entra (disimpan dalam file .env sebagai ENTRAID_CLIENT_ID) perlu dirujuk dan digunakan.

5. Buka graph.service.ts dan temukan fungsi .init() Jalur lengkap ke file adalah client/src/app/core/graph.service.ts. Anda akan melihat impor dan kode berikut:

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

   Kode ini membuat objek baru Msal2Provider , meneruskan Id klien ID Microsoft Entra dari pendaftaran aplikasi Anda dan scopes aplikasi yang akan meminta akses. scopes digunakan untuk meminta akses ke sumber daya Microsoft Graph yang akan diakses aplikasi. Msal2Provider Setelah objek dibuat, objek ditetapkan ke Providers.globalProvider objek, yang digunakan oleh komponen Microsoft Graph Toolkit untuk mengambil data dari Microsoft Graph.

6. Buka header.component.html di editor Anda dan temukan komponen mgt-login . Jalur lengkap ke file client/src/app/header/header.component.html.

   @if (this.featureFlags.microsoft365Enabled) {
       <mgt-login class="mgt-dark" (loginCompleted)="loginCompleted()"></mgt-login>
   }
   

   Komponen mgt-login memungkinkan pengguna masuk dan menyediakan akses ke token yang digunakan dengan Microsoft Graph. Setelah berhasil masuk, loginCompleted peristiwa dipicu, yang memanggil loginCompleted() fungsi. Meskipun mgt-login digunakan dalam komponen Angular dalam contoh ini, mgt-login kompatibel dengan aplikasi web apa pun.

   Tampilan komponen mgt-login tergantung pada nilai yang featureFlags.microsoft365Enabled diatur ke true. Bendera kustom ini memeriksa keberadaan ENTRAID_CLIENT_ID variabel lingkungan untuk mengonfirmasi bahwa aplikasi dikonfigurasi dengan benar dan dapat mengautentikasi terhadap ID Microsoft Entra. Bendera ditambahkan untuk mengakomodasi kasus di mana pengguna memilih untuk menyelesaikan hanya latihan AI atau Komunikasi dalam tutorial, daripada mengikuti seluruh urutan latihan.

7. Buka header.component.ts dan temukan loginCompleted fungsi . Fungsi ini dipanggil ketika loginCompleted peristiwa dipancarkan dan menangani pengambilan profil pengguna yang masuk menggunakan Providers.globalProvider.

   async loginCompleted() {
       const me = await Providers.globalProvider.graph.client.api('me').get();
       this.userLoggedIn.emit(me);
   }
   

   Dalam contoh ini, panggilan sedang dilakukan ke Microsoft Graph me API untuk mengambil profil pengguna (me mewakili pengguna yang masuk saat ini). Pernyataan this.userLoggedIn.emit(me) kode memancarkan peristiwa dari komponen untuk meneruskan data profil ke komponen induk. Komponen induk adalah file app.component.ts dalam hal ini, yang merupakan komponen akar untuk aplikasi.

   Untuk mempelajari selengkapnya tentang komponen mgt-login , kunjungi dokumentasi Microsoft Graph Toolkit .

8. Sekarang setelah Anda masuk ke aplikasi, mari kita lihat bagaimana data organisasi dapat diambil.

Data Organisasi: Mengambil File, Obrolan, dan Mengirim Pesan ke Teams

• Tersisa 41 menit

Di lingkungan digital saat ini, pengguna bekerja dengan berbagai data organisasi, termasuk email, obrolan, file, acara kalender, dan banyak lagi. Hal ini dapat menyebabkan seringnya pergeseran konteks—beralih antar tugas atau aplikasi—yang dapat mengganggu fokus dan mengurangi produktivitas. Misalnya, pengguna yang mengerjakan proyek mungkin perlu beralih dari aplikasi mereka saat ini ke Outlook untuk menemukan detail penting dalam email atau beralih ke OneDrive for Business untuk menemukan file terkait. Tindakan bolak-balik ini mengganggu fokus dan membuang-buang waktu yang bisa lebih baik dihabiskan untuk tugas yang ditangani.

Untuk meningkatkan efisiensi, Anda dapat mengintegrasikan data organisasi langsung ke dalam aplikasi yang digunakan pengguna setiap hari. Dengan membawa data organisasi ke aplikasi Anda, pengguna dapat mengakses dan mengelola informasi dengan lebih lancar, meminimalkan pergeseran konteks, dan meningkatkan produktivitas. Selain itu, integrasi ini memberikan wawasan dan konteks yang berharga, memungkinkan pengguna untuk membuat keputusan berdasarkan informasi dan bekerja lebih efektif.

Dalam latihan ini, Anda akan:

• Pelajari bagaimana komponen web mgt-search-results di Microsoft Graph Toolkit dapat digunakan untuk mencari file.
• Pelajari cara memanggil Microsoft Graph secara langsung untuk mengambil file dari OneDrive for Business dan pesan obrolan dari Microsoft Teams.
• Pahami cara mengirim pesan obrolan ke saluran Microsoft Teams menggunakan Microsoft Graph.

Menggunakan Fitur Data Organisasi

1. Dalam latihan sebelumnya, Anda membuat pendaftaran aplikasi di MICROSOFT Entra ID dan memulai server aplikasi dan server API. Anda juga memperbarui nilai berikut dalam .env file.

   ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
   TEAM_ID=<TEAMS_TEAM_ID>
   CHANNEL_ID=<TEAMS_CHANNEL_ID>
   

   Pastikan Anda telah menyelesaikan latihan sebelumnya sebelum melanjutkan.

2. Kembali ke browser (http://localhost:4200). Jika Anda belum masuk, pilih Masuk di header, dan masuk dengan pengguna dari penyewa Pengembang Microsoft 365 Anda.

   Catatan

   Selain mengautentikasi pengguna, komponen web mgt-login juga mengambil token akses yang dapat digunakan oleh Microsoft Graph untuk mengakses file, obrolan, email, acara kalender, dan data organisasi lainnya. Token akses berisi cakupan (izin) seperti Chat.ReadWrite, , Files.Read.Alldan lainnya yang Anda lihat sebelumnya:

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

3. Pilih Tampilkan Konten Terkait untuk baris Adatum Corporation di datagrid. Ini akan menyebabkan data organisasi seperti file, obrolan, email, dan acara kalender diambil menggunakan Microsoft Graph. Setelah data dimuat, data akan ditampilkan di bawah datagrid dalam antarmuka bertab. Penting untuk disebutkan bahwa Anda mungkin tidak melihat data apa pun saat ini karena Anda belum menambahkan file, obrolan, email, atau acara kalender apa pun untuk pengguna di penyewa pengembang Microsoft 365 Anda. Mari kita perbaiki itu di langkah berikutnya.

   

4. Penyewa Microsoft 365 Anda mungkin tidak memiliki data organisasi terkait untuk Adatum Corporation pada tahap ini. Untuk menambahkan beberapa data sampel, lakukan setidaknya salah satu tindakan berikut:

   • Tambahkan file dengan mengunjungi https://onedrive.com dan masuk menggunakan kredensial penyewa Pengembang Microsoft 365 Anda.

     • Pilih File saya di navigasi kiri.
     • Pilih + Tambahkan baru lalu Unggah folder dari menu.
     • Pilih folder dokumen openai-acs-msgraph/customer dari proyek yang Anda kloning.

     

   • Tambahkan pesan obrolan dan acara kalender dengan mengunjungi https://teams.microsoft.com dan masuk menggunakan kredensial penyewa Pengembang Microsoft 365 Anda.

     • Pilih Teams di navigasi kiri.

     • Pilih tim dan saluran.

     • Pilih Mulai postingan.

     • Masukkan Pesanan baru yang ditempatkan untuk Adatum Corporation untuk subjek dan teks tambahan apa pun yang ingin Anda tambahkan di isi pesan. Pilih tombol Posting .

       Jangan ragu untuk menambahkan pesan obrolan tambahan yang menyebutkan perusahaan lain yang digunakan dalam aplikasi seperti Adventure Works Cycles, Contoso Pharmaceuticals, dan Tailwind Traders.

       

     • Pilih Kalender di navigasi kiri.

     • Pilih Rapat baru.

     • Masukkan "Bertemu dengan Adatum Corporation tentang jadwal proyek" untuk judul dan isinya.

     • Pilih Simpan.

       

   • Tambahkan email dengan mengunjungi https://outlook.com dan masuk menggunakan kredensial penyewa Pengembang Microsoft 365 Anda.

     • Pilih Email baru.

     • Masukkan alamat email pribadi Anda di bidang Kepada .

     • Masukkan Pesanan baru yang ditempatkan untuk Adatum Corporation untuk subjek dan apa pun yang Anda inginkan untuk tubuh.

     • Pilih Kirim.

       

5. Kembali ke aplikasi di browser dan refresh halaman. Pilih Tampilkan Konten Terkait lagi untuk baris Adatum Corporation . Sekarang Anda akan melihat data yang ditampilkan di tab tergantung pada tugas mana yang Anda lakukan di langkah sebelumnya.

6. Mari kita jelajahi kode yang memungkinkan fitur data organisasi dalam aplikasi. Untuk mengambil data, bagian sisi klien aplikasi menggunakan token akses yang diambil oleh komponen mgt-login yang Anda lihat sebelumnya untuk melakukan panggilan ke MICROSOFT Graph API.

Menjelajahi Kode Pencarian File

1. Mari kita mulai dengan melihat bagaimana data file diambil dari OneDrive for Business. Buka files.component.html dan luangkan waktu sejenak untuk melihat melalui kode. Jalur lengkap ke file client/src/app/files/files.component.html.

2. Temukan komponen mgt-search-results dan perhatikan atribut berikut:

   <mgt-search-results 
       class="search-results" 
       entity-types="driveItem" 
       [queryString]="searchText"
       (dataChange)="dataChange($any($event))" 
   />
   

   Komponen mgt-search-results adalah bagian dari Microsoft Graph Toolkit dan sesuai namanya, digunakan untuk menampilkan hasil pencarian dari Microsoft Graph. Komponen menggunakan fitur berikut dalam contoh ini:

   • Atribut class digunakan untuk menentukan bahwa search-results kelas CSS harus diterapkan ke komponen.

   • Atribut entity-types digunakan untuk menentukan jenis data yang akan dicari. Dalam hal ini, nilainya adalah driveItem yang digunakan untuk mencari file di OneDrive for Business.

   • Atribut queryString digunakan untuk menentukan istilah pencarian. Dalam hal ini, nilai terikat ke searchText properti yang diteruskan ke komponen file saat pengguna memilih Tampilkan Konten Terkait untuk baris di datagrid. Kurung siku di sekitar queryString menunjukkan bahwa properti terikat ke searchText nilai .

   • Peristiwa diaktifkan dataChange saat hasil pencarian berubah. Dalam hal ini, fungsi pelanggan bernama dataChange() dipanggil dalam komponen file dan data peristiwa diteruskan ke fungsi . Tanda kurung di sekitar dataChange menunjukkan bahwa peristiwa terikat ke dataChange() fungsi.

   • Karena tidak ada templat kustom yang disediakan, templat mgt-search-results default bawaan digunakan untuk menampilkan hasil pencarian.

     

3. Alternatif untuk menggunakan komponen seperti mgt-search-results, adalah memanggil Microsoft Graph API secara langsung menggunakan kode. Untuk melihat cara kerjanya, buka file graph.service.ts dan temukan fungsi .searchFiles() Jalur lengkap ke file adalah client/src/app/core/graph.service.ts.

   • Anda akan melihat bahwa query parameter diteruskan ke fungsi . Ini adalah istilah pencarian yang diteruskan saat pengguna memilih Tampilkan Konten Terkait untuk baris di datagrid. Jika tidak ada istilah pencarian yang diteruskan, array kosong akan dikembalikan.

     async searchFiles(query: string) {
         const files: DriveItem[] = [];
         if (!query) return files;
     
         ...
     }
     

   • Filter kemudian dibuat yang menentukan jenis pencarian yang akan dilakukan. Dalam hal ini kode sedang mencari file di OneDrive for Business sehingga driveItem digunakan seperti yang Anda lihat sebelumnya dengan mgt-search-results komponen. Ini sama dengan meneruskan driveItem ke entity-types dalam komponen mgt-search-results yang Anda lihat sebelumnya. Parameter query kemudian ditambahkan ke queryString filter bersama dengan ContentType:Document.

     const filter = {
         "requests": [
             {
                 "entityTypes": [
                     "driveItem"
                 ],
                 "query": {
                     "queryString": `${query} AND ContentType:Document`
                 }
             }
         ]
     };
     

   • Panggilan kemudian dilakukan ke /search/query Microsoft Graph API menggunakan fungsi .Providers.globalProvider.graph.client.api() Objek filter diteruskan ke post() fungsi yang mengirim data ke API.

     const searchResults = await Providers.globalProvider.graph.client.api('/search/query').post(filter);
     

   • Hasil pencarian kemudian diulang melalui untuk menemukan hits. Masing-masing hit berisi informasi tentang dokumen yang ditemukan. Properti bernama resource berisi metadata dokumen dan ditambahkan ke files array.

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

   • Array files kemudian dikembalikan ke pemanggil.

     return files;
     

4. Melihat melalui kode ini Anda dapat melihat bahwa komponen web hasil pencarian mgt yang Anda jelajahi sebelumnya melakukan banyak pekerjaan untuk Anda dan secara signifikan mengurangi jumlah kode yang harus Anda tulis! Namun, mungkin ada skenario di mana Anda ingin memanggil Microsoft Graph secara langsung untuk memiliki kontrol lebih atas data yang dikirim ke API atau bagaimana hasilnya diproses.

5. Buka file files.component.ts dan temukan fungsi .search() Jalur lengkap ke file adalah klien/src/app/files/files.component.ts.

   Meskipun isi fungsi ini dikomentari karena komponen mgt-search-results yang digunakan, fungsi dapat digunakan untuk melakukan panggilan ke Microsoft Graph saat pengguna memilih Lihat Konten Terkait untuk baris di datagrid. Fungsi memanggil search()searchFiles() dalam graph.service.ts dan meneruskan query parameter ke dalamnya (nama perusahaan dalam contoh ini). Hasil pencarian kemudian ditetapkan ke data properti komponen.

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

   Komponen file kemudian dapat menggunakan data properti untuk menampilkan hasil pencarian. Anda dapat menangani ini menggunakan pengikatan HTML kustom atau dengan menggunakan kontrol Microsoft Graph Toolkit lain bernama mgt-file-list. Berikut adalah contoh pengikatan data properti ke salah satu properti komponen bernama files dan menangani itemClick peristiwa saat pengguna berinteraksi dengan file.

   <mgt-file-list (itemClick)="itemClick($any($event))" [files]="data"></mgt-file-list>
   

6. Apakah Anda memilih untuk menggunakan komponen mgt-search-results yang ditunjukkan sebelumnya atau menulis kode kustom untuk memanggil Microsoft Graph akan bergantung pada skenario spesifik Anda. Dalam contoh ini, komponen mgt-search-results digunakan untuk menyederhanakan kode dan mengurangi jumlah pekerjaan yang harus Anda lakukan.

Menjelajahi Kode Pencarian Pesan Obrolan Teams

1. Kembali ke graph.service.ts dan temukan searchChatMessages() fungsi . Anda akan melihat bahwa fungsi ini mirip dengan fungsi yang searchFiles() Anda lihat sebelumnya.

   • Ini memposting data filter ke API Microsoft Graph /search/query dan mengonversi hasilnya menjadi array objek yang memiliki informasi tentang teamId, channelId, dan messageId yang cocok dengan istilah pencarian.
   • Untuk mengambil pesan saluran Teams, panggilan kedua dilakukan ke /teams/${chat.teamId}/channels/${chat.channelId}/messages/${chat.messageId} API dan teamId, channelId, dan messageId diteruskan. Ini mengembalikan detail pesan lengkap.
   • Tugas pemfilteran tambahan dilakukan dan pesan yang dihasilkan dikembalikan dari searchChatMessages() ke pemanggil.

2. Buka file chats.component.ts dan temukan fungsi .search() Jalur lengkap ke file adalah client/src/app/chats/chats.component.ts. Fungsi memanggil search() graph.service.ts dan meneruskan searchChatMessages() parameter ke dalamnya.query

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

   Hasil pencarian ditetapkan ke data properti komponen dan pengikatan data digunakan untuk melakukan iterasi melalui array hasil dan merender data. Contoh ini menggunakan komponen kartu Angular Material untuk menampilkan hasil pencarian.

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

   

Mengirim Pesan ke Saluran Microsoft Teams

1. Selain mencari pesan obrolan Microsoft Teams, aplikasi ini juga memungkinkan pengguna mengirim pesan ke saluran Microsoft Teams. Ini dapat dilakukan dengan memanggil /teams/${teamId}/channels/${channelId}/messages titik akhir Microsoft Graph.

   

2. Dalam kode berikut, Anda akan melihat bahwa URL dibuat yang menyertakan teamId nilai dan channelId . Nilai variabel lingkungan digunakan untuk ID tim dan ID saluran dalam contoh ini tetapi nilai-nilai tersebut dapat diambil secara dinamis juga menggunakan Microsoft Graph. Konstanta body berisi pesan yang akan dikirim. Permintaan POST kemudian dibuat dan hasilnya dikembalikan ke pemanggil.

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

3. Memanfaatkan jenis fungsionalitas ini di Microsoft Graph menyediakan cara yang bagus untuk meningkatkan productivbity pengguna dengan memungkinkan pengguna berinteraksi dengan Microsoft Teams langsung dari aplikasi yang sudah mereka gunakan.

Data Organisasi: Mengambil Email dan Acara Kalender

• Tersisa 21 menit

Dalam latihan sebelumnya Anda mempelajari cara mengambil file dari OneDrive for Business dan obrolan dari Microsoft Teams menggunakan Microsoft Graph dan komponen hasil pencarian mgt dari Microsoft Graph Toolkit. Anda juga mempelajari cara mengirim pesan ke saluran Microsoft Teams. Dalam latihan ini, Anda akan mempelajari cara mengambil pesan email dan acara kalender dari Microsoft Graph dan mengintegrasikannya ke dalam aplikasi.

Dalam latihan ini, Anda akan:

• Pelajari bagaimana komponen web mgt-search-results di Microsoft Graph Toolkit dapat digunakan untuk mencari email dan acara kalender.
• Pelajari cara mengkustomisasi komponen mgt-search-results untuk merender hasil pencarian dengan cara kustom.
• Pelajari cara memanggil Microsoft Graph secara langsung untuk mengambil email dan acara kalender.

Menjelajahi Kode Pencarian Pesan Email

1. Dalam latihan sebelumnya, Anda membuat pendaftaran aplikasi di MICROSOFT Entra ID dan memulai server aplikasi dan server API. Anda juga memperbarui nilai berikut dalam .env file.

   ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
   TEAM_ID=<TEAMS_TEAM_ID>
   CHANNEL_ID=<TEAMS_CHANNEL_ID>
   

   Pastikan Anda telah menyelesaikan latihan sebelumnya sebelum melanjutkan.

2. Buka emails.component.html dan luangkan waktu sejenak untuk melihat melalui kode. Jalur lengkap ke file client/src/app/emails/emails.component.html.

3. Temukan komponen mgt-search-results:

   <mgt-search-results 
     class="search-results" 
     entity-types="message" 
     [queryString]="searchText"
     (dataChange)="dataChange($any($event))">
     <template data-type="result-message"></template>
   </mgt-search-results>
   

   Contoh komponen mgt-search-results ini dikonfigurasi dengan cara yang sama seperti yang Anda lihat sebelumnya. Satu-satunya perbedaan adalah bahwa entity-types atribut diatur ke message yang digunakan untuk mencari pesan email dan templat kosong disediakan.

   • Atribut class digunakan untuk menentukan bahwa search-results kelas CSS harus diterapkan ke komponen.
   • Atribut entity-types digunakan untuk menentukan jenis data yang akan dicari. Dalam hal ini, nilainya adalah message.
   • Atribut queryString digunakan untuk menentukan istilah pencarian.
   • Peristiwa diaktifkan dataChange saat hasil pencarian berubah. Fungsi komponen dataChange() email dipanggil, hasilnya diteruskan ke dalamnya, dan properti bernama data diperbarui dalam komponen.
   • Templat kosong didefinisikan untuk komponen. Jenis templat ini biasanya digunakan untuk menentukan bagaimana hasil pencarian akan dirender. Namun, dalam skenario ini kami memberi tahu komponen untuk tidak merender data pesan apa pun. Sebagai gantinya, kita akan merender data sendiri menggunakan pengikatan data standar (Angular digunakan dalam kasus ini, tetapi Anda dapat menggunakan pustaka/kerangka kerja apa pun yang Anda inginkan).

4. Lihat di bawah komponen mgt-search-results di emails.component.html untuk menemukan pengikatan data yang digunakan untuk merender pesan email. Contoh ini berulang melalui data properti dan menulis subjek email, pratinjau isi, dan tautan untuk melihat pesan email lengkap.

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

   

5. Selain menggunakan komponen mgt-search-results untuk mengambil pesan, Microsoft Graph juga menyediakan beberapa API yang dapat digunakan untuk mencari email. /search/query API yang Anda lihat sebelumnya tentu dapat digunakan, tetapi opsi yang lebih mudah adalah messages API.

6. Untuk melihat cara memanggil API ini, kembali ke graph.service.ts dan temukan fungsi .searchEmailMessages() Ini membuat URL yang dapat digunakan untuk memanggil messages titik akhir Microsoft Graph dan menetapkan query nilai ke $search parameter . Kode kemudian membuat permintaan GET dan mengembalikan hasilnya ke pemanggil. Operator $search mencari query nilai dalam bidang subjek, isi, dan pengirim secara otomatis.

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

7. Komponen email yang terletak di panggilan emails.component.tssearchEmailMessages() dan menampilkan hasilnya di UI.

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

Menjelajahi Kode Pencarian Acara Kalender

1. Mencari acara kalender juga dapat dicapai menggunakan komponen mgt-search-results . Ini dapat menangani penyajian hasil untuk Anda, tetapi Anda juga dapat menentukan templat Anda sendiri yang akan Anda lihat nanti dalam latihan ini.

2. Buka calendar-events.component.html dan luangkan waktu sejenak untuk melihat melalui kode. Jalur lengkap ke file client/src/app/calendar-events/calendar-events.component.html. Anda akan melihat bahwa ini sangat mirip dengan komponen file dan email yang Anda lihat sebelumnya.

   <mgt-search-results 
       class="search-results" 
       entity-types="event" 
       [queryString]="searchText"
       (dataChange)="dataChange($any($event))">
       <template data-type="result-event"></template>
   </mgt-search-results>
   

   Contoh komponen mgt-search-results ini dikonfigurasi dengan cara yang sama seperti yang Anda lihat sebelumnya. Satu-satunya perbedaan adalah bahwa entity-types atribut diatur ke event yang digunakan untuk mencari acara kalender dan templat kosong disediakan.

   • Atribut class digunakan untuk menentukan bahwa search-results kelas CSS harus diterapkan ke komponen.
   • Atribut entity-types digunakan untuk menentukan jenis data yang akan dicari. Dalam hal ini, nilainya adalah event.
   • Atribut queryString digunakan untuk menentukan istilah pencarian.
   • Peristiwa diaktifkan dataChange saat hasil pencarian berubah. Fungsi komponen acaradataChange()dipanggil, hasilnya diteruskan ke fungsi tersebut, dan properti bernama data diperbarui dalam komponen.
   • Templat kosong didefinisikan untuk komponen. Dalam skenario ini kami memberi tahu komponen untuk tidak merender data apa pun. Sebagai gantinya, kita akan merender data sendiri menggunakan pengikatan data standar.

3. Tepat di bawah mgt-search-results komponen di calendar-events.component.html Anda akan menemukan pengikatan data yang digunakan untuk merender acara kalender. Contoh ini berulang melalui data properti dan menulis tanggal mulai, waktu, dan subjek peristiwa. Fungsi kustom yang disertakan dalam komponen seperti dayFromDateTime() dan timeRangeFromEvent() dipanggil untuk memformat data dengan benar. Pengikatan HTML juga menyertakan tautan untuk menampilkan acara kalender di Outlook dan lokasi acara jika ditentukan.

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

   

4. Selain mencari acara kalender menggunakan search/query API, Microsoft Graph juga menyediakan events API yang juga dapat digunakan untuk mencari acara kalender. searchCalendarEvents() Temukan fungsi di graph.service.ts.

5. Fungsi ini searchCalendarEvents() membuat nilai tanggal/waktu mulai dan berakhir yang digunakan untuk menentukan periode waktu yang akan dicari. Kemudian membuat URL yang dapat digunakan untuk memanggil events titik akhir Microsoft Graph dan menyertakan query parameter dan variabel tanggal/waktu mulai dan berakhir. Permintaan GET kemudian dibuat dan hasilnya dikembalikan ke pemanggil.

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

   • Berikut adalah perincian URL yang dibuat:

     • Bagian /me/events URL digunakan untuk menentukan bahwa peristiwa pengguna yang masuk harus diambil.
     • Parameter startdatetime dan enddatetime digunakan untuk menentukan periode waktu untuk mencari. Dalam hal ini, pencarian akan mengembalikan peristiwa yang dimulai dalam 7 hari ke depan.
     • Parameter $filter kueri digunakan untuk memfilter hasil menurut query nilai (nama perusahaan yang dipilih dari datagrid dalam kasus ini). Fungsi contains() ini digunakan untuk mencari query nilai dalam subject properti acara kalender.
     • Paramter $orderby kueri digunakan untuk mengurutkan hasil menurut start/dateTime properti .

   url Setelah dibuat, permintaan GET dibuat ke Microsoft Graph API menggunakan nilai url dan hasilnya dikembalikan ke pemanggil.

6. Seperti halnya komponen sebelumnya, komponen kalender-acara (file calendar-events.component.ts ) memanggil search() dan menampilkan hasilnya.

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

   Catatan

   Anda juga dapat melakukan panggilan Microsoft Graph dari API kustom atau aplikasi sisi server. Lihat tutorial berikut untuk melihat contoh panggilan Microsoft Graph API dari Azure Function.

7. Anda sekarang telah melihat contoh penggunaan Microsoft Graph untuk mengambil file, obrolan, pesan email, dan acara kalender. Konsep yang sama juga dapat diterapkan ke API Microsoft Graph lainnya. Misalnya, Anda dapat menggunakan API pengguna Microsoft Graph untuk mencari pengguna di organisasi Anda. Anda juga dapat menggunakan API grup Microsoft Graph untuk mencari grup di organisasi Anda. Anda dapat melihat daftar lengkap API Microsoft Graph dalam dokumentasi.

Selamat!

• Selesai 100%!

Anda menyelesaikan tutorial ini

Selamat! Dalam tutorial ini Anda mempelajari cara:

• Azure OpenAI dapat digunakan untuk meningkatkan produktivitas pengguna.
• Azure Communication Services dapat digunakan untuk mengintegrasikan fitur komunikasi.
• API dan komponen Microsoft Graph dapat digunakan untuk mengambil dan menampilkan data organisasi.

Dengan menggunakan teknologi ini, Anda dapat menciptakan solusi efektif yang meningkatkan produktivitas pengguna dengan meminimalkan pergeseran konteks dan memberikan informasi pengambilan keputusan yang diperlukan.

Membersihkan Sumber Daya Azure

Bersihkan sumber daya Azure Anda untuk menghindari lebih banyak biaya ke akun Anda. Buka portal Azure dan hapus sumber daya berikut:

• Sumber daya Pencarian Azure AI
• Sumber daya Azure Storage
• Sumber daya Azure OpenAI (pastikan Anda menghapus model terlebih dahulu lalu sumber daya Azure OpenAI)
• Sumber daya Azure Communication Services

Langkah berikutnya

Dokumentasi

• Dokumentasi Azure OpenAI
• Azure OpenAI pada data Anda
• Dokumentasi Azure Communication Services
• Dokumentasi Microsoft Graph
• Dokumentasi Toolkit Microsoft Graph
• Dokumentasi Pengembang Microsoft Teams

Konten Pelatihan

• Menerapkan rekayasa prompt dengan Azure OpenAI Service
• Mulai menggunakan Azure OpenAI Service
• Pengantar Azure Communication Services
• Dasar-Dasar Microsoft Graph
• Kursus Video: Dasar-Dasar Microsoft Graph untuk Pemula
• Menjelajahi skenario Microsoft Graph untuk pengembangan JavaScript
• Menjelajahi skenario Microsoft Graph untuk pengembangan ASP.NET Core
• Mulai menggunakan Microsoft Graph Toolkit
• Membangun dan menyebarkan aplikasi untuk Microsoft Teams menggunakan Teams Toolkit untuk Visual Studio Code