مقدمة إلى نمط BLoC في Flutter: تعلم الأساسيات

تطوير تطبيقات Flutter يحتاج إلى هندسة ممتازة. نمط BLoC (Business Logic Component) يعتبر من الأنماط الشائعة والفعالة. يساعد هذا النمط في فصل منطق الأعمال عن واجهة المستخدم، مما يسهل الصيانة وإعادة الاستخدام.

نمط BLoC هو نهج لإدارة الحالة في تطبيقات Flutter. يتم تقسيم التطبيق إلى مكونات منفصلة: واجهة المستخدم، والمنطق، والبيانات. يستخدم هذا النمط المفاهيم الأساسية مثل الأحداث (Events) والحالات (States) وفئة BLoC لإدارة تدفق البيانات وتحديثات الحالة بطريقة منظمة وفعالة.

باستخدام نمط BLoC بشكل صحيح، يمكنك بناء تطبيقات Flutter قابلة للتوسع والاختبار بسهولة. توفر هذه الهندسة المعمارية فصلاً واضحًا بين المكونات المختلفة، مما يسهل عملية التطوير والصيانة على المدى الطويل.

النقاط الرئيسية

• نمط BLoC هو نهج فعال لإدارة الحالة في تطبيقات Flutter
• يساعد نمط BLoC في فصل منطق الأعمال عن واجهة المستخدم
• يستخدم نمط BLoC المفاهيم الأساسية مثل الأحداث والحالات وفئة BLoC
• يوفر نمط BLoC فصلاً واضحًا بين المكونات المختلفة للتطبيق
• يسهل نمط BLoC عملية التطوير والصيانة على المدى الطويل

ما هو نمط BLoC في Flutter؟

نمط BLoC هو طريقة تصميم برمجي تستخدم في تطبيقات Flutter. يهدف إلى فصل المنطق التجاري عن واجهة المستخدم. هذا يسهل صيانة التطبيق وإعادة استخدامه.

يتم تقسيم التطبيق إلى ثلاثة أجزاء رئيسية: الأحداث، والحالات، وفئة BLoC. الأحداث هي الإجراءات التي يؤديها المستخدم أو النظام. الحالات هي حالة التطبيق الحالية. وفئة BLoC هي المسؤولة عن معالجة الأحداث وتحديث الحالة.

عند حدوث حدث، تستقبل فئة BLoC هذا الحدث. ثم تقوم بمعالجته. بناءً على نوع الحدث، تقوم فئة BLoC بتنفيذ المنطق المناسب وتحدث الحالة.

بعد تحديث الحالة، يتم إشعار واجهة المستخدم بالتغيير. وبالتالي، يتم تحديث واجهة المستخدم تلقائيًا.

يساعد نمط BLoC في الحفاظ على فصل المخاوف في التطبيق. هذا يسهل تطوير وصيانة التطبيقات الكبيرة والمعقدة.

فيما يلي مقارنة بين نمط BLoC وبعض أنماط إدارة الحالة الأخرى في Flutter:

باستخدام نمط BLoC، يمكنك بناء تطبيقات Flutter قابلة للتطوير والصيانة بسهولة. التركيز هنا هو على فصل المنطق التجاري وواجهة المستخدم.

مزايا استخدام نمط BLoC في تطبيقات Flutter

نمط BLoC يوفر فوائد كثيرة في تطوير تطبيقات Flutter. يساعد في تحسين بنية الكود وزيادة إمكانية إعادة استخدامه. كما يسهل عملية الاختبار.

فصل المنطق عن واجهة المستخدم

نمط BLoC يفصل منطق الأعمال عن واجهة المستخدم. يتم وضع منطق البيانات وإدارة الحالة في فئات BLoC. بينما تركز واجهة المستخدم على عرض البيانات وتلقي تفاعلات المستخدم.

هذا الفصل يجعل الكود أكثر وضوحًا وسهولة في الصيانة. يمكن تعديل منطق الأعمال دون التأثير على واجهة المستخدم، والعكس صحيح.

إمكانية إعادة استخدام الكود

نمط BLoC يتيح إمكانية إعادة استخدام الكود بسهولة. يمكن استخدام فئات BLoC في أجزاء مختلفة من التطبيق أو حتى في مشاريع أخرى. على سبيل المثال، فئة BLoC لإدارة المصادقة يمكن استخدامها في شاشات متعددة دون الحاجة لإعادة كتابة المنطق.

“إعادة استخدام الكود هي إحدى الفوائد الرئيسية لنمط BLoC، حيث يمكن استخدام فئات BLoC في أجزاء مختلفة من التطبيق، مما يوفر الوقت والجهد ويقلل من فرص حدوث الأخطاء.”

سهولة الاختبار

نمط BLoC يسهل اختبار التطبيق بشكل كبير. يمكن اختبار فئات BLoC بشكل مستقل عن واجهة المستخدم. هذا يسمح بإجراء اختبارات وحدة شاملة لمنطق الأعمال.

يضمن هذا عمل التطبيق بشكل صحيح ويقلل من احتمالية وجود أخطاء. يمكن إنشاء بيانات اختبارية وتمريرها إلى فئات BLoC بسهولة لاختبار سلوكها في سيناريوهات مختلفة.

باستخدام نمط BLoC، يمكنك الاستفادة من هذه المزايا. يمكنك بناء تطبيقات Flutter قوية وقابلة للصيانة بسهولة.

مكونات نمط BLoC الأساسية

نمط BLoC يتكون من ثلاثة مكونات: الأحداث، والحالات، وفئة BLoC. هذه المكونات تعمل معًا لإنشاء تدفق بيانات أحادي الاتجاه. كما تمكن من فصل المنطق عن واجهة المستخدم في تطبيقات Flutter.

الأحداث (Events)

الأحداث هي الإدخالات التي تتلقاها فئة BLoC. يمكن أن تكون هذه الأحداث أفعالًا من واجهة المستخدم أو بيانات واردة من مصدر خارجي. تُستخدم الأحداث لتشغيل تغييرات الحالة داخل فئة BLoC.

مثال: في تطبيق للتسوق عبر الإنترنت، حدث “إضافة عنصر إلى سلة التسوق” يرسل بيانات إلى فئة BLoC. فئة BLoC تُعالج هذا الحدث وتحديث حالة سلة التسوق.

الحالات (States)

الحالات تمثل حالة التطبيق في لحظة معينة. تُصدر فئة BLoC حالات جديدة استجابةً للأحداث. لواجهة المستخدم يمكنها الاستماع لهذه الحالات وتحديث واجهة المستخدم بناءً عليها.

مثال: في تطبيق التسوق عبر الإنترنت، الحالات قد تكون “سلة التسوق فارغة” أو “سلة التسوق تحتوي على عناصر”. واجهة المستخدم تعرض محتويات سلة التسوق أو رسالة “سلة التسوق فارغة” بناءً على الحالة.

فئة BLoC

فئة BLoC هي المكون المركزي في نمط BLoC. تتلقى الأحداث كمدخلات، وتعالجها، وتصدر حالات جديدة كمخرجات. تحتوي فئة BLoC على المنطق التجاري للتطبيق، مما يسمح بفصل المنطق عن واجهة المستخدم.

تستخدم فئة BLoC دفق (Stream) لبث الحالات إلى واجهة المستخدم. لواجهة المستخدم يمكنها الاشتراك في هذا الدفق والاستماع إلى التغييرات في الحالة. عندما تتلقى فئة BLoC حدثًا جديدًا، تعالج الحدث وتصدر حالة جديدة في دفق الحالة.

من خلال فهم الأحداث والحالات وفئة BLoC وكيفية تفاعلها، يمكنك بناء تطبيقات Flutter قابلة للصيانة ومنظمة باستخدام نمط BLoC.

كيفية إنشاء مشروع Flutter جديد

لبدء تطوير تطبيق باستخدام Flutter، ابدأ بإنشاء مشروع جديد. يمكنك ذلك بسهولة من سطر الأوامر أو بيئة التطوير المفضلة لديك.

لإنشاء مشروع جديد باستخدام سطر الأوامر، اتبع هذه الخطوات:

1. افتح سطر الأوامر أو Terminal
2. انتقل إلى الدليل الذي ترغب في إنشاء المشروع فيه
3. اكتب الأمر التالي: flutter create my_app (استبدل my_app باسم مشروعك)
4. انتظر حتى ينتهي Flutter من إنشاء المشروع

يمكنك أيضًا استخدام بيئة التطوير المتكاملة (IDE) مثل Android Studio و Visual Studio Code. هذه البيئات توفر دعمًا مدمجًا لـ Flutter.

في Android Studio:

1. افتح Android Studio
2. اختر “Start a new Flutter project” من الشاشة الرئيسية
3. حدد “Flutter Application” كنوع المشروع
4. اتبع الخطوات المتبقية لتخصيص إعدادات المشروع وإنشائه

في Visual Studio Code:

1. افتح Visual Studio Code
2. تأكد من تثبيت ملحق Flutter و Dart
3. اضغط على Ctrl + Shift + P لفتح لوحة الأوامر
4. اكتب “Flutter: New Project” واختر الأمر من القائمة
5. حدد الدليل الذي ترغب في إنشاء المشروع فيه وأدخل اسم المشروع

بعد إنشاء المشروع، ستجد بنية المجلدات التالية:

• lib/: يحتوي على كود Dart الخاص بالتطبيق
• android/: يحتوي على كود محدد لنظام Android
• ios/: يحتوي على كود محدد لنظام iOS
• web/: يحتوي على كود محدد للويب
• test/: يحتوي على اختبارات التطبيق

بعد إنشاء المشروع، افتح الملف lib/main.dart وبدء كتابة كود التطبيق. هذا الملف يحتوي على فئة MyApp و MyHomePage التي يمكن تعديلها حسب احتياجاتك.

مع إعداد المشروع الأولي، أنت الآن جاهز لمواصلة العمل وتطبيق نمط BLoC في مشروعك.

إعداد المشروع لاستخدام نمط BLoC

قبل استخدام نمط BLoC في مشروع Flutter، يجب إعداد المشروع بشكل صحيح. هذا يشمل إضافة الحزم اللازمة وإنشاء ملفات BLoC بطريقة منظمة.

إضافة الحزم اللازمة

لبدء استخدام نمط BLoC، نحتاج إلى حزم معينة. الحزمة الأساسية هي flutter_bloc، التي توفر الأدوات لتنفيذ نمط BLoC.

لإضافة حزمة flutter_bloc، نضيف السطر التالي في ملف pubspec.yaml:

flutter_bloc: ^latest_version

إنشاء ملفات BLoC

بعد إضافة الحزم، ننشأ ملفات BLoC في هيكل المشروع. من الأفضل تنظيمها في مجلد منفصل مثل blocs أو logic.

في مجلد blocs، ننشأ ملفات لكل جزء من BLoC:

• ملف الأحداث (events): يحتوي على تعريفات الأحداث.
• ملف الحالات (states): يحتوي على تعريفات الحالات المختلفة.
• ملف فئة BLoC: يحتوي على فئة BLoC نفسها.

على سبيل المثال، إنشاء BLoC لإدارة المهام يحتاج إلى ملفات كالتالي:

بتنظيم ملفات BLoC بشكل صحيح، يسهل العثور على الأجزاء ذات الصلة.

بعد إعداد المشروع وإنشاء ملفات BLoC، نستعد لتنفيذ نمط BLoC في تطبيق Flutter.

إنشاء الأحداث والحالات

في نمط BLoC لـ Flutter، من المهم معرفة كيفية إنشاء الأحداث والحالات. هذه المكونات أساسية في تدفق البيانات وإدارة التطبيق. دعونا نلقي نظرة على كيفية عملها في تطبيقات Flutter.

تعريف الأحداث

الأحداث هي الإجراءات أو التفاعلات في التطبيق. يمكن أن تشمل النقر على الأزرار، إدخال النصوص، أو تحديثات البيانات. لإنشاء الأحداث في نمط BLoC، نقوم بإنشاء فئات خاصة.

مثلاً، في تطبيق لإدارة المهام، يمكننا تعريف أحداث مثل:

• AddTaskEvent: حدث عند إضافة مهمة جديدة.
• UpdateTaskEvent: حدث عند تحديث مهمة.
• DeleteTaskEvent: حدث عند حذف مهمة.

تعريف الحالات

الحالات تعكس حالة التطبيق في لحظة معينة. تعكس التغييرات التي تحدث بسبب الأحداث. عند تعريف الحالات، نقوم بإنشاء فئات تمثل هذه الحالات.

لنأخذ مثالًا على تطبيق إدارة المهام، يمكننا تعريف الحالات التالية:

• TasksLoadingState: حالة عند تحميل المهام.
• TasksLoadedState: حالة عند تحميل قائمة المهام بنجاح.
• TasksErrorState: حالة عند وجود خطأ في تحميل المهام.

بإنشاء الأحداث والحالات بشكل صحيح، نستطيع بناء تطبيق منظم. هذا يسهل إعادة استخدام الكود واختباره.

تذكر، الهدف هو إنشاء الأحداث والحالات بطريقة تعكس متطلبات التطبيق وتدفق البيانات بشكل واضح وموجز.

في القسم التالي، سنستكشف كيفية بناء فئة BLoC ودمجها مع الأحداث والحالات.

بناء فئة BLoC

عند بناء فئة BLoC، يجب أن نتبع منطق معالجة الأحداث وإصدار الحالات بدقة. فئة BLoC هي القلب في هذا النمط. تتلقى الأحداث من المستخدم وتعالجها لإصدار الحالات المناسبة.

لإنشاء فئة BLoC، نستخدم StreamController لإدارة الحالات. StreamController يسمح بإرسال الحالات الجديدة وتلقي الأحداث. نستخدم StreamController لإصدار الحالة الجديدة بعد معالجة الحدث.

class CounterBloc extends Bloc {
CounterBloc() : super(0);

@override
Stream mapEventToState(CounterEvent event) async* {
switch (event) {
case CounterEvent.increment:
yield state + 1;
break;
case CounterEvent.decrement:
yield state – 1;
break;
}
}
}

في هذا المثال، لدينا فئة CounterBloc. تعالج أحداث CounterEvent وتصدر حالات من نوع int. تبدأ الحالة بـ 0.

في الدالة mapEventToState، نستخدم switch للتحقق من نوع الحدث. بناءً على ذلك، نستخدم المنطق المناسب وإصدار الحالة الجديدة. في الحدث increment، نقوم بزيادة الحالة. في الحدث decrement، نقوم بتقليلها.

هناك أنماط عديدة لإنشاء فئة BLoC. الهدف هو فصل المنطق عن واجهة المستخدم. هذا يجعل الكود قابلًا لإعادة الاستخدام وسهل الاختبار.

بتبع هذه الخطوات، يمكنك بناء فئات BLoC قوية. هذا يضمن فصل المنطق عن واجهة المستخدم. كما يسهل إعادة استخدام الكود واختباره.

ربط واجهة المستخدم بفئة BLoC

بعد إنشاء فئة BLoC والأحداث، نأتي لمرحلة ربط واجهة المستخدم بها. هذا لاستخدام البيانات وتحديثها بناءً على التغييرات. نستخدم أدوات مثل BlocProvider و BlocBuilder من مكتبة Flutter BLoC.

استخدام BlocProvider

BlocProvider توفر فئة BLoC لجميع عناصر واجهة المستخدم. يمكن لأي عنصر تحت BlocProvider الوصول لفئة BLoC وإرسال الأحداث. نضع BlocProvider عادة في أعلى شجرة العناصر، مثل داخل فئة MyApp.

استخدام BlocBuilder

BlocBuilder تساعد في بناء واجهة المستخدم بناءً على حالة BLoC. تتلقى BlocBuilder التحديثات تلقائيًا عند تغيير حالة BLoC. هذا يضمن عرض البيانات المحدثة دائمًا في واجهة المستخدم.