Laravel Vue Chat App

Membuat aplikasi chat dengan laravel, vue dan juga pusher sebagai teknologi realtimenya. Kita akan kenalan juga sama laravel echo disini

Update kelas terakhir : 7 tahun yang lalu

cover laravel-vue-chat-app.jpg

Laravel Chat App

Trailer dari kelas membuat aplikasi chat dengan laravel

persiapan pusher laravel

Kita siapin dulu aplikasi pusher yang akan menjadi teknologi realtime pada aplikasi chat ini

model dan migrasi message

Sekarang kita siapkan model dan juga relasi dari message kepada user. Table ini akan menyimpan data-data chat pada public chat ini

component chat

Pindah ke vuejs, kali ini kita buat component chat secara terpisah, ada untuk menangani form, list user dan daftar chatnya

menampilkan chat dari database

Menampilkan chat dari database ke view user melalui komponen vuejs yang sudah dibuat. Untuk datanya kita akan pake modelfactory dibantu dengan aritsan tinker

mengirim chat

Saatnya kita ngirim chat dari component form yang sudah dibuat, dan menampilkan datanya langsung pada daftar chat di bagian atas

memperbaiki ux chat

Ada banyak yang bisa diimprove dari sisi ux (user experience) aplikasi chat kita, lihat yuk apa aja

realtime chat

Yang ditunggu-tunggu! saatnya implementasikan teknologi realtime pada aplikasi chat ini. Menggabungkan laravel echo, event dan juga pusher

user sedang online

Tampilkan daftar user yang sedang online, begitu juga ketika usernya memutuskan untuk offline namanya akan automatis keluar dari daftar chat

menangani error

Bagaimana jika ada error pada saat mengirim chat dari sisi backend, saatnya kita tangani masalah ini

Halaman ini adalah halaman video tutorial programming "Laravel Vue Chat App".

<< Daftar kelas koding lainnya