Modul Superhero API hingga Bab 5

Halo semuanya! Selamat datang di video demonstrasi project aplikasi "Superhero Moods" dari Kelompok 8 (Kelas IT-003). 🚀

Di video kali ini, kami membedah tuntas proses pengembangan aplikasi seluler dari perancangan antarmuka awal (Bab 1) hingga penyelesaian tantangan backend dan real-time data (Bab 5). Aplikasi ini memungkinkan pengguna untuk mencari karakter superhero favorit mereka dan membagikan mood atau status mereka secara interaktif!

💡 Apa saja yang kami bahas di video ini?

Bab 1 & 2: Fondasi UI & State Management
Perancangan struktur layout dasar menggunakan Flutter. Kami mendemonstrasikan penggunaan Scaffold, Column, serta deretan navigasi interaktif. Di tahap ini, aplikasi menggunakan data default lokal sebagai kerangka awal.

Bab 3: Integrasi REST API (Superhero API)
Menghubungkan aplikasi ke internet dengan arsitektur kode yang modular (heroapi_connection.dart). Kami menggunakan HTTP GET Request yang bersifat asinkronus dan teknik string interpolation untuk pencarian dinamis. Data JSON yang diterima server langsung di-konversi menjadi objek model Dart (HeroData.fromJson). Bagian ini juga menampilkan responsivitas UI, seperti auto-close keyboard dan indikator visual saat hero dipilih.

Bab 4: Backend & Firebase Authentication
Implementasi fitur signInAnonymously() untuk autentikasi. Data mood pengguna (nama hero, URL gambar, teks) dibungkus dalam objek Map dan diunggah ke Firestore.
Catatan: Kami juga membagikan trik troubleshooting menangani gambar API yang terkena HTTP Error 403 menggunakan kombinasi ClipOval, Image.network, dan errorBuilder agar aplikasi tidak crash dan otomatis menampilkan default avatar.

Bab 5: Arsitektur Data Reaktif & Tantangan Akhir
Rahasia di balik sinkronisasi data yang instan di Main Screen tanpa perlu me-refresh aplikasi! Kami menggunakan Reactive Stream melalui snapshots().listen ke database Firestore. Kami juga menyelesaikan tantangan penambahan User Display Name menggunakan metode SetOptions(merge: true) agar tidak menimpa data yang sudah ada, serta mendemonstrasikan fitur Delete moods untuk membersihkan dokumen di server.

Jangan lupa untuk Like, Comment jika ada pertanyaan atau masukan, dan Subscribe untuk mendukung karya-karya kami selanjutnya! Terima kasih sudah menonton. 💻✨

🛠️ Tech Stack & Fitur:

Framework: Flutter (Dart)

API: Superhero API (RESTful)

Backend Database: Firebase Cloud Firestore (Real-time Database)

Authentication: Firebase Anonymous Sign-In

State Management: Reactive Streams

#Flutter #FlutterDeveloper #Firebase #Firestore #APIIntegration #MobileDevelopment #Dart #MahasiswaIT #TelkomUniversity #ProjectFlutter

Видео Modul Superhero API hingga Bab 5 канала Ryan Muhamad