Category Archives: Ionic

Ionic 3 Push Notification

Keperluan :

  1. Google app id/ sender id(From firebase console)
  2. Server key(From firebase console)
  3. One Signal appId (From One Signal Dashboard after creating one signal application)

Google app id/ Sender id

  1. Login (https://console.firebase.google.com/)
  2.  “Add project”
  3. Isi maklumat projek.
  4. Klik gear icon > Project setting> Cloud Messaging. Dapatkan server key and sender id bawah tab cloud messaging tab.

Ionic 3 dengan One Signal Push Notification Service

  1. (https://onesignal.com)
  2. Selepas login create new app
  3. Create new One Signal application.
  4. Klik app yang hendak buat notifikasi
  5. Pilih (Google Android GCM) dan NEXT.
  6. Masukkan server key and google project number(sender id or Google app id)
  7. Kemudian pilih Ionic and NEXT.
  8. Akan dapat One Signal App Id. Id yang akan digunakan dalam ionic. Klik “check subscribed users” untuk test.

Push notification in ionic 3 application.

Install the Cordova and Ionic Native plugins:

$ ionic cordova plugin add onesignal-cordova-plugin
$ npm install --save @ionic-native/onesignal

Usage

var notificationOpenedCallback = function(jsonData) {
 alert('notificationOpenedCallback: ' + JSON.stringify(jsonData));
 };
window["plugins"].OneSignal
 .startInit("ff919ce0-8b1e-4e97-8215-04aef5118800", "286346003172")
 .handleNotificationOpened(notificationOpenedCallback)
 .endInit();

Rujukan

node -v –> version node
npm -v

install ionic
-> npm install -g ionic cordova

create project
–> ionic start MyDecApp blank

start service kat dalam folder project
–> ionic serve

create file baru
–> ionic g page Profile

tgk template
–> ionic start –list

generate provider
–> ionic g provider webservices

remove platform android
–> ionic cordova platform remove android

add platform android
–> ionic cordova platform add android

built android
–> ionic cordova build android

tukar icon
–> ionic cordova resources

built android
google play
–> ionic cordova build android –prod –release

keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-alias <– run sekali je kunci ni

keytool -genkey -v -keystore upminfokey.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upminfo

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.jks android-release-unsigned.apk my-alias

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore upminfokey.jks android-release-unsigned.apk upminfo

zipalign -v 4 android-release-unsigned.apk HelloWorld.apk

zipalign -v 4 android-release-unsigned.apk UPMScanner.apk

apksigner verify HelloWorld.apk

apksigner verify UPMScanner.apk

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>