Gustavo
Published © MIT

Create an App in Ionic Framework

Use the Ionic framework to build an app that can control your hardware or hit any REST API.

IntermediateProtip8 hours7,002
Create an App in Ionic Framework

Things used in this project

Hardware components

Photon
Particle Photon
×1
Bluz DK
Bluz DK
×1

Software apps and online services

Ionic framework
Blynk
Blynk
Ubidots
Ubidots
AWS IoT
Amazon Web Services AWS IoT

Story

Read more

Code

index.html

HTML
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>

  <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">

  <script src="lib/ionic/js/ionic.bundle.js"></script>
  <script src="cordova.js"></script>
  <script src="js/app.js"></script>

</head>

<!--  this tells angularJS what code to run -->
<!--  so it will run the controller indicated by ng-controller in that ng-app -->
<body ng-app="MY_APP" ng-controller="MyFirstAppCtrl">

  <ion-pane>
    <ion-header-bar class="bar-positive">
      <h1 class="title">My First App</h1>
    </ion-header-bar>
    <ion-content>
      temperature: {{temperature}}
      <br><br>

      <!-- this creates a button and when clicked it calls the function
       callFunctionOnTheParticleCloud() in our controller -->
      <div class="padding">
        <button class="button button-block button-positive ion-upload" ng-click="callFunctionOnTheParticleCloud()">
          Tap here to send a POST
        </button>
      </div>

      <br><br>
      <h3>Debug info</h3><br>
      response status: {{responseStatus}} <br>
      response body: {{responseDescription}} <br>


        <ion-refresher
          pulling-text="Pull to send a GET..."
          on-refresh="getVariableFromTheParticleCloud()" >
        </ion-refresher>

    </ion-content>
  </ion-pane>
</body>

</html>

app.js

JavaScript
//we declare here a function so the app variable that runs our code is not a global variable
// but instead is a local variable to the function
(function() {

  //we declare here our app. This is called by index.html with the directive ng-app
  //<body ng-app="MY_APP" ng-controller="ParticleCtrl">
  var app = angular.module('MY_APP', ['ionic'])

  //we declare here our controller. This is run in the index.html by the directive ng-controller
  //<body ng-app="MY_APP" ng-controller="ParticleCtrl">
  app.controller('MyFirstAppCtrl', function($scope, $http) {

    //let's declare some variables
    $scope.temperature = "";
    $scope.responseStatus = "";
    $scope.responseDescription = "";

    //this is the declaration of the function that sends the http request to the Particle Cloud
    $scope.callFunctionOnTheParticleCloud = function() {
      $scope.responseStatus = "Calling a function on the Particle cloud";
      $scope.responseDescription = "";

      var requestVariable = {
        method: 'POST',
        url: 'https://api.particle.io/v1/devices/0123456789abcdef01234567/pool_get_tmp',
        headers: {
          'Authorization': "Bearer 1234"
        },
        data: {
          test: 'test'
        }
      }

      $http(requestVariable).then(function(response) {
        $scope.responseStatus = response.status;
        $scope.responseDescription = response.data;
      }, function(response) {
        $scope.responseStatus = response.data || "Request failed";
        $scope.responseDescription = response.status;
      });
    };

    //this is the declaration of the function that sends the http request to the Particle Cloud
    $scope.getVariableFromTheParticleCloud = function() {
      $scope.responseStatus = "Getting a variable from the Particle cloud";
      $scope.responseDescription = "";

      var getVariable = {
        method: 'GET',
        url: 'https://api.particle.io/v1/devices/0123456789abcdef01234567/pool_tmp',
        headers: {
          'Authorization': "Bearer 1234"
        },
        data: {
          test: 'test'
        }
      }

      $http(getVariable).then(function(response) {
        $scope.responseStatus = response.status;
        $scope.responseDescription = response.data;
        //this statement gets the temperature out of the result json field
        // example: "result":"{\"t\":27.69}"
        //source: http://stackoverflow.com/questions/7033334/how-to-extract-number-from-a-string-in-javascript
        $scope.temperature = parseInt(response.data.result.replace(/[^0-9\.]/g, ''), 10);

      }, function(response) {
        $scope.responseStatus = response.data || "Request failed";
        $scope.responseDescription = response.status;
      });

      //signal that the refresh is over
      $scope.$broadcast('scroll.refreshComplete');

    };

  });

  app.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      if (window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        cordova.plugins.Keyboard.disableScroll(true);
      }
      if (window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })
}());

Credits

Gustavo

Gustavo

33 projects • 301 followers
I focus on creating Particle IoT solutions coupled with mobile and web applications. Available for contract work at gusgonnet@gmail.com.

Comments

Related channels and tags
  • Amazon Web Services
  • Bluz
  • Blynk
  • Home Automation
  • Particle
  • Ubidots