SlideShare una empresa de Scribd logo
1 de 69
Descargar para leer sin conexión
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.jsSencha TouchjQuery 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:inetpubwwwrootBB10_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:inetpubwwwrootBB10_Startercodeconfig.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 FilesResearch In MotionBlackBerry 10
WebWorks SDK <version>dependenciestoolsbin
 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 FilesResearch In MotionBlackBerry 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 FilesResearch In MotionBlackBerry 10
WebWorks SDK <version>
 Run this command:
bbwp C:inetpubwwwrootBB10_Startercode -g ashmi26 -o C:inetpubwwwrootOutput
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 FilesResearch In MotionBlackBerry 10 WebWorks
SDK <version>dependenciestoolsbin
 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:UsersnmurugesuDesktopBB10BB10-WebWorks-SDK-
1.0.4.11dependenciestoolsbin blackBerry-deploy –installApp
–device 192.168.86.128 –package
C:inetpubwwwrootOutputsimulatorBB10_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 FilesResearch In MotionBlackBerry 10 WebWorks
SDK <version>dependenciestoolsbin
 Deploy to
 a live device (app must be signed)
blackberry-deploy -installApp -device <Device IP> -package
<Compiled BAR> -password <Device PWD>
C:UsersnmurugesuDesktopBB10BB10-WebWorks-SDK-
1.0.4.11dependenciestoolsbin blackBerry-deploy –installApp
–device 192.168.86.128 –password pass –package
C:inetpubwwwrootOutputdeviceBB10_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:inetpubwwwrootinvoker
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 FilesResearch In
MotionBlackBerry 10 WebWorks SDK 1.0.4.11
 Reminder: run bbwp command:
bbwp C:inetpubwwwrootinvoker -g mypass123
-o c:tempoutput
Exercise: Github Samples
Deploy the sample to the device
 Navigate to C:Program FilesResearch In
MotionBlackBerry 10 WebWorks SDK
1.0.4.11dependenciestoolsbin
 Run blackberry-deploy command:
blackberry-deploy -installApp -device 169.254.0.1
-package C:tempoutputdeviceinvoker.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

Más contenido relacionado

La actualidad más candente

JavaScript on HP webOS: Enyo and Node.js
JavaScript on HP webOS: Enyo and Node.jsJavaScript on HP webOS: Enyo and Node.js
JavaScript on HP webOS: Enyo and Node.js
Ben Combee
 
Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery MobileBuilding Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
Jon Cortez
 
Windows Azure Toolkit for iOS
Windows Azure Toolkit for iOSWindows Azure Toolkit for iOS
Windows Azure Toolkit for iOS
Simon Guest
 
Front-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsFront-end optimisation & jQuery Internals
Front-end optimisation & jQuery Internals
Artur Cistov
 

La actualidad más candente (20)

JavaScript on HP webOS: Enyo and Node.js
JavaScript on HP webOS: Enyo and Node.jsJavaScript on HP webOS: Enyo and Node.js
JavaScript on HP webOS: Enyo and Node.js
 
Transforming the web into a real application platform
Transforming the web into a real application platformTransforming the web into a real application platform
Transforming the web into a real application platform
 
BlackBerry10: "Built For BlackBerry (BFB)"
BlackBerry10: "Built For BlackBerry (BFB)"BlackBerry10: "Built For BlackBerry (BFB)"
BlackBerry10: "Built For BlackBerry (BFB)"
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
 
Intro To webOS
Intro To webOSIntro To webOS
Intro To webOS
 
The Status Of Web Interoperability And Activities In China, Japan And Korea
The Status Of Web Interoperability And Activities In China, Japan And KoreaThe Status Of Web Interoperability And Activities In China, Japan And Korea
The Status Of Web Interoperability And Activities In China, Japan And Korea
 
10 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 201610 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 2016
 
Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery MobileBuilding Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
 
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMIBACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
 
Top Ten Tips for HTML5/Mobile Web Development
Top Ten Tips for HTML5/Mobile Web DevelopmentTop Ten Tips for HTML5/Mobile Web Development
Top Ten Tips for HTML5/Mobile Web Development
 
Introduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and SilverlightIntroduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and Silverlight
 
soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5
 
Windows Azure Toolkit for iOS
Windows Azure Toolkit for iOSWindows Azure Toolkit for iOS
Windows Azure Toolkit for iOS
 
Korea linuxforum2014 html5game-sangseoklim
Korea linuxforum2014 html5game-sangseoklimKorea linuxforum2014 html5game-sangseoklim
Korea linuxforum2014 html5game-sangseoklim
 
Developing Java Web Applications
Developing Java Web ApplicationsDeveloping Java Web Applications
Developing Java Web Applications
 
New trends on web platform
New trends on web platformNew trends on web platform
New trends on web platform
 
The Days of Web Standards "IA" 20070715
The Days of Web Standards "IA" 20070715The Days of Web Standards "IA" 20070715
The Days of Web Standards "IA" 20070715
 
Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!
 
Front-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsFront-end optimisation & jQuery Internals
Front-end optimisation & jQuery Internals
 
Sample Works JC Sabado
Sample Works JC SabadoSample Works JC Sabado
Sample Works JC Sabado
 

Similar a Sencha touchonbb10 bootcamp

Similar a Sencha touchonbb10 bootcamp (20)

WebWorks Development for BlackBerry PlayBook and Smartphones
WebWorks Development for BlackBerry PlayBook and SmartphonesWebWorks Development for BlackBerry PlayBook and Smartphones
WebWorks Development for BlackBerry PlayBook and Smartphones
 
"BlackBerry Webworks : Apps for The Smartphone and Tablet"
"BlackBerry Webworks : Apps for The Smartphone and Tablet""BlackBerry Webworks : Apps for The Smartphone and Tablet"
"BlackBerry Webworks : Apps for The Smartphone and Tablet"
 
HTML5 WebWorks
HTML5 WebWorksHTML5 WebWorks
HTML5 WebWorks
 
Developing for the BlackBerry PlayBook using Flex Builder Burrito
Developing for the BlackBerry PlayBook using Flex Builder BurritoDeveloping for the BlackBerry PlayBook using Flex Builder Burrito
Developing for the BlackBerry PlayBook using Flex Builder Burrito
 
CLI319 Microsoft Desktop Optimization Pack: Planning the Deployment of Micros...
CLI319 Microsoft Desktop Optimization Pack: Planning the Deployment of Micros...CLI319 Microsoft Desktop Optimization Pack: Planning the Deployment of Micros...
CLI319 Microsoft Desktop Optimization Pack: Planning the Deployment of Micros...
 
Bring Your Android Apps to BlackBerry 10 in minutes
Bring Your Android Apps to BlackBerry 10 in minutesBring Your Android Apps to BlackBerry 10 in minutes
Bring Your Android Apps to BlackBerry 10 in minutes
 
Phonegap android angualr material design
Phonegap android angualr material designPhonegap android angualr material design
Phonegap android angualr material design
 
RICOH THETA x IoT Developers Contest : Cloud API Seminar
 RICOH THETA x IoT Developers Contest : Cloud API Seminar RICOH THETA x IoT Developers Contest : Cloud API Seminar
RICOH THETA x IoT Developers Contest : Cloud API Seminar
 
Web Platform Installer Announcement
Web Platform Installer AnnouncementWeb Platform Installer Announcement
Web Platform Installer Announcement
 
Web Platform Installer
Web Platform InstallerWeb Platform Installer
Web Platform Installer
 
Creating mobile apps with Cordova for iOS, Android and BlackBerry 10
Creating mobile apps with Cordova for iOS, Android and BlackBerry 10Creating mobile apps with Cordova for iOS, Android and BlackBerry 10
Creating mobile apps with Cordova for iOS, Android and BlackBerry 10
 
Jenkins Setup Document
Jenkins Setup DocumentJenkins Setup Document
Jenkins Setup Document
 
[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In Action[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In Action
 
No drama here - E2E-testing django with playwright
No drama here - E2E-testing django with playwrightNo drama here - E2E-testing django with playwright
No drama here - E2E-testing django with playwright
 
Building cross platfrom solutions for enterprise - the mobileshow- may 2014
Building cross platfrom solutions for enterprise - the mobileshow- may 2014Building cross platfrom solutions for enterprise - the mobileshow- may 2014
Building cross platfrom solutions for enterprise - the mobileshow- may 2014
 
Locally it worked! virtualizing docker
Locally it worked! virtualizing dockerLocally it worked! virtualizing docker
Locally it worked! virtualizing docker
 
BlackBerry WebWorks
BlackBerry WebWorksBlackBerry WebWorks
BlackBerry WebWorks
 
Continuous Delivery w projekcie Open Source - Marcin Stachniuk - DevCrowd 2017
Continuous Delivery w projekcie Open Source - Marcin Stachniuk - DevCrowd 2017Continuous Delivery w projekcie Open Source - Marcin Stachniuk - DevCrowd 2017
Continuous Delivery w projekcie Open Source - Marcin Stachniuk - DevCrowd 2017
 
Flutter for web
Flutter for webFlutter for web
Flutter for web
 
IIS Web Ecosystem
IIS Web EcosystemIIS Web Ecosystem
IIS Web Ecosystem
 

Último

Último (20)

AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 

Sencha touchonbb10 bootcamp