快快樂樂利用 PhoneGap ���打造屬於自己的 App

ericpi

MOPCON/KSDG

About ericpi

•  KKBOX S.RDC Manager •  KSDG organizer • MOPCON 2012/2013 •  Linux/FreeBSD, Node.JS, PHP lover

What is PhoneGap?

•  Mobile Development Framework – developed by Nitobi – Hybrid: develop App with HTML5/CSS/Javascript – Cross-platform App

•  Nitobi was acquired by Adobe •  Open source project: Apache Cordova

Why PhoneGap?

•  HTML5/CSS/Javascript •  Cross-platform: Android, FirefoxOS, iOS, Windows Phone..

•  Apple’s approval •  Adobe support & many services/contributors

So.. It’s just a webview app?

And why not WinJs.. blah

PhoneGap Benefits

•  Android, FirefoxOS, iOS, Windows Phone.. scaffold •  SMS, Address book, Camera, Notification, GPS… native API wrapper

•  Cross-domain access

PhoneGap principle

Web  App(HTML5/CSS/JS)

PhoneGap  Javascript  binding

WebView PhoneGap  NaDve  Wrapper

Today is Windows Phone day

Windows 8 & Visual Studio Express…

I am Mac user……

Why PhoneGap?

•  HTML5/CSS/Javascript •  Cross-platform: Android, FirefoxOS, iOS, Windows Phone..

•  Apple’s approval •  Adobe support & many services/contributors

Adobe PhoneGap Build

•  https://build.phonegap.com/

•  Online PhoneGap build service •  Github integration •  Keep away from Windows 8 & VS express

快快樂樂建立App

•  DEMO –  http://goo.gl/DTbZmd

•  Source –  http://goo.gl/DK1cQT

Get your github url

Create Project with Adobe Build

Setup App & Download

Deploy to your WP devices

Create a jqm-designer app

•  Export jqm code – index.html, css, js

•  Add PhoneGap include code into index –  <script type="text/javascript" src="phonegap.js"></script>

•  Create config.xml –  https://raw.github.com/KSDG/PhoneGap-Sample/master/config.xml

•  Zip index.html & config.xml & css/js •  Upload PhoneGap Build

The PhoneGap Native Feature

• Which feature you need? –  http://docs.phonegap.com/en/edge/index.html#API%20Reference

• Modify config.xml for feature permission – https://build.phonegap.com/docs/config-xml

•  Define deviceready listener •  Create your feature code

Some Tips

•  Use script src remote url •  Important: deviceready event •  Async issues •  Different platform – Configuration – UI management

WP App 競賽 MOPCON 特別版! •  http://goo.gl/BsjBVn

•  直接贈送MOPCON VIP!

•  免費提供開發者帳號

•  三支 Nokia Lumia 1020!

•  行動電源抽獎

Thanks

官方網站 http://mopcon.org/

粉絲群 https://www.facebook.com/mopcon