First Mobile application using Apache Cordova / PhoneGap – Beginner

Phonegap/Cordova is a well known tool for developing mobile applications helping web developers entering into mobile world with their existing skills of HTML5 and CSS3.

Today we will address most critical point for developers who do not know how to start with these tools. I will be making it more self explanatory by adding screenshots for each step alongside.

To understand this tutorial correctly you must be knowing following,

Let us dive in then,

Step 1. Get ready to roll
One of very important step to remember for beginners, Go to start menu, Open Command prompt by “Right click -> Run as Administrator”. This will let command prompt know that it is allowed to install anything it wants.

Command Prompt

 

Step 2. Create the Phonegap project directory
Very important step towards building your application, type this command in your command prompt. Your learning starts here,
cordova create Myapp com.companyname.myapp Myapp
This command does the entire magic. It creates required architecture for an HTML5 Cross platform application. Let us understand the command components.

Myapp : Your Folder name for your New Project

com.companyname.appname: Unique identifier for your application. It can be anything you want.

Myapp: This is your application name (Must be mentioned without Space)

Create Project

 

Step 3. Learning project file structure
Let us understand what Cordova has created for us with above command. It is important to understand as it forms the basic understanding of application.

Directory structure

config.xml
This is main configuration file of your application and allows you to customize the behavior of your project.

/www
This folder Contains the project’s .html, .css and .js files. Most of your code and assets will go here. They will be copied with a compiled version to each platform’s www directory for example in platforms/ios/www or platforms/a/+ndroid/assets/www. You should only edit these files and not located under the platforms sub-directories.

/platforms/
This directory contains source code and build scripts for the platforms like iOS, Android and Web applications that you have added to your project.

/plugins/
Any 3rd party plugins which are needed to add any required features. These plugins will be extracted or copied into this directory during build time of application.

Step 4. Adding required platform

Always remember that you will run all commands while you are inside that folder.
cd Myapp

Now, add platforms you need in your application.

For Android application
cordova platform add android --save

For iOS application
cordova platform add ios --save

Step 5. Building the application

To make your application run on respective platforms we need generate “Application build”. Following are commands to generate builds for all platforms you have included in the application

cordova build

This command will generate builds for all platforms. However, if you want to generate builds for individual platforms use following commands

For Android application
cordova build android
This generates “.apk” file which can be installed on android platform. You can find this generated file in “/Myapp/platforms/android/build/outputs/apk/android-debug.apk”

For iOS application [This can be run only on iOS operating system]
cordova build ios
This generates “.ipa” file which can be installed on apple devices.

That’s all for now folks!!!

Leave a Comment.