MIT App Inventor 2 簡介及 「 HelloPurr 」程式初體驗 靜宜大學資管系 楊子青 2014.2.14.

1. MIT App Inventor 2簡介及「HelloPurr」程式初體驗靜宜大學資管系 楊子青2014.2.14.

2. 行動應用程式 • 隨著智慧型手機和平板電腦等行動裝置的快速普及，帶動行動應用程式(Mobile Application，簡稱App)的不斷開發 • 除了有趣的小遊戲之外，也能提供許多生活相關資訊。 • App目前在電子商務的應用大致分成三類： • (1)透過有趣的應用，以增強品牌的形象與知名度； • (2)將App與社群網站的分享機制結合，達到口碑行銷； • (3)直接讓消費者隨時完成消費行為

3. App開發技術主要分類 • 原生應用程式(Native App)開發 • 網頁應用程式(Web App)開發 • 混合式應用程式(Hybrid App)開發

4. (1) 原生應用程式(Native App)開發 • 由手機或平板作業系統廠商，自行提供 SDK或建議的開發方式，例如 • iOS App：使用 Xcode與Objective-C開發，上架到App Store上 • Android App：使用Eclipse與Java開發，上架到Google Play，或直接執行apk安裝檔 • Windows Store App：使用Visual Studio與C/ C++/ C#/ VB.NET/ HTML5與Java Script開發，上架到Windows Store • 優點 • 善用手機的特性(例如GPS定位、相機攝影鏡頭、感應器等)、更好的執行速度和使用者體驗、支持離線運作、提供較豐富的圖形和動畫、在應用商店輕易地找到應用及安裝； • 缺點 • 開發成本較高、上架時間(應用商店審查程序)較長、使用者須手動下載更新版本、下載應用可能需要付費。

5. (2) 網頁應用程式(Web App)開發 • 使用HTML5、CSS及Java Script等網頁技術開發的應用程式 • 可同時於桌上型或行動設備的瀏覽器中執行 • 優點 • 支援不同作業系統與平台的行動設備、開發成本較低、方便快速地部署(無需提交到應用商店)、使用者無須更新即可使用最新版本 • 缺點 • 需透過網路連線導致速度較慢、無法充分運用手機的特性、開發者較難藉由使用者下載應用而獲利

6. (3) 混合式應用程式(Hybrid App)開發 • 以網頁應用程式開發客戶端程式 • 再透過PhoneGap等框架工具跟行動裝置互動 • 最後包裝上原生應用程式的外殼，上架至應用程式商店。 • 優點 • 較原生應用程式支援較多的平台、適用於應用程式商店、部分支援離線功能； • 缺點 • 仍須上架時間、速度及使用者體驗不如原生應用程式、 相關技術尚未成熟、無法完全支援各種行動裝置。

8. 智慧型手機作業系統

9. 智慧型手機作業系統

10. 主要的Android手機開發平台Eclipse + Java程式語言

11. Android SDK 手機應用程式開發教學http://blog.chinatimes.com/tomsun/archive/2007/11/03/213763.html

12. 1. 初步使用MIT App Inventor • 開啟Google Chrome瀏覽器 • 若需安裝，可連線： http://www.google.com.tw/chrome • 進入MIT App Inventor官方網站，按Create • http://appinventor.mit.edu/ • 用Gmail帳號登入 (或申請一個新帳號)

13. 建立新專案

14. 專案編輯畫面，按Guide線上輔助

15. What is App Inventor • Lets you develop applications for Android phones using a web browser and either a connected phone or emulator. • The servers store your projects. • The App Inventor Designer: select the components for app. • The App Inventor Blocks Editor: assemble program blocks that specify how the components should behave

16. System requirements

17. Setting Up App Inventor 2

18. Option Two: Emulator • http://appinventor.mit.edu/explore/ai2/setup-emulator.html

19. Option Two: Emulator (1) • Step 1. Install the App Inventor Setup Software • 以Windows為例： http://appinventor.mit.edu/explore/ai2/windows.html • 下載以下檔案，進行安裝 AppInventor_Setup_Installer_v_2_2.exe

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

21. Option Two: Emulator (3) • Step 3. Connect to Emulator

22. Option Two: Emulator (4) • Setup complete!

23. 2. Hello World!

24. 加入Textbox元件，可供輸入

25. 加入Button元件 (送出之按鈕)

26. 加入Label元件 (顯示結果)

27. 選Blocks頁籤

28. 程式撰寫，再以模擬器顯示結果

29. 模擬器執行結果

30. 3. Hello Purr! 加入Label元件，填入Text屬性

31. 加入Button元件Text屬性清為空白、Image屬性加入kitty.png加入Button元件Text屬性清為空白、Image屬性加入kitty.png

32. 選Media群組，加入Sound元件Source屬性加入meow.mp3

33. Save後，按Blocks 編輯程式：按Button1時(Click事件)，播出聲音(呼叫Sound1.Play)

34. 以模擬器測試執行結果 (若按圖片沒有聲音，請先reset connection，再重新開啟模擬器)

35. 4. 在手機進行模擬：wifi http://appinventor.mit.edu/explore/ai2/setup.html 條件：撰寫程式之電腦(或NB)，需與手機使用相同wifi

36. Option One: wifi (1) • Step 1. Download and install the MIT AI2 Companion App on your phone.

37. Option One: wifi (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. • Choose "Connect" and "AI Companion" from the top menu:

38. Option One: wifi (3) • Step 3: Open an App Inventor project and connect it to your device. (cont.) • A dialog with a QR code will appear. On your device, launch the MIT App Companion app just as you would do any app. Then click the “Scan QR code” button and scan the code in the App Inventor window:

39. 5. 手機特色1：讓手機震動(Sound1.Vibrate) 0.5秒

40. 手機特色2：搖晃手機加入AccelerometerSensor元件

41. 搖晃手機時(AccelerometerSensor.Shaking)即發聲

42. 6.將APP程式下載至行動裝置(方法1) 產生QR code 下載至行動裝置及進行安裝

43. 將APP程式下載至行動裝置(方法2) 將APP程式轉成apk檔 自行放上網路或將檔案轉存至行動裝置 再進行安裝