Build an iOS app with Push Notifications using Ionic Framework_part 1

Introduction

Hybrid apps are gaining popularity. The Gartner research firm predicts that by 2016, hybrid apps will constitute the majority of mobile apps. So it is good time to learn some modern technologies for building hybrid apps.

In this tutorial we are going to see how it is possible to build Cordova application with push notifications based on the Ionic Framework and ngCordova created by the Ionic team.

Ionic uses AngularJS, so it is assumed you are familiar with it.

What are we building in this tutorial?

Unfortunately, there are a lot of bad things happening every day. So we are going to create an iOS application to show some good news. We will also create own server for sending push notifications using apn, based on Node.js and MongoDB with a simple form to create a new post.

The name of the application will be PushNews, but of course you can use your own.

Prerequisites

• Mac OS X
• iOS Developer Program membership
• Node.js/npm installed on your mac
• MongoDB

For deploying we will use Heroku and Mongolab, so you need to have accounts there or you can use your own hosting instead.

Install Ionic

Now we should install/update CLI for Cordova and Ionic, to have an opportunity to create new apps, add cordova plugins, etc.

Run this command in your Terminal:

1. $ npm install -g ionic cordova

App Development

Creating Ionic app

For creating and serving basic Ionic app with tabs starter template, run

1. $ ionic start pushNews tabs
2. $ cd pushNews
3. $ ionic serve

Installing additional libs and setting up routes

1. $ bower install --save ngCordova angular-local-storage

Include ng-cordova.min.js and angular-local-storage.min.js in the index.html

1. <!-- index.html -->
2. ...
3. <script src="lib/angular-local-storage/dist/angular-local-storage.min.js"></script>
4. <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
5. <script src="cordova.js"></script>
6. ...

Inject as an Angular dependency:

1. // www/js/app.js
2. ...
3. angular.module('app', ['ngCordova', 'LocalStorageModule'])
4. ...

We need to change routes now. There will be four of them:

• Login page
• All news list
• News view page
• User profile page

1. // www/js/app.js
2. ...
3. .config(function ($stateProvider, $urlRouterProvider) {
4.   $urlRouterProvider.otherwise('/login');
5.   $stateProvider
6.     .state('login', {
7.       url: '/login',
8.       templateUrl: 'templates/login.html',
9.       controller: 'LoginCtrl'
10.     })
11.     .state('tab', {
12.       abstract: true,
13.       templateUrl: "templates/tabs.html"
14.     })
15.     .state('tab.news', {
16.       url: '/news',
17.       views: {
18.         'tab-news': {
19.           templateUrl: 'templates/tab-news.html',
20.           controller: 'NewsCtrl'
21.         }
22.       }
23.     })
24.     .state('tab.details', {
25.       url: '/news/:id',
26.       views: {
27.         'tab-news': {
28.           templateUrl: 'templates/details.html',
29.           controller: 'DetailsCtrl'
30.         }
31.       }
32.     })
33.     .state('tab.profile', {
34.       url: '/profile',
35.       views: {
36.         'tab-profile': {
37.           templateUrl: 'templates/tab-profile.html',
38.           controller: 'ProfileCtrl'
39.         }
40.       }
41.     });
42. });

Building the Server
  Let's create Express server. I will use Heroku to host it. Follow official Getting Started if you are not familar with Heroku. As an alternative you can use for development your localhost with ngrok.

1. // server.js
2. var express = require('express');
3. var app = express();
4. var bodyParser = require('body-parser');
5. 
   
6. require('./config')(app);
7. require('./models')(app);
8. 
   
9. var config = app.get('config');
10. 
    
11. app.use(function (req, res, next) {
12.   res.header('Access-Control-Allow-Credentials', true);
13.   res.header('Access-Control-Allow-Origin', req.headers.origin);
14.   res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
15.   res.header(
16.     'Access-Control-Allow-Headers', 
17.     'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept'
18.   );
19.   if ('OPTIONS' === req.method) {
20.     res.status(200).end();
21.   } else {
22.     next();
23.   }
24. });
25. 
    
26. app.use(bodyParser.json());
27. app.use(bodyParser.urlencoded({
28.   extended: true
29. }));
30. 
    
31. var router = express.Router();
32. app.set('router', router);
33. app.use(router);
34. 
    
35. var http = require('http');
36. http.createServer(app)
37.   .listen(config.PORT, function () {
38.     console.log('app start on port ' + config.PORT);
39.   });
40. 
    
41. require('./routes')(app);

Models and routes we will describe later.

Authorization and Push Notifications

There are multiple ways to manage auth process in Ionic apps. We will use the next one: user login with twitter, then we store returned data in localStorage and remove it on logout. If user exists in localStorage he is logged in, if not, we will redirect him to login page. Don't forget to add CSRF or other protection for the real app.

Login with Twitter

To use twitter we must also add sha1 library:

1. $ bower install --save jsSHA

1. <!-- www/index.html -->
2. ...
3. <script src="lib/jsSHA/src/sha1.js"></script>
4. ...

Install inAppBrowser plugin:

1. $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

Also you have to create your own twitter app on Twitter App Management to get keys.

A little earlier we have set login.html as template for the login state, let's create it:

1. <!-- www/templates/login.html -->
2. <div class="row row-center">
3.   <div class="col">
4.     <h2 class="text-center">Good News</h2>
5. 
   
6.     <div class="padding-top">
7.       <button class="button button-block button-calm" ng-click="twitter()">
8.         <i class="icon ion-social-twitter"></i>&nbsp;Login with Twitter
9.       </button>
10.     </div>
11.   </div>
12. </div>

Login Controller:

It should be noticed, that any cordova plugin call should be wraped with the deviceready event. Or use $ionicPlatform.ready() available in Ionic.

1. // www/js/controllers.js
2. ...
3. .controller('LoginCtrl', function ($scope, $state, $cordovaOauth, 
4.                                    UserService, Config, $ionicPlatform,
5.                                    $ionicLoading, $cordovaPush) {
6.   if (UserService.current()) {
7.     $state.go('tab.news');
8.   }
9.   $scope.twitter = function () {
10.     $ionicPlatform.ready(function () {
11.       $cordovaOauth.twitter(Config.twitterKey, Config.twitterSecret)
12.         .then(function (result) {
13.           $ionicLoading.show({
14.             template: 'Loading...'
15.           });
16.           UserService.login(result).then(function (user) {
17.             if (user.deviceToken) {
18.               $ionicLoading.hide();
19.               $state.go('tab.news');
20.               return;
21.             }
22. 
    
23.             $ionicPlatform.ready(function () {
24.               $cordovaPush.register({
25.                 badge: true,
26.                 sound: true,
27.                 alert: true
28.               }).then(function (result) {
29.                 UserService.registerDevice({
30.                   user: user, 
31.                   token: result
32.                 }).then(function () {
33.                   $ionicLoading.hide();
34.                   $state.go('tab.news');
35.                 }, function (err) {
36.                   console.log(err);
37.                 });
38.               }, function (err) {
39.                 console.log('reg device error', err);
40.               });
41.             });
42.           });
43.         }, function (error) {
44.           console.log('error', error);
45.         });
46.     });
47.   };
48. })
49. ...

We have been using $cordovaOauth.twitter() to allow user to login with twitter in our app. This plugin will do for us all rough work, but you should check sources to understand that there is no server on the iPhone and we can't set up callback to redirect twitter back to our app like we could do this on the web. So we should open a new window, parce a token and close the window manually.
To send push notification to our users, we must know device token. We will receive it using $cordovaPush.register() function. Cordova plugin should be installed:

1. $ cordova plugin add https://github.com/phonegap-build/PushPlugin.git

After getting user data, we send it to the server. Check this article by Jim Cooper to understand why we shouldn't do this in Controller. Let's create Service.

1. // www/js/userService.js
2. (function () {
3.   function _UserService($q, config, $http, localStorageService, $state) {
4.     var user;
5.     function loginUser(post) {
6.       var deferred = $q.defer();
7. 
   
8.       $http.post(config.server + '/user/login', post)
9.         .success(function (data) {
10.           if (data.error || !data.user) {
11.             deferred.reject(data.error);
12.           }
13.           localStorageService.set('user', data.user);
14.           user = data.user;
15. 
    
16.           deferred.resolve(data.user);
17.         })
18.         .error(function () {
19.           deferred.reject('error');
20.         });
21. 
    
22.         return deferred.promise;
23.     }
24. 
    
25.     function logoutUser() {
26.       localStorageService.remove('user');
27.       user = null;
28.       $state.go('login');
29.     }
30. 
    
31.     function currentUser() {
32.       if (!user) {
33.         user = localStorageService.get('user');
34.       }
35.       return user;
36.     }
37. 
    
38.     function registerDevice(putData) {
39.       var deferred = $q.defer();
40. 
    
41.       $http.put(config.server + '/user/registerDevice', putData)
42.         .success(function (data) {
43.           if (data.error || !data.user) {
44.             deferred.reject(data.error);
45.           }
46. 
    
47.           localStorageService.set('user', data.user);
48.           user = data.user;
49. 
    
50.           deferred.resolve(data.user);
51.         })
52.         .error(function () {
53.           deferred.reject('error');
54.         });
55. 
    
56.         return deferred.promise;
57.     }
58. 
    
59.     return {
60.       login: loginUser,
61.       logout: logoutUser,
62.       current: currentUser,
63.       registerDevice: registerDevice
64.     };
65.   }
66. 
    
67.   function _ConfigService() {
68.     return {
69.       server: 'http://push-news.herokuapp.com',
70.       twitterKey: 'your_twitter_key',
71.       twitterSecret: 'your_twitter_secret'
72.     };
73.   }
74. 
    
75.   _UserService.$inject = [
76.     '$q', 'Config', '$http', 'localStorageService',
77.     '$state', '$cordovaPush', '$ionicPlatform'
78.   ];
79. 
    
80.   angular.module('app.services')
81.     .factory('UserService', _UserService)
82.     .service('Config', _ConfigService);
83. })();

Don't forget to include the new file in the index.html

1. <!-- index.html -->
2. ...
3. <script src="js/userService.js"></script>
4. ...

Server side (user)

We should add user model and routes for /user/login and /user/registerDevice on our server

1. // models/users.js 
2. var mongoose = require('mongoose');
3. var Schema = mongoose.Schema;
4. 
   
5. module.exports = function () {
6.   'use strict';
7. 
   
8.   var UsersSchema = new Schema({
9.     socialId: {type: String, index: true, unique: true},
10.     username: {type: String, unique: true},
11.     deviceToken: {type: String, unique: true},
12.     deviceRegistered: {type: Boolean, default: false},
13.     createdAt: {type: Date, default: Date.now}
14.   });
15. 
    
16.   mongoose.model('Users', UsersSchema, 'Users');
17. };

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

1. // models/users.js 
2. var mongoose = require('mongoose');
3. var Schema = mongoose.Schema;
4. 
   
5. module.exports = function () {
6.   'use strict';
7. 
   
8.   var UsersSchema = new Schema({
9.     socialId: {type: String, index: true, unique: true},
10.     username: {type: String, unique: true},
11.     deviceToken: {type: String, unique: true},
12.     deviceRegistered: {type: Boolean, default: false},
13.     createdAt: {type: Date, default: Date.now}
14.   });
15. 
    
16.   mongoose.model('Users', UsersSchema, 'Users');
17. };

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

1. // routes/user.js
2. var mongoose = require('mongoose');
3. var Users = mongoose.model('Users');
4. 
   
5. module.exports = function (app) {
6.   'use strict';
7. 
   
8.   var router = app.get('router');
9. 
   
10.   router.post('/user/login', function (req, res) {
11.     var socialId = req.body.user_id;
12.     var username = req.body.screen_name;
13. 
    
14.     Users.findOne({socialId: socialId}).lean().exec(function (err, user) {
15.       if (err) {
16.         return res.json({error: err});
17.       }
18. 
    
19.       if (user) {
20.         return res.json({error: null, user: user});
21.       }
22. 
    
23.       var newUser = new Users({
24.         socialId: socialId,
25.         username: username
26.       });
27. 
    
28.       newUser.save(function (err, user) {
29.         if (err) {
30.           return res.json({error: err});
31.         }
32. 
    
33.         res.json({user: user, error: null});
34.       });
35.     });
36.   });
37. 
    
38.   router.put('/user/registerDevice', function (req, res) {
39.     var user = req.body.user;
40.     var token = req.body.token;
41. 
    
42.     Users.findByIdAndUpdate(user._id, {
43.       $set: {
44.         deviceToken: token,
45.         deviceRegistered: true
46.       }
47.     }).lean().exec(function (err, user) {
48.       if (err || !user) {
49.         return res.json({error: err});
50.       }
51. 
    
52.       res.json({error: null, user: user});
53.     });
54.   });
55. };

If you found this post interesting, follow and support us.

Suggest for you:

Professional iOS Chat Apps with Social Login using Firebase3

The Complete iOS 9 Developer Course - Build 18 Apps

The Complete iOS 10 Developer Course - Build 21 Apps

Intro To iOS Backend Development: Image Uploads

How to Make a Freaking Video Game - iOS, SpriteKit, SceneKit