認知教學應用於閱讀學習 / Apply Cognitive Teaching On Reading

這是我個別研究的課程中提出的報告。這份報告是希望基於認知學派的觀點，以概念圖(concept map)的方式來評鑑閱讀學習成效。我藉此提出一套從閱讀過程中建構知識體系的閱讀方式。

This is my report in "Individual Study". Based on the cognitivism, I described a method that using concept map to evaluate the effect of reading. And I want to develop a annotation scaffold to help readers construct their knowledge.

參考書目 / Bibliography

李咏吟（1998）。認知教學 : 理論與策略。台北市：心理。

閱讀之認知教學設計 / Apply Cognitive Teaching On Reading

• 檔案下載：Google雲端平台、Box.net、SkyDrive

這份投影片先從行為學派與認知學派來看待閱讀學習，闡述我認為以認知學派看待閱讀學習的必要性。然後介紹用建構主義的方式來建構閱讀所學習的知識。而建構成果的知識體系，則可以概念圖的方式呈現。

至於閱讀過程中要如何建構知識體系，我提出了四階段的閱讀標註鷹架。學生透過四個階段鷹架的閱讀，將可以有效地深入思考文章與自身的知識，並轉化為自己的知識體系。最後再提出合作式閱讀學習環境中利用協同過濾來設計輔助機制的方法。

數位學習與圖書資訊學的關係 / The Relation of Digital Learning And Library

• 檔案下載：Google雲端平台、Box.net、SkyDrive

講到這兒，我總覺得同學總是對我的報告興趣缺缺。許多圖資學的學生都覺得管好那堆館藏或是檔案就好。讀者要怎麼用，是他們的事。我對此不以為然。

讀者會來到圖書館取用資料會有著他們的需求與目的。了解讀者的需求，然後進一步幫助他們更快、更有效地取得他們要的資料，是圖書館員不斷努力的目標。

數位學習是一個改善圖書館的著手點。而且同樣都是社會科學的研究方式，數位學習有許多研究方法是值得圖資學效法的地方。我希望圖資的學生們不要侷限於自己已經知道的知識與框架，要找到令自己成長、也能夠帶動圖資界向前邁進的方向啊。

結論：看待研究的角度 / Conclusion: The Viewpoint Of Research

我提出希望用學習的角度來看待圖資學的這個論點，最近曾被兩個人否定。一個人認為圖資學只要把知識架構整理好，讀者自然能夠找到他們最想要的資料。至於他們是為何而找，找到之後要做什麼，那就不是館員需要去關心的範圍；另一個人則覺得我嘴上無毛，沒有實際教學經驗也不懂教學現場，竟然妄想一步跨到教育領域來做研究。

對我的指導老師──那位與其他圖資老師作法截然不同的老師來說，他自然有他的一套說詞與堅持。而對他底下的學生來說，也只要照著他的話來做，應該就能順利畢業。

不過，我沒有想這麼多。我只是在想，我要整理一個好用的讀書方法，分享給那些仍有無限可能性的孩子們。於是這樣子，我就能夠對得起，以前那位不知道原來還可以這樣子讀書的自己了。

(more...)

合作式閱讀標註之標註行為特徵與閱讀理解關聯 / Cooperative Annotation Reading Study: Relation of Annotation Behavior And Reading Comprehension

今年2013年3月30日舉辦了第二屆數位合作學習與個人化學習研討會 (Taiwan CSCL & CSPL Workshop 2013)。我在第二天的CSPL場次中發表「合作式閱讀標註之標註行為特徵與閱讀理解關聯」。以下是我發表的文章與投影片，以及一些研討會的感想。

Taiwan CSCL & CSPL Workshop had been held on March 3, 2013. I presented my research “Cooperative Annotation Reading Study: Relation of Annotation Behavior And Reading Comprehension” in the CSPL session. Following is my research article and slide, and some of thoughts of this workshop.

摘要 / Abstract

本研究欲在合作式閱讀標註學習環境中探討標註技巧、標註共識與合作互動等標註行為特徵與學生閱讀理解成效之間的關聯。因此，本研究在知識標註學習系統中規劃閱讀實驗，並蒐集學生的閱讀標註行為特徵，結果發現標註範圍長度越短、針對名詞詞性標註以及採用重點標註策略的學生，其閱讀理解成效顯著地高於其他學生；合作互動頻率偏高的學生，則有閱讀指導需求的可能性；標註範圍位置和標註共識特徵與閱讀理解成效沒有明顯關聯。本研究結果可作為未來發展基於閱讀標註之閱讀輔助學習機制的參考。

• 【關鍵字】 標註行為特徵；合作式閱讀標註；知識標註學習系統；閱讀學習

報告文章 / Article

• 檔案下載：Google雲端硬碟、Box.net、SkyDrive

投影片 / Slide

• 檔案下載：Google雲端硬碟、Box.net、SkyDrive

結論：研討會心得 / Conclusion: My Experience of CSCL & CSPL 2013

如果知道我之前的論文在做什麼的人，應該可以發現這個題目其實是我論文的一部分。由於我的論文包含的內容比較多，在短短的研討會中難以論述。所以我從中取出機制的部份，作為合作式個人化學習的分享議題。

這算是我第二次在比較正式的場合發表我的論文。相較於CSCL的眾多聽眾，在小間教室進行的CSPL就比較小眾，我報告時也是開心地在台上一派胡言進行分享。當時聽眾還有我的論文口委侯惠澤老師，報這種閹割的內容真是有點不好意思，讓老師見笑了。

報告完之後，主持人林秋斌教授質疑我為何不使用Diigo來進行研究，而要自己寫一個KALS。後來回家查過之後讓我鬆了一口氣，因為Diigo跟我要做的KALS方向不太一樣，兩者各有其價值。詳細討論可以看我之前的文章。

第一天晚會時，很開心地跟恒惠去跟中央大學學習與教學所的同學一起聊天。一起吐槽老師、一起搞笑，然後一起討論研究。這種交流活動真是令人開心，這就是研討會的另一種醍醐味吧。

(more...)

研發團隊中電子郵件典藏與知識管理系統整合應用 / Integrated Application of E-Mail Archive and Knowledge Management System In Research & Development Team

這是我在電子文件管理專題的期末報告：「研發團隊中電子郵件典藏與知識管理系統整合應用」。我試著應用EMAIL-KM到我現在的實驗室團隊中，並以簡單的問卷與訪談來歸納研究成果。

This is my final report of "Electronic Records Management Project": "Integrated Application of E-Mail Archive and Knowledge Management System In Research & Development Team". I tried to apply EMAIL-KM to my current lab, and I did a simple questionnaires and interviews to summarize research results.

報告檔案 / Report Files

投影片 / Slide

• 檔案：Google雲端硬碟、Box.net、SkyDrive

報告 / Report

• 檔案：Google雲端硬碟、Box.net、SkyDrive

大綱 / Outline

這份報告的寫法是與研究論文一樣的架構，大綱如下：

1. 緒論：敘述為什麼我要做電子郵件典藏以及整合到知識管理系統(Knowledge Management System)的用意。
2. EMAIL-KM 電子郵件知識管理系統：系統開發、架構與操作介紹。詳細可以參考我介紹EMAIL-KM的一篇文章。
3. 研究方法：以設計研究法為架構，採單組實驗研究法來觀察EMAIL-KM於小型研究團隊中的成效。
4. 研究結果：從系統使用記錄、使用者意見回饋來分析成效。樣本數量不多，資料也不是很乾淨，但我還是努力分析看看。
5. 結論與建議：歸納研究結果，整理出EMAIL-KM需要改善的缺點，以及提出未來可以進行的研究方向。

結論：開心地寫報告吧 / Conclusion: Being Interested In Research

因為時間因素，我投注在系統開發的時間較多，而將EMAIL-KM導入實驗室的過程中就不是很用心，因此最後的研究結果實在是難登大雅之堂。

我本來是抱著當個小丑給大家看一下錯誤示範的心態在課堂中分享我的研究成果，不過令我意外的是，老師肯定了這份試著以正式研究的架構來進行的期末報告。「先不論資料收集的好壞，至少有個研究的型，這樣就很好了。」想想也是，課堂報告本來就是作為研究題目的墊腳石。努力地把一份報告寫成像是正式研究，也算是給學妹們一個榜樣吧。

不過，光是有研究的型，達不到研究的水準，這可無法令我滿足啊。這份報告我寫起來非常開心。不論是開發系統、整理資料、還是報告的撰寫，我覺得投注在這上面的時間可都是一種享受。而且一想到我可以用EMAIL-KM來幫助實驗室做些事情，那麼做起來就更有動力。

希望之後也有機會繼續朝這方向鑽研。不僅僅只是做一個好用的系統、幫助大家工作更順利，也能夠生產出一篇可以拿得出檯面、好好地跟大家分享的研究報告吧。

(more...)

EMAIL-KM介紹 / EMAIL-KM Introduction

這學期電子文件管理專題期末報告，我製作了一個典藏電子郵件與整合知識管理的系統，稱之為EMAIL-KM。以下是EMAIL-KM的介紹。

For completing the final report of “Electronic Records Management Project”, I developed a web system used for archiving email and knowledge management. This system is named “EMAIL-KM”. Following is the introduce of EMAIL-KM.

EMAIL-KM操作投影片/ A Slide About EMAIL-KM Operation

為了方便說明，我做了一份投影片，簡單介紹EMAIL-KM的主要寄信功能。

檔案：Google 雲端硬碟、Box.net、SkyDrive

第一節 系統開發 / System Development

為了降低架設的門檻，EMAIL-KM選用的工具皆為開放原始碼軟體與免費服務。WordPress是著名的部落格管理系統之一，架設環境僅需在低階電腦配置PHP運作環境與MySQL資料庫，而且WordPress擁有親切好用的操作介面以及數量驚人的外掛功能（包括了電子郵件接收器）等特色，這些都是本研究選擇WordPress的原因。為了統計系統使用狀況，本研究額外加入了Google分析的功能到EMAIL-KM中，以記錄造訪次數與人數等資訊。

秉持學術交流的精神，EMAIL-KM以開放原始碼的形式公布在GitHub中。任何人皆可從「https://github.com/pulipulichen/email-km」網址中下載本研究開發的EMAIL-KM來自行使用。此外，功能使用上有任何問題也請不吝多多指教。

不過必須說明的是，由於資料不便公開，GitHub上開放的只有程式碼與資料庫schema，並沒有涵括資料庫的內容資料。直接複製程式碼來安裝的話可能會有些問題。

第二節 系統架構 / System Architecture

EMAIL-KM的系統主要是以WordPress (WordPress Taiwan, 2013)為基礎建置而成的知識管理系統，其中內建電子郵件接收者(Mail Receiver)的外掛(Allen, 2013)，再搭配免費使用的Gmail電子郵件伺服器服務而成。整體架構如圖 2所示，以下將以電子郵件典藏與知識管理系統兩種角度來介紹EMAIL-KM的運作方式：

圖 2 EMAIL-KM系統架構圖

一、電子郵件典藏的運作方式 / The Process of Archiving Email

EMAIL-KM依賴Gmail接收、暫存要典藏的電子郵件，然後電子郵件接收者會定期向Gmail接收郵件，並典藏在EMAIL-KM的資料庫(Database)之中成為一篇一篇的文章(Post)。Gmail是免費的電子郵件服務，只要申請一個專用的電子郵件地址即可與EMAIL-KM搭配使用。電子郵件地址通常是以gmail.com結尾，以下以「email.km@gmail.com」為例。

為了確保資料不會遭受垃圾郵件的入侵，僅有EMAIL-KM的註冊成員才能使用電子郵件典藏的功能。因此使用者要典藏電子郵件時，必須先確認使用者的電子郵件地址登錄在EMAIL-KM中。再來只需要將「email.km@gmail.com」加入收件者中，並加上分類標籤的描述，電子郵件的主旨、訊息與附件內容就能夠順利地納入EMAIL-KM中典藏。

電子郵件典藏的詳細操作步驟將會於後面小節詳述。

二、知識管理系統的運作方式 / The Knowledge Management System With Archived Email

將典藏的電子郵件保存到資料庫之後，EMAIL-KM就能搭配資料庫中的團隊成員帳號與系統功能，提供搜尋、取用與其他應用的服務。為了避免敏感資訊外洩，EMAIL-KM預設僅能由註冊的使用者登入。

使用者可以透過網頁瀏覽器開啟本研究架設的EMAIL-KM來使用EMAIL-KM的功能，方便地查找典藏在EMAIL-KM中的電子郵件資料，並在EMAIL-KM上進行社群互動。使用者也能夠在EMAIL-KM上直接建立文件資與管理已典藏的電子郵件。

知識管理系統的詳細操作步驟將會於後面小節詳述。

第三節 電子郵件典藏操作步驟 / Operation of Archiving Email

一、寄送典藏的電子郵件 / Send Email To Archive

當使用者要將電子郵件典藏在EMAIL-KM時，就要在收件者加入EMAIL-KM的電子郵件地址「email.km@gmail.com」。郵件的主旨與訊息將會是EMAIL-KM中文章的標題與內文。而附件也會保存在EMAIL中，成為文章的附件。圖 3是使用Gmail寄送電子郵件同時欲將之典藏在EMAIL-KM的示意圖。

圖 3 電子郵件典藏操作示意圖：加入email.km@gmail.com

EMAIL-KM支援兩種分類架構方式。第一種「分類」是前分類設計，由主要管理者制定出預設好的層級分類架構；第二種「關鍵字」則是後分類設計，由使用者自由建立、選擇欲描述此封電子郵件的關鍵字，可建立屬於使用者自己的分類架構。兩種分類架構在EMAIL-KM的瀏覽介面略有不同，後續小節會有詳細介紹。

二、在典藏電子郵件時加上分類與關鍵字 / Add Catelog And Keyword Within Email

在典藏電子郵件時，使用者即可在郵件的主旨直接加入分類與關鍵字，以利典藏進EMAIL-KM之後的後續管理。以圖 3中的郵件為例，該郵件的主旨為「[網管專區] EMAIL-KM研究團隊知識管理方案 #email-km」，即同時使用了分類與關鍵字。分類是在郵件主旨開頭加入以中括號「[ ]」包覆的分類名稱，此例中即為「[網管專區]」，意思是將此封電子郵件分類到「網管專區」；關鍵字則是在郵件主旨末端加入以井字號「#」開頭的關鍵字名稱，此例中即為「#email-km」，意思是將此封電子郵件加上關鍵字「email-km」。分類語法的設計是基於臺灣電子佈告欄(BBS)中常用的分類表現方式，而關鍵字語法的設計則是參考Twritter的標籤機制(hashtag)來表現。(Efron, 2010)

本研究在電子郵件主旨加入分類與關鍵字的機制，不僅讓使用者容易在寄送時即可為電子郵件進行分類描述，其他收件者也希望將回信典藏到EMAIL-KM時，也會因為採用相同主旨而會擁有相同的分類架構，以確保相關的電子郵件將會置於同一分類或擁有相同的關鍵字。

三、典藏在EMAIL-KM中的電子郵件 / Archiving Email

EMAIL-KM的電子郵件接收者會在每1小時自動向Gmail收取郵件，使用者也可以手動操作「手動收信」功能以要求電子郵件接收者立即檢查Gmail。電子郵件接收者只會接收由EMAIL-KM註冊使用者的電子郵件地址寄出的郵件，然後將電子郵件內容轉換成EMAIL-KM文章的格式，並將文章的作者設為典藏該電子郵件的使用者帳號。接著電子郵件接收者會刪除所有Gmail上的郵件，以確保Gmail空間不會持續累積信件而無法運作。

圖 4是EMAIL-KM典藏來自圖 3寄送的電子郵件的結果示意圖。

圖 4 電子郵件典藏在EMAIL-KM示意圖

第三節 知識管理系統操作步驟 / Operation of Knowledge Management System

一、登入EMAIL-KM / Login to EMAIL-KM

EMAIL-KM的設計是供研發團隊使用的知識管理系統，因此內容資訊是不公開的，使用者要操作任何步驟都必須先進行登入。EMAIL-KM也不允許外來使用者任意註冊，必須由擁有權限的系統管理者幫新進成員新增帳號。圖 5是EMAIL-KM的登入介面，使用者必須在帳號與密碼輸入正確的資訊，才能登入進到EMAIL-KM當中，並看到圖 6的畫面。

圖 5 EMAIL-KM登入介面

圖 6 登入EMAIL-KM之後的首頁

二、搜尋文章內容 / Search Archived Email

EMAIL-KM右上角有一個「Search」的搜尋框，使用者可以在此輸入欲搜尋的關鍵字（不一定是分類架構中的關鍵字），EMAIL-KM就會搜尋文章的標題、內文與附件檔案的名稱，再將找到的文章彙整成一搜尋結果列表呈現給使用者，並標亮使用者欲搜尋的關鍵字。圖 7即是在EMAIL-KM中搜尋「KALS」的搜尋結果呈現畫面。由於系統限制的關係，目前並不支援附件檔案內容的全文檢索功能。

圖 7 EMAIL-KM搜尋KALS的搜尋結果

三、瀏覽最近典藏的文章 / Browse Recent Emails

登入EMAIL-KM之後即會看到最近典藏進EMAIL-KM的電子郵件以文章列表的方式呈現，如圖 6所示。由於EMAIL-KM是基於部落格管理系統WordPress開發而成，因此在此繼承部落格的特性，首頁即列出最新的文章內容。

四、依照分類架構瀏覽文章 / Browse Architecture

在EMAIL-KM的右上角有四個連結，其中前三個是EMAIL-KM的分類架構。包括「個人專區」、「知識地圖」與「關鍵字」。

（一）個人專區 / Personal

個人專區是以群組分類使用者帳號，可直接查詢該使用者在EMAIL-KM典藏（或說是發表）的所有文章。進入個人專區之後會看到圖 8的群組目錄。點選任一群組後會跳到該群組的位置，並顯示該群組的使用者列表，如圖 9所示。點入任一使用者之後，EMAIL-KM即會展現該使用者發表過的所有文章。圖 10為使用者「布丁」在EMAIL-KM發表過的文章列表。

圖 8 個人專區目錄中的群組目錄

圖 9 個人專區中該群組中的使用者帳號列表

圖 10 使用者「布丁」的文章列表

（二）知識地圖 / Catelog

知識地圖是分類的瀏覽頁面。知識地圖會先描繪出分類的層級關係、計算每個分類的文章數量，再列出該分類底下最新的五篇文章。進入知識地圖之後會看到圖 11的分類層級，包含分類的名稱與分類底下的文章數量。點入任一分類之後，會看到該分類底下的最新五篇文章，如圖 12所示。點入該分類之後，分類底下的文章就會以文章列表的方式呈現。圖 13即是MIS GROUP MEETING分類底下的文章列表。

圖 11 知識地圖的分類層級

圖 12 分類底下的最新五篇文章

圖 13 MIS GROUP MEETING分類底下的文章列表

（三）關鍵字 / Keyword

關鍵字則能依照關鍵字瀏覽文章。進入關鍵字頁面之後，會先看到如圖 14所示的關鍵字列表。關鍵字並沒有上下層級的區隔，只是依照字母順序排列，並附加統計具有關鍵字的文章數量。點選進入任一關鍵字後，可以看到具有該關鍵字的最新五篇文章，如圖 15。再點入該關鍵字後，即可以但具有該關鍵字的文章列表。圖 16即是EMAIL-KM中具有「中文斷詞」關鍵字的所有文章列表。

圖 14 關鍵字列表

圖 15 關鍵字與最新的五篇文章

圖 16 具有「中文斷詞」關鍵字的文章列表

五、訂閱最新文章 / Subscribe to Latest Archived Email

為了促進團隊成員間的資訊交流，EMAIL-KM提供電子郵件訂閱功能。只要成員輸入他的電子郵件地址（輸入位置如圖 17所示），當EMAIL-KM典藏了新的電子郵件，或是有使用者發表新的文章時，就會立即通知訂閱的使用者。

圖 17 訂閱最新文章功能位置示意圖

結論：在日常業務中進行研究 / Do Research On Regular Business

期中的時候，老師問我們修課的學生期末報告的題目。大部分的人都仍在摸索、嘗試聚焦在某個題目上，想藉由文獻整理來做一份報告。我則是回答：「我做了一個系統。」

為了改善我日常生活遇到的問題，我已經很習慣著手去做些東西，來讓我與周遭的人工作起來更便利。不僅僅是這個EMAIL-KM，我在Blog中聊到的DSpace、GLPI、Zentyal等等，都是我覺得可以為大家做些什麼而去修改的經歷。

修改之後，有些人會覺得系統更好用了。也有些人會認為，系統還有很多不夠的地方，未來仍需要繼續去修改。在我投入心力去撰寫程式碼以及大家的回饋意見之間，我在想，是不是有可能在這邊進行研究呢？

能投到國際期刊的高水準研究是我們追求的目標沒錯，但是對於日常業務的改進，我想應該也是可以用做研究的心態來進行，並試著在開發、改善與回饋的過程中，將成果分享給大家。一起讓這世界變得更好吧。加油。

(more...)

電子文件管理導讀：儲存媒體與檔案格式 / Guided Reading of Managing Electronic Records: Storage Media & File Formats

這學期電子文件管理專題的教科書是「電子文件管理」(Managing Electronic Records)，我負責其中「儲存媒體」與「檔案格式」兩章的導讀。以下是我製作的導讀投影片。

"Managing Electronic Records" is the textbook for "Electronic Records Management Project" this semester. I introduced two chapters of this book. Following is my guided reading slide.

電子文件的定義 / Defination of Electronic Records

「電子文件」(electornic records)是這堂課比較需要特別說明的概念。

從「檔案」(archive)的角度來看，這是指已經典藏、保存的公文文件。而「文件」(record)則是指現行仍在使用，記錄在各種媒體上面的資料。另外，檔案的範圍較限定於公文書，而文件則比較泛指包含公文書在內的各種日常業務文件，包括書信、電子郵件、資料庫等等。

因此本書所提到的「電子文件」涵蓋範圍非常大，這是全面性的資料儲存考量與規劃。如果說「資產管理」(Asset Management)是著重在硬體層面的管理，那麼「電子文件管理」就是著重在資料方面的保存。

書目資料 / Bibliography

Saffady, W., & Association of Records Managers and Administrators. (2009). Managing electronic records. Lenexa, Kan.; New York: ARMA International ; Neal-Schuman Publishers.

第二章 電子文件的儲存媒體 / Chapter.2 Storage Media for Electronic Recordkeeping

• 投影片檔案：Google雲端硬碟、Box.net、SkyDrive

本章講述光學儲存媒體、磁性儲存媒體、固態儲存媒體，到最後額外介紹古早的紙質儲存媒體，總共四個分類。在書中並沒有附上任何媒體的圖片，所以投影片裡面我引用了許多維基百科的圖片來做介紹。

這本書裡面談到很多磁性媒體的內容，特別是各種磁帶儲存媒體。這時候我才知道原來磁帶的儲存容量早已比現在在講的藍光(Blue-Ray Disc)高上許多，而且速度看起來也不差。許多企業會使用磁帶來保存資料的原因也就是這樣。不過要說儲存媒體的流行程度的話，光學系列的光碟還是主流吧。

第三章 電子文件的檔案格式 / Chapter.3 File Formats for Electronic Records

• 投影片檔案：Google雲端硬碟、Box.net、SkyDrive

本章講述檔案格式的特性，並介紹以文字為主的檔案類型（無結構文字、格式化文字、資料表與資料庫）與多媒體檔案類型（圖片、視訊、音訊）。本章重要的概念在於建議大家選擇非專屬格式來保存資料，以確保未來電子文件還能夠繼續使用。

結語：舊技術不會再被使用，但我們仍要知道他們 / Conclusion: We Would Not Use Old Technology In the Future, But We Should Remember Them.

導讀完這兩章之後，課堂活動安排我們到了檔案機關參訪電子檔案系統與各種儲存媒體技術。許多書本上提到、維基百科附上的圖片，在這邊都可以看到實體。這讓我對儲存媒體的尺寸又有了更具體的印象。

儘管很多儲存媒體都已經成為過去式，也許在未來我們也不會採用這些媒體來儲存我們的電子文件。但是如果工作是保管歷史檔案的話，就會有機會跟這些老古董技術打交道。儘管不必對他們了若指掌，但至少也要看到他們的時候，能夠想起來這大概是怎樣的儲存媒體，才能進一步去翻找相關規格文件來回憶。

(more...)

網頁應用測試工具：Selenium IDE / Testing Tool for Webpage: Selenium IDE

Selenium IDE是一個網頁應用測試工具，可以應用在許多網頁程式設計上。我製作了一份投影片簡單地介紹了Selenium IDE的主要功能，進一步的詳細操作則可以參考我以前介紹Selenium IDE的文章來使用。

Selenium IDE is a testing tool for webpage. I made a slide to introduce the features of Selenium IDE. For more details, you can read my other articles about Selenium IDE.

為什麼要用Selenium IDE？ / Why sholud you use Selenium IDE

不論背後是用什麼程式語言來開發，最後成品大多都會是瀏覽器可以運作的網頁。因此只要最後網頁上運作結果正確，那麼大致上整體系統就能維持一定品質。

Selenium IDE他就像是操作瀏覽器的機器人一樣，你可以撰寫機器人執行的腳本，讓機器人自動去測試。當腳本無法順利執行時，則回報錯誤訊息給你。Selenium IDE省下很多我們手動用滑鼠去點選、操作的瑣碎時間，可以讓我們更專心於開發本務上。

用Selenium IDE取代功能測試員 / Replace Human Testers By Selenium IDE

我以前做過資料庫功能測試員。功能測試會附帶著一張測試目標的表格，表格內每一列都是要測試的項目。測試員依照測試項目的指示一一操作、確認，沒問題之後再到表格上勾選確認無誤。

事後我常常在想，為什麼這種機械化的動作，還要聘用一個活生生的人來做呢？後來我在Selenium IDE身上，找到了取代功能測試員的方案。

Selenium IDE介紹 / Introduce of Selenium IDE

檔案：Google雲端平台、Box.net、SkyDrive

這份投影片介紹了以下內容：

• 軟體測試的重要性：我想要強調程式開發與測試應該是要齊頭併行的，並不是開發完成之後再來測試。
• Selenium IDE介紹：介紹Selenium系列家族的主要功能，以及Selenium IDE的安裝與開啟。
• Selenium IDE的指令：介紹操作型(Actions)、存取型(Accessors)、驗證型(Assertions)三種類別的指令
• 快速錄製功能：使用Selenium IDE製作測試案例的第一步，並介紹錄製完成之後如何進一步修改測試案例。

這份投影片只有概述Selenium IDE的功能，如果要詳細操作，可以看我之前的文章：

• 網頁應用程式測試工具Selenium IDE介紹

我也寫了兩份測試案例的例子可供參考：

• 以Selenium IDE建立測試案例：圖片延緩載入
• 以Selenium IDE建立測試案例：無限捲頁

結語：開發與測試並進 / Conclusion: Development And Testing Are Both Important

我們在做軟體開發的時候，通常會有一個目標。而這個目標有兩種：一個是想要做、但還沒做的功能；另一個是本來的功能無法如預期般地運作。不管是哪一種，他都可以用「測試案例」(test case)的形式來表現。只要測試案例能夠順利通過，那麼我們就完成了程式開發的目標了──這就是測試驅動開發(Test-Driven Development, TDD)的基本概念。

狂熱的TDD教義派開發者會在系統開發不同階段使用單元測試(unit test)、整合測試(integration testing)、功能測試(functional testing)、回歸測試(regression testing)、持續整合(continuous integration)等策略維護軟體品質。但是這對我們這種小型團隊來說，學習、製作、維護測試案例是相當高成本的工作。

因此我建議是只採用Selenium IDE製作功能測試，確保系統的主要功能能夠順利運作。發生錯誤時，Selenium IDE可能無法像是單元測試或整合測試回報詳細錯誤內容，但是能夠提醒程式開發人員注意到「有錯誤」這件事情，那就幫得上許多忙了。

Selenium IDE快速錄製測試案例的功能真的很好用，我希望能把這方法引入開發團隊中，進一步地提高大家的開發品質。再加油吧。

(more...)

用AppsGeyser把網站轉換成Android APP / The Usage of AppsGeyser: From Website to Android APP

我使用AppsGeyser把「布丁布丁吃什麼？」做成APP，並製作一個簡單的投影片介紹如何操作，並記錄把網站做成APP的一些看法。

I used AppsGeyser to package my blog: "pulipuli.blogspot.tw" as a Android's APP. I share a slide about usage of AppsGeyser and my thoughts of WebApp.

從網站與APP / From Web Site to APP

很多人都想把他們的網站做成APP，但是其實很多網站只要遵守自適應網頁設計原則(Responsive Web Design)，就能夠直接用手機的瀏覽器開啟。

Android的APP具備Webview的功能，能夠讓你在APP中開啟指定網址。而AppsGeyser則是提供了一個Android APP框架，讓你建立一個開啟指定網址的APP，並協助你上傳到Google Play。

Blogger提供了27種行動版的網頁介面。行動版的網頁介面簡化了網頁排版，將連結按鈕加大，方便行動裝置使用者用手指點選。以「布丁布丁吃什麼？」來說，以下兩個網址各別呈現桌面版與行動版的樣貌：

• 桌面版：http://pulipuli.blogspot.tw/
• 行動版：http://pulipuli.blogspot.tw/?m=1

桌面版網址會偵測瀏覽器的類型，在行動裝置上開啟桌面版網址則會自動轉到行動版的網頁去。這次我就是用「布丁布丁吃什麼？」的行動版網頁來製作APP。

AppsGeyser的操作 / Guide of Apps Geyser

很多人都在網頁上介紹過AppsGeyser。我為了方便跟大家分享而製作了投影片。

• 投影片檔案：Google雲端平台、Box.net、SkyDrive

APP下載 / Download APP

• 布丁布丁吃什麼？APK直接下載

手機直接掃描這個QR Code，你就可以把我的APP下載到你的手機囉。

讓網頁看起來像是APP：WebApp / Make Website Like A APP: WebApp

用Blogger的行動介面可以快速產生一個適合在行動裝置上瀏覽的網頁介面。不過這還不太像一個APP。作為一個良好的APP，我們需要讓操作元件遵守作業系統的設計規範。至少也要做個像是可以按的按鈕之類的操作介面，才會讓使用者覺得這會是一個APP。這種網頁一般就稱之為WebApp。

現在很多網頁元件提供了類似APP的操作元件，例如jQuery Mobile就內建了上圖的選單與按鈕，iUI更是讓你的網站一整個就像是APP。你可以重新設計網頁版面，套用jQuery Mobile或iUI提供的框架(framework)，然後你就可以在網頁瀏覽器中操作一個像是APP的網頁了。

如果用AppsGeyser把長得像APP的WebApp製作成真的APP，那就會像是真的在使用APP一樣。

用網頁語法製作APP：PhoneGap / Using HTML5 to Create a APP: PhoneGap

如果你覺得在APP中開啟網頁來操作一個長得像APP的WebApp感覺非常彆扭，或是你覺得AppsGeyser提供的介面與功能太過簡陋或是多餘（我其實對AppsGeyser強迫隱藏手機的通知列這點感到困擾），那何不試著用你原本的網頁程式碼來製作一個真正的APP呢？

PhoneGap是一個用HTML、CSS與JavaScript來製作iOS、Android、Windows Phone等行動裝置的APP的免費工具。在這裡你不需要額外去學習Android的程式語言JAVA、也不用學習iOS的程式語言Object-C，而是用你原本就會的網頁寫作語言：HTML、CSS與JavaScript來製作APP。

基本上PhoneGap也跟AppsGesyer很像，他一樣是製作一個內建Webview的APP，讓你用APP開啟手機瀏覽器來顯示你用PhoneGap撰寫的網頁。不過PhoneGap還提供了許多用JavaScript呼叫的函式庫，讓你在網頁語法中使用手機內建的元件，還有相機、儲存裝置、定位系統等網頁之外的功能。

使用PhoneGap來開發APP，你可以讓你的WebApp不只長得像是APP，還能夠使用行動裝置上面的其他功能，讓它更像是一個APP。

最近看到我常用的IDE NetBeans也支援PhoneGap的開發，真讓我感到躍躍欲試啊。

網站就是APP: Firefox OS / HTML5 Website Is a APP: Firefox OS

上面的WebApp都是在APP中利用Webview內嵌一個瀏覽器以顯示一個長得像是APP的網頁。不論是用jQuery Mobile、iUI讓網頁長得像是APP，還是用PhoneGap讓網頁可以用手機的功能，他們都還不是一個APP。因為在Android上執行APP是要用Java撰寫，在iOS上執行APP是要用Object-C撰寫，要執行你寫的WebApp都還是得透過網頁瀏覽器。

Mozilla抱持著開放自由的遠大志向，製作了Firefox OS。Firefox OS是一個真的是用HTML5（就是HTML、CSS、JavaScript等網頁技術）來撰寫APP的作業系統。我們撰寫Firefox OS的APP時不僅可以用HTML5的語法，還能用Firefox OS推廣成為網頁標準的Web APP。這下子不需要在PhoneGap裡面才能引用手機功能的函式庫，你可以在網頁裡面直接以JavaScript取用手機的功能了。

APP開發方式的選擇 / Selection of APP Development

原生語言 / Native Solution

許多人，特別是電腦訓練課程補習班，他們大多都認為要製作在手機上運作的APP，就必須要用手機原生的程式語言(Native Solution)來撰寫。你要在Android上開發APP，你就必須用JAVA來撰寫，並且上傳到Google Play；你要在iOS上開發APP，你就必須用Object-C來撰寫，並且上傳到App Store。

Unify 3D

除了原生語言之外，你也可以利用Unify 3D這種程式開發工具來製作跨平台的APP。現在手機上許多遊戲，特別是在Android與iOS都能夠看到的APP，很多都是用Unify 3D來製作。根據網路上的評論，Unify 3D製作的效率並不會比原生語言還要差得太多。不過Unify 3D是付費軟體，製作並發佈APP的成本可不便宜喔。

HTML5

那用自由免費又跨平台的HTML5來開發WebApp呢？就像我這一篇從AppGeyser，一路談jQuey Mobile、iUI、PhoneGap到Firefox OS。

但是其實很多人都對於WebApp抱持否定的看法，像是認為PhoneGap製作的APP在跨平台與執行效率上有著相當大的問題。而在iOS的App Store上，更是明言拒絕WebApp上架。在Android與iOS這種原生語言非HTML5的作業系統上，藉由網頁瀏覽器來執行HTML5的APP，當然執行效率與外觀都比不上原生語言來得好。這是可以預見的情景，我並不感到意外。儘管實際上我還沒有真正著手踏入製作APP，不過我對WebApp的期許卻是一直都比原生語言來得高。

原生語言與WebApp的爭論就像是早期程式語言的爭論，有人認為使用組合語言為專門機器開發效率比較高，高等語言還要經過編譯效率較差。但是現在普遍的認知卻是偏向以高等語言來進行開發，這是因為高等語言在學習與開發效率上比組合語言高上更多。

儘管HTML5的HTML、CSS與JavaScript實際上是比Java還要再高等一些的高等程式語言，但是門檻也不見得比較低，很多人在面對JavaScript的Event與CSS的Selector上都遇到很多困難。不過比起開發效率，我認為HTML5的價值在於他是一個開放、自由、普遍流行的程式語言。比起花很多時間寫一個APP，最後只能在單一平台上執行。我認為用HTML5撰寫一個可以在任意平台上執行的APP更有價值。

使用APP的自由 / The Freedom of APP

許多人都會受到手機與APP彼此之間的高耦合的限制。例如想要用某個APP而選擇了iOS，又因為選擇了iOS而無法使用Android上面的APP。這種大家已經習以為常的場景，背後卻是代表著壟斷、封閉的下場。

我認為裝置歸裝置、APP歸APP，這才是真正的自由。我們應該是要用開放自由的程式語言，來開發一個包括電腦、手機等任何平台都能夠共用的APP。就這點來看，Firefox OS相當具有前瞻性，也是我十分看好的未來方向。

結論：WebApp是網站行動化計畫的最佳方案 / Conclusion: WebApp is the Best Solution

最近很流行兩個名詞，一個叫做「雲端」，另一個叫做「APP」。儘管真正搞懂這兩個名詞的人並不多，但是我們也毫不免俗地提出了一個目標兼具開發「雲端化」與製作「APP」的計畫。

除非一開始就致力於APP的開發，不然大部分的計畫應該都會以製作網頁應用為起點。特別是圖書館常見的數位典藏、數位圖書館計畫，大家都是製作一個用瀏覽器就能閱覽的網站。以這個網站為基礎，將網站套上行動網頁的元件，就能夠製作出長得像是APP的網頁。接著再用PhoneGap打包網站本身，讓網站直接以APP的方式交到使用者手中。

這就能夠在成品中包含「雲端化」──資料保存在遠端伺服器，不論你用哪種裝置都能夠取用相同的資料，以及「APP」──用手機行動裝置也能夠取用計畫成果的內容。

這是我心中規劃的最佳方案，也是我目前亟欲推薦老師往這方向進行開發的目標──不過這跟我的論文沒有直接關係就是了。

最後，其實我剛剛把AppsGeyser製作的APP上傳到Google Play去了，還付了750元台幣註冊成為Google Play的開發者。不過目前還不能在Google Play中搜尋到我的APP「布丁布丁吃什麼？」。我猜想可能是因為發佈後得過幾個小時才能看到結果吧？那晚點可以在Google Play找到我的APP的時候，我再跟大家說囉。

(more...)