Simple App using Ionic Framework

Simple App using Ionic Framework



For building cross platform App, Ionic was the option i found suitable. It is a quick building app framework. I have covered following steps from installation to configure and building as well. For Ubuntu users following steps are there later on windows tutorial will be published later.

1. Install NodeJS + NPM

Installing latest NodeJS will install NPM along with it. For simplicity, install latest nodejs version.

sudo apt-get install curl
curl --silent --location https://deb.nodesource.com/setup_5.x | sudo bash -
sudo apt-get install nodejs

2. Download and install Android SDK for linux 

Complete Installation guide for ubuntu is covered here. Click here to download and install Android SDK For even simpler steps i have broken installing android sdk into steps as it has dependency of Java.

a. Install openjdk-6-jdk or better, openjdk-7-jdk

b. Download android sdk here 

c. Check that the unzipped ADT Bundle folder (or Android SDK folder, as the case may be) have the folders tools 

   and platform-tools.These folders contain some important commands stored. Add them to your 
   executable path. Adding them to the path can be done as follows:
   First execute gedit ~/.pam_environment. A file opens. Just add these lines to that file:

   PATH DEFAULT=${PATH}:/path/to/tools
   PATH DEFAULT=${PATH}:/path/to/platform-tools

Here you have to replace /path/to/tools and /path/to/platform-tools by the absolute paths according to where you unzipped the SDK or the ADT bundle download. Now all the commands adb, android, emulator etc can be simply executed in the terminal without giving absolute paths. That is, you will not get a "command not found" error if you gave it without its absolute path.

3. Install Cordova

To install Cordova, make sure you have Node.js installed, then run

 $ sudo npm install -g cordova

4. Install Ionic

To install it, simply run:

  $ sudo npm install -g ionic

5. Create Project

Now, we need to create a new Cordova project somewhere on the computer for the code for our app:

   $ ionic start todo blank

That will create a folder called todo in the directory the command was run. Next, we will go into that directory and list the contents. Here is what the outer structure of your Ionic project will look like:

$ cd todo && ls

├── bower.json     // bower dependencies
├── config.xml     // cordova configuration
├── gulpfile.js    // gulp tasks
├── hooks          // custom cordova hooks to execute on specific commands
├── ionic.project  // ionic configuration
├── package.json   // node dependencies
├── platforms      // iOS/Android specific builds will reside here
├── plugins        // where your cordova/ionic plugins will be installed
├── scss           // scss code, which will output to www/css/
└── www            // application - JS code and libs, CSS, images, etc.

If you are planning on using any version control system, you can go ahead and set it up in this new folder.

6. Configure platforms

Now, we need to tell ionic that we want to enable the iOS and Android platforms. Note: unless you are on MacOS, leave out the iOS platform:

$ ionic platform add ios
$ ionic platform add android

7. Test

Just to make sure the default project worked, try building and running the project (substitute ios for android to build for Android instead):

$ ionic build ios
$ ionic emulate ios

For more details follow this link http://ionicframework.com