Dynamically loading the correct PhoneGap.js file for Android or iPhone
I am in the process of putting together a mobile development class and have been trying to figure out the best ways to get students who are new to PhoneGap and Mobile development going on cross-platform development. One of the issues I have been trying to solve is the fact that PhoneGap apps use a different phonegap.js file on each platform. This is a problem that I do not feel is well documented and one that is not easily and cleanly solved.
Since PhoneGap applications require these different JS files I have been unable to find a good way to start building a PhoneGap application in, for example, Eclipse with the Android Development Tool as an Android project and then be able to quickly and easily switch over to XCode and launch the same application as an iOS app. I always need to go and replace the phonegap.js file with the iOS one first and then switch it back before I go back to working in Android. Not a great workflow.
I could probably solve the problem with custom build scripts. I could set up build scripts for both iOS and Android to properly retrieve the correct file and stuff it into the build prior to compilation, but this is not something I want to take the time to do in the classroom (I also don't want the students to have to worry about trying to set up ANT at home). This also prevents me from having an application that can simply be downloaded from GitHub and run without modification. It's also more code to manage. I would need to maintain X number of build scripts (one for each platform) for all of my projects. Sounds like a PITA.
So I wanted a way to dynamically load the proper phonegap.js file depending on the platform. I am hoping there is a better way (or that a better one will come along), but in the meantime this (somewhat hackish) approach seems to get the job done and allows me to run and test my applications on multiple platforms without code modification or custom build scripts.
This approach sniffs the user agent of the device and determines if it is an Android device or an iOS device and then loads the appropriate phonegap.js from a subfolder. I see no reason why it would not work for additional devices (BlackBerry, Windows Phone 7, etc) support as well.
I admit I do not like this approach, and would love to see a better one. This problem does not seem to be discussed much out there. Maybe others are not having the issue for whatever reason, but while developing it was one of the first problems I came across. Maybe I am doing something wrong.
Thanks for your comments and ideas.
When you create a PhoneGap application in XCode it includes the iOS PhoneGap file in the source. And when you create one in Eclipse for Android you're instructed to copy the phonegap.js from the Android PhoneGap files.
I believe you are correct in the way that PhoneGap build does it, but most of us are not using PhoneGap build yet. And I don't want to have to introduce yet another dependency to this class.
Don't get me wrong, I think that PhoneGp Build is a great tool and I have nothing against it, but I do not think it is a replacement for having the SDKs installed in a learning environment.
Correct me if I am wrong, but with PhoneGap Build you upload your source to get back compiled applications. What good are those compiled applications without an emulator to run them on? I do not require my students to have devices, so they will need emulators for testing.
Also, these are students, not experienced developers. There will be many mistakes, there will be lots of testing, there will be lots of the change-code-and-run style of development. Will they need to re-run their build every time they make their change with PhoneGap Build? That sounds like a hinderance. Plus then, even if they *did* have devices, they would then need to manually install the apps on their devices to try them out and if not then they would need to run them on the emulators.
Finally, with PhoneGap build, you need to have a developer certificate and provisioning profile for iOS. Do I then need to require my students to pay the "privilege of developing for Apple iOS" tax?
I think PhoneGap build is awesome for when your App is done and for while it needs to be maintained, but I cannot imagine using it for the development process, and i certainly can't imagine using it for the learning process.
I will definitely bring it up to the class and demo it as a great tool for them to have, but installing and using the SDKs will be a great learning experience for them and will teach them more and allow them to learn the way that I want them to.
Note that this is not a one-day training course for experienced programmers or anything like that. This is a semester-long, academically-focused, undergraduate college course. The students are there to learn to do things in several ways (both hard and easy). I feel the best way for them to learn, in the long run, is to show them how to use all of the tools of the trade.
BTW, I just tried out PhoneGap Build and, indeed, you were correct, I simply needed to include a reference to phonegap.js in my index.html. It took care of adding the needed phonegap.js file to the compiled application.
Somewhat surprisingly, it was phonegap 1.1.0. I have been working with Phonegap 1.2.0. I doubt that minor difference would affect me much in what I'll be doing, but I thought it was interesting.
Because I already have the entire www/ directory linked into the individual projects for each platform. There is not a separate www/ folder for each platform. So I cannot link in a different phonegap.js per project.