Weather App

إذا أردنا بناء التطبيق بطريقة احترافية وقابلة للتوسع، فهذه هي الخطة فقط بدون تفاصيل إضافية.

1. المتطلبات الوظيفية (Functional Requirements)

الصفحة الرئيسية

  • عرض المدينة الحالية
  • عرض التاريخ واليوم
  • عرض درجة الحرارة الحالية
  • وصف الحالة (مشمس – غائم – ممطر…)
  • أيقونة الطقس
  • درجة الحرارة العظمى والصغرى
  • سرعة الرياح
  • الرطوبة
  • الضغط الجوي
  • نسبة الرؤية
  • وقت الشروق
  • وقت الغروب

توقعات الأسبوع

عرض 7 أيام تحتوي على:

  • اسم اليوم
  • أيقونة الحالة
  • أعلى درجة
  • أقل درجة

البحث

  • البحث عن مدينة
  • حفظ آخر مدينة
  • إمكانية اختيار مدينة أخرى

الإعدادات

  • الوضع الليلي
  • الوضع النهاري
  • لغة التطبيق (حالياً العربية فقط مع دعم التوسعة)
  • وحدة الحرارة (مئوية)

2. المتطلبات

  • Clean Architecture
  • Cubit
  • Repository Pattern
  • Responsive UI
  • Material 3
  • RTL كامل
  • Dark Mode
  • Light Mode
  • Local Storage
  • API
  • Error Handling
  • Loading States
  • Empty States

3. التقنيات

  • Flutter
  • flutter_bloc
  • equatable
  • dio
  • get_it
  • injectable (اختياري)
  • go_router
  • shared_preferences
  • intl
  • geolocator
  • permission_handler
  • cached_network_image
  • shimmer
  • flutter_svg

4. مزود بيانات الطقس

أفضل خيار

OpenWeatherMap

أو

WeatherAPI

5. هيكل المشروع

lib
│
├── core
│   ├── constants
│   ├── network
│   ├── errors
│   ├── services
│   ├── theme
│   ├── widgets
│   ├── utils
│   └── localization
│
├── features
│   │
│   └── weather
│        │
│        ├── data
│        │     ├── datasource
│        │     ├── models
│        │     └── repositories
│        │
│        ├── domain
│        │     ├── entities
│        │     ├── repositories
│        │     └── usecases
│        │
│        └── presentation
│              ├── cubit
│              ├── pages
│              └── widgets
│
└── main.dart
Dart

6. الـ Cubits

ThemeCubit
WeatherCubit
SearchCubit
SettingsCubit
Dart

7. حالات WeatherCubit

Initial

Loading

Loaded

Empty

Error
Dart

8. الشاشات

Splash

Home

Search

Settings
Dart

9. Widgets

CurrentWeatherCard

ForecastCard

WeatherInfoItem

SearchBar

ThemeSwitch

LoadingWidget

ErrorWidget
Dart

10. Entity

Weather
Dart

الحقول

city

country

temperature

minTemperature

maxTemperature

description

icon

humidity

pressure

windSpeed

visibility

sunrise

sunset

date

forecast
Dart

11. Forecast Entity

day

date

icon

minTemp

maxTemp

description
Dart

12. UseCases

GetCurrentWeather

GetWeeklyForecast

SearchCity

SaveLastCity

GetLastCity
Dart

13. Repository

WeatherRepository
Dart

الدوال

getCurrentWeather()

getWeeklyForecast()

searchCity()

saveLastCity()

getLastCity()
Dart

14. DataSource

WeatherRemoteDataSource

WeatherLocalDataSource
Dart

15. الخدمات

ApiService

LocationService

StorageService
Dart

16. الثيم

Light Theme

Dark Theme
Dart

مع دعم:

  • Material 3
  • Dynamic Colors
  • RTL

17. الترجمة

arb files

ar
Dart

ويكون التطبيق مهيأ لإضافة الإنجليزية لاحقًا دون تعديل في الكود.

18. سير العمل (Workflow)

Home Page
      │
      ▼
WeatherCubit
      │
      ▼
GetCurrentWeather
      │
      ▼
Repository
      │
      ▼
RemoteDataSource
      │
      ▼
API
      │
      ▼
Model
      │
      ▼
Entity
      │
      ▼
Cubit State
      │
      ▼
UI
Dart

19. ترتيب التنفيذ

  1. إنشاء المشروع.
  2. إعداد Clean Architecture.
  3. إعداد الثيم (فاتح/داكن).
  4. إعداد الترجمة العربية.
  5. إعداد Dio.
  6. إعداد API.
  7. إنشاء Models.
  8. إنشاء Entities.
  9. إنشاء Repository.
  10. إنشاء Use Cases.
  11. إنشاء Cubits.
  12. بناء شاشة Home.
  13. بناء بطاقات الطقس الحالية.
  14. بناء قائمة توقعات الأسبوع.
  15. إضافة البحث عن المدن.
  16. حفظ آخر مدينة محليًا.
  17. إضافة شاشة الإعدادات.
  18. اختبار جميع الحالات (نجاح، تحميل، خطأ، عدم وجود بيانات).
  19. تحسين واجهة المستخدم وإضافة الرسوم المتحركة البسيطة.

هذه البنية مناسبة لمشروع احترافي، وقابلة للتوسع لاحقًا لإضافة ميزات مثل توقعات كل ساعة، الخرائط، التنبيهات الجوية، دعم لغات متعددة، وويدجت للشاشة الرئيسية دون الحاجة لإعادة هيكلة المشروع.