Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TechCon Official App on Flutter

TechCon Official App on Flutter

Katsumi Onishi

January 30, 2019
Tweet

More Decks by Katsumi Onishi

Other Decks in Technology

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. 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