App inventor 教學講義 chapter1

1. App Inventor 教學講義
1
吳為勇

2. 2
Chapter 1
App 是什麼？
行動應用程式（英語：mobile application，簡稱 mobile app、app），或手
機應用程式、行動應用程式、手機 app 等，是指設計給智慧型手機、平板電腦
和其他行動裝置上運行的應用程式。
目前主流的行動裝置平台有：
 Google Android
 蘋果 iOS
 黑莓機
 微軟 Windows Phone
目前市佔率最大的兩個平台是前面兩項 Google Android 與 Apple iOS。
Android iOS
開發公司 Google Apple
系統核心 Linux Mac Os
系統開發 開放式系統且開發限制比較
少
封閉式系統開且開發限制多
使用難易度 簡單 簡單
Apps 數量
Apps 品質 不錯 非常好
支援設備 hTC、ASUS、Samsung、
Moto……等相關手機平板系
列商品。
IPhone,IPad 相關系列設備
Apps 附檔名 *apk *.ipa
原廠開發工具 Google Android SDK(java)
App Inventor
XCode(Objective-C)
表格 1 Android 與 iOS 平台比較表

3. 3
App Inventor 是什麼？
App Inventor 原是 Google 實驗室（Google Lab）的一個子計畫，由一群
Google 工程師與勇於挑戰的 Google 使用者共同參與。
Google App Inventor 是一個完全線上開發的 Android 程式環境，只要用一般
的瀏覽器如 Internet Explorer、FireFox、Chrome 連上網際網路就可以進行開
發。因為是在網際網路上開發，所有的設計專案都是透過 Google Account 將
您設計的專案儲存在 Server 上。
App Inventor 完全拋棄複雜的程式碼而使用樂高積木式的堆疊法來完成您的
Android 程式。除此之外它也正式支援樂高 NXT 機器人，對於 Android 初學者
或是機器人開發者來說是一大福音。因為對於想要用手機控制機器人的使用者而
言，他們不大需要太華麗的介面，只要使用基本元件例如按鈕、文字輸入輸出即
可。
App Inventor 於 2012 年 1 月 1 日移交給麻省理工學院行動學習中心，並
已於 3 月 4 日公佈使用。
App Inventor 主要分為三大作業模組且互相關連。
 App Inventor Designer 設計師：
設計手機畫面的地方；含 Palette、Viewer、Components 元件、
Properties 屬性。
 App Inventor Blocks Edit 圖塊編輯器
決定程式行為的地方，會以另一個視窗來顯示的程式。
 Ai2 Starter (App Inventor2)
透過 Ai2 Starter 可以讓 App Inventor2 將寫好的程式連接到模擬器或
是載具（手機或是平板）執行。

4. 4
開始前的準備
1. 系統需求
電腦作業系統：
 Windows:：Windows XP、Windows Vista、Windows 7 與 Windows 8。
 Mac：Mac OS 10.5 或以上。
 Gnu/Linux：Ubuntu 8+、Debian 5……。
瀏覽器：
 Mozilla Firefox 3.6 或以上。
 Apple Safari 5.0 或以上。
 Google Chrome 4.0 或以上。
手機 / 平板 /模擬器：
 Android Operating System 2.3(“Gingerbread”) 或是更高版本。

5. 5
2. 申請 Gmail 帳號步驟
Gmail 帳號為每一位 App Inventor 開發者必備的帳號，藉此來登入 App
Inventor 官網。請依下列步驟來申請 Gmail 帳號：
1. 請在搜尋引擎輸入 Gmail 關鍵字後，連結至 Gmail 網頁。
2. 點選畫面右上角建立帳戶按鍵(紅色箭頭指引處 )

6. 3. 建立帳號密碼及輸入個人資料，輸入完畢後點選最下方我接受建立帳戶
按鈕。
4. 輸入電話號碼，寄送驗證碼簡訊或以電話語音方式告知驗證碼給申請
者。

7. 5. 輸入驗證碼
6. 申請成功，點選右側開始使用按鍵登入 Gmail 畫面。

8. 8
7. Gmail 使用畫面，gmail 是非常好用的郵件系統，與 Android / iphone
的整合度也非常高，歡迎多加利用。

9. 9
3. ai2 starter 安裝
如果你沒有 Android 裝置，你仍然可以用 App Inventor 來建立 apps。App Inventor 提
供一個 Android 模擬器，它就是一台在你的電腦中，可以正常工作的 Android 裝置，所
以你可以在這個模擬器中測試你的 apps，然後再把它分送給其他裝置，甚至在 Play
Store 上架。
你首先需要在你的電腦上安裝一些軟體才能使用模擬器(不需要 WiFi 連接)，請依 Step 1
的指引，為不同的作業系系安裝適合的軟體，然後再回來啟動模擬器。
重要: 如果你曾安裝過先前版本的 App Inventor 軟體，請參閱 How to update the App
Inventor Software 一文，你透過這個網頁來檢查你的電腦是否正在執行最新版本的軟體
App Inventor 2 Connection Test (http://appinventor.mit.edu/test)。
Step 1. 在 Windows 中安裝 App Inventor 設定軟體
在 Windows 中安裝 App Inventor 2
在 Windows 中安裝 App Inventor 有兩個部份:
1. 執行 App Inventor 安裝軟體，這個步驟在所有版本的 Windows 系統都一樣。
2. 如果你選擇用 USB 來連接的裝置，那麼你還要為你的 Android 裝置安裝驅動程式。
注意: App Inventor 2 無法在 Internet Explorer 上執行，對於 Windows 的使用者，
建議使用 Chrome 或 Firefox 來配合 App Inventor 的使用。

10. 10
執行 App Inventor 安裝軟體包
你必須使用系統管理者(administrator)的權限來執行安裝程式。如果你曾安裝過先前版
本的 App Inventor 2 工具，你也須需先將它移除。
1. 下載安裝程式. （
2. 找到你下載目錄中的 AppInventor_Setup_Installer_v_2_1.exe (~101 MB)檔
案。
3. 開啟這個檔案。
4. 依照畫面指示進行安裝。
5. 如果你遇到如下的畫面，請按(是 yes).
Step 2. 啟動 aiStarter (Windows & Linux 才需要)
模擬器需要使用名為 aiStarter 的程式，這個程式允許瀏覽器可以和模擬器連接。當你
安裝 App Inventor 軟體時，aiStarter 也會一起被安裝進來，並會在你的桌面、開啟功能
表中建立啟動圖示，Windows 及 Mac 版本並會設定在開機時自動執行 aiStarter。
aiStarter 的啟動圖示

11. 11
你只要在要 aiStarter 啟動圖示上雙擊，就可以啟動 aiStarter, 接著你就會在桌面上看到
如下的畫面，代表你已經成功執行 aiStarter。
Step 3. 連接模擬器
啟動 aiStarter 後，只要從 App Inventor 的功能表上，點按 Connect MenuEmulator
選項，就可以連接模擬器了。
你會收到一個告訴你模擬器正在連接中的提示視窗，啟動模擬器會花上一點時間，當模
擬器在啟動時，你可以看到 aiStarter 中的畫面訊息會有如下的訊息 :

12. 12
模擬器一開始會出現一個空白的螢幕 (#1)，等到模擬器準備好後，會出現一個有彩色
背景的畫面(#2)，一直等到模擬器的通知列出現完成 SD 準備完成後，模擬器會完成和
App Inventor 的連接，並執行你在 App Inventor 中所建立的 apps。
#1 #2 #3 #4

13. 13
設定開發環境
1. 第一次進入 App Inventor
當 ai starter 安裝完成後。我們就可以打開瀏覽器（Chrome 或是 Firefox）輸入
下列網址來準備進入 App Inventor2 的開發環境吧。
http://ai2.appinventor.mit.edu
1. 進入的第一個畫面就是要您用 gmail 帳號登入。輸入您的 gmail 帳號與
密碼，按下登入，如果沒有錯誤的話就可以進入 App Inventor2 的開發
環境。

14. 14
2. 開發環境簡介
1. 工具列
 Project（專案選單）
 My Project(我的專案)-點選開啟自己的所有專案。
 Start New ProJect(開啟新專案)-開啟新的專案
 Import Project (.aia) from my computer(從我的電腦匯入專案)
 Delete Project(刪除專案)
 Save Project(儲存專案)
 Save Project as (另存專案)
 CheckPoint(設立檢查點)
 Export selected project(.aia) to my computer(匯出選取的專案到我
的電腦)
 Export all projects(匯出所有專案)
 Import keystore(匯入 keystore)
 Export keystore(匯出 keystore)
 Delete keystore(刪除 keystore)
 Connect(連結選單)
 AI Companion(將程式經由 WiFi 無線同步到您的手機。但需先在
手機安裝 MIT AI2 Companion 這隻 app 程式)
 Emulator(連接到模擬器)
 Usb(透過 usb 連接到載具如手機或是平板)
 Reset Connection(重設連線)
 Hard Reset(強制重設)
 Build(打包選單)
 App(provide QR code for .apk)-顯示一個 QR Code，可以透過此 QR
Code 將此 apk 檔下載到載具裡安裝。

15. 15
 App(save .apk to my computer)
將 apk 檔下載存到此電腦裡。
 Help(輔助選單)
 About(關於)
 Library(文庫)
 Get Started(快速入門)
 Tutorials(教學課程)
 TroubleShooting(疑難排解)
 Forums(論壇)
 Report Issue(回報問題)

16. 16
2. App Inventor Designer 設計師作業
此作業最主要的目的為佈置相關元件與設定元件屬性。
圖表 1 Designer
(1) Palette(開發元件庫)
可以從 Palette 的清單選擇需要的元件，預設只會顯示 Basic 基本元件的項
目，點選各分類的標籤（例如 Media、Animation、Social 等），就能看到
其他分類底下的項目。
(2) Viewer(開發設計區)
擺放相關應用元件的地方，您可以編輯應用程式大致的外觀。若想要看到應
用程式實際的畫面，您需要將 App 下載到您的 Android 行動裝置，或是透
過 Android emulator 模擬器檢視。
(3) Components(應用元件區)
此區列出專案中使用到的元件，您可以在此修改元件名稱，或是刪除元件。
新的專案應該只有一個 Screen1 元件，實際上 Screen1 元件就是行動裝置
的螢幕，稍後您拖曳到 Viewer 的任何元件都會顯示在這個元件清單。選取
元件時，按下 Rename 按鈕可修改元件名稱，按下 Delete 按鈕可刪除此
元件。

17. 17
(4) Media(媒體清單區)
顯示專案中使用的媒體檔案，新的專案沒有任何的媒體檔案，所以目前是空
的，稍後上傳的圖片、聲音檔案都將會顯示在這個媒體清單。
(5) Properties(元件屬性設定區)
針對你所選擇的元件顯示此元件的屬性，當您點選檢視器中的元件時，您可
以在這裡檢視或修改元件的屬性，例如設定螢幕元件的背景顏色、按鈕元件
的大小等。
(6) Screen 手機畫面選擇區
一個專案可以有多個畫面。可以在此選擇畫面、新增畫面及刪除畫面。
(7) Blocks(開啟拼塊編輯器)
按下此鍵將會開啟拼塊編輯器作業。

18. 18
3. Blocks Editor 拼塊編輯器作業
圖表 2 Blocks Editor
(1) Blocks(邏輯控件庫區)
將在設計師作業佈置好的元件在這裡設定要做什麼動作或是邏輯條件上的設
定。
(2) Media(媒體清單區)
顯示專案中使用的媒體檔案。
(3) Viewer(控件設計區)
佈置與設計邏輯控件的地方。若您想刪除編輯器的拼塊，使用滑鼠將拼塊拖
曳到右下方的垃圾桶圖示即可刪除拼塊。

19. 第一個 APP Inventor 程式
HelloWorld
使用元件: Button(按鈕), Label(標籤).
1. 進入 App Inventor2 官方網站 --> My Projects 頁面,點選 New Project
建立一個名為 HelloWorld 的專案。
2. 由左側的 Basic 元件區選擇一個按鈕 Button,拖拉到 Viewer（開發設計區）
中。在 Components(應用元件區)中選此 Button,按下下方 Rename 修改此
元件名稱為 btnClick。接下來在 Properties（元件屬性設定區）設定背景
顏色設為 Light Gray, 字體大小設為 18, 文字設為"點我點我……", 其餘不
變。
圖表 3 btnClick 元件佈置
3. 由左側的 Basic 元件區選擇一個標籤 Label, 拖拉到 Viewer（開發設計區）
中放到上一步驟設定的按鈕下方。在 Components(應用元件區)中選此
Label,按下下方 Rename 修改此元件名稱為 lblHello。並在 Properties（元

20. 20
件屬性設定區）設定字體大小為 30, 文字設為"" (無內容, 因為要另外指定
內容), 寬度設為"Fill Parent". 其餘不變。到此算是將頁面設計完成了。
圖表 4 lblHello 元件佈置
4. 點選畫面右方的 Blocks 進入 Blocks Editor(拼塊編輯器)
圖表 5 按下 Blocks 進入拼塊編輯器
5. 從畫面左邊 Blocks 中 Screen1 裡的 btnHello。會出現下面的圖案，選擇
when Button1.Click 事件, 代表當 btnHello 被按下時, 執行所包含的動
作。
→
圖表 6 btnClick

21. 21
6. 從畫面左邊 Blocks 中 Screen1 裡的 lblHello。會出現下面的圖案，選擇 set
Label1.Text to 指令, 代表要設定 Label1 的文字。然後拖拉到上一步驟所
選的 when Button1.Click 事件中。
圖表 7 lblHello 選擇 Set Text to
圖表 8 lblHello 拖拉 set text to 事件到 when btnClick.Click do 的拼塊中
圖表 9 lblHello 設定完成

22. 22
7. 從畫面左邊 Blocks 中上方Built in 中點選Text將其內容"text" 改為 "Hello
World!"。並拖拉到 lblHello 中的缺口裡。
圖表 10 設定 Text 事件
圖表 11 設定 text 內容並拖拉到 set Text to 事件中
圖表 12 Blocks 拼塊設定完成

23. 23
8. 完成了設計師作業與拼塊編輯器作業後就要將結果在模擬器或是載具上呈
現出來。這時候我們就要用到工具列上的 Connect(連結選單上的選項)。先
選擇 Emulator(模擬器)選項來啟動模擬器。
圖表 13 啟動模擬器
9. 模擬器啟動完後會問你需要更新模擬器的程式嗎？選擇 not now。模擬器
就會自動執行剛剛完成的本專案。
圖表 14 模擬器啟動完畢

24. 24
10. 執行的結果
→
11. 如果要直接連接到手機或是平板看結果，可以直接點選 Connect(連結選單)
上的 USB 選項。但是要先在手機或是平板上安裝 Ai2 Companion（到
GooglePlay 去搜尋安裝即可）。

25. 25
圖表 15 正在連接 USB
圖表 16 連街上手機上顯示

26. 26
12. 上一步驟其實只是在載具上看到程式執行的結果，不是真的把這一個程式安
裝到載具上。如要將此程式像一般 app 一樣安裝到手機裡就要用到工具列
上 Build(打包選單)這個選項了。可以選擇 App(provide QR code for .apk)
此選項。這會顯示一個 QR Code。
圖表 17 選擇 App(provide QR code for .apk)
圖表 18 生成 QR Code 中
圖表 19 產生出此程式專屬 QR Code

27. 27
13. 在載具上用 QR Code 掃描 app，掃描此 QR Code，可以得到一下載 apk
的網址。連上此網址將此 apk 下載到載具裡。
→
14. 因為這不是從 GooglePlay Store 下載下來的 apk 檔，我們需要先至「設
定」—>「安全性」—>開啟「不明的來源」，並執行「確定」。才能安裝
我們剛剛下載的 apk 檔
→

28. 28
15. 設定完後就可以安裝下載的 apk 了。
→
→

29. 29
16. 執行安裝好的 app 程式
→