:::
顯示具有 Programming/APP 標籤的文章。 顯示所有文章

如何設定PhoneGap Build中Windows Phone的Publisher ID / How to setup Windows Phone’s Publisher ID in PhoneGap Build?

布丁布丁吃布丁

如何設定PhoneGap Build中Windows Phone的Publisher ID / How to setup Windows Phone’s Publisher ID in PhoneGap Build?

image

PhoneGap Build是一個PhoneGap應用程式線上編譯的免費平臺。我現在開發的PhoneGap應用程式,例如「布丁布丁吃什麼?」,就是直接用PhoneGap Build編譯。

我們雖然可以在PhoneGap Build上編譯可供iOS、Android跟Windows Phone三種平臺安裝的APP,但是大多都還要做額外的設定。之前我在「如何在PhoneGap Build上建制可發佈的Android APK: 建立簽署檔案」談過編譯Android APP的設定,今天我們要來講的是Windows Phone的設定:Publisher ID。

(more...)

想來研究一下Windows Store的APP開發

布丁布丁吃布丁

想來研究一下Windows Store的APP開發

windows-store-logo

說到APP,大家都只想得到蘋果的App Store跟Andorid的Google Play (至於Firefox OSMarketplace……我只能說R.I.P.),但是其實Windows仍然是大多數人使用的作業系統。而且不管怎麼緬懷Windows XP還是Windows 7,更新的Windows 8甚至是Windows 10還是鋪天蓋地的入侵每個人的電腦,也是現在購買Windows設備的預設作業系統。

Windows 8之後的作業系統跟以前比起來最有趣的特色,我想就是加入了Windows Store的功能,讓大家可以開發APP。


為什麼會想要在Windows上開發APP?

其實在Windows上開發exe的桌面版APP並不是什麼特別的事情,但是真要開發的話,還是要學習另外一套開發工具跟流程,像是Visual Studio (恭喜Visual Studio開放原始碼了)。

image

然而最近因緣際會開始研究起PhoneGap (Cordova),而且用Onsen UI (最近推出的Onsen UI 2很棒喔)做了一個感覺還可以看的APP,也上架到了Google Play上。

PhoneGap的特色就是以HTML5開發,就能做成不同平台的APP。在PhoneGap Build上就直接提供了iOS、Android、Windows Phone三種不同的平臺,使用Monaca還能多編譯成Chrome Extension (擴充套件)跟Windows App。如果自行配置PhoneGap編譯環境的話,還能夠編譯成其他6種平臺的APP,包括BlackBerry黑莓機、Bada、Symbian、webOS、Tizen、Ubuntu Touch (這是從Wiki找來的資料,但是我記得還有更多)。這讓我開始興起朝向其他系統邁進的念頭。

成為開發者的費用

overview_hero

要成為一個APP開發者並不是自己說說就是,而是必須要在各個平台繳交保護費……呃,是上架維護費。

Google Play的開發者註冊費用是眾所皆知的便宜。只要繳交25美元,就可以終身成為開發者。但是其他平台可就沒這麼友善了。

App Store的個人開發者每年要繳交99美元,而Windows Store則是個人每年要繳交19元。這種以年計費的付費方式,真是讓我這種想要淺嚐即止的輕度開發者望之卻步。

微軟的學生方案

不過經友人介紹,我才發現微軟有對學生提供相當優惠的方案,計畫的名字叫做DreamSpark,學生身份申請完全免費。

根據aclicerp寫的介紹,我以學校信箱申請DreamSpark的帳號,然後就能夠取得一串免費的兌換代碼。再來進入到Windows Store Developer申請開發者帳號,申請時就可以用兌換代碼來取代原本需要付的5百多台幣年費。

2015-12-18_122841

現在我終於成功看到Windows Store Developer的開發畫面,雖然跟Google Play Developer Console有很多相似的功能,但是似乎沒有Google的好用?

總之今天就先研究到這邊,那天真的上架了再來跟大家說吧。

(more...)

如何在PhoneGap Build上建制可發佈的Android APK: 建立簽署檔案 / How to build releasable Android APK in PhoneGap: Create a keystore file

如何在PhoneGap Build上建制可發佈的Android APK: 建立簽署檔案 / How to build releasable Android APK in PhoneGap: Create a keystore file

image

在「從網頁開發到Android APP行動應用程式開發」演講中,我講到如何用PhoneGap Build開發可以發佈到Google Play的APP的內容。由於演講時間限制的關係,當天我沒有細講到這裡。這一篇則是介紹如何建制可發佈的APP的做法。


有簽署的APK跟簽署檔案 / Signed APK and keystore

用PhoneGap Build製作可以安裝在Android上的應用程式套件檔案:APK,是一件很簡單的事情。但這樣只能作出偵錯用的APK (debug version),而不是發佈版本的APK (release version),只有可發佈版本的APK才能上架到Google Play

要讓APK從偵錯版本變成發佈版本,也就是讓它變成有簽署的APK,則必須加入簽署檔案(keystore)。這個簽署檔案可以在自己的電腦上產生,只需要安裝JDK環境即可。

以下內容我分成二個階段來介紹:先在本機段製作簽署檔案,然後再到PhoneGap Build中上傳簽署檔案並解密。


Phase 1. 製作簽署檔案 / Create keystore

1-1. 下載與安裝JDK / Download and install JDK

要製作簽署檔案必須要有JDK的環境。Java Development Kit下載位置是http://www.java.com/en/download/index.jsp 。至於安裝與配置方式就跟一般的Java安裝一樣,可以參考這篇「JDK 在 MS-Winsdows 的安裝、設定」來進行設定。

1-2. 下載並執行keytool_generator.bat  / Download and excute keytool_generator.bat

簽署檔案的製作工具是keytool,詳細做法可以看「[教學]簽署應用程式 sign APK 發佈 Android App」這篇,但我覺得這樣的程序太過繁雜,所以把做法包裝成成一個bat檔案以方便執行:

1-3. 輸入專案名稱 / Alias name

image

開啟keytool_generator.bat之後,會跳出命令提示資源。請輸入您的專案名稱(alias name),例如「phonegap_build_camera」,然後按下enter鍵。

1-4. 輸入簽署檔案的密碼 / Password of keystore

image

接著要輸入兩次簽署檔案的密碼。

1-5. 輸入其他資訊 / Contact information

image

全部都可以直接按enter略過,但是最後的「Is CN=…[no]: 」的問題則要輸入「Yes」確認。

1-6. 輸入金鑰的密碼 / Password of key

image

剛剛是設定簽署檔案的密碼,現在則要設定金鑰的密碼。這時候請直接按enter鍵即可設定等同於簽署檔案的密碼。

結果的簽署檔案 / Result

image

最後就可以看到keytool_generator.bat旁邊多了一個簽署檔案,副檔名為「keystore」,例如「phonegap_build_camera.keystore」。


Phase 2. PhoneGap Build使用簽署檔案 / Use keystore in PhoneGap

2-1. 進入PhoneGap的Edit account / Enter edit account page

圖片1

接著你要在Adobe PhoneGap Build註冊一個免費帳號,然後登入之後到Edit account頁面。網址是:https://build.phonegap.com/people/edit

2-2. 上傳簽署檔案 / Upload keystore

image

接著在Android底下點選「add a key」按鈕,在title跟Alias的地方都輸入剛剛輸入的專案名稱(Alias name),例如「phonegap_build_camera」,然後選擇簽署檔案(keystore),按下「submit key」上傳。

2-3. 解鎖簽署檔案 / Unlock key

image

簽署檔案預訂是鎖起來的,要使用簽署檔案之前必須先解鎖。注意到該簽署檔案右邊有個黃色的鎖,點下去之後輸入剛剛設定的簽署檔案密碼,按下「submit key」解鎖。

image

這是已經解鎖的樣子。

2-4. 建置APK時設定簽署檔案 / Select key to build apk

image

在使用PhoneGap Build建制APK的時候,可以從「No key selected」下拉式選單中選擇剛剛上傳的簽署檔案。選擇之後apk會自動重新建置(Rebuild)。

image

有選擇簽署檔案的話,才能夠建制發佈版本的APK。你可以點選「apk」下載按鈕下載apk,然後就可以到Google play Developer Console上架了。

(more...)

中華電信學院微課程演講:「從網頁開發到Android APP行動應用程式開發」 / Speech at CHT School: “From Web to APP: Developing Android APP”

中華電信學院微課程演講:「從網頁開發到Android APP行動應用程式開發」 / Speech at CHT School: “From Web to APP: Developing Android APP”

image

這個月受邀到中華電信學院演講一門微課程「從網頁開發到Android APP行動應用程式開發」。這是給有HTML5基礎的前端網頁設計師開發Android APP的教學,講述AppsGeyserPhoneGap (Apache Cordova)的開發方法。


課程簡介 / Introduction

本次微課程將介紹如何從前端網頁開發技術進入到行動應用程式(APP)開發的領域,特別適合具備前端網頁開發能力的工程師來聆聽。演講內容將概述各種行動應用程式開發的技術,再聚焦到以網頁技術來開發行動應用程式的兩種方法:AppsGeyser 與 PhoneGap。只要會製作行動版網頁,聽完這個演講,您就能夠製作可以上架的行動應用程式!

大綱 / Outline

  • 前言:我是前端網頁設計師
  • 概論:要如何製作行動應用程式APP?
  • 樣板型APP開發:AppsGeyser教學
  • 網頁型APP開發:PhoneGap簡介
  • 實作:PhoneGap開發

投影片 / Slide

投影片下載:Google DriveOneDriveBox.netSlideShare

備註:由於當天演講時間太短,所以投影片有所刪減,這一份則是完整的版本。


演講的重點 / Points of this speech

這次的演講跟以往大家講述APP開發的內容相比,有幾個比較值得一提的地方。

關於APP開發的分類 / About APP development classification

以往大家對APP開發方法的分類只有三種:「原生型APP」、「網頁型APP」、「混合型APP」。但其實這是從PhoneGap的觀點來看APP開發方式,並不能夠含括所有的APP開發方法。

imageimage

Wikipedia的Mobile Application development給我們一個比較完整的分類:前端型、後端型以及系統型。而前述的三種分類則是隸屬於前端型開發中。而我又進一步將前端型開發方式分類成四種開發方法:

  1. 原生型APP:以該平臺開發方式開發,例如Android用Java搭配Android Studio開發。
  2. 網頁型APP:以製作網頁的思維建立APP,例如PhoneGap
  3. 其他型APP:以獨特的程式語言與IDE來進行開發,強調跨平臺或能夠支援複雜應用的開發方式。我將NativeScript歸類於其他型APP而不是網頁型APP,儘管它使用的是JavaScript,但建制的思維並不是寫網頁,而是一種獨立的開發方式。
  4. 樣板型APP:強調超簡單工具就能製作APP,像是APP Inventor。但是限制也很多。

我試著用這個分類來讓學員瞭解自己適合的開發方式,讓大家知道原來除了原生型開發方法之外,還有很多其他的途徑可以開發APP。

以PhoneGap Build的封裝方式 / Create APP by PhoneGap Build

image

市面上已經有很多書籍在講PhoneGap開發了,那我講這個PhoneGap開發豈不是再次老調重彈?實際上我這次講得內容並不是單純的PhoneGap開發,而是使用Adobe PhoneGap Build來封裝APP。

如果你仔細比較一下PhoneGap的開發方式,會發現他要做的前置作業就跟開發原生型APP一樣複雜。實際上也是如此,因為PhoneGap就是基於原生型APP之上在添加的功能。如果要開發Android的APP,就要先佈置Android的開發環境;如果要開發iOS (iPhone或iPad)的APP,就要先佈置iOS的開發環境。教過MIT APP Inventor之後,我覺得這種要花很多時間才能進行開發的方式並不利於教學。

而這個Adobe PhoneGap Build則是一種雲端服務的開發環境。我們只要把PhoneGap專案準備好、上傳,就能夠封裝成各種平臺的APP。這大幅度地降低了開發環境的配置需求,只要瀏覽器、能夠撰寫HTML的工具(像是ATOM),我們就能夠開始開發了。

然而,PhoneGap專案跟上傳到PhoneGap Build的專案內容其實有很多的差異,但是卻很少人在介紹如何製作PhoneGap Build的專案。尤其是加入簽署檔案(.keystore)讓APP可以上架的這些細節更是很少人提及,這也是我這份演講比較獨特的地方。

行動網頁框架的佈景主題 / Mobile web framework’s theme

image

這篇演講介紹了jQuery MobileDojo MobileSencha Touch這三種行動網頁框架。但我想要強調的是「佈景主題」(theme)的問題,也就是如何能在該平臺上呈現該平臺的使用介面的能力。我讚賞Sencha Touch對於佈景主題的自動偵測與切換,在Android上他是Holo Dark的風格,在iOS上則能夠維持iOS的風格。

這種能夠相應於該系統而自動切換佈景主題的功能,對於使用者體驗(User Experience, UX)來說至關重要。這表示使用者可以在自己的系統上操作熟悉的UI,而不是APP特立獨行的佈景主題。

Dojo Mobile跟Sencha Touch都有不同的主題可以套用。雖然jQuery Mobile也可以找到一些第三方主題使用,但比較麻煩。至於其他的BootstrapSemantic UIIonicAngular Mobile等行動網頁框架就更是如此。

不過實際開發時,應該還要考慮到這些框架跟後端資料庫做交換的方式、是否能夠整合其他JavaScript函式庫、或是語法是否容易理解等問題才是。也許隨著經驗越多,這個看法也會隨之改變吧。


結論:更專業的教學內容 / Conclusion: An advanced speech

在準備這個演講的同時,我也一併在進行MIT APP Inventor的家教。我本來以為這兩件事情可以合併在一起做,但仔細想想之後還是放棄這個念頭。APP Inventor是給不會寫程式的人來學習的,做完的成果難以到實際應用的層次。這次的演講是給擁有網頁基礎的人來聽的,主要要講網頁技術跟APP之間的關聯。所以最後我是分開來做這兩件事情。

image

這個微課程只是一個先導性的簡介,之後會在安排一整天的工作坊,讓學員能夠一步一步地製作行動版網頁、以PhoneGap Build封裝,然後到Google Play上架。

儘管這次的教學跟我的專業有很密切的關係,而學員的程度也都很高,講的內容也可以深入不少。但我自己也擔心起實務經驗上是否有所不足,畢竟我跟專門開發APP的工程師相比,還是有很大的差距(這就是學界與業界的差別啦)。雖然是這樣說,懂得如何做一個非常複雜APP的知識,跟如何讓學員瞭解製作APP的教學方法,這兩件事情仍然是不太一樣。

接下來要努力準備工作坊的內容,加油!

(more...)

「布丁布丁吃什麼?」也有Android APP囉! / The Android APP Version of “Pulipuli Blog”

「布丁布丁吃什麼?」也有Android APP囉! / The Android APP Version of “Pulipuli Blog”

image

布丁的blog「布丁布丁吃什麼?」已經登上了Google Play,在此我也聊一下最近自己對於這個blog的一些感想。

The Android APP of my blog "Pulipuli Blog" had been upload to Google Play. Following is my thoughts about this APP and my blog.


Google Play下載「布丁布丁吃什麼?」 / Download APP From Google Play

31 - 2

這個APP就是前幾天我用AppsGeyser製作的結果。製作這個APP其實也沒花很多功夫,也就是把Blogger的行動版網址輸入到AppsGeyser,就能夠下載一個這樣的APP。不過比起用AppsGeyser製作APP這種懶人的作法,設計圖示反而更令我困擾啊。之後也得花點時間來研究如何設計好的圖示囉

總而言之,現在你用Android手機也能夠閱讀「布丁布丁吃什麼?」囉。這還真是自我行銷的一種手段啊。

不過比起推廣「布丁布丁吃什麼?」這件事情,我更把它當作是一個玩具在看待。也許改天有時間了,我也許會拿起PhoneGap與jQueryMobile自己手工製作一個APP,把「布丁布丁吃什麼?」APP加上自己喜歡的功能喔。到時候我也會寫blog跟大家分享這段經驗吧。

對於APP的反思 / My Thoughts of APP

當兵的時候,有一位學長在跟我講他堅持買iPhone的理由:

因為iPhone上有個時尚網站的APP,那是我時常關注的網站,所以我想買iPhone。

我對此感到困惑已久,如果只是想要獲取某個網站的資訊,你為什麼不要用RSS呢?先不論很多人並不知道RSS這個工具的這點,許多資訊提供者(包括圖書館與建置數位典藏的那些人)都抱著「你要資料,請來我這裡」的高傲想法,逼迫使用者必須要用他們設計的介面、用他們建立的瀏覽方式,讀者才能獲得他們的資料。

這種APP也是如此。以「布丁布丁吃什麼?」來說,這個APP也沒有提供什麼功能,只是從最新文章開始往下閱讀、瀏覽而已,連搜尋功能都沒有提供。但如果是某些情況下,大家要取得「布丁布丁吃什麼?」的資料,那就得遵循這個APP的遊戲規則才行。

老實說,我不是很欣賞這種作法。更明白地說,我其實不建議大家去下載目前的「布丁布丁吃什麼?」APP。你可以直接從網頁瀏覽器來開啟「http://pulipuli.blogspot.tw」,也可以用RSS來追蹤「布丁布丁吃什麼?」的最新動態。不過我更推薦的是,用Google搜尋吧。

用RSS來把握「布丁布丁吃什麼?」的最新動態 / Using RSS To Follow Pulipuli Blog

要追蹤「布丁布丁吃什麼?」的最新資訊,我建議用你可以用RSS:

要訂閱這個RSS,你需要選擇一個RSS的工具。在Google閱讀器關閉的現在,你也有其他方案可以選擇:

要在Android上閱讀RSS,除了用Feedly的Android版本之外,我也很推薦好用的gReader:

用社群網站來追蹤「布丁布丁吃什麼?」的最新動態 / Follow “Pulipuli Blog” In Social Website

雖然我很喜歡RSS,不過這年頭似乎趨勢是封殺公開的RSS標準,轉向封閉型的社交網站。為了迎合這股風潮,「布丁布丁吃什麼?」在兩大社交網站上也有自己的粉絲團:

image

赫然發現我忘記用IFTTT把Blogger的訊息轉到Facebook粉絲團中,所以粉絲團資料是空的orz

image

我記得我好像設定了HootSuite,所以Google+專頁上充滿了我的Blog文章以及Plurk發言

用Google搜尋來找「布丁布丁吃什麼?」的文章吧 / Don’t Browse, Search It!

image

嗯,常常看我文章的讀者應該知道,比起追蹤「布丁布丁吃什麼?」的最新動態,我還比較推薦讀者直接用Google等搜尋引擎搜尋你要的資料就好。而且請不要用Blogger提供的搜尋功能,那功能找的資料比Google搜尋還要差得許多。

我寫blog的方式並不是有堅持特定主題,或是以某種組織架構連貫而成。除了少數幾篇我會把文章拆成幾個部分來撰寫之外,大多數文章我都是希望能夠獨立呈現。這篇文章自己就應該是一個完整的論述,而其他相關資訊則以超連結呈現。

關心作者的近況 / Follow Pudding’s Status

如果想要了解國內圖書資訊學的近況,那時常關心中華民國圖書館學會的電子報,那我覺得很合理。不過因為「布丁布丁吃什麼?」是一個個人興趣而撰寫的網誌,除了我自己之外,我想不到有什麼理由需要會讓人需要追蹤最新動態就是。

如果要關心我個人的話,那我會比較建議你看我的Plurk比較直接喔。

image


結語:「能寫blog真是太好了呢」 / Conclusion: “It’s really great that you write blog.”

這顆布丁是在無聊的世界中找尋樂趣的一種不能吃的食物。喜歡動漫畫、喜歡遊戲、喜歡程式、喜歡跟世間脫節的生活步調中,撰寫blog──布丁布丁吃什麼? http://pulipuli.blogspot.tw/

最近幾天,我把這學期應該要分享的資料拿出來分享。這些文章大多都已經是過去的事件,但是他們有分享的價值,所以我會希望能夠在「布丁布丁吃什麼?」這個blog中,分享這些微小、不成熟,但是可能會在哪裡對某些人有所幫助的知識。

因為撰寫「布丁布丁吃什麼?」的緣故,最近也是遇到許多預期之外的好事。更讓我深信,在這不起眼的blog中分享我的所學所得,這是有所價值的行為。

「布丁布丁吃什麼?」從2005年12月25日(居然是聖誕節)

也許哪一天我會無法繼續撰寫文章,也許哪一天我也會離開這個世界。不過至少,我在這個blog中留下了活著的痕跡。「布丁布丁吃什麼?」就是我想要改善這個世界的,小小貢獻。

(more...)

用AppsGeyser把網站轉換成Android APP / The Usage of AppsGeyser: From Website to Android APP

用AppsGeyser把網站轉換成Android APP / The Usage of AppsGeyser: From Website to Android APP

appsgeyser_log_beta

我使用AppsGeyser把「布丁布丁吃什麼?」做成APP,並製作一個簡單的投影片介紹如何操作,並記錄把網站做成APP的一些看法。

I used AppsGeyser to package my blog: "pulipuli.blogspot.tw" as a Android's APP. I share a slide about usage of AppsGeyser and my thoughts of WebApp.


從網站與APP / From Web Site to APP

很多人都想把他們的網站做成APP,但是其實很多網站只要遵守自適應網頁設計原則(Responsive Web Design),就能夠直接用手機的瀏覽器開啟。

Android的APP具備Webview的功能,能夠讓你在APP中開啟指定網址。而AppsGeyser則是提供了一個Android APP框架,讓你建立一個開啟指定網址的APP,並協助你上傳到Google Play

Blogger提供了27種行動版的網頁介面。行動版的網頁介面簡化了網頁排版,將連結按鈕加大,方便行動裝置使用者用手指點選。以「布丁布丁吃什麼?」來說,以下兩個網址各別呈現桌面版與行動版的樣貌:

桌面版網址會偵測瀏覽器的類型,在行動裝置上開啟桌面版網址則會自動轉到行動版的網頁去。這次我就是用「布丁布丁吃什麼?」的行動版網頁來製作APP。

AppsGeyser的操作 / Guide of Apps Geyser

很多人都在網頁上介紹過AppsGeyser。我為了方便跟大家分享而製作了投影片。

APP下載 / Download APP

chart

手機直接掃描這個QR Code,你就可以把我的APP下載到你的手機囉。


讓網頁看起來像是APP:WebApp / Make Website Like A APP: WebApp

用Blogger的行動介面可以快速產生一個適合在行動裝置上瀏覽的網頁介面。不過這還不太像一個APP。作為一個良好的APP,我們需要讓操作元件遵守作業系統的設計規範。至少也要做個像是可以按的按鈕之類的操作介面,才會讓使用者覺得這會是一個APP。這種網頁一般就稱之為WebApp

jquery mobile

現在很多網頁元件提供了類似APP的操作元件,例如jQuery Mobile就內建了上圖的選單與按鈕,iUI更是讓你的網站一整個就像是APP。你可以重新設計網頁版面,套用jQuery Mobile或iUI提供的框架(framework),然後你就可以在網頁瀏覽器中操作一個像是APP的網頁了。

如果用AppsGeyser把長得像APP的WebApp製作成真的APP,那就會像是真的在使用APP一樣。

用網頁語法製作APP:PhoneGap / Using HTML5 to Create a APP: PhoneGap

如果你覺得在APP中開啟網頁來操作一個長得像APP的WebApp感覺非常彆扭,或是你覺得AppsGeyser提供的介面與功能太過簡陋或是多餘(我其實對AppsGeyser強迫隱藏手機的通知列這點感到困擾),那何不試著用你原本的網頁程式碼來製作一個真正的APP呢?

phonegap

PhoneGap是一個用HTML、CSS與JavaScript來製作iOS、Android、Windows Phone等行動裝置的APP的免費工具。在這裡你不需要額外去學習Android的程式語言JAVA、也不用學習iOS的程式語言Object-C,而是用你原本就會的網頁寫作語言:HTML、CSS與JavaScript來製作APP。

基本上PhoneGap也跟AppsGesyer很像,他一樣是製作一個內建Webview的APP,讓你用APP開啟手機瀏覽器來顯示你用PhoneGap撰寫的網頁。不過PhoneGap還提供了許多用JavaScript呼叫的函式庫,讓你在網頁語法中使用手機內建的元件,還有相機、儲存裝置、定位系統等網頁之外的功能。

使用PhoneGap來開發APP,你可以讓你的WebApp不只長得像是APP,還能夠使用行動裝置上面的其他功能,讓它更像是一個APP。

最近看到我常用的IDE NetBeans也支援PhoneGap的開發,真讓我感到躍躍欲試啊。

網站就是APP: Firefox OS / HTML5 Website Is a APP: Firefox OS

上面的WebApp都是在APP中利用Webview內嵌一個瀏覽器以顯示一個長得像是APP的網頁。不論是用jQuery Mobile、iUI讓網頁長得像是APP,還是用PhoneGap讓網頁可以用手機的功能,他們都還不是一個APP。因為在Android上執行APP是要用Java撰寫,在iOS上執行APP是要用Object-C撰寫,要執行你寫的WebApp都還是得透過網頁瀏覽器。

FirefoxOS_Screenshot_Development_Build_2012-10-23

Mozilla抱持著開放自由的遠大志向,製作了Firefox OS。Firefox OS是一個真的是用HTML5(就是HTML、CSS、JavaScript等網頁技術)來撰寫APP的作業系統。我們撰寫Firefox OS的APP時不僅可以用HTML5的語法,還能用Firefox OS推廣成為網頁標準的Web APP。這下子不需要在PhoneGap裡面才能引用手機功能的函式庫,你可以在網頁裡面直接以JavaScript取用手機的功能了。


APP開發方式的選擇 / Selection of APP Development

原生語言 / Native Solution

許多人,特別是電腦訓練課程補習班,他們大多都認為要製作在手機上運作的APP,就必須要用手機原生的程式語言(Native Solution)來撰寫。你要在Android上開發APP,你就必須用JAVA來撰寫,並且上傳到Google Play;你要在iOS上開發APP,你就必須用Object-C來撰寫,並且上傳到App Store。

Unify 3D

f00e0d2be734d5ce3de73091586b1e8c

除了原生語言之外,你也可以利用Unify 3D這種程式開發工具來製作跨平台的APP。現在手機上許多遊戲,特別是在Android與iOS都能夠看到的APP,很多都是用Unify 3D來製作。根據網路上的評論,Unify 3D製作的效率並不會比原生語言還要差得太多。不過Unify 3D是付費軟體,製作並發佈APP的成本可不便宜喔。

HTML5

HTML5

那用自由免費又跨平台的HTML5來開發WebApp呢?就像我這一篇從AppGeyser,一路談jQuey Mobile、iUI、PhoneGap到Firefox OS。

但是其實很多人都對於WebApp抱持否定的看法,像是認為PhoneGap製作的APP在跨平台與執行效率上有著相當大的問題。而在iOS的App Store上,更是明言拒絕WebApp上架。在Android與iOS這種原生語言非HTML5的作業系統上,藉由網頁瀏覽器來執行HTML5的APP,當然執行效率與外觀都比不上原生語言來得好。這是可以預見的情景,我並不感到意外。儘管實際上我還沒有真正著手踏入製作APP,不過我對WebApp的期許卻是一直都比原生語言來得高。

原生語言與WebApp的爭論就像是早期程式語言的爭論,有人認為使用組合語言為專門機器開發效率比較高,高等語言還要經過編譯效率較差。但是現在普遍的認知卻是偏向以高等語言來進行開發,這是因為高等語言在學習與開發效率上比組合語言高上更多。

儘管HTML5的HTML、CSS與JavaScript實際上是比Java還要再高等一些的高等程式語言,但是門檻也不見得比較低,很多人在面對JavaScript的Event與CSS的Selector上都遇到很多困難。不過比起開發效率,我認為HTML5的價值在於他是一個開放、自由、普遍流行的程式語言。比起花很多時間寫一個APP,最後只能在單一平台上執行。我認為用HTML5撰寫一個可以在任意平台上執行的APP更有價值。

使用APP的自由 / The Freedom of APP

許多人都會受到手機與APP彼此之間的高耦合的限制。例如想要用某個APP而選擇了iOS,又因為選擇了iOS而無法使用Android上面的APP。這種大家已經習以為常的場景,背後卻是代表著壟斷、封閉的下場。

我認為裝置歸裝置、APP歸APP,這才是真正的自由。我們應該是要用開放自由的程式語言,來開發一個包括電腦、手機等任何平台都能夠共用的APP。就這點來看,Firefox OS相當具有前瞻性,也是我十分看好的未來方向。


結論:WebApp是網站行動化計畫的最佳方案 / Conclusion: WebApp is the Best Solution

最近很流行兩個名詞,一個叫做「雲端」,另一個叫做「APP」。儘管真正搞懂這兩個名詞的人並不多,但是我們也毫不免俗地提出了一個目標兼具開發「雲端化」與製作「APP」的計畫。

除非一開始就致力於APP的開發,不然大部分的計畫應該都會以製作網頁應用為起點。特別是圖書館常見的數位典藏、數位圖書館計畫,大家都是製作一個用瀏覽器就能閱覽的網站。以這個網站為基礎,將網站套上行動網頁的元件,就能夠製作出長得像是APP的網頁。接著再用PhoneGap打包網站本身,讓網站直接以APP的方式交到使用者手中。

這就能夠在成品中包含「雲端化」──資料保存在遠端伺服器,不論你用哪種裝置都能夠取用相同的資料,以及「APP」──用手機行動裝置也能夠取用計畫成果的內容。

這是我心中規劃的最佳方案,也是我目前亟欲推薦老師往這方向進行開發的目標──不過這跟我的論文沒有直接關係就是了。

最後,其實我剛剛把AppsGeyser製作的APP上傳到Google Play去了,還付了750元台幣註冊成為Google Play的開發者。不過目前還不能在Google Play中搜尋到我的APP「布丁布丁吃什麼?」。我猜想可能是因為發佈後得過幾個小時才能看到結果吧?那晚點可以在Google Play找到我的APP的時候,我再跟大家說囉。

(more...)