資訊管理系

學齡前自主學習之 行動裝置輔助系統

指導教授： 李靜怡 教授

組員名單： 蔡承育 988C012

黃佳誼 988C026

鄭亦琦 988C060

廖曼伶 988C108

中 華 民 國 1 0 2 年 5 月

嶺東科技大學

資訊管理系

學齡前自主學習之行動裝置輔助系統

中華民國一○

二年五月

資訊管理系專題口試委員審定書

學齡前自主學習之 行動裝置輔助系統

指導教授： 李靜怡 教授

組員名單： 蔡承育 988C012

黃佳誼 988C026

鄭亦琦 988C060

廖曼伶 988C108

指導教授：＿＿＿＿＿＿＿＿＿＿

口試委員：＿＿＿＿＿＿＿＿＿＿

＿＿＿＿＿＿＿＿＿＿

誌謝 本專題報告得以順利完成，首先要感謝恩師李靜怡老師細心

引導我們，耐心的協助我們，克服研究過程中所面臨的困難，給

予我們最大的協助，使本專題得以順利完成。

研究報告口試期間，感謝夏則智老師、黃光宇老師不辭辛勞

細心審閱，不僅給予我們指導，並且提供寶貴的建議，使我們的

專題內容以更臻完善，在此由衷的感謝。

最後，感謝系上諸位老師在各學科領域的熱心指導，增進商

業管理知識範疇，在此一併致上最高謝意。

蔡承育、黃佳誼

鄭亦琦、廖曼伶

謹誌

中華民國一○二年五月於嶺東

摘 要

學齡前正是兒童的學習黃金時期，兒童的人格基礎以及智力的發

展，皆是在學齡前這個階段所奠定的。但是學齡前的兒童十分活潑好

動，為了引起學齡前兒童的學習興趣，讓他們能夠喜歡學習並且持續

學習。本系統以APP的方式開發，以達到無所不在地學習。系統使用

亮色系的色彩來吸引兒童們的注意力，讓兒童們感到興趣，並且設計

小遊戲讓兒童在遊戲過程中學習，以及製作測驗幫助兒童記住學習內

容。為了不讓兒童有手機成癮症，本系統設有監控功能，兒童在行動

裝置上使用此APP三十分鐘後，系統會自動強制關閉此APP，以避免

兒童有手機成癮症，也保護兒童的視力。同時本系統採用MVC架構降

低系統開發的複雜度，以利於後續系統的維護、擴充與軟體的再利用

。

關鍵詞：APP、行動裝置、MVC

-I-

目 錄

摘要 ....................................................................................... I

目錄 ...................................................................................... II

表目錄 ................................................................................. Ⅳ

圖目錄 ................................................................................. Ⅴ

第壹章 緒論 .......................................................................... 1

1.1 研究動機 ..................................................................... 1

1.2 研究目的 ..................................................................... 1

第貳章 文獻回顧與探討 ......................................................... 3

2.1 行動裝置 APP 開發平台 .............................................. 3

2.1.1 Android 基礎與開發環境 ..................................... 3

2.2 MVC .......................................................................... 3

2.3 圖片格式 ..................................................................... 4

2.3.1 JPEG（JPG） ..................................................... 4

2.3.2 PNG ................................................................... 4

2.3.3 GIF .................................................................... 5

2.3.4 BMP ................................................................... 5

2.4 音訊格式 ..................................................................... 6

2.4.1 MP3 ................................................................... 6

2.4.2 WMA ................................................................. 6

2.5 聲音播放元件 .............................................................. 7

2.5.1 SoundPool .......................................................... 7

2.5.2 MediaPlayer........................................................ 7

2.6 資料庫 ........................................................................ 7

-II-

第參章 研究方法 ................................................................... 8

3.1 研究流程 ..................................................................... 8

3.2 系統分析 .................................................................... 9

3.3 資料庫說明 ............................................................... 10

3.4 開發軟體與系統需求 .................................................. 12

3.5 系統內容與介紹 ........................................................ 13

第肆章 系統實作 ................................................................. 16

第伍章 結論 ........................................................................ 19

參考文獻 ............................................................................. 20

附錄 ..................................................................................... 21

附錄:學齡前自主學習之行動裝置輔助系統 ........................ 21

-III-

表目錄

表3.1 WORD資料表欄位說明 ................................................ 11

表3.2 CATEGROY資料表欄位說明 ........................................ 11

表3.3 開發軟體 ..................................................................... 12

表3.4 系統需求 ..................................................................... 12

表3.5 java檔案說明 ............................................................... 14

表3.6 xml檔案說明 ............................................................... 15

-IV-

圖目錄

圖2.1 MVC架構圖 ................................................................ 4

圖3.1 系統流程圖 ................................................................. 8

圖3.2 使用案例圖 ................................................................. 9

圖3.3 發音功能的MVC架構 ................................................... 9

圖3.4 ER模型 ..................................................................... 10

圖3.5 Java檔案 ................................................................... 13

圖3.6 Xml檔案 ................................................................... 15

圖4.1 系統首頁 ................................................................... 16

圖4.2 語言選擇 ................................................................... 16

圖4.3 中文遊戲畫面 ............................................................ 16

圖4.4 英文遊戲畫面 ............................................................ 16

圖4.5 注音符號 ................................................................... 17

圖4.6 英文字母 ................................................................... 17

圖4.7 中英文圖卡類別選擇 .................................................. 17

圖4.8 動物圖卡畫面 ............................................................ 17

圖4.9 配對遊戲畫面 ............................................................ 17

圖4.10 測驗遊戲畫面 .......................................................... 17

圖4.11 測驗答對畫面 .......................................................... 18

圖4.12 測驗答錯畫面 .......................................................... 18

圖4.13 系統即將關閉畫面 ................................................... 18

圖4.13 系統關閉畫面 .......................................................... 18

-V-

第壹章 緒論

1.1 研究動機

依據我國現行的國教法規定，滿6足歲的兒童必須接受國民小學義務教育，

因此通稱入小學就讀的兒童為學齡兒童，而在進入小學就讀前的階段就稱為學齡

前。許多專家學者認為這個階段正是兒童的學習黃金時期，兒童的人格基礎以及

智力的發展，皆是在學齡前這個階段所奠定的。

每一個小孩都是父母的心肝寶貝，每一個父母都望子成龍、望女成鳳，因此

「不要輸在起跑點」這句話，幾乎已成為家中有學齡前兒童的家長所尊奉的信念

。為了引起學齡前兒童的學習興趣，讓他們能夠喜歡學習並且持續學習。根據公

共圖書館學齡前兒童及家長服務之調查研究發現鮮豔色彩，能給予幼兒視覺上豐

富的刺激，可以提升學齡前兒童的學習意願[1][2]。

1.2 研究目的

學齡前的兒童十分活潑好動，如果要兒童乖乖地坐在書桌前學習，對兒童來

說是無趣且困難的。使用一般桌上型電腦學習的方式雖然可行，但是由於桌上型

電腦不易移動與隨身攜帶，如果想隨時隨地學習，就成了最大的學習阻礙。現今

，由於IT技術的進步，行動裝置的普及化，使得人們愈來愈依賴智慧型手機與平

板電腦，而這類型的行動裝置解決了桌上型電腦可攜性不高的問題，因此本系統

以APP的方式開發，達到無所不在地學習，並且使用亮色系的色彩來吸引兒童們

的注意力，提升兒童們學習意願，本APP也設計小遊戲讓兒童在遊戲過程中學習

，同時製作測驗幫助兒童增加記憶力，讓他們回想學習了哪些東西，不是單純玩

遊戲，而是在遊戲中能夠記住學習內容。

Xiaoming Li博士表示，使用電腦的學齡前兒童是比較聰明的，同時入學後也

比較容易適應；但是要注意，花太多的時間在電腦上可能會產生負面影響，即使

是年紀非常小的孩子也一樣，所以學齡前兒童使用電腦或行動裝置三十分鐘就得

需要休息[3]，可以避免近視以及成癮症，因此本系統設計監控功能，在兒童使用

- 1 -

電腦三十分鐘後，系統會自動強制關閉此APP，以避免兒童有手機成癮症，也保

護兒童的視力。

本系統開發採用MVC（Model-View-Controller）架構，MVC是軟體工程中的

一種軟體架構模式，此架構將軟體系統分為三個基本部分：模型（Model）、檢

視（View）和控制器（Controller）。利用MVC架構可以降低系統開發的複雜度

，對後續系統的維護、擴充與軟體的再利用都有所助益[4][5]。

- 2 -

第貳章 文獻回顧與探討

2.1 行動裝置APP開發平台

APP是APPlication的縮寫，意思是「應用程式」，無論手機或電腦上的軟體

，其實都是「APP」。只是因為目前智慧型手機正流行，因此一般智慧型手機上

的應用程式就被簡稱為「APP」。

2.1.1 Android 基礎與開發環境

Android是一套使用Linux作業系統為基礎開發的開放原始碼（Open Source）

作業系統，最初使用在手機等行動裝置上，現在已逐漸擴充到平板電腦和其他領

域[6]。

目前非營利組織的開放式手持裝置聯盟和Google公司全力支持Android作業系

統的開發計畫。Google並整合Google的Gmail、YouTube、Google Maps和Google

play等服務，擴大市場的佔有率。

對於程式開發者來說，Android提供完整開發工具和框架，可以讓開發者快速

建立行動裝置執行的應用程式，其中Android SDK更提供模擬器來模擬行動裝置

，也就是說，在沒有實體行動裝置的情況下，程式開發者依然可以進行Android應

用程式的開發[7][8]。

2.2 MVC

MVC是軟體工程中的一種軟體架構模式，主要是用來將使用者介面設計與程

式邏輯控制分離，以降低系統開發的複雜度。此架構將軟體系統分為三個基本部

分：模型（Model）、檢視（View）和控制器（Controller），如圖1。

Model是定義資料的存取介面以及資料格式，包含了資料認證及商業邏輯等

。View是定義使用者介面（User Interface）等相關設計，包含輸入輸出。

Controller是定義控制系統運作的流程、操作的邏輯、錯誤的處理、事件的回應等

等[5]。

使用MVC架構，由於模型、檢視和控制器互相獨立，因此可以容易的修改使

用者介面，而不會影響到程式邏輯。反之，可以改變邏輯的控制，而不會影響到

- 3 -

使用者介面。此架構可以使用不同的View來顯示相同資料，也能夠讓程式碼重複

使用，提升系統開發的彈性與效率。

圖 2.1 MVC 架構圖

2.3 圖片格式

Android支援JPEG（JPG）、BMP、PNG、GIF等各種圖片格式，以下簡單

的分析比較常見的圖片格式，並選擇最適合本系統的圖片格式。

2.3.1 JPEG（JPG）

是一種針對相片影像而廣泛使用的一種失真壓縮標準方法。也是全球資訊

網（World Wide Web）上最普遍的被用來儲存和傳輸照片的格式。

優點：

可以處理數千或甚至數百萬的色彩，並能維持最精簡的檔案大小。

缺點：

壓縮方式是破壞性資料壓縮。

不支援透明背景。

2.3.2 PNG

是一種無損壓縮的圖形格式，支持索引、灰階及Alpha通道等特性。

優點：

最高支持48位真彩色圖像。

支持Alpha通道的透明/半透明特性。

使用無損壓縮。

- 4 -

http://zh.wikipedia.org/wiki/%E6%9C%89%E6%8D%9F%E6%95%B0%E6%8D%AE%E5%8E%8B%E7%BC%A9http://zh.wikipedia.org/wiki/%E5%85%A8%E7%90%83%E8%B3%87%E8%A8%8A%E7%B6%B2http://zh.wikipedia.org/wiki/%E5%85%A8%E7%90%83%E8%B3%87%E8%A8%8A%E7%B6%B2http://zh.wikipedia.org/wiki/%E7%A0%B4%E5%A3%9E%E6%80%A7%E8%B3%87%E6%96%99%E5%A3%93%E7%B8%AEhttp://zh.wikipedia.org/wiki/%E6%97%A0%E6%8D%9F%E5%8E%8B%E7%BC%A9http://zh.wikipedia.org/wiki/Alpha%E9%80%9A%E9%81%93http://zh.wikipedia.org/wiki/%E7%9C%9F%E5%BD%A9%E8%89%B2

缺點：

不能儲存多張影像資訊。

檔案大小較大。

2.3.3 GIF

是一種點陣圖圖形檔案格式，以8位元色（即256種顏色）重現真彩色的影像

。

優點：

圖形通常比較小，因此在下載和顯示時會較為快速。

可插入多影格，從而實作動畫效果。

可設定透明色以產生物件浮現於背景之上的效果。

缺點：

由於採用了8位元壓縮，最多只能處理256種顏色，故不宜應用於真彩色圖

片。

2.3.4 BMP

是微軟視窗圖形子系統（Graphics Device Interface）內部使用的一種點陣圖

圖形格式，它是微軟視窗平台上的一個簡單的圖形文件格式。

優點：

是不採用任何壓縮，無損，顏色準確，有2色、16色、256色、真彩色各種

選擇。

缺點：

檔案大小較大，不支援檔案壓縮。

經過以上分析，本系統選用PNG圖片格式來做使用。因為本系統的圖片皆

需要透明背景，以及希望在智慧型產品上容量小且看到圖片不會失真，所以圖片

格式選用PNG格式儲存。

- 5 -

http://zh.wikipedia.org/wiki/%E4%BD%8D%E5%9B%BEhttp://zh.wikipedia.org/wiki/%E4%BD%8D%E5%9B%BEhttp://zh.wikipedia.org/wiki/%E7%9C%9F%E5%BD%A9%E8%89%B2http://zh.wikipedia.org/wiki/%E5%8A%A8%E7%94%BBhttp://zh.wikipedia.org/wiki/%E7%9C%9F%E5%BD%A9%E8%89%B2http://zh.wikipedia.org/wiki/%E5%BE%AE%E8%BD%AF%E8%A7%86%E7%AA%97http://zh.wikipedia.org/wiki/Graphics_Device_Interfacehttp://zh.wikipedia.org/wiki/%E4%BD%8D%E5%9B%BEhttp://zh.wikipedia.org/wiki/%E4%BD%8D%E5%9B%BEhttp://zh.wikipedia.org/wiki/%E5%9B%BE%E5%BD%A2http://zh.wikipedia.org/wiki/%E5%9B%BE%E5%BD%A2http://zh.wikipedia.org/wiki/%E5%9B%BE%E5%BD%A2%E6%96%87%E4%BB%B6%E6%A0%BC%E5%BC%8F

2.4 音訊格式

Android支援MP3、WMA、MP2等各種音訊格式，但是錄音只有支援

MP3與WMA兩種格式，所以在此只分析MP3與WMA，並選擇最適合本系

統的音訊格式。

2.4.1 MP3

是一種音頻壓縮技術，是在 1987 年的數位音訊廣播（ Digital Audio

Broadcasting）計畫中，所發明出來的音訊壓縮演算法。

優點：

檔案大小較小，傳輸速度快。

缺點：

壓縮方式為有損壓縮。

2.4.2 WMA

由微軟公司開發的一種數字音頻壓縮格式。

優點：

檔案大小較小。

缺點：

有損數據壓縮的檔案格式。

經過以上分析，本系統選用MP3格式儲存。因為本系統的聲音長度不

長，壓縮後的檔案與原始檔的差異不大，而且MP3檔案的音質比WMA好。

- 6 -

http://zh.wikipedia.org/wiki/%E5%BE%AE%E8%BD%AF%E5%85%AC%E5%8F%B8http://zh.wikipedia.org/wiki/%E6%95%B0%E5%AD%97%E9%9F%B3%E9%A2%91

2.5 聲音播放元件

Android支援SoundPool與MediaPlayer兩種播放元件。在此分析SoundPool

與MediaPlayer，並選擇最適合本系統的聲音播放元件。

2.5.1 SoundPool

主要用於播放一些較短的聲音片段，支援從專案的資源或文件系統載入。

優點：

CPU資源佔用量低和反應延遲小。

可依照自己的喜好設置聲音的品質、音量、播放比率等參數。

可同時管理多個音頻流，每個音頻都有獨自的ID。

缺點：

只支援容量小的檔案，不適合來播放歌曲或者做遊戲背景音樂。

2.5.2 MediaPlayer

Android內建撥放元件。

優點：

聲音長度不受限制。

缺點：

不能同時播放不同聲音檔。

經過以上分析，本系統選用SoundPool與MediaPlayer兩種元件搭配使

用，因為有些聲音長度較短，適合用SoundPool，但是遊戲背景音樂則適

合用MediaPlayer。

2.6 資料庫

Android作業系統提供內建的SQLite資料庫[9]，SQLite本身包含資料庫引擎，

而且可以嵌入至其他系統中，不需額外設定。SQLite比較不會浪費行動裝置的記

憶體資源，而且是一套支援ACID交易的關聯式資料庫；支援多種語言、跨平台

，目前主流的作業系統都支援。本系統資料庫使用SQLite記錄系統運作相關資訊

。

- 7 -

第參章 研究方法 3.1 研究流程

本研究流程，首先確認研究動機與目的，接下來是系統初步規劃、系

統實作與系統測試；一開始先確認本系統是要為哪個年齡層的孩童設計，

再進一步了解此年齡層孩童的學習阻礙，然後針對這些學習阻礙而開發一

個適合此年齡層孩童，且可以增進他們學習意願與樂趣的輔助學習系統。

本研究流程圖如下：

圖 3.1 系統流程圖

確認研究動機與目的

系統規劃與架構

完成

系統分析

系統設計

系統實施

- 8 -

3.2 系統分析

本研究採用研究與開發（Research and Development, R & D）之研究

方法 [10]，亦即以MVC建立系統架構，並使用UML（Unified Modeling

Language）工具進行系統分析與設計，最後實作APP系統。

開發系統時要先擷取使用者需求，並且以使用案例圖描述系統功能，

如圖3.2。本系統有兩個行為者，一為使用者，另一個是系統的計時器（

Timer）。其中使用者與測驗、發音、圖卡及配對四個使用案例互動，計時

器與監控使用案例互動。

圖3.3顯示MVC架構下的發音使用案例，當使用者點選字母、注音或

圖卡按鈕，即從View輸入，接下來Controller判斷何按鈕被按下，然後去

Model尋找屬於該按鈕的聲音檔，再使用播放元件輸出聲音。

圖 3.2 使用案例圖 圖 3.3 發音功能的 MVC 架構

- 9 -

3.3 資料庫說明

本 系 統 的 資 料 庫 檔 名 為 LEARNING 共 擁 有 兩 個 資 料 表 WORD 及

CATEGORY，WORD資料表儲存圖卡中英文名稱等資訊，CATEGORY資

料表儲存圖卡分類等資訊，聲音及圖片檔案儲存在專案資源（Resource）

資料夾，其相關資料表的關聯性及說明如圖3.4、表3.1與表3.2。

圖 3.4 ER 模型

- 10 -

表3.1 WORD資料表欄位說明

WORD

欄位名稱 型態 備註

ID Int 編號

Cname Text 中文名稱

Spell Text 注音

Ename Text 英文名稱

Csound Int 中文發音

Esound Int 英文發音

Img Int 圖片

Cateid Int 分類ID

表3.2 CATEGROY資料表欄位說明

CATEGORY

欄位名稱 型態 備註

Cateid Int 分類ID

Cate Text 分類名稱

- 11 -

3.4 開發軟體與系統需求

本系統採用Eclipse編輯軟體撰寫程式，圖片、遊戲背景與按鈕圖則是

使用 Illustrator、PhotoImpact軟體，聲音編輯採用GoldWave軟體；資料庫

則是使用SQLite引擎，如表3.3。執行本系統所需的系統需求如表3.4。

表3.3 開發軟體

項目 軟體工具名稱

程式撰寫軟體 Eclipse

圖片編修軟體 Il lustrator、PhotoImpact

聲音編輯軟體 GoldWave

程式撰寫語言 JAVA語言

版面配置語言 XML語言

資料庫 SQLite

表3.4 系統需求

項目 最低配備

作業系統 Android 2.1

- 12 -

3.5 系統內容與介紹

本系統擁有16個 java檔與15個xml檔， java檔案與說明如圖3.5、表3.5

，xml檔案與說明如圖3.6、表3.6。

圖3.5 java檔案

- 13 -

表3.5 java檔案說明 檔案名稱 .java 說明

animalCActivity 中文動物圖卡程式。 animalEActivity 英文動物圖卡程式。 animalGalleryC 中文動物圖片瀏覽程式。 db 用來創建資料庫所使用的程式。 DBHelper 用來創建資料庫所使用的程式。 foodCActivity 中文食物圖卡程式。 foodEActivity 英文食物圖卡程式。 foodGalleryC 中文食物圖片瀏覽程式。 foodGalleryE 英文食物圖片瀏覽程式。 ImageAdaper 負責Gallery與GradView之間的工作。 language 語言選擇的程式，提供使用者中文及英文兩種語言。 learning 資源檔。 letter 英文字母的程式，按下英文字母就會發音。 main 首頁的程式，提供使用者開始、離開的功能。 Card 翻牌遊戲程式。 MemoryGame 翻牌遊戲程式。 myGallery 圖片瀏覽程式。

playchinese 中文遊戲畫面的程式，提供使用者可選擇注音、圖卡、

配對、測驗四種遊戲。

playenglish 英文遊戲畫面的程式，提供使用者可選擇字母、圖卡、

配對、測驗四種遊戲。

playitem 英文圖卡項目，提供使用者可選擇動物、食物、交通工

具三項目。

playitemC 中文圖卡項目，提供使用者可選擇動物、食物、交通工

具三項目。 QA 中文測驗。 QAE 英文測驗。 sym 注音符號的程式，按下注音符號就會發音。 trafficCActivity 中文交通圖卡程式。 trafficEActivity 英文交通圖卡程式 trafficGalleryC 中文交通圖卡瀏覽程式。 trafficGalleryE 英文交通圖卡瀏覽程式。 YGridGallery Activity

圖片瀏覽程式。

- 14 -

表3.6 xml檔案說明

檔案名稱

.xml 說明

choosepic 選擇圖卡項目的畫面，包含動物

、食物、交通工具三種項目。

demomain 圖片瀏覽的畫面，使用GridView

呈現所有的圖片。

gallery 單一圖片瀏覽畫面。

index 首頁。

language 語言選擇畫面（中文、英文）。

letter 字母鍵盤畫面，按下每個字母都

會發出其對應的音。

main 設定的畫面，包含新增、刪除、

修改三個按鈕。

modify 修改的畫面。

playchinese 中文遊戲介面，包含注音、圖卡

、配對、測驗四個按鈕。

playenglish 英文遊戲介面，包含字母、圖卡

、配對、測驗四個按鈕。

qa 中文測驗畫面。

qae 英文測驗畫面。

scale 縮放動畫。

sym 注音鍵盤畫面，按下每個注音符

號都會發出其對應的音。

- 15 -

第肆章 系統實作 本系統包含發音、遊戲、測驗及監控四項功能，發音提供中文與英文兩種語

言選擇，中文部分包含注音與圖卡，英文部分則包含字母與圖卡。注音功能與字

母功能可以幫助兒童識別注音符號與英文字母和發音。圖卡有可愛的圖像幫助兒

童識別動物、食物與交通工具，並具有中文與英文發音練習。配對遊戲有可愛的

圖像，提高兒童的大腦能力。測驗可以幫助孩童增加記憶力，提升兒童學習的

效果。監控功能三十分鐘後啟動，關閉APP，以保護兒童的視力。

本系統首頁（圖4.1），有開始與離開兩個選項。當點選開始按鈕進入語言選

擇畫面（圖4.2），當點選離開按鈕即結束本APP。點選中文按鈕會出現圖4.3畫面

，點選英文按鈕會出現圖4.4畫面。

圖 4.1 系統首頁 圖 4.2 語言選擇

點選注音按鈕後進入注音符號畫面（圖4.5），按下任一個注音按鈕，將發出

其相對應之注音符號聲音，藉由此功能，學齡前兒童能夠學習與辨識注音符號和

發音。點選字母按鈕會進入英文字母畫面（圖4.6），藉由此功能，讓學齡前兒童

能夠學習與辨識英文字母和發音。點選圖卡按鈕後進入中英文圖卡分類畫面（圖

4.7），點選配對按鈕顯示圖4.9畫面。

圖 4.3 中文遊戲畫面 圖 4.4 英文遊戲畫面

- 16 -

圖 4.5 注音符號 圖 4.6 英文字母

當進入中英文圖卡類別選擇畫面時，可點選動物、食物或交通三種類別，圖

4.8為點選動物按鈕時顯示之畫面。配對遊戲（圖4.9）是以翻牌的方式進行，如

果翻到兩張相同的牌，即配對成功，強化兒童記憶力。測驗（圖4.10）以選擇題

的方式呈現，每題答案共有三個選項，當點選錯誤答案時，會出現錯誤訊息（圖

4.11），點選正確答案方可進行下一題（圖4.12）。

圖 4.7 中英文圖卡類別選擇 圖 4.8 動物圖卡畫面

圖 4.9 配對遊戲畫面 圖 4.10 測驗遊戲畫面

- 17 -

圖4.11 測驗答對畫面 圖4.12 測驗答錯畫面

當進入本系統即自動計時，三十分鐘後啟動監控功能，關閉的前五秒會出現

提醒訊息（圖4.13），五秒後即關閉APP（圖4.14）。

圖4.13系統即將關閉畫面 圖4.14 系統關閉畫面

- 18 -

第伍章 結論

本系統包含發音、遊戲、測驗及監控四項功能，達成寓教於樂的目的

，按鈕圖、遊戲圖卡、注音與英文字母按鈕皆以豐富色彩繪製，以吸引兒

童的注意力，使兒童在遊戲中學習，提升學習的意願，還能增加學習的樂

趣，同時製作測驗幫助兒童增加記憶力，提升學習效果。本系統並以APP的方

式呈現，達到無所不在的學習的目的。為了不讓兒童有手機成癮症，本系

統設有監控功能，兒童在行動裝置上使用此APP三十分鐘後，系統會自動

強制關閉此APP，以避免兒童有手機成癮症，也保護兒童的視力。

此外，本系統以UML中的使用案例圖描述使用者的需求與系統功能，

並以MVC架構降低系統開發的複雜度，以利於後續系統的維護、擴充與軟

體的再利用。

- 19 -

參考文獻

(1) 圖書資訊學系-輔仁大學，”公共圖書館學齡前兒童及家長服務之調查研

究”，第12-16頁。

(2) 劉瑩，「如何作好啟蒙兒童心靈的良師：談父母與孩子共賞兒童文學的

方法」，第4卷，社教資料雜誌188 期，第5-9頁，民國八十三年。

(3) WebMD大眾醫療新聞，”電腦可促進學齡前兒童智能但長時間使用會

妨礙發展”，參考自

”http://www.24drs.com/webmd/chinese_t.asp?who=99862”，2004年。

(4) 維基百科，”http://zh.wikipedia.org/wiki/MVC”。

(5) 周冠誠、吳俊德，”基於MVC架構之雲端平台”，國立暨南國際大學電

機工程系碩士論文，民國一Ｏ一年。

(6) 陳會安，台北，”新觀念Android SDK程式設計範例教本”，第一章，第

1-2頁，旗標出版股份有限公司，民國一Ｏ一年。

(7) 鄧文淵，”Android初學特訓班”， 台北碁峰資訊股份有限公司，民國一

ＯＯ年。

(8) 何孟翰，”Google Android SDK實戰演練”，台北悅知文化，民國一Ｏ

Ｏ年。

(9) 施威銘，”Microsoft SQL Server 2008 設計實務”，台北旗標出版股份

有限公司，民國一ＯＯ年。

(10) Nunamaker, J . F., Jr, Chen, M. and Prudin, D. M. “Systems

Development in Information Systems Research,” Journal of Management

Information Systems, Vol. 7, No. 3, pp.89-106 (1990-1991).

- 20 -

http://zh.wikipedia.org/wiki/MVC

附錄一

學齡前自主學習之行動裝置輔助系統 李靜怡 1、夏則智 1、蔡承育 2、黃佳誼 2、鄭亦琦 2、廖曼伶 2

嶺東科技大學資訊管理系副教授 1、嶺東科技大學資訊管理系 2

｛jennie, tchsia｝@teamail.ltu.edu.tw1

摘要 學齡前正是兒童的學習黃金時期，兒童的人格基礎以及智力的發展，皆是在學齡

前這個階段所奠定的。但是學齡前的兒童十分活潑好動，為了引起學齡前兒童的學習

興趣，讓他們能夠喜歡學習並且持續學習。本系統以 APP 的方式開發，以達到無所不在地學習。系統使用亮色系的色彩來吸引兒童們的注意力，讓兒童們感到興趣，並且

設計小遊戲讓兒童在遊戲過程中學習，增強記憶力。為了不讓兒童有手機成癮症，本

系統設有監控功能，兒童在行動裝置上使用此 APP 三十分鐘後，系統會自動強制關閉此 APP，以避免兒童有手機成癮症，也保護兒童的視力。同時本系統採用 MVC 架構降低系統開發的複雜度，以利於後續系統的維護、擴充與軟體的再利用。

關鍵詞：APP、行動裝置、MVC

一、前言 依據我國現行的國教法規定，滿 6 足歲的兒童必須接受國民小學義務教育，因此

通稱入小學就讀的兒童為學齡兒童，而在進入小學就讀前的階段就稱為學齡前。許多

專家學者認為這個階段正是兒童的學習黃金時期，兒童的人格基礎以及智力的發展，

皆是在學齡前這個階段所奠定的。

每一個小孩都是父母的心肝寶貝，每一個父母都望子成龍、望女成鳳，因此「不

要輸在起跑點」這句話，幾乎已成為家中有學齡前兒童的家長所尊奉的信念。為了引

起學齡前兒童的學習興趣，讓他們能夠喜歡學習並且持續學習。根據公共圖書館學齡

前兒童及家長服務之調查研究發現鮮豔色彩，能給予幼兒視覺上豐富的刺激，可以提

升學齡前兒童的學習意願[1][2]。

學齡前的兒童十分活潑好動，如果要兒童乖乖地坐在書桌前學習，對兒童來說是

無趣且困難的。使用一般桌上型電腦學習的方式雖然可行，但是由於桌上型電腦不易

移動與隨身攜帶，如果想隨時隨地學習，就成了最大的學習阻礙。現今，由於 IT 技術的進步，行動裝置的普及化，使得人們愈來愈依賴智慧型手機與平板電腦，而這類型

的行動裝置解決了桌上型電腦可攜性不高的問題，因此本系統以 APP 的方式開發，達到無所不在地學習，並且使用亮色系的色彩來吸引兒童們的注意力，提升兒童們學習

意願，本 APP 也設計小遊戲讓兒童在遊戲過程中學習，增強記憶力。

Xiaoming Li 博士表示，使用電腦的學齡前兒童是比較聰明的，同時入學後也比較容易適應；但是要注意，花太多的時間在電腦上可能會產生負面影響，即使是年紀非

常小的孩子也一樣，所以學齡前兒童使用電腦或行動裝置三十分鐘就得需要休息[3]，可以避免近視以及成癮症，因此本系統設計監控功能，在兒童使用電腦三十分鐘後，

附錄一

系統會自動強制關閉此 APP，以避免兒童有手機成癮症，也保護兒童的視力。

本系統開發採用 MVC（Model-View-Controller）架構，MVC 是軟體工程中的一種軟體架構模式，此架構將軟體系統分為三個基本部分：模型（Model）、檢視（View）和控制器（Controller）。利用 MVC 架構可以降低系統開發的複雜度，對後續系統的維護、擴充與軟體的再利用都有所助益[4][9]。

二、文獻探討

2.1 行動裝置 APP 開發平台

APP 是 APPlication 的縮寫，意思是「應用程式」，無論手機或電腦上的軟體，其實都是「APP」。只是因為目前智慧型手機正流行，因此一般智慧型手機上的應用程式就被簡稱為「APP」。

2.1.1 Android 基礎與開發環境

Android 是一套使用 Linux 作業系統為基礎開發的開放原始碼（Open Source）作業系統，最初使用在手機等行動裝置上，現在已逐漸擴充到平板電腦和其他領域[5]。

目前非營利組織的開放式手持裝置聯盟和 Google 公司全力支持 Android 作業系統的開發計畫。Google 並整合 Google 的 Gmail、YouTube、Google Maps 和 Google play等服務，擴大市場的佔有率。

對於程式開發者來說，Android 提供完整開發工具和框架，可以讓開發者快速建立行動裝置執行的應用程式，其中 Android SDK 更提供模擬器來模擬行動裝置，也就是說，在沒有實體行動裝置的情況下，程式開發者依然可以進行 Android 應用程式的開發[6][7]。

2.1.2 多媒體格式與元件

Android 支援 JPEG（JPG）、BMP、PNG、GIF 等各種圖片格式，本系統選用PNG 圖片格式來做使用。因為本系統的圖片皆需要透明背景，以及希望在智慧型產品上容量小且看到圖片不會失真，所以圖片格式選用 PNG 格式儲存。

在音訊格式方面支援 MP3、WMA、MP2 等，但是錄音只支援 MP3 與 WMA 兩種格式，本系統選用 MP3 格式儲存。因為本系統的聲音長度不長，壓縮後的檔案與原始檔的差異不大，而且 MP3 檔案的音質比 WMA 好。

Android 支援 SoundPool 與 MediaPlayer 兩種播放元件，本系統選用 SoundPool 與MediaPlayer 兩種元件搭配使用，因為有些聲音長度較短，適合用 SoundPool，但是遊戲背景音樂則適合用 MediaPlayer。

2.1.3 資料庫

Android作業系統提供內建的SQLite資料庫[8]，SQLite本身包含資料庫引擎，而且可以嵌入至其他系統中，不需額外設定。SQLite比較不會浪費行動裝置的記憶體資源，而且是一套支援ACID交易的關聯式資料庫；支援多種語言、跨平台，目前主流的作業系統都支援。本系統資料庫使用SQLite記錄系統運作相關資訊。

附錄一

2.2 MVC

MVC 是軟體工程中的一種軟體架構模式，主要是用來將使用者介面設計與程式邏輯控制分離，以降低系統開發的複雜度。此架構將軟體系統分為三個基本部分：模型

（Model）、檢視（View）和控制器（Controller），如圖 1。

Model 是定義資料的存取介面以及資料格式，包含了資料認證及商業邏輯等。View 是定義使用者介面（User Interface）等相關設計，包含輸入輸出。Controller 是定義控制系統運作的流程、操作的邏輯、錯誤的處理、事件的回應等等[9]。

使用 MVC 架構，由於模型、檢視和控制器互相獨立，因此可以容易的修改使用者介面，而不會影響到程式邏輯。反之，可以改變邏輯的控制，而不會影響到使用者介

面。此架構可以使用不同的 View 來顯示相同資料，也能夠讓程式碼重複使用，提升系統開發的彈性與效率。

圖 1 MVC 架構圖

三、系統分析與設計 本研究採用研究與開發（Research and Development, R & D）之研究方法[10]，亦

即以 MVC 建立系統架構，並使用 UML（Unified Modeling Language）工具進行系統分析與設計，最後實作 APP 系統。

開發系統時要先擷取使用者需求，並且以使用案例圖描述系統功能，如圖 2。本系統有兩個行為者，一為使用者，另一個是系統的計時器（Timer）。其中使用者與發音、圖卡及配對三個使用案例互動，計時器與監控使用案例互動。

圖 3 顯示 MVC 架構下的發音使用案例，當使用者點選字母、注音或圖卡按鈕，即從 View 輸入，接下來 Controller 判斷何按鈕被按下，然後去 Model 尋找屬於該按鈕的聲音檔，再使用撥放元件輸出聲音。

圖 2 使用案例圖 圖 3 發音功能的 MVC 架構

附錄一

四、系統實作

本系統包含發音、遊戲及監控三項功能，發音提供中文與英文兩種語言選擇，中

文部分包含注音與圖卡，英文部分則包含字母與圖卡。注音功能與字母功能可以幫助

兒童識別注音符號與英文字母和發音。圖卡有可愛的圖像幫助兒童識別動物、食物與

交通工具，並具有中文與英文發音練習。配對遊戲有可愛的圖像，提高兒童的大腦能

力，增強記憶力。監控功能三十分鐘後啟動，關閉APP。

本系統首頁（圖4），有開始與離開兩個選項。當點選開始按鈕進入語言選擇畫面

（圖5），當點選離開按鈕即結束本APP。點選中文按鈕會出現圖6畫面，點選英文按鈕

會出現圖7畫面。

圖 4 系統首頁 圖 5 語言選擇

點選注音按鈕後進入注音符號畫面（圖8），按下任一個注音按鈕，將發出其相對

應之注音符號聲音，藉由此功能，學齡前兒童能夠學習與辨識注音符號和發音。點選

字母按鈕會進入英文字母畫面（圖9），藉由此功能，讓學齡前兒童能夠學習與辨識英

文字母和發音。點選圖卡按鈕後進入中英文圖卡分類畫面（圖10），點選配對按鈕顯

示圖12畫面。

圖 6 中文遊戲畫面 圖 7 英文遊戲畫面

附錄一

圖 8 注音符號 圖 9 英文字母

當進入中英文圖卡類別選擇畫面時，可點選動物、食物或交通三種類別，圖11為

點選動物按鈕時顯示之畫面。配對遊戲（圖12）是以翻牌的方式進行，如果翻到兩張

相同的牌，即配對成功，強化兒童記憶力。

圖 10 中英文圖卡類別選擇 圖 11 動物圖卡畫面

圖 12 配對遊戲

為了避免兒童有手機成癮症，也保護兒童的視力，每三十分鐘後啟動監控功能，

關閉 APP（圖 13）。

附錄一

圖 13 監控功能畫面

五、結論

本系統包含發音、遊戲及監控三項功能，達成寓教於樂的目的，按鈕圖、遊戲

圖卡、注音與英文字母按鈕皆以豐富色彩繪製，以吸引兒童的注意力，使兒童在

遊戲中學習，提升學習的意願，還能增加學習的樂趣，並以APP的方式呈現，達到無所

不在的學習的目的。

此外，本系統以UML中的使用案例圖描述使用者的需求與系統功能，並以

MVC架構降低系統開發的複雜度，以利於後續系統的維護、擴充與軟體的再利用。

六、參考文獻 1. 圖書資訊學系-輔仁大學，”公共圖書館學齡前兒童及家長服務之調查研究”，頁 12-

16。 2. 劉瑩，「如何作好啟蒙兒童心靈的良師：談父母與孩子共賞兒童文學的方法」，社

教資料雜誌 188 期 4 卷，1994 年，頁 5-9。 3. WebMD 大眾醫療新聞，”電腦可促進學齡前兒童智能但長時間使用會妨礙發展”，參

考自 http://www.24drs.com/webmd/chinese_t.asp?who=99862，2004 年。 4. 維基百科，”http://zh.wikipedia.org/wiki/MVC”。 5. 陳會安，台北，”新觀念 Android SDK 程式設計範例教本”，第一章，第 1-2 頁，旗標

出版股份有限公司，民國一百零一年。 6. 鄧文淵，”Android 初學特訓班”， 台北碁峰資訊股份有限公司，2011 年。 7. 何孟翰，”Google Android SDK 實戰演練”， 台北悅知文化，2011 年。 8. 施威銘，”Microsoft SQL Server 2008 設計實務”，台北旗標出版股份有限公司，2011

年。 9. 周冠誠、吳俊德，”基於 MVC 架構之雲端平台”，國立暨南國際大學電機工程系碩士

論文，2012 年。 10. Nunamaker, J. F., Jr, Chen, M. and Prudin, D. M. “Systems Development in Information

Systems Research,” Journal of Management Information Systems, Vol. 7, No. 3, Winter 1990-1991, pp.89-106.

http://www.24drs.com/webmd/chinese_t.asp?who=99862http://zh.wikipedia.org/wiki/MVC

第壹章 緒論1.1 研究動機1.2 研究目的

第貳章 文獻回顧與探討2.1 行動裝置APP開發平台2.1.1 Android 基礎與開發環境

2.2 MVC2.3 圖片格式2.3.1 JPEG（JPG）2.3.2 PNG2.3.3 GIF2.3.4 BMP

2.4 音訊格式2.4.1 MP32.4.2 WMA

2.5 聲音播放元件2.5.1 SoundPool2.5.2 MediaPlayer

2.6 資料庫

第參章 研究方法3.1 研究流程3.2 系統分析3.3 資料庫說明3.4 開發軟體與系統需求3.5 系統內容與介紹

第肆章 系統實作第伍章 結論參考文獻