Successfully reported this slideshow.
Your SlideShare is downloading. ×

React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み

  1. 1. React Native 8 Yukiya Nakagawa #DevFest17 @Nkzn
  2. 2. • @Nkzn / • / • • React Native v0.17 • DroidKaigi 
 2018 CfP 15
  3. 3. • React Native 4 3 CI/CD • JS
  4. 4. 16% 22% 2% 60%
  5. 5. 98%
  6. 6. React Native • React • JS • • /PoC
  7. 7. 16% 22% 2% 60%
  8. 8. React Native • React • JS • • /PoC
  9. 9. 16% 22% 2% 60%
  10. 10. 16% 22% 2% 60%
  11. 11. 16% 22% 2% 60%
  12. 12. • React Native JSer • RN create-react-native- app Expo JSer • JS React npm android/ ios/
  13. 13. • init • Android • iOS
  14. 14. • • React • JS Redux • AltJS TypeScript FlowType • •
  15. 15. / React Native
  16. 16. Agenda • 1.Getting Started 2.applicationId/Bundle Identifier 3. 4.[Android] buildType 5.Fabric 6.Fabric 7.Fastlane 8.Firebase
  17. 17. A
  18. 18. 1. Getting Started
  19. 19. init $ npm install -g react-native-cli $ react-native init MyAwesomeApp $ cd MyAwesomeApp
  20. 20. index.android.js index.ios.js
  21. 21. • RN 
 
 ”Write Once, Run Anywhere” •
  22. 22. src
  23. 23. src/index.js import React, { Component } from 'react'; import { AppRegistry, Text, View, StyleSheet } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.container}> <Text style={styles.center}> Hello, World! </Text> </View> ); } } const styles = {/* */}; AppRegistry.registerComponent('MyAwesomeApp', () => App);
  24. 24. index.(android|ios).js // index.android.js import "./src"; // index.ios.js import "./src";
  25. 25. • • Flux, Redux •
  26. 26. v0.49 Release Note
  27. 27. init @v0.49
  28. 28. index.js import { AppRegistry } from 'react-native'; import App from './App'; AppRegistry.registerComponent('MyAwesomeApp', () => App);
  29. 29. • • App.js src
  30. 30. src • • JSer React UI
  31. 31. 2. applicationId &
 Bundle Identifier
  32. 32. applicationId
  33. 33. Bundle Identifier
  34. 34. Bundle Identifier
  35. 35. init
  36. 36. android/app/build.gradle android { defaultConfig { applicationId "com.myawesomeapp"
  37. 37. Xcode
  38. 38. init ID • • Android
  39. 39. ID
  40. 40. • • applicationId Google Play • Bundle Identifier AppStore • com.[ ] • iOS 

  41. 41. ID • • info.nkzn.kitchentimer
  42. 42. • Android _ 
 − • iOS − 
 _ • 

  43. 43. • ID
  44. 44. android/app/build.gradle android { defaultConfig { applicationId "com.myawesomeapp"
  45. 45. Xcode
  46. 46. 3.
  47. 47. is
  48. 48. android {
 defaultConfig {
 versionCode 1
 versionName "1.0" android/app/build.gradle ios/MyAwesomeApp/Info.plist
  49. 49. • • • Android versionCode
  50. 50. • Semantic Versioning(vX.Y.Z) • X(major) UI • Y(minor) • Z(patch)
  51. 51. • JS • • • Git • package.json version •
  52. 52. versionCode • Google Play versionCode • 1,2,3… • v1.1.3(100) 101 v1.1.4 v1.2.0
  53. 53. versionCode def major = 2;
 def minor = 1;
 def patch = 3;
 
 android {
 defaultConfig {
 versionName "${major}.${minor}.${patch}" // 2.1.3
 versionCode major * 10000 + minor * 100 + patch * 1 // 20103 android/app/build.gradle • • Google Play 

  54. 54. def major = 2;
 def minor = 1;
 def patch = 3;
 def build = 4;
 
 android {
 defaultConfig {
 versionName "${major}.${minor}.${patch}" // 2.1.3
 versionCode major * 1000000 + minor * 10000 + patch * 100 + build // 2010304
  55. 55. “version”: “2.1.3-build4” android {
 defaultConfig {
 versionName “2.1.3”
 versionCode 2010304 node build.gradle Info.plist
  56. 56. 4. buildType Android
  57. 57. • • • applicationId •
  58. 58. applicationId android {
 buildTypes {
 debug {
 applicationIdSuffix ".debug"
 } } android/app/build.gradle 💪
  59. 59. App Icon
  60. 60. <resources>
 <string name=“app_name”>[debug]MyAwesomeApp</string>
 </resources> android/app/src/debug/res/values/strings.xml android/app/src/release/res/values/strings.xml <resources>
 <string name=“app_name”>MyAwesomeApp</string>
 </resources>
  61. 61. [debug] …
  62. 62. A
  63. 63. B
  64. 64. • •
  65. 65. 5. Fabric
  66. 66. Fabric • https://get.fabric.io/ • Twitter • Crashlytics • Google Firebase
  67. 67. 6. Fabric
  68. 68. • • Google Play / TestFlight •
  69. 69. Beta • Fabric • Beta • Fabric ← • Android Studio Mac
  70. 70. 7. Fastlane
  71. 71. • https://fastlane.tools/ • iOS/Android • Google Play/iTunes Connect • CI GitLab CI • Ruby 🤔
  72. 72. 1. Git 2. CI Fastlane 3. Google Play/ iTunes Connect 🚀 4. 🎉
  73. 73. 8. Firebase
  74. 74. • https://firebase.google.com/ • AB MBaaS • React Native Firebase • •
  75. 75. B
  76. 76. ○○
  77. 77. iOS • iOS • Schema Target
  78. 78. iOS CocoaPods • CocoaPods iOS • Google • • iOS ※
  79. 79. JS • • • Sentry https://sentry.io/ RN
  80. 80. • Android SDK, Android Studio • iOS SDK, Xcode • npm • Ruby (Fastlane )
  81. 81. • React Native JS •
  82. 82. JS React Native

×