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.

Transcript

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
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
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 ?
14. C O N F I G U R I N G Y O U R C O M P U T E R
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
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"
31. Download http://developer.blackberry.com/native/downloads
32. export PATH="/Applications/Momentics.app/host_10_2_0_15/darwin/x86/usr/bin:$PATH"
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
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
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
65. http://ionicframework.com
66. http://brackets.io
68. T H A N K Y O U Demian Borba Design Thinker, BlackBerry Developer Evangelist @demianborba