Monthly Archives: April 2016

ionic push notification

  1. ionic start MyApp tabs
  2. ionic add ionic-platform-web-client
  3. ionic plugin add phonegap-plugin-push –variable SENDER_ID={{ Project number google }}
  4. ionic io init
  5. ionic config set dev_push false
  6. ionic config set gcm_key {{ Project number google }}
  7. ionic platform add android
  8. ionic build android
  9. ionic run android –device

full note : http://docs.ionic.io/docs/push-quick-start

Start ionic

  1. node install
  2. command
    1. npm install -g ionic
    2. npm install -g gulp
    3. npm install -g bower
    4. npm install -g cordova
  3. android sdk/studio & xcode (mac only)
  4. download chrome livereload plugin : https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en

Test :

  • ionic -v
  • gulp -v
  • bower -v

// bower – package manager front end framework
bower install jquery
bower update jquery

 

New Project

  1.  ionic start gstcalculator
    1. Create an ionic.io account to send Push Notifications and use the Ionic View app?
      (Y/n): n
  2.  ionic serve
    1. Multiple addresses available.
      Please select which address to use by entering its number from the list below:
      1) 192.168.244.1 (VMware Network Adapter VMnet1)
      2) 192.168.153.1 (VMware Network Adapter VMnet8)
      3) 172.16.99.146 (Wi-Fi)
      4) localhost
      Address Selection: 4 <– choose localhost
  3. quit @ q
  4. ionic serve –lab
    1. Untitled
  5. Open atom
    1. Change title
      Untitled
  6. Ubah CSS
    1. http://ionicframework.com/docs/components/
  7. Insert input type
    1. Untitled
  8. Insert checkbox and button
    1. <ion-content>
      <div class=”list list-inset”><div class=”item item-input”>
      <input type=”text” placeholder=”Amount”>
      </div>
      <!– .item.item-toggle{Inclusive GST?}>lable.toggle toggle-assertive>input:checkbox+.track>.hanlde –>
      <div class=”item item-toggle”>
      Inclusive GST?
      <label for=”” class=”toggle toggle-assertive”>
      <input type=”checkbox” name=”” id=””>
      <div class=”track”>
      <div class=”handle”></div>
      </div>
      </label>
      </div></div>
      <div style=”text-align:center”>
      <button class=”button icon-left ion-calculator button-positive”>
      Submit
      </button>
      </div>
      </ion-content>
  9. Buka app.js tambah controller
    angular.module(‘starter’, [‘ionic’]).controller(‘GstCtrl’, function($scope){$scope.data = {
    amount: 0
    }; // user input$scope.calculateGst = function (){
    console.log($scope.data.amount);
    }})
  10.  Terima dari controller
    1. Untitled
  11. Calculate di controller
    1. Untitled
    2. .controller(‘GstCtrl’, function($scope){$scope.data = {
      amount: 0,
      inclusiveGst: false,
      subTotal: 0,
      gstAmount: 0,
      grandTotal: 0
      }; // user input$scope.calculateGst = function (){
      console.log($scope.data.amount);
      console.log($scope.data.inclusiveGst);if($scope.data.inclusiveGst){
      $scope.data.subTotal = $scope.data.amount / 1.06;
      $scope.data.gstAmount = $scope.data.amount * 0.06;
      $scope.data.grandTotal = $scope.data.amount;
      }
      else {
      $scope.data.subTotal = $scope.data.amount;
      $scope.data.gstAmount = $scope.data.amount * 0.06;
      $scope.data.grandTotal = $scope.data.subTotal * 1.06;
      }
      }
      })
  12. Papar hasil dari controller
    1. Untitled
    2. <div class=”list list-insert”>
      <div class=”item”>
      Sub Total
      <span class=”item-note” ng-bind=”data.subTotal | currency:’RM ‘:2″>
      <i class=”icon ion-search placeholder-icon”></i>
      RM0.00
      </span>
      </div>
      <div class=”item”>
      GST Amount
      <span class=”item-note” ng-bind=”data.gstAmount | currency:’RM ‘:2″>
      RM0.00
      </span>
      </div>
      <div class=”item”>
      Grand Total
      <span class=”item-note” ng-bind=”data.grandTotal | currency:’RM ‘:2″>
      RM0.00
      </span>
      </div>
      </div>

Mari kenal Javascript

console.log(‘Hello World’);

// single js comment

/*multiple
line commment */

/* js statements :
value, operator, expression, keyword & comment */

// variable declaration
var x = 1; // number (integer)
var y = 1.2; // number(float)
var s = “Hello”; // string
var p = ‘World’; // string

// = assingment operator
// arithmetic operator
var a = 6;
var b = 2;
console.log(a + b); // 8
console.log(a – b); // 3
console.log(a / b); // 3
console.log(a * b); // 12
console.log(s + ” ” + p); // concat

// case sensitive
var firstName = ‘Hezrul’;
console.log(firstName); // undefined

var last_name = ‘Hezrul’;
var state = “Negeri Sembilan”;
console.log(last_name + ‘ ‘ + state);

var $country = “malaysia”;
var _price = 5.60;
console.log($country + ‘ ‘ + _price);

// string operator
var text1 = “John”;
text1 += ” Doe”; // text1 = text1 + ” Doe”;

console.log(text1);

// comparison operator
// >, <, >=, <=, ==, !, !=, ===, !==
if(a > b) {
console.log(“a greater than b”);
}

if(1 === “1”) { // not true
console.log(“equal value and equal type”);
}else {
console.log(“equal value”);
}
//ternary operator
// variableName = (condition) ? true : false
var age = 10;
var voteable = (age < 18 ) ? “Too young” : “Old enough”;
console.log(voteable); // Too young

// array
var cars = [“Proton”, “Volvo”, “BMW”];
// var cars = new Array(“Proton”, “Volvo”, “BMW”);

// access the elements of an Array
console.log(cars[0]);
console.log(cars[1]);
console.log(cars[2]);

var person = [‘John’, ‘Doe’, 46];
console.log(“Name : ” + person[0] + ‘ ‘ + person[1] + “\nAge : ” + person[2] );

console.log(person);

// array properties & methods
console.log(cars.length); // 3
console.log(person.length);
person.push(“US”);
console.log(person); //[“John”, “Doe”, 46, “US”]
person.pop();
console.log(person); //[“John”, “Doe”, 46]

// associative array
var student = [];
student[‘firstName’] = “Hezrul”;
student[‘lastName’] = “Mifzal”;
console.log(student);
console.log(student.length); //0
console.log(student[0]); // undefined
console.log(student[‘firstName’]); //Hezrul

// loop
for (i = 0; i < cars.length; i++) {
console.log(cars[i]);
}

cars.forEach(function(element, index){ // php foreach($arr as $key => $value)
console.log(index + ” => ” + element);
})

//isStrind, isInt,
if (Array.isArray(cars)) {
console.log(‘variable cars is array’);
}

if(cars instanceof Array){
console.log(‘variable cars is array’);
}

console.log(typeof cars); // object