core/config/app_config.dart
Langkah 1: Buat kelas AppConfig yang bertanggung jawab untuk menyimpan pengaturan aplikasi seperti URL API dasar dan pengaturan tema.
Langkah 2: Tambahkan metode seperti getApiUrl() untuk mendapatkan URL API atau pengaturan lainnya.
Langkah 3: Ekspor kelas ini agar dapat digunakan di berbagai bagian aplikasi.
core/utils/route_utils.dart
Langkah 1: Definisikan fungsi untuk mengelola navigasi antar layar. Misalnya, buat fungsi navigateToGameDetail(BuildContext context, String gameId) untuk berpindah ke halaman detail game.
Langkah 2: Gunakan Navigator.push() untuk mengarahkan pengguna ke halaman detail, dan Navigator.pop() untuk kembali ke halaman sebelumnya.
Langkah 3: Ekspor fungsi ini agar navigasi dapat diakses dengan mudah dari ViewModel atau View.
core/global_component/string_constants.dart
Langkah 1: Definisikan semua string yang digunakan di aplikasi, seperti "Beranda", "Game Favorit", dan "Hasil Pencarian".
Langkah 2: Buat kelas StringConstants untuk menyimpan konstanta ini.
Langkah 3: Ekspor kelas ini agar string dapat diakses di seluruh aplikasi.
core/global_component/image_constants.dart
Langkah 1: Definisikan jalur untuk gambar-gambar yang digunakan di aplikasi, seperti ikon, logo, dan gambar default.
Langkah 2: Buat kelas ImageConstants untuk menyimpan jalur gambar tersebut.
Langkah 3: Gunakan konstanta ini di bagian UI yang membutuhkan gambar, seperti dalam widget Image.asset().
core/global_component/color_constants.dart
Langkah 1: Tentukan palet warna untuk tema aplikasi, misalnya warna latar belakang, warna tombol, dan warna teks.
Langkah 2: Buat kelas ColorConstants yang menyimpan konstanta warna.
Langkah 3: Ekspor warna-warna ini agar dapat digunakan di seluruh komponen UI.
Features
features/home/screen/welcome-screen.dart
Langkah 1: buatkan welcome screen dengan latar belakang hitam/abu-abu
Langkah 2: bisa menampilkan logo/ilustrasi
Langkah 3: saat logo muncul terdapat animasi
features/home/view_models/home_view_model.dart
Langkah 1: Buat kelas HomeViewModel yang bertanggung jawab mengelola data untuk layar utama (home).
Langkah 2: Definisikan variabel yang menampung daftar game, dan buat fungsi fetchGames() untuk memuat data dari repository.
Langkah 3: Gunakan notifyListeners() untuk memperbarui UI setiap kali data berubah.
features/home/views/home_view.dart
Langkah 1: Buat tampilan layar utama menggunakan widget seperti ListView untuk menampilkan daftar game.
Langkah 2: Hubungkan HomeViewModel ke UI menggunakan ChangeNotifierProvider.
Langkah 3: Gunakan metode dari ViewModel seperti homeViewModel.fetchGames() untuk memuat data ke UI.
features/game_detail/view_models/game_detail_view_model.dart
Langkah 1: Buat kelas GameDetailViewModel yang mengelola data detail game.
Langkah 2: Buat fungsi fetchGameDetail() untuk mengambil data dari repository berdasarkan ID game.
Langkah 3: Gunakan notifyListeners() untuk memperbarui UI setelah data game diambil.
features/game_detail/views/game_detail_view.dart
Langkah 1: Buat tampilan detail game, gunakan widget seperti Column atau ScrollView untuk menampilkan informasi game.
Langkah 2: Hubungkan ViewModel menggunakan ChangeNotifierProvider dan panggil data dengan gameDetailViewModel.fetchGameDetail().
Langkah 3: Gunakan binding data dari ViewModel ke widget UI seperti Text(gameDetailViewModel.gameName).
Data
data/repositories/game_repository.dart
Langkah 1: Definisikan kelas GameRepository untuk mengelola data game, baik dari API maupun local storage.
Langkah 2: Buat fungsi getGames() dan getGameDetail(String gameId) yang mengambil data dari API dan mengembalikan hasilnya.
Langkah 3: Ekspor repository ini agar dapat digunakan oleh ViewModel untuk mendapatkan data.
data/api/game_api.dart
Langkah 1: Buat kelas GameApi untuk menangani pemanggilan API ke backend. Definisikan endpoint seperti fetchGames() dan fetchGameDetail().
Langkah 2: Gunakan package http untuk melakukan request API dan tangani response-nya.
Langkah 3: Kembalikan data ke repository untuk diproses lebih lanjut.
data/local_storage/shared_preferences_helper.dart
Langkah 1: Buat kelas SharedPreferencesHelper untuk menyimpan dan mengambil data dari penyimpanan lokal, seperti data user atau setting aplikasi.
Langkah 2: Gunakan package shared_preferences untuk menyimpan data ke local storage.
Langkah 3: Ekspor helper ini agar bisa digunakan di seluruh aplikasi.
main.dart
Langkah 1: Inisialisasi aplikasi Flutter dengan fungsi runApp() dan buat instance AppConfig untuk memuat pengaturan awal.
Langkah 2: Gunakan MultiProvider untuk mengatur provider yang digunakan di seluruh aplikasi.
Langkah 3: Definisikan MaterialApp dan buat route untuk navigasi antar layar, seperti ke halaman utama dan halaman detail game.
Steam Mobile App/Online Game Store
Struktur MVVM
lib/ ├── core/ │ ├── config/ │ │ └── app_config.dart │ ├── utils/ │ │ └── route_utils.dart │ └── global_components/ │ ├── string_constants.dart │ ├── image_constants.dart │ └── color_constants.dart ├── features/ │ ├── screen/ │ │ ├── welcome_screen.dart │ ├── home/ │ │ ├── models/ │ │ │ └── game_model.dart │ │ ├── view_models/ │ │ │ └── home_view_model.dart │ │ └── views/ │ │ └── home_view.dart │ ├── game_detail/ │ │ ├── models/ │ │ │ └── game_detail_model.dart │ │ ├── view_models/ │ │ │ └── game_detail_view_model.dart │ │ └── views/ │ │ └── game_detail_view.dart │ ├── profile/ │ │ ├── models/ │ │ │ └── user_model.dart │ │ ├── view_models/ │ │ │ └── profile_view_model.dart │ │ └── views/ │ │ └── profile_view.dart ├── data/ │ ├── repositories/ │ │ └── game_repository.dart │ ├── api/ │ │ └── game_api.dart │ └── local_storage/ │ └── shared_preferences_helper.dart ├── main.dart
Pemetaan algoritma perfile
Core
Features
Data
main.dart