Native Mobile Development

28.10.2016

Develop true native mobile applications!

Ionic framework, ionic is a full stack mobile hybrid apps that uses AngularJS framework.

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly.

AngularJS is quite popular, you may find lot of sites with updated documentation, the same applies for Ionic.

We use Cordova to access the mobile device APIs. We try to use only core Cordova plugins but sometimes that's impossible. If we have to use additional plugins (like Webintents, local notifications, custom URL schemes) we use only plugins well-maintained, generally those listed here: http://plugins.telerik.com/

For integrating Cordova plugins we use ngCordova; ngCordova is a collection of AngularJS extensions on top of the Cordova API that make it easy to build, test, and deploy Cordova mobile apps with AngularJS. The main feature of ngCordova is that instead callbacks it uses promises, so it integrate very well with AngularJS.

Ionic

Angular

Cordova

Structure of an App

controllers/
 home.js
templates/
 home.html
lang/
 de.json
services/
directives/
filters/
scss/
components/
lib/
main.js

The following table is shown the naming conventions for every element:

Element Naming style
Modules lowerCamelCase
Controllers Functionality + 'Ctrl'
Directives lowerCamelCase
Filters lowerCamelCase
Services UpperCamelCase
templates lowerCamelCase

controllers and templates

The controllers directory contains the module controllers, usually you are going to have there a controller per view and per template.

lang

The lang directory contain the language file with the translated strings.

services

This directory contains the app services, usually for non-complex addons you will find a single file inside containing all the code logic used for providing the main functionality of the addon like the code for retrieving the home via Web Services.

directives

Directives are special identifiers that can be used to give the compiler extra information about a declaration/definition.

filters

Filters format the value of an expression for display to the user. They can be used in view templates, controllers or services.

scss

SCSS is a special type of file for SASS, a program written in Ruby. (Sass is a CSS pre-processor with syntax advancements)

main.js

This is a mandatory file, it:

  • Creates the AngularJS module
  • Declares all the state routes the plugin is going to user. Attaching a controller and template for each different state.
  • Initializes the addon and register it into one or more delegates (this determines where the plugin will be displayed in the app).

Building

There are two options for building the app, aka compile it to different devices:

Phonegap Build

Phonegap Build is an online service that lets you build the app automatically for different platforms. The main advantage is that it simplifies a lot the process of building.

You just put your www/ folder in a github account and Phonegaps automatically builds the app for different platforms pulling your github code.

Notice that the free version is for open repositories, but you can use the non-free version for private repositories.

In order to build your app using Phonegap Build you need to place a special config.xml file into the www/ folder.

Ionic CLI

You can also build the app using the Ionic CLI tools, see: http://ionicframework.com/docs/cli/run.html

Testing with task Runners

tools like:

Gulp provides the following features:

  • it's super fast as it's build for concurrency from the start
  • it provides a simple to learn API (based on a pipes and filters architecture) that produces some very readable and maintainable code.
loading