Make some apps!

The details

• Make native apps using HTML, CSS, and Javascript
• Making the interface = building a webpage
• Native advantage - Access parts of the device that a webpage can't
• Make an app for iOS, Android, Windows Phone, Blackberry, Firefox OS, and more

What about Phonegap?

• Adobe's mobile development framework that is powered by Cordova

Cordova. Phonegap. What's the difference?

Cordova. Phonegap. What's the difference?

• Phonegap makes cloud-based builds
• This talk uses command line Cordova
• Free, license isn't restrictive
• Build locally with no internet connection
• Compatible with more third-party plugins
• More setup than Phonegap

Tips

• Apache Cordova platform guides
• Installing package dependencies on Mac - use Homebrew
• Setting up Devices and Environments? http://wrenr.github.io/cordova-workshop/

Prerequisites

• Cordova works with Windows, Linux, and Mac OS
• Node.js
• Ruby. RVM is useful
• Cordova command line. Installation instructions

Set up Local Environments

• Android: install SDKs and build tools
• iOS: Set up Xcode, command-line tools, licenses
• Setting up Devices and Environments? http://wrenr.github.io/cordova-workshop/

Tips

• Cordova Docs
• Detailed, helpful documentation

Create a Project

• cordova create sickdemo com.example.sickdemo SickDemo
• Directory
• Identifier (and bundle ID)
• Application title
• This creates a sickdemo directory with your project

Add Android Platform

• Let's add Android first
• go to the sickdemo directory
• cordova platform add android
• This creates an android directory in /platforms

Add iOS Platform

• Let's add iOS
• cordova platform add ios
• This creates an ios directory in /platforms
• Remember the Application title? Same as folder name

Running on Devices

• Android: Enable debugging, run it
• iOS: Initialize device, enable XCode Developer mode, resolve any dependencies

Adding Plugins Overview

• Plugins provide a JS interface for Native device APIs
• General Docs on Plugin APIs
• cordova plugin add <plugin identifier>
• If it's in the Plugin Registry, it can be added via ID
• Let's add some plugins ...

Add the device plugin

• A "Core" plugin
• Needed to access information about the device
• cordova plugin add org.apache.cordova.device
• (Device API docs)

Add the console plugin

• A "Core" plugin
• Outputs log information, useful for debugging
• cordova plugin add org.apache.cordova.console
• (Console API docs)

Add the camera plugin

• A "Core" plugin
• interacts with the device camera
• cordova plugin add org.apache.cordova.camera
• (Camera API docs)

Using plugins: Caveats

• Must be activated after 'deviceReady' event
• It's asynchronous!
• The Cordova docs on Events are very helpful (link)

Third-party plugins

• Ensure it's compatible
• Watch for plugin updates! Lock your code to one version if using automated builds
• Cordova updates break older plugins

iOS Considerations

• Installing and setting up XCode
• Developer Licensing, Provisioning Profiles, Certificates
• App Store Submission and Approval
• App Sandboxing and limited access to other features

Android Considerations

• Device Fragmentation
• Intents
• Hardware buttons Back, Home, Search, and Info

General Cross-Platform Considerations

• Different UI Behaviors and User Expectations
• Different implementations of software functionality. Local Notifications

Solutions to any iOS, Android, and Cross-Platform issues

• Use what you know
• Got an iPhone? Make iPhone.
• Ignoring this rule? Bad

More Solutions to any iOS, Android, and Cross-Platform issues

• Test
• Test
• ... Just test everything

Cordova Setup

• Install SDKs and environments
• Connect and Unlock Device for Development
• Create project
• add platforms
• add plugins
• READY!

Browser Testing

• Open /www folder in web browser
• Test and fix like a webpage
• Native functionality?
• Branch it out so non-native parts can still be tested in the browser

Device Build

• Build app with cordova build <platform>
• Run on device, using either cordova run or IDE
• Check debug logging on PC (if using Cordova Console plugin)

Super-ugly sketch of Cordova build paths