React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
34 likes27,125 views
This document discusses React Native and best practices for building mobile apps. It covers getting started with React Native, setting the application ID and bundle identifier, versioning, build types, integrating Fabric and Firebase, and using Fastlane for deployment. Tips are provided for configuring Android and iOS projects as well as continuous integration/delivery best practices.
![Agenda
•
1.Getting Started
2.applicationId/Bundle Identifier
3.
4.[Android] buildType
5.Fabric
6.Fabric
7.Fastlane
8.Firebase](https://image.slidesharecdn.com/devfesttokyo2017-171009065157/85/React-Native-8-23-320.jpg)
![•
• applicationId Google Play
• Bundle Identifier AppStore
• com.[ ]
• iOS](https://image.slidesharecdn.com/devfesttokyo2017-171009065157/85/React-Native-8-51-320.jpg)
![<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>](https://image.slidesharecdn.com/devfesttokyo2017-171009065157/85/React-Native-8-76-320.jpg)
![[debug] …](https://image.slidesharecdn.com/devfesttokyo2017-171009065157/85/React-Native-8-77-320.jpg)
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
- 2. • @Nkzn / • / • • React Native v0.17 • DroidKaigi 2018 CfP 15
- 3. • React Native 4 3 CI/CD • JS
- 8. 98%
- 9. React Native • React • JS • • /PoC
- 10. 16% 22% 2% 60%
- 12. React Native • React • JS • • /PoC
- 15. 16% 22% 2% 60%
- 16. 16% 22% 2% 60%
- 17. 16% 22% 2% 60%
- 18. • React Native JSer • RN create-react-native- app Expo JSer • JS React npm android/ ios/
- 19. • init • Android • iOS
- 20. • • React • JS Redux • AltJS TypeScript FlowType • •
- 21. / React Native
- 23. Agenda • 1.Getting Started 2.applicationId/Bundle Identifier 3. 4.[Android] buildType 5.Fabric 6.Fabric 7.Fastlane 8.Firebase
- 24. A
- 26. init $ npm install -g react-native-cli $ react-native init MyAwesomeApp $ cd MyAwesomeApp
- 29. • RN ”Write Once, Run Anywhere” •
- 31. src
- 32. 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);
- 33. index.(android|ios).js // index.android.js import "./src"; // index.ios.js import "./src";
- 38. init @v0.49
- 39. index.js import { AppRegistry } from 'react-native'; import App from './App'; AppRegistry.registerComponent('MyAwesomeApp', () => App);
- 40. • • App.js src
- 41. src • • JSer React UI
- 42. 2. applicationId & Bundle Identifier
- 43. applicationId
- 44. Bundle Identifier
- 45. Bundle Identifier
- 46. init
- 47. android/app/build.gradle android { defaultConfig { applicationId "com.myawesomeapp"
- 48. Xcode
- 50. ID
- 51. • • applicationId Google Play • Bundle Identifier AppStore • com.[ ] • iOS
- 53. • Android _ − • iOS − _ •
- 55. • ID
- 57. android/app/build.gradle android { defaultConfig { applicationId "com.myawesomeapp"
- 58. Xcode
- 61. 3.
- 62. is
- 63. android { defaultConfig { versionCode 1 versionName "1.0" android/app/build.gradle ios/MyAwesomeApp/Info.plist
- 65. • Semantic Versioning(vX.Y.Z) • X(major) UI • Y(minor) • Z(patch)
- 66. • JS • • • Git • package.json version •
- 67. versionCode • Google Play versionCode • 1,2,3… • v1.1.3(100) 101 v1.1.4 v1.2.0
- 68. 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
- 69. 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
- 70. “version”: “2.1.3-build4” android { defaultConfig { versionName “2.1.3” versionCode 2010304 node build.gradle Info.plist
- 73. applicationId android { buildTypes { debug { applicationIdSuffix ".debug" } } android/app/build.gradle 💪
- 75. App Icon
- 77. [debug] …
- 78. A
- 79. B
- 80. • •
- 81. 5. Fabric
- 82. Fabric • https://get.fabric.io/ • Twitter • Crashlytics • Google Firebase
- 84. 6. Fabric
- 85. • • Google Play / TestFlight •
- 86. Beta • Fabric • Beta • Fabric ← • Android Studio Mac
- 87. 7. Fastlane
- 88. • https://fastlane.tools/ • iOS/Android • Google Play/iTunes Connect • CI GitLab CI • Ruby 🤔
- 89. 1. Git 2. CI Fastlane 3. Google Play/ iTunes Connect 🚀 4. 🎉
- 90. 8. Firebase
- 91. • https://firebase.google.com/ • AB MBaaS • React Native Firebase • •
- 92. B
- 93. ○○
- 94. iOS • iOS • Schema Target
- 95. iOS CocoaPods • CocoaPods iOS • Google • • iOS ※
- 98. • Android SDK, Android Studio • iOS SDK, Xcode • npm • Ruby (Fastlane )
- 99. • React Native JS •
- 100. JS React Native