Membuat Chat Group dengan Vue 3 dan Firebase

Vue adalah framework javascript yang memudahkan developer untuk membangun website interaktif lebih mudah dan Firebase adalah layanan cloud yang menyediakan banyak fitur backend tanpa perlu ribet setup. Di kelas ini kita akan menggabungkan dua teknologi tersebut untuk membuat chatgroup dengan fitur authentication dan real-time database firestore.

INTERMEDIATE27 penilaian107 peserta

Tentang Kelas

Vue adalah framework javascript yang memudahkan developer untuk membangun website interaktif lebih mudah dan Firebase adalah layanan cloud yang menyediakan banyak fitur backend tanpa perlu ribet setup. Di kelas ini kita akan menggabungkan dua teknologi tersebut untuk membuat chatgroup dengan fitur authentication dan real-time database firestore.

Target dan Sasaran Peserta

  • Untuk peserta yang ingin mempelajari fitur Vue dan mendalami
  • Untuk peserta yang ingin mempelajari layanan Firebase
  • Mampu membuat aplikasi Vue dan Firebase

Silabus

  • Modul 1: Persiapan Project Vue
  • Modul 2: Mengintegrasikan Firebase dengan Vue
  • Modul 3: Membuat Chatgroup dengan Vue dan Firebase

Metode Ajar

  • Online Self-paced Learning

    1. Total belajar adalah selama 2 jam 46 menit
    2. Siswa dapat menentukan sendiri waktu belajarnya
  • Fasilitas Pengajaran

    1. Materi elektronik: Materi disediakan berupa video
    2. Forum tanya jawab: Forum digunakan apabila siswa mendapatkan kendala saat belajar, dan akan dibalas oleh tim support CodePolitan
    3. Grup telegram: Berisi member CodePolitan (khusus pembelian membership)
  • Peralatan Belajar Siswa

  • Siswa wajib memiliki akses internet melalui komputer yang menggunakan Windows/Mac/Linux

  1. Spesifikasi minimal komputer milik siswa:
  2. Sistem operasi : Windows, Linux, atau MacOS.
  3. Prosesor : Intel Dual Core (Rekomendasi Core i3 ke atas).
  4. RAM : 1GB (Rekomendasi 2GB).
  5. Resolusi layar : 1366 x 768 (Rekomendasi Full HD 1920 x 1080)
  • Software:
    1. Visual Studio Code sebagai text editor
    2. Akun Firebase
    3. NPM sebagai Package Manager
    4. Browser: Chrome / Firefox

Daftar Materi

Installasi Vue 3 Dan Setup Project09:11
Membuat Login Dan Register Component10:43
Membuat Fungsi Show Component Login Dan Register06:28
Mempercantik Component Login Dan Register07:20
Membuat Component Room Dan Chat Box14:41
Mempercantik Component Chatbox06:09
Mempercantik Component Chat Form Menggunakan Font Awesome04:24
Kuis - Membuat Chat Group dengan Vue 3 dan Firebase - 100.00

Membuat Project Firebase Dan File Confignya06:46
Membuat Fungsi Registrasi Dengan Composable11:02
Mengaktifkan Fitur Registrasi Dengan Firebase07:52
Menampilkan Pesan Error Registrasi01:50
Membuat Fungsi Login Dengan Composable07:26
Mengaktifkan Fitur Login Dengan Firebase07:30
Melakukan Redirect Seletah Otentikasi Dengan Emit07:12
Membuat Fungsi Logout Firebase Dengan Composable07:57
Mendapatkan Data User Dari Otentikasi Firebase05:18
Kuis - Membuat Chat Group dengan Vue 3 dan Firebase - 200.00

Membuat Route Guard Halaman Chat Room04:58
Membuat Composable Untuk Menyimpan Data Ke Firestore04:33
Menggunakan Composable Untuk Mengirim Data Chat08:36
Membuat Composable Getcollection Untuk Mendapatkan Data05:56
Menampilkan Data Chat Menggunakan Getcollection06:38
Mengubah Format Timestamp Lebih Mudah Dibaca07:11
Mencegah Proses Redirect Saat Reload Halaman Chat03:34
Mencegah Masuk Halaman Otentikasi Setelah Login03:20
Kuis - Membuat Chat Group dengan Vue 3 dan Firebase - 300.00
Penyusun Materi

Prev
Next
Ahmad Hakim
Ahmad Hakim

Founder & Mentor IDStack | CTO di Nusabot | Software Engineer di GovTech Edu | Former Software Engineer di Track&ROLL

Testimoni Oleh Siswa

4.9

(27 reviews)

5 Bintang
89%
4 Bintang
7%
3 Bintang
4%
2 Bintang
0%
1 Bintang
0%
Tiara Asa Nurani
Tiara Asa Nurani
Mudah dipahami
Achmad Alvin Ardiansyah
Achmad Alvin Ardiansyah
Mudah dipahami, agak usang
Ketut suryada
Ketut suryada
Mudah dipahami
M. Azri Riyandi
M. Azri Riyandi
Kontennya menarik
Andi Gigatera Halil M
Andi Gigatera Halil M
Kontennya bagus, langsung to the point namun ada video yang judulnya menjelaskan cara membuat 'getCollection' namun isinya malah cara membuat 'getUser", dan parahnya video cara membuat 'getCollection"nya itu malah tidak ada. entah karena itu terhapus atau ada eror di codepoilitan, tapi ini bikin sulit belajar
Simon Calvin Pribadi
Simon Calvin Pribadi
Mudah dipahami,Kontennya menarik
james lontoh
james lontoh
Mudah dipahami,Kontennya menarik,Keren sekali,Recommended,Informatif
Bagus Ganang Nugroho
Bagus Ganang Nugroho
Informatif,Kontennya menarik,Mudah dipahami,Recommended,Keren sekali
Nur Arif Setiawan
Nur Arif Setiawan
Mudah dipahami,Kontennya menarik,Keren sekali,Recommended,Informatif
Pamela Sarnia
Pamela Sarnia
Informatif
;
...
Lihat Rekaman
Rp. 149,000
Beli sekali akses selamanya
Rp. 49,000
Sewa kelas dan akses selama 1 bulan
Yang akan kamu dapatkan :
27 Modul
3 jam durasi
Forum Diskusi Tanya Jawab
Klaim Sertifikat Digital

Kelas Populer Lainnya

Prev
Next