Using Sencha with BlackBerry 10

images

As some of you may be aware, you can win a free BlackBerry Dev Alpha B by creating a Sencha (HTML5) app.

Here you go.  There are a ton of ways to do this.  But I will give you high level steps that work.

 

Registration

Step 1:  1 week : Create a vendor account at http://appworld.blackberry.com/isvportal

Step 2:  1-2 days : Signup at http://developer.blackberry.com/senchaoffer

Step 3:  1-2 days : Signup for and register signing keys for your system https://developer.blackberry.com/html5/documentation/signing_setup_bb10_apps_2008396_11.html

Setup

Step 1:  Install Sencha Architect at c:\dev\Sencha\Architect from http://www.sencha.com/products/architect/

Step 2:  Install Sencha Touch at c:\dev\Sencha\Touch from http://www.sencha.com/products/touch/

Step 3:  Install Sencha CMD at c:\dev\Sencha\CMD from http://www.sencha.com/products/sencha-cmd/download

Step 4:  Install Ruby 1.9x at c:\dev\Ruby from  http://rubyinstaller.org/news/2013/05/16/rubyinstaller-1-9-3-p429-released/

* Note:  If you install Ruby with Sencha Architect open you will need to relaunch it.

Step 5:  Start > Run > Cmd

Step 6:  Type “Ruby -Ver”

image

* Note:  You should see your Ruby version.  If not, you will need to edit your Environment Variable Path to include the Ruby Bin path, and put it at the front of the path command.

Step 7:  Install Java RE 32 / 64 bit

Step 8:  Install WebWorks for BlackBerry 10 from http://developer.blackberry.com/html5

Step 9:  Install Chrome from http://chrome.google.com

Step 10:  Download the ripple plugin from http://developer.blackberry.com/html5

Step 11:  Drag and drop the plugin into the Chrome plugins page

 

Building Stage

Step 1:  Launch Sencha Architect and build a simple app

Note:  I recommend you specify a dropbox or backup folder for your app.  So if your hard drive gets fried one day you wont lose your hard drive.

Step 2:  Use the Package button to build your app.  It will force you to specify the path to several components above.

* Note:  You may see errors about missing icons etc.  Thats fine.

Step 3:  The application should compiled into a JS and Index.html in a subfolder of your project folder entitled Builds.

 

Packing for BB10

Step 1:  Launch Chrome.  Press the green icon and enable ripple as well as the web service plugin.

* Note you can use this to your advantage and copy your Sencha files to c:/Users/%username%/RippleSites.  This will let you access it via a unique URL and preview your Sencha app in a BB10 like view.

Step 2:  Configure ripple to use your signing keys.

Step 3:  Point ripple to your webworks sdk you installed above.

Step 4:  Create a Config.xml at the root of your app (use this https://developer.blackberry.com/html5/documentation/working_with_config_xml_file_1866970_11.html as a reference point).

Step 5:  point ripple to your build folder (not the root project folder)

Step 6:  Make a cross domain exception in the XML for the Sencha website or it will error on launch.  An alternative is to sue the following nut be aware it will allow insecure traffic as well.

<access uri="*" subdomains="true" />
<feature id="blackberry.app">
  <param name="websecurity" value="disable" />
</feature>

Step 7:  Package the application using Ripple.

Step 8:  Use DDPB, BBHTools or Chrome Plugin to push the bar to your device to test.

Step 9:  Submit to appworld.

Whew!  Done Smile