المقدمة

فاكر أول مرة اشتغلت على مشروع تطبيق جديد في الشغل؟ أول حاجة فكرت فيها كانت الكود؟

= غلط! 🙅‍♂️

قبل ما تكتب أي سطر كود، لازم تسأل نفسك: النظام ده متصمم إزاي؟

تصميم النظام (System Design) مش مجرد خطوة إضافية ، هو اللي بيحط الأساس القوي لتطبيقك، تخيل إنك بتبني بيت، من غير أساس متين؟ أكيد هينهار. نفس الفكرة في التطبيقات!🙃

تصميم النظام الصح بيضمن لك تطبيق سريع، ثابت، وسهل التطوير. في المقال ده، هنعرف مع بعض ليه التصميم هو الخطوة الأهم قبل الكود، وهنعرف إزاي Flutter بيخليك تبني أنظمة قوية وسهلة التوسيع. جاهز؟ يلا نبدأ! 🚀✨

هنتكلم النهاردة عن : 

📌 ايه هو System Design

📌 مراحل الـ System Design

📌 اهمية الـ System Design

📌تصميم التطبيق (Design Levels).

📌 عناصر الـ System Design 

📌تطبيق عملي

لما أجي أبني مطعم، مش بروح علطول أبدأ أحط المنيو وأشوف وصفات الأكل ، لا، ببدأ الأول أشوف تصميم المطعم من جوه 🏠:

  • هيبقى شكله عامل إزاي؟
  • متكون من كام دور؟
  • الألوان اللي هتبقى موجودة؟

بنفس الطريقة لما أشتغل على تطبيق، مش ببدأ أكتب كود على طول 👩‍💻، لا، بجهز كل حاجة الأول في خطوة اسمها System Design.دي أهم مرحلة بتحوّل الفكرة من مجرد رسمة على الورق لحاجة شغّالة فعليًا ✅.

ايه هو الـ System Design ؟

الsystem design هو الخطوة اللي بنحدد فيها بنية التطبيق (Architecture)، العلاقات بين المكونات المختلفة، والـinterfaces. الهدف منها إننا نضمن إن المشروع هيكون قابل للتوسع، الصيانة، والأداء العالي.

 هو أهم مرحلة بتحوّل المشروع من مجرد فكرة أو رسومات على الورق لحاجة شغّالة فعليًا ، ببدأ أحضر الحاجات اللي بستخدمها في الابلكيشن قبل ما اشتغل الالوان الخطوط و بعمل style guide عندي بشوف ال architecture اللي همشي عليه ال components بتتعامل مع بعض ازاي ، باختصار بنظم الابلكيشن قبل ما نبتدي الكود.

1. تحليل التصميم (UI Analysis) 🧐

  • أول حاجة بفهم التصميم كويس جدًا، أدرس الـflow بتاعه وأفهم فكرته والهدف منه علشان اعرف اكون فكرة عنه في دماغي و اشوف همشي فيه ازاي.
  • أطلع الألوان والخطوط والصور المتكررة علشان أجهزهم للكود 🎨

2. تجهيز الـ Style Guide 📋

  • الألوان:
    • بشوف الألوان اللي حطها الـdesigner أو اللي ظاهرة في التصميم، وبحطها في ملف خاص في الكود.
  • الخطوط (Fonts):
    • بحدد الـfont family المستخدم عندي.
    • لو أكتر من خط، بختار الخط الأكثر استخدامًا للـmain، والباقي نضيفه وقت ما نحتاجه.
    • علشان أستخدم الخطوط، بنزل مكتبة Google Fonts 📂.

3. الـ (Assets) 🖼️

  • الصور:
    • بعمل Export لكل الصور مرة واحدة من الأول علشان منقعدش ننزل صورة صورة كل ما نحتاجها.
  • الأيقونات:
    • بنزلها بصيغة SVG لأنها مساحتها أقل وجودتها أعلى، وبستخدم مكتبة SVG Flutter.
  • الأنيميشن:
    • لو فيه أنيميشن جاهز، بننزله من Lottie Files وبستخدم مكتبة Lottie Flutter.
    • لو عندي نصوص فيه انميشن ، بستخدم مكتبة Animated Text Kit
    • لو الشكل مش موجود نعمله احنا بقي.

4. تحديد التباعد (Spacing) 📏

  • بشوف الـspacing المطلوبة (Height & Width) وأحطها في ملفات منفصلة لو احتاجت.

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

5. تحديد الـ Mode واللغات 🌐

  • بشوف التطبيق هيبقى:
    • لغة واحدة ولا أكتر؟
    • فيه Light & Dark Mode ولا وضع واحد؟

في الاخر الهدف اني بكون فكرة عامة عن كل اللي همشي بيه ف الابلكيشن ، بنظم المشروع من البداية، سواء بربطه في دماغي او علي ورق او بحضره حتي علي الIDEA نفسه اللي بكتب عليه ، و دا بيوفر عليك وقت ومجهود كبير بعد كدا ، وبيخليك تشتغل بكفاءة أكتر 💡✨.

طيب ليه الـ System Design مهم؟ 🤔

1. تنظيم وترتيب الدماغ 🧠

  • بدل ما تفضل تفكر مع كل شاشة "هتتعمل إزاي؟" 😵‍، بيكون كل حاجة واضحة ومتخططة من البداية.
  • بتدخل على التنفيذ وأنت عارف كل تفصيلة ومجهز لها من قبل كدا✅.

2. تناسق التطبيق 🤝

  • الـ Style Guide موحد:
    • كل التيم بيتبعوا نفس الـStyle Guide، وده بيضمن إن التطبيق يطلع بشكل متناسق ومنظم.
  • سواء في الألوان، الخطوط، أو الأنيميشن، كل حاجة بتكون ماشية على نفس النظام 👌.

3. سهولة التعديل 🔧

  • لو حبيت تغيّر درجة لون أو خط معين، بتعدل في مكان واحد بس بدل ما تدور على كل فايل فيه العنصر ده.
  • ده بيقلل الأخطاء ويوفر وقت كبير 🕒

4. Reusable Components ♻️

  • لما تعمل مكونات modular، تقدر تستخدمها في أكتر من جزء في التطبيق أو حتى في مشاريع مستقبلية.
  • ده بيوفر وقت ومجهود، وبيزود كفاءة الشغل.

5. تحسين تجربة المستخدم (User Experience) 🧑‍💻🌟

  • بيبقي التطبيق منظم ومتناسق بيدّي تجربة استخدام مريحة وسهلة للمستخدمين.
  • و كمان بيأثر علي رضا العميل.

6. قابلية التوسّع (Scalability) 📈

  • تطبيق متصمم بشكل صحيح بيسهل عليك تضيف مميزات جديدة أو تعديلات من غير ما تخاف إنه يبوظ او يقع 😅.
  • بتضمن أداء عالي واستقرار أكبر.

مستويات تصميم التطبيق 📱

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

1. المستوى الذري (Atomic Level) ⚛️

ده الأساس اللي كل حاجة بتتبني عليه! 🏗️فيه بنحط التفاصيل الصغيرة اللي بتدي للتصميم روح وشخصية:

الأيقونات 

(Rounded Corners)

المسافات (Spacing) 📏: اللي بتدي ترتيب وتنظيم للعناصر.

الظلال 🌟: اللي بتخلق إحساس بالعمق.

الخطوط ✍️: اللي بتساعدنا نقرأ ونفهم المحتوى بسهولة.

الألوان 🎨: اللي بتدي الحيوية والانطباع الأول عن التطبيق.

2. المستوى الجزيئي (Molecular Level) 🧪

هنا بنبدأ نجمّع العناصر الصغيرة دي في أدوات نستخدمها بشكل يومي:

  •  (Buttons) 🔘
  • مربعات الاختيار (Checkbox) ✅
  • حقول الإدخال (Input Fields) 🖋️
  • الخطوط الفاصلة (Dividers) ➖

كل الأدوات دي بنكتبها في shared widgets عشان نقدر نعيد استخدامها بسهولة في كل مكان بالتطبيق.

3. المستوى الخلوي (Cellular Level) 🧬

ده بقى المستوى اللي بنصنع فيه العناصر الكبيرة والمعقدة اللي بتدي التطبيق شخصيته:

  • (Custom Painter) 🎨
  • (Custom Cards) 🃏.
  • (Bottom Nav Bar) ⬇️.

دي العناصر اللي بتكون مفصلة اكتر .

العوامل الأساسية في System Design 🛠️

بعد ما تفهم التطبيق بشكل كامل وتحدد الـ features والـ scale بتاعه، تبدأ تحدد باقي العناصر اللي هتحتاجها عشان تبني النظام بشكل صحيح 💡.

1- Architecture Pattern 

هختار الarchitecture pattern اللي هنستخدمه سواء

 MVVM , MVC , Clean Architecture و بختار ال pattern اللي همشي علي حسب كذا حاجة اغلب الاستخدام في فلاتر دلوقتي بقي

 MVVM , Clean acrchitecture بس دا ميمنعش ان حد ممكن يستخدم MVC عادي.

 ال MVVM بتبقي علي Scale البروجكتات بتاعتنا المتوسطة و ال clean architecture بيبقي لو عندنا بروجكت كبير محتاج يبقي فيه layers كتيرة علشان يبقي منظم وواضح و برضو بيرجع لتفضيلك عادي و  لو انا ف تيم ف بتمشي باللي بيتفق عليه التيم .

 و الصورة هنا موضحه مقارنه سريعه بينهم برضو تقدر تطلع عليها

2- UI/UX Consideration 

دا اللي اتكلمنا عليه في الاول 

 (Style Guide)، وده بيكون زي الكتالوج اللي بيتعرّف فيه كل العناصر الأساسية اللي هتتكرر في التصميم. الحاجات دي بتتسمى Design Tokens، ومنها:

  • الخطوط اللي هنستخدمها في التطبيق كله.
  • ألوان المتكررة.
  • العناوين،captions، hint.
  • حاجات كتير تانية بتتحدد من الأول، وبدل ما تتكتب بشكل ثابت (Hardcoded)، بتتخزن كمتغيرات reusable.

نظام التصميم بيوفر قواعد واضحة بتنظم العناصر دي:

1. الطباعة (Typography):🖋️

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

2. الألوان (Colors):

بتشمل درجات الألوان، تباينها، وإزاي تتوظف مع بعض. لو عندك لوحة ألوان منظمة، التصميم هيبقى متناسق ومتجانس. كمان الألوان بتساعد المستخدم يفهم:

  • نجاح (Success)،
  • محايد (Neutral)،
  • خطر (Danger).وتحدد الأهمية زي الأساسي (Primary)، الثانوي (Secondary)، والثالثي (Tertiary).

3. المسافات (Spacing):

بتعرف العلاقة بين العناصر، زي المسافات بينها ومكانها على الشبكة (Grid). ده بيساعد في خلق تناغم بصري بين الشاشات المختلفة.

4. (Assets):

  • الصور.
  • الأيقونات (SVG Package).
  • الأنيميشن (Lottie Files).
  1. عناصر واجهة المستخدم (UI Elements)

زي الأزرار، الحقول النصية، الأيقونات، القوائم، و Cards . نظام التصميم بيوضح شكل العناصر وسلوكها في الحالات المختلفة، زي لما تكون مفعلة، معطّلة، مختارة، أو في حالة تحذير. لكل عنصر فيه ألوان، خطوط، وتخطيطات تلقائية محددة.

القواعد دي بتدي المصممين الثقة إن كل مكون هيظهر ويتصرف بشكل متناسق على كل الشاشات!

3- State management techniques 🛠️

و هنا بحدد انهي state management هنمشي بيها و زي ما عارفين بنستخدمها علشان نتعامل مع ال states في فلاتر و نتأكد ان الUI بيتفاعل مع الداتا بشكل مظبوط من غير ما استخدم set state كتير و بتسرع عملية ال Rendering  دا بنختاره حسب التفضيل بتاعنا او الteam lead شغال ب ايه 

عندنا كذا حاجة : 

  • Provider
  • Bloc
  • Cubit
  • Riverbod
  • Get X 

4- Responsive and Adaptive 📱💻

بشوف مين ال users اللي هيستخدموا الابلكيشن 

  • هل هو لجهاز واحد لكل مستخدم ولا هيبقي فيه أكتر من جهاز؟
  • هل التطبيق هيشتغل على موبايل بس، ولا كمان تابلت، ولا هيكون ويب وديسكتوب كمان؟

كل دا بيفرق علشان ابقي محدده من الاول هستخدم ايه علشان نطلع ابلكيشن متناسب مع كل الاجهزة و الشاشات , و مديش ارقام fixed تبقي مظبوطة علي screen واحدة بس .

إيه اللي بيساعدني في كده؟ 🤔

  • Media query
  • layout builder

✅ علشان اعرف ابعاد الشاشة و اظبط ال components عليها 

  • Expanded
  • Fitted Box
  • flexible

 ✅ علشان اظبط المساحات بشكل سليم 

  • aspect ratio
  • intrinsic widget
  • screen util 

✅ عشان تحسب أبعاد وأحجام النصوص بشكل مرن.

Orientation: 

✅ OrientationBuilder، تقدر تعمل تصميم يتأقلم لو الجهاز كان عمودي أو أفقي.

5- Widget Design 

هنا بشوف الـ Structure بتاع الـ Widgets عندي، ومربوطة ببعضها إزاي، ودا شبه شغل مصمم الديكور اللي بيخطط الأول قبل ما يبدأ يرسم على الحيطة ✨. الأول بيرسم الجدار نفسه، يحدد أبعاده، ويشوف الرسمة هتطلع مظبوطة ولا محتاجة تعديل.

  • زي مثلا بقول عندي Column كبير جواه Row، والـ Row فيه Text ومعاه 2 Container.
  • لو بستخدم Stack وفيه Positioned، لازم أحدد كل عنصر مكانه بالظبط علشان مايبوظش الشكل.

تخيل الـ Screen قبل ما تكتب الكود بيساعدك إنك تشوف أي مشاكل في الترتيب قبل ما تبدأ، ودا بيوفر عليك وقت ومجهود 💡.

Widget Design ببساطة هو:

🔹 إزاي تنظم وتبني الواجهة (UI) بتاعت التطبيق بشكل واضح ومترابط 🏛️.

🔹 إزاي تصمم Widgets قابلة لإعادة الاستخدام ⚡.

🔹 كل حاجة في فلاتر عبارة عن Widgets، فالتخطيط السليم بيسهل اننا نبني UI معقد بسهولة 🛠️.

خلونا ناخد مثال علي هذه ال Screen:

لو جينا بصينا  هنا هنشوف ازاي برسم ال Screen علي ورق أو أي white board قبل ما نبتدي التنفيذ 

لما بنفكر في الـ UI بتاع التطبيق قبل ما نكتب الكود، بنبدأ نتخيل إزاي هنرتب العناصر جوه بعض علشان يبقى الشكل النهائي منظم وسهل التعديل. زي ما بنرسم خريطة قبل ما نبني بيت! 🏡✨

في الصورة اللي فوق مثلا هنلاقي عندنا :

1️⃣ AppBar فيه Row، جواه:

  • صورة
  • Text
  • Icon في الآخر (فهدي أول عنصرين نفس المساحة وأسيب الأيقونة في النهاية).

2️⃣ بعد كده عندي Body عبارة عن Column كبير، جواه:

  • صورة 
  • اتنين Row 
  • اتنين ListView، واحدة بالطول وواحدة بالعرض 
  • TabBar

3️⃣ كل ListView عبارة عن:

  • Row جواه Column، والـ Column فيه اتنين Row.

4️⃣ وفي الاخر:

  • Bottom Navigation Bar علشان تنقل بين الشاشات بسهولة.

💡 معلومة مفيدة:فيه موقع اسمه Flutter Bottom Nav Bar Gems بيساعدك تشوف أشكال مختلفة من الـ Bottom Nav Bar وتعرف اسم الباكدج اللي ممكن تستخدمها لكل تصميم. 🔍

6- Testing Widgets 🔍

أنواع ال Testing:

1️⃣ Unit Test 🛠️

هنا بنختبر كل Function أو Class لوحده، علشان نتأكد إنه بيشتغل زي ما المفروض.

🔹 مثال بسيط: عندي دالة بتجمع رقمين ➕، بجربها في حالتين:

  • لو الأرقام صح ✅ -> هل النتيجة اللي بترجع صحيحة؟
  • لو دخلت داتا غلط ❌ -> هل التطبيق بيعرف إنها غلط ولا بيحصل Crash؟

2️⃣ Widget Test 🔍

🔹 هنا بنختبر الـ Components مع بعض، ونتأكد إنها بتطلع الـ Expected Result.

🔹 بنشوف هل الـ UI بيتفاعل صح؟

🔹 لو في Behavior مش مظبوط، نعرف المشكلة ونعدلها.

3️⃣ Integration Test 📲

🔹 هنا بنختبر التطبيق كله من الألف للياء!

🔹 بنتأكد إن الـ Flow بتاعه شغال بطريقة صحيحة، يعني:

  • هل الشاشة الأولى بتنتقل للثانية بشكل سليم؟
  • لو المستخدم دخل بيانات غلط، التطبيق بيتصرف إزاي؟
  • هل فيه سيناريو معين بيعمل Failure؟

و دي مقالة حلوة عن ال testing لو عايز تقرأ اكتر فيه : 

Flutter Testing: A Comprehensive Guide to Unit, Widget, and Integration Testing
Table of Contents
StackademicWafa Mohamed

عندنا اتنين tool برضو ممكن يساعدونا في الTesting

1️⃣ Golden Test 

📸 اختبارات الـ Golden دي طريقة  لاختبار العناصر البصرية (UI Testing) في التطبيق. الفكرة ببساطة:

  • بتاخد لقطة لـ Widget معينة في حالتها الحالية.
  • بعد كده، أي تغيير مستقبلي بيتقارن بالصورة دي.
  • لو حصل Breaking Changes أو أي اختلاف مش متوقع، هتقدر تلاحظه بسهولة.

🟢 فايدتها؟

  • بتضمن إن التصميم مش بيتغير بالغلط أو يتكسر بدون ما تاخد بالك.
  • مهمة جدًا لو التطبيق فيه تفاصيل بصرية صغيرية

2️⃣ Widget Book 📖🎨

📚 Widget Book بتخليك تستعرض كل المكونات (Widgets) اللي صممتها في مكان واحد!

  • تقدر تجرب كل عنصر في أوضاع مختلفة (مثلاً: الزرار قبل الضغط وبعده).
  • تقدر تكبّر وتصغّر العناصر علشان تتأكد من الـ Responsive Design.
  • تشوف كل زرار بيوديك لصفحة مظبوطة ولا لأ 🔄.

💡 ميزته؟ بتعمل Visual Preview للتطبيق كله، بحيث تقدر تشوفه قدامك شغال قبل ما تبدأ في الكود الفعلي 👀⚡.

🔗 تقدر تجربها من هنا:👉 Widget Book Website

📦 وكمان موجودة كـ باكدج في فلاتر تقدر تضيفها لمشروعك بسهولة! 🚀

خلونا بقي نشوف مثال للكود اللي بنكتبه بيكون reusable بالنسبة للخطوط و الصور و الالوان.

الخطوط (FONTS) ✍️

1️⃣ تحميل الـ Google Fonts 📥

  • أول حاجة هننزل باكدج Google Fonts علشان نقدر نستخدم الخطوط الجاهزة بسهولة.
  • نقطة مهمة جدًا! واحنا بننزل الباكدج، لازم نحط الـ Version كاملة علشان لو حدثنا الـ SDK، المشروع مايضربش ويشتغل بشكل متوافق مع آخر نسخة مناسبة.

2️⃣ تحديد الخط الأساسي في main.dart 🏗️

  • بنروح للملف الأساسي main.dart ونحدد الخط الافتراضي اللي هيكون مشترك على كل التطبيق.

3️⃣ هنعمل styles.dart في فولدر الـ themes جوه Core 📁

  • هنعمل ملف اسمه styles.dart ونحطه في themes/core/.
  • اسم الـ Class يكون نفس اسم الملف، وده كنوع من الوضوح في Naming ك كتابة Clean Code.

4️⃣ تجهيز Class الخطوط 

هنعمل Class خاصة بالخطوط نحدد فيها كل الأحجام وstyles اللي هنستخدمها علشان يكون سهل استدعاؤها بعد كده:

✅ هنستخدم static علشان نقدر نستدعي الكلاس في أي مكان من غير ما نحتاج اننا ننشىء Object منه.

✅ هنخليه const لأنه مش بيتغير.

✅ هنسمي المتغير باسم الـ FontSize بتاعه علشان يبقى واضح بدل ما نرجع نشوفه في الملف كل مرة.

✅ هنستخدم TextStyle ونحدد الـ properties اللي عايزينها.

5️⃣ لو عايز أعدل خاصية معينة في خط معين؟ 🤔

  • مش محتاج أعمل متغير جديد علشان أغير حاجة واحدة بس.
  • بدل كده، وأنا بستدعي الخط، هستخدم copyWith() وأعدل اللي أنا عايزه بس.

الألوان (Colors) 🎨

1️⃣ هنعمل ملف colors_app.dart داخل فولدر theme 📁

  • زي ما عملنا في الخطوط، هننظم الألوان بنفس الطريقة.
  • هنعمل ملف colors_app.dart جوه فولدر theme علشان يكون كل themes مجمعة في مكان واحد.

2️⃣ تجهيز كلاس الألوان 

✅ هنستخدم static علشان نقدر نستدعي الألوان في أي مكان من غير ما نعمل object منه.

✅ هنستخدم const لأنها قيم ثابتة ومش بتتغير.

✅ هنختار أسماء معبرة عن كل لون بدل ما نحط HexCode عشوائي، علشان الكود يكون واضح وسهل الفهم.

✅ هنكتب اللون بصيغة HexaDecimal بالطريقة دي:

  • بنبدأ بـ 0xFF علشان نحدد شفافية اللون (FF = 100% شفافية).
  • بعد كده، بنحط الكود اللي جاي من Figma.

تنظيم الـ Assets 📂🖼️

1️⃣ تحديد مسار الصور في فولدر assets الأساسي 📁

  • كل الصور هنحطها في assets/images/ علشان تكون منظمة.
  • لو عندنا أيقونات أو أنيميشن (Lottie/GIFs)، هنعمل فولدرات منفصلة لكل نوع.

2️⃣ إنشاء ملف asset_images.dart جوه constants 📄

✅ هنعمل فولدر constants جوه core علشان نجمع فيه كل القيم الثابتة.

✅ جوه constants، هنضيف ملف asset_images.dart نحط فيه كل مسارات الصور في التطبيق.

✅ كل صورة هيكون ليها اسم متغير يعبر عنها بدل ما نحط path  كل مرة يدوي.

✅ لو حبيت أغير أي صورة بعد كدا، بغيرها في مكان واحد بس بدل ما أدور عليها في الكود كله!

3️⃣ لو عندي أيقونات أو أنيميشن؟ 

  • هنعمل ملفات منفصلة زي:
    • asset_icons.dart → للأيقونات
    • asset_animations.dart → للأنيميشن

 إزاي أستخدم الصور دي في الكود؟

بدل ما أكتب المسار يدوي، أستدعيه بسهولة كده:

Image.asset(AssetImages.logo)

🔥 كده الصور والأيقونات بقت منظمة وسهلة التعديل، ولو غيرنا صورة في التصميم، بنبدلها في asset_images.dart بس، والتطبيق كله هيشتغل بالصور الجديدة! 🚀

الخاتمة 

وصلنا لنهاية رحلتنا في تنظيم مشروع Flutter ،  تنظيم المشروع بشكل صح من الاول بيوفر وقت كبير جدًا أثناء تطوير التطبيق و بيزود من كفاءتك ك software engineer! 🎯

من ترتيب الخطوط والألوان إلى تنظيم assets و تصميم ال  widgets، كل خطوة هتخليك تمشي في الطريق الصح. و لما تجي تشوف التطبيق بيشتغل بكل سلاسة ومرونة على كل الأجهزة، هتحس إنك فعلاً بنيت حاجة قوية ومبنية على أسس ثابتة و هتحس بفرق في الوقت و تنظيم دماغك اكتر.

المفتاح في Flutter هو التنظيم والتخطيط، وكلما كنت دقيق في تفاصيل صغيرة ، كلما كان المشروع أسهل في التعديل والتطوير بعد كدا.

فخلينا نقولها بكل بساطة: لما تبدأ تُطبق كل الحاجات دي، هتلاقي نفسك جاهز لكتابة تطبيقات بشكل سليم، مش بس شغالة، لكن مبنية بطريقة منظمة تخلي فريقك يشتغل براحة وسرعة. 🚀

ابدأ من المشروع الجاي نفذ مبادىء الsystem design ✨

Don’t Forget “ Later Equals Never”.