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

Transcript

1. ίʔυͰݟΔ FlutterΞϓϦͷ࣮૷ 
   'SJ
   %SPJE,BJHJ
   
   !LPOJGBS

2. None

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

82. None
83. None

84. Lots of Libraries!

85. ·ͱΊ

86. FlutterͷϙΠϯτ • ͲΜͳWidget͕͋Δ͔஌Δͷ͕େࣄ • ര଎։ൃͷͨΊʹIntelliJΛ࢖͍͜ͳͦ͏ • ެࣜυΩϡϝϯτͱαϯϓϧ͕๛෋ͳͷͰࢀ ߟʹ͠Α͏

87. “ۀ຿”Ͱ͔ͭ͑Δͷ͔ʁ

88. ͔ͭ͑ͦ͏

89. ݁ہϓϩμΫγϣϯʹ ಥͬࠐΜͰΈͳ͍ͱΘ͔Βͳ͍

90. ཁ͢Δʹ ”֮ޛ” ࣍ୈ

91. Kyash Inc. ʹͯɺދࢹᚳʑͱ Ϳͬ͜ΈͷػձΛ࢕͍ͬͯ·͢

92. Thanks!