建議

之外，App Inventor 亦可設計出其他類型的 App，例如小工具、記事本或是結合 網路資料庫等應用，因此建議未來的研究可以繼續發展更多元化的教材，以豐富 App Inventor 教學的內容。

二、探討性別差異

由於本研究的參與學生皆為女生，其研究結果可能受限於研究參與者，因此 建議未來的研究可以加入性別的因素來探討，瞭解 App Inventor 是否對於男女在

學習方面、態度方面會有不同的影響。

三、延長教學的時間

本研究課程主要是每週進行一個單元，但後幾個單元範例的難度漸漸加深，

學生需要完成的程式指令變多，因此發現有學生跟不上進度的情況。建議未來的 研究可以延長課程的時間，讓學生能夠更深入的理解程式指令和程式設計概念的 學習。

參考文獻

Brusilovsky, P., Calabrese, E., Hvorecky, J., Kouchnirenko, A., & Miller, P. (1997).

Mini language: a way to learn programming principle. Education and Information Technologies, 2(1), 65-83.

Costelloe, E. (2004). Teaching Programming The State of the Art. CRITE Technical Report.

Guzdial, M. (2004). Programming Enviroments for Novices. In Computer Science Education Research, 127-154.

Guzdial, M., & Soloway, E. (2002). Teaching the Nintendo Generation to Program.

Communications of the ACM, 45(4), 17-21.

Jenkins, T. (2002). On the difficulty of learning to program. Proceedings of the 3rd Annual Conference of the LTSN Centre for Information and Computer Science, 53-58.

Karakus, M., Uludag, S., Guler, E., & Turner, S. W. (2012). Teaching Computing and Programming Fundamentals via App Inventor for Android. Information Technology Based Higher Education and Training (ITHET), 2012 International Conference on, 1-8.

Kelleher, C., & Pausch, R. (2005). Lowering the Barriers to Programming: A Taxonomy of Programming Environments and Languages for Novice Programmers. ACM Computing Surveys, 37(2), 83-137.

Kölling, M. (2010). The Greenfoot Programming Enviroment. ACM Transactions on Computing Education (TOCE), 10(4), Article No.14.

Malan, D. J., & Leitner, H. H. (2007). Scratch for Budding Computer Scientists.

SIGCSE'07 Proceedings of the 38th SIGCSE technical symposium on Computer science education, 223-227 .

Mayer, E. R., Dyck, L. J., & Vilberg, W. (1986). Learning to Program And Learning to Think:What’s the Connection? Communication of ACM, 29(7).

McDermott, R., Eccleston, G., & Brindley, G. (2007). More Than A Good Story - Can You Really Teach Programming Through Storytelling? HE Academy for Information and Computer Science.

McKeithen, K. B., Reitman, J. S., Rueter, H. H., & Hirtle, S. C. (1981). Knowledge organisation and skill differences in computer programmers. Cognitive Psychology, 13, 307-325.

Myller, N., Laakso, M., & Korhonen, A. (2007). Analyzing engagement taxonomy in collaborative algorithm visualization. Proceedings of the 12th annual SIGCSE conference on Innovation and technology in computer science education,

Naps, T. L., Rößling, G., Almstrum, V., Dann, W., Fleischer, R., Hundhausen, C., . . . Velázquez-Iturbide , J. (n.d.). Exploring the role of visualization and

engagement in computer science education. In Working group reports from ITiCSE on Innovation and technology in computer science education, 131-152. New York, NY, USA.

Papert, S. (1980). Mindstorms: children,computers,and powerful ideas. NY,USA:

Basic Books Inc.

Perkins, N. D., & Martin, F. (1986). Fragile Knowledge and Neglected Strategies in Novice Programmers. Proceedings papers presented at the first workshop on the empirical of programmers, 213-229.

Powers, K., Ecott, S., & Hirshfield, L. M. (2007). Through the Looking Glass:

Teaching CS0 with Alice. SIGCSE '07 Proceedings of the 38th SIGCSE technical symposium on Computer science education, 213-217.

Resnick, M., Maloney, J., Hernández, A. M., Rusk, N., Eastmond, E., Brennan, K., . . . Kafai, Y. (2009). Scratch: Programming for Everyone. Communication of the ACM, 52(11).

Roy, K. (2012). App Inventor for Android: Report from a Summer Camp. SIGCSE '12 Proceedings of the 43rd ACM technical symposium on Computer Science Education, 283-288.

Soloway, E. (1986). Learning To Program=Learning To Construct Mechanisms and Explanations. Communication of the ACM, 29(6).

Soloway, E. (1993). Should We Teach Students to Program? Communication of ACM, 36(10).

Utting, I., Cooper, S., Kölling, M., Maloney, J., & Resnick, M. (2010). Alice, Greenfoot, and Scratch - A Discussion. ACM Transactions on Computing Education, 10(4).

Valente, J. (1995). Logo as a window into the mind. Logo Update, 4(1).

West, M., & Ross, S. (2002). Retaining females in computer science: A new look at a persistent problem. JCSC, 17(5), 1-7.

Wolber, D. (2011). App Inventor and Real-World Motivation. SIGCSE'11 Proceedings of the 42nd ACM technical symposium on Computer science education, (pp.

601-606).

附錄一 程式設計教材

App Inventor 環境操作說明

 環境建置

1. 步驟一：申請 Gmail 帳號

Gmail 帳號為每一位 App Inventor 開發者必備的帳號，藉此帳號來登入 App Inventor 官網。

2. 步驟二：測試 Java 環境並安裝 網址如下：

http://www.java.com/zh_TW/download/installed.jsp?detect=jre&try=1 3. 步驟三：安裝 AppInventor_Setup_Installer 套件

App Inventor 運作時需要一些軟體在電腦上輔助才能順利執行，例如模 擬器、函式庫，這些軟體被包在 AppInventor Setup 當中。下載的網址如下：

http://dl.google.com/dl/appinventor/installers/windows/appinventor_setup_install er_v_1_2.exe

4. 步驟四：開啟一個新專案

(1) 首先登入 App Inventor 網站http://appinventor.mit.edu/

(2) 點選 Invent，如下圖

(3) 登入 Gmail 帳號

(4) 新增一個新專案，點選左上角 New，如下圖

(5) 替專案命名

 App Inventor 的三個主要工具

1. Designer：

介面設計用來將 App 所需要的元件，例如：按鈕、顯示文字的標籤，

擺放到螢幕上，也就是設計手機畫面呈現的方式。在 Designer 中又分成五 個部分：Palette、Viewer、Components、Media、Properties，以下分別做簡 單介紹：

(1) Palette：

提供許多元件供開發者使用，如按鈕、文字標籤、動畫等元件。

(2) Viewer：

預覽應用程式完成後的畫面，開發者可在此調整元件擺放位置。

(3) Components：

當我們從 Palette 拉了元件到 Viewer，在此就會顯示使用到了哪些元件，

我們可以在此將元件重新命名。

(4) Media：

我們在設計 App 時可能會用到的影音多媒體，可在此儲存並上傳。

(5) Properties：

當我們要改變元件的屬性時，可在此設定元件屬性，如字體大小、顏色、

文字內容等屬性。

2. Blocks Editor：

Blocks Editor 為撰寫程式的地方，如下圖所示。畫面的左側有一些程式 積木（Blocks），透過這些積木的組合，來完成程式的撰寫。這些積木分為 兩類：「Built-In」和「My Blocks」，Built-In 提供一般程式語言內該有的功能，

如變數、流程控制、簡單的數學函式等；My Blocks 則是使用者自行定義的 積木，在 Designer 所使用的元件都是我們自行定義的積木。

3. 模擬器：

當我們將介面設計好，並將程式撰寫好後，我們會嘗試執行我們設計好 的 App，以檢查程式是否有問題。如果我們沒有 android 平台的手機，我們 可以透過模擬器來執行撰寫好的應用程式，模擬器如下圖所示。

 App Inventor 程式下載的方式

(2) Download to this Computer：

將.apk 安裝檔下載到電腦，您可以將這個檔案直接寄給擁有 Android 裝 置的朋友，讓他們一起分享您的成果。

(3) Download to Connected Phone：

透過這個方式下載時，我們必須在電腦下載手機與電腦的同步軟體（各

 App Inventor-專案匯入與匯出

現在我們已經知道如何新增一個新的專案，但如果我們想利用他人完成的程 式（專案）進行修改或是提供我們設計的程式（專案）讓他人修改，該怎麼辦呢？

我們可以透過 App Inventor 中匯入和匯出的功能，透過匯入匯出的功能，你可以 分享你所設計的專案給其他人，讓其他人能夠以你的專案為基礎來進行改良。

點選螢幕左上角 My Projects 頁面More Actions，匯入與匯出專案的選項如 下圖所示：

勾選專案並使用匯出（Download Source）功能時，系統會產出一”專案名 稱”+”.zip”壓縮檔；當需要匯入（Upload Source）時，不需要解壓縮此檔，直接 選擇匯入此壓縮檔即可。系統會自動在您的專案中建立匯入的專案。

單元一：我的 App

【說明】這是你設計的第一個 App Inventor 應用程式；螢幕上有一隻可愛的小貓 圖案，當你點選它的時候就會發出貓叫聲。

1. 畫面設計

在單元一中所用到的元件說明如下：

編號 元件類別 分類 元件名稱 用途說明

1 Button Basic CatButton 製作貓咪圖案的按鈕 2 Sound Media Sound1 播放貓叫聲 3 Label Basic Label1 在螢幕上顯示文字

2. App 實作練習

(1) 當點選小貓圖案時，發出貓叫聲 實作說明

要實作這個功能，我們必須告訴電腦「當按下按鈕，要做什麼事」， 如下程式所示，意思是：當按下按鈕，做播放聲音這件事。

(2) 當點選小貓圖案時，發出貓叫聲後，在螢幕顯示一段文字 實作說明

要在螢幕顯示一段文字，我們必須設定文字的內容，如下程式所示，

意思是：設定 Label..Text 在畫面顯示「Hello,purr」這段文字。

一個程式的執行是由第一行的敘述開始，由上而下依序執行到程式 的最後一行結束，我們稱為「循序結構」。因此，我們如果要在發出貓 叫聲後，在螢幕上顯示一段文字，你覺得這行程式要加在整段程式的哪 個位置？

3. 練習作業

完成單元一專案或將單元一專案修改成自己的版本，匯出專案並上傳到 Moodle 作業繳交區。

單元二：運勢占卜

【說明】在這個單元，我們將會設計一個簡單的運勢占卜 App，畫面有一個土地 公圖案的按鈕，當按下按鈕，土地公就會告訴你今日的運勢！

請同學從 Moodle 下載單元二的範例檔案（Project2 檔案），並上傳到自己的 App Inventor 帳號中。

1. 畫面設計

在單元二中所用到的元件說明如下：

編號 元件類別 分類 元件名稱 用途說明

1 Button Basic Button1 製作按鈕 2 Label Basic Label1 顯示「今日運勢」

3 Label Basic Label2 顯示占卜結果

2. App 實作練習

單元三： 小小鋼琴家

【說明】在這個單元我們將會設計一個鋼琴 App，畫面顯示一組鋼琴琴鍵，音階 由左至右分別為低音 Do、Re、Mi、Fa、So、La、Si、高音 Do。

請同學從 Moodle 下載單元三範例檔（hw3.zip），並上傳到自己的 App Inventor 帳號中。

1. 畫面設計

在單元三中所用到的元件說明如下：

編號 元件類別 分類 元件名稱 用途說明

1 Canvas Basic Canvas1 放置琴鍵的區塊 2 ImageSprite Animation 製作琴鍵

3 Sound Media 播放鋼琴聲

˙ Canvas（畫布）為一矩形區域，可在其中執行繪畫或設定動畫等觸碰動 作。

˙ ImageSprite 為一可置於畫布中的動畫元件，可以回應觸碰、拖拉和碰 撞等事件，或是與其他動畫元件互動。

˙ 在此專案中，我們在畫布中放了 8 個 ImageSprite，分別將元件命名為 Do、Re、Mi、Fa、So、La、Si、Do_2，並將其換成鋼琴琴鍵的圖片；

8 個 sound 元件，分別在屬性的部分設定其對應的聲音檔。

2. App 實作練習

(1) 當按下琴鍵，發出對應的鋼琴聲 概念解說

 條件結構

條件結構在程式語言中是為了要在某種條件成立下才能執行指令 所使用的方法，如：when XXX.click 或是 when XXX.TouchDown，表示 當條件（XXX 被按下）成立，才執行指令。

流程圖如下所示：

實作說明

要實作「當按下琴鍵播放對應的聲音」，我們會用到的程式如下所 示：意思是：當按下琴鍵 Do，執行底下區塊的指令。

˙ My BlocksDowhen Do.TouchDown 指令

˙ My BlocksSound_Docall Sound_Do.Play 指令 判斷條件：是否

按下琴鍵 Do?

不成立

播放 Sound_Do

結束 成立

開始

(2) 當按下琴鍵，改變鋼琴的圖片；當放開琴鍵，換回原來的鋼琴圖片 實作說明

我們可以利用改變琴鍵圖片的方式，讓此鋼琴 App 有彈奏鋼琴的 真實感。因此當按下琴鍵時，除了播放聲音外，我們還要改變琴鍵的圖 片。用到的程式如下所示，意思是：將琴鍵 Do 的圖片改變為 Do2.png

˙ My BlocksDoSet Do.Picture 指令

˙ Built-InTextText 指令

而當放開琴鍵時，我們要將圖片換回未按下的圖片，程式如下所示，意 思是：當放開琴鍵，將琴鍵 Do 的圖片改變為 Do.png 圖片

˙ My BlocksDowhen Do.TouchUp 指令

˙ 未按下琴鍵的圖片檔名為：Do.png

單元四：瘋狂打地鼠

【說明】在這個單元我們將會設計一個打地鼠 App，地鼠會隨機出現在地圖，當 打擊地鼠時獲得分數。

請同學從 Moodle 下載單元四範例檔（hw4.zip），並上傳到自己的 App Inventor 帳號中。

1. 畫面設計

在單元四所用到的元件說明如下

編號 元件類別 分類 元件名稱 用途說明

1 Canvas Basic Canvas1 製作遊戲地圖 2 ImageSprite Animation Mole 製作地鼠 3 Button Basic StartButton 開始按鈕 4 Button Basic ReStartButton 重新開始按鈕 5 Label Basic Label_Score 顯示得分 6 Clock Basic Clock1 計時器 7 Sound Media Sound1 播放聲音

˙ Clock 元件可產生一個計時器，定期觸發某個事件，也可以進行各種時 間單位的運算與換算。在此專案中，我們利用計時器來定期觸發事件，

即每隔一段時間，讓地鼠在地圖上隨機出現。

2. App 實作練習

(1) 地鼠隨機在地圖上出現

(1) 地鼠隨機在地圖上出現

在文檔中 應用App Inventor於高中程式設計教學之個案研究 (頁 48-80)