Teknik

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

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

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

Ada kalanya Anda mungkin ingin merender komponen yang ditulis dalam kerangka kerja frontend yang berbeda dengan aplikasi Anda; misalnya ketika memigrasi proyek antara kerangka kerja frontend atau menggunakan pustaka pihak ketiga (misalnya vuetify) yang belum di-porting ke kerangka kerja pilihan Anda. Dalam kasus ini, sejumlah perpustakaan yang menjembatani tersedia. Contohnya, Anda dapat merender Sudut komponen dalam Bereaksi aplikasi dengan angular2react atau Vue komponen dalam sebuah Ramping proyek dengan adaptor ramping. Untuk tutorial ini, kita akan menggunakan
Veuary
untuk menjembatani dunia React dan Vue.

Prasyarat

Untuk mulai membangun aplikasi obrolan Vue, Anda memerlukan
node.js
diinstal dan ID Aplikasi Sendbird. Jika Anda belum melakukannya, 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 chatting Vue dengan UX yang mirip dengan WhatsApp untuk desktop. The
kode proyek akhir
tersedia di GitHub, dan kami juga menyarankan Anda untuk melihat
demo langsung
.

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

Menyiapkan aplikasi obrolan Vue Anda

Vue memiliki alat bantu baris perintah yang praktis untuk merancangkan aplikasi dengan cepat. Jalankan saja perintah berikut ini di mana pun Anda ingin proyek Anda berjalan.

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

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

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

Menginstal dan mengkonfigurasi Veaury

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

Untuk mengizinkan aplikasi chatting Vue yang baru kita buat untuk mengimpor dan merender komponen React, Anda perlu membuat perubahan kecil pada konfigurasi build. Oleh karena itu, kita perlu memperbarui file vite.config.js di proyek kita untuk menggunakan plugin Veaury.

Setelah perubahan konfigurasi ini, Anda dapat menambahkan komponen React yang Anda inginkan ke direktori bernama react_app. Komponen-komponen React tersebut kemudian dapat diimpor ke dalam berkas .vue dan di-render di dalam komponen Vue standar.

Membuat komponen React di dalam proyek Vue kita

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. Digunakan denganSendbird 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 dioper ke ChatReactComponent dioper dari komponen Vue induk. Memasukkan props di sini adalah cara untuk membuat sisi React berkomunikasi dengan Vue. Cara mendefinisikan dan mengoper properti ini akan dibahas pada 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. Mengimpor Veaury dan komponen obrolan React 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 kita untuk merender header atas. Header mencakup nama pengguna dan jumlah pesan yang belum dibaca. Data ini akan diteruskan kembali dari UIKit pada langkah selanjutnya dalam tutorial ini
  5. Merender komponen React Chat dalam HTML, dengan memasukkan data dan callback yang telah didefinisikan sebelumnya sebagai atribut pada elemen Chat
  6. Terakhir, tambahkan beberapa gaya untuk membuat semuanya terlihat bagus

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

Memberikan 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 header atas aplikasi. Informasi ini dapat diakses melalui SDK Sendbird. Untuk mengakses SDK dari UIKit, Anda dapat menggunakan fungsi yang disebut getSdk. Memanggil fungsi tersebut 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 tersebut kembali ke Vue menggunakan callback yang diteruskan sebagai props (setUnreadMessageCount & setSbUserInfo).

Bilah atas aplikasi sekarang menampilkan nama pengguna dan jumlah pesan yang terlihat. Perhatikan nama pengguna “Bob” dan jumlah pesan yang belum dibaca sebanyak 1 pada gambar di bawah ini.

Kesimpulan

Selamat! Anda sekarang memiliki Sendbird UIKit yang berjalan di aplikasi Vue Anda. Dalam tutorial ini, kita telah membahas tentang bagaimana Anda dapat membuat aplikasi obrolan Vue menggunakan komponen desain yang kaya fitur dan sudah jadi 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 mengoper berbagai jenis properti ke komponen Chat react dan menggunakan properti tersebut untuk mengonfigurasi UIKit dengan cara alternatif, misalnya mengatur warna tema UIKit.

Jika Anda memerlukan bantuan dengan
Obrolan Sendbird
atau aplikasi
UIKit
, silakan lihat
dokumen untuk Obrolan
dan
dokumen untuk UIKit
! Anda akan menemukan panduan tentang cara mengaktifkan dan menjalankan obrolan di aplikasi Anda dengan komponen UI yang sudah jadi. Anda juga dapat menemukan jawabannya di bagian
Komunitas Sendbird
sebuah forum di mana Anda dapat bertanya dan menjawab pertanyaan yang berkaitan dengan semua hal
Sendbird
. Harap jangan ragu untuk hubungi kami jika Anda membutuhkan bantuan – para ahli kami dengan senang hati membantu. Selamat mengobrol! 💻

Categories: Teknik