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:
- Famo.us (http://famous.org)
- Mobile Angular UI (http://mobileangularui.com)
- Ionic Framework (http://ionicframework.com)
- Apache Cordova (https://cordova.apache.org)
- PhoneGap (http://phonegap.com)
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):
- NodeJs (https://nodejs.org)
- Git (https://git-scm.com/downloads)
- Node Package Manager (NPM) (https://www.npmjs.com)
- Java JDK: (http://www.oracle.com/technetwork/es/java/javase/downloads/index.html)
- Apache Ant (http://ant.apache.org)
- Android Studio & Android SDK Tools: (https://developer.android.com/sdk/index.html)
- GenyMotion (A faster Android Emulator): (https://www.genymotion.com)
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
Run app into browser (it will create a temporary server into http://localhost:1800):
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:
Ionic makes it incredibly easy to build beautiful and interactive mobile apps using HTML5 and AngularJS.ionicframework.com
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.
Ionic Material Mobile Application Libraryionicmaterial.com
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.