Explanation of PhoneGap/Cordova for the Layman

PhoneGap (PG) allows you to build your mobile app with the same skills a web designer possesses. The process goes something like this. You’ll first create your app with HTML, CSS, and JavaScript using your favorite tools, but designing for the small screen. You’ll test your work in a browser as you normally would. This is the basic code you’ll use across devices. If you don’t possess website-creation skills, then you’ll need to start with the basics of HTML and CSS before learning to use PhoneGap. If you don’t know any JavaScript, the learning curve may get steeper because you may have a hard time debugging your code or adding extra features. Note that Java is not the same as JavaScript; PG doesn’t use Java files unless you are creating a plugin for the Android environment. Again, if you have no website-building skills, there are sites to help you build a mobile phone app with drag-and-drop ease — but we are talking about PhoneGap here.

You’ll then download the SDK (“software development kit”) for the device you want to build apps for. Each mobile device (Android, Apple, Blackberry, etc.) will have its own SDK, such as Xcode for Apple and Eclipse or Android Studio for Android, that you’ll need to learn to use. So the learning curve gets steeper the more devices you want to incorporate.

Cordova and PhoneGap use the command-line interface (CLI) with dependencies. That means you’ll use the console (command prompt in Windows and Terminal in Mac). You’ll use npm to download exactly the files needed for your particular use. It’s not one large .exe file that we are accustomed to in Windows or .dmg in the Mac. Depending on your project, the amount of “dependencies,” or software modules used for a particular task, will differ. This is a good thing, for developers want exactly the software they need and not code bloat.

When the environment is set up, you’ll insert your project into an SDK’s folder with other PhoneGap project files. (For instance, in Eclipse for Android – replaced by Android Studio – your files will go into an /assets/www/ folder.) There is a different set of Cordova files for each device, so it is not a one-size-fits-all solution. By incorporating pre-built software “plugins,” you access a mobile phone’s capabilities from within your app, such as its camera.

If you are building an app for the iPhone devices, then you’ll need to download Xcode from Apple’s web site to a Mac, install all your project files (HTML, CSS, JavaScript, certain PhoneGap files, and plugins), make any updates to the native Xcode files if necessary, and compile it within Xcode. You’ll need to run it on an Apple mobile device to test it and if it’s fine, you pay Apple for a developer account, upload it to Apple, and it goes on to the App Store when accepted. (This is a simplified version of the process. Some steps have been omitted.)

The basic thing about PhoneGap/Cordova is that it allows you to take the same HTML/CSS/JS project files and incorporate them into each of the different devices it supports. (There are exceptions, of course; some devices will favor a particular video format or codec over others. “Program once — run anywhere” stretches the truth, and has caused the unwary programmer unexpected consternation. For instance, varying mobile platforms support HTML5 specs to wildly varying degrees.)

It does not support every single capability of every single device, but it supports a lot of their features. Simon MacDonald wrote, “On each platform we use the available web view. That is the UIWebView on iOS, WebView on Android, etc. That leads to some differences in how CSS works as depending on the OS or version of OS, some features of CSS3 are better supported.” You would not use PhoneGap.Cordova at this time to build a web site (or web app), because a web site will not have access to a smartphone device’s capability. If you do not need to interface with a phone’s features, then PhoneGap is just a painless way to get your index.html pages on the small screen with a minimum of fuss.

PhoneGap does not provide a graphical user interface (GUI). It is not plug-and-play or drag-and-drop. You provide everything to make your app work, and PG provides a way to plug your app into the device’s functions.

PhoneGap does not contain a server at present. So you cannot run PHP or other server-side code in PhoneGap. If PHP and other server-side code is a must for your app, then run it on a server and link to it in your app, such as with Ajax and XHR (example code: https://iphonedevlog.wordpress.com/2014/03/28/populate-your-phonegap-app-with-data-from-an-external-server-db/).

PhoneGap is a work in progress. Its code will regularly change and you MAY need to update your project and debug to make sure everything still works, especially when a plugin hasn’t been updated yet to work with the latest version.uploaded to the device, either synced through iTunes in the case of Apple devices, or as a file upload for Android devices. I naively thought I could create an app, upload it to the store, and forget it. Nope. Stores get updated with new requirements; smartphone OS’s get updated, making your code obsolete; etc. You have to stay on top of a fast-moving coding landscape and be ready to update all your apps when things change. Keep careful track of passwords, documentation, and so on to help you update each project.

If you are not comfortable with programming, there are alternatives to using Xcode, but they are sometimes limited in functionality. Also, many “mobile frameworks” have been created, such as Jquery Mobile, that have the GUI (Graphical User Interface) elements like buttons and lists already configured for your use — free! See my iPhone Crib Sheet links for a few of these resources.

PhoneGap assumes you already have the requisite system environment. Here is a sample process to get your computer ready to work with PhoneGap/Cordova files: https://iphonedevlog.wordpress.com/2014/10/30/setting-up-your-developmemt-environment-for-cordovaphonegap-android-projects/

The closest I’ve seen regarding building one codebase and running everywhere with Cordova PhoneGap is in this article by highly experienced developer Kerri Shotts: http://blog.safaribooksonline.com/2012/07/12/searching-for-a-single-codebase-with-phonegap/

Here is how developer Mark Harr explains his development process for building multiplatform apps with PhoneGap.

1. Build the project first as a simple website.

  • Use only HTML, client-side JavaScript, and CSS.  Do not use MVC, .Net, Ruby, Rails, PHP, or any other server-side frameworks or technologies.
  • If you need to use server resources, use those in a separate project (or site) and use Ajax calls from the client-side JavaScript to access the web methods.
  • If you need PhoneGap resources, put code in to check that PhoneGap is loaded (i.e. if (device != ‘undefined’)) and stub out for your testing/development when PhoneGap is not there.

2. When your web pages are ready for mobile testing, then follow the PhoneGap Getting Started guide to set up your project for your device of choice. (At present, you’ll use different PhoneGap files for different platforms.)

  • Copy your web pages (and JavaScript, images and CSS) to the appropriate /www directory of the software development kit for that project.
  • Test and tweak for that platform.
  • Repeat for each mobile platform.

The key is that PhoneGap provides the resources to use cross-platform HTML, JavaScript, and CSS in multiple native (or hybrid) mobile apps. But the vast majority of your time will be using standard HTML5 for the app, then deploying and testing on the platforms.

But, for that last step, the mobile app step, you will need the appropriate software and hardware platform for the mobile platform you are building apps for. That means Mac OS and Xcode for iOS apps; Android Studio for Android apps (along with appropriate SDK — Software Development Kit) on either Mac or Windows; Windows OS and Visual Studio for Windows Phone apps; etc.

There are a several ways you can build and test your app on the Mac platform without owning a Mac, but experience has shown that buying an inexpensive, refurbished Mac unit for ongoing building and testing is less aggravating than using a borrowed Mac or online services to publish to the iTunes App Store.

Some people have expressed reluctance to use PhoneGap because they think Apple will reject their app because of it. This article addresses this issue on app rejection and PhoneGap: http://www.adobe.com/devnet/phonegap/articles/apple-application-rejections-and-phonegap-advice.html

Confusion surrounding PhoneGap and Cordova coding. People starting out with PhoneGap or Cordova tend to keep hitting the same brick walls due the normal ignorance of Starting A New Thing. Read these short posts to learn more.

For a discussion that explains PhoneGap, read this very informative post (requires signing in to Google groups):

If you are confused about the terms PhoneGap and Cordova, then read this blog post

Read this to avoid the main issues PhoneGap and Cordova beginners make: https://github.com/jessemonroy650/top-phonegap-mistakes/blob/master/new-to-Phonegap.md

Kerri Shotts gave a very eye-opening answer to a Cordova Google Groups post asking whether HTML/CSS/JS is all we really need to know to develop Cordova apps. She answers from her considerable experience here: https://groups.google.com/forum/#!topic/phonegap/IugJMv2A8Jg

Updated 2/8/2016

23 thoughts on “Explanation of PhoneGap/Cordova for the Layman

    • I don’t know what you mean.
      1. There are many plugins for Cordova/PhoneGap to give you more functionality.
      2. Build your project using Cordova 3+ to get the files you need in the project, then open Eclipse to build the final project and create the signed apk for release.

  1. Pingback: Setting Up Your Development Environment for Cordova/PhoneGap Android projects | iPhone Dev Log

  2. Steve, thanks for your blog.
    How do I decide whether to hire a Phonegap developer or a developer for each specific device on which I would like my app to appear?
    I want to use the skeleton created to make different permutations of my app idea.
    I would say my app idea is simple: presents material, hyperlinks, and quizzes.

    • It’s an easy question to answer: do you want to hire a different developer for each platform, or just one developer to create an app that works across several platforms? My money is on the latter. If this does not answer your question, then I misunderstood it.

  3. Hi ,
    Can we develop Android application using phonegap with Mysql as backend DB? or can we use sqlite DB for this as in Native android application?

    • If you mean whether you can use MySQL and/or PHP from within the app, no, for PhoneGap and Cordova are not server-based. They have no servers to interpret the language. You must do everything as client-side. However, you can put your server-side code on your server and interact with it. I have a database article online where I did just that with XHR. Do a search for xhr to find the article.

  4. I’m evaluating whether I should try working with PhoneGap and Cordova instead of continuing to develop in XCode. I sure appreciate this article and the others you link to. One question I’ll be looking for an answer too is, will I be able to use apple maps with overlays from within this/these environments? Those are important to my current app project and others I’d like to create. I’ll keep reading! Thank you.

    • It depends on why you want to switch. If you want to distribute your app to several platforms, then of course you’ll want to — you have no choice but to go hybrid.

      I’m not sure what you mean about “develop in Xcode.” Do you mean work in Objective-C?

      As for using Apple maps, this article (from a Google search of “apple maps in html”) seems to indicate that it’s based on HTML: https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/MapLinks/MapLinks.html

      • Thanks for that article reference. I will read it.

        I’m being really cautious about thinking through why I want to switch too! You’re right to ask. When I say developing in Xcode, I mean launching Xcode on a regular basis and working with Objective- C (though I had planned to switch over to learning Swift after I finish this project), using Storyboards in Interface Builder, and the Foundation Code.

        The reason I’m considering trying a new work approach, is because I constantly seem to run up against funny problems! I know that as programmers we always have a gut reaction that it’s the product we use that bites us (oh – never our fault!) but so often I find a problem I’m having out on Stackoverflow and see that other people consistently have the same problem, and attribute it to changes or problems in the Xcode environment. Given that I still need to wrap a PG/Cordova project in Xcode (if I’m saying that right), maybe I would run into these problems anyway.

        I like the idea of working in HTML5 because I worked with HTML in times way, way past . Of course that means I will need to work to come up to speed with a much, much more robust product. Also I would have to learn CSS and JavaScript, and I’m sure there will be a lot of time to spend on all of those things. But I like the idea of developing using a browser as a test environment.

        It’s always tempting to try out new methods, but I also want to get my project done in the not too distant future, and submitt it again to the apps store. So I think I should approach PG/Cordova a slowly and carefully, while continuing with my project.

      • Also I forgot to say bout the apple maps article, which I skimmed through …

        I’m working with an app which uses an apple map as a base layer (my words) then on top of that map I lay down layers of things that are not available in Apple maps and not always in google maps either

        Those overlay layers in the current case are images that represent trails not available in Apple maps, but I’d like to be able to do similar things with historical pathways or non geologic/geographic features that I exist as images but are not tied into mainstream maps

        Hard to describe that ! Water resources are a good example An apple or google map does not necessarily include all the culverts A picture of a geological fault would follow map lines too An archeological map layer showing settlements no longer in existence is another example . The Trail of Tears, route of Lewis and Clark ,or Trading trails from past times would be overlays

        In addition I want to work with GPs info which I’m not currently doing within my app – because the trails I’m displaying don’t show up in apple maps

  5. Enjoyed your post. But,as a newbie, i’m lost as to how this relates to Phonegap Desktop. It seems to be neither fish nor fowl. It has no documentation at this point, that I can find, appears to include some preloaded plugins, but beyond that I can’t figure out what set of docs I should be looking at.

    • Well, that would have been a perfect way to end the article – with instructions on how to get started. I suggest you start with the top three links in the tab above, Workflow. There, I take you through the complete setup of the desktop for Cordova as though you’ve never done it before – just the way I like my technical articles!

      Also, the actual documentation for Cordova is found at http://cordova.apache.org/

      Thanks for asking.

      • Steve,
        Thanks for your prompt response, especially on a holiday weekend. Not criticizing the article at all, which I think would help me a lot if I were using the same form of Phonegap. But I don’t think I am.

        I’m sorry, I must be explaining this wrong. All of your info seems to refer to Phonegap CLI or Cordova CLI, but I am trying to use the supposedly simpler “PhoneGap Desktop” http://docs.phonegap.com/getting-started/1-install-phonegap/desktop/

        It looks like this is fairly new, and for documentation, the site says it is still being worked on (except for installation and how to get a Hello World to run. I’m looking for things like how to get the permissions correct for loading an external web page, how to add a new plugin, etc., but everything I find on doing most anything has different instructions for Phonegap CLI, Phonegap Build, Cordova CLI, etc., but nothing that tells me what to follow for PhoneGap Desktop.

        Does that make any more sense than my first post?

        Again thanks.


      • Actually the PG Desktop is a mystery to me. It is built by the Adobe people, not the Cordova CLI people, so I have only a little experience with using it, mainly just tried it out once to kick the tires. If I understand it aright, you make the app on the desktop (not the Desktop, get it?), and the app shows you what it looks like in a device. You don’t actually build an app with it. You just use it to view it, like an emulator. Serious developers don’t use it.

  6. Steve,
    Thanks again. Too bad Adobe doesn’t make any distinction between PG CLI and PG Desktop. It implies they are simply two different versions of the same thing.

    So what is your recommendation for the easiest way for me to get from here to there — I have a single project that I am working on, it is in HTML5, CSS and JS (though it talks to server-based CGI written in Perl via hyperlinks), and I’d like to turn it into a mobile app. I’d like to do more than a straight port – add some native buttons, add in a plug-in for inapp payments, etc.

    I’ve never written Java. I’m fluent in Delphi, and one option is to add their mobile development platform to my existing development machine, but they want more than $1K for that and it will have a learning curve as well. But I don’t mind paying for something that would save me time and that has enough documentation that I am not totally dependent on the kindness of strangers :-)

    Any thoughts would be appreciated.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s