· react native · 7 min read

Hướng dẫn sử dụng expo-updates để cập nhật ứng dụng React Native nhanh chóng-Phần 1

Việc phát hành và cập nhật ứng dụng nhan chóng là một điều cần thiết. Trong bài viết này, mình sẽ hướng dẫn cách sử dụng expo-updates để cập nhật ứng dụng đã phát hành một cách nhanh chóng.

Việc phát hành và cập nhật ứng dụng nhan chóng là một điều cần thiết. Trong bài viết này, mình sẽ hướng dẫn cách sử dụng expo-updates để cập nhật ứng dụng đã phát hành một cách nhanh chóng.

Vấn đề

Khi phát hành ứng dụng trên store của Android và iOS, đôi khi rất mất thời gian và công sức vì quá trình kiểm duyệt, đôi lúc app của của mình bị từ chối vì những lý do hết sức ngớ ngẫn. Thực tế mình đã làm một dự án mà app phải mất quá trình kiểm duyệt và sửa đi sửa lại mất 2 tháng. Đôi khi, sau khi phát hành ứng dụng lên store mình lại phát hiện có vài con bug nhỏ nhỏ, tuy nhiên để những sửa lỗi này đến tay người dùng lại phải qua quá trình kiểm duyệt tốn thời gian, công sức và tiền bạc của dự án.

Tuy nhiên đó điều đó vẫn vẫn còn tốt vì ứng dụng vẫn có thể được tự động cập nhật dựa vào cửa hàng. Mình từng làm một ứng dụng không phát hành trực tiếp qua cửa hàng mà phải thông qua Apk file và MDM (Mobile Device Management). Ứng dụng không thể được tự động cập nhật mà phải thực hiện thủ công từ phía khách hàng làm cho quá trình cập nhật phiên bản tốn rất nhiều thời gian và công sức (như phải liên hệ từng khách hàng để họ tự cập nhật). Điều này làm nãy sinh thêm vấn đề nhiều phiên bản của một ứng dụng và phải duy trình tương thích ngược (backward compatible) giữa các phiên bản. Việc duy trì này sẽ làm tăng công sức để phát triển và kiểm thử, từ đó làm tăng chi phí và giảm tốc độ phát triển của ứng dụng.

Để giải quyết vấn đề này, nhiều thư viện của React Native cho phép cập nhật bất đồng bộ code logic của Javascript và các tài nguyên như hình ảnh độc lập với những phần native mà không cần thông qua store. Hai trong số những thư viện nổi bật hiện tại là react-native-code-pushexpo-updates. Tuy nhiên, vì react-native-code-push sử dụng appcenter sẽ đóng cửa vào tháng 3 2025 nên mình sẽ sử dụng và giới thiệu expo-updates.


Cách sử dụng expo-updates

Khởi tạo projects

1. Cài đặt EAS CLI và đăng nhập tài khoản Expo

Đầu tiên, để khởi tạo dự án, chúng ta sẽ cần đến EAS CLI và expo. Sau đó thực hiện login bằng tài khoản expo đã tạo.

npm install --global eas-cli
eas login

2. Tạo dự án mới

Để tạo dự án mới, ta sẽ sử dụng lệnh bên dưới:

npx create-expo-app

Khi tạo thành công một dự án mới, cấu trúc thư mục của dự án sẽ có như sau:

.
|-- README.md
|-- app
|   |-- (tabs)
|   |   |-- _layout.tsx
|   |   |-- explore.tsx
|   |   `-- index.tsx
|   |-- +html.tsx
|   |-- +not-found.tsx
|   `-- _layout.tsx
|-- app.json
|-- assets
|-- babel.config.js
|-- components
|-- constants
|-- hooks
|-- package-lock.json
|-- package.json
|-- scripts
`-- tsconfig.json

3 Cấu hình dự án và kết nối với Expo service

Để cấu hình dự án sử dụng expo-updates và kết nối với expo service, chúng ta sẽ sử dụng lần lược những lệnh sau trong thư mục dự án

npx expo install expo-updates
eas update:configure
eas build:configure

Sau khi chạy xong những lệnh trên, chúng ta sẽ có một tập tin mới là eas.json trong thư mục gốc.

{
  "cli": {
    "version": ">= 10.1.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "channel": "development"
    },
    "preview": {
      "distribution": "internal",
      "channel": "preview"
    },
    "production": {
      "channel": "production"
    }
  },
  "submit": {
    "production": {}
  }
}

Trong file eas này chúng ta sẽ cần phải chú ý đến phần build. Trong config này sẽ chưa nhiều profile ứng với các môi trường như development, preview, production. Trong từng profile sẽ có thông tin về các channel tương ứng. expo-updates sẽ sử dụng thông tin của những channel này để cập nhật ứng dụng.

4. Chạy thử ứng dụng

Sau bước này, chúng ta đã tạo xong một codebase đơn giản cho ứng dụng. Chúng ta có thể thư nghiệm xem cấu hình đã ổn hay chưa bằng cách chạy thử ứng dụng qua các lệnh:

npm run start

Nếu mọi thứ ổn, kết quả sẽ như hình bên dưới. Lúc này tùy thuộc vào platform mà dự án cần để lựa chọn tiếp.

> my-app@1.0.0 start
> expo start

Starting project at ~/Projects/my-app
Starting Metro Bundler

› Metro waiting on exp://192.168.10.17:8081
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Web is waiting on http://localhost:8081

› Using Expo Go
› Press s │ switch to development build

› Press a │ open Android
› Press w │ open web

› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu
› Press o │ open project code in your editor

› Press ? │ show all commands

5. Build thử ứng dụng ở preview profile

Để build thử ứng dụng android cho preview profile sử dụng expo, chúng ta sẽ sử dụng lệnh sau:

eas build --platform android

Lệnh này sẽ chạy trên expo service sẽ mất gần 15 phút để hoàn thành cho phiên bản miễn phí. Tốc đô build có thể sẽ nhanh hơn cho phiên bản trả phí. Bạn cũng có thể build app ở máy local bằng cách thêm chạy eas build —platform android —local. Tuy nhiên, việc build local này sẽ tương đối phức tạp và sẽ phải cài đặt nhiều thứ. Mình sẽ viết chi tiết ở một bài viết khác.

Sau khi chạy lệnh xong, file build sẽ có trên Expo giống hình bên dưới.

Kết quả build trên expo

Để kiểm tra ứng dụng, chúng ta nhấn vào nút Install và quét QR code để tải về điện thoại.

Cài app trên điện thoại

Sau khi cài đặt xong, ứng dụng sẽ giống như hình sau.

Sau khi chạy ứng dụng

6. Thay đổi và cập nhật ứng dụng

Trong phần này, mình sẽ thử thay đổi một đoạn text nhỏ trong trang Home để thử chức năng.

<ThemedView style={styles.titleContainer}>
- <ThemedText type="title">Welcome!</ThemedText>
+ <ThemedText type="title">Welcome Thong!</ThemedText>
  <HelloWave />
</ThemedView>

Sau đó, chúng ta sẽ thực hiện tạo một update mới bằng cách sử dụng lệnh sau cho preview profile.

eas update --message "Update welcome text" --channel preview

Kết quả tạo update trên expo

Lúc này, chúng ta có thể tắt app, mở lại để app tải file bundle mới. Sau đó tắt app lần nữa và mở app lại. Phiên bản mới của ứng dụng sẽ được cập nhật.

Kết quả tạo update trên app

Kết Luận

Trong bài viết này, mình đã giới thiệu cách sử dụng expo-updates để cập nhật ứng dụng bất đồng bộ một cách nhanh chống mà không cần qua store. Trong bài viết này có một hạn chế là ứng dụng của mình phải phụ thuộc vào service của expo để build app và phát hành các bản update. expo-update cho phép chúng ta build app local không thông qua service và tự phát hành các bản cập nhật riêng mà không cần sử dụng expo-updates. Phần này mình sẽ làm tiếp theo trong seri này. Ngoài ra trong bài viết này mình khởi tạo dự án từ đầu bằng expo, tuy nhiên trong thực tế chúng ta có thể sẽ phải cài đặt vào dự án đã có và có thể dự án đó không sử dụng expo. Mình sẽ viết một bài viết khác về vấn đề này.

Back to Blog