My Journey of Building Cross Platform Mobile Application with Ionic Framework and Apache Cordova Part - 2

This the Second instalment of a series of article where i share my journey of developing cross platform mobile application with Ionic Framework and Apache Cordova.

If you haven't yet gone through the first article please find it here: My Journey of Building Cross Platform Mobile Application with Ionic Framework and Apache Cordova Part - 1

In this part I will be going through The Development Environment Setup and Configurations to run your application on a device.

*Please note having an actual device is optional, but having it will help you get the full flavour of it.

Installing NodeJS package Manager (npm)

You don’t have to know NodeJS but we will be needing the node package manager for installing our frameworks.

( It is recommended we install node 6x or higher with npm 3.x or higher )

In windows based PC we can install NodeJS by downloading the installer from this download page.

In Linux based machine we can download the npm in two ways

1. Either we download the Linux binaries OR
2. Use the in build package managers like apt-get etc to install the Node and npm

While using the in built Package manager we need to curl the right distribution from Linux source repository. The steps are as follows:

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -

sudo apt-get install -y nodejs

This will take some time depending your internet connection speed. The Node Package Manager comes with the installation of NodeJS.

Installing GIT:

This step is non mandatory, but installing Git in you computer will help in maintaining the code versions easily and also distribute the code through Github etc.

Git Can be downloaded from below

Installing the Ionic Framework and Apache Cordava:

The details of installation can be found here

For Linux based environment:

sudo npm install -g ionic cordova

For Windows environment, remove sudo from the above commands.

Code Editor/IDE:

Visual Studio Code is the editor of my choice. This can be downloaded here

Android Studio:

We would also install android studio as the device that we will be deploying on will be an Android Device running Android Kitkat 4.4.2. We can download the Android Studio here. We would also be needing the Android Simulator and Android NDK for deploying to the mobile.

* Please note , remember to install JAVA JDK,since android development requires JAVA for compilation

Web Browser:

Web browser is required to run your application as you develop, I would Recommend Chrome or Firefox as they have wonderful tools for web development and testing Cross Platform Mobile Applications

Let’s Go through the steps of Building a Deploying a Hello world type Ionic Application in the mobile.

Step 1. Building the Ionic App.

Ionic Framework provides a CLI interface to easily build projects. Please follow the steps mentioned here to get your first App running in the web browser.

Step 2. Deploying the Ionic App in Local Browser.

Ionic framework comes with a live refresh server which can be triggered by the command:

ionic serve

The Server will run in the address:

 http://localhost:8100/

This will also open your application and load in your browser and it will look like this:

Notice the right side of the Image there are a bunch of Developer tools provided by Chrome. This will help you debug your App.

Also if you try to open the folder, where you created your project, with Visual Studio Code, it will look like this:

Don’t worry about the code part as of yet, as we will go through it later.

Deploying the Ionic Application in an Actual Device:

I am using an Linux based development Environment so the steps we will follow the same, in windows the steps might differ a little but more or less they will be similar.

The high level overview of the steps are given here

Lets walk you through the steps.

1. Turning on developer Mode in Android
2. In your device go to Android Setting > About Phone > Build number, click it 7 times to enable Developer Options in Android
3. Go to The Developer Options in Android Settings and turn on Remote Debugging
4. Connect the mobile with the computer through a data cable
5. Open Android Studio and Goto Tools > Android > Android Device Monitor. While you are doing that you should get a prompt to allow USB debugging in your Device as follows. Allow that and click always allow.

You should also see your device in the Android Device monitor as follows:

This means your device is detected by computer and you will be able to deploy your app in the device.

d. Now lets go to the command terminal in Linux and make our way to our project directory app. And give the command:

 ionic cordova run android --device

This will take some time and deploy the Ionic App in the device. And you will be able to see the app running in the device.

Please note To set the Following when you Install your Android Studio:

ANDROID_HOME=/home/tom/Android/Sdk

JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64

There is also an option to deploy the Application in the android Simulator.

And Voila ! If this works then you have done great and you have set up your development Environment correctly.

And if you are facing problems please let me know in the comments or message me in LinkedIn. I would be happy to help.

Fell free to play around with the Ionic Application and Look though the Generated Code Base. We will Go through the details of how to Develop Pokiwi in our next post.