Tìm hiểu ionic framework
Tìm hiểu về khung ion
- Giới thiệu ionic là một khuôn khổ để phát triển các ứng dụng di động kết hợp. Kết hợp có thể được hiểu là sự giao thoa giữa ứng dụng gốc và web di động. Bản chất của hybrid là một giao diện được viết bởi html, css, javascript nhưng nó cho phép gọi api gốc của hệ thống nên có thể vận hành hệ điều hành di động như các ứng dụng gốc khác. Ionic được phát triển dựa trên apache cordova (trước đây gọi là phonegap), với angle1 và angle2 là cốt lõi của hệ thống. Tính năng của Cordova
- Giao diện dòng lệnh (cordova cli): Đây là một công cụ để tạo dự án, xây dựng ứng dụng trên các nền tảng khác nhau và thêm nhiều plugin hữu ích giúp phát triển dễ dàng hơn.
- các thành phần cốt lõi của cordova: cordova cung cấp một tập hợp các thành phần mà mọi ứng dụng di động đều cần.
- plugin cordova: cordova cho thấy apis sử dụng các tính năng của thiết bị di động như cảm biến, máy ảnh, gps …
- Để tạo một dự án mới bằng cách sử dụng ionic, nó cho phép tạo 3 loại ứng dụng mẫu: trống, menu bên, tab. ion có thể được phát triển bằng cách sử dụng góc hoặc góc2. Trong bài viết này, tôi sẽ chỉ đề cập đến angle2.
- Một số thành phần cơ bản:
- Thành phần: được hiểu là các phần tử ui được viết bằng html như các nút, widget, thẻ nhập …
- native: api để tương tác với các hệ điều hành di động như máy ảnh, gps, v.v. …
- api: Được viết dưới dạng các lớp như hộp kiểm, chuyển đổi hoặc các mục. Chúng được định nghĩa để sử dụng các thành phần thông qua các sự kiện hoặc chức năng thuộc tính …
- Lưu trữ: lưu dữ liệu cục bộ của khuôn khổ ion một cách tương tác
- cli: Bạn có thể tìm thêm thông tin trong tài liệu của ionic: https://ionicframework.com/docs/v2/api/
- Xây dựng một ứng dụng nhỏ bằng cách sử dụng khung ion Cố gắng tạo một ứng dụng có thể bật và tắt đèn pin điện thoại. Chúng ta cần một thành phần là nút bật / tắt đèn. Một plugin gốc để kiểm soát hệ điều hành di động. Bắt tay thử xem sao.
Lợi ích: Các ứng dụng kết hợp có nhiều lợi thế, chẳng hạn như khả năng hiển thị trên nhiều nền tảng bằng cách sử dụng các tính năng khác của thiết bị di động như gps, máy ảnh, v.v. Thời gian và chi phí phát triển ứng dụng cũng thấp hơn nhiều so với ứng dụng gốc. Chỉ cần biết ngôn ngữ javascriot mà không cần biết từng ngôn ngữ lập trình một số apis chưa hỗ trợ giao tiếp với thiết bị. Ionic có thể được coi là một khuôn khổ giao diện người dùng giúp bạn kiểm soát giao diện của ứng dụng dành cho thiết bị di động của mình, với chuyển động mượt mà và thiết kế đẹp mắt. Cộng đồng ion cũng rất lớn và có các trang thiết kế chủ đề riêng biệt để bạn lựa chọn để phát triển nhanh chóng. 2. Cài đặt: Đầu tiên bạn phải cài đặt nodejs. Sau đó cài đặt cordova và ionic:
Sử dụng lệnh này trên một ứng dụng trống đã được tạo. Để thêm các nền tảng khác, hãy sử dụng lệnh sau:
Để chạy trên một trang web, chúng ta có thể sử dụng lệnh
Để chạy thử nghiệm bằng cách sử dụng giả lập cho ios hoặc giả lập cho android, chúng ta có thể chạy
hoặc
Tham số
-lc để bạn có thể thấy hành động của nhật ký ion, giúp phát triển dễ dàng hơn.
Để chạy trên một thiết bị, chỉ cần thay đổi tham số -lc trong lệnh trên thành -device. Để xây dựng ứng dụng, chúng ta phải cài đặt môi trường cho android và ios. Sau đó chạy lệnh
Sau đó, tệp ipa hoặc apk sẽ được tạo.
Đầu tiên, tôi sẽ tạo một dự án trống
Một dự án mới được tạo sẽ có cấu trúc sau:
Sau đó, chúng tôi cần thêm nền tảng ios hoặc android. Ở đây tôi chọn android.
Plugin đèn pin cordovar sẽ được thêm vào
Và cài đặt nó bằng npm
Chúng tôi sẽ viết mã lõi trong thư mục ứng dụng. Sẽ sử dụng lớp ngọn đuốc được yêu cầu bởi bản địa / lõi của góc. Sử dụng chức năng .available để xác định xem đèn flash di động đang bật hay tắt. Chức năng đèn là sự kiện nút được sử dụng để điều khiển bật tắt. Vì vậy, chúng tôi có mã html sau:
Và mã để điều khiển đèn flash:
Trên đây giới thiệu sơ lược về ionic framework được phát triển từ cordova, có thể xây dựng các ứng dụng lai đa nền tảng mà không cần học nhiều ngôn ngữ lập trình. Hy vọng bài viết này giúp bạn có cái nhìn tổng quan về cordova và ionic