Bagikan melalui


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.

Animasi Gif menunjukkan pengalaman pra-rapat dan pengalaman bergabung di Android.

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.

Cuplikan layar memperlihatkan pengalaman pra-rapat, halaman dengan pesan untuk peserta.

Pengalaman panggilan

Komposit panggilan memberikan pengalaman end-to-end, mengoptimalkan waktu pengembangan, dan berfokus pada tata letak yang bersih.

Cuplikan layar memperlihatkan pengalaman rapat, dengan ikon atau video peserta.

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
Animasi Gif menunjukkan pengalaman obrolan di iOS. Animasi Gif menunjukkan pengalaman obrolan di 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.

Masalah umum