Example 4: Showing Promotion With QR Code and Push Notification

This example will show you how to push notification to your IONIC app. Please make sure you have chosen “Y” when creating the app:

Make sure you have signup the IONIC account, and you should be able to login https://apps.ionic.io/ :

After sign-up the account, please follow the below steps:

  1. npm install –g bower
  2. ionic add ionic-platform-web-client
  3. ionic plugin add phonegap-plugin-push
  • Fetching “phonegap-plugin-push” plugin into your project
  1. ionic io init
  • Setting up the setup IONIC account with Email and Password
  • After it is done, you should find your app on https://apps.ionic.io/apps :
  1. ionic config set dev_push true
  • Setting your project in development mode, please note that you may need to change it to false when deploying to production.
  1. Update C:\workspace_ionic\itBlogsApp\www\js\app.js , adding below code after $ionicPlatform.ready(function() {

//Push Notification

var push = new Ionic.Push({

“debug”: true

});

push.register(function(token) {

console.log(“Device token:”,token.token);

});

  1. Update C:\workspace_ionic\itBlogsApp\www\js\app.js , add below code after .state(‘app.product’

  .state(‘app.promotionlists’,       { url: ‘/promotionlists’,                                   views: { ‘menuContent’: { templateUrl: ‘templates/promotionlists.html’,   controller: ‘PromotionListsController’ } } })

  .state(‘app.promotion’,                               { url: ‘/promotionlists/:promotionId’,      views: { ‘menuContent’: { templateUrl: ‘templates/promotion.html’,           controller: ‘PromotionController’ } } })

  1. Update C:\workspace_ionic\itBlogsApp\www\templates\menu.html, add the this code

<ion-item menu-close href=”#/app/promotionlists”>Promotion QR Code</ion-item>       

after

<ion-item menu-close href=”#/app/productlists”>Products Show Room</ion-item>

 

  1. Update C:\workspace_ionic\itBlogsApp\www\js\controllers.js , adding below code after .controller(ProductController, function($scope, $http, $stateParams)

.controller(‘PromotionListsController’, function($scope, $http, $stateParams) {

                $scope.getData = function() {

                                $http.get(“http://localhost:8080/SpringRestfulExample/promotion”)

                                .success(function(data, status) {

                                                $scope.promotionlists = data;

                                })

                                .error(function(data, status) {

                                                console.log(‘PromotionListsController getData Error…’, status);

                                });

    };

                $scope.getData();

})

.controller(‘PromotionController’, function($scope, $http, $stateParams) {

                $scope.getData = function() {

                                $http.get(“http://localhost:8080/SpringRestfulExample/promotion/”+$stateParams.promotionId)

                                .success(function(data, status) {

                                                $scope.promotion = data;

                                })

                                .error(function(data, status) {

                                                console.log(‘PromotionController Error…’, status);

                                });

    };

                $scope.getData();

})

 

  1. Finally, adding productlists.html and product.html to C:\workspace_ionic\itBlogsApp\www\templates\ . Please find below codes:

promotionlists.html

<ion-view view-title=”Promotion QR Code”>

  <ion-content>

                <div class=”card”>

                                <div class=”item item-divider”>

                                                Promotion QR Code

                                </div>

                                <div class=”item item-text-wrap”>

                                                <div class=”row” style=”border-bottom: 1px solid black; background-color:mintcream;”>

                                                                <div class=”col-40″>

                                                                                <a href=”#” ng-click=”orderByField=’name’; reverseSort = !reverseSort”>

                                                                                  Name <span ng-show=”orderByField == ‘name'”><span ng-show=”!reverseSort”><img src=”/img/arrow-up-b.png” width=”10px”></span><span ng-show=”reverseSort”><img src=”/img/arrow-down-b.png” width=”10px”></span></span>

                                                                                </a>

                                                                </div>

                                                                <div class=”col-20″>

                                                                                <a href=”#” ng-click=”orderByField=’startDate’; reverseSort = !reverseSort”>

                                                                                  From Date <span ng-show=”orderByField == ‘startDate'”><span ng-show=”!reverseSort”><img src=”/img/arrow-up-b.png” width=”10px”></span><span ng-show=”reverseSort”><img src=”/img/arrow-down-b.png” width=”10px”></span></span>

                                                                                </a>

                                                                </div>

                                                                <div class=”col-20″>

                                                                                <a href=”#” ng-click=”orderByField=’endDate’; reverseSort = !reverseSort”>

                                                                                  To Date <span ng-show=”orderByField == ‘endDate'”><span ng-show=”!reverseSort”><img src=”/img/arrow-up-b.png” width=”10px”></span><span ng-show=”reverseSort”><img src=”/img/arrow-down-b.png” width=”10px”></span></span>

                                                                                </a>

                                                                </div>

                                                                <div class=”col-10 col-offset-10″>

                                                                                <a href=”#” ng-click=”orderByField=’status’; reverseSort = !reverseSort”>

                                                                                  Status <span ng-show=”orderByField == ‘status'”><span ng-show=”!reverseSort”><img src=”/img/arrow-up-b.png” width=”10px”></span><span ng-show=”reverseSort”><img src=”/img/arrow-down-b.png” width=”10px”></span></span>

                                                                                </a>

                                                                </div>

                                                </div>

                                                <div style=”margin-top: 5px”>

                                                                <div class=”row” ng-repeat=”promotion in promotionlists | orderBy:orderByField:reverseSort”>

                                                                                <div class=”col-40″><a href=”#/app/promotionlists/{{promotion.id}}”>{{promotion.name}}</a></div>

                                                                                <div class=”col-20″>{{promotion.startDate | date:’yyyy-MM-dd’}}</div>

                                                                                <div class=”col-20″>{{promotion.endDate | date:’yyyy-MM-dd’}}</div>

                                                                                <div class=”col-10 col-offset-10″>{{promotion.status}}</div>

                                                                </div>

                                                </div>

                                </div>

                </div>

  </ion-content>

</ion-view>

promotion.html

<ion-view view-title=”Promotion Details”>

  <ion-content>

                <div class=”card”>

                                <div class=”item item-divider”>

                                                <h2 class=”title”>{{promotion.name}}</h2>

                                </div>

                                <div class=”item item-text-wrap”>

                                                <div class=”row”>

                                                                <div class=”col-25″>Details</div>

                                                                <div class=”col-100 col-offset-100″><p>{{promotion.details}}</p></div>

                                                </div>

                                                <div class=”row”>

                                                                <div class=”col-25″>From Date</div>

                                                                <div class=”col-100 col-offset-100″><p>{{promotion.startDate | date:’yyyy-MM-dd’}}</p></div>

                                                </div>

                                                <div class=”row”>

                                                                <div class=”col-25″>To Date</div>

                                                                <div class=”col-100 col-offset-100″><p>{{promotion.endDate | date:’yyyy-MM-dd’}}</p></div>

                                                </div>

                                                <div class=”row”>

                                                                <div class=”col-25″>Status</div>

                                                                <div class=”col-100 col-offset-100″><p>{{promotion.status}}</p></div>

                                                </div>

                                </div>

                                <div class=”item item-divider”>

                                                <div class=”row”>

                                                                <img ng-src=”img/{{promotion.imageFile}}” class=”fullscreen-image”/>

                                                </div>

                                </div>

                </div>

  </ion-content>

</ion-view>

 

Done, let’s try to refresh the browser, you should find that the menu has been updated as:

 

Click on “Promotion QR Code”, it will show you the list of promotions:

 

And click on one of them:

 

You can try sending Push Notification via https://apps.ionic.io/app/{your_app_id}/push/tools . After sending, your device should be able to receive Push Notification.

Please rate this