قبل ما تتعلم Mobile، جاوب على سؤال واحد: هتعمل تطبيق لـ Android بس، ولا iPhone بس، ولا الاتنين؟
الـ Mobile app development إنك تعمل التطبيقات اللي بتنزّلها من Google Play و App Store. ولو إجابتك «الاتنين»، يبقى Flutter: أداة من Google بتكتب بيها كود واحد يشتغل على الاتنين. والترتيب: لغة Dart، وبعدها الـ Widgets، وبعدها الـ State management، وبعدين تربط التطبيق بالسيرفر، وفي الآخر ترفعه على Google Play و App Store.
علّم على كل حاجة تخلصها وانت ماشي، علشان تعرف انت فين، وترجع تكمّل من نفس المكان.
قبل ما تبدأ
- ذاكر كل يوم، حتى لو شوية. المدد هنا محسوبة على ساعتين في اليوم. لو وقتك أقل هتاخد وقت أطول، وده عادي.
- المدد تقريبية. في ناس هتخلص أسرع وناس أبطأ. عدّي المرحلة لما تبقى جاهز فعلًا، مش لما الوقت يخلص.
- كل مرحلة فيها مشروع. متعديش للمرحلة اللي بعدها قبل ما تعمله بإيدك، وجرّبه على موبايلك الحقيقي، مش على الـ emulator بس.
عايز Android بس، أو iPhone بس؟
الخطة دي ماشية بـ Flutter علشان بتطلّعلك الاتنين بكود واحد. لو متأكد إنك عايز نظام واحد بس، امشي على نفس المراحل بنفس الترتيب، بس بأدوات تانية:
- Android بس: لغة Kotlin بدل Dart، و Jetpack Compose بدل الـ Widgets بتاعة Flutter، وبتشتغل على Android Studio. وفي الآخر ترفع على Google Play بس.
- iPhone بس: لغة Swift بدل Dart، و SwiftUI بدل الـ Widgets، وبتشتغل على Xcode، ودي محتاجة جهاز Mac. وفي الآخر ترفع على App Store بس.
- لسه مش عارف؟ خد Flutter. ولو احتجت Kotlin أو Swift بعد كده، الأفكار اللي اتعلمتها هتنقل معاك.
مصادر الطريقين موجودة تحت في «مصادر مجانية».
المرحلة 1 من 5
Dartاللغة اللي Flutter شغال بيها
المدة: 4 لـ 6 أسابيع
Dart هي اللغة اللي Flutter شغال بيها، فهي أول حاجة. ولو اتعلمت أي لغة قبل كده، هتلاقيها مألوفة.
متقعدش فيها كتير لوحدها. خد الأساس، والـ classes، والـ async كويس، علشان دول اللي هتستخدمهم في كل شاشة.
هتتعلم إيه
0 من 11اعمل بإيدك
برنامج حساب درجات في الـ console. تدخّل أسماء طلاب ودرجاتهم، والبرنامج يطلّع المتوسط، وأعلى درجة، واللي نجح واللي سقط. استخدم فيه class للطالب، و List و Map، و functions صغيرة كل واحدة بتعمل حاجة واحدة.
تعدّي للمرحلة اللي بعدها لما
- تقدر تكتب class بـ constructor و methods من غير ما تبص على شرح
- فاهم
Futureوasyncوawaitبيعملوا إيه - مش بتتلخبط من الـ
?والـ!بتوع الـ null safety
المرحلة 2 من 5
Widgetsالقطع اللي بتبني منها الشاشة
المدة: 4 لـ 6 أسابيع
الـ Widgets هي القطع اللي بتبني منها الشاشة: الزرار، والصورة، والقايمة. في Flutter كل حاجة widget، والشاشة كلها widgets جوه بعض.
افتح أي تطبيق على موبايلك، وحاول تشوف الشاشة صفوف وأعمدة جوه بعض. ده أحسن تمرين في المرحلة دي.
هتتعلم إيه
0 من 12اعمل بإيدك
تطبيق منيو لمطعم. شاشة فيها الأصناف في قايمة بالصور والأسعار، وتدوس على صنف تفتح شاشة تفاصيله، وشاشة «عن المطعم» من الـ bottom bar. البيانات مكتوبة في الكود، والمهم هنا الشكل والتنقل.
تعدّي للمرحلة اللي بعدها لما
- تقدر تبني أي شاشة بسيطة تشوفها في تطبيق بـ
RowوColumnوStack - بتعرف إمتى تستخدم
StatelessWidgetوإمتىStatefulWidget - بتتنقل بين الشاشات وتبعت بيانات بينهم من غير ما تبص على شرح
المرحلة 3 من 5
State managementالشاشة تتحدث لوحدها
المدة: 3 لـ 4 أسابيع
الـ State management يعني الشاشة تتحدث لوحدها لما البيانات تتغير، زي عداد اللايكات: تدوس لايك، والرقم يزيد في كل حتة ظاهر فيها.
ودي مرحلة ناس كتير بتتوه فيها، علشان الحلول كتير. ابدأ بـ setState، وبعدها Provider، ومتقارنش بين الحلول قبل ما تعمل تطبيق كامل بواحد.
هتتعلم إيه
0 من 9اعمل بإيدك
تطبيق قايمة مشتريات. تضيف حاجة، وتعلّم إنك اشتريتها، وتمسحها. وعداد في الـ AppBar بيقول فاضل كام حاجة، وبيتحدث لوحده لما تغيّر من أي شاشة. والقايمة تفضل موجودة لو قفلت التطبيق وفتحته.
تعدّي للمرحلة اللي بعدها لما
- بتخلي شاشتين يشوفوا نفس البيانات، وأي تغيير في واحدة يبان في التانية
- تقدر تشرح ليه
setStateلوحده مش كفاية في تطبيق كبير - الـ logic بتاعك مش متلزّق جوه الـ widgets
المرحلة 4 من 5
APIالتطبيق يجيب بيانات حقيقية
المدة: 3 لـ 5 أسابيع
لحد دلوقتي البيانات مكتوبة جوه التطبيق. هنا هتربطه بالسيرفر علشان يجيب بيانات حقيقية: أخبار، أو منتجات، أو رسايل مستخدمين تانيين.
مش لازم تكتب السيرفر بنفسك دلوقتي. ابدأ بـ API جاهز، أو Backend جاهز زي Firebase أو Supabase، وركّز على ناحية التطبيق.
هتتعلم إيه
0 من 10اعمل بإيدك
تطبيق أخبار أو أفلام. يجيب البيانات من API حقيقي، ويعرضها في قايمة بتحمّل أكتر وانت نازل، وشاشة تفاصيل، وحالة تحميل، ورسالة واضحة لو مفيش نت. ولو حابب تزوّد: تسجيل دخول بـ Firebase أو Supabase، وكل مستخدم يحفظ المفضلة بتاعته.
تعدّي للمرحلة اللي بعدها لما
- تقدر تحوّل أي JSON لـ classes في Dart وتعرضه في شاشة
- التطبيق بيتعامل مع التحميل والـ error وقطع النت من غير ما يقفل
- عملت تسجيل دخول، والـ token متخزن بأمان، مش في
shared_preferences
المرحلة 5 من 5
Google Play و App Storeتطبيق حقيقي على الستور
المدة: 2 لـ 3 أسابيع
في الآخر ترفع التطبيق على Google Play و App Store، علشان الناس تحمّله فعلًا. ودي مش خطوة على الهامش: فيها توقيع التطبيق، والـ Privacy Policy، والمراجعة اللي التطبيق بيعدّي عليها قبل ما ينزل.
الاتنين محتاجين حساب مطوّر مدفوع، فشوف الأسعار والشروط الحالية على مواقعهم. وعلى Google Play، الحسابات الشخصية الجديدة لازم تعمل closed test مع 12 tester على الأقل لمدة 14 يوم ورا بعض قبل ما تقدر تنشر للكل، فابدأ الخطوة دي بدري.
هتتعلم إيه
0 من 12اعمل بإيدك
نزّل تطبيق حقيقي على الستور. خد أحسن تطبيق عملته، ونضّفه، وارفعه على Google Play، وعلى App Store لو معاك Mac. وابعت اللينك لصحابك يحمّلوه ويقولولك رأيهم.
تعدّي للمرحلة اللي بعدها لما
- عندك تطبيق على Google Play أو App Store، وأي حد يقدر يحمّله
- رفعت تحديث واحد على الأقل بعد أول نسخة
سلم المشاريع
المشاريع هي اللي بتعلمك بجد، وهي اللي هتوريها لأي حد عايز يشغّلك. أول 4 عملتهم في المراحل فوق، والخامس هو اللي بيقفل الخطة.
برنامج الدرجات
Dart
برنامج console صغير بالـ classes والـ collections. أول مرة تفكر بالـ Dart.
منيو مطعم
Flutter و Widgets و Navigator
أول تطبيق بشاشات حقيقية وتنقل بينها. هنا بتتعلم تشوف الشاشة صفوف وأعمدة.
قايمة مشتريات
State management و shared_preferences
شاشات بتتحدث لوحدها، وبيانات بتفضل بعد ما تقفل التطبيق.
تطبيق أخبار أو أفلام
API و JSON و Firebase أو Supabase
بيانات حقيقية من النت، وتحميل على دفعات، وتسجيل دخول.
مشروع الـ portfolio: تطبيق على الستور
Flutter و API و Google Play و App Store
فكرة صغيرة بتحل مشكلة حقيقية عندك أو عند حد تعرفه، زي تطبيق حجز حصص لمدرس أو مواعيد لجيم: تسجيل دخول، وبيانات على السيرفر، ومنشور على الستور. لينك الستور ده أقوى حاجة تحطها في الـ CV بتاعك.
مصادر مجانية
كل دول مجانيين. متجمعش مصادر كتير: اختار مصدر أساسي واحد لكل مرحلة وكمّل بيه، والباقي ارجعله لما تقف في حتة.
Dart
- Introduction to Dart (بيفتح في تاب جديدة)الشرح الرسمي للغة Dart: الأنواع، والـ classes، والـ null safety، والـ async.
- DartPad (بيفتح في تاب جديدة)تكتب وتشغّل Dart في المتصفح، من غير ما تسطّب حاجة.
Flutter و Widgets
- Flutter learning pathway (بيفتح في تاب جديدة)المسار الرسمي لتعلم Flutter من الصفر، خطوة بخطوة.
- Your first Flutter app (بيفتح في تاب جديدة)تمرين من Google بتبني فيه أول تطبيق Flutter كامل بإيدك.
- Building user interfaces with Flutter (بيفتح في تاب جديدة)الشرح الرسمي للـ Widgets والـ Layout.
- Flutter Widget of the Week (بيفتح في تاب جديدة)فيديوهات قصيرة على يوتيوب، كل فيديو بيشرح widget واحد.
State management
- State management في Flutter (بيفتح في تاب جديدة)الشرح الرسمي: يعني إيه state، وإمتى تحتاج حل أكبر من
setState. - Simple app state management (بيفتح في تاب جديدة)مثال كامل بـ Provider من الـ docs الرسمية.
الربط بالسيرفر
- Fetch data from the internet (بيفتح في تاب جديدة)إزاي تجيب بيانات من API وتعرضها، من الـ docs الرسمية.
- Firebase و Flutter (بيفتح في تاب جديدة)إزاي تربط تطبيقك بـ Firebase كـ Backend جاهز.
- Supabase Docs (بيفتح في تاب جديدة)Backend جاهز فيه داتا بيز وتسجيل دخول، وليه مكتبة لـ Flutter.
الرفع على الستور
- Build and release an Android app (بيفتح في تاب جديدة)خطوات نسخة الـ release لـ Android ورفعها على Google Play.
- Build and release an iOS app (بيفتح في تاب جديدة)خطوات نسخة iPhone ورفعها على App Store.
- شروط الـ testing على Google Play (بيفتح في تاب جديدة)الشروط الرسمية للحسابات الشخصية الجديدة قبل النشر للكل.
- App Review Guidelines (بيفتح في تاب جديدة)قواعد Apple لقبول التطبيقات على App Store.
لو اخترت Android بس
- Android Basics with Compose (بيفتح في تاب جديدة)كورس رسمي من Google بيعلمك Kotlin و Jetpack Compose من الصفر.
- Kotlin: Get started (بيفتح في تاب جديدة)الشرح الرسمي للغة Kotlin.
- موسوعة حسوب: Kotlin (بيفتح في تاب جديدة)مرجع Kotlin بالعربي.
لو اخترت iPhone بس
- Develop in Swift (بيفتح في تاب جديدة)دروس رسمية من Apple بتعلمك Swift و SwiftUI من الأول.
- SwiftUI Tutorials (بيفتح في تاب جديدة)دروس Apple الرسمية لـ SwiftUI، بتبني فيها تطبيقات خطوة بخطوة.
- 100 Days of SwiftUI (بيفتح في تاب جديدة)كورس مجاني بيقسم Swift و SwiftUI على 100 يوم.
أكتر الأخطاء اللي بشوفها
- إنك تقعد شهور تقارن بين الأدوات. Flutter ولا Kotlin ولا Swift ولا غيرهم، وكل يوم فيديو جديد بيقولك واحدة أحسن. اختار طريق وابدأ، والمهم إنك تنزّل تطبيق حقيقي على الستور. التطبيق المنشور بيعلمك أكتر من أي مقارنة.
- إنك تدخل Flutter من غير ما تفهم Dart. هتلاقي نفسك بتنسخ widgets مش فاهم ليه شغالة. أسابيع في Dart الأول بتوفر عليك شهور بعدين.
- إنك تتنطط بين حلول الـ State management. Provider النهارده، و Bloc بكرة، و Riverpod بعده. اختار واحد، واعمل بيه تطبيق كامل، وبعدها قارن لو حابب.
- إنك تجرب على الـ emulator بس. جرّب على موبايلك الحقيقي، وعلى نت ضعيف، وعلى شاشة صغيرة. هناك هتشوف المشاكل اللي المستخدم هيشوفها.
- إنك تأجل الرفع على الستور لحد ما التطبيق يبقى «كامل». الرفع فيه خطوات وشروط ومراجعة بتاخد وقت. جرّب ترفع تطبيق صغير بدري، حتى لو على internal testing بس.
بعد كده
لما تخلص الخطة دي وتنزّل تطبيقك على الستور، دي الخطوات اللي بعدها:
- Testing: تكتب unit tests و widget tests، علشان تتأكد إن التطبيق شغال قبل كل تحديث.
- مميزات الموبايل: الإشعارات (push notifications)، والكاميرا، والخرايط، والدفع جوه التطبيق.
- Kotlin أو Swift: لو احتجت حاجة خاصة بنظام واحد، أو حابب تتعمق في Android أو iPhone لوحده.
احفظ الصفحة دي، وارجعلها كل ما تخلص حاجة وعلّم عليها. ولو وقفت في مرحلة ومش فاهم، ارجع للي قبلها، غالبًا المشكلة هناك.