:::

中華電信學院微課程演講:「從網頁開發到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的教學方法,這兩件事情仍然是不太一樣。

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

0 意見:

留言工具: