對于物聯(lián)網(wǎng)應(yīng)用來說，構(gòu)建一個HTML5的移動app是尤其必要的就珠。為了開發(fā)HTML5 app，除了使用React Native等之外，目前首選穩(wěn)定的ionic+AngularJS來開發(fā)iOS 和Android臊泌。我們要開發(fā)的app版前端的功能和網(wǎng)頁版前端的功能相同，即下發(fā)命令揍拆，控制Led的開與關(guān)渠概，同時能實時展示溫度曲線。
關(guān)于Ionic和Cordova
Ionic是一款可以使用Html5構(gòu)建混合移動應(yīng)用的用戶界面框架嫂拴，它自稱是“本地與html5的結(jié)合”播揪。該框架提供了很多基本的移動用戶界面范例，例如像列表（lists）筒狠、標簽頁欄（tabbars）和觸發(fā)開關(guān)（toggleswitches）這樣的簡單條目猪狈。它還提供了更加復(fù)雜的可視化布局示例，例如在下面顯示內(nèi)容的滑出式菜單辩恼。
Cordova是一款開放源代碼的App開發(fā)框架雇庙，旨在讓開發(fā)者使用HTML、JavaScript灶伊、CSS等WebAPIs開發(fā)跨平臺的移動平臺應(yīng)用程序疆前，其原名稱之為PhoneGap，Adobe收購Nitobi公司后聘萨，PhoneGap商標保留竹椒，代碼貢獻給了Apache基金會，而Apache將其命名為ApacheCallback米辐，其后發(fā)布新版本時胸完，定名為ApacheCordova。
Cordova是一個行動設(shè)備的API接口集儡循，利用JavaScript存取這些接口可以調(diào)用諸如攝影機舶吗、羅盤等硬件系統(tǒng)資源。配合上一些基于HTML5择膝、CSS3技術(shù)的UI框架誓琼，如jQueryMobile、DojoMobile或SenchaTouch，開發(fā)者得以快速地開發(fā)跨平臺App而不需要編寫任何的原生代碼腹侣，因為Cordova本身仍是一個原生程式叔收，為App打包時依然需要用到這些系統(tǒng)平臺的SDK。
Ionic 2的安裝
為了避免國內(nèi)網(wǎng)絡(luò)安裝錯誤傲隶，我們采用淘寶npm鏡像饺律，執(zhí)行下面的命令：
sudo npm set registry https://registry.npm.taobao.org
下載后安裝ionic和cordova包，終端輸入：
sudo npm install -g cordova ionic
安裝成功后跺株，查看安裝的包內(nèi)容是否全部都已安裝复濒，終端輸入：
ionic info
根據(jù)信息提示，可對未成功安裝的包再次安裝乒省。
Ionic 2的目錄結(jié)構(gòu)
App：系統(tǒng)初始化
Model：自定義的實體類
Pages：系統(tǒng)頁面
Providers：自定義服務(wù)
實現(xiàn)步驟
1.創(chuàng)建項目巧颈。這里創(chuàng)建一個tab模板的項目，進入iot目錄中袖扛，執(zhí)行命令：
ionic start app tabs --v2 --skip-npm
然后砸泛，進入到項目目錄app中安裝依賴：
cnpm install
添加第三方的插件Echarts
首先，在終端中使用NPM安裝Echarts
npm install echarts --save
然后蛆封，在declarations.d.ts文件中聲明變量
declare module 'echarts';
接著唇礁，在需要調(diào)用的界面進行Import
import echarts from 'echarts';
最后，添加Ttypings解析（用于編譯器的智能索引）
npm install @types/echarts --save
完成以上步驟就可以在界面中進行調(diào)用了
2.編寫數(shù)據(jù)服務(wù)惨篱。
我們創(chuàng)建兩個數(shù)據(jù)服務(wù)盏筐，分別用來操縱sensor集合和led集合。
sensor.ts的內(nèi)容：
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class Sensor {
data:any;
constructor(public http: Http) {
this.data=null;
}
getSensor(){
if (this.data) {
return Promise.resolve(this.data);
}
return new Promise(resolve => {
this.http.get('http://localhost:3000/sensor')
.map(res => res.json())
.subscribe(data => {
this.data = data;
resolve(this.data);
});
});
}
}
led.ts的內(nèi)容：
import { Injectable } from '@angular/core';
import { Http,Headers } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class Led {
data: any;
constructor(public http: Http) {this.data=null;}
getStates(){
if (this.data){
return Promise.resolve(this.data);
}
return new Promise(resolve=>{
this.http.get('http://1506eaee.nat123.cc:38044/led/state')
.map(res=>res.json())
.subscribe(data=>{
this.data=data;
resolve(this.data);
});
});
}
updateStates(leds) {
let headers=new Headers();
headers.append('Content-Type','application/json');
this.http.put('http://localhost:3000/led',JSON.stringify(leds),{headers:headers}).subscribe((res)=>{console.log(res.json())});
}
}
3.設(shè)計頁面妒蛇。修改src/pages/home/home.html:
<ion-header>
<ion-navbar>
<ion-title>溫度曲線</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div id="myChart"></div>
</ion-content>
修改src/pages/contact/contact.html:
<ion-header>
<ion-navbar>
<ion-title>
控制Led
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-icon item-left name="bulb"></ion-icon>
<ion-label>電燈開關(guān)</ion-label>
<ion-toggle item-right color="danger" [(ngModel)]="ledState" (ionChange)="switch()"></ion-toggle>
</ion-item>
</ion-list>
</ion-content>
4.修改類文件机断。
home.ts的內(nèi)容為：
import { Component,ViewChild,ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Sensor } from '../../providers/sensor';
import echarts from 'echarts';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public sensors:any;
public a:any=1;
temperatures:any[]=[];//定義溫度數(shù)組
times:any[]=[]; //定義時間數(shù)組
constructor(public navCtrl: NavController,public sensorService: Sensor) {}
ionViewDidEnter(){
this.loadCharts();
}
loadCharts(){
var myChart = echarts.init(<HTMLCanvasElement> document.getElementById('myChart'));
this.sensorService.getSensor().then((data) => {
for (var i in data){
this.temperatures.push(data[i].temperature);
this.times.push(data[i].time)；
}
});
myChart.setOption({
tooltip:{},
dataZoom:[ //縮放
{
type: 'slider',//加入滑塊
start: 1,
end: 100
},
{
type: 'inside',//支持鼠標縮放
start: 1,
end: 100
}
],
xAxis: { //x軸的設(shè)置
//name:mydate,//x軸標題绣夺，顯示日期吏奸，臨時這樣做，體現(xiàn)出這是哪天的數(shù)據(jù)
//nameGap:'55',
//nameRotate:'-45',
data: this.times//x軸所使用的數(shù)據(jù)數(shù)組陶耍，前面用ajax方法得到
},
yAxis: [
{
type : 'value',
axisLabel : {
formatter: '{value} °C'//y軸數(shù)據(jù)的顯示格式
},
splitLine : {show : true}//顯示行分割線
}
],
series: [{//要展示的各個數(shù)據(jù)點
type: 'line'奋蔚，
data: this.temperatures
}]
});
}
}
contact.ts的內(nèi)容為：
import { Component } from '@angular/core';
import { Led } from '../../providers/led';
@Component({
selector: 'page-contact',
templateUrl: 'contact.html'
})
export class ContactPage {
public ledState: boolean;
public state;
public x:boolean;
constructor(public ledService: Led) {
}
public switch(){
let leds={status:this.ledState};
this.ledService.updateStates(leds);
}
ionViewDidLoad(){
this.ledService.getStates().then(function(data){
});
this.switch();
}
}
最終完成的頁面為：
