phonegap/phonegap build - amsterdam adobe camp

21
PhoneGap / PhoneGap Build #CreateTheWeb Mihai Corlan / Adobe Web Evangelist / @mcorlan

Upload: mihai-corlan

Post on 09-May-2015

2.878 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

PhoneGap / PhoneGap Build

#CreateTheWeb

Mihai Corlan / Adobe Web Evangelist / @mcorlan

Page 2: PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

2

Mobile Development

1. Native Apps2. Web Apps3. Hybrid Apps (eg. PhoneGap)

#CreateTheWeb

Page 3: PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

Why would you use PhoneGap?

Write once, run everywhere Native Installers -> Application Stores Use standard web technologies

#CreateTheWeb

Page 4: PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

PhoneGap could be your best friend if

You want to target multiple mobile platforms You know HTML/JavaScript/CSS Extending existing in-browser apps with native features Data-centric apps, social networking, simple games

#CreateTheWeb

Page 5: PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

5

PhoneGap Apache Cordova?

#CreateTheWeb

Page 6: PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

Contributors

Adobe – of course Microsoft – Windows Phone support RIM – BlackBerry support / Ripple Emulator IBM

#CreateTheWeb

Page 7: PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

PhoneGap supports 7 platforms

#CreateTheWeb

Page 8: PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

PhoneGap Plug-ins

Extend the built-in functionality with custom plug-ins http://wiki.phonegap.com/w/page/36752779/PhoneGap

%20Plugins Examples: https://github.com/phonegap/phonegap-plugins

Delegate heavyweight data processing to native code Create background services

#CreateTheWeb

Page 9: PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

Who else is using PhoneGap?

Facebook Mobile SDK SalesForce.com Mobile SDK IBM Worklight Platform SAP

Some numbers: ~ 4% apps in iTunes Store use PhoneGap (Sep 2011) ~ 100,000 monthly downloads of PhoneGap SDK

#CreateTheWeb

Page 10: PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

Demo

#CreateTheWeb

Page 11: PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

Building PhoneGap Apps

#CreateTheWeb

Page 12: PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

What can you use to build your app?

#CreateTheWeb

Page 13: PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

Build PhoneGap app as you’d build a regular web app

#CreateTheWeb

Page 14: PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

Creating the native installers

There are 2 different methods: Using the target platform tool chain Using PhoneGap Build – a cloud service

#CreateTheWeb

Page 15: PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

Using the PhoneGap Build

http://build.phonegap.com Supports: iOS, Android, BlackBerry, WebOS, Windows Phone

7, and Symbian It is in beta and it is free; it will always be free for Open

Source projects You upload your files (index.html, CSS, JS, images) Or you provide a Git / SVN link

#CreateTheWeb

Page 16: PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

PhoneGap Debug

http://debug.phonegap.com

#CreateTheWeb

Page 17: PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

PhoneGap Emulate

http://emulate.phonegap.com

#CreateTheWeb

Page 18: PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

Resources

Source code: github.com/callback Docs: docs.phonegap.com Wiki: wiki.phonegap.com PhoneGap Build: build.phonegap.com PhoneGap Emulate: emulate.phonegap.com Plugins: github.com/phonegap/phonegap-plugins Support: groups.google.com/group/phonegap IRC: irc.freenode.net #phonegap Apps: phonegap.com/apps Bugs: issues.apache.org/jira/browse/CB

#CreateTheWeb

Page 19: PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

PhoneGap Day Europe – Amsterdam September 14th

http://pgday.phonegap.com/eu2012/

Page 20: PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

Questions & Answers!

Thank you!

Mihai Corlan@mcorlanhttp://corlan.org

#CreateTheWeb

Page 21: PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

How does PhoneGap work?

PhoneGap App Mobile Device

PhoneGapNativeEngine

PhoneGapJavaScriptEngine

Web ViewRenders the app UI

Access to nativemobilefeaturesYour Code

HTML/JavaScript/CSS/Images/Frameworks/Libraries