قبل التطرّق إلى مكونات المشروع التي نودّ الإطلاع عليها ووضعها في هذا المشروع , نودّ أولاً أن نضع نظرةً شاملة لهذا المشروع وما يحتوي عليه من تقنيات وما هو بالتحديد..

بداية المشروع عبارة عن تعاملٍ مع ساعي البريد API مع ما يسمى “بالنماذج الوهمية Dummy Models” , وفكرة المشروع أننا سنتعامل مع موقع dummyjson للحصول على نماذج وهمية للمنشورات كي نقوم بعرضها في تطبيقنا ونطلع حينها على أفكارٍ عديدة في كيفية بناء المشاريع التي تتعامل مع ساعي البريد في فلَتر ..

وبدايةً حتى نرسم خارطة لما سنمر عليه , أضع بين يديك التقنيات التي سنستخدمها مع روابط تثبيتها في المشروع , كما أنني جمعت لك الأوامر تحتها لتقوم بنسخها ولصقها في موجّه الأوامر :

1- get_it

2- freezed

3- build_runner

4- dio

5- flutter_riverpod

6- pretty_dio_logger

بامكانك تثبيتها من خلال كتابة الأوامر التالية :

الآن وبعد التثبيت وقبل أن تتجه إلى ملف main قم بوضع تقسيمة الملفات التالية :

— common “وفيها الأمور المشتركة بين الصفحات”

—— network “وفيها ما يتعلق بالمعترضات , سنمر على شرحها لاحقا”

—— services “وفيها الخدمات التي تحتاجها مثل get_it سنمر عليها في وقتها”

— features “وفيها الصفحات وما تحتاجه”

—— home “الصفحة الرئيسية - مجلد”

——— view “مجلد الواجهات”

——— domain “بداخله الحالات والمتحكمات state & controllers”

——— models “النماذج”

——— repo “وهو الجزء المتصل مع ساعي البريد لجلب البيانات

— main

الآن وبعد أن أعددت مجلدات المشروع من المفترض أن تكون بهذا الشكل :

الآن اتجه إلى مجلد services وأضف ملف باسم get_it.dart.

ما هي get it ؟

هي مكتبة اضافية توفر لك استخدام نمط التصميم الأحادي Singlton Design Pattern لتسجّل Rigester داخلها بعض الكلاسات لتستخدمها لاحقاً في أماكن متعددة ..

توفّر get it المساحة في الذاكرة , وتسهّل عليك استدعاء الكلاسات التي تحتاج استخدامها في عدّة أماكن مع الحفاظ على قيمها , كما لو أنك أردت حساب بعض المقاسات مرّة واحدة , فبدلا من أن تعيد حسابها في كل مرة تستدعي الكلاس , تقوم get_it بتسجيله عندها لتستدعيه في أي مكان شئت مع الحفاظ على هذه القيم.

أما من أجل استخدام get_it فالأمر سهل بسيط , اتجه للملف الذي انشأناه قبل قليل ثم انسخ داخله هذا الكود البرمجي :

الآن لنكمل تثبيت مكونات المشروع , عد إلى ملف main.dart احذف كل الأسطر وابدأ بكتابة البرنامج من جديد , نحتاج أن نضيف ما يدعى ب ProviderScope وهو كلاس داخل ريفربود لتفعيل ريفربود داخل المشروع , ثم بعد ذلك نحتاج أن نضيف المكون الاساسي المعتاد لمشاريع فلَتر وهو التطبيق الخام Material App

الآن لنبدأ العمل على الواجهات.

اتجه نحو مجلد

features —> home —> view

ثم انشئ داخله ملف باسم home.dart , وضع داخله كلاس من نوع ConsumerStatefulWidget باسم home حتى يصير على الشكل الآتي:

الفكرة هنا أن كلاسات المستهلكات ستقوم باستقبال الحالة والمتحكم من المزود لاحقاً, لا علينا فنحن الآن بهدف تثبيت الأمور الاساسية ثم سنبدأ بالعمل على كل جزء على حدة.

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