麻 省 理 工 學 院 是 在 西 元 2013 年 12 月 3 日 推 出 MIT App Inventor 2 網 站, 提 供 免 費 的 雲 端 服 務, 使 用 者 可 以 透 過 瀏 覽 器 來 開 發 Android 裝 置 應 用 程 式, 該 網 站 的 網 址 為 : http

資 訊 學 科 中 心 6 月 份 電 子 報 用 MIT App Inventor2 程 式 拼 圖 來 開 發 Android 裝 置 應 用 程 式 李 啟 龍 學 習 Android 裝 置 程 式 設 計, 可 以 不 必 學 習 較 為 艱 澀 的 Java 語 法, 只 要 使 用 拼 圖 模 式 來 組 合 程 式, 就 可 以 完 成 Android 裝 置 的 應 用 程 式 MIT App Inventor 2 網 站 提 供 雲 端 服 務, 讓 我 們 可 以 免 費 使 用 其 提 供 的 強 大 功 能, 來 設 計 Android 裝 置 上 的 App 應 用 程 式, 完 成 作 品 後 還 可 以 上 傳 到 Google Play 商 店, 提 供 給 大 眾 下 載 使 用 喔 本 月 份 的 電 子 報, 我 們 就 來 進 行 用 MIT App Inventor2 程 式 拼 圖, 來 開 發 Android 裝 置 App 程 式 的 相 關 說 明 : MIT App Inventor 2 簡 介 Android 作 業 系 統 是 一 個 以 Linux 為 基 礎 的 開 放 原 始 碼 作 業 系 統, 中 文 俗 稱 為 安 卓, 其 起 源 最 早 是 在 西 元 2003 年 由 安 迪 魯 賓 (Andy Rubin) 所 開 發 製 作, 目 前 由 Google 公 司 成 立 的 開 放 手 持 設 備 聯 盟 Open Handset Alliance(OHA) 來 持 續 開 發 主 導 Android 作 業 系 統 的 應 用 層 面, 最 早 是 由 智 慧 型 手 機 開 始, 後 來 逐 漸 擴 展 到 平 板 電 腦 及 其 他 領 域 上, 在 西 元 2010 年 底,Android 作 業 系 統 成 為 全 球 第 一 大 智 慧 型 手 機 作 業 系 統, 其 市 佔 率 超 過 Apple 公 司 的 ios 作 業 系 統 Google 公 司 在 西 元 2010 年, 為 了 讓 更 多 人 在 沒 有 程 式 基 礎 的 狀 況 下, 能 夠 開 發 Android 裝 置 應 用 程 式, 推 出 Google App Inventor for Android 工 具 軟 體, 讓 使 用 者 可 以 運 用 拼 圖 模 式 來 組 合 程 式 語 法, 進 而 發 展 Android 裝 置 的 應 用 程 式 後 來,Google 公 司 在 西 元 2012 年 將 此 軟 體, 移 轉 給 美 國 麻 省 理 工 學 院 (MIT) 的 行 動 學 習 中 心 (MIT Center for Mobile Learning) 來 維 護, 行 動 學 習 中 心 的 網 址 為 : http://mitmobilelearning.org/, 其 網 站 如 圖 所 示 點 選 其 中 的 MIT's App Inventor site 超 連 結, 會 連 結 到 MIT App Inventor 2 網 站 1

麻 省 理 工 學 院 是 在 西 元 2013 年 12 月 3 日 推 出 MIT App Inventor 2 網 站, 提 供 免 費 的 雲 端 服 務, 使 用 者 可 以 透 過 瀏 覽 器 來 開 發 Android 裝 置 應 用 程 式, 該 網 站 的 網 址 為 : http://appinventor.mit.edu/, 如 圖 所 示 網 站 上 提 供 了 許 多 詳 細 的 教 學 資 源, 來 引 導 使 用 者 進 入 App 應 用 程 式 開 發 的 世 界, 使 用 者 開 發 完 成 的 程 式, 可 以 下 載 到 任 何 使 用 Android 作 業 系 統 的 裝 置, 包 括 : 智 慧 型 手 機 或 平 板 電 腦 在 App 程 式 開 發 過 程 中, 我 們 可 以 使 用 模 擬 器 或 Android 裝 置, 來 測 試 應 用 程 式 執 行 的 狀 況, 待 完 成 相 關 開 發 作 業 後, 更 可 以 將 應 用 程 式, 上 傳 到 Google Play 商 店 提 供 大 眾 下 載 安 裝 2

建 置 App Inventor 2 開 發 環 境 使 用 MIT App Inventor 2 來 開 發 Android 程 式, 其 開 發 動 作 都 是 在 瀏 覽 器 上 完 成, 為 網 路 雲 端 開 發 環 境, 要 建 置 MIT App Inventor 2 的 開 發 環 境, 需 要 進 行 3 項 前 置 作 業 : 1. 申 請 Gmail 帳 號 2. 安 裝 並 測 試 Java 環 境 3. 安 裝 MIT App Inventor 2 軟 體 ( 為 了 以 模 擬 器 或 USB 連 線 來 測 試 程 式 ) 1. 申 請 Gmail 帳 號 要 使 用 MIT App Inventor 2 開 發 Android 程 式, 需 要 擁 有 Gmail 帳 號, 藉 此 來 登 入 開 發 網 站, 申 請 Gmail 帳 號 的 步 驟 如 下 : Step1: 在 瀏 覽 器 的 網 址 列 輸 入 網 址 :http://mail.google.com, 到 達 Gmail 信 箱 的 登 入 頁 面, 接 著 點 選 建 立 帳 戶 按 鈕, 如 圖 所 示 Step2: 接 著 輸 入 要 建 立 的 Google 帳 戶 資 料, 包 括 : 名 稱 使 用 者 名 稱 密 碼 生 日 性 別 等 資 料, 如 圖 所 示 Google 將 所 有 的 產 品 與 服 務 全 部 整 合 到 一 個 帳 戶, 只 要 使 用 一 組 使 用 者 名 稱 與 密 碼 登 入, 就 能 使 用 各 種 豐 富 的 Google 服 務 3

填 寫 資 料 時, 需 將 我 同 意 Google 服 務 條 款 及 隱 私 權 政 策 的 核 取 方 塊 打 勾, 才 能 按 下 下 一 步 按 鈕, 如 圖 所 示 Step3: 設 定 想 要 顯 示 的 資 訊, 此 部 分 的 設 定 就 依 個 人 的 使 用 需 求 來 輸 入, 此 階 段 為 讓 使 用 者 上 傳 大 頭 照, 如 圖 所 示 照 片 上 傳 後, 以 後 仍 然 隨 時 可 更 換 相 片 Step4: 完 成 Gmail 信 箱 的 申 請, 按 下 前 往 Gmail 按 鈕, 即 可 開 始 使 用 Google 帳 戶, 如 圖 所 示 4

第 一 次 成 功 登 入 Gmail 信 箱 的 主 畫 面 如 下, 信 箱 中 會 收 到 Gmail 小 組 寄 來 的 信 件 2. 安 裝 並 測 試 Java 環 境 要 成 功 執 行 MIT App Inventor 2 程 式, 在 電 腦 中 需 要 建 置 Java 環 境 由 於 Java 的 使 用 非 常 普 及, 所 以 在 電 腦 中 往 往 已 經 有 安 裝 過 Java 環 境, 我 們 先 來 測 試 一 下, 目 前 電 腦 是 否 已 經 完 成 Java 的 安 裝, 測 試 步 驟 如 下 : Step1: 在 瀏 覽 器 的 網 址 列 輸 入 網 址 : http://www.java.com/, 連 結 到 Java 首 頁 後, 按 下 其 中 的 我 有 Java 嗎? 超 連 結, 便 會 連 結 到 測 試 網 頁 5

當 然 也 可 以 在 瀏 覽 器 直 接 輸 入 測 試 Java 環 境 的 網 址 : http://www.java.com/zh_tw/download/installed.jsp, 點 選 其 中 的 驗 證 Java 版 本 按 鈕, 以 進 行 Java 版 本 的 測 試, 如 圖 所 示 Step2: 在 驗 證 Java 版 本 的 過 程 中, 由 於 瀏 覽 器 的 安 全 性 設 定, 也 許 會 出 現 授 權 提 示, 如 圖 所 示, 此 時 我 們 要 點 選 執 行 ( 僅 限 這 次 ) 或 永 遠 在 這 個 網 站 上 執 行 都 可 以 Step3: 接 著 出 現 是 否 執 行 應 用 程 式 的 提 示 視 窗, 此 處 我 們 選 擇 執 行 按 鈕, 以 進 行 Java 版 本 的 驗 證 6

Step4: 最 後 出 現 Java 版 本 驗 證 完 成 的 網 頁 MIT App Inventor 2 需 要 在 具 有 Java 6 以 上 的 電 腦 環 境 中 執 行, 請 讀 者 注 意 電 腦 的 Java 版 本 是 否 為 Java 6 以 上 如 果 電 腦 中 並 未 安 裝 Java 6 以 上 的 Java 版 本, 我 們 就 需 要 到 Java 的 首 頁 進 行 免 費 Java 的 下 載, 其 安 裝 步 驟 如 下 : Step1: 在 瀏 覽 器 的 網 址 列 輸 入 網 址 : http://www.java.com/, 連 結 到 Java 首 頁 後, 按 下 其 中 的 免 費 Java 下 載 按 鈕, 便 會 連 結 到 下 載 網 頁 Step2: 此 處 出 現 建 議 下 載 的 Java 版 本, 選 擇 同 意 並 開 始 免 費 下 載 按 鈕, 便 會 下 載 可 安 裝 的 Java 程 式, 執 行 該 程 式 便 可 開 始 安 裝 Java, 如 圖 所 示 如 果 遇 到 安 全 性 警 告, 需 要 選 擇 執 行 按 鈕, 才 能 繼 續 安 裝 7

Step3: 接 著 出 現 歡 迎 使 用 Java 視 窗, 此 處 建 議 使 用 預 設 安 裝 設 定, 所 以 直 接 按 下 安 裝 按 鈕 即 可, 如 圖 所 示 Step4: 最 後 出 現 成 功 安 裝 Java 畫 面, 此 時 按 下 關 閉 按 鈕 即 可 8

3. 安 裝 MIT App Inventor 2 軟 體 完 成 了 Gmail 帳 號 的 申 請 以 及 建 置 了 Java 6 以 上 版 本 的 Java 環 境 之 後, 接 下 來 就 是 安 裝 MIT App Inventor 2 軟 體, 以 便 於 在 沒 有 Android 裝 置 的 情 況 下, 以 模 擬 器 來 測 試 Android 程 式 安 裝 MIT App Inventor 2 軟 體 的 步 驟 如 下 : Step1 : 在 瀏 覽 器 的 網 址 列 輸 入 網 址 : http://appinventor.mit.edu/explore/ai2/windows.html, 到 達 MIT App Inventor 2 的 官 方 下 載 網 頁, 點 選 其 中 的 Download the installer 超 連 結, 如 圖 所 示 Step2: 下 載 的 軟 體 名 稱 為 : AppInventor_Setup_Installer_v_2_2.exe, 緊 接 著 執 行 該 軟 體, 會 出 現 歡 迎 安 裝 的 畫 面, 按 下 Next 按 鈕 以 進 行 軟 體 安 裝 本 書 光 碟 也 有 提 供 AppInventor_Setup_Installer_v_2_2.exe 軟 體 ( 約 92MB), 可 以 直 接 安 裝 使 用 9

Step3: 必 須 同 意 相 關 的 版 權 條 款, 才 能 繼 續 進 行 安 裝 使 用, 此 處 選 擇 I Agree 按 鈕, 以 繼 續 進 行 軟 體 安 裝 Step4: 此 處 要 選 擇 軟 體 的 安 裝 路 徑, 各 位 讀 者 可 以 依 據 自 己 的 需 求 按 下 Browse 按 鈕 更 換 路 徑 ; 如 不 更 換 安 裝 路 徑, 按 下 Next 按 鈕 以 繼 續 安 裝 10

Step5: 選 擇 在 開 始 功 能 表 中 的 資 料 夾 名 稱, 建 議 依 預 設 值 安 裝, 按 下 Install 按 鈕 以 進 行 安 裝 Step6: 順 利 完 成 程 式 的 安 裝, 按 下 Finish 按 鈕 以 結 束 MIT App Inventor 2 軟 體 的 安 裝, 在 程 式 集 裡 會 多 了 aistarter.exe 程 式, 桌 面 也 會 多 了 圖 示 11

我 的 第 一 支 Android 程 式 在 完 成 了 MIT App Inventor 2 開 發 環 境 的 建 置 之 後, 現 在 我 們 將 以 一 個 簡 單 的 例 子, 帶 領 讀 者 來 撰 寫 第 一 支 Android 程 式 使 用 MIT App Inventor 2 來 開 發 Android 裝 置 的 應 用 程 式, 其 整 體 設 計 的 概 念 可 分 為 3 個 階 段, 說 明 如 下 : 階 段 1: 使 用 Design 畫 面 來 設 計 Android 裝 置 的 使 用 者 介 面 階 段 2: 使 用 Blocks Editor 畫 面 來 設 計 程 式 的 控 制 邏 輯 階 段 3: 使 用 Android 裝 置 或 模 擬 器 來 測 試 程 式 的 執 行 開 發 我 的 第 一 支 Android 程 式 的 步 驟 如 下 : Step1: 在 瀏 覽 器 的 網 址 列 輸 入 網 址 : http://appinventor.mit.edu/explore/, 到 達 MIT App Inventor 2 網 站, 按 下 右 上 角 的 Create 按 鈕, 以 建 立 Android 裝 置 的 應 用 程 式 12

Step2: 第 一 次 使 用 MIT App Inventor 網 站 開 發 Android 裝 置 程 式, 需 要 登 入 Google 帳 戶, 請 各 位 讀 者 輸 入 自 己 的 Gmail 信 箱 與 密 碼, 然 後 按 下 登 入 按 鈕, 如 圖 所 示 Step3: 接 著 詢 問 是 否 允 許 MIT App Inventor 2 存 取 這 個 Google 帳 戶, 確 定 是 這 個 帳 戶 就 按 下 Allow 按 鈕, 如 圖 所 示 13

Step4: 成 功 登 入 MIT App Inventor 2 網 站, 出 現 歡 迎 訊 息, 按 下 Continue 按 鈕, 開 始 準 備 進 行 新 專 案 的 設 計 Step5:MIT App Inventor 2 網 站 的 專 案 管 理 畫 面 如 下 圖 所 示, 最 上 方 是 功 能 列 點 選 New Project 按 鈕 來 新 增 一 個 專 案 14

Step6: 輸 入 新 的 專 案 名 稱, 此 處 我 們 輸 入 FirstApp 當 作 第 一 支 Android 程 式 的 名 稱, 然 後 按 下 OK 按 鈕 來 確 認 新 增 專 案 名 稱 Step7: 進 入 FirstApp 專 案 的 設 計 頁 面, 專 案 名 稱 FirstApp 位 於 左 上 角, 此 頁 面 包 含 4 個 區 塊, 各 區 塊 名 稱 如 下 圖 所 示, 由 左 至 右 依 序 為 元 件 區 畫 面 配 置 區 使 用 元 件 區 屬 性 區 Step8: 從 元 件 區 中 用 滑 鼠 左 鍵 拖 曳 一 個 Label 元 件 進 入 畫 面 配 置 區,Label 元 件 的 中 文 名 稱 為 標 籤, 主 要 是 用 於 顯 示 文 字, 如 圖 所 示 15

Step9: 拖 曳 完 Label 元 件 之 後, 在 使 用 元 件 區 中 會 看 到 一 個 Label1 元 件, 點 選 Label1 元 件 後, 可 以 在 屬 性 區 中, 進 行 Label1 元 件 的 屬 性 值 設 定 如 圖 將 Label1 元 件 的 屬 性 值 設 定 如 下 : 屬 性 屬 性 值 BackgroundColor( 背 景 顏 色 ) Yellow FontBold( 文 字 粗 體 ) 勾 選 FontSize( 文 字 大 小 ) 28 Text( 顯 示 文 字 ) 我 的 第 一 支 Android 程 式 TextColor( 文 字 顏 色 ) Red Step10: 剛 剛 設 定 完 成 的 Label1 標 籤, 其 寬 度 比 裝 置 的 螢 幕 寬 度 短, 如 果 想 要 讓 Label1 的 寬 度 與 螢 幕 同 寬, 我 們 可 以 將 Label1 元 件 的 Width 屬 性 設 為 Fill parent, 然 後 按 下 OK 按 鈕, 其 結 果 如 圖 所 示, 我 們 可 以 觀 察 到 Label1 元 件 的 背 景 顏 色 寬 度 與 裝 置 螢 幕 寬 度 相 同 16

Step11: 此 時 我 們 已 經 完 成 了 一 個 非 常 簡 單 的 Android 程 式, 可 以 在 行 動 裝 置 上 顯 示 一 段 文 字, 文 字 內 容 為 我 的 第 一 支 Android 程 式 選 取 執 行 功 能 列 上 的 Project/Save project 選 項, 可 以 將 此 專 案 儲 存 下 來 Step12: 選 取 執 行 功 能 列 上 的 My Projects 選 項, 可 以 發 現 我 們 的 第 一 個 FirstApp 專 案 已 經 被 儲 存 下 來 了, 未 來 如 需 重 新 設 計 編 輯 該 專 案, 只 要 點 選 專 案 名 稱 即 可 17

小 提 示 : 如 果 要 連 到 MIT App Inventor 2 的 開 發 頁 面, 我 們 可 以 直 接 在 瀏 覽 器 的 網 址 列 輸 入 : http://ai2.appinventor.mit.edu/ 至 於 瀏 覽 器 的 選 擇, 當 然 是 優 先 推 薦 Google Chrome 啦! 測 試 執 行 開 發 好 的 程 式 我 們 要 測 試 執 行 開 發 完 成 的 程 式 (Live Testing), 依 據 MIT App Inventor 2 官 方 網 站 的 說 明, 網 址 為 : http://appinventor.mit.edu/explore/ai2/setup.html, 主 要 有 三 種 選 擇 方 式, 說 明 如 下 : 第 1 種 方 式 : 適 用 於 已 經 有 Android 裝 置, 電 腦 與 裝 置 之 間 有 WiFi 連 線, 此 方 式 是 測 試 執 行 App 程 式 最 容 易 的 方 式 第 2 種 方 式 : 適 用 於 沒 有 Android 裝 置, 使 用 模 擬 器 (Emulator) 來 測 試 執 行 App 程 式 第 3 種 方 式 : 適 用 於 已 經 有 Android 裝 置, 但 是 電 腦 與 裝 置 之 間 無 法 使 用 WiFi 連 線, 此 方 式 是 使 用 USB 連 線 來 測 試 執 行 App 程 式 以 下 分 別 說 明 3 種 測 試 執 行 App 程 式 的 方 式 1.WiFi 連 線 方 式 使 用 WiFi 連 線 方 式 並 不 會 把 要 測 試 執 行 的 程 式, 安 裝 到 Android 裝 置 上, 此 方 式 是 使 用 Android 裝 置 來 執 行 程 式 並 顯 示 結 果, 當 連 線 中 斷 時,Android 裝 置 上 的 程 式 就 會 消 失 依 據 MIT App Inventor 2 官 方 網 站 的 說 明,WiFi 連 線 方 式 的 說 明 網 址 為 : 18

http://appinventor.mit.edu/explore/ai2/setup-device-wifi.html, 如 圖 所 示 設 定 WiFi 連 線 方 式 的 步 驟 如 下 : Step1: 下 載 並 安 裝 MIT AI2 Companion App 到 Android 裝 置 上 我 們 可 以 使 用 Android 裝 置 的 QR code 掃 描 程 式 ( 例 如 :Play 商 店 中 的 QR Droid 程 式, 可 自 Play 商 店 中 免 費 下 載 使 用 ), 掃 描 下 圖 的 QR code 來 下 載 MIT AI2 Companion App 程 式, 官 方 網 頁 的 建 議 是 採 用 Play 商 店 下 載 並 安 裝 的 方 式 圖 所 示 安 裝 完 成 後, 會 在 Android 裝 置 上, 看 到 MIT AI2 Companion App 的 圖 示, 如 19

Step 2: 將 電 腦 與 Android 裝 置 連 接 到 同 一 個 WiFi 網 路 基 地 台, 以 藉 由 WiFi 網 路 來 傳 送 資 料 Step 3: 打 開 一 個 準 備 使 用 WiFi 連 線 測 試 的 App Inventor 專 案, 此 處 以 我 們 剛 剛 開 發 的 FirstApp 為 例, 點 選 執 行 功 能 列 上 的 Connect/AI Companion 選 項, 表 示 要 以 WiFi 連 線 的 方 式 來 測 試 App 程 式, 如 圖 所 示 Step 4: 此 時 電 腦 會 出 現 一 個 Connect to Companion 視 窗, 上 面 會 有 QR code 及 編 碼, 如 圖 所 示 20

Step 5: 接 著 執 行 Android 裝 置 上 的 MIT AI2 Companion App 程 式, 使 用 其 scan QR code 按 鈕 來 掃 描 上 圖 的 QR code, 然 後 按 下 connect with code 按 鈕, 就 可 以 直 接 在 Android 裝 置 上 測 試 執 行 程 式 或 者 是 在 文 字 方 塊 內 輸 入 上 圖 的 code, 輸 入 完 按 下 connect with code 按 鈕 即 可 Step 6: 最 後, 在 Android 裝 置 上 會 顯 示 FirstApp 程 式 的 測 試 執 行 結 果, 如 圖 所 示 21

當 測 試 執 行 結 束, 我 們 可 以 點 選 執 行 功 能 列 上 的 Connect/Reset Connection 選 項, 來 終 止 WiFi 連 線 測 試, 如 圖 所 示 2. 模 擬 器 方 式 使 用 模 擬 器 (Emulator) 方 式 來 測 試 執 行 開 發 好 的 程 式, 需 要 在 電 腦 安 裝 MIT App Inventor 2 軟 體 使 用 模 擬 器 來 測 試 執 行 程 式 的 步 驟 如 下 : Step 1: 選 取 執 行 程 式 集 裡 的 aistarter.exe 程 式, 執 行 後 會 出 現 一 個 命 令 視 窗, 當 開 始 使 用 模 擬 器 進 行 測 試 後, 會 在 命 令 視 窗 出 現 相 關 資 訊 22

Step 2: 打 開 一 個 準 備 使 用 模 擬 器 測 試 的 App Inventor 專 案, 此 處 以 我 們 剛 剛 開 發 的 FirstApp 為 例, 點 選 執 行 功 能 列 上 的 Connect/Emulator 選 項, 表 示 要 以 模 擬 器 方 式 來 測 試 App 程 式, 如 圖 所 示 Step 3: 出 現 正 在 嘗 試 連 到 模 擬 器 的 連 接 視 窗 (Connecting ), 並 出 現 模 擬 機 的 開 機 畫 面 如 圖 所 示 此 時 aistarter 命 令 視 窗 也 會 出 現 一 些 運 作 訊 息, 如 圖 所 示 23

Step 4: 當 模 擬 器 成 功 啟 動, 連 接 視 窗 會 出 現 Emulator started 文 字, 請 將 模 擬 機 中 的 綠 色 鎖 向 右 拖 曳 來 解 鎖, 如 果 沒 有 進 行 解 鎖, 程 式 仍 會 繼 續 往 下 執 行, 如 圖 所 示 綠 色 鎖 向 右 拖 曳 完 成 解 鎖 後, 模 擬 機 的 畫 面 如 圖 所 示 24

Step 5: 接 著 連 接 視 窗 會 出 現 Companion started 文 字, 表 示 模 擬 器 已 經 啟 動, 此 時 模 擬 器 的 畫 面 會 出 現 MIT App Inventor 2 畫 面, 如 圖 所 示 Step 6: 最 後, 在 模 擬 器 顯 示 出 FirstApp 程 式 的 執 行 結 果, 如 圖 所 示 25

3.USB 連 線 使 用 USB 連 線 方 式 來 測 試 執 行 開 發 好 的 程 式, 需 要 在 電 腦 安 裝 MIT App Inventor 2 軟 體 使 用 USB 連 線 來 測 試 執 行 程 式 的 步 驟 如 下 : Step 1: 選 取 執 行 程 式 集 裡 的 aistarter.exe 程 式, 執 行 後 會 出 現 一 個 命 令 視 窗, 當 開 始 使 用 模 擬 器 進 行 測 試 後, 會 在 命 令 視 窗 出 現 相 關 資 訊 Step 2: 打 開 一 個 準 備 使 用 USB 連 線 測 試 的 App Inventor 專 案, 此 處 以 我 們 剛 剛 開 發 的 FirstApp 為 例, 點 選 執 行 功 能 列 上 的 Connect/USB 選 項, 表 示 要 以 USB 連 線 方 式 來 測 試 App 程 式, 如 圖 所 示 Step 3: 接 著 連 接 視 窗 會 出 現 嘗 試 透 過 USB 連 線 的 訊 息 (Connecting via USB Cable), 表 示 要 使 用 USB 連 線 來 測 試 執 行 程 式, 因 此 我 們 需 要 勾 選 Android 裝 置 的 USB 偵 錯 模 式 26

小 提 示 : 如 何 打 開 Android 裝 置 的 USB 偵 錯 模 式? 如 果 Android 裝 置 使 用 的 Android 版 本 是 3.2 版 或 更 舊 的 版 本, USB 偵 錯 模 式 的 路 徑 是 在 設 定 / 應 用 程 式 / 開 發, 勾 選 USB 偵 錯, 才 能 在 使 用 USB 連 線 時 測 試 程 式 如 果 Android 版 本 是 4.0 版 或 更 新 的 版 本, USB 偵 錯 模 式 的 路 徑 是 在 設 定 / 開 發 人 員 選 項 此 處 請 特 別 注 意, 如 果 Android 版 本 是 4.2 版 或 更 新 的 版 本, 開 發 人 員 選 項 在 預 設 狀 況 下 是 隱 藏 的, 要 顯 示 開 發 人 員 選 項, 需 要 在 設 定 / 關 於 手 機 / 軟 體 版 本 選 項 上, 連 續 輕 觸 數 下, 以 顯 示 開 發 人 員 選 項 示 Step4: 接 著 連 接 視 窗 會 出 現 USB 已 經 連 線 的 訊 息 (USB Connected), 如 圖 所 Step5: 然 後 連 接 視 窗 會 出 現 Companion started 文 字, 同 時 Android 裝 置 會 顯 示 MIT App Inventor 2, 表 示 已 經 透 過 USB 連 線 的 方 式, 準 備 好 要 執 行 App 程 式 了 27

圖 所 示 Step 6: 最 後, 在 Android 裝 置 上, 顯 示 出 FirstApp 程 式 的 執 行 結 果, 如 28

安 裝 程 式 到 Android 裝 置 先 前 我 們 透 過 WiFi 連 線 或 是 USB 連 線 的 方 式, 將 MIT App Inventor 2 的 程 式, 放 到 Android 裝 置 上 去 測 試 執 行, 此 方 式 並 不 是 真 正 安 裝 App 程 式 到 Android 裝 置 上 要 將 開 發 完 成 的 App 程 式 安 裝 到 Android 裝 置 上, 需 要 將 App 程 式 建 置 成 封 裝 檔 (.apk) 格 式, 然 後 安 裝 到 Android 裝 置 上, 其 步 驟 如 下 : Step1: 在 MIT App Inventor 2 網 站, 打 開 一 個 準 備 安 裝 到 Android 裝 置 的 App Inventor 專 案, 我 們 以 剛 剛 開 發 的 FirstApp 為 例, 點 選 執 行 功 能 列 上 的 Build/App (provide QR code for.apk) 選 項, 可 以 建 置.apk 安 裝 檔, 如 圖 所 示 Step2: 出 現 進 度 視 窗, 顯 示 出 目 前 建 置 的 進 度 Step3: 當 進 度 達 到 100% 後, 會 出 現 這 個 App 程 式 專 屬 的 QR code Step4: 接 下 來 我 們 可 以 使 用 Android 裝 置 的 QR code 掃 描 程 式 ( 例 如 :Play 商 店 中 的 QR Droid 程 式, 可 自 Play 商 店 中 免 費 下 載 使 用 ), 掃 描 上 圖 的 QR code, 掃 描 後 會 連 結 到 一 個 網 頁, 詢 問 是 否 要 保 留 FirstApp.apk, 此 處 我 們 選 擇 確 定 ; 接 著 出 現 是 否 要 安 裝 應 用 程 式 畫 面, 此 處 我 們 選 擇 安 裝 29

Step5: 應 用 程 式 安 裝 完 成 後, 會 在 Android 裝 置 上 出 現 FirstApp 圖 示, 點 選 圖 示 即 會 執 行 此 應 用 程 式, 其 執 行 結 果 如 下 圖, 成 功 完 成 安 裝 App 應 用 程 式 到 Android 裝 置 30

另 一 種 方 式 是 將 封 裝 檔 (.apk) 下 載 到 電 腦 後, 將 檔 案 複 製 到 Android 裝 置, 再 進 行 安 裝 的 動 作, 其 步 驟 如 下 : Step1: 點 選 執 行 功 能 列 上 的 Build/App (save.apk to my computer) 選 項, 如 圖 所 示 Step2: 出 現 進 度 視 窗, 顯 示 出 目 前 建 置 的 進 度 Step3: 當 進 度 達 到 100% 後, 會 下 載 FirstApp.apk 檔 案 到 下 載 資 料 夾 內 Step4: 檢 視 下 載 資 料 夾, 果 然 出 現 FirstApp.apk 封 裝 檔, 我 們 可 以 將 此 封 裝 檔 複 製 到 Android 裝 置, 然 後 再 以 可 以 安 裝 APK 類 型 檔 案 的 應 用 程 式, 來 安 裝 FirstApp.apk Step5: 我 們 可 以 到 Play 商 店 中, 搜 尋 可 以 安 裝 APK 封 裝 檔 的 應 用 程 式, 例 如 : 輸 入 apk installer 來 搜 尋, 選 擇 其 中 一 個 應 用 程 式 下 載 安 裝 後, 就 可 以 進 一 步 安 裝 FirstApp.apk 封 裝 檔 了 在 Play 商 店 中 搜 尋 apk installer 的 結 果 如 圖 所 示, 我 們 選 擇 安 裝 第 一 個 應 用 程 式 31

下 圖 為 打 開 Apk Installer 應 用 程 式 後 的 畫 面, 在 Android 裝 置 中, 找 到 FirstApp.apk 檔 案, 然 後 點 擊 其 圖 示 來 安 裝 應 用 程 式 Step6: 應 用 程 式 安 裝 完 成 後, 會 在 Android 裝 置 上 出 現 FirstApp 圖 示, 點 選 圖 示 即 會 執 行 此 應 用 程 式, 其 執 行 結 果 如 下 圖, 成 功 完 成 安 裝 App 應 用 程 式 32

到 Android 裝 置 使 用 MIT App Inventor 2 網 站 提 供 的 雲 端 服 務, 以 拼 圖 模 式 來 組 合 程 式, 讓 我 們 可 以 免 費 使 用 其 提 供 的 強 大 功 能, 進 而 設 計 Android 裝 置 上 的 App 應 用 程 式, 完 成 作 品 後, 還 可 以 上 傳 到 Google Play 商 店, 提 供 給 廣 大 的 使 用 者 下 載 安 裝, 讓 我 們 動 手 來 開 發 Android 裝 置 上 的 App 應 用 程 式 吧! 拼 圖 塊 程 式 範 例 1: 百 貨 公 司 打 折 App 一 程 式 設 計 目 標 本 範 例 希 望 設 計 一 個 多 段 式 百 貨 公 司 週 年 慶 打 折 程 式 設 計 一 個 文 字 方 塊, 讓 使 用 者 輸 入 在 百 貨 公 司 購 買 的 金 額, 然 後 按 下 計 算 按 鈕,App 經 過 計 算 後, 會 告 訴 使 用 者 打 折 後 的 價 格 為 何 以 下 為 此 App 對 購 買 金 額 的 判 別 規 則 : 消 費 3000 元 以 內, 打 9 折 ; 消 費 3000 ~6000 元, 前 3000 元 打 9 折,3000~6000 元 打 8 折 ; 消 費 6000 元 以 上, 前 3000 元 打 9 折,3000~6000 元 打 8 折, 超 過 6000 元 打 7 折 例 如 : 輸 入 2800, 打 折 後 會 得 到 2520 元 33

如 果 輸 入 4800, 打 折 後 會 得 到 4140 元 如 果 輸 入 7000, 打 折 後 會 得 到 5800 元 二 螢 幕 配 置 圖 例 在 Screen 元 件 上, 布 置 1 個 Label 元 件 1 個 TextBox 元 件 1 個 Button 元 件 34

及 1 個 Notifier 元 件, 如 圖 所 示 三 屬 性 值 設 定 屬 性 值 設 定 表 格 : 元 件 屬 性 屬 性 值 Screen1 Title 超 級 百 貨 公 司 打 折 App Label1 Text 請 輸 入 消 費 金 額 : TextBox1 Hint 清 空 NumbersOnly 勾 選 Button1 Text 計 算 屬 性 值 設 定 後 的 畫 面 如 下 : 四 拼 圖 Blocks 編 輯 Step1: 點 選 Blocks 頁 面 的 Blocks 面 板 內 之 Variables 元 件, 接 著 再 點 選 Blocks 頁 面 的 Viewer 面 板, 選 擇 其 中 的 initialize global name to 拼 圖 塊, 設 定 全 域 變 數 的 初 值 35

此 時 我 們 設 定 2 個 全 域 變 數, 一 個 名 稱 為 Spend_M 代 表 消 費 者 的 消 費 金 額, 另 一 個 名 稱 為 Money 代 表 打 完 折 後 的 總 價, 並 令 這 兩 個 變 數 的 初 始 值 為 0, 如 圖 所 示 Step2: 點 選 Blocks 頁 面 的 Blocks 面 板 內 之 Button1 元 件, 接 著 再 點 選 Blocks 頁 面 的 Viewer 面 板, 選 擇 其 中 的 when Button1.Click do 拼 圖 塊, 設 定 Button1 元 件 被 按 下 時 的 事 件 動 作 Step3: 將 Spend_M 全 域 變 數 的 值 設 定 為 TextBox1 的 Text 值 Step4: 使 用 If Then 拼 圖 塊, 按 下 藍 色 方 塊 後, 從 中 拖 曳 出 2 個 ElseIf 及 1 個 Else 拼 圖 塊, 如 圖 所 示 36

Step5: 依 據 百 貨 公 司 的 打 折 規 則, 先 處 理 消 費 在 3000 元 以 內 的 部 分 此 部 分 的 判 斷, 我 們 使 用 and 運 算 來 處 理, 當 消 費 金 額 確 實 落 在 0~3000 元 之 間 時, 才 去 把 消 費 金 額 打 9 折 ( 乘 以 0.9), 運 算 後 把 金 額 指 定 給 Money 變 數 最 後 使 用 Notifier 元 件 顯 示 出 Money 變 數 的 值, 拼 圖 塊 如 下 所 示 Step6: 接 下 來 處 理 消 費 落 在 3001~6000 元 之 間 的 狀 況 依 據 規 則, 前 3000 元 打 9 折 ( 也 就 是 2700 元 ), 落 在 3000~6000 元 的 部 分 打 8 折 ( 乘 以 0.8), 此 部 分 的 拼 圖 塊 如 下 所 示 Step7: 最 後 來 處 理 消 費 超 過 6000 元 的 狀 況 依 據 規 則, 前 3000 元 打 9 折 ( 也 就 是 2700 元 ), 落 在 3000~6000 元 的 部 分 打 8 折 ( 也 就 是 2400 元 ), 兩 37

部 分 加 起 來 5100 元, 超 過 6000 元 的 部 分 打 7 折 ( 乘 以 0.7), 此 部 分 的 拼 圖 塊 如 下 所 示 Step8: 最 後 是 處 理 特 殊 狀 況 的 部 分, 當 消 費 者 輸 入 負 值 或 其 他 非 正 確 的 文 字, 此 時 會 出 現 警 告 訊 息, 此 部 分 的 拼 圖 塊 如 下 所 示 Step9: 將 Step3~Step8 的 所 有 拼 圖 塊, 都 置 於 when Button1.Click do 拼 圖 塊 之 中, 完 成 此 App 的 設 計 38

拼 圖 塊 程 式 範 例 2: 高 鐵 票 價 查 詢 App 一 程 式 設 計 目 標 本 範 例 希 望 設 計 一 個 高 鐵 票 價 查 詢 程 式, 讓 使 用 者 輸 入 起 始 站 編 號 和 目 的 站 編 號, 然 後 按 下 計 算 按 鈕, 最 後 告 訴 使 用 者 應 該 要 付 多 少 票 價 以 下 為 台 灣 高 鐵 的 票 價 表 : 車 站 台 北 板 橋 桃 園 台 北 -- 45 175 板 橋 45 -- 140 桃 園 175 140 -- 以 下 用 幾 個 輸 入 做 舉 例 : 1. 若 使 用 者 輸 入 起 始 站 為 3, 目 的 站 為 1, 程 式 會 依 據 台 灣 高 鐵 的 票 價 表 計 算 出 票 價 為 175 元 2. 若 使 用 者 輸 入 起 始 站 為 2, 目 的 站 為 2 由 於 起 始 站 和 目 的 站 是 同 一 個, 所 以 會 出 現 錯 誤 訊 息 39

3. 若 使 用 者 輸 入 起 始 站 為 5, 目 的 站 為 1, 由 於 起 始 站 超 過 整 數 1~3 的 範 圍, 所 以 會 出 現 錯 誤 訊 息 二 螢 幕 配 置 圖 例 在 Screen 元 件 上, 布 置 2 個 Label 元 件 2 個 TextBox 元 件 1 個 Button 元 件 及 1 個 Notifier 元 件, 如 圖 所 示 40

三 屬 性 值 設 定 屬 性 值 設 定 表 格 : 元 件 屬 性 屬 性 值 Screen1 Title 高 鐵 票 價 查 詢 App Label1 Text 請 輸 入 起 始 站 位 置 [1: 台 北 2: 板 橋 3: 桃 園 ] TextBox1 Hint 清 空 NumbersOnly 勾 選 Label2 Text 請 輸 入 目 的 站 位 置 [1: 台 北 2: 板 橋 3: 桃 園 ] TextBox2 Hint 清 空 NumbersOnly 勾 選 Button1 Text 計 算 屬 性 值 設 定 後 的 畫 面 如 下 : 四 拼 圖 Blocks 編 輯 41

Step1: 點 選 Blocks 頁 面 的 Blocks 面 板 內 之 Variables 元 件, 接 著 再 點 選 Blocks 頁 面 的 Viewer 面 板, 選 擇 其 中 的 initialize global name to 拼 圖 塊, 設 定 全 域 變 數 的 初 值 此 時 我 們 設 定 2 個 全 域 變 數, 一 個 名 稱 為 Start 代 表 起 始 站, 另 一 個 名 稱 為 End 代 表 目 的 站, 並 令 這 兩 個 變 數 的 初 始 值 為 0, 如 圖 所 示 Step2: 點 選 Blocks 頁 面 的 Blocks 面 板 內 之 Button1 元 件, 接 著 再 點 選 Blocks 頁 面 的 Viewer 面 板, 選 擇 其 中 的 when Button1.Click do 拼 圖 塊, 設 定 Button1 元 件 被 按 下 時 的 事 件 動 作 Step3: 將 Start 全 域 變 數 的 值 設 定 為 TextBox1 的 Text 值, 儲 存 起 始 站 的 資 料, 將 End 全 域 變 數 的 值 設 定 為 TextBox2 的 Text 值, 儲 存 目 的 站 的 資 料 Step4: 使 用 If Then 拼 圖 塊, 按 下 藍 色 方 塊 後, 從 中 拖 曳 出 2 個 ElseIf 及 1 個 Else 拼 圖 塊, 如 圖 所 示 42

Step5: 此 處 我 們 使 用 巢 狀 判 斷 結 構, 外 層 If Then ElseIf Else 判 斷 起 始 站 的 站 別, 內 層 If Then ElseIf Else 判 斷 目 的 站 的 站 別, 依 據 使 用 者 輸 入 的 起 始 站 及 目 的 站 號 碼 來 判 斷 車 價, 最 後 使 用 Notifier 元 件 顯 示 出 該 付 的 費 用 我 們 先 處 理 起 始 站 為 1, 目 的 站 為 2 3 或 其 他 的 狀 況, 拼 圖 塊 如 下 所 示 Step6: 接 著 處 理 起 始 站 為 2, 目 的 站 為 1 3 或 其 他 的 狀 況, 拼 43

圖 塊 如 下 所 示 Step7: 接 著 處 理 起 始 站 為 3, 目 的 站 為 1 2 或 其 他 的 狀 況, 拼 圖 塊 如 下 所 示 Step8: 最 後 是 處 理 特 殊 狀 況 的 部 分, 當 消 費 者 輸 入 其 他 的 內 容 時, 會 出 現 提 示 文 字, 此 部 分 的 拼 圖 塊 如 下 所 示 44

Step9: 將 Step3~Step8 的 所 有 拼 圖 塊, 都 置 於 when Button1.Click do 拼 圖 塊 之 中, 完 成 此 App 的 設 計 45