I built my first PhoneGap app!

My CS 401 Software Development class for Spring 2013 at Worcester State University is developing an iPad app for the Worcester Art Museum (more on that in another post.)

Because few of the students have Macs the development environment was going to be a problem. There was the option of using either WSU’s or WAM’s Mac labs, but I figured that the students would want to work outside of the normal hours of the labs. Fortunately, Stoney Jackson at Western New England University suggested that I look into PhoneGap, a free and open source framework for developing cross-platform apps using the web technologies HTML, CSS, and JavaScript. PhoneGap will take a site developed using those technologies and compile it into a native app on a number of platforms, including iOS.

Even better, Adobe, which now owns PhoneGap, has set up a build server. That means that we can just have their site do the build, rather than having to rely on the few students in the class who do have Macs to do the building. To use it for free, your code does have to be in a public GitHub repo, but we were going that route anyway.

Last night I decided to do some more reading on PhoneGap, and discovered that it’s really simple to build a working Hello World app using their Getting Started documentation and GitHub respository of code. I forked the code, and submitted it to the build server, then downloaded the working app to an Android tablet. I wanted to download it onto my iPad as well, but it seems that I’ll have to go through the Apple developer provisioning setup to get a key. I’ve done that before to work on a native iOS app, but I’ve got to go dig through all my notes to get back up to speed on that process.

I decided to write up this post so that my students can see the steps I took, and get the example working on their own systems. This is pretty much just what is posted in the Getting Started page on the PhoneGap Build site.

1. Fork the https://github.com/phonegap/phonegap-start repo. The fork button is in the upper-right hand corner of the page (https://github.com/phonegap/phonegap-start/fork_select).
2. Go to your own GitHub page to see the repository you just created.
3. You can clone that repo to your local machine if you want, but that is not necessary at this point, unless you want to make changes. I decided to leave making changes until later.
4. You will need the http URI for the repository, so either copy it or leave the page/tab open.
5. Go to the https://build.phonegap.com/ build site, and choose the Completely Free plan.
6. Sign in through your GitHub account.
7. Click the +new app button.
8. Make sure you’ve clicked the open-source tab.
9. Paste the URI from your fork of the GitHub repo.
10. Click Ready to Build.
11. When it’s done, click the appropriate device icon to download it to your device.

Next steps for me:

1. Make some changes to my fork, build, and download again.
2. Figure out the iOS provisioning so I can build and download to my iPad.

We’ll have to figure out how to set up the provisioning for the class after we determine which iPads we have available (student- and/or museum-owned) for testing.