Stripe x ReactNative でフリマアプリを作った話 - React Native Matsuri 2022

Transcript

1. @fxwx23 Stripe x React Native Ͱ ϑϦϚΞϓϦΛ࡞ͬͨ࿩ React Native Matsuri 2022 / 2022.10.08
2. ࣗݾ঺հ ɾ౉ᬒ ࢙و (Fumitaka Watanabe) ɾגࣜձࣾNewelse ڞಉ૑ۀऀ݉SWE (2014೥~) ɾGitHub: @fxwx23 ɾTwitter: @fxwx23 ɾࣗࣾϓϩμΫτͷ։ൃશൠΛ୲౰ (Go, TypeScript)
3. https://unstreet.jp
4. UNSTREET AIؑఆ͖ͭεχʔΧʔϑϦϚΞϓϦ ɾεχʔΧʔಛԽͷϑϦϚػೳΛఏڙ։࢝ (2022೥8݄~) ɾAIը૾ؑఆαʔϏεͱఏܞِ͠෺Λରࡦ ɾ2018೥6݄ εχʔΧʔൃച৘ใΞϓϦͱͯ͠
 ϦϦʔε
5. ຊ೔ͷ͓࿩ ɾͳͥ React Native ʹҠߦ͔ͨ͠ ɾSwift੡ωΠςΟϒΞϓϦ͔ΒͲ͏Ҡߦ͢Δ͔ ɾReact Native ͜Μͳײ͡Ͱ࢖ͬͯ·͢ ɾϑϦϚʹ͓͚Δ stripe-react-native ͷ׆༻
6. Why React Native ?
7. ϑϦϚҎલ ɾεχʔΧʔͳͲͷൃച৘ใͳͲΛνΣο ΫͰ͖ΔϝσΟΞΞϓϦͱͯ͠ӡ༻͍ͯ͠ ͨ ɾiOSΞϓϦͷΈఏڙɺ׬શSwift੡ ɾUIKit + Interface Builder (Storyboard)
8. C2C Support
9. େ෯ͳUIͷมߋ͕ൃੜ ɾUIKit + Interface Builder ർΕͨ😂 ɾ΄΅৽نViewͰɺ࣮࣭ϑϧϦϓϨΠε ▪ Hot reload ͳ͍ͷͰมߋͷ֬ೝ౓ʹBuildɺԹ͔Έͷ͋ΔखಈͷIBOutlet etc ▪ એݴతUI͕ओྲྀʹͳ͖͍ͬͯͯΔ & Interface Builder σΟείϯʹͳΔͷා͍ ɾAndroid΋ग़͍ͨ͠
10. ࣮ࡍʹҠߦલʹߦΘΕͨ GitHub Discussions
11. ΋ͨΒ͞Εͨબ୒ࢶ ɾSwiftUI + UIKit ɾUIKit + Interface Builder ɾReact Native ɾFlutter
12. SwiftUI + UIKit ɾকདྷੑ͸͋Δ͠ɺSwiftࣗମ͸ਪͤΔ ɾ৽نViewͷΈSwiftUIΛར༻͢Δݱ࣮࿏ઢ ɾಈ࡞ʹएׯෆ҆ʁ iOS14 Λ੾Ε͹ͳΜͱ͔ͳΔ͔ ɾֶशίετ͋ΓͰɺ੒Ռ෺ʹAndroidΞϓϦ͸ͳ͍…
13. Flutter ɾ೔ຊͰ͸RNΑΓਓޱଟ͍ʁ࠾༻໘Ͱ͍͍ͷ͔ʁ ɾશͯDartʹ͢Δ͘Β͍ͷؾ࣋ͪͳΒΞϦ ɾ৽نϓϩδΣΫτͳΒ࠾༻ͯ͠΋ྑ͔ͬͨ
14. React Native ɾࣾ಺ͷࣗಈԽπʔϧʹ Firebase Functions/Node.jsɺTypeScript ɾReact (Next.js) ࢖͍ͬͯͨ ɾReact HooksɺLinter ͳͲͷ஌ݟ
15. React Native Λ࠾༻ ɾࣾ಺ͷࣗಈԽπʔϧʹ Firebase Functions/Node.jsɺTypeScript ɾReact (Next.js) ࢖͍ͬͯͨ ɾReact HooksɺLinter ͳͲͷ஌ݟ ɾपғͰ૬ஊͰ͖Δਓ͕͍ͨͷ΋ޙԡ͠
16. Swift → React Native
17. Ҡߦʹ͋ͨΓ ɾӨڹൣғ͕ͳ͍Android൛ΛઌߦͰϦϦʔε ɾطଘver͔Βͷमਖ਼ϦϦʔεͱฒߦ͢Δඞཁੑ ɾطଘϢʔβʔ͕Ξοϓσʔτͯ͠΋ࣄނΒͳ͍ etc
18. Ҡߦʹ͋ͨΓ ɾӨڹൣғ͕ͳ͍Android൛ΛઌߦͰϦϦʔε ɾطଘver͔Βͷमਖ਼ϦϦʔεͱฒߦ͢Δඞཁੑ ɾطଘϢʔβʔ͕Ξοϓσʔτͯ͠΋ࣄނΒͳ͍ etc
19. Ҡߦʹ͋ͨΓ ɾӨڹൣғ͕ͳ͍Android൛ΛઌߦͰϦϦʔε ɾطଘver͔Βͷमਖ਼ϦϦʔεͱฒߦ͢Δඞཁੑ ɾطଘϢʔβʔ͕Ξοϓσʔτͯ͠΋ࣄނΒͳ͍ etc
20. ։ൃΛฒߦ͢Δ্Ͱ ɾBundle ID ΛطଘωΠςΟϒΞϓϦͱ෼͚ͯ։ൃΛελʔτ ɾωΠςΟϒଆʹमਖ਼͕ൃੜͯ͠΋ετϨεͳ͘ಈ͚Δ ɾωΠςΟϒଆ͕ίʔυϑϦʔζ͔ͯ͠Β Bundle ID Λಉ͡΋ͷʹ
21. Bundle ID: com.newelse.kix Bundle ID: com.newelse.kix Path: /var/abcdef…/KIX.app/ Path: /var/012345…/KIX.app/ ver 4.8.6 ver 5.0.0
22. Ҡߦςετ ɾطଘωΠςΟϒΞϓϦΛXcodeͰϏϧυͯ͠Πϯετʔϧ ɾͦͷޙʹ React Native ੡ͷΞϓϦΛΠϯετʔϧͯ֬͠ೝ ɾωΠςΟϒΞϓϦͰอଘ͞ΕͨϩʔΧϧσʔλΛਖ਼͘͠ಡΈग़͢ ▪ NSUserDefaultsɺRealmɺSQLite ౳
23. NSUserDefaults ɾϢʔβʔͷઃఆ৘ใ (Preferences) ΛӬଓతʹอଘ͢Δ͜ͱ͕໨త ɾΞϓϦΛ࡟আ͢Δͱ NSUserDefaults ͸ফ͑Δ ɾNSData, NSString, NSNumber, NSDate, NSArray, or NSDictionary ▪ ࢀর: https://developer.apple.com/documentation/foundation/nsuserdefaults
24. Settings https://reactnative.dev/docs/settings
25. AsyncStorage ΁
26. AsyncStorage ΁ ɾAndroidͰ΋ಉ͡஋Λอ࣋͢ΔͨΊɺSettings͸ಡΈग़͠ݶఆ ɾอଘͰ͖Δͷ͸શͯ string → typeof Ͱௐ΂ͯద౰ʹม׵ ɾNSDate, NSData ͸͖͋ΒΊΔ
27. NSDate, NSData ͸ null ѻ͍ ɾRCTJSONClean Ͱॲཧ͞ΕΔσʔλΫϥε͸ݶΒΕΔ ▪ NSString, NSMutableString, NSNumber, NSNull ͷΈ ▪ ࢀর: https://github.com/facebook/react-native/blob/main/React/Base/RCTUtils.m#L165 ɾNSUserDefaultsͷσʔλ͸ඞͣ RCTJSONClean Λ௨Δ
28. Realm JS ɾSwift SDK Ͱ࡞੒ͨ͠σʔλ΋ ಡΈࠐΊΔ ▪ [ ] Ͱ Realm.List<T> Λදݱ ▪ ࢀর: https://www.mongodb.com/docs/realm/sdk/react- native/examples/de fi ne-a-realm-object-model/ #supported-property-types ɾSchemaͰఆٛ ɾHermes Support ͸ݱ࣌఺ͰRC
29. React Native Ͱͷߏ੒ ɾExpo Modules ɾExpo Bare Work fl ow ɾRecoil, Sentry, Realm, React Navigation (v6) ɾBase Component
30. React Native Ͱͷߏ੒ ɾExpo Modules ɾExpo Bare Work fl ow ɾRecoil, Sentry, Realm, React Navigation (v6) ɾBase Component
31. Done Swift੡ΞϓϦͷRepositoryͷݴޠߏ੒ React Native੡ΞϓϦͷRepositoryͷݴޠߏ੒
32. Stripe https://stripe.com/jp
33. Stripe Connect ϓϥοτϑΥʔϜͱϚʔέοτϓϨΠεͷͨΊͷܾࡁΠϯϑϥ ɾച্ͷ෼഑΍ೖۚΛAPIͰ؅ཧ ɾ135 Ҏ্ͷ௨՟ͱ֤ࠃͷ͞·͟·ͳࢧ෷͍ํ๏ʹରԠ ɾސ٬֬ೝ (KYC) ʹ΋ରԠ https://stripe.com/jp/connect
34. @stripe/stripe-react-native ɾReactNative޲͚ͷStripe༻ܾࡁϥΠϒϥϦ ɾओʹܾࡁ৘ใͷऩूͱܾࡁͷ֬ఆΛ୲͍ɺͦͷͨΊͷUIͱը໘ཁૉΛఏڙ ɾstripe-android, stripe-ios Λར༻͢ΔͨΊͷϒϦοδ
35. Getting Started ɾinitStripe ͔ StripeProvider ͰॳظԽॲཧ ɾuseStripe ͢ΔલʹॳظԽ͓ͯ͘͠ඞཁ͕͋Δ ɾॳظԽ࣌ʹ౉ͤΔ Params ͸ಉ͡
37. ܾࡁ৘ใͷऩू ɾCardField Component ͔ Payment Element Λར༻
38. ܾࡁ৘ใͷऩू ɾCardField Component ͔ Payment Element Λར༻
39. Payment Element ҆શͰຒΊࠐΈՄೳͳ 1 ͭͷ UI ίϯϙʔωϯτ ɾೖྗϑΟʔϧυΛࣗಈతʹௐ੔͠ɺࢧ෷͍ํ๏ͱࠃʹج͍ͮͯ৘ใΛऩू ɾೖྗݕূɺϚεΩϯάɺελΠϧॲཧɺΤϥʔॲཧ ɾސ٬ͷΧʔυ৘ใΛ؅ཧ
40. Payment Element ҆શͰຒΊࠐΈՄೳͳ 1 ͭͷ UI ίϯϙʔωϯτ ɾೖྗϑΟʔϧυΛࣗಈతʹௐ੔͠ɺࢧ෷͍ํ๏ͱࠃʹج͍ͮͯ৘ใΛऩू ɾೖྗݕূɺϚεΩϯάɺελΠϧॲཧɺΤϥʔॲཧ ɾސ٬ͷΧʔυ৘ใΛ؅ཧ
48. ܾࡁॲཧͱ͸ ࢥ͑ͳ͍΄Ͳ ؆ܿ
49. @stripe/stripe-react-native ɾγϯϓϧͳΠϯλʔϑΣΠεͰωΠςΟϒରԠͷUIΛར༻Ͱ͖Δ ɾ3DηΩϡΞʹ΋༰қʹରԠՄೳ ɾޱ࠲৘ใͷొ࿥ʹ΋ରԠ (createToken)
50. @stripe/stripe-react-native ɾγϯϓϧͳΠϯλʔϑΣΠεͰωΠςΟϒରԠͷUIΛར༻Ͱ͖Δ ɾ3DηΩϡΞʹ΋༰қʹରԠՄೳ ɾޱ࠲৘ใͷొ࿥ʹ΋ରԠ (createToken) https://stripe.com/docs/payments/accept-a-payment?platform=react-native
51. React Native ʹҠߦͯ͠Έͯ ɾ։ൃ଎౓͕֨ஈʹ্͕ͬͨ ▪ ಉ࣌ʹAndroid (or iOS) ͕Ͱ͖͕͋Δͷ͸ΫϩεϓϥοτϑΥʔϜͷ୉ޣຯ ɾTypeScript, React ͷ஌ݟԠ༻ͷαΠΫϧ͕ճΔ ɾWebϑϩϯτΤϯυͱͷ༥߹ ▪ React GUI, Expo Router etc ɾΫϥΠΞϯταΠυͷ૯߹֨ಆٕ
52. We are hiring!
53. We are hiring!
54. ࣗݾ঺հ ɾ౉ᬒ ࢙و (Fumitaka Watanabe) ɾגࣜձࣾNewelse ڞಉ૑ۀऀ݉SWE (2014೥~) ɾGitHub: @fxwx23 ɾTwitter: @fxwx23 ɾࣗࣾϓϩμΫτͷ։ൃશൠΛ୲౰ (Go, TypeScript)
55. Thanks