0

بلاگ

آرشیو مطالب > آموزش Flutter > آموزش الگوی Bloc در فلاتر

آموزش الگوی Bloc در فلاتر

سپتامبر 29, 2019
ارسال شده توسط
آموزش Flutter
7.99k بازدید

الگوهای برنامه نویسی یکی از مسائلی است تفاوت بین یک برنامه نویسی حرفه ای و تازه کار را مشخص می کند.

معمولا مجاب کردن افراد تازه کار به استفاده از یک معماری و الگوی بخصوص کار سختی می باشد چون به گمان اکثر افراد فقط توجه به خروجی مهم هست. اما اگر به کیفیت کار خود اهمیت میدهید حتما باید چاچوب مشخصی برای پروژه خودتون مشخص کنید.

با بزرگ و بزرگ تر شدن پروژه و پیچیده شدن کلاس ها مدیریت کردن تبدیل به کار دشواری می شود و زمانی که بخواهید قابلیتی به برنامه کم و زیاد کنید زمان زیادی و از دست میدهد و باگ های مختلفی در برنامه ایجاد می شود.

در برنامه نویسی فلاتر یکی از الگوهای طراحی پر کاربرد الگوی Bloc می باشد.

قبلا در مورد Bloc به شکل مختصر در مطلب زیر صحبت کرده بودیم.

روش های مدیریت State در فلاتر

در این مطلب بصورت تئوری با Bloc آشنا میشیم و در ویدیو بالا هم بصورت عملی نحوه پیاده سازی این الگوی برنامه نویسی در فلاتر را بررسی می کنیم.

بلاک چیست؟

در واقع Bloc شکل کوتاه شده Business Logic Components هست که در سال 2018 توسط گوگل به عنوان روشی برای مدیریت State معرفی شد. این الگو به ما اجازه میدهد از یک مکان مشخص به State ها دسترسی داشته باشیم.

برای درک بهتر نحوه کار Bloc میتونید به دیاگرام زیر نگاه کنید تا با روند کار جریان اطلاعات از صفحه رابط کاربری تا بخش دیتا آشنا شوید.

آموزش bloc فلاتر

Bloc هیچگونه رفرنسی به ویجت های داخل رابط کاربری ندارد و همچنین ویجت های رابط کاربری هم فقط نمایش دهنده تغییرات اطلاعات Bloc هستند.

همانطور هم که احتمالا خودتون متوجه شدید این الگو بسیار شبیه به الگوهای MVVM,MVP هست, برای مثال ViewModel با Bloc جایگزین شده است.

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

در هر زمانی که نیازی به تغییر اطلاعات یا همان State باشد یک رویداد که به آن Event میگوییم از طریق کلاس بلاک ایجاد میشود و براساس نوع رویداد عملیات مورد نظر انجام شده و نتیجه به کلاس State که طراحی کرده ایم ارسال میشود. در این لحظه ویجت های مورد نظر اطلاعات جدید را از کلاس State دریافت میکنند و به کاربر نمایش میدهند.

Stream چیست؟

برای درک نحوه کار بلاک لازم هست که از استریم ها اطلاعات کافی داشته باشید.

به جریان مداوم از هر چیزی استریم میگوییم. در اینجا هم منظور یک جریان همیشگی از اطلاعات می باشد.

ویژگی های مهم استریم شامل موارد زیر می باشد.

  • StreamController: وظیفه کنترل استریم را برعهده دارد.
  • StreamTransformer: عملیاتی که روی ورودی ها انجام می شود.
  • StreamBuilder: این متد یک استریم به عنوان ورودی میگیرد و با استفاده از بخش builder میتونیم ویجت هایی که میخواهیم در زمان تغییر اطلاعات آپدیت شوند را داخلش قرار دهیم.
  • subscription: مشخص کننده نوع استریم است. هر استریم به دو نوع کلی تقسیم میشود. بصورت پیش فرض هر استریم در زمان ساخته شدن از نوع single subscription است یعنی تنها یک آبجکت یا ویجت میتواند در لحظه به تغییرات این استریم گوش دهد یا اطلاعات جدید را دریافت کند. اما نوع دیگری نیز وجود دارد به نام broadcast که بینهایت ویجت یا آبجکت به اطلاعات این استریم میتوانند دسترسی داشته باشند.

در این ویدیو باهمدیگه یاد میگیریم که چگونه از طریق کتابخانه های bloc و flutter_bloc برای پیاده سازی الگوی بلاک کمک بگیریم.

با استفاده از یک پروژه عملی نحوه کار Bloc و به صورت کامل بررسی میکنیم.

پیوست: در ویدیو بالا در انتهای پروژه در فایل main کد زیر را قرار دهید.

@override
  void dispose() {
    _bloc.dispose();
  }

حتما در متد dispose باید آبجکت بلاک خودمون را dispose کنیم.

ویدیو آموزشی برای نسخه های ابتدایی از الگوی بلاک میباشد که امروزه دستخوش تغییرات بسیار زیادی شده است.

شروع کار با بلاک

برای استفاده از الگوی بلاک نیاز به دو پکیج bloc و flutter_bloc دارید که همانند دیگر پکیج ها به راحتی آنها را نصب کنید.

dependencies:
  flutter_bloc: ^7.3.1
  bloc: ^7.2.1

در ادامه نیاز به ایجاد چند کلاس مختلف خواهیم داشت. کلاس اول مربوط به رویدادهای مورد نیاز میباشد که به عنوان اینترفیس عمل میکنند و هر زمان نیاز به یک رویداد بود ایترفیس مورد نظر را فراخوانی میکنیم.

مثالی که بررسی میکنیم مشابه پروژه پیشفرض فلاتر است که با کلیک کردن روی یک دکمه مقدار عدد مورد نظر افزایش پیدا میکند.

abstract class CounterEvent {}

class Increment extends CounterEvent {}

کلاس CounterEvent کلاس رویداد اصلی ما است و باقی رویدادهای ما نیز باید از این کلاس ارث بری کنند. البته رویدادهایی که برای کلاس بلاک در ادامه خواهیم ساخت. هر صفحه از اپلیکیشن میتواند شامل یک کلاس بلاک و رویداد جدا باشد.

هر زمان که نیاز بود یک مقدار به عدد مورد نظر اضافه کنیم این رویداد را صدا خواهیم زد.

در ادامه کلاس bloc برنامه را ایجاد میکنیم.

class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    on<Increment>((event, emit) => emit(state + 1));
  }
}

این کلاس حتما باید از کلاس Bloc ارث بری کند و سپس کلاس رویداد که و کلاس State مشخص شود.

در این مثال چون State پیچیده ای نداریم از نوع داده int به عنوان State استفاده میکنیم و کلاس جداگانه ای برای آن ایجاد نمیکنیم.

در متد سازنده با فراخوانی متد super مقدار پیش فرض state را برابر عدد صفر قرار میدهیم.

در ادامه یک متد ایجاد میکنیم که نوع آن برابر است با نام رویدادی که پیش تر ساخته بودیم. این متد هربار که این رویداد صدا زده شود اجرا میشود و وظیفه آن اضافه کردن یک واحد به State میباشد.

اما نوبت به نحوه استفاده از این کلاس رسیده است.

Future<void> main() async {
  final bloc = CounterBloc();


  bloc.add(Increment());

  await Future.delayed(Duration.zero);

  print(bloc.state); 

  await bloc.close();
}

ابتدا نیاز است تا یک نمونه از کلاس بلاک ایجاد کینم.

برای ایجاد یک رویداد از متد add کمک میگیریم و به عنوان پارامتر ورودی رویداد مورد نظر را قرار میدهیم. این دستور را میتوانیم برای مثال در بخش کلیک یک دکمه قرار دهیم که با کلیک کردن کاربر روی آن رویداد افزایش یک واحد عدد ایجاد شده و کلاس بلاک آن را انجام میدهد.

برای نمایش اطلاعات هم از نمونه ساخته شده ویژگی state را فراخوانی میکنیم.

اشتراک گذاری:
برچسب ها:

مطالب زیر را حتما مطالعه کنید

44 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • سلام خسته نباشید
    مرسی برای این ویدیوی آموزشی
    خیلی قشنگ توضیح دادید واقعا خسته نباشید
    لطفا تو یک ویدیو دیگه آموزش بدید که چطور می تونیم داخل یک bloc چندین state داشته باشیم
    ممنونم

    پاسخ

    • سلام
      ممنون, حتما ویدیو های بیشتری در آینده گذاشته میشه.
      شما میتونید بجای تعریف یدونه فیلد int current چندین نوع فیلد دیگه هم تعریف کنید.

      پاسخ

  • سلام خیلی ممنون واقعا قشنگ توضیح میدید خلاصه ومفید فقط اگه ممکنه با ورژن جدید یه مثال حتی اگه شده متن نه ویدیو بذارید چون تو ورژن جدید تو قسمت bloc عوض شده
    Stream mapEventToState(
    UserEvent event,
    ) async* {}
    همینطور که میبینید کنار event نمیشه currentState گذاشت تا بهشون دسترسی داشته باشیم

    پاسخ

    • سلام
      تو دوره جدیدی که در حال ضبط هست از ورژن 1.0 بلاک استفاده شده و تمام این ها بررسی میشه, برای بقیه دوستان هم در همین پست یا پست جدیدی نحوه کار کردن با ورژن جدید و حتما آموزش خواهیم داد.

      پاسخ

  • سلام مهندس حسام.
    لینک ویدیو مشکل داره و باز نمیشه…
    من هر 2 دوره ی آموزشیتون رو دیدم خیلی خوب بود
    لطفا یک دوره اختصاصی فقط در مورد طراحی اپلیکیشن با bloc و RxDart و Dio بزارین که نحوه صحیح کار با stream و ارتباط اینترنتی رو در معماری bloc یاد بگیریم…
    مشکل لینک ویدیو رو هم رفع کنید …
    ممنون

    پاسخ

  • سلام
    ممنون بخاطر آموزش خوبتون اگه امکانش هست مثال هایی پیشرفته تر با event بیشتر در مورد Bloc قرار بدید

    پاسخ

    • سلام خواهش میکنم, برای آموزش های بیشتر درباره بلاک میتونید از دوره “طراحی اپلیکیشن وردپرس استفاده کنید”

      پاسخ

  • سلام دوست عزیز
    بسیار بسیار سپاسگزارم از توضیحات و آموزش این بحث
    نکته ای که دارم اینکه در این زمان که من دارم این موضوع را بررسی می کنم فکر میکنم (البته مطمعن نیستم) احتمالا تغییراتی در ساختار فلاتر بوجود اومده که دیگه تابع mapEventToState پارامتر State را قبول نمی کنه و فقط مجاز به دریافت Event هست اگر اینطوره لطفا در تغییرات احتمالی را بشکلی مشخص کنید.

    با سپاس
    امیر
    http://www.amirhome.com

    پاسخ

  • سلام استاد واقعا مفید اگه بتونید یه ویدیو از bloc با سرویس بزارید ممنون میشم یا یه توضیح بدید ممنوم میشم چون واقعا اموزشی از این نیست به زبان فارسی

    پاسخ

  • ممنون از اموزش خوب و کاربردی که تهیه کردید اگه امکانش هست بدون کتابخانه یعنی از صفر تا صد خودتون پیاده سازی کنید تا مطمئن بشم درست درک کردم عملکرد این معماری رو و بهتر متوجه بشم چه اتفاقاتی داخل برنامه می افته خیلی ممنون

    پاسخ

  • سلام مشتاقانه منتظر قسمت های بعدی این آموزش هستم که بتوانم api ها را با استفاده از بلاک پیاده سازی کنم.
    اگر سایت این امکان را داشته باشد که انتشار ویدیوهای جدید رو توسط ایمیل یا پیامک بهمون اطلاع بده عالی میشد.

    پاسخ

    • سلام داخل کانال تلگرام پست های جدید اطلاع رسانی میشوند.
      برای کار با api میتونید به آموزش Rxdart مراجعه کنید

      پاسخ

  • سلام اینکه بدون استفاده از کتابخونه و با امکانات خود فلاتر بتونیم این کارو انجام بدیم اموزش ندادین هنوز؟

    پاسخ

    • خود مستندات نسخه جدید پکیج کامل هست با بررسی مثال ها متوجه میشید ولی به زودی یه آموزش با نسخه جدید 6 داخل سایت قرار میدم.

      پاسخ

  • سلام. سوالم اینه که بهترین معماری برای فلاتر چه معماری ای هست؟
    bloc
    provider
    MVC
    یا چی؟

    پاسخ

    • سلام
      bloc, provider معماری مخصوص مدیریت state میباشند و mvc معماری نرم افزار هست بهترین حالت ترکیب معماری مدیریت state با یکی از معماری های نرم افزار است مثل mvc,mvp,mvvm

      پاسخ

  • Bloc آیا دیزاین پترنه دوست عزیز؟ Bloc نوعی معماری است نه دیزاین پترن. هرچند این مورد از محتوای ویدیو کم نمیکنه اما اصطلاح بکار برده شده اشتباهه.

    پاسخ

دیدگاهتان را بنویسید