專刊內文

當前位置:首頁>專刊分享>內文

瀏覽次數 : 1801



 

EEP2015 Cordova整合方案

訊光科技 / Andy Kao 

前言

APP時代的來臨,帶動了整體產業另一波的革命,APP不只是個人消費性應用或是娛樂用途而已,有越來越多的企業意識到APP對於企業的行動化有著深遠的影響,隨著智慧型手機的推陳出新,開始思考如何導入企業行動化APP方案,讓企業帶來更高的管理效率與即時性,凡舉工作流程簽核、EIP、交辦事項、文管系統、知識管理等都是目前企業導入APP應用最常見的需求。

EEP2015最新推出Cordova整合方案,就是可以把目前客戶在EEP2012中所開發的Web APP(以JQuery Mobile所開發),在完全不必修改的狀態下,透過Wizard轉換成Cordova所能編譯的HTML檔案,並提供Cordova專用的Infolight.js核心來配合呼叫Cordova中Native API的接口,讓Web App變成了Native App的方式來執行(嚴格來說應該是 Hybrid的App)。也就是說,原來要網站才可以打開的Web App網頁,透過Cordova的編譯,就可以打包成apk或ipa在手機裝置中打開,並且可以存取裝置中的特殊設備(如相機、地理位置、陀螺儀、聯絡人、發簡訊等等),來實現Native App的效果。


認識Cordova

Cordova,全名是Apache Cordova,它其實是大名鼎鼎的PhoneGap,2011年由Adobe所併購後正式命名"Cordova"。Cordova是一種HTML5平台,透過這個平台,開發者可以使用HTML、CSS及JavaScript來開發APP,並可以存取裝置中的特殊設備。因此,可以只撰寫一份應用程式,然後在多個主要的手機平台中執行,如iOS、Android、BlackBerry、Winodws Phone以及Symbian等。也可將其發佈到APP商店中上架,可以視同Native APP的應用。

Cordova的架構如下圖,所有的原生裝置(如手機或Pad)幾乎都有內建的WebView機制,就是可以在原生的裝置上瀏覽HTML的文件,利用這個WebView機制,就可以讓網頁顯示在APP的裝置上,當然這包括了JavaScript與CSS等文件,這樣的好處其實只是讓網頁放在裝置端,而不是以Http方式每次都下載浪費了頻寬。接著,如果要用到裝置的特殊資源,就會用JS去呼叫Native的API,就放在Plug-Ins中,內有各種不同的Plug-Ins組件,包括相機、加速器、指南針、聯絡人、本地文件、地理資訊、網路狀態、通知、儲存體等等,這些Plug-ins組件為了讓不同的裝置都可以使用,Cordova特別針對不同的裝置寫不同的Native呼叫方式,來達到寫一份Code可以編譯出不同的Native Code,並且各自發佈或上架,這也是Cordova最大的優點與特色。



VS2015支援Cordova專案

其實從VS2013的Update 2開始,微軟的Visual Studio就有開始對Cordova的先期支援,一直到近期VS2015發表,正式將Cordova整合進去VS產品線中(當然必須另外安裝Cordova組件),如下圖,為VS2015+Cordova的示意圖,在VS2015中,可以直接以HTML5/CSS/JavaScript甚至當紅的TypeScript來撰寫App頁面,最後只要在VS2015中選擇所要建置的平台(如下圖有Windows Phone,Andorid,iOS等)即可自動幫你編譯並打包成apk或ipa或xap等。為了讓你測試與debug方便,VS2015還提供專屬的Andorip模擬器或使用Apache的Ripple模擬器,讓你方便的進行測試與除錯工作。


使用Cordova的好處是

上面說過,如果是Web APP只能有一般的網頁存取功能,Cordova則提供了具有Native APP一樣的取用本地裝置資源的功能,當裝置安裝了Cordova的APP並執行應用程式後,就能夠直接取得手機訊息、地理資訊、搖晃、鏡頭、儲存文件的資料...等。

Cordova幫助了APP開發人員踏出開發的第一步,讓這些開發者可以維持大部分的工作習慣,如HTML與JavaScript及CSS方面,這些都是原來WEB開發者所熟習。目前所有原生的App開發都是要不同的團隊,使用不同的工具來開發,如iOS要使用Object-C或Swift,Android要使用java來開發等等,不同的環境有個別的差異,對於多數的中小企業的開發成本來說,確實是一個龐大的負擔。Cordova享受了Web App容易開發低成本的特性,又能實現Native本地存取資源功能,執行效率也不差,加上又可以讓APP上架發佈等優點,怎不能打動初入APP領域開發者的心呢?



EEP2015的Mobile架構


EEP2015沿用了早期EEP2006的N-Tier架構,以類似MVC的方式將後端的商業邏輯與前端使用者介面分開,就是因為後端的技術架構比較不會變動,前端的介面這幾年已經從Windows改變為Asp.net、再變為JQuery、然後是JQuery Mobile,到最新的Native App介面。因此,無論你用的是那一種使用者介面,後端的商業邏輯與資料存取永遠只有一份,而且完全不必任何的改變就可以滿足不同時代的UI需求。



上圖中最下方就是數據層(Database Layer),以ADO.Net最為核心技術,透過ADO.net存取各式資料庫;中間層則為應用層(Application Layer),就是數據的模型(Model),包含應用系統的商業邏輯、資料存取服務及遠端程式服務等;上面則為表示層(Presentation Layer),也就是視圖層(Viewer),簡單來說就是使用者的操作介面,因為操作介面有多種,EEP2015中提供了最常用的JQuery及JQuery Mobile還有Native App(以Cordova來編譯),當然也支援之前的Windows與Asp.net Web表單。


EEP2015 Mobile的特性

全新的EEP2015是基於VS2015之下所開發,針對Mobile App的功能簡單說明如下:

1. 3分鐘快速開發概念:EEP習慣以Wizard的方式來產生各式模組與表單,讓開發者可以快速產生所要的結果,對於初學者更可以達到快速學習的效果。
2. 基於VS2015 & Cordova:基於微軟Visual Studio 2015平台,並配合Cordova專案來產生相對Mobile App的頁面及呼叫Native的API接口。
3. 同時支援Web與Native App:只要在JQuery Mobile中設計一份網頁(含JS程式碼與CSS樣式表),即可在Web App及Cordova所產出的Native App中執行(以Hybrid的方式)。
4. 可以使用手機資源:透過Cordova來呼叫Native API,即可取用相機、GPS定位、電話、簡訊、加速器等裝置的資源,並可以在包括iOS、Android、BlackBerry、Winodws Phone以及Symbian等主流的手機平台上執行。
5. 類似MVC架構,前端商業邏輯與UI分離:只要編寫一份後端的商業模組與邏輯,即可以同時讓不同的平台的UI介面(如Windows/Web/JQuery/Mobile App等)共享與存取後端模組。
6. 支援Workflow引擎,方便企業單據簽核:後端可以配合EEP專屬的Workflow引擎,讓原來EEP所設計的各種不同平台表單都可以進行線上簽核的工作。
7. 支援Cloud開發模式,完成可下載至VS中編譯:可以配合EEPCloud在雲端上直接設計系統(無須安裝VS與EEP),設計完成後,可以將雲端開發好的系統下載到本地有VS及EEP的環境中完成編譯,並佈署到本地主機或私有雲中。
8. 開放原始程式,方便企業技轉:除了EEPNetServer上註冊與加密機制外,開放100%的原始碼供客戶進行除錯、繼承改寫、技術轉移等工作。


Native的新組件

由於JQuery Mobile中所開發的頁面功能是不能取用裝置資源的能力,所以在EEP2015的Mobile Module中,增加了以下的Native新組件,這些組件只能在實際的裝置中使用,但在Web App中可以被寫在同一個頁面中,不會發生錯誤(執行時系統會告知:Web App版不支援此功能):

1. Capture組件:提供DataForm的欄位可以直接拍照,並上傳到Server上的功能。
2. Scan組件:提供DataForm的欄位可以掃描QRCode或BarCode,直接讀入欄位內容。
3. CALL/SMS組件:提供DataGrid或DataForm中,可以定義某欄位內容作為撥號或發送訊息的對象,一般都是配合"手機號碼"這個欄位。
4. Push組件:提供推播的送出功能,如同MAIL組件,可以定義接收者(使用者帳號)與標題及內容,推播訊息給對方(一個或多個),接受者只要在線上就會收到訊息。
5. Contact組件:透過Contact可以取得手機上聯絡人的資料,讀取後可以自行定義要撥號、簡訊或同步資料處理。
6. GEO組件:提供GPS地理位置組件,可以讀取出GPS的經緯度資訊,或可以透過經緯度取得附近地標資訊。
7. NetState:提供偵測網路是否連線正常或是否使用Wifi網路等狀態,讓開發者可以更深入控制使用者的操作行為。


限制與未來

在Mobile App的技術上,我們使用了兩個關鍵技術,一個是JQuery Mobile,另一個是Cordova。前者的UI是有一些限制,在JQuery Mobile中我們受限了版面排版的自由度,多數都是由JQuery Mobile來決定排版風格,當然我們為了美觀與親和有做些干預與改寫,但也是有限,這樣會讓UI的開發無法完全如Native開發那樣自由。後者是因為Cordova使用的技術是HTML+CSS的方式,這種方式是讓網頁開發者可以零學習,完全沿用自己之前的習慣即可開發APP,相對於原生APP開發來說就好像當初WEB網頁與Windows畫面的差異一樣,WEB網頁是HTML瀏覽方式,Windows是座標型互動介面,當然Windows會有較高的互動性。

另一方面就是速度,我想這是最重要的,對於我們之前沒有開發Native經驗來說,完全是無法體會速度快慢,基於官方及Cordova擁護者說法是說沒有差距很大(Native原生開發還是會得到較高的效能),但筆者相信,已經會Native開發的開發者一定無法接受Web或Hybird的開發方式,因為他不願意走回頭路,也會認為效能一定會有差異;相較於APP的初學者來說,一個快速有效的入門開發又可以得到不錯的效能(一定比Web App效能更好),取得成本又低廉,應該是個不錯的投資。

智慧型手機是現在進行式,未來還會發展到什麼程度,即使專家也說不準,Cordova也不是一個新技術,相信市場上有不少業者早已採用了PhoneGap技術來開發App,對於我們用慣了Visual Studio的群組來說,或許VS的App方案來得有點晚,但總比沒有來得好。相信有很多企業或同業也苦無App的解決方案,畢竟從頭到尾要弄兩個Team去開發Native App真的是一個不小的投資,更別說市場上App的人才短缺問題。VS2015配合Cordova起了個頭,加上我們把現成的JQuery Mobile方案移轉過去(完全的繼承),短短的4個月就有了成果,也期待Cordova能有更多的Native組件可以應付越來越多元的創意與應用,來滿足現代使用者對於企業App的期待,有待大家共同一起努力。