Teknik

Cara membangun klon WhatsApp messenger di React dengan Sendbird UIKit

Blog author
Michelle Wong Developer Advocate
Share
Cara membangun klon WhatsApp messenger di React dengan Sendbird UIKit

Dengan lebih dari
2 miliar pengguna
dan
100 miliar pesan
yang dipertukarkan setiap hari, WhatsApp adalah aplikasi
aplikasi perpesanan paling populer
di dunia. Meskipun kemudahan penggunaannya untuk pengiriman pesan dari pengguna ke pengguna dan kemampuan untuk melakukan percakapan dengan bisnis telah berkontribusi besar terhadap popularitasnya, WhatApp baru-baru ini
menghadapi cibiran
karena meningkatnya jumlah bisnis yang mengirimi pengguna spam dengan pesan promosi.

Merek dapat menghindari masalah ini dengan membangun
obrolan dalam aplikasi
. Obrolan dalam aplikasi yang kaya konteks berarti bahwa pembaruan, berita, dan pengumuman penting perusahaan tidak akan hilang dalam kotak masuk pesan yang dipenuhi spam. Obrolan dalam aplikasi juga memberikan pengalaman perpesanan yang nyata sekaligus memberikan kontrol yang bertanggung jawab kepada merek atas data pengguna. Hal ini penting karena pesan untuk bisnis bisa menjadi bagian penting dari fondasi di mana merek dibangun. Memang, seorang juru bicara Meta
baru-baru ini berkomentar
bahwa “Pesan adalah cara baru untuk menyelesaikan bisnis, lebih baik daripada email atau panggilan telepon.”

Oleh karena itu, di blog ini, kita akan mencari tahu bagaimana cara membangun klon WhatsApp messenger di React. Untuk proyek ini, kita akan menggunakan Sendbird UIKit untuk React. Sendbird UIKit memungkinkan pengembang untuk membangun pengalaman obrolan yang disesuaikan dengan komponen UI yang sangat dapat disesuaikan. Dalam blog ini, kita akan memahami bagaimana komponen yang disediakan oleh UIKit membentuk setiap aspek integrasi kustom kami untuk mencapai tujuan kami – membangun klon messenger WhatsApp di React.

Pada akhir blog ini, inilah yang akan Anda bangun untuk desktop:

Klon messenger WhatsApp untuk desktop

Dan ini untuk seluler:

Klon messenger WhatsApp untuk seluler

Memulai dengan klon messenger WhatsApp Anda

Untuk memulai, buat aplikasi di dasbor
Sendbird di dasbor
. Di sini, Anda dapat mengakses segala sesuatu yang disediakan dalam layanan obrolan Anda. Setelah aplikasi dibuat, Anda perlu menyimpan ID Aplikasi yang dihasilkan untuk menginisialisasi Chat SDK dalam aplikasi react Anda.

Buat aplikasi React dan instal Sendbird UIKit untuk React dengan npm atau yarn:

Setelah UIKit terinstal, kita dapat mengimpor komponen yang diperlukan untuk aplikasi kita dari UIKit.

Komponen & modul untuk klon messenger WhatsApp di React

Untuk memulai, kita akan menggunakan SendbirdProvider sebagai pembungkus umum untuk beberapa modul yang akan kita sertakan dalam aplikasi kita.

Untuk contoh kita, kita akan menggunakan modul ChannelList, Channel, dan ChannelSettings. Dengan ketiga modul ini, kita akan membuat tampilan seluler dan tampilan desktop. Tampilan seluler akan merender daftar saluran atau kedua percakapan saluran dan menu pengaturan secara bersamaan. Untuk tampilan desktop, kita akan memiliki daftar saluran dan percakapan saluran secara berdampingan.

Pertama, kita akan mengimpor SendbirdProvider dan stylesheet UIKit di file App.js:

Catatan: Di sini kita mengimpor SendbirdProvider dan merujuknya dalam aplikasi kita sebagai SBProvider. Anda bisa memilih, apa yang ingin Anda rujuk sebagai apa dalam aplikasi Anda sendiri.

Kemudian, terapkan CSS berikut ini ke stylesheet kita, yang akan berada di file styles.css:

Sekarang, kita ingin aplikasi bekerja pada tampilan desktop serta tampilan seluler. Jadi, di dalam komponen penyedia kita, kita harus memeriksa ukuran layar jendela. Jika ukurannya sebesar layar ponsel, maka akan merender tampilan seluler kita. Jika berada di atas jumlah piksel layar ponsel pada umumnya, maka akan merender tampilan desktop. Oleh karena itu, kita akan membuat dua komponen dan menamainya MobileView dan DesktopView. Kedua komponen ini akan berisi modul-modul kita.

Setelah langkah-langkah tersebut selesai, file App.js akan terlihat seperti ini:


Catatan

: Di dasbor, jika Anda mengeluarkan token akses kepada pengguna, Anda harus meneruskan variabel accessToken ke dalam SBProvider seperti yang terlihat pada contoh kode di atas.

Tampilan desktop

Tampilan desktop adalah tata letak Sendbird default dengan daftar saluran di sisi kiri dan percakapan di sisi kanan. Komponen DesktopView kita mengembalikan sebuah div dengan className “sendbird-app__wrap”. ClassName ini sudah ditata oleh desain default Sendbird yang menampilkan daftar saluran di sebelah jendela percakapan.

Kemudian, kita harus mengatur tinggi div sendbird-app__wrap menjadi 100vh, yang merupakan ukuran seluruh layar jendela. Di dalam div ini, kita akan menempatkan komponen daftar saluran, percakapan saluran, dan pengaturan saluran.

Impor daftar saluran, saluran, dan modul pengaturan saluran. Mereka akan disebut sebagai SBChannelList, SBConversation, dan SBChannelSettings:

Kita akan menambahkan div di sekeliling setiap komponen dan dengan menggunakan classNames berikut, ini akan menerapkan styling UIKit default ke komponen kita. Berikut ini adalah nama kelas untuk masing-masing komponen:

  1. Untuk daftar saluran, className div adalah “sendbird-app__channellist-wrap”
  2. Untuk saluran percakapan, className div adalah “sendbird-app__conversation-wrap”
  3. Untuk channel pengaturan, className div adalah “sendbird-app__settingspanel-wrap”

Dalam komponen daftar saluran, kita akan menggunakan properti onChannelSelect untuk mengatur saluran yang diklik dari daftar saluran. Percakapan saluran akan meneruskan channelUrl dan menggunakan onChatHeaderActionClick sehingga kita dapat mendengarkan ketika pengguna ingin membuka bar pengaturan. Untuk pengaturan saluran, masukkan properti channelUrl dan gunakan onCloseClick untuk menutup tampilan bilah pengaturan. Silakan lihat contoh kode di bagian Customizations di bawah ini untuk melihat seperti apa tampilannya.

Tampilan seluler

Tampilan perangkat seluler akan memiliki komponen daftar saluran atau komponen percakapan saluran yang ditampilkan ke layar. Jika pengguna berada di daftar saluran dan mengklik ke dalam percakapan, jendela percakapan akan ditampilkan. Jika pengguna mengklik untuk beralih dari percakapan ke daftar saluran, daftar saluran akan ditampilkan ke layar.

Untuk tampilan seluler, kita akan mengembalikan div dengan className “mobile-view__wrap” dan di dalamnya, tempatkan kondisi di mana jika saluran saat ini tidak disetel, maka itu akan mengembalikan komponen daftar saluran. Jika tidak, maka akan mengembalikan jendela percakapan saluran dan komponen pengaturan. Komponen pengaturan hanya ditampilkan jika pengguna mengklik tombol di jendela percakapan untuk membuka menu pengaturan.

Dalam stylesheet, atur elemen dengan className “mobile-view__wrap” dan tinggi “sendbird-app__conversation-wrap” menjadi 100vh sehingga memenuhi seluruh layar jendela.

Kita akan menggunakan properti yang sama untuk setiap komponen seperti yang kita lakukan sebelumnya untuk DesktopView. Untuk daftar saluran, gunakan properti onChannelSelect serta disableAutoSelect. Properti disableAutoSelect digunakan agar daftar saluran tidak secara otomatis merender saluran pertama dalam daftar.

Tampilan desktop menampilkan daftar saluran dan percakapan saluran secara berdampingan. Namun, untuk tampilan seluler, kita hanya melihat daftar saluran atau percakapan saluran sehingga pemilihan otomatis harus dimatikan. Jika anda tidak menyertakan disableAutoSelect, anda akan menemukan bahwa tampilan akan secara konstan merender saluran pertama dalam jendela percakapan dan tidak akan mengizinkan anda untuk kembali ke daftar saluran karena secara konstan merender saluran tersebut. Oleh karena itu, properti disableAutoSelect digunakan untuk memilih saluran yang ingin anda lihat di jendela percakapan dan beralih dari melihat daftar saluran ke percakapan.

Selanjutnya, di atas komponen SBConversation, kita ingin menambahkan tombol kembali. Tombol kembali akan ditampilkan dalam percakapan saluran dan kembali untuk melihat daftar saluran kami. Komponen percakapan akan meneruskan channelUrl dan menggunakan onChatHeaderActionClick. OnChatHeaderActionClick akan mengaktifkan bilah pengaturan untuk dibuka. Komponen SBChannelSettings akan menggunakan properti channelUrl dan onCloseClick untuk menutup menu pengaturan.

Kustomisasi

Kami dapat mulai menambahkan kustomisasi untuk memberikan chat Anda lebih banyak gaya seperti Whatsapp. Di DesktopView dan MobileView, kita akan membuat fungsi yang akan menyembunyikan bar pengaturan dan fungsi yang akan me-render bar pengaturan.

Untuk menyembunyikan bilah pengaturan, di dalam fungsi, kita akan mengambil elemen dengan className “sendbird-app__conversation-wrap” dan mengatur margin kanannya menjadi 0px. Fungsi ini akan dipicu di SBChannelSettings menggunakan properti onCloseClick. Untuk membuka bilah pengaturan, dalam komponen Channel di dalam properti onChatHeaderActionClick, ia akan memanggil renderSettingsBar di mana ia mengambil elemen dengan className “sendbird-app__conversation-wrap” dan mengatur margin kanan ke 318px.

Jadi, membuka pengaturan akan mengubah tata letak jendela percakapan sehingga ada ruang di sisi kanan halaman untuk menu yang ada. Kemudian, apabila menu pengaturan diklik untuk menutup, jendela percakapan akan meluas ke tempat bar pengaturan sebelumnya.

Agar menu pengaturan muncul, kita ingin menambahkan beberapa CSS untuk memposisikannya dengan benar dalam tampilan jendela:

Dari sini, Anda dapat mengubah kustomisasi CSS apa pun untuk menampilkan bagaimana Anda ingin menu pengaturan diposisikan.

Dengan implementasi ini, MobileView akan mengembalikan ini:

Dan DesktopView mengembalikan ini:

colorSet

Berikutnya, kita ingin menggunakan
colorSet
di SendbirdProvider untuk menentukan warna yang membentuk tema UIKit. Setelah kita mendefinisikan colorSet kita, kita harus memastikan untuk meneruskannya ke komponen SendbirdProvider.

Untuk contoh kita, kita akan menetapkan variabel –sendbird-light-primary-100 menjadi hijau muda. Warna ini diterapkan dalam daftar saluran sebagai latar belakang saluran yang dipilih, warna latar belakang wadah untuk reaksi emoji, dan warna latar belakang ketika pengguna saat ini mengedit pesan mereka sendiri. Untuk contoh kita, kita bisa mengubah warna untuk mencocokkan pesan keluar kita ke warna hijau yang lebih terang.

Selanjutnya, kita ingin mendefinisikan –sendbird-light-primary-300 menjadi hijau. Variabel ini digunakan pada warna latar belakang pesan keluar, pada tombol buat saluran baru dalam daftar saluran, serta pada ikon-ikon seperti ikon pengaturan dalam percakapan saluran dan semua ikon dalam menu pengaturan.

Kemudian, kita akan menetapkan –sendbird-light-primary-400 menjadi warna hijau yang sedikit lebih gelap. Elemen-elemen yang menggunakan –sendbird-light-primary-400 termasuk latar belakang untuk pada hover pesan keluar, pada hover tombol simpan ketika anda ingin mengedit pesan anda sendiri, dan pada hover tombol buat untuk membuat saluran baru.

Variabel colorSet yang penting untuk diperhatikan adalah -sendbird-light-background-50, yang dipanggil untuk warna latar belakang dari setiap komponen. Warna default saat ini adalah putih. Alih-alih mengubah variabel ini untuk memiliki satu warna latar belakang yang seragam atau membiarkan warna latar belakang seluruh aplikasi putih, kita akan menerapkan CSS untuk mengubah warna latar belakang jendela percakapan menjadi krem muda. Kami menganjurkan Anda untuk memeriksa
daftar variabel colorSet
.

Fungsi App akan terlihat seperti ini sekarang:

Kustomisasi saluran

Untuk beberapa sentuhan akhir, kita akan menambahkan CSS. Untuk pesan masuk, kami ingin menghapus ikon gambar profil di samping nama pengguna. Setelah kita menghapus gambar profil pengguna, kita ingin menghapus styling min-width yang diterapkan pada gambar profil pengguna sehingga tidak ada ruang kosong di mana avatar sebelumnya berada.

Kustomisasi daftar saluran

Dalam header daftar saluran, kita ingin menghapus nama panggilan dan ID pengguna saat ini. Alih-alih menggunakan CSS untuk mencapai tujuan ini, Anda dapat menggunakan komponen UI ChannelList, ChannelListHeader, untuk menyesuaikan desain spesifik Anda sendiri untuk mengganti tata letak default.

Untuk komponen pratinjau saluran, kita akan mengatur tampilan ke none pada jumlah anggota yang ditampilkan di samping nama saluran grup. Pilihan lain untuk mendesain UI kustom Anda untuk pratinjau saluran adalah dengan memanfaatkan properti renderChannelPreview ChannelList yang akan menggantikan header Sendbird default dengan komponen kustom Anda sendiri. Jika Anda ingin melihat kodenya, silakan lihat
lembar gaya CSS lengkap
!

Ini adalah hasil akhir apabila pada desktop:

Klon messenger WhatsApp untuk desktop

Dan seperti inilah tampilannya pada perangkat seluler:

Klon messenger WhatsApp untuk seluler

Kesimpulan

Selamat! Anda sekarang telah membuat klon WhatsApp messenger di React. Anda memiliki implementasi perpesanan bergaya WhatsApp fungsional yang terdiri dari komponen inti dan modul dari Sendbird UIKit. Dari sini, Anda akan dapat membangun pengalaman obrolan Anda dengan elemen-elemen penting yang sesuai dengan kebutuhan aplikasi Anda.

Silakan lihat repositori
Repositori GitHub ini
untuk gambaran umum tentang apa yang telah kami lalui. Untuk informasi lebih lanjut, Anda juga bisa melihat
dokumen
atau jelajahi kekayaan
UIKit
di
porta pengembang kami
l. Lihat forum komunitas atau hubungi kami jika Anda memerlukan bantuan dengan Sendbird UIKit. Para ahli kami selalu siap membantu!

Selamat membangun klon messenger WhatsApp Anda! 💻

Categories: Teknik