移動編程導論第二講課件

移動編程導論第2章編程基礎汕頭大學計算機系主要內(nèi)容AppInventor程序結構與程序編寫的主要步驟AppInventor開發(fā)環(huán)境配置編寫第一個AppInventor程序：會問好的企鵝

AppInventor程序打包AppInventor源代碼的共享AppInventor程序的結構

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

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

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

手機配置（使用android手機進行調(diào)試）安裝手機驅(qū)動程序?qū)⑹謾C設置為程序調(diào)試模式

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

(按學號末位選擇不同的服務器使用)使用汕頭大學上網(wǎng)賬號登錄系統(tǒng)，進入AppInventor開發(fā)環(huán)境在界面的右上方，選擇MyProjects進入項目管理頁面在界面的左上方，選擇NewProject，新建一個項目，并命名為“HelloPenguin”第1步:進入Designer界面,進行組件設計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ū)點擊Add,將企鵝的照片和聲音文件添加到項目中

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

方法一：通過模擬器

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

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

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

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

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

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

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

Clock1.Timer事件的產(chǎn)生步驟：在Blocks窗口左側(cè)中找到組件Clock1點擊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（任務完成，關閉計時功能）圖Clock1.Timer代碼4.3補充原來點擊企鵝時的代碼：啟動定時器

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

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

讓企鵝相應手機甩動時也能問好

更神奇的功能：讓企鵝響應手機甩動

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

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

b.

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

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