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

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
467
On Slideshare
467
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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