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):
https://groups.google.com/forum/?fromgroups=#!topic/phonegap/bf1Hgkel3W4

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