移動(dòng)編程導(dǎo)論第二講課件

移動(dòng)編程導(dǎo)論第2章編程基礎(chǔ)汕頭大學(xué)計(jì)算機(jī)系主要內(nèi)容AppInventor程序結(jié)構(gòu)與程序編寫的主要步驟AppInventor開發(fā)環(huán)境配置編寫第一個(gè)AppInventor程序：會(huì)問(wèn)好的企鵝

AppInventor程序打包AppInventor源代碼的共享AppInventor程序的結(jié)構(gòu)

AppInventor程序設(shè)計(jì)由兩部分組成:程序的組件(用戶界面)程序的行為(程序代碼)AppInventor程序編寫步驟第1步：程序組件設(shè)計(jì)使用AppInventorDesigner選擇應(yīng)用程序所需的組件，設(shè)置組件的屬性，完成程序用戶界面設(shè)計(jì)。第2步：程序代碼設(shè)計(jì)使用AppInventorBlocks

定義組件的行為。第3步：程序運(yùn)行使用emulator運(yùn)行程序或者使用手機(jī)運(yùn)行程序第1步：利用AppInventorDesigner進(jìn)行程序組件（用戶界面）設(shè)計(jì)Palette區(qū)顯示可選擇的組件Viewer區(qū)顯示程序界面的表現(xiàn)形式Components區(qū)顯示已被選中的組件列表Media區(qū)顯示程序可用的多媒體文件Properties區(qū)顯示組件的屬性第2步：利用AppInventorBlocks定義組件的行為

可用于添加程序中的的組件的響應(yīng)事件Workspace區(qū)顯示程序中組件的事件響應(yīng)序列程序運(yùn)行在Designer界面右上角點(diǎn)擊OpenBlocksEditor進(jìn)入此界面AppInventoremulator方法一：選擇Blocks上方的Newemulator點(diǎn)擊Blocks上方的ConnecttoDevices選擇emulator使用模擬器運(yùn)行程序方法二：設(shè)定手機(jī)設(shè)備：應(yīng)用程序/開發(fā)/USB調(diào)試運(yùn)行瀏覽器由校直通車設(shè)置手機(jī)設(shè)備能訪問(wèn)外網(wǎng)點(diǎn)擊窗口上方的Connect菜單，選AICompanion運(yùn)行手機(jī)設(shè)備上的MITAI2Companion215程序點(diǎn)擊“ScanQRCode”掃描計(jì)算機(jī)上的二維碼使手機(jī)通過(guò)WiFi連接到計(jì)算機(jī)第3步：利用emulator或手機(jī)運(yùn)行程序AppInventor開發(fā)環(huán)境配置計(jì)算機(jī)配置安裝AppInventor開發(fā)工具

手機(jī)配置（使用android手機(jī)進(jìn)行調(diào)試）安裝手機(jī)驅(qū)動(dòng)程序?qū)⑹謾C(jī)設(shè)置為程序調(diào)試模式

開發(fā)環(huán)境配置詳細(xì)過(guò)程請(qǐng)見：AppInventor開發(fā)環(huán)境配置編寫你的第一個(gè)AppInventor程序設(shè)計(jì)一個(gè)具有以下功能的手機(jī)程序：顯示企鵝的形象用手撫摸屏幕上的企鵝，企鵝會(huì)和大家打招呼開始使用瀏覽器打開

(按學(xué)號(hào)末位選擇不同的服務(wù)器使用)使用汕頭大學(xué)上網(wǎng)賬號(hào)登錄系統(tǒng)，進(jìn)入AppInventor開發(fā)環(huán)境在界面的右上方，選擇MyProjects進(jìn)入項(xiàng)目管理頁(yè)面在界面的左上方，選擇NewProject，新建一個(gè)項(xiàng)目，并命名為“HelloPenguin”第1步:進(jìn)入Designer界面,進(jìn)行組件設(shè)計(jì)1.1添加一個(gè)Button1.在Palette區(qū)的Basic欄找到Button組件，拖到Viewer區(qū)，得到Buttong13.將Properties區(qū)的Text欄修改文字為“PetMe”Width欄修改為FillParent，Heigth欄改為400可視化的編程方式，拖放式界面…2.在Components區(qū)選中需要修改的組件Button11.2添加聲音和圖像，并在按鈕上顯示企鵝形象把企鵝的照片顯示在按鈕上：

1.下載企鵝照片和聲音文件

2.在Media區(qū)點(diǎn)擊Add,將企鵝的照片和聲音文件添加到項(xiàng)目中

3.選取Button1，然后在Properties區(qū)點(diǎn)擊Image欄，選擇企鵝的照片方便快捷的媒體處理功能…1.3添加聲音控件在Palette區(qū)點(diǎn)擊Media展開該欄，找到Sound組件，將其拖到Viewer區(qū)可以在Viewer下端的Non-visibleComponent區(qū)看到Sound控件點(diǎn)擊Sound控件，在Properties區(qū)找到Source欄，設(shè)置為之前我們已經(jīng)下載的企鵝的聲音文件。方便快捷的媒體處理功能…現(xiàn)在我們得到一個(gè)設(shè)計(jì)好的程序界面…所見即所得…第2步.進(jìn)入Blocks界面，為組件添加行為2.1為Button1創(chuàng)建一個(gè)click事件(觸摸企鵝)1.點(diǎn)擊MyBlocks選項(xiàng)卡2.選擇Buton13.在Button1右方的列表中選擇Button1.Click，并拖曳到右邊空白區(qū)域事件驅(qū)動(dòng)的編程方式…2.2為Button1.Click事件添加響應(yīng)(讓企鵝問(wèn)好)點(diǎn)擊Sound1,選取Sound1.Play并拖曳到Button1.ClickBlock的槽口處，得到以下結(jié)果這樣的含義是：當(dāng)點(diǎn)擊Button1時(shí)，Sound1被播放，發(fā)出“您好，我是企鵝”的聲音。搭積木式的編程方式，不必記住并鍵入指令…第3步.運(yùn)行程序

方法一：通過(guò)模擬器

方法二：通過(guò)手機(jī)方法一：通過(guò)手機(jī)模擬器運(yùn)行程序點(diǎn)擊Blocks編輯器右上方的Newemulator等模擬器初始化完畢（如右圖），點(diǎn)擊Blocks編輯器右上方的Newemulator的ConnectingtoDevice下拉框，選擇一個(gè)emulator使用該的手機(jī)模擬器運(yùn)行程序圖手機(jī)模擬器初始化完畢手機(jī)模擬器，方便程序調(diào)試…方法二：通過(guò)手機(jī)運(yùn)行程序設(shè)定手機(jī)設(shè)備：應(yīng)用程序/開發(fā)/USB調(diào)試運(yùn)行瀏覽器由校直通車設(shè)置手機(jī)設(shè)備能訪問(wèn)外網(wǎng)點(diǎn)擊窗口上方的Connect菜單，選AI……運(yùn)行手機(jī)設(shè)備上的MITAI2Companion215程序點(diǎn)擊“ScanQRCode”按鈕，然后掃描計(jì)算機(jī)上的二維碼使手機(jī)通過(guò)WiFi連接到計(jì)算機(jī)，使用手機(jī)運(yùn)行程序現(xiàn)在我們得到一個(gè)設(shè)計(jì)好的HellPenguin程序…屏幕上顯示一個(gè)企鵝形象點(diǎn)擊企鵝，企鵝說(shuō)：“您好，我是企鵝”圖HelloPenguin程序在模擬器上運(yùn)行第4步.進(jìn)一步改進(jìn)：讓企鵝說(shuō)話的時(shí)候張開口

前面我們完成的程序，企鵝說(shuō)話的時(shí)候是閉著嘴的，能否讓它說(shuō)話的時(shí)候張開口呢？4.1點(diǎn)擊企鵝時(shí)，把企鵝閉嘴的圖片改為企鵝張嘴的圖片

在Button1.Click的代碼中加入實(shí)現(xiàn)以下功能的代碼：將Button1.Image修改為penguin2.jpg，（penguin2.jpg是另一張張著嘴的企鵝圖片）新的問(wèn)題：

實(shí)現(xiàn)企鵝說(shuō)完話閉上嘴。需要在企鵝說(shuō)完話后把張嘴企鵝的圖片（penguin2.jpg）改回原來(lái)閉嘴企鵝的圖片(penguin1.jpg)。但如何知道企鵝說(shuō)完話了呢？4.2引入一個(gè)計(jì)時(shí)裝置：Clock（定時(shí)器）

在程序中加入一個(gè)定時(shí)器，該定時(shí)器可以用來(lái)計(jì)算企鵝說(shuō)話的（3秒），并在企鵝說(shuō)完話后觸發(fā)修改圖片的動(dòng)作。

步驟如下：在Designer的Palette面板的Basic欄中選中Clock，拖曳到Viewer，現(xiàn)在我們得到一個(gè)定時(shí)器Clock1設(shè)置定時(shí)器Clock1的屬性：令TimerInterval的值為3000（3秒后觸發(fā)動(dòng)作）、去掉TimerEnabled的選擇框（程序剛開始的時(shí)候Clock1不在工作狀態(tài)）4.3定義Clock（定時(shí)器）的Timer事件（1）

當(dāng)Clock1開始運(yùn)行的時(shí)候，每隔TimerInterval的時(shí)間（本例子中是3000毫秒，即3秒）就會(huì)運(yùn)行Clock1.Timer事件中的代碼。

Clock1.Timer事件的產(chǎn)生步驟：在Blocks窗口左側(cè)中找到組件Clock1點(diǎn)擊Clock1，找到Clock1.Timer塊并拖曳到右側(cè)空白的工作區(qū)，產(chǎn)生一個(gè)Clock1.Timer事件。

4.3定義Clock(定時(shí)器)的Timer事件（2）

我們可以把企鵝由張嘴狀態(tài)改回原來(lái)閉嘴狀態(tài)的代碼寫在Timer事件中。這樣，經(jīng)過(guò)3秒（說(shuō)話需要的時(shí)間），企鵝就可以閉上嘴了。步驟：在Clock1.Timer中把Button1.Image修改為penguin1.jpg（閉嘴企鵝的圖片）將Clock1.TimerEnabled修改為True（任務(wù)完成，關(guān)閉計(jì)時(shí)功能）圖Clock1.Timer代碼4.3補(bǔ)充原來(lái)點(diǎn)擊企鵝時(shí)的代碼：?jiǎn)?dòng)定時(shí)器

點(diǎn)擊企鵝的時(shí)候（企鵝要開始說(shuō)話了），讓定時(shí)器Clock1開始計(jì)時(shí)：在之前的Button1.Click的中加入這樣一行操作，把Clock1.TimerEnabled修改為True圖補(bǔ)充后的Button1.Click代碼現(xiàn)在我們得到一個(gè)真正張開口打招呼的企鵝通過(guò)改進(jìn)，我們得到更逼真的程序。當(dāng)企鵝沒(méi)有說(shuō)話的時(shí)候是閉著嘴的（圖1），當(dāng)我們點(diǎn)擊屏幕上的企鵝，企鵝的真正地張開嘴說(shuō)話（見圖2）。

圖1沒(méi)有說(shuō)話的企鵝圖2正在說(shuō)話的企鵝第5步.再進(jìn)一步的改進(jìn)：

讓企鵝相應(yīng)手機(jī)甩動(dòng)時(shí)也能問(wèn)好

更神奇的功能：讓企鵝響應(yīng)手機(jī)甩動(dòng)

為了實(shí)現(xiàn)當(dāng)你甩動(dòng)手機(jī)時(shí)，企鵝也能問(wèn)好，我們需要：在組件設(shè)計(jì)器中，在Palette區(qū)點(diǎn)擊Sensors（傳感器）欄找到AccelerometerSensor并將其拖到Viewer區(qū)。在Blocks編輯器中找到AccelerometerSensor1，打開并找到AccelerometerSensor1.Shaking塊，將其拖到右邊空白區(qū)域。按前面編寫B(tài)utton1.Click的方法，將相應(yīng)的塊放入AccelerometerSensor1.Shaking槽中。豐富的功能組件及模塊（包括多種傳感器控制模塊等等）…程序打包你編寫的AppInventor程序會(huì)自動(dòng)保存在網(wǎng)絡(luò)服務(wù)器中。當(dāng)你斷開手機(jī)與計(jì)算機(jī)的連接，程序?qū)⒉粫?huì)保留在你的手機(jī)上。如果你需要把程序下載到你的手機(jī)上，你需要對(duì)程序進(jìn)行打包，并下載到你的電腦或者手機(jī)上。下載步驟：點(diǎn)擊Designer界面左上Build菜單，選擇：a.

App(provideQRcodefor.apk)，則程序安裝到手機(jī)上

b.

App(save.apktomycomputer)，則apk包保存到本地計(jì)算機(jī)源代碼的共享

如果希望把所編寫的AppInventor程序源代碼與其他的程序設(shè)計(jì)人員共享，那應(yīng)該怎么辦呢？打開系統(tǒng)中MyProjects頁(yè)面，選中需要共享的項(xiàng)目；點(diǎn)擊屏幕左上方的Project菜單，得到一個(gè)下拉菜單；在菜單中選擇Exportselectedproject(.aia)tomycomputer，系統(tǒng)將生成一個(gè)擴(kuò)展名為.aia的源代碼文件包并保存到本地計(jì)算機(jī)中。其他的程序設(shè)計(jì)人員得到該源代碼包，點(diǎn)擊Project下拉菜單中的Imp