Wow! No more re-packaging when testing HTML5 apps on your device

If you are a HTML5 developer targeting the BlackBerry platform, you know that for creating apps and testing on devices you have 2 options:

A. Use a visual tool like “Graphical Aid Plus Alpha for HTML5″ (details here)

or

B. Use command line:
1. Select all of your files (CSS, JS, HTML and any other local files like videos, mp3s, images etc, INCLUDING the config.xml file)
2. Zip all these files
3. Run bbwp to PACKAGE and SIGN your application
4. Use blackberry-deploy to install the app on your device
* If you need to remember all these steps, we have short video tutorials here.

And if you do changes to your app and need to test it again on your device, you need to increase the buildId and repeat ALL these steps again. Painful, right?

Not anymore! Let me show you how you can avoid repackaging over and over again, every time you have changes to your app:

VIDEO TUTORIAL:

Normally on your config.xml file, you have the first file that opens (i.e. index.html) defined in the tag “content” with the attribute “src”:

The good news is that you can point this index.html to be a local file on your server or computer (i.e. When using Wifi, my computer IP is http://192.168.1.141. When connected via USB, my computer IP is http://169.254.0.2):

But you can’t forget to whitelist your computer or server, by adding this to your config.xml file:

To get live updates on your device (without having to refresh, close or open the app) you can get LiveReloader for just 9.99 dollars and install on your computer. With that in place (after adding the JS code to your index file), as soon as you hit SAVE on your computer, it will update the app on your device, automagically!!

Now you can package for the last time, and do all changes on your computer.

And when you have your app all set, remember to remove the IP and set it back to index.html before submitting it to AppWorld.

Good luck and happy coding!! #GoBB10 GoHTML5

2 Responses to “Wow! No more re-packaging when testing HTML5 apps on your device”

  1. Leandro October 19, 2012 at 8:48 pm #

    WoW! This is a tremendous advance… I really appreciate this change and will help us on having faster development process. Thanks RIM for this!

  2. NegatronDev October 20, 2012 at 6:17 am #

    This is great. Will give it a try. What I use to do is access my app via wifi from my device using the apache webserver http:///myApp