第二章 線上同儕回饋系統之開發
本章主要在說明線上同儕回饋系統的開發方式，其中 2.1「開發工具」為介紹 開發本系統所使用的線上平台與相關程式語言，2.2「系統架構」為本系統開發所 使用的基礎架構，而 2.3「資料傳輸流程」則為系統運行時的資料傳遞過程，因此 閱讀完本章後便能了解本系統是如何開發與其運行方式為何，進而對於本系統能 有更深的了解。
2.1 開發工具
團隊開發平台
由於本系統是由多人共同開發，因此在開發時需要使用共同開發專案的工具，
才能避免系統內的某些功能可能會在其他開發者不知情的情況下被撰寫或修改，
因此本系統的團隊開發工具則是採用 GitHub，其中 GitHub 是於 2008 年 4 月才開 始正式上線的平台 [6]。
在團隊合作的開發案中，GitHub 是版本控制的一個重要工具。專案開始開發 前，使用者會先將初始專案上傳至 GitHub 平台中，而平台內的專案可以透過 Git 的指令來進行一連串的操作，例如：上傳、下載與合併等等，透過 GitHub 能讓開 發者分享原始碼（code）並且共同審核，使開發者可以互相觀察彼此的原始碼撰寫 風格，也能避免將錯誤的原始碼上傳至專案中的窘境。
開發語法
本系統開發的語法主要有三種，分別為 HTML、Javascript 與 CSS。其中 HTML
的全名為 HyperText Markup Language，中文名稱則為「超文件標示語言」，主要 用於建立網頁的基本樣貌，常與 Javascript 與 CSS 搭配使用並建立成各種不同的使 用者介面（User Interface，簡稱 UI） [7]。另外，Javascript 則是一種可以減少伺 服器負擔的程式語言，不需伺服器支援即可直接在使用者端的瀏覽器上運作，而 由於近幾年來 Node.js 的發展，使 Javascript 也可以具有某些程度的伺服器功能，
其中本系統就是採用 Node.js 來當作伺服器的開發架構。最後在 CSS 的部分，其全 名為 Cascading Style Sheets，中文名稱為「階層式樣式表」，主要是用來控制網頁 中的使用者介面，開發者可以透過編寫 CSS 來對使用者介面中的字型、顏色與排 版等進行調整。
伺服器系統
採用 Node.js 框架來開發本系統之伺服器，Node.js 是運用 Javascript 所編寫而 成，其運行方式是由 Google 所開發出來的 V8 引擎來執行，目前已被市面上的數 家公司所採用。而使用 Node.js 的優點為可以運用 Javascript 與一些額外的模組來 撰寫伺服器端，能因此達到加快開發系統速度之目的，而常見的框架有 Express.js 與 Socket.io 等等。
資料庫系統
本系統之資料庫是採用 MySQL，MySQL 為一種關聯式資料庫管理系統
（Relational Database Management System，簡稱 RDBMS），其名稱為關聯式資料 庫管理系統之原因為在資料搜尋時，資料庫會藉由表中欄位的值來搜尋並建立起 關聯。而在使用 MySQL 時，本研究會透過使用 Sequel Pro 來輔助管理資料，因為 Sequel Pro 提供了圖形使用者介面（Graphical User Interface，簡稱 GUI）給開發者，
8 使開發者可以方便測試與管理資料。
2.2 系統架構
本系統採用 MVC 架構（Model-view-controller）進行開發，其中 MVC 架構最 早是在 1979 年由 T. Reenskaug 所提出 [8]，它是一種軟體工程中的軟體架構設計 模式，其架構把系統中的應用分成三個部分，分別為模組（Model）、視圖（View）
與控制器（Controller） [9]。在這三者的關係中（圖 2-1），視圖會將使用者介面 顯示給使用者閱覽，然後使用者可以透過操作視圖上之功能將訊息或指令傳遞給 控制器，接著控制器會利用剛由視圖傳來之指令來控制模組，當模組接收到控制 器的指令後，便會將資料寫入資料庫內。相反的，若使用者想從資料庫抓取資料 時，會以如同上述之途徑將指令從視圖傳遞至模組，接著模組會從資料庫中讀取 資料並將資料傳遞至控制器，然後再藉由控制器把資料傳遞至視圖，最後經由視 圖顯示給使用者閱覽。
圖 2-1 MVC 架構
模型
模組之主要功能為對資料庫存取，一般在接收控制器的指令後，便會對資料 庫做與指令相對應之動作，並且將資料回傳給控制器，最後再經由視圖顯示給使 用者查閱，因此可以在視圖上了解資料模組之變化。而模組在本系統中，則擔任 存取大量資料的角色，例如：存取學生之作業資料、存取學生之互評資料與存取 老師創建課堂活動之資訊等等。
視圖
視圖之功能在於顯示模組上之資料與蒐集使用者在視圖上互動之資料，在顯 示模組上之資料的部分，例如：學生某次課堂活動收到的分數與回饋、學生某次 影片作業評分之資訊等等。而在蒐集使用者在視圖上互動之資料的部分，例如：
學生將互評之回饋輸入至視圖中，而視圖透過控制器與模組將資料存入資料庫。
控制器
控制器在 MVC 架構中，主要擔任視圖與模組的連接橋梁，當控制器從視圖收 到指令後，會判斷如何處理該事件並做出回應，例如：學生從視圖上輸入之評分 回饋該如何處理、學生選取某位同學之影片作業後該如何反應等等，或者是當控 制器從模組接收資料庫資料時，該如何把資料呈現在視圖上，例如：顯示學生某 次影片作業收到的回饋、顯示某次課堂活動的互評截止期限。另外，控制器也可 以為應用程式做流程控制，例如：當互評階段截止後必須禁止學生再次進行互評、
禁止學生重複為同一位同學評分等等。
10
2.3 資料傳輸流程
在本章第二節的「系統架構」中有提到本系統是採用 MVC 架構開發，但 MVC 架構是以開發者的角度來審視，若以使用者角度來分析並且搭配本章第一節的「開 發工具」中所提到使用的語法與工具，則會如圖 2-2 所示，可以將資料的運輸流 程分為伺服器端與使用者端。
圖 2-2 資料傳輸流程
使用者端
使用者端顧名思義就是能讓使用者閱覽與控制的部份，使用者可以透過操作 使用者介面來傳送訊息給伺服器，伺服器接收到使用者端的訊息後便可做出相對 應的動作，接著將其訊息指令傳回給使用者端即可與使用者互動，即為 MVC 架構 中的視圖。而在本系統中的使用者端分別包含了 HTML、CSS、AngularJS 與 NoGap
Client。其中 AngularJS 為一款由 Google 所維護的函式庫，是運用 Javascript 所建 構的，目的是藉由 MVC 架構增強瀏覽器的效能。另外，NoGap 使用者端為 NoGap 框架的一部分，NoGap 是由 Javascript 所編寫而成的一個框架，其被稱為 NoGap 是因為它減少了開發者對於開發伺服器端與使用者端之間的缺口與間隔，使伺服 器端與使用者端的架構在開發時不會那麼的繁瑣與笨重 [10]。
伺服器端
伺服器端為使用者所無法直接接觸與操作的部份，伺服器能透過發送指令給 使用者端，藉此讓使用者端做出相對應的動作，也能接收使用者端所傳遞而來的 資訊並且做出回應。另外，伺服器端除了能與使用者端溝通，同時也可以對資料 庫做存取，例如：儲存使用者端傳送過來的資料、取出資料並且傳遞給使用者等 等。而在本系統中的伺服器端分別包含了 NoGap Host、Sequelize 與資料庫。其中 NoGap 伺服器端為 NoGap 框架的一部分，主要用來操控伺服器的行為，同時也可 以接收與傳遞指令。而 Sequelize 則為 Node.js 與 io.js 的一種物件關係對應（Object Relation Mapping，簡稱 ORM）框架，目的為將物件轉換成資料庫語言，而 Sequelize 目前已支援多種資料庫語言。
12