Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Creating mobile apps with Cordova for iOS, Android and BlackBerry 10

Creating mobile apps with Cordova for iOS, Android and BlackBerry 10

Understand everything that is needed to create cross platform mobile applications using Cordova for iOS, Android and BlackBerry 10. We will go through all the steps for configuring your machine (Mac or Windows), as well as add Cordova and WebWorks plugins. We will see how to package, deploy and debug hybrid apps on BlackBerry 10 and Android devices. In the end, we will inspect the project phonegapbootcamp.io, an open source website/mobileapp built with Angular, Gulp and Cordova.


Demian Borba

May 22, 2014

More Decks by Demian Borba

Other Decks in Programming


  1. C R E A T I N G M O

    B I L E A P P S W I T H C O R D O V A Demian Borba Design Thinker, BlackBerry Developer Evangelist @demianborba
  2. None
  3. • Graduated in Industrial Design (CEFET-PR) • Graduated in Computer

    Science (UFAL) • Crazy about Design, UX, Business and Technology • Former Instructor at UCSD, Platt College and Art Institute • Working with Interactive Media for over 15 years • Founder of Action Creations, interactive agency in California • Developer Evangelist, 90% #upintheair (Americas+Asia+Europe) • Created the project www.designthinkingnow.com • www.phonegapbootcamp.io creator A B O U T M E
  4. dborba.com html5test.com

  5. @demianborba @gustavocostaw @joselitojunior1

  6. None
  7. http://phonegapbootcamp.io

  8. https://play.google.com/store/apps/details?id=io.phonegapbootcamp.appandroid

  9. http://appworld.blackberry.com/webstore/content/54145887

  10. • Understand what Cordova/PhoneGap is • Understand how to configure

    your computers (Mac or Windows) • Understand how to create a project with Cordova Source (not CLI) • Understand how to build apps for iOS, Android and BlackBerry 10 • Understand how to use Cordova and WebWorks plugins • Understand how to deploy and debug your app on a real device (BlackBerry 10) • Understand www.phonegapbootcamp.io code (open source) angular+gulp+cordova. G O A L S T O D A Y
  11. W H A T C O R D O V

    A I S ? P H O N E G A P ?
  12. None
  13. None
  14. C O N F I G U R I N

    G Y O U R C O M P U T E R
  15. None
  16. None
  17. None
  18. Download and Install Node: http://nodejs.org/download/

  19. Download and unzip ANT: http://ant.apache.org/bindownload.cgi

  20. Adding ANT to system PATH (Windows) ;C:\your\folder\apache-ant-1.9.4\bin\

  21. Add ANT to your system PATH (Mac) export PATH="/Developer/apache-ant-1.9.4/bin:$PATH"

  22. Download Cordova Source: http://cordova.apache.org

  23. None
  24. None
  25. None
  26. None
  27. None
  28. jdk + jre + adt-bundle (http://developer.android.com/sdk/index.html)

  29. export PATH="/Applications/adt-bundle-mac-x86_64-20131030/sdk/platform-tools:$PATH" export PATH="/Applications/adt-bundle-mac-x86_64-20131030/sdk/tools:$PATH"

  30. None
  31. Download http://developer.blackberry.com/native/downloads

  32. export PATH="/Applications/Momentics.app/host_10_2_0_15/darwin/x86/usr/bin:$PATH"

  33. None
  34. U S I N G C O R D O

    V A
  35. Unzip cordova-3.4.0-src.zip

  36. Unzip {{ wanted-platform }}

  37. Creating your first project

  38. Creating your first Cordova project for iOS

  39. Creating your first Cordova project for Android

  40. Creating your first Cordova project for BlackBerry 10

  41. Adding a Target Device (BlackBerry 10)

  42. B U I L D I N G F I

    R S T Y O U R A P P
  43. Building your First App (iOS or Android)

  44. Building your First App (BlackBerry 10) RELEASE MODE

  45. Building your First App (BlackBerry 10) DEBUG MODE

  46. U S I N G A N D C O

    R D O V A W E B W O R K S P L U G I N S
  47. CORDOVA DOCS: http://cordova.apache.org/docs/en/edge/index.html

  48. Cordova PLUGIN APIs Battery Status: Monitor the status of the

    device's battery. Camera: Capture a photo using the device's camera. Contacts: Work with the devices contact database. Device: Gather device specific information. Device Motion (Accelerometer): Tap into the device's motion sensor. Device Orientation (Compass): Obtain the direction that the device is pointing. Dialogs: Visual device notifications. FileSystem: Hook into native file system through JavaScript. File Transfer: Hook into native file system through JavaScript. Geolocation: Make your application location aware. Globalization: Enable representation of objects specific to a locale. InAppBrowser: Launch URLs in another in-app browser instance. Media: Record and play back audio files. Media Capture: Capture media files using device's media capture applications. Network Information (Connection): Quickly check the network state, and cellular network information. Splashscreen: Show and hide the applications splash screen. Vibration: An API to vibrate the device.
  49. Meeting PLUGMAN https://cordova.apache.org/docs/en/edge/plugin_ref_plugman.md.html INSTALLING PLUGMAN npm install -g plugman INSTALLING

    A PLUGIN plugman install --platform <ios|android|blackberry10> --project <directory> --plugin <pluginID> UNINSTALLING A PLUGIN plugman uninstall --platform <ios|android|blackberry10> --project <directory> --plugin <pluginID>
  50. Using WebWorks PLUGINS (BlackBerry 10) https://github.com/blackberry/BB10-WebWorks-Samples/tree/WebWorks-2.0/Localization plugman install --platform blackberry10

    --project PROJECTROOTFOLDER --plugin com.blackberry.system
  51. None
  52. None
  53. D E P L O Y I N G D

    E B U G G I N G A N D Y O U R A P P
  54. Deploying your App (iOS or Android)

  55. Deploying your App (BlackBerry 10)

  56. Debugging your App (BlackBerry 10)

  57. App Stores

  58. None
  59. P H O N E G A P B O

    O T C A M P . I O
  60. https://github.com/demianborba/phonegapbootcampsite

  61. None
  62. None
  63. None
  64. None
  65. http://ionicframework.com

  66. http://brackets.io

  67. None
  68. T H A N K Y O U Demian Borba

    Design Thinker, BlackBerry Developer Evangelist @demianborba