Tinjauan Perpustakaan UI

UI Library memudahkan Anda untuk membangun pengalaman pengguna komunikasi modern menggunakan Azure Communication Services. Anda juga dapat menggunakan pustaka UI untuk terhubung dengan Open AI atau model lainnya. SDK kami memberi Anda library komponen UI siap produksi yang dapat Anda masukkan ke dalam aplikasi Anda:

Nota

Untuk dokumentasi terperinci tentang Pustaka UI Web, kunjungi Buku Cerita Pustaka UI Web. Di sana Anda akan menemukan dokumentasi konseptual tambahan, panduan cepat, dan contoh.

• Komposit. Komponen-komponen ini adalah solusi siap pakai yang menerapkan skenario komunikasi umum. Anda dapat dengan cepat menambahkan pengalaman panggilan video atau chat (saat ini hanya tersedia melalui Web UI Library) ke aplikasi Anda. Komposit adalah komponen tingkat tinggi sumber terbuka yang dibuat menggunakan komponen UI.

• Komponen UI. Komponen-komponen ini adalah blok bangunan open-source yang memungkinkan Anda membangun pengalaman komunikasi kustom. Komponen ditawarkan untuk kemampuan panggilan dan obrolan yang dapat digabungkan untuk membangun pengalaman.

Perpustakaan klien UI ini semua menggunakan bahasa desain Fluent Microsoft dan sumber daya. Fluent UI menyediakan lapisan dasar untuk Perpustakaan UI dan secara aktif digunakan di seluruh produk Microsoft.

Sehubungan dengan komponen UI, Pustaka UI mengekspos pustaka klien stateful untuk panggilan dan obrolan. Klien ini tidak terbatas pada kerangka kerja manajemen status spesifik apa pun dan dapat diintegrasikan dengan pengelola status umum seperti Redux atau React Context. Pustaka klien stateful ini dapat digunakan dengan Komponen UI untuk meneruskan properti dan metode agar Komponen UI dapat merender data. Untuk informasi lebih lanjut, lihat Ikhtisar Client yang Menyimpan Status.

Nota

Komponen dan komposit yang sama yang ditawarkan dalam UI Library tersedia di Design Kit for Figma, sehingga Anda dapat dengan cepat merancang dan membuat prototipe pengalaman panggilan dan obrolan Anda.

Tinjauan Komposit

Komposit adalah komponen tingkat tinggi yang terdiri dari komponen UI yang menyediakan solusi siap pakai untuk skenario komunikasi umum menggunakan Azure Communication Services. Pengembang dapat dengan mudah menginisialisasi Komposit menggunakan token akses Azure Communication Services dan konfigurasi yang diperlukan untuk panggilan atau obrolan.

Komposit	Kasus Penggunaan
Panggilan denganObrolanKomposit	Pengalaman menggabungkan fitur panggilan dan obrolan untuk memungkinkan pengguna memulai atau bergabung dengan utas panggilan dan obrolan. Dalam pengalaman ini, pengguna memiliki kemampuan untuk berkomunikasi menggunakan suara dan video, serta akses ke thread obrolan yang kaya di mana pesan dapat dipertukarkan antar peserta. Ini mencakup dukungan untuk Interop Teams.
Panggilan Komposit	Pengalaman panggilan yang memungkinkan pengguna untuk memulai atau bergabung dalam panggilan. Di dalam pengalaman ini, pengguna dapat mengonfigurasi perangkat mereka, berpartisipasi dalam panggilan dengan video, dan melihat peserta lainnya, termasuk peserta yang mengaktifkan video. Dalam Teams Interop, terdapat fungsi lobby untuk pengguna menunggu penerimaan masuk.
ObrolanKomposit	Pengalaman chat di mana pengguna dapat mengirim dan menerima pesan. Peristiwa utas seperti mengetik, membaca, peserta masuk dan keluar ditampilkan kepada pengguna sebagai bagian dari utas obrolan.

Ikhtisar Komponen UI

Komponen UI Murni dapat digunakan oleh pengembang untuk menyusun pengalaman komunikasi, mulai dari menjahit ubin video menjadi sebuah grid untuk menampilkan peserta jarak jauh, hingga mengorganisir komponen agar sesuai dengan spesifikasi aplikasi Anda. Komponen UI mendukung penyesuaian untuk memberikan nuansa dan tampilan yang tepat pada komponen agar sesuai dengan merek dan gaya aplikasi.

Daerah	Komponen	Deskripsi
Panggilan	Tata Letak Kisi	Komponen grid untuk mengatur Ubin Video ke dalam _grid_ NxN.
	Ubin Video	Komponen yang menampilkan streaming video ketika tersedia dan komponen statis default ketika tidak tersedia.
	Bilah Kontrol	Container untuk mengatur DefaultButtons agar terhubung ke tindakan panggilan spesifik seperti membisukan atau berbagi layar
	Galeri Video	Komponen galeri video siap pakai, yang secara dinamis berubah saat peserta ditambahkan.
	Tombol tombol	Komponen untuk mendukung input nomor telepon dan nada DTMF
Percakapan	Utas Pesan	Kontainer yang menampilkan pesan obrolan, pesan sistem, dan pesan kustom
	Kotak Kirim	Komponen input teks dengan tombol kirim terpisah
	Kotak Kirim Teks Kaya	Komponen input teks kaya dengan opsi pemformatan dan tombol kirim yang tersembunyi.
	Indikator Status Pesan	Komponen tanda terima baca multi-negara bagian untuk menunjukkan status pesan yang dikirim
	Indikator mengetik	Komponen teks untuk menampilkan peserta yang sedang mengetik secara aktif pada sebuah percakapan.
Umum	Item Peserta	Komponen umum untuk menampilkan peserta panggilan atau obrolan termasuk avatar dan nama tampilan
	Daftar Peserta	Komponen umum untuk menampilkan daftar peserta panggilan atau obrolan termasuk avatar dan nama tampilan.

Menginstal Perpustakaan Web UI

Klien stateful ditemukan sebagai bagian dari paket @azure/communication-react.

npm i --save @azure/communication-react

Artefak UI apa yang terbaik untuk proyek saya?

Memahami persyaratan ini membantu Anda memilih pustaka klien yang tepat.

• Seberapa banyak kustomisasi yang Anda inginkan? Pustaka klien inti Azure Communication tidak memiliki UX dan didesain agar Anda dapat membuat UX apa pun yang Anda inginkan. Komponen Pustaka UI menyediakan aset UI dengan biaya penyesuaian yang dikurangi.
• Platform apa yang Anda targetkan? Platform yang berbeda memiliki kemampuan yang berbeda.

Detail tentang ketersediaan fitur dalam UI Library tersedia di sini, tetapi pertimbangan utama dirangkum dalam tabel berikut.

Pustaka klien / SDK	Kompleksitas Implementasi	Kemampuan Kustomisasi	Panggilan	Percakapan	Interop Tim
Komponen Komposit	Rendah	Rendah	✔	✔	✔
Komponen Dasar	Menengah	Menengah	✔	✔	✔
Perpustakaan inti klien	Tinggi	Tinggi	✔	✔	✔

Kunjungi Storybook Pustaka UI

Komposit adalah solusi siap pakai yang menerapkan skenario komunikasi umum. Anda dapat menambahkan pengalaman panggilan video ke aplikasi Anda. Komposit adalah komponen tingkat tinggi open-source yang dapat dimanfaatkan oleh pengembang untuk mengurangi waktu pengembangan dan kompleksitas rekayasa.

Tinjauan Komposit

Komposit	Kasus Penggunaan
Panggilan Komposit	Pengalaman panggilan yang memungkinkan pengguna untuk memulai atau bergabung dalam panggilan. Di dalam pengalaman, pengguna dapat mengonfigurasi perangkat mereka, berpartisipasi dalam panggilan dengan video, dan melihat peserta lain, termasuk mereka yang mengaktifkan video. Untuk interoperabilitas dengan Teams, CallComposite mencakup fungsi ruang tunggu agar pengguna dapat menunggu untuk diterima.
ObrolanKomposit	ChatComposite menghadirkan pengalaman pesan teks waktu nyata kepada pengguna. Secara khusus, pengguna dapat mengirim dan menerima pesan obrolan dengan mendeteksi aktivitas mengetik dan tanda terima telah dibaca. Selain itu, pengguna juga dapat menerima pesan sistem seperti peserta yang ditambahkan atau dihapus dan perubahan pada judul obrolan.

Skenario untuk komposit dalam panggilan

Bergabung dengan panggilan video/audio

Pengguna dapat bergabung dalam panggilan dengan menggunakan URL rapat Teams, atau mereka dapat menyetel panggilan Azure Communication Services. Pendekatan ini menawarkan pengalaman yang lebih sederhana, seperti aplikasi Teams.

Pengalaman Pra-Panggilan

Sebagai peserta panggilan, Anda dapat memberikan nama dan mengatur konfigurasi default untuk perangkat audio dan video. Kemudian Anda siap untuk melompat ke panggilan.

Pengalaman panggilan

Komposit panggilan menyediakan pengalaman menyeluruh, mengoptimalkan waktu pengembangan, dan berfokus pada tata letak yang bersih.

Pengalaman panggilan menyediakan semua kemampuan ini dalam satu komponen gabungan, memberikan jalur yang jelas tanpa kode yang rumit, yang mengarah pada waktu pengembangan yang lebih cepat.

Kualitas dan keamanan

Komposit seluler untuk panggilan diinisialisasi menggunakan token akses Azure Communication Services.

Detail lebih lanjut

Jika Anda memerlukan lebih banyak detail tentang komposit seluler untuk panggilan, lihat use cases.

Skenario komposit untuk obrolan

Penting

Fitur ini dari Azure Communication Services saat ini sedang dalam pratinjau. Fitur dalam pratinjau tersedia untuk umum dan dapat digunakan oleh semua pelanggan Microsoft baru dan yang sudah ada.

API pratinjau dan SDK disediakan tanpa perjanjian tingkat layanan. Kami menyarankan agar Anda tidak menggunakannya untuk beban kerja produksi. Fitur tertentu mungkin tidak didukung atau kemampuan mungkin dibatasi.

Untuk informasi lebih lanjut, lihat Supplemental Terms of Use for Microsoft Azure Previews.

Pengalaman obrolan

Ini ChatComposite memberikan pengalaman pesan teks waktu nyata. Dengan fleksibilitas dan skalabilitas dalam pikiran, ChatComposite dapat menyesuaikan dengan tata letak atau tampilan berbeda dari aplikasi Anda tanpa kompleksitas. Anda juga dapat memilih untuk tidak menampilkan tampilan ChatComposite dan hanya menerima notifikasi untuk memenuhi kebutuhan bisnis Anda yang berbeda.

Ios	Android

Kualitas dan keamanan

Mirip dengan CallComposite, juga ChatComposite menggunakan token akses Azure Communication Services. Untuk memastikan hanya pengguna dengan izin yang sesuai yang dapat mengakses chat, token pengguna mereka harus ditambahkan ke thread chat yang valid sebelum memulai pengalaman Chat.

Detail lebih lanjut

Jika Anda memerlukan detail selengkapnya tentang komposit seluler untuk chat, lihat kasus penggunaan.

Artefak UI apa yang terbaik untuk proyek saya?

Persyaratan ini membantu Anda memilih pustaka klien yang tepat:

• Seberapa banyak kustomisasi yang Anda inginkan? Pustaka klien inti Azure Communication Services tidak memiliki UX dan dirancang agar Anda dapat membangun UX apa pun yang Anda inginkan. Komponen Pustaka UI menyediakan aset UI dengan biaya penyesuaian yang dikurangi.

• Platform apa yang Anda targetkan? Platform yang berbeda memiliki kemampuan yang berbeda.

Berikut adalah beberapa kelemahan penting.

Pustaka klien / SDK	Kompleksitas Implementasi	Kemampuan kustomisasi	Panggilan	Percakapan	Interoperabilitas Teams
Komponen Komposit	Rendah	Rendah	✔	✔	✔
Pustaka klien inti	Tinggi	Tinggi	✔	✔	✔

Untuk informasi lebih lanjut tentang ketersediaan fitur di UI Library, silakan lihat kasus penggunaan UI Library.

Panduan mulai cepat

Masalah yang Dikenal

• Masalah yang diketahui pada iOS
• Masalah yang diketahui pada Android