myaasiinh / Mobile-Programming-2024-2025

Repository untuk mata kuliah mobile programming dan praktikum bertanya materi dan fixing bug
0 stars 0 forks source link

Maulana Arlistyo Hariyono - Online Game Store App - 32602200087 - Kelas Reguler #34

Open maulana-arlis opened 1 month ago

maulana-arlis commented 1 month ago

Steam Mobile App/Online Game Store

mockup(1)

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

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.
jibril49 commented 4 weeks ago

wow