sencha touchonbb10 bootcamp
DESCRIPTION
TRANSCRIPT
Sencha Touch on BlackBerry 10 Bootcamp
Naveenan Murugesu Adam Stanley
[email protected] [email protected]
@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://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
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
[email protected] [email protected]
@naveenan5 @n_adam_stanley