Post on 10-May-2015
description
PhoneGapPhoneGap 跨平台的行動跨平台的行動應用程式開發應用程式開發碩網資訊碩網資訊SeanSean
大綱大綱
介紹介紹 PhoneGapPhoneGap
市面上市面上 PhoneGap app demoPhoneGap app demo
開發環境需求與入門門檻開發環境需求與入門門檻
PhoneGap apiPhoneGap api 介紹說明介紹說明
用用 PhoneGap FrameworkPhoneGap Framework 開發開發 iPhone AppiPhone App
介紹介紹 PhoneGapPhoneGap
FrameworkFramework 一次支援六個手機平台 （一次支援六個手機平台 （ ios ios 、 、 AndroidAndroid 、、 BlackBerryBlackBerry 、、 WebOSWebOS 、、 WinMoWinMo、、 SymbinSymbin ））
用網頁技術來製作用網頁技術來製作 Native appNative app
PhoneGap PhoneGap 流程流程
支援狀況http://www.phonegap.com/about/features/
支援狀況http://www.phonegap.com/about/features/
PhoneGapPhoneGap 優點優點
PhoneGapPhoneGap 是免費的是免費的
PhoneGap is an open source implementation of open standards. That means developers and companies can use PhoneGap for mobile applications that are free, commercial, open source, or any combination of these. The PhoneGap project will always remain free and open source under an MIT license.
市面上市面上 App demo App demo (Game)(Game)
http://www.phonegap.com/app/orbium/http://www.phonegap.com/app/orbium/
市面上市面上 App App demo(Skethpad)demo(Skethpad)
http://www.phonegap.com/app/harmonious/http://www.phonegap.com/app/harmonious/
市面上市面上 App demo(GPS)App demo(GPS)
http://www.phonegap.com/app/andrea-palladio-architectures-gps-guide/
http://www.phonegap.com/app/andrea-palladio-architectures-gps-guide/
市面上市面上 App App demo(Planner)demo(Planner)
http://www.phonegap.com/app/diary-mobile/
http://www.phonegap.com/app/diary-mobile/
開發環境需求開發環境需求
Mac OS X Show LeopardMac OS X Show Leopard
IOS deviceIOS device
安裝安裝 IOS SDK+PhoneGapIOS SDK+PhoneGap
Setup New ProjectSetup New Project
Deploy to SimulatorDeploy to Simulator
Deploy to DeviceDeploy to Device
入門門檻入門門檻
略懂略懂 JavascriptJavascript
略懂略懂 HTMLHTML
略懂略懂 CSSCSS
JQuery Mobile(JQuery Mobile( 可以的話可以的話 ))
Objective-C (Objective-C ( 可以的話可以的話 ))http://jquerymobile.comhttp://jquerymobile.com
JavaScriptJavaScript 是一種廣泛用於是一種廣泛用於用戶端用戶端 WebWeb 開發的腳本開發的腳本語言語言，常用來給，常用來給 HTMLHTML 網頁網頁添加動態功能添加動態功能
<html><head><title>JavaScript的 Hello World程式 </title> <script type="text/javascript"> // 直接在瀏覽器視窗顯示。 document.write("Hello, world!"); // 開啟對話視窗顯示。 alert("Hello, world!"); </script></head><body>HTML 本文……</body></html>
<html><head><title>JavaScript的 Hello World程式 </title> <script type="text/javascript"> // 直接在瀏覽器視窗顯示。 document.write("Hello, world!"); // 開啟對話視窗顯示。 alert("Hello, world!"); </script></head><body>HTML 本文……</body></html>
PhoneGap apiPhoneGap api 介紹介紹AccelerometAcceleromet
ererAccelerometAcceleromet
erer CameraCameraCameraCamera CaptureCaptureCaptureCapture
CompassCompassCompassCompass ConnectionConnectionConnectionConnection ContactsContactsContactsContacts
DeviceDeviceDeviceDevice EventEventEventEvent FileFileFileFile
GeolocationGeolocationGeolocationGeolocation MediaMediaMediaMedia NetworkNetworkNetworkNetwork
NotificationNotificationNotificationNotification StorageStorageStorageStorage
開發流程開發流程
New ProjectNew ProjectNew ProjectNew Project Include libInclude libInclude libInclude lib
Write Write index.htmlindex.html
Write Write index.htmlindex.html
Deploy Deploy SimulatorSimulator
Deploy Deploy SimulatorSimulator
Setting Setting TargetsTargetsSetting Setting TargetsTargets
Deploy Deploy DeviceDeviceDeploy Deploy DeviceDevice
補充說明 ： 補充說明 ： jsonjson
[[{“name”: {“name”: “sean” ,”gender”:”male”}“sean” ,”gender”:”male”},,
{{{“name”: {“name”: “kos” ,”gender”:”male”}“kos” ,”gender”:”male”}]]
<list><list><person><person>
<name>sean</name><name>sean</name><gender>male</gender><gender>male</gender>
</person></person><person><person>
<name>kos</name><name>kos</name><gender>male</gender><gender>male</gender>
</person></person></list></list>