Membangun aplikasi obrolan Vue: Menggunakan UIKit Sendbird dalam aplikasi Vue.js

Membangun obrolan adalah upaya yang kompleks. Apakah Anda membangun untuk perawatan kesehatan , game , layanan sesuai permintaan , atau industri lainnya, membangun obrolan yang kaya fitur membutuhkan usaha. Penting juga untuk memilih tumpukan teknologi yang tepat; dalam tutorial ini, kita akan menjelajahi cara membuat obrolan dengan Vue.js , kerangka kerja web JavaScript front-end yang populer untuk membuat antarmuka pengguna dan aplikasi kecil. Anda juga akan mempelajari cara menggunakan UIKit Sendbird , kumpulan komponen UI obrolan yang kaya fitur , di dalam aplikasi obrolan Vue Anda.

Ada kalanya Anda mungkin ingin merender komponen yang ditulis dalam kerangka kerja frontend yang berbeda untuk aplikasi Anda; misalnya saat memigrasi proyek antara kerangka kerja frontend atau menggunakan perpustakaan pihak ke-3 (mis. vuetify) yang belum dipindahkan ke kerangka kerja pilihan Anda. Dalam kasus ini, sejumlah pustaka penghubung tersedia. Misalnya, dimungkinkan untuk merender komponen Angular di aplikasi React dengan komponen angular2react atau Vue di proyek Svelte dengan svelte-adapter . Untuk tutorial ini, kita akan menggunakan Veuary untuk menjembatani dunia React dan Vue.

Kami merekomendasikan untuk menonton tutorial video ini tentang cara membuat aplikasi obrolan Vue dengan UIKit Sendbird.

Prasyarat

Untuk membangun aplikasi obrolan Vue Anda, Anda perlu menginstal node.js dan ID Aplikasi Sendbird. Jika belum, Anda dapat menyiapkan akun Sendbird dan membuat aplikasi di dasbor .

Anda dapat menemukan ID Aplikasi Anda di dasbor Sendbird.

Apa yang akan kita bangun: Seperti apa tampilan aplikasi obrolan Vue Anda

Dalam tutorial ini, kita akan membuat aplikasi obrolan Vue dengan UX yang mirip dengan WhatsApp untuk desktop. Kode proyek akhir tersedia di GitHub, dan kami juga menyarankan Anda untuk melihat demo langsungnya .

Proyek kami akan dibangun menggunakan Vue 3 dan aplikasi akan membuat versi React UIKit Sendbird yang berfungsi penuh di dalam aplikasi obrolan Vue utama. Aplikasi Vue akan meneruskan konfigurasi ke UIKit dan UIKit juga akan meneruskan informasi pengguna kembali ke Vue. Komunikasi dua arah ini akan memungkinkan kita untuk menampilkan nama pengguna Sendbird dan jumlah pesan yang belum dibaca di bagian atas aplikasi Vue kita. Hasilnya akan terlihat seperti ini.

Menyiapkan aplikasi obrolan Vue Anda

Vue memiliki alat baris perintah yang berguna untuk merancah aplikasi dengan cepat. Jalankan saja yang berikut di mana pun Anda ingin proyek Anda hidup.

Perintah ini akan memandu Anda melalui opsi saat membuat proyek baru. Pengaturan yang digunakan untuk tutorial ini tercantum di bawah ini.

Untuk memulai aplikasi dalam mode dev, jalankan perintah di bawah ini.

Anda sekarang akan melihat halaman arahan baru yang mengkilap ketika Anda menjalankan dan mengunjungi http://localhost:5173 . Seperti inilah tampilannya:

Instal dan konfigurasikan Veaury

Veaury adalah pustaka yang memungkinkan rendering komponen React di dalam aplikasi Vue. Perlu dicatat bahwa komponen Vue di aplikasi React juga didukung, tetapi berada di luar cakupan tutorial ini. Veaury bekerja dengan Vue 3 dan Vue 2, dan library dapat diinstal dari npm dengan perintah berikut:

Agar aplikasi obrolan Vue kami yang baru dibuat dapat mengimpor dan merender komponen React, Anda perlu melakukan sedikit perubahan pada konfigurasi build. Oleh karena itu, kami perlu memperbarui file vite.config.js di proyek kami untuk menggunakan plugin Veaury.

Setelah perubahan konfigurasi ini, Anda dapat menambahkan komponen React apa pun yang Anda inginkan ke direktori bernama react_app. Komponen React tersebut kemudian dapat diimpor ke dalam file .vue dan dirender di dalam komponen Vue standar.

Membuat komponen React di proyek Vue kami

Pertama, Anda perlu membuat komponen React baru di react_app. Komponen ini bertanggung jawab untuk mengimpor, mengonfigurasi, dan merender UIKit.

Anda tidak perlu melakukan sesuatu yang khusus pada komponen React ini untuk membuatnya bekerja dengan baik dengan Vue. Kode di sini melakukan hal berikut:

1. Mengimpor dependensi Sendbird UIKit
2. Menginisialisasi UIKit dengan id aplikasi dan id pengguna
3. Menggunakan withSendbird HOC untuk akses ke Sendbird SDK. Ini akan memberi kami akses ke informasi pengguna yang diperlukan untuk diteruskan kembali ke aplikasi Vue

Perlu dicatat bahwa props yang diteruskan ke ChatReactComponent diteruskan dari komponen induk Vue. Meneruskan props di sini adalah cara agar sisi React berkomunikasi dengan Vue. Cara mendefinisikan dan meneruskan properti ini dibahas di bagian berikutnya.

Tambahkan UIKit ke halaman

Selanjutnya, tambahkan ChatReactComponent ke aplikasi obrolan Vue Anda. Halaman yang perlu diperbarui adalah views/HomeView.vue. Hapus semua kode yang saat ini ada di views/HomeView.vue dan tambahkan kode di bawah ini.

Kode ini melakukan hal berikut:

1. Impor Veaury dan komponen obrolan Bereaksi baru kami
2. Mengonversi komponen React menjadi komponen Vue menggunakan fungsi applyPureReactInVue dari Veaury
3. Dalam fungsi setup, atur data dan callback untuk diteruskan sebagai props ke komponen React kita
4. Tentukan HTML kami untuk merender header teratas. Header menyertakan nama pengguna dan jumlah pesan yang belum dibaca. Data ini akan diteruskan kembali dari UIKit pada langkah selanjutnya dari tutorial ini
5. Render komponen React Chat di HTML, meneruskan data dan callback yang didefinisikan sebelumnya sebagai atribut pada elemen Chat
6. Terakhir, tambahkan beberapa gaya agar semuanya terlihat bagus

Anda sekarang akan melihat rendering UIKit di browser saat Anda mengunjungi http://localhost:5173 . Seperti inilah tampilannya:

Berikan informasi pengguna ke Vue

Terakhir, info pengguna dan jumlah pesan yang belum dibaca akan diteruskan kembali ke aplikasi obrolan Vue Anda sehingga dapat menampilkan informasi tersebut di bilah tajuk atas aplikasi. Informasi ini diakses melalui Sendbird SDK. Untuk mengakses SDK dari UIKit, Anda dapat menggunakan fungsi berguna yang disebut getSdk. Memanggil fungsi itu seperti yang ditunjukkan di bawah ini akan memberi Anda SDK yang mendasarinya. Anda kemudian dapat mengakses metode yang relevan untuk mendapatkan apa yang dibutuhkan (jumlah pesan yang belum dibaca & info pengguna) dan meneruskan informasi itu kembali ke Vue menggunakan callback yang diteruskan sebagai props (setUnreadMessageCount & setSbUserInfo).

Bilah atas aplikasi sekarang merender nama pengguna dan jumlah pesan yang terlihat. Perhatikan nama pengguna "Bob" dan jumlah pesan yang belum dibaca 1 di tangkapan layar di bawah ini.

Kesimpulan

Selamat! Anda sekarang memiliki Sendbird UIKit yang berjalan di aplikasi Vue Anda. Dalam tutorial ini, kita berbicara tentang bagaimana Anda dapat membuat aplikasi obrolan Vue menggunakan komponen desain siap pakai yang kaya fitur yang disediakan oleh Sendbird UIKit. Sekarang Anda dapat dengan senang hati membuat grup dan mulai mengobrol!

Ingatlah bahwa data mengalir dua arah antara kode Vue dan React; langkah selanjutnya yang masuk akal adalah mencoba mengirimkan berbagai jenis properti ke komponen reaksi Obrolan dan menggunakan properti tersebut untuk mengonfigurasi UIKit dengan cara alternatif, misalnya menyetel warna tema UIKit.

Jika Anda memerlukan bantuan dengan Obrolan Sendbird atau UIKit , silakan lihat dokumen kami untuk Obrolan dan dokumen untuk UIKit ! Anda akan menemukan panduan tentang cara mengaktifkan dan menjalankan chat di aplikasi Anda dengan komponen UI siap pakai yang kaya. Anda juga dapat menemukan jawabannya di Komunitas Sendbird , sebuah forum tempat Anda dapat bertanya dan menjawab pertanyaan yang berkaitan dengan segala hal tentang Sendbird . Harap jangan ragu untuk menghubungi kami jika Anda memerlukan bantuan – pakar kami dengan senang hati membantu. Selamat membangun obrolan! 💻