Starting with Ionic Framework

Few weeks ago i decided to try my luck with an easy mobile-dev framework and start my own pet project (about restaurants) for Android devices. After doing a little research and googling, finally i found several options for hybrid apps:

After a little talk with some friends (thanks @poliukGV), i gave an opportunity to Ionic Framework. These are some reasons:

  • Ionic is using AngularJS and HTML5 as frontend technologies: i know these frameworks very well so this was my main reason to choose it.
  • There are a lot of resources, forums and docs about this framework.
  • Drifty, -the company behind Ionic-, is growing so fast and looks like they will be a big thing inside the mobile industry: http://techcrunch.com/2015/03/30/drifty-grabs-2-6-million-to-turn-web-developers-into-mobile-app-makers/
  • It’s possible to easily generate apps for both Android and iOS, using the Ionic/Cordova commands (available for Windows, Mac and Linux). You can also upload your App for free to the Ionic.io Platform and test it before generating the compiled .apk file. (this feature is free by the moment!).
  • You can use any cordova plugin for native apps: geolocation, camera, push notifications, inApp browser… (http://ngcordova.com/docs/plugins)
  • There are ready-to-pull starter templates and very useful resources like plugins, themes, etc.: http://market.ionic.io

Installing Ionic Framework and utils from scratch.

Here a list of things i needed to generate a lazy HelloWorld app (for Android). Note that i’m using Windows 7 (more info):

Once you have installed NPM you’ll need to get some packages. Open a console and type the following commands:

Bower Package Manager:

npm install -g bower

Cordova + CLI:

npm install -g cordova

Ionic Framework + CLI:

npm install -g ionic

Basic Ionic CLI Commands

With all the previous tools installed we can now start developing our first hybrid App for Android:

Generate Blank App template:

ionic start my-app-name

Or generate Blank App template with Side Menu:

ionic start my-app-name sidemenu

Looking for more cool starter templates? Try here or here:

Run app into browser (it will create a temporary server into http://localhost:1800):

ionic serve

Add Android Platform (Android SDK needed):

ionic platform add android

Process to generate iOS apps is very similar: http://ionicframework.com/docs/guide/testing.html

Run our App into Emulator (Android SDK required & keep calm…):

ionic emulate android

Upload our App to the Ionic.io platform (ionic.io account required):

ionic upload --note "My upload comments"

Generate our apk file (Android SDK + Ant required & keep calm…):

ionic build android

Install a cordova plugin (e.g google maps):

cordova plugin add plugin.google.maps

Applying design to our Ionic App:

A good reason to choose this framework is the easy way to generate UI using the ionic included components (CSS & JavaScript).

http://ionicframework.com/docs/components/

Of course, there are some good open source projects developing a complete design framework for Ionic. For example, Ionic Material based on Google Material design.

Notes:

This is just a simple start review for the Ionic Framework. If you’re thinking about using it, i highly recommend to study first AngularJS framework and read about how to integrate it inside frontend applications.

Please contact me if you’re interested in more articles like this.