Make your cool web app mobile : Part 1 Upload your zip file
Frequently phonegap gets brought up in CoderDojo as an option to get some of the cool projects online into the app store. PhoneGap definitely provides an excellent platform to achieving this for HTML based programs without having to learn advance programming concepts at an early stage. This quick access to the app platforms provides an excellent, quick and exciting hook for anyone looking to get started with app development.I played around with it two years ago using the eclipse IDE, building a simple geo tagging app using HTML 5 was alot of fun and at the time was a great introduction to phonegap and its capabilities. For a Java developer being asked to build a phone gap app on the eclipse platform was not a challenge and was able to get the app up and running fairly quickly. Most people out there aren't Java developers so asking them to jump into an IDE and understand all the concepts is an adventurous leap that cause many unwelcome side effects including frustration, hair pulling and even failure. You have built your really cool and fun web based app, you just want it to become an app.
Well this blog is just what you are looking for and will provide you get you up and running with your first app using the Phone Gap build cloud service. I will outline the easiest of the two approaches to getting your app working by a zip file. In part 2 of this blog I will outline the github option.
Control the excitement
There is a few points you will need to be aware of before deciding the PhoneGap build approach is the right option for you
* With this option you will only be able to build one private application
* If you have more than one app to build you have the following options
- Need to delete you app from Phone Gap build server before you build a new one each time
- Have all you code opensource on github
- Need to upgrade you account and pay
One other key difference here is that you are only really testing you mobile app on the phone after you deploy it so you may find yourself deploying this multiple times, before you get it right. This is where the eclipse solution has the advantage as you can quickly deploy your phonegap mobile app to your phone for testing while you are developing.
Demo code
The code was put together for the purpose of showing how easy it can be to build a phonegap article, code is a very basic web page, to highlight the phonegap cloud service. The code used for this demo can be found athttps://github.com/CoderDojo/GetStartedWithPhoneGap
1 Lets get coding
You have building you app and now you want to phone gap it, well the first step is an XML file you will need to create and put in the root folder of your web app. Call this file config.xmlUpdate the following values for your needs
- Id
- Version
- Name
- Description
- Icon location
2 Zip up your web app
Now zip up the root folder of your web app so it can uploaded to phonegap for deployment.3 Register on phonegap site
You will need to register on phone gap site (https://build.phonegap.com) to get their cloud service built the app, you can sign up in two ways- GitHub credentials (Register using you git credentials if you want to upload your web app from github)
- Phonegap registration with your email address
4 Upload your zip file
On your private tab, click upload a zip file, this will turn you web app into a mobile app.
5 Download you app
In this example select the android application and download the apk file.
6 Get your phone ready
To test your app on your Android phone you will need to enable it allow "Unknown Sources"Navigate to Settings > Applications > Unknown Sources
Make sure this setting is ticked or turned on.
7 Deploy your app
You can deploy the app in two ways first- Put the URL from the android button link into the browser on your phone and download you apk file which will also install
- Upload to your phone using USB and install it.
