3 ． 1
認識 MIT App Inventor
1. 進入 AI2 的世界 2. App 開發基本流程 3. 畫面編排簡介
4. 元件與屬性
5. 概念插播： App 運作邏輯
6. 程式設計簡介
進入 AI2 的世界
2
AI2 簡介
1. 豐富的配套元件 2. 瀏覽器上直接編寫
3. 視覺化開發環境 4. 方便發布及使用
包含相機、錄音等模組化的功能
。 不用額外下載軟體，能在任一
臺電腦繼續先前的創作。
與 Scratch 同為 MIT 所開發的
程式設計軟體。 提供模擬器可於電腦上測試，
亦可安裝在 Android 系統的手 機進行使用。
知識快遞
4
▪ 中文譯名：安卓。
▪ Google 開 發 的 手 機 作 業 系 統。
▪ 蘋果公司開發的作業系統。
▪ 搭載於蘋果系列產品。
Android iOS
開啟 AI2 網頁
選擇登入方式：
1. 開啟 AI2 的官方頁面，選擇 Create Apps! （使用 google 登 入）
（ https://appinventor.mit.edu/ ）
2. 使用google帳號
（ http://ai2.appinventor.mit.edu/ ）
3. 輸入專案密碼
（ http://code.Appinventor.mit.edu/login/ ）
App 開發基本流程
6
App 開發基本流程
大致分為下列四步驟：
這三個步驟持續循環
，
直至 app 開發完成。
1. 可選擇新增或匯入既有的專案。
2. AI2 專案檔副檔名為「 .aia 」。
8
想一想，下列哪些 AI2 專案命名是正確的？
1. Happy_birthday 2. thank-you
3. 9527thanks 4. food333
1 、
← 只能使用底線符號 _ 4
← 須為英文字母開頭
3. 專案命名規則：
①只能使用英文字母、數字及底線符號 _
② 第一個字元必須為英文字母
1 0
1. 設計 app 的使用介面。
2. 包含操作畫面的元件規畫、頁面設計等。
設計 app 的功能，以圖形化的方塊撰寫程式。
1 2
1. 確認使用體驗良好與功能是否正常。
2. 可使用手機或以模擬器進行測試。
畫面編排簡介
畫面編排介面說明
1 4
專案名稱
編排畫面所使用的 元件清單
編排畫面的
工作區 列出所有被編排 至畫面的元件
外觀的區域設定元件
上傳額外的 媒體素材 點擊以切換至 畫面編排介面
畫面編排基本操作－操作流程
元件面板挑選元件
拖曳元件至 工作面板
元件清單中選取
要編輯的元件 在元件屬性區 編輯元件的屬性
若畫面安排上 有特殊需求，
可上傳素材
畫面編排基本操作－重新命名元件
1 6
給元件有意義的名稱：
1. 有利於辨別各元件 2. 程式的可讀性更高、
不容易搞混
給元件有意義的名稱：
1. 有利於辨別各元件 2. 程式的可讀性更高、
不容易搞混
元件與屬性
常用元件
1 8
標籤：呈現文字內容。
文字輸入盒：
讓使用者輸入資料，
如註冊會員的帳號密碼 按鈕：使用者與程式互 。 動的觸發元件。
大部分的 app 中，基本功能都是由使用者介面內的
「標籤、文字輸入盒、按鈕」所構成。
屬性
屬性就像是元件的衣服，可以透過更改屬性的值，讓元 件呈現不同外觀。
▪ 常見屬性：背景顏色、字體大小、高度、寬度等。
▪ 不同類型的元件，也可能有不同屬性。
例：標籤、按鈕元件都有文字屬性。
只有按鈕有「顯示互動效果」屬性。
寬度、高度的屬性設定
2 0
AI2 中提供四種不同方式來指定寬高。
自動：隨內容自動調整
。填滿：填滿螢幕，即比例 100% 。
像素：依輸入的像素顯示。
比例：依輸入的比例顯示，在不 同尺寸的螢幕，都會佔據相同比 例空間的畫面。
概念插播
App 運作邏輯
概念插播：
2 2
App 的運作邏輯
▪ App 的運作圍繞在「元件、事件、方法」間的相互關係，大 多數會以改變元件的「屬性」，以呈現改變的結果。
呈現元件的各種性質
（如寬度、高度、背景顏 色）
元件 事件 方法
屬性 結果
程式設計簡介
程式設計介面
2 4
包含撰寫程式所需 使用的方塊
內件方塊：
基本程式積木，主要包 含流程與邏輯控制，以 及變數、文字、數字的 使用。
點擊以切換至 程式設計介面
元件方塊：
依編排至畫面的元件自 動產生可用的程式積木
，每個元件都有專屬於 自己的方塊。
用於存放常用程 式片段，可跨專 案、分頁使用
將程式拖曳至此 可刪除程式方塊 撰寫程式的
工作區域
元件方塊分類
元件方塊：元件可用的程式方塊，共分為三類。
▪ 事件：偵測事件的發生。
▪ 方法：執行動作以作出相對反應。
▪ 屬性：用於修改或取用屬性值，
兩種屬性方塊會成對出現。
取用
修改 取用
修改
3 ． 1 認識 MIT App Inventor 結束
2 6
