Tụ điện: Chạy ứng dụng web trên thiết bị di động

Tụ điện , một dự án được xây dựng bởi group đằng sau Ionic, là một cách tốt để sử dụng các ứng dụng web JavaScript của bạn và làm cho chúng chạy trên iOS, Android, máy tính để bàn (thông qua Electron) hoặc nền tảng web. Nó cho phép bạn truy cập SDK của thiết bị root và nhằm mục đích thay thế cho Cordova. Tôi sẽ giả sử rằng ta có một ứng dụng Ionic được xây dựng với Create React App (vâng, bạn đọc đúng!) Cho bài viết này, nhưng cách triển khai của bạn có thể khác.

Đầu tiên, hãy xây dựng ứng dụng của ta để bản dựng production của ta có thể chạy trên một thiết bị:

$ npm run build

Tiếp theo, để cài đặt Tụ điện, hãy chạy phần sau trong terminal bên trong folder dự án của bạn để cài đặt các gói cần thiết:

$ npm install --save @capacitor/core @capacitor/cli

$ npx cap init

Sau đó, bạn sẽ được hỏi một số thông tin về dự án của bạn . Vì đây là dự án đơn giản là một ví dụ, hãy sử dụng các giá trị mặc định cho mỗi dấu nhắc .

Sau đó, ta sẽ được chào đón bằng những thứ tương tự như thế này:

🎉   Your Capacitor project is ready to go!  🎉

Add platforms using "npx cap add":

  npx cap add android
  npx cap add ios
  npx cap add electron

Từ đây, ta có thể chọn dự án mà ta muốn xây dựng. Tôi sẽ sử dụng ios cho ví dụ của tôi.

$ npx cap add ios

Rất tiếc, chạy phần này với cài đặt mặc định sẽ cho ta lỗi này!

[error] Capacitor could not find the web assets directory "/repos/ionic-react/www".
    Please create it, and make sure it has an index.html file. You can change
    the path of this directory in capacitor.config.json.
    More info: https://capacitor.ionicframework.com/docs/basics/configuring-your-app

Đây là một lỗi phổ biến mà bạn có thể gặp phải khi thêm Tụ điện vào một dự án Ionic mới. Hãy cập nhật capacitor.config.json mới được tạo để trỏ tới folder build :

{
  "appId": "com.example.app",
  "appName": "App",
  "bundledWebRuntime": false,
  "webDir": "build"
}

Nếu ta chạy lại lệnh, Capacitor sẽ thêm một ứng dụng iOS vào dự án của ta mà ta có thể mở bên trong Xcode bằng:

$ npx cap open ios

Ta có thể mở ứng dụng của bạn trên thiết bị bằng cách nhấp vào nút Phát từ bên trong Xcode.

Thực hiện thay đổi đối với ứng dụng

Khi ta tiếp tục phát triển ứng dụng của bạn , ta không muốn phải xóa folder nền tảng và thêm lại nó mỗi lần. May mắn là ta có thể xây dựng JavaScript của bạn và sao chép các file vào dự án iOS của ta bằng cách sử dụng cap copy :

$ npm run build

$ npx cap copy

Điều này sẽ sử dụng các file bên trong của ta build folder để cập nhật build của ta . Nếu ta khởi động lại ứng dụng của bạn từ bên trong Xcode , bạn sẽ thấy rằng ứng dụng cập nhật với bất kỳ thay đổi nào bạn đã thực hiện.

Và đó là nó! Đến đây bạn đã cài đặt và chạy với Capacitor, bạn có thể xem tài liệu chính thức để tìm hiểu về các plugin và cách sử dụng các SDK thiết bị hoặc API web khác nhau.

Tags:

Các tin liên quan

Cách gửi thông báo đẩy web từ ứng dụng Django
2018-10-24
Cách xây dựng ứng dụng web hiện đại để quản lý thông tin khách hàng với Django và React trên Ubuntu 18.04
2018-10-22
Cách cài đặt Django Web Framework trên Ubuntu 18.04
2018-08-06
Cách sử dụng Trình quản lý cảnh báo và Trình xuất hộp đen để giám sát web server của bạn trên Ubuntu 16.04
2018-05-11
Giải pháp Deep Dive: Xây dựng một ứng dụng web khả dụng cao với khả năng xử lý và lưu trữ web bằng cách sử dụng MongoDB và Elk Stack
2018-03-15
Các bước đầu tiên của bạn với API âm thanh web
2018-01-09
Gói ứng dụng web của bạn bằng bưu kiện
2017-12-09
Tích hợp các thành phần web với ứng dụng Vue.js của bạn
2017-09-25
Cách làm việc với dữ liệu web bằng cách sử dụng yêu cầu và món súp đẹp mắt với Python 3
2017-07-14
Sử dụng Web worker một cách dễ dàng trong Vue.js với vue-worker
2017-05-16