サービス利用フロー¶

smooth がどのように使われるか、主要なシナリオごとに全体像を示します。

1. ドライバーの初回利用フロー¶

初めて smooth を利用するドライバーが、駐車場を使えるようになるまでの流れです。

アプリへの入口は LINE です。 LINE 公式チャンネルを友だち追加し、チャット画面から Mini App を起動します。LIFF 認証が自動的に走るため、別途ログイン操作は不要です。「サインアップ」画面も存在せず、初回認証時にバックエンドが自動でアカウントを作成します。

① 認証

flowchart LR
    A([LINE 公式チャンネルを友だち追加]) --> B[チャット画面から Mini App を起動]
    B --> C[LIFF 認証が自動実行<br>LINE アカウントで認証]
    C --> D{ロール選択<br>car-owner / car-co-owner}

② 初期設定（car-owner のみ）

flowchart LR
    D{ロール選択} -- car-owner --> E[メールアドレス登録<br>確認コードで本人確認]
    D -- car-co-owner --> H
    E --> F[ナンバープレートを登録<br>日本語プレート形式で入力]
    F --> G[決済方法を登録<br>クレジットカード / Apple Pay / Google Pay]
    G --> H([駐車場メイン画面<br>利用開始 ✓])

2. 駐車から決済までのフロー¶

登録済みのドライバーが駐車場を利用する際の、入場から決済完了までの流れです。

sequenceDiagram
    participant Car as ドライバー（車）
    participant Device as SmoothBox
    participant API as バックエンド
    participant Stripe as Stripe
    participant App as smooth-mobile
    participant LINE as LINE

    Note over Car,Device: 入場
    Car->>Device: 駐車場に入る
    Device->>API: ナンバープレート画像を送信
    API->>API: OCR でプレート番号を認識
    API->>API: 登録ドライバーと照合
    API->>API: 駐車セッション開始（active）
    API-->>App: 「駐車中」ステータスを表示

    Note over Car,Device: 駐車中
    App-->>Car: アプリで現在の駐車状況を確認可能

    Note over Car,Device: 出場
    Car->>Device: 駐車場から出る
    Device->>API: 出場検知を送信
    API->>API: 料金計算（滞在時間 × 料金設定）
    API->>API: クーポン割引を適用（あれば）

    alt デフォルトカードあり
        API->>Stripe: 自動決済を実行
        Stripe-->>API: Webhook で決済完了を通知
    else デフォルトカードなし
        API->>App: 決済リンクを送信
        App->>Car: Stripe ホスト型決済ページで手動決済
    end

    API-->>App: SSE でリアルタイム通知（決済完了）
    API->>LINE: LINE プッシュ通知を送信
    App-->>Car: 「決済完了」画面を表示

3. 駐車場オーナーの利用フロー¶

駐車場オーナーが smooth に登録し、運用を開始するまでの流れです。

① 登録・審査

flowchart LR
    A([smooth-owner にアクセス]) --> B[アカウント作成]
    B --> C[オーナープロフィール設定]
    C --> D[Stripe Connect<br>本人確認・口座登録]
    D --> E[駐車場情報・料金を登録]
    E --> F[smooth 管理者が審査・承認]

② 運用開始・日常業務

flowchart LR
    F[審査・承認] --> G[SmoothBox を設置<br>APIキーを設定]
    G --> H([運用開始 ✓])
    H --> I{日常業務}
    I --> J[ダッシュボードで<br>稼働状況を確認]
    I --> K[収益・分析レポートを閲覧]
    I --> L[入金履歴を確認]

4. システム全体の連携フロー¶

smooth を構成する各コンポーネントが、どのように連携しているかの全体像です。

① アプリ・デバイス間の連携

flowchart LR
    subgraph ドライバー側
        App[smooth-mobile]
        Car[車]
    end

    subgraph 駐車場
        Camera[IPカメラ]
        Device[SmoothBox]
    end

    subgraph バックエンド
        API[smooth-backend]
        DB[(PostgreSQL)]
        Redis[(Redis)]
    end

    subgraph オーナー側
        OwnerApp[smooth-owner]
    end

    Camera -->|RTSP映像| Device
    Device -->|プレート画像<br>APIキー認証| API
    App <-->|HTTPS / SSE| API
    OwnerApp <-->|HTTPS| API
    API <--> DB
    API <--> Redis

② バックエンド ↔ 外部サービス連携

flowchart LR
    API[smooth-backend]

    API <-->|決済・Connect| Stripe[Stripe]
    API <-->|OAuth 検証| Firebase[Firebase Auth]
    API -->|プッシュ通知| LINE[LINE]
    API -->|画像保存| GCS[GCS]

5. 決済パターンの分岐¶

ドライバーの状況によって決済フローが分岐します。

① 登録確認・料金計算

flowchart LR
    A[出場検知] --> B{ドライバーは<br>登録済み？}
    B -- No --> C[未登録プレートとして記録<br>セッションキャンセル]
    B -- Yes --> D[料金計算]
    D --> E{デフォルト<br>カードあり？}
    E -- Yes --> F[自動決済<br>Stripe PaymentIntent]
    E -- No --> G[決済リンクを生成<br>Stripe Payment Link]

② 決済実行・完了

flowchart LR
    F[自動決済] --> H{決済成功？}
    H -- Yes --> I[セッション completed<br>SSE・LINE 通知]
    H -- No --> G[決済リンクを生成<br>Stripe Payment Link]
    G --> J[ドライバーが手動で決済]
    J --> I