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.

圖片1  

 

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

圖片2

 

3. Android SDK安裝成功

圖片3

 

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

4.

圖片4

 

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

圖片5

 

6. 

圖片6

 

7. 照著選,按建立

圖片7  

 

8. 打開使用PhoneGap的jQuery範本

圖片8

 

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

圖片9

 

(三)Android AVD安裝與apk發佈

10.

圖片10

 

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

圖片11

 

12. Accept All → Install

圖片12

 

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

圖片13  

 

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

圖片14

 

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

圖片15

 

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

圖片16

 

17. 要發佈成Android的app囉

圖片20

 

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

圖片21

 

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

圖片23  

 

(四)安裝

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

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

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

如果沒有~

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

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

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

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

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

根本簡單到爆炸!!!

圖片1  

 

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

-Jouko -2013/3/19

   

文章標籤
創作者介紹

Eva Chuang' s BLOG (Jouko' s BLOG)

Eva Chuang 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • small0052
  • 太好了 下載了phone gap卻不知道怎麼用@@
找更多相關文章與討論