Building a Mobile App with Cordova and Ionic

Hi! This will cover a step by step guide on how to create a small hybrid Android Ionic based mobile application on Windows OS.

Before we continue, We need to install/configure list of things

1. Install NodeJS
2. Install Java JDK
3. Install Android SDK
4. Install Apache Ant
5. Install Ionic & Cordova

• Install NodeJS

Depending on your Windows platform (32 bit or 64 bit) select Windows Installer (.msi) and download it. Make sure you have an up-to-date version of Node.js installed on your system .

Download the most recent version of Node.js.

• Install Java JDK

Depending on your Windows platform (32 bit or 64 bit) download and install a  latest Java JDK version for your computer from  official Oracle Java site.

Install it where ever you want then open your system environment variables, and add to or create a new System  environment variable called JAVA_HOME and add a location to your JAVA installation folder then add to or create a new user variable called PATH  with the full path to the bin folder of the new Java SDK installation.

• Install Android SDK

Go to the official Android SDK site and  download the Android SDK. Install it where ever you want then open your system environment variables and add the full path to both the adt-bundle/sdk/platform-tools/ folder and the adt-bundle/sdk/tools/ folder to the end of your PATH variable.

Now  open the SDK Manager then select and install the desired   package or packages

• Install Apache Ant

Go to the official Apache Ant site and download latest version then extract the downloaded archive where ever you prefer and add the full path to the bin/ folder to the end of your PATH environment variable.

• Install Ionic & Cordova

 Before we install Ionic and Cordova make sure you have installed Nodejs . Now  install Ionic and Cordova using the nodejs package manager (npm)

Open a new cmd.exe window, and run

 npm install -g cordova ionic  

Now everything looks good ,we can finally create an Ionic project

• Creating a new Project

 

First we need to create a new Ionic project .To create ionic  project : open a new cmd.exe window, and run

$ ionic start myfirstapp

or you can create an Ionic project using one of their ready-made app templates, or a blank one to start fresh.

$ ionic start myApp sidemenu

• Enabling the Platform and Build , Run!

To enable the application for a designated target platform run following code. In this case I'm using the Android platform.

$ ionic platform add android

Now everything should be fine now. To build it, try doing

$ ionic build android

Now  we can run our application using the Android emulator by running the following command.

$ ionic emulate android

That's it. Now you have created your first hybrid  mobile app. Next tutorial we will talk how to create your own mobile app with Cordova and Ionic and we will be doing some basic things like modifying our index.html to include all style-sheets and scripts, AngularJs and fun stuff...