EEPCloud網站功能

訊光科技/Andy Kao

    其實坊間有很多免費的網站工具，對我們來說其實也不用去湊一腳，但基於開發者日漸對 iCoder/EEPCloud提出更多的UI(使用者介面)要求，也更希望EEPCloud能開放更多彈性空間，來讓開發者可以提供更好的用戶體驗，因此，EEPCloud就不得不往網站的UX(用戶體驗)來靠攏。

EEPCloud的定位

    EEPCloud並不是專門用來設計網站的，所以並不會思考如何以iCoder那種Word方式去設計網站，也就不考慮以無碼方式來開發；而以EEPCloud平台方式開發，多數需要一點專業程度，如需要懂點HTML/JS/CSS等等，或許這樣並不是算友善的環境，但我們的考量主要是：

1. 很多企業資訊系統，需要由內往外發展，如從EPR外跨到EIP/SCM，再外跨到公司網站(如與客戶或供應商直接透過網站互動)。現代企業網站已經不是單純的公司形象網站而已，而是提供更多的即時服務。如果只是一個形象網站，很多企業都是外包或第三方工具填一填再請美工畫畫圖就搞定了，但如果是內外整合的話，要讓網站功能與企業內資訊系統對接，恐怕不是這麼容易，這也是EEPCloud要跨足網站系統開發的目的，在同一個平台完整實現所有功能。

2. 網站的UX要求通常會比企業系統來得高，這也在考驗EEPCloud的UI組件夠不夠用，如果網站的UI都可以提供的話，相對也能提升EEPCloud的UI組件彈性及功能。因此，EEPCloud除了原來組件外，為了網站功能又提供了10餘個新組件，來讓整個EEPCloud UI組件變得更完整，更容易滿足用戶對UI要求。

3. 近年來行動裝置盛行，使用者瀏覽網站使用行動裝置已經遠遠超過桌機與筆電，不少企業網站還是使用傳統的HTML網站，不利於行動裝置來瀏覽。iCoder與EEPCloud所產生的網頁本身就是RWD網頁，所以無論是桌機、筆電、平板還是手機都適合直接瀏覽，如果能以EEPCloud輕易開發容易維護的RWD網站，可以加速企業汰換舊網站。

4. 提供簡單的電商功能，由於電商經濟的崛起，除了各大電商平台可以供企業來改變交易習慣與模式外，自家的網站也同樣可以提供部分電商功能，舉凡商品型錄，購物車，訂單與金流，都是可以透過EEPCloud來直接完成，來增加企業的電商營收與競爭力。

EEPCloud網站組件

EEPCloud的網站組件有那些呢? 在此簡單說明，當然有些是原來EEPCloud舊有組件做了一些改善，讓它更適合在網站上呈現。

網頁容器

先來說明最外層的網頁容器，如下:

1. Panel: 這是網頁中很基本的容器，可以把各種網頁的組件貼入這個容器中，類似html中的<div>，可配合MENU組件來控制顯示與隱藏該容器內容。如下為首頁規劃了Header及Body與Footer等三個Panel:

2. Tabs: 頁簽容器，與Panel很像，差異Tabs可以設定多個頁簽。

3. Steps: 這是一個新的組件，與Tabs差不多，差異Tabs為多頁簽，Steps為步驟式的輸入頁簽，如下圖:

4.Layout: 用來控制上述容器的排版組件，因為整個網站是採RWD的架構，所以這裡可定義各組件在桌機、平板、手機等不同螢幕大小時，要如何排列。如下為公司Buliding與最新消息的排版方式:

首頁組件

首頁通常會有些基本的功能，如下的組件:

1. Logon組件: 企業網站通常不需要Logon的機制，但如果針對需要登入才能使用的網頁或功能，就必須提供用戶登入的機制，如下，可以控制是否要驗證碼與忘記密碼及新申請帳號功能，這些功能都會與EEPCloud結合在一起。

2. Menu組件: 另外提供一個網站型的Menu組件如下，可以設定網站的各個項目與串接的子頁面，因為我們的網頁是屬於SPA架構(Single Page Application)，所以不利於搜尋引擎的爬文與SEO政策，為此也可以透過此Menu產生一個SiteMap.XML來提交給各大搜尋網站方便爬文。

3.Carousel組件: 幻燈片輪播圖形組件，這是原本EEPCloud就有的組件，可以綁定後端資料表來顯示多張幻燈片的圖形，通常用來顯示活動或是廣告的訊息看板等，如下:

4. CSS組件: 用來定義所要引用的CSS檔案，很多美工設計的樣式都是獨立放在CSS文件中，透過這個CSS引用可以定義主頁及子頁的整體風格。

基礎組件

1.Literal: 這是個純HTML的組件，內容完全由開發者自主決定，全手工設計；除了HTML外還可以貼入<Style>… </Style>等CSS語句。通常我們會把美工寫好的HTML網頁直接貼到這個組件內即可，如上面的首頁上方，就以下列的HTML來設計:

2.Label: 文字組件，用來顯示文字或標題所使用，會有簡單的樣式屬性設定，不夠的可以用CSS來設定。

3.Image: 圖形組件，用來顯示圖檔，有onClick與樣式可以設定，也可透過CSS調整。如下為Label與Image的應用，外層則使用了Layout組件來排版:

4.SiteMap: 網站地圖導覽組件，用來顯示網站地圖導覽的組件，可以定義每層要連結的網頁或Panel(容器)。如下:

資料組件

1.ImageList: 多個圖形組件，用來顯示多個圖檔，可與後端資料表綁定，以資料的內容與圖檔來顯示。如下可以根據後端定義的資料表來呈現，並連結到對應的產品網頁: (使用後端資料表好處是可以讓用戶自行維護網頁)

ImageList也可以使用自訂的Format處理類似以下的電商的商品網頁:

2. DataGrid: 這個是原來EEPCloud的組件，直接使用即可，如下的下載區列表:

3. DataList: 這個與DataGrid很像，綁定後端資料表之後可以逐條顯示，但顯示格式完全自由，應用非常廣泛與彈性。如下的產品表列，定義了左邊為圖，右邊有標題及說明等等。上圖的"下載專區"中的"下載類別"，也是用DataList來呈現的，綁定了後端"產品類別"的資料表。

4.DataForm: 這也是原本EEPCloud的組件，可以用來新增/更改後端資料表的內容，如下的討論區發貼表格就是用DataForm實現的:

5. ImageZoom: 這個組件與ImageList很像，主要目的是為了能顯示同一主題中不同的相片，除了下方有小圖的List，上方為大圖，還可以滑動顯示局部的放大圖(多數的電商平台呈現商品也採用此模式)，只要綁定資料表的欄位即可自動顯示如下:

6. Cart: 購物車組件，特別為電商需求提供一個購物車的功能，這個組件同樣綁定到後端的資料表，用戶只要點選"加入購物車"，就可以即時寫入資料並呈現"購物商品數"，隨時可以增減數量並選擇結帳。如下:

關於登入管理

企業官方網站都是可直接瀏覽的，所以EEPCloud對任何頁面都可特別設定為免登入模式，尤其是首頁與產品網頁等等；沒有特別設定則代表需要登入才能使用，來作為大眾用戶與註冊用戶的差別，因此，EEPCloud要設計網站就必須做以下設定:

1. 以網頁為單位，設定是否為免登入網頁。

2. 網頁中如有使用後端的資料表時，在EEPCloud Server端的InfoCommand組件中，需另外設定NonLogin屬性為True，才能讓大眾用戶瀏覽。網頁中如果有用到Server端的方法(Server Method)，也必須以ScriptManager組件來設定哪些方法可以開放給未登入者使用，確保系統的資訊安全。

結語

    有了以上的組件，當然需要牛刀小試，筆者就以訊光的官方網站為例，以EEPCloud實現一遍，除了討論區比較有挑戰，花了2天時間開發外，其餘的功能大約花了20工作小時完成，雖然還是耗了近1星期的工作時間，但開發出來的網站則為完全的客戶化，非第三方那種制式網站形式，這也是為何要以EEPCloud來設計網站的目的。而後我們會在官網上分享整個網站的開發過程，讓稍微具有JS開發能力的顧問來免費學習。

    從iCoder的無碼編程架構，讓顧問快速上手之外，透過EEPCloud的二次開發平台來實現企業內的資訊系統；現在起，又進而延伸到對外網站的開發與整合，相信透過更多的成功案例與經驗回饋，可讓iCoder與EEPCloud這種雲端開發的模式漸受青睞，並協助國內中小企業走出自己獨特的商業契機與IT應用。