Build và xuất bản React Native lên Store với Expo

Sau nhiều ngày vật lộn với cơm áo gạo tiền thì tôi đã quay lại để hoàn thành nốt seri React Native với Expo cho anh em đây ^^

Ở bài trước tôi đã hướng đẫn cách cài đặt môi trường, Expo SDK, tạo dự án và khởi chạy chúng. Trong bất cứ dự án nào cũng sẽ có ít nhất là 2 môi trường là: Development environment (môi trường phát triển) và Production environment (Môi trường thật cho end user), nên bài viết này sẽ hướng dẫn làm thế nào để có thể build (đóng gói) ứng dụng React Native với Expo public lên Google Play Store và Apple Store.

Dành cho anh em nào chưa biết về Expo thì có thể xem lại bài viết trước tại đây nhé.

Cấu hình build trong dự án React Native

Trong dự án React Native với Expo có một file app.json để chúng ta cấu hình tất tần tật thông tin, app icon, hình ảnh, Android/iOS build config,… và sử dụng như thế nào thì mình sẽ đi vào chi tiết ngay bên dưới.

{
  "expo": {
    "name": "Demo Expo",
    "slug": "demoExpo",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "scheme": "demo-expo",
    "userInterfaceStyle": "automatic",
    "plugins": [
      [
        "expo-notifications",
        {
          "icon": "./assets/images/notification-icon.png",
          "color": "#ffffff",
          "sounds": ["./assets/sound/notification-sound.wav"]
        }
      ]
    ],
    "splash": {
      "image": "./assets/images/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.app.demo-expo",
      "buildNumber": "17"
    },
    "android": {
      "package": "com.app.demo-expo",
      "versionCode": 11,
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "googleServicesFile": "./google-services.json",
      "useNextNotificationsApi": true
    }
  }
}

Ở đây tôi chỉ giải thích một vài config quan trọng, anh em nào muốn xem thêm thì có thể xem tại đây nhé.

• name (string) Tên của ứng dụng sẽ được hiển thị trong ứng dụng Expo Go và cả khi xuất bản ứng dụng.
• slug (string) Đường dẫn để truy cập vào ứng dụng của bạn khi xuất bản. ví dụ: slug là demoExpo thì đường dẫn truy cập trên Expo sẽ có dạng expo.dev/@project-owner/demoExpo.
• orientation (enum) Khóa màn hình ứng dụng theo chiều ngang hay dọc, mặc định sẽ là không khóa và tự động thay đổi theo hướng điện thoại. default, portrait, landscape
• icon (string) Ảnh của ứng dụng, kích thước khuyến nghị là 1024×1024 ở định dạng png
• scheme (string) Đường dẫn độc lập điều hướng đến ứng dụng của bạn, nó chính là deep link. như ví dụ ở trên thì nó sẽ có dạng: demo-expo://URL.
• plugins (array) Thêm các tiện ích bổ xung cho dự án.
• splash (object) Định nghĩa màn hình khởi chạy ứng dụng (Splash screen).
• ios (object) Thiết lập dành cho ứng dụng iOS.
• android (object) Thiết lập dành cho ứng dụng Android.

Tạo tài khoản Expo DEV

Như thường lệ thì khi build ứng dụng sẽ dùng trực tiếp máy local để build luôn thế nên sức mạnh phần cứng của máy đang dùng sẽ ảnh hưởng trực tiếp tới tốc độ build. Nhưng với Expo khi lệnh build được gọi sẽ đẩy lên package cloud và quá trình build sẽ được thực hiện trên đó việc của bạn là đợi và đợi mà thôi.

Để theo dõi và build được thì bạn cần có một tài khoản developer của Expo tại đây.

Build và public lên store

Để build ứng dụng Expo sử dụng EAS CLI, chạy lệnh sau để cài đặt:

npm install -g eas-cli

Tiếp theo là đăng nhập Expo Account để định danh khi build, chạy lệnh:

eas login

Để build ứng dụng Android, chạy lệnh sau:

eas build --platform android

Và với ứng dụng iOS, chạy lệnh sau:

eas build --platform ios

Việc làm bây giờ chỉ là đợi cho quá trình build hoàn tất, bạn có thể theo dõi quá trình build trên trang expo.dev

Sau khi build xong thì chúng ta sẽ tải file .aab (đối với ứng dụng Android) và .ipa (đối với ứng dụng iOS) rồi thực hiện các bước xác minh tài khoản developer trên Google play console và Apple developer

Expo có tính năng tự động tải lên store với EAS Submit các bạn có thể đọc thêm và cấu hình chi tiết tại đây nhé.

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