شاشة تفاصيل الوصفات

شاشة تفاصيل الوصفات (Recipe Details) المصممة والمطورة بالكامل للهواتف الذكية (أندرويد) بالاعتماد على حزمة الأدوات الحديثة Jetpack Compose ولغة Kotlin.

تم التركيز في هذه الشاشة على تقديم تجربة مستخدم (UX) سلسة وجذابة بصرياً من خلال نمط المظهر الداكن (Dark Mode)، مع الحفاظ على كفاءة الأداء وسرعة الاستجابة.

?️ الأدوات والتقنيات المستخدمة في بناء الشاشة (How it was built):

تم هندسة وبرمجة هذه الشاشة باستخدام أفضل الممارسات البرمجية الحديثة:

الهندسة والواجهات: تم بناء الواجهات بالكامل بشكل تصريحي (Declarative UI) باستخدام Jetpack Compose لضمان خفة حجم التطبيق وسلاسة الحركة والأنيميشن.

إدارة التمرير (Scrolling): تم استخدام LazyColumn لعرض قائمة المكونات (Ingredients) بكفاءة عالية، مما يضمن معالجة ممتازة للذاكرة (Memory Optimization) مهما زاد عدد العناصر داخل القائمة.

إدارة الصور وعرضها: تم دمج مكتبة Coil لعمل كاش (Caching) وتحميل للصور بشكل غير متزامن (Asynchronous Image Loading) مع تطبيق حواف دائرية (RoundedCornerShape) لتبدو احترافية وعصرية.

المعمارية (Architecture): الشاشة مرتبطة بـ ViewModel ومبنية على معمارية MVVM، حيث يتم جلب البيانات (اسم الوصفة، التصنيفات، المكونات، المقادير) وفصل منطق العمل (Business Logic) تماماً عن الواجهات لسهولة الاختبار (Unit Testing).

إدارة الألوان والمظهر: تم بناء الـ Theme الخاص بالتطبيق ليدعم الـ Material 3 Design مع تخصيص مظهر داكن متناسق ومريح للعين.

? المكونات البرمجية للشاشة (UI Components Breakdown):

TopAppBar: يحتوي على سهم العودة (Back Navigation) وعنوان الشاشة الثابت "Recipe Details".

Main Recipe Image: صورة بارزة وعالية الجودة للأكلة بحواف دائرية ناعمة.

Recipe Title: نص عريض (Bold) يبرز اسم الوجبة بوضوح.

Category Chips: أزرار تصنيفية تفاعلية مخصصة (مثل: Chicken, Jamaican).

Section Header: عنوان فرعي لقسم المكونات يوضح إجمالي عدد العناصر المتاحة ديناميكياً (e.g., 13 items).

Ingredient List Item Row: صف تفاعلي متكرر (Row) لكل عنصر، يحتوي على:

أيقونة دائرية مخصصة للمكون الغذائي (تضم خلفية متباينة).

اسم المكون (Text).

الكمية أو طريقة التحضير بمحاذاة يسارية دقيقة (e.g., 1 whole, 1 chopped).