Xây dựng ứng dụng Android và iOS với CapacitorJS

Tìm hiểu cơ bản về Capacitor và cách xây dựng ứng dụng với HTML, CSS, JavaScript.

Mục tiêu

• Thêm Capacitor vào dự án web có sẵn.
• Cấu hình Capacitor với Android Studio.
• Build ứng dụng Android.

Chuẩn bị

• Đã cài đặt NodeJS.
• Đã cài đặt Android Studio.
• Một website dùng để build ra ứng dụng.

Tìm hiểu

Capacitor là một framework giúp lập trình viên xây dựng ứng dụng Android hoặc iOS từ một website.

Sử dụng Capacitor để build ứng dụng khá đơn giản, lập trình viên chỉ cần lập trình website, sau đó Capacitor sẽ tạo ra một webview để hiển thị website đó trong ứng dụng.

Ngoài ra, Capacitor cũng cung cấp các plugin để lập trình với một số tính năng native như: thông báo (notification), camera, vị trí địa lý (geolocation)…

Thực hiện

Thêm Capacitor vào dự án web:

Trong thư mục web, nếu chưa khởi tạo dự án NodeJS thì nhập lệnh sau:

npm init -y

Nếu bạn đang dùng một framework nào đó để lập trình web (Next, Nuxt, Vue, Angular…) thì cần build web trước. Nếu website của bạn chỉ dùng HTML, CSS, JavaScript thì cần tạo một thư mục để chứa code của website đó.

Thêm Capacitor

Cài đặt Capacitor:

npm i @capacitor/core @capacitor/cli

Khởi tạo Capacitor:

npx cap init

Capacitor sẽ hỏi bạn các thông tin như: tên ứng dụng, thư mục web…

Cấu hình Android Studio

Trước khi build ứng dụng Android, cần thêm PATH environment cho Android Sdk và JDK.

Mình dùng hệ điều hành Ubuntu nên sẽ khai báo trong file .profile như sau:

export ANDROID_SDK_ROOT=$HOME/.Android/Sdk
export JAVA_HOME=/opt/android-studio/jre

Ngoài ra, ở thời điểm đang viết bài viết này, Capacitor chưa hỗ trợ Android API 32, cho nên cần giảm API Level xuống.

Mở SDK Manager trong Android Studio, bỏ chọn checkbox Android API 32 và chọn 1 phiên bản có API Level nhỏ hơn.

Chọn checkbox “Show Packages Detail” để hiển thị ở chế độ chi tiết. Chọn một System Image của phiên bản Android vừa chọn.

Nhấn OK.

Build ứng dụng Android

Thêm platform Android để build ứng dụng:

npm i @capacitor/android
npx cap add android
npx cap sync android

Chạy ứng dụng trên máy ảo hoặc thiết bị Android:

npx cap run android

Hoặc mở Android Studio để build release:

npx cap open android

Kết

Capacitor được phát triển cùng với Ionic. Ionic cung cấp một UI toolkit để có thể phát triển ứng dụng di động một cách nhanh chóng, nó hỗ trợ các framework web: Angular, React và Vue.

Đây là ví dụ dùng Capacitor để tạo một ứng dụng Android từ website đơn giản: https://drive.google.com/drive/folders/1fEo1AgwH2P1MMMGL_SJaZ7zXY5qmUFrO?usp=sharing