Code for this series is available on [Github](https://github.com/hgarcia/dynamic-sports)

UPDATE: I updated this article to align with Ionic 1.0.0-beta1 that makes starting with Ionic much simpler. The previous version of the article can still be found here

In this series I plan to build a mobile application using primarily web technologies (HTML5, js and css). I will be targeting iOS since those are the devices I have access to at the moment, but the application should be deployable to a number of platforms without major changes due to the technologies I will be using.

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.