昨天晃到的好服務:PhoneGap - 一個可以跨平台製作各類moblie的開發工具,一個免費的open source。

看倌一定問,唷~豈有如此神之?!
講白了也沒什麼,這開發工具也算半個框架,也就是這個套件內建瀏覽器,而讀的目錄跟著包在一起。
所以簡單來說就是看似app,實為網頁。  但也能夠透過函式呼叫手機上的各類裝置結合使用。
今早測試支援jQuery,但僅是使用模擬器去跑,還沒測丟到手機內是否能夠運作。

但,無論如何,只要會做網頁就能夠寫app(幾乎啦),聽起來有沒有很迷人?
且支援jQuery、HTML5,能夠玩的花樣可多了。尤其jQuery,變成動態取得線上資料,裝上去了以後你能夠直接維護service,而client直接拉。
RSS放著,輸出稍稍修改,連部落客都能夠自己寫個專門的app。  弄個QR code,一拍就能夠追蹤你的文章,酷不酷?

這也代表著公司的web service可以直接挪來給行動裝置使用,且既有的網頁維護者或service不需很大門檻就能將服務移植到行動裝置上。
而且行動裝置通用,不用研究了Android卻又要研究iOS,更甭說未來的微軟芒果,因為是網頁,所以連介面幾乎都能夠通用。

在這個行動世代,又要額外花錢請人寫公司的app或相關服務,有沒有替公司省錢了?  有沒有,有沒有?!

 

因為昨天才接觸,所以還未開始測試其他函式,這篇僅紀錄如何開始運作。以Android環境為例
官方教學
視頻教學
inSide的教學

首先Eclipse + SDK環境請先自己架好,若不會可以參考我的文章

OK,基本開發環境佈署好了以後,請先建立一個新Android專案。

需注意的是Package Name請用 com.phonegap.*  這種命名方式

下載 phonegap 運行所需資料,載點在這 https://github.com/phonegap/phonegap/zipball/1.0.0 ,寫此文章時剛好1.0.0版

解壓縮後請進到Android資料夾,將xml資料夾複製到project下的res資料夾內
js及jar檔都改為phonegap,將版本號去掉js放在www下,而jar放到lib下。

  

   

接下做一個動作,讓jar加入

在libs按右鍵,選擇Build Path / Configure Build Path

 

接下來選擇Libraries,點Add JARs選到libs下的phonegap.jar後ok

出現如下圖即ok

 

 

接下來開啟src下的 *.java  (範例是app.java)
將 紅色的刪除,加入藍色底線的字。

刪除項目

  • import android.app.Activity;
  • setContentView(R.layout.main);

加入

  • 按enter後會出現 import android.os.Bundle;,在後面加入 import com.phonegap.*;
  • 將extends Activity 改為 DroidGap
  • super.onCreate(saveInstanceState);後加入 super.loadUrl(file:///android_asset/www/index.html);

 




完成後程式碼如下圖 (如果有出現錯誤請檢查步驟是否錯誤)

 

 

接下來,修改 AndroidMainfest.xml 檔案,在檔案點右鍵 Open With / Text Edit
需要增加程式碼到三處,如下圖箭頭標示

 

第一段程式碼加在上方箭頭處,也就是版本編號後

第一段程式碼
-------------------
<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” />
-------------------


第二段加在"@string/app_name"後,記得要有空白

第二段程式碼:
-------------------
android:configChanges="orientation|keyboardHidden"
-------------------

 

第三段加在原<activity> 標籤下,也就是多加一個activity標籤

第三段程式碼:
-------------------
<activity android:name="com.phonegap.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> <intent-filter> </intent-filter> </activity>
-------------------

貼上去會很醜,因為都沒縮排,看倌可以自行整理。
最後程式碼完成如下圖

 

最後在www目錄下建立一個index.html檔案,不曉得要打什麼可以參考下面

index.html範例
-------------------
<!DOCTYPE HTML>
<html>

  <head>
    <title>test1</title>

  <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>     

  <script type="text/javascript" charset="utf-8">

     function onLoad(){

          document.addEventListener("deviceready", onDeviceReady, true);

     }

     function onDeviceReady(){

          navigator.notification.alert("ezcshi phonegap sample!!");

     }

  </script>

  </head>

  <body onload="onLoad();">
       <h1>Welcome to PhoneGap</h1>

       <h2>Try it!</h2>

  </body>

</html>
-------------------

接下來就是測試模擬器啦。
在專案名稱的資料夾右鍵按 Run AS / Android Application
接下來就會跳出模擬器畫面了。
注意可以從下方的Console觀看載入情況,若沒有該欄位,可以從左下角開啟。


 

第一次執行很容易出現卡在 Waiting for HOME ~ 的訊息,因為配備關係需要等久一點,等到出現 Success ! 就是載入完成了。
開啟後會跳出畫面

 

恭喜看倌,程式會跑了~!
接下來就看你怎麼開發啦。

若此篇文章有錯也請告知,感激不盡!

ezcshi 發表在 痞客邦 PIXNET 留言(7) 人氣()