تطبيقات رياكت نيتيف
انشاء تطبيق احترافي لمعرفة درجات الحرارة
ماذا ستتعلم؟
- إنشاء مشروع رياكت نيتيف
- الحصول على موقع المستخدم باللوكيشن
- التسجيل على السيرفر الخاص ببيانات الطقس
- جلب البيانات من السيرفر
- فهم وحدة القياس وتغييرها
- عرض البيانات الأساسية للطقس
- إضافة خيار إعادة تحميل البيانات
- عرض باقي بيانات الطقس
عن الدورة
يشرح هذا الكورس كيفية إنشاء تطبيق لمعرفة درجات الحرارة وحالة الطقس باستخدام React Native (رياكت نيتيف)، خطوة بخطوة من الفكرة حتى التطبيق الكامل. تبدأ بمقدمة عن الدورة ثم إنشاء المشروع، وبعدها الحصول على اللوكيشن أي موقع المستخدم، والتسجيل على السيرفر الذي يقدم بيانات الطقس، ثم جلب البيانات من السيرفر وعرض البيانات الأساسية. بعد ذلك تتعرف على وحدة القياس وكيفية تغييرها، وتضيف خيار إعادة تحميل البيانات، ثم تعرض باقي البيانات وتصل إلى المرحلة الأخيرة. ينفع هذا الكورس كل من يريد تعلم تطبيقات الموبايل من خلال مشروع عملي صغير، سواء كنت مبتدئا في رياكت نيتيف أو مبرمجا يبحث عن مثال تطبيقي. ورغم أن التطبيق صغير فهو يجمع مهارات كثيرة يحتاجها كل مبرمج، ويفضل أن تعرف أساسيات البرمجة قبل البدء. وفي النهاية ستكون قادرا على بناء تطبيق طقس يتصل بالسيرفر ويحدد الموقع ويعرض درجات الحرارة. الشرح بالعربية ومع تطبيق عملي كامل يساعدك على فهم كل خطوة بسهولة.
نتائج متوقعة من الدورة
- إنشاء تطبيق بسيط باستخدام رياكت نيتيف.
- فهم كيفية الاتصال بالسيرفر وجلب البيانات.
- إضافة ميزات تفاعلية للتطبيق مثل إعادة التحميل.
- مهارات أساسية لتطوير تطبيقات رياكت نيتيف مستقبلية.
تقييمات المتدربين
محتوى الدورة
1تطبيقات React Native
11 درس
- مقدمة الدورةيقدم تطبيق الطقس العملي في React Native، الذي يجلب البيانات من سيرفر خارجي عبر API ومفتاح، ويعرض مكوناته: معلومات الموقع، واختيار وحدة القياس، وأيقونة التحديث، وتفاصيل الطقس.3:18
- إنشاء المشروعينشئ مشروع React Native لتطبيق الطقس بأمر في الـ Terminal مع التأكد من تثبيت Node.js، ثم يشغله بالأمر npx expo start على محاكي Android ويجرب تعديل الكود ليظهر فورا.4:33
- الحصول على اللوكيشنيحصل على موقع المستخدم في تطبيق الطقس عبر مكتبة expo-location، فيطلب إذن الموقع، ويعالج حالة الرفض برسالة خطأ، ثم يقرأ خط الطول وخط العرض.15:34
- التسجيل على السيرفريشرح استخدام خط الطول والعرض مع API، وعمليات CRUD على السيرفر، ثم يسجل في خدمة OpenWeatherMap للحصول على مفتاح API ويخزنه في كائن داخل المشروع.5:17
- الحصول على البيانات من السيرفريجلب بيانات الطقس من OpenWeatherMap بدالة fetch باستخدام الإحداثيات والمفتاح، ويقرأ النتيجة بصيغة JSON، ويعالج حالة فشل الاتصال برسالة الخطأ، ويعرض درجة الحرارة.15:48
- وحدة القياسيشغل تطبيق الطقس على جهاز حقيقي عبر Expo Go ورمز QR، ثم يضيف معامل units إلى رابط الـ API مع حالة state، ليبدل بين وحدتي القياس السيليزيوس والفهرنهايت.7:55
- عرض البيانات الأساسيةيضبط شكل التطبيق في مكوّن App ويعرض البيانات الأساسية من استجابة JSON، وهي الأيقونة والوصف ودرجة الحرارة، داخل مكوّن معلومات الطقس مع الصورة والنص.20:23
- تغيير وحدة القياسينشئ مكوّني WeatherDetails وUnitsPicker، ويثبت مكتبة قائمة منسدلة، ويضبط موضع القائمة وخياراتها ليتحول المستخدم بين السيليزيوس والفهرنهايت.13:00
- إضافة خيار إعادة تحميل البياناتينشئ مكوّن ReloadIcon الذي يعرض أيقونة تحديث من حزمة Ionicons، ويمرر له دالة التحميل كخاصية ليعيد جلب البيانات عند الضغط عليه، مع ضبط موضعه ولونه.4:59
- عرض باقى البياناتينشئ مكوّن WeatherDetails لعرض باقي البيانات، فيقرب القيم بـ Math.round ويضيف الوحدات، ويعرض الشعور بالحرارة والرطوبة والضغط وسرعة الرياح مع أيقونات MaterialCommunityIcons وأنماط مدمجة.18:30
- المرحلة الأخيرةيجمع كل مكونات تطبيق الطقس في ملف App.js بالاستيراد وتمرير الخصائص، ويعيد ضبط القيم إلى null عند كل تحميل، ويعرض الأخطاء، ويربط تبديل وحدة القياس وأيقونة التحديث.14:09
المحاضر
م/عمرو عبد الفتاح
