استفاده از معماری MVP در فلاتر
به عنوان یک برنامه نویس همیشه باید برای پروژه هاتون یک معماری و الگوی طراحی انتخاب کنید.
معماری برنامه نویسی به شما کمک میکنه تا کد های بهتری بنویسید و گسترش دادن اونها با مشکل مواجه نشود.
الگوهای معماری مختلفی برای استفاده کردن وجود دارد و در حال حاضر برای توسعه اپلیکیشن های موبایل دو الگوی MVP و MvvM بیشترین محبوبیت و دارند.
در این مطلب قصد داریم که باهمدیگه از یک پکیج بسیار عالی کمک بگیریم تا الگوی MVP را در پروژه فلاتر پیاده سازی کنیم.
MVP چیست
هدف اکثر الگوها جدا کردن برنامه به بخش های مختلف می باشد در اینجا هم ما برنامه و به سه بخش کلی تقسیم میکنیم به شکل زیر:
Model: وظیفه نگهداری اطلاعات را بر عهده دارد.
View: این بخش مسئول طراحی رابط کاربری برنامه و نمایش اطلاعات دریافتی از Presenter می باشد.
Presenter: به عنوان یک پل ارتباطی بین Model و View عمل می کند زیرا این دو بخش نباید بصورت مستقیم با هم در ارتباط باشند.
مزایا استفاده از MVP
- جدا کردن بخش منطقی برنامه از رابط کاربری
- جلوگیری از ارتباط مستقیم Model با بخش View
- آسان تر شدن نوشتن تست برای کد ها
برای شروع کار پکیج mvp را وارد پروژه مورد نظر کنید.
برای پیاده سازی این الگو از پروژه پیش فرض خود فلاتر استفاده میکنیم و بازنویسی انجام میدیم.
کلاس مدل را به شکل زیر پیاده سازی میکنیم.
گفتیم که مدل مسئول نگهداری اطلاعات برنامه هست به همین خاطر counter را در آن تعریف میکنیم.
class MainModel {
MainModel({this.counter = 0});
int counter;
}
حالا نیاز به یک Presenter داریم تا به رویداد های برنامه که در اینجا همان عمل کلیک کردن کاربر روی دکمه هست واکنش نشان دهد.
class MainPresenter extends MvpPresenter<MainModel, MainScreenState> {
@override
void initializeViewModel() {
viewModel = MainModel();
}
void incrementButtonClick() {
viewModel.counter++;
callback(viewModel);
}
}
viewModel یک آبجکت از کلاس MainModel هست به همین خاطر به counter دسترسی دارد و با هر بار کلیک یکی به مقدار آن اضافه میکند.
در نهایت نوبت به ساخت View میرسد.
در این کلاس یک نمونه از کلاس MvpPresenter میسازیم تا مقدار counter را دریافت کنیم و همچنین رویداد کلیک را پیاده سازی کنیم.
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MVP Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MainScreen(title: 'MVP Demo'),
);
}
}
class MainScreen extends StatefulWidget {
final presenter = MainPresenter();
MainScreen({Key key, this.title}) : super(key: key);
final String title;
@override
MainScreenState createState() => MainScreenState();
}
class MainScreenState extends MvpScreen<MainScreen, MainModel> {
@override
void initializeViewModel() {
viewModel = MainModel();
}
@override
void initState() {
super.initState();
// Always remember to bind the presenter in initState().
widget.presenter.bind(applyState, this);
}
@override
void dispose() {
super.dispose();
// And remember to release presenter binding in dispose().
widget.presenter.unbind();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
"${viewModel.counter}",
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
widget.presenter.incrementButtonClick();
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
دقت کنید که کلاس State شما حتما باید از کلاس MvpScreen<MainScreen, MainModel> ارث بری کند.
مطالب زیر را حتما مطالعه کنید
آموزش پیاده سازی دیتابیس ObjectBox در فلاتر
آموزش اتصال اپلیکیشن فلاتر به پرینتر بلوتوثی
آموزش پیاده سازی معماری MVVM در فلاتر
روش های افزایش امنیت اپلیکیشن در فلاتر
آموزش کار با پکیج Freezed در فلاتر
آموزش ویجت SafeArea در فلاتر
3 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام داداش ببخش من یکم کامتنی که میزارم طولانیه اگه وقت کردی لطفا جواب منو بده تو تو این کاری من میخوام ازت مشورت بگیرم.
میشه تو جواب همین کامنت، معماری هایی که میتونیم توی فلاتر استفاده کنیم رو برام اسم ببری اگه برات زحمت نیست میشه یه منبع خوبم ازشون معرفی کنی مثلا من برای mvc منبع خوبی پیدا نکردم.
یه چیز دیگه داداش تو، توی این کاری بازارش چطوره من چون موبایل رو با فلاتر شروع کردم واسه یادگیری خیلی استرس و وسواس فکری دارم دارم میترسم بعدا پشیمون بشم چرا با نیتیو شروع نکردم.
شاید با اینکه رشتم مهندسی نرم افزاره نگرانیم خنده دار باشه.
سلام
معماری های نرم افزار تو همه پلتفرم ها قابل استفاده و پیاده سازی هستند وابستگی به زبان برنامه نویسی ندارند مهم شی گرایی بودنه.
پس معماری هایی که وجود دارند همه داخل فلاتر هم قابل استفاده است, یک سری معماری های دیگه هستند که مخصوص فلاتر هستند تقریبا مثل bloc, provider و…
درباره mvc هم پیشنهاد نمیکنم روی موبایل از mvc استفاده کنید بهتر از mvp, mvvm استفاده کنید یا همین bloc.
بازار کار هم تقریبا تکنولوژی جدیدی هست و باید منتظر رونق گرفتنش بشید میتونید داخل سایت های کاریابی مثل جابینجا و… بررسی کنید از لحاظ بازار کار.
خیلی ازت ممنونم داداش ، خیلی کمکم کردی نمیدونم چجوری ازت تشکر کنم .