Mahmudi Husain Hasbullah - Money Wallet Mobile App - 32602200149 - Kelas Reguler

https://dribbble.com/shots/20743358-FinPay-Money-Wallet-Mobile-App

Desain App

lib :

  lib/
  core/
    global_component/
      - Typography.dart 
      - ButtonComponent.dart 
      - BarButtonComponent.dart
      - CardComponent.dart
    config/
      - main_app.dart
    utils/
      - route_utils.dart
    constants/
      - string.dart
      - color.dart
      - images.dart

  data/
    wallet/
      model/
        - Wallet.dart
      dummy/
        - DummyWallet.dart
    profile/
      model/
        - Profile.dart
      dummy/
        - DummyProfile.dart

  features/
    onboarding/
      screen/
        - WelcomeScreen.dart
      widgets/
        - WelcomeIllustrationWidget.dart
        - GetStartedButtonWidget.dart
      controller/
        - WelcomeController.dart

    wallet_management/
      screen/
        - WalletScreen.dart
      widgets/
        - WalletCardWidget.dart
        - TotalBalanceWidget.dart
        - AddWalletButtonWidget.dart
        - BarButtonWidget.dart
      controller/
        - WalletController.dart

    money_transfer/
      screen/
        - SendMoneyScreen.dart
      widgets/
        - AmountInputWidget.dart
        - KeypadWidget.dart
        - SendButton.dart
        - BarButtonWidget.dart
      controller/
        - SendMoneyController.dart


lib/
  core/
    global_component/
      - Typography.dart
        Deskripsi: File ini digunakan untuk mendefinisikan semua gaya teks (typography) yang akan digunakan di aplikasi. Tujuan utama dari file ini adalah untuk menjaga konsistensi font, ukuran teks, berat font, dan warna di seluruh aplikasi.
        Langkah-langkah:
          1. Definisikan kelas yang mengatur berbagai gaya teks untuk berbagai elemen seperti judul, subjudul, dan teks utama.
          2. Misalnya, teks utama seperti "Simple way to manage your money" harus menggunakan font yang besar dengan warna kontras, dan teks deskripsi seperti "Your Total Balance" menggunakan ukuran yang lebih kecil.
          3. Pastikan ada gaya teks untuk tombol seperti "Get Started" atau "Send" yang terlihat di gambar, yang memiliki ketebalan tertentu serta warna yang sesuai dengan tema aplikasi (misalnya tombol berwarna biru dengan teks putih).

      - ButtonComponent.dart
        Deskripsi: File ini digunakan untuk membuat komponen tombol yang dapat digunakan di berbagai layar aplikasi. Misalnya tombol "Get Started" dan "Send" yang terlihat di gambar.
        Langkah-langkah:
          1. Buat komponen tombol yang dapat digunakan kembali, yang menerima parameter seperti label (teks di dalam tombol), warna tombol, dan aksi saat tombol ditekan.
          2. Tentukan gaya untuk tombol utama (primary button) seperti tombol "Send" yang berwarna biru dan tombol sekunder yang mungkin digunakan di tempat lain.
          3. Tombol-tombol ini harus konsisten, baik dari segi ukuran, bentuk, maupun efek saat ditekan.

      - BarButtonComponent.dart
        Deskripsi: File ini digunakan untuk membuat serangkaian tombol pada bar navigasi atau footer, seperti yang terlihat pada gambar contoh. Komponen ini menampilkan tiga tombol horizontal dengan label "Wallet", "Send", dan "Request", di mana tombol "Send" memiliki latar belakang biru sebagai penanda tombol aktif.
        Langkah-langkah:
          1. Buat komponen yang menampilkan tiga tombol dengan label dan tata letak horizontal yang merata.
          2. Pastikan tombol tengah ("Send") memiliki latar belakang biru dan sedikit elevasi untuk menunjukkan bahwa tombol tersebut aktif.
          3. Atur tombol lainnya ("Wallet" dan "Request") dengan latar belakang putih, dan berikan efek klik pada setiap tombol.
          4. Gunakan desain berbentuk bulat dengan teks yang terpusat pada setiap tombol agar mudah diakses dan tetap minimalis.
          5. Tempatkan komponen ini pada bar navigasi atau footer aplikasi, dengan responsivitas yang baik untuk menyesuaikan dengan berbagai ukuran layar.

      - CardComponent.dart
        Deskripsi: Komponen ini digunakan untuk menampilkan kartu di dompet, seperti yang terlihat di layar kedua dan ketiga, di mana ada beberapa kartu bank ditampilkan.
        Langkah-langkah:
          1. Buat komponen kartu yang bisa digunakan untuk menampilkan berbagai informasi seperti nomor kartu, nama bank, dan logo bank.
          2. Setiap kartu harus mendukung interaksi (seperti geser atau tekan) jika diperlukan.
          3. Pastikan komponen ini responsif, sehingga tampilannya tetap rapi di berbagai ukuran layar.

    config/
      - main_app.dart
        Deskripsi: File ini berfungsi sebagai entry point utama aplikasi, yang menginisialisasi pengaturan aplikasi dan menjalankan fitur-fitur utama.
        Langkah-langkah:
          1. Buat kelas utama yang menjalankan aplikasi dengan metode `runApp`.
          2. Inisialisasi tema aplikasi, navigasi, dan state management (jika digunakan).
          3. Tentukan rute awal aplikasi, misalnya memutuskan apakah pengguna langsung ke layar login atau layar onboarding berdasarkan status login.

    utils/
      - route_utils.dart
        Deskripsi: File ini mengatur dan mendefinisikan rute navigasi antar layar dalam aplikasi.
        Langkah-langkah:
          1. Definisikan konstanta untuk nama-nama rute (seperti `/home`, `/wallet`, `/profile`).
          2. Buat fungsi yang mengelola logika perpindahan antar layar berdasarkan rute yang diberikan.
          3. Tambahkan fungsi untuk navigasi ke rute tertentu serta metode pop untuk kembali ke layar sebelumnya.

    constants/
      - string.dart
        Deskripsi: File ini berisi semua string (teks) statis yang digunakan di seluruh aplikasi, untuk memudahkan pengelolaan dan menjaga konsistensi.
        Langkah-langkah:
          1. Buat konstanta untuk string yang sering digunakan, seperti label tombol, teks judul, pesan kesalahan, dan lainnya.
          2. Kategorikan string berdasarkan fitur atau area penggunaan (misalnya string untuk layar onboarding, string untuk layar transaksi).
          3. Pastikan setiap teks dalam aplikasi tidak hardcoded, tetapi diambil dari file ini.

      - color.dart
        Deskripsi: File ini berisi konstanta warna yang digunakan di seluruh aplikasi, untuk menjaga konsistensi warna sesuai dengan tema aplikasi.
        Langkah-langkah:
          1. Definisikan warna-warna utama aplikasi seperti warna latar belakang, warna teks utama, warna tombol utama, dan warna aksen.
          2. Atur warna berdasarkan tema aplikasi, misalnya tema terang atau gelap jika mendukung dark mode.
          3. Gunakan kelas `Color` atau format warna hex untuk mendefinisikan warna yang digunakan.

      - images.dart
        Deskripsi: File ini berisi referensi path semua aset gambar yang digunakan di dalam aplikasi.
        Langkah-langkah:
          1. Definisikan konstanta untuk path semua gambar yang digunakan, seperti ikon, logo, dan ilustrasi.
          2. Atur gambar berdasarkan fungsinya, misalnya gambar untuk layar onboarding, ikon navigasi, dan gambar profil.
          3. Gunakan konstanta ini di seluruh aplikasi agar mudah diubah ketika ada perubahan pada gambar atau path aset.

  data/
    wallet/
      model/
        - Wallet.dart
          Deskripsi: File ini berfungsi untuk memetakan respons API yang berkaitan dengan data dompet pengguna. Ini biasanya berisi model data yang sesuai dengan struktur respons dari API. Misalnya, berisi informasi saldo dompet, nomor kartu, nama bank, dan jenis kartu.
          Langkah-langkah:
            1. Definisikan kelas Wallet yang berisi properti seperti saldo, nomor kartu, nama bank, dan data terkait lainnya.
            2. Gunakan model ini untuk memetakan data yang diterima dari API.
            3. Buat metode untuk mengubah dari format JSON ke objek Dart dan sebaliknya (serialisasi/deserialisasi).

      dummy/
        - DummyWallet.dart
          Deskripsi: File ini digunakan untuk menyediakan data dummy atau contoh yang mirip dengan data sebenarnya untuk keperluan pengujian aplikasi tanpa harus memanggil API sungguhan.
          Langkah-langkah:
            1. Buat objek DummyWallet yang berisi contoh data, seperti saldo dompet, nomor kartu, dan nama bank.
            2. Data dummy ini dapat digunakan dalam pengujian atau tampilan UI sebelum API yang sebenarnya diintegrasikan.

    profile/
      model/
        - Profile.dart
          Deskripsi: File ini berfungsi untuk memetakan respons API terkait data profil pengguna. Ini berisi model yang menampung informasi pengguna seperti nama, foto profil, email, dan detail lainnya yang ditampilkan pada layar profil.
          Langkah-langkah:
            1. Definisikan kelas Profile yang menyimpan informasi pengguna seperti nama, email, nomor telepon, dan gambar profil.
            2. Siapkan metode serialisasi untuk memetakan data dari API ke objek Dart.

      dummy/
        - DummyProfile.dart
          Deskripsi: Berisi data profil contoh atau dummy yang digunakan untuk pengujian. Digunakan ketika API profil belum siap atau untuk menguji tampilan UI.
          Langkah-langkah:
            1. Buat data dummy pengguna seperti nama (misalnya, "Steven"), email, dan gambar profil.
            2. Data ini digunakan untuk simulasi profil di berbagai layar.

  features/
    onboarding/
      screen/
        - WelcomeScreen.dart
          Deskripsi: Layar pertama yang dilihat pengguna ketika membuka aplikasi. Menampilkan pesan selamat datang dan tombol "Get Started" yang mengarahkan pengguna ke langkah berikutnya.
          Langkah-langkah:
            1. Buat layout layar dengan gambar ilustrasi dan teks besar seperti "Simple way to manage your money".
            2. Tambahkan tombol "Get Started" di bagian bawah untuk navigasi ke layar berikutnya.

      widgets/
        - WelcomeIllustrationWidget.dart
          Deskripsi: Komponen yang menampilkan ilustrasi seperti gambar kartu bank di layar pertama. Tujuannya untuk membuat tampilan lebih menarik secara visual.
          Langkah-langkah:
            1. Buat widget ilustrasi, bisa berupa gambar atau animasi yang mendukung tema aplikasi.
            2. Pastikan ilustrasi responsif dan tidak mengganggu elemen lain di layar.

        - GetStartedButtonWidget.dart
          Deskripsi: Komponen tombol "Get Started" yang memungkinkan pengguna untuk melanjutkan ke tahap berikutnya. Biasanya tombol ini diletakkan di bagian bawah layar.
          Langkah-langkah:
            1. Buat widget tombol dengan teks "Get Started".
            2. Tetapkan fungsi untuk navigasi ke layar dompet atau layar berikutnya saat tombol ditekan.

      controller/
        - WelcomeController.dart
          Deskripsi: Mengatur logika di balik layar welcome. Misalnya, apakah pengguna sudah pernah login sebelumnya atau belum, serta mengatur alur navigasi.
          Langkah-langkah:
            1. Buat controller untuk memeriksa status onboarding pengguna, apakah pengguna baru atau sudah terdaftar sebelumnya.
            2. Atur logika navigasi dari layar onboarding ke layar utama.

    wallet_management/
      screen/
        - WalletScreen.dart
          Deskripsi: Layar yang menampilkan daftar dompet pengguna dan saldo total, seperti yang terlihat pada gambar kedua.
          Langkah-langkah:
            1. Buat layout untuk menampilkan dompet pengguna dalam bentuk kartu.
            2. Tambahkan tampilan saldo total pengguna di bagian atas.

      widgets/
        - WalletCardWidget.dart
          Deskripsi: Komponen untuk menampilkan setiap kartu bank secara individual, termasuk nama bank, nomor kartu, dan logo bank.
          Langkah-langkah:
            1. Buat widget kartu yang menampilkan informasi bank dan saldo yang terkait.
            2. Setiap kartu harus mendukung interaksi seperti tap atau geser.

        - TotalBalanceWidget.dart
          Deskripsi: Komponen yang menampilkan saldo total dari seluruh dompet yang dimiliki pengguna. Biasanya terletak di bagian atas layar.
          Langkah-langkah:
            1. Buat widget yang menampilkan jumlah saldo total secara besar dan jelas, sesuai dengan desain yang terlihat pada gambar kedua.

        - AddWalletButtonWidget.dart
          Deskripsi: Tombol untuk menambahkan dompet atau kartu bank baru, seperti tombol "Add Wallet" di layar kedua.
          Langkah-langkah:
            1. Buat tombol untuk menavigasi pengguna ke layar penambahan dompet baru.

        - BarButtonWidget.dart
          Deskripsi: Komponen tombol bar tambahan yang mungkin diperlukan di layar manajemen dompet.
          Langkah-langkah:
            1. Buat widget tombol bar sesuai kebutuhan fitur manajemen dompet.
            2. Pastikan konsistensi dengan tombol bar lainnya dalam aplikasi.

      controller/
        - WalletController.dart
          Deskripsi: Mengelola logika terkait manajemen dompet, seperti penambahan dompet baru, penghapusan, atau pembaruan informasi dompet.
          Langkah-langkah:
            1. Buat controller untuk menangani operasi CRUD (Create, Read, Update, Delete) pada dompet pengguna.
            2. Integrasikan dengan model dan layanan data untuk mengambil dan menyimpan data dompet.

    money_transfer/
      screen/
        - SendMoneyScreen.dart
          Deskripsi: Layar yang memungkinkan pengguna untuk memasukkan jumlah uang yang ingin dikirim, seperti yang terlihat di layar ketiga.
          Langkah-langkah:
            1. Buat layout untuk input jumlah uang dan menampilkan saldo yang tersedia.
            2. Tambahkan tombol kirim setelah jumlah diinput.

      widgets/
        - AmountInputWidget.dart
          Deskripsi: Komponen input untuk memasukkan jumlah uang yang akan dikirim.
          Langkah-langkah:
            1. Buat widget input angka dengan tata letak keypad numerik.
            2. Pastikan validasi input jumlah yang sesuai dengan saldo yang tersedia.

        - KeypadWidget.dart
          Deskripsi: Komponen keypad numerik yang digunakan untuk memasukkan jumlah uang.
          Langkah-langkah:
            1. Buat widget yang terdiri dari tombol angka 0-9 yang berfungsi untuk input angka.
            2. Tambahkan tombol hapus atau reset sesuai kebutuhan.

        - SendButton.dart
          Deskripsi: Tombol untuk mengonfirmasi pengiriman uang setelah jumlah dimasukkan.
          Langkah-langkah:
            1. Buat tombol "Send" yang akan mengirimkan uang setelah pengguna memasukkan jumlah uang yang ingin dikirim.
            2. Integrasikan aksi pengiriman uang dengan controller untuk memproses transaksi.

        - BarButtonWidget.dart
          Deskripsi: Komponen tombol bar tambahan yang mungkin diperlukan di layar pengiriman uang.
          Langkah-langkah:
            1. Buat widget tombol bar sesuai kebutuhan fitur pengiriman uang.
            2. Pastikan konsistensi dengan tombol bar lainnya dalam aplikasi.

      controller/
        - SendMoneyController.dart
          Deskripsi: Mengelola logika terkait pengiriman uang, termasuk validasi input, proses transaksi, dan penanganan hasil transaksi.
          Langkah-langkah:
            1. Buat controller untuk menangani proses pengiriman uang, termasuk validasi jumlah dan penerima.
            2. Integrasikan dengan layanan API untuk memproses transaksi pengiriman uang.
            3. Tangani respons sukses atau gagal dan berikan umpan balik yang sesuai kepada pengguna.

myaasiinh / Mobile-Programming-2024-2025

Mahmudi Husain Hasbullah - Money Wallet Mobile App - 32602200149 - Kelas Reguler #70