iT邦幫忙

DAY 5
8

東之宿_網站開發系列 第 5

東之宿_開發日誌-6(Jquery Moile & PhoneGAP 下)

要使用PhoneGap,需先將開發環境準備好(如有描述錯誤,還請各位先進,盡量糾正太陽,謝謝。)
準備測試之前,可以先新增一個資料夾,做為Android Delveoper Tool的WorkSpace(工作資料夾),太陽建立的名稱是AndroidPhoneGapAPP。

建立好之後,進入到AndroidPhoneGapAPP資料夾裏的eclipse這個資料夾,執行eclipse這個執行檔。執行後,便會開啟AndroidPhoneGapAPP。

接下來,可參考下列八張圖檔。

完成後,請開啟解壓縮後的PhoneGap資料夾,找出cordova-2.9.0.js複製到建立好的那個WorkSpace資料夾裏面的 assets/www資料夾。

另外,找出cordova-2.9.0.jar複製到建立好的那個WorkSpace資料夾裏面的 libs資料夾。

最後,將xml資料夾,複制到res資料夾裏。

再來就是在AndroidPhoneGapAPP是建立cordova-2.9.0.jar的Path。

下一個步驟,就是在AndroidPhoneGapAPP視窗裏,找到cordova-2.9.0.jar,點選後,在右邊的編輯視窗裏,修改一下這個檔案的內容。

修改前的原始檔。

package com.example.phonegaptest;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
   
}

修改後的檔案

package com.example.phonegaptest;
import android.os.Bundle;
import android.app.Activity;
import org.apache.cordova.*;
public class MainActivity extends DroidGap {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html" );
    }
}
  

然後找到AndroidManifest.xml檔案,並找到檔案裏的<uses-sdk...../>和 <application...../>,在這兩個tag中間,置入下列程式碼。

<supports-screens
    android:largeScreens="true"
    android:normalScreens="true"
    android:smallScreens="true"
    android:resizeable="true"
    android:anyDensity="true" />
<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" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />

倒數第二個步驟,在同一個xml檔案裏,找到<activity>這個tag區段,加入下列code。

android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"

再來,將檔案名稱為index.html檔案,放入WorkSpace資料夾裏的assets/www,然後這個檔案必須宣告這一行<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>

最後,在Android Delveoper Tool找到RunAS,執行看結果...看到了剛才放進去的那個index.html內容。

如果要直接連到寫好的JQM網頁,則可將cordova-2.9.0.jar這個檔案裏的這一行super.loadUrl("file:///android_asset/www/index.html"

裏的**super.loadUrl("file:///android_asset/www/index.html"改為要連過去的網址, 例super.loadUrl("http://網址")

再重新執行RunAs...就可看到結果了。

太陽雖然花了十幾個小時測試,又花了快五個小時,將這篇文章寫出來,但再接下來的後續,該怎麼打包成Android APP和放到Android Market,太陽目前還不會,也還沒有時間測試,有機會再跟各位先進報告。

[b]下回預告:**

太陽希望,他的網站能讓使用者登入,但必需是使用Facebook帳號登入,因此他開始了解,該如何讓使用者用Facebook帳號這件事,直到他試成功為止。

今天的太陽下山了,明天一起來看看太陽的Facebook帳號登入報告。

2013/10/06 SunAllen

鐵人賽_開發技術組_文章導覽

上一篇
下一篇

2013鐵人賽_文章總覽
個人全系列連結


上一篇
東之宿-開發日誌-5(Jquery Moile & PhoneGAP 上)
下一篇
東之宿_開發日誌-7(Facebook 登入)
系列文
東之宿_網站開發16

1 則留言

0
gric
iT邦高手 1 級 ‧ 2013-10-06 04:22:45

拍手拍手沙發熊要幫自己的部落格寫app...太陽救命啊!

我要留言

立即登入留言