Gambaran Umum Pustaka UI
Pustaka UI memudahkan Anda membangun pengalaman pengguna komunikasi modern menggunakan Azure Communication Services. Ini memberi Anda pustaka komponen UI siap produksi yang dapat Anda jatuhkan ke aplikasi Anda:
Catatan
Untuk dokumentasi terperinci tentang Pustaka Antarmuka Pengguna Web, kunjungi Buku Cerita Pustaka UI Web. Di sana Anda akan menemukan dokumentasi konseptual tambahan, mulai cepat, dan contoh.
Komposit. Komponen ini adalah solusi turn-key yang menerapkan skenario komunikasi umum. Anda dapat dengan cepat menambahkan pengalaman panggilan video atau obrolan (saat ini hanya tersedia melalui Pustaka Antarmuka Pengguna Web) ke aplikasi Anda. Komposit adalah komponen berurutan tinggi sumber terbuka yang dibangun menggunakan komponen UI.
Komponen UI. Komponen ini adalah blok penyusun sumber terbuka yang memungkinkan Anda membangun pengalaman komunikasi kustom. Komponen ditawarkan untuk kemampuan panggilan dan obrolan yang dapat digabungkan untuk membangun pengalaman.
Semua pustaka klien UI ini menggunakan bahasa dan aset desain Fluent Microsoft. UI Fluent menyediakan lapisan dasar untuk Pustaka UI dan secara aktif digunakan di seluruh produk Microsoft.
Bersama dengan komponen UI, Pustaka UI mengekspos pustaka klien stateful untuk panggilan dan obrolan. Klien ini bersifat agnostik terhadap kerangka kerja manajemen status tertentu dan dapat diintegrasikan dengan manajer status umum seperti Redux atau React Context. Pustaka klien stateful ini dapat digunakan dengan Komponen UI untuk meneruskan alat peraga dan metode bagi Komponen UI untuk merender data. Untuk mengetahui informasi selengkapnya, lihat Gambaran Umum Klien Stateful.
Catatan
Komponen dan komposit yang sama yang ditawarkan di Pustaka UI tersedia di Kit Desain untuk Figma, sehingga Anda dapat dengan cepat merancang dan membuat prototipe pengalaman panggilan dan obrolan Anda.
Gambaran umum komposit
Komposit adalah komponen tingkat lebih tinggi yang terdiri dari komponen UI yang memberikan solusi turn-key untuk skenario komunikasi umum menggunakan Azure Communication Services. Pengembang dapat dengan mudah membuat instans Komposit menggunakan token akses Azure Communication Services dan konfigurasi yang diperlukan yang diatribusikan untuk panggilan atau obrolan.
| Komposit | Kasus Penggunaan |
|---|---|
| CallwithChatComposite | Pengalaman menggabungkan fitur panggilan dan obrolan untuk memungkinkan pengguna memulai atau bergabung dengan utas panggilan dan obrolan. Dalam pengalaman, pengguna memiliki kemampuan untuk berkomunikasi menggunakan suara dan video, dan akses ke utas obrolan yang kaya di mana pesan dapat ditukar antar peserta. Ini termasuk dukungan untuk Teams Interop. |
| CallComposite | Pengalaman panggilan yang memungkinkan pengguna memulai atau bergabung dalam panggilan. Di dalam pengalaman, pengguna dapat mengonfigurasi perangkat mereka, berpartisipasi dalam panggilan dengan video, dan melihat peserta lain, termasuk peserta dengan turn-on video. Untuk Teams Interop, disertakan fungsionalitas lobi agar pengguna menunggu untuk dimasukkan. |
| ChatComposite | Pengalaman obrolan yang mana pengguna dapat mengirim dan menerima pesan. Peristiwa utas seperti mengetik, membaca, peserta yang masuk dan pergi ditampilkan kepada pengguna sebagai bagian dari utas obrolan. |
Gambaran umum Komponen UI
Komponen UI Murni dapat digunakan untuk pengembang, untuk menyusun pengalaman komunikasi, dari menjahit petak peta video ke dalam kisi untuk menampilkan peserta jarak jauh, hingga mengatur komponen agar sesuai dengan spesifikasi aplikasi Anda. Komponen UI mendukung penyesuaian untuk memberikan komponen nuansa dan tampilan yang tepat untuk mencocokkan branding dan gaya aplikasi.
| Luas | Komponen | Deskripsi |
|---|---|---|
| Memanggil | Tata Letak Kisi | Komponen kisi untuk menata Petak Peta Video ke dalam kisi NxN |
| Petak Peta Video | Komponen yang menampilkan streaming video saat tersedia dan komponen statis default saat tidak | |
| Bilah Kontrol | Kontainer untuk mengatur DefaultButtons guna menghubungkan ke tindakan panggilan tertentu seperti mematikan suara atau berbagi layar | |
| VideoGallery | Komponen galeri video turn-key, yang berubah secara dinamis saat peserta ditambahkan | |
| Dialpad | Komponen untuk mendukung input nomor telepon dan nada DTMF | |
| Obrolan | Utas Pesan | Kontainer yang merender pesan obrolan, pesan sistem, dan pesan kustom |
| Kotak Kirim | Komponen input teks dengan tombol kirim diskrit | |
| Kotak Kirim Teks Kaya | Komponen input teks kaya dengan opsi pemformatan dan tombol kirim diskrit | |
| Indikator Status Pesan | Komponen tanda terima baca multi-status untuk menampilkan status pesan terkirim | |
| Indikator pengetikan | Komponen teks untuk merender peserta yang secara aktif mengetik pada utas | |
| Biasa | Item Peserta | Komponen umum untuk merender peserta panggilan atau obrolan termasuk avatar dan nama tampilan |
| Daftar Peserta | Komponen umum untuk merender daftar peserta panggilan atau obrolan termasuk avatar dan nama tampilan |
Menginstal Pustaka Antarmuka Pengguna Web
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:
- Berapa banyak kustomisasi yang diinginkan? Pustaka klien inti Azure Communication tidak memiliki UX dan dirancang agar Anda dapat membuat UX apa pun yang diinginkan. Komponen Pustaka UI menyediakan aset UI dengan biaya penyesuaian yang lebih rendah.
- Platform apa yang ditargetkan? Platform yang berbeda memiliki kemampuan yang berbeda.
Detail tentang ketersediaan fitur di Pustaka UI tersedia di sini, tetapi trade-off utama dirangkum dalam tabel berikutnya.
| Pustaka klien/SDK | Kompleksitas Penerapan | Kemampuan Penyesuaian | Memanggil | Obrolan | Teams Interop |
|---|---|---|---|---|---|
| Komponen Komposit | Kurang Penting | Kurang Penting | ✔ | ✔ | ✔ |
| Komponen Dasar | Medium | Medium | ✔ | ✔ | ✔ |
| Pustaka klien inti | Sangat Penting | Sangat Penting | ✔ | ✔ | ✔ |
Komposit adalah solusi turn-key yang menerapkan skenario komunikasi umum. Anda dapat menambahkan pengalaman panggilan video ke aplikasi Anda. Komposit adalah komponen berurutan tinggi sumber terbuka yang dapat dimanfaatkan pengembang untuk mengurangi waktu pengembangan dan kompleksitas rekayasa.
Gambaran umum komposit
| Komposit | Kasus Penggunaan |
|---|---|
| CallComposite | Pengalaman panggilan yang memungkinkan pengguna memulai atau bergabung dalam panggilan. Di dalam pengalaman, pengguna dapat mengonfigurasi perangkat mereka, berpartisipasi dalam panggilan dengan video, dan melihat peserta lain, termasuk yang mengaktifkan video. Untuk interoperabilitas Teams, CallComposite termasuk fungsionalitas lobi sehingga pengguna dapat menunggu untuk dimasukkan. |
| ChatComposite | menghadirkan ChatComposite pengalaman olahpesan teks real time kepada pengguna. Secara khusus, pengguna dapat mengirim dan menerima pesan obrolan dengan peristiwa dari indikator pengetikan dan tanda terima baca. Selain itu, pengguna juga dapat menerima pesan sistem seperti peserta yang ditambahkan atau dihapus dan perubahan pada judul obrolan. |
Skenario komposit untuk panggilan
Bergabung dengan panggilan video/audio
Pengguna dapat bergabung dalam panggilan menggunakan URL rapat Teams atau mereka dapat menyiapkan Panggilan Azure Communication Services. Pendekatan ini menawarkan pengalaman yang lebih sederhana, sama seperti aplikasi Teams.
Pengalaman pra-panggilan
Sebagai peserta panggilan, Anda dapat memberikan nama dan menyiapkan konfigurasi default untuk perangkat audio dan video. Kemudian Anda siap untuk melompat ke panggilan.
Pengalaman panggilan
Komposit panggilan memberikan pengalaman end-to-end, mengoptimalkan waktu pengembangan, dan berfokus pada tata letak yang bersih.
Pengalaman panggilan menyediakan semua kemampuan ini dalam satu komponen komposit, menyediakan jalur yang jelas tanpa kode kompleks, yang mengarah ke waktu pengembangan yang lebih cepat.
Kualitas dan keamanan
Komposit seluler untuk panggilan diinisialisasi menggunakan token akses Azure Communication Services.
Detail Selengkapnya
Jika Anda memerlukan detail selengkapnya tentang komposit seluler untuk panggilan, lihat kasus penggunaan.
Skenario komposit untuk obrolan
Penting
Fitur Azure Communication Services ini saat ini dalam pratinjau.
API pratinjau dan SDK disediakan tanpa perjanjian tingkat layanan. Kami menyarankan agar Anda tidak menggunakannya untuk beban kerja produksi. Beberapa fitur mungkin tidak didukung, atau mungkin memiliki kemampuan yang dibatasi.
Untuk informasi selengkapnya, tinjau Ketentuan Penggunaan Tambahan untuk Pratinjau Microsoft Azure.
Pengalaman obrolan
Memberikan ChatComposite pengalaman olahpesan teks real time. Dengan mengingat fleksibilitas dan skalabilitas, ChatComposite dapat beradaptasi dengan tata letak atau tampilan yang berbeda dari aplikasi Anda tanpa kompleksitas. Anda juga dapat memilih untuk tidak menampilkan ChatComposite tampilan dan hanya menerima pemberitahuan untuk memenuhi kebutuhan bisnis Anda yang berbeda.
| iOS | Android |
|---|---|
|
|
Kualitas dan keamanan
Mirip CallCompositedengan , ChatComposite juga menggunakan token akses Azure Communication Services. Untuk memastikan hanya pengguna dengan izin yang sesuai yang dapat mengakses obrolan, token pengguna mereka perlu ditambahkan ke utas obrolan yang valid sebelum memulai pengalaman Obrolan.
Detail Selengkapnya
Jika Anda memerlukan detail selengkapnya tentang komposit seluler untuk obrolan, lihat kasus penggunaan.
Artefak UI apa yang terbaik untuk proyek saya?
Persyaratan ini membantu Anda memilih pustaka klien yang tepat:
Berapa banyak kustomisasi yang diinginkan? Pustaka klien inti Azure Communication Services tidak memiliki UX dan dirancang sehingga Anda dapat membangun UX apa pun yang Anda inginkan. Komponen Pustaka UI menyediakan aset UI dengan biaya penyesuaian yang lebih rendah.
Platform apa yang ditargetkan? Platform yang berbeda memiliki kemampuan yang berbeda.
Berikut adalah beberapa trade-off utama:
| Pustaka klien/SDK | Kompleksitas implementasi | Kemampuan kustomisasi | Memanggil | Obrolan | Interoperabilitas Teams |
|---|---|---|---|---|---|
| Komponen Komposit | Kurang Penting | Kurang Penting | ✔ | ✔ | ✔ |
| Pustaka klien inti | Sangat Penting | Sangat Penting | ✔ | ✔ | ✔ |
Untuk informasi selengkapnya tentang ketersediaan fitur di Pustaka UI, lihat Kasus penggunaan Pustaka UI.