閱讀(49.3k) 書簽贊(0) 我要糾錯

第 1 章　Hello 貓咪

2018-02-24 15:51 更新

作者介紹

Hal Abelson

關于Abelson教授的故事很難用一段簡短的文字來說明。他是MIT電子工程與計算機科學系的一名教授，獲得過MIT、IEEE以及ACM頒發(fā)的多種獎項，如果必須用一個詞來概括他的貢獻，那就是"教育"！正如他在獲獎時所說，“無論有多少獲獎的理由，對我來說只有‘教育’是最有意義的，這也是我在MIT給自己的定位：一名教師?！?/p>
Abelson教授作為MIT計算機教育的領導者，執(zhí)教已超過30年，至今仍擔當重要角色。他與Gerry Sussman合著的教科書《計算機程序的構造和解釋》改變了人們對計算的認識，并被世界范圍內的高等學校所采用(中譯本由北京大學裘宗燕教授翻譯)。書中淡化了具體編程語言的特殊性，而將抽象的思維方法作為所有編程語言的共同基礎。

在Abelson的教學實踐中，更關注的是學習的本質：在與真實世界的交互中學習。App Inventor就是這種思想的具體體現(xiàn)。作為App Inventor開發(fā)團隊的領導者，Abelson力圖讓初學者在創(chuàng)作實踐中體會編程語言的內涵，并掌握編程的方法。用建構主義(Constructionism)論的發(fā)展者Papert的話說，“生活在‘數(shù)學王國’里的人學習數(shù)學，就像法國人學習法語一樣的順理成章?！?/p>
除此之外，Abelson是開源運動的倡導者，是共創(chuàng)組織及自由軟件基金會的創(chuàng)始領導人之一，也是推動MIT開放課程的主要力量。

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

{%}

圖 1-1　HelloPurr應用

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

學習要點

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

選擇組件來創(chuàng)建應用：決定了應用的外觀；
為組件設定行為：做什么以及何時做；
使用組件設計器選擇組件，在Android設備上，有些組件可以顯示，有些則不可見；
從本地計算機加載媒體文件（聲音或圖像），并添加到應用中；
用塊編輯器來組裝程序塊，以此來設定組件行為；
用App Inventor的實時測試功能對應用進行測試。你可以一邊創(chuàng)建應用，一邊在手機上看到它們外觀以及運行情況；
將應用打包并下載到Android設備上。

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

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

如圖1-2A所示，組件設計器運行在瀏覽器中，創(chuàng)建應用過程中，用它來進行組件的選擇，并進行屬性設置；
如圖1-2B所示，像組件設計器一樣，塊編輯器也在瀏覽器中運行，用于創(chuàng)建組件的行為；
測試設備：在開發(fā)應用過程中，可以用Android設備對應用進行同步的運行與測試；如果你手邊沒有Android設備，你可以使用系統(tǒng)中集成的Android模擬器來測試應用。

{%}

圖 1-2A　組件設計器

{%}

圖 1-2B　塊編輯器

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

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

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

{%}

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

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

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

設計組件

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

當你打開Designer時，其外觀如插圖1-4所示。

{%}

圖 1-4　App Inventor的組件設計器

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

中部的白色區(qū)域稱為預覽窗口（Viewer），用于放置應用中所需的組件，你可以按照自己的喜好來安排這些組件。預覽窗口只能粗略地顯示應用的外觀，例如，與測試設備中的應用相比，在預覽窗口中，一行文字可能會在不同的地方換行。如果想看到應用的實際外觀，可以將應用下載到測試設備上（稍后我們會在“打包應用程序并下載”的部分詳細介紹），或者下載App Inventor自帶的模擬器。
預覽窗口的左側是組件面板（Palette），其中包含了可供選擇的各類組件。該面板按類別劃分為幾個部分，默認情況下，只有用戶界面（User Interface）組件可見，可以通過點擊其他類別的標題，如Media（媒體）等，來查看其他組件。
預覽窗口的右側是組件列表（Components），顯示了項目中的所有組件，拖動到預覽窗口中的任何組件都將顯示在該列表中。目前，該項目中只有一個組件：Screen1，它代表設備的屏幕。
組件列表下方是媒體列表（Media），顯示項目中的所有媒體資源（圖像和聲音）。本項目中尚未添加任何媒體資源，不過很快就會添加。

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

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

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

添加的第一個組件是Label：

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

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

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

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

{%}

圖 1-5　應用中有了一個Label（標簽）

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

添加Button（按鈕）組件

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

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

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

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

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

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

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

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

{%}

圖 1-6　應用中的一個Label和一個顯示為圖像的Button

添加貓叫聲

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

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

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

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

表1-1 HelloPurr中的組件

組件類型	面板中分組	命名	作用
Button	User	Interface	Button1點擊發(fā)出貓叫聲
Label	User Interface	Label1	顯示文本“寵物小貓”
Sound	Medi	undefined	Sound1播放貓叫聲

添加組件行為

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

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

發(fā)出貓叫聲

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

{%}

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

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

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