第 1 章　Hello 貓咪

作者介紹

Hal Abelson

關(guān)于Abelson教授的故事很難用一段簡(jiǎn)短的文字來(lái)說(shuō)明。他是MIT電子工程與計(jì)算機(jī)科學(xué)系的一名教授，獲得過(guò)MIT、IEEE以及ACM頒發(fā)的多種獎(jiǎng)項(xiàng)，如果必須用一個(gè)詞來(lái)概括他的貢獻(xiàn)，那就是"教育"！正如他在獲獎(jiǎng)時(shí)所說(shuō)，“無(wú)論有多少獲獎(jiǎng)的理由，對(duì)我來(lái)說(shuō)只有‘教育’是最有意義的，這也是我在MIT給自己的定位：一名教師?！?/p>

Abelson教授作為MIT計(jì)算機(jī)教育的領(lǐng)導(dǎo)者，執(zhí)教已超過(guò)30年，至今仍擔(dān)當(dāng)重要角色。他與Gerry Sussman合著的教科書《計(jì)算機(jī)程序的構(gòu)造和解釋》改變了人們對(duì)計(jì)算的認(rèn)識(shí)，并被世界范圍內(nèi)的高等學(xué)校所采用(中譯本由北京大學(xué)裘宗燕教授翻譯)。書中淡化了具體編程語(yǔ)言的特殊性，而將抽象的思維方法作為所有編程語(yǔ)言的共同基礎(chǔ)。

在Abelson的教學(xué)實(shí)踐中，更關(guān)注的是學(xué)習(xí)的本質(zhì)：在與真實(shí)世界的交互中學(xué)習(xí)。App Inventor就是這種思想的具體體現(xiàn)。作為App Inventor開(kāi)發(fā)團(tuán)隊(duì)的領(lǐng)導(dǎo)者，Abelson力圖讓初學(xué)者在創(chuàng)作實(shí)踐中體會(huì)編程語(yǔ)言的內(nèi)涵，并掌握編程的方法。用建構(gòu)主義(Constructionism)論的發(fā)展者Papert的話說(shuō)，“生活在‘?dāng)?shù)學(xué)王國(guó)’里的人學(xué)習(xí)數(shù)學(xué)，就像法國(guó)人學(xué)習(xí)法語(yǔ)一樣的順理成章?！?/p>

除此之外，Abelson是開(kāi)源運(yùn)動(dòng)的倡導(dǎo)者，是共創(chuàng)組織及自由軟件基金會(huì)的創(chuàng)始領(lǐng)導(dǎo)人之一，也是推動(dòng)MIT開(kāi)放課程的主要力量。

本章將開(kāi)啟你的創(chuàng)建應(yīng)用之旅。這里介紹了App Inventor的關(guān)鍵要素——組件設(shè)計(jì)器及塊編輯器，并手把手地引導(dǎo)讀者創(chuàng)建第一個(gè)應(yīng)用：HelloPurr。在完成本章的學(xué)習(xí)之后，就可以開(kāi)始創(chuàng)建自己的應(yīng)用了。

圖 1-1　HelloPurr應(yīng)用

每當(dāng)搭建了新的開(kāi)發(fā)環(huán)境，通常運(yùn)行的第一個(gè)程序就是顯示“Hello World”，來(lái)證明系統(tǒng)已經(jīng)就緒。這個(gè)傳統(tǒng)可以追溯到20世紀(jì)70年代，從Brian Kernighan 在貝爾實(shí)驗(yàn)室使用C語(yǔ)言開(kāi)始（Brian現(xiàn)在是谷歌App Inventor團(tuán)隊(duì)的訪問(wèn)學(xué)者！）。使用App Inventor，即便是創(chuàng)建最簡(jiǎn)單的應(yīng)用，也可以實(shí)現(xiàn)聲音的播放以及對(duì)屏幕觸摸的響應(yīng)，而不只是顯示文字。想想都令人感到興奮，那么，讓我們馬上開(kāi)始吧。第一個(gè)應(yīng)用是“HelloPurr”（如圖1-1），當(dāng)你觸摸這只貓時(shí)，它會(huì)發(fā)出“喵嗚”聲；當(dāng)你搖晃它時(shí)，則將發(fā)出嘟嘟的震顫。

學(xué)習(xí)要點(diǎn)

本章用到了以下組件和概念：

• 選擇組件來(lái)創(chuàng)建應(yīng)用：決定了應(yīng)用 的外觀；

• 為組件設(shè)定行為：做什么以及何時(shí)做；

• 使用組件設(shè)計(jì)器選擇組件，在Android設(shè)備上，有些組件可以顯示，有些則不可見(jiàn)；

• 從本地計(jì)算機(jī)加載媒體文件（聲音或圖像），并添加到應(yīng)用中；

• 用塊編輯器來(lái)組裝程序塊，以此來(lái)設(shè)定組件行為；

• 用App Inventor的實(shí)時(shí)測(cè)試功能對(duì)應(yīng)用進(jìn)行測(cè)試。你可以一邊創(chuàng)建應(yīng)用，一邊在手機(jī)上看到它們外觀以及運(yùn)行情況；

• 將應(yīng)用打包并下載到Android設(shè)備上。

App Inventor的開(kāi)發(fā)環(huán)境

App Inventor的編程環(huán)境包括以下三個(gè)重要組成部分，如圖1-2所示：

• 如圖1-2A所示，組件設(shè)計(jì)器運(yùn)行在瀏覽器中，創(chuàng)建應(yīng)用過(guò)程中，用它來(lái)進(jìn)行組件的選擇，并進(jìn)行屬性設(shè)置；

• 如圖1-2B所示，像組件設(shè)計(jì)器一樣，塊編輯器也在瀏覽器中運(yùn)行，用于創(chuàng)建組件的行為；

• 測(cè)試設(shè)備：在開(kāi)發(fā)應(yīng)用過(guò)程中，可以用Android設(shè)備對(duì)應(yīng)用進(jìn)行同步的運(yùn)行與測(cè)試；如果你手邊沒(méi)有Android設(shè)備，你可以使用系統(tǒng)中集成的Android模擬器來(lái)測(cè)試應(yīng)用。

圖 1-2A　組件設(shè)計(jì)器

圖 1-2B　塊編輯器

在瀏覽器中訪問(wèn)ai2.appinventor.mit.edu即可啟動(dòng)App Inventor。如果你是第一次使用App Inventor，你會(huì)看到彈出的項(xiàng)目（Projects）窗口，它多半是空的，因?yàn)槟氵€沒(méi)有創(chuàng)建過(guò)任何項(xiàng)目。單擊頁(yè)面左上角的“Project?Start new project…”創(chuàng)建一個(gè)項(xiàng)目，輸入“HelloPurr”作為項(xiàng)目名稱（注意不帶空格），然后單擊OK。

打開(kāi)的第一個(gè)窗口是組件設(shè)計(jì)器（Designer），你可以單擊窗口右上角的Blocks按鈕來(lái)切換到塊編輯器。

在Project右側(cè)的Connect下拉菜單中有三個(gè)可選項(xiàng)（三類測(cè)試設(shè)備），如圖1-3所示。

圖 1-3　單擊“Connect”并選擇“AI Companion”（應(yīng)用開(kāi)發(fā)伴侶，或簡(jiǎn)稱AI伴侶）

如果手邊的Android設(shè)備可以通過(guò)WIFI訪問(wèn)互聯(lián)網(wǎng)，用該設(shè)備訪問(wèn)Google Play，搜索MIT的AICompanion，下載、安裝并啟動(dòng)它。然后在“Connect”下拉菜單中選擇“AI Companion”，并按照彈出窗口以及AI伴侶中的提示進(jìn)行操作。除此之外，也可以使用Android模擬器來(lái)測(cè)試應(yīng)用，選擇“Connect?Emulator”來(lái)加載Android模擬器，大約要等30秒鐘。

如果一切正常，將會(huì)看到組件設(shè)計(jì)器窗口、塊編輯器按鈕，如果你選擇了Emulator選項(xiàng)，你還可以看到模擬器窗口（屏幕上看起來(lái)應(yīng)該像插圖1-2A和1-2B，但窗口中大部分是空的）。如果您還有問(wèn)題，請(qǐng)重溫網(wǎng)站http://ai2.appinventor.mit.edu中的安裝說(shuō)明。

設(shè)計(jì)組件

我們使用的第一個(gè)工具就是（也只能是）組件設(shè)計(jì)器。組件是你用來(lái)創(chuàng)建應(yīng)用的基本元素，就像菜譜中的原料。有些組件非常簡(jiǎn)單，如“Label”（標(biāo)簽）組件，它用于在屏幕上顯示文字；或者如“Button”（按鈕）組件，輕按它則引起一個(gè)動(dòng)作。其它組件則要更復(fù)雜：一個(gè)繪圖的“Canvas”（畫布）組件可以容納靜止圖像或動(dòng)畫；“accelerometerSensor”（加速度傳感器）組件是一種運(yùn)動(dòng)傳感器，它的工作原理類似于Wii 控制器，它可以檢測(cè)到設(shè)備的移動(dòng)或搖晃；還有的組件用于編寫并發(fā)送短信、播放音樂(lè)和視頻以及從網(wǎng)站獲取信息等等。

當(dāng)你打開(kāi)Designer時(shí)，其外觀如插圖1-4所示。

圖 1-4　App Inventor的組件設(shè)計(jì)器

Designer被劃分為如下幾個(gè)區(qū)域：

• 中部的白色區(qū)域稱為預(yù)覽窗口（Viewer），用于放置應(yīng)用中所需的組件，你可以按照自己的喜好來(lái)安排這些組件。預(yù)覽窗口只能粗略地顯示應(yīng)用的外觀，例如，與測(cè)試設(shè)備中的應(yīng)用相比，在預(yù)覽窗口中，一行文字可能會(huì)在不同的地方換行。如果想看到應(yīng)用的實(shí)際外觀，可以將應(yīng)用下載到測(cè)試設(shè)備上（稍后我們會(huì)在“打包應(yīng)用程序并下載”的部分詳細(xì)介紹），或者下載App Inventor自帶的模擬器。

• 預(yù)覽窗口的左側(cè)是組件面板（Palette），其中包含了可供選擇的各類組件。該面板按類別劃分為幾個(gè)部分，默認(rèn)情況下，只有用戶界面（User Interface）組件可見(jiàn)，可以通過(guò)點(diǎn)擊其他類別的標(biāo)題，如Media（媒體）等，來(lái)查看其他組件。

• 預(yù)覽窗口的右側(cè)是組件列表（Components），顯示了項(xiàng)目中的所有組件，拖動(dòng)到預(yù)覽窗口中的任何組件都將顯示在該列表中。目前，該項(xiàng)目中只有一個(gè)組件：Screen1，它代表設(shè)備的屏幕。

• 組件列表下方是媒體列表（Media），顯示項(xiàng)目中的所有媒體資源（圖像和聲音）。本項(xiàng)目中尚未添加任何媒體資源，不過(guò)很快就會(huì)添加。

最右邊的部分用于顯示組件的屬性（Properties），在預(yù)覽窗口中單擊某個(gè)組件，將在Properties下方看到該組件的一系列屬性。屬性描述了組件的詳細(xì)信息（如，單擊Label組件可以看到它的顏色、文字內(nèi)容、字體的屬性。），可以修改屬性值。當(dāng)前顯示的是屏幕（名為Screen1）的屬性，包括背景顏色、背景圖像及標(biāo)題等。

HelloPurr應(yīng)用中需要兩個(gè)可視組件（可以理解為應(yīng)用中確實(shí)可見(jiàn)的組件）：Label組件顯示文字“寵物小貓”，而B(niǎo)utton組件中有一張貓的圖片；還需要一個(gè)非可視的Sound（聲音）組件，用來(lái)播放聲音，如貓叫聲；還有一個(gè)AccelerometerSensor（加速度傳感器）組件，用于檢測(cè)設(shè)備的移動(dòng)或搖晃。不必?fù)?dān)心，我們將按一步一步地教你使用這些組件。

創(chuàng)建一個(gè)Label（標(biāo)簽）

添加的第一個(gè)組件是Label：

1. 轉(zhuǎn)到組件面板（Palette），單擊Label（列表中的第五個(gè)），并將其拖動(dòng)到預(yù)覽窗口（Viewer）中。你會(huì)看到一個(gè)矩形框出現(xiàn)在預(yù)覽窗口中，框里寫著Text for Label1。

2. 看組件設(shè)計(jì)器右側(cè)的Properties（屬性）框，它顯示了Label的屬性。在中間位置有一個(gè)Text屬性，下面是Label中顯示的文字。將文字改為“寵物小貓”并按回車鍵。你會(huì)看到在預(yù)覽窗口中的文字也改變了。

3. 單擊BackgroundColor（背景色）下面的方框來(lái)改變Label的背景色，目前屬性值為None（無(wú)背景色），從顯示的顏色列表中選擇藍(lán)色，并將Label的TextColor（文字顏色）屬性改為黃色。最后將FontSize（字號(hào)）屬性改為20。

Designer的外觀如圖1-5所示：

圖 1-5　應(yīng)用中有了一個(gè)Label（標(biāo)簽）

要確保Android測(cè)試設(shè)備或模擬器處于連接狀態(tài)。在設(shè)計(jì)器中添加的Label會(huì)在測(cè)試設(shè)備上顯示出來(lái)。在App Inventor中，在設(shè)計(jì)器中為應(yīng)用添加組件，等同于在設(shè)備上構(gòu)建應(yīng)用。這樣一來(lái)，你可以隨時(shí)看到應(yīng)用的外觀，這就是所謂的實(shí)時(shí)測(cè)試，你很快就會(huì)看到，這樣的測(cè)試也同樣適用于在塊編輯器中為組件添加行為。

添加Button（按鈕）組件

HelloPurr應(yīng)用中的貓咪用Button組件來(lái)實(shí)現(xiàn)：創(chuàng)建一個(gè)普通Button，然后將Button的圖像更改為貓咪。在組件設(shè)計(jì)器（Designer）的組件面板（Patatte）中單擊Button（在列表的頂部），將它拖到預(yù)覽窗口（Viewer）中，置于Label下方。你會(huì)看到一個(gè)矩形按鈕出現(xiàn)在預(yù)覽窗口中。幾秒鐘后，該按鈕就會(huì)出現(xiàn)在Android設(shè)備上。試著輕擊設(shè)備上的按鈕，有什么反應(yīng)嗎？不會(huì)的，因?yàn)閼?yīng)用沒(méi)有向Button發(fā)布命令。這是理解App Inventor的第一個(gè)要點(diǎn)：添加到設(shè)計(jì)器中的組件，必須在塊編輯器中創(chuàng)建相應(yīng)的程序，才能使組件產(chǎn)生某種行為（在設(shè)計(jì)器中添加一個(gè)組件之后要做這件事）。

我們希望當(dāng)點(diǎn)擊這個(gè)Button時(shí)，它會(huì)發(fā)出貓叫聲，但我們希望這個(gè)button開(kāi)起來(lái)相隔小貓，而不是一個(gè)普通的方塊，因此需要為button設(shè)置圖片：

1. 首先，需要下載的小貓的圖片，并保存在你的電腦上。從kitty.png下載名為kitty.png的圖片文件（png是與jpg、gif等類似的標(biāo)準(zhǔn)圖像格式，在App Inventor中，所有這些都是有效的文件類型，與常用的標(biāo)準(zhǔn)聲音文件.mpg或.mp3一樣），同時(shí)從meow.mp3下載聲音文件（選擇“網(wǎng)頁(yè)另存為”來(lái)保存聲音文件）。

2. 在預(yù)覽窗口中點(diǎn)擊該按鈕，屬性框中將顯示其屬性。點(diǎn)擊中部Image屬性（現(xiàn)在顯示的是None）。顯示“Upload File…”按鈕。

3. 點(diǎn)擊“Upload File…”按鈕，再單擊彈出窗口中的“選擇文件”按鈕，瀏覽并選擇之前下載的文件kitty.png，然后單擊確定。

4. 幾秒鐘之后，kitty.png被列為Button的Image屬性的選項(xiàng)，單擊“OK”。與此同時(shí)，ketty.png也出現(xiàn)在設(shè)計(jì)器窗口組件列表下面的Media區(qū)域中。在測(cè)試設(shè)備中，也將顯示貓咪的圖片，此時(shí)按鈕看起來(lái)像一只小貓咪。

5. 注意到貓咪的圖片上顯示文字“Text for Button1”，我們不希望在應(yīng)用中看到這些，因此將Button1的Text屬性改為“寵物小貓”一類的文字，或者干脆刪除所有文字。

現(xiàn)在設(shè)計(jì)器看起來(lái)如圖1-6。

圖 1-6　應(yīng)用中的一個(gè)Label和一個(gè)顯示為圖像的Button

添加貓叫聲

我們希望當(dāng)點(diǎn)擊按鈕時(shí)，應(yīng)用會(huì)發(fā)出貓叫聲。為此需要添加貓叫的聲音文件，并通過(guò)設(shè)定Button的行為來(lái)實(shí)現(xiàn)這一功能：

1. 如果meow.mp3文件尚未下載，現(xiàn)在點(diǎn)擊鏈接meow.mp3下載；

2. 在左側(cè)的組件面板中，單擊Media類的標(biāo)題打開(kāi)Media組件列表。向預(yù)覽窗口中拖放一個(gè)Sound組件。無(wú)論你把它放在哪里，它都會(huì)出現(xiàn)在預(yù)覽窗口的底部，并被標(biāo)記為“Non-visible components（非可視組件）”。非可視組件在應(yīng)用中發(fā)揮特定作用，但不會(huì)顯示在用戶界面中；

3. 點(diǎn)擊Sound1以顯示其屬性。設(shè)置其Source屬性為meow.mp3。同貓咪圖片一樣，需要從電腦中加載這個(gè)聲音文件。加載完成后，Media列表中將出現(xiàn)kitty.png與meow.mp3兩個(gè)文件。表1-1中列出了現(xiàn)有的組件。

表1-1 HelloPurr中的組件

添加組件行為

剛剛添加了Button、Label、以及Sound組件來(lái)構(gòu)建我們的第一個(gè)應(yīng)用，現(xiàn)在使用塊編輯器來(lái)實(shí)現(xiàn)點(diǎn)擊Button產(chǎn)生貓叫聲的功能。單擊設(shè)計(jì)器右上角的“Blocks”按鈕切換到塊編輯器。

在塊編輯器窗口中，可以為組件設(shè)定行為：做什么以及何時(shí)做。此處是讓小貓按鈕在用戶點(diǎn)擊它時(shí)播放聲音。如果把組件比作菜譜中的原料，那么塊（Blocks）則相當(dāng)于烹飪過(guò)程說(shuō)明。

發(fā)出貓叫聲

在塊編輯器窗口的左側(cè)，“Blocks”標(biāo)題下面，可以看到許多分屬不同類別的按鈕，其中包括了我們?cè)谠O(shè)計(jì)器中創(chuàng)建的所有組件：Screen1、Button1、Label1以及Sound1，點(diǎn)擊它們就像打開(kāi)抽屜，將看到一組適用于該組件的可選程序塊（Blocks）。點(diǎn)擊Button1打開(kāi)抽屜，顯示了與Button有關(guān)的程序塊，可以用它們來(lái)設(shè)置Button的行為，最上面的Block就是Button1.Click，如圖1-7所示。

圖 1-7　點(diǎn)擊Button1時(shí)顯示適用于Button組件的程序塊（Blacks）

單擊標(biāo)有Button1.Click的塊并將其拖到工作區(qū)。注意，Button1.Click這個(gè)塊上包含了when。凡是包含when的塊都被稱為事件處理程序，用來(lái)定義當(dāng)組件上發(fā)生了某種特定事件時(shí)，應(yīng)用該做什么。在本例中，當(dāng)用戶點(diǎn)擊貓咪（其實(shí)是按鈕）時(shí)發(fā)生了有趣的事情，如圖1-8所示。下面我們將在程序中添加一些塊，來(lái)響應(yīng)發(fā)生的事件。

計(jì)算機(jī)協(xié)會(huì)(Association of Computing Machinery)，創(chuàng)立于1947年，是世界性的計(jì)算機(jī)從業(yè)員專業(yè)組織，面向研究與教育，工作方式為專業(yè)期刊、興趣小組及設(shè)立獎(jiǎng)項(xiàng)。主要期刊為《計(jì)算機(jī)學(xué)會(huì)通訊(Communications of the ACM)》,在全球有35個(gè)興趣小組，設(shè)立了8個(gè)獎(jiǎng)項(xiàng)，其中的圖靈獎(jiǎng)相當(dāng)于計(jì)算機(jī)界的諾貝爾獎(jiǎng)。

OER

開(kāi)放教育資源(Open Educational Resources):將文檔、媒體等實(shí)用的教學(xué)資源向以教學(xué)、評(píng)估及研究為目的使用者免費(fèi)開(kāi)放。這是教育資源開(kāi)發(fā)的基本特征，它源于人們?cè)噲D抑制知識(shí)商品化的愿望。MIT作為開(kāi)放運(yùn)動(dòng)的先鋒，開(kāi)放了許多優(yōu)秀的視頻課程，英語(yǔ)好的同學(xué)真是有福了。

譯者提示

本章非常重要，一個(gè)簡(jiǎn)單的例子，貫穿了一個(gè)完整的開(kāi)發(fā)過(guò)程，從界面設(shè)計(jì)到代碼編制，從開(kāi)發(fā)環(huán)境到測(cè)試設(shè)備，從普通媒體（圖片）到手機(jī)特有的搖晃、震動(dòng)。對(duì)于初學(xué)者，這是一個(gè)幸福的開(kāi)端

資源下載

kitty.png

meow.mp3

HelloPurr.aia

AI伴侶