Build a Hybrid Application with the Ionic Framework and Azure Mobile Services, Part 1: Configuring the Project

As HTML5 and mobile technology has matured the line between native and hybrid apps has become increasingly blurred. Excluding games, the performance hit which historically plagued hybrid applications is now miniscule. At this time, the deciding factor for whether to build a native or hybrid application has become the technology stack and skill set of you or your team. As a front-end web developer, the time has never been better to transition your skills into mobile application development!

Meet The Ionic Framework
Ionic is an open source CSS and JavaScript framework for developing cross-platform HTML5 mobile applications. With over 11,000 stars on GitHub and coined by some the “bootstrap of mobile development”, Ionic allows front-end developers to create visually stunning, highly performant UI experiences with a native flow and feel. Built with AngularJS at its core and employing directives for many of the UI components, Ionic also encourages a solid architecture for serious application development.
Azure Mobile Services
Azure Mobile Services is Microsoft’s take on the growing MBAAS (Mobile Backend as a service) environment. Offering rock-solid technology for quickly building secure, scalable mobile backends Azure Mobile Services knows its role and performs it well. Authorization, push notifications, monitoring and management are also made easy, eliminating the majority of pain and monotony of mobile backend development. Offering both a .NET and Node.js option for your backend API’s, Azure Mobile Services is a viable contender in a field which also includes great options such as AWS Mobile Services, Firebase, Parse, and many more!
Tutorial
In this set of articles I will be walking through the construction of a hybrid application built on top of the aforementioned technology stack, the Ionic Framework, AngularJS, and Azure Mobile Services. The tutorial will be split up into four (or more?) articles, the first being project setup and configuration, the second focused on fleshing out the user interface, the third adding our Azure Mobile Service backend, and the forth implementing authentication for our application. By the end of the final article you should be ready to start constructing serious mobile applications of your own. I hope you enjoy, let’s start building!
Prerequisites
To follow along with this article there are a few prerequisites you will need to have installed.
1.) Node.js must be installed on your machine. If you do not have Node, please visit the website to quickly get up and running.

2.) Now, open up your command line and install Ionic globally with the following command.

3.) Next, install Cordova globally.

For those who are not familiar, Apache Cordova (or PhoneGap) is a set of device API’s that allow developers to access native device features, such as the file system or camera. Cordova allows mobile applications to be built using HTML, CSS, and JavaScript, packaged using the typical SDK’s, and easily ported between platforms. Cordova is the glue for hybrid development.
Getting Started
Now that we have Ionic and Cordova installed, we are ready to start building our application. The Ionic command line provides developers with several commands you will consistently use, the first being ionic start. This command, following the ionic start [appName] [template] format, will configure an Ionic project with one of several popular pre-built templates including tabbed and sidebar navigation. For this series we will be using the tabs template.

Ionic templates come pre-built with multiple Gulp tasks to make your development experience smoother. These tasks include a file watcher and live reload server to provide immediate in-browser feedback as you update your files. Let’s see this in action and ensure everything is functioning correctly by navigating to the root of your project and running the following command.

Initial Ionic Tabs

Initial Ionic Tabs

Our initial configuration is complete, let’s start building our application!

Customizing the Default Project
As you dig into the default project you will notice it is extremely well documented and set up for developers of any skill or experience level to hit the ground running. Although this is nice when learning your way around the framework, you will likely end up reconfiguring or deleting a fair amount of these files when starting a real project. Let’s update the relevant files for our Goal Setter app. As I am a big fan of Angular’s ‘Controller As’ syntax, I am also going to reconfigure the files I keep to accommodate this style.

1.) Let’s delete the default views and JavaScript files we won’t be using.

Unused Default Files

Unused default files

2.) Next, let’s create a new ‘app’ folder folder under the ‘www’ directory. Now create three more sub-directories under the ‘app’ folder named ‘controllers’, ‘services’, and ‘views’ and move tabs.html and tabs-dash.html under the ‘views’ directory (we will be adjusting these files to fit our project shortly). If this were a bigger project we may split our directory structure into features or modules but for a project of this size the current structure will suit our needs perfectly. In preparation, lets also create two more blank html files named tab-goals and tab-statistics under the views folder. At this point your directory structure should look like the following:

Directory Structure

directory structure

3.) If you are currently running or start running the Ionic project it will now be broken. Let’s restore it back to a working state since our refactoring. In the index.html file, go ahead and delete the references to the controllers.js and services.js files we deleted, as well as updating the reference to our app.js file. Now, in the app.js file update your routes to match the project specific tabs we will be adding.

4.) You will notice I went ahead and added controller references in each route, let’s now add shell controllers for each of these as well as updating our module name in both our app.js and index.html file. I will include one example of the controller but the other two (Goals, Statistics) will be the same code with a different title. Remember to add all script references to your index.html file when you are complete.

5.) Lastly, we need to update our tab-dash, tab-goals, and tab-statistics to ensure they are working as well as our tabs.html file to reference our new views. For now we are just going to add an ion-view and ion-content directive (more on these in the next lesson!) with a heading for our view title so we know our controllers are set correctly in our routes. While we are at it, lets also update the tab icons to something a bit more relevant. You can find a list of all custom Ionic icons at Ionicons.com

At this point our application will be back to fully functioning. Open up your command prompt and run the ionic serve command, you should see the beginnings of our Goal Setter app in all of it’s glory!

Current Goal Setter

Current Goal Setter

Conclusion
In this first lesson we got up and running with Ionic and configured our project for success. In the next lesson I will be digging deeper into setting up our UI for an outstanding user experience. I hope you have enjoyed this beginning sample of what Ionic has to offer, until next time, happy coding!

Next ArticleBuild a Hybrid Application with the Ionic Framework and Azure Mobile Services, Part 2: Creating the User Interface