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

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

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

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

安裝後執行結果

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

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

使用HorizontalArrangement元件 線上說明： http://www.appinventor.tw/ai2_layout_horizontalarrangement 拖到LabelHello與ButtonSend間，設定屬性

將Button1拖到HorizontalArrangement1裡面

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

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

Hour of Code一小時玩遊戲寫程式 http://hocintw.thealliance.org.tw/3963639511199682356726178296093124324335.html 可先選擇「經典迷宮」

(1) 循序結構

(2) 反覆結構1

反覆結構2

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

(3) 條件結構1

挑戰：條件結構2

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

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

5. 用行動裝置進行實機模擬 http://appinventor.mit.edu/explore/ai2/setup.html

(1) Option Three: Build apps with an Android device and USB Cable http://appinventor.mit.edu/explore/ai2/setup-device-usb.html 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.

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: http://www.htc.com/tw/support/software/htc-sync-manager.aspx On Android 4.2.2 and newer, your device will pop up a screen with the message Allow USB Debugging? Press "OK"

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

(2) Option One: Build apps with an Android device and WiFi Connection http://appinventor.mit.edu/explore/ai2/setup-device-wifi.html 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