中華電信學院微課程演講：「從網頁開發到Android APP行動應用程式開發」 / Speech at CHT School: “From Web to APP: Developing Android APP”
這個月受邀到中華電信學院演講一門微課程「從網頁開發到Android APP行動應用程式開發」。這是給有HTML5基礎的前端網頁設計師開發Android APP的教學，講述AppsGeyser跟PhoneGap (Apache Cordova)的開發方法。
課程簡介 / Introduction
本次微課程將介紹如何從前端網頁開發技術進入到行動應用程式(APP)開發的領域，特別適合具備前端網頁開發能力的工程師來聆聽。演講內容將概述各種行動應用程式開發的技術，再聚焦到以網頁技術來開發行動應用程式的兩種方法：AppsGeyser 與 PhoneGap。只要會製作行動版網頁，聽完這個演講，您就能夠製作可以上架的行動應用程式！
大綱 / Outline
- 前言：我是前端網頁設計師
- 概論：要如何製作行動應用程式APP？
- 樣板型APP開發：AppsGeyser教學
- 網頁型APP開發：PhoneGap簡介
- 實作：PhoneGap開發
投影片 / Slide
投影片下載：Google Drive、OneDrive、Box.net、SlideShare
備註：由於當天演講時間太短，所以投影片有所刪減，這一份則是完整的版本。
演講的重點 / Points of this speech
這次的演講跟以往大家講述APP開發的內容相比，有幾個比較值得一提的地方。
關於APP開發的分類 / About APP development classification
以往大家對APP開發方法的分類只有三種：「原生型APP」、「網頁型APP」、「混合型APP」。但其實這是從PhoneGap的觀點來看APP開發方式，並不能夠含括所有的APP開發方法。
Wikipedia的Mobile Application development給我們一個比較完整的分類：前端型、後端型以及系統型。而前述的三種分類則是隸屬於前端型開發中。而我又進一步將前端型開發方式分類成四種開發方法：
- 原生型APP：以該平臺開發方式開發，例如Android用Java搭配Android Studio開發。
- 網頁型APP：以製作網頁的思維建立APP，例如PhoneGap。
- 其他型APP：以獨特的程式語言與IDE來進行開發，強調跨平臺或能夠支援複雜應用的開發方式。我將NativeScript歸類於其他型APP而不是網頁型APP，儘管它使用的是JavaScript，但建制的思維並不是寫網頁，而是一種獨立的開發方式。
- 樣板型APP：強調超簡單工具就能製作APP，像是APP Inventor。但是限制也很多。
我試著用這個分類來讓學員瞭解自己適合的開發方式，讓大家知道原來除了原生型開發方法之外，還有很多其他的途徑可以開發APP。
以PhoneGap Build的封裝方式 / Create APP by PhoneGap Build
市面上已經有很多書籍在講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
這篇演講介紹了jQuery Mobile、Dojo Mobile跟Sencha Touch這三種行動網頁框架。但我想要強調的是「佈景主題」(theme)的問題，也就是如何能在該平臺上呈現該平臺的使用介面的能力。我讚賞Sencha Touch對於佈景主題的自動偵測與切換，在Android上他是Holo Dark的風格，在iOS上則能夠維持iOS的風格。
這種能夠相應於該系統而自動切換佈景主題的功能，對於使用者體驗(User Experience, UX)來說至關重要。這表示使用者可以在自己的系統上操作熟悉的UI，而不是APP特立獨行的佈景主題。
Dojo Mobile跟Sencha Touch都有不同的主題可以套用。雖然jQuery Mobile也可以找到一些第三方主題使用，但比較麻煩。至於其他的Bootstrap、Semantic UI、Ionic、Angular Mobile等行動網頁框架就更是如此。
不過實際開發時，應該還要考慮到這些框架跟後端資料庫做交換的方式、是否能夠整合其他JavaScript函式庫、或是語法是否容易理解等問題才是。也許隨著經驗越多，這個看法也會隨之改變吧。
結論：更專業的教學內容 / Conclusion: An advanced speech
在準備這個演講的同時，我也一併在進行MIT APP Inventor的家教。我本來以為這兩件事情可以合併在一起做，但仔細想想之後還是放棄這個念頭。APP Inventor是給不會寫程式的人來學習的，做完的成果難以到實際應用的層次。這次的演講是給擁有網頁基礎的人來聽的，主要要講網頁技術跟APP之間的關聯。所以最後我是分開來做這兩件事情。
這個微課程只是一個先導性的簡介，之後會在安排一整天的工作坊，讓學員能夠一步一步地製作行動版網頁、以PhoneGap Build封裝，然後到Google Play上架。
儘管這次的教學跟我的專業有很密切的關係，而學員的程度也都很高，講的內容也可以深入不少。但我自己也擔心起實務經驗上是否有所不足，畢竟我跟專門開發APP的工程師相比，還是有很大的差距(這就是學界與業界的差別啦)。雖然是這樣說，懂得如何做一個非常複雜APP的知識，跟如何讓學員瞭解製作APP的教學方法，這兩件事情仍然是不太一樣。
接下來要努力準備工作坊的內容，加油！
