隨著 App 的需求日漸增多,我們也在很多地方看到了可以學習App的書籍或者是課程。但是對於大部分的人來說,學習撰寫App是有一定的挑戰的。

若要學習App的撰寫,困難的點在於程式語言的學習是需要一段時間以及陡升的學習曲線。下表是各相對應的裝置與語言列表。

iOS : Objective-C

Android: Java

Windows Phone: C#

BlackBerry: Java

 

但是對於很多的廣告或是介紹型的App,例如餐廳或商店所想要的自介用App,程式的運算與邏輯不是App的重點,重點是圖像與資訊的傳達。

而對於一個視覺設計師來說,為了製作App,除了設計圖像與資訊之外,還要學習程式的撰寫才能把App製作出來,是一件很累並且浪費時間的行為。所 以市面上就開始出現了一些轉換的工具,可以讓網頁設計師們,很快的把網頁轉換成App之後可以安裝在裝置上。而如果需要數學或邏輯的運算,則就要使用 Java Script程式碼來進行撰寫。若是需要手機本身提供的功能,例如相機、重力加速度感應器等,則可以利用Java Script呼叫轉換工具的API來達到。

可是這些工具的安裝都有一定的困難。以下要介紹的是完全不用安裝,只要利用雲端轉換,就可以製成App的方法。PhoneGap Build!

這裡介紹的是使用Dreamweaver CS6再加上PhoneGap轉換App的方法。首先可以先用Dreamweaver CS6的網站管理功能建立一個網站。然後新增一個檔案為index.html。

為了手機瀏覽的格式,最快速設定的方式是利用CS6的插入jQuery Mobile頁面功能。當中Dreamweaver CS6會詢問連結類型是遠端(CDN)或者是區域。因為我們所要建構的是手機App,而手機在操作中可能是沒有連結網路的,所以要選擇區域。

clip_image002

在插入jQuery頁面之後,會得到的頁面形式為下圖:

clip_image004

如果用瀏覽器預覽,會得到下圖:

clip_image005

所以已經有手機應用程式的樣子了。這個時候只要把內容加入,並且加入圖片,修改配色以及CSS設定。若有多個資訊頁面,可以加上項目清單,並且製作成多個頁面連結,讓它資訊完整。設計完成之後,可以得到像這樣的頁面。這時候這個頁面還只是手機版本的網頁。

clip_image007 clip_image009 clip_image011

完成了這些頁面之後,接下來要設定icon檔案以及程式名稱。

在這個資料夾當中,建立一個config.xml。並且在config.xml裡面設定好id (程式唯一的識別碼,建議使用公司網址倒裝加上專案名稱),name是程式名稱,還有icon.png。icon.png指的就是程式圖示。設定範例如下:

  image

都設定好之後我們就要利用PhoneGap Build一次把它轉換成六種版本的App。

這時候可以利用Dreamweaver Build的直接PhoneGap Build服務功能來操作。但也可以直接到Phonegap build網站上傳。

PhoneGap上傳步驟如下:

把這幾個html檔案,加上圖檔以及jQuery的js/css檔打包成一個zip檔案。到build.phonegap.com註冊帳號之後,開始設定App的細節。

clip_image012

設定好了程式的名稱之後,就可以將zip檔案上傳。只要短短一兩分鐘的時間,網站就會將您的應用程式轉換成App並且顯示出二維條碼可以掃描下載。

而iOS的版本需要驗證,所以必須要在驗證程序之後才能夠產生。而BlackBerry的版本,名稱不能有中文,所以若用中文則無法產生。但是其他版本都可以使用了。

PhoneGap Build目前是測試版本,可以無限製造App。而在正式收費之後,若您的App是公開且不收費的,則可以無限制產生,若是私人使用的App,則請參考定價方式斟酌使用。

clip_image014




http://www.xapps.tw/article/278?nocache=1

創作者介紹

佳佳的窩

天秤女~佳佳 發表在 痞客邦 PIXNET 留言(0) 人氣()