React Native
8
Yukiya Nakagawa
#DevFest17 @Nkzn
• @Nkzn /
• /
•
• React Native v0.17
• DroidKaigi 

2018 CfP 15
• React Native 4
3 CI/CD
•
JS
16% 22%
2% 60%
98%
React Native
• React
• JS
•
• /PoC
16% 22%
2% 60%
React Native
• React
• JS
•
• /PoC
16% 22%
2% 60%
16% 22%
2% 60%
16% 22%
2% 60%
• React Native JSer
• RN create-react-native-
app Expo
JSer
• JS React npm android/ ios/
• init
• Android
• iOS
•
• React
• JS Redux
• AltJS TypeScript FlowType
•
•
/
React Native
Agenda
•
1.Getting Started
2.applicationId/Bundle Identifier
3.
4.[Android] buildType
5.Fabric
6.Fabric
7.Fastlane
8.Fireba...
A
1. Getting Started
init
$ npm install -g react-native-cli
$ react-native init MyAwesomeApp
$ cd MyAwesomeApp
index.android.js
index.ios.js
• RN 



”Write Once, Run Anywhere”
•
src
src/index.js
import React, { Component } from 'react';
import { AppRegistry, Text, View, StyleSheet } from 'react-native';...
index.(android|ios).js
// index.android.js
import "./src";
// index.ios.js
import "./src";
•
• Flux, Redux
•
v0.49 Release Note
init
@v0.49
index.js
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('MyAwesomeApp'...
•
•
App.js src
src
•
• JSer React UI
2. applicationId &

Bundle Identifier
applicationId
Bundle Identifier
Bundle Identifier
init
android/app/build.gradle
android {
defaultConfig {
applicationId "com.myawesomeapp"
Xcode
init ID
•
• Android
ID
•
• applicationId Google Play
• Bundle Identifier AppStore
• com.[ ]
• iOS 

ID
•
•
info.nkzn.kitchentimer
• Android _ 

−
• iOS − 

_
• 

• ID
android/app/build.gradle
android {
defaultConfig {
applicationId "com.myawesomeapp"
Xcode
3.
is
android {

defaultConfig {

versionCode 1

versionName "1.0"
android/app/build.gradle
ios/MyAwesomeApp/Info.plist
•
•
• Android versionCode
• Semantic Versioning(vX.Y.Z)
• X(major) UI
• Y(minor)
• Z(patch)
• JS
•
•
• Git
• package.json version
•
versionCode
• Google Play versionCode
• 1,2,3…
• v1.1.3(100) 101
v1.1.4 v1.2.0
versionCode
def major = 2;

def minor = 1;

def patch = 3;



android {

defaultConfig {

versionName "${major}.${minor}.$...
def major = 2;

def minor = 1;

def patch = 3;

def build = 4;



android {

defaultConfig {

versionName "${major}.${mino...
“version”: “2.1.3-build4”
android {

defaultConfig {

versionName “2.1.3”

versionCode 2010304
node build.gradle Info.plist
4. buildType
Android
•
•
• applicationId
•
applicationId
android {

buildTypes {

debug {

applicationIdSuffix ".debug"

}
}
android/app/build.gradle
💪
App Icon
<resources>

<string name=“app_name”>[debug]MyAwesomeApp</string>

</resources>
android/app/src/debug/res/values/strings.x...
[debug] …
A
B
•
•
5. Fabric
Fabric
• https://get.fabric.io/
• Twitter
• Crashlytics
• Google Firebase
6. Fabric
•
• Google Play /
TestFlight
•
Beta
• Fabric
• Beta
• Fabric
←
• Android Studio Mac
7. Fastlane
• https://fastlane.tools/
• iOS/Android
• Google Play/iTunes
Connect
• CI GitLab CI
• Ruby 🤔
1. Git
2. CI Fastlane
3. Google Play/
iTunes Connect 🚀
4. 🎉
8. Firebase
• https://firebase.google.com/
•
AB
MBaaS
• React Native Firebase
•
•
B
○○
iOS
• iOS
• Schema Target
iOS CocoaPods
• CocoaPods iOS
• Google
•
• iOS
※
JS
•
•
• Sentry https://sentry.io/
RN
• Android SDK, Android Studio
• iOS SDK, Xcode
• npm
• Ruby (Fastlane )
• React Native JS
•
JS
React Native
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
Upcoming SlideShare
Loading in …5
×

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

13,876 views

Published on

2017年10月9日にGDG DevFest Tokyo 2017で発表した資料です。
https://tokyo.gdgjapan.org/

Published in: Technology
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×