快快樂樂利用 phonegap 打造屬於自己的 app
TRANSCRIPT
快快樂樂利用 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