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

by konifar

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Kyash Inc. • Sending and receiving money   with kyash is easy breeze • HP : https://kyash.co/ • Store : https://goo.gl/C594Ri Konifar’s QR

Slide 4

Slide 4 text

Main topic

Slide 5

Slide 5 text

DroidKaigi2018 Flutter App https://github.com/konifar/droidkaigi2018-ﬂutter

Slide 6

Slide 6 text

ࠓ೔࿩͢͜ͱ • Android/iOSΞϓϦ͕”࡞ΕΔ”ͷ͸Θ͔ͬͨ • “ۀ຿”Ͱ࠾༻Ͱ͖Δͷʁ

Slide 7

Slide 7 text

ۀ຿Ͱ࠾༻͢Δ࣌ʹߟ͑Δ͜ͱ • ੜଘՄೳੑ  ެࣜͷαϙʔτ۩߹ɺίϛϡχςΟͷ׆ൃ͞ • ࣮૷  ϨΠΞ΢τɺωοτϫʔΫ௨৴ɺΩϟογϡ • σόοάɺςετ  σόοάπʔϧɺCIɺςετϑϨʔϜϫʔΫ • ӡ༻  Push NotiﬁcationɺAnalyticsɺςετ഑৴ɺϦϦʔε

Slide 8

Slide 8 text

ۀ຿Ͱ࠾༻͢Δ࣌ʹߟ͑Δ͜ͱ • ੜଘՄೳੑ  ެࣜͷαϙʔτ۩߹ɺίϛϡχςΟͷ׆ൃ͞ • ࣮૷  ϨΠΞ΢τɺωοτϫʔΫ௨৴ɺΩϟογϡ • σόοάɺςετ  σόοάπʔϧɺCIɺςετϑϨʔϜϫʔΫ • ӡ༻  Push NotiﬁcationɺAnalyticsɺςετ഑৴ɺϦϦʔε .BJOUPQJD

Slide 9

Slide 9 text

ۀ຿Ͱ࠾༻͢Δ࣌ʹߟ͑Δ͜ͱ • ੜଘՄೳੑ  ެࣜͷαϙʔτ۩߹ɺίϛϡχςΟͷ׆ൃ͞ • ࣮૷  ϨΠΞ΢τɺωοτϫʔΫ௨৴ɺΩϟογϡ • σόοάɺςετ  σόοάπʔϧɺCIɺςετϑϨʔϜϫʔΫ • ӡ༻  Push NotiﬁcationɺAnalyticsɺςετ഑৴ɺϦϦʔε ͜ͷ΁Μ΋Ұ෦͔͚଍Ͱ৮Ε·͢

Slide 10

Slide 10 text

Today’s goal • Flutter஌Βͳ͔ͬͨਓ  => ʮԿ͔࡞ͬͯΈΑ͏͔ͳʯ • Flutter஌ͬͯͨਓ  => ʮ΋͔ͨ͠͠Βۀ຿Ͱ࢖͑Δ͔΋ʁʯ

Slide 11

Slide 11 text

ࠓ೔࿩͞ͳ͍͜ͱ • 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ͷ࿩  => ϦϦʔε͸େมͱ͚ͩ఻͓͖͍͑ͯͨɻ

Slide 12

Slide 12 text

Agenda 1. Flutterͷ͓͞Β͍ (5෼) 1. Flutterͱ͸ 2. ReactNativeͱͷҧ͍ 3. Androider͔ΒݟͨFlutter 2. Flutterͷίʔυ (15෼) 1. WidgetʢجຊɺWidgetπϦʔͷߏஙʣ 2. σʔλͷѻ͍ʢωοτϫʔΫ௨৴ɺΩϟογϡʣ 3. Ұ໰Ұ౴ (5෼)

Slide 13

Slide 13 text

1. Flutterͷ͓͞Β͍

Slide 14

Slide 14 text

Flutterͱ͸ • OSਪ঑ͷσβΠϯʹ߹Θͤͨ៉ྷͳΞϓϦΛ ૉૣ͘࡞ΔͨΊͷΫϩεϓϥοτϑΥʔϜ SDK • Google੡ɻ։ൃݴޠ͸Dart • ϨΠΞ΢τ͸xmlͰ͸ͳ͘DartͰWidget Tree Λॻ͘

Slide 15

Slide 15 text

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/

Slide 16

Slide 16 text

๛෋ͳWidget • Material Design Guidelineʹग़ͯ͘Δύλʔϯ ͷUI͸΄΅શͯެࣜʹαϙʔτ͞Ε͍ͯΔ • WidgetΛ஌Γɺ࢖͍͜ͳ͢͜ͱ͕ߴ଎ʹ։ൃ ্͍ͯ͘͠Ͱͱͯ΋ॏཁ

Slide 17

Slide 17 text

ྫ : Scaffold

Slide 18

Slide 18 text

ྫ : Scaffold "QQ#BS

Slide 19

Slide 19 text

ྫ : Scaffold %SBXFS

Slide 20

Slide 20 text

ྫ : Scaffold

Slide 21

Slide 21 text

ྫ : Scaffold

Slide 22

Slide 22 text

https://ﬂutter.io/widgets/ A lots of Widgets!!

Slide 23

Slide 23 text

Androider͔ΒݟͨFlutter • IntelliJͰ։ൃͰ͖Δ • Dart͸JavaͱࣅͯΔɻඪ४ϥΠϒϥϦ͕๛෋ • Hot ReloadͰमਖ਼͕1ඵͰ൓өɻ൓өͰ͖ͳ ͍࣌͸ϑϧϦϩʔυ͕ඞཁͱڭ͑ͯ͘ΕΔɻ ϑϧϦϩʔυ΋10ඵ͘Β͍ʢ࠷ߴʣ

Slide 24

Slide 24 text

2. ίʔυͰݟΔFlutter

Slide 25

Slide 25 text

2-1. Widget

Slide 26

Slide 26 text

Widgetͷجຊ 1. ͢΂ͯ͸WidgetͰ͋Δ 2. statelessͱstatefulͷೋछྨ͕͋Δ 3. Widget TreeΛ૊ΈཱͯΔ

Slide 27

Slide 27 text

͢΂ͯ͸WidgetͰ͋Δ • Icon = Widget • IconButton = Widget • Positioned = Widget! • ScaleTransition = Widget!!

Slide 28

Slide 28 text

͢΂ͯ͸WidgetͰ͋Δ • Icon = Widget • IconButton = Widget • Positioned = Widget! • ScaleTransition = Widget!!

Slide 29

Slide 29 text

͢΂ͯ͸WidgetͰ͋Δ • Icon = Widget • IconButton = Widget • Positioned = Widget • ScaleTransition = Widget!!

Slide 30

Slide 30 text

͢΂ͯ͸WidgetͰ͋Δ • Icon = Widget • IconButton = Widget • Positioned = Widget • ScaleTransition = Widget "OJNBUJPO

Slide 31

Slide 31 text

͢΂ͯ͸WidgetͰ͋Δ "OJNBUJPO

Slide 32

Slide 32 text

Stateless & Stateful • ঢ়ଶΛ࣋ͨͳ͍Widget͸statelessʹ͢Δ • ௨৴݁Ռ΍Ϣʔβʔͷૢ࡞Ͱಈతʹมߋ͕ى ͖Δ৔߹ͳͲɺstateΛ࣋ͭ΂͖widget͸ statefulʹ͢Δ

Slide 33

Slide 33 text

statefulͷྫ: Loadingͷදࣔ

Slide 34

Slide 34 text

Loadingͷදࣔ -PBEJOHTUBUF

Slide 35

Slide 35 text

Loadingͷදࣔ $BMMFEPOMZpSTUUJNF

Slide 36

Slide 36 text

Loadingͷදࣔ -PBEUIFSPPN UBC MJTU

Slide 37

Slide 37 text

Loadingͷදࣔ $BMMFEBGUFSMPBEJOH

Slide 38

Slide 38 text

Loadingͷදࣔ $IBOHFETUBUF  JOTFU4UBUF

Slide 39

Slide 39 text

Loadingͷදࣔ TUBUF͕ॻ͖׵ΘΔͱ CVJME ͕ݺ͹Εͯ8JEHFU͕ॻ͖׵ΘΔ

Slide 40

Slide 40 text

ϙΠϯτ • ͲͷWidget͕stateΛ࣋ͭ΂͖͔ΛܾΊΔͷ͕ ͍ͪ͹Μେࣄ • ͜ͷTutorialΛಡΉͱstateͷߟ͑ํ͕Θ͔Δ  https://ﬂutter.io/tutorials/interactive

Slide 41

Slide 41 text

2-2. Widget Tree

Slide 42

Slide 42 text

Widget Tree • FlutterͰ͸WidgetΛೖΕࢠʹͯ͠πϦʔͷΑ ͏ʹϨΠΞ΢τΛ૊Έཱ͍ͯͯ͘ • IntelliJͷFlutter plugin͕αϙʔτͯ͘͠ΕΔ

Slide 43

Slide 43 text

ಈը : https://goo.gl/wubWiE

Slide 44

Slide 44 text

Widget Tree ิ׬ʢOption + EnterʣΛ࢖ͬͯWidget TreeΛ ૊ΜͰ͍͖ɺ࢖͍ํ͕Θ͔Βͳ͚Ε͹Widgetͷ ΫϥεͷϓϩύςΟΛݟͯཧղ͢Δ͜ͱ

Slide 45

Slide 45 text

2-3. σʔλͷѻ͍

Slide 46

Slide 46 text

σʔλͷѻ͍ 1. ωοτϫʔΫܦ༝Ͱऔಘ 2. Ϟσϧ΁ͷม׵ 3. ϩʔΧϧͰͷΩϟογϡ

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

cloud_store͔ΒϚΠηογϣϯऔಘ users / $userId / favorites / $sessionId  { favorite : boolean }

Slide 49

Slide 49 text

cloud_store͔ΒϚΠηογϣϯऔಘ users / $userId / favorites / $sessionId  { favorite : boolean }

Slide 50

Slide 50 text

cloud_store͔ΒϚΠηογϣϯऔಘ users / $userId / favorites / $sessionId  { favorite : boolean }

Slide 51

Slide 51 text

cloud_store͔ΒϚΠηογϣϯऔಘ users / $userId / favorites / $sessionId  { favorite : boolean }

Slide 52

Slide 52 text

httpϥΠϒϥϦΛ࢖͏ • Dartͷhttp package + async, await • dart:convert Ͱύʔε

Slide 53

Slide 53 text

ηογϣϯҰཡͷऔಘ https://droidkaigi.jp/2018/ sessionize/all.json

Slide 54

Slide 54 text

ηογϣϯҰཡͷऔಘ

Slide 55

Slide 55 text

ηογϣϯҰཡͷऔಘ

Slide 56

Slide 56 text

Ϟσϧ΁ͷϚοϐϯά • convertϥΠϒϥϦΛ࢖ͬͯखಈͰ΍Δ͔ • built_valueΛ࢖ͬͯdeserialize͢Δ͔  https://github.com/google/built_value.dart

Slide 57

Slide 57 text

Preference΁ͷ஋อଘ • ެࣜͷshared_preferences plugin͕͋Δ  https://github.com/ﬂutter/plugins/tree/master/packages/shared_preferences • Android/iOSͱ΋ʹಈ͘

Slide 58

Slide 58 text

લճ։͍ͨλϒҐஔͷอଘ

Slide 59

Slide 59 text

લճ։͍ͨλϒҐஔͷอଘ

Slide 60

Slide 60 text

લճ։͍ͨλϒҐஔͷอଘ

Slide 61

Slide 61 text

લճ։͍ͨλϒҐஔͷอଘ

Slide 62

Slide 62 text

SQLite • sqﬂiteͰSQLiteΛૢ࡞͢ΔʢAndroid / iOSʣ  https://github.com/tekartik/sqﬂite • Raw SQLͷ࣮ߦʹՃ͑ͯɺInsertɺDeleteɺ UpdateͳͲͷૢ࡞ͷHelper͕༻ҙ͞Ε͍ͯΔ

Slide 63

Slide 63 text

3. Ұ໰Ұ౴

Slide 64

Slide 64 text

Q1. CI·ΘͤΔʁ A. Yes ͨͩ͠ɺFlutter͸ x86_64-linux-gnu/ libstdc++.so.6 version GLIBCXX_3.4.18 ͕ඞཁ ͳͷͰɺಉόʔδϣϯͷ؀ڥͰCIΛճ͢ඞཁ͕ ͋Δɻ

Slide 65

Slide 65 text

Travisͷྫ

Slide 66

Slide 66 text

Travisͷྫ

Slide 67

Slide 67 text

Travisͷྫ Setup Flutter

Slide 68

Slide 68 text

Travisͷྫ Run test

Slide 69

Slide 69 text

Q2. AnalyticsͲ͏͢Δͷʁ A. FirebaseAnalytics pluginΛ͔ͭ͏  https://github.com/ﬂutter/plugins/tree/master/packages/ﬁrebase_analytics

Slide 70

Slide 70 text

ϖʔδભҠͷτϥοΩϯά

Slide 71

Slide 71 text

ϩάͷૹ৴

Slide 72

Slide 72 text

Q3. Push Notification͸Ͳ͏͢Δʁ A. FirebaseMessaging pluginΛ͔ͭ͏  https://github.com/flutter/plugins/tree/master/packages/firebase_messaging

Slide 73

Slide 73 text

Q4. Animation͸αϙʔτ͞ΕͯΔʁ A. Yes AnimationɺTransition΋WidgetͰදݱ͢Δͷ Ͱɺ΍Γํ͸Androidͱ͍ͩͿҧ͏  https://ﬂutter.io/animations/

Slide 74

Slide 74 text

Animation Examples ಈը : https://goo.gl/npYoj1

Slide 75

Slide 75 text

Q5. ϢχοτςετͲ͏ॻ͘ʁ A. mockito.dartɺtest/test.dart Λ͔ͭ͏  https://ﬂutter.io/testing/

Slide 76

Slide 76 text

Json͔ΒϞσϧʹύʔε͢Δςετ

Slide 77

Slide 77 text

Json͔ΒϞσϧʹύʔε͢Δςετ

Slide 78

Slide 78 text

Json͔ΒϞσϧʹύʔε͢Δςετ

Slide 79

Slide 79 text

Q6. ଟݴޠԽͲ͏΍Δͷʁ A. dart:intlΛ͔ͭ͏  https://flutter.io/tutorials/internationalization/ ͨͩ͠ɺstrings.xmlͱൺ΂ͯΘΓͱ໘౗ Widgetͷςετ͕ίέΔͷͰɺtester.pump()Λ ݺΜͰ͓͘ϫʔΫΞϥ΢ϯυ͕ඞཁ  https://github.com/flutter/flutter/issues/1865

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

Q8. ϥΠϒϥϦΛ୳͢ͱ͖͸ʁ A. ެࣜϓϥάΠϯ or dart libraryΛݕࡧ͠Α͏ https://github.com/ﬂutter/plugins https://pub.dartlang.org/ﬂutter/packages

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

Lots of Libraries!

Slide 85

Slide 85 text

·ͱΊ

Slide 86

Slide 86 text

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