Archive - May, 2013

UX/UI Guidelines for Built for BlackBerry Applications (BlackBerry Jam Americas 2013)

Creating High Performance Mobile Apps with HTML5 (Adobe Max 2013)

Meet GAP Alpha for HTML5, no need to use command line anymore

Important: This is not an official BlackBerry tool and there is no plan to provide support/updates. Use it at your own risk.

Hello BlackBerry 10 developers focused on HTML5 and WebWorks, I’m happy to share this nice tool called “Graphical Aid Plus Alpha for HTML5″. With this visual tool (GUI), there is no need to use command line anymore, and you can:

- Order your signing keys
- Register your keys
- Backup your keys
- Restore your keys
- Create and install debug tokens
- Build WebWorks apps (without having to zip your files)
- Install .bar files in the simulator or any device

Credits to Iago Barboza (Developer), Dieges Lima (Designer) and Leandro Sales (ScrumMaster and Coordinator), members of the Tech Center in Brazil at Federal University of Alagoas, supervised by me (@demianborba) and Rodrigo Peixoto (Application Development Consultant), not forgetting the extra help from TainĂ¡ Ribeiro (Designer) and Dielson Sales (Developer).

Before you download GAP Alpha for HTML5, please make sure you download and install the current BlackBerry 10 WebWorks SDK.

Click here to download the GAP Alpha for HTML5 for the Mac (29 MB)
Click here to download the GAP Alpha for HTML5 for Windows (22 MB, open the .exe to start)

Enjoy!

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