sencha touchonbb10 bootcamp
DESCRIPTION
TRANSCRIPT
![Page 1: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/1.jpg)
Sencha Touch on BlackBerry 10 Bootcamp
Naveenan Murugesu Adam Stanley
[email protected] [email protected]
@naveenan5 @n_adam_stanley
![Page 2: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/2.jpg)
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
![Page 3: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/3.jpg)
Bookmark this page
http://developer.blackberry.com/html5
![Page 4: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/4.jpg)
Signing Keys
http://developer.blackberry.com/html5/signingkey
![Page 5: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/5.jpg)
Many roads lead to BlackBerry 10 apps
HTML5 BlackBerry®
WebWorks™
C/C++
Native SDK
C++/Qt
Cascades
![Page 6: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/6.jpg)
BlackBerry Web Platform
Driven by strong Web
standards support
Powered by WebKit
HTML5 and CSS3
Flash 11 and WebGL
![Page 7: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/7.jpg)
WebWorks?
HTML5 app that runs natively on BlackBerry 10
![Page 8: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/8.jpg)
Application development
What if you could build a BlackBerry application using Web technologies? JavaScript
HTML5
CSS3
![Page 9: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/9.jpg)
Native UX powered by HTML5
Achieve that BlackBerry 10 “look & feel” [BFB]
Use popular community frameworks.
bbUI.js Sencha Touch jQuery Mobile
![Page 10: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/10.jpg)
HTML5 powered by native capabilities
HTML5, CSS3, JavaScript
WebKit engine
WebWorks platform
BlackBerry Developer APIs
https://developer.blackberry.com/html5/apis
![Page 11: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/11.jpg)
BlackBerry 10 WebWorks Examples
NY Rangers
Official App USA Today Flixster
![Page 12: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/12.jpg)
Sencha Touch Examples
Air Asia Mail Online PC Plus
![Page 13: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/13.jpg)
BlackBerry 10 Services
13
BlackBerry Push Service BBM Social Platform
Invocation Framework
BlackBerry Payment Service
Locate Service
![Page 14: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/14.jpg)
Environment Setup
14
![Page 15: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/15.jpg)
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
![Page 16: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/16.jpg)
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
![Page 17: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/17.jpg)
Mac: Enable Web sharing
System Preferences Sharing Web Sharing
Setting up a web server
![Page 19: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/19.jpg)
http://developer.blackberry.com/html5/download
Step 3: Download the SDK
![Page 20: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/20.jpg)
Step 4: Install the SDK
![Page 21: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/21.jpg)
Step 5: Download the VMWare Player
http://www.vmware.com/products/player
![Page 22: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/22.jpg)
Step 6: Install the VMWare Player
Follow the Installation Wizard
![Page 23: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/23.jpg)
http://developer.blackberry.com/html5/download
Step 7: Download the simulator
![Page 24: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/24.jpg)
Step 8: Install the Simulator
Follow the Installation Wizard
![Page 25: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/25.jpg)
Step 9: Download BlackBerry Link
http://bit.ly/YqRLJu
![Page 26: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/26.jpg)
Step 10: Install the BlackBerry Link
Follow the Installation Wizard
![Page 27: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/27.jpg)
Step 11: Sample Code
Copy the folder BB10_Startercode.zip
Includes the Sencha Touch SDK directory
Sencha Touch 2.3 Beta
![Page 28: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/28.jpg)
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
![Page 29: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/29.jpg)
Lets do a sample…
![Page 30: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/30.jpg)
Sencha Touch Project Structure
30
![Page 32: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/32.jpg)
Coding time…
![Page 33: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/33.jpg)
Coding….
33
![Page 34: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/34.jpg)
Testing it in Chrome again…
34
Now, it looks like a BB 10 Action Bar
![Page 35: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/35.jpg)
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
![Page 36: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/36.jpg)
Packaging Apps for BlackBerry 10 using WebWorks
![Page 37: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/37.jpg)
BlackBerry WebWorks Config.xml
![Page 38: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/38.jpg)
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
![Page 39: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/39.jpg)
Config.xml
![Page 40: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/40.jpg)
Config.xml
![Page 41: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/41.jpg)
Config.xml
![Page 42: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/42.jpg)
Modify the Config.xml
C:\inetpub\wwwroot\BB10_Startercode\config.xml
![Page 43: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/43.jpg)
BlackBerry WebWorks Code Signing Setup
![Page 44: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/44.jpg)
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
![Page 45: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/45.jpg)
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>
![Page 46: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/46.jpg)
BlackBerry WebWorks Package the application
![Page 47: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/47.jpg)
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>
![Page 48: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/48.jpg)
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
![Page 49: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/49.jpg)
Package your application: bbwp
![Page 50: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/50.jpg)
BlackBerry WebWorks Deploying the application on Simulator
![Page 51: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/51.jpg)
Deployment
Start the simulator
Start VMWare Player
Open the BlackBerry10
Simulator.vmx
![Page 52: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/52.jpg)
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>
![Page 53: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/53.jpg)
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
![Page 54: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/54.jpg)
Deployment
![Page 55: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/55.jpg)
BlackBerry WebWorks Deploying the application on a device
![Page 56: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/56.jpg)
BlackBerry ID
Create BlackBerry ID
Settings
BlackBerry ID
Create New
Fill in the fields
Submit
![Page 57: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/57.jpg)
Deployment
Enable development mode
Settings
Security and Privacy
Development Mode
IP Address
![Page 58: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/58.jpg)
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>
![Page 59: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/59.jpg)
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
![Page 60: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/60.jpg)
Publishing the app in the BlackBerry World
![Page 61: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/61.jpg)
BlackBerry App World Vendor Portal
61
![Page 62: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/62.jpg)
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
![Page 63: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/63.jpg)
https://github.com/blackberry/BB10-WebWorks-Samples
Exercise: Github Samples
![Page 64: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/64.jpg)
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
![Page 65: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/65.jpg)
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
![Page 66: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/66.jpg)
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
![Page 67: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/67.jpg)
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
![Page 68: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/68.jpg)
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)
![Page 69: Sencha touchonbb10 bootcamp](https://reader034.vdocuments.net/reader034/viewer/2022051411/545aeb54b1af9f39378b5f75/html5/thumbnails/69.jpg)
Thank You
Naveenan Murugesu Adam Stanley
[email protected] [email protected]
@naveenan5 @n_adam_stanley