第二章 App Inventor程式的開發環境 課程名稱：程式設計 授課老師：李春雄 博士 各位同學大家好，我是李春雄老師，本學期所開設的課程名稱為「資料結構」， 今天所要為各位介紹的是第一章「資料結構導論」

本章學習目標 讓讀者了解App Inventor拼圖程式的整合開發 環境。 2. 讓讀者了解App Inventor拼圖程式的執行模式 及如何管理自己的專案。 開始： 本章學習目標 有二項：

本章內容 2-1 App Inventor拼圖程式的開發環境 2-2 進到App Inventor2雲端開發網頁 1-1 認識資料與資訊的關係: 其中，「資料」轉換成「資訊」必須要經過一連串處理過程，而這一連串的處理過程就是透過「程式」來處理。 1-2 何謂資料結構？ 「資料結構」(Data Structures)主要是探討如何將資料更有組織地存放到電腦記憶體中，以提昇程式之執行效率的一 門學問。 1-3 何謂演算法?演算法就是「解決問題的方法」 1-4 程式設計概念: 步驟1. 分析所要解決的問題 步驟2. 設計解題的步驟 步驟3. 編寫程式 步驟4. 上機測試、偵測錯誤 步驟5. 編寫程 式說明書 1-5 結構化程式設計 利用「由上而下」的技巧，將程式分解成許多個獨立功能的模組。並且每一個模組都是由三種結構所組成。分別為循序結構、選擇結構及重複結構。 1-6 演算法的效率評估 指用來計算某些演算法所撰寫的程式，在經過編譯之後，實際執行所需要的時間。

2-1 App Inventor拼圖程式的開發環境 基本上，想利用App Inventor拼圖程式來開發Android APP手機應用程式時，您必須要先完成以下四項程序： 1.申請Google帳號。 2.使用Google Chrome瀏覽器(強烈建議使用) 3.安裝App Inventor 2開發套件(安裝在電腦上) 4安裝MIT AI2 Companion(安裝在電腦與手機中) 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

2-1.1申請Google帳號 由於App Inventor拼圖程式是由Google實驗室所發展出來，以便讓使用者輕易的開發Android App。因此，使用者在開發App Inventor拼圖程式時，先申請Google帳號。 步驟一：連到Google的帳戶申請網站並註冊 https://accounts.google.com/SignUp?hl=zh-TW 註：在「建立帳戶」之後，就可以登入。如果您已經申請過，則不需要再重新申請，直接使用舊的即可登入。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

https://accounts.google.com/Login?hl=zh-tw 步驟二：登入Google帳戶 連到Google的登入網站 https://accounts.google.com/Login?hl=zh-tw 你登入的密碼自動會記錄在Google Chrome的網站中了，所以，下次要再使用Google提供的相關服務(gmail,AppInventor…)皆不需再登入。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

2-1.2使用Google Chrome瀏覽器 基本上，目前瀏覽器種類，大致上可以分為三大類： 1. Microsoft Internet Explorer 2. Mozilla Firefox 3. Google Chrome(強烈建議使用，因為最隱定、資源最多) 因此，如果你的電腦尚未安裝「Google Chrome瀏覽器」時，連到以下的網方官站下載並安裝。 https://www.google.com/chrome/browser/ 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

2-1.3安裝App Inventor 2開發套件 當我們利用App Inventor 2開發完成程式之後，如果想利用「模擬器(Emulator)」或透過USB連接手機來瀏覽執行結果時，則必須要先安裝App Inventor 2開發套件。 步驟一：連接到官方網站 網站http://appinventor.mit.edu/explore/ai2/setup.html 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法 點「Instructions」

點「Instructions for Windows」項目 步驟二：選擇安裝App Inventor軟體的版本 點「Instructions for Windows」項目 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

點「Download the installer」 步驟三：下載檔案 點「Download the installer」 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法 下載的軟體名稱：AppInventor_Setup_Installer_v_2_2.exe

步驟四：安裝檔案 。。。。 請參考課本!!! 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

步驟五：啟動aiStarter 【說明】在您安裝完成之後，如果你的電腦是64位元時，則「App Inventor 2開發套件」會安裝到「C:\Program Files (x86)\AppInventor」目錄下，其中「aiStarter檔案」就是用來負責「App Inventor 2」與「模擬器(Emulator)」及「USB連接的手機」之間溝通。因此，想要利用模擬器來執行「App Inventor 2」程式時，必須要先啟動此檔案。 【注意】 當你安裝完成「安裝App Inventor 2開發套件」之後，系統會自動將「aiStarter檔案」在桌面上建立捷徑。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

步驟六：查看App Inventor 2開發套件 【說明】 在第五步驟中，我們可以查看「commands-for-Appinventor」目錄下，有許多重要的檔案，例如：「emulator檔案」就是用來啟動模擬器。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

2-1.4 安裝MIT AI2 Companion 當我們開發「App Inventor 2」程式之後，除了利用「模擬器(Emulator)」及USB連接的手機」來測試執行結果之外，其實最方便的方法就是利用WiFi連線，也就是說，你的手機可以直接透過WiFi連線就可以測試程式。 【方法】在手機端安裝「MIT AI2 Companion」軟體 【取得方式】 1.Google Play商店(下載、安裝及開啟) 2.MIT App Inventor官方網站 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

1.Google Play商店(下載、安裝及開啟) 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

2.MIT App Inventor官方網站 http://appinventor.mit.edu/explore/ai2/setup-device-wifi.html 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

2-2 進到App Inventor2雲端開發網頁 由於App Inventor2是一套「雲端網頁操作模式」的整合開發環境，因此，我們就必須要先利用瀏覽器(建議使用Google Chrome)來連接到MIT App Inventor的官網，其完整的步驟如下： 步驟一：開啟Google Chrome瀏覽器，並連到http://ai2.appinventor.mit.edu ，此時，如果你尚未利用Google帳戶登入，則它會自動導向Google帳戶登入畫面。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【說明】 此時，MIT App Inventor的官方網站會詢問，是否可以允許存取你的Google帳戶，建議按「Allow」鈕。它會將Google帳戶分享給App Inventor 2，請您放心，不會將您在Google帳戶中的密碼及個人資訊分享出去。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

步驟二：「App Inventor」會詢問你是否要填寫「問卷調查」。 請暫時按「Take Survey Later」。 步驟三：出現歡迎的畫面，請再按「Continue」鈕即可。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

步驟四：App Inventor的「專案管理平台」會去檢查你目前是否已經開發App Inventor專案程式，如果沒有就會出現以下的畫面： 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

步驟五：App Inventor的專案管理平台 【說明】由於尚未新增「專案名稱」，所以，目前沒有任何專案在平台上。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

2-3 App Inventor2的整合開發環境 如果想利用「App Inventor2」來開發Android App時，必須要先熟悉App Inventor2的整合開發環境的操作程序，並依照以下的步驟來完成。 步驟一：新增專案(New Project) 【專案名稱的命名之注意事項】 1. 不可使用「中文字」來命名。 2. 只能使用大、小寫英文字母、數字及底線符號「_」。 3. 專案名稱的第一個必須是大、小寫英文字母。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

步驟二：進入設計者 (Designer) 畫面 在「新增專案(New Project)」之後，App Inventor 2開發平台立即進入到Designer的開發介面環境。 基本上，「App Inventor2」拼圖語言的操作環境中，分成四大區塊： 1.Palette(元件群組區) 2.Viewer(手機畫面配置區) 3.Components(專案所用的元件區) 4.Properties(元件屬性區) 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

Designer的開發介面環境 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【四大區塊說明】 1.Palette(元件群組區) 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

2.Viewer(手機畫面配置區) 用來設計使用者手機端操作介面。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

3.Components(專案所用的元件區) 在本專案中，使用者手機端操作介面之所有元件，包含: 可視元件(例如：Button)及不可視元件(例如：Sound)。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

4.Properties(元件屬性區) 用來設定Viewer中，某一元件的屬性，並且不同的元件會有不同的屬性。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

2-4 撰寫第一支App Inventor程式 由於App Inventor是一種「視覺化」的開發工具，也就是說，App Inventor程式所設計出來的畫面，使用者可以在手機上輕鬆操作所需要的功能。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【開發流程】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

[五大步驟] 我們在撰寫手機程式之前，必須要先了解每一支App Inventor程式都是由兩個部份組合而成，分別為「介面」及「程式」。因此，必須要完成以下五大步驟： 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【實例】 請設計一個介面，可以讓使用者按下「Button」鈕，顯示「我的第一支手機APP程式」訊息的程式。 步驟一：從「元件群組區中的User Interface」拖曳元件到「手機畫面配置區」 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法 說明：請加入「Label1與Button1」兩個元件。

步驟二：在「專案所用的元件區」修改「選取元件」的元件名稱 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法 說明：相同的方法，再將Button1更名為「btnRun」。

說明：每一個元件的相關屬性的詳細介紹，請參考第三章。 步驟三：設定元件的屬性之屬性值 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法 說明：每一個元件的相關屬性的詳細介紹，請參考第三章。

步驟四：撰寫拼圖程式 (一)加入btnRun元件的程式拼圖 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

(二)加入lblResult元件的程式拼圖 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

(三)加入「來源字串資料」的程式拼圖 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

步驟五：測試執行結果(模擬器測試) 在我們利用App Inventor程式中的「Designer模式(手機介面設計)」及「Blocks模式(拼圖程式設計)」之後，接下來，就可以利用「模擬器」來進行測試。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【注意】 在進行「模擬器」測試時，必須要先啟動aiStarter及在模擬器上安裝MIT AI2 Companion。其程序如下： 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【aiStarter儲存目錄】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

如果在你啟動「模擬器」時，尚未先啟動aiStarter程式，則會顯示以下的訊息方塊。此時，請按「OK」鈕即可。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

當你啟動aiStarter，並執行「Connect/Emulator(模擬器)」時，此時，畫面上就會出現「模擬器」，請您將鎖頭往右移動，即可解鎖。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

在過數十秒後，系統自動啟動「模擬器」，但是，還是無法順利執行App Inventor程式。因此，還必須要在模擬器上安裝MIT AI2 Companion元件程式，則會顯示以下的訊息方塊。此時，請按「OK」鈕即可。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

（二）在模擬器上安裝MIT AI2 Companion 在上圖中按下「OK」鈕之後，此時，就會出現「軟體更新」的對話方塊，請您按「Got it」即可。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

在「模擬器」上就會出現「Replace application」對話方塊，請按「OK」鈕，再按「Install」鈕。此時，就會開始安裝「MIT AI2 Companion」。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

最後，再安裝完成之後，再按「Done」即可。此時，「模擬器」的桌面上就會出現「MIT AI2 Companion」圖示。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

此時，請你再重新執行一次「Emulator」，但是，如果無法選擇此項目時，請先按「Reset Connection」來重新連線。 （三）在模擬器測試 此時，請你再重新執行一次「Emulator」，但是，如果無法選擇此項目時，請先按「Reset Connection」來重新連線。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【執行畫面】 建議：盡量使用實機進行測試，因為模擬器的啟動必須花費較長的時間，並且有些功能無法模擬，例如：照像機、感測器…等 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法 建議：盡量使用實機進行測試，因為模擬器的啟動必須花費較長的時間，並且有些功能無法模擬，例如：照像機、感測器…等

2-5 App Inventor程式的執行模式 1. Emulator(利用模擬器測試) 2. USB(利用USB線來連接到手機測試) 3. AI Companion(利用WiFi連接到手機測試) 4. App(provide QR code for .apk) 利用QuickMark軟體來掃瞄QR Code以取得.apk檔 5. App(save .asp to my computer) 直接儲存到你的電腦之下載目錄中。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

2-5.1 利用模擬器 (Emulator) 【適用時機】沒有購買智慧型手機的初學者， 亦即沒有實機也可以撰寫Android App。 在前一單元中，我們已經利用「模擬器(Emulator)」來執行「App Inventor 2」程式，但是，你是否發現利用「模擬器(Emulator)」來執行時，等待時間較長，並且它無法模擬感測器(例如：溫度、聲量、亮度…)。 【適用時機】沒有購買智慧型手機的初學者， 亦即沒有實機也可以撰寫Android App。 【優點】 1.方便 2.無需購買智慧型手機 【缺點】 1. 執行時，等待時間較長 2. 無法模擬感測器、照相機… 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【操作方式】Connect／Emulator 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

2-5.2 USB連接手機 【適用時機】沒有WiFi及3G的環境中。 【優點】可以真實模擬感測器、照相機等功能。 【缺點】 雖然，利用模擬器(Emulator)可以讓沒有購買智慧型手機的初學者也可以撰寫Android App，但是，當初學者開發App必須要使用感測器時，則無法測試其功能。因此，就必須要購買智慧型手機透過USB與電腦連接進行測試。 【適用時機】沒有WiFi及3G的環境中。 【優點】可以真實模擬感測器、照相機等功能。 【缺點】 1. 必須購買智慧型手機 2. 必須要有手機的驅動程式 3. 必須要有USB傳輸線 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

USB連接手機【缺點】(續…) 4. 必須要在手機上設定安全性及開發人員選項 5.並非每一台實機(智慧型手機)都可以與電腦連接成功，部份智慧型手機無法順利連線。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【操作方式】Connect／USB 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

2-5.3 WiFi連接到手機 在前面已經介紹過兩種方法，分別利用「模擬器(Emulator)」及「USB連接的手機」來測試執行結果之外，其實最方便的方法就是利用WiFi連線，也就是說，你的手機可以直接透過WiFi連線就可以測試程式。 【優點】 1.快速又方便。 2.無線同步。 【缺點】 1.在學校的電腦教室中，必須要同一個網段。 2.如果在WiFi不隱定的環境中，無法順利測試程式。 【解決方法】 1.架設可攜式Wifi無線基地台 2.透過3G無線網路(下一單元2-5.4，取得封裝檔(.apk)安裝到手機) 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【方法】MIT AI2 Companion 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【操作方式】 步驟一：您的手機連上WiFi 步驟二：您的手機開啟MIT AI2 Companion 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

步驟三：Connect／AI Companion  圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

步驟四：利用您的手機「MIT AI2 Companion」程式掃瞄步驟三的QR code。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

2-5.4 取得封裝檔(.apk)安裝到手機 【適用時機】 1. 沒有WiFi，而有3G的環境 2. 完成的作品在手機上執行 在前面介紹三種方法中，除了Emulator方法在「模擬器」上執行外，其他兩種WiFi及USB連接手機，皆是把手機當作「顯示器」來顯示執行結果，並沒有真正將封裝檔(.apk)安裝到手機中，因此，如果想將完成的作品在手機上執行時，則必須要使用此方法(App(provide QR code for .apk))。 【適用時機】 1. 沒有WiFi，而有3G的環境 2. 完成的作品在手機上執行 【優點】真正將封裝檔(.apk)安裝到手機 【缺點】 必須要先下載再安裝，所以，處理時間較「WiFi連接到手機」方式久。 【方法】利用QuickMark軟體來掃瞄QR Code以取得.apk檔 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【操作方式】 Build／App(provide QR code for .apk) 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

2-5.5 下載封裝檔(.apk)到電腦 當我們好不容易開發一套非常好用、又好玩的App時，往往都會想分享給好朋友，此時，你可以先利用「下載封裝檔(.apk)到電腦」方式，再轉換給其他人。 【適用時機】 1.分享App給他人 2.欲上架到Google Play商店 【優點】可以讓多人下載、安裝及使用 【方法】直接儲存到你的電腦之下載目錄中。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【操作方式】Build／App(save .asp to my computer) 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

2-6 管理自己的App Inventor專案 當我們利用App Inventor程式開發許多Android App時，往往都必須要進行各種管理，例如： 1. 「新增」專案 2. 「刪除」專案 3. 「複製」專案 4. 「匯入」原始檔 5. 「匯出」原始檔 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

2-6.1 新增專案 在前面的單元中(ch2-3)已經學會如何「新增專案」(New Project)，其實它的作法有兩種： 2-6.1　新增專案 在前面的單元中(ch2-3)已經學會如何「新增專案」(New Project)，其實它的作法有兩種： 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法 說明：當我們要撰寫每一支App Inventor程式時，第一個工作就是「新增」專案。

2-6.2　刪除專案 當我們在撰寫一套功能完整的程式時，往往在這個過程中，會製作多個測試版的專案，等真正開發完成(最後一個版本)時，在「My Projects」我的專案畫面中，就可以刪除非必要的測試版本專案。 【操作方式】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

2-6.3　複製專案 當我們在撰寫一套功能完整的程式時，往往要定時備份目前完成的專案，以備不時需，因此，我們選擇「Project／Save project as…」功能來進行複製專案。 【操作方式】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

請再回到「My Projects」我的專案畫面中，此時，就可以看到備份的「MyfirstApp_copy」專案了。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法 【注意】 在進行「複製專案」時，務必要在「Designer模式」下進行，而不得在「My Projects」的專案畫面。

2-6.4　匯出原始檔 當我們利用App Inventor程式開發Android App時，如果想要備份原始檔，或將原始檔提供給其他同學修改時，此時，就必須要「匯出原始檔(.aia)」的功能。 【操作方式】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

2-6.5　匯入原始檔 相同的，當我們想要載入以前備份原始檔，或取得其他同學修改後的原始檔時，此時，就必須要「匯入原始檔(.aia)」的功能。 【操作方式】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

2-6.5 匯入原始檔(續…) 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 2-6.5　匯入原始檔(續…) 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法