從頭開始學App Inventor

白二娃

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

App Inventor是由Google公司開發(fā)的一款在線Android編程工具軟件，目前由麻省理工學院MIT行動學習中心維護，具有如下特點：

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

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

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

4.調試功能：通過AI伴侶進行調試，所有代碼的變更會自動同步到進行調試的手機或者模擬器中，無需重裝應用，就可以看到最新效果。

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

項目開發(fā)=創(chuàng)意構思+屏幕設計+功能設計+測試運行

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

APP開發(fā)=創(chuàng)意構思+組件設計+邏輯設計+連接調試

App Inventor的官網是appinventor.mit.edu，因為在國外時常無法正常登錄。我們可以登錄并注冊廣州市電化教育館提供的中文版App Inventor（http：//app.gzjkw.net/）。

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

切換到“邏輯設計”視圖，“模塊”欄列出了所有內置塊和該屏幕中所有組件?！八夭摹睓诳捎糜谥苯由蟼魉夭奈募??！肮ぷ髅姘濉闭紦?jù)了大部分空間，其左下角顯示的是當前項目中出現(xiàn)的錯誤或者警告?zhèn)€數(shù);右上方是一個書包，可以實現(xiàn)多個屏幕之間的代碼復制;右下方是一個垃圾桶，可以把不要的積木塊放進去，從而實現(xiàn)刪除功能。

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

三、 做個點名神器APP

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

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

1） 新建項目

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

2） 選擇組件

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

Screen（屏幕），1個（默認）。

按鈕，2個。

音效，1個。

文本語音轉換器，1個。

加速度傳感器，1個。

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

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

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

3） 設置Screen組件屬性

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

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

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

4） 設置按鈕組件屬性

按鈕可以感知用戶的觸摸。從“用戶屏幕”組件欄中拖放兩個“按鈕”組件到Screen1中，用于響應用戶點擊事件和學號的顯示。

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

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

按鈕屬性中并沒有對按鈕本身設置對齊方式，但是兩個按鈕組件卻居于屏幕的中間。這是因為在Screen1的“水平對齊”屬性設置為“居中”。組件的對齊方式是由它的父容器所決定的。所謂父容器，就是它所被安放進的組件。本例中，Screen1 就是該按鈕組件的父容器。

5） 音效

音效組件是一種多媒體組件，可以播放聲音文件，也可以讓手機產生震動。本例中，組件屬 性使用默認值。

6） 文本語音轉換器

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

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

7） 加速度傳感器

該組件用于檢測手機搖一搖，本例屬性使用默認值。

本例流程為：點擊按鈕——顯示隨機學號——手機震動——播報學號

代碼非常簡單，畢竟我們的目標是讓第一個APP成功地在手機上運行。點擊按鈕和搖一搖手機完成相同的動作，具體代碼如圖。

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

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

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

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

調試完成后，可以打包APK，將APP安裝在手機中。

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