2014年9月26日 星期五

Why in-air gestures failed, and why they'll soon win

    隨著愈來愈多的消費性電子設備如手機、平板裝置、PC和電視等等加入所謂的「智慧」,「手勢操控」(在下文中我用「懸浮操控」字眼來取代)繼觸控技術之後成為廠商寄與厚望的人機介面技術;的確,肢體語言是人類彼此之間最原始的基本互動方式,如果機器能夠直接辨識人類的手勢或表情,那麼我們就可以不需要透過觸控螢幕、滑鼠、遙控器、各式旋鈕或開關等物品的協助,直接以直覺自然的方式與機器進行溝通,這種所謂「懸浮操控」操控的方式理論上應該更易於被我們所接受,然而這類技術已發展好幾年了,卻始終未見消費者青睞,是技術發展遇到瓶頸嗎?還是產品應用方向不對?
  ComputerWorld.com的專欄作家Mike Elgan認為,懸浮操控技術未見流行的原因,在於目前的產品應用面背離了消費者實際的生活體驗,他提到,懸浮操控應該結合擬真操控的體驗,前者是摸不到的一種技術、而後者則是提供摸得到的體驗,兩者的融合才能提供使用者最直覺與自然的操控行為。
in the air gesture technology
這篇Mike Elgan的專欄文章「Why in-air gestures failed, and why they'll soon win」刊載於8/30的ComputerWorld.com,內容首先談到懸浮操控(in-air gestures)相關的產品(如微軟Kinect for Xbox 360以及Leap Motion的Leap Motion Controller)失敗的原因,以及他個人對於懸浮操控應用領域的建議;原文網址在http://www.computerworld.com/article/2599359/emerging-technology/why-in-air-gestures-failed-and-why-theyll-soon-win.html
  Mike Elgan提到大約四年前,也就是2010年左右,當時的「懸浮操控」被認為是遊戲以及PC人機介面的操控趨勢,專門開發3D體感技術的公司Leap Motion在當年成立,微軟也發表了以語音及手勢操控的Kinect for Xbox 360;當時微軟的Kinect剛推出不久,有一段時間是當時銷售量最快的Xbox遊戲機附加配件,但熱潮過了之後,遊戲玩家們和遊戲開發商對於Kinect的興奮度就完全平息了,而且直到現在微軟的Xbox One促銷活動中早已不見Kinect配備,此外Leap Motion在當年所推出的,宣稱比Kinect技術精確200倍的Leap Motion控制器在消費市場上也未見成功,讓我們不禁想問,為什麼大家對於「懸浮操控」不感興趣?
    Mike Elgan認為與生活應用脫節」是這些強調懸浮操控技術」的產品們失敗的主要原因,因為天平另一端的使用者是實實在在的人類,廠商將炫麗科技硬加在不需要的層面上,雖然暫時性獲取了大眾的目光,但終究消費者們會發現這些產品一點實用性也沒有;「懸浮操控」的本質是一種人機介面技術,它擔負的應是人與機器之間溝通橋樑的角色,但是大部份的「懸浮操控」技術僅強調於「操控螢幕上的某個虛擬物品」這個應用層面,這類的應用都需要使用者揮動雙手來操控某個「好像在那裏」的虛擬物品,僅有空氣觸感與缺乏視覺回饋,這在一般人的生活體驗中並沒有類似的情景,它完全脫離了人類的日常生活行為與習慣,使得「懸浮操控」對於使用者來說變成了一種不自然的動作,一種被迫要求配合的種種怪異且抽象的持技,因此想當然爾,很快的使用者便會感到厭煩並且把它們移置冷宮。
那麼,到底「懸浮操控」應該加強那些方面的應用才為大眾所接受呢?Mike Elgan認為應該要著重在「增強虛擬實境的體驗」以及「溝通」這兩個應用方向。

一)增強虛擬實境的體驗(Virtual and augmented reality)

他舉了Leap Motion在本週推出了價格僅$20美元、塑膠材質的的小配件為例,這個配件可以將Leap Motion的controller安裝在另一家公司Oculus Rift的頭戴顯示器上,以便於將Leap Motion Controller與頭戴顯示器整合在一起。(Oculus Rift在今年三月被Facebook以20億美元收購,它主要產品是虛擬實境系統的研發);Mike Elgan推薦我們看看Leap Motion針對這個玩意所推出的demo影片,在這影片中有兩個分別透過Oculus Rift所看到的左右眼立體畫面,在影片中可以看到Leap Motion針對手臂、手掌以及手指進行極為精確的偵測來與使用者所看到的虛擬畫面相互結合及互動。
Oculus Rift透過這技術,應用在實境強化augmented reality(將虛擬物體疊加在使用者肉眼所見的實際環境上)以及虛擬實境(使用者所看到的是模擬實際場景的虛擬人工畫面),讓使用者能透過雙手雙腳在虛擬環境下進行互動,這樣的技術可應用在遊戲、社交以及專業領域上(例如醫生可以從遠處來控制機器人進行醫療或開刀行為),因此Mike Elgan他提到希望Facebook趕快併購Leap Motion並且將它整合到Oculus Rif頭戴顯示器中,好將這類的應用儘快實現,因為這樣結合高精度移動偵測的控制技術讓,可讓使用者在虛擬的環境下得到與實際環境的體驗相同的反饋,是一種懸浮操控成功的應用案例,且在未來也是需求漸增且持續看好的領域之一。
除了這項應用領域,Mike Elgan還提到了下面一項應用:溝通

二)溝通(Communication)

  1. 虛擬助手

Mike Elgan說認為接下來五年內,虛擬助手(virtual assistants)的功能將會無處不在,例如蘋果公司的SiriGoogle的Google Now以及微軟的Cortana(我突然想到了亞馬遜的May Day,但它是即時的真人線上客服而非虛擬客服),這類的服務將會整合到使用者介面中,應用在不同apps以及各式網路應用上。
提供這類虛擬助手服務的廠商們彼此競爭,其中有一個致勝關鍵點在於是否加入偵測功能來感知使用者情緒並依據不同情況選擇適當的溝通行為;實際上SiriGoogle NowCortana這些系統目前都已經擁有某種程度的自我學習功能,它們會自動定期掃描你目前的資訊,如時間、地點、行事曆內容、email、聯絡人等等並作出適當的回應(這項技術稱為「getting-to-know-you」)。
而在未來,Mike Elgan提到這類虛擬助手的功能將會持續發展,還會化被動為主動自動提供相關資訊並觀察你是否喜歡,最重要的是將「懸浮操控」技術整合進來,以便偵測你講話的音調、使用的語句、目部的表情、手勢動作和身體姿態來進行判斷並給予相對應的建議,換句話說,未來「虛擬助手」功能會跟人類一樣能接收對方的身體語言,當「虛擬助手」發現它所提供的某項資訊讓你或對方產生不好的情緒或反應,那麼它下次就會主動改進並調整,因此虛擬助手在未來將會使用「懸浮操控」技術去瞭解並感知人類行為。
這是一段我在YouTube上找到的SiriGoogle NowCortana比較影片,看來各有勝負,後起之秀Cortana的表現相當不錯,Siri則沒有想像中那麼強,雖然目前這三種系統尚未加入Mike Elgan建議的「懸浮操控」技術,但未來若能夠加入相信會更具實用性:https://www.youtube.com/watch?v=Hg8mjR1TCNs

  1. 社交圖示

除了作為人與機器之間溝通的方式,Mike Elgan強調「懸浮操控」亦可應用在人與人的溝通之中,例如「社交圖示」和「替身圖像」這兩種應用。
有沒有發現最近的傳訊或貼文軟體都支援表情符號(emoji)的功能?透過一個簡單的圖示便能表達你目前的情緒或感覺,當然對於一些人來說,會覺得這類的功能可能僅是花俏或噱頭,但實際上,簡單且快速的雙向溝通在目前的網路行為上已經成了一種趨勢,而我們可以利用「懸浮操控」快速的將肢體語言轉化為文字訊息,例如,當你微笑時,要傳送的訊息上便自動附加微笑的圖示,當你開懷大笑時一個LOL的圖示便自動附上(LOL是laugh out loud的縮寫),此外像是聳肩、晃手、大姆指朝下、拍額頭、抓下巴…等等,你所發出的這些身體語言電腦都可以即時的自動附加到你要傳送的文字上。
  1. 替身圖像stand-in avatars

    人總是害羞的,這也是為什麼影像聊天一直無法興起的原因(對此我表讚同,大部份人在使用聊天或傳訊軟體時除非必要,否則絕對不會開啟視訊功能,且全然不是因為頻寬的原因),如果能夠用圖像方式轉換實際的面孔與情緒,那麼web camera開啟的接受度就會比較高了。
  實際上替身圖像這項技術的研發已經超過20年了,目前比較可行的是頭部和臉部的圖像替身技術會先被開始使用,再來則是全身的圖像替身,而Mike Elgan認為替身圖像是未來Xbox Kinect和Leap Motion應該要跨入的功能之一。
  這是今年在集資網站indiegogo.com的一個專案FaceRig,可透過web camera將你的表情轉換為其它的圖示,已在二月完成集資,原訂集資12萬美金,結束時集資的金額已高達30萬美元。
除了Leap Motion,Intel也積極投入相關體感的領域,例如下圖這是今年中旬英特爾在台北Computex 2014公開RealSense技術其中的一項替身圖像應用real-time avatar with faceshift,相當有趣,可直接點擊此連結:https://www.youtube.com/watch?v=2lGNrGoGWgU 來觀看。
關於Intel的RealSense技術,如果您有興趣的話,也可以到http://www.intel.com.tw/content/www/tw/zh/architecture-and-technology/realsense-overview.html看看。

2014年9月19日 星期五

第三方支付

  最近,關於第三方支付的法令在台灣吵得沸沸揚揚,好似欠缺第三方支付相關法令已成為台灣電子商務發展遠遠落後於中國的表徵,真是如此嗎?到底第三方支付是什麼?
    下面我們來瞭解第三方支付的內容、第三方支付興起的原因,以及台灣發展第三方支付的歷史,順便看看台灣最近準備送交立院的「第三方支付專法」所開放的三項業務,最後我們再看看為何台灣在第三方支付為何落後於其它國家,以及Apple Pay對於第三方支業者的影響。

什麼是第三方支付?

    其實第三方支付在台灣的正式名稱是「提供網路交易代收代付服務」,它的官方定義如下:
第三方支付是指在交易雙方當事人(買方及賣方)間建立一個中立的支付平台,為買賣雙方提供款項代收代付服務。」請參考http://www.cpc.ey.gov.tw/News_Content.aspx?n=CC07D24EB979D539&s=902A5FD7C3276DFC
    從該定義中,我們可以知道所謂第三方支付」中的第三者」,就是指買方與賣方之間存有第三者,也就是,原先買賣雙方是銀貨兩契一手交錢一手交貨的,但是基於某些原因,必須經由第三者來保障雙方交易的安全性,於是買方不直接把錢交給賣方而是交給第三者,由第三者通知賣方說錢已收到可以出貨了,賣方才將貨品寄出,等到買方收到賣家寄出的商品後確認沒有問題,再通知第三方商品無誤可以給錢,於是第三方才將貨款撥給賣家,這種經由第三者來執行收款與撥款的動作,稱為第三方支付。
但是沒有人願意把單純的事情變得更複雜,尤其在錙銖必較的商業模式中更是如此,愈複雜的交易手續只會帶來愈多的成本與時間浪費,那麼為什麼需要透過第三方來進行這種收款與撥款的金流服務呢?

需要第三方支付的原因?

    基於下列兩種因素,導致了第三方支付的需求產生,且這兩項因素都是同時發生的,只要缺少其中一種,就無法形成第三方支付的需求。
「買賣動作無法達成同時履行」「雙方缺乏信任基礎」
    當買賣雙方無法同時進行一手交錢一手交貨時,而雙方又欠缺互信與共識,擔心付款了但你不出貨,或者出貨了你卻不付款,在這種環境下,就會促發第三方支付的服務需求產生,以便透過第三者來保障雙方買賣的能夠順利進行,也就是,買方只要付出去的錢短暫經過賣家以外的第三者(可能是銀行、超商、金流業者或網購平台業者),都可廣義的稱作第三方支付。
    以下兩種並不足以促發第三方支付的需求產生:
1.「買賣動作可以同時履行」但「雙方缺乏信任基礎」:
    「買賣動作可以同時履行」代表雙方是在面對面的場合下進行交易,但是買賣雙方卻缺乏互信,可能擔心買方會搶了就跑或者賣方給的是假鈔等等,這種場合在電影或黑道猖獗的國度比較容易發生,在台灣我們基本上可忽略這種狀況。
  但是「雙方缺乏信任基礎」的交易環境,有可能是影響「買賣動作同時履行」與否的重要因素,因而間接導致第三方支付的需求產生,但這是一種非正常的特例情況。
2.「買賣動作無法同時履行」但「雙方具有信任基礎」:
在一個具有良好的消費者保護規範環境下,我們一般都會信賴廠商並且在其網站上購買商品,可能是透過信用卡刷卡、ATM轉帳、或儲值消費等等,我們並不會擔心付款後收不到貨,因為有客服系統、退貨保證或者消保官可以申訴。
  因此,「第三方支付」能夠發揮其功能的空間在於「買賣動作無法達成同時履行」且「雙方缺乏信任基礎」的環境,上述兩個狀況並不會導致「第三方支付」的需求產生。

台灣第三方支付的發展史

    接下來,我們來看看第三方支付在台灣的發展歷史:

    一)2000年:從網路交易代收代付開始

台灣的第三方支付業務最早可以溯及在千禧年左右時成立的紅綠藍三間公司,依成立的順序分別是:綠界1996年、紅陽1998年以及藍新2000年。
會促成這三間公司成立的原因是:最早的網路金流就是從信用卡交易開始,但網路是非面對面的交易,沒有消費者簽名簽單可判斷商家是否已經完成商品交付,也無法判定持卡人的真偽,因為很容易有盜刷的問題,使得銀行對於信用卡的特約商店管制甚嚴,並設下成立需滿一年、資本額達500萬以上、公司月營業額也需有一定金額、是否有開立發票等等門檻,使得當年大量的網路及電子商務公司都跨不過收單銀行的門檻,無法在網路上進行刷卡交易。
因此一些資訊公司除了協助客戶架設系統之外,亦自行變通,自己申請信用卡特約商店後再來替商家們代收買家的貨款,扣除手續費後再將款項撥付給購買或租用系統的商家,於是這些資訊公司變慢慢演變提供了專門的針對B2C的「代收代付服務」。
  但早期這些第三方支付並沒有提供履約交易保證、信託、儲值、糾紛排解或是物流等衍生出來的配套服務,僅單純提供信用卡資訊傳輸、線上支付之服務,因此僅僅是解決中小型商家無法與收單銀行簽約的問題,對於買家來說並沒有任何安全上的保障。

二)2004年:台灣第一個第三方支付平臺

藍新科技在2004年仿效Paypal推出ezPay服務,讓用戶可以透過ezPay轉帳來繳付水費、瓦斯費、電費,並與雅虎拍賣合作讓網拍的商家們可以透過ezPay來進行收付款等業務,促成了像東京著衣等大型網拍業者的興起。   

三)2006~2008年:卡神等事件導致第三方支付無法提供刷卡服務

2006年爆發了卡神事件影響到台灣第三方支付的發展,楊惠如利用ezPay服務頻繁的刷卡儲值到ezPay累積紅利點數,所得的點數用來換取機票或高價贈品再行轉售,另外ezPay的儲值則轉帳到親朋好友的帳戶,並透過好友將金錢領出,如此一來完全沒有發生買賣的行為;本來不會有人知道她利用此漏洞刷洗銀行的紅利點數,但是她自己在網路上公佈她是如何地佔銀行便宜,因此被銀行發現後對她提告,此事件也引發金管會的重視,並加強對於業者行為的限制,最後銀行終止與藍新科技的合作。
再加上後來亞力山大、佳姿等爆發的健身房分期付款、禮券等遞延性服務糾紛,使得金管會於2008年底要求所有信用卡收單銀行,必須直接與可接受刷卡的特約商店簽約,導致過去紅綠藍等公司及各金流平台先與收單銀行簽約,再讓個人商家透過金流平台進行信用卡收付的模式不再可行,在此種限制之下,使得盛極一時的第三方支付工具市場,如ezPay等第3方支付工具一蹶不振,紅陽、綠界、藍新等經營金流服務的公司也聲勢不再。

四)2013年:正式開發放謂的「第三方支付」

其實如前所述,台灣早已有業者在進行相關的第三方支付服務了,但一直未有正式條文予以明確的規範;在業界的壓力下,金管會於2013年備查並通過銀行公會提出的網路交易代收代付服務自律規範,只要網拍個人賣家與網路平台業者簽約,成為特約商店,就可接受信用卡付費,消費者網購可刷卡先付款給網路平台,待確認消費者取得貨物或服務後,網路平台再付款給賣家。
在這個正式的明文規定下,網路平台業者必須在銀行做履約保證或交付信託,並有銀行的保證讓小商家可以拿到錢,而小商家藉由網路平台業者,本身也可接受買家用信用卡付款。

五)2014年:「第三方支付專法」

在2013年通過的網路交易代收代付服務自律規範僅開放了信用卡刷卡交易,並未開放其它交易發式及業務,在相關業者的要求下,行政院於2014年9月通過「第三方支付專法」,將以優先法案之姿,送入立法院審議。
第三方支付專法全名為「電子支付機構管理條例草案」,最主要的項目,是開放了「線上儲值」、「O2O交易服務」、「無實體交易匯款」等三大業務,我們看看這三項服務的內容是什麼意思。
「線上儲值」大家從字面上大致可以瞭解這項業務的內容,之前發生的數字科技吸金事件,就在於政府尚未開放非銀行業者進行線上儲值的業務,但數字科技卻早已在他們的遊戲虛擬寶物交易平台上讓玩家們以現金、刷卡方式購買虛擬貨幣以「T點」名義儲值,導致被冠上了吸金的臭名。
「O2O交易服務」的O2O,指的是Online to Offline,翻成中文是線上對線下,聽來有些難懂,但您只要瞭解,在電子商務裏,Online指的是線上的交易,而Offline指的是非網路的實體交易,因此,Online to Offline就是指在網路上進行付費,但是在實體的商店享受服務或取得商品。
咦?您可能說,這不是老早以前就有了嗎?我在網路上付費買了電影票,改天再去電影院看不就是了嗎?你說的沒錯,但其實你如果買的是儲值的虛擬點數且沒有實體儲值卡片,那麼目前你是無法到電影院去看的,而這次開放的O2O,最主要的目的,是讓消費者在網路上的虛擬貨幣(也就是你儲值的金額或看不見的虛擬點數)也可以用在實體的商店消費,而非只能僅限在網路交易上使用;例如,夜市攤販或小吃店他們可能無法申請信用卡刷卡設備,但他們可以與相關第三方支付業者合作之後,提供二維條碼讓您使用手機掃描從你的網路儲值帳戶中扣款結帳,這是未來o2o服務最常見的應用。
「無實體交易匯款」中的無實體交易,指的是像電子書、音樂、手機簡訊、算命等等的數位商品的交易行為,而匯款指的是與另外一個網路儲值帳戶(非銀行帳戶)之間的轉帳匯款;這類實體商品交易有一個特性,就是購買次數頻繁且金額小,每次單筆交易金額可能只有5~10元,屬於一種小額付款的系統,轉帳付款並不會收取額外的交易費用,但是若使用線上刷卡、ATM轉帳、線上匯款等這類則會產生額外代收費用,因此無實體交易的付款方式並不適合使用常見的網路付款方式,必須採用特殊不會產生額外費用的匯款方式。
此外,「無實體交易匯款」這個業務的另一個特性,是讓網路上的儲值帳戶彼此也能像銀行帳戶一樣相互進行轉帳移轉資金(點數),因此可以開發出不同的應用與商業行為,例如網路紅包、自動化的繳費服務等等。

為什麼台灣第三方支付的發展落後於其它國家?

其實台灣的電子商務的發展與其它國家相較還算是領先的,但是最近在第三方支付的爭議之下,鬧得好像台灣電子商務的發展遠不如中國大陸,甚至於非洲肯亞的第三方支付都作得比我們好,真的是如此嗎?為什麼?
我認為主要有以下的原因:
  1. 台灣的電子商務環境對於第三方支付需求不高:
目前檯面上吵著需要第三方支付的都是業者,但其實台灣的消費者對於第三方支付的需求並不是那麼強烈,主要原因有以下幾點:
  1. 電子交換金融環境的發達
台灣的電子金融環境可說是全球第一,在2000年就可達到跨行當日即時到帳,甚至於3:30之後的跨日轉帳交易,亦能即時入帳完成,而且達過網路ATM方式便能迅速轉帳。
  1. 普及的信用卡持有率
台灣的信用卡普及率相當高,每個人平均有2.8張的信用卡,使得台灣的消費者在進行B2C交易時習慣使用信用卡進行交易,而這種以信用卡交易的行為,在台灣的B2C交易上就佔了八成以上。
  1. 方便迅速的貨到付款、取貨付款以及綿密的超商網路
若擔心匯款後對方不寄貨,台灣的消費者多會採用貨到付款或超商取貨付款的方式,而這種模式在C2C網站(如Yahoo和露天拍賣等)最為常見,平台業者也都有提供此類服務的選項。
  1. 嚴格的消費者保護機制
目前的電子商務購物平台,在政府嚴格要求下都有退貨及退款機制,C2C的拍賣平台也有完善的買賣評價及快速的貨到付款、超商取貨等服務;此外信用卡交易的持卡人,即使沒有保護好自己的個人資料而被不法之徒盜用,持卡人只要通知銀行否認交易並拒付,所有費用仍由商家自行吸收。
  以上四點基本上已經涵蓋並保障了了台灣民眾大部份的B2CC2C的需求,因此第三方支付在台灣並沒有像目前的中國大陸或是20年前的美國一樣有蘊育的土壤存在,這也是為什麼近年來都是廠商要求開放,民間消費者卻不積極的原因。
  1. 保守的心態與銀行的制肘
  除了可能會出現洗錢、套現等等問題之外,第三方支付也給銀行傳統的支付體系監管帶來了全新課題,因此政府的心態是相對保守嚴謹的,從負責「第三方支付」的單位是金管會而非經濟部就可看得出來:經濟部對於產業發展抱持著「推動」的心態,而金管會則相反,以「管制」為中心法則。
  由於第三方支付的開放會讓其它非銀行業者跨入原有的業務而產生排擠效應,且銀行業者本身在需要專業技術的第三方支付產業並不若網路業者熟稔,因此心態上比起政府更為抗拒,在歷次針對相關的立法院修法當中,銀行業者就多次地透過立委以護衛自身的利益。

Apple Pay對於第三方支付產業的影響

    第三方支付」在互不信任的買賣雙方中所扮演的角色,是作為公正的第三方金流平台,整合了各種收款工具,例如信用卡、ATM轉帳、儲值、預付、點數購買等等方式,提供消費者更多的付款工具的選擇。
    而Apple Pay則是一種移動支付(手機付款)的工具,論其本質則是屬於一種透過網路進行付款的新形態,它需要使用者先將信用卡綁定在手機上(透過掃描),然後將手機當成信用卡利用NFC來刷卡,使用Touch ID(指紋辨識)來代替簽名,整個過程中Apple並不會參與到任何交易的環節,也不會獲取到相關的資訊,例如信用卡資料、指紋、金額、購買的商品等等。
    因此,如果Apple有開放其它非信用卡業者也能綁定他們的帳戶儲值在Apple Pay中,而非僅能綁定信用卡和iTunes帳戶,那麼我們就可以將Apple Pay視為另一種新型的付款工具,未來第三方支付業者就能將Apple Pay作為另一種付款工具提供給消費者使用。
  目前看來是可能的,因為透過支援更多的金流種類更能擴大Apple Pay的使用族群,目前Apple已提供Apple Pay與第三方App串接支付功能的服務,首波公佈支援的第三方付款公司有Authorize.Net、Chase Paymentech、CyberSource、First Data、Stripe、TSYS等等,不過,知名且使用者眾多的Paypal旗下處理第三方App支付服務商Braintree卻不在名單上頭,另外,日前還傳出iPhone所內建的NFC功能己經鎖定僅能使用於自家的Apple Pay,無法支援其它公司的NFC付款功能,因此,短期內各開發商將無法利用Apple Pay的API來開發自己的付款應用,看來,未來Apple Pay若真的開始風行,Apple對於Apple Pay的開放態度將是影響第三方支付產業的一個重要因素。

2014年9月12日 星期五

CodeIgniter PHP Framework

    CodeIgniter是一套小巧但功能强大的 PHP 框架,它有完整且清楚的使用說明、使用族群眾多、有完善的社群與討論支援、不需安裝(解壓到網站目錄下即可)、執行速度快效率高、具有標準的MVC架構等等,相當適合個人及中小企業在開發時使用;我推薦它的主要原因有三點:一是安裝容易、二是它的學習門檻低,三是它的架構相當清楚,這三項優點對於剛接觸PHP的新手或正在找尋適用的PHP框架人員來說,是相當值得列入考慮的。
  我在本文將介紹怎麼設置Codeigniter的開發環境,如何與Bootstrap進行整合,並且怎麼樣利用一些免費的Bootstrap樣版,快速製作出適用於手持裝置及PC的跨平台網站。

PHP是目前最流行的伺服端語言

  PHP是目前最流行的後端網頁開發語言,大多數初跨入IT領域的人若是想要學習後端開發立刻聯想到的語言就是PHP,這個語言看似歷史悠久,但其實它也算是年輕的程式語言,約20年前1995年的時候,由丹麥程式設計師由勒多夫(Rasmus Lerdorf)所開發,它屬於開源的程式碼,使用PHP完全是免費的。
  依據w3techs.com最新的統計資料顯示(2014年八月),全球有高達82.2%的網站是使用PHP開發,其次為ASP.NET,再依次為JAVA與ColdFusion。
  但是這個統計並不是嚴格的統計,因為只要網站有一部份使用到了PHP語法,便會歸到PHP,而實際上,大部份的Linux web伺服器在預設安裝時便已把PHP作為預設安裝選項了,因此這個統計值可能包含了很多架設於Linux web server的純HTML的網站,所以比例會偏高。另一個比較客觀的比例應該是PHP與ASP.NET的比例約在2:1左右(來源:http://trends.builtwith.com/framework
  我在開頭指出PHP使用比例特高的原因,並不在於強調PHP有多麼流行,而在於說明PHP作為一個普遍廣為使用的網頁語言,它不僅適用於剛入門的程式開發者,也適用於個人、團體及至於企業的網站用途;大陸知名的網站掏寶網於2003年成立時,就是用$2000美元購買了一套PHPAuction的網站樣本加以修改後推出的,這個LAMP架構的掏寶網站系統(Linux+Apache+mySQL+PHP)用到2004年初,商品累積到四百多萬、每日的PageView四千多萬、註冊會員人數400萬個、成交金額達10億人民幣後,mySQL因逐漸支撐不住才改換為Oracle Database,而當時的後端開發語言則一併由PHP更改為JSP;另外,下表的資料來自於維基百科,是一些知名網站所使用的前端與後端及資料庫的統計表(http://en.wikipedia.org/wiki/Programming_languages_used_in_most_popular_websites),其中Facebook一開始是單純的PHP網站,後來才加入其它開發語言的支援。
JavaScript
Hack, PHP, C++, Java, Python, Erlang, D,[5] Xhp[6]
Flash, JavaScript
C/C++, Python, Java[8]
MySQL, BigTable
JavaScript
PHP
JavaScript
JavaScript
ASP.NET
Microsoft SQL Server
JavaScript
PHP
MySQL, MariaDB[10]
JavaScript
Python
BigTable
JavaScript
ASP.NET
Microsoft SQL Server
JavaScript
MySQL[12]
JavaScript
PHP
MySQL
JavaScript
Java, J2EE, C++, Perl

JavaScript
Java[13]
JavaScript
Java, Scala, JavaScript (Node.js)

JavaScript

CODEIGNITER環境設置

    在開始之前,請先準備好一個可以執行mySQL 和 PHP的環境,如果您有Linux平台,那麼應該知道怎麼去安裝設定一個LAMP的環境,如果您是使用Windows的系統,您也可以下載安裝這些已包裝好且容易安裝設定的Windwos版LAMP軟體,如WAMPWinLampEasyPHP等等。
  1. 下載CodeIgniter並解壓縮

  CodeIgniter的網站在https://ellislab.com/codeigniter,中文版的位址在http://www.codeigniter.org.tw/,在其下載頁面目前最新的版本是2.2.0;下載之後解壓縮,將全部的檔案放置於我們網站的根目錄之下(如下圖,我們將CodeIgniter_2.2.0目錄下的檔案除了user_guide和license.txt用不到以外,全部皆放到C:\Apache2\htdocs\的預設網站目錄下的myNewWebsite這個新增的資料夾)。

  1. 在mysql新增資料

請開啟phpMyAdmin(在您使用LAMP程式安裝後,此網頁版的資料庫工具應該也會一併安裝),我們先建立一個稱為myweb的資料庫,再於其下建立一個名稱為users的資料表。
users這個表格共有四個欄位,您可以參考下方的圖示來手動建立,或者直接執行下方的SQL程式碼來產生。





    users資料表產後後,我們輸入二筆資料,當然,您也可以複製下方的SQL碼來執行:
    或者執行下方的SQL也可以新增此兩筆資料。




  1. 設定Codeigniter的開發環境

剛下載的CodeIgniter檔案,我們只需要更改二個檔案的內容,就完成了CodeIgniter環境的設定,可以開始使用了。
    1. 編輯C:\Apache2\htdocs\myNewWebsite\application\config\ config.php,修改$config['base_url']的內容如下:
$config['base_url']    = 'http://localhost/myNewWebsite/';
    1. 編輯C:\Apache2\htdocs\myNewWebsite\application\config\ database.php,將相關資料庫的資訊輸入,如此一來,我們在操作DB時便可直接在程式中呼叫,CodeIgniter會替我們處理其餘的動作:
    基本上,作完上述步驟,CodeIgniter的基本環境便已經完成了,可說是相當的簡單;我們作個測試,在瀏覽器輸入http://localhost/myNewWebsite/網址後,就應該出現如下圖的頁面,這是CodeIgniter成功運作的預設畫面:

CODEIGNITER是如何運作的?

  在下方我將介紹CodeIgniter的資料夾配置及運作方式和流程,有了這基本概念後,您就會對於如何在CodeIgniter環境下撰寫PHP程式有初步的概念。

  1. Codeigniter的檔案配置

    在剛剛解壓後的目錄下,您應該會發現C:\Apache2\htdocs\myNewWebsite的根目錄下有一個index.php,另外,我們比較關心的還有在application目錄下的controllersmodels、views等三個目錄,它們分別代表了MVC架構(Model / View / Controller)的三個目錄,也是我們程式以及頁面主要放置的地方。
  1. Codeigniter的運作流程

  下圖是CodeIgniter運作的流程,下面我會說明這些主要的步驟,但是您不需要完全瞭解,只需要知道CodeIgniter在接收到使用者需求並回傳網頁之前,會替您作這些動作。
  1. 當使用者存取網站時,最上層的index.php這個網頁是CodeIgniter最前端的控制器,它會啟始化所需的資源並執行CodeIgniter。
  2. CodeIgniter的Routing程序(C:\Apache2\htdocs\myNewWebsite\application\config\routes.php)檢查使用者呼叫的網址,決定如何處理或導向。
  3. 如果在Cache(快取)中有被呼叫的檔案,則直接回傳給使用者,不需要往後傳送。
  4. CodeIgniter security檢查機制:在往後傳送給CodeIgniter Controller前,會先針對該HTTP Rrequest以上傳的檔案(如果有的話)進行檢查。
  5. CodeIgniter Controller載入model(資料庫)、core libraries pluginshelper以及其它與該HTTP Request相關的資源。
  6. 最後產生的View(html頁面)會傳送給使用者端,如果有啟用cache功能,則會將該頁面保留在cache中。
  1. Codeigniter的MVC流程

請參考下方的流程圖:
      1. 最左方的BROWSER代表使用者,他發出了一個HTTP Request,此Request會先由Controller來接收。
      2. 若有需要資料的提供,Controller會發出請求請Model執行,Model執行後將結果回傳給Controller
      3. Controller收到Model提供的資料後傳給VIEW,VIEW產生所需的頁面並將相關的資訊放入,再將此頁面回傳給Controller。
      4. Controller收到VIEW製作好的頁面,將此頁面傳給使用者觀看。

http://bernard-very.com/wp-content/uploads/2012/08/mvc-architecture.gif
我們會發現,Controller是整個MVC流程的核心所在,所有的動作都是由Controller發出,而Model與View這兩者之間並不會直接聯繫,都必須透過Controller;另外,我們必須留意到,CodeIgniter所需要的網址格式是由Controller的名稱加上功能名稱及參數組合而成;例如,一個標準的CodeIgniter網址是:
http://example.com/class/function/ID
   第一段代表的是控制器(controller)啟動的類別(class)
   第二段代表的是類別(class)函數(function) 或者是 method 被呼叫使用。
   第三段之後,代表的是 ID 或是任何變數準備要傳遞給控制器(controller)所使用。
在稍後進行的範例中,您就會看到我們使用的網址格式。

CODEIGNITER與Bootstrap的整合

將BootStrap整合到CodeIgniter之後,我們就可以套用眾多的BootStrap樣版主題或者利用相關的cssjavascript等等資源,快速的將網站的外觀進行美化。

  1. 整合Bootstrap

    1. 下載Bootstrap檔案並解壓:
      1. 首先到http://getbootstrap.com/下載最新版本的Bootstrap(目前為v3.2)
      2. 解壓後有三個目錄,直接放在網站的根目錄(C:\Apache2\htdocs\myNewWebsite)下。
      1. 修改網站根目錄下.htaccess的內容:如果沒有此檔案請新增一個,檔案內容如下



為什麼我們要作這個更改?
RewriteRule ^(.*)$ index.php/$1 [L,QSA] 
index.php這個檔案從URL中隱藏,讓網站網址更簡捷且更安全,例如,原先的網址如果為http://localhost/myNewWebsite/index.php/update_pwd,就可以縮短為http://localhost/myNewWebsite/ update_pwd
RewriteCond $1 !^(index\.php|images|css|js|fonts|robots\.txt|$)
在縮短了網址之後,CodeIgniter可能會找不到原先放置於根目錄下的css, js, fonts等等目錄(會跑到controller下找),所以我們必須加入此行以宣告這檔案或目錄不受影響。
  1. 套用Bootstrap網站主題樣本

  提供Bootstrap樣本主題的網站有很多,有些是免費有些則是收費的;我們先到http://startbootstrap.com/這個網站下載一個免費樣本來試試。
在這裏我先選擇中間那個主題樣本,按下Preview&Download,我們發現Bootstrap的主題樣本就是一個完整的網站,包含了整個網站所需的Bootstrap、JQuery、css等相關檔案。
  1. 我們依照前述的整合BootStrap的方式,將整個樣本的目錄放到網站根目錄之下。
  1. 您還記得上個章節中我們有修改.htaccess這個檔案嗎?由於這個我們在根目錄下除了css、fonts之外,還多了font-awesome-4.1.0、img這兩個資料夾,因此,我們必須再將這兩個資料夾名稱,放在RewriteCond中,以避免CodeIgniter找不到。



  1. 複製網站樣本的index.html內容到C:\Apache2\htdocs\myNewWebsite\application\views\ welcome_message.php
  2. 測試,輸入網址http://localhost/myNewWebsite/,會發現網站成功的套用了樣本內容。
  1. 將BootStrap範本拆分為三大部份

  接下來,我們將此網頁拆分為headercontent、footer三大部份,content是我們主要的、會變動的內容,header與footer為不會變動的固定內容用include的方式自動引入,這樣的好處是,我們只要更改content相關的網頁,footer與header由於都是固定不變的內容,只要用引入的方式就可以了,可以大大減少網頁的體積,並且讓整體架構更清楚簡單。
      1. 在C:\Apache2\htdocs\myNewWebsite\application\views下新增一個pages資料夾,並在此資料夾下新增2個檔案:header.php與footer.php
      2. 用文字編輯軟體打開C:\Apache2\htdocs\myNewWebsite\application\views\ welcome_message.php,找到<body>標籤,將此標籤(含)剪下放置到header.php中。(如下圖紅框部份)
    1. 繼續針對welcome_message.php操刀,找到<footer>標籤,從此標籤(含)一直到最後全部剪下放置到footer.php中。(如下圖紅框部份)
    1. 用文字編輯軟體打開C:\Apache2\htdocs\myNewWebsite\application\controllers\welcome.php,將index() function的內容,再增加兩行來引入header.php 和 footer.php。(紅色部份)





    1. 改好後,我們再試看看,應該會出現同樣的畫面,只是這個畫面是由三個部份組合而成的。

呼叫MODEL取得資料

  直到目前,雖然網站可以運作了,但是只有Controller與View在工作,我們還沒有使用到Model的功能;現在,我們打算讓網站從資料庫中抓出使用者的姓名,並顯示在主頁上。
  1. 我們在model的目錄下(C:\Apache2\htdocs\myNewWebsite\application\models),新增一個名稱為user_model.php的檔案,內容如下:















get_users這個function會替我們抓出資料庫的users這個表格中所有的資料,如果有傳入account的值,則僅會抓出這筆account的資料。
  1. 接下來,我們要在Controller中去呼叫這個model,請打開welcome.php這個檔案(C:\Apache2\htdocs\myNewWebsite\application\controllers\welcome.php),修改index()這個function的內容如下:(紅色為增加的部份)














首先,我們先宣告了要使用user_model,當controller載入頁面時(index()為預設會觸發的頁面),會呼叫user_model得到資料,然後放到$data[‘users’]變數中。
$this->load->view('welcome_message',$data);
表示當controller從view要載入welcome_message.php時,則把放有資料的$data傳過去。
  1. 最後,我們要來處理view下的welcome_message.php這個檔案以便接收Controller傳過來的資料,請找到<div class="intro-message">標籤,參考下方紅字部份進行修改:




  有一點要特別注意的是,我們從Controller那邊丟過來的資料變數名稱是$data,但是在View接收時,data這層要移除(因為$data是默認的),因此,如果我們從Controller那邊定義的是$data['title'] = 'MODEL測試,那麼在View這邊接收時,只要用$title就可以了,同理,我們在Controller那邊將Model所傳回的資料以陣列Array的形式都放在$data['users'],所以我們在View要使用時,就要用$users[1]['realname'];來取得第二筆,欄位為realname的資料。(您可以用print_r($users) 這個function來檢視全部array的內容)。
  執行結果如下,我們可以看到,

最後

    如果您有依照上述的步驟來進行練習,您會發現我所示範的順序是:
解壓CodeIgniter到網站目錄下 → 將BootStrap檔案整合到CodeIgniter → Controller透過Model讀取資料並經由View顯示。
如果仔細觀察的話,您會發現在示範中的Controller名稱是welcome.php,那麼,您應該會有一個疑問(如果您有仔細閱讀的話),依照http://example.com/class/function/ID這樣格式的定義,我們輸入的網址不是應該為http://localhost/myNewWebsite/welcome才能呼叫welcome.php這個controller才對不是嗎?但我們在示範中使用的卻都是http://localhost/myNewWebsite/沒有Controller class名稱的網址?
其實祕密叫在CodeIgniter的config資料夾下面的routes.php檔案中,請把這個檔案打開來看,您會看到下面這行:
$route['default_controller'] = "welcome";
    這行的功用就是,告訴CodeIgniter網址中若沒有指定的Controller,預設就載入welcome controller,所以這是為什麼我們只要輸入http://localhost/myNewWebsite/ 就會直接開啟welcome.php的原因了!而且當CodeIgniter載入welcome.php之後,它預設就會開啟index()這個function,而我們已經在index() function當中定義了要先透過model取得資料,再將資料丟到view去顯示(請參考第18頁),所以這是CodeIgniter route的功用之一哦,它可以縮短並簡化網址。
        $this->load->view('pages/footer');
    }