Tìm hiểu về ionic framework
- Giới thiệu 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
- Command Line Interface (Cordova CLI): đây là một tool dùng để khởi tạo một project , xây dựng ứng dụng trên nhiều nên tảng khác nhau cũng như là thêm nhiều plugin có ích để giúp việc phát triển dễ dàng hơn.
- Cordova Core Components: Cordova đưa ra một tập các thành phần mà mọi ứng dụng di động cần đến.
- Cordova Plugins: Cordova đưa ra các API để sử dụng các chức năng của thiết bị di động như cảm biến, camera, GPS…
Ưu điểm: Các ứng dụng hybrid có nhiều ưu điểm như có thể hiển thị cho nhiều nền tảng Tận dụng các tính năng khác của thiết bị di động như GPS, camera…. Thời gian và chi phí dùng để phát triển ứng dung cũng thấp hơn nhiều so với native. Chỉ cần biết ngôn ngữ javascriot mà ko cần phải biết từng ngôn ngữ lập trình Nhược điểm: Tốc độ chậm với một số tính năng chuyển trang trên di động Các plugin có thể không tương thích với một số thiết bị và nền tảng. Một số API cũng chưa được hỗ trợ để giao tiếp với thiết bị. Ionic có thể được 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 của nó mượt và thiết kế đẹp. Cộng đồng Ionic cũng lớn, có hẳn 1 trang thiết kế theme riêng có thể lựa chọn để phát triển cho nhanh. 2. Cài đặt: Đầ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.
- Một số thành phần cơ bản:
- components: được hiểu là các thành phần ui được viết bằng html như các button, widget, thẻ input….
- native: Là các api tương tác với hệ điều hành của mobile như tương tác với camera, gps …..
- Api: Được viết dưới dạng các class như Checkbox, Toggle or Item. Chúng được định nghĩa để sử dụng các components thông qua các hàm event hoặc property….
- Storage: Tương tác lưu dữ liệu local cho một framework ionic
- CLI: Có thể tìm hiểu thêm tại document của ionic: https://ionicframework.com/docs/v2/api/
- Xây dựng một app nhỏ bằng ionic framework 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
