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

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

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

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

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

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

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

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

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

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

自行修改LabelHello屬性 Text(顯示文字)：改為「App好好玩」 BackgroundColor(背景顏色) FontSize(字體大小) TextColor(字體顏色) Width(寬度)：Fill parent (與母視窗一樣寬) TextAlignment(文字對齊方式)

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

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

完成以下程式碼

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

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

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

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

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

完成以下程式碼

5.測試(Setting Up App Inventor 2)

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

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

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

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

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

模擬器更新

重新模擬

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

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

7.用行動裝置進行實機模擬 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