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

拓展Android分享功能:分享建立行事曆事件、分享到導航、分享建立桌面捷徑 / Share in Android: Share to Event, to Navigation, to pin a Shortcut

拓展Android分享功能:分享建立行事曆事件、分享到導航、分享建立桌面捷徑 / Share in Android: Share to Event, to Navigation, to pin a Shortcut

%252111%255B3%255D.png

要說我覺得Android最好用的特色,那就是可以自由在各個APP之間傳遞資訊的「分享功能」(share)。你可以分享照片給Facebook APP去發佈、你可以分享網頁到Evernote保存,但奇怪的是,Android上最常見的行事曆活動(event)、地圖導航、以及建立桌面捷徑,卻都沒有分享功能可以用。所以這篇我就要來介紹我自己用PhoneGap建立的三個分享功能APP:分享建立行事曆活動 ShareToEvent分享開始導航 ShareToNavigation分享建立桌面捷徑 ShareToShortcut。以下就是介紹這三個APP的安裝與使用方法,最後跟大家聊聊我對與分享和捷徑的看法。

(more...)

網站負載測試器:Electron Web Speed Testing / Test Website Performance: Electron Web Speed Testing

網站負載測試器:Electron Web Speed Testing / Test Website Performance: Electron Web Speed Testing

簡報1

我們所開發的網站應用大多時候都是預設給多人同時上線使用,但是你要怎麼確認這個網站能夠容納多少人同時上線呢?網站負載壓力測試(web performance testing, web speed testing, load testing)就是模擬許多使用者同時上線存取網站內容,並記錄網站的反應時間以及超出負荷而當機的上限。

網站負載壓力測試工具中較為知名的跨平台工具是Apache JMeter,但它的設定較為複雜,操作門檻高。所以我用Electron另外開發了一個簡單版的網站負載測試器Electron Web Speed Test ,希望讓大家更容易測試自己網站的負載容量。

(more...)

用HTML5開發網頁APP、桌面APP、跟行動裝置APP:混合應用程式框架 / Hybird APP Framework for Web APP, Desktop APP and Mobile APP

用HTML5開發網頁APP、桌面APP、跟行動裝置APP:混合應用程式框架 / Hybird APP Framework for Web APP, Desktop APP and Mobile APP

image

HTML5 (JavaScript + CSS3)可以在網頁上跨平臺執行已經是眾所皆知的常理,但是要如何用HTML5來開發能在瀏覽器上執行、能夠在桌面作業系統上安裝、還能夠在行動裝置(手機、平板)上安裝的應用程式呢?這個OnsenUI+Vue.js+Electron+PhoneGap Build的「混合應用程式框架」就是我的答案。

因為這只是最近心血來潮整理出來的混合做法,架構上並不是很漂亮,我也沒有打算寫太多文件。但對於想要發揮HTML5極限的開發者來說,應該是個不錯的參考。


程式碼 / Source code

image

混合應用程式框架保存在GitHub中,任何人都可以自由下載、修改、發佈。

軟體展示 / Demo

在混合應用程式框架中,我們只要開發一個HTML5框架,就可讓它以在網頁瀏覽器、桌面端應用程式、行動端應用程式執行。你可以實際玩玩看,看看混合應用程式框架會是什麼樣子:

接下來我用以下幾張截圖跟照片來讓大家看看它在不同平臺上的樣子:

網頁瀏覽器截圖 / Run in Web Browser

image

這是在Chrome網頁瀏覽器上的畫面。

Windows桌面版應用程式截圖 / Run in Windows

2018-05-24_153932

這是在Windows桌面端執行的畫面。

Android手機應用程式截圖 / Run in Android Phone

Screenshot_20180524-164945

Screenshot_20180524-164949

這是在Android手機上執行的畫面。

Android平板應用程式截圖 / Run in Android Tablet

Screenshot_20180524-165216

Screenshot_20180524-165208

這個是在Android平板 (8吋)上執行的畫面。

除了一些元件的位置怪怪的之外,大致上畫面都能夠正常呈現,很不錯吧。

接下來就讓我們來看看混合應用程式框架怎麼做到這件事情的吧。


框架架構 / Framework architecture

image

我把「混合應用程式框架」的架構整理成上面四個層次:顯示畫面 (Display)、平臺轉接(Platform Transport)、裝置(Client Device)、作業系統(Client Operation System, OS)。其中藍色的部分是我們可以掌握的元件,而灰色的部分對應不同使用者會用的客戶端。以下說明顯示畫面跟平臺轉接的細節。

顯示畫面 / Display

2018-05-24_153932

這邊使用的是Onsen UI,一個成熟的HTML5顯示框架。而控制資料邏輯的MVVM架構使用的是Vue 2。

我已經在「政大借書籃」跟「Voc4Fun全民樂單字」使用Onsen UI框架,但那時候Onsen UI只有跟Angular.js整合。現在Onsen UI已經開發到第二版,而且可以跟jQuery、Vue 2整合。

站在一個想要追求快速開發的角度,Vue算是相當好上手的MVVM架構。而這裡我選擇的是不編譯的Vue架構,因此可以直接在瀏覽器上執行,不需要任何打包或封裝。

平臺轉接 / Platform Transport

混合應用程式框架基本上可以直接用網頁瀏覽器開啟,但如果要打包成不同裝置上可以安裝的應用程式(APP),我們需要藉助一些平臺轉接的框架。

轉接桌面端應用程式:Electron / Electron for Desktop Application

Electron_0.36.4_Icon

(圖片來源:維基百科)

為了產生可以在桌面端作業系統安裝的應用程式,我們使用的是GitHub開發的知名框架Electron。

Electron可以產生給Windows、Mac OS、Linux使用的應用程式。這邊我主要只用Windows,Electron會在Windows平臺中產生可執行檔案,我寫了AutoIT將設定包裹成exe檔案,讓使用者可以直接點選執行。未來也可以更進一步使用InnoSetup打包成安裝檔。

至於Linux跟Mac OS我則沒有測試過,Linux可以直接用Electron打包,但我沒試過能不能執行。至於Mac OS,則必須要在Mac環境下打包才能使用,因此我也沒有試過。

之前我已經在「試做Electron桌面應用程式:webapp-wrapper」整理了一個簡單的基礎,現在我把它整合到混合應用程式框架中,讓Electron更容易將HTML5打包成桌面端應用程式。

轉接行動端應用程式:PhoneGap Build / PhoneGap Build for Mobile Application

Phonegap-build-mobile-app-development-tool-300x245

(圖片來源:boston technology)

為了產生可以安裝在行動裝置上的應用程式,包括手機、平板,我們使用的是PhoneGap Build。

PhoneGap Build提供了將HTML5程式打包成Android、iOS、Windows Phone三種平臺APP的功能。不過因為建構iOS APP需要具備開發者身份(每年需繳交不少費用),而Windows Phone已經沒落,所以實際上我只有用PhoneGap Build打包成Android APK而已。

我以前就有在「PhoneGap網頁樣板:簡單建立網站APP」寫過使用PhoneGap Build來建構網站APP的做法,跟Electron一樣,我也把它整合到混合應用程式框架中,成為大框架下的一份子。
值得一提的是PhoneGap Build雖然採用的是Apache Cordova核心,但這個名稱卻是描述在Adobe提供的伺服器上打包APP的整個流程,而不是像是Cordova在本機端部署環境、打包應用程式的做法。


功能 / Features

在混合應用程式框架中,我整理了一些在開發中可能會用到的功能,這是為了未來開發做的準備。這些功能包括了作為一個應用程式(APP)所需要的排版(包括主畫面、上方的工具列、左方的滑動選單)、主畫面的換頁、通知對話視窗、開啟外部連結、儲存由JSON產生的試算表檔案ODS、MVVM資料綁定、國際化語系、以遊戲引擎運作。以下簡單說明這些功能。

1. 排版與換頁 / Layout and Pages Navigation

image

混合應用程式使用了行動裝置為主的APP排版,主要畫面分成3大部分:1. 主畫面、2. 工具列 (toolbar)、3. 滑動選單 (sliding menu)。主畫面顯示該頁的主要內容,工具列會一直固定在畫面上方,而左邊的滑動選單則是會隨著你的畫面寬度動態的顯示、隱藏,你也可以按下工具列的選單按鈕來顯示滑動選單。

受益於OnsenUI的Auto Style功能,功能元件在不同平臺上會有些微的不同。舉例來說,下圖是iOS中的工具列:

image

下圖則是Android中的工具列:

image

我把換頁的方法包裝在onsenui_helper中,JavaScript語法如下:

onsenui_helper.switch_page(about)
2. 通知對話視窗 / Notification dialog

image

混合應用程式框架的使用了OnsenUI的$ons.notification功能來實作對話視窗。

受益於OnsenUI的Auto Style功能,上圖iOS風格的對話視窗在Android底下會變成下圖這個樣子:

image

通知功能的JavaScript語法如下:

vm.$ons.notification.confirm({      message: i18n.t("Are you sure to visit About?"),      callback: function (_result) {          console.log(_result);      }

});
3. 開啟外部連結 / Open link with your default browser

image

點下一些非APP內的連結時,混合應用程式框架提供了一些方法來讓他使用你預設的瀏覽器開啟。這部分我用hybird_app_helper來處理不同平臺的做法,JavaScript語法如下:

hybird_app_helper.open_window('https://github.com/pulipulichen/HTML5-Hybird-APP-Framework')
4. 儲存由JSON產生的試算表檔案ODS

image

這邊使用了JS-XLSX套件來讓JSON物件轉換成ODS試算表格式。JS-XLSX的功能複雜,網路上大部分的教學都亂七八糟,最好的用法還是官方自己提供的上傳分析轉換下載範例。我整理了JSON轉換成ODS Base64編碼的做法,寫在xlsx-helper.js檔案中。

另外的問題是如何讓裝置下載,或是說儲存、分享檔案。在網頁上,我使用的是FileSaver.js。在桌面端,我使用了Electron的ipcMain跟ipcRenderer來交換資料,讓網頁介面跟背後的Electron能夠彼此溝通,交給Electron寫入檔案。雖然Electron端已經很複雜了,但比不上在行動端的麻煩。在PhoneGap Build中,我先用cordova-plugin-file將ODS檔案寫入到cache暫存資料夾,然後使用PhoneGap / Cordova Social Sharing plugin來分享檔案。

5. MVVM資料綁定

image

混合應用程式框架使用了Vue.js的MVVM框架讓資料與顯示雙向綁定。主畫面中的「Hello, world!」綁定的是JavaScript中的「main_page.data.message」。顯示的程式設定如下:

image

而這個「main_page.data.message」則是寫在main_page.js中,資料的程式設定如下:

image

只要修改「main_page.data.message」的值,顯示畫面也會跟著改變。這是Vue.js這種MVVC框架的基本應用,相信熟悉MVVC框架的開發者應該很容易理解。

6. 國際化語系 / Localization

image

混合應用程式框架使用了javascript-i18n-core來作為語系檔的框架。以工具列中間的標題為例,我們可以用這個JavaScript語法來取得索引名稱「TITLE」的翻譯設定如下:

{{ i18n.t("TITLE") }}

語系檔放在www/locale資料夾中,裡面可以設定各個語系與對應索引名稱。

7. 以遊戲引擎運作:Cocoon.js / Game engine demo: Cocoon.js

image

為了挑戰混合應用程式框架的極限,我試著加入了Cocoon.js遊戲引擎框架所開發的兩款展示遊戲:SpaceSimDemoSuper Mario Bros

大家可以看看混合應用程式框架在網路瀏覽器、桌面端、行動裝置上玩遊戲是什麼感覺,也許未來也可以取代OnsenUI,使用Cocoon.js開發遊戲呢?


小結 / In closing

混合應用程式框架只是我為了未來可能會開發真正的跨平臺應用程式而做的一個小小的準備。我怕我現在不整理,以後可能就會忘記,所以做到這邊就趕快記錄一下。

30485967745854535578

(圖片來源:幫趣)

這整篇並沒有什麼提供給開發者的文件,請有心要使用這個框架的開發者自行trace code,程式碼都在GitHub上,請自行研讀、fork或下載吧。

開發感想 / Thoughts

接著來聊聊一些開發過程的想法。

混合應用程式框架實際上是要寫UI顯示畫面邏輯、 Electron跟桌面端底層作業系統的溝通、PhoneGap Build跟手機端底層裝置溝通的龐大架構。雖然都是用JavaScript來寫,但是不同框架下面使用的API都完全不一樣。雖然號稱跨平臺,但是還是要為不同平臺下很多功夫,實際上並沒有真的這麼跨平臺。

現在有很多開發框架是更加的跨平臺,像是Unity,但畢竟這個門檻比較高,不能直接將網頁使用的技術帶過去使用。而且對快速開發來說也不見得是比較方便。

用網頁來寫UI還是可以讓開發者有很大的自由度,特別是現在CSS3發展成熟,許多特別的UI介面又漂亮又好用,還能作出驚人的特效。我想未來我還是會繼續使用網頁來開發任何應用吧。

速度問題 / Performance issues

在開發的過程中很多人會問的是速度問題,這是PhoneGap令許多開發者詬病的問題。這個速度問題其實細分起來有兩個層面。第一個是載入,PhoneGap在開啟程式的時候,需要用「document.addEventListener("deviceready",function () {});」來確保cordova核心套件有正常載入,因此不管硬體效能多好,通常載入時間還是需要0.5秒。

image

一般來說我們會使用splash載入畫面讓使用者不會覺得太過突兀,在混合應用程式框架中也會預設使用icon.png作為載入背景畫面。

另一個問題是畫面運作時的流暢度。在Ionic Framework vs React Native Comparison這個影片中,我們可以看到基於Ionic Framework包裝的應用程式運作效能非常的差,已經到了妨礙使用體驗的程度了。但這個問題通常是因為程式寫的不好,最常見的情況,是因為開發者在轉場動畫上使用連續改變物件位置參數來營造動畫感,這卻是相當不流暢的做法。

現在比較好的做法是採用較好的顯示畫面框架,像是Onsen UI。或是根據How to Make High Performance PhoneGap Apps來修正你的程式架構。不過光是混合應用程式框架現在的架構,在各個平臺運作起來就已經很流暢了,我想就一般的應用程式來說是已經足夠使用。

如果要到玩遊戲的話,雖然看起來是可以運作Cocoon.js這種遊戲框架,但是還是不知道它的流暢度極限到底在那裡。但因為我可能比較不會朝遊戲的方向開發,這部分就待有心人士來測試吧。

其他跨平臺框架 / Cross platform framework

比起原生應用,我仍然比較偏好可以跨平臺的框架。

儘管許多知名的框架號稱自己是跨平臺,但其實也都是限制於行動裝置的平臺或桌面端的平臺,並不是真的能夠橫跨網頁、桌面端與行動裝置端,這也是我做這個混合應用程式框架的動機。
大部分的跨平臺框架有許多門檻,像是React NativeNativeScript。當然,這些門檻在混合應用框架裡面也是難以避免。

第一個門檻是編譯。幾乎現在主流的跨平臺框架都需要先進行編譯,然後才能展示最後的成果。只要框架使用了作業系統上的原生UI,幾乎都需要編譯後才能使用。React Native提供了Hot Reloading減少重複編譯的問題,但是還是需要部屬相關的編譯環境。相較之下,混合應用程式框架藉助了Adobe PhoneGab Build來編譯行動端的應用程式,我們只要用Git或壓縮成zip上傳即可,部屬環境不需要煩惱。但是如果要用Electron編譯成桌面端應用程式,那還是要用npm來安裝Electron需要的環境。Electron編譯環境所需要的指令請看README說明

第二個門檻是API。雖然框架提供了跨平臺都能使用的UI API,像是特定的按鈕、特定的工具列寫法,但這個框架的API常常已經有別於傳統網頁的做法,並非一般網頁開發者所謂的HTML5,幾乎等於你要重學一個語言。而這語言使用的API並不能帶到其他平臺上,像是網頁或桌面端的Electron,因此不能說是真的跨平臺。儘管混合應用框架本身也用了OnsenUI跟Vue.js等框架,讓人需要重新學習這些框架的用法。不過至少OnsenUI上所寫的工具列是真的可以在網頁、桌面端跟行動端正常顯示,而不會被原生UI的限制所綁架。

Electron的限制 / Huge file from Electron

相較於行動裝置端有許多大紅大紫的知名跨平臺框架,桌面端的跨平臺框架倒是只有Electron比較知名。混合應用程式框架也是使用Electron來實作桌面端應用程式的跨平臺開發。

然而,Electron最大的問題,還是它編譯出來的檔案大小實在是太大了。在www中的主要程式其實只有16MB左右,但混合應用程式框架最後編譯出來的檔案大小居然來到136MB,壓縮成7z也還有35MB之多。網路上有許多人對Electron檔案大小感到疑惑,Expected app bundle size?  中zcbenz說就是這樣大小,沒辦法。我也覺得很無奈。

剛好今天看到了新的桌面端跨平臺框架出現:Vuido,這是用Vue.js撰寫桌面端應用程式的框架,可以使用桌面端原生的UI元件,而不是像我使用混合應用框架中實際上是寫一個網頁來模擬UI介面的做法。檔案大小似乎比Electron還要小,速度上也應該會比Electron還要快吧。不過我個人還是比較喜歡寫網頁,用網頁做UI介面,因此應該不會選擇這個方案,還是繼續使用Electron吧。


好啦,混合應用程式框架就聊到這邊了。

你有想過要開發跨平臺的應用程式嗎?以前你都是怎麼做的呢?除了像混合應用程式框架使用的OnsenUI + Vue.js + Electron + PhoneGap Build之外,你還知道什麼不錯的框架嗎?對混合應用程式框架什麼問題的話,歡迎你在下面的留言發問。如果你也覺得混合應用程式框架是個開發跨平臺應用程式不錯的起點,請幫我在AddThis分享工具按讚、將這篇分享到Facebook等社群媒體吧!感謝你的耐心閱讀,讓我們下一篇見。

(more...)

PhoneGap網頁樣板:簡單建立網站APP / PhoenGap Web Template: Wrap a Website as an APP

PhoneGap網頁樣板:簡單建立網站APP / PhoenGap Web Template: Wrap a Website as an APP

image

PhoneGap能夠讓人用HTML5網頁技術來建立一個APP,那如果我本來就有一個支援RWD的網站,例如改版後的「布丁布丁吃什麼?」,那能不能直接用PhoneGap把這個網站包裝成一個APP呢?可以的,我把整個架構設定整理成PhoneGap Web Template,並且保存到GitHub儲存庫中供人使用。這一篇將說明如何將它客製化成屬於你的APP,這樣就能夠讓使用者用APP開啟你的網站了。

(more...)

Voc4Fun 全民樂單字:單字學習行動應用程式 / Voc4Fun: A Mobile APP for Vocabulary Learning

Voc4Fun 全民樂單字:單字學習行動應用程式 / Voc4Fun: A Mobile APP for Vocabulary Learning

image

這是2016年年初我與學弟共同開發的單字學習行動應用程式,名為「Voc4Fun 全民樂單字」。這個應用程式包含了客戶端 voc4fun-client伺服器端 voc4fun-server,全部在GitHub儲存庫保存。該程式的客戶端是以Onsen UI 2開發,並可能夠直接使用Adobe PhoneGap Build來封裝成APP。而伺服器端則是我用RedBeanPHP開發的特製Log型資料庫,以詳細記錄各個行為歷程細節,再用view視圖功能做成普通的資料表。

這篇就為全民樂單字 Voc4Fun的功能做個介紹,記錄我做過的這個單字學習行動應用程式吧。

(more...)

行動應用程式「政大借書籃」介紹 / Introduce “NCCU Book Cart”

行動應用程式「政大借書籃」介紹 / Introduce “NCCU Book Cart”

image

為了試著開發PhoneGap的行動應用程式APP,我使用OnsenUI建構了一個簡單的APP:政大借書籃。這個APP的功能是為了取代在政大圖書館找書時,使用公用電腦旁邊的小紙條來抄書的困擾。政大借書籃可以用掃描條碼功能把政大圖書館公用目錄上面找到的書加入借書清單,然後就可以拿著手機去找書了。

(more...)

如何設定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...)

如何在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...)