MIT App Inventor 2 (AI2) 體驗

Presentation on theme: "MIT App Inventor 2 (AI2) 體驗"— Presentation transcript:

1 MIT App Inventor 2 (AI2) 體驗
靜宜大學資管系 楊子青

2 目錄 1. 初步使用AI2 2. 安裝至Android行動裝置實測 3. 安裝雷電模擬器進行模擬 4. 加入音效 5. 行動裝置特色體驗

3 進入MIT App Inventor 2官方網站
1. 初步使用AI2 開啟Google Chrome瀏覽器 若需安裝，可連線： 進入MIT App Inventor 2官方網站 用Gmail帳號登入 建立一個新專案(Projects→Start new project) 輸入專案名稱 (英文字母開頭，例如Hello)

4 介面設計 加入Button元件，命名為ButtonSend 加入Label元件，命名為LabelMsg Text屬性：空白
Image屬性：上傳kitty.png 加入Label元件，命名為LabelMsg Text屬性：Hello World

5 積木組合式程式

6 2. 安裝至Android行動裝置實測 產生QR code 下載至行動裝置及進行安裝 (設定→安全性→未知的來源需打勾)

7 可以用Line或掃瞄QR code軟體下載安裝 如果掃描後，系統若用Chrome下載，但是直接閃過，可以嘗試：
Android 6以上的裝置，需開放「儲存」權限： 設定→應用程式→Chrome →權限→將「儲存」開啟 把Chrome的所有視窗均關閉

8 (方法2) 安裝apk檔 將APP程式轉成apk檔 使用USB連接線連接行動裝置，或是用gmail寄信
方式給自己或朋友，將檔案轉存至行動裝置，再 進行安裝

9 3. 安裝雷電模擬器進行模擬 (1)下載安裝：App Inventor 2 Setup on Windows，並開啟aiStarter
aiStarter若需關閉，請盡量使用 CTRL-C aiStarter開啟方式：開始→MIT App Inventor Tools→aiStarter (2)下載安裝：雷電模擬器 (3)於雷電模擬器，安裝MIT AI2 Companion App (Step 2)

10 使用雷電模擬器進行模擬 回到App Inventor 2開發環境 Connect→Emulator進行模擬測試 短按/長按圖片，文字會有變化

11 4. 加入音效 選擇Media群組，加入Sound元件 Source屬性加入meow.mp3 擴充程式碼後，短按測試，會有貓咪叫聲：

12 上傳其他媒體資源 於螢幕右下角upload file，上傳lion.jpg及roar.mp3

13 5. 行動裝置特色體驗 (1) 搖晃行動裝置，換成獅子圖片與聲音 從Sensors群組，加入AccelerometerSensor元件
AccelerometerSensor.Shaking 搖晃事件

14 雷電模擬器模擬搖晃手機

15 行動裝置特色體驗 (2) 讓手機震動(Sound1.Vibrate) 0.5秒 需要在行動裝置測試，才能感覺到震動

16 行動裝置還有哪些不同於PC或NB的特性？
Thinking Thinking 行動裝置還有哪些不同於PC或NB的特性？