APPINVENTOR 簡介

1 開發環境介紹-網頁

學習 Android 裝置程式設計，可以不必學習較為艱澀的 Java 語法，只要使用 拼圖模式

來組合程式，就可以完成 Android 裝置的應用程式。MIT App Inventor 2 網站提供雲端服務，

讓我們可以免費使用其提供的強大功能，來設計 Android 裝 置上的 App 應用程式，完成作

品後還可以上傳到 Google Play 商店，提供給大眾 下載使用喔。

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 網站。

麻省理工學院是在西元 2013 年 12 月 3 日推出 MIT App Inventor 2 網站，提 供免費的

雲端服務，使用者可以透過瀏覽器來開發 Android 裝置應用程式，該網 站的網址為：

「http://ai2.appinventor.mit.edu/」。 網站上提供了許多詳細的教學資源，來引導使用者進入

App 應用程式開發的世界，使用者開發完成的程式，可以下載到任何使用 Android 作業系統

的裝置， 包括：智慧型手機或平板電腦。 在 App 程式開發過程中，我們可以使用模擬器或

Android 裝置，來測試應 用程式執行的狀況，待完成相關開發作業後，更可以將應用程式，

上傳到 Google Play 商店提供大眾下載安裝。

建置 App Inventor 2 開發環境 使用 MIT App Inventor 2 來開發 Android 程式，其開發動

作都是在瀏覽器上 完成，為網路雲端開發環境，要建置 MIT App Inventor 2 的開發環境，需

要進行 1項前置作業：申請 Gmail 帳號。

申請 Gmail 帳號 要使用 MIT App Inventor 2 開發 Android 程式，需要擁有 Gmail 帳號，

藉此來 登入開發網站，申請 Gmail 帳號的步驟如下：

Step1：在瀏覽器的網址列輸入網址：http://mail.google.com，到達 Gmail 信箱的登入頁

面，接著點選「建立帳戶」按鈕，如圖所示。

Step2：接著輸入要建立的 Google 帳戶資料，包括：「名稱」、「使用者名稱」、 「密碼」、

「生日」、「性別」…等資料，如圖所示。Google 將所有的產品與服 務全部整合到一個帳戶，

只要使用一組使用者名稱與密碼登入，就能使用各 種豐富的 Google 服務。 4 填寫資料時，

需將「我同意 Google《服務條款》及《隱私權政策》」的核 取方塊打勾，才能按下「下一步」

按鈕，如圖所示。

Step3：設定想要顯示的資訊，此部分的設定就依個人的使用需求來輸入， 此階段為讓使

用者上傳大頭照，如圖所示。照片上傳後，以後仍然隨時可 更換相片。

Step4：完成 Gmail 信箱的申請，按下「前往 Gmail」按鈕，即可開始使用 Google 帳戶，

如圖所示。

2 使用環境介紹-手機

當你的程式寫到一半想看看它現在長什麼樣子嗎？現在就要來教你如何讓 App Inventor 2

的程式執行囉！我們分成同步連接和安裝程式兩個部分。

（一）同步連接

方法一：Wifi 連接(最建議使用)

所需工具：具 Android系統的行動載具、Wifi 網路、行動載具內需有「Google Play商店」。

（註：自己的行動網路是無法使用的）

步驟一：將你的行動載具連上 Wifi 網路。

步驟二：至 Google Play商店下載「AI2 Companion」，或利用「QR Code掃描裝置」直接掃描下

圖的 QR Code。

步驟三：在 App Inventor 2 上方選單找到連接(Connect)→選擇 AI Companion

http://3.bp.blogspot.com/-b0UnhxIlEUc/UyGvKFR44UI/AAAAAAAAAWk/VlkCLXo-Ch8/s1600/2_27.pnghttp://3.bp.blogspot.com/-JJ5G6tcU3cE/UyGwILYnHTI/AAAAAAAAAWs/NqvRwiy53GE/s1600/2_28.png

步驟四：會出現 QR Code視窗，請使用步驟二下載的「AI2 Companion」APP掃描它。

你的程式就會出現在你的手機上囉！

如果你沒有 Android 系統的行動載具，沒關係你還有下面的方法。

App Inventor 2 提供模擬器讓大家可以同步連接，有一隻假手機會出現在螢幕上，讓你馬上看

到自己的程式。

http://1.bp.blogspot.com/-ukpAnGVIF70/UyGxJkqb7PI/AAAAAAAAAW4/UJb0W13paEY/s1600/2_29.png

方法二：連接模擬器

步驟一：到這裡下載套裝軟體，或直接點我下載。

步驟二：安裝你的套裝軟體，安裝完成後桌面上會出現 aiStarter的圖

http://appinventor.mit.edu/explore/ai2/windows.htmlhttp://appinv.us/aisetup_windowshttp://1.bp.blogspot.com/-ux3AgM8k9mI/UyG0snqfqjI/AAAAAAAAAXE/qYHqoubhPhA/s1600/2_30.pnghttp://1.bp.blogspot.com/-Gm-vhUx_az4/UyG18VAXZwI/AAAAAAAAAXM/xXrupjXC0fk/s1600/2_31.png

步驟三：打開 aiStarter，會出現黑屏，把它縮小不要關掉它。

步驟四：在 App Inventor 2 上方選單找到連接(Connect)→選擇模擬器(Emulator)

http://1.bp.blogspot.com/-NIBXzPQpO4I/UyG3FZeHAqI/AAAAAAAAAXU/1TbNuuoSaBo/s1600/2_32.pnghttp://3.bp.blogspot.com/-O7dS0_uZf44/UyG3F1f2TvI/AAAAAAAAAXc/RUXRS3LTQ_Q/s1600/2_33.png

這時候畫面上會出現倒數畫面，aiStarter會跳出來，出現一大堆的字串。

耐心等候模擬器出現……

步驟五：模擬器出現了！一隻假手機會出現螢幕上，繼續等待程式就會出現了！但是第一次使

用時，因為 App Inventor 從 Beta 版更新的過程，模擬器沒有更新完全，所以會出現錯誤訊

息！點 OK讓他開始更新。

http://2.bp.blogspot.com/-Aj3fs-1QD3E/UyG5HAL-h8I/AAAAAAAAAXo/GO_4uNRcvWs/s1600/2_34.pnghttp://2.bp.blogspot.com/-Vpg51mIvzvo/UyG5I1h23II/AAAAAAAAAX0/vON5_8i6JV8/s1600/2_35.png

步驟六：依序讓它更新直到完成。

步驟七：重複步驟四，再做一次連接，你的程式就會跑出來囉！

http://4.bp.blogspot.com/-Kdb0iYfyBW4/UyG8yBIcYGI/AAAAAAAAAX8/yjB2N5Rqph4/s1600/2_36.pnghttp://4.bp.blogspot.com/-Q9eyNs5e3c8/UyG9YKc8ePI/AAAAAAAAAYE/pFjvwA_s6ww/s1600/2_37.png

方法三：USB連接

所需工具：具 Android系統的行動載具、USB連接線

步驟一：請做方法一的步驟二。

步驟二：請做方法二的步驟一至步驟三。

步驟三：設定你的手機

1. 設定/安全性/裝置管理員/勾選「未知的來源」，代表允許安裝非Market的應用程式

步驟四：連接你的 USB線和手機

步驟五：在 App Inventor 2 上方選單找到連接(Connect)→選擇 USB

當你程式寫完的時候，想要跟朋友分享嗎？

但是不可能請你的朋友先建置環境、安裝模擬器等東西。

利用.apk安裝檔將程式安裝到電腦或手機上，讓你可以分享給你的朋友們！

http://2.bp.blogspot.com/-6KnMSOkSH3s/UyG-lhRIOjI/AAAAAAAAAYQ/Vm9Aq-WBTl8/s1600/2_38.png

（二）安裝程式

方法一：安裝到電腦上

所需工具：具 Android 系統的電腦／行動載具

步驟一：在 App Inventor 2 上方選單找到建立(Build)→存取.apk擋到我的電腦

http://1.bp.blogspot.com/-p-2hqgCLhl4/UyHETjJYI2I/AAAAAAAAAYg/f_9RcdP01S0/s1600/2_39.png

步驟二：等待下載安裝好，會出現.apk檔，如果你的電腦是 Android系統的，直接點開.apk

即可安裝與使用；如果不是，你也可以透過藍芽或 USE傳輸的方式，將檔案傳到 Android 系

統的行動載具安裝使用。

方法二：安裝到手機上

所需工具：具 Android系統的行動載具、「QR Code掃描」APP

步驟一：在 App Inventor 2 上方選單找到建立(Build)→產生.apk檔的 QR Code

http://4.bp.blogspot.com/-BGgViNdHvyk/UyHG8UpNh1I/AAAAAAAAAYs/TC_kr5nvAQs/s1600/2_40.pnghttp://2.bp.blogspot.com/-QA_2Ow0fRPM/UyHH-XsyvhI/AAAAAAAAAY4/z0jdqOc9xjs/s1600/2_41.png

步驟二：出現 QR Code ，用手機的「QR Code掃描」APP掃描它。

步驟三：「QR Code掃描」APP會出現一串網址，點進去手機便會幫你下載。

步驟四：下載好後進行安裝，就可以使用囉！

看到自己設計的程式出現在手機是不是很有成就感？

快拿去跟你的朋友們分享你的作品吧！

http://3.bp.blogspot.com/-YOJqM1vMcoA/UyHH99MQmaI/AAAAAAAAAY8/K8OqJMI0iRQ/s1600/2_42.png

3 建立第一個 APP專案檔

(1) 視窗簡介

接下來，我們要建立第一個 App程式 HelloPurr.aia

(2) 外觀編排

接下來，我們要進行程式設計

(3) 程式設計