Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

entaku
September 17, 2021
3.9k

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

entaku

September 17, 2021
Tweet

Transcript

  1. PickGo for PartnerͷҠߦํ๏͔
    ΒֶͿ طଘͷωΠςΟϒΞϓϦ
    ΛFlutter΁ϦϓϨΠε͢Δํ๏
    iOSDC 2021


    2021/09/17 18:30ʙ Track D

    View full-size slide

  2. ࣗݾ঺հ
    • Name: ԕ౻୓໻ (entaku)


    • Twitter: @entaku_0818


    • GitHub: entaku0818


    • Job: iOS/Android ΤϯδχΞetc

    View full-size slide

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

    View full-size slide

  4. ໨࣍
    • ͳͥFlutterʹϦϓϨΠεͨ͠ͷ͔ʁ


    • FlutterϦϓϨΠε·Ͱͷεςοϓ


    • Ҡߦલʹཱͪ͸͔ͩͬͨ໰୊


    • FlutterϦϓϨΠεͷৼΓฦΓ


    • ·ͱΊ

    View full-size slide

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

    View full-size slide

  6. iOS/Androidͷ྆OSఏڙ্͍ͯ͘͠
    ͰɺٻΊΒΕΔ։ൃεϐʔυʹ߹Θͳ͍
    • Partner͞Μ͕͓࢓ࣄͰ࢖͏ΞϓϦͳ
    ͷͰɺαϙʔτΛߟ͑Δͱಉ࣌ʹϦ
    Ϧʔε͢Δඞཁ͕͋Δ


    • ྆ϦϦʔεͷ࣌ظΛ߹ΘͤΑ͏ͱࢥ͏
    ͱσβΠϯͷҧ͍/։ൃ؀ڥͷҧ͍/ݴ
    ޠ؀ڥͷҧ͍ΛຒΊΔඞཁ͕͋Γɺࢥ
    ͏Α͏ͳ։ൃεϐʔυ͕ग़ͤͳ͍

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. FlutterԽ ͩ!

    View full-size slide

  11. ٕज़ߏ੒
    Anjular


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

    View full-size slide

  12. ࣮੷͋ΔFlutterͷߏ੒Λ࠾༻
    • ChangeNoti
    fi
    er + ChangeNoti
    fi
    erProviderΛ࢖͏


    • View͸σʔλΛࢀর͠දࣔ


    • ViewModel͸ChangeNoti
    fi
    erProviderΛར༻͠ɺσʔλͷมߋΛݕ஌͢Δ


    • State(ChangeNoti
    fi
    er)͸σʔλͷมߋΛ௨஌͢Δ

    View full-size slide

  13. FlutterϦϓϨΠε


    ·Ͱͷεςοϓ

    View full-size slide

  14. ॳظը໘ͷ࡞੒
    • ϩάΠϯը໘ͱϗʔϜը໘Λ࡞੒


    • ϩάΠϯͨ݁͠Ռฦͬͯ͘ΔtokenΛCookie΁ηοτ͠

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

    View full-size slide

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

    View full-size slide

  16. Native࿈ܞՕॴͷ࡞੒
    • WebViewͰಛఆͷૢ࡞Λͨ͠ࡍʹFlutterଆͰॲཧΛߦ͍·ͨ͠


    • ϩάΞ΢τॲཧ


    • ి࿩ىಈ


    • Ґஔ৘ใ࿈ܞ


    • εΫϦʔϯγϣοτ


    • GoogleMapىಈ

    View full-size slide

  17. Push௨஌
    • PickGo Ͱ͸࠷৽ͷҊ݅ΛPush௨஌Ͱૹ৴͢ΔॲཧΛ͓ͯ͠
    ΓFlutterͰ΋ಉ༷ͷॲཧΛ࣮૷͠·ͨ͠


    • ࠓ·ͰOneSignalΛ࢖͍ͬͯ·͕ͨ͠ɺ͠ΕͬͱFirebase
    ʹҠߦ͠·ͨ͠ʢଞαʔϏεͰFirebaseʹ͍ͯͨͨ͠Ίʣ

    View full-size slide

  18. ഑৴ͷ࢓૊ΈΛ੔͑Δ
    ݕূํ๏ͷ༰қੑΛ্͛Δ


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

    View full-size slide

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

    View full-size slide

  20. ͍͟ϦϦʔε

    View full-size slide

  21. ͳͥා͍ͷ͔ʁ
    • 5೥ఔ౓αʔϏεఏڙ͖ͯͯ͠ࠓճ͕ॳͷϦϓ
    ϨΠε


    • ࢓༷Λ׬શʹ೺Ѳ͍ͯ͠ΔΘ͚Ͱ͸ͳ͘ෆ֬
    ࣮ੑ͕ߴ͍

    View full-size slide

  22. Ϣʔβʔςετ ͩ!

    View full-size slide

  23. Ϣʔβʔςετͷ࣮ࢪ
    • iOS/AndroidͰͦΕͧΕ2໊ͣͭύʔτφʔ͞
    Μʹ͝ڠྗ͍͖ͨͩςετΛ࣮ࢪ


    • ઌߦϦϦʔεͯ͠2िؒఔ౓৮ͬͯ΋Β͍໰୊
    ൃੜ͠ͳ͍͔֬ೝͯ͠΋Β͏

    View full-size slide

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

    View full-size slide

  25. Ϣʔβʔςετͷ࣮ࢪ݁Ռ
    • ໰୊ͷݕ஌


    • ϓογϡ௨஌ॲཧͷ࣮૷࿙Ε


    • ෳ਺γεςϜ͔ΒPush௨஌Λ͍ͯͨͨ͠Ίؾ͚ͮͳ͔ͬͨ


    • ύεϫʔυϦηοτಋઢͷ௥Ճ


    • FlutterԽ͢ΔλΠϛϯάͰશͯͷϢʔβʔ͕ϩάΞ΢τ
    ͢ΔͨΊ௥Ճ


    • ࠓ·Ͱ͸؅ཧऀ͕Ϧηοτ͍ͯͨ͠


    • ʢݫີʹ͸Ϋϩʔζυςετલʹؾ͕͍ͭͯमਖ਼͠·͠
    ͨʣ


    • େ͖͍໰୊͸ى͜Βͳͯ҆͘৺ͨ͠

    View full-size slide

  26. ͍ͭʹϦϦʔε!

    View full-size slide

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

  28. ϦϓϨΠεޙͷ໰୊
    • ಛఆछྨͷ഑ૹҊ݅ͷҊ݅௨஌͕ೖΒͳ͍


    • ϚοϓΛ։͘ͱɺϒϥ΢β্ཱ͕͕ͪΓΞϓ
    Ϧ֎ʹඈ͹͞ΕΔ


    • ʮҐஔ৘ใ͕औಘͰ͖·ͤΜͰͨ͠~ʯͷΤ
    ϥʔ

    View full-size slide

  29. ϦϓϨΠεޙͷมԽ
    • ϦϦʔεճ਺͕5ճˠ8ճʹͳͬͨ


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

    View full-size slide

  30. ΫϩεϓϥοτϑΥʔϜ΁ͷۤ
    खҙࣝ
    • ݁ہωΠςΟϒଆͰSwift/KotlinΛॻ͔ͳ͚Ε͹͍
    ͚ͳ͍


    • ͳΒ࠷ॳ͔ΒωΠςΟϒͰྑ͍͡ΌΜͱࢥͬͯͨ

    View full-size slide

  31. https://pickgo.town/shopping/

    View full-size slide

  32. Ұ౓FlutterΛಋೖͯͨ͜͠ͱʹ
    Αͬͯߟ͑ํ͕มΘͬͨ
    • APIͰCRUDૢ࡞ͯ͠ɺUIΛදࣔͤ͞Δ͚ͩͳΒͱͯ
    ΋؆୯Ͱૣ͍


    • ΞϓϦͰར༻͢Δʢ͔΋͠Εͳ͍ʣωΠςΟϒͰར
    ༻͢ΔػೳΛ͔ͬ͠Γ؅ཧͰ͖Ε͹ɺ໰୊ͳ͍ݟࠐ
    Έ͕Ͱ͖ͨ



    View full-size slide

  33. ࣄલʹ༧ଌ͖͠Εͳ͔ͬͨ͜ͱ
    • Ϋϩʔζυςετ΍ͦΕʹ൐͏मਖ਼ʹΑΓ༧ఆΑΓ1ϲ݄
    ͘Β͍஗Εͯ͠·ͬͨ


    • ϦϓϨΠεͷςετ͸େม


    • FlutterϥΠϒϥϦ͕αϙʔτ͞Εͯͳ͍SDK΋͋ΔͷͰ
    ϓϥάΠϯΛ࡞੒͢Δඞཁ͕͋ͬͨ



    View full-size slide

  34. ଞͷ։ൃऀ͔Β
    w 'MVUUFS͸ίʔυඳ͍࣮ͯ૷͢ΔͷͰށ࿭͍͕
    ͋Γ·ͨ͠ CZJ04ΤϯδχΞ

    w ΍ָ͍ͬͯͯ͠Ͱ͢ʂ
    w EBSU͕ඳ͖ͮΒ͍ͳͬͯࢥͬͨ
    w J04,PUMJOΤϯδχΞͰ͋Ε͹'MVUUFSܦݧ
    ऀ͡Όͳͯ͘΋େৎ෉Ͱͨ͠

    View full-size slide

  35. ࠓޙͷల๬
    • ػೳͷશͯΛFlutter΁


    • WebViewͰૢ࡞͕ॏ͍෦෼΋ଟ͍ͷͰɺNativeԽΛؤ
    ு͍͖͍ͬͯͨ


    • ঢ়ଶ؅ཧͷख๏Λཱ֬͢Δ


    • ࣮੷Λ༏ઌ͋͠·Γେ͖͍มߋΛͰ͖ͳ͔ͬͨ


    • RiverpodͳͲͷಋೖΛݕ౼


    View full-size slide

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

  37. ·ͱΊ
    • ࠓ·ͰSwift / KotlinͰར༻͍ͯͨ͠ΞϓϦ΋
    Flutter΁ϦϓϨΠεͰ͖Δ


    • NativeͰͷػೳΛཧղ͍ͯ͠Ε͹໰୊ͳ͍


    • Ϣʔβʔςετ͸࣮ࢪ͢Δ


    • ࢓༷͕Θ͔Βͳ͍৔߹͸ಛʹʂ

    View full-size slide