TechCon Official App on Flutter

Transcript

1. TechCon Official App on Flutter
   Katsumi Onishi
   Android Engineer
   株式会社ディー・エヌ・エー
   @katsummy
   

   View Slide

2. 目次
   2
   DeNA TechCon 2019
   Why Flutter ? What New Challenged?
   Review
   1
   3
   Appendix
   4
   2
   

   View Slide

3. View Slide

4. 4
   DeNAでは、ゲームやエンタメだけでなく、
   Eコマース、ソーシャルLIVE、ヘルスケア、オートモーティブ、
   そして横浜DeNAベイスターズのようなスポーツなど、様々な事業を行っています。
   また、技術の力で事業の未来をリードするため、様々なチャレンジも行っています。
   DeNA TechCon はこれらのチャレンジの中から、
   技術的に特に面白いものを厳選して皆さんにお披露目するお祭りです。
   

   View Slide

5. 5
   今年のテーマは「SHIFT UP」です。
   『面白かったー！』と思っていただく工夫を凝らしてお待ちしてますので、
   みなさまぜひお越しください！
   

   View Slide

6. 6
   12月中旬...
   Why Flutter ?
   

   View Slide

7. Why Flutter ?
   • 12月中旬...
   • DeNA TechApp 2019 2.6 開催にあたりオフィシャルアプリを作成した
   い
   • iOS / Android 両方でリリースしたい
   • 短納期なのでハイブリッド?
   • 先日、Flutter 1.0 リリースされた!!
   • Flutter Live '18 at 4.Nov in London
   • 新しい技術にチャレンジ！
   7
   

   View Slide

8. What New Challenged?
   • DeNA の Flutter アプリは初めて
   • どうせなら普段のアプリできないことをやりたい
   • マテリアルデザインの新しいコンポーネントを使用
   • Backdrop
   • Flareでアニメーション
   • PlatformView で Google Map を表示
   • 新しいソフトウェアアーキテクチャ
   • Redux
   8
   

   View Slide

9. What New Challenged?
   • マテリアルデザインの新しいコンポーネントを使用
   • Backdrop - Material Design
   9
   Back layer
   Front layer
   Subheader
   

   View Slide

10. Backdrop
    10
    

    View Slide

11. Timetable with Fixed Header
    11
    

    View Slide

12. Timetable with Fixed Header
    12
    Stack
    Custom
    ScrollView
    Custom
    ScrollView
    SliverAppBar
    SliverFixedExtentList
    ListView
    ListView
    タイムテーブルのViewの縦スク
    ロールを時間のViewにSync
    

    View Slide

13. FLARE
    • 2Dimensions社無償公開の2Dのベクターアニメーションツール
    • エクスポートしたアニメーションをそのままFlutterで再生が可能
    13
    

    View Slide

14. FLARE
    • Splash
    14
    2D - denaxtech - Logo
    

    View Slide

15. FLARE
    child: Center(
    child: FlareActor(
    "assets/animations/Logo.flr",
    animation: _animationName,
    fit: BoxFit.contain,
    callback: (string) {
    Navigator.of(context)
    .pushReplacementNamed(AppRoutes.home);
    },
    ),
    ),
    15
    

    View Slide

16. PlatformView で Google Map
    • 組み込みは簡単
    • google_maps_flutter を使用
    • Android のみ実装
    • iOS 挙動不安定...
    • Backdropの影響？
    16
    

    View Slide

17. TechCon Official App
    17
    16:9
    

    View Slide

18. What New Challenged?
    • アーキテクチャー
    • MultiModule
    • Flutterでもできる
    • Redux (Flux)
    18
    App
    Architecture
    (Redux)
    Repository
    Common
    Repository
    Impl
    

    View Slide

19. MultiModule
    19
    

    View Slide

20. MultiModule
    
    dependencies:
    flutter:
    sdk: flutter
    commons:
    path: ../commons
    architecture:
    path: ../architecture
    repository:
    path: ../repository
    repository_cache:
    path: ../repository_cache
    20
    

    View Slide

21. Redux
    • 採用箇所
    • Backdrop / TimeTable
    21
    isLoading
    activeTab
    

    View Slide

22. Store
    Redux
    22
    Action
    Widget Middleware
    Repository
    State
    Reducer
    State
    ViewModel
    Dispatch
    

    View Slide

23. Redux
    class App extends StatelessWidget {
    /// Store
    final Store store = Store(
    appReducer,
    initialState: AppState.initial(),
    middleware: createStoreMiddleware(RepositoryCache()),
    );
    @override
    Widget build(BuildContext context) {
    return StoreProvider(
    store: store,
    child: MaterialApp(
    23
    

    View Slide

24. Redux
    /// Reducer
    final appReducer = combineReducers([
    TypedReducer(_onLoading),
    TypedReducer(_onError),
    TypedReducer(_onLoadSessions),
    TypedReducer(_onLoadedSessions),
    TypedReducer(_onUpdateTab),
    ]);
    24
    

    View Slide

25. Redux
    @immutable
    class AppState {
    final bool isLoading;
    final bool hasError;
    final AppTab activeTab;
    final List sessions;
    25
    

    View Slide

26. Redux
    /// Middleware
    List> createStoreMiddleware(Repository
    repository) {
    _repository = repository;
    return [
    TypedMiddleware(_load),
    ];
    }
    26
    

    View Slide

27. Redux
    /// Sessions Load
    Future _load(Store store, action, NextDispatcher next)
    async {
    // Dispatch a LoadingAction to show a loading spinner
    store.dispatch(LoadingAction());
    // Get session
    var sessions = await _repository.getSessionList();
    store.dispatch(SessionsLoadedAction(sessions));
    next(action);
    }
    27
    

    View Slide

28. Redux
    class TimeTablePage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return StoreConnector(
    onInit: (store) => store.dispatch(SessionsLoadAction()),
    distinct: true,
    converter: _ViewModel.fromStore,
    builder: (context, vm) {
    if (vm.isLoading) {
    return Center(child: LoadingIndicator());
    } else {
    return TimeTable(
    sessions: vm.sessions,
    );
    }
    }, 28
    

    View Slide

29. • TimeTableWidget は力技感....
    • Redux
    • View と Logicの分離
    • State は Storeで一元管理
    • View毎に StoreからViewModelを作成が若干手間
    • Middleware内でdispatchさせるとnextのactionは...?
    • 小規模アプリでは...
    Review
    29
    

    View Slide

30. • 課題
    • FCM
    • 通知 の アプリ内表示
    • LicensePage
    • 内容に重複が多く法務確認が手間
    • Flutter Engineのライセンスまで表示される...
    • skia で使用している gif ライブラリが MPL 1.1/GPL 2.0/LGPL 2.1
    トリプルライセンスであるが、LGPL 2.1 のみ表示される。
    • CI
    • [Jan 23, 2019] Flutter CI v.1.0.0 がBitriseに登場！
    • もっとはやくに...
    Review
    30
    

    View Slide

31. Appendix
    31
    ソースコードは公開します!
    will soon
    詳しくはGitHubで!
    

    View Slide

32. 32
    テックコン 検索
    ブースも出
    します!
    

    View Slide