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

1,583 views

Published on

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.

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

No Downloads
Views
Total views
1,583
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
30
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 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. 2. • 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
  3. 3. dborba.com html5test.com
  4. 4. @demianborba @gustavocostaw @joselitojunior1
  5. 5. http://phonegapbootcamp.io
  6. 6. https://play.google.com/store/apps/details?id=io.phonegapbootcamp.appandroid
  7. 7. http://appworld.blackberry.com/webstore/content/54145887
  8. 8. • 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
  9. 9. W H A T C O R D O V A I S ? P H O N E G A P ?
  10. 10. C O N F I G U R I N G Y O U R C O M P U T E R
  11. 11. Download and Install Node: http://nodejs.org/download/
  12. 12. Download and unzip ANT: http://ant.apache.org/bindownload.cgi
  13. 13. Adding ANT to system PATH (Windows) ;C:yourfolderapache-ant-1.9.4bin
  14. 14. Add ANT to your system PATH (Mac) export PATH="/Developer/apache-ant-1.9.4/bin:$PATH"
  15. 15. Download Cordova Source: http://cordova.apache.org
  16. 16. jdk + jre + adt-bundle (http://developer.android.com/sdk/index.html)
  17. 17. 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"
  18. 18. Download http://developer.blackberry.com/native/downloads
  19. 19. export PATH="/Applications/Momentics.app/host_10_2_0_15/darwin/x86/usr/bin:$PATH"
  20. 20. U S I N G C O R D O V A
  21. 21. Unzip cordova-3.4.0-src.zip
  22. 22. Unzip {{ wanted-platform }}
  23. 23. Creating your first project
  24. 24. Creating your first Cordova project for iOS
  25. 25. Creating your first Cordova project for Android
  26. 26. Creating your first Cordova project for BlackBerry 10
  27. 27. Adding a Target Device (BlackBerry 10)
  28. 28. B U I L D I N G F I R S T Y O U R A P P
  29. 29. Building your First App (iOS or Android)
  30. 30. Building your First App (BlackBerry 10) RELEASE MODE
  31. 31. Building your First App (BlackBerry 10) DEBUG MODE
  32. 32. U S I N G A N DC O R D O V A W E B W O R K S P L U G I N S
  33. 33. CORDOVA DOCS: http://cordova.apache.org/docs/en/edge/index.html
  34. 34. 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.
  35. 35. 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>
  36. 36. 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
  37. 37. D E P L O Y I N G D E B U G G I N GA N D Y O U R A P P
  38. 38. Deploying your App (iOS or Android)
  39. 39. Deploying your App (BlackBerry 10)
  40. 40. Debugging your App (BlackBerry 10)
  41. 41. App Stores
  42. 42. P H O N E G A P B O O T C A M P . I O
  43. 43. https://github.com/demianborba/phonegapbootcampsite
  44. 44. http://ionicframework.com
  45. 45. http://brackets.io
  46. 46. T H A N K Y O U Demian Borba Design Thinker, BlackBerry Developer Evangelist @demianborba

×