Build and Upload app to store with Expo
React Native เป็น framework ที่ใช้ในการสร้าง mobile application ซึ่งจะมีวิธีขึ้น project อยู่สองแบบ คือ ขึ้นด้วย react-native-cli หรือ ขึ้นด้วย expo-cli
ในที่นี้เราจะกล่าวถึง project ที่ขึ้นด้วย expo-cli
Initial Project
run คำสั่ง ใน terminal
expo init rn-expo # rn-expo เป็นชื่อ directoryจากนั้นก็จะมีให้เลือก template กับกรอก app name เราก็เลือกให้เรียบร้อย
ต่อไปก็รอมัน run script จนเสร็จ
จากนี้ไปผมขอกล่าวในส่วน build and deploy ของ android ก่อนนะครับ
Build App (Android)
Signup and login expo account ในเว็บ https://expo.io/
จากนั้นแก้ไฟล์ app.json เป็น
{
"expo": {
"name": "RN Expo",
"slug": "rn-expo",
"privacy": "public",
"sdkVersion": "34.0.0",
"platforms": [
"ios",
"android",
"web"
],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true,
},
"android": {
"package": "com.mymymymy.rnexpo"
}
}
}เพิ่ม package name เข้าไป
เมื่อ setup เรียบร้อยแล้ว
run คำสั่งใน terminal
expo login # login ด้วย account ที่เราจะฝาก app ไว้นะครับrun คำสั่งใน terminal ที่อยู่ใน directory ของ project
expo build:android # build apkหรือ
expo build:android -t app-bundle # build aab ซึ่งขนาดไฟล์เล็กกว่าในการ run ครั้งแรกจะมี option ถามประมาณว่าจะให้ expo สร้างและจัดการ key ให้ หรือเราจะสร้างและจัดการ key เอง ก็แล้วแต่เรานะ
key นี้เอาไว้เป็นระบุตัวตนของ app ถ้าใครไม่เขัาใจก็ให้ expo จัดการไปละกันนะครับ
จากนั้นก็รอมัน run script จนเสร็จ
ถ้ามัน build เสร็จ เราจะเห็น project ของเราบนเว็บ https://expo.io/
Upload App to Play Store (Android)
อันดับแรกต้องสมัครที่เว็บ https://play.google.com/apps/publish/ เพื่อเอา app ขึ้น play store โดยมีค่าใช้จ่าย 25$ ต่อ account ใช้ได้ตลอดชีพ (ราคาไม่แน่ใจนะ)
จากนั้นก็ทำตาม link นี้ https://docs.expo.io/versions/v34.0.0/distribution/uploading-apps/#21-if-you-choose-to-upload-your
ตั้งแต่ขั้นตอนที่ 1 ถึง 8 เลย มันจะเป็นขั้นตอนในการสร้าง api key เพื่อให้ expo สามารถ upload app ขึ้น store ได้ แต่การเอา app ขึ้น store ครั้งแรกต้อง upload แบบ manual ก่อน เพื่อให้ store รู้จัก package name ก่อน (package name คือ ตรงที่เราใส่ใน app.json ในขั้นตอน build นั่นเอง)
พอทำขั้นตอน 1- 8 เสร็จเราจะได้ json file มาอันหนึ่ง เดี๋ยวเราจะใช้ต่อในการ upload ด้วย expo cli นะครับ
จากนั้นเราก็จะ run คำสั่งใน terminal ที่ directory ของ project ดังนี้
expo upload:android --key ./api-key.json #upload apk ขึ้น storeแต่ปัญหาของ command นี้ คือ upload ได้แต่ .apk ไม่สามารถ upload .aab ได้นะครับ
ถ้าเป็น .aab ต้อง upload แบบ manual เอาเองนะครับ
มาถึงตาของ iOS กันบ้าง
Build App (iOS)
แก้ไฟล์ app.json เป็น
{
"expo": {
"name": "RN Expo",
"slug": "rn-expo",
"privacy": "public",
"sdkVersion": "34.0.0",
"platforms": [
"ios",
"android",
"web"
],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "com.mymymymy.rnexpo"
},
"android": {
"package": "com.mymymymy.rnexpo"
}
}
}โดยเพิ่ม bundleIdentifier เข้าไป
ก่อนจะ build คือ เราต้องสมัครเป็น apple developer ก่อน ที่ http://developer.apple.com หรือเป็นสมาชิกทีม developer หนึ่งๆ ก่อน (ถ้าสมัครเองก็มีค่าธรรมเนียมเป็นรายปีนะ แพงอยู่)
เมื่อเรามี account apple developer เรียบร้อยแล้วก็มา run คำสั่ง build กัน
expo build:iosพอ run เสร็จมันจะถามให้เราใส่ apple id ที่เป็น apple developer แล้วนะ
เราก็ใส่ email password พอผ่านตรงนี้ไป ก็จะถามว่าให้ expo จัดการเรื่อง certificate หรือ เราจะจัดการเอง
ถ้าให้ expo จัดการก็คือ ให้ expo สร้าง certificate ให้
ถ้าเราจัดการเอง เราจะต้องสร้าง certificate ขึ้นมาเอง แล้ว upload ให้ expo จัดการต่อไป
ปกติผมจะเลือกให้ expo จัดการให้นะ มีอยู่ 3 ตัวก็ให้ expo จัดการทั้งหมดเลย
(3 ตัวที่ว่ามี distribution, profiling, push notification key)
ถ้าตอบเรื่องพวกนี้จบ ก็รอมัน build สำเร็จ ซึ่งจะได้ .ipa อยู่บน https://expo.io/
Upload App to Apple Store (iOS)
run คำสั่ง upload
expo upload:iosมันจะให้ใส่ apple id ก็คือกรอก email password เหมือนตอน build app เลย
แล้วก็ให้เลือกว่าจะใช้ store ของ account ไหน (ถ้ามีหลาย account นะ)
จากนั้นก็รอจน upload สำเร็จ
แต่จะมีกรณีที่ upload app แรกของ account ซึ่งยังไม่ได้ตั้ง company name ก็จะติดเรื่องนี้อยู่
วิธีแก้ คือ เราต้องไป create new app ใน https://appstoreconnect.apple.com
ซึ่งจะมี form ให้กรอกข้อมูลของ app ที่เราจะเอาขึ้น โดย company name จะถามแค่ครั้งเดียวตอนสร้าง app แรก (app ที่สอง ที่สามไม่ถามแล้วนะ) ถ้าจะเปลี่ยนต้องแจ้ง apple support น่าจะใช้เวลาพอสมควร
ถ้าแก้แล้วก็ run upload ใหม่ได้เลย
นี่แค่จะเอา app ขึ้น store ยังยาวขนาดนี้เลย แต่ยังไม่ได้ release app เลยนะ
กว่าจะ release ได้ ต้องข้อมูลต่างๆ เช่น ชื่อแอพ คำอธิบาย ราคา screenshot rating ว่าเหมาะกับคนอายุเท่าไร
และจะมีการ review ก่อนเผยแพร่แอพ ก็ใช้เวลาเป็นสัปดาห์เป็นอย่างน้อยนะครับ
ใครจะทำ mobile application ก็เผื่อเวลา review และแก้ไขกันหน่อยนะครับ :) Bye !!!
