Laravel Vue Chat App

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

Detail Kelas

  • 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