Command Palette

Search for a command to run...

Đóng gói ứng dụng React Native: Hướng dẫn build APK, AAB Và IPA

Đóng gói ứng dụng React Native

Chúc mừng bạn đã đi đến những bước cuối cùng của cuộc hành trình!

Suốt thời gian qua, bạn đã chạy ứng dụng của mình thông qua Expo Go hoặc Development Build. Nhưng bạn không thể bảo người dùng của mình: "Hãy tải Expo Go về rồi quét mã QR của tôi để dùng app nhé".

Để người dùng có thể tải ứng dụng từ Google Play, Apple App Store, hoặc đơn giản là gửi file cài đặt qua Zalo cho bạn bè dùng thử, bạn phải thực hiện quá trình Đóng gói ứng dụng (Build App). Quá trình này sẽ dịch toàn bộ code JavaScript, hình ảnh, font chữ và các lõi Native thành một tệp tin duy nhất: APK/AAB (cho Android) và IPA (cho iOS).

Trong bài học này, chúng ta sẽ tận dụng sức mạnh của EAS Build để việc đóng gói trở nên dễ dàng hơn bao giờ hết, kể cả khi máy tính của bạn yếu hoặc bạn không hề có máy Mac!

1. EAS Build: "Đám mây ma thuật" của Lập trình viên

Trước đây, để build một ứng dụng React Native, bạn BẮT BUỘC phải có một chiếc máy tính cấu hình mạnh cài Android Studio (để build Android) và một chiếc Macbook cài Xcode (để build iOS). Việc cấu hình môi trường build local thường sinh ra hàng tá lỗi "đỏ lòm" cực kỳ ức chế.

EAS Build (Expo Application Services) ra đời để xóa sổ nỗi đau đó.

EAS Build (Expo Application Services)

Nó là một dịch vụ máy chủ đám mây. Bạn chỉ việc gõ một dòng lệnh, toàn bộ code của bạn sẽ được nén lại, gửi lên siêu máy tính của Expo. Siêu máy tính này sẽ tự động chạy Android Studio/Xcode, build ra file cài đặt và gửi lại đường link tải file cho bạn.

Nhờ EAS Build, bạn có thể code trên máy tính Windows và build ra file ứng dụng iOS (IPA) mà không cần bỏ tiền mua Macbook!

2. Chuẩn bị cấu hình: eas.json

Để EAS Build biết bạn muốn đóng gói ứng dụng để test nội bộ hay để đăng lên Store, chúng ta sử dụng file eas.json (được tự động tạo ra khi bạn chạy lệnh eas init ở những bài trước).

Hãy mở file eas.json và thiết lập 2 môi trường (profile) cơ bản nhất như sau:

{
  "build": {
    "preview": {
      "android": {
        "buildType": "apk"
      },
      "ios": {
        "simulator": true
      }
    },
    "production": {}
  }
}
  • Profile preview: Dành cho test nội bộ. Build ra file .apk để bạn bè cài trực tiếp vào máy Android, và build ra file chạy trên máy ảo iOS.
  • Profile production: Dành cho Store. Sẽ build ra các chuẩn cao nhất để nộp cho Google và Apple.

3. Đóng gói cho Android: Sự khác biệt giữa APK và AAB

Thế giới Android có 2 định dạng file cài đặt mà bạn phải phân biệt rõ:

Sự khác biệt giữa file APK và file AAB

  1. APK (Android Package Kit): Đây là file cài đặt trực tiếp. Bạn có thể chép file này vào thẻ nhớ, gửi qua Google Drive, Zalo và bấm cài đặt trên bất kỳ máy Android nào.
  2. AAB (Android App Bundle): Đây là chuẩn bắt buộc hiện nay nếu bạn muốn đưa app lên Google Play Store. AAB không thể cài trực tiếp vào điện thoại. Nó giống như một "kho phụ tùng". Khi người dùng ấn "Tải về" trên CH Play, Google sẽ tự nhặt các phụ tùng phù hợp với cấu hình máy của người đó để ghép thành file APK tối ưu nhất, giúp app nhẹ hơn rất nhiều.

Thực hành Build file APK (Để gửi cho bạn bè test)

Mở Terminal và chạy lệnh:

eas build --platform android --profile preview

Thực hành Build file AAB (Để đưa lên Google Play)

Mở Terminal và chạy lệnh:

eas build --platform android --profile production

Bí mật về Keystore: Để Android biết ai là chủ nhân đích thực của file AAB/APK này (tránh việc hacker làm giả app của bạn), ứng dụng phải được ký bằng một "chứng thư số" gọi là Android Keystore. Tuyệt vời thay, khi chạy lệnh EAS Build lần đầu, Expo sẽ hỏi: "Bạn có muốn chúng tôi tự động tạo và quản lý Keystore cho bạn không?". Bạn chỉ việc gõ Y (Yes) và EAS sẽ lo toàn bộ bảo mật cho bạn!

4. Đóng gói cho iOS: Vượt qua "cửa ải" của Apple

Việc build ứng dụng iOS (file .IPA) phức tạp hơn Android rất nhiều do chính sách bảo mật khép kín của Apple.

IPA file

Điều kiện tiên quyết: Bạn BẮT BUỘC phải mua tài khoản Apple Developer (Giá 99$/năm). Nếu không có tài khoản này, bạn sẽ không thể tạo file IPA để cài lên điện thoại iPhone thật.

Nếu đã có tài khoản, hãy chạy lệnh sau:

eas build --platform ios --profile production

Certificates & Provisioning Profiles

Nếu làm theo cách truyền thống bằng Xcode, bạn sẽ phải lên trang web của Apple, tự tay tạo Certificate, tải file Provisioning Profile, liên kết các thiết bị (Device IDs)... cực kỳ phức tạp và dễ hết hạn.

Với EAS Build, khi bạn chạy lệnh trên, hệ thống sẽ yêu cầu bạn đăng nhập tài khoản Apple ID trên Terminal. Sau đó, EAS sẽ tự động giao tiếp với máy chủ Apple, tự động tạo chứng chỉ, tự động ký tên vào app của bạn! Việc của bạn chỉ là ngồi nhâm nhi ly cà phê chờ tệp .ipa ra lò.

5. Tải về & Trải nghiệm thành quả

Sau khi lệnh build chạy xong (khoảng 10-15 phút tùy độ lớn của dự án), Terminal của bạn sẽ hiển thị một đường link và một mã QR.

  • Với Android (APK): Bạn chỉ cần dùng điện thoại Android quét mã QR, tải file .apk về và bấm "Cài đặt". Đừng quên bật tùy chọn "Cho phép cài đặt ứng dụng từ nguồn không xác định" trong Cài đặt của điện thoại nhé!
  • Với iOS / Android AAB: Bạn bấm vào đường link để tải file .ipa hoặc .aab về máy tính, chuẩn bị cho bước nộp lên Store.

Kết luận: Build app giờ đã không còn phức tạp

Quá trình đóng gói ứng dụng giờ đây chỉ gói gọn trong 2 chữ: EAS Build.

  • Lệnh eas build -p android --profile preview cho ra tệp APK cài ngay lập tức.
  • Lệnh eas build -p android cho ra tệp AAB chuẩn Google Play.
  • Lệnh eas build -p ios cho ra tệp IPA chuẩn App Store mà không cần dùng đến Macbook.
  • Hệ thống tự động quản lý toàn bộ Keystore và Chứng chỉ (Certificates) phức tạp.

Cầm trên tay tệp tin cài đặt của chính mình, bạn đã sẵn sàng chia sẻ tác phẩm đến toàn thế giới chưa? Hãy cùng chuẩn bị hồ sơ, hình ảnh và metadata để tiến vào Bài 27: Đưa Ứng Dụng Lên Store – Chinh phục Google Play & Apple App Store (TestFlight)!

Bài viết liên quan

Cách gọi API trong React Native: Hướng dẫn Fetch Data và xử lý JSON

Hướng dẫn chi tiết cách gọi API trong React Native. Nắm vững kỹ thuật sử dụng fetch, axios kết hợp với useEffect, useState để tải và hiển thị dữ liệu server mượt mà.

Animation trong React Native: Hướng dẫn toàn tập Reanimated 3

Hướng dẫn cách khắc phục lỗi giật lag UI bằng React Native Reanimated 3. Khám phá bí quyết tạo animation mượt mà 60fps với useSharedValue và withSpring.

Hướng dẫn cách dùng React Native Maps: Hiển thị bản đồ & Lấy tọa độ GPS

Hướng dẫn hiển thị bản đồ trong React Native bằng thư viện react-native-maps. Tìm hiểu cách ghim vị trí (Marker) và tích hợp GPS theo thời gian thực.

Event Handling trong React Native: Sự khác biệt giữa Pressable và TouchableOpacity

Hướng dẫn cách bắt sự kiện chạm, nhấn trong React Native. Tìm hiểu vì sao không nên dùng thẻ Button và cách thay thế bằng Pressable, TouchableOpacity.