Tổng Quan Về CodePush

Trong quá trình phát triển ứng dụng di động, việc cập nhật mã nguồn mà không cần phải xây dựng lại và phát hành bản mới lên cửa hàng ứng dụng là rất quan trọng. CodePush được tạo ra để giải quyết vấn đề này, giúp cho các nhà phát triển có thể cập nhật những thay đổi trong mã JavaScript một cách dễ dàng và nhanh chóng.

Cơ Chế Hoạt Động Của CodePush

Mỗi khi người dùng mở ứng dụng, CodePush sẽ kiểm tra trên server xem có bản cập nhật nào mới không. Nếu có, nó sẽ tự động tải xuống file bundle mới và cập nhật ứng dụng mà không làm gián đoạn trải nghiệm của người dùng.

Lưu ý: CodePush chỉ hỗ trợ cập nhật mã JavaScript. Nếu bạn thay đổi mã nguồn Native (Java, Objective-C, Swift), thì CodePush sẽ không hoạt động.

Hướng Dẫn Sử Dụng CodePush Trong React Native Trên Android

1. Đăng Ký Tài Khoản AppCenter

AppCenter là dịch vụ quản lý ứng dụng di động của Microsoft. Để sử dụng CodePush, bạn cần:

Tạo một tài khoản AppCenter và đăng nhập.
Cài đặt AppCenter CLI bằng cách chạy lệnh: npm install -g appcenter-cli.
Mở Terminal trong Visual Studio Code và chạy lệnh appcenter login để liên kết tài khoản.
Tạo một dự án dành cho Android trong AppCenter và cung cấp các thông tin cần thiết như tên ứng dụng, nền tảng, và biểu tượng.

2. Cấu Hình react-native-codepush Cho Android

Cài đặt CodePush CLI:
Copy
```
npm install -g appcenter-cli
```
Trong dự án React Native, cài đặt thư viện react-native-code-push:
Copy
```
npm i react-native-code-push
```
Thực hiện linking thư viện nếu cần thiết. Tham khảo hướng dẫn tại: Hướng dẫn thiết lập CodePush

Trong file settings.gradle, thêm các dòng sau:

Copy

include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

Trong android/app/build.gradle, thêm dòng sau:

Copy

apply from: '../../node_modules/react-native/react.gradle'
apply from: '../../node_modules/react-native-code-push/android/codepush.gradle'

Cập nhật file MainApplication.java:

java Copy

import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}

Trong file strings.xml (android/app/src/main/res/values/strings.xml), thêm đoạn sau:
xml Copy
```
<resources>
    <string moduleConfig="true" name="CodePushDeploymentKey">{DeploymentKey}</string>
</resources>
```
Lưu ý: DeploymentKey có thể lấy từ AppCenter tại mục Distribute/CodePush.

3. Thêm CodePush Vào Ứng Dụng React Native

Trong màn hình cần cập nhật, thường là màn hình Splash, bạn cần thêm mã sau:

javascript Copy

import CodePush from "react-native-code-push";
const codePushOptions = {
    updateDialog: true,
    installMode: CodePush.InstallMode.IMMEDIATE,
    checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME,
};
useEffect(() => {
    CodePush.sync({
        installMode: CodePush.InstallMode.IMMEDIATE,
    });
}, []);
export default CodePush(codePushOptions)(Splash);

Cách Hoạt Động

Khi người dùng mở ứng dụng và đến màn hình Splash, CodePush sẽ tự động kiểm tra và tải bản cập nhật. Nếu có bản mới, nó sẽ cài đặt và khởi động lại ứng dụng ngay lập tức.

4. Đưa Bản Cập Nhật Lên AppCenter

Để tải bản cập nhật đầu tiên lên AppCenter, bạn sử dụng lệnh:

bash Copy

code-push release-react <tên_app_trên_app_center> android -d <tên_phiên_bản>

Ví dụ:

bash Copy

code-push release-react Bell android -d Beta -t '1.0'

Nếu xảy ra lỗi như EPERM: operation not permitted, hãy thử khởi động lại Visual Studio Code với quyền Administrator.

5. Kiểm Thử Ứng Dụng

Sau khi hoàn thành các bước trên, bạn có thể build ứng dụng thành file APK và cài đặt trên máy ảo để kiểm thử.

Sau đó, chỉnh sửa giao diện và chạy lại lệnh CodePush để cập nhật lên AppCenter. Khi mở lại ứng dụng, bạn sẽ thấy bản cập nhật được áp dụng mà không cần phải cài đặt lại ứng dụng. Kiểm tra các log API để xác nhận quy trình cập nhật CodePush.

Kết Luận

Bài viết đã hướng dẫn chi tiết các bước cần thiết để sử dụng CodePush trong ứng dụng React Native trên Android. Hy vọng rằng thông tin này sẽ hữu ích cho bạn trong quá trình phát triển ứng dụng. Cảm ơn bạn đã theo dõi!
source: viblo

Hướng Dẫn Sử Dụng CodePush Trong React Native Trên Hệ Điều Hành Android