# インフラ構成図

## 全体システム構成図

```mermaid
graph TB
    subgraph "クライアント層"
        A1[Android端末<br/>SDK 22+]
        A2[iOS端末<br/>iOS 16+]
        A3[Web Browser<br/>PWA対応]
    end

    subgraph "モバイルアプリ<br/>Flutter 3.32.5"
        F1[UI Layer<br/>Screens / Widgets]
        F2[BLoC Layer<br/>State Management]
        F3[Repository Layer<br/>Data Access]
        F4[Network Layer<br/>GraphQL / HTTP]
    end

    subgraph "ローカルストレージ"
        L1[(Hive<br/>製品キャッシュ)]
        L2[(GetStorage<br/>設定情報)]
        L3[(Image Cache<br/>画像キャッシュ)]
    end

    subgraph "外部サービス層"
        E1[Firebase<br/>FCM / Crashlytics]
        E2[Google Maps<br/>位置情報 / 地図]
        E3[PayPal<br/>決済処理]
        E4[Google ML Kit<br/>画像認識]
    end

    subgraph "バックエンド層<br/>Bagisto eCommerce"
        B1[GraphQL API<br/>Endpoint]
        B2[Laravel<br/>Application]
        B3[(MySQL<br/>Database)]
        B4[Storage<br/>Media Files]
    end

    A1 --> F1
    A2 --> F1
    A3 --> F1
    F1 --> F2
    F2 --> F3
    F3 --> F4
    F3 --> L1
    F3 --> L2
    F3 --> L3
    F4 -->|HTTPS/GraphQL| B1
    F4 -->|HTTPS| E1
    F4 -->|HTTPS| E2
    F4 -->|HTTPS| E3
    F1 -->|Native SDK| E4
    B1 --> B2
    B2 --> B3
    B2 --> B4
```

## アプリケーションアーキテクチャ

```mermaid
graph LR
    subgraph "Presentation Layer"
        S[Screens]
        W[Widgets]
    end

    subgraph "Business Logic Layer"
        B[BLoC]
        E[Events]
        ST[States]
    end

    subgraph "Data Layer"
        R[Repository]
        M[Models]
    end

    subgraph "Infrastructure Layer"
        GC[GraphQL Client]
        HC[HTTP Client<br/>Dio/Retrofit]
        LS[Local Storage<br/>Hive/GetStorage]
    end

    S --> B
    W --> B
    B --> E
    B --> ST
    B --> R
    R --> M
    R --> GC
    R --> HC
    R --> LS
```

## ネットワーク通信フロー

```mermaid
sequenceDiagram
    participant App as Mobile App
    participant Cache as Local Cache
    participant API as Bagisto GraphQL
    participant FCM as Firebase FCM
    participant Pay as PayPal API

    Note over App,Pay: アプリ起動時
    App->>Cache: 設定読み込み
    Cache-->>App: 言語/通貨設定
    App->>FCM: FCMトークン取得
    FCM-->>App: Device Token
    App->>API: トークン登録

    Note over App,Pay: 商品一覧取得
    App->>Cache: キャッシュ確認
    alt キャッシュあり
        Cache-->>App: キャッシュデータ
    else キャッシュなし
        App->>API: GraphQL Query
        API-->>App: 商品データ
        App->>Cache: データ保存
    end

    Note over App,Pay: 決済処理
    App->>Pay: Access Token取得
    Pay-->>App: OAuth Token
    App->>Pay: Order作成
    Pay-->>App: Order ID
    App->>Pay: Checkout開始
    Pay-->>App: 決済結果
    App->>API: 注文確定
```

## プッシュ通知フロー

```mermaid
sequenceDiagram
    participant Server as Bagisto Server
    participant FCM as Firebase FCM
    participant App as Mobile App
    participant User as ユーザー

    Note over Server,User: 通知登録
    App->>FCM: トークン取得要求
    FCM-->>App: FCM Token
    App->>FCM: トピック購読 (Bagisto_mobikul)
    App->>Server: トークン登録

    Note over Server,User: 通知配信
    Server->>FCM: 通知送信要求
    FCM->>App: プッシュ通知

    alt フォアグラウンド
        App->>App: ローカル通知表示
        App-->>User: 通知表示
    else バックグラウンド
        FCM-->>User: システム通知
    end

    User->>App: 通知タップ
    App->>App: 対象画面遷移
```

## 認証フロー

```mermaid
sequenceDiagram
    participant User as ユーザー
    participant App as Mobile App
    participant Bio as 生体認証
    participant API as Bagisto API
    participant Store as Local Storage

    Note over User,Store: ログイン処理
    User->>App: メール/パスワード入力
    App->>API: ログインリクエスト
    API-->>App: 認証トークン + ユーザー情報
    App->>Store: トークン保存

    Note over User,Store: 生体認証ログイン
    User->>App: 生体認証有効化
    App->>Bio: 認証要求
    Bio-->>App: 認証結果
    alt 認証成功
        App->>Store: 資格情報取得
        Store-->>App: 保存済み認証情報
        App->>API: 自動ログイン
    else 認証失敗
        App-->>User: エラー表示
    end
```

## データ永続化構造

```mermaid
graph TB
    subgraph "アプリケーション"
        APP[Flutter App]
    end

    subgraph "メモリキャッシュ"
        MC[In-Memory Cache]
    end

    subgraph "ローカルストレージ"
        subgraph "Hive"
            H1[NewProductsModel]
            H2[HomeCategoriesData]
            H3[ProductFlats]
            H4[Reviews]
        end
        subgraph "GetStorage"
            G1[ユーザー設定]
            G2[言語設定]
            G3[通貨設定]
            G4[認証情報]
        end
        subgraph "Cached Network Image"
            C1[商品画像]
            C2[カテゴリ画像]
            C3[バナー画像]
        end
    end

    APP --> MC
    MC --> H1
    MC --> H2
    MC --> H3
    MC --> H4
    APP --> G1
    APP --> G2
    APP --> G3
    APP --> G4
    APP --> C1
    APP --> C2
    APP --> C3
```

## マルチプラットフォーム対応

```mermaid
graph TB
    subgraph "共通コード<br/>Dart/Flutter"
        CORE[Core Business Logic]
        UI[UI Components]
        NET[Network Layer]
    end

    subgraph "Android固有"
        A1[MainActivity]
        A2[ML Kit Activity]
        A3[AR/Sceneform]
        A4[PayPal Native]
    end

    subgraph "iOS固有"
        I1[AppDelegate]
        I2[MLKitViewController]
        I3[PayPal Checkout]
        I4[QuickLook Preview]
    end

    subgraph "Web固有"
        W1[index.html]
        W2[manifest.json]
        W3[Service Worker]
    end

    CORE --> A1
    CORE --> I1
    CORE --> W1
    UI --> A1
    UI --> I1
    UI --> W1
    NET --> A1
    NET --> I1
    NET --> W1
    A1 --> A2
    A1 --> A3
    A1 --> A4
    I1 --> I2
    I1 --> I3
    I1 --> I4
```

## 外部サービス連携詳細

```mermaid
graph LR
    subgraph "モバイルアプリ"
        APP[Flutter App]
    end

    subgraph "Firebase Services"
        FCM[Cloud Messaging]
        CRASH[Crashlytics]
    end

    subgraph "Google Services"
        MAPS[Maps SDK]
        MLKIT[ML Kit]
        ARCORE[ARCore]
    end

    subgraph "Payment Services"
        PP_WEB[PayPal Web]
        PP_SDK[PayPal SDK]
    end

    subgraph "Backend"
        BAPI[Bagisto GraphQL API]
    end

    APP -->|通知登録/受信| FCM
    APP -->|クラッシュ報告| CRASH
    APP -->|地図/位置情報| MAPS
    APP -->|画像認識| MLKIT
    APP -->|AR表示| ARCORE
    APP -->|Web決済| PP_WEB
    APP -->|ネイティブ決済| PP_SDK
    APP -->|API通信| BAPI
```

## デプロイメントパイプライン

```mermaid
graph LR
    subgraph "開発"
        DEV[開発環境]
        GIT[Git Repository]
    end

    subgraph "ビルド"
        BUILD[Flutter Build]
        TEST[テスト実行]
    end

    subgraph "配布"
        PLAY[Google Play<br/>Store]
        APPSTORE[Apple App<br/>Store]
        WEB[Web<br/>Hosting]
    end

    DEV --> GIT
    GIT --> BUILD
    BUILD --> TEST
    TEST -->|Android| PLAY
    TEST -->|iOS| APPSTORE
    TEST -->|Web| WEB
```
