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.
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
- Total belajar adalah selama 2 jam 46 menit
- Siswa dapat menentukan sendiri waktu belajarnya
-
Fasilitas Pengajaran
- Materi elektronik: Materi disediakan berupa video
- Forum tanya jawab: Forum digunakan apabila siswa mendapatkan kendala saat belajar, dan akan dibalas oleh tim support CodePolitan
- Grup telegram: Berisi member CodePolitan (khusus pembelian membership)
-
Peralatan Belajar Siswa
-
Siswa wajib memiliki akses internet melalui komputer yang menggunakan Windows/Mac/Linux
- Spesifikasi minimal komputer milik siswa:
- Sistem operasi : Windows, Linux, atau MacOS.
- Prosesor : Intel Dual Core (Rekomendasi Core i3 ke atas).
- RAM : 1GB (Rekomendasi 2GB).
- Resolusi layar : 1366 x 768 (Rekomendasi Full HD 1920 x 1080)
- Software:
- Visual Studio Code sebagai text editor
- Akun Firebase
- NPM sebagai Package Manager
- Browser: Chrome / Firefox
Daftar Materi
Installasi Vue 3 Dan Setup Project | 09:11 | |
Membuat Login Dan Register Component | 10:43 | |
Membuat Fungsi Show Component Login Dan Register | 06:28 | |
Mempercantik Component Login Dan Register | 07:20 | |
Membuat Component Room Dan Chat Box | 14:41 | |
Mempercantik Component Chatbox | 06:09 | |
Mempercantik Component Chat Form Menggunakan Font Awesome | 04:24 | |
Kuis - Membuat Chat Group dengan Vue 3 dan Firebase - 1 | 00.00 |
Membuat Project Firebase Dan File Confignya | 06:46 | |
Membuat Fungsi Registrasi Dengan Composable | 11:02 | |
Mengaktifkan Fitur Registrasi Dengan Firebase | 07:52 | |
Menampilkan Pesan Error Registrasi | 01:50 | |
Membuat Fungsi Login Dengan Composable | 07:26 | |
Mengaktifkan Fitur Login Dengan Firebase | 07:30 | |
Melakukan Redirect Seletah Otentikasi Dengan Emit | 07:12 | |
Membuat Fungsi Logout Firebase Dengan Composable | 07:57 | |
Mendapatkan Data User Dari Otentikasi Firebase | 05:18 | |
Kuis - Membuat Chat Group dengan Vue 3 dan Firebase - 2 | 00.00 |
Membuat Route Guard Halaman Chat Room | 04:58 | |
Membuat Composable Untuk Menyimpan Data Ke Firestore | 04:33 | |
Menggunakan Composable Untuk Mengirim Data Chat | 08:36 | |
Membuat Composable Getcollection Untuk Mendapatkan Data | 05:56 | |
Menampilkan Data Chat Menggunakan Getcollection | 06:38 | |
Mengubah Format Timestamp Lebih Mudah Dibaca | 07:11 | |
Mencegah Proses Redirect Saat Reload Halaman Chat | 03:34 | |
Mencegah Masuk Halaman Otentikasi Setelah Login | 03:20 | |
Kuis - Membuat Chat Group dengan Vue 3 dan Firebase - 3 | 00.00 |
Penyusun Materi
Testimoni Oleh Siswa
(27 reviews)