الكورس الثاني: APIs, Provider, Local Storage و Hive
الكورس الثاني بينقلك من مطوّر UI لمهندس تطبيقات فعلي: تتعامل مع APIs حقيقية، Data Models، Provider لإدارة الحالة، Local Storage بأنواعه، وقاعدة بيانات Hive، لحد ما توصل لمشروع تخرج Enterprise يربط بين OpenAI و Hive و SharedPreferences.
في التطبيق ده بنخرج من حدود الجهاز ونتصل بالإنترنت لأول مرة، نجلب بيانات حقيقية من API Ninjas ونعرض Quotes للمستخدم.
أهم المفاهيم:
استخدام حزمة http لعمل http.get وجلب البيانات.
إرسال X-Api-Key داخل Headers لعمل Authentication محترم.
البرمجة غير المتزامنة باستخدام Future / async / await عشان الـ UI ميتجمدش.
تحليل البيانات من JSON باستخدام jsonDecode لاستخراج quote و author.
فحص حالة الاستجابة response.statusCode == 200 واستخدام try-catch لحماية التطبيق من الانهيار.
ملاحظة: بنستخدم setState فقط لتحديث الـ UI، بدون Provider أو Local Storage هنا لسه.
التطبيق الثاني: Data Models و Type Safety (Meals App)
بنرتقي بطريقة تعاملنا مع JSON: بدل ما ناخد قيمة واحدة من الـ API، بنبني Model كامل يمثل الوجبة (MealModel) ونتعامل مع Lists من البيانات.
أهم المفاهيم:
بناء MealModel يمثل هيكل الـ JSON بالكامل.
استخدام factory MealModel.fromJson(Map json) للتحويل من Map (JSON) لكائن (Object) حقيقي.
تحويل قائمة JSON لـ List<MealModel> باستخدام .map().toList().
Type-Safety حقيقي: الكود يحميك من الأخطاء الإملائية في مفاتيح الـ JSON.
التطبيق الثالث: Weather App مع Service Layer و Translator
ده واحد من أهم التطبيقات في الكورس: بنفصل منطق الاتصال بالـ API في Service مستقل، ونتعامل مع JSON متداخل، ونضيف Layer ترجمة لحل مشكلة اللغة.
أهم المفاهيم:
Separation of Concerns: إنشاء WeatherService مستقل مسؤول عن الاتصال بالـ API بعيداً عن UI.
التعامل مع Nested JSON زي json['weather'][0]['description'] و json['main']['temp'].
استخدام حزمة translator لترجمة اسم المدينة من العربية للإنجليزية قبل الإرسال للسيرفر (Localization Hack عملي).
رمي الأخطاء بـ throw Exception والتعامل معاها في الـ UI عن طريق متغير _errorMessage لعرض رسالة واضحة للمستخدم.
التطبيق الرابع: Counter بسيط باستخدام Provider
أول خطوة عملية مع Provider من خلال تطبيق Counter بسيط يوضح الفرق بين setState و State Management مركزي.
فهم ChangeNotifier وكيفية عمل notifyListeners لتحديث الـ UI.
بناء Provider خاص بالكاونتر وزرار لزيادة/إنقاص القيمة.
إدراك الفرق العملي بين setState المحلي و Provider على مستوى الشاشة.
التطبيق الخامس: Cart Screen بإدارة حالة كاملة بـ Provider
بنطوّر استخدام Provider من Counter بسيط إلى Cart Screen حقيقية فيها إضافة/حذف وتعديل عناصر السلة.
إنشاء Provider منفصل لعنصر السلة (CartProvider مثلاً).
دوال لإضافة منتج، حذف منتج، وتعديل الكمية.
ربط الـ UI بالكامل بحالة الـ Cart بحيث أي تغيير يظهر فوراً للمستخدم.
التطبيق السادس: Currency App مع Dio + Provider + CustomPainter
تطبيق ثقيل جداً على مستوى بيئة العمل الحقيقية: API Calls بـ Dio، State Management محترف بـ Provider، ورسم Charts مخصصة بـ CustomPainter.
أهم المفاهيم:
إنشاء CurrencyProvider extends ChangeNotifier لعزل Business Logic عن واجهة المستخدم.
استخدام Dio بدلاً من http مع response.data لقراءة الـ JSON تلقائياً.
رسم Chart مخصص باستخدام CustomPainter, Canvas, Path, cubicTo مع Gradient تحت المنحنى بـ Shader.
حماية TextField من الإدخال الخاطئ باستخدام FilteringTextInputFormatter.allow(RegExp(...)).
التطبيق السابع: Translation App بـ Dio + Provider + POST Requests
هنا بنبني Translator حقيقي: المستخدم يكتب نص، التطبيق يبعت Request POST لسيرفر الترجمة ويرجع له النتيجة.
أهم المفاهيم:
إرسال POST Requests بـ Dio مع data / body و Options & Headers.
استخدام Provider.of<TranslationProvider>(context, listen: false) لتنفيذ دوال بدون إعادة بناء الشاشة.
التفريق بين الاستخدام عبر Provider مرة واحدة، وبين Consumer اللي بيسمع للتغييرات.
التطبيق الثامن: Sentiment Analysis مع Advanced Provider Usage
بنبني تطبيق تحليل مشاعر (Sentiment) لنصوص المستخدم، مع أداء عالي في قراءة الـ Provider، وأنيميشن ضمني في الـ UI.
أهم المفاهيم:
استخدام context.read<T>() لاستدعاء دوال مرة واحدة.
استخدام context.watch<T>() لإعادة بناء UI كامل بناءً على تغييرات Provider.
استخدام context.select<T, R>() للاستماع لمتغير واحد بس (زي isLoading) لتحسين الأداء بشكل كبير.
AnimatedContainer و AnimatedSwitcher لعمل انتقالات ناعمة في لون الخلفية والأيقونات.
إعداد Dio ليرسل البيانات بصيغة application/x-www-form-urlencoded عند الحاجة.
التطبيق التاسع: ChatGPT Clone بسيط مع OpenAI API
هنا بنبني Chat Interface حقيقي يتعامل مع OpenAI: يبعث محادثة كاملة ويرجع الردود، مع إمكانية توليد صور.
أهم المفاهيم:
التوثيق عبر Bearer Token في Headers:Authorization: Bearer $token.
إضافة toJson() في ChatMessage لتحويل الرسائل لـ Map قبل الإرسال:messages.map((e) => e.toJson()).toList().
وجود أكثر من Endpoint في OpenAiApi (واحد للـ Chat وواحد للـ Images).
إدارة List<ChatMessage> داخل Provider مع تحديث حالة التحميل وإضافة رسائل المستخدم والـ API بالتتابع.
التطبيق العاشر: To‑Do App مع SharedPreferences
أول ظهور حقيقي لـ Local Storage: بنبني To‑Do App يحفظ البيانات على موبايل المستخدم حتى بعد إغلاق التطبيق.
أهم المفاهيم:
استخدام shared_preferences مع getInstance / setStringList / getStringList.
تحويل List<Task> إلى List<String> والعكس باستخدام .map().toList().
تهيئة Provider عند التشغيل باستخدام TaskProvider()..loadTasks() (Cascade Operator).
حماية البيانات عبر Encapsulation: جعل _tasks خاصة، وتوفير Getter فقط get tasks => _tasks.
التطبيق الحادي عشر: Notes App مع StorageService و DateTime Serialization
نرتقي بالهيكلة خطوة زيادة: نفصل منطق التخزين في Service مستقل، ونتعامل مع DateTime داخل Local Storage بشكل نظيف.
أهم المفاهيم:
Service-Oriented Architecture: إنشاء StorageService عشان Provider يطلب منه (حفظ / تحميل) بدل ما يكتب تفاصيل SharedPreferences.
تحويل DateTime لسلسلة نصية بـ toIso8601String() والرجوع بـ DateTime.parse().
Deep Serialization داخل الموديل نفسه بـ json.encode / json.decode و factory Note.fromJson.
استخدام showDialog / AlertDialog لإدخال وتعديل النوتس من خلال Dialog منبثق.
التطبيق الثاني عشر: أول دخول لعالم Hive (NoSQL Local DB)
أول استخدام لـ Hive كتخزين محلي سريع بديل لـ SharedPreferences، في تطبيق بسيط يثبت الفكرة ويعرّفك على طريقة فتح الصناديق (Boxes) وحفظ واسترجاع البيانات منها.
التطبيق الثالث عشر: Expense Tracker بـ Hive + Charts + intl
Expense Tracker كامل بـ Hive + hive_flutter، مع TypeAdapters لحفظ Custom Objects زي Expense و Category، واستخدام build_runner و hive_generator لتوليد كود تلقائي، مع fl_chart (PieChart و BarChart) لتحويل الأرقام لرسوم بيانية، و intl لدعم العربية في التواريخ والعملات، واستخدام IndexedStack لحفظ حالة كل شاشة وقت التنقل.
التطبيق الرابع عشر: مشروع التخرج Enterprise (MultiProvider + OpenAI + Hive)
مشروع ضخم بمستوى الشركات: استخدام MultiProvider لإدارة أكثر من Provider (ThemeProvider, WeatherProvider, TripProvider)، نظام ThemeMode ديناميكي محفوظ في SharedPreferences، حماية مفاتيح الـ API داخل .env باستخدام flutter_dotenv، ربط OpenAI لتوليد خطط رحلات (Trips) في شكل JSON، ثم Parsing وتحويلها لـ Trip / DayPlan Models وحفظها في Hive (Nested Objects)، مع استخدام Dio, provider, shared_preferences, uuid, google_fonts, flutter_animate, lottie, intl في مشروع واحد متكامل.
