Skip to Content
Author's profile photo Former Member

Building a cross platform hybrid mobile app with PhoneGap Part 3: Deployment

Hello and welcome to the 3rd part of my series (and I don’t know what number in the joint series Chris Paine and I have done together) about developing a hybrid mobile app in PhoneGap that connects to Netweaver Cloud. I wasn’t intending to create a third part but I recently went through the fun of deploying the PhoneGap app onto my iPhone and Android, so I thought I should document my experience to hopefully make it easier for everyone else.

Let’s get Android out of the way

I’m beginning to see more and more why it is so much easier to develop for Android, as they really don’t give you that many obstacles! After creating the project in Eclipse (refer to my previous blog post), I was able to implement the code and test it via the simulator. The version of Eclipse that I’m using (Juno) somehow didn’t have a view already there that could be launched within it to manage the Android SDK and virtual devices. After googling it, I found that I could run it from command line using the command $ android avd in the sdk tools directory. You can find more detailed information here. Since then however Chris has given me a handy tip on how to make it appear (see below):

Screen Shot 2013-01-31 at 2.53.47 PM.png

Now that was only to setup the virtual devices that you wanted to use. There were already some that were pre configured, so I used the ones for Galaxy and Nexus. To run it on those virtual devices is easy as pie (as I’ve said before ensure you have the correct target SDK). See the screenshots below:

Screen Shot 2013-01-30 at 11.29.21 AM.png

Screen Shot 2013-01-30 at 11.30.05 AM.png

Testing with a simulator is very handy, but of course you also want to test on an actual device. Believe it or not, the steps are exactly the same to launch the app on a physical device! Besides setting up your device for USB debugging (found in Settings >> Developer Options), all you have to do is plug your device in with a USB cable, and you should see it appear in the list:

Screen Shot 2013-01-30 at 11.37.32 AM.png

jo with phone.png

Voila!! It’s that easy!

Now onto iOS

Testing in the iOS simulator was fairly easy. After implementing your project, you just need to install the devices that you would like to deploy it to, and then run it after selecting the one you want.

Screen Shot 2013-01-30 at 12.27.49 PM.png

However, there’s nothing like testing it on your iPhone. I’d already tested on my Android a long time ago, and so I started looking into how to deploy onto my iPhone.

First thing I realised; Apple wants your money, as all Apple-phenes will attest to. I at first naively thought that deploying to my iPhone would be as simple as Android. Oh how wrong I was. You can’t just connect your phone via USB and hope that you can put the app on it just like that. First thing you have to do is sign up for the Apple Developer Program here. This involves the rigmarole of buying the program in the Apple store and waiting for verification, which happened overnight.

Next step: create a provisioning profile so you can deploy the app onto your development devices. You can do this through the provisioning portal, which has a handy assistant that takes you through the steps.

Screen Shot 2013-01-30 at 12.16.39 PM.png

Screen Shot 2013-01-30 at 12.18.10 PM.png

From there, you just follow the instructions in the wizard to create your provisioning profile, define your app ID, download the certificate and install the provisioning profile in XCode. One thing I found was that I updated my iPhone iOS to 6.1 last night, so the XCode version I had was not compatible with it. You can access the latest version of XCode either in the Mac app store or from the developer portal.

After completing the wizard and updating my XCode, my provisioning profile was now installed so I could deploy to my connected device:

Screen Shot 2013-01-30 at 12.21.48 PM.pngScreen Shot 2013-01-30 at 12.22.00 PM.png

Now all that’s required to launch the app on my iPhone was to press the Run button after selecting my phone as the destination, and it was in my hand at last!!

Screen Shot 2013-01-30 at 12.23.37 PM.png

2013 - 1.jpg

Key Learnings

  • Ensure you have the correct target SDK installed for your app in both platforms
  • If you want to test on a device for free first, do it on an Android, but the $99 for Apple is a worthy investment if you are keen on this area
  • If you’re developing for Android only, life is a lot simpler! But who would ever do that 😛 Chris???

Next Steps

Obviously after all this testing, the next thing to do is submit the app to both the Apple and Google Play stores. Again, it will be much simpler for Android than iOS, but I will save all that for another blog post. Hope you enjoyed this one!

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Chris Paine
      Chris Paine

      Again a great blog with some really helpful tips for those thinking of dabbling in this space. And I'm jealous of the number of pictures you can get into your blog, they really help explain what is happening. Not to mention add a lot of visual interest. We must collaborate on that CORS blog,

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Yes we need to try and make the CORS one more visual hehe. You can put more pictures into your blogs too!! 😉

      Author's profile photo Anson Abraham
      Anson Abraham

      Thank you Joann for sharing this content.

      The way you present this article with pictures is really helpful. 🙂

      Author's profile photo Midhun VP
      Midhun VP

      Excellent. Keep it up.