Teknik

Tur dari Sendbird UIKit untuk React: Komponen & modul penting yang perlu Anda ketahui

Blog author
Michelle Wong Developer Advocate
Share
Tur dari Sendbird UIKit untuk React: Komponen & modul penting yang perlu Anda ketahui

Membangun aplikasi dalam aplikasi
obrolan
adalah upaya yang menarik tetapi kompleks. Apakah Anda sedang membangun untuk
gaming
,
ritel
,
kesehatan digital
atau
sesuai permintaan
, perlu untuk memiliki
UI obrolan yang efisien
untuk web atau aplikasi seluler Anda. Sendbird UIKit membuatnya lebih mudah untuk mengimplementasikan UI obrolan yang intuitif. The Sendbird UIKit untuk React menyediakan sumber daya untuk membangun pengalaman chatting yang fungsional dan menarik dengan komponen UI yang sudah dibangun sebelumnya dari Sendbird SDK. UIKit untuk React berguna karena sangat penting bagi pengembang untuk dapat memilih elemen yang diperlukan untuk membangun obrolan yang kaya fitur dan efisien seperti yang Anda bayangkan.

Di blog ini, kita akan belajar tentang komponen-komponen Sendbird UIKit untuk React, serta masing-masing kasus penggunaannya. Pada akhir blog ini, Anda akan memahami cara mengimplementasikan komponen-komponen ini untuk membuat integrasi kustom Anda sendiri.

UIKit untuk React: Menyiapkan lingkungan

Untuk memulai, buat aplikasi pada dasbor
Dasbor Sendbird
. Di sinilah Anda dapat mengakses segala sesuatu yang diperlukan untuk layanan chatting Anda, termasuk aplikasi, pengguna, pesan, dan saluran Anda. Setelah Anda membuat aplikasi, Anda akan memerlukan App ID untuk menginisialisasi Chat SDK.

Selanjutnya, buat lingkungan proyek baru menggunakan create-react-app. Kemudian tambahkan file .env untuk menyimpan ID Aplikasi, ID pengguna, dan nama panggilan yang dihasilkan dari dasbor Sendbird Anda. Sekarang, instal Sendbird UIKit melalui npm atau yarn:

Setelah UIKit untuk React terinstal, kita ingin mengimplementasikannya dalam aplikasi dengan menggunakan komponen. Yang pertama yang akan kita pelajari adalah komponen App.

Komponen aplikasi

Komponen App adalah kumpulan komponen UI yang menciptakan antarmuka obrolan fungsional. App, atau komponen App, akan merender tampilan yang berisi daftar saluran, percakapan saluran, dan pengaturan saluran, semuanya dalam satu komponen.

Untuk menggunakan ini, impor komponen UIKit SendbirdApp dan stylesheet UIKit di file App.js:

 

Komponen App memerlukan ID aplikasi dan ID pengguna untuk dimasukkan. Kode berikut ini menggambarkan bagaimana Anda akan menggunakan komponen App:

Kemudian, tentukan tinggi dan lebar untuk antarmuka obrolan dalam stylesheet:

Pastikan untuk mengimpor stylesheet ini di file App.js.

Pada titik ini, kita memiliki aplikasi obrolan yang berhasil berjalan di mana Anda dapat membuat saluran baru dan mengirim pesan. Seharusnya terlihat seperti ini:

Aplikasi obrolan yang sukses

Jika Anda ingin menyesuaikan pengalaman chatting Anda, Anda dapat melakukannya dengan menggunakan komponen inti dan modul yang disediakan oleh UIKit. Pertama, mari kita selami komponen inti.

Komponen inti dalam UIKit untuk React

Komponen inti adalah blok bangunan utama UIKit. Komponen inti meliputi SendbirdProvider, sendbirdSelectors, userSendbirdStateContext, dan withSenbird(). Masing-masing menyimpan dan mengoperasikan semua data yang diperlukan untuk menjalankan aplikasi.

Bagaimana cara kerja komponen inti? Mereka mendapatkan data dari instance Chat SDK, terhubung ke server Sendbird, berbicara dengan modul-modul untuk peristiwa yang terjadi dalam tampilan, dan mengkonfigurasi fitur dan lokalisasi. Komponen-komponen ini berfungsi untuk membuat dan mengeksekusi view; namun, mereka tidak menyediakan atau menampilkan UI. Di situlah modul-modul berperan: modul-modul menyediakan tampilan UI untuk komponen inti yang digunakan.

The
SendbirdProvider
adalah komponen inti yang paling penting karena menyediakan konteks dan meneruskan data Chat SDK serta status saat ini ke komponen anak. SendbirdProvider harus berada di tingkat atas sehingga seluruh aplikasi memiliki akses ke data Sendbird.

Dengan SendbirdProvider, kita bisa menggunakan fungsi
useSendbirdStateContext()
untuk mengimplementasikan Sendbird Chat SDK untuk Javascript dalam komponen anak dari SendbirdProvider. Komponen useSendbirdStateContext akan memungkinkan kita untuk mengakses status SendbirdProvider, mengaitkan ke dalam tindakan SDK, dan dapat digunakan dengan sendbirdSelectors untuk mengimplementasikan fungsi seperti mengirim atau memperbarui pesan.

Sebelum UIKit v4, aplikasi
withSendbird()
digunakan untuk meneruskan data antara Chat SDK dan modul, tetapi dengan pembaruan UIKit, kami sarankan Anda menggunakan useSendbirdStateContext() sebagai gantinya.

Terakhir, tombol
sendbirdSelectors
digunakan untuk melakukan operasi data dan memberi Anda akses ke SDK. The
fungsi pemilih utama
termasuk getSdk, getCreateOpenChannel, dan getDeleteMessage.

Penangan

UIKit menyediakan berbagai event handler untuk mengelola aktivitas dan peristiwa yang terjadi di aplikasi klien. Sejak peningkatan dari v3 ke v4 di
SDK Obrolan
, UIKit diimplementasikan
penangan acara saluran
yang dapat diimpor daripada memanggil channel handler dari sdkInstance. Penangan peristiwa saluran termasuk ConnectionHandler, GroupChannelHandler, OpenChannelHandler, dan UserEventHandler. Selanjutnya, SDK menggunakan penangan sesi untuk memperbarui token sesi. Token sesi digunakan untuk mengotentikasi pengguna dengan aman ketika Chat SDK menghubungkan pengguna ke server Sendbird di mana mereka dapat mengirim permintaan data ke sana sebelum token berakhir.

Modul-modul dalam UIKit untuk React

Sekarang setelah kita belajar tentang komponen inti UIKit, penting untuk mempelajari tentang modul dan bagaimana setiap modul bekerja bersama dengan komponen inti. Modul beroperasi sebagai komponen pintar yang menyediakan UI yang dapat disesuaikan. Modul-modul ini berisi penyedia dan komponen UI yang sudah dibangun sebelumnya yang menciptakan tampilan obrolan fungsional.

Delapan modul dalam UIKit adalah:

  1. Daftar saluran
  2. Membuat saluran
  3. Saluran kelompok
  4. Pengaturan saluran grup
  5. Saluran terbuka
  6. Pengaturan saluran terbuka
  7. Pencarian pesan
  8. Edit profil pengguna

Setiap modul memiliki penyedia konteks dan seperangkat komponen UI. Penyedia mengelola data yang diperlukan dari Chat SDK sementara komponen UI merender antarmuka untuk menampilkan tampilan modul. Untuk melewatkan data antara provider dan komponen UI, kita menggunakan hook useContext. Context hooks harus berada di dalam provider untuk memungkinkan setiap komponen UI memiliki akses ke data dari provider. Meskipun ada seperangkat komponen UI default untuk setiap modul, semua komponen UI dapat dikustomisasi dengan mengatur props input dengan komponen kustom.

Daftar Saluran

The
ChannelList
menunjukkan daftar saluran grup tempat pengguna saat ini menjadi anggotanya. Beberapa properti ChannelList termasuk onBeforeCreateChannel, onChannelSelect, dan renderChannelPreview.

Properti onBeforeCreateChannel dan onChannelSelect memungkinkan Anda untuk melakukan tindakan saat pengguna berinteraksi dengan antarmuka pengguna UIKit. Properti renderChannelPreview memungkinkan Anda untuk mengganti UI default dari pratinjau saluran dengan komponen kustom Anda sendiri. Ini dapat digunakan untuk mengatur pratinjau saluran agar nama panggilan pengguna ditampilkan dalam daftar saluran.

Penyedia konteks yang digunakan untuk modul ini adalah
ChannelListProvider
. Penyedia ini mengelola logika dan data yang digunakan dalam tampilan daftar saluran. Jadi, jika aplikasi Anda hanya perlu melihat daftar saluran, Anda dapat menggunakan modul ChannelList untuk menampilkan tampilan daftar saluran dan memiliki modul yang dibungkus di dalam ChannelListProvider, yang akan meneruskan data yang diperlukan ke ChannelList.

Anda juga bisa menggunakan
useChannelListContext
hook untuk mendapatkan akses ke data penyedia. Beberapa properti useChannelListContext adalah inisialisasi, pemuatan, dan currentChannel.

Komponen UI yang membentuk tampilan ChannelList adalah ChannelListUI, ChannelListHeader, dan ChannelPreview. The ChannelListUI menunjukkan layar dasar modul, termasuk tajuk dan pratinjau saluran. Ini termasuk daftar properti yang digunakan seperti renderHeader, renderPlaceHolderError, dan renderPlaceHolderLoading. The ChannelListHeader adalah header dari ChannelListUI yang menampilkan judul dan tombol untuk membuat channel baru. Tiga properti untuk digunakan dengan UI ini adalah renderHeader, renderIconButton, dan allowProfileEdit. The ChannelPreview Komponen UI menampilkan saluran tunggal dalam daftar saluran. Properti untuk ChannelPreview adalah channel, onClick, renderChannelAction, dan isActive.

Berikut ini adalah bagaimana anda dapat mengimplementasikan ChannelList menggunakan ChannelListProvider dan useChannelListContext:

Ini adalah desain default komponen ChannelList:

UI default dari komponen ChannelList

BuatSaluran

The
CreateChannel
digunakan untuk membuat saluran grup baru. CreateChannel memerlukan properti channelUrl untuk dimasukkan ke dalamnya. Properti opsional tambahan termasuk onBeforeCreateChannel, onCreateChannel, dan onCancel. Ketiga properti ini mengeksekusi tindakan tertentu dalam antarmuka pengguna UIKit, memungkinkan Anda untuk meneruskan dan menjalankan serangkaian operasi Anda sendiri.

Sebagai contoh, anda dapat menggunakan onBeforeCreateChannel untuk memicu fungsi yang akan dipanggil saat pengguna mengklik untuk membuat saluran grup dan sebelum menghasilkan saluran baru. Fungsi yang dipanggil, misalnya, dapat mengatur gambar grup untuk saluran yang sedang dibuat. Menggunakan properti onCreateChannel akan memungkinkan anda untuk mengimplementasikan sebuah tindakan tepat setelah saluran dibuat. Anda dapat menggunakan ini untuk membuat pesan sukses ke layar setelah channel anda dibuat. Jika Anda ingin memicu event ketika tombol ‘cancel’ diklik, Anda bisa menggunakan properti onCancel. Anda dapat memilih untuk mengimplementasikan UI kustom Anda sendiri dari sini dan memanggil fungsi untuk merender tampilan yang menanyakan apakah Anda yakin ingin membatalkan pembuatan saluran.

Dua objek konteks yang dapat digunakan untuk membuat saluran grup dan meneruskan data dari penyedia ke komponen UI adalah
CreateChannelProvider
dan
useCreateChannel
hook. CreateChannelProvider memerlukan properti channelUrl untuk dilewatkan. Properti opsional tambahan adalah children, onCreateChannel, onBeforeCreateChannel, dan queries.applicationUserListQuery.

Komponen UI yang menyusun tampilan CreateChannel adalah CreateChannelUI, InviteMembers, dan SelectChannelType. CreateChannelUI dan SelectChannelType digunakan bersama-sama untuk menunjukkan langkah pertama dari modul CreateChannel. InviteMembers menampilkan langkah kedua setelah saluran dibuat.
CreateChannelUI
memiliki properti onCancel dan renderStepOne.
SelectChannelType
merender tampilan di mana pengguna saat ini dapat memilih jenis saluran mana yang akan dibuat.
UndangPengguna
menampilkan tampilan di mana pengguna saat ini dapat mengundang pengguna lain untuk bergabung dengan saluran. Kedua SelectChannelType dan UndangAnggota memiliki properti onCancel.

Kode berikut menunjukkan bagaimana menggunakan modul CreateChannel dengan hook CreateChannelProvider dan useCreateChannel:

Di bawah ini adalah tata letak default dari modul CreateChannel:

Membuat saluran baru

Menambahkan pengguna ke saluran baru

Saluran

The
Saluran
modul menampilkan percakapan saluran grup. Pengguna dapat mengakses saluran grup hanya jika mereka diundang untuk menjadi anggota di saluran tersebut. Modul ini memerlukan properti channelUrl untuk disetel. Properti opsional lainnya termasuk isReactionEnabled, showSearchIcon, dan onBeforeSendUserMessage.

Properti isReactionEnabled dan showSearchIcon mengontrol apakah fitur sedang digunakan dan ditampilkan atau tidak. Properti onBeforeSendUserMessage dapat digunakan untuk mengeksekusi logika khusus di latar belakang ketika pengguna mengklik untuk mengirim pesan, tetapi menyelesaikan operasi sebelum pesan dikirim ke saluran. Oleh karena itu, pada klik pengiriman pesan, ini akan memicu fungsi yang Anda berikan untuk menyelesaikan suatu tindakan, dan kemudian mengirim pesan. Hal ini dapat berguna dalam kasus di mana Anda ingin memeriksa teks pesan yang sedang dikirim dan jika mengandung kata tertentu, maka picu animasi untuk berbunyi saat pesan kemudian dikirim.

Dua objek konteks yang digunakan untuk menyimpan dan mengelola data yang digunakan untuk membangun saluran grup adalah
ChannelProvider
dan
useChannelContext
hook. ChannelProvider memerlukan properti channelUrl dan menyertakan properti tambahan seperti isMessageGroupingEnabled, isReactionEnabled, dan highlightedMessage. Properti opsional pengait konteks useChannelContext termasuk channelUrl, startingPoint, dan onBeforeSendFileMessage.

Komponen UI dalam modul Channel adalah ChannelUI, ChannelHeader, MessageInput, MessageList, FileViewer, FrozenNotification, Message, RemoveMessageModal, TypingIndicator, dan UnreadCount. ChannelUI menampilkan layar dasar modul dan memiliki sejumlah properti seperti renderPlaceholderLoader, renderMessageInput, dan renderTypingIndicator. ChannelHeader adalah header dari komponen ChannelUI yang menunjukkan judul saluran, ikon pencarian pesan, dan ikon informasi saluran. MessageInput adalah komponen di mana pengguna bisa memasukkan pesan atau mengirim pesan file.

Daftar Pesan menampilkan daftar semua pesan dalam saluran grup dan memiliki tiga properti: renderMessage, renderPlaceholderEmpty, dan renderCustomSeperator. FileViewer menampilkan semua pesan yang berisi file gambar atau video dan memiliki dua properti opsional: onCancel dan pesan. FrozenNotification adalah komponen yang menampilkan banner yang memperingatkan pengguna bahwa saluran saat ini dibekukan. Pesan adalah komponen dalam MessageList yang menunjukkan satu pesan dalam saluran. Ini membutuhkan properti pesan dan memiliki properti opsional tambahan seperti hasSeperator, chainTop, dan renderEditInput.
RemoveMessageModal
menampilkan modal yang mengkonfirmasikan pesan yang dipilih akan dihapus dari saluran dan memiliki dua properti opsional: onCancel dan pesan.
MengetikIndikator
menampilkan anggota mana di saluran yang sedang aktif mengetik pesan. Dan terakhir, UnreadCount menampilkan berapa banyak pesan yang belum dibaca dalam sebuah saluran. Properti dari UnreadCount adalah count, time, dan onClick.

Kode berikut ini adalah cara mengimplementasikan modul Channel menggunakan ChannelProvider dan useChannelContext:

Ini adalah tata letak default komponen Channel:

Tata letak komponen saluran

Pengaturan Saluran

The
ChannelSettings
menampilkan menu informasi saluran grup dan opsi pengaturan. Anggota dapat memeriksa daftar anggota, mengundang pengguna ke saluran, dan meninggalkan saluran. Jika pengguna adalah operator saluran, maka mereka akan memiliki opsi tambahan yang tersedia bagi mereka (dalam pengaturan), seperti dapat menambah atau menghapus operator, membisukan atau melarang anggota, melihat daftar pengguna yang dibisukan dan dilarang, dan meninggalkan atau membekukan saluran.

ChannelSettings memerlukan properti channelUrl dan memiliki properti opsional seperti onCloseClick, onChannelModified, dan renderLeaveChannel. Properti onCloseClick dan onChannelModified dipicu oleh peristiwa yang ditembakkan dari UI itu sendiri dan mengeksekusi logika kustom yang Anda masukkan. Anda dapat menggunakan onCloseClick jika pengguna mengklik tombol untuk menutup bar pengaturan. Anda dapat mengoper fungsi di mana Anda ingin memodifikasi UI untuk tidak menampilkan komponen pengaturan. Jika Anda ingin memunculkan event setelah pengaturan diubah, Anda dapat membuat pesan sukses ke layar dengan memanfaatkan properti onChannelModified. Ketika menggunakan ChannelSettings, anda mungkin ingin mengubah desain tombol ‘tinggalkan saluran’. Anda dapat melakukannya dengan menggunakan properti renderLeaveChannel yang dengannya Anda dapat meneruskan UI kustom Anda sendiri ke modul pengaturan.

Dua objek konteks untuk membangun menu pengaturan saluran untuk modul ini adalah ChannelSettingsProvider dan useChannelSettingsContext. The PenyediaPengaturan Saluran memerlukan channelUrl untuk dimasukkan. Beberapa pilihan lain untuk penyedia ini adalah onCloseClick, onBeforeUpdateChannel dan invalidChannel. The
menggunakanKonteksPengaturanSaluran
memiliki beberapa properti yang dapat digunakan, seperti onCloseClick, onChannelModified, dan onBeforeUpdateChannel.

Kumpulan komponen UI ChannelSettings yang menyusun tampilan pengaturan saluran grup adalah ChannelSettingsUI, ModerationPanel, UserPanel, ChannelProfile, EditDetailsModal, LeaveChannel, dan UserListItem. ChannelSettingsUI menampilkan tampilan yang mencakup tampilan profil saluran, tampilan menu moderasi, dan tombol tinggalkan saluran. Komponen ini memiliki empat properti opsional: renderPlaceHolderError, renderChannelProfile, renderModerationPanel, dan renderLeaveChannel. The ModerationPanel membuat tampilan menu pengaturan untuk operator saluran. Ini termasuk daftar operator, anggota, pengguna yang dibisukan dan dilarang, tombol sakelar saluran beku, dan opsi untuk meninggalkan saluran. The UserPanel Komponen membuat tampilan menu pengaturan untuk anggota saluran yang mencakup daftar anggota, pilihan untuk mengundang pengguna lain ke saluran, dan pilihan untuk meninggalkan saluran. The
ChannelProfile
membuat tampilan profil saluran termasuk judul saluran, gambar, dan tombol edit yang memungkinkan pengguna untuk mengubah informasi saluran.
EditDetailModal
menampilkan modal di mana pengguna dapat mengedit nama saluran dan gambar profil. Ini memiliki dua properti opsional yang bisa digunakan: onSubmit dan onCancel. The Tinggalkan Saluran modal ditampilkan ketika pengguna mengklik untuk meninggalkan saluran di menu pengaturan dan meminta pengguna untuk mengkonfirmasi tindakan ini. LeaveChannel memiliki properti onSubmit dan onCancel yang dapat digunakan dengannya. The UserListItem menampilkan pengguna individual dalam daftar pengguna. Komponen ini memerlukan properti pengguna untuk ditetapkan dan memiliki tiga properti opsional: currentUser, className, dan action.

Berikut ini adalah bagaimana anda mengimplementasikan modul ChannelSettings menggunakan ChannelSettingsProvider dan useChannelSettingsContext:

Ini adalah UI default ChannelSetting untuk non-operator:

UI pengaturan saluran default

Ini adalah pengaturan saluran yang akan ditampilkan untuk operator saluran:

UI pengaturan saluran untuk operator saluran

OpenChannel

Saluran terbuka adalah saluran publik yang dapat menangani sejumlah besar pengguna yang berinteraksi dalam obrolan. The
OpenChannel
membutuhkan properti channelUrl dan memiliki berbagai properti opsional seperti children, isMessageGroupingEnabled, messageLimit, dan renderUserProfile.

Properti children menunjukkan komponen anak dari OpenChannel, yang merupakan data yang disediakan oleh OpenChannelProvider. Properti isMessageGroupingEnabled memeriksa apakah fitur tersebut diaktifkan sehingga mengetahui cara menampilkan UI. Jika pengelompokan pesan diaktifkan, setiap pesan yang dikirim dalam satu menit akan dikelompokkan ke dalam satu pesan. Properti messageLimit menyediakan jumlah maksimum pesan yang akan disimpan dalam komponen OpenChannelMessageList dari saluran. Jika Anda ingin menyesuaikan pratinjau profil saat mengklik avatar pengguna, Anda dapat memasukkan komponen UI Anda sendiri dengan menggunakan properti renderUserProfile untuk mengganti desain default.

Objek konteks yang dapat digunakan untuk modul OpenChannel untuk menyimpan dan menangani data adalah OpenChannelProvider dan hook useOpenChannel. The OpenChannelProvider memerlukan properti channelUrl untuk disetel. Beberapa properti opsional termasuk isMessageGroupingEnabled, messageLimit, dan onChatHeaderActionClick. The
gunakanOpenChannelContext
memiliki sejumlah properti yang dapat digunakan, seperti renderUserProfile, currentOpenChannel, dan allMessages.

Kumpulan komponen UI yang membentuk modul OpenChannel adalah OpenChannelUI, OpenChannelHeader, OpenChannelInput, OpenChannelMessageList, dan OpenChannelMessage. OpenChannelUI menampilkan layar dasar modul dan tampilan header, pesan, dan daftar pesan dalam saluran terbuka. OpenChannelUI memiliki daftar properti opsional seperti renderMessage, renderHeader, dan renderInput.
OpenChannelHeader
membuat judul saluran dan ikon informasi.
OpenChannelInput
adalah tempat pengguna dapat mengirim pesan atau file pesan seperti gambar, video, atau dokumen. The DaftarPesanSaluranTerbuka menampilkan daftar semua pesan dalam saluran terbuka. Ini memiliki dua properti opsional: renderMessage dan renderPlaceHolderEmptyList. OpenChannelMessage menunjukkan pesan individual dalam saluran. Komponen ini memerlukan properti pesan dan memiliki sejumlah properti opsional seperti hasSeperator, chainTop, dan editDisabled.

Di bawah ini adalah cara menggunakan modul OpenChannel dengan OpenChannelProvider dan useOpenChannelContext:

Inilah yang terlihat seperti desain default OpenChannel:

UI default dari OpenChannel

OpenChannelSettings

The
OpenChannelSettings
Modul ini menampilkan menu pengaturan seperti menyediakan nama saluran, gambar saluran, URL aplikasi, dan daftar peserta. Jika pengguna saat ini adalah operator, mereka memiliki pengaturan tambahan seperti menambahkan atau menghapus operasi, melihat daftar pengguna yang dibisukan dan dilarang, dapat membisukan atau melarang peserta, dan opsi untuk menghapus saluran.

OpenChannelSettings memerlukan properti channelUrl untuk dilewatkan. Beberapa properti lain yang disediakan adalah onChannelModified, onDeleteChannel, dan onCloseClick. Properti ini akan menjalankan serangkaian operasi saat pengguna berinteraksi dengan atribut tertentu di UI. Dalam pengaturan saluran terbuka, dengan menggunakan onCloseClick, anda dapat mengatur status bilah pengaturan untuk ditutup dan menghapus komponen pengaturan dari tampilan obrolan. Ide yang sama berlaku ketika menggunakan onChannelModified dan onDeleteChannel, di mana jika pengguna mengklik untuk menyimpan pengeditan yang telah mereka buat atau jika mereka mengklik tombol untuk menghapus saluran, anda dapat memodifikasi UI di aplikasi anda untuk memiliki komponen khusus untuk muncul di layar.

Dua objek konteks yang digunakan untuk membangun menu pengaturan saluran fungsional adalah OpenChannelSettingsProvider dan hook useOpenChannelSettingsContext. The OpenChannelSettingsProvider membutuhkan channelUrl untuk dilewatkan dan termasuk properti tambahan seperti onBeforeUpdateChannel, disableUserProfile, dan renderUserProfile. The
gunakanKonteksPengaturanSaluranTerbuka
memiliki daftar properti seperti onDeleteChannel, onChanelModified, dan setChannel.

Komponen
Komponen UI
yang menyusun modul OpenChannelSetting secara keseluruhan adalah OpenChannelSettingsUI, OperatorUI, ParticipantUI, OpenChannelProfile, dan EditDetailsModal.
OpenChannelSettingsUI
menampilkan layar dasar modul yang berisi OperatorUI dan ParticipantUI. Dua properti opsional untuk OpenChannelSettingsUI adalah renderOperatorUI dan renderParticipantList.
OperatorUI
menunjukkan menu pengaturan untuk operator saluran dan memiliki properti opsional renderChannelProfile.
ParticipantUI
menampilkan daftar peserta dalam saluran terbuka.
OpenChannelProfile
membuat tampilan profil saluran yang menampilkan judul dan gambar saluran.
EditDetailModal
muncul ketika pengguna ingin mengedit nama saluran dan gambar profil. Ini memiliki properti onCancel yang dapat dipicu ketika tombol batal diklik.

Kode berikut ini adalah bagaimana memanfaatkan modul OpenChannelSettings dengan OpenChannelSettingsProvider dan useOpenChannelSettingsContext:

Ini adalah apa yang OpenChannelSettings ditampilkan sebagai:

UI default pengaturan saluran

Pencarian Pesan

The
Pencarian Pesan
modul memungkinkan pengguna untuk mencari pesan dalam saluran tempat mereka menjadi anggota. Properti channelUrl harus ditetapkan untuk Pencarian Pesan. Tambahan opsional
properti
tersedia untuk digunakan seperti onResultLoaded, onResultClick, dan renderPlaceholderEmptyList.

Saat menggunakan modul MessageSearch, Anda mungkin ingin menampilkan semua hasil pencarian di jendela UI terpisah yang ditampilkan sebagai lapisan pop up di atas obrolan. Anda dapat melakukannya dengan menggunakan properti onResultLoaded di mana sebuah fungsi dipanggil setelah hasilnya diterima. Dengan menggunakan onResultClick, Anda dapat menjalankan logika khusus setelah pengguna memilih hasil pencarian. Properti renderPlaceholderEmptyList memungkinkan Anda membuat UI yang disesuaikan untuk placeholder saat daftar pencarian kembali tanpa hasil. Jadi, apabila daftar pencarian tidak memiliki apa pun untuk dicantumkan, Anda bisa memiliki notifikasi yang muncul.

Untuk MessageSearch, Anda dapat menggunakan MessageSearchProvider dan hook useMessageSearch untuk menyimpan dan mengelola data yang digunakan untuk membangun UI pencarian pesan. PenyediaPencarianPesan memerlukan channelUrl untuk ditentukan dan memiliki properti opsional tambahan seperti onResultClick, messageSearchQuery, dan onResultLoaded. The
useMessageSearchContext
memiliki sejumlah properti opsional seperti onResultLoaded, requestString, dan selectedMessageId.

The
MessageSearchUI
adalah satu-satunya komponen UI dalam modul MessageSearch dan menampilkan tampilan hasil pencarian.

Berikut adalah cara Anda mengimplementasikan Pencarian Pesan menggunakan Penyedia Pencarian Pesan dan useMessageSearchContext:

UI default modul MessageSearch terlihat seperti ini:

UI default dari Pencarian Pesan

EditUserProfil

The
EditUserProfile
memungkinkan pengguna saat ini untuk membuat perubahan pada profil mereka. Dengan mengklik avatar mereka sendiri, jendela pop-up dengan informasi profil mereka akan muncul. Di sini, pengguna memiliki opsi untuk mengedit gambar profil mereka, nama panggilan, dan dapat mengubah tema menjadi mode terang atau gelap.

EditUserProfile memiliki 4 opsional
opsional
yang mencakup children, onCancel, onThemeChange, dan onEditProfile. Properti children digunakan untuk melihat komponen child pada EditUserProfile yang disediakan EditUserProfileProvider kepada kita. onCancel digunakan untuk menjalankan operasi ketika UI dipicu dari pengguna yang mengklik untuk membatalkan pengeditan yang telah mereka buat. Jika Anda ingin menambahkan gaya tambahan berdasarkan apakah obrolan dalam mode terang atau gelap, Anda dapat menggunakan onThemeChange untuk memanggil fungsi yang mengimplementasikan CSS kustom ketika pengguna mengklik untuk mengubah tema. Terakhir, onEditProfile memungkinkan Anda untuk mengimplementasikan serangkaian tindakan setelah pengguna memperbarui profil mereka.

UIKit menyediakan
EditUserProfileProvider
dan
useEditUserProfileProviderContext
hook sebagai objek konteks untuk modul EditUserProfile. Kedua hal ini bisa menggunakan properti opsional yang sama dengan EditUserProfile: children, onCancel, onThemeChange dan onEditProfile.

Satu-satunya komponen UI dalam modul EditUserProfile adalah
EditUserProfileUI
yang merender tampilan profil pengguna.

Desain default untuk EditUserProfile akan terlihat seperti ini:

UI default untuk mengedit profil pengguna

Kesimpulan & langkah selanjutnya

Kami telah mengulas secara detail komponen dan modul inti yang disediakan Sendbird UIKit for React untuk kita. Dengan landasan yang kuat ini, sekarang kita akan dapat memutuskan komponen dan modul mana yang diperlukan untuk mendukung kasus penggunaan yang berbeda. Sebagai contoh, lihat blog tentang bagaimana membangun klon WhatsApp messenger dengan Sendbird UIKit untuk React. Di blog ini, Anda akan memahami cara membangun pengalaman chatting seperti WhatsApp kustom Anda sendiri menggunakan komponen dan modul inti yang kita bahas di seluruh posting blog ini.

Untuk informasi lebih lanjut, silakan periksa
dokumen
atau jelajahi kekayaan tutorial
tutorial UIKit
di
porta pengembang kami
l. Jika Anda memerlukan bantuan dengan
Sendbird UIKit
, lihat
forum komunitas
atau
hubungi kami
. Para ahli kami selalu siap membantu!

Selamat membangun obrolan! ✨

 

Categories: Teknik