盧玟攸

CHAPTER1

App Inventor介紹

1-1學習目標

1、了解App Inventor發展與建置環境。

2、學會在App Inventor新增Button元件，並設定其屬性。

3、學會在App Inventor新增Label元件，並設定其屬性。

4、學會在App Inventor新增Sound元件，並設定其屬性。

5、了解App Inventor程式設計流程及Design、Blocks Editor的用法。

1-2App Inventor發展與沿革

App Inventor是Google實驗室（Google Lab）的一個子計畫，由一群Google工程師與勇於挑戰的Google使用者共同參與。從2010年7月推出以來，App Inventor迅速在基礎教育市場普及了起來，在臺灣由於中小學普遍使用Scratch程式來進行生活科技與資訊相關課程的教學，因此與Scratch風格相近的App Inventor自然很容易為第一線教學者所採用。另一方面，隨著智慧型手機的普及化，許多非資訊相關科系的學生都有機會使用手機來製作專案，例如互動裝置藝術或是簡單的QR條碼掃瞄程式等，這時候要學生先修習一學期的Java後再使用正規Android開發環境就不是個合理的做法。這時App Inventor可以讓學生很快地理解手機開發上的各項環節並實作出一定水準以上的成果。

App Inventor已於2012年1月1日移交給美國麻省理工學院行動學習中心（Mobile Learning Center, MIT），並會將App Inventor的原始碼開放出來讓更多熱心投入者可以貢獻一份心力，期待看到更多指令與多國語系的App Inventor出現。

1-3App Inventor環境介紹

App Inventor是一個完全線上開發的Android程式環境，拋棄複雜的程式碼而使用樂高積木式的堆疊法來完成您的Android程式。除此之外它也正式支援樂高NXT機器人。

對於Android初學者或是機器人開發者來說是一大福音。因為對於想要用手機控制機器人的使用者而言，他們不大需要太華麗的介面，只要使用基本元件例如按鈕、文字輸入輸出即可。本書分為[入門卷]與[機器人卷]，[入門卷]將帶領讀者一步步進入手機程式設計的領域，包含互動介面設計、基礎資料處理方法、繪圖、多媒體與網路元件等。更棒的是所有開發環境都是免費的，只要在有網路連線下的電腦上就可完成各種操作。進階卷內容就更豐富了，要用到手機或平板電腦上的各種感測器，包括加速度、姿態與定位感測器還有藍牙連線功能，因此需要使用實體手機進行開發，可以做到時下最好玩的憤怒鳥遊戲與控制樂高NXT機器人等外部嵌入式系統設備。開發一個App Inventor程式就從您的網路瀏覽器開始，您首先要設計程式的外觀。接著是設定程式的行為，這部分就像玩樂高積木一樣簡單有趣。最後只要將手機與電腦連線，剛出爐熱騰騰的程式就會出現在您的手機上了。App Inventor讓您可在網路瀏覽器上來開發Android手機或平板電腦應用程式，開發完成的程式可下載到實體手機或在模擬器上執行。App Inventor伺服器會儲存您的工作進度還會協助您管理專案進度。

完成一個App Inventor程式需要經過兩道加工手續，也就是不同的開發介面：

■App InventorDesigner：「設計視窗」，選擇程式中要用到的各種元件。

■App InventorBlocksEditor：「程式區塊編輯視窗」，把各種程式指令「組合」在一起，藉此決定程式元件之行為。設計程式行為的方式就好像在螢幕上拼拼圖一樣輕鬆又有趣。

當我們逐步加入各種元件時，它們也會同時出現在您的手機畫面上，因此您可以邊寫程式邊進行測試。完成之後，您可以將程式打包起來產生一個.apk安裝檔。如果您沒有實體的Android設備，您還是可以透過Android模擬器來設計所需要的程式。軟體在模擬器上如何運作，到了設備上也是同樣一回事。

App Inventor的開發環境支援MacOSX、GNU/Linux以及Windows等主要作業系統，硬體則支援大多數的Android手機或平板電腦。App Inventor所設計的程式可以安裝在任何一隻Android手機上。在開始使用App Inventor之前，您需要建立開發環境並安裝App Inventor安裝套件，請看下節說明。

1-4建立App Inventor環境

本段將依序帶您建立App Inventor開發環境，本書使用之作業系統為Windows；如果您使用麥金塔或Linux等作業系統，請至App Inventor官網依照步驟完成安裝。

簡言之，您需要以下三個步驟，請依序操作完成即可：

1.個人的Gmail帳號

2.安裝Java環境

3.安裝App Inventor Installer

1-4-1系統需求

電腦與作業系統

■使用Intel處理器的麥金塔電腦，作業系統為MacOSX10.5或以上。

■Windows：WindowsXP、WindowsVista與Windows7。

■GNU/Linux：Ubuntu8+；Debian5+。

瀏覽器

■MozillaFirefox3.6版或以上

■AppleSafari5.0版或以上

■GoogleChrome4.0版或以上

■MicrosoftInternetExplorer7版或以上

1-4-2申請Gmail帳號

Gmail帳號為每一位App Inventor開發者必備的帳號，藉此來登入App Inventor官網。

請依下列步驟來申請Gmail帳號：

1.請在搜尋引擎輸入Gmail關鍵字後，連結至Gmail網頁。

2.點選畫面右上角建立帳戶按鍵（紅色箭頭指引處）

3.建立帳號密碼及輸入個人資料，輸入完畢後點選最下方「我接受建立帳戶」按鈕。

4.輸入電話號碼，寄送驗證碼簡訊或以電話語音方式告知驗證碼給申請者。

5.輸入驗證碼

6.申請成功，點選右側開始使用按鍵登入Gmail畫面。

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

1-4-3測試Java環境設定

您的電腦需使用Java1.6以上，Java套件可從Java官方網站下載。您可依照下列步驟來測試Java環境是否正確建置完成：

1.請到Java的測試頁面（http://www.java.com/en/download/testjava.jsp）。網頁上會顯示正在運行的Java版本，如下圖所示。

2.接著請到Java網路程式示範頁面（http://www.oracle.com/technetwork/java/demos-nojavascript-137100.html）並選擇一個範例程式，例如繪圖Draw。點選之後，Java網路程式就會透過瀏覽器將這個範例程式下載到您的電腦，接著點選下載好的程式來執行它。您也許需要設定瀏覽器好順利開啟jnlp檔案。如果上述兩個測試步驟不成功的話，App Inventor就無法正確運作。按照先前的步驟再檢查看看吧。

1-4-4安裝App Inventor安裝套件

1.安裝App Inventor安裝套件，這個步驟適用於WindowsXP、Vista與Windows7，硬體面則適用於所有的Android裝置。

2.安裝您使用手機之Windows驅動程式。我們建議您使用系統管理員權限來完成安裝，如此一來這臺電腦上的所有使用者都可以使用App Inventor。如果您沒有系統管理員權限，則App Inventor只能在您所選用安裝的帳號下使用。請依下列步驟完成安裝：

1.下載App Inventor Installer，檔名為App Inventor_Setup_Installer_v_1_2.exe，約92MB。檔案的實際下載位置會根據您所使用的瀏覽器而有不同。檔案請由App Inventor中文學習網下載（http://www.App Inventor.tw）。

2.開啟檔案並安裝，安裝時請使用預設設定即可，請勿更改安裝路徑並將安裝資料夾位置記下來，因為有時候我們可能會進去檢查相關的驅動程式。安裝資料夾可能會因為您所使用的作業系統以及是否使用系統管理員權限而有所不同。指定安裝路徑App Inventor大多數的情況下都能自行完成安裝，但如果在安裝過程中系統詢問App Inventor之安裝路徑時，請確認安裝路徑為C:\ProgramFiles\App Inventor\commands-for-App Inventor。如果您使用的是64位元的作業系統，請將上述路徑中的Program Files改為Program Files（x86）。另一方面如果您並非以系統管理員身分安裝App Inventor，則它會安裝在使用者的個人資料夾中而非直接放在C:\ProgramFiles資料夾下。

1-4-5手機驅動程式

App Inventor安裝套件已包含了下列數款Android手機的驅動程式：

■T-MobileG1*/ADP1

■T-MobilemyTouch3G*/GoogleIon/ADP2

■Verizon Droid*

■Nexus One*代表其它廠商所生產之同規格手機

原則上各版本的Android手機應都可與App Inventor搭配使用，經實測甚至可回溯到hTC tattoo機（Android1.5版，但效能略差）。如果您的Android手機未列於上述清單中，請參閱您的手機使用說明書或App Inventor官方網站以獲得更多資訊，本書作者群是使用HTC Desire，需另外安裝HTC Sync軟體方能順利連線。我們在App Inventor中文教學網已整理多篇教學文章，歡迎利用。

1-4-6讓手機可安裝App Inventor程式

Android手機預設是只能安裝從Android Market上下載的程式，所以當我們要自行開發程式時，需要在手機的設定頁面中完成「未知的來源」、「USB除錯中」和「允許模擬位置」等設定。本介面以HTC手機來截圖，項目名稱可能有所不同，但路徑是一樣的。總共需要三個步驟：

1.設定╱應用程式╱勾選「未知的來源」，代表允許安裝非Market的應用程式。

2.設定/應用程式/開發，勾選全部選項

3.最後是將手機以USB與電腦連接，並設定為"HTC Sync"，請勿設定為其他選項，否則無法安裝程式。

CHAPTER1

App Inventor介紹

1-1學習目標

1、了解App Inventor發展與建置環境。

2、學會在App Inventor新增Button元件，並設定其屬性。

3、學會在App Inventor新增Label元件，並設定其屬性。

4、學會在App Inventor新增Sound元件，並設定其屬性。

5、了解App Inventor程式設計流程及Design、Blocks Editor的用法。

1-2App Inventor發展與沿革

App Inventor是Google實驗室（Google Lab）的一個子計畫，由一群Google工程師與勇於挑戰的Google使用者共同參與。從2010年7月推出以來，App Inventor迅速在基礎教育市場普及了起來，在臺灣...

CAVE教育團隊序

App Inventor原是Google的一項線上服務，把繁複的Java程式碼包成一個個可愛的程式積木，讓沒有Java基礎的使用者可以快速開發Android行動裝置程式並可實際下載到任何一款Android手機或平板電腦上執行。由於介面與Scratch相當類似，一推出之後也受到許多國小國中教師的喜愛，並將其運用在資訊與生活科技課堂中。為了讓更多喜愛App Inventor的朋友們能有一個共享學習的園地，我們建置了App Inventor中文學習網(http://www.appinventor.tw)，期待更多同好能充分利用本教學平臺並分享開發心得。

本書中所有範例皆可在一般電腦使用模擬器來完成，內容包含人機介面設計、影音多媒體、網路通訊，Google Map地圖定位，資料庫與繪圖等，即便您尚未購置Android裝置，一樣能玩得很開心，輕鬆學會手機程式設計。

我們將進一步探討App Inventor結合實體Android裝置後的多元運用，包含感測器，多點觸控，藍牙與I2C數位通訊，精彩可期！意猶未盡的讀者在卷二[機器人卷]出版之前可以選讀本團隊的另一本機器人書籍《Android/NXT機器人大戰智慧型手機控制機器人》，使用正規Android開發環境來編寫機器人程式，您會對Android裝置上的許多裝置例如WiFi、GPS以及各類感測器等更加熟悉，並可大幅提升機器人的威力，非常適合資訊、機電相關科系的學生們進行例如自動控制或是嵌入式系統等課程教學。

本書很榮幸能獲得多位師長的熱情推薦，並感謝臺中女中未來教師社群的老師們於本書開發過程中協助審閱校訂並提供許多寶貴的建議。感謝好友杜宗芳先生給予許多程式設計上的觀念指正與技術支援。感謝馥林文化全體同仁在本書編寫過程中的專業協助，讓本書能兼顧親和與專業。馥林文化對於國內科學動手做以及機器人領域持續深耕，引進《MAKE》雜誌與《ROBOCON》機器人雜誌，造福許多求知若渴的讀者，實為大家之福。本團隊也很榮幸能在每期的《ROBOCON》機器人雜誌與大家分享App Inventor的小小心得，這是我們應該做的。

本書是CAVE教育團隊2012年的第一本書，也是一路走來的第五本，感謝許多師長好友們的支持與鼓勵，期待很快可以與您在下一本書見面。

CAVE教育團隊

曾吉弘　賴偉民　黃凱群　盧玟攸　施力維　謹致

service@cavedu.com

本書所有範例皆可由book.cavedu.com下載

CAVE教育團隊序

App Inventor原是Google的一項線上服務，把繁複的Java程式碼包成一個個可愛的程式積木，讓沒有Java基礎的使用者可以快速開發Android行動裝置程式並可實際下載到任何一款Android手機或平板電腦上執行。由於介面與Scratch相當類似，一推出之後也受到許多國小國中教師的喜愛，並將其運用在資訊與生活科技課堂中。為了讓更多喜愛App Inventor的朋友們能有一個共享學習的園地，我們建置了App Inventor中文學習網(http://www.appinventor.tw)，期待更多同好能充分利用本教學平臺並分享開發心得。

本書中所有範例皆可在一般電腦...

第1章 App Inventor介紹
第2章 運算與判斷
第3章 迴圈與清單
第4章 App Inventor基本功能與程序觀念
第5章 生活好幫手
第6章 讓我們看雲去
第7章 再談畫布
第8章 小遊戲動手做
第9章 資料庫與網路資料庫
附錄A App Inventor指令說明Built in
附錄B My Blocks自訂元件
附錄C App Inventor小秘訣
附錄D 網路資源與好書推薦

第1章 App Inventor介紹
第2章 運算與判斷
第3章 迴圈與清單
第4章 App Inventor基本功能與程序觀念
第5章 生活好幫手
第6章 讓我們看雲去
第7章 再談畫布
第8章 小遊戲動手做
第9章 資料庫與網路資料庫
附錄A App Inventor指令說明Built in
附錄B My Blocks自訂元件
附錄C App Inventor小秘訣
附錄D 網路資源與好書推薦