專刊內文

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

瀏覽次數 : 1054



RWD APP首航

RWD APP首航

訊光科技/蘇文瑞

 

        目前開發APP的方式,大致分為原生型(Native App)、混和型(Hybrid App)、網頁型(Web App)三種方式。這三種開發方式都有眾多的擁護者。

 

        EPP RWD APP採用的是混合型開發方式,是以html+css+javascript技術開發使用者操作介面,透過Cordova將介面檔案建置成APKIPA,在AndroidiOS行動裝置系統上操作使用。使用混合型(Hybrid App)開發方式,主要是因為容易開發與低成本,同樣也可以上架或發行AppGoogle PlayApp Store。此外若是有功能不足之處,還可以透過Cordova上千個plugin,像Native APP一樣做到取用裝置資源與設備訊息等功能。

 

什麼是RWD

        RWD的全文為Responsive Web Design,中文翻譯為響應式網頁設計,是一種近年流行的網頁設計技術。響應(Responsive)的意思,是指網頁會針對裝置的螢幕尺寸進行自動響應調整。而這種設計的方式,開始於2010年由Ethan Marcotte 發明的術語 Responsive Web Design (RWD)

 

        這種設計方式,可以讓網站在不同尺寸的裝置瀏覽的情況下,自動調整螢幕版面呈現。同時減少縮放、平移和捲動。2012年後被公認為是日後網頁設計開發技術的趨勢。而能達成這樣的設計,主要原因是RWD能自動針對不同尺寸螢幕斷點(breakpoints),例如在大螢幕橫向呈現的圖片,在小螢幕則自動斷行,以垂直方式呈現,或是預設隱藏並以動態方式顯示。

 

EEP APP採用的RWD框架

        坊間流行的RWD框架有很多,除了Bootstrap,還有uikitYahoo Pure及老字號的960.gs,都是屬於RWD的框架。而Bootstrap算是最多人知曉與使用的RWD框架。因此,訊光的RWD APP模組,是使用目前看來最為成熟的Bootstrap框架。除了採用此框架的開發人員最多外,它也有較完善的線上文件與社群討論。

 

Bootstrap介紹

        Bootstrap原名Twitter Blueprint,由TwitterMark OttoJacob Thornton編寫,是一組用於網站和網路應用程式開發的開源前端框架,包括HTMLCSSJavaScript的框架,提供按鈕、導航、字體、排版、表單及其他各種元件及JavaScript擴充套件,目的是希望不同螢幕尺寸上的網頁和Web應用的開發更加容易。由於Bootstrap是基於jQuery的框架,因此bootstrap所有的頁面都需要加上 <script src=jquery.js>標籤,因此Bootstrap也支援jQuery的插件。

 

EEP RWD APP開發步驟

        EEP RWD APP的開發步驟如下圖所示:

(EEP RWD APP開發步驟)

 

EEP RWD APP網頁部分的開發方式

        繼承EEP一貫的表單開發方式,可以快速使用精靈產生出表單,除了使用JavaScript自動將json格式的資料綁定與畫面上呈現外,資料的CRUD處理、欄位預設值、資料檢核、安全控管等機制也一併完成。免去自行辛苦撰寫html tag,引用JavaScriptCSS的瑣碎步驟。

 

1.透過EEP精靈,選擇RWD Form

(透過EEP表單精靈,先選擇製作RWD Form)

 

2.挑選所需要的樣板,目前支援的樣板有單檔、主檔明細檔,還有查詢專用的樣板。然後挑選資料來源的Server Package,以這個例子我們要挑選的是客戶資料表,命名為rwdCUSTOMERS,最後選擇要顯示或編輯那些欄位。

 

3. 按下完成,即產生一個RWD的網頁畫面

 

4. 透過屬性編輯器,根據不同的欄位需求,我們設定不同的輸入與顯示組件來讓頁面產生變化,如下為調整後的RWD執行頁面。

  

        如果本來就是EEP的用戶,之前寫好的EEP Server Package專案,直接轉換成Visual Studio 2015專案後,可以直接當成EEP RWD APP的資料來源,不需要重新開發,如下圖,EEPServer Page支援多種不同的UI平台。

 

 

RWD網頁建置成APP

接著示範如何把寫好的RWD網頁建置成一個APP在手機裡執行。

 

1.透過EEPExport To Cordova工具,將網頁轉換到Cordova專案目錄中。

 

2.挑選要轉換到Cordova專案的網頁檔案,我們選擇上一個例子的JQWebClient底下的rwdCUSTOMERS(可以選多個頁面一起建置)

 

3.接下來就要正式建置APP了,以android建置為例,按下建置按鈕,系統會自動下載必要檔案,並建置.apk檔案。

 

4.由於建置的.apk,並未在Google Play上架,因此安裝到行動裝置前必須先勾選【允許不明的來源】,才能成功安裝到行動裝置。

      

 

5.接著我們就來執行這個.apk,如下圖。

(手機版的登入頁面與打開客戶管理的頁面)

 

(手機版的客戶管理-更改頁面)

 

6. 上面的畫面是針對手機的,如果是平板的話,你就會看到不一樣的畫面,如下:

(平板的登入頁面)

 

(平板的客戶管理頁面)

 

(平板的客戶編輯頁面)

 

 

整合流程簽核

        目前EPP RWD APP模組,已經整合EEPWF工作流功能進來了,在APP中可以呈送、查詢、檢視流程表單、審核流程等操作。通常是讓PCWeb來申請單據,可以無縫在行動裝置上進行簽核,加快企業簽核行政效率。而使用RWD表單的優點,就是只需要一次開發,就可以在PC的瀏覽器上與行動裝置上呈現簽核所需資訊。

(可支援行動裝置起單)

 

(使用PCPAD的流程簽核畫面)

 

(手機端的流程簽核畫面)

 

結論

        現在網頁開發技術的趨勢,是逐漸轉向前端開發(瀏覽器端執行JavaScript),因此不斷的誕生許多前端技術。而APP開發,除了文章開頭提到的三種方式外,Google也推出了Progressive Web App (PWA)漸進式網頁應用程式。

  

        企業的開發人員,好不容易才熟悉一種技術,又面臨其他新技術的誕生,舊技術的淘汰,因此採用新技術的投資報酬率很低。而EEP選擇的技術,都是最穩定發展與佔有率高的技術,就像EEP RWD APP,就是採用jQuery+Bootstrap+Cordova這樣的標準組合,讓企業在自行開發APP時,可以將導入成本降到最低。