Flutterアプリ開発に於けるBitrise活用例（初級） / Flutter using Bitrise for beginners

2019/9/3
Bitrise User Group Meetup #2

Transcript

1. Flutterアプリ開発に於ける
   Bitrise活用例（初級）
   Yuma Tanaka
   Mobile Application Engineer at MTI Ltd.
   （VideoMarket Corp.）
   

   View Slide

2. 2019/9/2
   アプリリリース
   ● アプリ
   ○ videomarket（v4.0.0）
   ● サービス概要
   ○ 動画配信サービス
   ○ AirPlay及びCast再生も可
   ○ 会員登録不要
   ○ In-App Purchase
   ● 備考
   ○ Flutter製（iOS版のみ）
   ○ 「新規」でなく「更新」リリー
   ス
   https://beyond.videomarket.jp
   

   View Slide

3. Today’s topic
   ● Flutterアプリ開発でのBitrise活用例
   ○ Bitrise workflows
   ○ Bitrise workflow：distribute_staging
   ○ Bitrise Step：Flutter
   ○ Build Configuration（iOS）
   ○ Tips（Cache Push）
   ● Summary
   

   View Slide

4. Bitrise workflows
   ● unit_test
   ○ PR作成時、自動的にテスト実行
   ● distribute_mock
   ● distribute_dev
   ● distribute_staging
   ○ flavor：mock, dev, stagingでそれぞれビルド及び Fabric Beta配布
   ○ PRマージ時、自動的に ”distribute_staging”実行
   ● apple_upload_production
   ○ flavor：productionでビルド及びApp Store Connectアップロード
   

   View Slide

5. Bitrise workflows
   ● unit_test
   ○ PR作成時、自動的にテスト実行
   ● distribute_mock
   ● distribute_dev
   ● distribute_staging
   ○ flavor：mock, dev, stagingでそれぞれビルド及び Fabric Beta配布
   ○ PRマージ時、自動的に ”distribute_staging”実行
   ● apple_upload_production
   ○ flavor：productionでビルド及びApp Store Connectアップロード
   

   View Slide

6. Bitrise workflow：distribute_staging
   ● 役割
   ○ flavor：stagingでビルド及びFabric Beta配布
   ● 大まかなフローの流れ
   ○ Git Clone
   ○ Step：Flutterでflutter build
   ○ fastlaneでios build
   ○ fastlaneでFabric Beta配布
   

   View Slide

7. Bitrise workflow：distribute_staging
   ● 役割
   ○ flavor：stagingでビルド及びFabric Beta配布
   ● 大まかなフローの流れ
   ○ Git Clone
   ○ Step：Flutterでflutter build
   ○ fastlaneでios build
   ○ fastlaneでFabric Beta配布
   

   View Slide

8. Bitrise Step：Flutter
   ● 概要
   ○ 以前よりコミュニティで作成されていた Step
   ○ 2019年1月に公開された、Bitrise公式の
   ４Stepsとは別物（will try..）
   ● Input Variables 記入例
   ○ Flutter Version（Required）
   ■ stable
   ○ Flutter commands to be executed（Required）
   ■ build ios --release --flavor staging --target lib/main_staging.dart
   

   View Slide

9. Bitrise Step：Flutter
   ● 概要
   ○ 以前よりコミュニティで作成されていた Step
   ○ 2019年1月に公開された、Bitrise公式の
   ４Stepsとは別物（will try..）
   ● Input Variables 記入例
   ○ Flutter Version（Required）
   ■ stable
   ○ Flutter commands to be executed（Required）
   ■ build ios --release --flavor staging --target lib/main_staging.dart
   

   View Slide

10. Build Configurations（iOS）
    flavor type Configuration main.dart Bitrise workflow
    mock debug Debug-mock main_mock.dart -
    mock release Release-mock main_mock.dart distribute_mock
    dev debug Debug-dev main_dev.dart -
    dev release Release-dev main_dev.dart distribute_dev
    staging debug Debug-staging main_staging.dart -
    staging release Release-staging main_staging.dart distribute_staging
    production debug Debug-production main_production.dart -
    production release Release-production main_production.dart apple_upload_production
    

    View Slide

11. Summary
    ● FlutterアプリのCI/CDをBitriseで実現可能
    ● flavor毎にビルドを行う場合、
    アプリ側でビルド構成の検討・導入が必要
    ○ Flutterアプリ開発では、Android/iOSのネイティブの知識が必要
    

    View Slide

12. Tips（Cache Push）
    ● 課題
    ○ Step：Flutterを使うと、毎回Flutter SDKがインストールされてしまう
    ○ 結果、ワークフローの実行時間が長くなる
    ● 解決方法
    ○ Step：Cache Push（及びCache Pull）を導入し、
    毎回Flutter SDKがインストールされるのを防ぐ → ※平均3,4分の実行時間を短縮
    ○ Cache Push -> Cache pathsで下記指定
    ■ /Users/vagrant/Library/flutter -> ./pubspec.lock
    

    View Slide

13. Summary
    ● FlutterアプリのCI/CDをBitriseで実現可能
    ● flavor毎にビルドを行う場合、
    アプリ側でビルド構成の検討・導入が必要
    ○ Flutterアプリ開発では、Android/iOSのネイティブの知識が必要
    ● Step：Cacheを導入する事により、ワークフローの実行時間を短縮可能
    

    View Slide

14. Reference
    ● Bitrise step：Flutter
    ○ https://github.com/DroidsOnRoids/bitrise-step-flutter
    ● Bitrise step：Cache Push
    ○ https://github.com/bitrise-steplib/steps-cache-push
    ● Flutter CI v1.0がBitriseに登場！
    ○ https://blog.bitrise.io/flutter-ci-v1-jp
    

    View Slide