IONIC Framework, a nice surprise from Drifty Co.


Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components and tools in order to build high interactive native and progressive web apps. Built with Sass, optimized for AngularJS.

Context

As a Front-end Developer, I’m used to handle new technologies, tools and frameworks professionally, especially with IONIC Framework, which I experienced in a personal project.
In terms of Web Development I discovered it belatedly because it was developed 4 years ago – but since 2012, I try out Telerik Icenium and PhoneGap without becoming a great fan.

Ionic Framework

An old friend of mine, told me about one’s of his great ideas, and as it was urgent to do it – It’s a medical application with major impact on its users life – and must be done for mobile, he proposed IONIC Framework.

As I said before, I had basic knowledge of IONIC, but as I was intrigued and curious about it, I heard from several of my friends, who were using it, only good remarks so that’s convinced me to use it.

Installing & Developing

AAfter the first discussions on the project I was keen to do the work. Fortunately, the installation of IONIC framework is trivial.

First, install Node.js. Then, install the latest Cordova and Ionic command-line tools.

Follow the Android and iOS platform guides to install required platform dependencies :

$ npm install -g cordova ionic

The best approach to start a project is to use the ready-made application templates. I used the sidemenu template for our application.

sidemenu template for our application.

$ ionic start myApp sidemenu

The most popular templates is the blank template, tabs template and sidemenu template.

ionic

The guys from Drifty Co left the best part at the end. To run & test your application on a local environment you only need to type one simple command:

$ ionic serve

And that’s all … We have a IONIC application working.

The smooth start

I chose for our application the sidemenu template as It seem to be the closest one for our architecture application. Beside the user-friendliness and the relative short time of running a valid application. The things that I preferred was the coding language behind the framework.

Ionic builds on top of Angular to create a powerful SDK well-suited for building rich and robust mobile apps for the app store and the mobile web.

As a front-end developer this is the best that you can get, as AngularJS along ReactJS and Meteor are the leading technologies in the JS world. Lucky for me I know pretty well AngularJS and I would like to work on the field of the the code.

The application we try to develop was a medical application, composed of several views and controllers. The interesting concept is the online/ offline mode which will allow limited users access to exploit the application without internet access. For that we chose PouchDB, which is a CouchDB implementation. It can manage automaticly the online/offline need by its internal replication function.

IONIC 2

Opening the project I find the basic file structure of an Angular project – the controller, the views and even the test pages being where they should be – so I start by modifying the routes and configuration according to our needs.

 ionic 3

Everything works according to the plan when creating new routes, views and controllers. The PouchDB database is a nice surprise as the basic CRUD functions are trivial:

// I will start by creating a database to enter our datas
// To do that simply instantiate a new PouchDB object with name of the DB
dbLocalMed = new PouchDB(‘med’);
dbRemoteMed = new PouchDB(‘http://localhost:5984/med’);

//To retrieve the datas we’ve inserted in our DB we simply use allDocs function
//including_docs option tells PouchDB to give us the data within each document
dbLocalMed.allDocs({
include_docs: true
}).then(function(result) {
$rootScope.drugs = result.rows;
}).catch(function(err) {
console.log(err);
});

The installation and basic use of IONIC Framework is quite simple, even trivial for seasoned developers. Issues started when you want to add some native functionality which in my case was a sound alert and phone vibration for reminders.

At first look you have several libraries proposing those native functions, but I quickly discovered that one by one those I chose didn’t worked at all in browser, giving all sort of error messages in the console.

Nowadays we have Stack overflow, which is an amazing tool and inspiration when we ‘re stuck on a subject. That was my case too for the alerts, but after several days on Stack overflow my question didn’t received any valid responses. Dazed and confused, I continued my research on Google in order to get response, and finally after several hours I find and test a library that delivers the native functionality that I want.

It’s called ngCordova and it was built to make app development faster and more efficient than before. It gives you simple AngularJS wrappers for the most popular Cordova and PhoneGap plugins available. As everything linked to IONIC the installation was easy:

1. Get the Source File

You can use bower to install ngCordova like so or download the zip file here, and locate the .js file in the dist folder:

$ bower install ngCordova

Include ng-cordova.js or ng-cordova.min.js in your index.html file before cordova.js and after your AngularJS / Ionic file (since ngCordova depends on AngularJS).

< script src=”lib/ngCordova/dist/ng-cordova.js” >
< script src=”cordova.js” > < /script >

2. Inject as an Angular dependency

Then, include ngCordova as a dependency in your angular module:

angular.module(‘myApp’, [‘ngCordova’])

3. Add the plugin to your project using the Cordova CLI

Now you can add plugins to your cordova project, and use the ngCordova API detailed below:

cordova plugin add …

Installing ngCordova is simple and once we inserted the plugins in the application, everything works flawlessly on device, even though we might have some errors in the console.

Conclusion

IONIC is a nice surprise. Even if we have some native functionality problems, everything go smooth and fast. Each time I add a little bit of code to the application I do it with joy and ease. I Couldn’t wait to finish the medical application and I will start a new one, maybe something different, with different technologies and goals.

Share
Andrei LISAC
Andrei LISAC

1032

Leave a Reply

Your email address will not be published. Required fields are marked *