第二章 App Inventor程式的開發環境

Presentation on theme: "第二章 App Inventor程式的開發環境"— Presentation transcript:

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

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

3 本章內容 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 演算法的效率評估 指用來計算某些演算法所撰寫的程式，在經過編譯之後，實際執行所需要的時間。

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

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

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

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

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

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

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

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

12 步驟五：啟動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來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

53 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來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

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

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

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

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

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

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

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

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

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

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

64 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來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

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

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

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

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

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

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

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

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

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

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

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

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