揮動指尖的魔法：APP 程式設計營MIT App Inventor 2

指導老師： 張啟中 (JohnAxer) johnaxer@mail.dali.tc.edu.tw教學助理： 王暐鈞 (Jin) wang4622@gmail.com營隊時間： 2016-01-25～01-27營隊地點： 國立中興大學附屬高級中學－3F電腦教室

Day 1 大綱

APP 程式開發 Android 架構 App Inventor 介紹開發 APP 前的準備 APP1：第一個 APP 程式－－輸入文字顯示 Tech.1：修改模擬器解析度

2

Day 2 大綱

APP2：溫度轉換器－－攝氏與華氏轉換增加版權宣告與美化程式

Tech.2：交換屏幕畫面顯示次序 APP3-1：定位－－顯示自己所在位置的經緯度使用自己的手機測試 APP安裝 APP 到手機上

3

Day 3 大綱

APP3-2：地圖－－將自己所在位置顯示地圖上 APP4：清單－－點餐系統 APP5：相機－－啟動手機相機拍照 APP6：資料庫－－記錄個人資料欣賞其他開發者的作品

繳交小組或個人作品

4

Day 1

• 2016-01-251. APP 程式開發2. Android 架構3. App Inventor 介紹4. 開發 APP 前的準備5. APP1：第一個 APP 程式－－

輸入文字顯示

6. Tech.1：修改模擬器解析度

5

APP 程式開發

今日行動裝置已很普遍，而目前主要的行動裝置作業系統有：

Android iOS Windows Firefox OS…

如果想要一次開發多種平台的 APP 降低成本，你可以嘗試使用Xamarin 或 PhoneGap。

這次營隊我們要介紹簡單開發 Android APP 的工具－－App Inventor。

6

Android 架構7

App Inventor 介紹

App Inventor 使用圖形化介面以拼圖的方式來寫程式，可以讓任何熟悉或不熟悉程式設計的人來創造基於 Android 作業系統的應用軟體。App Inventor 起先是由 Google 提供的應用軟體，現在由麻省理工學院（MIT）維護及營運。網址： http://ai2.appinventor.mit.edu

8

開發 APP 前的準備

App Inventor 為全雲端的開發環境，所有的動作皆在瀏覽器上完成。在準備開發自己的 APP 前，必須準備好以下東西：1. 你需要一個 Google 帳號（gmail）2. 你的電腦要有 Java 環境驗證 Java 版本3. 下載安裝 App Inventor 工具軟體載點

下載路徑：App Inventor 2 | Explore MIT App Inventor Resources Get Started Setup Instructions Option Two (Emulator) Instructions Instructions for Windows Download the installer

9

101. 你需要一個 Google 帳號

112. 你的電腦要有 Java 環境

3. 下載安裝 App Inventor 軟體12

App Inventor 登入畫面13

網址： http://ai2.appinventor.mit.edu點選 Start new project 輸入專案名稱：One（專案名稱可自行命名）

APP1：第一個 APP 程式－－輸入文字顯示

一開始做一個簡單的按下按鈕後顯示我們輸入的文字的 APP。主要使用元件：

TextBox Button Label

14

15

從左方 Palette 拖曳出 TextBox、Button、Label 元件。並從右方 Properties 設定字體大小、文字等元件屬性。

APP1：Screen1 版面配置

APP1：Screen1 元件動作16

右上角切換到 Blocks 視窗設定元件動作功能，選擇 Button1，拖曳出按鈕點選（Click）動作的拼圖區塊。再選擇 Label1，將標籤（Label1）文字設定成文字輸入欄位（TextBox1）的文字。

APP1：執行第一個 APP 程式

將版面配置及元件動作設定完成後，就可以來執行我們的第一個 APP 囉！首先將安裝好的 App Inventor 工具軟體，啟動當中的 aiStarter 程式。接著從 App Inventor 網頁上方選擇 Connect Emulator 使用模擬器執行程式。首次執行時會出現提示模擬器的 Companion App 需要更新。請更新！更新完後關掉模擬器再重新執行程式。

若有遇到執行模擬器出現無法開啟的狀況，開啟工作管理員將 adb.exe 結束工作，在重新整理 App Inventor。

17

APP1：執行結果

從模擬器中可以看見從 TextBox 輸入的文字，在點選 Button 後，把文字顯示到 Label 上。

18

Tech.1：修改模擬器解析度

模擬器畫面看起來好小… 找到模擬器的安裝路徑：

C:\Program Files (x86)\AppInventor\commands-for-appinventor\run-emulator.bat

右鍵使用編輯器開啟修改（記事本／Notepad++）：將 skin 參數從原本的 HVGA-AppInventor 改成 WVGA800。 或是想換成別的外觀：C:\Program Files (x86)\AppInventor\commands-for-

appinventor\from-Android-SDK\platforms\android-8\skins 當中的任一個資料夾名稱。

19

Tech.1：修改模擬器解析度20

WVGA800 的模擬器外觀。

Day 2

21

• 2016-01-261. APP2：溫度轉換器－－攝氏與華氏轉

換

2. 增加版權宣告與美化程式

3. Tech.2：交換屏幕畫面顯示次序4. APP3-1：定位－－顯示自己所在位置

的經緯度

5. 使用自己的手機測試 APP6. 安裝 APP 到手機上

APP2：溫度轉換器－－攝氏與華氏轉換

製作一個溫度轉換器，能將攝氏溫度轉換成華氏溫度。並且將元件排列整齊。

數學公式：F = 9 / 5 * C + 32主要使用元件：

TableArrangement TextBox Button Label

22

APP2：Screen1 版面配置23

TableArrangement 版面配置可設定行數（Columns）和列數（Rows）讓元件排列整齊。

APP2：Screen1 元件動作24

增加版權宣告與美化程式

辛苦做出的作品要好好宣揚，也要保護好你的努力成果。為我們的程式增加個版權宣告吧。

使用元件：

Notifier

另外準備好一張圖片上傳做為 APP 的背景圖片美化程式。 Media Upload File…

25

APP2：Screen1 版面配置（版權宣告）26

APP2：Screen1 元件動作（版權宣告）27

設定按下關於…按鈕後出現訊息對話框顯示你的版權宣告。

新增華氏轉攝氏遇到的問題

完成攝氏轉華氏溫度轉換後，焉能缺少華氏轉攝氏溫度轉換。因此我們增加一個屏幕畫面 Screen2 讓使用者選擇是要哪種溫度轉換：攝氏轉華氏、華氏轉攝氏。

我們想讓新增的屏幕畫面 Screen2 變成一開始顯示的畫面，但是 App Inventor 沒有功能能簡單地把兩個頁面順序交換。那我們該如何把Screen1 和 Screen2 交換呢？

28

APP2：Screen2 版面配置29

Tech.2：交換屏幕畫面顯示次序 (1/7)

由於 MIT App Inventor 2 尚未有屏幕畫面（Screen）重新命名的功能，使得我們的 APP 畫面執行時永遠是顯示屏幕畫面 Screen1。

這裡我們以手動的方式調整兩個屏幕畫面 Screen1、Screen2 顯示先後順序。

30

Tech.2：交換屏幕畫面顯示次序 (2/7)

首先在 App Inventor 網頁將目前做好含有兩個屏幕畫面（Screen）的程式匯出（export）到電腦上進一步處理。

從 App Inventor 網頁上方選擇Project Export selected project (.aia) to my computer 將專案匯出。範例是匯出 One.aia

31

Tech.2：交換屏幕畫面顯示次序 (3/7)

使用(解)壓縮軟體（WinRAR、7-Zip…）：將剛剛下載的 One.aia 拖曳到解壓縮軟體上，並進入到 src 資料夾的最底部。

此時可見兩個 Screen 各有兩個檔案（總共 4 個），將它們解壓縮出來到桌面。（壓縮軟體先不用關閉，待會還會用到。）

32

Tech.2：交換屏幕畫面顯示次序 (4/7)

將這 4 個檔案重新命名並編輯內容全部取代新名稱。

Screen1 改名成 ScreenX。打開 ScreenX.bky 和 ScreenX.scm，將裡面的 Screen1 字串全部取代成 ScreenX。

Screen2 改名成 Screen1。（將原本第二頁屏幕畫面移到第一頁）

打開 Screen1.bky 和 Screen1.scm，將裡面的 Screen2 字串全部取代成 Screen1。

33

重要！ ！第一頁屏幕畫面一定要命名成 Screen1！

Tech.2：交換屏幕畫面顯示次序 (5/7)

重新將 4 個編輯好的 Screen1 和 ScreenX 檔案拖曳到剛剛尚未關閉的壓縮檔內，並將原本在壓縮檔內的兩個 Screen2 檔案刪除。

34

Tech.2：交換屏幕畫面顯示次序 (6/7)

最後將 One.aia 改名成 Two.aia，使其與原本專案不互相衝突而可以重新匯入（import）專案到 App Inventor。

從 App Inventor 網頁上方選擇Project Import project (.aia) from my computer

35

Tech.2：交換屏幕畫面顯示次序 (7/7)36

最後成功將專案 Two 匯入！把原本在第二頁的溫度轉換按鈕拿到第一頁顯示。

完成華氏轉攝氏

解決屏幕畫面交換問題後，我們將華氏轉攝氏的數學公式完成。

數學公式：C = (5 * F – 160) / 9

37

APP2：交換屏幕畫面後 Screen1（第一頁）38

APP2：交換屏幕畫面後 ScreenX（第二頁）39

APP2：執行結果40

攝氏轉華氏

APP3-1：定位－－顯示自己所在位置的經緯度

透過 GPS 或 wifi 定位手機所在位置顯示出經緯度。主要使用元件：

LocationSensor

41

APP3-1：版面配置42

將 LocationSensor 拖曳至手機畫面中，並且設定定位更新的時間間隔屬性（TimeInterval），單位為毫秒（ms）。

APP3-1：元件動作43

使用自己的手機測試 APP

有些感測器（Sensor）在模擬器上無法使用，因此我們就需要用手機來測試 APP。

這時需要透過無線網路（wifi）連線，另外再到手機上的 Play 商店找到MIT AI2 Companion 安裝。

44

使用自己的手機測試 APP

點選 scan QR code 掃描快速響應矩陣碼，即可將 APP 執行在自己的手機上。

45

安裝 APP 到手機上

當 APP 開發並測試完成時，可以將自己的作品永久安裝到手機上。從 App Inventor 網頁上方選擇：Build App (provide QR code for .apk)，程式編譯過後會出現QR code 提供掃描安裝 APP。

46

• 2016-01-271. APP3-2：地圖－－將自己所在位置顯

示地圖上

2. APP4：清單－－點餐系統3. APP5：相機－－啟動手機相機拍照4. APP6：資料庫－－記錄個人資料5. 欣賞其他開發者的作品

6. 繳交小組或個人作品

Day 3

47

APP3-2：地圖－－將自己所在位置標示地圖上

接續剛剛做的 APP，我們要如何將定位座標標示在地圖上？使用元件：

WebViewer

48

APP3-2：版面配置49

APP3-2：元件動作50

APP3-2：執行結果51

透過 GPS 定位出手機所在位置，並標示在地圖上。

APP4：清單－－點餐系統

你受雇於麥噹噹老闆，要開發一個點餐 APP。你會如何做？主要使用元件：

ListView ListPicker

52

APP4：版面配置53

APP4：元件動作54

APP4：執行結果55

當輸入餐號點餐後，會出現餐點內容名稱提示。簡單的點餐系統完成囉！

APP5：相機－－啟動手機相機拍照

如何利用程式開啟手機上的相機拍照？並選擇手機內的圖片顯示？

主要使用元件：

Camera Image ImagePicker

56

APP5：版面配置57

APP5：元件動作58

APP5：執行結果59

將 APP 執行到手機上，點擊啟動相機按鈕就會開啟手機上的相機程式。點擊選擇圖片按鈕則會顯示手機圖片庫。

APP6：資料庫－－記錄個人資料

若要製作一份個人的通訊錄，你可以用什麼元件做儲存記錄？資料庫。

主要使用元件：

TinyDB ListPicker DatePicker

60

APP6：版面配置61

APP6：元件動作62

暫時沒有使用到的程式碼點選右鍵Disable Block，這段程式碼將不會被執行。

APP6：執行結果63

輸入 ID、姓名和用 DatePicker 元件選擇生日日期後，按下儲存按鈕將資料儲存到資料庫中。按下查詢按鈕則會另外顯示資料庫中的每一筆資料。

欣賞其他開發者的作品64

參考資料

MIT App Inventor 維基百科：App Inventor 高師大附中資訊社 App Inventor 教學網：修改模擬器解析度 YouTube：AI Screen Manipulation App Inventor TW 中文學習網：座標定位GoogleMap 其他資料

Jing 的教學園地：MIT App Inventor 2 App Inventor 2：高中磨課師「基礎程式設計」課程網站

65