React Native Expoで行うアプリの簡単最速運用

Transcript

1. 2019/02/27 Θͨͳ΂Ώ͏ REACT NATIVE EXPOͰߦ͏ΞϓϦͷ؆୯࠷଎ӡ༻

2. ▸ ࣗݾ঺հ ▸ React Native Expoͱ͸ ▸ ExpoΛ࢖͏ϝϦοτ/σϝϦοτ ▸ ։ൃӡ༻Λૉૣ͘؆୯ʹߦ͏ͨΊʹ

   ▸ circleciͷಋೖ ▸ expo-qr-notifyͷಋೖ ▸ ·ͱΊ ֓ཁ

3. ࣗݾ঺հ(1) Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։

   ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu ࣮ફExpo͍ͬͯ͏ຊΛڞஶͰ2018೥12݄ʹग़൛

4. ࣗݾ঺հ(2) ▸ https://www.gandh.jp ▸ 3໊(ΤϯδχΞ͸ࣗ෼Ұਓ)Ͱฏۉ೥ྸ30൒͹ͷγχΞձࣾ ▸ ετϦʔτΧϧνϟʔ × ITͳαʔϏεΛӡӦ ▸

   ݱࡏͷϝΠϯࣄۀɿhttps://www.weddyweddy.net ▸ μϯαʔ޲͚ͷϓϥοτϑΥʔϜܥSNSΞϓϦ ▸ ͪ͜ΒͰνϣΠεͨ͠གྷΓ΍͍͢30ඵఔ౓ͷۂͰགྷͬͯಈըΛΞοϓ

5. REACT NATIVE EXPOͰߦ͏ΞϓϦͷ؆୯࠷଎ӡ༻ React Native Expoͱ͸

6. REACT NATIVE EXPOͱ͸(1) ▸ React NativeΛݶΓͳ͘web։ൃʹ͚ۙͮΔͨΊͷ΋ͷ ▸ Xcode΍Android Studio͕ෆཁ ▸

   JavaScriptͷΈͰ࡞Δ͜ͱ͕Մೳ

7. REACT NATIVE EXPOͱ͸(2) ▸ σόοάʹ͸Expo Clientͱ͍͏ΞϓϦΛ֤ετΞ͔Βμ΢ϯϩʔυ ▸ ಉҰωοτϫʔΫ / ಉҰϩάΠϯΞΧ΢ϯτͰ࣮ߦՄೳ

   ▸ ΄ͱΜͲͷ୺຤ͰγʔϜϨεʹσόοΫՄೳ

8. REACT NATIVE EXPOͱ͸(3) ▸ Expo SnackͰWebϒϥ΢β্Ͱࢼ͢͜ͱ͕Մೳ ▸ ExpoΞΧ΢ϯτʹಉظͰ͖Δ ▸ γϛϡϨʔλ΋෇ଐͯ͠ΔͷͰϒϥ΢βͷΈͰ։ൃ͕Մೳ

9. REACT NATIVE EXPOͱ͸(4) ▸ ओཁͳػೳʹରԠ ▸ Χϝϥ ▸ Ի΍ಈըΛ࠶ੜ࿥ը(࿥Ի)ͨ͠ΓɺϝσΟΞϥΠϒϥϦ΁ͷΞΫηε ▸

   ֤छηϯαʔܥ ▸ ͳͲͳͲ ΄΅΄΅ͷΞϓϦ։ൃʹඞཁͳػೳʹରԠ

10. REACT NATIVE EXPOͱ͸(5) ▸ CodePushͷΑ͏ͳOTAΞοϓσʔτʹඪ४ରԠ ▸ config΋؀ڥ͝ͱʹ؆୯ʹઃఆՄೳ ▸ app.json΍release-channelΛϏϧυຖʹมߋՄೳ ▸

    ΞϓϦΛϏϧυ͢Δࡍͷূ໌ॻؔ࿈ΛExpoͰ؅ཧͯ͘͠ΕΔ EXPO.HOST —config app.development.json release-channel=development -config app.production.json —release-channel=production ɾiOS Distribution ɾAPNs iOS ɾiOS Development ɾAndroid KeyStore

11. REACT NATIVE EXPOͰߦ͏ΞϓϦͷ؆୯࠷଎ӡ༻ ExpoΛ࢖͏ϝϦοτ/σϝϦοτ

12. EXPOΛ࢖͏ϝϦοτ/σϝϦοτ(1) ʙϝϦοτʙ ▸ JSͷΈͳͷͰWebग़਎ͷΤϯδχΞ͕৮Γ΍͍͢ ▸ ͍͍ͪͪϏϧυ͢Δඞཁ͕ͳ͍ͷͰσόοά͕؆୯ ▸ ExpoଆͰίϯϙʔωϯτΛ։ൃͯ͘͠ΕͯΔͷͰϝϯςφϯε͕ෆඞཁ ▸ ΄΅΄΅ͷωΠςΟϒػೳʹରԠͯ͠Δ

    ▸ ίϯϑΟάͳͲ΋Ϗϧυ͢ΔࡍʹjsonϑΝΠϧΛࢦఆ͢Δ͚ͩ ▸ OTAΞοϓσʔτରԠͳͷͰਃ੥ෆཁͰߋ৽Մೳ ▸ ূ໌ॻؔ࿈ͷ؅ཧΛߦͬͯ͘ΕΔ ▸ React NativeຊମͷΞοϓσʔτΛͯ͘͠ΕΔ

13. EXPOΛ࢖͏ϝϦοτ/σϝϦοτ(2) ʙσϝϦοτʙ ▸ npmύοέʔδ͕JSͷΈͰॻ͔Ε͍ͯΔ΋ͷͰͳ͍ͱ࢖͑ͳ͍ ▸ ExpoͰऔΓࠐΜͰ͍ΔSDKͰͳ͍ͱ࢖͑ͳ͍ ▸ adjust΍ReproͳͲ ▸ firebase͸Web

    SDKͳͷͰϑϧػೳ͕࢖͑ͳ͍ ▸ ExpoͰ༻ҙ͍ͯ͠ͳ͍ػೳ͕࢖͑ͳ͍ ▸ BluetoothͳͲ ▸ Expoͷશͯͷίϯϙʔωϯτ͕όϯυϧʹؚ·Εͯ͠·͏ ▸ ৹ࠪ࣌ͷ޿ࠂؔ࿈ͷνΣοΫ ▸ ϑΝΠϧͷංେԽ ▸ ͍͟σλον͢ΔͱͳΔͱ͔ͳΓࠊ͕ॏ͘ͳͬͯ͠·͏ ▸ React NativeຊମͷΞοϓσʔτ͕஗͘ͳͬͯ͠·͏

14. EXPOΛ࢖͏ϝϦοτ/σϝϦοτ(3) ʙEXPOͷ࢖͍ॴʙ ▸ ExpoͰ༻ҙ͞Ε͍ͯΔ΋ͷͷΈͰ׬݁Ͱ͖Δ ▸ ޿ࠂͳͲϏδωεతͳཁ݅ͷҙࢥܾఆ͕Ͱ͖Δ͔Ͳ͏͔ ▸ εϐʔυΛ༏ઌͯ͠ϓϩτλΠϐϯάఔ౓ͷؾ࣋ͪΛ࣋ͭ ▸ ౰ͨͬͨΒνʔϜਓ਺૿΍ͯ͠ωΠςΟϒΛ࡞ΔΑ͏ʹ͢Δ

    ҰਓͰ։ൃ͢Δ͙Β͍ͷؾ࣋ͪͩͱΑ͍͔΋

15. REACT NATIVE EXPOͰߦ͏ΞϓϦͷ؆୯࠷଎ӡ༻ ։ൃӡ༻Λૉૣ͘؆୯ʹߦ͏ͨΊʹ

16. REACT NATIVE EXPOͰߦ͏ΞϓϦͷ؆୯࠷଎ӡ༻ ࣮ػ֬ೝͷखؒΛ͔͚ͳ͍Α͏ʹ͍ͨ͠ OTAΞοϓσʔτΛޮ཰Α͘࢖͍͍ͨ

17. REACT NATIVE EXPOͰߦ͏ΞϓϦͷ؆୯࠷଎ӡ༻ circleciͷಋೖ

18. CIRCLECIͷಋೖ(1) git push git merge dev prod develop master expo

    publish expo publish ֤branchʹϚʔδ͞ΕͨΒ OTAΞοϓσʔτ͞ΕΔ

19. CIRCLECIͷಋೖ(2) https://gist.github.com/watanabeyu/69c42b79800baa8691ac0447866a2252 ExpoͷΞΧ΢ϯτ໊/ύεϫʔυ͸CI্ʹอଘ

20. CIRCLECIͷಋೖ(3) https://gist.github.com/watanabeyu/69c42b79800baa8691ac0447866a2252 release-channel͓ΑͼconfigΛࢦఆ

21. CIRCLECIͷಋೖ(4) https://gist.github.com/watanabeyu/69c42b79800baa8691ac0447866a2252

22. CIRCLECIͷಋೖ(5) ΋͏গ͠ศརʹͳΒͳ͍͔ʁ PRຖʹExpoΫϥΠΞϯτͰΞϓϦͷ֬ೝ͕Ͱ͖Δͱศར

23. REACT NATIVE EXPOͰߦ͏ΞϓϦͷ؆୯࠷଎ӡ༻ expo-qr-notifyͷಋೖ

24. EXPO-QR-NOTIFYͷಋೖ(1) git push git merge dev prod dev prod expo

    publish expo publish publish࣌ʹ slackͱgithubʹ ௨஌ͯ͠΄͍͠ feature/xxx git merge

25. EXPO-QR-NOTIFYͷಋೖ(2) expo publish࣌ʹίϚϯυ࣮ߦͰ͖ΔͷΛར༻ͨ͠ύοέʔδ https://github.com/watanabeyu/expo-qr-notify/tree/master/example

26. EXPO-QR-NOTIFYͷಋೖ(3)

27. EXPO-QR-NOTIFYͷಋೖ(4)

28. EXPO-QR-NOTIFYͷಋೖ(5) release-channelΛcircleciͷ؀ڥม਺Ͱࢦఆ

29. EXPO-QR-NOTIFYͷಋೖ(6)

30. ·ͱΊ ▸ Expo͸։ൃ͢Δ্ͰϝϦοτ͕ଟ͍͠σϝϦοτ΋ଟ͍ ▸ ཁ݅ʹ౰ͯ͸·Δͱͱͯ΋؆୯ ▸ ϓϩτλΠϐϯάతͳײ͙֮Β͍ͷํ͕Α͍ ▸ ։ൃ͓Αͼӡ༻Λগ͠Ͱ΋ૉૣ͘؆୯ʹ͢ΔͨΊʹ͸ ▸

    circleciΛಋೖ͢ΔͱϒϥϯνຖʹOTAΞοϓσʔτͰ͖Δ ▸ expo-qr-notifyΛಋೖ͢Δ͜ͱͰ։ൃ࣌ʹPRຖʹ֬ೝͰ͖Δ

31. ͓ΘΓ