今天開始給大家介紹一個圖形化的程式設計軟體，適合中小學生，甚至大學生的程式設計啟蒙。它採用積木式的程式設計來編寫能執行在安卓系統的app。

APP Inventor 開發入門

App Inventor 是一款基於 Web、面向沒有程式設計經驗的初學者的 Android 應用開發工具。它最初是谷歌實驗室（Google Lab）2009 年開始，由麻省理工學院（MIT）的 Hal Abelson 教授主導的一個實驗專案。與傳統的程式碼程式設計不同，App Inventor 中程式是通過視覺化的積木模組來實現的，並用積木模組定義不同的功能。

App Inventor 模組的理論最初基於 Ricarose Roque 的碩士論文，而模組的實現又基於另一位 MIT 教育專案負責人 Eric Klopfer 創造的 StarLogo 模擬程式。

本專案中我們通過 App Inventor2 設計一個簡單手機 app 來讓我們了解如何搭建 App Inventor2 離線中文版開發環境、如何使用 App Inventor2 中文版的離線編譯的環境和通過 App Inventor2 來開發手機應用。

一、專案實施

首先我們需要一個 App Inventor2 的開發環境，第一步進行環境搭建，第二步在該環境中新建專案，總共七個步驟如下圖所示。

1、賬號註冊及登入

（1）執行谷歌瀏覽器（為避免不相容，請儘量不要使用360、QQ等瀏覽器），訪問網址：http://app.gzjkw.net，進入APP INVENTOR伺服器登入頁面。點選“用QQ賬號登入”。

註冊登入地址

2、新建專案

提示：目前，App Inventor2 中文離線版只支援字母開頭，且只能包含字母、數字和下劃線作為專案名稱，不能有空格、特殊符號或者中文。

3、準備素材

本專案不需要準備素材。

開發一個應用，通常需要的三大環節可以用一個公式加以描述：

應用開發=介面開發+功能開發+測試除錯

同樣，我們在 App Inventor 裡，這個公式如下：

應用開發=元件設計+邏輯設計+連線測試

下面我們就按照上述公式進行元件設計、邏輯設計和連線測試的工作。

4、元件設計

為了更方便進行元件設計，我們先來學習下環境的佈局結構，我們把它簡單劃成七個部分：

A 部分，選單欄，有專案、連線、打包、幫助、管理等選單。

B 部分，螢幕欄，可以為應用管理螢幕，包括增加螢幕、刪除螢幕和切換到各個螢幕。右邊還有兩個按鈕可以對主環境在元件設計和邏輯設計之間進行切換。C 部分為元件面板、D 部分為工作面板、E 部分是元件列表、F 部分是素材管理面板、G 部分是元件屬性面板。

D部分所示，稱為工作面板視窗，用於放置應用中所需的元件。工作面板視窗只能粗略地顯示應用的外觀，例如，與測試裝置中的應用相比，在工作面板視窗中，一行文字可能會在不同的地方換行。如果想看到應用的實際外觀，可以將應用下載到測試裝置上。

C 部分所示，是元件面板，其中包含了可供選擇的各類元件。該面板按類別劃分為幾個部分，預設情況下，只有使用者介面元件可見，可以通過單擊其他類別的標題，如介面佈局、多媒體等，來檢視其他元件。

E部分所示，是元件列表，顯示了專案中的所有元件，拖動到工作面板視窗中的任何元件都將顯示在該列表中。

元件列表下方的 F 部分所示，是素材，顯示專案中的所有媒體資源（影象和聲音），在這裡可以上傳下載刪除素材。只有在這裡上傳了的素材才可以給專案所有元件使用。

最右邊的G 部分所示，用於顯示元件的屬性，在工作面板視窗中單擊某個元件，將在元件屬性下方看到該元件的一系列屬性。

了解程式設計環境，下面我們開始元件設計：

（1）請在元件面板裡，找到標籤，並把它拖到工作面板裡，在元件列表裡可以對已經拖到工作面板的元件進行重新命名或者刪除，然後按照下表所示元件列表的屬性值，在元件屬性進行設定：標籤的文字為空，字號為 28。

到現在，元件設計已經完成，下面我們就可以進行流程圖設計和邏輯設計了。

5、設計流程圖

6、邏輯設計

在右邊單擊“邏輯設計”按鈕進行程式設計，單擊“邏輯設計”按鈕後，會出現如下圖所示的介面，在邏輯設計過程中，我們可以隨時回到元件設計，可以單擊“邏輯設計”按鈕旁邊的“元件設計”按鈕。

（2）單擊“當按鈕 1.被點選”事件積木，它就在工作面板了，下面我們在模組面板下面選擇標籤 1，跟按鈕 1 一樣，它的所有屬性積木也會出現在工作面板上面，然後我們把第 11 個“設定標籤 1.文字為”這個積木拖放到“當按鈕 1. 被點選”事件積木裡面去。

（3）如上圖所示，“設標籤 1.文字為”積木右邊還有一個缺口。在“模組”中的“內建塊”有“文字”。我們單擊“文字”，並在雙引號裡面輸入我們需要的文字“hello world！”，並把它拖放到剛才的缺口。

現在，我們的程式已經編寫完畢，現在進行專案的連線測試階段了。

7、連線測試

（1）單擊“連線”選單，有如下圖所示的內容。

在“連線”選單裡，我們可以進行 AI 伴侶除錯或者 USB 除錯，當然，前提條件是必須要有一臺安卓手機，並且這部手機安裝有 AI 伴侶。如果用 AI 伴侶方式，還需要手機和電腦在同一個區域網；如果用 USB 測試，還需要電腦安裝好這部手機的驅動程式，並且手機和電腦通過 USB 線連線著。

（2）本專案我們採用“AI伴侶”方式來進行除錯。點選“幫助”選單裡的“AI伴侶資訊”，會彈出“AI伴侶”的下載頁面，用手機掃描二維碼下載檔案並安裝好“AI伴侶”。安裝好後，手機上會出現一個叫“MIT AI2 Compannion”的APP。

（3）單擊“連線”選單裡的“AI伴侶”，就會彈出連線到AI伴侶的二維碼和編碼。點選手機APP裡的“scan QR code”，掃描彈出的二維碼，即可看到程式的介面。

注意，除了掃描二維碼，AI伴侶還提供了輸入編碼連線功能，具體操作如下。

點選AI伴侶右上角的“┇”--->“Settings”，把“Set Rendezvous Server：”後面的內容改為“app.gzjkw.net”後，點選“Set Rendezvous Server”確定伺服器地址。

以上是用模擬器代替手機執行，也可以直接將.apk檔案匯出放在手機中安裝執行，效果一樣。