PickGo_for_Partnerの移行方法から学ぶ_既存のネイティブアプリをFlutterへリプレイスする方法_.pdf

Transcript

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

   View Slide

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

   View Slide

3. https://cb-cloud.com/
   

   View Slide

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

   View Slide

5. ͳͥFlutterʹϦϓϨΠεͨ͠ͷ
   ͔ʁ
   

   View Slide

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

   View Slide

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

   View Slide

8. ୅ද͕ॻ͍ͨίʔυ͕·ͩ࢒ͬ
   ͯΔ
   

   View Slide

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

   View Slide

10. FlutterԽ ͩ!
    

    View Slide

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

    View Slide

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

    View Slide

13. FlutterϦϓϨΠε
    
    
    ·Ͱͷεςοϓ
    

    View Slide

14. ։ൃฤ
    

    View Slide

15. ॳظը໘ͷ࡞੒
    • ϩάΠϯը໘ͱϗʔϜը໘Λ࡞੒
    
    
    • ϩάΠϯͨ݁͠Ռฦͬͯ͘ΔtokenΛCookie΁ηοτ͠
    

    WebviewͰύʔτφʔWebը໘Λ։͘ͱ͍͏͜ͱΛ͠·ͨ͠
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. ϦϦʔεฤ
    

    View Slide

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

    View Slide

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

    View Slide

22. ͍͟ϦϦʔε
    

    View Slide

23. ͱͯ΋ා͍
    

    View Slide

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

    View Slide

25. Ϣʔβʔςετ ͩ!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. ͍ͭʹϦϦʔε!
    

    View Slide

30. ϦϓϨΠεͷ࣮ࢪ݁Ռ
    • 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
    

    View Slide

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

    View Slide

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

    View Slide

33. ৼΓฦΓ
    

    View Slide

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

    View Slide

35. https://pickgo.town/shopping/
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

40. ࢀߟ:ओͳར༻ϥΠϒϥϦ
    • 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
    
    
    

    View Slide

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

    View Slide