了解AI2环境-介面设计与程式拼块.PPT

* App Inventor 2 上課大綱 行動商務與多媒體應用學系 詹啟祥 辦公室：HB35室 分機：20035 E-mail: CSChan@asia.edu.tw * 課程概要 第一章、瞭解AI2環境 - 介面設計與程式拼塊 - Label元件以及Button 元件 第二章、介面配置元件 - 介紹介面配置元件 - TextBox元件 第三章、常數與變數 - 介紹常數與變數(數值、字串與變數) - Image 元件 第四章、算術與字串運算 - 介紹算術與字串運算 - Slider元件 第五章、比較運算與邏輯運算 - 介紹比較運算與邏輯運算 - CheckBox元件 第六章、條件判斷式 - 介紹條件判斷式if then else - Notifier元件與多Screen切換 第七章、清單 - 介紹清單管理 - Spinner元件 第八章、迴圈 - for and while迴圈 - ListPicker元件 * 第一章 瞭解AI2環境 1. AI2環境介紹 2. 介面設計與程式拼塊 -Label元件、Button 元件 * 1. AI2環境介紹-建置專題 * 1. AI2環境介紹-建置專題 APP Inventor 2 是以專案的方式進行，產生專案的方式如下所示: 1.按下 New Project 2.在Project name 內輸入專案名稱 -名稱只能是大小寫的英文、數字、「_」 -名稱的第一個字必須是大小寫的英文 3.按下ok ，產生新的專案 * 1. AI2環境介紹-介面設計頁面 APP Inventor 2 是在介面設計頁面中，將元件配置到頁面中， 使用的步驟: 1.在元件區拖曳元件至介面設計區 2.在元件屬性區調整細部設定 3.點選Component視窗內的元件，並按下Delete可以進行元件刪除。 * 1. AI2環境介紹-程式拼塊頁面 1.兩個頁面切換方式，直接按下右上方的「Designer」或「Blocks」進行切換 2.拼塊編輯頁面包含 -內建拼塊 (Built-in)-程式流程所需的程式拼塊 -已建拼塊 (Screen1)-在介面設計頁面建立的元件，會在此建立對應 的元件拼塊。 -拼塊編輯區(Viewer)：各種拼塊拖曳到此區進行程式流程設計 -垃圾筒：將拼塊拖曳到垃圾筒以移除該程式拼塊。 * 1. AI2環境介紹-模擬器 1.執行aiStarter 2.執行Connect-Emulator產生模擬器 * 1. AI2環境介紹-實機模擬(WiFi 模式) 1.將實機上的「設定/安全性」內的「未知來源」選項勾選，以安裝非Google Play 的 應用程式 2.將實機上的「設定/開發人員選項」內的「USB除錯模式」選項勾選 3.進入Google Play商店，安裝「MIT AI2 Companion」 。 4.執行AI companion產生QR Code 5.在實機上執行「MIT AI2 Companion」，點選「scan QR code」，並掃描步驟4的QR Code * 1. AI2環境介紹-實機上安裝 方法一 點選「APP(provide QR Code for .apk)」選項，產生 .apk檔的QR Code鏈結，掃描QR Code後會下載並安裝。 方法二 點選「APP(save.apk to my computer)」選項，產生 .apk檔到電腦內，將.apk檔移到手機內執行安狀。 * 第一章 基本元件 1. AI2環境介紹 2. 介面設計與程式拼塊 -Label元件、Button 元件 * 1.介面設計與程式拼塊-範例說明 1.程式的目的是「按鈕按下後，在標籤上顯示字串“Hello World!”」 按鈕按下後 * 1.介面設計與程式拼塊- 範例:介面設計 1.拖曳按鈕(Button)與標籤(Label)至設計頁面。 2.可以更改Properties內的Text，改變顯示的文字 * 1.介面設計與程式拼塊 - 範例:程式拼塊(1/3) 1.按下Blocks按鈕，進入程式拼塊介面。 2.由於程式的目的是「按鈕按下後，在標籤上顯示字串“Hello World!”」，所以 第一步必須選擇並按下Screen1內的「按鈕」，找到「按下的事件區塊」。 3.將「按