App Inventor 2體驗 靜宜大學資管系 楊子青

Presentation on theme: "App Inventor 2體驗 靜宜大學資管系 楊子青"— Presentation transcript:

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

2 網頁應用程式(Web App)開發 使用HTML5、CSS及Java Script等網頁技術開發的應用程式 優點
可同時於桌上型或行動設備的瀏覽器中執行 響應式網頁設計(Responsive web design, RWD) 實例及技術 優點 支援不同作業系統與平台的行動設備 開發成本較低 方便快速地部署(無需提交到應用商店) 使用者無須更新即可使用最新版本

3 原生應用程式(Native App)開發 由手機或平板作業系統廠商，自行提供 SDK或 建議的開發方式，例如 優點
iOS App：使用Xcode開發環境撰寫Objective-C或Swift開發，上架到App Store Android App：使用Android Studio(或Eclipse)開發環境撰寫Java，上架到Google Play，或直接執行apk安裝檔 優點 善用手機的特性(如GPS定位、攝影鏡頭、感應器等) 更好的執行速度和使用者體驗、支持離線運作 提供較豐富的圖形和動畫 在應用商店輕易地找到應用及安裝

4 各廠牌智慧型手機市場佔有率

5 智慧型手機作業系統市場佔有率

6 iOS App開發環境：Xcode + Swift程式語言 (資管大三上：iOS APP實務設計 )

7 Android App開發環境：Android Studio + JAVA 程式語言 (資管大二下：行動應用軟體開發)

8 簡易的Android App雲端開發環境： MIT App Inventor (大三通識：創意APP實作)

9 1. 初步使用MIT App Inventor 開啟Google Chrome瀏覽器 進入MIT App Inventor 2官方網站
若需安裝，可連線： 進入MIT App Inventor 2官方網站 用Gmail帳號登入 (或申請一個新帳號)

10 拖曳一個Label，將元件名稱更名為LabelHello

11 自行修改LabelHello屬性 Text(顯示文字)：改為Hello World BackgroundColor(背景顏色)
FontSize(字體大小) TextAlignment(文字對齊方式) TextColor(字體顏色)

12 Setting Up App Inventor 2

13 Option Two: Emulator

14 Option Two: Emulator (1)
Step 1. Install the App Inventor Setup Software 以Windows為例： 下載以下檔案，進行安裝 MIT_Appinventor_Tools_2.3.0.exe

15 Option Two: Emulator (2)
Step 2. Launch aiStarter (Windows & Linux only)

16 Option Two: Emulator (3)
Step 3. Connect to Emulator

17 模擬器執行結果(首次可能需要更新)

18 模擬器更新

19 重新模擬

20 2. Hello Purr! 加入Button元件，命名為ButtonSend Text屬性：空白、Image屬性：上傳kitty.png

21 加入音效 選擇Media群組，加入Sound元件 Source屬性加入meow.mp3

22 加入其他媒體資源 於螢幕右下角Media，上傳lion.jpg及roar.mp3

23 積木組合式程式語言 按Blocks 編輯程式 按Button1時(Click事件) 播出聲音(呼叫Sound1.Play之方法)
切換到模擬器，按圖片

24 完成以下程式碼

25 3. 將APP程式下載至行動裝置(方法1) 產生QR code 下載至行動裝置及進行安裝 (設定→安全性→未知的來源需打勾)

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

27 4. 行動裝置特色體驗 (1) 讓手機震動(Sound1.Vibrate) 0.5秒

28 行動裝置特色體驗 (2) 搖晃行動裝置隨即震動 從Sensors群組，加入AccelerometerSensor元件
AccelerometerSensor.Shaking 搖晃事件