PickGo_for_Partnerの移行方法から学ぶ_既存のネイティブアプリをFlutterへリプレイスする方法_.pdf

by entaku

Slide 1

Slide 1 text

PickGo for PartnerͷҠߦํ๏͔ ΒֶͿ طଘͷωΠςΟϒΞϓϦ ΛFlutter΁ϦϓϨΠε͢Δํ๏ iOSDC 2021 2021/09/17 18:30ʙ Track D

Slide 2

Slide 2 text

ࣗݾ঺հ • Name: ԕ౻୓໻ (entaku) • Twitter: @entaku_0818 • GitHub: entaku0818 • Job: iOS/Android ΤϯδχΞetc

Slide 3

Slide 3 text

https://cb-cloud.com/

Slide 4

Slide 4 text

໨࣍ • ͳͥFlutterʹϦϓϨΠεͨ͠ͷ͔ʁ • FlutterϦϓϨΠε·Ͱͷεςοϓ • Ҡߦલʹཱͪ͸͔ͩͬͨ໰୊ • FlutterϦϓϨΠεͷৼΓฦΓ • ·ͱΊ

Slide 5

Slide 5 text

ͳͥFlutterʹϦϓϨΠεͨ͠ͷ ͔ʁ

Slide 6

Slide 6 text

iOS/Androidͷ྆OSఏڙ্͍ͯ͘͠ ͰɺٻΊΒΕΔ։ൃεϐʔυʹ߹Θͳ͍ • Partner͞Μ͕͓࢓ࣄͰ࢖͏ΞϓϦͳ ͷͰɺαϙʔτΛߟ͑Δͱಉ࣌ʹϦ Ϧʔε͢Δඞཁ͕͋Δ • ྆ϦϦʔεͷ࣌ظΛ߹ΘͤΑ͏ͱࢥ͏ ͱσβΠϯͷҧ͍/։ൃ؀ڥͷҧ͍/ݴ ޠ؀ڥͷҧ͍ΛຒΊΔඞཁ͕͋Γɺࢥ ͏Α͏ͳ։ൃεϐʔυ͕ग़ͤͳ͍

Slide 7

Slide 7 text

৽͍͠ࢪࡦ΍πʔϧͷಋೖʹ࣌ ͕͔͔ؒͬͯ͠·͏ • PickGo for Partner͸2015೥ʹϦ Ϧʔε͞ΕͨΞϓϦͰ͋Γɺឯ༨ۂ ં͋ͬͨ࢓༷΍ͦΕΛ࣮ݱ͢Δίʔ υͳͲͷٕज़తෛ࠴͕͋Γ·ͨ͠ɻ ࠓճͷϦϓϨΠεΛߦ͏͜ͱͰɺෛ ࠴Λ؅ཧ͠΍͘͢͠ɺ։ൃεϐʔυ Λ্͍͛ͯ͘ૂ͍͕͋Γ·ͨ͠ɻ

Slide 8

Slide 8 text

୅ද͕ॻ͍ͨίʔυ͕·ͩ࢒ͬ ͯΔ

Slide 9

Slide 9 text

https://pickgo.town/shopping/ ଞαʔϏεͰͷಋೖ࣮੷͕͋ͬͨ

Slide 10

Slide 10 text

FlutterԽ ͩ!

Slide 11

Slide 11 text

ٕज़ߏ੒ Anjular Scala Rails • Nativeͷػೳ͸ϩάΠϯ΍৽نը໘Ͱ͍͔ͭ͋͘Δ΋ͷ ͷϝΠϯͷಋઢ͸WebViewͰAnjularͷը໘Λදࣔ

Slide 12

Slide 12 text

࣮੷͋ΔFlutterͷߏ੒Λ࠾༻ • ChangeNoti fi er + ChangeNoti fi erProviderΛ࢖͏ • View͸σʔλΛࢀর͠දࣔ • ViewModel͸ChangeNoti fi erProviderΛར༻͠ɺσʔλͷมߋΛݕ஌͢Δ • State(ChangeNoti fi er)͸σʔλͷมߋΛ௨஌͢Δ

Slide 13

Slide 13 text

FlutterϦϓϨΠε ·Ͱͷεςοϓ

Slide 14

Slide 14 text

։ൃฤ

Slide 15

Slide 15 text

ॳظը໘ͷ࡞੒ • ϩάΠϯը໘ͱϗʔϜը໘Λ࡞੒ • ϩάΠϯͨ݁͠Ռฦͬͯ͘ΔtokenΛCookie΁ηοτ͠   WebviewͰύʔτφʔWebը໘Λ։͘ͱ͍͏͜ͱΛ͠·ͨ͠

Slide 16

Slide 16 text

ଞωΠςΟϒػೳͷ࡞੒ • ొ࿥ಋઢ΍MapҊ݅ҰཡͳͲωΠςΟϒػೳΛFlutterͰ ࡞੒͠·ͨ͠

Slide 17

Slide 17 text

Native࿈ܞՕॴͷ࡞੒ • WebViewͰಛఆͷૢ࡞Λͨ͠ࡍʹFlutterଆͰॲཧΛߦ͍·ͨ͠ • ϩάΞ΢τॲཧ • ి࿩ىಈ • Ґஔ৘ใ࿈ܞ • εΫϦʔϯγϣοτ • GoogleMapىಈ

Slide 18

Slide 18 text

Push௨஌ • PickGo Ͱ͸࠷৽ͷҊ݅ΛPush௨஌Ͱૹ৴͢ΔॲཧΛ͓ͯ͠ ΓFlutterͰ΋ಉ༷ͷॲཧΛ࣮૷͠·ͨ͠ • ࠓ·ͰOneSignalΛ࢖͍ͬͯ·͕ͨ͠ɺ͠ΕͬͱFirebase ʹҠߦ͠·ͨ͠ʢଞαʔϏεͰFirebaseʹ͍ͯͨͨ͠Ίʣ

Slide 19

Slide 19 text

ϦϦʔεฤ

Slide 20

Slide 20 text

഑৴ͷ࢓૊ΈΛ੔͑Δ ݕূํ๏ͷ༰қੑΛ্͛Δ ҠߦલʹQAνʔϜʹΑΔQAΛ࣮ ࢪͨ͠Γɺࣾһ΍ޙड़ͷϢʔβʔ ςετΛ࣮ࢪ্͍ͯ͘͠Ͱݕূͷ ༰қੑΛ্͍͛ͯ͘͜ͱ͕ඞཁͰ ͨ͠ɻ https://codemagic.io/apps

Slide 21

Slide 21 text

഑৴ͷ࢓૊ΈΛ੔͑Δ ͦ͜ͰcodemagicΛಋೖ͠ɺ͜ Ε·Ͱ͸ΞϓϦΤϯδχΞʹϏϧ υΛͯ͠΋ΒΘͳ͍ͱͰ͖ͳ͔ͬ ͨݕূΛ༰қʹ͢Δ͜ͱͰɺ඼࣭ ݕূͷ༰қੑΛ޲্ͤ͞·ͨ͠ɻ https://codemagic.io/apps

Slide 22

Slide 22 text

͍͟ϦϦʔε

Slide 23

Slide 23 text

ͱͯ΋ා͍

Slide 24

Slide 24 text

ͳͥා͍ͷ͔ʁ • 5೥ఔ౓αʔϏεఏڙ͖ͯͯ͠ࠓճ͕ॳͷϦϓ ϨΠε • ࢓༷Λ׬શʹ೺Ѳ͍ͯ͠ΔΘ͚Ͱ͸ͳ͘ෆ֬ ࣮ੑ͕ߴ͍

Slide 25

Slide 25 text

Ϣʔβʔςετ ͩ!

Slide 26

Slide 26 text

Ϣʔβʔςετͷ࣮ࢪ • iOS/AndroidͰͦΕͧΕ2໊ͣͭύʔτφʔ͞ Μʹ͝ڠྗ͍͖ͨͩςετΛ࣮ࢪ • ઌߦϦϦʔεͯ͠2िؒఔ౓৮ͬͯ΋Β͍໰୊ ൃੜ͠ͳ͍͔֬ೝͯ͠΋Β͏

Slide 27

Slide 27 text

Ϣʔβʔςετͷ࣮ࢪ • ຖ೔࿈བྷ…ͱ·Ͱ͸͍͖·ͤΜͰ͕͔ͨ͠ͳΓ ͷස౓Ͱ࿈བྷͯ͠ݕূʹڠྗͯ͠΋Β͍·ͨ͠

Slide 28

Slide 28 text

Ϣʔβʔςετͷ࣮ࢪ݁Ռ • ໰୊ͷݕ஌ • ϓογϡ௨஌ॲཧͷ࣮૷࿙Ε • ෳ਺γεςϜ͔ΒPush௨஌Λ͍ͯͨͨ͠Ίؾ͚ͮͳ͔ͬͨ • ύεϫʔυϦηοτಋઢͷ௥Ճ • FlutterԽ͢ΔλΠϛϯάͰશͯͷϢʔβʔ͕ϩάΞ΢τ ͢ΔͨΊ௥Ճ • ࠓ·Ͱ͸؅ཧऀ͕Ϧηοτ͍ͯͨ͠ • ʢݫີʹ͸Ϋϩʔζυςετલʹؾ͕͍ͭͯमਖ਼͠·͠ ͨʣ • େ͖͍໰୊͸ى͜Βͳͯ҆͘৺ͨ͠

Slide 29

Slide 29 text

͍ͭʹϦϦʔε!

Slide 30

Slide 30 text

ϦϓϨΠεͷ࣮ࢪ݁Ռ • 4/26 ϦϦʔε 🎉 • όʔδϣϯ9.0.1΁ • Android͕8.0.0ͩͬͨͷͰ߹Θͤ·ͨ͠ • iOS - https://apps.apple.com/JP/app/id1053791248 • Android - https://play.google.com/store/apps/details? id=ryuichi.cbcloud.keitownfc

Slide 31

Slide 31 text

ϦϓϨΠεޙͷ໰୊ • ಛఆछྨͷ഑ૹҊ݅ͷҊ݅௨஌͕ೖΒͳ͍ • ϚοϓΛ։͘ͱɺϒϥ΢β্ཱ͕͕ͪΓΞϓ Ϧ֎ʹඈ͹͞ΕΔ • ʮҐஔ৘ใ͕औಘͰ͖·ͤΜͰͨ͠~ʯͷΤ ϥʔ

Slide 32

Slide 32 text

ϦϓϨΠεޙͷมԽ • ϦϦʔεճ਺͕5ճˠ8ճʹͳͬͨ • ϦϓϨΠεલ͸ܰඍͳมߋ͕ͩͬͨɺϦϦʔ εޙ͸৽ػೳؚΊͯ8ճ

Slide 33

Slide 33 text

ৼΓฦΓ

Slide 34

Slide 34 text

ΫϩεϓϥοτϑΥʔϜ΁ͷۤ खҙࣝ • ݁ہωΠςΟϒଆͰSwift/KotlinΛॻ͔ͳ͚Ε͹͍ ͚ͳ͍ • ͳΒ࠷ॳ͔ΒωΠςΟϒͰྑ͍͡ΌΜͱࢥͬͯͨ

Slide 35

Slide 35 text

https://pickgo.town/shopping/

Slide 36

Slide 36 text

Ұ౓FlutterΛಋೖͯͨ͜͠ͱʹ Αͬͯߟ͑ํ͕มΘͬͨ • APIͰCRUDૢ࡞ͯ͠ɺUIΛදࣔͤ͞Δ͚ͩͳΒͱͯ ΋؆୯Ͱૣ͍ • ΞϓϦͰར༻͢Δʢ͔΋͠Εͳ͍ʣωΠςΟϒͰར ༻͢ΔػೳΛ͔ͬ͠Γ؅ཧͰ͖Ε͹ɺ໰୊ͳ͍ݟࠐ Έ͕Ͱ͖ͨ •

Slide 37

Slide 37 text

ࣄલʹ༧ଌ͖͠Εͳ͔ͬͨ͜ͱ • Ϋϩʔζυςετ΍ͦΕʹ൐͏मਖ਼ʹΑΓ༧ఆΑΓ1ϲ݄ ͘Β͍஗Εͯ͠·ͬͨ • ϦϓϨΠεͷςετ͸େม • FlutterϥΠϒϥϦ͕αϙʔτ͞Εͯͳ͍SDK΋͋ΔͷͰ ϓϥάΠϯΛ࡞੒͢Δඞཁ͕͋ͬͨ •

Slide 38

Slide 38 text

ଞͷ։ൃऀ͔Β w 'MVUUFS͸ίʔυඳ͍࣮ͯ૷͢ΔͷͰށ࿭͍͕ ͋Γ·ͨ͠ CZJ04ΤϯδχΞ w ΍ָ͍ͬͯͯ͠Ͱ͢ʂ w EBSU͕ඳ͖ͮΒ͍ͳͬͯࢥͬͨ w J04,PUMJOΤϯδχΞͰ͋Ε͹'MVUUFSܦݧ ऀ͡Όͳͯ͘΋େৎ෉Ͱͨ͠

Slide 39

Slide 39 text

ࠓޙͷల๬ • ػೳͷશͯΛFlutter΁ • WebViewͰૢ࡞͕ॏ͍෦෼΋ଟ͍ͷͰɺNativeԽΛؤ ு͍͖͍ͬͯͨ • ঢ়ଶ؅ཧͷख๏Λཱ֬͢Δ • ࣮੷Λ༏ઌ͋͠·Γେ͖͍มߋΛͰ͖ͳ͔ͬͨ • RiverpodͳͲͷಋೖΛݕ౼

Slide 40

Slide 40 text

ࢀߟ:ओͳར༻ϥΠϒϥϦ • WebView • https://pub.dev/packages/ fl utter_inappwebview • Ґஔ৘ใऔಘ • https://pub.dev/packages/background_locator • ϓογϡ௨஌/crashlyticsͳͲ • https://pub.dev/packages/ fi rebase_core • APIClient • https://pub.dev/packages/retro fi t

Slide 41

Slide 41 text

·ͱΊ • ࠓ·ͰSwift / KotlinͰར༻͍ͯͨ͠ΞϓϦ΋ Flutter΁ϦϓϨΠεͰ͖Δ • NativeͰͷػೳΛཧղ͍ͯ͠Ε͹໰୊ͳ͍ • Ϣʔβʔςετ͸࣮ࢪ͢Δ • ࢓༷͕Θ͔Βͳ͍৔߹͸ಛʹʂ