Phone gap開發課程

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/

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.

http://www.phonegap.com/license

市面上市面上 App demo App demo (Game)(Game)

http://www.phonegap.com/app/orbium/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/

http://www.phonega/

http://www.phonega/

http://www.phonegap.com/app/harmonious/

市面上市面上 App demo(GPS)App demo(GPS)

http://www.phonegap.com/app/andrea-palladio-architectures-gps-guide/









市面上市面上 App App demo(Planner)demo(Planner)

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>

Phone gap開發課程

Technology

Transcript of Phone gap開發課程