專題成果報告書

專題名稱 學習歷程

校名/科名：國立斗六家商/資料處理科

小組成員：呂政陽、吳彩琳、陳明萱、陳建程

指導老師：賴雅玲老師

製作日期：106 年 4 月~107 年 1 月

2

目 錄

圖 目 錄 ...................................................................................................... 3

摘要 .............................................................................................................. 5

一、研究動機與目的 .................................................................................. 5

二、文獻探討 .............................................................................................. 6

《App Inventor 2》 ................................................................................................................ 6

《Paint Tool SAI》 ................................................................................................................. 7

《Ulead PhotoImpact》 ......................................................................................................... 8

《資料庫-CSV》 ....................................................................................................................... 9

三、研究過程 ............................................................................................ 10

第一階段-構想 .......................................................................................................................... 10

第二階段-製作 .......................................................................................................................... 10

第三階段-加工、調整 .............................................................................................................. 11

四、程式設計 ............................................................................................ 12

【起動頁】 ................................................................................................................................ 12

【初始頁】 ................................................................................................................................ 13

【說明頁】 ................................................................................................................................ 13

【首頁】 .................................................................................................................................... 15

【功能-紀錄】 .......................................................................................................................... 16

【功能-測驗】 .......................................................................................................................... 21

【功能-情報】 ......................................................................................................................... 27

【功能-意見】 ......................................................................................................................... 27

【輔助】 ................................................................................................................................... 28

五、作品講解 ........................................................................................... 29

六、討論 ................................................................................................... 35

對於『學習歷程』的功能?..................................................................................................... 35

對於製作『學習歷程』的過程?............................................................................................. 35

對於『學習歷程』的可塑性之處?......................................................................................... 35

七、結論 ................................................................................................... 35

八、參考文獻 ........................................................................................... 36

3

圖 目 錄

圖 1 – App Inventor 2 介面 ................................................................... 6

圖 2 – App Inventor 2 程式碼 ............................................................... 6

圖 4 – Scratch 程式碼 ............................................................................ 6

圖 3 – Scratch 介面 ................................................................................ 6

圖 5 – SAI 介面 ....................................................................................... 7

圖 6 – SAI 繪圖 ....................................................................................... 7

圖 7 – PhotoImpact 介面 ....................................................................... 8

圖 8 – CSV 儲存方式 ............................................................................... 9

圖 9 – 第一階段....................................................................................... 10

圖 10 – 第二階段 ..................................................................................... 10

圖 11 – 第三階段 ...................................................................................... 11

圖 12 – 程式架構圖 ................................................................................. 12

圖 13 – 等待程序 ..................................................................................... 12

圖 14 – 切換視窗選取輔助說明 ............................................................ 13

圖 15 – 輔助對話程序 ............................................................................. 13

圖 16 – 讀取文字及文字長度 ................................................................ 14

圖 17 – 文字跑出模式 ............................................................................. 14

圖 18 -「最新」的顯示 ........................................................................... 15

圖 19 – 記事本的顯示及儲存 ................................................................ 15

圖 20 – 文字顯示及儲存 ........................................................................ 16

圖 21 – 選取圖片後 ................................................................................. 17

圖 22 – 圖片讀取 .................................................................................... 18

圖 23 – 圖片左右滑動 ............................................................................ 18

圖 24 – 標籤的儲存 ................................................................................ 19

圖 25 – 記事本的儲存 ........................................................................... 20

圖 26 – 便利貼的顯示及儲存 ............................................................... 20

圖 27 – 鼓勵語程序 ................................................................................ 21

4

圖 28 – 題目位置抽選 ........................................................................... 22

圖 29 – 答案位置抽選 ........................................................................... 22

圖 30 – 選擇答案、答案清單 ............................................................... 22

圖 31 – 讀取代號以及資料庫 ............................................................... 23

圖 32 – 讀取題目、答案並記錄答案 ................................................... 23

圖 33 – 選擇答案的紀錄 ....................................................................... 23

圖 34 – 未作答提醒 ............................................................................... 24

圖 35 – 檢查對錯 ................................................................................... 25

圖 36 – 答案的對錯 ............................................................................... 26

圖 37 – 連結至該網站 ........................................................................... 27

圖 38 – 寄出程序 ................................................................................... 27

圖 39 – 「詢問」、「沒事」的程序 ....................................................... 28

圖 40 – 啟動頁到初始頁 ....................................................................... 29

圖 41 – 說明頁以及首頁畫面 ............................................................... 29

圖 42 – 上面的公告區 ........................................................................... 30

圖 43 – 紀錄的使用方式 ....................................................................... 30

圖 44 – 標籤使用 .................................................................................... 31

圖 45 – 測驗畫面 .................................................................................... 31

圖 46 – 檢查結果畫面 ........................................................................... 32

圖 47 – 情報畫面 ................................................................................... 32

圖 48 – 寄出畫面 ................................................................................... 33

圖 49 – 每個選項的畫面 ....................................................................... 33

圖 50 – 便利貼+記事 ............................................................................. 34

圖 51 – 鼓勵語 ........................................................................................ 34

5

摘要

即將邁入下一階段的旅程，卻不知道自己該往何處?所學的是否自

己感興趣？所以此 APP 是以『自我學習』為發想中心，做出輔助使用

者學習的功能，慢慢找回對於學習的熱衷，並思考、尋找自己想做的

事。

由於每個領域都做會複雜許多，因此選擇我們資料處理科裡面較

為感觸的一個領域，以及嘗試做出輔助功能。

在 2017年 1月份完成這個作品，並在校內的比賽裡獲得入選的佳

績。

一、研究動機與目的

每個人一開始都是喜歡學習的，而學習從出生的那一刻就陪伴在

我們身邊，像小嬰兒為了能表達自己肚子餓或者不舒服，就會用哭聲

引起注意，長大後為了可以跟他人交朋友，學了文字以及發音等，學

習不僅讓我們了解這世上的知識，也讓我們享受於學習，讓生活更有

趣、更充實。

但成為學生後，被早期思維逼迫學習，導致只是要應付考試而學

習，而不再是出自於自己想學習，慢慢的對學習產生排斥，讓原本喜

歡學習的自己遭抹滅，到面臨選擇時，遲遲無法選擇、茫然，最後無

限循環。

為了找回喜歡學習的自己，以這為出發點，想出做個輔助型 APP

幫助使用者主動思考、學習，而使用高二所學的 App Inventor2 製作。

6

二、文獻探討

《App Inventor 2》

App Inventor 原是 Google 實驗室（Google Lab）的一個子計畫，

Google App Inventor 是一個完全線上開發的 Android 程式環境，拋棄

複雜的程式碼而使用樂高積木式的堆疊法來完成，除此之外也正式支

援樂高 NXT 機器人。

省略了需要使用 Java 才能開啟的 Blocks Editor，將其整合在網

頁中即可使用，可說是與 Scratch 愈來愈像了，在操作上也將各指令

藉由下拉式選單大幅簡化，使用者應該可以更快找到所需的指令。

圖 4 – Scratch 程式碼 圖 3 – Scratch 介面

圖 2 – App Inventor 2 程式碼 圖 1 – App Inventor 2 介面

7

《Paint Tool SAI》

簡稱 SAI，是一個已經轉型商業化的繪圖軟體，由日本的

SYSTEAMAX 開發，2008 年 02 月 25 日，Easy Paint Tool SAI Ver.1.0.0

正式版發行，在正式版發行之前，SAI 是作為自由軟體試用的形式對

外發布的。

軟體日文名稱為「ペイントツール SAI」，英文、日文官方網站也

同時使用「Easy PaintTool SAI」的名稱，但比 Paint Tool SAI 少，以上

三種名稱同時被官方網站使用，現階段其用戶多稱其為 SAI。

與其他同類軟體不同的是，SAI 給眾多數字插畫家以及 CG 愛好

者提供了一個輕鬆創作的平台，SAI 極具人性化，其追求的是與數碼

繪圖板極好的相互兼容性、繪圖的美感、簡便的操作以及為用戶提供

一個輕鬆繪圖的平台。

圖 6 – SAI 繪圖

圖 5 – SAI 介面

8

《Ulead PhotoImpact》

由 Ulead 推出的影像處理軟體，由友立資訊於 1996 年 2 月開發完

成上市，執行於 Windows 作業系統下，以家庭用戶為主。

用戶可以在 PhotoImpact 上處理數位化影像，通過所謂 TWAIN 介

面，它可以直接從掃描器或數位相機呼叫相片，在 PhotoImpact 的幫助

下，用戶可以製作自己的網頁。

PhotoImpact 與一些影像處理軟體如 Corel PaintShop Photo 定位於

同一消費群，在一些測試中常進行比較。

友立資訊在 2006 年底由 Corel 控股，PhotoImpact 也成為 Corel 旗

下產品，完善了其產品線。

圖 7 – PhotoImpact 介面

9

《資料庫-CSV》

資料庫

可視為電子化的檔案櫃，儲存電子檔案的處所，使用者可以對檔

案中的資料執行新增、擷取、更新、刪除等操作。

資料庫指的是以一定方式儲存在一起、能為多個用戶共享、與應

用程式彼此獨立的資料集合。

逗號分隔值(CSV)

其檔案以純文字形式儲存表格資料（數字和文字），純文字意味著

該檔案是一個字元序列，不含必須象二進位數字那樣被解讀的資料。

CSV 檔案由任意數目的記錄組成，記錄間以某種換行符分隔；每

條記錄由欄位組成，欄位間的分隔符是其它字元或字串，最常見的是

逗號或制表符，通常，所有記錄都有完全相同的欄位序列。

CSV 檔案格式的通用標準並不存在，但是在 RFC 4180 中有基礎

性的描述，使用的字元編碼同樣沒有被指定，但是 7-bit ASCII 是最基

本的通用編碼。

圖 8 – CSV 儲存方式

10

三、研究過程

第一階段-構想

一開始當然會想不出要做什麼，所以只要

有想出一點東西，就提出來，每個人都提出一

、兩想法後，接著討論這些想法的優缺點，必

須知道以我們現有的力量，能讓想法完成度最

高的數據。

慢慢的浮出一個答案，而這也是大家共同

有的問題-『學習』，所以較為感觸，確認了主

題，分成兩組進行，在蒐集資料的同時，先以

我們的知識設計出雛形來，再慢慢依蒐集的資

訊做調整。

第二階段-製作

圖 10 – 第二階段

圖 9 – 第一階段

11

因這方面懂的人不多，所以程式主要都是一人製作，其他組員繼

續以蒐集為主以及照著初稿所需的材料進行，依初稿的設計做出所需

的功能，必須知道功能主要目的，拼出能發揮此功能的程式。

接著進行功能執行測試，測試成功就做下一個功能，或者突發奇

想是可以放進去的功能，也可以嘗試，但還是以主功能為主，測試失

敗就看是否邏輯錯誤，或在紙上畫出流程圖，這樣可以幫助思考以及

找到自己邏輯矛盾之處，如果還是失敗，詢問老師或較懂這方面的同

學。

第三階段-加工、調整

都完成後，進行排版的動作，要讓使用者看著舒服的介面也是需

要技術的，所以決定物件、背景等自己繪製，我們盡量不用現成的圖

而是當參考圖，因為想用我們雙手，去嘗試，以求看得清楚是要表達

什麼為主，最後從頭跑一次，微調後進行下載。

圖 11 – 第三階段

12

四、程式設計

主要都是以輔助使用者的功能為主，由於一些功能要完成度高會

過於複雜以及難以調整，所以簡化成容易快速上手的工具以覺得在學

習中最重要的工具列出四個功能。

既然是輔助，就會有輔助人物，但現在的能力還無法像市面常見

的人工智慧，所以只能提供單方面，像 RPG 遊戲協助玩家的人物，輔

助人物位於除了【啟動頁】和【初始頁】外。

【起動頁】

為了能像一般應用程式不會馬上到頁面，都會有等待介面，所以

設兩秒的等待時間，2 秒後開啟新分頁【初始頁】。

圖 13 – 等待程序

圖 12 – 程式架構圖

13

【初始頁】

設定這頁面是要讓使用者對於功能有初步了解，當然不是強制看

的，會切換到一個小視窗選擇要看的說明，有「首頁」、「功能」、「輔

助」三個說明，選擇開啟新分頁【說明頁】。

【說明頁】

開啟後，用 RPG

遊戲模式將說明該選

項的事項，有些會放圖

片來讓你對於一些按

鈕有印象，講完後再按

一次就會關閉頁面。

圖 15 – 輔助對話程序

圖 14 – 切換視窗選取輔助說明

14

對於對話呈現方式，先在一開始對於該選項讀取對應的資料庫，

將分別讀取資料庫中的一段話和該段話的總長度。

接著從頭到尾取一字推疊得到類似於 RPG 遊戲對話的效果，但要

分二個取字模式，在測試中，第一段需要第一段總長度再加上 2，才可

以一字不漏的出來，原本是只要加上 1 就可以的，這是特別對應第一

段的模式。

圖 17 – 文字跑出模式

圖 16 – 讀取文字及文字長度

15

【首頁】

是一個核心頁，可以知道「最新」、「問題回報」的資訊，就像遊

戲大廳的概念，

也是用切換來看這兩個資訊。

記事本：這在【功能-紀錄】、【功能-測驗】也有，想說要記一些資

訊，卻還要跑到【功能-紀錄】，這樣有些麻煩，所以做出臨時記事的作

用，用內建資料庫 TinyDB 儲存。

圖 19 – 記事本的顯示及儲存

圖 18 -「最新」的顯示

16

【功能-紀錄】

以日記法紀錄自己學習的過程，選擇日期進入到紀錄的頁面。

《文字儲存》

運用內建資料庫 TinyDB 儲存，標籤設為該年月日，如果那天有

紀錄並儲存過，下次開啟就會從資料庫中讀取並顯示紀錄，沒紀錄就

會創新面頁。

圖 20 – 文字顯示及儲存

17

《圖片儲存》

也是運用內建資料庫 TinyDB 儲存以及清單，讓那天的圖片集中

在清單，再之後的讀取也會方便許多，要儲存的值總圖數以及圖片路

徑，當從圖庫中選取圖片時，讓圖片路徑放在清單中的第 N 個，再分

別存入資料庫中。

圖 21 – 選取圖片後

18

在讀取時，先讀取總圖數，接著用迴圈(次數為總圖數)將讀取的路

徑放入清單中，編號已在標籤上用了，所以沒有順序亂掉的問題，接

著關於如何看到自己存的圖片，尤其是多張，但做不出像一般應用程

式的方式，所以想到可以用畫廊的方式，在圖片上左右滑動，就可以

看到其他圖片。

圖 23 – 圖片左右滑動

圖 22 – 圖片讀取

19

為了能方便找紀錄，突然想到可以用「標籤」，看到很多文件應用

程式也用這樣的方式，與 TinyDB 儲存，但為了不要與文字儲存的標

籤混淆，所以另設一個資料庫，也可以改標籤，紀錄上次的標籤名。

用標籤搜尋時，如果輸入的名字沒有在有用標籤的日期當作標籤

名，會直接提醒無此標籤，否則會去讀取那天的的文字以及圖片紀錄

。

圖 24 – 標籤的儲存

20

除了上述的紀錄功能，這裡也有提供記事本的功能，在【首頁】

和【功能-測驗】有，還有類似於便利貼的功能，就是一張照片的原理

，這樣有圖片又有臨時記事紀錄，對於緊急的狀況會有些許幫助。

圖 26 – 便利貼的顯示及儲存

圖 25 – 記事本的儲存

21

【功能-測驗】

這是為了讓使用者知道該領域在學什麼，用 TinyDB 紀錄上次測

驗的日期，這裡也有筆記本。

這裡我有設置小彩蛋，按下後會隨機抽數字，之後顯示讀取號碼

的一句話。

圖 27 – 鼓勵語程序

22

《自我挑戰》

這部分為「載入」，先做題目的抽籤，總共有三個題目資料庫，一

個題目資料庫有十題，但因為資料庫的順序無法變動，所以製作 1~10

的清單進行抽籤，抽五個號碼。

接著進行答案的抽籤，讓選項不會都是固定在選項 A，最後才抽

選要使用的題目資料庫以及製作選擇、答案清單。

圖 30 – 選擇答案、答案清單

圖 29 – 答案位置抽選

圖 28 – 題目位置抽選

23

接著是「讀取」，這是最重要的地方，只要切換至下一題，就要讀

取，過程中也會儲存使用者選項，先讀取在載入中選的題目以及答案

，然後設置之後對答案程序。

圖 32 – 讀取題目、答案並記錄答案

圖 33 – 選擇答案的紀錄

圖 31 – 讀取代號以及資料庫

24

這是為了讓使用者知道哪題未作答所設的提醒，當使用者做完未

作題後，提醒就會把已做的題號刪掉。

圖 34 – 未作答提醒

25

在按下交卷或時間到時，就會開始對答案，做迴圈檢查是否為作

答，再確認有做的題目的選項是否正確，儲存每一個事件(對、錯、未

作答)的代號至最後的程序。

圖 35 – 檢查對錯

26

這是為了清楚顯示使用者選項的對錯，未作答的題目不會顯示答

案。

圖 36 – 答案的對錯

27

【功能-情報】

因為沒有足夠的情報網，所以利用網站連結，讓使用者可直接查

閱，有獎金獵人、樂學 Camp、大學營隊資訊、Citytalk 城市通-活動情

報第一共四個網站。

【功能-意見】

雖然是想做直接在這寄出的設定，以我現在能力還無法，所以先

再這寫，在副程式中已經將收件人、勾選項目和內容連結上，之後連

到應用程式寄出。

圖 38 – 寄出程序

圖 37 – 連結至該網站

28

【輔助】

在學習中多少還是要有可以與使用者成長的夥伴，但以我的技術

無法讓輔助很人性化，所以輔助的對話內容是由資料庫讀取的。

原理在【說明頁】有說明過所以這裡就不再說明，在【首頁】與

輔助互動時可以選四個選項，各功能區只有二個(只有「詢問」、「沒事

」)。

圖 39 – 「詢問」、「沒事」的程序

29

五、作品講解

《一》啟動頁：顯示 Logo，2 秒後進入【初始頁】。

《二》初始頁：這裡是學習的起點，按下 可選擇要看的說明，

按下後進入【說明頁】，按下 後進入【首頁】。

圖 40 – 啟動頁到初始頁

圖 41 – 說明頁以及首頁畫面

30

《三》首頁：核心頁，上面是公告「最新」、「問題回報」還有記事本，

方便記錄，也有在【功能-紀錄】、【功能-測驗】，中間是功能，按下後

，進入該功能。

《四》功能-紀錄：紀錄學習的過程，用日記法紀錄，選擇日期後，到

日記頁，按下 即可打字，除了文字，還有圖片，按下 從 圖

片庫選取，可放多張，在圖片左右滑動，按下 為儲存。

圖 43 – 紀錄的使用方式

圖 42 – 上面的公告區

31

為了能方便找到你要的紀錄，除了選擇日期外，便增加標籤，在儲存

前按下 新增標籤，可更改並記錄上次使用的標籤名，回到頁面按

下 打上標籤名，如果亂打則顯示無此標籤。

《五》功能-測驗：上方會記錄上次測驗日期，按下自我挑戰開始測驗

，為五題一分鐘，由三個資料庫隨機抽一個，一個十題，再從十題中

選五題，再達到第五題會顯示下拉式方塊可以快速到其他題。

圖 45 – 測驗畫面

圖 44 – 標籤使用

32

按下交卷以及時間到下，會自動對答案，對用綠色表示，錯用紅色表

示，如果那題未作答，即不會顯示答案，按下結束測驗可回頁面。

《六》功能-情報：得知比賽、活動、營隊等資訊，預設為中心頁，如

果有較詳細的情報會在這通知，另外提供較多資訊的網站。

圖 47 – 情報畫面

圖 46 – 檢查結果畫面

33

《七》功能-意見：提供建議、問題的管道，勾選要提供的項目並打下

內容，按下寄出鈕進入到你的 Mail 應用程式寄出，並回到首頁。

《八》輔助：協助使用者運用，按下人物頭像可以進行互動，「關於」

是講製作的參與者以及協助者，「詢問」是簡述該頁的功能，「聊天」

是從資料庫中隨機抽選一段內容，目的是從內容中思考並回答自己，

「沒事」是不小心按到時的返回鍵，但一直按會有機率看到特殊符號

，每頁都不同。

圖 49 – 每個選項的畫面

圖 48 – 寄出畫面

34

《九》其他小功能：

臨時記事：在首頁、功能-紀錄、功能-測驗中，有一個灰色框，只接打

然後按下上方的鈕即可儲存。

便利貼：在功能-紀錄中，按下香相機從圖庫中選取，不過這裡只設定

方一張，可以搭配記事一起用。

鼓勵語：在功能-測驗中，按下圖片會隨機跑出一句。

圖 51 – 鼓勵語 圖 50 – 便利貼+記事

35

六、討論

對於『學習歷程』的功能?

『學習歷程』是以輔助使用者規劃自己學習的應用程式，藉由日

記來回顧自己的想法，藉由測驗來了解該領域是在學什麼，藉由情報

來找自己感興趣的課程及活動，藉由意見來回覆對於應用上的建議及

問題回報。

對於製作『學習歷程』的過程?

讓我們再次了解到時間的重要性，一定要有付出時間的決心做這

項大挑戰，而且有些決策不能猶豫太久，時間是不等人的！

對於『學習歷程』的可塑性之處?

已這樣的完成度來看，現在還只是雛型，還有很大的拓展空間，

雖然現在也有很多地方需要修改，像【功能-紀錄】，可以除了用日記法

外的紀錄方式，而且需要客製化，打造屬於自己的學習方式。

其實有關於「輔助人物」這設定，覺得這是必要存在以及未來所

需的技術，因為他將會是最可以了解、最親近你的朋友，在學習的過

程中，有人陪伴是必須的，可以互相分享知識，也可以是互相競爭的

對象，但以現在的能力還無法孕育，但我願意嘗試！

七、結論

在與組員一起做了半學期的專題中，說實在讓我們獲得很多並且

更加認識自己，因為長期被逼迫學習的環境下，思想一定會有所限制

，就算有想法也怕被嘲笑，但這課程就是要把我們之前還記住的知識

與經驗掏出來好好思考一番，儘管這些是被逼迫的，但還記得就表示

在內心深處可能對這有興趣。

36

從被動轉至主動思考，讓我們腦海慢慢有了點子，儘管多麼遙不

可及，還是鼓起勇氣提出來，發現到點子都是由自己身旁的事物，因

為這些事物讓我們有所感觸，才會有了想法，最後選了最為感觸的想

法。

這課程不只考驗我們的思想，還考驗對於自己的決心、挑戰的精

神，畢竟這課程沒有固定的公式以及結局，要自己勇於嘗試才知道是

好是壞，為了能讓這專題有所成就，去嘗試自己不曾接觸的領域，像

第一次嘗試用繪圖軟體繪製背景及物件，也為了能讓這功能可以使用

，絞盡腦汁想出觸發邏輯及流程等，讓我們發現自己可以把『不可能

』轉為『可能』。

經過這次的經驗，不只從中獲取新想法，還從中獲取某些重要性

與可能性，告訴自己是可以的！

八、參考文獻

SAI 厚塗技巧↓

http://www.pixvi.net/pitech/?p=60

App Inventor 2 ↓

http://www.appinventor.tw/whatis/

獎金獵人↓

https://bhuntr.com/tw/

樂學 Camp↓

http://camp.347.com.tw/?gclid=Cj0KEQiA-

MPCBRCZ0q23tPGm6_8BEiQAgw_bAvTjEV3qX5e84EopW7ZFXpmjv

C32TslvnziV24wT1NgaAh9V8P8HAQ

大學營隊資訊↓

http://sites.tea.nknush.kh.edu.tw/fu-dao-zhong-xin/da-xue-ying-dui-tuan-

dui

Citytalk 城市通-活動情報第一↓

http://www.citytalk.tw/cata/57/