creating mobile apps with cordova for ios, android and blackberry 10

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 BorbaDesign Thinker, BlackBerry Developer Evangelist

@demianborba

• 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

dborba.com html5test.com

@demianborba @gustavocostaw @joselitojunior1

http://phonegapbootcamp.io

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

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

• 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

W H A T

C O R D O V A

I S

?

P H O N E G A P ?

C O N F I G U R I N G

Y O U R C O M P U T E R

Download and Install Node: http://nodejs.org/download/

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

Adding ANT to system PATH (Windows)

;C:\your\folder\apache-ant-1.9.4\bin\

Add ANT to your system PATH (Mac)

export PATH="/Developer/apache-ant-1.9.4/bin:$PATH"

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

jdk + jre + adt-bundle (http://developer.android.com/sdk/index.html)

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"

Download http://developer.blackberry.com/native/downloads

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

U S I N G

C O R D O V A

Unzip cordova-3.4.0-src.zip

Unzip {{ wanted-platform }}

Creating your first project

Creating your first Cordova project for iOS

Creating your first Cordova project for Android

Creating your first Cordova project for BlackBerry 10

Adding a Target Device (BlackBerry 10)

B U I L D I N G

F I R S T

Y O U R

A P P

Building your First App (iOS or Android)

Building your First App (BlackBerry 10) RELEASE MODE

Building your First App (BlackBerry 10) DEBUG MODE

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

CORDOVA DOCS: http://cordova.apache.org/docs/en/edge/index.html

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.

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>

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

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

Deploying your App (iOS or Android)

Deploying your App (BlackBerry 10)

Debugging your App (BlackBerry 10)

App Stores

P H O N E G A P

B O O T C A M P . I O

https://github.com/demianborba/phonegapbootcampsite

http://ionicframework.com

http://brackets.io

T H A N K

Y O U

Demian BorbaDesign Thinker, BlackBerry Developer Evangelist

@demianborba