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

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

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ǎng)點(diǎn)擊窗口上方的Connect菜單，選AICompanion運(yùn)行手機(jī)設(shè)備上的MITAI2Companion215程序點(diǎn)擊“ScanQRCode”掃描計(jì)算機(jī)上的二維碼使手機(jī)通過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ū)動程序?qū)⑹謾C(jī)設(shè)置為程序調(diào)試模式

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

(按學(xué)號末位選擇不同的服務(wù)器使用)使用汕頭大學(xué)上網(wǎng)賬號登錄系統(tǒng)，進(jìn)入AppInventor開發(fā)環(huán)境在界面的右上方，選擇MyProjects進(jìn)入項(xiàng)目管理頁面在界面的左上方，選擇NewProject，新建一個項(xiàng)目，并命名為“HelloPenguin”第1步:進(jìn)入Designer界面,進(jìn)行組件設(shè)計(jì)1.1添加一個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)在我們得到一個設(shè)計(jì)好的程序界面…所見即所得…第2步.進(jìn)入Blocks界面，為組件添加行為2.1為Button1創(chuàng)建一個click事件(觸摸企鵝)1.點(diǎn)擊MyBlocks選項(xiàng)卡2.選擇Buton13.在Button1右方的列表中選擇Button1.Click，并拖曳到右邊空白區(qū)域事件驅(qū)動的編程方式…2.2為Button1.Click事件添加響應(yīng)(讓企鵝問好)點(diǎn)擊Sound1,選取Sound1.Play并拖曳到Button1.ClickBlock的槽口處，得到以下結(jié)果這樣的含義是：當(dāng)點(diǎn)擊Button1時，Sound1被播放，發(fā)出“您好，我是企鵝”的聲音。搭積木式的編程方式，不必記住并鍵入指令…第3步.運(yùn)行程序

方法一：通過模擬器

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

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

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

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

在程序中加入一個定時器，該定時器可以用來計(jì)算企鵝說話的（3秒），并在企鵝說完話后觸發(fā)修改圖片的動作。

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

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

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

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

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

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

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

讓企鵝相應(yīng)手機(jī)甩動時也能問好

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

為了實(shí)現(xiàn)當(dāng)你甩動手機(jī)時，企鵝也能問好，我們需要：在組件設(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程序會自動保存在網(wǎng)絡(luò)服務(wù)器中。當(dāng)你斷開手機(jī)與計(jì)算機(jī)的連接，程序?qū)⒉粫Ａ粼谀愕氖謾C(jī)上。如果你需要把程序下載到你的手機(jī)上，你需要對程序進(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頁面，選中需要共享的項(xiàng)目；點(diǎn)擊屏幕左上方的Project菜單，得到一個下拉菜單；在菜單中選擇Exportselectedproject(.aia)tomycomputer，系統(tǒng)將生成一個擴(kuò)展名為.aia的源代碼文件包并保存到本地計(jì)算機(jī)中。其他的程序設(shè)計(jì)人員得到該源代碼包，點(diǎn)擊Project下拉菜單中的Imp