前言

MIT App Inventor 為一個透過視覺化圖形介面來設計行動應用服務的工具，目前主要為 MIT 麻省理工學院進行維護。

在 App Inventor 使用者可以透過瀏覽器編輯器中拖拉積木和 GUI 圖形化介面的方式來開發 Android App 而不用撰寫 Java 或是 Kotlin 程式碼（跟 Scratch Blocks Editor 使用上頗為類似，只是 App Inventor 比較聚焦在 Android 行動應用程式的開發上）。對於一些需要快速驗證點子（例如：IoT 應用串接 POC 等）或是比較不熟程式語言的使用者來說，不失為訓練邏輯思考和熟悉行動應用開發的一方便工具。

本文將透過一個 BMI 手機應用程式來介紹 App Inventor 的使用和開發方式（雖然上架到 Google Play 過程省略，但實際上 App Inventor 製作的 Android App 和使用一般程式語言撰寫的 App 一樣都可以上架和在手機上透過 .apk 檔案直接使用。目前支援 iOS 主要還在測試階段）。

App Inventor 開發環境介紹

首先，我們進入 MIT App Inventor 網頁後點選 Create App 按鈕，就會導到 Google 登入畫面，使用 Google 帳號登入後就會到專案編輯頁面（第一次登入會需要點選 Terms of Service），這是主要編輯應用程式的地方。

若你希望使用中文介面可以在右上角點選語言下拉式選單設定。

接著點選 MyProjects 我的專案 -> 新增專案（Start new Project）新增一個 Project，命名為 BMI_Demo_App。

右上角可以點選使用者介面或是程式設計分頁：

可以在 screen 調整佈景主題：

製作使用者介面

在開始製作我們的使用者介面之前我們先規劃我們整個 App 的功能，整個應用程式流程如下：

1. 提供輸入框讓使用者可以輸入其身高（m）、體重（kg）
2. 點擊馬上計算按鈕後計算 BMI 指數
3. 顯示結果於畫面上

設計基本 mockup 草圖：

接著我們使用拖曳的方式建立兩個輸入框（標籤和輸入框在水平介面配置中）和一個按鈕及一個文字顯示區塊，注意輸入勾選僅限數字：

BMI 公式：BMI = 體重(公斤) / 身高^2(公尺2)

BMI 判斷邏輯如下：

1. 當 BMI 值小於 18.5：體重過輕囉，多吃點！
2. 當 BMI 值大於等於 18.5 且小於 24：體重剛剛好，繼續保持！
3. 當 BMI 值大於等於 24：體重有點過重囉，少吃多運動！

我們使用虛擬碼（Pseudocode）的方式進行：

宣告 height 變數，初始值為 0
宣告 weight 變數，初始值為 0
宣告 bmi_value 變數，初始值為 0
宣告 bmi_result 變數，初始值為 ''

當使用者點擊馬上計算按鈕時判斷若 height 且 weight 皆非零：
    bmi_value = weight / height ^ 2
    1. 當 BMI 值小於 18.5：bmi_result 顯示體重過輕囉，多吃點！
    2. 當 BMI 值大於等於 18.5 且小於 24：bmi_result 顯示體重剛剛好，繼續保持！
    3. 當 BMI 值大於等於 24：bmi_result 顯示體重有點過重囉，少吃多運動！
否則 bmi_result 印出：請輸入正確數值！

實作程式功能

在開始實作之前需要先認一下 App Inventor 撰寫程式的方式。App Inventor 和一般程式語言的概念類似都有變數、邏輯運算、字串、整數、清單（類似 array、list）、字典（dict）、函式、條件控制和迴圈的概念，差異主要在於 App Inventor 是使用 block 拖曳積木方式來進行。

其中內建方塊和使用者介面元件之間的互動是驅動 App 執行的重要關鍵。

內建方塊主要有：

1. 流程控制：if...else、for、while 迴圈
2. 邏輯：and、or 等邏輯判斷
3. 數學：數值相關比較
4. 文字：字串相關操作
5. Dictionaries：key/value 儲存資料方式
6. 顏色：外觀樣式
7. 變數：暫存的變數相關操作
8. 程序：建立執行函式

首先我們先宣告我們的變數（同時把使用者介面的元件重新命名）：

根據規劃建立對應使用者介面的邏輯連接：

點擊馬上計算按鈕則判斷使否 weight 和 height 皆大於 0 進入程式區塊進行 BMI 邏輯判斷，當使用者點擊按鈕但輸入空值時印出提醒：請輸入正確數值！

到這邊我們初步透過 App Inventor 完成了一個 BMI 計算的行動應用程式了！

開啟模擬器測試

除了可以打包成 .apk 檔案使用掃描 QR Code 方式在手機上面測試，也可以使用 USB 串連手機和下載 MIT AI2 Companion 進行開發測試。此外也可以使用電腦的手機模擬器進行開發測試（可能會需要依照指示安裝相關套件），當我們程式有更新模擬器的應用程式也會自動更新，開發起來也算方便。

目前 App Inventor 主要能在 Android 作業系統上開發，期待之後 iOS Device 也可以正式支援（目前支援 iOS 主要還在測試階段）。

若是開發完成沒問題，我們也可以下載 .apk 準備上架到 Google Play 市集上面讓更多的使用者使用。

總結

以上透過一個 BMI Android 手機應用程式來介紹 App Inventor 的使用和開發方式，對於一些需要快速驗證點子（例如：IoT 應用串接 POC 等）或是比較不熟程式語言的使用者來說，不失為訓練邏輯思考和熟悉行動應用開發的一方便工具。若你有想到希望在行動裝置上實現的點子，不如就趁現在打開瀏覽器編輯器開始動手實作吧！

參考文件

1. MIT App Inventor
2. AppInventor中文學習網