buzz_recipe_viewer

レシピ記録と動画を検索・閲覧するアプリです。

本アプリを通して Flutter アプリ開発におけるアーキテクチャの検討やライブラリ利用のスキルを習得することを目的にしています（技術 showcase）。

Screenshot

iOS

Web	macOS

Supported Platform

Platform	Android	iOS	Web	macOS	Windows
Status	✅	✅	✅	✅	N/A

Development Environment

Tool	Version
Flutter	3.19.4
Xcode	15.3
Android Studio

Architecture

Single Source of Truth(SSOT)とコマンドクエリ責務分離(CQRS)を意識した単方向データフロー

graph LR;
    Presentation-->|watch|Store
    Presentation-->|call|Service
    Service-->|call|Repository
    Service-->|update|Store

• Presentation
  • Widget など
• Store
  • 状態の保持、主に NotifierProvier で実装
  • State の更新は Service 経由で行う
  • Presentation から watch することで状態をリアクティブに UI に反映させる
• Service
  • UI の操作に基づいて処理を行う
    • 主に Repository に対する操作を行いデータを取得する
  • 取得したデータに基づいて Store を更新する
  • 状態は持たない
• Repository
  • 外部サービス、API、データベースなどのデータソースからデータを取得

Directory

lib
├── i18n              # 国際化関連（slang）
├── model             # モデルの定義
├── provider          # クラスのインスタンスを提供する Provider の定義
├── repository        # データソース (API, DB)
│   └── drift           # Drift
├── service           # ビジネスロジックの実装
├── store             # 状態管理
└── ui                # UI
    ├── common        # 共通コンポーネント
    ├── error         # エラー画面
    ├── favorite      # お気に入り
    ├── navigation    # ナビゲーション
    ├── recipe        # レシピ
    ├── settings      # 設定
    ├── video         # 動画
    └── video_player  # 動画プレイヤー

Dependencies

• DI
  • Riverpod(v2, generator)
• Data store
  • Drift
  • shared_preferences
• UI
  • custom_text
  • like_button
  • settings_ui
  • introduction_screen
  • flutter_inappwebview
  • youtube_player_flutter
• i18n
  • slang
• Other
  • freezed
  • flutter_gen
  • url_launcher
  • in_app_review
  • flutter_dotenv
  • package_info_plus
  • flutter_launcher_icons

Dependency Management

• Dependabot

Backend

• Algolia

Data Source

• 後述の別のリポジトリを使って YouTube の情報を定期的に取得して Algolia にインポートしている
• YouTube Data API

Flavor

Android および iOS のみ対応、--dart-define=FLAVOR=... で切り替え

Flavor	用途	配布方法	BundleID prefix
prod	本番用	PlayConsole, TestFlight
stg	ステージング	Firebase App Distribution	.stg
dev	開発用	ローカルビルド	.dev

Test

• Widget Test
• VRT(Visual Regression Testing)

CI/CD

GitHub Actionsを採用

• Check
  • flutter format
  • flutter analyze
• Test
  • flutter test
  • VRT(Visual Regression Testing)
• Bumpup
  • pubspec.yaml のversion:のインクリメント
• Deliver(build & deploy)
  • stg
    • Firebase App Distribution
  • prod
    • Google Play, App Store Connect(Test Flight)
  • pages
    • GitHub Pages
• Nightly build

素材

• https://loosedrawing.com/

Related repository

• yorifuji/buzz_recipe_importer
• YouTube のチャンネルの動画の情報を定期的に取得して Algolia にインポートする Python プログラム
• GitHub Actions で定期実行している