App Inventor 2基礎概念 靜宜大學資管系 楊子青

Presentation on theme: "App Inventor 2基礎概念 靜宜大學資管系 楊子青"— Presentation transcript:

1 App Inventor 2基礎概念 靜宜大學資管系 楊子青

2 匯出及匯入專案原始檔(.aia)

3 1. 元件與屬性 元件(Components) 元件是由一系列的屬性(Properties)所定義 構成使用者介面
如Button, Label, TextBox, and Canvas… 元件是由一系列的屬性(Properties)所定義 The values stored in the memory slots of each property determine how the component appears.

4 修改屬性，可以改變App的外觀 開啟Hello專案，修改Screen1屬性看看 BackgroundColor (背景顏色)： Orange
Title (螢幕上方文字)：貓咪變變變 ScreenOrientation (螢幕方向)： Landscape Portrait(直式)、Landscape(橫式) AppName (安裝至行動裝置的應用程式名稱)： 貓咪變身 Icon (安裝至行動裝置的圖示)： kitty.png

5 安裝後執行結果

6 調整Button1元件的屬性，以符合螢幕大小
Q：如何讓 按鈕置中？

7 2. 版面配置 Layout 水平排列 水平排列(超過視窗大小時可捲動) 表格排列 垂直排列 垂直排列(超過視窗大小時可捲動)

8 使用HorizontalArrangement元件
線上說明： 拖到LabelHello與ButtonSend間，設定屬性

9 將Button1拖到HorizontalArrangement1裡面

10 3. 回顧：用程式改變屬性 長按貓咪，變成獅子的照片並發出獅吼聲 這四行是程式的 循序結構

11 4. 程式基本流程結構(Flow Control)
There are three basic flow control constructs: Sequential (循序) Conditional or decision (條件) Loop (or iteration) (反覆)

12 Hour of Code一小時玩遊戲寫程式 可先選擇「經典迷宮」

13 (1) 循序結構

14 (2) 反覆結構1

15 反覆結構2

16 挑戰：反覆結構+循序結構

17 (3) 條件結構1

18 挑戰：條件結構2

19 App Inventor 2的條件與反覆結構 Q：如何讓貓咪與 獅子不斷互換？

20 運用程式的條件結構更換圖片聲音

21 5. 用行動裝置進行實機模擬

22 (1) Option Three: Build apps with an Android device and USB Cable
Step 1: Install the App Inventor Setup Software Step 3. Launch aiStarter Step 2: Download and install the MIT AI2 Companion App on your phone.

23 Option Three: Build apps with an Android device and USB Cable
Step 4: Set up your device for USB (Turn USB Debugging ON) 設定→開發人員選項→USB偵錯 勾選 預設「開發人員選項」為隱藏，開啟方式 ： (以HTC為例) 設定→關於→軟體資訊 →更多→建置號碼，連續點擊七下 Step 5: Connect your computer and device, and authenticate if necessary Connect your Android device to the computer using the USB cable - be sure that the device connects as a "mass storage device" (not "media device"). 用USB連接電腦與裝置，如果PC未能找到裝置，需要安裝驅動程式 以HTC為例，可安裝HTC SYNC MANAGER: On Android and newer, your device will pop up a screen with the message Allow USB Debugging? Press "OK"

24 Option Three: Build apps with an Android device and USB Cable
Step 6: Test the connection. 如果尚未開啟aiStarter，且未連接USB線，會出現： 若開啟aiStarter，且順利連接USB線，會出現： 模擬程式 執行結果 到行動裝置

25 (2) Option One: Build apps with an Android device and WiFi Connection
Step 1: Download and install the MIT AI2 Companion App on your phone. (同Option Three的Step 2) Step 2: Connect both your computer and your device to the SAME WiFi Network Step 3: Open an App Inventor project and connect it to your device