استفاده از معماری 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 نیز استفاده کنید.

چرا باید معماری نرم افزار انتخاب کنیم؟

سازمان‌دهی به پروژه: معماری نرم‌افزار برای سازماندهی و ترتیب‌بندی منطق و عناصر مختلف نرم‌افزار مورد استفاده قرار می‌گیرد.

 این کار به تیم‌های توسعه‌دهنده کمک می‌کند تا فهم بهتری از جریان کار، وابستگی‌ها، و تعاملات بین اجزا داشته باشند.

 این سازمان‌دهی سبب می‌شود که توسعه‌دهندگان بهتر بتوانند نرم‌افزار را مدیریت و توسعه دهند و همچنین با دیگر اعضای تیم به طور هماهنگ کار کنند.

قابلیت تغییرپذیری: معماری نرم‌افزار، نحوه سازماندهی و ارتباط بین اجزا را تعیین می‌کند.

با استفاده از یک معماری مناسب، می‌توانید نرم‌افزار را به آسانی تغییر دهید و نیازمندی‌ها، تغییرات و اصلاحات را به‌سرعت پیاده‌سازی کنید.

به علاوه، در صورت استفاده از معماری مناسب، افزایش قابلیت تغییرپذیری و پذیرش تغییرات در طول زمان بهبودی مستمر در نرم‌افزار خواهد داشت.

قابلیت انعطاف‌پذیری: معماری نرم‌افزار می‌تواند توسعه‌پذیری نرم‌افزار را افزایش دهد و به سادگی امکان اضافه کردن و توسعه قابلیت‌ها و ویژگی‌های جدید را فراهم کند.