延伸學習:MIT App Inventor 2

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

 學習目標

  • 瞭解 MIT App Inventor 軟體之緣由、官方網站、學習指引、相關資源等的蒐集與應用。
  • 學會 MIT App Inventor2 開發工具檔軟體之下載與安裝。
  • 學會雲端之專案的匯出與匯入,以利保存備份。

 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日移交給麻省理工學院行動學習中心,並已於3月4日以MIT App Inventor名稱公佈使用。

  • MIT 行動學習中心發表 App Inventor 2,省略需要使用 Java 才能開啟的 Blocks Editor,將其整合在網頁中即可使用,操作以下拉式選單選取指令。原有的 App Inventor 更名為 App Inventor Classic(目前可繼續使用,未來可能會停用)。【摘自:AppInventor中文學習網

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

 建置App Inventor2 開發環境

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

  • 安裝App Inventor2 的開發工具檔,版本分述如下:
 MIT App Inventor 2 http://ai2.appinventor.mit.edu/【參閱:AppInventor中文學習網App Inventor 2 來了



 
App Inventor Classic http://beta.appinventor.mit.edu/
  • App Inventor 是圖形化的 Android 開發環境,其裡面也是Java;不建議把.zip檔解壓,可能會造成檔案無法上傳;App Inventor是一個『Java Bridge』的平台。
  • 測試Java環境設定:https://www.java.com/en/download/testjava.jsp 網頁會顯示正在運行的Java版本。
    1. Prepare Your System (Java)
    2. Install App Inventor Software →  軟體:AppInventor_Setup_Installer_v_1_2.exe  (Windows92 MBMACLinux)
    3. Start App Inventor

 操作大綱

 設計步驟

建立專案(New project )
1.使用
Designer畫面:設計Android裝置的使用者介面(即畫面配置區)→(1)選擇程式元件(Palette)、(2)設定程式元件的屬性(Properties) 。
2.使用Blocks Editor畫面:設計程式的控制及邏輯(即程式碼編撰)。
3.使用Android裝置或模擬器測試執行程式。

 建置專案&操作介面: 講義

 測試執行程式 講義

 常用元件之應用 講義

 流程控制指令應用 講義


 MIT App Inventor 2 的三個主要模式

 1.新建專案(New):選擇程式元件(Palette) → 2.介面設定元件屬性(Properties) → 3.程式設計(Blocks)4.測試執行(模擬器 或 下載安裝檔.apk)
  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中文學習網

 申請Google Application Engine 應用服務引擎 GAE 官方網站:https://code.google.com/appengine/ (免費→GAE可架設您專屬的網路伺服器) 

*註:亦可如下建立 local 伺服器測試:
(1) Python官方網站:http://www.python.org/ 下載最新的 Python安裝檔
(2)Google Application Engine 應用服務引擎 GAE 官方網站:https://code.google.com/appengine/下載最新的 GAE安裝檔
(3)安裝後啟動Google App Engine Launcher


 重點提示
  • App Inventor 有兩種副程式應用:procedure、procedureWithResule 位於Built-In→Definition指令中,其中procedureWithResule會傳回一個結果return。建立副程式後會自動產生一個呼叫(call)指令,位於My Block→My Definitions 指令中,可呼叫對應之副程式。App Inventor 不允許在同一個程式中有兩個名稱相同的副程式。【如:練習2-1 (檔名:Area_2)。】
  • List清單就是一般程式語言中的『陣列』觀念,『陣列』如同每戶住家之信箱,信箱以門牌號碼為編號,郵差只要依號碼投遞郵件,住戶即可在自己的信箱取得郵件。一般程式語言中陣列編號從0開始,而List清單之起始值為1

  • ActivityStarter 元件會呼叫手機內程式的函數及URL連接函數,例如啟動瀏覽器等功能。 

 範例彙整

基本應用

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

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

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

 練習4號碼顯示【重點:學會界面布局 HorizontalArrangement(水平布局)VerticalArrangement(垂直布局)、PasswordTextBox1(密碼輸入器)、TextBox(文字方塊)等元件之設計與應用】。(專案名稱:Display.aia)

 練習5攝氏溫度轉換華氏溫度程式。提示F=(9/5)*C+32】【重點:學會 HorizontalArrangementTextBox(文字方塊)元件及基本運算之設計與應用】。(專案名稱:C2F_2.aia)
  • 延伸練習:求矩形面積 (專案名稱:Area.aia)。
 練習6BMI身體質量指數之判斷:輸入身高及體重,求個人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_8_1.aia)
 練習9:請運用『多媒體』類別中Camera(照相機)元件及ImagePicker(圖片選擇器)元件建立班級相簿集錦。【重點:學會『Media(多媒體)類別中元件的設計與應用】(檔名:camera.aia)

 練習10:簡易鋼琴:當按下琴鍵,分別彈奏Do、Re、Mi、Fa、So、La、Si 音效。【重點:學會Media(多媒體)類別中Sound(音效)元件的設計與應用】 琴鍵圖檔及7個音效檔(檔名:SoundPiano.aia)
  • 延伸思考:電子琴  音效檔(Do、Re、Mi、Fa、So、La、Si、Do+,共8個音的電子琴)、key圖示【重點:學會『Media(多媒體)類別中元件的設計與應用】(專案名稱:Piano.aia)
 練習11在畫布中央放置一個球,被按下,球會以任意方向發出,球若碰到畫布邊緣則反彈,球若碰到畫布下邊界則會發出音效聲( Pop.wavball.png)【重點:學會『繪圖動畫(Drawing and Animation)』類別中元件的設計與應用】(檔名:Ball.aia)
  • 延伸思考:乒乓球遊戲:被按下,球會以任意方向發出,球若碰到畫布邊緣則反彈,遊戲者可左右拖曳移動畫布下方之擋板,當球碰到下方擋板可得10分,球若碰到畫布下邊界則結束遊戲,並將球移至螢幕中央;畫布左上方會記錄得分。模擬器執行畫面如下圖。(專案名稱:PingPong.aia)
遊戲開始:
  遊戲中,紀錄得分:

 練習12:播放 YouTube 音樂【重點:學會Connectivity(通信連接)類別中【activity啟動器元件的設計與應用】(檔名:YouTube.aia)。
  • 延伸思考:請以清單設計,選取線上播放音樂 (檔名:OnlineMusic_List_1D)。
  •  練習13:以 GPS 取得目前位置。學會Sensors(感測器)類別中【LocationSensor(位置感測器)】元件的設計與應用(檔名:gps.aia)。

    練習:List 清單應用:一維陣列加總【數值】。


    【雲端資源應用

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

     專題2:台灣即時空氣品質監測【重點:學會OpenData.epa雲端資源(以JSON格式檔案)Web客戶端ListPicker清單選擇器元件的設計與專題應用】(專案名稱:pm25.aia)


     專題3:匯率換算,先選擇台幣欲兌換之幣別,再輸入金額,即可試算,亦可交換幣別』或選擇其他幣別兌換。【重點:學會Google試算表雲端資源Web客戶端元件的設計與專題應用】(專案名稱:ExchangeRate.aia)。


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

    • 延伸思考:請製作個人之高中學習歷程網站作品展示(專案名稱:p4_2_ePo.aia)
     專題5:急難救援。【重點:學會Google試算表雲端資源LocationSensor(位置感測器)、ActivityStarter(activity啟動器)元件之設計與專題應用】(專案名稱:help.aia) 參閱:講義〈感測器&通信連接



     數位學習網

     AppInventor中文學習網http://www.appinventor.tw/
     App Inventor 2-高中磨課師「基礎程式設計」課程網站:http://appmoocs.blogspot.tw/

     用視覺化語言學手機程式設計:App Inventor 2


     程式特訓班 | 藏經閣專欄手機應用程式設計超簡單:App Inventor 2初學特訓班/文淵閣工作室著。碁峰資訊。ISBN 978-986-347-510-1

     工具網

     Google AutoDraw 人工智慧的線上繪圖服務:https://www.autodraw.com/

     MobilesWall:免費手機、平板電腦高質感桌布 http://www.mobileswall.com/
     IconsPedia:Icons & Icon Packs→Download Free PNG Icons
     App Iconizer:線上將圖片轉為 iOS、Android App 各種尺寸圖示 https://appiconizer.com/
     Windows Phone Icons Maker:Windows手機圖標製造商,可載入圖像.修剪.存圖標。含173x173Background.png、62x62ApplicationIcon.png…
     Mobile Website Speed Testing Tool:Google 提供行動裝置友善(Mobile Friendliness)、行動裝置載入速度(Mobile Speed)以及桌面端載入速度(Desktop Speed)三大項目,依得分有三種評價:Good、Fair 和 Poor。
     GameSounds.xyz:Royalty free or public domain game music and sounds.網址:https://gamesounds.xyz/ 
     OpenData.epa 行政院環境保護署 環境資源資料開放平台:http://opendata.epa.gov.tw/
     JSON Editor Online -- view, edit and format JSON onlinehttp://jsoneditoronline.org/

     競賽

     第二屆全國校園雲端創新應用大賽作品展示