How to build a hybrid mobile app using ionic ? Part 1 Quickstart

 

This will be  quick start where we will be setting up the components and understanding how ionic framework works and how to get started.I am using a Windows 8x 64 bit VM for this experiment and I have assigned 4 GB RAM and 60 Gb hard disk to it, I have also enabled the Intel Vt-x support for the two processors I allocated to this VM, we will discuss the advantage of assign the VT-x based processor to my VM later.

Lets get started.

To build an ionic app, you need following:

Node JS 6 or greater

System connected to network.

We will use ionic V1 to build the app and assumption is we are building this app for Maximo.

Go to command line and install ionic and cordova glbally.

 

> install –g ionic cordova

Later test the ionic version and info

> ionic info

 

If you face error, follow error section else skip

============================================

Error Alert

In case you face an error shown below.

Problem: Ionic 2 not starting, ionic info gives error FILE_INVALID_JSON

Reason: There might be a problem with the ionic config json during the parsing

You might be using the latest build of ionic@latest.

Solution:

Uninstall the current ionic version and downgrade to older version.

npm uninstall -g ionic
npm install -g ionic@2.0.0-beta.31

I tried a lot of stuff including uninstallation of node, cache clean, remove traces of node and modules from file system(follow SO post on removing nodejs completely) but nothing worked, finally the downgrade option worked.

=========================================

 

We will be building a tab app with bar code scan support, Maximo mobile app will be used to scan serial number of an asset and check the asset details and work details on that asset.

lets generate the sample code by

> ionic start maximo tabs

It will auto create the maximo folder and will generate the sample app based on tabs template.

 

The structure will look like this, now WWW is our main folder and we will be doing most of the changes there only.

Lets keep this folder apart and navigate to ionic creator to build our app using the drag and drop designer.

Ionic has provided this designer to build the UI components and later we will export this to our WWW folder.

Navigate here, and create a new project and design your app, you can then export the zip and put the contents in our WWW folder.

https://creator.ionic.io/app/dashboard/projects

 

Once you have designed the app, use the export button.

 

Once the contents are there in WWW directory of our ionic app.

> ionic serve

 

It will start a local server and will publish your app on http://localhost:8100

 

Now our skeleton of app is ready and we need to code our controllers to listen to buttons on the screen.

Lets get started and understand the MVC architecture of ionic

I am assuming your are familiar with the MVC architecture as we have in Java Springs.

 

View will be our templates folder and controllers will be in controller.js and they will be bundled by the app.js which is in the JS directory.

Route.js will have the path and template mappings and maintains the state of the app, we will be sending this $state inside the controllers to understand the states of tabs.

so index.html boots the app –>app.js loads(directives,plugins,controllers,services)

angular.module('app', ['ionic', 'ngCordova','app.controllers', 'app.routes', 'app.directives','app.services',])

Now controllers/routes/directives/services have individual JS and are included on run time.

Pretty simple isn’t it ?

Other folders like img and css are normal images and stylesheets as we have for any normal web application.

I think enough of quick start, I am assuming your IDE is setup now, I use VC code for this kind of app development.

I will see you in next part of this series where we will discuss about the actual code and how we will call our external services and will test the bar code scanning part from our app.

 

Keep Reading !