📌 نظرة عامة

يقدّم هذا المعمل إطار عمل Flutter، ويقارن بين مناهج تطوير تطبيقات الموبايل المختلفة، ويرشد الطلاب خطوة بخطوة لإعداد وكتابة أول تطبيق Flutter لهم باستخدام Android Studio. يستند المحتوى إلى المفاهيم الأساسية للتطوير الأصلي (Native)، والهجين (Hybrid)، ومتعدد المنصات (Cross-Platform).

🎯 أهداف التعلّم

بنهاية هذا المعمل، يجب أن يكون الطالب قادرًا على:

1. فهم الفرق بين التطوير الأصلي (Native)، والهجين (Hybrid)، ومتعدد المنصات (Cross-Platform مثل Flutter).
2. شرح الركائز الأساسية للمقرر: واجهة المستخدم (UI)، إدارة الحالة (State Management)، الشبكات (Networking)، والحركة (Animation).
3. إعداد مشروع Flutter داخل Android Studio.
4. كتابة تطبيق Flutter أساسي باستخدام عناصر الواجهة (Widgets) التالية: MaterialApp، Center، وContainer.

1. مقدمة في Flutter

Flutter منصة تتيح للمطورين بناء تطبيقات موبايل عالية الجودة لنظامي iOS وAndroid. وقد أصبحت شائعة بشكل متزايد نظرًا لإمكاناتها المستقبلية والدعم القوي من جوجل، الذي يضمن استمرارية الدعم على المدى الطويل.

لماذا نتعلّم Flutter؟

• الاستعداد للمستقبل: يتجه سوق العمل بشكل متزايد نحو تقنيات مثل Flutter، التي تتيح تطويرًا سريعًا لعدة منصات في آن واحد.
• الكفاءة: تمكّن من بناء تطبيقات تبدو وتعمل مثل التطبيقات الأصلية (Native)، بل قد تتفوق عليها أحيانًا في اتساق واجهة المستخدم.
• المتطلبات الأساسية: يجب أن يكون لدى الطالب فهم متين للبرمجة كائنية التوجه (OOP) قبل الخوض بعمق في Flutter.

2. معماريات تطوير تطبيقات الموبايل

لفهم كيفية عمل Flutter، من الضروري مقارنته بمناهج التطوير الأخرى.

أ. التطوير الأصلي (Native)

• الآلية: تقوم ببناء تطبيقات منفصلة باستخدام حزم التطوير (SDKs) الخاصة التي توفرها Apple (لنظام iOS) أو Google (لنظام Android).
• المزايا: أفضل أداء، ووصول مباشر لأحدث ميزات الجهاز فور إطلاقها.
• العيوب: مكلف ويستغرق وقتًا طويلاً، لأنه يتطلب صيانة قاعدتي كود منفصلتين (مثل Java/Kotlin لنظام Android وSwift/Obj-C لنظام iOS).

ب. التطوير الهجين (Hybrid)

• الآلية: يستخدم تقنيات الويب (HTML/CSS/JS) مغلّفة داخل WebView. يعمل التطبيق أساسًا كموقع ويب داخل حاوية أصلية (Native Container)، ويستخدم "جسرًا" (Bridge) للتواصل مع عتاد الجهاز الأصلي (مثل البلوتوث).
• المزايا: إمكانية إعادة استخدام الكود عبر المنصات.
• العيوب: مشكلات في الأداء، وصعوبة في تصحيح الأخطاء (Debugging)، والاعتماد على الإضافات (Plugins) للوصول إلى الميزات الأصلية. فإذا كانت الميزة الأصلية جديدة، يجب الانتظار حتى يتم إنشاء إضافة (Plugin) تغلّفها.

ج. متعدد المنصات (Cross-Platform - Flutter)

• الآلية: لا يستخدم Flutter عنصر WebView ولا عناصر واجهة النظام الأصلية (OEM Widgets). بل يطلب من النظام لوحة رسم فارغة (Canvas) ويستخدم محرك العرض الخاص به لرسم كل بكسل في الواجهة بنفسه.
• اللغة: يستخدم لغة Dart، التي تُترجَم إلى كود آلي أصلي (Native Code).
• المزايا: أداء عالٍ (60 إطارًا في الثانية)، واجهة مستخدم متسقة عبر الأجهزة، وميزة إعادة التحميل الفوري (Hot Reload)، التي تتيح لك رؤية تغييرات الكود فورًا دون إعادة تشغيل التطبيق.

📊 مقارنة المعماريات

graph TD
    subgraph Native
    A[كود التطبيق] -->|وصول مباشر| B[عناصر واجهة النظام - OEM Widgets]
    end
 
    subgraph Hybrid
    C[كود تطبيق ويب] -->|يعمل داخل| D[WebView]
    D -->|جسر Bridge| E[الميزات الأصلية]
    end
 
    subgraph Flutter
    F[كود Dart] -->|مُترجَم| G[محرك Flutter]
    G -->|يرسم البكسلات| H[لوحة رسم النظام]
    end

3. منهجية المقرر

يركّز هذا المقرر على بناء كود قابل للصيانة وعالي الجودة. وينقسم المنهج إلى أربع ركائز رئيسية:

1. واجهة المستخدم (UI): بناء التخطيط المرئي للتطبيق.
2. إدارة الحالة (State Management): التعامل مع تغيّرات البيانات وحالات التطبيق بكفاءة.
3. الشبكات (Networking): الاتصال بواجهات API والتعامل مع بيانات الخادم (Server).
4. الحركة (Animation): إضافة لمسات بصرية تُثري تجربة المستخدم.

4. تطبيق عملي: أول تطبيق Flutter لك

الخطوة 1: إعداد المشروع

1. افتح Android Studio.
2. اختر "Start a new Flutter project".
3. اختر Flutter Application واضغط Next.
4. اسم المشروع: يجب أن يكون بأحرف صغيرة (مثل test_app أو my_first_app).
5. نطاق الشركة (Company Domain): يُستخدم لتوليد اسم الحزمة (Package Name) (مثل com.example.myapp).
6. اضغط Finish وانتظر حتى ينتهي المشروع من عملية الفهرسة (Indexing).

الخطوة 2: فهم بيئة العمل

بمجرد فتح المشروع، ستجد تطبيق العدّاد (Counter App) الافتراضي.

• المحاكي (Emulator): يمكنك تشغيل التطبيق على محاكي Android، أو محاكي iOS، أو حتى متصفح ويب.
• إعادة التحميل الفوري (Hot Reload): ميزة أساسية تجعل تغييرات الكود تنعكس على التطبيق فوريًا تقريبًا دون فقدان الحالة (State).

الخطوة 3: كتابة الكود

سنقوم بحذف الكود الافتراضي وكتابة تطبيق بسيط من الصفر.

1. نقطة الدخول الرئيسية: يبدأ كل تطبيق Flutter بدالة main() التي تستدعي runApp().

2. شجرة عناصر الواجهة (Widget Tree): يستخدم Flutter عناصر الواجهة (Widgets) لكل شيء. غالبًا ما يكون العنصر الجذري هو MaterialApp.

   import 'package:flutter/material.dart';
    
   void main() {
     runApp(
       MaterialApp(
         home: Center(
           child: Container(
             color: Colors.red, // Sets the container color to red
             width: 40.0,      // Sets width
             height: 40.0,     // Sets height
             child: Text('Hi'), // Text inside the container
           ),
         ),
       ),
     );
   }

3. تحليل الكود:

   • MaterialApp: العنصر الأساسي الذي يهيّئ نمط تصميم Material Design.
   • Center: عنصر تخطيط (Layout Widget) يتوسّط عنصره الفرعي (child) داخل الشاشة.
   • Container: عنصر متعدد الاستخدامات يُستخدم للتنسيق (الألوان والأبعاد).
   • Text: يعرض نصًا.

🛠️ نصيحة لحل المشكلات

إذا بدا التخطيط غريبًا (مثلاً ظهر النص بخطوط تسطير صفراء أو تنسيق أحمر)، فالسبب غالبًا هو أن العنصر يفتقر إلى تنسيق النص الافتراضي الذي يوفّره عنصر Scaffold أو Material. في هذا المثال البسيط، يوفّر MaterialApp سياقًا كافيًا لكي يُعرَض عنصر Container بشكل صحيح.

📝 مهمة المعمل

1. أنشئ مشروع Flutter جديدًا باسم lab_one_intro.
2. استبدل الكود الافتراضي بعنصر MaterialApp.
3. استخدم عنصر Center لوضع عنصر Container في منتصف الشاشة.
4. اجعل لون الحاوية أزرق، وحجمها 100.0 × 100.0.
5. أضف عنصر Text فرعيًا داخل الحاوية يحتوي على الأحرف الأولى من اسمك.