Download presentation
Presentation is loading. Please wait.
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(顯示文字)：改為「App好好玩」 BackgroundColor(背景顏色)
FontSize(字體大小) TextColor(字體顏色) Width(寬度)：Fill parent (與母視窗一樣寬) TextAlignment(文字對齊方式)
12
2. Hello Purr! 加入Button元件，命名為ButtonSend Text屬性：空白、Image屬性：上傳kitty.png
13
積木組合式程式語言 按Blocks 編輯程式 按Button1時(Click事件) 播出聲音(呼叫Sound1.Play之方法)
切換到模擬器，按圖片
14
完成以下程式碼
15
3.將APP程式下載至行動裝置(方法1) 產生QR code 下載至行動裝置及進行安裝 (設定→安全性→未知的來源需打勾)
16
備註 可以用Line或掃瞄QR code軟體下載安裝 如果掃瞄後，系統若用Chrome下載，但是直接閃過，可以嘗試：
Android 6以上的裝置，需開放「儲存」權限： 設定→應用程式→Chrome →權限→將「儲存」開啟 把Chrome的所有視窗均關閉
17
將APP程式下載至行動裝置(方法2) 將APP程式轉成apk檔 使用USB連接線連接行動裝置，或是用gmail寄信
方式給自己或朋友，將檔案轉存至行動裝置，再 進行安裝
18
4.加入音效 選擇Media群組，加入Sound元件 Source屬性加入meow.mp3
19
加入其他媒體資源 於螢幕右下角Media，上傳lion.jpg及roar.mp3
20
完成以下程式碼
21
5.測試(Setting Up App Inventor 2)
22
Option Two: Emulator
23
Option Two: Emulator (1)
Step 1. Install the App Inventor Setup Software 以Windows為例： 下載以下檔案，進行安裝 MIT_Appinventor_Tools_2.3.0.exe
24
Option Two: Emulator (2)
Step 2. Launch aiStarter (Windows & Linux only)
25
Option Two: Emulator (3)
Step 3. Connect to Emulator
26
模擬器執行結果(首次可能需要更新)
27
模擬器更新
28
重新模擬
29
6. 行動裝置特色體驗 (1) 讓手機震動(Sound1.Vibrate) 0.5秒
30
行動裝置特色體驗 (2) 搖晃行動裝置隨即震動 從Sensors群組，加入AccelerometerSensor元件
AccelerometerSensor.Shaking 搖晃事件
31
7.用行動裝置進行實機模擬
32
(1) Option Three: Build apps with an Android device and USB Cable
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.
33
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: On Android and newer, your device will pop up a screen with the message Allow USB Debugging? Press "OK"
34
Option Three: Build apps with an Android device and USB Cable
Step 6: Test the connection. 如果尚未開啟aiStarter，且未連接USB線，會出現： 若開啟aiStarter，且順利連接USB線，會出現： 模擬程式 執行結果 到行動裝置
35
(2) Option One: Build apps with an Android device and WiFi Connection
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
Similar presentations
