digpen 7: building mobile apps with phonegap

42
Gavin Jones Managing Director @indievidual Christian Cook Head of App Development @elixeloffici al

Upload: christian-cook

Post on 04-Dec-2014

342 views

Category:

Technology


2 download

DESCRIPTION

Use your existing web development skills to make cross-platform native mobile apps with PhoneGap

TRANSCRIPT

Page 1: Digpen 7: Building mobile apps with PhoneGap

Gavin JonesManaging Director

@indievidualChristian CookHead of App Development @elixelofficial

Page 2: Digpen 7: Building mobile apps with PhoneGap

Building mobile appswith PhoneGap

Page 3: Digpen 7: Building mobile apps with PhoneGap

What IS PhoneGap?

Page 4: Digpen 7: Building mobile apps with PhoneGap
Page 5: Digpen 7: Building mobile apps with PhoneGap

History

Page 6: Digpen 7: Building mobile apps with PhoneGap
Page 7: Digpen 7: Building mobile apps with PhoneGap

Platforms

Page 8: Digpen 7: Building mobile apps with PhoneGap
Page 9: Digpen 7: Building mobile apps with PhoneGap

Plugins

Page 10: Digpen 7: Building mobile apps with PhoneGap
Page 11: Digpen 7: Building mobile apps with PhoneGap

Examples

Page 12: Digpen 7: Building mobile apps with PhoneGap

Image from mobilemarketingmagazine.comhttp://mobilemarketingmagazine.com/nus-launches-student-discount-companion-app/

Page 13: Digpen 7: Building mobile apps with PhoneGap
Page 14: Digpen 7: Building mobile apps with PhoneGap

Image from the BBChttp://www.bbc.co.uk/sport/0/olympics/18810308

Page 15: Digpen 7: Building mobile apps with PhoneGap

How

Page 16: Digpen 7: Building mobile apps with PhoneGap
Page 17: Digpen 7: Building mobile apps with PhoneGap

Why choose HTML5over Native

Page 18: Digpen 7: Building mobile apps with PhoneGap

Pros

Cross Platform

Cost Effective

High End

Easy to learn

Cons

Browser Support

Can get messy

Performance

Page 19: Digpen 7: Building mobile apps with PhoneGap

Software Requirements

Page 20: Digpen 7: Building mobile apps with PhoneGap
Page 21: Digpen 7: Building mobile apps with PhoneGap

Deployment Methods

Page 22: Digpen 7: Building mobile apps with PhoneGap

Local Deployment PhoneGap Build

Page 23: Digpen 7: Building mobile apps with PhoneGap

App vs Website Structure

Page 24: Digpen 7: Building mobile apps with PhoneGap

Building a personalised experience

Page 25: Digpen 7: Building mobile apps with PhoneGap

Single-Page Application (SPA)

Page 26: Digpen 7: Building mobile apps with PhoneGap

Online Offline

Page 27: Digpen 7: Building mobile apps with PhoneGap

Getting Started

Page 28: Digpen 7: Building mobile apps with PhoneGap

$ npm install –g phonegap

1. Install PhoneGap through NodeJS on command line

$ phonegap create myapp com.company.myapp “My App”

$ cd myapp

2. Create the base project folders and files

$ phonegap create <folder path> <Identifier> “<AppName>”

3. Add your platform(s)

$ phonegap platform add ios

4. Deploy!

Page 29: Digpen 7: Building mobile apps with PhoneGap
Page 30: Digpen 7: Building mobile apps with PhoneGap

UI Libraries

Page 31: Digpen 7: Building mobile apps with PhoneGap
Page 32: Digpen 7: Building mobile apps with PhoneGap

Data Storage

Page 33: Digpen 7: Building mobile apps with PhoneGap

Own Service with RESTful

LocalStorage

WebSQL

File API Plugin

Local Online

Page 34: Digpen 7: Building mobile apps with PhoneGap

Debugging

Page 35: Digpen 7: Building mobile apps with PhoneGap

Chrome Developer Tools&

Safari Web Inspector

Page 36: Digpen 7: Building mobile apps with PhoneGap
Page 37: Digpen 7: Building mobile apps with PhoneGap
Page 38: Digpen 7: Building mobile apps with PhoneGap

Distribution

Page 39: Digpen 7: Building mobile apps with PhoneGap
Page 40: Digpen 7: Building mobile apps with PhoneGap

Used to be crap, but now it’s matured and is pretty good!

Page 41: Digpen 7: Building mobile apps with PhoneGap

Summary

Page 42: Digpen 7: Building mobile apps with PhoneGap

Christian Cook@Cookie_Cookson

Building mobile apps with PhoneGap