ASP.NET 2.0網頁設計範例教本
Download
Report
Transcript ASP.NET 2.0網頁設計範例教本
第10章 PhoneGap的基礎與開發環境
10-1 PhoneGap的基礎
10-2 Android與iOS的基礎
10-3 安裝PhoneGap開發環境
10-4 Android模擬器的基本使用
10-1 PhoneGap的基礎
10-1-1 PhoneGap簡介
10-1-2 PhoneGap支援的作業平台
10-1-1 PhoneGap簡介-說明
PhoneGap是網頁技術和手機應用程式之間的橋樑，可以讓
我們將Mobil Web應用程式建立成原生Android或iPhone手
機應用程式，讓沒有Java和C語言技術背景的程式設計者，
一樣可以輕鬆建立手機應用程式。
PhoneGap也稱為Apache Cordova，它是一個開放原始碼專
案，其目的是建立一個跨平台Mobile應用程式的解決方案
，使用最新HTML5技術和JavaScript建立的框架，整合
iPhone、Android、Palm、Symbian和BlackBerry智慧型手機
的核心特點，包含：定位、加速感測器、聯絡人、音效和
振動，可以讓使用者使用HTML、CSS和JavaScript建立
Mobile應用程式。
10-1-1 PhoneGap簡介-官網
PhoneGap官方網址為：http://phonegap.com，如
下圖所示：
10-1-1 PhoneGap簡介-特點
使用Web標準技術建立應用程式：PhoneGap是使用HTML5
、CSS和JavaScript建立Mobile應用程式，這些是大部分網
頁開發者都已經熟悉的技術。
存取各平台的原生API：透過PhoneGap的包裝，我們可以
呼叫各手機平台的原生API，例如：定位、加速感測器、
音效和振動等。
部署不同的手機平台：PhoneGap是Mobile Web應用程式和
行動裝置之間的橋樑，可以讓我們建立的Mobile Web應用
程式包裝成各平台的原生Mobile應用程式，部署至iPhone
、Android、Palm、Symbian和BlackBerry等智慧型手機或平
板電腦。
10-1-2 PhoneGap支援的作業平台
PhoneGap支
援的作業平台
和各種特點的
詳細清單，如
右表所示：
10-2 Android與iOS的基礎
10-2-1 Android的基礎
10-2-2 iOS的基礎
10-2-1 Android的基礎-簡介
Android是一套使用Linux作業系統為基礎開發的開放原始
碼（Open Source）作業系統，最初主要是針對手機等行動
裝置使用的作業系統，現在Android已經逐漸擴充到平板電
腦、筆電和其他領域，例如：電子書閱讀器、MP4播放器
和Internet電視等。
Android作業系統最初是Andy Rubin創辦的同名公司
Android, Inc開發的行動裝置作業系統，在2005年7月
Google收購此公司，之後Google拉攏多家通訊系統廠商、
硬體製造商等在2007年11月5日組成「開放式手持裝置聯
盟」（Open Handset Alliance），讓Android正式成為一套
開放原始碼的作業系統。
10-2-1 Android的基礎-版本
Android版本
釋出日期
代號
1.5
2009/4/30
Cupcake（紙杯蛋糕）
1.6
2009/9/15
Donut（甜甜圈）
2.0/2.1
2009/10/26
Eclair（閃電泡芙，法式奶油夾心
甜點）
2.2
2010/5/20
Froyo（冷凍乳酪）
2.3
2010/12/6
Gingerbread（薑餅）
3.0/3.1/3.2
2011/2/22
Honeycomb（蜂窩）
4.0x
2011/10/19
Ice Cream Sandwich（冰淇淋三明
治）
4.1.1
2012/07/9
Jelly Bean（雷根糖）
10-2-2 iOS的基礎
iOS在2010年6月之前稱為iPhone OS，一套Apple公司開發
的行動作業系統，原來是針對iPhone手機建立的作業系統
，目前iOS已經不只支援iPhone，也同時擴展支援Apple公
司的其他硬體產品：iPad、iPod Touch和Apple TV等。請注
意！不同於Android和微軟Windows Phone，iOS作業系統不
曾合法授權在其他非Apple硬體上執行。
iOS作業系統是源於Mac OS X，其基礎是使用Unix作業系統
，在架構上可以分成四個抽象層（Abstraction Layers）：
核心OS層（Core OS Layer）、核心服務層（Core Services
Layer）、媒體層（Media Layer）和Cocoa觸控層（Cocoa
Touch Layer），目前的最新版本是iOS 6。
10-3 安裝PhoneGap開發環境
10-3-1 下載與安裝JDK
10-3-2 下載與安裝Eclipse IDE
10-3-3 下載和安裝Android SDK
10-3-4 安裝ADT
10-3-5 安裝Android SDK平台套件
10-3 安裝PhoneGap開發環境-Android
Android的PhoneGap開發環境和使用Java語言開發
Android應用程式是相同的，我們需要下載和安裝
的工具軟體，如下所示：
•
•
•
•
下載與安裝JDK。
下載與安裝Eclipse IDE。
下載與安裝Android SDK。
下載與安裝ADT外掛程式。
10-3 安裝PhoneGap開發環境-iOS
iOS的PhoneGap開發環境是iPhone SDK，它是使用Xcode整
合開發環境，使用Object-C程式語言來開發iPhone手機應
用程式。Xcode是一套Mac OS X和iOS作業系統軟體開發的
整合開發環境，我們需要在Mac OS X電腦上安裝iPhone
SDK，才能建立iPhone手機應用程式。
安裝iOS的PhoneGap開發環境的基本軟硬體需求，如下所
示：
• 使用Intel的CPU電腦且執行Mac OS X Snow Leopard (10.6)以上版本
的作業系統。
• 執行Apple iOS的裝置，例如：iPhone、iPad和iPod Touch。
• iOS開發認證（Developer Certification）。
10-3-1 下載與安裝JDK
在本書使用的JDK版本是JDK 7（Java SE
Development Kit 7），其下載網址為：
http://java.sun.com/javase/downloads/index.jsp
JDK 7更新版本並不是使用「.」後的次版號來表示
，而是改為更新Update來標示，以本書為例是使
用JDK 7 Update 1，其下載Windows版JDK的檔名為
【jdk-7u1-windows-i586.exe】後，我們只需執行
此檔案就可以安裝JDK 7。
10-3-2 下載與安裝Eclipse IDE-下載
Eclipse IDE原為IBM公司發起的開發專案，其目的是開發一
套免費且開放原始碼的整合開發環境，可以支援多種程式
語言的應用程式開發，例如：Java、JavaScript和C/C++等語
言。Eclipse IDE需要安裝JRE才能執行，其下載網址為：
http://www.eclipse.org/downloads/
在下載網頁關於Java語言的IDE有兩種：Eclipse IDE for Java
EE Developers和Eclipse IDE for Java Developers，因為我們是
安裝Java SE，請選【Eclipse IDE for Java Developers】後的
下載連結【Windows 32 Bit】，即可下載最新版的Eclipse
IDE。
10-3-2 下載與安裝Eclipse IDE-安裝
以本書為例是使用Eclipse
INDIGO 3.7版SR1，其下載
檔名為ZIP格式壓縮檔【
eclipse-java-indigo-SR1win32】，因為Eclipse IDE
並沒有安裝程式，我們只
需解壓縮至指定資料夾，
例如：「
C:\Java_IDE\eclipse」，和
建立捷徑即可完成安裝，
如右圖所示：
10-3-3 下載和安裝Android SDK-下載
下載Android SDK
在官方網站可以免費下載最新版本的Android SDK
，其網址如下所示：
http://developer.android.com/sdk/index.html
在上述網頁點選Windows作業系統的超連接，就
可以下載ZIP格式，4.0版需要r14之上版本，本書
下載的是r17版，【android-sdk_r17-windows.zip】
，或是擁有Windows安裝程式的Android SDK（安
裝程式版本有時無法正確判斷是否已經安裝JDK）
。
10-3-3 下載和安裝Android SDK-安裝
本書是使用ZIP格式的壓縮檔案為例來說明如何安裝
Android SDK，其檔名為【android-sdk_r17-windows.zip】，
我們只需解壓縮至指定資料夾「C:\Java_IDE\android-sdkwindows」即可完成安裝，如下圖所示：
11-3-4 安裝ADT-說明
ADT（Android Development Tools Plugin）是支援
Eclipse IDE的Android擴充套件外掛程式，在Eclipse
IDE安裝此外掛程式，就可以讓Eclipse IDE轉換成
一套開發Android應用程式的整合開發環境。
11-3-4 安裝ADT-安裝
安裝ADT
ADT是一套Eclipse IDE外掛
程式，我們需要在Eclipse
IDE進行安裝（請建立
Internet連線），如右圖
所示：
11-3-4 安裝ADT-設定
設定ADT
在Eclipse IDE安
裝ADT後，接著
我們需要設定
ADT，即指定
Android SDK的安
裝路徑，如右圖
所示：
10-3-5 安裝Android SDK平台套件-說明
在安裝ADT後，我們需要安裝Android SDK套件，
安裝開發各版本Android應用程式所需的SDK平台
套件和其他廠商API。
10-3-5 安裝Android SDK平台套件-安裝
安裝Android SDK平台套件
Android平台有多種
版本，筆者是使用
2.2和4.03版為例來說
明安裝步驟（請建立
Internet連線） ，如
右圖所示：
10-3-5 安裝Android SDK平台套件-更新
更新與升級Android SDK平
台套件
在安裝的Android SDK是
r17版，當SDK有更新時
，我們可以在「Android
SDK Manager」交談窗
更新與升級Android SDK
平台套件，如右圖所示
：
10-4 Android模擬器的基本使用
10-4-1 新增與啟動Android模擬器
10-4-2 Android的基本操作介面
10-4-3 使用Android模擬器
10-4-4 瀏覽本機Web伺服器的jQuery Mobile網頁
10-4 Android模擬器的基本使用
Android模擬器（Android Virtual Devices，英文簡
稱AVD）是一個非常有用的工具，它可以在
Windows作業系統模擬一台執行Android作業系統
的行動裝置，幫助我們測試Eclipse IDE建立的
Android應用程式，而不用真正購買一台實機的智
慧型手機或平板電腦。
10-4-1 新增與啟動Android模擬器-建立
新增Android模擬器
在開始建立第一個Android應用
程式之前，我們需要先建立
Android模擬器，如果需要，我
們可以同時建立多個不同配備
的Android模擬器來幫助我們測
試在不同行動裝置上的執行結
果，如右圖所示：
10-4-1 新增與啟動Android模擬器-啟動
啟動Android模擬器
在選擇模擬器後，按【
Start】鈕，可以看到「
Launch Options」起動選
項交談窗。按【Launch
】鈕，稍等一下，約數
十秒，視硬體而定，可
以看到啟動的Android模
擬器，其介面是原生
Google作業系統的外觀
，以此例是4.0版，如右
圖所示：
10-4-2 Android的基本操作介面-說明
對於習慣Windows作業系統操作的使用者來說，
Android操作介面因為是行動裝置的作業系統，螢
幕尺寸通常比較小，其操作邏輯反而比較像是在
Web瀏覽器瀏覽網站的多頁網頁。
10-4-2 Android的基本操作介面-首頁畫面
首頁畫面（Home Screen）
Android作業系統在啟動後
進入的是首頁畫面，這是
一個特殊應用程式，作為
使用Android作業系統服務
的介面，類似Windows作
業系統的桌面，可以將常
用程式的捷徑新增至首頁
畫面，如右圖所示：
10-4-2 Android的基本操作介面-活動
活動（Activity）
Android應用程式主要是由
一或多個活動所組成，每
一個活動可以建立與使用
者互動的操作介面，類似
Web網站的表單網頁，如
右圖所示：
10-4-3 使用Android模擬器-解鎖螢幕
解鎖螢幕
在Android模擬器解鎖螢幕，請使用滑鼠游標按住
下方中間圓形上鎖的鎖圖示，如下圖所示：
10-4-3 使用Android模擬器-操作按鍵說明
操作按鍵說明
模擬器按鍵
鍵盤按鍵
首頁
Home
選單
F2或Page Up
返回
Esc
搜尋
F5
打電話
F3
掛斷電話
F4
電源
F7
音量調大
Ctrl-F5
音量調小
Ctrl-F6
旋轉螢幕
Ctrl-F11
切換啟用電信網路
F8
切換全螢幕
Alt-Enter
10-4-3 使用Android模擬器-設定繁體中文介面
設定繁體中文介面
Android模擬器預設是英文使用介面，我們可以將它設定成
中文使用介面，請在首頁畫面，按右邊的【MENU】鍵，
可以在下方顯示選項選單，請執行【System settings】（之
前版本是Settings）指令，可以看到設定畫面，請捲動視窗
找到【Language & Input】（之前版本是Language &
Keyboard），然後選【Language】（之前版本是Select
Language），然後捲動到最後選【中文 (繁體)】，即可切
換成繁體中文介面。
10-4-4 瀏覽本機Web伺服器的jQuery Mobile網
頁-說明
在本書第5~9章的jQuery Mobile網頁是在Windows
7的Opera Mobile Emulator上測試執行，因為
Android模擬器內建瀏覽器，換句話說，我們也可
以使用Android模擬器來瀏覽Server2Go本機伺服器
上的jQuery Mobile網頁。
請啟動Server2Go，然後在Android模擬器下方中間
的應用程式啟動器（App Launcher），選最右邊【
瀏覽器】圖示啟動內建瀏覽器。
10-4-4 瀏覽本機Web伺服器的jQuery Mobile網
頁-瀏覽
在上方網址欄輸入網址：
http://10.0.2.2:4001/Ch06
/C6_1_1.htm（模擬器不
是使用127.0.0.1，而是
10.0.2.2），按Enter鍵，
就可以看到顯示的jQuery
Mobile網頁內容，如右圖
所示：