專刊內文

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

瀏覽次數 : 1308



全新EEP2019智能開發

訊光科技/Menphis

 

前言

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

 

 

(EEP Wizard 開發步驟)

 

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

 

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

 

iCoder運作方式

 

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

 

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

 

 

 

(iCoder Wizard 開發步驟)

 

 

iCoder WizardEEP 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中指定具體欄位名稱,因此將自動以流水號F001F002方式預先產生實際欄位名稱

 

(解析出報價單.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設計表單欄位與關聯結構的開發方式,更可讓使用者與開發人員彼此分工協作,共同建立一套系統,而非一切開發工作都得由資訊人員處理,造成工作壓力過大、時程延誤、畫面成果與使用者期待有落差的現象發生。