EAS Update trong Expo: Cập nhật ứng dụng React Native bỏ qua Store

Hãy tưởng tượng một cơn ác mộng: Ứng dụng của bạn vừa được duyệt lên App Store và Google Play sau nhiều ngày chờ đợi. Hàng ngàn người dùng bắt đầu tải về. Bỗng nhiên, bạn phát hiện ra một lỗi "chết người" ở màn hình Đăng nhập khiến không ai có thể vào được app.

Theo cách truyền thống, bạn phải sửa code, đóng gói lại ứng dụng, gửi lên Store và... tiếp tục ngồi cầu nguyện chờ Apple/Google kiểm duyệt mất từ 1 đến 3 ngày. Trong 3 ngày đó, người dùng sẽ đánh giá ứng dụng của bạn 1 sao và xóa app không thương tiếc.

Nhưng với React Native và EAS Update, bạn có thể sửa lỗi đó và đẩy bản vá thẳng xuống điện thoại của người dùng chỉ trong vòng 3 phút. Bài viết này sẽ hướng dẫn bạn làm chủ công nghệ Over-The-Air (OTA) đầy quyền năng này!

1. OTA Update là gì? Khác biệt giữa Code Native và Code JS

Để hiểu được phép màu này, chúng ta cần nhớ lại bản chất của một ứng dụng React Native. Ứng dụng của bạn được chia làm 2 phần:

1. Phần Native: (Lõi hệ điều hành) Chứa các mã nguồn C++, Java, Swift để biên dịch ra cấu trúc app cốt lõi. Phần này quản lý phần cứng như Camera, GPS, Bluetooth...
2. Phần JavaScript Bundle: (Giao diện & Logic) Chứa các file .tsx, .js, ảnh tĩnh, và logic hoạt động mà bạn đã code suốt thời gian qua.

Khi bạn cập nhật ứng dụng qua Store, bạn đang thay thế TOÀN BỘ ứng dụng (cả lõi Native lẫn phần JS). Việc này cần sự kiểm duyệt gắt gao của Apple và Google.

OTA Update là công nghệ cho phép bạn "lách luật" một cách hợp lệ: Bạn giữ nguyên cái vỏ Native cũ, và chỉ tải ngầm một bản cập nhật của phần JavaScript Bundle mới từ máy chủ xuống điện thoại người dùng.

• Kết quả: Ngay lần tiếp theo người dùng mở app, ứng dụng sẽ chạy đoạn code mới nhất. Lỗi được khắc phục tức thì mà họ không hề hay biết!

(Ghi chú lịch sử: Trước đây, cộng đồng thường dùng Microsoft CodePush để làm việc này. Tuy nhiên, CodePush hiện đã ngừng phát triển, và EAS Update chính thức trở thành "vị vua" mới, tích hợp sâu và hoàn hảo nhất cho Expo).

2. Ranh giới của "phép màu": Khi nào không thể dùng OTA?

OTA Update cực kỳ mạnh mẽ, nhưng nó không phải là vạn năng. Hãy khắc cốt ghi tâm quy tắc sau để tránh làm hỏng ứng dụng:

✅ NHỮNG GÌ BẠN ĐƯỢC PHÉP CẬP NHẬT QUA EAS UPDATE:

• Sửa lỗi sai chính tả, thay đổi màu sắc giao diện (CSS/StyleSheet).
• Thay đổi luồng điều hướng (Sửa React Router).
• Thay đổi logic tính toán, sửa bug gọi API, thay đổi nội dung chữ.
• Thêm/Bớt các Component giao diện (như <View>, <Text>, <FlatList>).
• Thêm các thư viện thuần JavaScript (như axios, redux, lodash).

❌ NHỮNG GÌ BẠN KHÔNG ĐƯỢC PHÉP CẬP NHẬT:

(Bắt buộc phải build lại app và đưa lên Store).

• Cài đặt thêm các thư viện yêu cầu quyền Native (như cài mới expo-camera, expo-location trong khi bản cũ chưa có).
• Thay đổi tên ứng dụng, icon ứng dụng hoặc Splash Screen.
• Thêm các yêu cầu phân quyền mới vào file app.json hoặc Info.plist / AndroidManifest.

3. Cài đặt và cấu hình EAS Update

Để bắt đầu, bạn cần có tài khoản Expo (Đăng ký miễn phí tại expo.dev).

Bước 1: Đăng nhập và Khởi tạo dự án EAS

Mở Terminal tại thư mục dự án và gõ các lệnh sau:

# Đăng nhập vào tài khoản Expo của bạn
npx expo login

# Khởi tạo dịch vụ EAS cho dự án
eas init

Lệnh này sẽ tự động liên kết dự án dưới máy tính của bạn với bảng điều khiển trên máy chủ của Expo.

Bước 2: Cài đặt thư viện expo-updates

Đây là thư viện được cài sẵn vào trong app điện thoại để nó biết cách "lắng nghe" và tải bản cập nhật về.

npx expo install expo-updates

Bước 3: Cấu hình file eas.json

Hệ thống sẽ tự động tạo một file eas.json. Đây là file chỉ đạo luồng build và update của dự án. Hãy cấu hình nó với các môi trường (Branch) rõ ràng, ví dụ preview (để test) và production (cho người dùng thật).

{
  "build": {
    "preview": {
      "channel": "preview"
    },
    "production": {
      "channel": "production"
    }
  }
}

4. Thực hành: Bắn bản cập nhật trực tiếp

Giả sử ứng dụng của bạn hiện đang có màn hình trang chủ với dòng chữ: "Chào mừng đến với ứng dụng". Bạn vừa Build nó ra file APK/IPA và phát hành.

Bây giờ, bạn mở code lên và đổi dòng chữ thành: "Chào mừng bạn, chúc một ngày tốt lành!".

Thay vì lặp lại quy trình đưa lên Store, bạn chỉ cần gõ đúng 1 dòng lệnh duy nhất vào Terminal:

eas update --branch production --message "Thay đổi lời chào ở màn hình chính"

Hệ thống sẽ làm gì tiếp theo?

1. EAS sẽ đóng gói toàn bộ code JavaScript và hình ảnh mới của bạn.
2. Nó tải gói đó lên máy chủ (Cloud) của Expo.
3. Những người dùng đang cầm điện thoại mở app của bạn sẽ tự động kiểm tra với máy chủ của Expo. Khi phát hiện có bản cập nhật mới tên là "Thay đổi lời chào...", điện thoại sẽ âm thầm tải nó về dưới nền (background).
4. Lần tiếp theo người dùng tắt và bật lại ứng dụng, lời chào mới sẽ xuất hiện!

5. Tối ưu hóa trải nghiệm người dùng với OTA

Theo mặc định, expo-updates sẽ tự động tải và áp dụng bản cập nhật ở lần khởi động tiếp theo. Tuy nhiên, nếu bạn tung ra một bản vá lỗi cực kỳ khẩn cấp và muốn ép người dùng khởi động lại app ngay lập tức, bạn có thể tự code màn hình bắt ép cập nhật bằng API của thư viện.

import * as Updates from 'expo-updates'
import { Button, Alert, View } from 'react-native'

export default function UpdateButton() {
  const checkAndUpdate = async () => {
    try {
      // 1. Hỏi máy chủ xem có bản update nào không
      const update = await Updates.checkForUpdateAsync()

      if (update.isAvailable) {
        Alert.alert('Có bản cập nhật mới', 'Ứng dụng đang tải dữ liệu mới nhất...')

        // 2. Tải bản cập nhật về máy
        await Updates.fetchUpdateAsync()

        // 3. Khởi động lại ứng dụng ngay lập tức để áp dụng
        Alert.alert('Hoàn tất', 'Ứng dụng sẽ khởi động lại ngay bây giờ.', [
          { text: 'OK', onPress: () => Updates.reloadAsync() },
        ])
      } else {
        Alert.alert('Thông báo', 'Bạn đang dùng phiên bản mới nhất.')
      }
    } catch (error) {
      console.log(`Lỗi kiểm tra cập nhật: ${error}`)
    }
  }

  return (
    <View style={{ padding: 20 }}>
      <Button title="Kiểm tra bản vá khẩn cấp" onPress={checkAndUpdate} />
    </View>
  )
}

Kết luận: Cập nhật ứng dụng đã không còn là trở ngại

EAS Update là tính năng "thần thánh" biến việc bảo trì ứng dụng Mobile trở nên nhẹ nhàng như cập nhật một trang Web.

• Sửa lỗi nhanh chóng trong 3 phút.
• Tránh được rủi ro bị khóa tài khoản hoặc rớt hạng do ứng dụng có quá nhiều bug trên Store.
• Chỉ cần cẩn thận không dùng OTA khi bạn có cài thêm các thư viện yêu cầu quyền Native mới.

Nhưng nhắc đến các "thư viện Native mới", ở những bài đầu tiên có nói rằng Expo Go không thể chạy được các thư viện không có sẵn trong SDK của nó (ví dụ như thư viện thanh toán ZaloPay, Momo, hay các module C++ phức tạp).

Nếu dự án của bạn bắt buộc phải dùng các thư viện đó thì sao? Bạn có phải từ bỏ Expo và quay lại cách cài đặt Android Studio rắc rối ngày xưa không? KHÔNG!

Hãy chuẩn bị bước vào một khái niệm làm thay đổi hoàn toàn thế giới React Native trong vài năm trở lại đây: Prebuild & Continuous Native Generation (CNG).