視覺化程式設計環境

視覺化程式設計環境的開發，主要目的為解決程式設計學習的困難。Papert

（1980）於 1967 年首先提出以 LOGO 做為初學者學習程式設計環境和微世界

（Microworld）的觀點。在微世界中學習者能夠專注在新知識的學習，免除其他 因素的干擾。LOGO 即是基於此概念所開發，透過觀察小烏龜（Logo Turtle）於 微世界中的行為，來檢驗自己的想法正確與否。雖然 LOGO 的出現刺激了學校 人都能夠願意使用（wide walls）。然而，要同時滿足這三個特性卻不是那麼容易

（Guzdial, 2003）。

從 LOGO 推出至今，視覺化程式設計環境不斷的推陳出新，Keller 和 Pausch

（2005）歸納出這些視覺化程式設計環境有三個共同特點：（1）簡化程式設計過 且透過網路上傳與他人分享。Malan 和 Leitner（2007）的研究使用 Scratch 作為 大一新生程式設計入門課程，而學生在接觸 Java 課程後，皆認為 Scratch 有助於 建立程式設計的概念並幫助傳統程式語言（Java）的學習。

圖 2-1 Scratch 程式設計畫面 貳、 Alice

Alice（http://www.alice.org/）是美國卡內基美隆大學所發展的 3D 互動式圖 形程式設計環境，如圖 2-2 所示，主要幫助學生學習物件導向（Object-Oriented）

的概念。Alice 為一拖放式程式設計環境，讓使用者可以避免語法錯誤，且快速 的創造故事、互動式遊戲或動畫影片。McDermott 等（2007）使用 Alice 視覺化 程式設計環境，結果顯示學生在學習成就和學習動機方面有正向的影響。Powers 等（2007）的研究指出 Alice 雖然能夠提高學生的程式設計能力和自我效能，但 因為 Alice 無法產生流暢的動畫，因此造成有些學生專注在使動畫更順暢和真實，

進而忽略了學習程式設計的基本概念。

參、 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 有兩個主要的開發視窗：介

面設計視窗（Designer）和程式編輯視窗（Blocks Editor），另外還有模擬器

（Emulator）的功能，供使用者檢驗撰寫的程式。

介面設計視窗，如圖 2-4 所示，主要為設計使用者介面（User Interface）。透 過拖拉畫面元件到螢幕中，設計預呈現的畫面，使用者亦可設定及修改元件屬性，

如：背景、長寬或是樣式等。此外也可上傳多媒體檔案；程式編輯視窗，如圖 2-5 所示，主要為撰寫 App 程式，透過拖拉積木程式來設計程式的行為和功能；

模擬器，如圖 2-6 所示，透過同步模擬器的方式來檢驗使用者所撰寫的程式，另 外使用者亦可將程式直接傳到智慧型手機上執行。

綜上所述，視覺化程式設計環境已經成為初學者學習程式設計重要的工具之 一。雖然它們的目的都是降低初學者學習程式設計的困難和提高學習的興趣，但 App Inventor 相較於其他幾個視覺化程式設計環境更貼近於真實生活，且能夠應 用於真實世界中。因此，本研究選擇 App Inventor 應用於程式設計課程，既能降 低學習門檻，提高學生學習興趣，最重要是能夠與實際生活經驗連結。

圖 2-4 App Inventor 介面設計視窗

圖 2-5 App Inventor 程式編輯視窗

圖 2-6 App Inventor 模擬器