應用程式設計
APP Inventor
序言
MakeBlock 號稱「金屬版的樂高積木」，它除了提供多樣化的金屬零件 之外，更強調可以讓使用者動手創造各種不同的造型金屬結構，而它的組成 要素有以下四大部分： 1. 機械結構：鋁合金構件，兼具強度及美觀。 2. 電子電路：使用各種模組式的感測器、馬達及相關的電子零件。 3. 控制系統：利用開放式的 Arduino 硬體平台為基礎控制器，可以整合 電子電路。 4. 程式語言：使用「圖形化」的「拼圖積木」程式。可以降低學習曲線， 提高學習者的動機和興趣。 目前官方也先後推出了一系列的不同應用產品。其中，mBot 機器人是屬 於教學用的重要教具，但是，它目前官方標準版只提供一種組裝方式，使得 想要改造機構或創作的學習者，沒有完整的圖解說明書可以參考，導致學習 者無法利用基本款的 mBot 機器人來完成其他任務，例如：利用 mBot 機器手 臂夾保特瓶、踢足球、相撲、轉頭、打招呼、撿乒乓球，甚至改成兩足行走 機器人。 有鑑於此，i 創機器人實驗室的團隊規劃了半年的時間，從研究動力機械 理論、實作，到機器人的各種「組裝、寫程式到測試」，每一個階段都有新 的發現及驚奇，因此，在這過程中，陸續創作出六個作品及一個官方作品， 並且針對每一個作品撰寫手機 App 程式，來讓讀者除了利用各作品的「擴充 零件」來改造具有功能性的機器人之外，還可以透過手機 App 來操控。其主 要的目的就是為了「拋磚引玉」，希望能與，mBot 機器人領域的同好者分享 這些作品及經驗。 最後，在此特別感謝各位讀者對本著作的支持與愛護，筆者才疏學淺， 有疏漏之處，敬請各位資訊先進不吝指教。
李春雄 (Leech@csu.edu.tw)
2016.9.10
於 正修科技大學 資管系
目
錄
CONTENTS
第一類
Chapter 1
App Inventor 使用者介面設計 1-1
使用者介面設計
1
1-3
輸入方塊元件 （TextBox）
3
1-2
標籤元件 （Label）
1-4
密碼文字方塊元件 （PasswordTextBox）
1-6
複選方塊元件 （CheckBox）
1-5
按鈕元件 （Button）
1-7
對話訊息方塊元件 （Notifier）
1-9
清單選取元件 （ListPicker）
1-8
下拉式元件 （Spinner）
2 4 5 6 7 8 9
1-10 滑桿元件 （Slider）
10
第 1 章術科題庫
12
1-11 顯示圖片元件 （Image） 第 1 章學科題庫
11 13
第二類
Chapter 2
App Inventor 資料運算 2-1
資料運算
1
2-3
算術運算
3
2-2 2-4
指定運算 關係運算
2 4
2-5
邏輯運算
5
2-7
變數運算
7
字串處理
2-6
第 2 章術科題庫
Chapter 3
第 2 章學科題庫
App Inventor 流程控制
6 8 9
3-1
App Inventor 流程控制
1
3-3
選擇結構 （Selection）
3
3-2 3-4
3-5
循序結構 （Sequential） 計數迴圈 （For/Next）
條件迴圈 （Do/Loop）
2 4
第 3 章術科題庫 第 3 章學科題庫
第三類
Chapter 4
App Inventor 清單陣列 4-1
App Inventor 清單陣列
1
4-3
新增一個清單 （make a list ）
3
4-2 4-4
建立一個空清單 （create empty list ） 新增元素到清單 （add items to list ）
4-5
搜尋指定元素在清單位置 （is in list? ）
4-7
判斷清單是否為空 （is list empty?）
4-6
取得清單元素個數 （length of list ）
2 4 5 6 7
目
錄
CONTENTS
從清單中隨機取得任一項目 （pick random item ）
4-8
取得清單的元素 （select list item）
4-9
4-10 新增元素到指定清單位置 （insert list item）
4-11 修改清單指定位置之元素 （replace list item ）
4-12 刪除清單指定位置之元素 （remove list item ） 4-13 結合多個清單元素 （append to list ） 4-14 複製清單全部元素 （copy list ）
4-15 判斷是否為清單格式 （is a list?）
4-16 清單轉換為 CSV 表格中的列 （list to csv row） 第 4 章術科題庫
Chapter 5
第 4 章學科題庫
App Inventor 程序的應用
1 2 3 4 5 6 7 8 9
10 11
5-1
程序（副程式）
1
5-3
不會傳回值的程序（多個參數）
3
5-2 5-4
不傳回值的程序（無參數） 會傳回值的程序
第 5 章術科題庫
2 4
第 5 章學科題庫
第四類
Chapter 6
App Inventor 資料運算 6-1
App Inventor 多媒體元件
1
6-3
相簿功能（ImagePicker 元件）
3
6-2
照相功能（Camera 元件）
2
6-4
聲音功能 （Sound 元件）
1
6-6
錄音功能 （SoundRecorder 元件）
3
6-5 6-7 6-8 6-9
音樂功能 （Player 元件）
拍攝影片功能 （Camcorder 元件）
播放影片功能 （VideoPlayer 元件）
語音轉成文字功能 （SpeechRecognizer 元件）
6-10 文字轉成語音功能 （TextToSpeech 元件） 第 6 章術科題庫
2 4 5 6 7
第 6 章學科題庫
第五類
Chapter 7
App Inventor 動畫基本應用 7-1
動畫的基本概念
1
7-3
App Inventor 2 的 Canvas 畫布
3
7-2 7-4 7-5
App Inventor 2 動畫基本應用 ImageSprite 圖片精靈元件
2
Ball 球形動畫元件
第 7 章術科題庫
Chapter 8
第 7 章學科題庫
App Inventor 手機遊戲 8-1
遊戲設計
1
8-3
App Inventor 2 的亂數拼圖程式
3
8-2 8-4
何謂機率？ 益智遊戲
第 8 章術科題庫 第 8 章學科題庫
2
目
錄
CONTENTS
第六類
Chapter 9
App Inventor 資料庫的基本應用及 結合遊戲
9-1
App Inventor 資料庫
1
9-3
CSV 檔案格式的基本應用
3
9-2
何謂 TinyDB 元件 ?
第 9 章術科題庫 第 9 章學科題庫
2 4
65
第七類
Chapter 10
App Inventor 無線通訊傳輸 10-1 Android 手機控制 MBOT 機器人
1
10-3 撰寫第一支 App Inventor 程式控制 mBot
3
10-2 匯入 mBot 函式庫 機器人
10-4 手機與 MBOT 主機的溝通技術「藍牙通訊 （Bluetooth）」
10-5 藍牙控制 mBot 機器人的走動 第 10 章術科題庫 第 10 章學科題庫
2 4
65
能力指標： 讓學習者學會「數學運算」能力。
第二類
Chapter 2
App Inventor 資料運算 2-1
資料運算
2-3
算術運算
2-2 2-4 2-5 2-6 2-7
指定運算 關係運算 邏輯運算 字串處理 變數運算
本章術科題庫
1. 試題名稱：攝氏轉換成華氏 App
2. 試題名稱：計算一元二次方程式 App
Hi!
App Inventor 應用程式設計
2-1 資料運算 我們都知道電腦處理資料的過程為：輸入 --- 處理 --- 輸出，其中「處理」程 序通常是藉由運算式 (Expression) 來完成。
一 運算式的組成： 運算元 (Operand) 與運算子 (Operator) 。 二 資料運算的分類：
一般而言，「運算元」不是變數就是常數，而運算子則可分為四種： 1. 指定運算 ( 例如：＝ ) 2. 算術運算 ( 例如： +- ×÷…… ) 3. 關係運算 ( 又稱為比較運算子 ) ( 例如： >,< , ＝ …… ) 4. 邏輯運算 ( 例如： AND ,OR , NOT …… ) 此外，在本章節中，還會介紹「字串處理」及「變數運算」。
2-2 指定運算
一 定義：指定「資料」或「運算結果」給某一變數。
二 方法： 從「 = 」指定運算子的右邊開始看，將「右邊」運算式的結果指定給 「左邊」的運算元 ( 亦即變數名稱 ) 。
範例 1 指定「資料」給變數 Sum=55 拼圖程式表示方法：
說明 1. 「設…為」就是「指定運算子」。
2. 將 右 邊 的 數 字 55 指 定 給 左 邊 的「 Sum 」 變 數。 換 言 之， 將
「 Sum 」變數設定為 55 。
2
Chapter 2 App Inventor 資料運算
範例 2 指定「運算結果」給變數 Sum=10+20+30
第一類
拼圖程式表示方法：
第二類
2-3 算術運算
第三類
一 引言：在數學上有四則運算，而在程式語言中也不例外。 三 App Inventor 2 的變數拼圖： 數學拼圖
說明
第五類
取得 0
第四類
二 目的：是指用來處理使用者輸入的「數值資料」。
關係運算 * 註 1
第六類 第七類
算術運算 * 註 2
亂數函數 * 註 3
* 註 1：關係運算子的拼圖，在下一個單元介紹。 * 註 2：算術運算子的拼圖。
3
App Inventor 應用程式設計
拼圖
功能
例子
結果
1
指數
16
2
乘法
40
3
除法
3.333…
4
相除後 取商數
3
5
相除後 取餘數
1
6
加法
42
7
減法
14
說明 在上表中，「加法」與「乘法」都具有「擴充項目圖示」的功能。因此， 它可以依照使用者的需求再進行多個數字的「連加」及「連乘」。
2-4 關係運算
一 功能：用來比較兩個數值的大小。它又可稱為「比較運算式」。
二 運用時機：判斷式中的「條件式」進行比較運算。如下圖所示： 等於 不等於 小於 小於等於 大於 大於等於 4
Chapter 2 App Inventor 資料運算
三 數值比較運算子的拼圖之種類：設 A=10,B=20 。 拼圖
等於
A=B
False
2
不等於
A≠B
True
3
小於
A<B
True
4
小於等於
A<=B
True
5
大於
A>B
False
6
大於等於
A>=B
False
「數值」比較運算子
「字串」比較運算子
第五類
四 分類：「數值比較」運算子與「字串比較」運算子。
第四類
1
第三類
執行結果
第二類
條件式
第一類
功能
第六類 第七類 5
App Inventor 應用程式設計
2-5 邏輯運算 邏輯運算子是由數學家布林 (Boolean) 所發展出來的。
一 功能：運用在「比較複雜」的運算式，它又稱為「布林運算」。
二 適用時機：在「選擇結構」中，「條件式」有兩個 ( 含 ) 以上的條件時。 三 拼圖程式：
第 1 個條件式
邏輯運算
第 2 個條件式
說明 利用「邏輯運算」來結合多個「條件式」，以加強程式的功能 。
四 邏輯運算子的拼圖種類：
邏輯字元
6
邏輯運算子
比較運算子
Chapter 2 App Inventor 資料運算
說明 在「 Logic( 邏輯 ) 」拼塊中的「比較運算子」只有兩種情況：
「Logic」拼塊中的「比較運算子」 「Math」拼塊中的「比較運算子」
第一類 第二類
運算式
1
反
Not A
2
且
A And B
3
或
A Or B
運算結果為 True 的條件
A 必為假 A、B 必須皆真 A、B 中至少一個為真
第五類
意義
第四類
拼圖
第三類
說明 邏輯運算子的拼圖之優先順序權：設 A=5,B=15
第六類 第七類
* 註：以 And 及 Or 最為常用。 7
App Inventor 應用程式設計
2-6 字串處理 在學會「資料運算」之指定運算、算術運算、關係運算及邏輯運算之後，還 有一個非常重要的字串處理指令。其目的用來處理使用者輸入的字串或從輸出結 果來進行字串的處理等功能。 拼圖程式
功能簡易說明 空字串 連接字串 * 註 1 計算字串長度（字數）* 註 2 判斷是否為空字串 * 註 3 字串比較運算 * 註 4 刪除字串中的空白字元 * 註 5 字母轉成大寫或小寫 * 註 6 尋找資料的位置 * 註 7 包括指定字串 * 註 8 分割字串 * 註 9 依照空格來分割字串 * 註 10 取代子字串 * 註 11 取代某一字串 * 註 12
* 註 1：字串連結運算子。 8
Chapter 2 App Inventor 資料運算
2-7 變數運算
一 定義：是指程式在執行的過程中，其「內容」會隨著程式的執行而改變。 三 App Inventor 2 的變數拼圖：
說明
取得變數值 設定變數值
區域性變數
第五類
宣告具有回傳值的
第四類
宣告區域性變數
第三類
宣告全域性變數
第二類
變數拼圖
第一類
二 概念：將「變數」想像成一個「容器」，它是專門用來「儲放資料」的地方。
第六類 第七類 9
術科題庫
Chapter 2
Try it
!
試題編號：APP201
一 試題名稱：攝氏轉換成華氏 App 二 認證時間：20 分鐘 三 試題說明：
1. 請開 APP201. aia 專案，設計「攝氏轉換成華氏 App 」程式。 2. 分析： 輸 入：攝氏 C 處 理： F = (9 / 5) * C + 32 輸 出：華氏 F 3. 請依照「分析」過程完成作答，再封裝成檔 APP201.apk 後，請將 aia 專案檔及 apk 封裝檔皆下載並儲存於 C:\APP 資料夾內。
四 介面設計參考圖： 請依照下列的「手機頁面」來加入「專案所需元件」。 手機頁面設計
10
專案所需元件
e!
on well d
Chapter 2
術科題庫
1. 請在 Screen1 頁面中，將 Title 名稱改為「攝氏轉換成華氏 App 」。 2. 請 依 序 加 入 三 個 HorizontalArrangement ， 分 別 為 HorizontalArrangement1~3 ， 並 且 分 別 設 定 Width 屬 性 為「 Fill parent 」。 3. 在 HorizontalArrangement1 中，加入一個 Label 元件及一個 TextBox 元 件， 先 設 定 Label 元 件 的 Text 屬 性 值 為「 請 輸 入 攝 氏 C ：」， 再 改 變 TextBox 元件的名稱為「 TextBox_C 」，並設定它只能輸入數字 ( 在
NumbersOnly 打勾 ) 。 4. 在 HorizontalArrangement2 中，加入兩個 Label 元件，先設定第一個 Label 元件的 Text 屬性值為「華氏溫度 F ：」，再改變第二個 Label 元 件的名稱為「 Label_F 」，並刪除 Text 屬性的內容。
5. 在 HorizontalArrangement3 中， 加 入 一 個 Button 元 件， 並 設 定 Text 屬性值為「計算」，再將此元件「置中」及改變名稱為「 Button_ Run 」。 提醒
為了讓頁面字體清楚，請考生將本題頁面中的字體大小 (FontSize) 皆設定為 20，並且再
設定為粗（FontBold）。如上圖所示。
六 執行結果參考畫面：
82.4= (9 / 5) * 28 + 32
104 = (9 / 5) * 40 + 32
11
Chapter 2
術科題庫
七 評分項目：
項目
1 頁面上的元件必須要與介面設計參考圖相同
Try it
配分
3
2 輸入攝氏 C 時，只能輸入數字
5
3 按「計算」鈕，可以正確將攝氏轉換成華氏
22
!
實際得分
30
參考程式 1. 宣告變數 拼圖 程式
檔案名稱：APP201.aia
01 02
說明 行號 01：宣告 C 為全域性變數，初值設定為 0，其目的用來記錄使用者輸入 的「攝氏 C」。 行號 02： 宣告 F 為全域性變數，初值設定為 0，其目的用來記錄攝氏 C 轉換 後的「華氏 F」。
12
e!
on well d
Chapter 2
術科題庫
2. 撰寫「攝氏 C 轉換華氏 F 」之程式 拼圖 程式
檔案名稱：APP201.aia
01 02 03 04
說明 行號 01：當「計算」鈕被「按下」時，就會觸發 Click 事件。 行號 02：將使用者輸入的「攝氏 C」指定給變數 C。 行號 03：轉換公式 F = (9 / 5) * C + 32 行號 04：將轉換後的華氏 F 顯示到螢幕上。
13
Chapter 2
學科題庫
Try it
!
1. 請問下列 App Inventor 程式的執行結果為何 ?
（A）ABC
（B）I Love App Inventor
（C）ILoveApp Inventor
（D）I Love App Inventor
2. 請問下列 App Inventor 程式的執行結果為何 ?
（A）ABC
（B）I Love App Inventor
（C）ILoveApp Inventor
14
（D）I Love App Inventor
e!
on well d
Chapter 2
學科題庫
3. 請問下列 App Inventor 程式的執行結果為何 ?
（A）9 （B）10 （C）11 （D）12 4. 請問下列 App Inventor 程式的執行結果為何 ?
（A）17 （B）18 （C）19 （D）20 5. 請問下列 App Inventor 程式的執行結果為何
（A）尚未完整輸入 （B）皆有輸入 （C）true （D）false
15
Chapter 2
學科題庫
Try it
!
6. 請問下列 App Inventor 程式的執行結果為何 ?
（A）true （B）false （C）兩個字串相同 （D）0 7. 程式語言在資料處理時，通常把資料分成那兩類？ （A）小數與整數 （B）區域與全域變數 （C）字元與字串 （D）變數和常數 8. 下列何者會隨著程式的執行而改變其值？ （A）常數 （B）變數 （C）實數 （D）虛數 9. 關於「變數」的敘述，下列何者正確？ （A）想像成一個容器 （B）內容會隨著程式的執行而改變 （C）專門用來儲放資料的地方 （D）以上皆是 10. 有 關「 下列何者有誤？ （A）變數 A 的值會隨 B 改變而改變 （B）「Set…to」是指定運算子 （C）A 與 B 都是變數 （D）A 常數與 B 是變數
16
」 的 敘 述，
MEMO