Hướng dẫn export file release cho ứng dụng React Native.

Đối với lập trình ứng dụng, công đoạn sau khi xây dựng chương trình cũng rất quan trọng đó là đóng gói sản phẩm, đưa sản phẩm lên kho ứng dụng (CH play store đối với ứng dụng Android, App store đối với ứng dụng IOS). Hôm nay mình sẽ hướng dẫn các bạn export file release cho ứng dụng RN.

I. Đối với Android

Bước 1: Tạo key store

Từ terminal, ta cd vào folder android/app chạy lệnh tạo keystore và làm theo hướng dẫn trên terminal

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

trong đó:

  • my-release-key.keystore là tên key store
  • my-key-alias tên key alias

Screen Shot 2018-10-12 at 2.03.49 PM.png

Điền password và làm theo hướng dẫn, sau khi thành công ta sẽ nhận được file *.keystore

Screen Shot 2018-10-12 at 2.05.04 PM

Bước 2: ở file android/gradle.properties thêm đoạn khai báo keystore ở cuối file trong đó tên, password là tên file và password mình đã tạo keystore.

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore 
MYAPP_RELEASE_KEY_ALIAS=my-key-alias 
MYAPP_RELEASE_STORE_PASSWORD=***** 
MYAPP_RELEASE_KEY_PASSWORD=*****

Bước 3: ở file android/app/build.gradle thêm đoạn config

...
android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                storeFile file(MYAPP_RELEASE_STORE_FILE)
                storePassword MYAPP_RELEASE_STORE_PASSWORD
                keyAlias MYAPP_RELEASE_KEY_ALIAS
                keyPassword MYAPP_RELEASE_KEY_PASSWORD
            }
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}
...

Bước 4: cd vào folder android chạy lên tạo file apk

./gradlew assembleRelease

Screen Shot 2018-10-12 at 2.16.00 PM.png

Sau khi thành công, trong thư mục android/app/build/apk sẽ có file *.apk cho ứng dụng của bạn, lấy file này có thể upload được lên play store.

Screen Shot 2018-10-12 at 2.18.41 PM.png

II. Đối với IOS

Đối với ứng dụng IOS thì việc đầu tiên bạn cần phải đưa được ứng dụng lên Testflight.

Để đưa được ứng dụng lên TF thì thứ nhất các bạn cần build app sao cho chạy không được có lỗi, thứ 2 cần 1 tài khoản developer apple.

Bước 1: Kiểm tra tên ứng dụng, id ứng dụng, tài khoản ứng dụng

Screen Shot 2018-10-12 at 2.39.11 PM.png

  • Ở phần identity, mỗi 1 version thì nó nhiều bản build, mỗi khi bạn archive thì cần tăng số bản build lên và mỗi khi release bản ios khác thì cần tăng version.
  • Ở Signing: bạn cần chọn vào team tài khoản của bạn đã đăng kí với apple.
  • Ở Deployment Info là 1 số cấu hình: hỗ trợ cho loại thiết bị nào, mục tiêu từ phiên bản ios bao nhiêu, có cho xoay màn hình hay không.

Bước 2: Bạn phải chắc chắn id app của bạn đã được đăng kí trên apple. Để kiểm tra có thể đăng nhập vào https://developer.apple.com/ xem.

Screen Shot 2018-10-12 at 2.46.18 PM.png

Sau khi đăng nhập, bạn vào certificates, Identifiers & Profile => chọn App IDs tìm xem id app của mình, nếu chưa thấy bạn có thể đăng kí 1 id khác (làm theo hướng dẫn trên websites)

Screen Shot 2018-10-12 at 2.47.54 PM.png

Bước 3: Sau khi kiểm tra các thông số ứng dụng, bạn cần đăng nhập vào https://appstoreconnect.apple.com/ để tạo ứng dụng.

Screen Shot 2018-10-12 at 2.49.22 PM.png

Tiếp theo, vào My Apps bạn sẽ thấy được tất cả các ứng dụng mà bạn đã upload lên từ trước.

Screen Shot 2018-10-12 at 2.50.53 PM.png

Tiếp theo click vào button + trên thanh công cụ, tạo ứng dụng mới cho mình

Screen Shot 2018-10-12 at 2.52.07 PM.png

Tiếp theo điền các thông số ứng dụng của mình bao gồm: Loại ứng dụng (IOS), tên ứng dụng, id ứng dụng và cuối cùng là 1 chuỗi định danh cho ứng dụng của bạn.

Screen Shot 2018-10-12 at 2.52.57 PM.png

Đặc biệt, bạn cần phải chọn Bundle ID ứng dụng của mình cho đúng, nếu không sẽ không đưa được ứng dụng lên store.

Screen Shot 2018-10-12 at 2.53.12 PM

Sau khi thành công, bạn click vào ứng dụng sẽ có thông tin ứng dụng của bạn, ở hình ảnh minh hoạ của mình đã điền đầy đủ thông tin. Nếu vào được đến đây là đã tạo thành công ứng dụng trên itune.

Screen Shot 2018-10-12 at 2.56.21 PM.png

Bước 4: Từ xcode, bạn cần chọn chế độ build release cho ứng dụng

Vào Product => Scheme => Edit Scheme và chọn chế độ build release

Screen Shot 2018-10-12 at 2.58.52 PM.png

Bước cuối cùng, vào Productoduct => Archive đợi build.

Sau khi build thành công, bạn chọn bản build của mình và upload lên store.

Screen Shot 2018-10-12 at 3.04.15 PM.png

Screen Shot 2018-10-12 at 3.05.10 PM.png

Tiếp tục cho đến khi thành công.

Sau khi báo thành công, bản kiểm tra trên itune connect, phần activity, nếu thấy có tiến trình đang lên hoặc ứng dụng của bạn hiện lên là thành công.

Screen Shot 2018-10-12 at 3.07.09 PM.png

Chúc các bạn thành công!

Nguồn:

React Native Doc

https://ntdung1128.wordpress.com/2018/10/12/huong-dan-export-file-release-cho-ung-dung-react-native/

 

 

Bài liên quan

Hướng dẫn tạo App Icon, Splash Screen cho ứng dụng React Native.

Đối với app mobile thì app icon hay màn hình splash rất quan trọng, nó giúp cho ứng dụng của chúng ta nhìn chuyên nghiệp hơn, đẹp hơn và dễ tiếp cận với người dùng hơn. Trong khi đó, App icon và màn hình splash cũng là 1 dạng để marketing cho ứng dụng của bạn. Trong bài hôm nay mình sẽ hướng dẫn các ...

Nguyễn Dũng viết 21:23 ngày 18/10/2018

Hướng dẫn export file release cho ứng dụng React Native.

Đối với lập trình ứng dụng, công đoạn sau khi xây dựng chương trình cũng rất quan trọng đó là đóng gói sản phẩm, đưa sản phẩm lên kho ứng dụng (CH play store đối với ứng dụng Android, App store đối với ứng dụng IOS). Hôm nay mình sẽ hướng dẫn các bạn export file release cho ứng dụng RN.

Nguyễn Dũng viết 15:53 ngày 12/10/2018

Tất tật tật các cách tối đa performace cho ứng dụng React

TỔNG QUAN Lúc còn mới tập tành code React file bundle của mình thường lên tới từ 1Mb đến 6Mb. Chạy lần đầu trên product chậm rì chậm rịt. Sau gần 1 năm dùng React thì bản thân cũng rút ra một số cách dùng để cải thiện performance. Bài viết này sẽ xoanh quanh vấn đề làm sao để ...

Hoàng Hải Đăng viết 12:36 ngày 08/10/2018

Hướng dẫn cài đặt push notification cho ứng dụng React Native (p2)

- Nối tiếp phần 1, ở phần 2 chúng ta cùng cài đặt cho ios

Nguyễn Dũng viết 23:23 ngày 05/10/2018

Giới thiệu về Onesignal, hướng dẫn cài đặt push notification cho ứng dụng React Native (p1)

Trong bài ta sẽ tìm hiểu Onesignal là gì, những tính năng mà Onesignal cung cấp và cài đặt push notification với React Native sử dụng Onesignal

Nguyễn Dũng viết 22:23 ngày 28/09/2018

Nguyễn Dũng

4 chủ đề

9 bài viết

+1