行動商務與多媒體應用學系 詹啟祥 辦公室：HB35室 分機：

Presentation on theme: "行動商務與多媒體應用學系 詹啟祥 辦公室：HB35室 分機："— Presentation transcript:

1 行動商務與多媒體應用學系 詹啟祥 辦公室：HB35室 分機：20035 E-mail: CSChan@asia.edu.tw
App Inventor 2 上課大綱 行動商務與多媒體應用學系 詹啟祥 辦公室：HB35室 分機：20035

2 課程概要 第一章、瞭解AI2環境 - 介面設計與程式拼塊 第七章、清單 - Label元件以及Button 元件 - 介紹清單管理
第二章、介面配置元件 - 介紹介面配置元件 - TextBox元件 第三章、常數與變數 - 介紹常數與變數(數值、字串與變數) - Image 元件 第四章、算術與字串運算 - 介紹算術與字串運算 - Slider元件 第五章、比較運算與邏輯運算 - 介紹比較運算與邏輯運算 - CheckBox元件 第六章、條件判斷式 - 介紹條件判斷式if then else - Notifier元件與多Screen切換 第七章、清單 - 介紹清單管理 - Spinner元件 第八章、迴圈 - for and while迴圈 - ListPicker元件

3 第一章 瞭解AI2環境 1. AI2環境介紹 2. 介面設計與程式拼塊 -Label元件、Button 元件

4 1. AI2環境介紹 -建置專題

5 1. AI2環境介紹 -建置專題 APP Inventor 2 是以專案的方式進行，產生專案的方式如下所示:
1.按下 New Project 2.在Project name 內輸入專案名稱 -名稱只能是大小寫的英文、數字、「_」 -名稱的第一個字必須是大小寫的英文 3.按下ok ，產生新的專案

6 1. AI2環境介紹 -介面設計頁面 APP Inventor 2 是在介面設計頁面中，將元件配置到頁面中， 使用的步驟:
1.在元件區拖曳元件至介面設計區 2.在元件屬性區調整細部設定 3.點選Component視窗內的元件，並按下Delete可以進行元件刪除。

7 1. AI2環境介紹 -程式拼塊頁面 1.兩個頁面切換方式，直接按下右上方的「Designer」或「Blocks」進行切換
2.拼塊編輯頁面包含 -內建拼塊 (Built-in)-程式流程所需的程式拼塊 -已建拼塊 (Screen1)-在介面設計頁面建立的元件，會在此建立對應 的元件拼塊。 -拼塊編輯區(Viewer)：各種拼塊拖曳到此區進行程式流程設計 -垃圾筒：將拼塊拖曳到垃圾筒以移除該程式拼塊。

8 1. AI2環境介紹 -模擬器 1.執行aiStarter 2.執行Connect->Emulator產生模擬器

9 1. AI2環境介紹 -實機模擬(WiFi 模式) 1.將實機上的「設定/安全性」內的「未知來源」選項勾選，以安裝非Google Play 的 應用程式 2.將實機上的「設定/開發人員選項」內的「USB除錯模式」選項勾選 3.進入Google Play商店，安裝「MIT AI2 Companion」 。 5.在實機上執行「MIT AI2 Companion」，點選「scan QR code」，並掃描步驟4的QR Code 4.執行AI companion產生QR Code

10 1. AI2環境介紹 -實機上安裝 <<方法一>>
點選「APP(provide QR Code for .apk)」選項，產生 .apk檔的QR Code鏈結，掃描QR Code後會下載並安裝。 <<方法二>> 點選「APP(save.apk to my computer)」選項，產生 .apk檔到電腦內，將.apk檔移到手機內執行安狀。

11 第一章 基本元件 1. AI2環境介紹 2. 介面設計與程式拼塊 -Label元件、Button 元件

12 1.介面設計與程式拼塊 -範例說明 1.程式的目的是「按鈕按下後，在標籤上顯示字串“Hello World!”」 按鈕按下後

13 1.介面設計與程式拼塊 - 範例:介面設計 1.拖曳按鈕(Button)與標籤(Label)至設計頁面。
2.可以更改Properties內的Text，改變顯示的文字

14 1.介面設計與程式拼塊 - 範例:程式拼塊(1/3)
1.介面設計與程式拼塊 - 範例:程式拼塊(1/3) 1.按下Blocks按鈕，進入程式拼塊介面。 2.由於程式的目的是「按鈕按下後，在標籤上顯示字串“Hello World!”」，所以 第一步必須選擇並按下Screen1內的「按鈕」，找到「按下的事件區塊」。 3.將「按下的事件區塊」按下並拖曳到拼塊編輯區。

15 1.介面設計與程式拼塊 - 範例:程式拼塊(2/3)
1.介面設計與程式拼塊 - 範例:程式拼塊(2/3) 4.由於程式的目的是「按鈕按下後，在標籤上顯示字串“Hello World!”」，所以 第二步必須選擇並按下Screen1內的「標籤」，找到「設定標籤文字」。 5.將「設定標籤文字」按下並拖曳到拼塊編輯區。

16 1.介面設計與程式拼塊 - 範例:程式拼塊(3/3)
1.介面設計與程式拼塊 - 範例:程式拼塊(3/3) 6.由於程式的目的是「按鈕按下後，在標籤上顯示字串“Hello World!”」，所以 第三步必須選擇內建拼塊區(Built-in)內的Text，選取「空字串」。 7.將「空字串」按下並拖曳到拼塊編輯區，在空字串上填上“Hello World!” 。

17 2.介面設計與程式拼塊 - 說明 Label元件—用以顯示文字 標籤(Label)的屬性。

18 Button 元件—用於觸發以執行程式片段
2.介面設計與程式拼塊 - 說明 Button 元件—用於觸發以執行程式片段 按鈕(Button)的屬性。

19 2.介面設計與程式拼塊 - 說明 程式拼塊的種類 事件 方法 取得屬性值 設定屬性值

20 3.介面設計與程式拼塊 - 進階練習範例 1.當按下「按我」鈕按後，在標籤上顯示字串“Hello World!”。
3.介面設計與程式拼塊 - 進階練習範例 1.當按下「按我」鈕按後，在標籤上顯示字串“Hello World!”。 2.當按下「紅色」鈕按後，會將顯示文字改為紅色。 當按下「藍色」鈕按後，會將顯示文字改為藍色。 按下「紅色」鈕按 按下「藍色」鈕按