以前你可能得花10倍力氣才能做出一個好用又好管的Web應用,以前你可能很難想像用網頁做出的電子下單VIP室,現在RIA不僅做得到,甚至可以讓你實現不需要使用手冊的Web系統。

不可不知的9大超實用RIA炫技

用RIA解決企業Web化難題
RIA技術能將原本桌面應用程式的操作方式搬上網站,讓網頁也能夠具有高互動的操作介面,使得Web化的企業資訊系統,現在也可以好用。。這正解決了既有企業資訊系統Web化後,網頁操作不如桌面應用程式操作性的問題。

RIA兩大陣營大車拼-Adobe vs. Microsoft
從工具來看,Flash與Silverlight互有擅長,但對企業而言,工具的優劣不是唯一的選擇依據。畢竟建置RIA應用,不只是採購一套系統或購買一套軟體而已,而是企業選擇未來前端系統的呈現技術,對資訊部門的影響是深遠的。

破除RIA的8大迷思
企業對於RIA仍抱有一些成見,包括效果酷炫卻不切實際、成本及技術門檻太高,而且不易連結資料庫。其實這些都是以訛傳訛的說法,若不要求達到很高的美學質感,實現RIA並不昂貴,也不困難

RIA為協同開發模式帶來新的挑戰
「軟體開發」與「視覺設計」兩個領域,本是沒有交集的平行線,雙方思考邏輯與工作模式差異甚大,導致合作上存在互動與銜接的鴻溝。當不同專業領域的人才必須協同合作開發專案,兩者必須跨領域學習對方的技術,然後制定工作流程,才能避免雞同鴨講的情形。


RIA改造案例

 


RIA技術讓BI廠商得以簡單實作高品質的資訊儀表板
聯銓資訊是一家提供BI系統的軟體開發商,採用WPF技術開發Smart eVision商業智慧與Web查詢報表,不但降低開發向量地圖、儀表板及魚骨圖…等分析圖表的門檻,而且比起從前以苦工硬寫程式產出的圖表,呈現的品質也相對提升。

以Flex建置ERP及網站,發現更多的可能性
大買家科技建置的臺灣裝潢網是目前臺灣最大的裝潢購物網站。大買家科技希望以Flex技術改寫臺灣裝潢網的架構,提供更友善與互動的操作介面,剛好遇到ERP系統有改版的需求,於是資訊處處長吳至偉決定先嘗試Flex技術開發ERP系統,作為技術的練兵。不可不知的9大超實用RIA炫技


炫技1
多媒體影音
在寶來證券的電子下單概念系統中,可以提供高畫質的電視新聞與解盤節目,讓股友任意切換想要看的節目。

炫技2
即時互動的圖表
透過圖表呈現個人庫存股票的現值,滑鼠滑過圖表中的任何一個圓柱,會出現更詳細的市場價格,點選後還能直接下單。

炫技3
動態呈現即時資訊
RIA能夠結合Web Serverces,讓原本在股票傳呼機上的即時簡訊,都統整在一個視窗中。

炫技4
資訊導覽

日本旭山動物園的網站,在每個動物圖示上標示可以放大檢視的身體部位,當滑鼠移至標記如即動態呈現更詳細的相關資訊。

炫技5
動畫顯示飛行航線

這是微軟所開發的範例,使用者點選日期區間與起迄地點後,螢幕下方即顯示可以選擇的航班,滑鼠不同的航班,地圖上的飛機即動態顯示飛行路線。資料來源:微軟
1 點選日期區間
2 選擇起迄地點
3 指定航班
4 動態顯示飛行路線

炫技6
物件拖放

Best4C是一個類似Visio的線上繪圖工具,使用者可以在Web上感受桌面應用程式的操作體驗,動態拖拉與擺放物件,繪製各式設計圖。

炫技7
舞臺效果

BI廠商Business Object所開發的應用,利用景深與倒影技術製造舞臺效果,並讓各種圖表元件在舞臺上迴轉,供使用者選擇。

炫技8
虛擬實境

這是silverlight.net網站提供的範例,使用者可在虛擬客廳中,點選任一家俱,選擇不同的款式,檢視整體搭配的效果。

炫技9
透視與翻頁

一張張透明的人體構造圖,從骨架器官到皮膚,可透過翻頁層層重疊或拆解,透視人體的結構。用RIA解決企業Web化難題

八月底,臺灣電子下單市占第一的寶來證券在一場研討會中,對外展示新型態的電子下單系統雛形,驚豔全場。寶來利用新一代網頁技術與工具,將真實生活中的營業大廳,搬到網路上,提供直覺易用的3D互動證券下單概念網站。在一個視窗,使用者就能夠瀏覽下單時所需要的各種決策資訊:新聞、跑馬燈、行情表、日線、周線報表,個人股票資產動態等,一覽無遺,讓顧客彷彿置身101大樓的旗艦級營業所,專業顧問隨侍在側。

寶來證券電子商務負責人透露新下單系統的關鍵不只是炫麗的視覺效果,更重要的是連老人家都能快速上手。「臺灣已經朝M型社會發展,不能不為這群日益增長的高齡使用者著想。」他說。

臺灣營收破百億的科技大廠用RIA開發內部資訊系統
實現這些應用的主要技術就是豐富網路互動應用,英文簡稱RIA(Rich Internet Application)。諸如寶來的RIA應用雖是臺灣企業首次亮相,但RIA技術並非直到現在,才有企業開始採用。據了解,新竹科學園區裡有家知名的IC設計廠,也早已利用RIA技術來開發內部ERP或HR的表單,而且早就已經上線使用。更有臺灣金控公司,秘密地用RIA技術打造貴賓級的線上網路銀行,準備提供個人的電子金融服務。

早在一年前,臺灣最大線上裝潢業者大買家科技,已經開始運用RIA技術,開發裝潢業特殊的ERP系統,現在已成為大買家服務20萬用戶的後端核心系統之一。臺灣Adobe 系統工程師李彥璋表示:「亞洲已有超過20家高科技製造業,開始用RIA技術來改善日常業務系統的介面,例如人資系統。」

其實這股 RIA風潮,早已吹遍歐美。德國汽車大廠Volkswagen用RIA技術打造讓顧客自選車款的入口網站。飛利浦則用來服務客戶,提供簡單方便介面來比較不同家電影視產品的規格。Business Objects將企業財務資訊與市場調查的資訊庫,透過RIA轉換成按需求客製的資訊報表服務。HP則用RIA試做了線上排版的雛形系統,為線上列印服務鋪路。其他如新興電子商務像線上音樂,以及提供社群網絡服務的網站等等,也多看好RIA技術應用。

不過,不僅是對外公開服務的網站或者是B2C的消費型應用看好RIA,企業內部應用更是大宗。美商辛納基公司(Cynergy)副總裁Dave Wolf表示:「我們主要的客戶反而是企業內部的資訊應用,例如像是ERP、CRM、投資管理系統等等。」

為何不少知名企業願意將重要的電子商務網站,內部核心業務平臺都投入在這個技術上。RIA到底有何魅力?RIA技術能將原本桌面應用程式的操作方式搬上網站,讓網頁也能夠具有高互動的操作介面,使得Web化的企業資訊系統,現在也可以好用。。這正解決了既有企業資訊系統Web化後,網頁操作不如桌面應用程式操作性的問題。

企業用Web化解決部署的管理
隨著全球化競爭日益劇烈,企業內部資訊系統,開始需跨越多地、甚至多國做全球運籌,需與上下游廠商做供應鏈整合,或與其他企業進行水平或垂直的資訊系統連結。過去的Client-Server架構反而讓企業增加很高的部署成本,以及維護管理的複雜度。往往為了更新版本,不是在各分公司派駐專屬資訊人力,就是得派遣總部的資訊人員,在各地分公司中做測試安裝,時間和成本都浪費在往返過程中。所以,當網際網路快速興起後,企業很快就開始嘗試將原本在Client-Server架構的服務,轉移到網際網路上,將企業資訊系統Web化。

Web兩難,為管理犧牲使用性
企業資訊應用Web化的好處,在於使用者只要打開瀏覽器,連得上企業內部網站,就能夠操作核心業務,甚至資訊部門昨天晚上修改的程式,使用者打開瀏覽器永遠是使用最新版本。Web化後不需要安裝程式,不用寄光碟,也不需要擔心版本控管,有效解決了企業部署的管理困難。也大幅縮短企業開發新系統的導入時程,Web化的新系統,很快就可以讓各地分公司的使用者開始上線使用。Web化的企業資訊系統更具彈性因應業務需求,也增加管理和維護上的控制力。

但瀏覽器畢竟不像桌面應用程式,可以做出高度操控性的視窗介面。HTML這種以文件逐頁呈現的思維,讓Web應用經常是要「上一頁」「下一頁」的切換,不像桌面應用程式在一個畫面中流暢的完成所有事情。企業在管理和部署成本下的考量,往往犧牲使用性,讓員工來適應Web化的資訊系統,無形中耗損的時間和學習成本,其實也不低,但很難反應在企業的實際成本中。

RIA將桌面互動搬上網頁的技術
近兩年來,大家對Ajax技術的狂熱,正反映出使用者的確需要好用的Web操作介面。對企業而言,Ajax的安全性隱憂,以及瀏覽器相容性的問題,仍然讓企業不敢輕易在內部核心應用或重要服務採用Ajax。

RIA技術正解決了企業對Ajax的擔憂,透過瀏覽器的外掛元件執行,能夠提供較高的安全性管制,讓開發人員超越HTML文件設計思維的限制,能夠用桌面應用程式的設計思維,來開發網頁應用,在網頁中做出桌面應用程式的操作效果。進一步還可以讓網頁應用結合多媒體互動,將各種形式的資訊都整合到單一網頁中。臺灣微軟特約資深講師李智樺表示:「1頁RIA的內容可以有50種變化,就等於是50個傳統網頁。」

查爾斯工作室站長竇永平表示:「RIA可以很炫,但重點是,RIA用起來跟熟悉的桌面應用程式一樣,讓大家都會用。」使用RIA技術開發的企業應用,能夠兼顧桌面應用的豐富性,以及網站的優點,如容易部署、集中管理等。熟悉好用正是高科技製造業將RIA技術先運用在企業人資系統上的原因。

越複雜越適合用RIA簡化操作
Business Objects同樣也因為RIA互動性帶來的高使用性,而推出RIA技術打造的資訊服務。該公司認為資訊不是沒有,而是太多找不到,為了讓使用者可以很容易的檢視,找到想要的資料,所以Business Objects用RIA打造產業資料庫服務的入口網站。Business Objects資深副總裁表示:「這樣可以將靜態數字轉換成使用者覺得更相關的互動資料。」

不止資訊服務廠商需要簡化複雜多樣的訊息。當企業商品越來越多樣化時,也會遇到同樣的需求。例如保險業、電信業、保全業等,商品多元,遇各種銷售活動,價格配套隨時改變,也經常推出新產品。連企業內的業務人員也很難迅速掌握這些複雜的組合。

企業常用表格來協助員工熟悉這些複雜的組合,但是表格長到一個程度反而失去效果。RIA技術可以讓視覺設計人員展現對複雜資料的簡化能力,北士視覺設計負責人唐聖瀚指出:「要把很複雜的東西變得很簡單,要連小白來都會用,但還是可以做一樣的事情。」前面提到的Volkswagen與飛利浦網站,都是將複雜產品簡單化的好例子。

RIA可以創造差異化
RIA不只是可以讓企業網頁應用好用,還能進一步協助企業創造差異化,拉開與競爭者的距離。RIA可以讓小公司的網站,看起來具有大公司的架勢,唐聖瀚指出:「差別就是在視覺設計。」

過去的視覺設計,受限於螢幕解析度的限制,設計人員要花費很大努力才能避開方形的結構,版型不是到L型就是ㄇ字型,不論怎麼做看起來都差不多。RIA技術可以突破這個限制,不僅將桌面的互動效果帶到網頁上,還進一步能超越桌面的介面質感。唐聖瀚將這種個質感稱之為「品味」,可以讓企業在在同質性很高的成熟市場中創造差異化。他說:「過去功能的競爭,會走向形象的競爭。」RIA技術可以讓視覺設計人員用網頁塑造出企業的形象。

RIA網站的易用性也是創造差異的方式。寶來證券資訊長姜蕙文表示寶來希望在競爭激烈的電子下單市場中,擴大客戶規模,避免陷入價格戰,她說:「需要用IT科技創造差異化,拉大與競爭者的差距……希望打造出直覺而容易使用的操作介面,可以將專業而複雜的金融系統推介給更多人使用。」所以,寶來也選擇RIA技術。

領先者善用RIA,除拉大差距,還能進一步鞏固既有的品牌優勢。Cynergy副總裁Dave Wolf說:「RIA能將品牌認同延伸到網頁中。」而落後者則能用RIA技術一口氣翻盤,尤其是第2~4名的競爭者也很適合使用RIA技術來打造形象,「要一次超越,更要做不一樣的事情。」唐聖瀚強調。

Adobe與微軟競逐RIA,使用者得利
要落實RIA的效果,須仰賴技術與工具的協助。Adobe已推出多年的Flash技術與Flex工具是比較成熟的RIA解決方案,擁有市場占有率的優勢。而微軟今年也推出Silverlight技術和Expression工具來競逐RIA市場,挾程式開發領域的優勢,進入網頁應用市場。雙雄競爭加快技術的發展,例如五月微軟發布Silverlight支援H.264高畫質影音格式,Adobe不久後也宣布會將H.264納入Flash的支援。使用者獲得更好的技術品質。

新技術帶來的新挑戰是開發人員如何與設計人員協同工作。唐聖瀚與晶睿科技副總經理馬秋生共同帶領寶來概念網站的開發團隊,完成後他們共同的體會是:「開發與設計的協同工作是全新的體驗。困難度相當高。」他們認為還需摸索適當的運作模式。

竇永平指出在RIA的開發中,專案經理要熟悉設計與技術,來做橋接和整合的角色。但是他指出:「目前臺灣的問題是RIA人才不足。」他指出原因出在不容易找到既懂程式又懂視覺設計的人,他進一步補充:「大部分還是設計背景的人跳進來做……廠商推出專用開發工具會吸引更多開發人員投入。」

整體而言,「這一代RIA只有炫,但都不美。」李智樺認為,他評估RIA技術的成熟度還有待發展,他認為要等到下一代工具出現時,RIA技術 才會成熟,現在的開發門檻並不低。但對企業而言,新技術成熟前這段醞釀階段,正是最好的切入時機,可以累積經驗,作為未來工具和技術更新時,一口氣拉大差距的基礎,正如同大買家科技資訊處處長吳至偉解釋為何毅然決然投入RIA技術的理由:「我當作是練兵。」文⊙王宏仁RIA兩大陣營大車拼-Adobe vs. Microsoft

Adobe涵蓋設計到開發

在Adobe提供的RIA技術中,包括了三個核心名詞,Flash、Flex與ActionScript。Flash是網路多媒體的技術名稱,Adobe提供了兩種工具來開發Flash應用,包括用來製作網路動畫為主的Flash CS3,以及開發RIA應用的Flex 2。

Flash CS3與Flex 2的共同點是,都採用相同的ActionScript 作為開發語言。透過ActionScript可以控制所有Flash CS3或Flex 2的元件,進行互動事件的安排。ActionScript目前發展到 3.0版,遵循與JavaScript相同的語言標準ECMAScript,使得ActionScript 3是類似Java Script的高階語言,學習門檻相近,開發人力也容易轉換。

Flex採開源政策吸引社群開發力
但Flash CS3與Flex 2兩套工具背後的設計概念有很大的不同。Flash主要以動作場景與時間軸的設計概念,來安排元件的互動關係,與視覺設計工具整合性較高。而Flex 2包括免費的Flex 2 SDK,以及付費的IDE工具Flex 2 Builder。Flex 2 Builder是基於Eclipse平臺的IDE開發工具,可以進行Flash RIA應用的程式碼撰寫、除錯與開發專案的管理。熟悉Eclipse工具如Java等開發人員,可以很容易上手Flex Builder的操作。Adobe規畫將下一版Flex 3 SDK的程式碼開源,吸引社群人力來協助應用元件的開發。

Flex 2除可使用Adobe的Flex Data Services(FDS)產品連結後端資料庫外,也能透過HTTP或Web Services,來存取後端資料庫,因此不受限於任何開發語言,例如可以透過.NET來連結微軟SQL Server的資料庫。

強化設計端與開發端工具的整合
強化開發工具之餘,Adobe也不忘設計端的改良。在今年推出的CS3系列,Adobe整合既有視覺設計工具與網頁設計工具。在Photoshop與Illustrator繪製的影像,可以保留原來圖層或物件結構,直接匯入Flash CS3中製作互動介面,開發人員無須逐一切割影像來製作互動元件,設計人員可以更容易與開發人員合作。Adobe將前端設計師所需工具,涵蓋視覺設計到介面設計都整合在內,有利於RIA流程的整合。Flex 2雖無法直接與Photoshop整合,但可以存取Flash CS3的檔案,或者在Flash CS3中安裝Flex 2 SDK元件,來開發RIA應用的呈現與互動介面。文⊙王宏仁




微軟訴求強化操作體驗

微軟推出的RIA(Rich Interactive Application)解決方案包括Silverlight 1.0與WPF(Windows Presentation Framework),而是希望提供使用者更好的操作體驗。

Silverlight1.0支援IE、FireFox及Safari等多種瀏覽器與Windows及Mac等作業系統,透過社群的力量也推出Moonlight支援Linux平臺;而WPF則是專注在Windows平臺的展示層技術,相較於Silverlight,它提供互動性更為優越的3D操作體驗。

開發Silverlight 1.0的門檻比WPF高
雖說Silverlight 1.0是WPF的子集,不過,開發Silverlight的門檻比WPF還要高。

主要原因在於Silverlight 1.0沒有開發工具支援,目前唯一的視覺化設計工具是Blend 2(最新9月份預覽版),但內建的控制項很少,企業級應用常見的DataGrid、List等全數缺席,而且沒有可擴充的控制項架構,也就是說,開發者想自製都不得其門而入。

其次,Silverlight 1.0雖然支援Unicode,但為壓縮執行環境的檔案大小,因此未包含中文字型檔,致使Silverlight 1.0無法顯示中文內容。臺灣微軟為此提出3種解決方案,其中將文字轉換成圖檔的方案較為可行,而在執行階段嵌入完整或部分字型檔,可能衍生版權問題。

Silverlight堅持跨平臺,WPF則固守Windows
目前Silverlight 1.1已釋出Alpha Refresh版,正式版預估2008下半年問世,屆時執行環境將擴展到約3.5MB,增加.NET精簡版的CLR(Common Language Runtime),以支援C#、VB.NET等語言,並加入更多的控制項,且提供可擴充的控制項架構,相對於1.0版,成熟度將提高很多。

設計工具Expression Blend 2預估在Visual Studio 2008上市之後,也將推出下一代更迎合設計師思維的版本。

根據微軟現階段的規畫,Silverlight會持續經營跨平臺的路線。而WPF的應用用戶端需要搭配.NET Framework,因此硬體設備需要足夠的空間與效能,Windows Vista作業系統會比較適合。

至於微軟另一個Web開發技術──ASP.NET,臺灣微軟開發工具暨平臺推廣處產品行銷經理胡德民表示:「ASP.NET會逐漸淡出前端使用者介面的功能,而著重在伺服器端的邏輯開發,也就是Web Services。」文⊙李延華

兩大技術陣營超級比一比

從工具來看,Flash與Silverlight互有擅長,但對企業而言,工具的優劣不是唯一的選擇依據。畢竟建置RIA應用,不只是採購一套系統或購買一套軟體而已,而是企業選擇未來前端系統的呈現技術,對資訊部門的影響是深遠的。

整體成熟度:Flash遙遙領先
以整體RIA技術解決方案來看,成熟度以推出多年的Adobe整體解決方案較高,國外企業應用實例也較多。由於Flash Player在瀏覽器的全球普及率超過九成,企業不用擔心使用者瀏覽器的支援,部署門檻較低。由於視覺設計人員對Photoshop熟悉度高,即使用微軟技術,大多數仍使用Photoshop做視覺設計。

整體工作流程上,從Photoshop到Flex間的整合性,還是較微軟Expression與Visual Studio來得高。

此外,Adobe有不少協力廠商與開源社群提供UI互動元件,而Expression目前仍以微軟內建為主,互動元件多需自己從頭做起。

但與後端資料庫整合,以及商業邏輯的程式開發成熟度來看,Expression的確與Visual Studio整合度高,對既有系統已採用微軟解決方案者,容易上手。而Flex雖可透過不同開發語言,與後端資料庫連結,甚至可透過.NET與微軟SQL Server連結,但臺灣熟悉Flex後端開發的人力資源不足,反而形成入門障礙。

開發人力:Flash學習門檻低,但Silverlight資深開發者較多
近幾年因為Flash盛行緣故,臺灣擅長Flash開發語言ActionScript的網頁設計人員越來越多,這些網頁設計人力可直接轉為Flex開發人力,不會有語言使用上的困難。也因為ActionScript採用ECMAScript的語言標準,與JavaScipt相同,學習門檻不高,熟悉Ajax技術的人,也能夠很快上手。

但臺灣亦有相當大量的微軟產品開發人力,熟悉商業應用開發經驗的人力相當充沛,企業較容易找到有經驗的微軟開發人力。待Silverlight 1.1版支援C#後,既有微軟的資深開發人力就能直接轉為RIA應用開發人力,後勢可期。

跨平臺:Flash勝出,從開發到執行全部都跨平臺
Flash Player已經可以在多種作業系統,如Windows、Mac、Linux、Solaris上執行,而且也能在不同瀏覽器如IE、Firefox、Opera中執行。Adobe從設計端到開發端,整套開發工具也有提供不同作業系統的版本,例如有Linux版本的Flex Builder。Adobe也已提供支援行動裝置的Flash Lite版本。在CS3中,也提供專屬的行動裝置測試工具,提供開發人員模擬測試在不同手機上的執行效果。

微軟的Silverlight目前支援Windows與Mac作業系統,以及IE與Firefox兩種瀏覽器,並由Novell協助開發Silverlight的Linux版本,微軟承諾未來將會支援到各作業平臺與行動裝置。開發工具Expression與Visual Studio目前僅有Windows版本。

桌面應用技術:微軟完善,Adobe小而美
微軟WPF技術涵蓋了Silverlight技術,用來滿足所有Window系統上的桌面應用所需,因此,在.NET Framework上提供相當豐富的元件與函式庫。因此若已安裝WPF例如Vista作業系統,直接就可執行Silverlight的XAML檔。原先以Silverlight開發的網頁應用程式,也能很容易地轉為WPF的桌面應用程式。Silverlight相當於是一個輕量級的網頁前端技術,整個基底還是WPF。

Adobe則是希望將網頁應用優勢,延伸到桌面應用。但Adobe採取小而美的策略,提供輕薄短小容易部署的AIR技術,提供介面技術為主,但強調可以很容易將HTML、JavaScript、Flash與PDF等直接轉換成桌面應用程式,讓具有網頁開發經驗的開發人員,很快做出桌面應用。

學習資源:兩者均不足,多仰賴英文資源
目前坊間教育訓練機構如資策會或恆逸資訊已有長期固定的Flex訓練課程,而Silverlight訓練課程則仍屬不定期開班,或採研討會方式集中訓練。

實體出版品也以探討Flash開發語言ActionScript的中文參考書籍居多,但多圍繞在Flash設計為主,僅少數ActionScript中文書順便談及Flex使用。以Flex開發工具為主的中文專書,目前僅《Flex 2 程式設計 (Programming Flex 2)》一本翻譯書而已。臺灣微軟則由專人負責與出版社合作,推動Silverlight語言與Expression工具相關中文書籍的出版,目前已有4本Silverlight中文書。

不論Flash或Silverlight 開發人員而言,這些學習資源仍舊不足,尤其是缺乏開發與設計之間如何合作的參考資訊,或者針對企業應用的實作案例。開發人員仍需自行至國外相關網站,蒐集英文學習資源。微軟與Adobe網站均有提供參考範例的原始碼與相關學習資源,但Adobe提供的進階引導和完整實作範例較豐富,例如Adobe有提供完整的線上購物網站應用Flex Store原始碼,經常被改成其他應用。Flash技術也具有較多的技術社群可供企業尋求支援。

技術支援:微軟積極集中,Adobe分散
對企業的產品支援策略,臺灣Adobe與臺灣微軟明顯採取不同的策略。Adobe投入臺灣的資源,分配到所有產品線同時又會因銷售狀況而調整,Flex相較設計工具,所獲得的支援資源也因而較少。

對微軟而言,Silverlight技術則是當前的重點技術,為提高企業採用率,相當積極地採取直接協助企業導入的策略。臺灣微軟也提供免費的Silverlight培訓或研討會,協助企業培養導入的開發人力,同時也提供RIA開發過程的技術支援與顧問服務。

不論微軟或Adobe都承諾將長期投入RIA技術,兩大陣營的角力,加速技術進展的腳步,對企業長期來說都是有利的。總而言之,一兩年內需要用RIA技術來解決企業當前問題,或企業打算重新選擇開發技術時,採用Flash技術,能馬上取得完整且長期可行的解決方案與配套工具。

過去採用微軟開發方案的企業,若採用Silverlight技術,後續整合的難度較低,也能善用既有開發人力,節省多一套技術的維護成本。但目前Silverlight還無法讓企業現有開發人力充分發揮,恐需等到Silverlight 1.1版支援C#後,與Visual Studio整合性提高後,才能發揮。現階段,企業的小型開發專案,若能先投入RIA技術,可視為練兵階段,善用微軟積極推動所提供的豐富支援,累積內部開發團隊的RIA開發能力,倒是一種不錯的選擇。文⊙王宏仁破除RIA的8大迷思

任誰看到RIA(Rich Internet Application)動態與酷炫的效果都會感到心動,但是多數企業在實際了解技術以前,就已經憑直覺認定,要做到這樣的效果一定很難、很花時間、影響效能而且很貴。

其實這些成見都是「以貌取人」,無論Adobe的Flex或微軟的Silverlight,前端的互動程式都是「類JavaScript」的技術,對開發者而言並沒有很高的技術門檻,至於後端的商業邏輯與資料庫存取,其實都是延用既有的技術,所以也不會有資料庫串連的困難。

主要的挑戰,是開發與設計人員要放下身段跨界學習彼此領域的技術,而不是各自依循原有的工作模式。若心態上存有專業的傲慢,就不會好的協同合作模式,唯有跨越超越這個門檻,才能重塑新的工作流程。

委外開發是必然的選項嗎?當開發工具內建RIA的開發機制,你我隨手就可以設計簡單的互動效果,提升軟體的易用性。Adobe甚至在官方網站提供各種應用範例,並公布原始碼。所以,若不要求達到很高的美學質感,實現RIA並不昂貴,也不困難。文⊙李延華

迷思1
RIA對企業並不實際
酷炫的視覺效果只是加分,簡單、直覺才是RIA的王道。回顧Web最早期的應用是為了資訊的分享,因此以靜態的文件式操作為主,當應用程式搬上Web,便面臨許多使用上的困境,例如使用者會反射性地企圖按「上一頁」返回前一個功能。

雖然Java Applet與ActiveX曾為Web的互動帶來一線曙光,但由於效能及檔案大小的限制,因此僅局限於小區塊的應用。而RIA已帶來新的契機,微軟的Silverlight與Adobe Flex技術,可以突破過去Web開發的技術瓶頸,為互動設計打開方便之門,使Web應用得以更像一套應用程式。

舉例來說,當原本必須點選、確定、換頁才能做到的排序與分類機制,改以滑鼠拖放完成,不但直覺而且可避免使用者犯錯。此外,在Web輸入表單時,提供必要的提示;或者使用者離開座位再回來,系統以閃動或變色的方式提示從哪個欄位接續工作,諸如此類具導引性互動設計,可有效提高生產力。

迷思2
Flex解決方案成本很高
Flex解決方案,目前來看費用並不貴。

前端開發工具Flex Builder的建議售價,教育版是免費,最高等級是35,740元,是開發工具的正常價位。而後端技術則沒有限制,企業可彈性選擇Java、PHP、.NET,甚至是現在最火紅的RoR等,而且在我們採訪的案例中,大買家科技選擇Flex的原因之一,正是因為Flex的開放性。

Flex之所以給人貴氣逼人的印象,源自於Micromedia曾將Flex與自家的Java應用伺服器FES(Flex Enterprise Services)綑綁。然而企業寧願選擇WebLogic或WebSphere,或走向Apache的開放源碼策略,因此當時FES的推動並不順利。後來Adobe採開放、鬆綁策略,因此費用與平臺的要求所導致的門檻,從此解禁。

不過,開發成本角度來看,傳統網頁的開發成本,RIA的一個頁面可能衍生50~60種變化,尤其是委外的專案,對「Rich」的要求更高,因此成本可能提升。

迷思3
Ajax比較簡單
Ajax主要是JavaScript技術,而Silverlight與ActionScript基本上也都是類JavaScript的語言,因此技術門檻不高。而且,Ajax現階段沒有供企業加速開發的IDE工具,除錯困難,因此維護更為辛苦。

再就視覺設計而論,Ajax要實作透明、潮層、陰影或動畫等特效非常困難,通常是藉助平臺(Framework)的幫忙。而這方面則是Silverlight與Flash的強項,透過工具的協助,可簡單完成。

美商辛納基公司臺灣區總經理呂維德分享國外的RIA專案經驗,他談到2007年仍有客戶詢問Ajax專案,但過了7、8月之後,就再也沒有出現Ajax的需求,幾乎都是Flash的專案。因此他認為:「Ajax有局限性,相較於Flex與Silverlight,它已是上一代的RIA技術。」

此外,企業若考量安全性問題,JavaScript引發不少資訊安全的疑慮,雖然有經驗的開發者懂得如何開發安全的程式,但駭客的手法不斷翻新,JavaScript隨網頁下載到用戶端,仍有可能被有心人士找到漏洞。

迷思4
設計人不需要學寫程式
在RIA的世界,視覺設計人員一定要成長,唯有跨界學習才能與工程師溝通,尋求更好的協同合作方式。

現階段的RIA都只是炫,卻一點也不美。主要的原因在於實作者仍是工程師,所以沒有美學的呈現。要有具美學素養的設計人員加入,RIA的層次才有機會提高,不過一般來說,設計人員心態上難以接受寫程式,即使寫一行程式碼都不能接受。

其實設計師不需要非常了解語法,只要懂得程式的原理,然後靠複製/貼上,就可以省掉許多製圖的麻煩。設計師對程式的排斥與過去的工作習慣有關,Flash的動畫是以影格概念製作,利用時間軸(Timeline)串連一張張的圖檔。事實上,有些情況是寫程式碼就可以達到同樣的效果。

除了設計人員心態上的調整,程式語言也會走向高抽象化的層次,降低學習的門檻。Adobe的ActionScript經過幾個版本的演進,已經逐漸簡化,但抽象化程度仍然不夠高,而微軟的VB.NET及C#就更不用說了。迷思5
RIA連接資料庫很困難
不懂程式的邏輯可能會有這方面的誤解。過去設計人員設計網站的內容,多是動畫及圖示的展現,當RIA走進企業應用,必須存取資料庫再動態產生內容,許多設計師誤以為這些內容必須以畫圖完成。

無論Flash或Silverlight都是前端展示層的技術,而資料庫存取屬於後端應用,所以兩者並無關聯,開發者可透過各種資料繫結技術串連資料庫,並沒有實作上的困難。只要連結資料庫,再抓取資料再送至前端即可。

以Flash為例,開發者可根據後端採用的技術Java、PHP、JSP選擇的連結資料庫的方式。而前、後端資料的傳遞,則可透過HTTP、Web Services、XML或傳統的Get/POST等協定互通。

而.NET陣營則是.NET Framework原有的資料繫結功能,例如ADO.NET或者Visual Studio 2008將推出的LINQ(Language Integrated Query)等,都可以輕易地串連元件與資料庫,幾行程碼再加上一個SQL述句即可完成。

迷思6
工程師不需要學習設計工具
無論Silverlight或Flex技術,都需要程式邏輯輔助才能真正「動」起來,RIA是開發與設計合作的成果,但雙方的協同合作需要了解彼此的領域知識,才能避免雞同鴨講的情況。

設計人員設計的動畫或者控制項的變色/縮放或者物件的重疊效果,最後都會轉化成程式的邏輯,開發者若不了解設計工具的運作,就不知道該從何處下手。

其實觀察傳統的網頁開發模式,不難發現設計人員通常是負責按鈕或場景等平面設計,剩下的工作都是開發者包辦。呂維德也坦承:「設計人員畫出版型、大體上切割好之後,就由工程師主導。」

網站進入實作階段,多數動態效果都是由程式邏輯控制,工程師有必要了解設計領域的知識,甚至具備美學的基礎,才能與設計人員合作。

再者,若企業決定委外尋求視覺設計公司的協助,工程師必須擔任企業與視覺設計公司溝通的橋樑,了解設計工具的必要性就更高了。

迷思7
企業不需要培養設計人
目前由於視覺與互動設計人才,在企業應用領域相當缺乏,因此RIA專案確實以委外開發居多,但是隨著RIA技術的推廣,以及開發工具內建視覺設計的機制,企業已可以輕易在軟體中加入動態的視覺效果,委外不見得是必然的選項。

其實,簡單的互動機制就可以大幅提升軟體的易用性,臺灣微軟特約資深講師李智樺分析:「事實上,10個工程師中約有2個是美學素養不差的人才。」所以企業可從既有工程師中,尋求具基本設計能力的人才,而隨著RIA的逐漸普及,軟體的視覺設計水準也會提升。

視覺設計公司與客戶是採專案合作模式,所以企業若是尋求長期的顧問服務,成本相對提高很多,再加上跨產業與領域的合作,存在許多溝通的問題,因此失敗率很高。

內部的設計人員,也許美學素養比不上視覺設計公司,但仍可擔任軟體的「化妝師」,協助企業提升提高系統的易用性,降低使用的門檻。

迷思8
設計人在企業沒有舞臺
設計人員常被稱為「美工」,一直以來在企業中的地位不高,但是當企業開始重視軟體的「門面」,這類的人才的需求及價值將明顯提升。

社會把設計人員極端化,認為學藝術的人往往不修邊幅、日夜顛倒、不守規範,事實上未必是如此。如果個性可以接受新鮮事物,願意參與企業各種產品的包裝,那麼設計人員便有機會提升企業的整體美學素養,因此重要性不言可喻。

設計人員在企業內有沒有升遷的機會,與個人特質有關。而進入企業體系的設計人員,李智樺認為:「他們的職業生涯其實與開發者的立足點相同。」很少開發者是一輩子寫程式,最後多數也會走向管理職工作。

當設計人員有機會參與產品的包裝,而且是在專案的初期就加入,負責勾勒對外的形象和呈現方式,並擔任各部門與開發團隊之間溝通與協調的角色,如果足以擔此重任,表示他具備很好的待人接物能力,這樣的人才也會是主管或產品行銷人選。RIA為協同開發模式帶來新的挑戰

美商辛納基公司臺灣區總經理呂維德:「設計與實作之間存在許多挑戰,當設計師提出太神奇的介面及詭異的操作,開發者的技術曲線就變得很陡峭。」

「軟體開發」與「視覺設計」兩個領域,本是沒有交集的平行線,雙方思考邏輯與工作模式差異甚大,導致合作上存在互動與銜接的鴻溝。

RIA(Rich Internet Application)可分為很多種層次,完全由工程師開發的專案,實作的複雜性大幅降低,但美學與互動設計的品質將遇到瓶頸。而設計師與工程師完全合作的RIA,可以拉高層次,但實作的難度會極劇攀升。

好用的RIA需要視覺、美學、動態、程式邏輯與資料存取之間交互作用,所以工程與設計兩者必須緊密結合、協同合作,才能拉高層次,創造對手難以超越的競爭門檻。

因此,現階段工程師與設計師合作RIA,仍是成本與失敗率雙高的嚐試。提高合作成功率必須從多處著手,首先,設計與開發雙方必須跨領域地學習對方的專業。其次,是要制定統一的工作流程。

最後,在互動設計(Interaction Design)這個關卡,當使用者按下一個美美的按鈕,觸發一個具有特效的系統功能,或者給定條件,系統結合後端資料庫與邏輯運算的結果,以動畫或圖像呈現內容的機制,是設計與開發兩端最需要協同合作的部分。

目前廠商在這個環節所發展的輔助工具,無論是微軟的Expression Blend,或者Adobe尚在研發、目前仍處於概念階段的Thermo,都不算成熟的解決方案,還須1~2年才會推出。在工具面上,他們仍需持續強化輔助協同合作及專案管理的機制。

創意與實作存在技術上的鴻溝
設計師構思畫面的呈現效果,過去的工作形態是一張畫布做到底,然而靜態的圖像,難以展現動態的構想,因此進入實作階段,開發者實作的結果,往往達不到設計人員的要求。

某種層面是因為設計師不了解技術的局限,可能設計出技術上難以實踐的神奇介面。美商辛納基公司臺灣區總經理呂維德表示:「Flex已經是很成熟的技術,但遇到設計師提出太神奇的介面及太詭異的操作,而開發者難以著力時,技術曲線就變得很陡峭。」

尤其現階段RIA在臺灣處於起步階段,開發者對於互動設計的開發技術還很陌生,需要克服的門檻就更多了。

開發與設計必須彼此跨界,才能制定工作流程
進入實作階段,設計與開發雙方也有合作上的困難,呂維德不諱言:「設計與開發兩者的合作,一直都沒有很好的模式。」即使Flex技術經過10年的發展,開發與設計團隊已建立工作模式,但仍不算完美。

設計跟開發人員之間的合作問題,源自於專業領域上的差異。以設計功能選單為例,以開發者的出發點,拖拉Menu元件再加幾行程式碼即可完成;但設計人員以動畫的思維出發,卻是把各可能性都「畫」出來,結果畫了50~60張圖。然而,當設計人員辛苦地把動畫完成,開發者卻發現:「動畫都已經做完了,我怎麼加程式?」
所以,設計與開發雙方必須學習對方的基本專業知識,才能有效互動,然後制定實作流程,切割工作的細節。

先做雛形才能發現實作上的盲點
RIA畢竟是一種應用程式類型,而應用程式需要POC(Proof of Concept)的過程。因此臺灣微軟特約資深講師李智樺建議:「RIA需要建置雛形,確認沒有盲點再實作。」而且最好是設計和開發人員一起做,才能降低實作時發生雞同鴨講的狀況。

在RIA的世界,雛形(Prototype)就是一種POC,透過這個縮小版的系統,設計與開發兩方可以確認資料串連的方式、哪個部分透過程式處理、哪邊用動畫解決,以及動畫在何處觸發一段程式等各種細節。

設計人員就美學的觀點,常嫌棄雛形太醜,但李智樺強調:「RIA不能單憑色調或視覺效果決定方案,因為RIA要『動』。」有許多問題是在動態的情況下,才會發現盲點,例如某些字形在動態呈現時,「6」和「8」容易誤判。

專案管理能力決定成敗
現階段委外是RIA常見的選擇,李智樺分析委外的成敗:「關鍵在專案管理。」視覺設計公司首先面臨的第一個挑戰,是估算RIA的成本。

相較於傳統的網頁,RIA一頁的內容可有50種變化,因此一頁可能等於傳統50頁的成本,再加上想像與實作之間存在太多盲點,而盲點就是可能追加預算的地雷。

其次是軟體工程的問題,RIA的本質還是要回歸「A(Application)」,軟體有版本控管、需求管理、功能測試及壓力測試等過程,必須藉助專案管理以因應變動的問題。況且,開發領域很早就習慣上百人的合作模式,即使跨地域也沒有問題。最後,專案經理必須同時熟悉設計與技術,才能扮演橋接和整合的角色。李智樺建議:「RIA應用還是一套企業應用系統,最好專案經理還是由具備架構能力的開發人員擔任。」

然而這些環節,對於設計領域而言,可能是一連串的震撼教育。因此,專案管理能力是RIA的發展過程中,很重要的課題。文⊙李延華RIA技術讓BI廠商得以簡單實作高品質的資訊儀表板

聯銓資訊是一家提供BI系統的軟體開發商,採用WPF技術開發Smart eVision商業智慧與Web查詢報表,不但降低開發向量地圖、儀表板及魚骨圖……等分析圖表的門檻,而且比起從前以苦工硬寫程式產出的圖表,呈現的品質也相對提升。

將數據轉化成圖表,曾經是一件苦差事,過去聯詮資訊工程師必須要研究艱澀難懂的數學公式,再加上參考資訊不多。即使克服了數學公式,還要花很長的時間建置繪圖函式庫(Library),但系統產出圖形的執行效率不是很好,而且仍然有部分繪圖效果無法做到。

聯銓資訊總經理林健勝表示:「影像、漸層及倒影等效果,用程式硬寫是很辛苦的工作,現在藉由繪圖工具結合WPF技術,很容易就可以做到。」

當微軟推出RIA解決方案後,聯銓資訊決定在新版的Smart eVision嘗試使用Silverlight 1.0及WPF的技術。在前端設計工作上,由於當時微軟的Expression尚未推出,於是先培訓6位工程師學習Illustrator繪圖工具。

對聯銓資訊而言,考量既有Smart Query是Web架構,Silverlight是比較適合的選擇。因為採用WPF的話,除非用戶端是Windows Vista作業系統,否則必須額外安裝50MB的.NET Framework 3.0,及多媒體系統程式DirectX 9。對多數企業而言,無論從硬體容量或效能來評估,大部分的電腦都無法應付WPF的要求。

然而換成Silverlight 1.0版又有不同層面的考量,由於內建的元件太少,又未提供可擴充的控制項架構,再加上無法顯示中文,因此形成兩者均不適用的局面。

最後聯銓資訊決定採用WPF技術,在伺服器將Illustrator製作的圖,匯入WPF成為XAML格式,接著套用分析數據,然後轉成靜態圖檔,傳送到用戶端,如此便可以迴避需用戶端安裝.NET Framework的問題。

林健勝分析:「目前聯銓約有20%的客戶希望有動態的儀表板,以方便取得即時的分析結果。」但現階段他們必須等待微軟推出Silverlight 1.1版,解決中文字與控制項客製化的問題,屆時就可以提供動態的分析圖表。因為已經改用WPF架構的Smart eVision,如果想要轉換到Silverlight,並沒有技術上的困難。文⊙李延華


Before

從前工程師必須研究艱深的數學公式,然後以苦工硬寫程式產出的圖表,而且仍然有部分繪圖效果無法做到。

After

WPF讓Smart eVision更容易實現圖形化的報表。
待Silverlight解決中文與客製化控制項的問題,聯銓資訊就可提供客戶具互動效果的分析圖表。

以Flex建置ERP及網站,發現更多的可能性

大買家科技建置的臺灣裝潢網是目前臺灣最大的裝潢購物網站。大買家科技希望以Flex技術改寫臺灣裝潢網的架構,提供更友善與互動的操作介面,剛好遇到ERP系統有改版的需求,於是資訊處處長吳至偉決定先嘗試Flex技術開發ERP系統,作為技術的練兵。

這是臺灣少見以Flex技術開發ERP的例子,吳至偉以階段式的作法,先求功能面的改進,再考量質感與互動特效。相較於一次改寫系統,徹底成為兼具美學、品味又充滿互動的RIA應用,已經大幅降低失敗的機率。

雖然原廠在臺灣的技術支援不足,使該公司資訊處開發的過程顯得孤立無援,但經過一段自修的過程,新版RRP的功能已陸續上線,而臺灣裝潢網的雛型也已完成,預計2008年3~4月可完成第一版的內容。

吳至偉表示,採用Flex技術是希望ERP走向Web化,在選擇技術的過程中,看上Flex簡單、好用及不用換頁的互動效果,但他認為設計人員短期內不容易跳脫平面設計的思維,因此決定由資訊處主導,以功能性為主要考量,暫不著墨太多酷炫的機制。

Flex版ERP功能上線後,使用者明顯感受到差別,在Web的架構,沒有安裝與部署的麻煩,還可享有桌面應用程式的操作體驗。而且使用者無需切換表單,就可動態導覽各項資訊。

綜合實地開發Flash系統的3位工程師學習Flex的心得,楊建郎認為:「開發Flex的門檻在設計畫面的思維。」因為Flex打破程式逐行推理的開發邏輯,當資料改變時,開發者必須運用訊息傳播的機制,通知所有包含接收器的頁面。

此外,物件導向的觀念也很重要。徐識翔過去曾在資策會學習Java物件導向,但在開發JSP時並沒有運用到相關技巧,反而是轉向Flex之後,必須在單一頁面中操控多種功能,所以物件導向的概念又派上用場。

至於Flex與另一個常見的RIA技術Ajax在開發上的差異,鍾政欣強調:「主要是維護難易度的差異。」Ajax目前沒有很好的編輯工具,卻要控制龐大的JavaScript函式庫很吃力,光是除錯就很困難。

隨著對Flex的逐漸上手, 3位工程師開始對RIA種種酷炫的互動機制躍躍欲試,因為從初期平淡的介面,到後來越來越動態效果,楊建郎坦言:「越玩越有心得,會上癮!」文⊙李延華


Before

臺灣裝潢網目前的版本,是傳統的購物網站架構與Web頁面,雖然足以應付使用者需求,不過隨著會員人數的增加,逐漸面臨功能與效能的瓶頸。

After

臺灣裝潢網預計將在明年改版為Flex架構,希望提供使用者更互動與直覺的購物經驗。這一版的雛型,架構上是參考Adobe官方網站的範例──FlexStore所開發,正式版會有所調整。

熱門新聞

Advertisement