react-native-unimodulesを用いてのApp内課金実装

by Yu Watanabe

Slide 1

Slide 1 text

2021/03/04 Θͨͳ΂Ώ͏ REACT-NATIVE-UNIMODULESΛ༻͍ͯͷ APP಺՝࣮ۚ૷

Slide 2

Slide 2 text

▸ ExpoΛ࢖͍ͬͯΔ ▸ APP಺՝ۚ(αϒεΫ)Λ࣮૷͠ͳ͍ͱ͍͚ͳ͍ਓ ຊεϥΠυͷλʔήοτ

Slide 3

Slide 3 text

▸ ࣗݾ঺հ ▸ APP಺՝ۚʹ͍ͭͯ ▸ expo-in-app-purchaseΛ༻͍ͯAPP಺՝ۚΛ࣮૷͢Δ ▸ ՝ۚεςʔλεͷ֬ೝʹ͍ͭͯ ▸ ΞϓϦΛ։͍ͨͱ͖ͳͲखಈͰ֬ೝΛ͢Δ ▸ webhookΛ༻͍ͯϢʔβଆͰεςʔλεมߋͨ͠ࡍʹ֬ೝ͢Δ ▸ ·ͱΊ ໨࣍

Slide 4

Slide 4 text

ࣗݾ঺հ(1) Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h CTO ▸ Web / ΞϓϦΛझຯͰެ։ ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web / શ෦ ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu

Slide 5

Slide 5 text

ࣗݾ঺հ(2) ▸ https://www.gandh.jp ▸ 6໊(ΤϯδχΞ͸1ਓ) ▸ ετϦʔτΧϧνϟʔ × ITͳμϯεαʔϏεΛӡӦ ▸ https://dancewith.jp ▸ ετϦʔτμϯεͷΦϯϥΠϯϨοεϯΞϓϦ ▸ react-native + ﬁrebase + TypeScript + bitrise + NextJS ▸ prisma + GraphQL + Electron + ffmpeg ▸ TypeScriptͰ౷Ұͯ͠ۀ຿ޮ཰Խ ▸ εχʔΧʔؔ܎ͷΞϓϦͷཪଆͰճͯ͠ΔγεςϜ ▸ TypeScript + Node + puppeteer + ﬁrebaseͰ࡞੒ ▸ ΞϓϦ಺Ұ෦ػೳΛผΞϓϦͱͯ͠react-nativeͰ࡞੒த

Slide 6

Slide 6 text

ຊ೔ͷςʔϚ react-native-unimodules(bare workﬂow)Λ༻͍ͯͷ APP಺՝࣮ۚ૷

Slide 7

Slide 7 text

REACT-NATIVE-UNIMODULES(BARE WORKFLOW)Λ༻͍ͯͷAPP಺՝࣮ۚ૷ APP಺՝ۚʹ͍ͭͯ

Slide 8

Slide 8 text

APP಺՝ۚʹ͍ͭͯ(1) ʙDANCE WITHʹ͓͚Δ࣮૷ʙ ▸ ੍ֹ݄ͷαϒεΫ(୯ൃ՝ۚ͸࣮૷͓ͯ͠Βͣ) ▸ DANCE WITH͸࠷ॳ͸iOS/Androidͱ΋ʹStripeʹ࣮ͯ૷ ▸ 2020೥8݄ʙ11݄຤·Ͱ͸OK͕ͩͬͨ12݄͔ΒϦδΣΫτ ߋ৽Ͱ͖ͳ͘ͳΔͷ͸ࠔΔͷͰ ͜ΕΛػʹApp಺՝ۚʹมߋ ͪͳΈʹStripeͷ࣮૷࣌1ൃ໨ͷ৹ࠪͰམͱ͞Ε͚ͨͲ ಈըετϦʔϛϯάͰແྉίϯςϯπ΋े෼͋Δ͔Β ͬͯ͜ͱͰ৹ࠪ௨͚ͬͨͲɺ12݄͔Β͸ͦΕͰ΋ԡ͠௨ͤͣ…

Slide 9

Slide 9 text

APP಺՝ۚʹ͍ͭͯ(2) ʙREACT NATIVEʹ͓͚Δ࣮૷ʙ https://github.com/dooboolab/react-native-iap https://docs.expo.io/versions/latest/sdk/in-app-purchases/ DANCE WITHͰ͸ Bare WorkﬂowΛಋೖ͍ͯͨ͠ͷͰ expo-in-app-purchaseͰ࣮૷

Slide 10

Slide 10 text

APP಺՝ۚʹ͍ͭͯ(3) ʙEXPO(MANAGED WORKFLOW)Ͱͷ࣮૷ʙ ▸ StripeͰαϒεΫ࣮૷Λͯ͠΋ޙ͔Β৹ࠪͰམͱ͞ΕΔՄೳੑ͕͋Δ ▸ NetﬂixΈ͍ͨʹձһొ࿥ͳͲશͯWebͰ΍Δʹ΋DXͱ͔࣮૷ίετ͕໰୊ʹͳΔ ▸ react-native-iap΋expo-in-app-purchase΋ExpoͰ͸࢖༻Ͱ͖ͣ(ཁeject) ▸ ExpoΛeject͢ΔͱࣗಈͰBare WorkﬂowͱͳΔͷͰexpo-in-app-purchaseʹ͢Δͷ͕Α͍ ▸ ※ͪͳΈʹ྆ऀͱ΋Native෦෼Λ͍͡Δ͜ͱ͸ͳ͍ͷͰ࣮ࡍ͸ͲͪΒͰ΋ߏΘͳ͍ EjectΛ࣮ͯ͠૷͢Δඞཁ͕͋Δ

Slide 11

Slide 11 text

REACT-NATIVE-UNIMODULES(BARE WORKFLOW)Λ༻͍ͯͷAPP಺՝࣮ۚ૷ expo-in-app-purchaseΛ༻͍ͯAPP಺՝ۚΛ࣮૷͢Δ

Slide 12

Slide 12 text

EXPO-IN-APP-PURCHASEΛ༻͍ͯAPP಺՝ۚΛ࣮૷͢Δ(1)

Slide 13

Slide 13 text

EXPO-IN-APP-PURCHASEΛ༻͍ͯAPP಺՝ۚΛ࣮૷͢Δ(2) ՝ۚϖʔδΛ։͍ͨͱ͖ͷॳظԽॲཧ

Slide 14

Slide 14 text

EXPO-IN-APP-PURCHASEΛ༻͍ͯAPP಺՝ۚΛ࣮૷͢Δ(3) ߪೖ͕׬ྃͨ͠ࡍͷॲཧ + อଘ͢Δσʔλ

Slide 15

Slide 15 text

EXPO-IN-APP-PURCHASEΛ༻͍ͯAPP಺՝ۚΛ࣮૷͢Δ(4) ՝ۚϞʔμϧΛग़ͨ͢Ίͷؔ਺

Slide 16

Slide 16 text

REACT-NATIVE-UNIMODULES(BARE WORKFLOW)Λ༻͍ͯͷAPP಺՝࣮ۚ૷ ՝ۚεςʔλεͷ֬ೝ

Slide 17

Slide 17 text

՝ۚεςʔλεͷ֬ೝ(1) ʙΞϓϦ಺ʙ ▸ ΞϓϦ্ཱͪ͛࣌΍εςʔλε͕֬ೝͰ͖Δը໘ ▸ Homeը໘ͳͲແྉ/༗ྉͰग़͠Θ͚͕͞ΕΔը໘ͳͲ ▸ جຊతʹ͸ΞϓϦ্ཱ͚ͪ͛࣌ͩͰେৎ෉

Slide 18

Slide 18 text

՝ۚεςʔλεͷ֬ೝ(2) ʙΞϓϦ಺͔Β໰͍߹Θͤ͢Δίʔυʙ

Slide 19

Slide 19 text

՝ۚεςʔλεͷ֬ೝ(3) ʙWEBHOOKܦ༝Ͱͷεςʔλε֬ೝʙ ▸ ϢʔβଆͷαϒεΫղআ΍ϓϥϯมߋΛݕ஌ ▸ ΞϓϦ֎ͷڍಈ͕มΘΔͳΒ͹࣮૷͢Δඞཁ͋Γ ▸ ϓογϡ௨஌͕ແྉ/༗ྉͰมΘΔ ▸ WebΞϓϦͷํʹ΋൓өͤ͞Δඞཁ͕͋ΔͳͲ ▸ ΞϓϦ಺ͷڍಈ͕มΘΔ͙Β͍͔͠ͳ͍ͷͰ͋Ε͹ඞཁ ͳ͍

Slide 20

Slide 20 text

՝ۚεςʔλεͷ֬ೝ(4) ʙWEBHOOKͰΞοϓσʔτ͢Δίʔυʙ

Slide 21

Slide 21 text

REACT-NATIVE-UNIMODULES(BARE WORKFLOW)Λ༻͍ͯͷAPP಺՝࣮ۚ૷ ·ͱΊ

Slide 22

Slide 22 text

·ͱΊ ▸ ExpoΛ࢖͍ͬͯͯAPP಺՝ۚΛ͍ͨ͠ͳΒ͹Bare workﬂowʹ͢Δ ▸ StripeͰڐ͞ΕΔύλʔϯ΋͋Δ͚Ͳ΋جຊతʹ͸ڐ͞Εͳ͍ͱࢥ͏΂͖ ▸ ՝ۚͷॲཧ͸ωΠςΟϒ͍͡Βͳ͍͠ҙ֎ͱ؆୯ ▸ αϒεΫͷ՝ۚεςʔλεΛ֬ೝ͢Δͷ͸ҎԼͷ2ͭ ▸ ΞϓϦΛ։͍ͨͱ͖΍ɺϢʔβεςʔλεΛ֬ೝ͢ΔͳͲͳͲ ▸ webhookͰϢʔβଆͷαϒεΫղ໿ͳͲΛݕ஌ αϒεΫΛ࡞Γ͍ͨͷͰ͋Ε͹ආ͚ͯ͸௨Εͳ͍ͷͰ ࢥ͍੾ͬͯeject࣮ͯ͠૷͠·͠ΐ͏

Slide 23

Slide 23 text

͓ΘΓ