I have shown in my previous post Writing a “Resistor Code” App for Blackberry Playbook that it is quite easy to design apps for Playbook. That said, it is quite easy also to design apps for Blackberry smartphones, with recourse to Blackberry WebWorks.

So what’s Webworks?  When you hear the words Blackberry WebWorks, think HTML5, JavaScript, and CSS. Essentially, a BlackBerry WebWorks application is a web application that runs on a BlackBerry smartphone or a BlackBerry PlayBook tablet.

Requirements

The creating of Blackberry packages is done with not many external requirements. However, you need to use external tools in order to generate signing and debugging assets required to put deployments onto device.

Setting-up a Development Machine for Blackbber Deployment

Blackberry Web Works SDK must be installed in order to obtain various tools required for obtaining certificates and device provisioning.

1. Follow the instructions at https://bdsc.webapps.blackberry.com/native/ to download the SDK and any additional tools listed on the page.
2. Install the SDK to your development machine.

I assume that you have the Development Machine ready by now as you proceed to next steps. If not, I recommend you set up the Development Machine before proceeding.

Code-Signing Keys

We will start by requesting a code-signing keys at https://www.blackberry.com/SignedKeys/. They are absolutely free!

Enter your name, company, email, country and a 6-10 digit “PIN.” Take note of the PIN since you will need it in next steps. I suggest you write down in a file named says “keys.txt” in a folder say named “BB”.

RIM will tell you to allow up to two hours in order to receive your code-signing keys by email.

When you are registered you will receive code-signing keys.  You will receive 3 csi extension files with words like RBB, RCR and RRT. Copy then all to the folder you have created for keys. We suggested to be “BB” as the paragraph before last says.

Now we can associate our own password with each of the code-signing keys.  Enter into command-line of your PC , writing in your PC’s window in Start -> Run the command cmd/k

A full listing of DOS commands can be found at Wikipedia.

Next, in Command-line Terminal navigate to your Program Files with following:

bcd C:\Program Files\Research In Motion\BlackBerry WebWorks SDK 2.3.1.5\bin

If you know how to deal with DOS (check in previous paragraph Wikipedia’s link to learn about DOS commands) you can get there step by step. I advise you at this juncture revise DOS commands.

java -jar SignatureTool.jar c:\bb\(your RBB csi file)

In my PC I did the following:

Note that SignatureTool started immediately and a popup window will open asking to generate a new set of signing keys in case you do not have these yet:

Press Yes button in next popup write your password. Take note of this password, and keep it safe. You will require this password in next steps, and in the future.

A new popup will invite you to write the PIN and the password. These are the PIN you selected when you requested your signing keys and the password you have just created:

Next run again the command changing the name to RCR file:

java -jar SignatureTool.jar c:\bb\(your RCR csi file)

The same type of popup will invite you to write your PIN and password as you did before.

Repeat the same procedure with RRT csi file. If you have done all the signings and got reassuring popup windows telling you that you have registered and have also received email from websigner at Blackberry that you have successfully registered your keys you are ready to compile your App.
Preparing our App

We are now ready for our App. Our App will be a “Resistor Code Calculator” based on Danny Goodman’s quite old, and still popular, “Graphical Resistance Calculator”. You can view and play with the Resistance Calculator visiting Danny’s web application at:

http://www.dannyg.com/examples/res2/resistor.htm

I am proud owner of Javascript Bible that I bought many years ago from Amazon. Danny Goodman has authorised me to use his Javascript code to design our Blackberry Playbook App. The code we are using is quite old as old as my Javascript book. I don’t think the Javascript code has changed much, perhaps it has been fine tuned only.

In order not to reinvent the wheel, you will accept my zipped file “rescolbb.zip”  which you can download from Bitbucket, an unlimited free private repositories’ site.

Unzip the contents of zipped file. You will need an unzipper program perhaps. And now view the webpage (use Google’s Chrome as you will need it next). We are going to use the web app in the file to make our Playbook App.

You will notice there is a config.xml file in unzipped contents you have just downloaded. This file is required to compile our App.

You can preview how our App will look like on Playbook, by installing Chrome’s “Ripple” plugin. You can read about how to install it in Blackberry’s Developper pages.

When enabled “Ripple” runs a web server on port 9910 of your computer. You will need to tweak Ripple in Chrome’s extensions (you can access “extensions” directly with pointing the Chrome browser to chrome://extensions). As shown in following image (in Portuguese, but I think it will be something similar in English) we have tweaked Ripple to view your PC’s URLs:

Now open index.html in Chrome. In first run time of Ripple, after enabling, it will be asking you the platform you want to run the page. Choose WebWorks (2.0.0).:

Having chosend WebWorks (2.0.0) you will be next greeted with following as shown in the image:

The left and right popups will allow you to configure your environment. I did nothing of that sort, as I was unable to start Ripple services due to problems with portuguese language characters in my Windows. I suggest you close the popups, pressing with the mouse onto two little arrows on top, pointing to left and right. You can zoom to view, within Chrome’s personalization (surely you know to do it!), and you will see our App in a simulated Blackberry smartphone:

Compiling our App

We will next compile our zipped file (you just downloaded). If you have made any modifications to extracted files you will need to create a zipped file, that is if you want to implement your modded webpage.

So let us compile rescolbb.zip and output as install cod files. Return to DOS terminal as shown previously, and to directory where bbwp is, with the following DOS command:

cd C:\Program Files\Research In Motion\BlackBerry WebWorks SDK 2.3.1.5

To make it easy, create in C:\ a directory say myapp.  Drop rescolor.zip file into myapp directory (or one that you have modded) and run the DOS command:

bbwp c:\myapp\rescolbb.zip -g (password) -o c:\myapp\output

Your signing may hang up as it was happening to me until I found on the Web that there are problems with sigining with jdk1.7.x so pointed my browser to Oracle’s jdk-6’s googling for it-And downloaded jdk-6u35-windows-i586.exe and installed on my PC. Next I edited bbwp.properties found in bin folder of our WebWorks folder changing the jdk’s path as shown:

Now if we compile again with the same command:

java -jar bbwp.jar c:\myapp\rescolbb.zip -g (password) -o c:\myapp\output

We will compile and output folder will be created automatically . In my system I have rescolbb.zip in bb folder. The following image shows the successful compilation:

I have blurred my password and output is rescolbb_signed folder that was created automatically. Checking the output folder we will find there two folders OTAInstall and StandardInstall:

If you wonder why we took the trouble of signing our App is that otherwise our App will not work once installed in our Blackberry with an error like “Error starting AppName Module ‘AppName’ attempts to access a secure API”.

Installing our App

I assume you have Blackberry Desktop Software installed in your PC. You will need to connect your smartphone to your PC with an USB cable. You will need StandardInstall where your COD and ALX files are.

The following video shows how simple is to install your App:

You have to be patient and waith for your Blackberry to re-initiate. It may take a while.

Once installation is complete you will find the Resistor Code icon as shown in following screen capture of my Blackberry smartphone:

Run the App and you will see the following screen:
If you have reached this stage of the tutorial with success, congratulations! That is it. You can tweak the color bands of the resistor and see the corresponding values.

Acknowledgements

Credits are due to Blackberry for providing so much valuable and free information on the Web. A special thank you is also due to Danny Goodman for his “Graphical Resistance Calculator” web application which has served to design our App.  Once more  I thank Bitbucket for providing me a free of charge repository from where rescolbb.zip can be downloaded.

Conclusions

As you have already seen, and tried (I trust) it is quite easy to write, and to deploy a webpage in a Blacberry as an App. You can even deploy a web link as can be seen in this App we have just designed which will open webpages within the App.  The links at the bottom open Redacacia blog (this actual blog where you are!) and Danny Goodman’s webpage. If you have a “killer” webpage that you have written in Javascript, I bet you can deploy it as an App. As I wrote before in my Playbook tutorial, in order to deploy in Blackberry App World Store, and to monetize with it, you will need to sign your App to make it publicly available, and you will have to take into consideration more issues surely.