Tìm hiểu ionic framework

Tìm hiểu về khung ionic

1. Tổng quan về Ionic là một khung dùng để phát triển ứng dụng Hybrid cho điện thoại di động. Hybrid là sự kết hợp giữa ứng dụng native và web mobile. Với hybrid, giao diện được viết bằng HTML, CSS và JavaScript nhưng vẫn có thể sử dụng các API native của hệ điều hành để tương tác với điện thoại giống như các ứng dụng native khác. Ionic được phát triển trên nền tảng công nghệ Apache Cordova (trước đây có tên là PhoneGap) và sử dụng AngularJS để làm trục cốt lõi của hệ thống. Những tính năng chính của Cordova có:

• Giao diện dòng lệnh Cordova (Cordova CLI): công cụ này được sử dụng để khởi tạo dự án, xây dựng ứng dụng trên nhiều nền tảng khác nhau và cài đặt các plugin hữu ích giúp việc phát triển dễ dàng hơn.
• Các thành phần cốt lõi của Cordova: Cordova đưa ra một số thành phần cốt lõi mà mọi ứng dụng di động cần sử dụng.
• Các plugin của Cordova: Cordova cung cấp các API cho phép sử dụng các tính năng của thiết bị di động như cảm biến, camera, GPS…

Ưu điểm: Ứng dụng hybrid có nhiều ưu điểm như có thể hoạt động trên nhiều nền tảng, tận dụng các tính năng của thiết bị di động như GPS, camera…, tiết kiệm thời gian và chi phí phát triển so với ứng dụng native, chỉ cần biết ngôn ngữ JavaScript mà không cần phải học các ngôn ngữ lập trình khác.

Bạn đang xem: Tìm hiểu ionic framework

Nhược điểm: Tốc độ chậm với một số tính năng chuyển trang trên di động, không tương thích với một số thiết bị và nền tảng, một số API chưa được hỗ trợ để giao tiếp với thiết bị. Ionic có thể coi là một khung front-end giúp bạn kiểm soát hình ảnh và trải nghiệm trên ứng dụng di động, hiệu ứng chuyển động mượt mà và thiết kế đẹp. Cộng đồng Ionic cũng lớn, hơn nữa, có thể lựa chọn một thiết kế theme riêng để phát triển nhanh hơn.

2. Cài đặt: Đầu tiên bạn cần cài đặt Nodejs. Sau đó, bạn cài đặt Cordova và Ionic bằng lệnh:

npm install -g ionic cordova

• Để tạo một dự án mới sử dụng ionic, bạn có thể tạo ra 3 loại ứng dụng mẫu: blank, sidemenu, tab. Ionic có thể sử dụng AngularJS hoặc Angular để phát triển. Trong bài viết này, chúng ta chỉ tập trung vào Angular.

ionic start myapp -v2

Với lệnh trên, một dự án trống đã được tạo ra. Để thêm nền tảng, bạn có thể sử dụng lệnh:

ionic platform add ios/android

Để chạy trên nền web, bạn có thể sử dụng lệnh:

ionic serve

Để chạy kiểm tra bằng giả lập trên iOS hoặc giả lập trên Android, bạn có thể chạy:

ionic run ios/android -lc

hoặc

ionic emulate ios/android -lc

Các tham số -lc giúp bạn xem log của ionic để phát triển dễ dàng hơn.

Nếu muốn chạy trên thiết bị, chỉ cần thay thế tham số -lc bằng -device trong các lệnh trên. Để xây dựng ứng dụng, bạn cần cài môi trường cho Android và iOS, sau đó chạy lệnh:

ionic build android/ios

Khi đó, file ipa hoặc apk sẽ được tạo ra.

1. Một số thành phần cơ bản:

• Các thành phần: Được hiểu là các thành phần giao diện người dùng được viết bằng HTML như các nút, widget, thẻ input…
• Native: Đây là các API tương tác với hệ điều hành của điện thoại di động như tương tác với camera, GPS…
• API: Được viết dưới dạng các lớp như Checkbox, Toggle hoặc Item. 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 thuộc tính….
• Lưu trữ: Tương tác lưu trữ dữ liệu cục bộ cho khung ionic
• Giao diện dòng lệnh (CLI): Thêm thông tin tại tài liệu của ionic: https://ionicframework.com/docs/v2/api/

1. Xây dựng một ứng dụng nhỏ bằng khung ionic

Hãy thử xây dựng một ứng dụng bật tắt đèn flash trên điện thoại di động. Chúng ta cần một thành phần là một nút để bật/tắt đèn flash và một plugin native để tương tác với hệ điều hành của điện thoại. Bắt đầu nào.

Đầu tiên, tạo một dự án trống:

ionic start flashLight -v2

Xem thêm : MÌ CHÍNH TIẾNG ANH LÀ GÌ? NHỮNG LƯU Ý KHI DÙNG MÌ CHÍNH

Khi đó, một dự án mới sẽ được tạo ra với cấu trúc như sau:

|- app

|– hooks // các bước thực hiện trước khi chạy nam

|– platforms // tạo các tệp cụ thể cho iOS/Android

|– plugins // nơi cài đặt các plugin Cordova/Ionic

|– resources // biểu tượng và splash screen

|– scss // mã SCSS, sẽ xuất ra www/css/

|– www // ứng dụng – mã JS và thư viện, CSS, hình ảnh, v.v.

|-css // Kiểu tùy chỉnh

|-img // Hình ảnh ứng dụng

|-js // Ứng dụng Angular và JS tùy chỉnh

|-lib // Thư viện bên thứ ba

|-index.html // Trang chủ của ứng dụng

|– bower.json // những phụ thuộc bower

|– config.xml // cấu hình Cordova

|– gulpfile.js // các nhiệm vụ Gulp

|– ionic.project // cấu hình Ionic

|– package.json // phụ thuộc node

Sau đó, hãy thêm nền tảng Android (hoặc iOS):

ionic platform add android

Tiếp theo, hãy thêm plugin cordova-flashlight:

Xem thêm : IsPeaking.org

ionic plugin add cordova-plugin-flashlight

Và cài đặt nó qua npm:

npm install -save @ionic-native/flashlight

Bây giờ chúng ta sẽ viết mã trong thư mục app. Chúng ta sẽ sử dụng lớp Flashlight, được yêu cầu từ đường dẫn native/core của Angular. Chúng ta sẽ sử dụng hàm .available để xác định liệu đèn flash của điện thoại đang bật hay tắt. Hàm LightOn là một sự kiện của nút giúp điều khiển bật/tắt. Sau đó, chúng ta có mã HTML như sau:

<ion-navbar *navbar>

<ion-title> Trang chủ </ion-title>

</ion-navbar>

<ion-content class=”home”>

<h2>Đèn Flash là {{trangthai}}</h2>

<button fab primary fab-bottom fab-center (click)=”BatTatDen()”>

<ion-icon name=”flash”></ion-icon>

</button>

</ion-content>

Và mã điều khiển để bật/tắt đèn flash:

import {Page} from ‘ionic-angular’;

import {Flashlight} from ‘ionic-native’;

@Page({ templateUrl: ‘build/pages/home/home.html’ })

export class HomePage {

constructor() { this.trangthai = ‘off’; this.giatriden = 1; }

BatTatDen() { Flashlight.available((coSanSang) => { if(coSanSang) Flashlight.toggle(); this.giatriden += 1; if(this.giatriden % 2 != 0) this.trangthai = ‘on’; else this.trangthai = ‘off’; }) }

}

Đây là một tổng quan về khung ionic, một công cụ để phát triển ứng dụng hybrid cho nhiều nền tảng mà không cần học nhiều ngôn ngữ lập trình. Hi vọng bài viết này sẽ giúp bạn có cái nhìn tổng quan về Cordova và Ionic.

Nguồn: https://stamboom-boden.com
Danh mục: Là Gì