Installing and setting up Apache Cordova / Phonegap environment

Today, We will dive into world of hybrid mobile application development. Being a Web developer what are advancements in my career apart from learning HTML5, CSS3, JavaScript and some arbitrary programming language. Mobile Application development is an answer.

Lets explore some history about Apache Cordova and Phonegap which forms basics of hybrid application development.

What is a Hybrid application?

Applications that uses standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform complaint development. These applications execute inside wrappers targeted platform. They access various device functions via standards-compliant API bindings.

Who can learn this?

  • An existing HTML/CSS/JavaScript developer who want to utilize their general skills to extend a web application to be packaged and distribute it as a mobile application on various platforms.
  • An existing mobile developer who wants to extend an application on more than one platform, keeping same code base.

How does the architecture look like?

Above diagram shows a high level view of a Hybrid application. As shown there are several components to it.

How to get started on my desktop or laptop?

So far so good, all theory and knowledge sharing over bringing web stuff on mobile platform. Now, lets get our hands dirty with real stuff. Cordova/Phonegap be it 2 names but they both require NodeJS platform to be present on the system.

Do not get disheartened if you dont know NodeJS you dont need to know it. Just install it as any other software. You can grab its installer from their official website. NodeJS installs itself along with its awesome NPM [Node Package Manager] which we require to install our development tools. Just verify your installation by checking their versions in Command prompt using following commands. Refer to screenshot for command output.

node -v
npm -v

Now, I hope you get safely till here. Now get ready to install our development tools. Here our actual journey starts of taking web towards mobile.

Lets install our development tools.

We will see installation of both tools simultaneously because you select either of them the installation procedure is same.

npm install -g cordova
npm install -g [email protected]

After installation verification method is same as we used for NodeJS and NPM.

cordova -v
phonegap -v

Hurray!! We have successfully setup environment for mobile application development. Get ready to dive into world of mobile development.

Leave a Comment.