3-1 認識 M I T App I nventor
1. App 開發基本流程四步驟：建立專案、畫面編排、程式設計、測試修正。
2. AI2 的設計是以元件、屬性、事件、方法所組成。
(1) 元件：負責畫面構成。
(2) 屬性：呈現元件外觀。
(3) 事件：表示啟動程式條件。
(4) 方法：由程式碼組成的功能。
3-2 App實作①—匯率換算
1. 使用者介面元件中的「標籤、文字輸入盒、按鈕」是 AI2 中最常用到的元件：（如右圖）
(1) 標籤：用於顯示說明文字、內容使用。
(2) 文字輸入盒：提供使用者輸入文字、數字的媒介。
(3) 按鈕：使用者與 app 互動的主要元件。
2. 設計 app 時，可利用模擬器隨時進行測試，避免過程中 有錯誤。
3-3 App實作②—英文學習幫手
1. 設計 app 時採「按鈕圖片化」的設計方式，可增添畫面豐富度與主題性。
2. 編排元件時，利用表格配置元件，可將元件整齊的擺放在指定位置。
3. 文字語音轉換器屬於「非可視元件」，在畫面上不會顯示，但在畫面編排時若有需要使 用到該功能，仍要編排到app 中。
3-4 App實作③—隨身資訊站
1. 編排元件時，利用水平配置元件，可將多個元素並排、也可作為版面區隔讓畫面看起來 較寬敞整齊。
2. 使用「網路瀏覽器元件」可引用外部網站，將網站內容顯示在 app 中。
1 2 3
3
程 式 設 計
第 章
App
第3章 App 程式設計
103
p058-109_ch3.indd 103
p058-109_ch3.indd 103 2020/10/2 下午 04:31:342020/10/2 下午 04:31:34
補充 說明
1 電腦模擬器的安裝與使用
2 1
1. 進入下載頁面
① 前往下載網址：http://appinventor.mit.
edu/explore/ai2/setup-emulator
② 找到紅框處，依據所使用 的電腦系統，進入對應頁 面。
註 此處以 Windows 系統 為例。
1
2. 下載模擬器
① 找到紅框處，點擊下載安 裝檔。
Step1
本機 本機磁碟(D:)
MIT_App_Inve ntor_Tools_2.
3.0_win_setup
下載
1
2
1. 開啟安裝檔
① 點擊開啟下載的安裝檔。
② 跟隨指示進行安裝流程。
模擬器安裝 Step2
A I 2 模擬器安裝與手機測試
104
資訊科技篇p058-109_ch3.indd 104
p058-109_ch3.indd 104 2020/10/2 下午 04:31:362020/10/2 下午 04:31:36
2
1 2. 執行安裝
① 確認安裝位置。
② 點擊 Install，執行安裝程 式。
2
3. 完成安裝
① 點擊 Finish，完成安裝。
2
1
4. 啟動模擬器程式「aiStarter」
① 雙擊執行 aiStarter。
② 跳出執行視窗。
註 使用 AI2 模擬器測試 app 時，aiStarter 須保持啟動 狀態。
完成安裝後，即可打開瀏覽器進入 AI2 專 案頁面，執行app 的測試，執行方式請見 P.80 說明。
若在測試過程中模擬器發生斷線，則必須 點選「重置連線」，關閉模擬器後再重新啟動。
3
程 式 設 計
第 章
App
第3章 App 程式設計
105
p058-109_ch3.indd 105
p058-109_ch3.indd 105 2020/10/2 下午 04:31:362020/10/2 下午 04:31:36
2 在 Android 手機上執行 app
在 AI2 撰寫的 app 除了在模擬器上執行外，也可以 將檔案打包成 apk 檔，傳送到 A ndroid 手機上使用。
2 1
1. 打包 apk 檔案
① 點擊 打包 apk 。 ② 選擇 打包 apk 並顯示二維條碼 。
2 1
2. 手機下載 apk 檔案
① 利用 Android 手機掃描QR Code。
② 下載 apk 檔案到手機中。
2
1
3. 手機安裝 apk 檔案
① 下載完成後，點擊 安裝 開始安裝app。
② 安裝完成後，執行測試。
以二維條碼下載安裝到手機 方法一
106
資訊科技篇p058-109_ch3.indd 106
p058-109_ch3.indd 106 2020/10/2 下午 04:31:372020/10/2 下午 04:31:37
2 1
1. 打包下載 apk 檔案
① 點擊 打包 apk 。 ② 選擇 打包 apk 並下載到電腦 。
本機 本機磁碟(D:)
changeMoney
類型：APK檔案
下載
1
2. 傳送 apk 檔案給手機
① 將 apk 檔案利用 SD 卡、傳輸線、email 等方式傳 輸到Android 系統的手機 中。
1 3. 手機執行 apk 檔案
① 在手機中執行 apk 檔案，
啟動安裝。
2
1
4. 手機安裝 apk 檔案
① 點擊 安裝 開始安裝 app。
② 安裝完成後，執行測試。
下載 apk 檔案傳送到手機 方法二
3
程 式 設 計
第 章
App
第3章 App 程式設計
107
p058-109_ch3.indd 107
p058-109_ch3.indd 107 2020/10/2 下午 04:31:382020/10/2 下午 04:31:38
科技廣角
寫一個改變世界的 App
「運算思維」是指以電腦的邏輯來解決問題的思維，
而當我們真正將運算思維付諸行動、實踐想法，並為生 活帶來影響時，便是進一步達成了「運算行動」。
用 MIT App Inventor 將「運算思維」化成「運算行動」
以 MIT App Inventor 作為實現創意的舞台
運算思維雖然不一定只能從學會程式語言來培養，但學習程式語言卻必定會實 踐運算思維。傳統程式語言的入門難度高，一般人難以享受學習的樂趣，也失去 利用創意解決問題的機會。美國麻省理工學院（ MIT）為此發展出 S cratch 與 A pp I nventor 等圖像化程式語言工具，降低了創作程式的難度，鼓勵使用者透過程式設 計來改變生活。
MIT A pp I nventor 的創始人—美國麻省理工學院教 授哈爾 ˙ 阿伯爾森（ H arold A belson ，西元 1947 ∼）
曾在一場演講中提到：「最重要的點子，就是了解什 麼是值得去創作的。」阿伯爾森認為人們應該要有機 會實踐運算思維，也促成了 MIT A pp I nventor 的誕生。
MIT A pp I nventor 是一個開源軟體（原始碼開放取 用的軟體），任何人都可以用它來開發手機應用程式，
藉此改善生活。 MIT A pp I nventor 以「寫一個改變世 界的手機 app 」作為激勵創作的標語，這句話不僅僅是 一個口號，它也正在世界各地不斷發生著。
Harold Abelson
108
資訊科技篇p058-109_ch3.indd 108
p058-109_ch3.indd 108 2020/10/2 下午 04:31:392020/10/2 下午 04:31:39