第三章 研究方法
第四節 系統建置
此節說明雲端擴增實境教材編輯系統的主要功能和開發工具，並介 紹教師及學如何操作本系統，以範例進行教學，詳細說明如下。
一、 系統功能架構
本研究擴增實境教材編輯系統以 Joomla 搭配各別擴充套件修改完 成 SaaS 層之服務，系統分成三個主要部分，共分為教材編輯介面、系 統管理介面及教材 APP，系統的功能示意如圖 3-3。
圖 3-3 系統功能圖
(一) 教材編輯介面
主要功能為 AR 教材的編輯，新增課程點選加號的圖示，新增 完課程後，則會出現課程資訊的表格，一個課程資訊表格裡面，所 陳列的資訊有課程編號、修改課程資訊、編輯教材、刪除課程及打 包課程等…如圖 3-4，使用模式共分成兩個編輯模式，分別為一般 編輯模式和探究式教材編輯模式，以下為詳細功能介紹：
40 模型可由 Google SketchUp 匯入至系統，減少教師製作模 型的時間，將其完成教材按下打包教材。
2. 探究式教材編輯模式
根據 Krajcik（1998）提出的探究式學習步驟，設計系 統的探究式教材編輯模式如圖 3-5，在系統內輸入欲探究
41
圖 3-5 探究式教材使用流程圖
(二) 系統管理介面
主要的功能為用戶的帳號管理如圖 3-6，教師必須在先註冊，
教師資料呈列在介面下方，管理的工具列在介面的上方，管理者 可對教師資料進行新增、刪除、修改等動作，將教師的資料達到 有效率的管理。
42
圖 3-6 系統管理介面
(三) 教材 APP
教師在完成 AR 教材之後，便可利用本系統將 AR 教材自動 打包成，讓學生們在行動裝置上安裝，完成安裝後，便可利用擴 增實境教材教學，教材 APP 介面如圖 3-7，學生端詳細的操作流 程，請參考後面的說明。
圖 3-7 教材 APP 介面
回到輸入課程編號
上一頁 下一頁
目前頁數/課程總頁數 文字說明
教 師 資 料
管理工具列
43
二、 系統開發工具
雲端擴增實境教材編輯系統的主要開發工具包含，系統架設平台 AppSevr2.5.10（Apache 2.2.8、PHP5.2.6、MySQL5.0.51a、
phpMyAdmin-2.10.3）、程式設計語言（PHP、JavaScript）、網站套件
（Joomla1.5）、APP 開發（Unity4.0）、網頁瀏覽器（IE8、Firefox 3.6、
Chrome 5、Safari 4、Opera 10.5）、APP 使用平台（Andriod4.0）如表 3-2 所示。
表 3-2 系統開發工具表
項目 規格
系統架設平台 Apache 2.2.8、PHP5.2.6、MySQL5.0.51a、
phpMyAdmin-2.10.
程式設計語言 PHP、JavaScript 網站套件 Joomla1.5
APP 開發 Unity4.0
網站使用平台 IE8、Firefox 3.6、Chrome 5、Safari 4、Opera 10.5 APP 使用平台 Andriod4.0
雲端擴增實境教材編輯系統運作在 Window 7 的作業系統中，
Window 7 作業系統中安裝 Apache 2.2.8、PHP 5.2.4-2、MySQL 5.0.51a、
phpMyAdmin 2.10.3 等系統服務，如表 3-3 所示。
表 3-3 伺服器系統環境表
項目 規格
作業系統 Window 7
44
項目 規格
網站服務 Apache 2.2.8
網站程式模組 PHP 5.2.4-2
資料庫 MySQL 5.0.51a
資料庫管理 phpMyAdmin 2.10.3
三、 教師操作流程
說明以教師角色使用雲端擴增實境教材編輯系統，其使用流程圖 3-8，以實例說明做為實際教師使用本系統之上傳教材、管理教材資源等 標準流程參考。
圖 3-8 教師操作流程圖
45
(一) 註冊帳號
教師在使用本系統前必須進行註冊，點選左方導覽列中的註 冊新帳號如圖 3-9，並填寫會員資料，將表單都完成之後，點選註 冊新帳號按鈕，待註冊完成並通過驗證如圖 3-10，教師使用各別 帳號登入，便可開始使用系統編輯擴增實境教材。
圖 3-9 教師註冊
圖 3-10 完成註冊 註冊新帳號
46
(二) 新增課程 1. 功能描述
點選導覽列中的 AR 教材，在右方的內容頁則會出現課程資 訊，新增課程則是點選加號的圖示如圖 3-11，新增課程時必須先 填寫課程的描述性資訊，包括課程名稱、科目、教材試用年級、
學期、單元、課程內容描述，並選擇 AR 教材製作的模式。
2. 範例介紹
利用國小六年級自然與生活科技生物與環境單元內容，以沙 漠上的生物為教材範例。課程名稱為沙漠上的生物，科目為自然 與生活科技，年級為六年級，學期為下學期，使用模式為探究式 教材編輯模式，課程描述為介紹沙漠環境特性和生物特徵，如圖 3-12。
圖 3-11 點選新增課程 新增課程
47
圖 3-12 填寫課程資訊
(三) 修改課程資訊 1. 功能描述
點選修改課程資訊圖示如圖 3-13，則可修改課程資訊，包含 修改課程名稱、日期、科目、單元、使用模式、年級、學期及課 程描述。
2. 範例介紹
把課程描述從介紹沙漠環境特性和生物特徵，修改成介紹沙 漠環境特性和生物特徵，並利用探究式學習策略引導學生，加以 補充如圖 3-14。
選擇使用模式
48
圖 3-13 修改課程資訊圖示
圖 3-14 修改課程資訊
(四) 選擇編輯模式
根據新增課程時選擇的編輯模式，進入不同的編輯模式頁面，
分別為探究式教材編輯模式和一般編輯模式如圖 3-15。
修改課程資訊
49
圖 3-15 編輯探究式教材
1. 探究式教材編輯模式
教師須完成探究式教材編輯的四個階段，第一階段為提出問 題，第二階段為設計探究活動，第三階段為引導分析，第四階段 為引導解釋結果，如圖 3-16 所示。
圖 3-16 探究式教材編輯
編輯教材
50
(1) 提出問題階段 a. 功能描述
在此階段教師必須在系統上設計問題，提出問題讓學生 們去思考問題，點選左方格式鈕，可選擇不同類型的素材，
去包裝問題，可利用影片、文字、圖片等…。
b. 範例介紹
點選圖片格式鈕上傳沙漠的圖片，在文字引導的部分則 輸入沙漠有甚麼特色呢?如圖 3-17，點選編輯頁次則可更換 頁次的順序和刪除頁次如圖 3-18。
圖 3-17 提出問題 編輯頁次
格 式 鈕
51
圖 3-18 編輯頁次
(2) 設計探究活動階段 c. 功能描述
在此階段，教師須先上傳 3D 模型，本系統支援的 3D 模 型格式有.dae 和.obj 格式，若教師欲自行製作模型，可利用 AutoCAD、Maya、3DsMax 等…3D 建模軟體，將製作完成 的模型匯出成系統可支援的.dae 或.obj 格式；若教師欲利用 網路資源尋找模型，則模型使用的流程如圖 3-19，包含搜尋 模型、選擇下載模型格式，選擇 Collada（COLLAborative Design Activity）檔，它是建立 3D 互動程式的一個檔案交換 格式，而此格式副檔名為.dae，本系統可支援此模型格式；
另一個下載格式則為 SketchUP 的.skp，若教師使用的電腦未 安裝此軟體，請至搜尋引擎搜尋 SketchUP 並下載，或至此 http://www.sketchup.com/intl/zh-TW/download/gsu.html 下
52
載，模型須經由 SketchUP 轉檔為.dae 上傳至本系統，而詳 細的模型使用教學如下:
圖 3-19 模型使用流程
模型來源至 Google SketchUp3D 模型庫搜尋，在模型庫 裡搜尋所需模型，減少教師製作模型的時間。
d. 範例介紹
在製作沙漠上的生物課程中，須利用猩猩的模型，讓學 生 分 辨 猩 猩 是 否 適 合 居 住 在 沙 漠 ， 故 在 搜 尋 框 內 輸 入 gorilla，下方將出現相關的模型如圖 3-20。
53
圖 3-20 搜尋模型
點選適合的模型，選擇下載模型的格式如圖 3-21，若選 擇 Collada(.zip)解壓後，點選 modles 資料夾如圖 3-22，將 modles 資料夾的.dae 檔案下載如圖 3-24。
圖 3-21 選擇下載模型格式 相關模型
選擇下載模 型格式 搜尋模型
54
圖 3-22 選擇 Collada(.zip)格式
圖 3-23 選擇.dae 格式
若選擇下載模型的格式為 SketchUP 的.skp 檔，則須 將.skp 匯入 SketchUP 如圖 3-24，將模型匯出並轉檔為.dae 如圖 3-25 和圖 3-26。
55
圖 3-24 模型匯入 SketchUP
圖 3-25 模型匯出轉檔
56
圖 3-26 模型匯出為.dae 格式
將模型的格式都轉成本系統支援的.dae 或.obj 格式後，
即可將模型上傳至本系統，進行擴增實教教材的製作。例如 上傳五個 3D 模型至系統如圖 3-27，再點選組合按鈕，進入 設計組合頁面，勾選模型以及所需的回饋文字，例如勾選駱 駝和蜥蜴模型，在下方文字框輸入「可生存於沙漠」如圖 3-28，當學生同時拿到代表駱駝和蜥蜴的圖標時，分別為 3 號圖標和 4 號圖標，系統則會回饋可生存於沙漠的文字說明。
圖 3-27 上傳 3D 模型 組合
圖標編號
57
圖 3-28 設計 3D 模型組合
(3) 引導分析階段 e. 功能描述
在此階段，教師須引導學生去分析問題，可以圖片、文 字、音樂及影片，呈現引導分析問題內容。
f. 範例介紹
觀察圖片內的土壤及用文字說明沙漠的氣候是少雨且乾 燥如圖 3-29，以雨量或氣溫去思考影響沙漠特特徵的因素。
58
圖 3-29 引導分析
(4) 引導解釋結果階段 g. 功能描述
在此階段，教師須引導學生去解釋探究主題之結論。
h. 範例介紹
因為沙漠的氣候是乾燥且少雨，而駱駝、蠍子和蜥蜴皆 可生存於這樣的環境之下如圖 3-30，但猩猩只適合生存在 熱帶雨林裡。
59
圖 3-30 引導解釋結果
2. 一般編輯模式
使用一般編輯模式製作 AR 教材，可視教材內容需求而編 輯，系統支援的素材類型分別有文字、圖片、影片、音樂和 3D 模型，透過點選格式鈕進行素材編輯如圖 3-31。
例如文字說明可點選網頁左方的 Txt 按鈕，在文字框內編輯 文字。以下以認識鯊魚為一般編輯模式範例如圖 3-32，進行說明。
圖 3-31 一般編輯模式範例
圖 3-32 一般編輯模式編輯畫面 格
式 鈕
編輯頁次
60
(1) 圖片(PIC) a. 功能描述
上傳圖片素材至課程內容中，點選圖片格式鈕，輸入描 述文字至文字框。
b. 範例介紹
在文字框輸入「鯊魚為什麼叫鯊魚，不叫石魚或泥魚呢？
因為牠們的皮膚摸起來像砂紙，粗粗的還會刮手，所以叫做 鯊魚囉！」，再選擇一張鯊魚圖片，系統支援的圖片格式 為.jpg，按下上傳鈕即完成如圖 3-33。
圖 3-33 圖片編輯 圖片鈕
上傳鈕 描述文字
61
(2) 音樂(MP3) a. 功能描述
上傳音樂素材至課程內容中，點選音樂格式鈕，輸入描 述文字至文字框。
b. 範例介紹
在文字框輸入「電影大白鯊的配樂」，再選擇一首音樂，
系統支援的音樂格式為.mp3，按下上傳鈕即完成如圖 3-34。
圖 3-34 音樂編輯
(3) 文字(TXT) a. 功能描述
增加文字說明至課程內容中，點選文字格式鈕，輸入描 述文字至文字框。
b. 範例介紹
在文字框輸入「鯊魚，其實就是一群在水中生活，有著
音樂鈕
描述文字 上傳鈕
62
流線型身體，用鰓呼吸而且全身的骨骼都是軟骨的生物。鯊 魚有五到七對的鰓裂，還有可以不斷更新的牙齒，而體表覆 蓋著各式各樣的盾鱗可以避免各種寄生蟲和物理傷害，並且
流線型身體，用鰓呼吸而且全身的骨骼都是軟骨的生物。鯊 魚有五到七對的鰓裂，還有可以不斷更新的牙齒，而體表覆 蓋著各式各樣的盾鱗可以避免各種寄生蟲和物理傷害，並且