IT|程式設計|Front-End|Cordova + eclipse

前言


談起跨平台手機 Apps,PhoneGap 應該算是最為人熟識的 Framework。
 
PhoneGap 與 Cordova 的實際差異:按照官方的說法 PhoneGap 是 Cordova 的一個 distribution。
 
原來是 Adobe 在 2011 年從一家小型公司手上收購了 PhoneGap。然後又把它的 Source Code 捐獻了給 Apache 基金會成為 OSS。但 Adobe 又保留了 PhoneGap Build 這個服務自己獨有。
 
從此於是乎兩者的關係曖昧不清…按照官方的說法 PhoneGap 是 Cordova 的一個 distribution。
 
”PhoneGap is a distribution of Apache Cordova. You can think of Apache Cordova as the engine that powers PhoneGap, similar to how WebKit is the engine that powers Chrome or Safari.“
 
實作

作業系統:Mac
 
[Hello World]
 
確保 Android SDK 已經有被加入 PATH 環境變數中,在 Mac 上可以加到 ~/.bash_profile 裡面
export ANDROID_HOME=/Users/Kevin/Agile-MAC/Android/android-sdk-macosx
 
準備 ios build
 
1.安裝 Xcode
2.安裝 ios-sim、ios-deploy
npm install -g ios-sim
npm install -g ios-deploy
3.安裝 Node.js
 
官方建議 用 npm 來安裝 Cordova
sudo npm install -g cordova
 
建立 Hello World 專案
 
cordova create hello com.errui.hello HelloWorld
 
上述指令會建立一個 hello 目錄,接下來的指令都是要在這個 hello 目錄下執行
cordova platform add ios
cordova platform add android
 
查詢目前 cordova 支援的平台
cordova platform
 
執行 Hello World 程式
cordova emulate android
cordova emulate ios
 
如果目前在 Android 模擬器那邊已經建立了多個 AVD 的話,
跑起來的可能不是我們要的那個,
可以執行下面的指令先看一下目前有的 AVD:
cordova run android —list
 
 
若是要指定 Nexus_4_API_15 這個 AVD,可以這麼做
cordova run android --target=Nexus_4_API_15
 
下面就是 Android 和 iOS 模擬器,分別把 Hello World 專案執行起來的畫面
 
Android
 
iOS
 
 
參考資料:

IT|程式設計|Front-End|PhoneGap APP 快速開發移動端應用

跨平台解決方案

如果想同時開發網頁應用程式及原生APP,目前有三種主要工具: Unity,一個專業的遊戲開發引擎,並且開發效果最接近原生APP,能維持高性能。相對而言,也要付出較高的學習成本。Xamarin,基於Mono專案的開發套件,並且在價格上特別實惠(尤其對.NET開發者而言)。可以直接透過微軟的 Visual Studio及C#開發各種跨平台App。Cordova,能直接使用HTML/CSS/Javascript來開發跨平台APP,如果你是網頁工程師,則學習曲線則幾乎為0。
 
 
PhoneGap 技術簡介

PhoneGap是一個用基於HTML,CSS和JavaScript的,創建移動跨平台移動應用程序的快速開發平台。它使開發者能夠利用iPhone,Android,Palm,Symbian,WP7,WP8,Bada和Blackberry智能手機的核心功能——包括地理定位,加速器,聯繫人,聲音和振動等,此外PhoneGap擁有豐富的插件,可以調用。
 
該技術可以讓Web開發人員可以利用他們所有的HTML、CSS和JavaScript知識,而且仍舊可以同iPhone的重要本地應用程序(如攝像頭和通訊錄)交互。重點在與快速開發一些基本的應用。門檻相對較低。
   
 
功能的支持

PhoneGap在多個主要的智能手機設備上提供了以下功能的支持:
●加速計
●攝像頭
●羅盤
●通訊錄
●文檔
●地理定位
●媒體
●網絡
●通知(警告、聲音和振動)
● 存儲

[開發工具]
 
英文網站:http://phonegap.com/
 
[配置要求]
 
下載及安裝 
 

[Hello World 範例 PhoneGap+jQuery Mobile
 
打開 Eclipse,在文件菜單下面點擊 New > Android Project
 
Application name:Hello
Package name:com.phonegap.hellophonegap
Create Activity:App
注:目前 PhoneGap 0.9.3 用 Android 2.3 以上版本可能會出錯,所以 Build Target 請選 Android 2.2 以下版本。
 
項目的根目錄,創建兩個目錄:
/assets/www
/libs
 
 
解開 phongap  資料夾,選擇 Android,裡面會有一個 phonegap.js 和 phonegap.jar 檔
 
執行以下操作:
phonegap.js 複製 /assets/www 目錄
phonegap.jar複到 /libs 目錄
xml 文到夾到 /res 目錄
 
[修改程式碼]
 
Eclipse的 src 文件夹中的主 Java 文件進行少量調整,如下圖:
class 繼承類由 Activity改為 DroidGap
將 setContentView(R.layout.main) 這一行替換為 super.loadUrl("file:///android_asset/www/index.html");
添加 import com.phonegap.*;
移除 import android.app.Activity;
 
 
 
在這裡你可能會遇到Eclipse找不到phonegap.jar的錯誤。在這種情況下,右鍵單擊 /libs 文件夾找到 Build Paths/ > Configure Build Paths。然後在Libraries標籤頁中添加 phonegap.jar 到項目中。
 
 
右鍵單擊AndroidManifest.xml並選擇Open With > Text Editor。將以下的程式碼拷貝到 android:versionName=”1.0″>
之後:
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" />
 
 
在把 android:configChanges=“orientation|keyboardHidden” 加到 activity 裡的 android:label=”@string/app_name”的後面,如下圖:
 
[hello world 程式碼編寫]
 
在「/assets/www」目錄中新建文件 index.html ,將下面程式碼複製貼上並存檔
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
 
 
大功告成!