Ionic First App


Facebooktwittergoogle_pluspinterestlinkedinmailFacebooktwittergoogle_pluspinterestlinkedinmail

Ionic

I have dabbled in Mobile application development for a while now and have kept tabs on new and emerging technologies. I came across the Ionic Framework and thought it might be interesting to give it a try.

As far as I can see it is similar to PhoneGap and provides a wrapper for Apache Cordova but provides some nice UI features and is based on AngularJS.

To try a technology you have to build something useful and my first application with Ionic is a mobile application for the London Salsa Events. London Salsa Events is a website that provides a large listing for Salsa events in London. It is a simple Joomla website but as all websites go the user has to be connected.

I wanted to have the following features:

  • Offline browsing
  • Save favourite events
  • Schedule a mobile notification favourite events
  • Integration with Map application
  • Save notes on events attended

So how did it go?

Joomla

After exploring several options for getting data out of Joomla I found the simplest way to get information was to enable an RSS Feed and then write a parser for the content. This seems to work quite well but did require some nifty javascript to remove the HTML tags from the RSS feed.

Once the mobile application retrieved the content it would stored this information in localStorage. I was thinking of using a Database but this would be overkill for such a small application.

Ionic Framework

One of the features that I really like about Ionic is the Command Line Interface (CLI) which allows you to kick start, build and emulate your mobile application. A really nice CLI is ionic serve -l which opens up a browser with iOS and Android next to each other. If you are using Chrome you can also debug your application using Developer Tools as well as Batarang for AngularJS.

Learn more about Ionic: http://ionicframework.com/

Angular Material

I am personally not the biggest fan of the look and feel of Ionic interfaces so I decided to incorporate Angular Material for the cosmetic components. This was relatively simple to achieve and gave me more joy with the interface built.

Learn more about Angular Material: https://material.angularjs.org

Deploying to Google Play

For this application I was look to build for Android initially. I have to admit that I spent an unusual amount of time searching for the zipalign.exe as I could not find this anywhere. I must have install various older versions of the Android SDK to find this but once found it was relatively to write a script to build, sign, and compress the application into a apk file and deploy onto Google Play.

Summary

So here is the final results of a weekends playing around and learning something new.

Features

I think I will explore Ionic a lot more and try to build a few more interesting applications.

Facebooktwittergoogle_pluspinterestlinkedinmailFacebooktwittergoogle_pluspinterestlinkedinmail

Toan Hoang

About Toan Hoang

Toan Hoang is a technology enthusiast with a broad understanding and appreciation of most aspects of technology but with a passion for Business Intelligence Solutions and Technologies, Data Management and Web Programming.

Leave a comment

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