Getting Started with Phonegap/Cordova

There are two approaches through which you can develop mobile applications. The first approach is native development which means you will develop applications for one platform at a time. 2nd approach is developing application in HTML, CSS and Javascript in a native container. This approach is also called hybrid applications development because it is the mixture of native applications and web applications. It can be useful in developing mobile applications for different platforms (android, iOS, windows etc.) at the same time.

If you are new to mobile development or you want to develop mobile applications faster and easier way, then this is the best approach. By making hybrid applications, you can compile them in any platform and after compiling you will get installable file for their respective platform. Another advantage of hybrid applications is that you have to code once for multiple platforms. So, let's dive into the hybrid applications development using phonegap/cordova.

You will need the following installations in order to start development:

1. Install NodeJS from https://nodejs.org/en/download/
2. Install Git from https://git-scm.com/downloads
3. npm will automatically be installed with NodeJS
4. Install Phonegap + Cordova by opening command prompt (type cmd in Run and hit enter) and type in the following command. It will install the latest version of phonegap and cordova.
   1. npm install -g phonegap@latest
   2. npm install -g cordova@latest
5. Install Phonegap Developer App for mobile from platform respective store. (You have to install this app on your mobile phone for testing purpose)
6. Let's start creating your first mobile Application:
   1. cordova create myApp
7. Goto myApp folder through command prompt
   1. cd myApp
8. Serve your app by typing the following command in the command prompt.
   1. phonegap serve
   It will show you an IP Address with port number like 192.168.1.2:3000, on which the phonegap is listening
9. Now Open the app (Phonegap Developer App) that you installed on your mobile phone and type in the IP Address and port through which phonegap is listening and tap the Connect button.
   Now you will be looking into the application you built on your mobile.

That's it! You just created your first mobile application. Now we will be looking into the files one by one and their functionality they perform.

You will see the folders (hooks,platforms,plugins,res,www) and files (config.xml,package.json) in the app root folder i.e. myApp.

For now, just ignore the folders other than 'www' and files other than 'config.xml'. These are files and folders that you will be looking at first.

Let's dive into 'www' folder:
In this folder, you will be looking at folders (css,js,img) and file 'index.html'. This (index.html) is your main file that you will be working on and their corresponding css,js,images in their respective folders.

The file present at the app root folder i.e. config.xml contains different configuration options like App Name, App Description, App version, App author, plugins included in the app, app platforms etc. For more information about the file, just look at Apache Cordova docs.

Now the question is how to make device oriented files like .apk for android, .ipa for iOS etc? Well, there are two methods for that.

1. Build through command line (which requires their respective compilers)
2. Generate apk,ipa etc files from phonegap build.

There are two main things that I want to mention:

1. You can interact with native functionality through cordova plugin APIs.
2. You can find different plugins for different platforms already built from cordova plugins library.