Ecs的玩具收藏與攝影生活

PhoneGap無疑是個好用的東西~

至於它是什麼呢？就不多介紹了！！

隨便GOOGLE一下都很多資料~~

我這篇要講的是如何用Dreamwever + PhoneGap 僅利用網頁的技術把一個Android的APP安裝檔.apk給發佈出來~~

在開始講之前，先來廢話一下！

我覺得我是個特別怪的人~~

因為研究所時期有真的用過eclipse + Android SDK + JAVA

& XCODE + iOS SDK +objective-c 開發過兩種系統手機APP的實戰經驗~

都感覺真的不是這麼的好！！！

不過就是做一個手機軟體，為何總是要如此勞師動眾？？？

所以有其他的技術可以完成寫APP這件事我都會非常有興趣！！

例如之前的Adobe AIR on FLASH~~ Android的 / iOS的

Adobe不是省油的公司，雖然他們被蘋果黑了好幾次！

但還是致力於研發Adobe系列的工具來開發智慧型手機的app^^

用Adobe的工具，真讓學設計出身的我真的感到溫暖啊XD

好了 廢話不多說 直接開始正題~

我這篇是用Dreamwever CS5.5來做示範

SORRY我知道現在已經到CS6惹，但我就是懶得灌啦~~(堪用就好了嘛~~)

 

以下就是打開Dreamwever後，看圖說故事啦！照著做就對了(我懶得打多餘的字)

 

(一)安裝Android SDK

1.

 

 

2. 點輕鬆安裝來自動幫你安裝Android SDK

 

3. Android SDK安裝成功

 

(二)新增一個網站，是PhoneGap的頁面範本

4.

 

5. 名稱自己設，資料夾選自己愛的，都弄好後按儲存

 

6. 

 

7. 照著選，按建立

 

 

8. 打開使用PhoneGap的jQuery範本

 

9. 這個範本相當好用，照著樣式與說明拿來加圖片修改一下就是一個很好的手機版網頁！(此篇先只用範本發佈)

 

(三)Android AVD安裝與apk發佈

10.

 

11. AVD是空的就不能按儲存，先按一下管理AVD

 

12. Accept All → Install

 

13. Tools打勾；Android的版本打勾4.2即可；如果想特別安裝哪種版本再打勾安裝！

 

 

14. Accept All → Install(應該會重複很多這步驟)

 

15. 安裝過程可能會一陣子！

 

16. 安裝完畢後，回到第11張的畫面，AVD那就會出現字了(其實就是他幫你生成的Android模擬器名稱)

 

17. 要發佈成Android的app囉

 

18. 因為我們沒開模擬器，所以這步驟很可會跑很久，不過沒關係，當你看到他講說"正在發佈至模擬器"之類的(應該是差不多跑到最後一步後)，就可以直接按取消了(因為我們沒有要發佈在Android的官方模擬器上)

 

19. 只要有做上一個步驟(要等到最後)，你就可以在你第16張那所設的資料夾內的com.company.xxx_Android的bin資料夾內找到一個xxx-debug.apk (也就是Android的APP安裝檔囉)

 

 

(四)安裝

這就不截圖了，因為很簡單~

如果你有Android平版或手機~~

你只要把你找到的xxx-debug.apk複製進Android實機裡就直接可以安裝了！

如果沒有~

我建議是使用BlueStacks這個第三方Android模擬器！(不要用官方的)

http://evacyl52201.pixnet.net/blog/post/31809655

↑我之前也有寫過BlueStacks介紹~~

安裝完BlueStacks後，你看到的.apk檔就會像我的圖19一樣是BlueStacks的圖示~

只要開著BlueStacks，點兩下xxx-debug.apk就可以直接裝上模擬器上了！！

根本簡單到爆炸！！！

 

 

預告：用此PhoneGap的jQuery範本來修改製作成手機版網頁的要點

-Jouko -2013/3/19