Mobile phone hybrid app and object networking platform development

Introduction of Ionic

Cordova is an Open-source mobile device development framework that provides a set of device-related APIs through which mobile applications can access native device features such as cameras, microphones, and so on.

Ionic is a Cordova, advanced development framework that uses HTML 5 to build mobile applications, claiming to be "a combination of Navtie and HTML 5". This framework provides a number of basic mobile user interface examples, such as lists, tab bars and trigger switches, and provides some examples of complex visual layouts, such as the slide Out menu.

Compared to applications based on the Cordova framework, it has the following advantages: performance is better than using jquery. Based on Angluar JS. Original biochemistry. Beautifully designed. Learning fun. Built for geeks.

Ionic follows the view control mode, is easy to understand, and is similar to the cocoa touch frame. We need to install this framework before we operate:

NPM install-g Cordova Ionic

During installation, if you encounter some network problems, you can try to use the following command, Taobao software Source:

NPM Config Set Registry https://registry.npm.zhengzhoushirlp3.cn

Once the installation is complete, we can use ionic to create the project. We can use the following command to create an application named Iotapp:

In this process, it will download the existing project scaffolding from the GitHub. The creation and installation process is shown in Figure 1.

Figure 1 Ionic installation process Figure 1

At the same time, there are some hints, as shown in Figure 2.

Now we need to go to this directory to execute the following command to build the SASS environment:

Ionic Setup Sass

You can then perform the following command to start the application:

Ionic serve

Finally, you'll see a similar interface in your browser, as shown in Figure 3, which is a screenshot of the application running on iOS.

Figure 2 Ionic installation process Figure 2

Fig. 3 screenshot on iOS

To allow it to run on the phone, we need to add this platform first:

Ionic Platform Add iOS

If you're using an Android phone, Nokia Lumia phone, you need to change the top iOS to Android or WP8. Figure 4 is the process of adding an Android platform.

Figure 4 Adding an Android platform on the Ionic

Now, we can run this project on the phone. Before you run the following code, you need to make sure that your Android phone is turned on in debug mode. If you have an iOS system or a Windows Phone system, make sure you already have a developer account. Of course, if it is the user of other systems, do not need to worry, Ionic also support Amazon-fireos, BlackBerry10, Firefoxos, webOS and other operating systems.

Ionic run Android

You may be curious about how ionic or Cordova works, but if you've developed Android apps or Web apps, you'll have some experience. After we have created the project, the project directory structure is shown in Figure 5.

Here's what we can learn more about the role of these catalogs.

The hook directory contains commands for customizing Cordova, which can perform different things in different order, such as After_build, Before_build, which is done before and after the build.

Figure 5 Ionic directory structure

The Node_modules directory is where the node package module is placed.

The platforms directory contains platform-related source code, including the following folder: The Android directory contains the complete Android code after the project has been compiled. The iOS directory contains the complete iOS code after the project has been compiled. Platforms.json contains versions of these platforms--cordova on these platforms.

The plugins directory will contain the contents of some Third-party plug-ins.

Resources are primarily used to place resource files, such as launch interfaces, icons, and so on.

SCSS is a CSS preprocessor that contains a number of styles in the main category.

www This directory is our work directory, contains the following folders, these folders are truly: CSS img js lib templates index.html

. BOWERRC: The default front-end library installation directory is configured.
. Editorconfig: Editor-related configuration.
. Gitignore:git related configuration.
The Bower.json:bower configuration contains the name and information of the front-end that needs to be installed to install the front-end library.
Config.xml: Project-related configuration, which will have the app name, package name, profile, resolution, and so on.
Gulpfile.js: Contains some commands to build the system.
Ionic.project:Ionic project configuration.
Package.json:node Package Management configuration file.

Look at the directory you may know that we are using a code to build a different platform code. First of all, when we add the platform, we will download some basic code of the corresponding system, and also download the corresponding platform code. Then, as we run, the contents of the WWW directory are copied to a new directory. Finally, when running, it will be packaged and run directly into this directory.

And Cordova will serve as a bridge--for connecting WebView and native APIs. Second, the trend chart

Because they are all Web applications, we can use Highchart.js as a drawing library. Since ionic is using Angluar, we need to install a plugin called Ngcordova first. Ngcordova is a Cordova API based on the encapsulation of many open source Angular.js extensions, so that developers in the Angular.js code to access the device API capabilities.

First, we need to install this plugin first:

Bower Install Ngcordova;

Then, add the following code to index.html and we can use it in controller:

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

In order to use highcharts above, we still need to install jquery, highcharts.changchunshin3zx.cn, and Highcharts-ng:

Bower Install jquery
Bower install Highcharts Bower Install qinghaisheng8oqe.cn

and add the appropriate libraries to the index.html file:

<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>

Now, we can modify their code. Open the tab-dash.html and replace the contents with the following:

<ion-view view-title= "Dashboard" ><ion-content class= "padding" ><div class= "list card" >< Highchart id= "Chart1" config= "Chartconfig" >
 
Next, open Controllers.js and add the following in Dashctrl:

  $scope. Chartconfig = {
    title: {
      text: ' Average temperature of the month ',
      x: -20//center
    },
    Xaxis: {
      categories: ['] ' Feb ', ' Mar ', ' Apr ', ' may ', ' June ',
        ' may ', ' Aug ', ' Sep ', ' Oct ', ' Nov ', ' Dec ' '
    },
    YAxis: {The
      title: {
        T Ext: ' 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]}
    ]
  
 
After the modification is complete, save and run. The effect on iOS is shown in Figure 6.


Fig. 6 Operating effect on iOS


Next, we need to get the real data and render the real data to the page. Third, control hardware

The principle of using mobile phone control hardware is broadly similar, as shown in Figure 7. Mobile phones upload data over the network to the server, hardware (Raspberry Pi or Arduino) from the server to obtain state, and through it to operate the hardware.


Figure 7 Control Process diagram


First, we need to add the Ionic toggle component, and the effect is shown in Figure 8.


Figure 8 Toggle Example


It can be used to control the opening and closing of a configuration, and is saved directly, that is, we do not need to press the Save button.

Then, modify the tab-tabs.html file in the code, add a ion-toggle to it, and become the following code:

<ion-view view-title= "Control" >
  <ion-content>
    <div class= "list" >
      <ion-toggle Ng-model =value ng-change= "Togglechange (zhongqingshiv3fn.cn)" >Led</ion-toggle>
    </div>
  </ Ion-content>
</ion-view>
 
The Ng-model here is used to configure the default values for toggle. Usually we need to get the status of the LED before we control it, we omit the process here. The value given by the Ng-change is Togglechange (), which is a function we need to add to the controller. This method is invoked when we change the value of the switch. Once the modifications are complete, our interface will be shown in Figure 9.

Now we need to write the Togglechange method and post this value to the server to update the value on the server when we get the data changes, as shown in the following code:

. 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));})
        ;
    }
 

Fig. 9 Ionic Toggle Effect Chart


The $http here is the service that Angular.js uses for HTTP operations. When we successfully post the data, a dialog box pops up showing the data returned by the server, and if the error occurs, the error message pops up. To use the code for experimentation, you need to modify the URL here, and you may need to modify the object's data field. Four, with the Bluetooth to communicate with the hardware

Now the popular wearable devices in the market, those who need to connect with the mobile phone has Bluetooth connectivity. Mobile phone is a very good coordination device, the phone is equipped with WiFi, Bluetooth, as well as 2G, 3G, 4G communication system, you can directly connect the hardware, and upload data to the network. And because the market of mobile phone application development has tended to mature, and has a large number of developers, making this kind of development work relatively simple.

We still use ionic to start this part of the function and use a Cordova Bluetooth plug-in called Bluetoothserial. It is used to support the mobile phone and Bluetooth device serial communication, can support Android, IOS, Windows phone. Android and Windows phone only support traditional Bluetooth, and iOS uses Bluetooth low-power, and the plugin was first developed to communicate with Arduino devices.

Now, let's add this plugin using the Cordova command line:

Cordova Plugin Add cordova-plugin-bluetooth-serial
 
Since Ngcordova has built (encapsulated) support for this plugin, we can call $cordovabluetoothserial directly to do the appropriate thing.

Before that, we need to create a new tab to use as a user portal, modify tabs.html, and add to the Ion-tabs tab:

  <!--bluetooth tab-->
  <ion-tab title= "bluetooth" icon-off= "Ion-bluetooth" icon-on= "Ion-bluetooth" href= "#/tab/" Bluetooth ">
    <ion-nav-view name=" tab-bluetooth.guangzhoushidz9l.cn "></ion-nav-view>
  </ Ion-tab>
 
Then, add the corresponding routing process in our app.js:

  . State (' tab.sichuansheng5nv5.cn bluetooth ', {
    URL: '/bluetooth '), views
    : {
      ' Tab-bluetooth ': {
        Templateurl: ' http://yunnansheng4sqm.cn/templates/tab-bluetooth.html ',
        controller: ' Bluetoothctrl '
      }
    }
  })
 
The templateurl indicates that our new template name is tab-bluetooth.html and the corresponding controller is Bluetoothctrl. Next, we need to create the appropriate template and controller.

We need two lists in our template file, one for displaying paired devices, and another for disconnected devices. As shown in Figure 10 is the Bluetooth connection interface of the system, there are two properties in the diagram: The paired device and the available device.


Figure 10 Bluetooth Application screenshot


All we have to do is create a list--in this list, we need to list all the devices, and when we click on the device, we connect to the device. The template file code for a paired device looks like this:

  <ion-list>
      <div class= "Item Item-divider" > Paired </div>
      <ion-item class= "Item-icon-right "ng-repeat=" Device in Listdevices "type=" Item-text-wrap "
                ng-click=" Connect (device.address) ">
        
 
The ng-repeat here is to list all the listed devices, remove each value given to device, and remove the MAC address and setting name from the device. When we click on the device, the Connect method is invoked to connect the device. The Ng-click in your code is the function that listens for the device to be clicked.

Similarly, this is true for devices that are not paired:

<ion-list>
      <div class= "Item Item-divider" > not paired </div>
      <ion-item class= "Item-icon-right "ng-repeat=" Device in Discoverdevices "type=" Item-text-wrap "
                ng-click=" Connect (device.shanxishengv33z.cn) " >
        
 
Now, we'll call the Connect method. In the Connect method, we will call the Connect method in $cordova-bluetoothserial to connect to the device. When we connect to the device, that is, when we run to the then () method, we will read the serial port data:

  $scope. connect = function (address) {

    $cordovaBluetoothSerial. Connect (address). Then (function (Err) {

      $ Cordovabluetoothserial.read (). Then (function (Result) {
        $scope. data = result;

      })
    };
  
 
We can use a data variable on the page to display the corresponding value, or you can send the data to the server again, sending the same code as the previous switch 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);
          });
 
Before that, we need a way to list the paired devices--Call the list method to list the paired devices that appear, the associated values of those devices are stored in the listdevices variable, and those that are not paired will be stored in the discoverdevices variable:

    $cordovaBluetoothSerial. List (). Then (function (Result) {
      $scope. listdevices = result;

      $cordovaBluetoothSerial. discoverunpaired (). Then (function (Result) {
    Console.log ("Not Paired", json.stringify (Result) );
    $scope. discoverdevices = result;
      }, Function (ERR) {
    alert (err);})
    ;  
 
Now, let's run this app and then connect to the device and try it.

If there are no surprises, the effect appears as shown in Figure 11. Then we can match the device to receive data and upload the data.




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