第 1 章　Hello 貓咪

作者介紹

Hal Abelson

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

圖 1-2B　塊編輯器

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

添加的第一個組件是Label：

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

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

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

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

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

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

添加Button（按鈕）組件

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

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

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

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”。與此同時，ketty.png也出現(xiàn)在設(shè)計(jì)器窗口組件列表下面的Media區(qū)域中。在測試設(shè)備中，也將顯示貓咪的圖片，此時按鈕看起來像一只小貓咪。

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

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

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

添加貓叫聲

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

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

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

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

表1-1 HelloPurr中的組件

添加組件行為

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

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

發(fā)出貓叫聲

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

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

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

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

OER

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

譯者提示

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

資源下載

kitty.png

meow.mp3

HelloPurr.aia

AI伴侶