Suốt các bài học vừa qua, chúng ta đã tung hô Expo Go như một phép màu. Chỉ cần quét mã QR, ứng dụng của bạn chạy ngay lập tức mà không cần cài đặt Android Studio hay Xcode.
Tuy nhiên, khi dự án của bạn bắt đầu phức tạp lên, bạn nhận được yêu cầu: "Hãy tích hợp thanh toán ZaloPay/MoMo" hoặc "Hãy cài thư viện MMKV để tối ưu tốc độ". Bạn hăm hở gõ lệnh npm install, nhưng khi mở app lên... Màn hình đỏ chót, ứng dụng văng tung tóe (Crash)!
Chuyện gì đã xảy ra? Chào mừng bạn đến với bức tường giới hạn của Expo Go. Hôm nay, chúng ta sẽ đập tan bức tường đó bằng công nghệ kiến trúc hiện đại nhất: Continuous Native Generation (CNG) và Development Build.
1. Sự thật phũ phàng về "cái vỏ" Expo Go
Để giải quyết vấn đề, bạn cần hiểu bản chất của ứng dụng Expo Go mà bạn tải từ App Store/Google Play.
Expo Go thực chất là một ứng dụng đã được biên dịch sẵn (pre-compiled). Đội ngũ Expo đã gói ghém hàng trăm thư viện phổ biến (như expo-camera, expo-location, react-native-maps) và nhét sẵn mã nguồn Native (C++, Java, Swift) của chúng vào trong cái vỏ này.
- Khi bạn viết code JavaScript, Expo Go chỉ việc đọc và kích hoạt các tính năng Native đã có sẵn đó.
- Điểm chết: Khi bạn cài một thư viện của bên thứ ba (như ZaloPay) có chứa mã nguồn Native riêng của nó, Expo Go hoàn toàn "mù tịt". Nó không có sẵn mã C++/Java của ZaloPay trong bụng, nên nó không thể chạy được và lập tức báo lỗi.
Trước đây, để cài các thư viện này, lập trình viên phải dùng lệnh expo eject – một cơn ác mộng thực sự vì nó phá nát cấu trúc Expo, nhả ra hai thư mục android và ios khổng lồ, bắt bạn tự cấu hình bằng tay.
2. Lời giải bằng kiến trúc CNG (Continuous Native Generation)
Expo đã lắng nghe nỗi đau đó và khai tử lệnh eject. Thay vào đó, họ tạo ra một cuộc cách mạng mang tên CNG (Continuous Native Generation - Khởi tạo Native liên tục).
Triết lý của CNG là: Bạn không bao giờ cần lưu trữ hay chạm tay vào thư mục android và ios nữa.
Thay vào đó, bạn chỉ cần cấu hình mọi thứ (như quyền camera, icon, màu sắc, API Key) thông qua các file plugin nằm gọn trong app.json.
Mỗi khi bạn cần build app, một hệ thống gọi là Prebuild sẽ tự động đọc app.json, kết hợp với các thư viện bạn đã cài, và "đẻ" ra hai thư mục android và ios hoàn chỉnh chỉ trong vài giây.
Code của bạn sạch sẽ 100% JavaScript. Quá trình cấu hình Native được tự động hóa hoàn toàn!
3. Development Build: Phiên bản "Expo Go của riêng bạn"
Nếu không dùng được Expo Go nữa, chúng ta lấy gì để quét mã QR và trải nghiệm tính năng Fast Refresh (lưu code là tự tải lại màn hình)?
Câu trả lời là: Chúng ta sẽ tự tạo ra một ứng dụng giống hệt Expo Go, nhưng bên trong "bụng" của nó có chứa sẵn thư viện Native mà bạn vừa cài (ví dụ: ZaloPay hay MMKV). Ứng dụng tự chế này được gọi là Development Build (hay Dev Client).
Bước 1: Cài đặt thư viện cốt lõi
Hãy mở Terminal và chạy lệnh cài đặt thư viện quản lý Dev Client:
npx expo install expo-dev-client
Bước 2: Biên dịch ứng dụng (Build App)
Để tạo ra Development Build, bạn có 2 cách:
Cách 1: Build trực tiếp trên máy tính của bạn (Local Build)
Nếu bạn dùng Windows (đã cài Android Studio) hoặc dùng Mac (đã cài Xcode), bạn có thể tự build ứng dụng để chạy thẳng lên máy ảo/điện thoại cắm cáp.
- Cho Android:
npx expo run:android - Cho iOS:
npx expo run:ios(Bắt buộc phải có máy Mac)
Khi chạy lệnh này, tính năng Prebuild sẽ âm thầm tạo ra thư mục android/ios, sau đó tự động chèn thư viện Native vào và đóng gói thành app.
Cách 2: Build trên đám mây với EAS (Nếu máy tính của bạn yếu hoặc không có Mac)
Bạn sử dụng công cụ EAS Build. Cấu hình file eas.json của bạn như sau:
{
"build": {
"development": {
"developmentClient": true,
"distribution": "internal"
}
}
}
Sau đó chạy lệnh:
eas build --profile development --platform android
Hệ thống sẽ build app trên máy chủ của Expo. Khi xong, nó trả về cho bạn một mã QR. Bạn dùng điện thoại quét mã này để tải ứng dụng Dev Build về máy.
Bước 3: Tận hưởng thành quả
Bây giờ, thay vì mở ứng dụng Expo Go cũ kỹ, bạn mở ứng dụng Dev Build (có tên và icon do chính bạn thiết kế) vừa tải về. Tiếp theo, bạn vẫn chạy lệnh quen thuộc trên máy tính:
npx expo start
Và bùm! Điện thoại của bạn kết nối thành công. Tính năng Fast Refresh vẫn hoạt động mượt mà, nhưng giờ đây ứng dụng của bạn đã mang sức mạnh không giới hạn, có thể chạy MỌI thư viện Native trên đời!
Kết luận: Vòng đời của một dự án chuyên nghiệp
Sự chuyển mình từ người mới học sang lập trình viên chuyên nghiệp với Expo được tóm tắt qua quy trình sau:
- Bắt đầu dự án: Dùng Expo Go cho nhanh, gọn, nhẹ để thiết kế UI, chuyển trang, gọi API.
- Cần sức mạnh Native: Khi dự án cần thư viện chứa mã C++/Swift/Java (Thanh toán, MMKV, Bluetooth), cài đặt
expo-dev-client. - Thoát ly Expo Go: Chạy lệnh build để tạo ra bản Development Build. Xóa app Expo Go khỏi điện thoại.
- Bảo trì: Không bao giờ đưa thư mục
androidvàioslên GitHub. Hãy để Prebuild (CNG) tự động sinh ra chúng mỗi khi cần.
Giờ đây, khi bức tường rào cuối cùng đã bị phá vỡ, ứng dụng của bạn không còn chịu bất kỳ sự thua kém nào so với các ứng dụng viết bằng Java/Swift thuần túy.
Nhưng nếu có một tính năng phần cứng quá đặc thù (ví dụ: giao tiếp với một cái máy in bill nội bộ của công ty) mà trên mạng CHƯA AI viết thư viện cho React Native thì sao? Đừng lo, Expo lại có cách! Hẹn gặp bạn ở bài học tiếp theo!
