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.

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:yourfolderapache-ant-1.9.4bin

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 DC 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 GA 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