手机混合 App与物联网平台开发

一、Ionic简介

Cordova是一个开源的移动设备开发框架，它提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。

而Ionic是一个基于Cordova的、使用HTML 5构建移动应用的高级开发框架，它自称是“Navtie与HTML 5的结合”。这个框架提供了很多基本的移动用户界面范例，如列表、标签栏和触发开关等，并提供了一些复杂的可视化布局示例，如滑出式菜单。

与基于Cordova框架的应用相比，它具有下面一些优点：

• 性能比用jQuery构建好。
• 基于Angluar JS。
• 原生化。
• 设计精美。
• 学习乐趣。
• 为极客构建。

Ionic遵循视图控制模式，易于理解，并与Cocoa触摸框架类似。在操作之前我们需要先安装这个框架：

npm install -g cordova ionic

在安装期间，如果遇到一些网络问题，可以试着用下面的命令，使用淘宝的软件源：

npm config set registry https://registry.npm.zhengzhoushirlp3.cn

安装完成后，我们就可以使用Ionic来创建项目了。我们可以用下面的命令来创建一个名为iotApp的应用：

ionic start iotApp tabs 

在这个过程中，它会从Github上下载已经存在的项目脚手架。创建及安装过程如图1所示。

图 1 Ionic安装过程图1

同时，还有一些提示，如图2所示。

现在，我们需要到这个目录中执行下面的命令，来搭建SASS环境：

ionic setup sass

然后，可以执行下面的命令来启动应用：

ionic serve

最后，你会在浏览器中看到类似的界面，如图3所示是该应用运行在iOS上的截图。

图2　Ionic安装过程图2

图3　iOS上的截图

为了让它可以在手机上运行，我们需要先添加这个平台：

ionic platform add ios

如果你使用的也是Android手机、Nokia Lumia手机，那么你需要把上面的iOS改成Android，或者是WP8。图4是添加Android平台的过程。

图4　在Ionic上添加Android平台

现在，我们可以在手机上运行这个项目了。在运行下面的代码之前，你需要确定你的Android手机已经打开调试模式。如果是iOS系统或者Windows Phone系统，则请确认你已经有开发者账号。当然如果是其他系统的用户，也不需要担心，Ionic还支持Amazon-Fireos、BlackBerry10、FirefoxOS、WebOS等操作系统。

ionic run android

你可能会对Ionic或者Cordova的工作原理有些好奇，但是如果你开发过Android应用或者Web应用就会有一些相关经验。在我们创建完项目后，项目目录结构如图5所示。

下面我们可以详细了解一下这些目录的作用。

hook目录包含了一些用于自定义Cordova的命令，按照不同的顺序可以执行不同的事情，如after_build、before_build，即在构建之前和构建之后做的事。

图5　Ionic目录结构

node_modules目录放置的是node包模块。

platforms目录放置的是平台相关的源代码，包含了下面的文件夹：

• android 目录下包含了项目编译完成后的完整Android代码。
• ios 目录下包含了项目编译完成后的完整iOS代码。
• platforms.json 包含了这些平台的版本——Cordova上这些平台的版本。

plugins目录会包含一些第三方插件的内容。

resources主要用于放置资源文件，如启动界面、图标等。

scss是一个CSS预处理器， 这个目录主要会包含一些样式。

www这个目录是我们工作的目录，包含了下面的文件夹，这些文件夹名副其实：

• css
• img
• js
• lib
• templates
• index.html

.bowerrc：配置了默认的前端库安装目录。 
.editorconfig：编辑器相关配置。 
.gitignore：git相关配置。 
bower.json：bower的配置，会包含需要安装的前端的名和信息，用于安装前端库。 
config.xml：项目相关的配置，其中会有APP名称、包名、简介、分辨率等。 
gulpfile.js：包含构建系统的一些命令。 
ionic.project：Ionic项目配置。 
package.json：node的包管理配置文件。

看过目录你可能知道了，我们是用一份代码构建出不同平台的代码。首先，在我们添加平台的时候，会下载相应系统的一些基础代码，同时也会下载相应平台的代码。接着，在我们运行的时候，会把www目录下的内容复制到一个新的目录。最后在运行的时候，会直接到这个目录下打包并运行。

而Cordova会充当其中的桥梁——用于连接WebView和原生API。

二、趋势图

由于都是Web应用，因此我们可以使用HighChart.js作为图形绘制库。由于Ionic用的是Angluar，所以我们需要先安装一个名为ngCordova的插件。ngCordova是在Cordova API基础上封装了很多开源的Angular.js扩展，使开发者在Angular.js代码中有访问设备API的能力。

首先，我们需要先安装这个插件：

bower install ngCordova;

然后，将下面的代码添加到index.html中，我们就可以在Controller中使用它了：

<script src="lib/ngCordova/dist/ng-cordova.henanshenggyq6.cn"></script>

为了在上面使用highcharts，我们仍需要安装jQuery、highcharts.changchunshin3zx.cn和highcharts-ng：

bower install jquery
bower install highcharts
bower install qinghaisheng8oqe.cn

并添加相应的库到index.html文件中：

<script src="lib/jquery/dist/jquery.min.hainansheng3j77.cn"></script>
<script src="lib/highcharts/highcharts.src.tangshanshi9p7n.cn"></script>
<script src="lib/highcharts-ng/dist/highcharts-ng.nanchangshij7p1.cn"></script>

现在，我们可以修改它们的代码。打开tab-dash.html，将里面的内容换成：

<ion-view view-title="Dashboard"><ion-content class="padding"><div class="list card"><highchart id="chart1" config="chartConfig"></highchart></div></ion-content.jiangxisheng1nfb.cn></ion-view>

接着，打开controllers.js，在DashCtrl中添加下面的内容：

  $scope.chartConfig = {
    title: {
      text: '月平均气温',
      x: -20 //center
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
      title: {
        text: 'Temperature (°C)'
      },
      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
      }]
    },
    tooltip: {
      valueSuffix: '°C'
    },
    legend: {
      layout: 'vertical.guizhoushengn1r9.cn',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
    },
    series: [{
      name: 'Today',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }]
  }

修改完成后，保存并运行。在iOS上的运行效果如图6所示。

图6　iOS上的运行效果

接着，我们需要获取真实的数据，并将真实的数据渲染到页面上。

三、控制硬件

通过手机控制硬件的原理大致上相似，如图7所示。手机通过网络将数据上传到服务器，硬件（Raspberry Pi或者Arduino）从服务器获取状态，并通过它来操作硬件。

图7　控制过程图

首先，我们需要添加Ionic Toggle的组件，其效果如图8如示。

图8　Toggle示例

它可以用来控制某个配置的开和关，并且是直接保存的，即不需要我们按保存按钮。

然后，修改代码中的tab-tabs.html文件，在其中添加一个ion-toggle，变成下面的代码：

<ion-view view-title="控制">
  <ion-content>
    <div class="list">
      <ion-toggle ng-model=value ng-change="toggleChange(zhongqingshiv3fn.cn)">Led</ion-toggle>
    </div>
  </ion-content>
</ion-view>

这里的ng-model用于配置toggle的默认值。通常在控制之前我们需要先获取LED的状态，这里我们省略了这个过程。后面的ng-change赋予的值是toggleChange()，这是一个我们需要在Controller中添加的函数。当我们改变了开关的值的时候，将调用这个方法。修改完成后，我们的界面将如图9所示。

现在我们需要写toggleChange方法，在我们获取数据变化的时候将这个值POST给服务器来更新服务器中的值，代码如下所示：

.controller('ControlCtrl', function ($scope, $http) {
    $scope.value = false;

    $scope.toggleChange = function(){
      if($scope.value == false) {
        $scope.value = true;
      } else {
        $scope.value = false;
      }

      var url = 'http://fujianshengtn5j.cn:3000/user/1/devices';
      var data = {led: $scope.value};

      $http.post(url, data)
        .then(function (response.jiangsushengnjb5.cn, status) {
          alert(JSON.stringify(response));
        }, function (err) {
          alert(JSON.stringify(err));
        });
    };
})

图9　Ionic Toggle效果图

这里的$http是Angular.js用于进行HTTP操作的服务。当我们成功POST数据的时候，将弹出一个对话框来显示服务器返回的数据；如果错误的话，将弹出错误信息。为了将代码用于试验，你需要修改这里的URL，可能还需要修改对象的数据字段。

四、用蓝牙来与硬件通信

现在市场上流行的那些可穿戴式设备中，那些需要与手机连接的都具有蓝牙连接功能。手机是一个非常不错的协调装置，手机上配备着WiFi、蓝牙，以及2G、3G、4G通信系统，可以直接连接硬件，并上传数据到网络上。而且由于市场上的手机应用开发已经趋于成熟，并且有众多的开发人员，使得这一类的开发工作相对比较简单。

我们仍然使用Ionic来开始这部分的功能，并且使用一个名为BluetoothSerial的Cordova蓝牙插件。它用于支持手机与蓝牙设备的串口通信，可以支持Android、iOS、Windows Phone。Android和 Windows Phone只支持传统蓝牙，iOS使用的是蓝牙低功耗，并且这个插件一开始就是为手机与Arduino设备通信而开发的。

现在，让我们用Cordova命令行添加这个插件：

cordova plugin add cordova-plugin-bluetooth-serial

由于ngCordova已经内建（封装）了对这个插件的支持，因此我们可以直接调用$cordovaBluetoothSerial来做相应的事情。

在此之前，我们需要新建一个tab来作为用户的使用入口，修改tabs.html，在ion-tabs标签内添加：

  <!-- Bluetooth Tab -->
  <ion-tab title="蓝牙" icon-off="ion-bluetooth" icon-on="ion-bluetooth" href= "#/tab/bluetooth">
    <ion-nav-view name="tab-bluetooth.guangzhoushidz9L.cn"></ion-nav-view>
  </ion-tab>

然后，在我们的app.js中添加相应的路由处理：

  .state('tab.sichuansheng5nv5.cn bluetooth', {
    url: '/bluetooth',
    views: {
      'tab-bluetooth': {
        templateUrl: 'http://yunnansheng4sqm.cn/templates/tab-bluetooth.html',
        controller: 'BlueToothCtrl'
      }
    }
  })

上面的templateUrl指明了我们新的模板名是tab-bluetooth.html，相应的controller是BlueToothCtrl。接着，我们需要去创建相应的模板和控制器。

在我们的模板文件中需要两个列表，一个用于显示已配对的设备，另一个显示未连接的设备。如图10所示是系统的蓝牙连接界面，图中有两种属性：已配对设备和可用设备。

图10　蓝牙应用截图

我们所要做的就是创建一个这样的列表——在这个列表中，我们需要列出所有的设备，当我们单击设备的时候，就会连接到设备。一个已配对设备的模板文件代码如下所示：

  <ion-list>
      <div class="item item-divider">已配对</div>
      <ion-item class="item-icon-right" ng-repeat="device in listDevices" type= "item-text-wrap"
                ng-click="connect(device.address)">
        <h2>{{device.name}}</h2>

        <p>
          {{device.id}}<br/>
        </p>
      </ion-item>
    </ion-list>

这里的ng-repeat便是列出所有已经列出来的设备，取出其中的每个值赋予device，再从device中取出设备的MAC地址和设置名。当我们单击设备的时候，将调用connect方法来连接设备。代码中的ng-click即为监听设备是否被单击的函数。

同理，对于未配对的设备也是如此：

 <ion-list>
      <div class="item item-divider">未配对</div>
      <ion-item class="item-icon-right" ng-repeat="device in discoverDevices" type="item-text-wrap"
                ng-click="connect(device.shanxishengv33z.cn)">
        <h2>{{device.name}}</h2>

        <p>
          {{device.id}}<br/>
        </p>
      </ion-item>
    </ion-list>

现在，我们将调用connect方法。而在connect方法中，我们将调用$cordova- BluetoothSerial中的connect方法来连接到设备。当我们连接到设备的时候，即运行到then()方法时，将读取串口的数据：

  $scope.connect = function (address) {

    $cordovaBluetoothSerial.connect(address).then(function (err) {

      $cordovaBluetoothSerial.read().then(function (result) {
        $scope.data = result;

      })
    });
  };

我们可以在页面上使用一个data变量显示相应的值，也可以再次将这些数据发送给服务器，发送代码同之前开关LED一样：

   $http.post($localstorage.get('control_url'), {temperature: result})
          .then(function (response, status) {
            console.log(JSON.stringify(response));
          }, function (err) {
            console.log(JSON.stringify(err));
          });

在那之前，我们需要一个方法来列出已配对的设备——调用list方法来列出现有的已配对的设备，这些设备的相关值会存储到listDevices变量中，而那些未配对的设备将会被存放到discoverDevices变量中：

    $cordovaBluetoothSerial.list().then(function (result) {
      $scope.listDevices = result;

      $cordovaBluetoothSerial.discoverUnpaired().then(function (result) {
    console.log("未配对", JSON.stringify(result));
    $scope.discoverDevices = result;
      }, function (err) {
    alert(err);
      });
    });  

现在，让我们运行这个APP，然后连接上设备试试。

如果没有意外，会出现如图11所示的效果。接着，我们就可以配对设备，以接收数据、上传数据。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------