Create PhoneGap Apps Without Installing PhoneGap – Part 2Part II - The Tutorial You Were Actually Looking For
In my last post, I detailed my hurdle-filled saga of attempting to install PhoneGap in order to begin developing cross-platform mobile apps. The tl;dr version is that it was a pain and wasted several hours of my time with nothing to show for it.
You can clone the repo directly from this address
Within the repo are a handful of things that you won't be needing to get started. None of these would be detrimental to keep in your project as you get started, but I find it easiest to start from as clean of a slate as possible. The root of the repo contains the normal copyright, license, and readme. Then there's the www folder. This is what we're interested in.
The "res" folder contains OS-specific folders, containing numerous images to be used by each OS as app icons and splash screens. It would probably be good to hang on to these, so that when you are building a real project, you have a template for how to set up all of these features. Again, doing a test app for learning purposes probably means you won't need them, and these are all default images from PhoneGap that you probably don't want for your app. The "icon.png" file in the main directory is also used as an app icon (this is the default one). I generally replace this file with a quick icon of my own making for whatever project I'm going to be creating.
Lastly, in the "img" folder is a "logo.png" file that is specific to their default application. You can go ahead and get rid of this, as you will be adding your own images in to that directory specific to your project.
With that, we are left with an empty img folder, a css and js folder with one file each, and index.html and config.xml in the main folder. The config file contains all sorts of default information for the test project, with pretty good instructions for what they all mean. I recommend going through the file, and updating as necessary for your project.
In the index.js file, under the js directory, you will probably end up removing all of that existing code to write in whatever is needed for your project. It will give you a basic idea of some of the JS usages in PhoneGap, but you will need to go to other guides and information points to get anything really useful in this regard. The index.css file is pretty standard CSS, though you should make note of some of the webkit specific features they are using here. Again, external references will probably be a better source for learning this.
That's it! You now have a clean, basic www folder that you can use to begin building your PhoneGap application, which can then be uploaded to PhoneGap Build to compile into apps for all the major mobile OS platforms. Have fun!