Page 1

國立彰化高級商業職業學校

資料處理科專題成果報告書

題目：通不通，一點就通

班 級： 資 二 1

組 別： 第 2 組

組 長： 吳 佩 璇 16

組 員： 陳 怡 禎 26

蔡 雅 亘 38

蔡 雅 茵 39

指導老師： 陳 隨 益 老師

中 華 民 國 一○四 年 六 月 十五 日

Page 2

目錄

摘要--------------------------------------------------------------------- 5

壹、前言----------------------------------------------------------------- 5

一、研究動機----------------------------------------------------------- 5

二、研究目的----------------------------------------------------------- 5

貮、文獻探討------------------------------------------------------------- 5

一、EZoApp ------------------------------------------------------------ 5

二、ASP.NET MVC 4 ------------------------------------------------------ 6

三、jQuery Mobile------------------------------------------------------ 6

參、研究架構------------------------------------------------------------- 6

一、研究方法----------------------------------------------------------- 6

二、研究流程----------------------------------------------------------- 7

肆、工作計劃------------------------------------------------------------- 8

一、工作分配----------------------------------------------------------- 8

二、預定進度表(甘特圖)------------------------------------------------- 8

三、軟、硬體設備需求--------------------------------------------------- 8

伍、預期成果------------------------------------------------------------- 9

一、專題製作成果------------------------------------------------------- 9

二、系統資訊化之成果-------------------------------------------------- 13

三、專題製作過程之學習成果-------------------------------------------- 13

陸、結論---------------------------------------------------------------- 13

心得-------------------------------------------------------------------- 13

參考文獻---------------------------------------------------------------- 13

Page 3

表目錄

表一 工作分配表--------------------------------------------------------- 8

表二 甘特圖------------------------------------------------------------- 8

表三 軟硬體設備需求表--------------------------------------------------- 8

Page 4

圖目錄

圖一 資料庫規劃示意圖--------------------------------------------------- 6

圖二 研究流程----------------------------------------------------------- 7

圖三 APP版面 ----------------------------------------------------------- 9

圖四 附屬功能---------------------------------------------------------- 10

圖五 資料庫------------------------------------------------------------ 10

圖六 挑戰主板---------------------------------------------------------- 11

圖七 選單-------------------------------------------------------------- 11

圖八 題目-------------------------------------------------------------- 12

圖九 評分-------------------------------------------------------------- 12

Page 5

通不通，一點就通

摘要

隨者時代的變遷，檢定考試越來越普遍，因此我們利用 APP Inventor2、

VWD2012製出一套檢定學科用的學習 APP。

此 APP主要是幫助要考檢定的同學，在研讀學科題型時能有更多選擇，可以

利用閒暇時間開啟手機 APP測試自己的實力，如果累了也有生活題增加小趣味。

此專題題庫都是從官方網站下載取得，並經過篩選與分類，題目以是非為主，

分為觀念題與試算題兩種類別，採計分方式幫助使用者快速作答，快速解題，在

題目上遇到困難也可利用手機附加截圖功能，即時與朋友互動交流討論問題。

關鍵字：APP、APP Inventor2、VWD2012

壹、前言 一、研究動機

想當初高一考會計丙級檢定時，一看到學科死板板的題目讀起來就很沒動力，

每天抱的一本厚厚重重的書也不知道重點在哪裡，只能硬著頭皮死讀下去。

後來在專題製作課上就想到，如果我們能作出一套讓學科題目表現方式活潑

一點的 APP，不再死板板地，是不是就能讓學習多了些樂趣呢？

二、研究目的

1. 不用浪費時間硬背檢定學科題庫的答案，以輕鬆愉快的心態去學習。

2. 不用再浪費考卷紙張練習，利用手機就能及時上機測驗。

3. 幫助不愛讀書的同學，透過簡易的問答方式學習，增加其印象。

4. 可以即時傳送問題與好友解惑，同時也能夠增進讀書的動力。

貳、文獻探討 一、EZoApp

支援 jQuery Mobile 語法以 HTML5 技術開發行動應用，以拖曳的方式布置

好版面的設計，它是 ASP 版面設計的翹楚，將自動產生的 HTML 程式碼匯入 VWD

內，幫助我們不用自己打複雜的程式碼就能有漂亮的版面配置。

二、ASP.NET MVC 4

ASP.NET MVC 4 以 ASP.NET 平台為基礎，以 VWD 來說要到 2012 與 2013 版

本內才有配 jQuery Mobile，所以舊版的 VWD 是沒有 ASP.NET MVC4 的。VWD2012

Page 6

與 VWD2013 不同於其他程式在於，它在建置初步就匯入了些許 jQuery Mobile 的

跨行動程式碼，方便我們在撰寫程式時，不用再另外下載程式碼。

三、jQuery Mobile

是為 ASP MVC4 網站的跨行動裝置，加入 jQuery Mobile 程式碼後能使原本的

網頁網站在手機上顯示時，其版面能隨地因應不同的裝置寬度大小而改變，而

jQuery Mobile 的特色有以下幾點：

(1) 輕量化檔案

(2) 自動切換排版

(3) 強大的佈景主題系統

(4) ASP.NET MVC 的支援

(5) 畫面的一致化

參、研究架構 一、研究方法

製作此專題檢定學習的 App，我們把製作重點放在資料庫上─利用原本該檢

定承辦單位提供的題庫，加以篩選成簡易易讀的題目，分於各種題型，變為新的

資料庫分類，除了方便使用者快速閱讀外，也可以馬上掌握題目重點。

該資料庫規劃的示意圖如下:

(圖一 資料庫規劃示意圖)

二、研究流程

新資料庫

簡易

重點

分類

種類

題庫

篩選

Page 7

(圖二 研究流程)

擬定專題題目

提出專題計劃書

找尋相關資料

初步設計

查詢功能

測試除錯

專題成果發表

撰寫成果報告書

Page 8

肆、工作計劃

一、工作分配

組員 座號 專長 工作分配

吳佩璇 16 程式設計、簡報製作 程式設計(VWD)

陳怡禎 26 美術編輯、簡報製作 美編設計

蔡雅亘 38 文書處理、資料彙整 資料處理統整

蔡雅茵 39 美術編輯、程式設計 程式設計(APP Inventor)

(表一 工作分配表)

二、預定進度表(甘特圖) 吳佩璇：A、陳怡禎：B、蔡雅亘：C、蔡雅茵：D。

月/週

工作內容

3 4 5 6 成員

3 4 1 2 3 4 1 2 3 4 5 1 2 3

擬定專題題目 V V ABCD

協作平台美化 V V B

專題草案表 V AD

專題計劃書 V V V AC

系統規劃 V V V BD

資料庫整理彙

整

V V V AC

APP面板設計 V V V V BD

APP程式設計 V V V V V V ABCD

APP測試與除錯 V V V V V V BD

APP上傳/瀏覽 V V V V V V B

APP修改/刪除 V V V V V V ACD

專題成果發表 V V V ABCD

成果報告書 V V V ABCD

完成百分率 ~25% ~55% ~80% ~100%

(表二 甘特圖)

三、軟硬體設備需求表

項次 項目名稱 數量 單位 備註

1 個人電腦 4 台 學校/家用

2 VWD2012 4 套 免費註冊

3 Photo Impact X3 2 套 學校提供

Page 9

4 美圖秀秀 2 套 網站下載

5 MIT App Inventor2 4 套 網站-免費

(表三 軟硬體設備需求表)

伍、成果 一、專題製作成果

1. APP Inventor2 (1) APP 版面相關按鈕展示

(圖三 APP版面)

(2) 左上：生活題 右上：截圖傳送

左下：更新版本 左中：專題平台 右中：新手教學 右下：回報

(如下圖所示)

Page 10

(圖四 附屬功能)

2. VWD ASP MVC4

(1) WebMatrix 資料庫彙整

(圖五 資料庫)

Page 11

(2) 挑戰主板頁面：選擇測驗題庫

(圖六 挑戰主板)

(3) 類別選擇頁面：題目類別分類

(圖七 選單)

(4) 題目頁面：題目作答

Page 12

(圖八 題目)

(5) 評分頁面：公布分數、解答

(圖九 評分)

Page 13

二、 系統資訊化之成果 1. 使用者可以在手機上使用「通不通，一點就通」。

2. 使用者必須上網才可以使用。

三、專題製作過程之學習成果 1. 團隊合作才是致勝關鍵。

2. 掌握問題重點，去解答、學習。

3. 設計人性化的系統，讓生活上有更多方便。

陸、結論

這是一個讓使用者輕鬆複習檢定學科的 APP，是非題的出題方式讓使用者更快速

掌握重點！計分功能以及正解讓使用者參考，這就是我們此專題「通不通，一點

就通」！

柒、心得 吳佩璇:

製作專題的過程雖然遇到很多瓶頸，但我們還是成功，真的是超感動地。

陳怡禎:

過程中，雖然對於討論時常感到無力，常常覺得很煩心，甚至覺得為甚麼要上專

題，但在最後，看著組員們做完整個 App，心底很是開心！這也是在上這門專題

製作課程所可以學到的經驗吧！

蔡雅亘:

雖然只有佳作不過還是很謝謝大家的幫忙也謝謝組員的互相支持。

蔡雅茵:

終於將專題完成到一段落了，謝謝我的隊友！