🧪 التدريبات
كل تمرين «جرّب بنفسك» في مكان واحد: اقرأ المطلوب، ثم اكتب الحل وشغّله داخل صفحة الدرس.
الوحدة 1: مفاهيم البرمجة للأجهزة الذكية
شاشة تعريف بتطبيقسهل · الدرس 1: لماذا تطبيقات الأجهزة الذكية؟ أول شاشة React Native
اصنع شاشة ترحيبٍ بسيطة بمكوّنات React Native.←بطاقة ملف شخصيسهل · الدرس 2: المكوّنات الأساسية: View و Text و Image والأنماط StyleSheet
اصنع بطاقةً تجمع صورة ونصّين بأنماط StyleSheet.←
اصنع شاشة ترحيبٍ بسيطة بمكوّنات React Native.←بطاقة ملف شخصيسهل · الدرس 2: المكوّنات الأساسية: View و Text و Image والأنماط StyleSheet
اصنع بطاقةً تجمع صورة ونصّين بأنماط StyleSheet.←
الوحدة 2: تطوير واجهات المستخدم للأجهزة الذكية
شريط علويّ متوازنسهل · الدرس 3: التخطيط بـ Flexbox في الأجهزة الذكية
اصنع شريطًا علويًّا: عنوانٌ على جهة وزرُّ إعداداتٍ على الجهة الأخرى.←قائمة مهامّمتوسط · الدرس 4: اللمس والأزرار Pressable والقوائم FlatList
اعرض قائمة مهامّ بـ FlatList، وزرًّا يزيد عدّاد المنجَز.←عدّاد أحرفمتوسط · الدرس 5: الإدخال TextInput والحالة useState
حقلٌ متحكَّمٌ به يعرض عدد الأحرف المكتوبة حيًّا.←
اصنع شريطًا علويًّا: عنوانٌ على جهة وزرُّ إعداداتٍ على الجهة الأخرى.←قائمة مهامّمتوسط · الدرس 4: اللمس والأزرار Pressable والقوائم FlatList
اعرض قائمة مهامّ بـ FlatList، وزرًّا يزيد عدّاد المنجَز.←عدّاد أحرفمتوسط · الدرس 5: الإدخال TextInput والحالة useState
حقلٌ متحكَّمٌ به يعرض عدد الأحرف المكتوبة حيًّا.←
الوحدة 3: التفاعل مع مكوّنات الجهاز والمستشعرات
تنبيه بطاريةمتوسط · الدرس 6: التفاعل مع مكوّنات الجهاز: مقدمة المستشعرات
اقرأ البطارية واعرض تنبيهًا يتغيّر مع المستوى.←مؤشّر اتجاه الميلمتوسط · الدرس 7: الإمالة والحركة: مستشعر التسارع
اقرأ الإمالة واعرض اتجاهها نصًّا.←
اقرأ البطارية واعرض تنبيهًا يتغيّر مع المستوى.←مؤشّر اتجاه الميلمتوسط · الدرس 7: الإمالة والحركة: مستشعر التسارع
اقرأ الإمالة واعرض اتجاهها نصًّا.←
الوحدة 4: مفاهيم تطوير تطبيقات متعدّدة المنصّات
الوحدة 5: تطوير تطبيقات باستخدام React Native
مكوّن تقييم بالنجوممتوسط · الدرس 9: مكوّنات قابلة لإعادة الاستخدام: props
اصنع مكوّنًا يستقبل عدد النجوم ويعرضها.←تبديل شاشتينمتوسط · الدرس 10: التنقّل بين الشاشات
طبّق تنقّلًا بين شاشتين بالحالة.←جلب أسماءمتقدم · الدرس 11: جلب البيانات وعرضها في قائمة حيّة
اجلب قائمةً من مصدرٍ محاكى واعرض عددها.←
اصنع مكوّنًا يستقبل عدد النجوم ويعرضها.←تبديل شاشتينمتوسط · الدرس 10: التنقّل بين الشاشات
طبّق تنقّلًا بين شاشتين بالحالة.←جلب أسماءمتقدم · الدرس 11: جلب البيانات وعرضها في قائمة حيّة
اجلب قائمةً من مصدرٍ محاكى واعرض عددها.←
الوحدة 6: تطوير تطبيقات باستخدام Flutter
ترجمة من Flutter إلى React Nativeمتوسط · الدرس
أمامك عدّاد Flutter أعلاه. اكتب مكافئه بـ React Native.←ابنِ ما قرأتهمتوسط · الدرس 13: مقارنة عمليّة: React Native مقابل Flutter
أمامك بطاقة Flutter أعلاه. اكتب بطاقةً مكافئة بـ React Native فيها عنوانٌ وسطرٌ فرعيّ.←
12: Flutter و Dart: البنية والـ Widgetsأمامك عدّاد Flutter أعلاه. اكتب مكافئه بـ React Native.←ابنِ ما قرأتهمتوسط · الدرس 13: مقارنة عمليّة: React Native مقابل Flutter
أمامك بطاقة Flutter أعلاه. اكتب بطاقةً مكافئة بـ React Native فيها عنوانٌ وسطرٌ فرعيّ.←
الوحدة 7: مفاهيم التفاعل مع المستشعرات والأجهزة الذكية
لوحة مستشعرينمتوسط · الدرس 14: أنواع المستشعرات: الضوء والتسارع والموقع والكاميرا
اعرض قراءتَي الضوء والإمالة معًا.←اشتراك نظيف بالضوءمتقدم · الدرس 15: دورة حياة الاشتراك بالمستشعر
اشترك في الضوء بدورة حياةٍ سليمة.←
اعرض قراءتَي الضوء والإمالة معًا.←اشتراك نظيف بالضوءمتقدم · الدرس 15: دورة حياة الاشتراك بالمستشعر
اشترك في الضوء بدورة حياةٍ سليمة.←
الوحدة 8: التفاعل مع الحساسات والأجهزة الذكية باستخدام APIs
شارة نهار/ليلمتوسط · الدرس 16: مستشعر الضوء وتبديل الثيم (نهار/ليل)
اقرأ الضوء واعرض الوضع المناسب.←بطاقة موقعمتوسط · الدرس 17: الموقع GPS وعرضه على الخريطة
اعرض المدينة والإحداثيّات.←زرّ التقاطمتقدم · الدرس 18: الكاميرا: التقاط صورة وعرضها
اعرض آخر لقطةٍ من الكاميرا.←
اقرأ الضوء واعرض الوضع المناسب.←بطاقة موقعمتوسط · الدرس 17: الموقع GPS وعرضه على الخريطة
اعرض المدينة والإحداثيّات.←زرّ التقاطمتقدم · الدرس 18: الكاميرا: التقاط صورة وعرضها
اعرض آخر لقطةٍ من الكاميرا.←
الوحدة 9: تكامل التفاعل مع المستشعرات في تطبيقات الأجهزة الذكية
حالة الاستواءمتوسط · الدرس 19: تطبيق «الميزان»: يدمج الإمالة
اعرض حالة الاستواء من الإمالة.←عدّاد نشاطمتقدم · الدرس 20: تطبيق لياقة يدمج عدّة مستشعرات
ادمج الخطوات (ثابتة) مع تنبيه البطارية.←
اعرض حالة الاستواء من الإمالة.←عدّاد نشاطمتقدم · الدرس 20: تطبيق لياقة يدمج عدّة مستشعرات
ادمج الخطوات (ثابتة) مع تنبيه البطارية.←
الوحدة 10: تطوير واجهات مستخدم متقنة
زرّ متاحمتوسط · الدرس 21: واجهات متقنة: الثيم والتباعد وإمكانية الوصول
اصنع زرًّا بمساحة لمسٍ كافية ووصفٍ للوصول.←ظهور متدرّجمتقدم · الدرس 22: الحركات والانتقالات: Animated
اجعل بطاقةً تظهر بتدرّج عند التحميل.←
اصنع زرًّا بمساحة لمسٍ كافية ووصفٍ للوصول.←ظهور متدرّجمتقدم · الدرس 22: الحركات والانتقالات: Animated
اجعل بطاقةً تظهر بتدرّج عند التحميل.←
الوحدة 11: تحسين أداء التطبيقات وتقليل البطء
قائمة كبيرة سلسةمتوسط · الدرس 23: قياس الأداء وتقليل البطء
اعرض 50 عنصرًا بـ FlatList.←بطاقة memoمتقدم · الدرس 24: تقليل إعادة الرسم: memo والتخزين المؤقت
امنع إعادة رسم مكوّنٍ ثابت بـ memo.←
اعرض 50 عنصرًا بـ FlatList.←بطاقة memoمتقدم · الدرس 24: تقليل إعادة الرسم: memo والتخزين المؤقت
امنع إعادة رسم مكوّنٍ ثابت بـ memo.←