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

35e08efcf39d692f540047fb756eb4e3?s=47 konifar
February 09, 2018

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

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

35e08efcf39d692f540047fb756eb4e3?s=128

konifar

February 09, 2018
Tweet

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ɺςετ഑৴ɺϦϦʔε .BJOUPQJD
  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ͷදࣔ -PBEJOHTUBUF

  35. Loadingͷදࣔ $BMMFEPOMZpSTUUJNF

  36. Loadingͷදࣔ -PBEUIFSPPN UBC MJTU

  37. Loadingͷදࣔ $BMMFEBGUFSMPBEJOH

  38. Loadingͷදࣔ $IBOHFETUBUF
 JOTFU4UBUF

  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!