App Inventor 2

2012/10/28 謝碧景(c)編製更新

學習目標

    • 瞭解 App Inventor 2 軟體之緣由、官方網站、學習指引、相關資源等的蒐集與應用。

    • 學會 App Inventor 2 開發工具檔軟體之下載與安裝。

    • 學會雲端之專案的匯出與匯入，以利保存備份。

一、簡介

◆ MIT App Inventor 官方網站 http://appinventor.mit.edu/ → Create apps! (繁體中文)

  • App Inventor 原是Google實驗室（Google Lab）的一個子計畫，由一群 Google工程師與勇於挑戰的 Google使用者共同參與。Google App Inventor是一個完全線上開發的 Android 程式環境，以拼圖式方塊編撰程式，用瀏覽器做為管理工具，所有程式及資源皆存放於雲端，此外亦支援樂高 NXT機器人。App Inventor於 2012年1月1日移交給麻省理工學院(MIT)行動學習中心，並已於3月4日以MIT App Inventor名稱公佈使用。2013年8月提升其功能，並更名為App Inventor 2。

  • MIT 行動學習中心發表 App Inventor 2，省略需要使用 Java 才能開啟的 Blocks Editor，將其整合在網頁中即可使用，操作以下拉式選單選取指令。原有的 App Inventor 更名為 App Inventor Classic。

  • App Inventor2 原始檔格式是 .aia，而 App Inventor Classic 原始檔格式為 .zip，兩者不通用。App Inventor2 具多國語系介面，含繁體中文，方便初學者學習使用。

二、 建置App Inventor 2 開發環境

(一)開發環境

    • App Inventor 2 開發環境在網路雲端上，本機只需安裝App Inventor 2 的開發工具檔，即可開始運用App Inventor 2 編撰App應用程式，接著在模擬器中安裝MIT AI2 Companion元件即可在模擬器中執行應用程式專案，或以手機執行應用程式專案。

(二)安裝開發工具檔

三、操作大綱

(一) 建立專案 (New project )

  1. Designer 畫面編排：設計 Android 裝置的使用者介面(即畫面配置區)
    →(1)選擇程式元件(Palette)、(2)設定元件屬性(Properties) 。

  2. Blocks Editor 程式設計：程式編撰區，即設計程式的控制及邏輯。

  3. 測試執行：模擬器 或 使用 Android 裝置下載安裝檔.apk 測試執行專案程式。

＊註：專案管理軟體：GanttProject、Trello

(二) 專案主要模式

  1. 外觀編排(Designer)：該模式為設計手機畫面區，含元件面板(Palette)、工作面板(Viewer) 、元件清單(Components)、元件屬性(Properties)。

  2. 程式設計(Blocks)：該模式為程式編輯控制與邏輯的地方，會以新視窗的方式顯示程式編輯區。

  3. 模擬器或手機執行程式：該模式為測試程式之方式，如下三種，即可呈現程式執行之結果。

(1)直接以WiFi連線電腦與手機。

(2)在 Blocks(程式設計) 開啟 Emulator(模擬器)。

(3)以USB連接電腦與手機。

(三) 專案介面：講義

  • 外觀編排(Designer)：

  • 程式設計(Blocks)：

模擬器emulator

(一)匯出專案 *.aia

    • 完成App Inventor 2 程式編撰後，系統會將原始檔包裝成 .aia 檔案格式，供使用者下載匯出(Export)以利備份專案，操作如下：選取【專案→我的專案】即如下左圖，在專案清單中【勾選欲下載之專案→選取：專案→匯出專案(.aia)】即如下右圖，例如：FirstApp.aia 檔。

(二) 匯入專案(.aia)

  • 如上圖，在專案清單畫面選取【專案→匯入專案(.aia)】則如下圖，再選取【選擇檔案→例如：HelloPet.aia 檔→確定】，即可將別人分享之.aia 檔匯入(Import)雲端我的專案清單中。

＊註：App Inventor 2 指令中文化→內建指令 http://www.appinventor.tw/ai2_chinese 《摘自： AppInventor中文學習網》

§範例彙整

【基礎應用】

  • 練習1：以文字顯示，建立手機程式。【重點：學會 Screen 元件及 Label 標籤元件(即顯示文字)之設計與應用】。 教學影片 (專案名稱：FirstApp.aia)。

  • 練習2：以圖形顯示，播放寵物音效 (例：寵物圖案kitty.png、meow.mp3) 。【重點：學會 Button按鈕元件(應用程式與使用者互動)及 Label標籤元件(顯示文字)之設計與應用】。 (專案名稱：HelloPet.aia)。

  • 練習3：拖曳滑桿操控圖片大小 (例：圖案 Wasily_Kandinsky.jpg)。【重點：學會 Image圖片元件及 Slider滑桿元件之設計與應用】。(專案名稱：Slider.aia)

  • 練習4：號碼顯示。【重點：學會Layout介面配置類別中 HorizontalArrangement(水平)、VerticalArrangement(垂直)、PasswordTextBox1(密碼輸入盒)、TextBox(文字輸入盒)等元件之設計與應用】。(專案名稱：Display.aia)

  • 練習5：攝氏溫度轉換華氏溫度程式。【提示：F=(9/5)*C+32】【重點：學會Layout介面配置類別中 HorizontalArrangement、TextBox(文字輸入盒)元件及基本運算之設計與應用】。(專案名稱：C2F_2.aia)

    • 延伸練習：求矩形面積 (專案名稱：Area.aia)。

  • 練習6：BMI身體質量指數之判斷：輸入身高及體重，求個人BMI值？並判斷身體質量指數標準與否？BMI=體重/(身高*身高)，身高以公尺(M)為單位，體重以公斤(KG)為單位。【重點：學會判斷控制&迴圈指令的設計與應用】。(專案名稱：BMI.aia)。

BMI<18.5，請輸出“體重過輕”。

18.5≦BMI<24，請輸出“標準體重”。

24≦BMI<27，請輸出“過重”。

BMI≧27，請輸出“肥胖家族”。

  • 練習7：猜數字遊戲：由亂數產生1~100間的一個數字，請猜猜此數，並以訊息提醒太小，及顯示所猜的次數。【重點：學會判斷控制&迴圈指令，數學Math指令區中random integer，及Notifier對話框元件的設計與應用】。(檔名：Guess.aia→有 Notifier對話框元件，ex7_Guess.aia→無 Notifier對話框元件)。

  • 練習8：電腦隨機猜拳→ 剪刀、石頭、布。【重點：學會Procedure程序、List清單及物件清單的設計與應用】。(檔名：finger_guessing.aia)

    • 延伸思考：玩家與電腦玩猜拳遊戲。【重點：學會程序、清單、物件清單及判斷控制指令的設計與應用】。(檔名：finger_guessing_ex8.aia)【提示：比較出拳】

  • 練習9：建立班級相簿集錦。【重點：學會『Media(多媒體)類別中Camera(照相機)元件及ImagePicker(圖像選擇器)元件的設計與應用】。(檔名：camera.aia)

  • 練習10：畫布塗鴉。【重點：學會『Camera(照相機)、ImagePicker(圖像選擇器)及Canvas畫布元件的設計與應用】。(檔名：Canvas.aia)

    • 延伸思考：呈上題，請增加Slider滑桿元件以拖曳方式設定畫筆粗細，可選擇不同畫筆顏色塗鴉。【重點：學會『Camera(照相機)、ImagePicker(圖像選擇器)、Slider滑桿及Canvas畫布等元件的設計與應用】。(檔名：Canvas_ex10.aia)

  • 練習11：簡易鋼琴：當按下琴鍵，分別彈奏Do、Re、Mi、Fa、So、La、Si 音效。【重點：學會Media(多媒體)類別中Sound(音效)元件的設計與應用】。 琴鍵圖檔及7個音效檔。(檔名：SoundPiano.aia)

  • 延伸思考1：電子琴 音效檔(Do、Re、Mi、Fa、So、La、Si、Do+，共8個音的電子琴)、key圖示。【重點：學會『Media(多媒體)類別中Sound(音效)元件的設計與應用】。(專案名稱：Piano_ex11.aia)

  • 延伸思考2：音樂點播站：展示音樂曲目以利點播、暫停、停止。【重點：學會 ListPicker清單選擇器、Button按鈕、Player音樂播放器等元件的設計與應用】。(專案名稱：Player_ex11_2.aia)

【遊戲篇】

    • 延伸思考3：點我點我~地鼠。【重點：學會『垂直配置』編排與『Sound(音效)& Player(音樂播放器)，及Clock(計時器)元件的設計與應用】。(檔名：mole.aia)。

    • 延伸思考4：水果拉霸。【重點：學會以行動電話尺寸預覽設計版、元件及按鈕的隱藏與顯示、以計時器控制另一個計時器、隨機選取圖片。(檔名：slot.aia)。【遊戲規則：花色相同3個+5，相同2個+2，皆不同-5，直到0元。】

  • 練習12：在畫布中央放置一個球，當球被按下，球會以任意方向發出，球若碰到畫布邊緣則反彈，球若碰到畫布下邊界則會發出音效聲( Pop.wav、ball.png)。【重點：學會『繪圖動畫(Drawing and Animation)』類別中元件的設計與應用】。(檔名：Ball.aia)

  • 練習13：射擊蝙蝠，蝙蝠在空中左右飛翔，當碰到左右邊界即返回飛翔，按下螢幕下方紅點，即會向上射擊蝙蝠，當紅點觸碰到蝙蝠則得1分。【重點：學會『繪圖動畫(Drawing and Animation)』類別中Canvas畫布、Ball(球形精靈)元件的設計與應用】。(檔名：Shoot.aia)

    • 延伸思考：乒乓球遊戲：當球被按下，球會以任意方向發出，球若碰到畫布邊緣則反彈，遊戲者可左右拖曳移動畫布下方之擋板，當球碰到下方擋板可得10分，球若碰到畫布下邊界則結束遊戲，並將球移至螢幕中央；畫布左上方會記錄得分。模擬器執行畫面如下圖。(專案名稱：PingPong.aia)

  • 練習14：播放 YouTube 音樂。【重點：學會Connectivity(通訊)類別中【ActivityStarter啟動器】元件的設計與應用】。(檔名：YouTube.aia)。

    • 延伸思考：請以多頁面製作學校簡介(專案名稱：School.aia)，或個人之高中學習歷程作品展示。【重點：學會Connectivity(通訊)類別中【ActivityStarter啟動器】及【WebViewer網路瀏覽器】元件的設計與應用】(專案名稱：ePo.aia)。

  • 練習15：以 GPS 取得目前位置。【學會Sensors(感測器)類別中【LocationSensor(位置感測器)】元件的設計與應用】。(檔名：gps.aia)。

【雲端資源應用】~~〈專題初探筆記〉

  • 專題1：英文單字集：先建立一英文單字及中文說明之資料庫(以CSV格式的文字檔案)，當按下【隨機選字】按鈕，即隨機由資料庫中選一筆單字，播放出，並將該中文說明一併顯示；當按下【再唸一次】按鈕，即再播放一次該單字。【重點：學會資料庫結合『TextToSpeech文字語音轉換器』、『File檔案管理』及『Web網路』元件的設計與專題應用】。(專案名稱[本機版]：vocabulary.aia、[雲端版『 Dropbox 免費網路空間』]：vocabulary_web.aia)

    • 延伸思考1：英聽單字考試，請顯示其得分。(檔名：voiceExam.aia)

    • 延伸思考2：學校簡介(專案名稱：School.aia)／個人之高中學習歷程作品展示。(專案名稱：ePo.aia)。

  • 專題2：匯率換算，先選擇台幣欲兌換之幣別，再輸入金額，即可試算，亦可『交換幣別』或選擇其他幣別兌換。【重點：學會Google試算表之雲端資源及『Web網路、ListPicker清單選擇器』元件的設計與專題應用】。(專案名稱：ExchangeRate.aia)。

    • 延伸思考：不同幣別之兌換。(檔名：CurrencyExchange.aia)

  • 專題3：數位作品展示，先『選取動畫』名稱，再按下『播放』，若按下『結束』則結束程式。【重點：學會Google試算表之雲端資源及『Web網路、ActivityStarter啟動器』元件之設計與專題應用】。(專案名稱：video.aia)。參閱：講義〈感測器&通信連接〉

    • 延伸思考：請製作個人之高中學習歷程網站作品展示。(專案名稱：p4_2_ePo.aia)。

  • 專題4：台灣即時空氣品質監測。【重點：學會『OpenData.epa』雲端資源(以JSON格式檔案)及『Web網路、ListPicker清單選擇器』元件的設計與專題應用】。(專案名稱：pm25.aia)。

  • 專題5：急難救援。【重點：學會Google試算表之雲端資源及『LocationSensor(位置感測器)、ActivityStarter(activity啟動器)』元件之設計與專題應用】。(專案名稱：help.aia)。 參閱：講義〈感測器&通信連接〉

  • 專題6：健康計步器。【重點：學會使用者介面、介面配置、感測器(Pedometer計步器)、資料儲存(tinyDB微型資料庫)元件的設計與應用】。(檔名：Pedometer.aia)。

§工具網