コードで見るFlutterアプリの実装

DroidKaigi 2018 2日目 17:40 ~ 18:10

1. ίʔυͰݟΔ FlutterΞϓϦͷ࣮૷ 
   'SJ
   %SPJE,BJHJ
   
   !LPOJGBS
3. Kyash Inc. • Sending and receiving money 
 with kyash is easy breeze • HP : https://kyash.co/ • Store : https://goo.gl/C594Ri Konifar’s QR
4. Main topic
5. DroidKaigi2018 Flutter App https://github.com/konifar/droidkaigi2018-flutter
6. ࠓ೔࿩͢͜ͱ • Android/iOSΞϓϦ͕”࡞ΕΔ”ͷ͸Θ͔ͬͨ • “ۀ຿”Ͱ࠾༻Ͱ͖Δͷʁ
7. ۀ຿Ͱ࠾༻͢Δ࣌ʹߟ͑Δ͜ͱ • ੜଘՄೳੑ
 ެࣜͷαϙʔτ۩߹ɺίϛϡχςΟͷ׆ൃ͞ • ࣮૷
 ϨΠΞ΢τɺωοτϫʔΫ௨৴ɺΩϟογϡ • σόοάɺςετ
 σόοάπʔϧɺCIɺςετϑϨʔϜϫʔΫ • ӡ༻
 Push NotificationɺAnalyticsɺςετ഑৴ɺϦϦʔε
8. ۀ຿Ͱ࠾༻͢Δ࣌ʹߟ͑Δ͜ͱ • ੜଘՄೳੑ
 ެࣜͷαϙʔτ۩߹ɺίϛϡχςΟͷ׆ൃ͞ • ࣮૷
 ϨΠΞ΢τɺωοτϫʔΫ௨৴ɺΩϟογϡ • σόοάɺςετ
 σόοάπʔϧɺCIɺςετϑϨʔϜϫʔΫ • ӡ༻
 Push NotificationɺAnalyticsɺςετ഑৴ɺϦϦʔε .BJO
   UPQJD
9. ۀ຿Ͱ࠾༻͢Δ࣌ʹߟ͑Δ͜ͱ • ੜଘՄೳੑ
 ެࣜͷαϙʔτ۩߹ɺίϛϡχςΟͷ׆ൃ͞ • ࣮૷
 ϨΠΞ΢τɺωοτϫʔΫ௨৴ɺΩϟογϡ • σόοάɺςετ
 σόοάπʔϧɺCIɺςετϑϨʔϜϫʔΫ • ӡ༻
 Push NotificationɺAnalyticsɺςετ഑৴ɺϦϦʔε ͜ͷ΁Μ΋Ұ෦͔͚଍Ͱ৮Ε·͢
10. Today’s goal • Flutter஌Βͳ͔ͬͨਓ
 => ʮԿ͔࡞ͬͯΈΑ͏͔ͳʯ • Flutter஌ͬͯͨਓ
 => ʮ΋͔ͨ͠͠Βۀ຿Ͱ࢖͑Δ͔΋ʁʯ
11. ࠓ೔࿩͞ͳ͍͜ͱ • Dartͷݴޠ࢓༷ͷ࿩
 => JavaʹࣅͯΔɻlanguage-tourΑ͍ɻhttps://www.dartlang.org/guides/language/language-tour • FlutterͷηοτΞοϓͷ࿩
 => ެࣜυΩϡϝϯτ͕खް͘આ໌ͯ͘͠Ε͍ͯΔɻ https://flutter.io/setup/ • Flutterͷ಺෦࣮૷ͷ࿩
 => https://docs.google.com/presentation/d/1B3p0kP6NV_XMOimRV09Ms75ymIjU5gr6GGIX74Om_DE/edit#slide=id.g2388ebc691_2_112 • ઃܭͷ࿩
 => ΄ͱΜͲReactͱಉٞ͡࿦ɻ http://fluttersamples.com/ • طଘΞϓϦʹFlutterΛಋೖ͢Δ࿩
 => ࢓૊Έͱͯ͠͸Ͱ͖Δɻ https://github.com/flutter/flutter/tree/master/examples/platform_view • iOSͷ࿩
 => ϦϦʔε͸େมͱ͚ͩ఻͓͖͍͑ͯͨɻ
12. Agenda 1. Flutterͷ͓͞Β͍ (5෼) 1. Flutterͱ͸ 2. ReactNativeͱͷҧ͍ 3. Androider͔ΒݟͨFlutter 2. Flutterͷίʔυ (15෼) 1. WidgetʢجຊɺWidgetπϦʔͷߏஙʣ 2. σʔλͷѻ͍ʢωοτϫʔΫ௨৴ɺΩϟογϡʣ 3. Ұ໰Ұ౴ (5෼)
13. 1. Flutterͷ͓͞Β͍
14. Flutterͱ͸ • OSਪ঑ͷσβΠϯʹ߹Θͤͨ៉ྷͳΞϓϦΛ ૉૣ͘࡞ΔͨΊͷΫϩεϓϥοτϑΥʔϜ SDK • Google੡ɻ։ൃݴޠ͸Dart • ϨΠΞ΢τ͸xmlͰ͸ͳ͘DartͰWidget Tree Λॻ͘
15. ReactNativeͱͷҧ͍ Flutter ReactNative Language Dart Javascript UI Support Support officially Depends on 3rd party libraries Rendering Own engine JS bridge & Native https://flutter.io/faq/
16. ๛෋ͳWidget • Material Design Guidelineʹग़ͯ͘Δύλʔϯ ͷUI͸΄΅શͯެࣜʹαϙʔτ͞Ε͍ͯΔ • WidgetΛ஌Γɺ࢖͍͜ͳ͢͜ͱ͕ߴ଎ʹ։ൃ ্͍ͯ͘͠Ͱͱͯ΋ॏཁ
17. ྫ : Scaffold
18. ྫ : Scaffold "QQ#BS
19. ྫ : Scaffold %SBXFS
20. ྫ : Scaffold
21. ྫ : Scaffold
22. https://flutter.io/widgets/ A lots of Widgets!!
23. Androider͔ΒݟͨFlutter • IntelliJͰ։ൃͰ͖Δ • Dart͸JavaͱࣅͯΔɻඪ४ϥΠϒϥϦ͕๛෋ • Hot ReloadͰमਖ਼͕1ඵͰ൓өɻ൓өͰ͖ͳ ͍࣌͸ϑϧϦϩʔυ͕ඞཁͱڭ͑ͯ͘ΕΔɻ ϑϧϦϩʔυ΋10ඵ͘Β͍ʢ࠷ߴʣ
24. 2. ίʔυͰݟΔFlutter
25. 2-1. Widget
26. Widgetͷجຊ 1. ͢΂ͯ͸WidgetͰ͋Δ 2. statelessͱstatefulͷೋछྨ͕͋Δ 3. Widget TreeΛ૊ΈཱͯΔ
27. ͢΂ͯ͸WidgetͰ͋Δ • Icon = Widget • IconButton = Widget • Positioned = Widget! • ScaleTransition = Widget!!
28. ͢΂ͯ͸WidgetͰ͋Δ • Icon = Widget • IconButton = Widget • Positioned = Widget! • ScaleTransition = Widget!!
29. ͢΂ͯ͸WidgetͰ͋Δ • Icon = Widget • IconButton = Widget • Positioned = Widget • ScaleTransition = Widget!!
30. ͢΂ͯ͸WidgetͰ͋Δ • Icon = Widget • IconButton = Widget • Positioned = Widget • ScaleTransition = Widget "OJNBUJPO
31. ͢΂ͯ͸WidgetͰ͋Δ "OJNBUJPO
32. Stateless & Stateful • ঢ়ଶΛ࣋ͨͳ͍Widget͸statelessʹ͢Δ • ௨৴݁Ռ΍Ϣʔβʔͷૢ࡞Ͱಈతʹมߋ͕ى ͖Δ৔߹ͳͲɺstateΛ࣋ͭ΂͖widget͸ statefulʹ͢Δ
33. statefulͷྫ: Loadingͷදࣔ
34. Loadingͷදࣔ -PBEJOH
    TUBUF
35. Loadingͷදࣔ $BMMFE
    POMZ
    pSTU
    UJNF
36. Loadingͷදࣔ -PBE
    UIF
    SPPN
    UBC
    MJTU
37. Loadingͷදࣔ $BMMFE
    BGUFS
    MPBEJOH
38. Loadingͷදࣔ $IBOHFE
    TUBUF
 JO
    TFU4UBUF
39. Loadingͷදࣔ TUBUF͕ॻ͖׵ΘΔͱ
    CVJME ͕ݺ͹Εͯ8JEHFU͕ॻ͖׵ΘΔ
40. ϙΠϯτ • ͲͷWidget͕stateΛ࣋ͭ΂͖͔ΛܾΊΔͷ͕ ͍ͪ͹Μେࣄ • ͜ͷTutorialΛಡΉͱstateͷߟ͑ํ͕Θ͔Δ
 https://flutter.io/tutorials/interactive
41. 2-2. Widget Tree
42. Widget Tree • FlutterͰ͸WidgetΛೖΕࢠʹͯ͠πϦʔͷΑ ͏ʹϨΠΞ΢τΛ૊Έཱ͍ͯͯ͘ • IntelliJͷFlutter plugin͕αϙʔτͯ͘͠ΕΔ
43. ಈը : https://goo.gl/wubWiE
44. Widget Tree ิ׬ʢOption + EnterʣΛ࢖ͬͯWidget TreeΛ ૊ΜͰ͍͖ɺ࢖͍ํ͕Θ͔Βͳ͚Ε͹Widgetͷ ΫϥεͷϓϩύςΟΛݟͯཧղ͢Δ͜ͱ
45. 2-3. σʔλͷѻ͍
46. σʔλͷѻ͍ 1. ωοτϫʔΫܦ༝Ͱऔಘ 2. Ϟσϧ΁ͷม׵ 3. ϩʔΧϧͰͷΩϟογϡ
47. FirebaseΛ͔ͭ͏ ެࣜplugin͕༻ҙ͞Ε͍ͯΔ • cloud_firestore
 https://github.com/flutter/plugins/tree/master/packages/cloud_firestore • firebase_database
 https://github.com/flutter/plugins/tree/master/packages/firebase_database • firebase_storage
 https://github.com/flutter/plugins/tree/master/packages/firebase_storage
48. cloud_store͔ΒϚΠηογϣϯऔಘ users / $userId / favorites / $sessionId
 { favorite : boolean }
49. cloud_store͔ΒϚΠηογϣϯऔಘ users / $userId / favorites / $sessionId
 { favorite : boolean }
50. cloud_store͔ΒϚΠηογϣϯऔಘ users / $userId / favorites / $sessionId
 { favorite : boolean }
51. cloud_store͔ΒϚΠηογϣϯऔಘ users / $userId / favorites / $sessionId
 { favorite : boolean }
52. httpϥΠϒϥϦΛ࢖͏ • Dartͷhttp package + async, await • dart:convert Ͱύʔε
53. ηογϣϯҰཡͷऔಘ https://droidkaigi.jp/2018/ sessionize/all.json
54. ηογϣϯҰཡͷऔಘ
55. ηογϣϯҰཡͷऔಘ
56. Ϟσϧ΁ͷϚοϐϯά • convertϥΠϒϥϦΛ࢖ͬͯखಈͰ΍Δ͔ • built_valueΛ࢖ͬͯdeserialize͢Δ͔
 https://github.com/google/built_value.dart
57. Preference΁ͷ஋อଘ • ެࣜͷshared_preferences plugin͕͋Δ
 https://github.com/flutter/plugins/tree/master/packages/shared_preferences • Android/iOSͱ΋ʹಈ͘
58. લճ։͍ͨλϒҐஔͷอଘ
59. લճ։͍ͨλϒҐஔͷอଘ
60. લճ։͍ͨλϒҐஔͷอଘ
61. લճ։͍ͨλϒҐஔͷอଘ
62. SQLite • sqfliteͰSQLiteΛૢ࡞͢ΔʢAndroid / iOSʣ
 https://github.com/tekartik/sqflite • Raw SQLͷ࣮ߦʹՃ͑ͯɺInsertɺDeleteɺ UpdateͳͲͷૢ࡞ͷHelper͕༻ҙ͞Ε͍ͯΔ
63. 3. Ұ໰Ұ౴
64. Q1. CI·ΘͤΔʁ A. Yes ͨͩ͠ɺFlutter͸ x86_64-linux-gnu/ libstdc++.so.6 version GLIBCXX_3.4.18 ͕ඞཁ ͳͷͰɺಉόʔδϣϯͷ؀ڥͰCIΛճ͢ඞཁ͕ ͋Δɻ
65. Travisͷྫ
66. Travisͷྫ
67. Travisͷྫ Setup Flutter
68. Travisͷྫ Run test
69. Q2. AnalyticsͲ͏͢Δͷʁ A. FirebaseAnalytics pluginΛ͔ͭ͏
 https://github.com/flutter/plugins/tree/master/packages/firebase_analytics
70. ϖʔδભҠͷτϥοΩϯά
71. ϩάͷૹ৴
72. Q3. Push Notification͸Ͳ͏͢Δʁ A. FirebaseMessaging pluginΛ͔ͭ͏
 https://github.com/flutter/plugins/tree/master/packages/firebase_messaging
73. Q4. Animation͸αϙʔτ͞ΕͯΔʁ A. Yes AnimationɺTransition΋WidgetͰදݱ͢Δͷ Ͱɺ΍Γํ͸Androidͱ͍ͩͿҧ͏
 https://flutter.io/animations/
74. Animation Examples ಈը : https://goo.gl/npYoj1
75. Q5. ϢχοτςετͲ͏ॻ͘ʁ A. mockito.dartɺtest/test.dart Λ͔ͭ͏
 https://flutter.io/testing/
76. Json͔ΒϞσϧʹύʔε͢Δςετ
77. Json͔ΒϞσϧʹύʔε͢Δςετ
78. Json͔ΒϞσϧʹύʔε͢Δςετ
79. Q6. ଟݴޠԽͲ͏΍Δͷʁ A. dart:intlΛ͔ͭ͏
 https://flutter.io/tutorials/internationalization/ ͨͩ͠ɺstrings.xmlͱൺ΂ͯΘΓͱ໘౗ Widgetͷςετ͕ίέΔͷͰɺtester.pump()Λ ݺΜͰ͓͘ϫʔΫΞϥ΢ϯυ͕ඞཁ
 https://github.com/flutter/flutter/issues/1865
80. Q7. Ϋϥογϡϩάͷऩूํ๏͸ʁ A. Firebase Crash Reporting ·ͨ͸ SentryΛ ͔ͭ͏ https://github.com/flutter/flutter/issues/614 https://firebase.google.com/docs/crash https://pub.dartlang.org/packages/sentry
81. Q8. ϥΠϒϥϦΛ୳͢ͱ͖͸ʁ A. ެࣜϓϥάΠϯ or dart libraryΛݕࡧ͠Α͏ https://github.com/flutter/plugins https://pub.dartlang.org/flutter/packages
84. Lots of Libraries!
85. ·ͱΊ
86. FlutterͷϙΠϯτ • ͲΜͳWidget͕͋Δ͔஌Δͷ͕େࣄ • ര଎։ൃͷͨΊʹIntelliJΛ࢖͍͜ͳͦ͏ • ެࣜυΩϡϝϯτͱαϯϓϧ͕๛෋ͳͷͰࢀ ߟʹ͠Α͏
87. “ۀ຿”Ͱ͔ͭ͑Δͷ͔ʁ
88. ͔ͭ͑ͦ͏
89. ݁ہϓϩμΫγϣϯʹ ಥͬࠐΜͰΈͳ͍ͱΘ͔Βͳ͍
90. ཁ͢Δʹ ”֮ޛ” ࣍ୈ
91. Kyash Inc. ʹͯɺދࢹᚳʑͱ Ϳͬ͜ΈͷػձΛ࢕͍ͬͯ·͢
92. Thanks!