全新EEP2019智能開發

訊光科技/Menphis

 

前言

EEP產品迄今已經十餘年，一直以來採用同一種開發模式，也就是先製作系統規格文件，建立資料庫，並且透過EEP精靈產生出操作畫面。

 

 

(EEP Wizard 開發步驟)

 

如果是已經存在的現有系統，通常可以直接從設定EEP資料字典開始，快速產生表單。但如果是要從無到有開發一個全新的系統，前置作業要準備的工作就會比較繁瑣。因此我們思考，如何可以從第一步系統分析設計後，就直接完成表單產生，加快開發速度。

 

另外一個要滿足的需求，是目前所有的設計與開發，都要由具備IT背景的專業人員才能進行，如果能把部分簡單的表單，讓稍具程度的使用者在不懂任何程式語言與SQL的情況下來自行設計表單，並且自行預覽結果、進行調整後，再把需要加工的部份讓工程師來處理，這樣可以減輕開發人員的工作量。且由於使用者也有參與，因此也可減少使用者與開發人員對於表單畫面的期待落差。

 

iCoder運作方式

 

iCoder的運作方式如下圖所示，首先開發人員或是使用者先將系統分析與設計後的呈現介面，透過Word進行排版，並且定義好主檔、明細檔要呈現的標題文字。

 

接下來iCoder精靈，就會智能解析 Word裡面的標籤與結構，將其轉換到資料字典，並且產生實體資料表，最後則產生負責資料庫新增、修改、刪除、查詢功能的Server Package與前端的網頁。

 

 

 

(iCoder Wizard 開發步驟)

 

 

iCoder Wizard與EEP Wizard的差異

 

iCoder 精靈增加功能如下:

 

●       新版的資料字典:
與Wizard一樣都是靠EEP資料字典來運作，iCoder則完全100%依賴這個新的資料字典(SYS_COLDEF)來自動產生表單，所以資料字典增加了很多設定欄位。

●       智能讀取欄名:
可以從Word中讀取欄位定義。

●       RWD欄位排版:
iCoder可針對不同的尺寸螢幕來定義要顯示那些欄位(針對手機/平板/桌面等)。

●       自動建立資料表結構:
之前Wizard必須先建立Table Schema，但iCoder可以不必，隨著Word表格讀入自動建立表結構，當然也允許資料表已經存在的設計方式。

更困難的是維護工作，iCoder允許在Word中維護並改變規格後再二次讀入，系統會自動更改結構與重新產生程式碼，達到維護目的。

●       不依賴欄位名稱:
就是iCoder大都採用標題作為欄位名稱(虛擬化)，實體欄位名稱大都是自動命名，沒有甚麼意義，有意義大都是User所理解的欄位標題為主。

虛擬化的好處就是更改欄位名稱時不會掉資料(因為實體欄位名稱並沒有更改)，表單間關聯時，容易透過欄位標題來作為彼此的關聯關係。

另外對於沒有IT知識背景的使用者使用iCoder開發時 ，也不用煩惱什麼是欄位、要如何命名、選擇型別、決定長度、設定PK FK等細節，大幅降低使用門檻。

如果要指定欄位名稱，只要使用 :OrderID、:CustomerName 這樣的格式即可。

●       更多的編輯元件:
Wizard只有支援6種資料編輯元件，但iCoder的資料編輯元件卻高達近20種。

代號	元件意義
#K	Key
#KA	Key & Auto Increment
#KR	Key & Refval
#KC	Key & ComboBox
#KN	Key Name
#T	Textbox
#N	Number Box
#NT	Number Total
#D	Datebox
#DT	DateTime Box
#DE	年Datebox + 月Datebox + 日Datebox
#TB	Timebox
#A	(Text)Area
#R	RefName
#RV	RefVal
#C	Combox
#O	Radio Options
#CK	Check Box
#S	Switch
#E	Element(MultipleTextbox)
#F	FileUpload
#P	Picture & FileUpload
#G	Group
#B	Block (Tabs)

欄位參數	說明
:	自訂欄位名稱，不採用自動產生欄位時使用
*	必填
()	欄位提示 hint
/	Word內的備註說明

●       自動辨別必填欄位:
 iCoder可以透過Word欄位標題的第一個字元是否為'*'來自動識別該欄位是否必填。

●       智能關連選單:
Wizard的關聯選單通常每次都要選擇，iCoder卻可以透過欄位標題自動分析判斷得知對應哪個關聯資料表。

例如訂單主檔與訂單明細都有訂單編號同名欄位，iCoder Wizard會自動關聯這兩個欄位。

 

●       智能欄位對應:
iCoder產生的Refval關聯選單中，還會自動分析主表欄位與關聯表欄位是否有一樣(以標題名稱來比對)，標題名稱一樣的欄位通通會被放入ColumnMatch中，就是將相同的關聯欄位內容值自動帶入。

●       多欄多列:
iCoder提供了兩個元件，一個是一個欄位內有多個標題與多個欄位，透過#E可將一個欄位拆成多欄來讓USER輸入；另一個為多列的表格，透過#J可以將一個欄位拆成多列與多行來讓User輸入，並存在到一個欄位中(以JSON格式儲存)，多列的目的是可以取代固定筆數的Detail明細表。

●       RWD欄位排版:
iCoder可針對不同的尺寸螢幕來定義要顯示哪些欄位(針對手機/平板/桌面等)。

●       欄位關係公式定義:
 iCoder為了讓企業User可以自訂欄位公式，提供了簡易的計算式來定義欄位彼此的關係(包括明細表加總到主表欄位)，讓一般的常用表格計算功能可以免去編寫程式。

●       自動編號定義:
iCoder可以直接在主表與明細表定義各種不同的自動編號功能，可以是最簡單的自增值，或以年/月/日為流水號的自動編號功能等。

●       使用提示PlaceHolder:
可以將Word表格中用來提醒填表者的提示訊息自動讀入到各欄位的PlaceHoder(輸入的提醒說明)中。

 

 

實作1，報價單表單輸入

 

我們以實作一張有表頭、表身的報價單為例

 

1. 首先，以Word設計報價單顯示的欄位與介面，欄位只需要定義顯示名稱即可，不需要設計實際資料表欄位名稱。如果要指定欄位名稱，只要使用 :OrderID、:CustomerName 這樣的格式即可。

 

若檔名命名為【報價單.docx】，接下來建立的實體資料表也會命名為【報價單】。

 

此報價單中用到了 #KA 自增值KEY、#RV 開窗選單、#D 日期、#A 多行文字區塊、# 文字方塊、#N 數字輸入、#KR 開窗KEY值、#NT 加總等欄位類型。

 

(報價單.docx 設計畫面)

 

 

2. 開啟iCoder Wizard，選擇網站專案、程式檔案儲存路徑、資料庫，文件選擇步驟1製作的報價單.docx。

(iCoder Wizard 操作畫面)

 

3. iCoder Wizard解析出報價單.docx內的欄位設定與主檔、明細檔結構，由於我們沒有在Word中指定具體欄位名稱，因此將自動以流水號F001、F002方式預先產生實際欄位名稱

 

(解析出報價單.docx內的表頭主檔欄位)

 

(解析出報價單.docx 內的表身明細檔欄位)

 

 

4. 由於系統已經有客戶資料表，因此報價單的客戶編號欄位，會以開窗選單方式自動對應到客戶資料表。如果需要調整對應資料表，也可以在此階段修改。

(設定客戶編號使用開窗選單，對應資料來源為客戶資料表)

 

5. 預設值若為EEP系統變數(例如_TODAY)，不再需要以人工方式輸入，而是可以使用下拉選單選擇。

 

(提供系統參數列表選擇功能)

 

6. 欄位長度，會依照報價單.doc內的版面設計，自動判斷實際資料表欄位的合理長度，不須人工每個欄位設定。

 

(報價單.doc 設計電話為1/4文件寬，地址為整個文件寬)

 

(依照報價單.doc 內的電話、地址寬度，自動定義欄位寬度)

 

7. 其他設定，可設計表單開啟、編輯、列印模式，並可定義運算欄位的處理邏輯。

 

(其他設定畫面)

 

 

8. 最後，可以選擇要在資料庫內建立報價單實體資料表，或是不建立資料表，直接使用現有報價單資料表，產生報價單的Server Package與表單。

 

(建立資料表或是直接產生程式功能)

 

(完成創建資料表)

 

 

(報價單的資料字典設定)

 

(報價單的Server Package畫面)

 

 

 

9. 產生好的報價單表單，與EEP jQuery & EEP RWD表單一樣，可以透過元件設計的方式，手動設定其欄位屬性與方法。

 

因此如果使用者對系統有更進一步的表單需求，卻無法自行達成時，為了達到更客製化的功能，就可以讓IT 人員接手繼續往下開發。

 

(報價單設計畫面)

 

(客戶編號可修改欄位屬性，設定開窗選單來源)

 

10. 產生後的表單，具備RWD響應式網頁特性，因此在桌機電腦與行動裝置上皆可操作，不需要不同裝置各別開發。如果搭配EEP APP模組，日後也有機會將此網頁匯出到Apache Cordova專案，建置成apk或是ipa，在行動裝置上以APP方式執行。

 

 

(電腦版操作畫面)

 

 

(行動版操作畫面)

 

 

實作2，報價單資料查詢

 

1. 用excel設計查詢介面，檔名規定要與輸入介面的DOC同名，因此需命名為報價單.xlsx。

 

由於查詢功能是查詢資料，不需要建立資料表，因此以設定#M:報價單 標籤的方式，指定查詢來源為【報價單】資料表。

 

 

(報價單.xlsx 設計畫面)

 

 

2.選擇【報價單.xlsx】匯入，並直接按下匯入文件

 

3.iCoder 精靈解析出查詢條件欄位與顯示結果欄位

(解析出報價單.xlsx內設計的顯示欄位)

 

 

(解析出報價單.xlsx內設計的查詢欄位)

 

4.按下匯出後，即產生好了報價單查詢功能。一樣是使用RWD響應式網頁的呈現方式，不同螢幕尺寸各自顯示最適合的版面。

 

(電腦版查詢畫面)

 

 

(行動版查詢畫面)

 

結論

 

這次iCoder Wizard改版，大幅的改變了原本EEP的開發方式，除了增強了精靈的功能，增加更多實用的元件可供選擇外，也優化了操作介面，讓開發人員可以更輕鬆的操作精靈產生表單。

 

另外，許多EEP客戶詢問的自動建立資料表功能，現在也可以直接達成了。試想一個系統動輒上百個資料表，數千個欄位要建立與維護，累積起來可以節省許多寶貴時間。而透過Word / Excel設計表單欄位與關聯結構的開發方式，更可讓使用者與開發人員彼此分工協作，共同建立一套系統，而非一切開發工作都得由資訊人員處理，造成工作壓力過大、時程延誤、畫面成果與使用者期待有落差的現象發生。