Building an iOS app with PhoneGap, Angular.js and the ionic framework (Part 1).

Published on Feb 26, 2014

Overview of the application.

I decided to create yet another activity tracking App. On a first iteration I will try to focus on tracking ski sessions. Future iterations will add tracking tailored to other outdoor activities.

The main reason to build this type of App is that it will give me a good excuse to use most of the available API‘s like geo-location, accelerometer, camera, media, file, notification, storage, etc.

Framework selection.

I will be using PhoneGap as the mobile framework that will enable our application to access all the devices native API‘s.
I will pair PhoneGap with Angular. I think that a single page app is perfectly suited to build mobile applications like this one.

It took me some time to decide what UI library I wanted to use for the visual elements. It was tempting to just use Bootstrap (tried and true) once more but I wanted something focused on mobile applications.

My main target device(s) are phone(s), so I only need some limited responsiveness.

I doubt anybody is going down the hill with the tablet on their pockets to track their speed.

I used jQuery mobile in the pass but I wanted something different, something that feels more modern. I took a look at several frameworks after deciding to give ionic a try.

It looks very clean, having most of the components I feel I will need and they have integration with angular out of the door. Ionic is not just a CSS framework but a JavaScript library of components as well.

With the set of frameworks selected, is time to…

Getting started

I will assume that you already have node.js installed in your system. If you don’t you may need to install it now
We will also need Xcode installed

You can easily install everything you need with one command



    npm npm install -g cordova ionic ios-sim

If you are not planning to run the application is the ios-emulator you can ignore the ios-sim module.

Setting up the project.

We will create the project using the ionic CLI with the blank template.



    ionic start dynamic-sports blank

Setting up karma and phantom.js.

We will open the package.json file and add the following key and code.



  "devDependencies": {
    "karma": "~0.12.9",
    "karma-phantomjs-launcher": "~0.1.4",
    "karma-jasmine": "~0.1.5",
    "karma-ng-scenario": "~0.1.0",
    "karma-junit-reporter": "~0.2.2",
    "karma-coverage": "~0.2.1"
  }

While we are editing the package.json file we can change the name, version and description for the project.
We will also add a test script to make our life easier.


  "scripts": {
    "test": "node_modules/karma/bin/karma start tests/karma.config.js"
  },

And we will create the folder for the tests and the configuration file for karma



    mkdir tests
    cd tests
    touch karma.config.js

Open the karma.config.js file and enter the following code.



    module.exports = function(config) {
      config.set({

        // base path, that will be used to resolve files and exclude
        basePath: '../www/',

        // frameworks to use
        frameworks: ['jasmine'],

        // list of files / patterns to load in the browser
        files: [
          'lib/ionic/js/ionic.bundle.js',
          'js/*.js',
          '../tests/helper.js',
          '../tests/*.spec.js'
        ],

        preprocessors: {
          'js/*.js': 'coverage'
        },

        coverageReporter : {
          type : 'html',
          dir : '../coverage/'
        },

        plugins: [
          'karma-jasmine',
          'karma-phantomjs-launcher',
          'karma-coverage',
          'karma-junit-reporter'
        ],

        // test results reporter to use
        // possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
        reporters: ['progress', 'coverage'],

        // web server port
        port: 9876,

        // enable / disable colors in the output (reporters and logs)
        colors: true,

        // level of logging
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_INFO,

        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: true,

        // Start these browsers, currently available:
        // - Chrome
        // - ChromeCanary
        // - Firefox
        // - Opera (has to be installed with `npm install karma-opera-launcher`)
        // - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`)
        // - PhantomJS
        // - IE (only Windows; has to be installed with `npm install karma-ie-launcher`)
        browsers: ['PhantomJS'],

        // If browser does not capture in given timeout [ms], kill it
        captureTimeout: 60000,

        // Continuous Integration mode
        // if true, it capture browsers, run tests and exit
        singleRun: false
      });
    };

After everything is set you should have a structure similar to this



    -dynamic-sports
      README.md
      gulpfile.js
      config.xml
      ionic.project
      package.json
      |-node_modules
      |-platforms
      |-plugins
      |-scss
      |-hooks
      |-merges
      |-tests
      | |
      | karma.config.js
      |-www
        |
        |-css
        |-img
        |-js
        |-lib
        |-templates
        |
        README.md
        config.xml
        index.html

Hooking up Travis CI.

You should sign up into Travis and follow the instructions to setup your project.

Next steps.

Part 2 – Building a basic UI

We will create a basic hello world application and deploy into the emulator.

Other articles in the Ionic series.