系統設計與功能規劃

一、系統架構說明

行動數位教學系統可實作於不同情境教學，如：烘焙教室、美術教室、玩具屋 等，本系統以烘焙教室為例，系統可分為前臺網網站呈現與後臺伺服器，網站呈現內 容有情境教室分類、相簿、影片、部落格、訊息交流、facebook 連線資訊交流等功 能，後臺則負責伺服器架設與後端資料庫管理。教師可以透過行動載具進入不同境教 室中，掃描 QR Code 藉以得到相關資訊，並將教學內容透過 miracast 設備以無線方式 分享於投影機或其他播放裝置上。

1.教師手持具備相機、QR Code 掃描軟體及 miracast 設備之行動載具進入具備無線網路 的情境教室（WIFI 連盟於 2012 年制定以直連（Wi-Fi Direct）為基礎的無線顯示標

圖 3-2 系統架構圖

如：平板電腦、手機可以透過 Miracast 直接在支援的電視或是投影機上播放而無須 連線。

2.情境教室中器具、用品等，皆具 QR Code，使用者透過行動載具掃描 QR Code 後，

經過無線網路將資訊傳送到行動數位教學系統。

3.行動數位教學系統由網頁主機與資料庫並連結外部資源組成，接收自行動載具傳送 QR Code 資訊後，進行分析並分別自資料庫及外部資源取得資料，透過無線網路回 傳與教師手上的行動載具。

4.外部資源包含了 Youtube 網站提供預先錄製的影片及網路相本等，用以分攤伺服器儲 存空間與網路流量的負荷。

5.資料庫中包含行動數位教學系統網站的內容、會員管理、部落格、文章、討論分享區 等，並分析與處理自行動數位教學系統傳來的資訊後，將符合的資訊回傳與系統。

6.QR Code 資訊透過無線網路，與行動數位教學系統處理後，將符合的資訊呈現於教師 的行動載具。

7.透過 miracast 協定，將行動載具上的影音同步於投影機或視聽設備上，對幼童進行教 學。

二、系統情境模擬

Lara 是幼兒園教師，平日喜歡做甜點，也喜歡將甜點分享與其他教師及小朋友，

近日幼兒園將原本就有的烘焙教室新添了行動數位教學系統，在烘焙教室中每個器具 旁都有個 QR Code，連牆上都有甜點的作法 QR Code，可以透過平板或手機掃描 QR Code 後瀏覽作法與準備的材料，於是她提出了申請想帶著小朋友在情境教室中體驗當 一個小小烘焙師傅的體驗。

上課前她從牆面上掃描了蛋糕的 QR Code，在輸入帳後密碼後上面敘述了需要準 備的材料與需要使用的設備，並清楚的將過程須注意事項鉅細靡遺的紀錄，在小小烘 焙師體驗課程當天，小朋友一改需要坐在座位上聽 Lara 說明的教學方式，跟著 Lara 邊

走邊介紹設備，站在比較後面的小朋友可以看著透過 Lara 手上的行動載具投影在牆壁 上的大螢幕，不影響其學習的品質。

在介紹完設備與材料後，Lara 示範了蛋糕做法，接著讓小朋友實際體驗，這期 間，Lara 除了協助小朋友製作蛋糕，同時藉著行動載具上的相機，拍攝小朋友們製作 過程中有趣的畫面，終於大家的作品都完成了，每位小朋友都開心的與自己的作品合 照，再由 Lara 將照片投影給大家欣賞，開開心心的完成小小烘焙師的體驗課程。

在下課後，Lara 精選了行動載具上的相片，並寫了一篇溫馨的紀錄，分享在行動 數位教學系統上，並將連結透過 Facebok 分享與社團內的家長分享，並獲得很多正面 的回應，Lara 深深覺得，校園內建置了行動數位教學系統不僅教學方便許多，更添加 了學生學習的意願。

三、系統設計與功能規劃劃說明

本系統採用 Joomla 內容管理系統（Content Management System，CMS）建置網 站，內容管理系統是一種用來管理網站上的內容的應用程式，讓管理者不需具備專業 的網頁程式撰寫技術，即可建置一個 Web-base 的網站，且可在任何一部可以上網的電 腦上，透過瀏覽器進行網的修改與編輯。當使用者送出需求到網頁伺服器，伺服器會 依該需求存取後端資料庫，內容經過樣板（Template）訂定的 CSS 樣式建構成完整網 頁，回傳到使用者端完成動作。

本研究採用 Joomla 搭配 XAMPP 建置於 Windows7 Professional 上，由於 Joomla 具 備多樣元件、模組及外掛功能，讓編輯人員容易做大幅度的更動，尤其具有部落格、

相簿、影音及連結 Facebook 分享機制，更是建置本網站的不二選擇。

本系統之行動數位教學網站，Joomla 因應不同權限建立登入機制，於登入過程中 分為三個群組，未登入使用者、登入使用者、管理者，在未登入使用者除進入網頁瀏 覽資料外，亦可在情境教室內，透過掃描教室的 QR Code 讀取課程相關教學資訊。登 入使用者除了瀏覽與情境教室課程外，新增了相片上載分享、Facebook 分享及文章建 立權限。而登入為管理者則擁有全部權限，包含 Joomla 後臺權限授予及帳號管理、新 增情境教室、及課程內容的修改等（如圖 3-4）。

圖 3-4 系統網站功能說明圖