News

Build mobile apps with the Ionic framework

Build feature-rich HTML or mobile apps using the new Ionic framework, offering both style and substance

Ionic

Mobile apps are everywhere nowadays, and as creative professionals we tend to get a lot of requests in from clients to build them. Thankfully there are a number of libraries and frameworks already out there that can help us to create them – but we are going to inject something new into our next application project.

We are going to explore the new Ionic framework, an open source project that helps you create hybrid mobile applications using HTML5 and Angular.js. Optimised for speed, Ionic behaves well with all the latest mobile devices and is modelled from popular native development SDKs, so if you’ve built a native app for iOS or Android, this should be a cinch for you.

In this tutorial we are going to take a look at installing the library and using it in conjunction with PhoneGap to create new mobile application builds from the command line. We will also take a look at how to implement a few of the many CSS elements to create an aesthetically pleasing user interface that can be updated, manipulated and revised to suit your needs.

Install Ionic

Ionic runs on Node.js, so you will need to install this before you proceed. Once installed, open a Terminal or Command Prompt window to install Ionic globally using the Node Package Manager. You may also choose to install the PhoneGap / Cordova command line tools at this stage, once again as global installations using the –g flag.

001    
002    > npm install -g ionic
003    > npm install -g cordova
004    

Starter applications

Ionic is able to generate a starter application skeleton for you with ease. Using Terminal inside your selected directory location, simply run the command to generate a new application as shown in the code snippet below. In this case we will also select a starting template that has a dynamic sliding menu section. You can optionally choose to create a blank template or one with tabbed navigation elements, it’s up to you.

001    
002    > ionic start killerApplication sideMenu
003



Generated structure

The Ionic command line script generates a new application for you in the requested directory location. The directory structure is designed to match a typical Cordova/PhoneGap 3 structure to incorporate the same elements and to build mobile apps using the service. A Gulpfile is also present to help minify and concatenate files for deployment.

Add a platform

To use the existing code base/application structure as a PhoneGap mobile application you will need to add a platform entry for each platform you wish to generate a build for. This is easily managed through the command line and Ionic closely emulates the official PhoneGap CLI when dealing with this.

001    > ionic platform add ios android

Simple build generation

As Ionic is based upon the Cordova framework and integrates nicely with the CLI tools available, we can easily generate a build of our application and run it on an installed emulator applicable to that platform via the command line. Here we can build the iOS app and run it on the local emulator.

001    > ionic build ios
002    > ionic emulate ios
003    

CSS components

The Ionic framework offers much more than a method to build PhoneGap-based mobile applications. It comes with a detailed and impressive CSS framework that can be added in to any web application, although the majority of elements have been tailored to work with mobile applications by default. Simply import the stylesheet and use the framework for layout styling.

Mobile header elements

Ionic handles the common mobile layout elements in a very similar way to existing libraries or frameworks you may have used. Here we are simply adding a new header element to the page and assigning it one of the default ‘template’ colours using a specific class reference applied directly to the HTML.

001    
002    <div class=”bar bar-header bar-balanced”>
003      <h1 class=”title”>Killer Application</h1>
004    </div>
005    

Footer and tabbed menus

Adding a footer element is exactly the same at the header with a small adjustment to the class name. In this example we have added a tabbed menu interface to the bottom of the mobile layout, complete with icons for visual display. All of this can be customised and tweaked to suit your requirements.

001    <div class=”tabs tabs-icon-only”>
002      <a class=”tab-item”>
003        <i class=”icon ion-home”></i>
004      </a>
005      <a class=”tab-item”>
006        <i class=”icon ion-gear-a”></i>
007      </a>
008    </div>
009    

Icons included

Ionic comes with its own icon library built in. These have been designed specifically for this library and contain pretty much everything you should need as standard. It is also available as a standalone font pack for use in any application and can be installed locally or referenced by the provided CDN. Visit ionicons.com to find out more.

JavaScript API

As part of the HTML interface, Ionic contains a detailed and fairly extensive JavaScript API to help you extend the Angular.js implementation to use some of the built-in user interface elements. These can help you to create feature-rich layouts, including loading displays, dynamic lists and modal windows. All functions and optional configuration items are available on the documentation site: ionicframework.com/docs

Dynamic list creation

In this code sample we create a scrollable content area, which contains a list element item, all of which have ion- tag prefixes. The list will be populated by data from our appController code, included from the Angular.js module. An on-refresh handler is added to run a specific function when the list is dragged to refresh on the device.

001    <ion-content class=”has-header” ng-controller=”appController”>
002      <ion-refresher pulling-text=”Pull to refresh...” on-
refresh=”refreshList()”>
003      </ion-refresher>
004      <ion-list>
005        <ion-item ng-repeat=”item in items”></ion-item>
006      </ion-list>
007    </ion-content> 

Angular controller

To manipulate and manage data on the list element we now need to inform Angular.js of the controller and set the relevant controls to manage the interaction. Here we define the controller and set the refreshList method details, which will be run once the list is refreshed. To complete the interaction we broadcast a refreshComplete command.

001    angular.module(‘killerApp’, [‘ionic’])
002    .controller(‘appController’, function($scope, $http) {
003      $scope.items = [1,2,3];
004      $scope.refreshList = function() {
005        $http.get(‘/new-items’).success(function(newItems) {
006          $scope.items = newItems;
007          //Stop the ion-refresher from spinning
008          $scope.$broadcast(‘scroll.refreshComplete’);
009        });
010      };
011    });
012    

Angularify your application

We now need to inform the application that it is an Angular app and which controller it should be using. To do so we reference the Ionic bundle JavaScript file (which includes Angular) and amend the body tag to set the Angular attribute to match the name of our controller.

001    <script src=”js/ionic.bundle.js”></script>
002    </head>
003    <body ng-app=”killerApp”>
004



Local development testing

As with most HTML applications, the local development phase is crucial and testing on a specific server is highly desired. To help with developing your mobile application you can run a local server using Python if you have it installed, or use Adobe Brackets to run a live preview on a specific port, which will update after any code or style changes.

Device testing

As our mobile application will be using the Cordova/PhoneGap library, we can now start to use more of the CLI tooling available. Here we can run a build of our current application directly onto a connected Android device for on-device testing. This, of course, assumes that the correct permissions are
set on the device to allow this.

001    > cordova run android

Community support

The Ionic framework has attracted a big following, even from a very early stage in its life. The online documentation is especially valuable and of great help, but if you ever need the personal touch when it comes to requests, help and ideas, the community are at hand to assist you on the official Ionic forums: forum.ionicframework.com.

Inspiration and existing apps

The Ionic framework has already been used for a number of mobile applications currently available on various mobile markets. Explore the examples on the site and see what others have done with the framework. Some of the projects are available to view on GitHub too, so you can dig into the code. ionicframework.com/examples/showcase.

×