إتقان Flutter: بناء تطبيقات الهاتف المحمول الجاهزة للإنتاج

يعد إنشاء نموذج أولي لـ Flutter أمرًا سهلاً. إن إنشاء تطبيق Flutter جاهز للإنتاج والذي يمكن توسيع نطاقه ويعمل بشكل جيد تحت الحمل ويمكن صيانته على مر السنين يتطلب فهمًا أعمق بكثير للهندسة المعمارية وإدارة الحالة والاختبار وسير عمل النشر. يعمل هذا الدليل على سد الفجوة بين المشاريع التعليمية وتطبيقات العالم الحقيقي، ويغطي الأنماط والممارسات التي تعتمد عليها فرق Flutter الاحترافية كل يوم.

بنية نظيفة لـ Flutter

تفصل البنية النظيفة تطبيقك إلى طبقات متميزة ذات حدود واضحة وقواعد تبعية. هذا الفصل يجعل التعليمات البرمجية الخاصة بك قابلة للاختبار، وقابلة للصيانة، ومستقلة عن الأطر والأدوات الخارجية.

هيكل الطبقة

يتبع تطبيق Flutter للإنتاج عادةً بنية ثلاثية الطبقات:

• طبقة العرض- عناصر واجهة المستخدم والصفحات وإدارة الحالة. تعتمد هذه الطبقة على طبقة المجال ولكن لا تعتمد أبدًا على مصادر البيانات بشكل مباشر.
• طبقة المجال- منطق الأعمال والكيانات وحالات الاستخدام. لا تحتوي هذه الطبقة على أي تبعيات على Flutter أو أي حزم خارجية. وهو يحدد واجهات المستودع (الفئات المجردة) التي تنفذها طبقة البيانات.
• طبقة البيانات- تطبيقات المستودع وعملاء API والوصول إلى قاعدة البيانات المحلية ونماذج البيانات (DTOs). تنفذ هذه الطبقة الواجهات المحددة في طبقة المجال.

lib/
  core/
    error/
      exceptions.dart
      failures.dart
    network/
      network_info.dart
    usecases/
      usecase.dart
  features/
    authentication/
      data/
        datasources/
          auth_remote_datasource.dart
          auth_local_datasource.dart
        models/
          user_model.dart
        repositories/
          auth_repository_impl.dart
      domain/
        entities/
          user.dart
        repositories/
          auth_repository.dart
        usecases/
          login.dart
          register.dart
          logout.dart
      presentation/
        bloc/
          auth_bloc.dart
          auth_event.dart
          auth_state.dart
        pages/
          login_page.dart
          register_page.dart
        widgets/
          login_form.dart

قاعدة التبعية صارمة: الطبقات الداخلية لا تعرف أبدًا عن الطبقات الخارجية. تحدد طبقة المجال واجهات المستودع المجردة، وتوفر طبقة البيانات تطبيقات ملموسة. يسمح لك هذا الانقلاب في التحكم بتبديل مصادر البيانات دون لمس منطق الأعمال.

إدارة الحالة: BLoC وRiverpod

يعد اختيار الحل المناسب لإدارة الحالة أحد أكثر القرارات المعمارية تأثيرًا في مشروع Flutter. نمط

BLoC يستخدم

BLoC (مكون منطق الأعمال) التدفقات لإدارة الحالة. الأحداث تتدفق إلى الداخل، والدول تتدفق إلى الخارج. يجعل تدفق البيانات أحادي الاتجاه هذا تغييرات الحالة قابلة للتنبؤ بها ويسهل تصحيحها.

// Events
abstract class AuthEvent {}

class LoginRequested extends AuthEvent {
  final String email;
  final String password;
  LoginRequested({required this.email, required this.password});
}

class LogoutRequested extends AuthEvent {}

// States
abstract class AuthState {}

class AuthInitial extends AuthState {}
class AuthLoading extends AuthState {}
class AuthAuthenticated extends AuthState {
  final User user;
  AuthAuthenticated(this.user);
}
class AuthError extends AuthState {
  final String message;
  AuthError(this.message);
}

// BLoC
class AuthBloc extends Bloc<AuthEvent, AuthState> {
  final LoginUseCase loginUseCase;
  final LogoutUseCase logoutUseCase;

  AuthBloc({
    required this.loginUseCase,
    required this.logoutUseCase,
  }) : super(AuthInitial()) {
    on<LoginRequested>(_onLoginRequested);
    on<LogoutRequested>(_onLogoutRequested);
  }

  Future<void> _onLoginRequested(
    LoginRequested event,
    Emitter<AuthState> emit,
  ) async {
    emit(AuthLoading());
    final result = await loginUseCase(
      LoginParams(email: event.email, password: event.password),
    );
    result.fold(
      (failure) => emit(AuthError(failure.message)),
      (user) => emit(AuthAuthenticated(user)),
    );
  }

  Future<void> _onLogoutRequested(
    LogoutRequested event,
    Emitter<AuthState> emit,
  ) async {
    await logoutUseCase();
    emit(AuthInitial());
  }
}

Riverpod

Riverpod يقدم أسلوبًا أكثر مرونة وأمانًا في الترجمة لإدارة الحالة. على عكس الموفر، لا يعتمد Riverpod على شجرة عناصر واجهة المستخدم، مما يسهل الاختبار والإنشاء.

// Define providers
final authRepositoryProvider = Provider<AuthRepository>((ref) {
  return AuthRepositoryImpl(
    remoteDatasource: ref.read(authRemoteDatasourceProvider),
    localDatasource: ref.read(authLocalDatasourceProvider),
  );
});

final authStateProvider = StateNotifierProvider<AuthNotifier, AuthState>((ref) {
  return AuthNotifier(ref.read(authRepositoryProvider));
});

class AuthNotifier extends StateNotifier<AuthState> {
  final AuthRepository _repository;

  AuthNotifier(this._repository) : super(const AuthState.initial());

  Future<void> login(String email, String password) async {
    state = const AuthState.loading();
    final result = await _repository.login(email, password);
    state = result.fold(
      (failure) => AuthState.error(failure.message),
      (user) => AuthState.authenticated(user),
    );
  }
}

// Use in widgets
class LoginPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final authState = ref.watch(authStateProvider);
    return authState.when(
      initial: () => LoginForm(),
      loading: () => const CircularProgressIndicator(),
      authenticated: (user) => HomePage(user: user),
      error: (message) => ErrorDisplay(message: message),
    );
  }
}

حقن التبعية

يعد حقن التبعية المناسب ضروريًا للتعليمات البرمجية القابلة للاختبار. توفر حزمةget_itمحدد موقع خدمة بسيط يعمل بشكل جيد مع البنية النظيفة.

final sl = GetIt.instance;

void initDependencies() {
  // External
  sl.registerLazySingleton(() => Dio()..interceptors.add(AuthInterceptor()));
  sl.registerLazySingleton(() => InternetConnectionChecker());

  // Data sources
  sl.registerLazySingleton<AuthRemoteDatasource>(
    () => AuthRemoteDatasourceImpl(dio: sl()),
  );
  sl.registerLazySingleton<AuthLocalDatasource>(
    () => AuthLocalDatasourceImpl(secureStorage: sl()),
  );

  // Repositories
  sl.registerLazySingleton<AuthRepository>(
    () => AuthRepositoryImpl(
      remoteDatasource: sl(),
      localDatasource: sl(),
      networkInfo: sl(),
    ),
  );

  // Use cases
  sl.registerLazySingleton(() => LoginUseCase(sl()));
  sl.registerLazySingleton(() => RegisterUseCase(sl()));

  // BLoCs
  sl.registerFactory(() => AuthBloc(
    loginUseCase: sl(),
    logoutUseCase: sl(),
  ));
}

API التكامل مع Dio

Dio هو الأكثر شعبية عميل HTTP لـ Dart، يقدم أدوات اعتراضية وتكوينًا عامًا ودعم FormData. قم ببناء طبقة API الخاصة بك باستخدام الطلب الآمن ومعالجة الاستجابة.

class ApiClient {
  final Dio _dio;

  ApiClient(this._dio) {
    _dio.options = BaseOptions(
      baseUrl: Environment.apiBaseUrl,
      connectTimeout: const Duration(seconds: 10),
      receiveTimeout: const Duration(seconds: 15),
      headers: {'Content-Type': 'application/json'},
    );

    _dio.interceptors.addAll([
      AuthInterceptor(),
      LogInterceptor(requestBody: true, responseBody: true),
      RetryInterceptor(dio: _dio, retries: 3),
    ]);
  }

  Future<T> get<T>(
    String path, {
    Map<String, dynamic>? queryParameters,
    required T Function(dynamic data) parser,
  }) async {
    try {
      final response = await _dio.get(path, queryParameters: queryParameters);
      return parser(response.data);
    } on DioException catch (e) {
      throw _handleError(e);
    }
  }

  AppException _handleError(DioException error) {
    switch (error.type) {
      case DioExceptionType.connectionTimeout:
      case DioExceptionType.receiveTimeout:
        return NetworkException('Connection timed out');
      case DioExceptionType.badResponse:
        return ServerException(
          error.response?.statusCode ?? 500,
          error.response?.data?['message'] ?? 'Unknown error',
        );
      default:
        return NetworkException('Network error occurred');
    }
  }
}

التخزين المحلي مع Hive وSqflite

تحتاج معظم تطبيقات الإنتاج إلى ثبات البيانات المحلية. اختر الأداة المناسبة بناءً على مدى تعقيد بياناتك.

Hive لتخزين القيمة الرئيسية والكائنات

Hive عبارة عن قاعدة بيانات NoSQL خفيفة الوزن وسريعة للغاية ومكتوبة بلغة Dart النقية. إنه مثالي للتخزين المؤقت وتفضيلات المستخدم وتخزين مجموعات البيانات الصغيرة والمتوسطة.

@HiveType(typeId: 0)
class CachedArticle extends HiveObject {
  @HiveField(0)
  final String id;

  @HiveField(1)
  final String title;

  @HiveField(2)
  final String content;

  @HiveField(3)
  final DateTime cachedAt;

  CachedArticle({
    required this.id,
    required this.title,
    required this.content,
    required this.cachedAt,
  });
}

class ArticleCacheService {
  static const _boxName = 'articles_cache';

  Future<void> cacheArticles(List<Article> articles) async {
    final box = await Hive.openBox<CachedArticle>(_boxName);
    final cached = articles.map((a) => CachedArticle(
      id: a.id,
      title: a.title,
      content: a.content,
      cachedAt: DateTime.now(),
    ));
    await box.clear();
    await box.addAll(cached);
  }

  Future<List<CachedArticle>> getCachedArticles() async {
    final box = await Hive.openBox<CachedArticle>(_boxName);
    return box.values.toList();
  }
}

Sqflite للبيانات العلائقية

عندما تحتوي بياناتك على علاقات معقدة وتحتاج إلى استعلامات SQL، يوفر Sqflite تطبيق SQLite الكامل لـ Flutter. استخدمه للبيانات المنظمة التي تستفيد من الصلات والفهارس والمعاملات.

إشعارات الدفع

قم بتنفيذ إشعارات الدفع باستخدام Firebase Cloud Messaging (FCM) مع معالجة الأذونات المناسبة ومعالجة الرسائل في الخلفية.

class NotificationService {
  final FirebaseMessaging _messaging = FirebaseMessaging.instance;

  Future<void> initialize() async {
    // Request permission
    final settings = await _messaging.requestPermission(
      alert: true,
      badge: true,
      sound: true,
    );

    if (settings.authorizationStatus == AuthorizationStatus.authorized) {
      // Get FCM token
      final token = await _messaging.getToken();
      await _sendTokenToServer(token);

      // Listen for token refresh
      _messaging.onTokenRefresh.listen(_sendTokenToServer);

      // Handle foreground messages
      FirebaseMessaging.onMessage.listen(_handleForegroundMessage);

      // Handle background/terminated message taps
      FirebaseMessaging.onMessageOpenedApp.listen(_handleMessageTap);
    }
  }

  void _handleForegroundMessage(RemoteMessage message) {
    // Show local notification using flutter_local_notifications
    FlutterLocalNotificationsPlugin().show(
      message.hashCode,
      message.notification?.title,
      message.notification?.body,
      const NotificationDetails(
        android: AndroidNotificationDetails(
          'default_channel',
          'Default',
          importance: Importance.high,
        ),
      ),
    );
  }
}

الارتباط العميق

يتيح الارتباط العميق للمستخدمين التنقل مباشرة إلى محتوى محدد داخل تطبيقك من عناوين URL الخارجية. يدعم Flutter كلاً من الروابط العميقة المستندة إلى URI والروابط الديناميكية.

// Configure in MaterialApp
MaterialApp(
  onGenerateRoute: (settings) {
    final uri = Uri.parse(settings.name ?? '');

    if (uri.pathSegments.first == 'product') {
      final productId = uri.pathSegments[1];
      return MaterialPageRoute(
        builder: (_) => ProductDetailPage(id: productId),
      );
    }

    if (uri.pathSegments.first == 'order') {
      final orderId = uri.pathSegments[1];
      return MaterialPageRoute(
        builder: (_) => OrderTrackingPage(id: orderId),
      );
    }

    return MaterialPageRoute(builder: (_) => const HomePage());
  },
)

للحصول على ارتباط عميق أكثر قوة، استخدم حزمةgo_routerالتي توفر التوجيه التعريفي مع دعم الارتباط العميق وعمليات إعادة التوجيه والتنقل المتداخل.

CI/CD مع Codemagic وFastlane

تعد مسارات البناء والنشر الآلية ضرورية لتطبيقات الإنتاج. توفر Codemagic خدمة CI/CD الأصلية لـ Flutter، بينما توفر Fastlane المزيد من الأتمتة القابلة للتخصيص.

تكوين Codemagic

# codemagic.yaml
workflows:
  production-release:
    name: Production Release
    max_build_duration: 60
    environment:
      flutter: stable
      vars:
        APP_STORE_CONNECT_KEY_ID: Encrypted(...)
        GOOGLE_PLAY_SERVICE_ACCOUNT: Encrypted(...)
    scripts:
      - name: Install dependencies
        script: flutter pub get
      - name: Run tests
        script: flutter test --coverage
      - name: Build Android
        script: flutter build appbundle --release
      - name: Build iOS
        script: |
          flutter build ipa --release \
            --export-options-plist=/path/to/ExportOptions.plist
    artifacts:
      - build/**/outputs/**/*.aab
      - build/ios/ipa/*.ipa
    publishing:
      google_play:
        credentials: $GOOGLE_PLAY_SERVICE_ACCOUNT
        track: internal
      app_store_connect:
        api_key: $APP_STORE_CONNECT_KEY_ID

Fastlane Integration

Fastlane يوفر تحكمًا دقيقًا في عملية الإنشاء والتقديم. تحديد الممرات لمراحل الإصدار المختلفة:

# fastlane/Fastfile
platform :ios do
  desc "Deploy to TestFlight"
  lane :beta do
    build_flutter_app(target: "lib/main.dart")
    upload_to_testflight(
      skip_waiting_for_build_processing: true
    )
  end

  desc "Deploy to App Store"
  lane :release do
    build_flutter_app(target: "lib/main.dart")
    upload_to_app_store(
      submit_for_review: true,
      automatic_release: false
    )
  end
end

ملف تعريف الأداء

تتطلب تطبيقات الإنتاج أداءً ثابتًا. يوفر Flutter DevTools إمكانات شاملة للتوصيف.

• تتبع عناصر واجهة المستخدم- استخدم تراكب الأداء وأدوات DevTools لتحديد عناصر واجهة المستخدم التي يتم إعادة بنائها بشكل مفرط. قم بتطبيق مُنشئاتconstوإدارة الحالة الانتقائية لتقليل عمليات إعادة البناء.
• عرض الإطار- راقب عرض المخطط الزمني لضمان عرض الإطارات خلال 16 مللي ثانية (60 إطارًا في الثانية) أو 8 مللي ثانية (120 إطارًا في الثانية). ابحث عن مراحل البناء والتخطيط والطلاء الباهظة الثمن.
• Memory Profiling- تتبع تخصيص الذاكرة لاكتشاف التسريبات. تشمل الأسباب الشائعة اشتراكات البث غير الملغاة، ووحدات التحكم غير المتخلص منها، والمراجع المحتجزة في عمليات الإغلاق.
• أداء بدء التشغيل- قم بتأجيل التهيئة الثقيلة باستخدامWidgetsBinding.instance.addPostFrameCallback. استخدم التحميل المؤجل مع عمليات استيرادdeferred asللميزات غير المطلوبة على الفور.

// Profile-mode build for accurate performance measurement
// flutter run --profile

// Add performance overlay in debug builds
MaterialApp(
  showPerformanceOverlay: true,
  // ...
)

الاستنتاج

يتطلب إنشاء تطبيقات Flutter الجاهزة للإنتاج أكثر من مجرد معرفة كتالوج عناصر واجهة المستخدم. فهو يتطلب بنية مدروسة وإدارة قوية للحالة واختبارًا شاملاً وخطوط نشر آلية. من خلال اعتماد بنية نظيفة، والاستثمار في حقن التبعية المناسب، وتنفيذ معالجة شاملة للأخطاء، وإنشاء سير عمل CI/CD، يمكنك إنشاء تطبيقات ليست وظيفية فحسب، بل قابلة للصيانة والتوسع على المدى الطويل.

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