sencha touchonbb10 bootcamp

Sencha Touch on BlackBerry 10 Bootcamp

Naveenan Murugesu Adam Stanley

nmurugesu@blackberry.com astanley@blackberry.com

@naveenan5 @n_adam_stanley

Agenda

Introduction to BlackBerry WebWorks

Environment setup

Build a simple Sencha Touch app

Code sign your app

Package, deploy and test the app on a simulator

Deploy the app to BlackBerry Dev Alpha B

Publish in BlackBerry World

Bookmark this page

http://developer.blackberry.com/html5

Signing Keys

http://developer.blackberry.com/html5/signingkey

Many roads lead to BlackBerry 10 apps

HTML5 BlackBerry®

WebWorks™

C/C++

Native SDK

C++/Qt

Cascades

BlackBerry Web Platform

Driven by strong Web

standards support

Powered by WebKit

HTML5 and CSS3

Flash 11 and WebGL

WebWorks?

HTML5 app that runs natively on BlackBerry 10

Application development

What if you could build a BlackBerry application using Web technologies? JavaScript

HTML5

CSS3

Native UX powered by HTML5

Achieve that BlackBerry 10 “look & feel” [BFB]

Use popular community frameworks.

bbUI.js Sencha Touch jQuery Mobile

HTML5 powered by native capabilities

HTML5, CSS3, JavaScript

WebKit engine

WebWorks platform

BlackBerry Developer APIs

https://developer.blackberry.com/html5/apis

BlackBerry 10 WebWorks Examples

NY Rangers

Official App USA Today Flixster

Sencha Touch Examples

Air Asia Mail Online PC Plus

BlackBerry 10 Services

13

BlackBerry Push Service BBM Social Platform

Invocation Framework

BlackBerry Payment Service

Locate Service

Environment Setup

14

Step 1: Browser & WebServer

A web server running locally

A modern web browser, Chrome is recommended

If you are running IIS on Windows

Add application/x-json as MIME Type

For more info,

http://bit.ly/177ogCw

Windows: Enable Internet Information Services (IIS)

XP : Control Panel Add / remove programs Windows Components

Win7: Control Panel Programs Windows Features

Setting up a web server

Mac: Enable Web sharing

System Preferences Sharing Web Sharing

Setting up a web server

http://www.oracle.com

Step 2: Download the JRE?

http://developer.blackberry.com/html5/download

Step 3: Download the SDK

Step 4: Install the SDK

Step 5: Download the VMWare Player

http://www.vmware.com/products/player

Step 6: Install the VMWare Player

Follow the Installation Wizard

http://developer.blackberry.com/html5/download

Step 7: Download the simulator

Step 8: Install the Simulator

Follow the Installation Wizard

Step 9: Download BlackBerry Link

http://bit.ly/YqRLJu

Step 10: Install the BlackBerry Link

Follow the Installation Wizard

Step 11: Sample Code

Copy the folder BB10_Startercode.zip

Includes the Sencha Touch SDK directory

Sencha Touch 2.3 Beta

Extract BB10_Startercode.zip folder into web server “working” folder

Windows default: C:\inetpub\wwwroot\BB10_Startercode

Mac default: ~/Sites/BB10_Startercode

Step 12: Extract the zip file

Lets do a sample…

Sencha Touch Project Structure

30

Run the sample in Chrome

31

http://localhost/BB10_startercode/

Coding time…

Coding….

33

Testing it in Chrome again…

34

Now, it looks like a BB 10 Action Bar

More info…

35

For detailed and more info about the BlackBerry 10 Theme

Porting Sencha Apps for an Astonishing BlackBerry Experience

Speaker: Shikhir Singh

Location: Northern Hemisphere E-3

Date: Thursday, July 18th, 9:30 AM to 10:20 AM

Packaging Apps for BlackBerry 10 using WebWorks

BlackBerry WebWorks Config.xml

Config.xml

What is it?

It is a configuration file.

It provides general app information.

It specifies the features and functionality of the app.

It is located in the root folder of the app

Config.xml

Config.xml

Config.xml

Modify the Config.xml

C:\inetpub\wwwroot\BB10_Startercode\config.xml

BlackBerry WebWorks Code Signing Setup

Code Signing

Apps must be signed to run on a live device

Required in order to deploy to BlackBerry App World

Register for keys

https://www.blackberry.com/SignedKeys

Install keys

http://bit.ly/Z2cdki

Code signing key setup

Open command prompt and navigate to

C:\Program Files\Research In Motion\BlackBerry 10 WebWorks SDK <version>\dependencies\tools\bin

Install the keys:

blackberry-signer -register -csjpin <csj pin>

-storepass <KeystorePassword> <client-RDK-xxxxxx.csj file>

<client-PBDT-xxxxx.csj file>

BlackBerry WebWorks Package the application

Package your application: bbwp

Open command prompt and navigate to

C:\Program Files\Research In Motion\BlackBerry 10 WebWorks SDK <version>

Run this command:

<root_folder> : The full path to your project folder

<KeystorePassword> : Your signing key password

<output_location> : The folder where you want the signed bar file to be created

bbwp <root_folder > -g <KeystorePassword> -o <output_location>

Package your application: bbwp

Open command prompt and navigate to

C:\Program Files\Research In Motion\BlackBerry 10 WebWorks SDK <version>

Run this command:

bbwp C:\inetpub\wwwroot\BB10_Startercode -g ashmi26 -o C:\inetpub\wwwroot\Output

Package your application: bbwp

BlackBerry WebWorks Deploying the application on Simulator

Deployment

Start the simulator

Start VMWare Player

Open the BlackBerry10

Simulator.vmx

Deployment

Use blackberry-deploy

Command line tool found in

C:\Program Files\Research In Motion\BlackBerry 10 WebWorks SDK <version>\dependencies\tools\bin

Deploy to

a simulator (app does not have to be signed)

blackberry-deploy -installApp -device <Simulator IP> -package

<path to the bar file in simulator folder>

C:\Users\nmurugesu\Desktop\BB10\BB10-WebWorks-SDK-

1.0.4.11\dependencies\tools\bin blackBerry-deploy –installApp

–device 192.168.86.128 –package

C:\inetpub\wwwroot\Output\simulator\BB10_Startercode.bar

Sending Install request...

Info: Action: Install

Info: File size: 40731

Info: Installing ...

actual_dname::DEV8281a833da63a6b7e2098dae6d0662e1.MjA5OG

RhZTZkMDY2MmUxICAgICA

actual_id::MjA5OGRhZTZkMDY2MmUxICAgICA

actual_version::1.0.0.0

result::success

Deployment

Deployment

BlackBerry WebWorks Deploying the application on a device

BlackBerry ID

Create BlackBerry ID

Settings

BlackBerry ID

Create New

Fill in the fields

Submit

Deployment

Enable development mode

Settings

Security and Privacy

Development Mode

IP Address

Deployment

Use blackberry-deploy to side-load a signed app

Command line tool found in

C:\Program Files\Research In Motion\BlackBerry 10 WebWorks SDK <version>\dependencies\tools\bin

Deploy to

a live device (app must be signed)

blackberry-deploy -installApp -device <Device IP> -package

<Compiled BAR> -password <Device PWD>

C:\Users\nmurugesu\Desktop\BB10\BB10-WebWorks-SDK-

1.0.4.11\dependencies\tools\bin blackBerry-deploy –installApp

–device 192.168.86.128 –password pass –package

C:\inetpub\wwwroot\Output\device\BB10_Startercode.bar

Sending Install request...

Info: Action: Install

Info: File size: 40731

Info: Installing ...

actual_dname::DEV8281a833da63a6b7e2098dae6d0662e1.MjA5OG

RhZTZkMDY2MmUxICAgICA

actual_id::MjA5OGRhZTZkMDY2MmUxICAgICA

actual_version::1.0.0.0

result::success

Deployment

Publishing the app in the BlackBerry World

BlackBerry App World Vendor Portal

61

For More Information…

Vendor Support Site

https://bdsc.webapps.blackberry.com/devzone/appworld

Vendor Portal Documentation

http://bbry.lv/I7P5Z7

Vendor FAQ

https://bdsc.webapps.blackberry.com/devzone/appworld/faq

62

https://github.com/blackberry/BB10-WebWorks-Samples

Exercise: Github Samples

Exercise: Github Samples

Download BB10-WebWorks-Samples samples from Github

Extract invoke/invoker sample

Copy to working folder of your local web server

Example: C:\inetpub\wwwroot\invoker

Exercise: Github Samples

Code Review: invocation.js

Contains methods used to invoke other applications

Open using any text editor

Task(s):

Find the code snippet that opens the clock’s stopwatch

Change invokeBrowserUri() method to invoke

http://senchacon.com

Exercise: Github Samples

Package & sign Invoke/invoker sample using WebWorks SDK

Reminder: navigate to C:\Program Files\Research In

Motion\BlackBerry 10 WebWorks SDK 1.0.4.11

Reminder: run bbwp command:

bbwp C:\inetpub\wwwroot\invoker -g mypass123

-o c:\temp\output

Exercise: Github Samples

Deploy the sample to the device

Navigate to C:\Program Files\Research In

Motion\BlackBerry 10 WebWorks SDK

1.0.4.11\dependencies\tools\bin

Run blackberry-deploy command:

blackberry-deploy -installApp -device 169.254.0.1

-package C:\temp\output\device\invoker.bar

-password 1234

Advanced: Package your Sencha app

Package & sign your app(s) using WebWorks

Reminder: Must have a config.xml

Deploy BAR file to simulator or device (signed)

Thank You

Naveenan Murugesu Adam Stanley

nmurugesu@blackberry.com astanley@blackberry.com

@naveenan5 @n_adam_stanley