Your SlideShare is downloading. ×
0
Sencha Touch on BlackBerry 10 Bootcamp
Naveenan Murugesu Adam Stanley
nmurugesu@blackberry.com astanley@blackberry.com
@na...
Agenda
 Introduction to BlackBerry WebWorks
 Environment setup
 Build a simple Sencha Touch app
 Code sign your app
 ...
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 ...
HTML5 powered by native capabilities
HTML5, CSS3, JavaScript
WebKit engine
WebWorks platform
BlackBerry Developer APIs
htt...
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
Loca...
Environment Setup
14
Step 1: Browser & WebServer
 A web server running locally
 A modern web browser, Chrome is recommended
 If you are runn...
 Windows: Enable Internet Information Services (IIS)
 XP : Control Panel  Add / remove programs  Windows Components
 ...
 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 B...
 Extract BB10_Startercode.zip folder into web server “working” folder
 Windows default: C:inetpubwwwrootBB10_Startercode...
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...
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 ...
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
 Registe...
Code signing key setup
 Open command prompt and navigate to
 C:Program FilesResearch In MotionBlackBerry 10
WebWorks SDK...
BlackBerry WebWorks
Package the application
Package your application: bbwp
 Open command prompt and navigate to
 C:Program FilesResearch In MotionBlackBerry 10
WebW...
Package your application: bbwp
 Open command prompt and navigate to
 C:Program FilesResearch In MotionBlackBerry 10
WebW...
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
...
C:UsersnmurugesuDesktopBB10BB10-WebWorks-SDK-
1.0.4.11dependenciestoolsbin blackBerry-deploy –installApp
–device 192.168.8...
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 Mot...
C:UsersnmurugesuDesktopBB10BB10-WebWorks-SDK-
1.0.4.11dependenciestoolsbin blackBerry-deploy –installApp
–device 192.168.8...
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 Documen...
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 worki...
Exercise: Github Samples
Code Review: invocation.js
Contains methods used to invoke other applications
Open using any t...
Exercise: Github Samples
Package & sign Invoke/invoker sample using WebWorks SDK
 Reminder: navigate to C:Program FilesR...
Exercise: Github Samples
Deploy the sample to the device
 Navigate to C:Program FilesResearch In
MotionBlackBerry 10 Web...
Advanced: Package your Sencha app
Package & sign your app(s) using WebWorks
Reminder: Must have a config.xml
Deploy BAR...
Thank You
Naveenan Murugesu Adam Stanley
nmurugesu@blackberry.com astanley@blackberry.com
@naveenan5 @n_adam_stanley
Upcoming SlideShare
Loading in...5
×

Sencha touchonbb10 bootcamp

317

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
317
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Sencha touchonbb10 bootcamp"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×