Ionic là một framework dùng để phát triển một ứng dụng Hybrid cho mobile. Hybrid có thể được hiểu là con lai giữa ứng dụng native và web mobile. 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 các api native của hệ thống nên có thể thao tác với hệ điều hành của mobile như các ứng dụng native khác. Ionic được phát triển dựa trên nền của Apache Cordova(trước kia còn gọi là phonegap) và dùng angular1, angular2 để làm core của hệ thống.
Các tính năng của Cordova
Ưu điểm:
Nhược điểm:
Đầu tiên bạn phải cài đặt Nodejs. Sau đó cài cordova và Ionic:
npm install -g ionic cordova
Để tạo một project mới dùng ionic nó cho phép tạo ra 3 loại application mẫu: blank, sidemenu, tab. Ionic có thể dùng angular or angular2 để phát triển. Ở bài này mình sẽ chỉ đề cập angular2.
ionic start myapp --v2
Với lệnh trên một application trống đã được tạo ra. Để add thêm platform dùng lệnh:
ionic platform add ios/android
Để chạy trên nền web ta có thể dùng lệnh
ionic serve
Để run test với emulate của ios hoặc simulator của android ta có thể chạy
ionic run ios/android -lc
hoặc
ionic emulate ios/android -lc
Tham sô -lc để bạn có thể xem log ionic chạy giúp cho việc develop được dễ dàng hơn.
Muốn chạy với device chỉ thay tham số -lc thành --device trong các lệnh trên Để build application ta phải cài môi trường của android và ios. sau đó chạy lệnh
ionic build android/ios
Khi đó file ipa or apk sẽ được tạo ra.
Thử xây dựng một ứng dụng bật tắt đèn flashlight của điện thoại. Chúng ta cần 1 component là một button để bật/tắt đèn. một plugin native để điều khiển với hệ điều hành của mobile. Bắt tay thử nào. Đầu tiên mình sẽ tạo một project dang blank
ionic start flashlight --v2
một project mới được tạo ra sẽ có cấu trúc như sau:
|-------- app
├── hooks // custom cordova hooks to execute on specific commands
├── platforms // iOS/Android specific builds will reside here
├── plugins // where your cordova/ionic plugins will be installed
├── resources // icon and splash screen
├── scss // scss code, which will output to www/css/
|── www // application - JS code and libs, CSS, images, etc.
|---------css //customs styles
|---------img //app images
|---------js //angular app and custom JS
|---------lib //third party libraries
|---------index.html //app master page
├── bower.json // bower dependencies
├── config.xml // cordova configuration
├── gulpfile.js // gulp tasks
├── ionic.project // ionic configuration
├── package.json // node dependencies
Sau đó ta cần add thêm platform ios or android. ở đây mình chọn android.
ionic platform add android
Tiếp theo sẽ add plugin flashlight của cordovar
ionic plugin add cordova-plugin-flashlight
và install nó bằng npm
npm install --save @ionic-native/flashlight
Ta sẽ viết code core trong thư mục app. Sẽ dùng class FlashLight được require từ native/core của angular. dùng hàm .available để xác định xem flash của mobile đang bật hay tắt. Hàm LightOn là event của button giúp điều khiển bật tắt. Vậy ta có code html như sau:
<ion-navbar *navbar>
<ion-title>
Home
</ion-title>
</ion-navbar>
<ion-content class="home">
<h2>Flashlight is {{flashstatus}}</h2>
<button fab primary fab-bottom fab-center (click)="LightOn()">
<ion-icon name="flash"></ion-icon>
</button>
</ion-content>
và code điều khiển việc bật tắt flash:
import {Page} from 'ionic-angular';
import {Flashlight} from 'ionic-native';
@Page({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
constructor() {
this.flashstatus = 'off';
this.flashvalue = 1;
}
LightOn() {
Flashlight.available((isAvailable) => {
if(isAvailable)
Flashlight.toggle();
this.flashvalue += 1;
if(this.flashvalue % 2 != 0)
this.flashstatus = 'on';
else
this.flashstatus = 'off';
})
}
}
Trên là giới thiệu sơ qua về framework ionic phát triển từ cordova để có thể xây dựng một hybrid application 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 sẽ giúp các bạn có cách nhìn khái quát về cordova và ionic
Unpublished comment
Viết câu trả lời