Sencha touchonbb10 bootcamp
Upcoming SlideShare
Loading in...5
×
 

Sencha touchonbb10 bootcamp

on

  • 428 views

 

Statistics

Views

Total Views
428
Views on SlideShare
428
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Sencha touchonbb10 bootcamp Presentation Transcript

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