應用App Inventor於高中程式設計教學之個案研究

全文

(1)國立臺灣師範大學資訊教育研究所碩士論文. 指導教授：吳正己博士. 應用 App Inventor 於高中程式設計教學之個案研究. 研究生：蔡育融撰. 中華民國一○二年七月.

(2) 摘要本研究旨在探討應用 App Inventor 於程式設計教學之可行性及可能之問題。研究採用個案研究法，參與對象為某公立女子高中資訊科教師一名，及其授課班級的 41 名學生。藉由分析參與教師應用 App Inventor 教材之教學情形，來探討應用 App Inventor 於程式設計教學的效應及問題。本研究教學時間為五週，共進行五個單元，十節課。教學內容包括：程式設計簡介、變數、關係運算及條件判斷等基本概念。教學結束後進行成就測驗和問卷施測，並針對教師及隨機抽選的六名學生進行訪談。研究結果顯示：(1)學生對使用 App Inventor 學習程式設計有興趣； (2）使用 App Inventor 有助於學生理解程式，但對程式撰寫則沒有顯著成效；(3)App Inventor 程式指令分類複雜，易影響學生學習成效。針對研究結果，建議教師使用 App Inventor 於初學者之程式設計教學，以引起學生學習興趣；而在進行程式撰寫教學時，應注意指令分類，由淺入深的導入，以增進學生之學習成就感。建議未來研究可以發展更多類型的 App 範例、加入性別因素探討，亦或拉長教學的時間，讓學生能夠更深入且廣泛的學習程式設計概念及其應用。. 關鍵詞：App Inventor、程式設計教學、個案研究.

(3) Abstract Using App Inventor To Teach High School Programming─A Case Study Yu-Rung Tsai This study aims to investigate the effects of using App Inventor to teach high school student programming. We implemented the case study method in this study. A case teacher and forty-one students, who enrolled in the teacher’s computer class, from a public high school participated in the study. Five programming units using App Inventor, including: introduction to programming, variables, relational operators and conditionals were designed and taught to students in a five-week period with a total of 10 hours. Analysis from students’ performance test, answers on an attitude questionnaire, and interviews of both teacher and the students, revealed that: (1) App Inventor promoted the students’ learning interest on programming. (2) App Inventor helped student comprehend programs, but did not have effect on coding programs. (3) App Inventor’s complicated instruction sets may affect students’ performance on coding programs. We suggested that teachers can use App Inventor to promote students learning programming. However, instructional approaches should be careful designed to lessen the difficulty resulted from the instruction sets of App Inventor. Future research should develop more app examples, consider whether gender factor will affect learning, and increase the duration of experiment, so that the effects of using App Inventor to teach programming could be better understood.. Keywords: App inventor, Programming, Case study.

(4) 誌謝終於完成了碩士論文，也終於要結束學生時代了。首先我要感謝指導教授吳正己老師，老師用心的指導並指點我研究的方向，使我在這三年中獲益匪淺。我也要感謝口試委員林育慈老師和賴錦緣老師，因為你們的幫忙與意見，使本論文能夠更加完整與嚴謹。另外，我要感謝孟凱，感謝你安排實驗的班級給我，讓我能順利的完成教學實驗。最後，我要謝謝我的家人，你們的鼓勵與支持，是我前進的動力。三年的日子裡，在 CSE Lab 的共同生活點滴，讓我的研究生活變得多采多姿。感謝包子哥、美文大大、蔡 Q 姐不厭其煩的指出我研究中的缺失，總是能幫我解惑；感謝雅茱、孟凱的鼓勵，恭喜我們都可以畢業了；感謝 lab 的惠淇、瀞尹、裕明、士青、楊騏、怡芬學姐、致平、威霖和孝齊，你們在 meeting 時所給我的意見，都幫助我更清楚研究的方向；感謝我的好友們，由於你們的陪伴，讓我的日常生活過得非常充實，也帶給我許多歡樂。最後勉勵自己，研究所只不過是人生的一個階段，希望自己能夠準備好迎接下一個階段的到來，也期許在我生命中的所有人在未來的道路上都能做自己想做的事情，朝著夢想前進。Dream Big, Be Yourself. 育融於 2013/8/26.

(5) 目錄表目錄 ....................................................................................................................ii 圖目錄 .................................................................................................................. iii 第一章緒論............................................................................................................ 1 第一節研究背景與動機................................................................................ 1 第二節研究目的............................................................................................ 3 第三節研究範圍及限制................................................................................ 3 第二章文獻探討.................................................................................................... 4 第一節程式設計學習的問題........................................................................ 4 第二節視覺化程式設計環境........................................................................ 7 第三節 App Inventor 應用於程式設計教學 ............................................... 12 第三章研究方法.................................................................................................. 13 第一節第二節第三節第四節第五節. 研究設計.......................................................................................... 13 研究參與者...................................................................................... 14 教學規劃.......................................................................................... 15 研究工具.......................................................................................... 20 研究步驟.......................................................................................... 23. 第六節資料分析.......................................................................................... 26 第四章結果與討論.............................................................................................. 27 第一節程式設計學習成就.......................................................................... 27 第二節程式設計學習態度.......................................................................... 31 第三節應用 App Inventor 於程式設計教學之情形 .................................. 35 第四節教學的建議與改進.......................................................................... 38 第五章結論與建議.............................................................................................. 40 第一節結論.................................................................................................. 40 第二節建議.................................................................................................. 41 參考文獻 .................................................................................................................. 43 附錄一程式設計教材................................................................................................ 47 附錄二程式設計活動問卷........................................................................................ 70 附錄三成就測驗試題................................................................................................ 71 附錄四課堂觀察表.................................................................................................... 72 附錄五教師訪談問題................................................................................................ 73 附錄六學生訪談問題................................................................................................ 73. i.

(6) 表目錄表 3-1 表 3-2 表 4-1 表 4-2 表 4-3 表 4-4 表 4-5. 教學單元規劃 ............................................................................................. 15 各單元教學內容 ......................................................................................... 16 除錯題整體作答情形（N=41） ................................................................ 27 除錯題各個錯誤成功除錯人數統計 ......................................................... 28 實作題整體作答情形（N=41） ................................................................ 28 各個評分細項作答情形 ............................................................................. 29 學生對 App Inventor 程式設計學習的看法 ............................................. 31. 表 4-6 學生對程式設計學習的態度 ..................................................................... 33. ii.

(7) 圖目錄圖 2-1 Scratch 程式設計畫面 ................................................................................... 8 圖 2-2 Alice 程式設計畫面 ...................................................................................... 8 圖 2-3 Greenfoot 程式設計畫面............................................................................... 9 圖 2-4 App Inventor 介面設計視窗........................................................................ 10 圖 2-5 App Inventor 程式編輯視窗........................................................................ 11 圖 2-6 App Inventor 模擬器.................................................................................... 11 圖 3-1 單元一之元件類別、分類、名稱及用途說明 ......................................... 18 圖 3-2 圖 3-3 圖 3-4 圖 3-5. 單元一之畫面截圖 ..................................................................................... 18 單元二之概念解說 ..................................................................................... 19 單元二之實作說明 ..................................................................................... 19 單元三之標示指令所在位置 ..................................................................... 19. 圖 3-6 圖 4-1 圖 4-2 圖 4-3. 研究實施步驟 ............................................................................................. 23 使用 if 完成程式示例 ................................................................................ 30 無法正確設定 if-else 條件示例 ................................................................. 30 亂拼湊程式指令示例 ................................................................................. 30. iii.

(8) 第一章. 緒論. 第一節研究背景與動機我國於 2010 學年開始實施的「高中資訊科技概論」課程綱要，由選修二學分改為必修二至四學分，並有若干選修學分開授的空間，資訊科技課程於高中取得正式地位（吳正己，2010）。其中，新修訂課程綱要強調「資訊科學基礎知識」的學習和「邏輯思維及運用電腦解決問題能力」的培養，希望由學生的日常生活導入學習，以引起學生學習興趣，並學以致用（教育部，2009）。因此，培養學生邏輯思維及運用電腦解決問題之能力是目前高中資訊科技概論課程目標之一。 Mayer 等學者（1986）指出學習程式設計能夠增進個人的思考技巧，進而提升問題解決、策略思考能力。Valente（1994）認為程式設計為描述（description）、執行（execution）、反思（reflection）、除錯（debugging）四個循環步驟，學生在過程中思考如何解決問題和選擇何種解題策略，從中建構知識和概念並提升問題解決能力。然而，對許多初學者而言，學習程式設計並不是容易的事。Perkins 和 Martin（1986）指出學生必須掌握大量的程式語言基礎，才會開始進行問題解決和策略思考。對理解程式執行程序的心智過程，需要透過廣泛的實務練習與經驗來建立（McKetihen et al., 1981）。Brusilovsky 等人（1997）指出程式設計涉及的知識不只包含程式語言的基本結構，還有特定語言的語法指令，這些知識對初學者而言過於複雜且龐大。此外，程式設計的概念大多為抽象化概念，不易理解，容易導致初學者學習困難且學習興趣低落（West & Rose, 2002）。為了解決初學者學習程式設計的困難，許多學者認為視覺化環境有助於程式設計的學習，可以降低程式設計的學習門檻，以提升學生的學習興趣（Kelleher & Pausch, 2005）。而 App Inventor 即為一新的視覺化程式開發環境，透過 App Inventor 使用者能夠快速開發簡單的手機應用程式（Apps）。Wolber（2011）指 1.

(9) 出 App Inventor 簡化了程式語言中嚴謹的語法問題，能夠降低初學者學習程式設計的困難，此外，它能夠簡單且快速開發 App 並於真實生活中使用的特點，也有助於提升學生學習程式設計的動機。Roy（2012）認為 App Inventor 是教導初學者學習程式設計非常有效率的程式設計環境，它利用視覺化拖拉積木的方式撰寫程式，降低了初學者學習程式設計的門檻。綜觀上述，學者們認為 App Inventor 的特點能夠改善程式設計教學的問題與困難，然而，目前應用 App Inventor 教學的相關研究並不多。另外，國內願意使用 App Inventor 於教學的教師較少，因此本研究以個案研究的方式，選擇對 App Inventor 教學有興趣的教師為對象，深入探討應用 App Inventor 於程式設計教學之影響。希望能夠歸納出應用 App Inventor 教學之影響，以及提出教學之建議。. 2.

(10) 第二節研究目的本研究旨在探討應用 App Inventor 於程式設計教學之可行性及可能之問題。本研究的待答問題如下：一、應用 App Inventor 於程式設計教學，對學生程式設計學習之成效影響為何？二、應用 App Inventor 於程式設計教學，對學生程式設計學習之態度影響為何？三、應用 App Inventor 於程式設計教學之情形。. 第三節研究範圍及限制本研究之研究範圍與限制如下：一、本研究探討之程式設計概念主要以循序、條件判斷、變數與運算子等基本程式設計概念為範圍。二、本研究由於採用個案研究，其研究結果可能受限於研究參與者；若要將結果推論至其它母群體，須再擴大樣本數，進行更深入的分析。. 3.

(11) 第二章. 文獻探討. 本章分別從程式設計學習的問題、視覺化程式設計環境與 App Inventor 在程式設計教學的應用等三節進行探討。. 第一節程式設計學習的問題學習程式設計是讓學生瞭解電腦運作的基本原理和流程，以及如何運用程式語言解決實際問題（吳正己、何榮桂，1998）。此外，程式設計必須按照步驟去撰寫指令，才能得到正確的結果，所以學習程式設計能夠提升學生邏輯思考及解決問題的能力（吳正己、林凱胤，1997）。然而，根據國內電腦課程實施之相關調查研究發現，高中電腦教師認為在「進階程式設計」及「演算法與資料結構」部分的內容較艱深，導致學生學習意願不高、學習成效益亦不佳（陳宏煒，2003）。而上述造成程式設計學習困難的因素包括：一、程式設計過於複雜（Brusilovsky et al., 1997；Jenkins, 2002）學習程式設計並非只是學習單一技能，而是需要學習階層式的技能，例如：先學習語法、語意，接著是程式結構，最後是撰寫風格。此外，程式設計需要經過多個過程，先將特定的知識轉換成演算法，最後再轉化成程式碼。對初學者而言，將特定知識或想法轉換成演算法是最困難的步驟。. 二、抽象的程式概念（Jenkins, 2002；West & Rose, 2002）學校所教的程式語言往往是業界認為「最流行」的程式語言，並不是為了教學所開發的程式語言；學生因為不熟悉程式語言，常常花費大量心力於低層次的語法和語意，而使得學生難以進行高層次抽象概念思考。. 三、課堂講述及範例太無趣（Resnick & Papert, 1993；Jenkins, 2002） 4.

(12) 大部分學校所教的程式設計課程並沒有與其它學科、學生的興趣及其他電腦活動做連結，因此造成學生學習動機低落、學習成效差。此外，課堂所講述的範例大多是處理數學問題，與生活經驗並無太大關聯，因此不容易引起學生學習興趣。程式設計是一項需要邏輯思考的活動。在撰寫程式過程中需要經歷兩個階段：問題解決及實踐，問題解決階段是設計解決問題的演算法；實踐階段則是將演算法轉換成程式碼（Costelloe, 2004）。然而，設計解決問題的演算法對初學者而言是最困難的，Soloway（1986）分析專家與初學者的差別，發現初學者最大的困難是不知道怎麼將多個程式片段組合起來，而專家腦中有許多特定的解法（canned solution），並能夠針對不同問題組合成不同解法；他也提出應該教導學生以程式區塊（chunk）的思考方式來解決程式設計問題。另外，初學者在學習程式設計時需要逐行閱讀程式碼才能瞭解程式的架構，而專家則是創造一個心智模型連結相關的程式區塊，並融會貫通（McKetihen et al., 1981）。Perkins 和 Martin （1986）認為初學者學習程式設計所遇到的困難是因為脆弱的知識（fragile knowledge），並將其分為四類，分別為： 1.. 缺落知識（Missing Knowledge）學生因為遺忘或未曾學過而造成知識不完整。. 2.. 惰性知識（Inert Knowledge）學生雖然學習到知識，但不能靈活運用，需要別人提示。. 3.. 誤用知識(Misplaced Knowledge）學生有學習到該知識，但使用在錯誤的地方。. 4.. 混用知識（Conglomerated Knowledge）學生將一堆無關的程式組合成自創的句法，造成句法或語意上的錯誤。. 根據以上文獻可以發現，由於程式設計涉及的知識過於龐大、程式設計概念較為抽象，且課堂講述之範例大多是處理數學問題等問題，因此造成學生學習興 5.

(13) 趣低落、學習成效不佳。而初學者學習程式設計的困難為無法針對問題來設計解題方法，且初學者往往因為知識的掌握不足，而使的無法撰寫出程式或是程式無法執行。為了改善程式設計學習的情形，Guzdial 與 Soloway（2002）建議使用視覺化環境和多媒體於程式設計課程來提升學習者學習的興趣。Naps 等（2002）指出視覺化環境將抽象的演算法概念轉化為圖像呈現，可以幫助學生更加理解演算法的概念。Myller 等（2007）指出視覺化環境能夠提供學習者額外的記憶體空間，能有效的幫助學生理解演算法或程式架構。另外，在教學設計上可以考慮以程式區塊來講解說明，引導學生思考解題步驟，將演算法轉化成程式碼。. 6.

(14) 第二節視覺化程式設計環境視覺化程式設計環境的開發，主要目的為解決程式設計學習的困難。Papert （1980）於 1967 年首先提出以 LOGO 做為初學者學習程式設計環境和微世界（Microworld）的觀點。在微世界中學習者能夠專注在新知識的學習，免除其他因素的干擾。LOGO 即是基於此概念所開發，透過觀察小烏龜（Logo Turtle）於微世界中的行為，來檢驗自己的想法正確與否。雖然 LOGO 的出現刺激了學校對電腦教育的反思，但仍然很少使用 LOGO 學習程式設計，大多數人視程式設計為冷門、技術活動且只適合少數人學習。而這也引發學者們對於 LOGO 所聲稱的好處產生了質疑。對此，Papert 提出反駁，他認為程式語言應該具備三個特性：降低程式設計進入門檻（low floor），讓初學者容易學習、能夠寫出較複雜且困難的程式（high ceiling）和支援不同類型的專案，讓不同學習風格和興趣的人都能夠願意使用（wide walls）。然而，要同時滿足這三個特性卻不是那麼容易（Guzdial, 2003）。從 LOGO 推出至今，視覺化程式設計環境不斷的推陳出新，Keller 和 Pausch （2005）歸納出這些視覺化程式設計環境有三個共同特點：（1）簡化程式設計過程（2）提供學習者支援（3）引發學生學習動機。以下為幾個常用的視覺化程式設計環境。壹、Scratch Scratch（http://scratch.mit.edu/）是美國麻省理工學院多媒體實驗室所開發的視覺化程式設計環境，如圖 2-1 所示，適合 8 歲以上的中小學生作為學習程式設計的入門軟體。Scratch 使用拖拉積木的方式撰寫程式，降低了初學者在學習程式設計語法的問題，讓學生可以輕鬆的規劃程式設計的劇情、動畫和遊戲等，並且透過網路上傳與他人分享。Malan 和 Leitner（2007）的研究使用 Scratch 作為大一新生程式設計入門課程，而學生在接觸 Java 課程後，皆認為 Scratch 有助於建立程式設計的概念並幫助傳統程式語言（Java）的學習。 7.

(15) 圖 2-1 Scratch 程式設計畫面貳、Alice Alice（http://www.alice.org/）是美國卡內基美隆大學所發展的 3D 互動式圖形程式設計環境，如圖 2-2 所示，主要幫助學生學習物件導向（Object-Oriented）的概念。Alice 為一拖放式程式設計環境，讓使用者可以避免語法錯誤，且快速的創造故事、互動式遊戲或動畫影片。McDermott 等（2007）使用 Alice 視覺化程式設計環境，結果顯示學生在學習成就和學習動機方面有正向的影響。Powers 等（2007）的研究指出 Alice 雖然能夠提高學生的程式設計能力和自我效能，但因為 Alice 無法產生流暢的動畫，因此造成有些學生專注在使動畫更順暢和真實，進而忽略了學習程式設計的基本概念。. 圖 2-2 Alice 程式設計畫面 8.

(16) 參、Greenfoot Greenfoot（http://www.greenfoot.org）是英國肯特大學所開發，如圖 2-3 所示，目標學習對象為 14 歲以上的程式初學者。它強調物件概念優先的方式來進行學習，讓初學者能夠輕鬆學習 Java 物件導向概念，並利用它來開發互動式遊戲。目前 Greenfoot 已廣泛的使用在高中及大學課程，但仍缺乏相關研究來檢視其有效性（Kölling, 2010）。雖然 Greenfoot 被歸類為視覺化程式設計環境，但就撰寫程式方面其實是 Java。Utting 等（2010）的研究探討視覺化環境的適用年齡議題， Kölling 指出學生使用 Greenfoot 學習程式設計時，仍需要面對一大堆語法的問題，教學經驗發現 13 歲以上的學生比較能夠處理和解決語法上的問題。因此在使用 Greenfoot 時，必須考量到學習對象年齡的因素。. 圖 2-3 Greenfoot 程式設計畫面肆、App Inventor App Inventor（http://appinventor.mit.edu/）是 Google 實驗室（Google Lab）所開發，於 2012 年交由麻省理工行動學習中心（Mobile Learning Center, MIT）繼續後續的開發與更新。App Inventor 為一線上開發 Android 手機應用程式環境，使用視覺化積木（blocks）拖拉的方式撰寫程式，完成後的程式可以直接傳輸到 Android 手機或是模擬器執行。其中，App Inventor 有兩個主要的開發視窗：介. 9.

(17) 面設計視窗（Designer）和程式編輯視窗（Blocks Editor），另外還有模擬器（Emulator）的功能，供使用者檢驗撰寫的程式。介面設計視窗，如圖 2-4 所示，主要為設計使用者介面（User Interface）。透過拖拉畫面元件到螢幕中，設計預呈現的畫面，使用者亦可設定及修改元件屬性，如：背景、長寬或是樣式等。此外也可上傳多媒體檔案；程式編輯視窗，如圖 2-5 所示，主要為撰寫 App 程式，透過拖拉積木程式來設計程式的行為和功能；模擬器，如圖 2-6 所示，透過同步模擬器的方式來檢驗使用者所撰寫的程式，另外使用者亦可將程式直接傳到智慧型手機上執行。綜上所述，視覺化程式設計環境已經成為初學者學習程式設計重要的工具之一。雖然它們的目的都是降低初學者學習程式設計的困難和提高學習的興趣，但 App Inventor 相較於其他幾個視覺化程式設計環境更貼近於真實生活，且能夠應用於真實世界中。因此，本研究選擇 App Inventor 應用於程式設計課程，既能降低學習門檻，提高學生學習興趣，最重要是能夠與實際生活經驗連結。. 圖 2-4 App Inventor 介面設計視窗. 10.

(18) 圖 2-5 App Inventor 程式編輯視窗. 圖 2-6 App Inventor 模擬器. 11.

(19) 第三節 App Inventor 應用於程式設計教學 Wolber（2011）使用 App Inventor 於大學程式設計教學，並且發展了許多課程教材和教學示範影片，教材範例的類型包括自動回覆手機簡訊、網路查詢、遊戲和記事本等類型的 App。Wolber 表示這些教學經驗都呈現出正向的結果，除了能提高電腦科學領域學生的程式設計學習興趣，App Inventor 也讓非電腦科學領域的學生能投入於程式設計學習。而更重要的是，學生完成的 App 程式能與真實的生活經驗互動和連結。 Roy（2012）於高中夏令營課程中應用 App Inventor 於教學，他們規劃了五個 App 遊戲範例，並在實作 App 過程中講解程式設計概念。此外他們將範例製作成教學示範影片並上傳至 Youtube，每個影片都對應到一個程式設計的步驟。研究結果發現學生能夠很快的掌握電腦運算的概念，並能運用所學之概念設計出有趣的 Apps，同時也能提升學生學習程式設計興趣。 Karakus（2012）等學者的研究於 CS0/CS1 課程應用 App Inventor 進行教學，研究的結果顯示學生在學習態度的表現皆為正向。CS0 課程主要開給非電腦科學領域的學生選修，結合 App Inventor、樂高機器人（Lego Mindstorms Robotics）和藍芽裝置，讓學生開發操控樂高機器人的 App；CS1 課程主要是開給電腦科學相關領域的學生選修，利用 App Inventor 學習更深入的程式設計概念。由於目前 App Inventor 相關的研究並不多，在程式設計教學上的應用大多是以開發範例教材為主，並在實作過程中講解相關程式設計概念。根據以上所述， App Inventor 的範例教材大多是以結合手機應用和遊戲類型為主。因此，本研究試圖以 App Inventor 規劃一系列教材於高中程式設計教學，讓學生能實際設計手機 App，並學習到基本的程式設計概念。. 12.

(20) 第三章. 研究方法. 本章分別從研究設計、研究參與者、教學規劃、研究工具、研究步驟及資料蒐集與分析等進行說明。. 第一節研究設計本研究採用個案研究法，藉由分析參與教師應用 App Inventor 於程式設計教學之情形，來探討其對教師教學及學生學習的影響。為了探討應用 App Inventor 於程式設計教學之影響，本研究實施先是進行教材之設計，接著選擇一位高中教師教授本研究所設計之教材。教學時間為五週，每週進行兩節課，共十節課。教學進行前，首先進行教室環境建置，於每台電腦安裝 App Inventor 套件和 Java 軟體。並與參與教師說明本次教學的規劃及瞭解教師背景、過去教學經驗；教學過程由研究者觀察參與教師使用 App Inventor 於教學之情形，並填寫課堂觀察表；教學結束後，針對學生進行成就測驗並請其填寫程式設計活動問卷。最後，針對教師和學生進行訪談，並分析成就測驗、訪談錄音、課堂觀察記錄與程式設計活動問卷等內容以歸納出本研究之結論。. 13.

(21) 第二節研究參與者壹、參與教師本研究的參與教師為某一公立女子高中之資訊科技概論教師，畢業於師範大學資訊教育系，教學年資五年，本學年度授課課程為高一「資訊科技概論」。參與教師過去的程式設計教學經驗，有嘗試過教 C++和 Scratch；教學內容大致上從循序的概念，然後變數的概念到條件判斷及迴圈；教學時間視學校排課情形，曾經規劃一整個學期來進行程式設計教學，或是按照課綱來進行教學；教學方式大多採用先講解程式設計概念，然後安排範例來解說程式指令的功能。偶爾也會帶入一些實作，讓學生照著老師所提的範例去練習，或是安排作業讓學生完成。. 貳、參與學生參與學生為參與教師任課之班級學生，共 41 名，入學學測成績 PR 值為 93，屬於常態分班。本學期正在修習高一資訊科技概論，課程依照資訊科技概論課綱來安排，已經學過的單元包括有計算機導論、電腦軟硬體和電腦網路。由於該班級學生之前沒有學習過相關程式設計的課程，因此假設該班級學生皆為程式設計初學者。. 14.

(22) 第三節教學規劃本節就教學單元規劃、教學實施和講義內容規劃做詳細的說明. 壹、教學單元規劃由於參與教師本學期課程按照課綱來規劃，因此本研究之教學安排一個多月的時間，依照每週兩節課，每節 50 分鐘設計了五個單元的課程，包括「我的 App」、「運勢占卜」、「小小鋼琴家」、「瘋狂打地鼠」、「經典打磚塊」。本研究課程主要為教導學生實作智慧型手機 App，在實作過程中講授程式設計概念。每個單元介紹之程式設計概念由淺入深，由單元一的環境介紹與程式設計基本架構，到單元二的變數，單元三的條件結構，最後單元四和單元五則是整合變數、運算子及條件結構。教學單元規劃如表 3-1 所示。此外，每個單元搭配連貫的實作練習，實作單元專案中的各個功能，最後整合成一完整 App 專案。. 表 3-1 教學單元規劃週次. 節次. 課程安排. 一. 1. 一. 2. 單元一：我的 App. 程式設計基本架構. 二. 3-4. 單元二：運勢占卜. 變數. 三. 5-6. 單元三：小小鋼琴家. 條件結構（if）. 四. 7-8. 單元四：瘋狂打地鼠. 變數、條件結構（if）、運算子. 五. 9-10. 單元五：經典打磚塊. 變數、條件結構（if-else）、運算子. 六. 11. 實施成就測驗、態度問卷和訪談. 無. 1. 2.. 程式主題概念. 程式設計與電腦解題 App Inventor 環境操作說明. 無. 根據文獻探討指出程式設計課程中所講述之範例大多是處理數學問題，且與生活經驗並無太大關聯，因此容易造成學生學習興趣低落。為了改善這個問題，本研究之範例參考國內外 App Inventor 網站（http://appinventor.mit.edu/、 15.

(23) http://www.appinventor.tw/）之教學範例，稍作修改與設計。雖然 App Inventor 能夠開發出結合手機通訊、網路資料庫等應用類型的 App，但考量於學生的認知負荷，因此本研究規劃之範例為遊戲類型的 App。學生除了不必學習程式設計以外的相關知識，且程式完成後也能夠實際傳到智慧型手機上執行或與他人分享。各單元詳細的教學內容如表 3-2 所示。. 表 3-2 各單元教學內容單元名稱我的 App. 學習概念 1. 2.. App Inventor 環境操作說明程式設計基本架構. 教學內容 1. 2.. 說明 App Inventor 在作業系統上需要安裝哪些套件。以簡單的範例使學生熟悉 App Inventor 環境，包含如何在 App Inventor 上撰寫程式、如何將程式傳到行動裝置。. 運勢占卜. 1.. 變數. 1.. 藉由實作「設計不同的占卜結果」，使學生了解變數概念和宣告變數的方法。. 小小鋼琴家. 1.. 條件結構. 1.. 藉由實作「不同的琴鍵播放不同的聲音」，說明條件判斷的基本概念。. 瘋狂打地鼠. 經典打磚塊. 1. 2. 3.. 變數 if 條件結構運算子 ˙ 算術運算 ˙ 字串運算 ˙ 比較運算. 1.. 1. 2.. 變數 if-else 條件結構. 1.. 藉由實作「消除磚塊獲得分數」，使學生了解變數和算數運算的使用方法. 3.. 運算子 ˙ 算術運算 ˙ 字串運算 ˙ 比較運算. 2.. 藉由實作「偵測球與邊界碰撞」、「設計球與檔板、磚塊的碰撞行為」，使學生了解 if-else 條件結構的使用方法。. 2.. 16. 藉由實作「打擊地鼠獲得分數」，使學生了解變數和算術運算的使用方法藉由實作「增加條件：當計時器為 true 的情況下，打擊地鼠才獲得分」，使學生了解 if 條件結構的使用方法。.

(24) 貳、教學實施本研究之教學主要以設計手機 App 為主，逐步帶學生完成單元專案，並在設計 App 過程中講授相關的程式設計概念。在教學過程中搭配 Moodle 數位學習平台，讓學生方便取得單元專案和相關網路資源連結。為了讓學生更能專注在程式設計概念的學習，本研究事先將各單元專案欲呈現的畫面設計完成並匯出成壓縮檔。學生只需要從 Moodle 下載單元專案，並上傳到自己的 App Inventor 帳號，即可進行程式的撰寫。每一個單元的教學流程分為三個階段進行，以下以單元一「我的 App」為例說明教學流程：一、準備活動教師在行動裝置上展示並解說單元一的 App，讓學生瞭解學習目標並引起學生學習動機。然後，學生從 Moodle 下載單元專案，並上傳到自己的 App Inventor 帳號。. 二、發展活動教師逐步帶學生完成單元專案中的各個功能，最後整合成一個完整的 App。在過程中講授相關的程式設計概念，使學生循序漸進學習程式設計。. 三、綜合活動總結單元中提到的程式設計概念並指派練習作業給學生，幫助學生對學習內容有整體性的瞭解。練習作業的內容為完成單元專案或是以單元專案為基礎修改為進階版本，完成後的練習作業需繳交上傳至 Moodle。. 程式撰寫完成後，學生可以透過 App Inventor 模擬器或實際安裝到行動裝置上來驗證其所撰寫的程式碼，幫助學生理解程式執行的過程，同時也能提升學生的學習動機。而「運勢占卜」、「小小鋼琴家」、「瘋狂打地鼠」、「經典打磚塊」等四個單元的教學實施流程與架構和單元一相同。 17.

(25) 參、講義內容規劃講義內容針對 App Inventor 主要的兩個視窗說明，共分為兩個部分：畫面設計和 App 實作練習，以下是針對整體講義架構之規劃，但僅以某些單元為例進行說明。一、畫面設計畫面設計的部分主要說明專案範例的畫面如何安排和設計。由於學生不會實際操作如何拖拉元件及畫面的設計，因此在講義中詳細說明各單元中用到了哪些元件、元件的分類及用途。另外附有畫面的截圖，並於截圖中標示元件的編號，讓學生能夠清楚知道元件擺放的位置，如圖 3-1、3-2 所示。. 圖 3-1 單元一之元件類別、分類、名稱及用途說明. 圖 3-2 單元一之畫面截圖. 二、App 實作練習 App 實作練習的部分，以專案中預完成的程式功能區分並拆解成幾個小步驟。 18.

(26) 為了讓學生在課後也能夠參考講義自行練習，因此講義中除了解說實作過程中所需瞭解之程式設計概念，也詳細說明如何逐步完成專案中各個功能的程式，如圖 3-3、3-4 所示。由於 App Inventor 的操作介面皆為英文、程式指令的分類較複雜，因此在講義中也列出相關程式指令的所在位置，如圖 3-5 所示，以幫助學生在實作時可以快速找到程式指令。. 圖 3-3 單元二之概念解說. 圖 3-4 單元二之實作說明. 圖 3-5 單元三之標示指令所在位置. 19.

(27) 第四節研究工具本研究所需 App Inventor 開發環境、Moodle 數位學習平台、程式設計教材、程式設計活動問卷、成就測驗、課堂觀察表與訪談問題等研究工具，分述如下：. 壹、App Inventor 程式開發環境本研究使用 App Inventor 作為程式設計開發環境，版本為 version 134。它是一個線上開發 Android 的程式環境，採用視覺化拖拉、堆疊的方式撰寫程式，讓學習者能開發 Android 行動裝置上的應用程式。. 貳、Moodle 數位學習平台課程實施中搭配 Moodle 數位學習平台，將單元專案和相關網路資源連結放在 Moodle 平台。學生完成的練習作業也是繳交上傳至 Moodle 平台。. 參、程式設計教材程式設計教材是為了配合課堂上使用 App Inventor 而設計。除了 App Inventor 的簡介之外，還包括五個單元，依序介紹「程式設計基本架構」、「變數」、「運算子」、「if 條件判斷」、「if-else 條件判斷」等程式設計概念。每個單元均提供一個 App 專案讓學生讓撰寫程式，希望藉由實作練習，讓學生體會程式觀念。教材內容參見附錄一。. 肆、程式設計活動問卷程式設計活動問卷為瞭解學生「對程式設計的學習信心和興趣」、「對程式設計環境的看法」、「對於課程的建議或意見」等三個部分。問卷由研究者根據研究需要編製而成，問卷初擬完成後，邀請一位資訊教育專家、一位資訊教育所博士生，針對問卷的適切性給予建議，經多次修改後定稿。問卷採李克特（Likert-type） 20.

(28) 五點量表方式計分，依照非常同意、同意、普通、不同意、非常不同意等選項，分別給予 5、4、3、2、1 分。程式設計活動問卷內容參見附錄二。. 伍、成就測驗成就測驗的目的在瞭解學生的整體學習情況以及學習困難之處。測驗於課程結束後進行，測驗試題是由研究者與任課教師討論及修正後所設計，試題為單元專案的延伸應用，題型為除錯題 1 題、實作題 1 題，皆採用上機考試的方式進行。成就測驗試題參見附錄三。. 一、程式理解除錯題主要為測驗學生對於程式理解的程度，能否正確瞭解程式碼並修改成正確的程式，試題以單元五專案為基礎，新增一段新功能的程式，並於新功能程式區塊中設計四個錯誤。評分基準為是否能正確修正錯誤，並統計各個錯誤的作答情形。 1.. 錯誤一：測驗學生是否瞭解變數與運算子。. 2.. 錯誤二：測驗學生是否瞭解 if-else 的判斷條件。. 3.. 錯誤三：測驗學生是否瞭解布林值。. 4.. 錯誤四：測驗學生是否瞭解巢狀的 if-else。. 二、程式撰寫實作題主要為測驗學生撰寫程式的能力，是否能根據問題情境，設計程式以解決問題。試題以單元四為基礎，要求學生設計一個「倒數計時」功能。評分基準為是否能正確撰寫出程式碼，並依評分細項統計學生作答情形。評分細項包括： 1.. 學生是否能利用 if-else 撰寫條件判斷程式。. 2.. 學生是否能撰寫變數與運算子應用的程式。 21.

(29) 陸、課堂觀察表課堂觀察表為記錄每個單元之上課情形，包括教學狀況、學生學習反應、學生實作時所遇到的問題等項目。由研究者觀察個案教師使用 App Inventor 上課之情形，教學過程全程錄影記錄，研究者並撰寫觀察記錄，以作為分析之資料並據以調整教學。課堂觀察表格式參見附錄四。. 柒、教師訪談問題教師訪談分為兩個部分進行，第一部分為實驗進行前，主要訪談內容為瞭解個案教師背景、過去教學的內容與規劃、使用 App Inventor 教學之想法及班級學生的程度和學習狀況等；第二部分為實驗結束後，主要訪談內容為瞭解教學過程中的遭遇到哪些問題及如何解決、使用 App Inventor 教學和過去教學經驗比較、 App Inventor 教學有哪些能夠改善的地方等。教師訪談問題參見附錄五。. 捌、學生訪談問題學生做完成就測驗與程式設計活動問卷後，會再對學生進行訪談。焦點訪談的目的，是為了更進一步瞭解學生對於教材、教學方式與程式設計開發環境等看法，也瞭解學生在撰寫程式時所遇到的問題，作為研究資料的補強。焦點訪談問題參見附錄六。. 22.

(30) 第五節研究步驟本研究之實施時間共五週，每週授課時數兩小時，研究實施步驟如下圖所示：. 規劃教學實施內容. 選定教師. 教師會談. App Inventor 環境建置. 進行 App Inventor 程式設計教學（5 週）. 成就測驗與問卷施測. 訪談. 資料整理與分析. 圖 3-6 研究實施步驟. 23. 課堂觀察.

(31) 壹、規劃教學實施內容根據本學期參與教師的課程安排，研究者規劃 App Inventor 教學的內容，供教師於課堂使用。規劃內容包括：教學規劃、教學流程和程式設計教材等。. 貳、選定教師為了方便研究之實施與溝通，本研究選定教師為就讀本研究所之同學，目前為某女子高中資訊科技概論教師，過去教學經驗嘗試過不同的程式設計開發環境，且對於使用 App Inventor 於教學具有高度的興趣。. 參、教師會談研究者與參與教師說明本研究之教學規劃，並瞭解參與教師的背景、過去的教學經驗及使用 App Inventor 於教學之想法。另外，也瞭解參與教師任課班級學生的程度和本學期課程的安排與進度。. 肆、App Inventor 環境建置 App Inventor 運作時，部分功能需要一些軟體在電腦上輔助才能順利執行，例如：模擬器、函式庫等功能。因此，為了使電腦教室的電腦都能順利執行，在教學前事先於每台電腦安裝 App Inventor 套件和 Java 軟體。由於該電腦教室有使用還原系統，所以安裝完套件軟體後需再建立新的還原點，以確保不會因為人為因素，需要重新安裝這些套件軟體。. 伍、進行 App Inventor 程式設計教學本研究之教學時間為民國一○二年五月九日至六月十三日止，每週進行一個單元。教學時搭配 Moodle 數位學習平台使用，研究者和教師在上課之前將該堂課相關教材資源放置於 Moodle，以供學生方便取得。教學過程中全程錄影記錄，研究者於課後填寫課堂觀察表。 24.

(32) 陸、成就測驗與問卷施測實驗結束後進行成就測驗及問卷施測。成就測驗採用上機考試，考試時間為 2 個小時；問卷則是利用學生中午休息的時間施測，施測時間為 10 分鐘。. 柒、訪談本研究實驗結束後與個案教師進行錄音訪談，訪談問題以開放性問題為主，亦會根據課堂觀察的發現，進行深度追問瞭解。此外，採隨機取樣的方式抽選六位學生進行學生訪談，以瞭解學生撰寫程式過程中所遭遇到的困難和對於本課程的想法與建議。. 捌、資料整理與分析將蒐集到的資料，包括成就測驗、程式設計活動問卷、課堂觀察和訪談資料等，以量化和質性方式分析結果。分析時交叉比對，以提高研究資料的可信度。. 25.

(33) 第六節資料分析本研究蒐集之資料包括：成就測驗、程式設計活動問卷、課堂觀察和訪談資料等。成就測驗分為程式理解和程式撰寫兩部分，分析時依照評分基準來歸納學生的學習情形。程式理解部分，除了統計學生整體作答的情形，也統計各個錯誤分別有多少位學生成功除錯；程式撰寫部分，統計學生整體撰寫的情形，並依據評分細項分類和統計作答情形。問卷依李克特氏五點量表方式計分，依照非常同意、同意、普通、不同意、非常不同意，分別給予 5 分、4 分、3 分、2 分、1 分之計算分數。量表得分越高表示填答者越符合各題敘述的程度，反之，分數越低表示填答者越不符合各題敘述的程度。所蒐集到的資料利用 SPSS 統計軟體進行統計分析，其結果採描述性分析，以平均數、次數分配、百分比為主要的方法。另外，質性資料主要是以課堂觀察、訪談資料的內容為主，將訪談內容編譯成逐字稿，再與以分析討論，輔以佐證其量化資料分析的結果。. 26.

(34) 第四章. 結果與討論. 本章針對應用 App Inventor 於程式設計教學對學生學習之影響、應用 App Inventor 於程式設計教學之情形等方面進行分析討論，整理並歸納出應用 App Inventor 於程式設計教學之建議。. 第一節程式設計學習成就在學習成就方面，我們分別依程式理解以及程式撰寫來探討。. 壹、程式理解在程式理解部分，主要為測驗學生是否能夠讀懂程式碼，並修正程式錯誤的地方。表 4-1 為除錯題整體的作答情形，統計結果依照學生成功除錯的個數計算。統計結果顯示，有六成（27 位）的學生能夠找出三個以上的錯誤並成功除錯；近兩成（8 位）的學生只能找出一個或都沒有找出錯誤。整體而言，學生在程式理解方面有不錯的表現，大部分學生都能掌握課程中所提到的程式設計概念。. 表 4-1 除錯題整體作答情形（N=41）成功除錯個數. 人數. 百分比. 4個. 16. 39%. 3個. 11. 27%. 2個. 6. 15%. 1個. 3. 7%. 0個. 5. 12%. 27.

(35) 表 4-2 進一步統計各個錯誤成功除錯的人數。統計結果顯示，有六成（26 位）的學生瞭解變數與運算子的概念；有八成（35 位）的學生瞭解 if-else 條件判斷的概念；近八成（32 位）的學生瞭解布林的概念；近四成（18 位）的學生瞭解巢狀的 if-else。. 表 4-2 除錯題各個錯誤成功除錯人數統計錯誤地方. 成功除錯人數. 百分比. 錯誤一：變數與運算子. 26. 63%. 錯誤二： If-else 的條件判斷. 35. 85%. 錯誤三：布林值. 32. 78%. 錯誤四：巢狀的 if-else. 18. 44%. 貳、程式撰寫在程式撰寫的部分，主要為測驗學生是否能夠撰寫 if-else 條件判斷及學生是否能夠撰寫變數和運算子應用的程式。表 4-3 為實作題整體作答情形。統計結果顯示，接近三成（11 位）的學生能夠正確寫出「倒數計時」的功能；有七成（30 位）的學生沒有寫出「倒數計時」功能或是功能不完整。其中，能夠正確寫出「倒數計時」功能的 11 位學生，只有 2 位學生依照題目要求，使用 if-else 來撰寫「倒數計時」功能，而其他 9 位學生，均是使用 if 來撰寫（如圖 4-1）。. 表 4-3 實作題整體作答情形（N=41）評分基準. 人數. 百分比. 正確寫出「倒數計時」功能. 11. 27%. 沒有寫出「倒數計時」功能或是功能不完整. 30. 73%. 28.

(36) 表 4-4 為各個評分細項作答情形。統計結果顯示，只有一成（4 位）的學生能撰寫 if-else 條件判斷式，顯然學生不瞭解 if-else 的使用方法；有五成（21 位）的學生能撰寫變數和運算子應用的程式；而有四成（18 位）的學生都未能正確撰寫出程式，顯然大部分學生面對空白的程式區塊時，沒辦法自己撰寫出程式。. 表 4-4 各個評分細項作答情形評分細項. 人數. 百分比. 能撰寫 if-else 條件判斷式. 4. 10%. 能撰寫變數和運算子應用的程式. 21. 51%. 以上兩項都未能正確撰寫. 18. 44%. 整體而言，學生在程式撰寫的部分表現不理想。為瞭解造成學生學習成效不佳的原因，進一步分析學生撰寫之程式，發現大部分學生的錯誤為不會正確的設定 if-else 條件（如圖 4-2）和亂拼湊程式指令（如圖 4-3）。另外，在學生訪談中也發現，學生無法根據題意來撰寫程式碼以及在撰寫程式時會遺漏掉一些細節和步驟等問題。顯然學生無法理解題意且不精熟程式指令的用法，因而造成學生無法正確寫出程式，甚至亂拼湊程式碼。當問及撰寫程式時所遭遇到的困難時，學生的回答如下：學生甲：覺得流程很複雜，自己想的用上去變得很奇怪。（學生訪談）學生乙：困難的地方在邏輯思考，第一個步驟後要再考慮其他因素，有一些會漏掉，就會拼不起來，難下手。（學生訪談）. 29.

(37) 圖 4-1 使用 if 完成程式示例. 圖 4-2 無法正確設定 if-else 條件示例. 圖 4-3 亂拼湊程式指令示例 30.

(38) 第二節程式設計學習態度本節依據問卷所得的結果，分別針對學生對程式設計學習的看法、學習興趣等兩個部分描述。統計結果時，依學生填選之非常同意、同意、普通、不同意、非常不同意，給予 5、4、3、2、1 分。. 壹、程式設計學習看法表 4-5 是學生對程式設計學習方面的看法。以下分別針對程式設計環境和程式設計學習兩方面說明。. 表 4-5 學生對 App Inventor 程式設計學習的看法問卷題目 1.. 我覺得 App Inventor 操作環境很容易使用. 非常同意. 同意普通. 不同意. 非常不同意. 平均. 5%. 54%. 34%. 2%. 5%. 3.51. 2.. 我覺得 App Inventor 的程式指令很容易理解. 0%. 29%. 32%. 32%. 7%. 2.83. 3.. 給我程式碼，我能想像程式執行的結果. 0%. 12%. 32%. 44%. 12%. 2.44. 4.. 當程式執行錯誤時，我能找出程式的錯誤. 0%. 5%. 39%. 41%. 15%. 2.34. 5.. 學完 App Inventor，我覺得自己能夠設計一個簡單的. 2%. 15%. 43%. 29%. 10%. 2.7. App 程式. 一、對程式設計環境的看法問卷第 1 題是在瞭解學生對 App Inventor 程式設計環境的看法。統計結果顯示，大約六成的學生認為 App Inventor 操作環境很容易使用（非常同意 5%，同意 54%）。顯然學生對 App Inventor 程式設計環境的看法相當正面。另外，從課堂觀察也顯示，學生在操作方面甚少發生問題。. 31.

(39) 二、程式設計學習信心問卷第 2~5 題是在瞭解學生對 App Inventor 程式設計學習的信心。統計結果顯示，有大約三成的學生認為 App Inventor 的程式指令很容易理解（非常同意 0%，同意 29%）；有一成以上的學生認為給我程式碼，我能想像程式執行的結果（非常同意 0%，同意 12%）；接近一成的學生認為當程式執行錯誤時，能找出錯誤的地方（非常同意 0%，同意 5%）；大約兩成的學生認為學完 App Inventor，自己能夠設計一個簡單的 App 程式（非常同意 2%，同意 15%）。. 針對學生對於 App Inventor 程式設計學習的信心分數都偏低。綜合課堂觀察、問卷及訪談，提出以下解釋。本研究的教學流程主要是先由老師講述概念和示範如何操作，然後再讓學生練習，但單元四、五相較於前幾個單元較複雜、程式指令也相對較多，因此教師在講解概念和程式指令時花了較長的時間。學生除了要完成課堂上所講解的程式指令外，還需要理解概念和程式指令的意涵，因此造成學生在還沒理解程式指令的情況下就進入到下一個步驟。另外，學生在問卷的開放式問題及訪談都有提到「看不懂英文」、「時間不夠」等問題。這些原因或許也間接影響學生在程式撰寫方面的學習表現。對於程式設計學習的信心，學生的回答如下：學生甲：期待中文版的 App Inventor！我英文太差，每次都看不懂那些小方塊是什麼意思= =或者希望講義能說明英文單字的意思！（問卷的開放式問題）學生乙：有中文版是再好不過了！建議講義附加程式指令的中英翻譯+邏輯思考流程。（問卷的開放式問題）學生丙：有的時候沒有時間去思考每個步驟，就變成好像在玩拼圖，有的時候…就不會阿。（學生訪談）學生丁：有時候找不到老師說的東西在哪裡，看不懂英文。（學生訪談）. 32.

(40) 貳、學習興趣表 4-6 是學生對程式設計學習的興趣。問卷第 6~11 題是在瞭解學生學習程式設計的興趣。統計結果顯示，有六成以上的學生認為程式設計很好玩（非常同意 10%，同意 59%）；有八成以上的學生認為程式設計很有挑戰性（非常同意 41%， 44%同意）；有五成以上的學生認為該課程能提高自己對程式設計的興趣（非常同意 2%，同意 49%）；有六成以上的學生認為即使程式有點難，還是嘗試要完成（非常同意 12%，同意 54%）；有八成以上的學生認為看到程式順利執行，覺得很有成就感（非常同意 32%，同意 49%）；大約五成的學生希望可以學習更多的程式設計（非常同意 12%，同意 34%）。. 表 4-6 學生對程式設計學習的態度問卷題目. 非常同意. 同意普通. 不同意. 非常不同意. 平均. 6.. 我覺得程式設計很好玩. 10%. 59%. 27%. 2%. 2%. 3.71. 7.. 我覺得程式設計很有挑戰性. 41%. 44%. 15%. 0%. 0%. 4.27. 8.. 本課程能提高我對程式設計的興趣. 2%. 49%. 39%. 8%. 2%. 3.41. 9.. 即使程式有點難，我還是嘗試要完成. 12%. 54%. 34%. 0%. 0%. 3.78. 10. 看到程式順利執行，我覺得很有成就感. 32%. 49%. 17%. 2%. 0%. 4.10. 11. 我希望可以學習更多的程式設計. 12%. 34%. 42%. 10%. 2%. 3.44. 整體而言，學生對於程式設計的學習興趣相當正面。從課堂觀察也顯示，當學生完成範例程式時皆有很強的成就感。此外，根據問卷的開放式問題和訪談，學生認為雖然後面幾個單元越來越難，但對於程式設計的學習仍然表示有趣且好玩。以下為學生的回答：學生甲：很好玩，雖然如果沒有老師做一遍，我應該還是不會做…不過以後 33.

(41) 應該自己試試看，希望下學期還能學。（問卷的開放式問題）學生乙：哦！以前從沒有接觸過，極具挑戰性，但也充滿樂趣，如果還有機會，我一定會非常非常認真去理解…（問卷的開放式問題）學生丙：一開始蠻有趣的，可是後來越來越難，沒有太多時間。想不出來會有挫折，但還是覺得可以訓練自己的邏輯思考能力。（學生訪談）學生丁：我蠻喜歡寫程式，拼拼圖還蠻好玩的。以後比較能照自己的想法去拼出想要的程式。（學生訪談）. 34.

(42) 第三節應用 App Inventor 於程式設計教學之情形本節根據課堂觀察及教師訪談資料來探討應用 App Inventor 於程式設計教學之情形。分別就教學前的準備、教學中遇到的問題和學生的互動等方面描述。. 壹、教學前的準備由於本次教學為參與教師第一次嘗試使用 App Inventor 進行程式設計教學。為了確保教師確實會操作 App Inventor，並進行教學的準備。研究者於每次教學進行前，都會與教師溝通討論，說明當週課程的規劃，並且協助教師熟悉 App Inventor 的操作。因此，在每次教學進行前，參與教師花了很多心力在熟悉 App Inventor 的操作環境。對於教學前的準備，參與教師的回答如下：因為 App Inventor 其實有蠻多物件導向的概念在裡面，有很多的子分類跟項目，變成老師也要很熟悉這些項目的功能、功用。或者是去取捨哪些屬性你該不該講，你要把程式設計的重點擺在哪邊？是要把很多的畫面設計帶進去呢？還是說把一些程式設計的功能、屬性或是流程控制，把重點放在這。老師在教學上，必須要這些部分做取捨，這是教學之前就必須先設定好的目標。. 貳、教學中遇到的困難教學中碰到的問題包括學生找不到程式指令、電腦設備等問題。一、學生找不到程式指令在這次的教學中，我們事先將畫面設計的元件都設計完成，希望讓學生能夠專注在程式設計的學習。然而，在課堂觀察發現，有少數學生對於畫面設計中的元件屬性感到好奇，甚至不小心刪掉某些元件，使得學生在撰寫程式時找不到該元件相關的指令。另外，雖然每個單元都有提供學生講義，上課時也逐步帶學生完成程式，但還是發現有少數學生找不到指令的問題。對於這些問題，參與教師 35.

(43) 的看法如下： App Inventor 其實有很多的項目是一開始教學上，不見得比較簡單設計出來的範例就用的到那些項目。因為它的項目很多，一下子不可能把所有項目都講給他，而是哪個功能要用到才講解這個項目。學生可能會有這類的疑問，所以可能有一些補充資料要提供給學生，讓學生如果想要再額外摸一些其他的項目，有資料可以去參考。教師要很明確的跟學生說這是什麼項目，從哪個地方把它製造出來的，或者是新增出來，否則學生會找不到。可能在講義設計上要詳盡一點，讓學生知道那個是什麼東西，做一些解釋。（教師訪談）. 二、電腦設備由於 App Inventor 為一線上開發手機 App 的環境，開發過程都是透過瀏覽器在線上執行。但在教學過程中發現 IE 瀏覽器不支援 App Inventor 的問題。以下為課堂的情形：老師：各位同學，現在登入你的 App Inventor 並上傳本週專案。學生：老師，我登入後沒有畫面。老師：嗯…可能是 IE 不支援，你換用 Chrome 瀏覽器來開。（20130509 課堂觀察）. 當程式完成後，學生可以將程式上傳到手機或是模擬器來做驗證的動作。從課堂觀察發現，學生很少將完成的程式傳到手機，而是採用模擬器的方式來驗證程式執行的結果。然而，卻發現模擬器偶爾會發生未預期的故障，使的學生必須關掉模擬器再重開一個新的。對於這些問題，參與教師的看法如下：學生實際上沒有很頻繁的將程式傳到手機來驗證結果，而是利用電腦跑模擬器的方式，來看程式執行的結果，這其實和一開始預料的不一樣。在電腦上執行的話，模擬器其實關係到電腦本身的效能，App Inventor 因為跟 Java 綁在一起，有一些做模擬的部分會花掉電腦跑的時間，偶爾也會有一些出乎意 36.

(44) 料的錯誤，變成學生需要把它關閉再重開一個新的，重新做連結、同步的動作，程式才會正確執行。. 參、學生的互動參與教師過去在程式設計課程教過 C++或是 Scratch，但學生對程式設計的學習興趣卻沒有明顯的提升。參與教師表示可能與跟課程安排有一些關係，過去規劃一整學期的 Scratch 課程，一開始學生會覺得很有趣，但做到後來會覺得都很像、很類似，學生因而會慢慢彈性疲乏；而 C++的話，學生一開始就必須注意很多細節，例如：逗點、分號，不然程式就會常常出錯，沒辦法執行。此外課堂範例大多是解數學問題，與學生的生活經驗沒有那麼接近。對於學生的互動，參與教師的回答如下：我們設計了幾個範例，讓學生實作出手機上面可以運行的程式，在實作的過程中看起來都蠻投入的，能夠願意把上課講的範例給完成，包含作業也都蠻願意去完成。因為是學生實際可以看到的程式，他對程式設計會有實際的操作和體會，也會感受到原來程式設計是這麼一回事，進而感到興趣。因此學生的反應和參與度都還蠻高的，也會比較主動的發問，進行課程活動的參與，也會嘗試想要修改一些程式的內容。（教師訪談）. 37.

(45) 第四節教學的建議與改進本節根據蒐集之資料，分別對教學單元規劃、教學方法和講義內容三個部分說明，並提出教學建議與改進的地方。. 壹、教學單元規劃參與教師過去曾經嘗試教 C++或是 Scratch。不過，教師認為雖然 Scratch 可以很容易將程式設計成一個故事或是小遊戲，但一些細節的東西卻又不像傳統程式設計；另一方面，C++則太過於傳統，都是在解數學問題。而 App Inventor 看起來可以做出一些實用的東西，例如：手機上的小遊戲或小工具。此外它是利用拖拉的方式撰寫程式，這也促使教師認為可以直接切入程式設計概念的學習，嘗試使用 App Inventor 程式設計環境。在這次教學中，我們預先設計了幾個 App 範例並完成畫面的設計，希望讓學生能夠專注在程式設計概念的學習。然而，在課堂觀察中發現，學生會嘗試修改或新增畫面設計中的元件。對於教學單元規劃的改進與建議，參與教師的看法如下：整個教學設計來講，最主要未來可以再改良的地方應該還是在於範例的深淺難度的掌握，也許有一些範例可以加入一些讓學生自己加入創意的部分，除了我們要講的程式設計概念部分外，有一些部分是可以讓學生自己去修改文字、或是程式執行的動作那可能會更提升他的興趣，或是覺得更有參與感，因為不只是按照老師的範例來完成。這部分可能可以多參考相關教材的設計，進行教材的改良、改善（教師訪談）. 貳、教學實施在這次教學中，我們並沒有採用特定的教學策略，教學方式主要以程式功能區分成幾個步驟解說，由教師先講述相關概念和示範如何操作，然後再由學生練習。然而，從學生訪談和態度問卷中也發現，有部分學生反應操作的時間不夠， 38.

(46) 有些步驟要完成的程式較多、較繁瑣，短時間沒辦法吸收。對於教學方法的改進與建議，參與教師的看法如下：在教學活動過程中，也許我們講到某一個步驟，那個步驟我們就讓學生自己去思考，或是稍微停頓一下讓學生問問題，問學生說接下來該怎麼辦？也許可以增加類似的教學策略，真的刺激一下學生思考怎麼把東西做出來，而不完全只給他答案，有時候給他答案他就只是照著答案做，沒有真的在動腦筋。這可能是可以再修正的部分。（教師訪談）. 參、講義內容規劃講義內容規劃的部分，主要是希望學生在課後也能夠參考講義自行學習，因此講義中直接給予完整的程式碼。但教學過程中發現有部分學生只是照著講義做，而沒有去思考那些程式指令的意義。另外，從學生訪談和態度問卷，少數學生反應希望可以再增加程式指令的中文解說和程式執行的流程圖等建議。對於講義內容的改進與建議，參與教師的看法如下：講義內容部分，可能可以增加一些流程圖，因為我們設計的範例很多是在做遊戲，也許把流程圖比較完善的呈現給學生，對學生在理解整個程式上可能會有幫助。其實範例並沒有很困難，但流程圖加上去應該可以幫助他們對教材更瞭解。（教師訪談）. 39.

(47) 第五章. 結論與建議. 本章分為兩節，第一節為研究結論，第二節依據研究結果提出建議，供其他相關領域研究者作為參考. 第一節結論根據研究結果，對本研究提出結論如下：壹、使用 App Inventor 對學生程式設計學習興趣有正向的影響由問卷調查、課堂觀察和訪談中發現，學生對於使用 App Inventor 進行程式設計的學習興趣抱持著正面的看法。當問及教師本次教學與過去教學的比較，教師也認為學生在實作過程中相當投入，也會比較主動的發問，進行課程活動的參與，而當學生完成單元專案也皆表現出很強的成就感。. 貳、使用 App Inventor 有助於學生理解程式，但程式撰寫方面沒有明顯成效從除錯題的結果顯示，有六成的學生能夠找出三個以上的錯誤並成功除錯，顯然大部分的學生對於課堂教過的程式設計概念都能理解。但實作題的表現不理想，經探究原因後發現學生無法將想法轉換成程式碼、看不懂英文，以及不精熟程式指令的用法等原因，因而撰寫不出程式。. 參、App Inventor 程式指令分類複雜，易影響學生學習由於 App Inventor 包含的元件和指令很多且複雜，對於不熟悉開發環境的學生而言，常常會因為找不到程式指令，而跟不上課堂進度。甚至有部分學生為了要完成作業，只是照著講義做，而沒有思考程式指令的意思。. 40.

(48) 第二節建議壹、教學建議一、使用 App Inventor 於初學者程式設計教學問卷結果顯示，學生對於使用 App Inventor 學習程式設計有興趣。根據教師訪談發現，學生在課堂中的反應與參與度都很高。此外，學生完成之程式是能夠實際執行的 App。故此環境適合初學者作為程式設計學習工具，以引起學生學習之興趣。. 二、進行程式撰寫教學時，應注意指令分類，由淺入深的導入此次教學進入到後面幾個單元，由於需要完成程式指令較多且複雜，因此學生反應操作時間不足和找不到指令等問題。有部分學生為了完成課堂的練習，完全照著講義做，沒有理解程式指令的意思，而這也間接影響學生在程式撰寫的表現。因此，在進行程式撰寫教學時，應將指令由淺入深的導入，以增進學生學習之成就感。. 貳、對未來研究的建議一、設計更多類型的 App 範例本研究的 App 範例主要是以設計遊戲 App 為主，但除了設計遊戲類型的 App 之外，App Inventor 亦可設計出其他類型的 App，例如小工具、記事本或是結合網路資料庫等應用，因此建議未來的研究可以繼續發展更多元化的教材，以豐富 App Inventor 教學的內容。. 二、探討性別差異由於本研究的參與學生皆為女生，其研究結果可能受限於研究參與者，因此建議未來的研究可以加入性別的因素來探討，瞭解 App Inventor 是否對於男女在 41.

(49) 學習方面、態度方面會有不同的影響。. 三、延長教學的時間本研究課程主要是每週進行一個單元，但後幾個單元範例的難度漸漸加深，學生需要完成的程式指令變多，因此發現有學生跟不上進度的情況。建議未來的研究可以延長課程的時間，讓學生能夠更深入的理解程式指令和程式設計概念的學習。. 42.

(50) 參考文獻吳正己（2010）。台灣中小學資訊科技教育的沿革與現況。中國教育技術協會資訊技術教育專業委員會第六屆學術年會暨海峽兩岸信息技術教育研討會論文集，（頁 7-11）。西安，中國。吳正己與林凱胤（1997）。問題解決導向的程式語言教學。資訊與教育雜誌創刊十年特刊。頁 75-83。吳正己與何榮桂（民 87）。高級中學新訂電腦課程的內涵與特色。科學教育月刊（208），頁 26-32。教育部（2009）。普通高級中學資訊科課程綱要補充說明。臺北: 教育部。陳宏煒（2003）。高中電腦課程實施現況調查（未出版之碩士論文）。國立臺灣師範大學，臺北市。 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.. 43.

(51) 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, 251-255.. 44.

(52) 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). 45.

(53) 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).. 46.

(54) 附錄一程式設計教材 App Inventor 環境操作說明  環境建置 1.. 步驟一：申請 Gmail 帳號 Gmail 帳號為每一位 App Inventor 開發者必備的帳號，藉此帳號來登入 App Inventor 官網。. 2.. 步驟二：測試 Java 環境並安裝網址如下：. 3.. http://www.java.com/zh_TW/download/installed.jsp?detect=jre&try=1 步驟三：安裝 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) 替專案命名. 47.

(55)  App Inventor 的三個主要工具 1.. Designer：介面設計用來將 App 所需要的元件，例如：按鈕、顯示文字的標籤，擺放到螢幕上，也就是設計手機畫面呈現的方式。在 Designer 中又分成五個部分：Palette、Viewer、Components、Media、Properties，以下分別做簡單介紹： (1) Palette：提供許多元件供開發者使用，如按鈕、文字標籤、動畫等元件。 (2) Viewer：預覽應用程式完成後的畫面，開發者可在此調整元件擺放位置。 (3) Components：當我們從 Palette 拉了元件到 Viewer，在此就會顯示使用到了哪些元件，我們可以在此將元件重新命名。 (4) Media：我們在設計 App 時可能會用到的影音多媒體，可在此儲存並上傳。 (5) Properties：當我們要改變元件的屬性時，可在此設定元件屬性，如字體大小、顏色、文字內容等屬性。. 48.

(56) 2.. Blocks Editor： Blocks Editor 為撰寫程式的地方，如下圖所示。畫面的左側有一些程式積木（Blocks），透過這些積木的組合，來完成程式的撰寫。這些積木分為兩類：「Built-In」和「My Blocks」，Built-In 提供一般程式語言內該有的功能，如變數、流程控制、簡單的數學函式等；My Blocks 則是使用者自行定義的積木，在 Designer 所使用的元件都是我們自行定義的積木。. 3.. 模擬器：當我們將介面設計好，並將程式撰寫好後，我們會嘗試執行我們設計好的 App，以檢查程式是否有問題。如果我們沒有 android 平台的手機，我們可以透過模擬器來執行撰寫好的應用程式，模擬器如下圖所示。. 49.

(57)  App Inventor 程式下載的方式 1.. App Inventor 提供三種方式將 App 實際安裝到您的 Android 裝置上，如下圖：. (1) Show Barcode：將程式打包並產生一組二維條碼，你可以使用 Android 裝置上的條碼掃描程式來掃描，之後即可透過無線網路或 3G 網路來下載程式。請注意本功能只適用於單一帳號，因此在下載之前需在裝置上再次登入同一個 Gmail 帳號，否則無法下載。 (2) Download to this Computer：將.apk 安裝檔下載到電腦，您可以將這個檔案直接寄給擁有 Android 裝置的朋友，讓他們一起分享您的成果。 (3) Download to Connected Phone：透過這個方式下載時，我們必須在電腦下載手機與電腦的同步軟體（各家廠牌的同步軟體不同）並連接 USB，執行同步後就能將程式下載到連接的手機或是平板電腦內。 2.. 允許非 Market 應用程式如果要在手機上進行測試，必須做相關設定才能順利執行，通常設定的位置在： (1) 設定安全性不明的來源選項打勾說明：因為我們要安裝自己撰寫的 App 到手機上，所以我們需要將此選項打勾 (2) 設定開發人員選項USB 偵錯選項打勾說明：我們在撰寫程式時，當需要偵錯時，就必須將此選項打勾. 50.