Develop (Package)

Flutter Packages

Setelah sebelumnya anda membuat layanan Packages anda dapat meng-clone app nya ke local device anda untuk development.

Sebaiknya anda membaca terlebih dahulu tutorial resmi dari flutter untuk cara develop package & plugins di flutter di link berikut https://docs.flutter.dev/packages-and-plugins/developing-packages

Compiler Flow

Secara alur development dan proses penggabungan Source code MiniApp dan Source Code MainApp akan seperti gambar berikut :

Setelah anda klik Compile MiniApp to MainApp, Layanan MiniApp anda akan di routing terlebih dahulu ke router yang kami beri nama "Package Wrapper" dan selanjutnya Dependency external yang anda tambahkan di MiniApp akan di Overrides (Jika sudah ada di MainApp ), jika step ini berhasil tanpa konflik, MiniApp akan di Compile bersama dengan MainApp dan hasil preview / Sample dapat anda download dari Platform.

MiniApp & MainApp - Struktur Kode

Secara struktur code MiniApp anda akan nampak seperti berikut di MainApp

Depedency Overrides Info

Hal yang harus anda perhatikan pada proses development adalah di bagian berikut:

Dependency Overrides di atas adalah dependency yg saat ini di gunakan oleh MainApp jadi jika anda ingin menambahkan dependecy external di MiniApp anda, terlebih dahulu anda dapat mengecek versi dependecy yg saat ini di gunakan di MainApp, jika dependency yg anda gunakan belum tersedia di MainApp anda dapat langsung menggunakan nya, platform akan mengecek jika terdapat konflik pada proses compiling.

Develop MiniApp

Persiapan

Sebelum ke tahap running example code, pastikan anda menggunakan :

flutter versi 3.22.1-stable

Download di : https://docs.flutter.dev/release/archive

State Management

Default state management yang di gunakan adalah GetX :

get: ^4.6.6

dependecy sudah default terinstall di MiniApp, anda dapat mempelajari selengkapnya di link berikut : https://pub.dev/packages/get

Struktur Kode MiniApp

Source code MiniApp akan nampak seperti berikut :

Keterangan struktur folder :

1. assets :

   merupakan local assets yg dapat anda gunakan untuk keperluan penggunakan local image, font dan lain-lain

2. example :

   folder example akan bekerja seakan-akan sebagai MainApp (untuk keperluan development), anda tidak perlu mengubah file apapun di dalam folder ini, folder ini akan digunakan untuk running local development MiniApp

3. lib :

   Merupakan folder MiniApp anda, anda dapat meletakan kode anda di dalam folder ini.

Folder Example :

seperti penjelasan sebelumnya folder example akan bertindak seakan-akan MainApp dan untuk keperluan Running MiniApp (Local Development), dalam folder example akan terdapat themes yang saat ini di gunakan oleh MainApp dan 2 tombol akses untuk meng-akses layanan dan riwayat dengan parameter seperti berikut :

Parameter di atas adalah parameter yang akan di kirimkan oleh MainApp di env production setelah code di merge, dan untuk keperluan development data yang di kirim adalah data dummy seperti di atas.

Folder Lib :

folder ini merupakan folder dimana Source code miniapp anda berada, secara struktur akan nampak seperti berikut :

yang perlu anda perhatikan pada isi default code example MiniApp adalah 2 file yaitu :

1. layanan.main.dart

   merupakan root index layanan, jangan ubah isi di dalam file ini, MainApp akan mengakses default layanan ke file ini dengan beberapa parameter.

2. riwayat.main.dart

   merupakan root index detail riwayat, jangan ubah isi di dalam file ini, MainApp akan mengakses default detail riwayat ke file ini dengan beberapa parameter.

Jika di perhatikan file layanan.main.dart akan mengakses child class yg terdapat di folder modules

anda dapat merubah child class yang di akses dari layanan.main.dart sesuai kebutuhan anda

Cara Running Example Code

pada root folder MiniApp masuk ke folder example dan jalankan command flutter run seperti berikut :

cd example
flutter clean
flutter run

setelah running anda akan di hadapkan dengan tampilan seperti berikut :

tampilan awal di atas adalah main.dart dari example folder yang berjalan seakan-akan sebagai mainapp, klik menu layanan dan anda akan di arahkan ke halaman layanan miniapp anda dan klik riwayat anda akan di arahkan ke halaman detail riwayat miniapp anda.

Halaman layanan

example halaman layanan akan seperti berikut :

pada halaman layanan anda akan melihat example atau contoh penggunaan dari pemanggilan data user, alamat, cek login, widget sample bawaan, call mainapp page dll

Halaman riwayat

example halaman riwayat akan seperti berikut :

contoh di atas berupa UI / widget halaman detail riwayat yang dapat anda gunakan jika di perlukan

Cara Develop Halaman Detail Riwayat

khusus untuk development halaman detail riwayat, anda perlu sebelumnya submit / create data riwayat dari API agar dapat masuk ke halaman list riwayat transaksi seperti gambar berikut :

Secara flow development riwayat pada packages flutter akan seperti berikut :

anda perlu menggunakan API "Riwayat Transaksi" yang terdapat di Platform untuk dapat memunculkan riwayat kedalam list riwayat di MainApp.

kemudian saat list riwayat tersebut itu di klik, mainapp akan meng-akses root index riwayat.main.dart dengan parameter yang telah di jelaskan di atas yang dapat di gunakan oleh miniapp.