白二娃

App Inventor既方便，又強(qiáng)大，可以創(chuàng)建出各種有趣又實(shí)用的應(yīng)用，充分發(fā)揮你的想象力。我們將根據(jù)現(xiàn)實(shí)場景，提出問題，轉(zhuǎn)化成APP開發(fā)需求，通過創(chuàng)意構(gòu)思、組件設(shè)計(jì)、邏輯設(shè)計(jì)、連接調(diào)試，完成一系列APP實(shí)例的開發(fā)，逐步掌握APP程序設(shè)計(jì)的基礎(chǔ)知識和基本方法。

App Inventor是由Google公司開發(fā)的一款在線Android編程工具軟件，目前由麻省理工學(xué)院MIT行動(dòng)學(xué)習(xí)中心維護(hù)，具有如下特點(diǎn)：

1.方便的環(huán)境搭建：采用瀏覽器+云服務(wù)模式，無需復(fù)雜軟件安裝。所有開發(fā)代碼儲(chǔ)存在云端服務(wù)器上，保證了源代碼的一致性和安全性。

2.簡單的開發(fā)過程：無需關(guān)注復(fù)雜的語法規(guī)則，通過圖形化積木式的組件拖放來完成APP開發(fā)，沒有編程基礎(chǔ)的用戶也可以開發(fā)APP。

3.組件模塊：有多媒體、傳感器、樂高機(jī)器人等豐富的組件，方便開發(fā)者實(shí)現(xiàn)創(chuàng)意。

4.調(diào)試功能：通過AI伴侶進(jìn)行調(diào)試，所有代碼的變更會(huì)自動(dòng)同步到進(jìn)行調(diào)試的手機(jī)或者模擬器中，無需重裝應(yīng)用，就可以看到最新效果。

一般來說，開發(fā)一個(gè)項(xiàng)目的流程可以用一個(gè)公式加以描述：

項(xiàng)目開發(fā)=創(chuàng)意構(gòu)思+屏幕設(shè)計(jì)+功能設(shè)計(jì)+測試運(yùn)行

與此對應(yīng)，利用App Inventor開發(fā)APP的過程就是：

APP開發(fā)=創(chuàng)意構(gòu)思+組件設(shè)計(jì)+邏輯設(shè)計(jì)+連接調(diào)試

App Inventor的官網(wǎng)是appinventor.mit.edu，因?yàn)樵趪鈺r(shí)常無法正常登錄。我們可以登錄并注冊廣州市電化教育館提供的中文版App Inventor（http：//app.gzjkw.net/）。

App Inventor采用可視化的設(shè)計(jì)開發(fā)方法，將“組件面板”中的組件拖至“工作面板”，就能設(shè)計(jì)APP的運(yùn)行效果。當(dāng)向屏幕Screen1中拖放某些組件后，這些組件會(huì)顯示在“組件列表”中。在“工作面板”或者“組件列表”中選擇任意組件，便會(huì)在“組件屬性”中出現(xiàn)其對應(yīng)的屬性。

切換到“邏輯設(shè)計(jì)”視圖，“模塊”欄列出了所有內(nèi)置塊和該屏幕中所有組件。“素材”欄可用于直接上傳素材文件。“工作面板”占據(jù)了大部分空間，其左下角顯示的是當(dāng)前項(xiàng)目中出現(xiàn)的錯(cuò)誤或者警告?zhèn)€數(shù);右上方是一個(gè)書包，可以實(shí)現(xiàn)多個(gè)屏幕之間的代碼復(fù)制;右下方是一個(gè)垃圾桶，可以把不要的積木塊放進(jìn)去，從而實(shí)現(xiàn)刪除功能。

模塊是“多彩”的。在內(nèi)置塊中，“控制”是土黃色，“邏輯”是黃綠色，“數(shù)學(xué)”是藍(lán)色，“文本”是玫紅色，“列表”是淺藍(lán)色，“顏色”是灰色，“變量”是橙色，“過程”是紫色。單擊模塊欄中任何一個(gè)組件，會(huì)彈出該組件所關(guān)聯(lián)擁有的編程模塊，土黃色模塊表示觸發(fā)事件，深綠色模塊用來設(shè)置屬性，淺綠色用來讀取屬性，紫色模塊表示調(diào)用方法。注意，觸發(fā)事件模塊總在最外層，其他模塊總被“包裹”在里面。

三、 做個(gè)點(diǎn)名神器APP

點(diǎn)名是校園學(xué)習(xí)生活中最常見的環(huán)節(jié)，檢查出勤率要點(diǎn)名，回答問題要點(diǎn)名……那么，第一個(gè)手機(jī)應(yīng)用就來做“點(diǎn)名神器”吧！通過設(shè)計(jì)和制作這個(gè)簡單的APP，我們可以熟悉App Inventor從設(shè)計(jì)到組件搭建程序編寫和APK安裝調(diào)試的全流程。

“點(diǎn)名神器”是老師的好幫手，搖一搖手機(jī)或者點(diǎn)擊按鈕，即可隨機(jī)顯示學(xué)生的學(xué)號，并語音播報(bào)出來，以此達(dá)到隨機(jī)點(diǎn)名的目的。這要比老師隨機(jī)叫學(xué)生名字更能讓學(xué)生集中注意力。

1） 新建項(xiàng)目

用自己的賬號登錄開發(fā)網(wǎng)站，選擇“項(xiàng)目→新建項(xiàng)目”，創(chuàng)建一個(gè)新項(xiàng)目“DianMing”。項(xiàng)目名稱是以字母開頭的字母、數(shù)字和下劃線的組合，盡管是中文版，但目前項(xiàng)目名稱不支持中文，命名要做到見名知意，這樣才能一目了然。

2） 選擇組件

選擇所需的6個(gè)組件，拖放至工作面板中。分別是：

Screen（屏幕），1個(gè)（默認(rèn)）。

按鈕，2個(gè)。

音效，1個(gè)。

文本語音轉(zhuǎn)換器，1個(gè)。

加速度傳感器，1個(gè)。

其中，音效、文本語音轉(zhuǎn)換器和加速度傳感器是非可視組件，不會(huì)直接顯示在Screen中，而是顯示在屏幕下方的“非可視組件”欄中。

我們要養(yǎng)成給組件命名的習(xí)慣，雖然組件有默認(rèn)名，但是后期邏輯設(shè)計(jì)時(shí)一個(gè)好分辨的名字會(huì)讓我們輕松不少。

現(xiàn)在有兩個(gè)按鈕，分別命名為“按鈕_點(diǎn)名”“按鈕_學(xué)號”。

3） 設(shè)置Screen組件屬性

在App Inventor中，每個(gè)APP至少有一個(gè)Screen組件。在新建項(xiàng)目時(shí)默認(rèn)建立了一個(gè)Screen1組件，這是后面應(yīng)用開發(fā)的基礎(chǔ)。工作面板上方的3個(gè)屏幕按鈕可以實(shí)現(xiàn)增加和刪除屏幕以及多屏幕間的切換。本例中只有一個(gè)屏幕，這幾個(gè)按鈕用不上。

在Screen組件中需要根據(jù)需求設(shè)置相應(yīng)屬性值，這些屬性將影響到APP的屏幕和交互效果。在本例中，整個(gè)Screen1 組件的屬性設(shè)置如圖所示。

“水平對齊”和“垂直對齊”改為居中，“應(yīng)用名稱”是APP的名稱，在手機(jī)中安裝后會(huì)顯示在APP圖標(biāo)下;“背景顏色”改為黑色;“圖標(biāo)”即應(yīng)用安裝后所顯示的圖標(biāo)，如果不設(shè)置，APP安裝后將使用App Inventor默認(rèn)的圖標(biāo)，我們可以找一個(gè)合適的圖片在“素材”中上傳;“屏幕方向”為豎屏;“標(biāo)題”就是顯示在屏幕左上角標(biāo)題欄的文字。

4） 設(shè)置按鈕組件屬性

按鈕可以感知用戶的觸摸。從“用戶屏幕”組件欄中拖放兩個(gè)“按鈕”組件到Screen1中，用于響應(yīng)用戶點(diǎn)擊事件和學(xué)號的顯示。

“按鈕_點(diǎn)名”組件屬性，背景橙色;啟用;粗體;字號50;高度200像素;寬度200像素;形狀橢圓;勾選“顯示交互效果”;文本“點(diǎn)名”;居中;黑色。

“按鈕_學(xué)號”組件屬性，背景白色;啟用;粗體;字號50;高度200像素;寬度200像素;形狀橢圓;“顯示交互效果”不勾選;文本“學(xué)號”;居中;紅色。

按鈕屬性中并沒有對按鈕本身設(shè)置對齊方式，但是兩個(gè)按鈕組件卻居于屏幕的中間。這是因?yàn)樵赟creen1的“水平對齊”屬性設(shè)置為“居中”。組件的對齊方式是由它的父容器所決定的。所謂父容器，就是它所被安放進(jìn)的組件。本例中，Screen1 就是該按鈕組件的父容器。

5） 音效

音效組件是一種多媒體組件，可以播放聲音文件，也可以讓手機(jī)產(chǎn)生震動(dòng)。本例中，組件屬 性使用默認(rèn)值。

6） 文本語音轉(zhuǎn)換器

這個(gè)組件可以讓設(shè)備將文字用語音讀出來。“音調(diào)”設(shè)置合成語音的音調(diào)，范圍為0～2，值越低，音調(diào)越低;“語速”范圍為0～2。本例組件屬性使用默認(rèn)值。

注意，“文本語音轉(zhuǎn)換器”組件默認(rèn)調(diào)用的是安卓Pico TTS引擎（TTS即Text To Speech，從文本到語音），該引擎不支持中文，需要用戶自行在應(yīng)用商店中安裝百度語音助手、訊飛語音+，然后在“手機(jī)→設(shè)置→高級設(shè)置→語言和輸入法→文字轉(zhuǎn)語音（TTS）輸出”中選擇為默認(rèn)引擎，這一步在APP無法正常播放中文時(shí)才需要操作。

7） 加速度傳感器

該組件用于檢測手機(jī)搖一搖，本例屬性使用默認(rèn)值。

本例流程為：點(diǎn)擊按鈕——顯示隨機(jī)學(xué)號——手機(jī)震動(dòng)——播報(bào)學(xué)號

代碼非常簡單，畢竟我們的目標(biāo)是讓第一個(gè)APP成功地在手機(jī)上運(yùn)行。點(diǎn)擊按鈕和搖一搖手機(jī)完成相同的動(dòng)作，具體代碼如圖。

App Inventor中的行為是由事件驅(qū)動(dòng)的。所謂事件，就是發(fā)生了某種特殊情況，如某個(gè)按鈕被點(diǎn)擊、手機(jī)接收到一條新的短信等。事件類型有多種，不同組件能響應(yīng)的事件也不盡相同。

當(dāng)事件發(fā)生時(shí)，APP會(huì)調(diào)用一系列過程模塊來做出相應(yīng)的處理。我們把響應(yīng)某個(gè)事件而執(zhí)行的一系列過程模塊稱為事件處理器。事件處理器是App Inventor執(zhí)行的基本入口單元，任何功能模塊代碼都必須包含到某個(gè)事件處理器中才有可能被執(zhí)行。

完成“點(diǎn)名神器”的代碼后，我們需要在手機(jī)上做調(diào)試。App Inventor提供了3種連接調(diào)試方式，推薦AI伴侶方式。

將計(jì)算機(jī)和安卓設(shè)備連接到同一網(wǎng)絡(luò)（相同網(wǎng)段），選擇“幫助→AI伴侶信息”，掃碼安裝Al伴侶，然后使用手機(jī)AI伴侶掃碼“連接→AI伴侶”中的二維碼。這樣代碼中的修改就能實(shí)時(shí)反應(yīng)到手機(jī)中。

調(diào)試完成后，可以打包APK，將APP安裝在手機(jī)中。

至此，我們就初步完成了設(shè)計(jì)、編寫、分發(fā)APP的全部流程，為今后編寫更加復(fù)雜的APP打好了基礎(chǔ)。