استفاده از معماری 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> ارث بری کند.
برای مطالعه بیشتر درباره معماری های نرم افزار پیشنهاد میکنم از آموزش معماری MVVM نیز استفاده کنید.
چرا باید معماری نرم افزار انتخاب کنیم؟
سازماندهی به پروژه: معماری نرمافزار برای سازماندهی و ترتیببندی منطق و عناصر مختلف نرمافزار مورد استفاده قرار میگیرد.
این کار به تیمهای توسعهدهنده کمک میکند تا فهم بهتری از جریان کار، وابستگیها، و تعاملات بین اجزا داشته باشند.
این سازماندهی سبب میشود که توسعهدهندگان بهتر بتوانند نرمافزار را مدیریت و توسعه دهند و همچنین با دیگر اعضای تیم به طور هماهنگ کار کنند.
قابلیت تغییرپذیری: معماری نرمافزار، نحوه سازماندهی و ارتباط بین اجزا را تعیین میکند.
با استفاده از یک معماری مناسب، میتوانید نرمافزار را به آسانی تغییر دهید و نیازمندیها، تغییرات و اصلاحات را بهسرعت پیادهسازی کنید.
به علاوه، در صورت استفاده از معماری مناسب، افزایش قابلیت تغییرپذیری و پذیرش تغییرات در طول زمان بهبودی مستمر در نرمافزار خواهد داشت.
قابلیت انعطافپذیری: معماری نرمافزار میتواند توسعهپذیری نرمافزار را افزایش دهد و به سادگی امکان اضافه کردن و توسعه قابلیتها و ویژگیهای جدید را فراهم کند.
مطالب زیر را حتما مطالعه کنید
آموزش پیاده سازی لینت Lint در برنامه نویسی فلاتر
آموزش الگوی تزریق وابستگی در فلاتر Dependency Injection
کتاب های آموزش برنامه نویسی فلاتر + دانلود PDF
آموزش نصب فلاتر و رفع خطاهای رایج ساخت پروژه + ویدیو
آموزش استفاده از نقشه در فلاتر
آموزش ساخت Navigation Drawer در فلاتر
3 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام داداش ببخش من یکم کامتنی که میزارم طولانیه اگه وقت کردی لطفا جواب منو بده تو تو این کاری من میخوام ازت مشورت بگیرم.
میشه تو جواب همین کامنت، معماری هایی که میتونیم توی فلاتر استفاده کنیم رو برام اسم ببری اگه برات زحمت نیست میشه یه منبع خوبم ازشون معرفی کنی مثلا من برای mvc منبع خوبی پیدا نکردم.
یه چیز دیگه داداش تو، توی این کاری بازارش چطوره من چون موبایل رو با فلاتر شروع کردم واسه یادگیری خیلی استرس و وسواس فکری دارم دارم میترسم بعدا پشیمون بشم چرا با نیتیو شروع نکردم.
شاید با اینکه رشتم مهندسی نرم افزاره نگرانیم خنده دار باشه.
سلام
معماری های نرم افزار تو همه پلتفرم ها قابل استفاده و پیاده سازی هستند وابستگی به زبان برنامه نویسی ندارند مهم شی گرایی بودنه.
پس معماری هایی که وجود دارند همه داخل فلاتر هم قابل استفاده است, یک سری معماری های دیگه هستند که مخصوص فلاتر هستند تقریبا مثل bloc, provider و…
درباره mvc هم پیشنهاد نمیکنم روی موبایل از mvc استفاده کنید بهتر از mvp, mvvm استفاده کنید یا همین bloc.
بازار کار هم تقریبا تکنولوژی جدیدی هست و باید منتظر رونق گرفتنش بشید میتونید داخل سایت های کاریابی مثل جابینجا و… بررسی کنید از لحاظ بازار کار.
خیلی ازت ممنونم داداش ، خیلی کمکم کردی نمیدونم چجوری ازت تشکر کنم .