Writing a Playbook App for Blockly, a Google’s Visual Programming Language

Introduction

Writing a Playbook App is an interesting proposition as BlackBerry’s WebWorks makes it so easy.  Currently the runtime for BlackBerry WebWorks on the BlackBerry smartphones is based on Java while that for the BlackBerry PlayBook is based on Adobe AIR. WebWorks is fully Open Sourced and is developed transparently. 

WebWorks is aligned with Apache CordovaWebWorks is also the main way to deliver WebGL-based applications. WebWorks repositories at GitHub include:

In the summer of 2010, Google released Blockly, a completely Visual Programming language that will let you build software without typing a single character.  It is reminiscent of Scratch, a platform developed at MIT that seeks to turn even young children into programmers.

You create programs by joining pieces together, and are restricted in the same way puzzle pieces are, by what fits where, just like Legos. This is an ingenious and easy to understand method of ensuring that the program is correct. It short cuts the process of having to learn correct syntax. If the pieces fit, the program works.

Blockly is something of an experiment in teaching people to program. Instead of having to learn the intricacies of a language like JavaScript, you can show Blockly to teenagers or even younger kids, and visually explain the concepts and engage their brains.

Requirements

Follow the tutorial published here in Redacacia blog Writing a “Resistor Code” App for BlackBerry Playbook up to Preparing our App. This tutorial will explain how to obtain BlackBerry’s Code Signing keys, as well as how to install debug token in your Playbook, a requirement to install the App that we will write next.

Preparing our App

We are now ready to write our App.  Our App will open Blockly Apps website at https://blockly-demo.appspot.com/static/apps/index.html. There are several Blockly Apps on that website that you can play with, and do some serious programming. My favourite App is Maze, but I have never managed to pass level 6.

Crackberry has a post with a a Youtube link that shows Tim Neil from RIM whipping together a basic CrackBerry.com App in 3 minutes. Actually it is quite easy to turn a website into a BlackBerry PlayBook app as we will do next.

a) Write config.xml 

Our App will have very basic structure. So here is the code for config.xml an important component for writing our App.

<?xml version=“1.0” encoding=“UTF-8”>
<widget xmlns=“http://www.w3.org/ns/widgets”
            xmlns:rim=“http://www.blackberry.com/ns/widgets”
            version=“1.0.0.1”>
      <author href=“https://redacacia.me/”; email=“tayeb.habib@gmail.com”
      rim:copyright=“Copyright 2014 Aliatron”>Aliatron</author>
      <name>Blockly Apps</name>
      <icon src=“images/icon.png” />
      <content src=“https://blockly-demo.appspot.com/static/apps/index.html”>
      <access uri=“https://blockly-demo.appspot.com/static/apps/” subdomains=“true”>
      <feature id=“blackberry.ui.dialog” />
      <feature id=“blackberry.app.event”/>
      <feature id=“blackberry.invoke”/>
      <license>
          Copyright (c) 2014 Tayeb Habib
          THE SOFTWARE IS PROVIDED &quot;AS IS&quot;, WITHOUT WARRANTY OF ANY KIND,
          EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
          OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
          NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
          HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
          WHETHER IN AN ACTION OF CONTRACT, INSULT OR OTHERWISE, ARISING
          FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
          OTHER DEALINGS IN THE SOFTWARE.
      </license>
</widget>

b) Create a zip file

Next, we need to prepare an icon, that must have 82×82 pixels and save as icon.png. Once this is done, we will create a zipped file blockly.zip which will contain config.xml and an images folder with icon.png as the following image shows:

zip_image

To make it easy for this tutorial you can use my zipped file blockly.zip which you can download from Bitbucket, an unlimited free private repositories’ site.

c) Compile a bar file

To avoid error unknown protocol: c you need to first create a temp directory in your C: drive (if you don’t have it already) and then issue the following commands in your DOS terminal:

SET TEMP =C:\TEMP
SET TMP=C:\TEMP

This solution was found at Blackberry’s Discussion Forum. I did not find any alternative solution yet.

So let us compile blockly.zip and output as blockly.bar. Go to your  DOS terminal and navigate to your PlayBook WebWorks SDK

cd C:\Program Files\Research In Motion\BlackBerry WebWorks SDK for TabletOS 2.2.0.5\bbwp

To make it easy, create a directory myapp, and a sub-directory inside called output.  Drop blockly.zip file into myapp directory (or one that you modded) and run the DOS command:

bbwp c:\myapp\blockly.zip -d -o c:\myapp\output

The results will be similar to ones as follows (I have blockly.zip in my c:\ drive’s bb folder and output to blockly folder:

compiling

If you check your output directory, you will now find blockly.bar.

Install and run the App

Now we will deploy this App in our Playbook. Navigate to tablet-sdk with the following DOS command:

cd blackberry-tablet-sdk\bin

Run the following command to install the App:

blackberry-deploy -installApp -password 123 -device (your Playbook IP) -package c:\myapp\output\blockly.bar

Hopefully it will install itself correctly, and you will see the reassuring icon in your Playbook:

IMG_00000033

If you run this App, and wireless connection to your router with Internet is not available, or if you have not tethered your PlayBook to your BlackBerry phone to share Internet connections, you will get the following message (in english or in your PlayBook’s default language, of course):

IMG_00000032

So, if your PlayBook is connected to Internet you will be greeted with the following screen:

IMG_00000034

You can use any of Apps. Here is an image of Maze app working:

IMG_00000029

I will not show you how each of apps work. You can change the language, for example. Blockly is translated into numerous world languages.

One final consideration: The link shown of  Googlecode’s site does not work. I have done it for obvious reasons.

IMG_00000031

If you want to learn how each of the apps works I suggest you check around the Web. There is enormous amount of teaching material from Educators, and others interested in Blockly, and Visual Programming languages.

Conclusions

I have shown how easy it is to integrate a webpage into an App with BlackBerry’s WebWorks. Blockly, Google’s Visual Programming language, is quite powerful and it has lots of potential to be more and more widely used so an App for PlayBook is an interesting proposition. To make your App permanent, you will need to sign your blockly.bar file and re-install it. I leave it to you to do this exercise.

Advertisements

About Tayeb

Electronics engineer, part-time webmaster and owner of "Aliatron", a tech-oriented company registered in Portugal and Mozambique.
This entry was posted in Mobile Apps, Programming and tagged , , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s