تخطَّ إلى المحتوى الرئيسي
العودة إلى المشاريع
مكتملمميزتطبيقات الجوال

WX Weather — تطبيق طقس بتصميم لوحة العدادات (أندرويد)

تطبيق طقس لأندرويد مبني بـ React Native و Expo بتصميم لوحة العدادات: قراءات حية وعدادات ورسم للحرارة خلال 24 ساعة وتوقعات ورادار أمطار وأماكن محفوظة ووضع بدون إنترنت وأدوات للشاشة الرئيسية والحرارة في شريط الحالة، بالعربية والإنجليزية (RTL).

شاشات تطبيق WX Weather للطقس

نظرة عامة

نبذة عن المشروع

WX Weather تطبيق طقس لأندرويد مبني بـ React Native و Expo، ومصمم على شكل لوحة عدادات: بطاقات رمادية داكنة وقراءات بخط IBM Plex Mono وعدادات وبوصلة في شاشة واحدة قابلة للتمرير. وهو نسخة الجوال من لوحة تطبيق الطقس على الويب، ويستخدم قواعد البيانات نفسها، فيقرأ التطبيقان الطقس بالطريقة نفسها.

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

أهم المميزات

  • ثلاث عشرة لوحة: الحرارة، والحالة، وبوصلة الرياح، والرطوبة، والضغط، ورسم الحرارة خلال 24 ساعة، وتوقعات 3 أيام، وجودة الهواء (مقياس US EPA)، ومؤشر الأشعة فوق البنفسجية، وطور القمر، ونصائح مبنية على قواعد، وقوس الشمس، ورادار الأمطار
  • اسحب على رسم الـ 24 ساعة لقراءة أي ساعة (الحرارة، والإحساس الفعلي، والأشعة، واحتمال المطر، والرياح)، واضغط على أي يوم لمعرفة الشروق والغروب وأقصى رياح والأمطار والرطوبة والقمر
  • رادار الأمطار على خريطة Leaflet مع إطارات RainViewer لآخر ساعتين: شغّل الحركة، أو انتقل لإطار معين، أو غيّر شفافية الطبقة
  • الأماكن المحفوظة: أضف مدينة بالبحث أو بالضغط على نقطة في الخريطة، وتنقّل بينها بالتبويبات، واختر المكان الذي يفتح عليه التطبيق
  • أربع أدوات للشاشة الرئيسية في أندرويد (الحرارة، والحالة الحالية، والساعات القادمة، والتوقعات)، تتحدث بمهمة في الخلفية وكلما حمّل التطبيق بيانات جديدة
  • الحرارة في شريط الحالة اختيارياً: إشعار صامت دائم بالمدينة والإحساس الفعلي والعظمى والصغرى والأشعة وجودة الهواء
  • يعمل بدون إنترنت: تُحفظ آخر قراءة لكل مكان، فيفتح التطبيق عليها مع علامة واضحة "غير متصل"، ويتحدث وحده عند عودة الاتصال
  • استخدام موقعي الحالي، والسحب للتحديث، والتحديث التلقائي كل 10 دقائق، والوضع الداكن والفاتح، ووحدات الحرارة والرياح والمسافة والضغط والساعة

العربية والاتجاه من اليمين لليسار

عند اختيار العربية تنعكس كل الصفوف والقوائم والنوافذ، وتتحول الواجهة إلى خط IBM Plex Sans Arabic (فالخطوط اللاتينية لا تحتوي على حروف عربية)، ويُلغى تكبير الحروف والمسافات بينها حتى تبقى الحروف العربية متصلة. وتبقى الأرقام والرسم البياني والبوصلة من اليسار لليمين كما تُقرأ لوحات العدادات في اللغتين. ويأتي وصف الحالة من WeatherAPI بالعربية، وتتبع الأدوات وإشعار شريط الحالة اللغة نفسها.

الجانب التقني

بيانات الطقس وجودة الهواء والتنبيهات من WeatherAPI، وصور الرادار من RainViewer، والخريطة من OpenStreetMap. تُرسم الأدوات بمكتبة react-native-android-widget من أيقونات SVG نفسها المستخدمة في التطبيق، وتقرأ القراءة التي حفظها التطبيق، فنادراً ما ترسل طلباً خاصاً بها. وتحافظ إضافة إعدادات Expo مخصصة على عمل بناء أندرويد على ويندوز (مسارات قصيرة لبناء CMake الأصلي) بعد كل prebuild.

تم بناء المشروع بالكامل: تصميم لوحة العدادات، وواجهة الجوال والعدادات بـ SVG، والتخزين للعمل بدون إنترنت، وأدوات أندرويد والتحديث في الخلفية، والإشعارات، والنسخة العربية.

معرض الصور

7 لقطات

التقنيات

React NativeExpo SDK 57JavaScriptReact Native SVGReact Native WebViewLeafletWeatherAPIRainViewerOpenStreetMapAndroid Widgets (react-native-android-widget)Expo Background TaskExpo NotificationsExpo LocationAsyncStorageExpo Config Pluginsi18n / RTL

الخطوة التالية

لديك مشروع في ذهنك؟

أنا متاح للعمل الحر والتعاقد. لنناقش ما الذي تبنيه.