Sencha touchonbb10 bootcamp

673 views
444 views

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
673
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×