Kelas Online 

Membuat​ Aplikasi Tiket Nonton 

dengan F
​ igma & Flutter 
Design - Prototype - Hand Off - Development -  
Live Testing - Publish ke Playstore 
 

 
(Contoh Projek yang akan dibuat) 
 
Mobile Apps a ​ dalah aplikasi yang sering digunakan oleh masyarakat 
entah itu Android ataupun iOS. Dalam membangun bisnis di dunia IT 
maka kita membutuhkan aplikasi agar mempermudah pengguna dalam 
menggunakan jasa atau produk kita. 
 
Pada kelas ini kita akan belajar mengenai: 
1. UI UX design menggunakan ​Figma 
2. Design h ​ andoff​ yang dilakukan designer kepada developer 
3. Develop aplikasi android dan ios menggunakan F ​ lutter 
 4. Upload ke Google Play Store untuk portfolio 
 
Tools (semua gratis dan siapa saja bisa belajar): 
- Windows 10 / Linux / Mac OS 
- Figma (​https://figma.com​)  
- Whimsical (​https://whimsical.com/​) 
- Flutter (​http://flutter.dev/​) 
- InVision App (​https://www.invisionapp.com/​) 
- Dart (​https://dart.dev/​) 
- Maze User Testing (​https://maze.design/​) 
- Visual Studio Code (​https://code.visualstudio.com/​) 
- Firebase (​https://firebase.google.com/​) 
- Niat, Usaha dan Kerja Keras. 
 
Benefit Unggulan 
- Materi Desain UI UX 
- Materi Apps Development (Flutter) 
- File Master Projek Design 
- File Master Projek Mobile Apps 
- Sertifikat Kelulusan 
- Konsultasi Gratis Seumur Hidup (Group Private Telegram) 
- Video kualitas tinggi (1080 HD) 
- Akses Kelas Seumur Hidup 
- Audio lebih nyaman untuk didengarkan  
- Masih banyak lagi, lihat sendiri saja nanti 
 
Mentor 
   

   
Angga  Erico 
(Product Designer)  (Expert Flutter Developer) 
Mengajar UI UX Design  Mengajar Flutter SDK 
youtube.com/anggarisky  youtube.com/c/ericodarmawanhandoyo 
 
 
 
Daftar Materi 
 
Brief projek yang akan dibangun: 
https://docs.google.com/document/d/1WjZuRs6JobcGn9bWQn0up1bg5VH-cStD
w-Tg5DEnWpE/edit?usp=sharing 
 
UX Information Architecture untuk Flutix: 
https://whimsical.com/Ff1aVm7hwTowJWEa5Uo3wS 
 
UX User Flow untuk Flutix: 
https://whimsical.com/FDNuuuG65nEotMej19L3RP 
 
UX Wireframe Flutix: 
https://whimsical.com/MPM5f55J332HFgM4f7Nqgp 
 
MoodBoard Design: 
https://projects.invisionapp.com/boards/UC3YZR3KDSH/ 
 
# UX Design (dibawakan oleh Angga) 
- Memahami Brief (Ideation) ​video tutorial sudah dibuat 
- Membuat Information Architecture UX v ​ ideo tutorial sudah dibuat 
- Splash Screen v ​ ideo tutorial sudah dibuat 
- Login Screen v ​ ideo tutorial sudah dibuat 
- Sign Up Screen ​video tutorial sudah dibuat 
- Upload Photo User Screen ​video tutorial sudah dibuat 
- User Profile Screen v ​ ideo tutorial sudah dibuat 
- Sukses Sign Up Screen ​video tutorial sudah dibuat 
- Home Movies Screen ​video tutorial sudah dibuat 
- Movie Details Screen ​video tutorial sudah dibuat 
- Pilih Bioskop dan Jam Screen ​video tutorial sudah dibuat 
- Pilih Bangku Screen v ​ ideo tutorial sudah dibuat 
- Checkout Screen v ​ ideo tutorial sudah dibuat 
- Sukses Checkout Screen v ​ ideo tutorial sudah dibuat 
- My Tickets Screen ​video tutorial sudah dibuat 
- My Ticket Details Screen ​video tutorial sudah dibuat 
- Profile Screen ​video tutorial sudah dibuat 
- Edit Profile Screen v ​ ideo tutorial sudah dibuat 
- Settings Screen v ​ ideo tutorial sudah dibuat 
- E-Wallet Screen ​video tutorial sudah dibuat 
- History Transaksi Screen ​video tutorial sudah dibuat 
 - Top-Up Screen v ​ ideo tutorial sudah dibuat 
- Berhasil Top-Up Screen v ​ ideo tutorial sudah dibuat 
- Membuat UserFlow UX v ​ ideo tutorial sudah dibuat 
- Membuat Wireframe ​video tutorial sudah dibuat 
- Splash Screen v ​ ideo tutorial sudah dibuat 
- Login Screen v ​ ideo tutorial sudah dibuat 
- Sign Up Screen ​video tutorial sudah dibuat 
- Upload Photo User Screen ​video tutorial sudah dibuat 
- User Profile Screen v ​ ideo tutorial sudah dibuat 
- Sukses Sign Up Screen ​video tutorial sudah dibuat 
- Home Movies Screen ​video tutorial sudah dibuat 
- Movie Details Screen ​video tutorial sudah dibuat 
- Pilih Bioskop dan Jam Screen ​video tutorial sudah dibuat 
- Pilih Bangku Screen v ​ ideo tutorial sudah dibuat 
- Checkout Screen v ​ ideo tutorial sudah dibuat 
- Sukses Checkout Screen v ​ ideo tutorial sudah dibuat 
- My Tickets Screen ​video tutorial sudah dibuat 
- My Ticket Details Screen ​video tutorial sudah dibuat 
- Profile Screen ​video tutorial sudah dibuat 
- Edit Profile Screen v ​ ideo tutorial sudah dibuat 
- E-Wallet Screen ​video tutorial sudah dibuat 
- History Transaksi Screen ​video tutorial sudah dibuat 
- Top-Up Screen v ​ ideo tutorial sudah dibuat 
- Berhasil Top-Up Screen v ​ ideo tutorial sudah dibuat 
- Review Projek Wireframe v ​ ideo tutorial sudah dibuat  
- Membuat Low Fidelity Prototype ​video tutorial sudah dibuat 
 
# Visual Design (dibawakan oleh Angga) 
- Membuat MoodBoard ​video tutorial sudah dibuat 
- Menambahkan Design Inspirasi v ​ ideo tutorial sudah dibuat 
- Bermain color swatch v ​ ideo tutorial sudah dibuat 
- memilih font untuk tipografi ​video tutorial sudah dibuat 
- inspirasi icon dan illustration v ​ ideo tutorial sudah dibuat 
- Transformasi Wireframe ke Visual Design 
- Splash Screen v ​ ideo tutorial sudah dibuat 
- Design Logo App v ​ ideo tutorial sudah dibuat 
- Login Screen v ​ ideo tutorial sudah dibuat 
- Sign Up Screen ​video tutorial sudah dibuat 
- Upload Photo Screen v ​ ideo tutorial sudah dibuat 
- Sukses Sign Up Screen ​video tutorial sudah dibuat 
- Home Movies Screen 
- Header ​video tutorial sudah dibuat 
 - Now Playing v ​ ideo tutorial sudah dibuat 
- Navigation Bottom v ​ ideo tutorial sudah dibuat 
- Promo Section v ​ ideo tutorial sudah dibuat 
- Membuat Icon Movie v ​ ideo tutorial sudah dibuat 
- Membuat Icon Ticket v ​ ideo tutorial sudah dibuat 
- Membuat Icon Profile ​video tutorial sudah dibuat 
- Genre Section 
- Membuat Icon Action v ​ ideo tutorial sudah dibuat 
- Membuat Icon Music v ​ ideo tutorial sudah dibuat 
- Membuat Icon War ​video tutorial sudah dibuat 
- Membuat Icon Drama ​video tutorial sudah 
dibuat 
- Membuat Icon Horror ​video tutorial sudah dibuat 
- Membuat Icon Crime v ​ ideo tutorial sudah dibuat 
- Movie Details Screen ​video tutorial sudah dibuat 
- cover section v ​ ideo tutorial sudah dibuat 
- cast & crew photos ​video tutorial sudah dibuat 
- storyline text v ​ ideo tutorial sudah dibuat 
- button CTA v ​ ideo tutorial sudah dibuat 
- scrolling effect ​video tutorial sudah dibuat 
- Pilih Bioskop dan Jam Screen ​video tutorial sudah dibuat 
- pilih lokasi cinema v ​ ideo tutorial sudah dibuat 
- pilih tanggal dan waktu ​video tutorial sudah dibuat 
- Pilih Bangku Screen v ​ ideo tutorial sudah dibuat 
- Screen ​video tutorial sudah dibuat 
- Seat Design ​video tutorial sudah dibuat 
- Indicator Seat ​video tutorial sudah dibuat 
- Button cTA ​video tutorial sudah dibuat 
- Checkout Screen v ​ ideo tutorial sudah dibuat 
- Order Information v ​ ideo tutorial sudah dibuat 
- Wallet State ​video tutorial sudah dibuat 
- Top Up Button ​video tutorial sudah dibuat 
- Error Message v ​ ideo tutorial sudah dibuat 
- Sukses Checkout Screen 
- Illustration v
​ ideo tutorial sudah dibuat 
- Text dan Button ​video tutorial sudah dibuat 
- My Tickets Screen ​video tutorial sudah dibuat 
- Tab Design v ​ ideo tutorial sudah dibuat 
- Card Movie Item v ​ ideo tutorial sudah dibuat 
- My Ticket Details Screen ​video tutorial sudah dibuat 
- Cover Photo ​video tutorial sudah dibuat 
- Movie Informations ​video tutorial sudah dibuat 
 - Booking Informations ​video tutorial sudah dibuat 
- Scan QR v ​ ideo tutorial sudah dibuat 
- User’s Info v ​ ideo tutorial sudah dibuat 
- Profile Screen 
- avatar user v ​ ideo tutorial sudah dibuat 
- main menus v ​ ideo tutorial sudah dibuat 
- user’s information v ​ ideo tutorial sudah dibuat 
- Edit Profile Screen 
- input field user’s data v ​ ideo tutorial sudah dibuat 
- button CTA v ​ ideo tutorial sudah dibuat 
- upload Photo v ​ ideo tutorial sudah dibuat 
- E-Wallet Screen 
- Card Wallet v ​ ideo tutorial sudah dibuat 
- Transaction v ​ ideo tutorial sudah dibuat 
- History Transaksi Screen ​video tutorial sudah dibuat 
- Top-Up Screen v ​ ideo tutorial sudah dibuat 
- Berhasil Top-Up Screen v ​ ideo tutorial sudah dibuat 
 
# Interaction Design IxD (dibawakan oleh Angga) 
- Mempelajari Micro-Interaction ​video tutorial sudah dibuat 
- UI Animation ​video tutorial sudah dibuat 
- UI Prototype ​video tutorial sudah dibuat 
- Team Collaborate ​video tutorial sudah dibuat 
- Evaluasi Design v ​ ideo tutorial sudah dibuat 
 
# Usability-Testing (dibawakan oleh Angga) 
- Mempelajari Maze.Design ​video tutorial sudah dibuat 
- Membuat Task Utama v ​ ideo tutorial sudah dibuat 
- Live-Testing dengan Pengguna v ​ ideo tutorial sudah dibuat 
- Review Result v ​ ideo tutorial sudah dibuat 
 
 
# Design Handoff (dibawakan oleh Angga) 
- Mempersiapkan Assets v ​ ideo tutorial sudah dibuat 
- Slicing Icon, Illustration, etc. ​video tutorial sudah dibuat 
- Kolaborasi dengan Developer ​video tutorial sudah dibuat 
- Support Developer v ​ ideo tutorial sudah dibuat 
 
# Apps Development (dibawakan oleh Erico) 
- User Authentication [​ Video: Done] 
- Project Setting [​ Video: Done] 
- Struktur Project [​ Video: Done] 
 - TMDB public API [​ Video: Done] 
- Sign up, Sign in, Sign Out Function & Service Part 1 [​ Video: 
Done] 
- Sign up, Sign in, Sign Out Function & Service Part 2 ​[Video: 
Done] 
- Sign up, Sign in, Sign Out Function & Service Part 3 [​ Video: 
Done] 
- Navigation [​ Video: Done] 
- Wrapper ​[Video: Done] 
- Page BLoC ​[Video: Done] 
- User BLoC [​ Video: Done] 
- Splash & Sign In Page [​ Video: Done] 
- Mengambil informasi dan asset dari Figma ​[Video: Done] 
- Splash Page [​ Video: Done] 
- Login Page Part 1 [​ Video: Done] 
- Login Page Part 2 ​[Video: Done] 
- Sign Up Related Pages [​ Video: Done] 
- Custom Bottom Navigation Bar ​[Video: Done] 
- Main Page Navigation [​ Video: Done] 
- Movie Page Custom Header ​[Video: Done] 
- Sign Up Page Part 1 [​ Video: Done] 
- Sign Up Page Part 2 [​ Video: Done] 
- Sign Up Page Part 3 ​[Video: Done] 
- Class RegistrationData ​[Video: Done] 
- Selectable Box Widget [​ Video: Done] 
- Preference Page Part 1 [​ Video: Done] 
- Preference Page Part 2 [​ Video: Done] 
- Account Confirmation Page ​[Video: Done] 
- Upload Profile Image ​[Video: Done] 
- Movie Page [​ Video: Done] 
- Movie Page Part 1 ​[Video: Done] 
- Class Movie ​[Video: Done] 
- Movie Services Part 1 [​ Video: Done] 
- Movie BLoC ​[Video: Done] 
- MovieCard Widget ​[Video: Done] 
- RatingStars Widget [​ Video: Done] 
- BrowseButton Widget ​[Video: Done] 
- ComingSoon Widget ​[Video: Done] 
- Class Promo [​ Video: Done] 
- PromoCard ​[Video: Done] 
- Movie Page Part 2 ​[Video: Done] 
- Purchasing Ticket [​ Video: Done] 
 - Class Movie Detail ​[Video: Done] 
- Class Credit ​[Video: Done] 
- Movie Services Part 2 [​ Video: Done] 
- MovieDetailPage Part 1 [​ Video: Done] 
- MovieDetailPage Part 2 [​ Video: Done] 
- DateTime Extension & DateCard Widget ​[Video: Done] 
- SelectSchedulePage Part 1 ​[Video: Done] 
- Class Theater ​[Video: Done] 
- SelectSchedulePage Part 2 [​ Video: Done] 
- Class Ticket ​[Video: Done] 
- SelectSeatPage Part 1 [​ Video: Done] 
- SelectSeatPage Part 2 [​ Video: Done] 
- SelectSeatPage Part 3 ​[Video: Done] 
- CheckOutPage Part 1​[Video: Done] 
- CheckOutPage Part 2 ​[Video: Done] 
- Ticket Services ​[Video: Done] 
- Flutix Transaction ​[Video: Done] 
- Ticket Bloc ​[Video: Done] 
- SuccessPage Part 1 ​[Video: Done] 
- SuccessPage Part 2 [​ Video: Done] 
- Ticket, Ticket Detail, Profile Page ​[Video: Done] 
- TicketPage Part 1 ​[Video: Done] 
- TicketPage Part 2 ​[Video: Done] 
- TicketDetail Page ​[Video: Done] 
- Profile Page ​[Video: Done] 
- Topup & Wallet Page ​[Video: Done] 
- Topup Page Part 1 [​ Video: Done] 
- Topup Page Part 2 [​ Video: Done] 
- Topup Page Part 3 ​[Video: Done] 
- Wallet Page Part 1 ​[Video: Done] 
- Wallet Page Part 2 [​ Video: Done] 
- Wallet Page Part 3 ​[Video: Done] 
- Wallet Page Part 4 ​[Video: Done] 
- Edit Profile Page & Finishing [​ Video: Done] 
- Edit Profile Page ​[Video: Done] 
- Finishing ​[Video: Done] 
 
# Deployment Play Store (dibawakan oleh Erico) 
- Publish App Bundle ​[Video: Done] 
- Upload ke Play Store [​ Video: Done] 
 
# UDPATE Versi Flutter Bloc & Firebase (dibawakan oleh Erico) 
 - Update Versi Flutter Bloc & Firebase ​[Video: Done] 
Tata Cara Order 
Harga:   

Rp. 355.000,- 
*bayar sekali, akses video dan konsultasi selamanya 
 
Silahkan transfer uang sebesar nominal di atas kepada rekening:  
 

BCA ​2820385554​ a/n Erico Darmawan Handoyo 

 

Bagi ​Warga Negara Non-Indonesia 

Silahkan transfer ke: 
 
Erico Darmawan Handoyo 
Account Number: ​2820385554 
Bank Name: B​ ank Central Asia 
Swift Code:​ ​CENAIDJA 
 
Keterangan Transfer: B ​ WAFLUTIX<spasi>NamaAnda 
(Jika transfer via ATM tidak perlu pakai keterangan) 
 
Setelah transfer silahkan konfirmasi foto pembayaran dan berikan data diri 
berupa: 
● Nama Lengkap 
● Email (@gmail) 
● Foto Bukti Transfer 
 
Kirim data diri dan bukti transfer ke ​WhatsApp​ :​  
+62-896-0453-5310 
👩​ V​ ina Fahira​ (​Admin Flutter Mobile Apps Developer​)  
(Senin - Jumat, Jam 08.00 - 17.00 WIB) 
 
Kami akan balas ​maksimal 1x24 jam chat kamu​.  
Terima kasih dan kami tunggu di kelas! :) 
 
Catatan Penting: 
- Video akan diletakan pada G
​ oogle Drive d​ an bebas akses selamanya dan 
dapat di-download untuk belajar secara offline 
- Kelas akan dapat diakses melalui platform BWA 
- Dengan mengikuti kelas online ini, kalian mendapatkan akses ke 
serangkaian video pembelajaran sesuai dengan materi yang sudah ditulis 
di atas 
- Proses belajar dilakukan secara mandiri setelah kalian mendapatkan akses 
ke video pembelajaran 
- Kelas online ini tidak berupa pembelajaran secara live streaming 
- Video pembelajaran berbahasa Indonesia 
- Materi dari Dasar (tidak perlu khawatir, semua bisa belajar) 
- Semua tools yang diperlukan gratis / ​open-source