Arsitektur Aplikasi

MStore Mobile dibangun dengan Clean Architecture dan BLoC Pattern untuk memastikan separation of concerns, testability, dan maintainability.

🏗️ Arsitektur Overview

┌─────────────────────────────────────────────────────────┐
│                    Presentation Layer                    │
│  (UI, Widgets, Pages, BLoC/Cubit State Management)      │
└─────────────────────────────────────────────────────────┘
                           ↓
┌─────────────────────────────────────────────────────────┐
│                     Domain Layer                         │
│     (Business Logic, Use Cases, Entities, Repos)        │
└─────────────────────────────────────────────────────────┘
                           ↓
┌─────────────────────────────────────────────────────────┐
│                      Data Layer                          │
│  (Repository Impl, API, Local DB, Data Sources)         │
└─────────────────────────────────────────────────────────┘
                           ↓
┌─────────────────────────────────────────────────────────┐
│                   Infrastructure                         │
│     (Dio, Retrofit, Isar, Firebase, MQTT)               │
└─────────────────────────────────────────────────────────┘

📁 Struktur Folder

lib/
├── app.dart                    # Root application widget
├── main_development.dart       # Development entry point
├── main_staging.dart          # Staging entry point
├── main_production.dart       # Production entry point
│
├── core/                      # Core business logic (Domain + Data)
│   ├── auth/                 # Authentication domain
│   │   ├── auth_api.dart            # Retrofit API
│   │   ├── auth_repository.dart     # Repository interface
│   │   ├── auth_service.dart        # Business logic
│   │   └── models/                  # Domain models
│   │
│   ├── product/              # Product domain
│   ├── inventory/            # Inventory domain
│   ├── transaction/          # Transaction domain
│   ├── dashboard/            # Dashboard domain
│   ├── payments/             # Payments domain
│   │
│   ├── network/              # Networking infrastructure
│   │   ├── dio_client.dart          # Dio factory
│   │   ├── interceptors/            # HTTP interceptors
│   │   └── network_exceptions.dart  # Error handling
│   │
│   ├── mqtt/                 # MQTT real-time sync
│   ├── firebase/             # Firebase services
│   ├── observers/            # BLoC observers
│   └── ...
│
├── features/                 # Feature modules (Presentation)
│   ├── cashier/             # Kasir feature
│   │   ├── bloc/                   # BLoC state management
│   │   ├── pages/                  # UI pages
│   │   ├── widgets/                # Feature widgets
│   │   └── models/                 # UI models
│   │
│   ├── inventory/           # Inventory feature
│   ├── dashboard/           # Dashboard feature
│   ├── auth/                # Auth UI
│   ├── home/                # Home feature
│   └── ...
│
├── di/                      # Dependency Injection
│   ├── injection.dart              # GetIt setup
│   ├── injection.config.dart       # Generated DI config
│   └── network_module.dart         # Network DI module
│
├── pkg/                     # Shared utilities & components
│   ├── component/                  # Reusable widgets
│   ├── theme/                      # Theme configuration
│   ├── utils/                      # Helper functions
│   └── common/                     # Constants
│
├── database/                # Local database schemas
│   └── isar/                       # Isar collections
│
├── i18n/                    # Internationalization
│   ├── strings.g.dart              # Generated translations
│   ├── strings_id.g.dart           # Indonesian
│   └── strings_en.g.dart           # English
│
└── middlewares/             # Router middlewares
    └── auth_middleware.dart        # Auth guard

🎯 Layer Responsibilities

1. Presentation Layer (`features/`)

Tanggung jawab:

Menampilkan UI
Menangani user interaction
Mengelola UI state dengan BLoC/Cubit
Tidak boleh mengakses data source langsung

Komponen:

Pages: Full screen widgets
Widgets: Reusable UI components
BLoC/Cubit: State management
Models: UI-specific models (jika berbeda dari domain)

Contoh:

// features/cashier/bloc/cashier_bloc.dart
class CashierBloc extends Bloc<CashierEvent, CashierState> {
  final ProductRepository _productRepository;
  
  CashierBloc(this._productRepository) : super(CashierInitial()) {
    on<LoadProducts>(_onLoadProducts);
  }
  
  Future<void> _onLoadProducts(
    LoadProducts event,
    Emitter<CashierState> emit,
  ) async {
    emit(CashierLoading());
    final result = await _productRepository.getProducts();
    result.fold(
      (failure) => emit(CashierError(failure.message)),
      (products) => emit(CashierLoaded(products)),
    );
  }
}

2. Domain Layer (`core/*/`)

Tanggung jawab:

Business logic
Domain models (entities)
Repository interfaces
Use cases (optional, untuk logic kompleks)

Prinsip:

Pure Dart (no Flutter dependencies)
Framework-agnostic
Testable

Contoh:

// core/product/product_repository.dart
abstract class ProductRepository {
  Future<Either<Failure, List<Product>>> getProducts();
  Future<Either<Failure, Product>> getProductById(String id);
  Future<Either<Failure, void>> createProduct(Product product);
}

3. Data Layer (`core/*/`)

Tanggung jawab:

Implementasi repository
API calls (Retrofit)
Local database operations (Isar)
Data mapping (DTO ↔ Entity)
Caching strategy

Komponen:

Repository Implementation: Concrete repository
API: Retrofit interfaces
Local Data Source: Isar collections
DTOs: Data Transfer Objects

Contoh:

// core/product/product_repository_retrofit.dart
class ProductRepositoryRetrofit implements ProductRepository {
  final Dio dio;
  final String baseUrl;
  
  @override
  Future<Either<Failure, List<Product>>> getProducts() async {
    try {
      final api = ProductApi(dio, baseUrl: baseUrl);
      final response = await api.getProducts();
      return Right(response.data);
    } on DioException catch (e) {
      return Left(NetworkException.fromDioError(e));
    }
  }
}

4. Infrastructure Layer

Tanggung jawab:

HTTP client (Dio)
Database (Isar)
Firebase services
MQTT client
External services

🔄 Data Flow

Request Flow (User Action → API)

User Interaction
      ↓
   Widget
      ↓
BLoC Event Dispatch
      ↓
BLoC Event Handler
      ↓
Repository Method Call
      ↓
API Call (Retrofit)
      ↓
Dio Interceptors Pipeline:
  - CorrelationInterceptor (X-Correlation-ID)
  - HeadersInterceptor (Common headers)
  - AuthInterceptor (Authorization token)
  - RefreshTokenInterceptor (Auto refresh)
  - RetryInterceptor (Retry on failure)
  - LoggingInterceptor (Logging)
      ↓
HTTP Request → Backend
      ↓
HTTP Response
      ↓
Repository returns Either<Failure, Data>
      ↓
BLoC emits new State
      ↓
Widget rebuilds with new State

Offline-First Flow

User Action
      ↓
BLoC Event
      ↓
Repository checks local cache (Isar)
      ↓
If cached: Return immediately
      ↓
Background: Sync with API
      ↓
Update local cache
      ↓
Emit updated state

🧩 Design Patterns

1. Repository Pattern

Abstraksi akses data, memisahkan business logic dari data source.

abstract class ProductRepository {
  Future<Either<Failure, List<Product>>> getProducts();
}

class ProductRepositoryRetrofit implements ProductRepository {
  // Implementation with Retrofit
}

class ProductRepositoryMock implements ProductRepository {
  // Mock implementation for testing
}

2. BLoC Pattern

State management dengan event-driven architecture.

// Event
abstract class ProductEvent {}
class LoadProducts extends ProductEvent {}

// State
abstract class ProductState {}
class ProductLoading extends ProductState {}
class ProductLoaded extends ProductState {
  final List<Product> products;
  ProductLoaded(this.products);
}

// BLoC
class ProductBloc extends Bloc<ProductEvent, ProductState> {
  // Handle events and emit states
}

3. Dependency Injection

Menggunakan GetIt + Injectable untuk DI.

@module
abstract class NetworkModule {
  @LazySingleton()
  Dio dio(@Named('baseUrl') String baseUrl) => createDio(baseUrl: baseUrl);
  
  @LazySingleton(as: ProductRepository)
  ProductRepositoryRetrofit productRepository(Dio dio) {
    return ProductRepositoryRetrofit(dio: dio);
  }
}

4. Either Pattern (Functional Error Handling)

Menggunakan Dartz untuk error handling yang eksplisit.

Future<Either<Failure, Product>> getProduct(String id) async {
  try {
    final product = await api.getProduct(id);
    return Right(product);
  } catch (e) {
    return Left(ServerFailure('Failed to fetch product'));
  }
}

// Usage
final result = await repository.getProduct('123');
result.fold(
  (failure) => print('Error: ${failure.message}'),
  (product) => print('Success: ${product.name}'),
);

🔐 Security Architecture

1. Authentication Flow

Login Request
      ↓
AuthRepository.login()
      ↓
API returns: accessToken, refreshToken
      ↓
Store in secure storage (Isar)
      ↓
AuthInterceptor adds token to all requests
      ↓
On 401 response:
  RefreshTokenInterceptor triggers
      ↓
  Silent refresh with refreshToken
      ↓
  Update tokens
      ↓
  Retry original request

2. Token Management

Access Token: Short-lived (15 minutes)
Refresh Token: Long-lived (30 days)
Auto-refresh: Handled by RefreshTokenInterceptor
Storage: Encrypted in Isar database

📡 Real-Time Architecture

MQTT Integration

App Start
      ↓
MqttService.InitMQTT()
      ↓
Connect to MQTT broker
      ↓
Subscribe to topics:
  - branch/{branchId}/inventory
  - branch/{branchId}/transactions
  - user/{userId}/notifications
      ↓
On message received:
  Parse payload
      ↓
  Update local database (Isar)
      ↓
  Emit BLoC event
      ↓
  UI updates automatically

🗄️ Database Architecture

Isar (Local NoSQL Database)

@collection
class ProductLocal {
  Id id = Isar.autoIncrement;
  
  @Index()
  late String productId;
  
  late String name;
  late double price;
  late int stock;
  
  @Index()
  late DateTime updatedAt;
}

Strategi:

Write-through cache
Background sync
Conflict resolution (last-write-wins)

🎨 UI Architecture

Platform-Adaptive Design

if (Platform.isIOS) {
  return CupertinoApp.router(
    theme: iosTheme,
    routerConfig: GlobalRouter,
  );
} else {
  return MaterialApp.router(
    theme: androidTheme,
    routerConfig: GlobalRouter,
  );
}

Theme System

AppTheme: Centralized theme configuration
Theme Tailor: Type-safe theme extensions
Dark Mode: Full support

📊 Observability

Logging

// AppLog - Structured logging
AppLog.i('category', 'message', meta: {'key': 'value'});
AppLog.e('category', 'error', exception, stackTrace);

// BLoC Observer
class AppBlocObserver extends BlocObserver {
  @override
  void onEvent(Bloc bloc, Object? event) {
    AppLog.i('bloc.${bloc.runtimeType}', 'event: $event');
  }
}

Crash Reporting

Firebase Crashlytics: Production crashes
AppLog: Development logging
Sentry (optional): Error tracking

🧪 Testing Architecture

test/
├── unit/              # Unit tests (business logic)
├── widget/            # Widget tests (UI)
├── integration/       # Integration tests
└── mocks/             # Mock implementations

Next Steps

Arsitektur ini dirancang untuk:

✅ Scalability
✅ Maintainability
✅ Testability
✅ Separation of Concerns
✅ Code Reusability

Core Architecture

​Arsitektur Aplikasi

​🏗️ Arsitektur Overview

​📁 Struktur Folder

​🎯 Layer Responsibilities

​1. Presentation Layer (features/)

​2. Domain Layer (core/*/)

​3. Data Layer (core/*/)

​4. Infrastructure Layer

​🔄 Data Flow

​Request Flow (User Action → API)

​Offline-First Flow

​🧩 Design Patterns

​1. Repository Pattern

​2. BLoC Pattern

​3. Dependency Injection

​4. Either Pattern (Functional Error Handling)

​🔐 Security Architecture

​1. Authentication Flow

​2. Token Management

​📡 Real-Time Architecture

​MQTT Integration

​🗄️ Database Architecture

​Isar (Local NoSQL Database)

​🎨 UI Architecture

​Platform-Adaptive Design

​Theme System

​📊 Observability

​Logging

​Crash Reporting

​🧪 Testing Architecture

​Next Steps

Arsitektur Aplikasi

🏗️ Arsitektur Overview

📁 Struktur Folder

🎯 Layer Responsibilities

1. Presentation Layer (`features/`)

2. Domain Layer (`core/*/`)

3. Data Layer (`core/*/`)

4. Infrastructure Layer

🔄 Data Flow

Request Flow (User Action → API)

Offline-First Flow

🧩 Design Patterns

1. Repository Pattern

2. BLoC Pattern

3. Dependency Injection

4. Either Pattern (Functional Error Handling)

🔐 Security Architecture

1. Authentication Flow

2. Token Management

📡 Real-Time Architecture

MQTT Integration

🗄️ Database Architecture

Isar (Local NoSQL Database)

🎨 UI Architecture

Platform-Adaptive Design

Theme System

📊 Observability

Logging

Crash Reporting

🧪 Testing Architecture

Next Steps