MEet Flutter Add-to-App: Unlocking Our Productivity

by Money Forward, Inc.

Slide 1

Slide 1 text

MEet Flutter Add-to-app Unlocking Our Productivity

Slide 2

Slide 2 text

● iOS Engineer@Money Forward ME   ○ iOSエンジニア@マネーフォワード ME   ● Joined Money Forward in 2019  ○ 2019年入社    Ichiro Hirata 平田一郎

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Flutterとは What is Flutter?

Slide 5

Slide 5 text

Flutterとは？ What is Flutter? Flutter 

Slide 6

Slide 6 text

Flutterとは？ What is Flutter? Swift  Kotlin 

Slide 7

Slide 7 text

Flutterとは？ What is Flutter? Swift  Kotlin  Flutter  Module  Add-to-app

Slide 8

Slide 8 text

導入の経緯 Background

Slide 9

Slide 9 text

プロジェクトの課題 Project Issues Development Productivity    Issues

Slide 10

Slide 10 text

プロジェクトの課題 Project Issues Development Test Design Planning Productivity,  Communication,  Motivation,  Issues Assignment  Eﬃciency,  Communication      Eﬃciency,  Communication   

Slide 11

Slide 11 text

Project A Project B Project C Planning プロジェクトの課題 Project Issues iOS Android

Slide 12

Slide 12 text

Design プロジェクトの課題 Project Issues Android iOS Designer Apple  HIG Material  Design Figma

Slide 13

Slide 13 text

iOS Android Design プロジェクトの課題 Project Issues Marketer Firebase

Slide 14

Slide 14 text

Development プロジェクトの課題 Project Issues iOS Android Objective-C

Slide 15

Slide 15 text

Test プロジェクトの課題 Project Issues Project A Project B Project C iOS Android QA

Slide 16

Slide 16 text

課題解決手段としてのクロスプラットフォーム Cross platform as one of the solutions Development Test Design Planning Issues Productivity,  Communication,  Motivation,  Assignment  Eﬃciency,  Communication      Eﬃciency,  Communication   

Slide 17

Slide 17 text

Productivity,  Communication,  Motivation,  課題解決手段としてのクロスプラットフォーム Cross platform as one of the solutions Development Test Design Planning Issues Assignment  Eﬃciency,  Communication      Eﬃciency,  Communication   

Slide 18

Slide 18 text

Add-to-appによるスモールスタート Small Start with Add-to-app Project A Project B Project C

Slide 19

Slide 19 text

Add-to-appによるスモールスタート Small Start with Add-to-app Project A Project B Project C Add-to-app

Slide 20

Slide 20 text

導入 Introduction

Slide 21

Slide 21 text

技術検証 Technical Veriﬁcation # Features  - View  - Business Logic  - Storage  - Native View, etc.  # Development Tools  - Hot Reload / Restart, etc. 

Slide 22

Slide 22 text

開発用テンプレート Templates for Development # Informative Templates  Covers how to implement all classes for a single screen.  Also helpful when reviewing pull requests. 

Slide 23

Slide 23 text

OpenAPIの導入 Introduction of OpenAPI

Slide 24

Slide 24 text

オンボーディング Onboarding # Onboarding  - Basic knowledge of Flutter / Dart  - Usage of templates, OpenAPI  - Small task assignments, etc. 

Slide 25

Slide 25 text

Automation Android iOS 自動化 Sub module Sub module Flutter

Slide 26

Slide 26 text

Automation Android iOS 自動化 Sub module Sub module Pull Request GitHub  Actions Flutter

Slide 27

Slide 27 text

Automation 自動化 Updated  OpenAPI Client  Pull Request  Flutter OpenAPI Updated YAML  Pull Request  GitHub  Actions

Slide 28

Slide 28 text

デバッグツール Debugging Tool # Various Features  - Direct Screen Transition  - Multiple Server Environment Connections  - API Log Viewer, etc. 

Slide 29

Slide 29 text

デバッグツール Debugging Tool Android  Studio  Independent  Flutter App  Build  for  Debugging 

Slide 30

Slide 30 text

その他工夫した点 Small Tips

Slide 31

Slide 31 text

Add-to-appの使い所 Add-to-app Scope One Screen = One Flutter 

Slide 32

Slide 32 text

Flutter Add-to-app iOS Add-to-app用のAPIクライアント API Client for Add-to-app Session Synchronization Native API Client Flutter API Client

Slide 33

Slide 33 text

デザインの統一 Uniﬁed Design Android iOS All Flutter Screens Based on Material Design 

Slide 34

Slide 34 text

デザインの統一 Uniﬁed Design

Slide 35

Slide 35 text

生成AIの活用 Leveraging Generative AI Pull Request Review Generated Test Code

Slide 36

Slide 36 text

導入した結果 Results

Slide 37

Slide 37 text

導入の結果 Results Development Test Design Planning Issues Productivity,  Communication,  Motivation,  Assignment  Eﬃciency,  Communication      Eﬃciency,  Communication   

Slide 38

Slide 38 text

導入の結果 Results Development Test Design Planning Productivity,  Communication,  Motivation,  Eﬃciency,  Communication      Assignment  Eﬃciency,  Communication    Issues 2x Productivity

Slide 39

Slide 39 text

導入の結果 Results Development Productivity,  Communication,  Motivation,  2x Productivity 2x(?) Communication

Slide 40

Slide 40 text

導入の結果 Results Project A Project B Project C Add-to-app Add-to-app Add-to-app

Slide 41

Slide 41 text

導入の結果 Results

Slide 42

Slide 42 text

導入の結果 Results Successful Onboarding 

Slide 43

Slide 43 text

今後の展望 Future Prospects

Slide 44

Slide 44 text

いつAdd-to-appをやめるか？ When should we stop using Add-to-app? Now Near Future Something happened… Ideal Future

Slide 45

Slide 45 text

Small Start  with  Add-to-app Successful Onboarding Uniﬁed  Design  One Screen  One Flutter  Independent  Debugging Tool  Improved Productivity   and Communication  Templates  Takeaways  Automation  * 記載されている会社名および商品・製品・サービス名（ロゴマーク等を含む）は、各社の商標または各権利者の登録商標です。 * Icons by Icons8

Slide 46

Slide 46 text

No content