新建專案&操作介面

2015/02/15 謝碧景(c)編製更新 

 學習目標 MIT App Inventor 2繁體中文: Create apps! 

  • 瞭解 App Inventor 2 操作環境、大綱及使用者介面之設計與應用。
  • 學會『新建專案』、『Designer(畫面編排)』及『Blocks(程式設計)』之編排與設計應用。
  • 學會使用者介面(User Interface)中Label 標籤、Button 按鈕、Image 圖片及 Slider 滑桿等元件及多媒體(Media)中Sound 音效元件設計與應用。
  • 學會元件、事件、屬性、方法之設計與應用

 操作大綱

 設計步驟

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

一、新建專案

1.先連結官網( http://appinventor.mit.edu/)→再按下右上方【Create】按鈕,建立專案程式。注意:請先登入自己的Gmail信箱與密碼。瀏覽器可採Chrome或Firefox,操作如下:


2.如下圖,詢問是否允許MIT App Inventor 2 存取這個Google帳戶,請選取Allow】按鈕。


3.如下圖,登入MIT App Inventor 2網站之歡迎畫面,請選取Continue】(繼續)按鈕,準備開始建置新專案



4.建置新專案:如下圖,在專案管理頁面中先點選【Start new project】新增專案,再輸入專案名稱,後按下【OK】立即產生一個新專案,如範例:FirstApp。專案名稱只能使用大小寫英文字母、數字及_符號、且第一個字元必須是英文字母

專案管理頁面】語系→English:


語系→繁體中文:

 新增專案名稱:


*註1:欲切換語系為中文,請先選取右上方English下拉式選單選取繁體中文,即可將操作環境變更為繁體中文。

*註2:功能列之子功能:

語系→English:



語系→繁體中文:


 

 


二、 Designer頁面(畫面編排)

 專案版面配置頁面含4個區塊:Palette(元件面板)、Viewer(工作面板)、Component(元件清單)、Properties(元件屬性),如下圖,左上方為專案名稱。
  • 語系→English

  • 語系→繁體中文:


 測試執行程式詳見〈測試執行程式→ 模擬器〉講義。


三、範例應用I

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

(一) 畫面編排(Designer):即版面配置頁面。

設定Screen1元件的屬性值(Properties):



*註1:請在Designer模式下設定
BackgroundColor(背景顏色)
Text(欲顯示的文字內容)
Width(Fill parent元件寬度與螢幕同寬)

*註2:Label 標籤元件:其用途為顯示文字
註3:Screen 元件產生應用程式之頁面,一個Screen 元件就是一頁,您可在Screen1頁面中加入其他元件。

 
Screen 元件的常用屬性如下:
 屬性說明 
 應用說明 設定本頁面說明文字。
 App名稱 設定應用程式名稱,可使用中文。
 背景顏色 設定背景顏色。
 背景圖片 設定背景圖片。
 畫面關閉動畫 設定頁面關閉時呈現的動畫效果。
 圖示 設定應用程式圖示(icon),格式為.png .jpg調整圖檔解析度為『48x48』像素
 畫面關閉動畫 設定頁面開啟時呈現的動畫效果。
 螢幕方向 設定螢幕方向,有3種屬性值:
 未指定方向:螢幕會隨手持方向自動改變。
 鎖定直式畫面:螢幕固定以直向顯示。
 鎖定橫向畫面:螢幕固定以橫向顯示。
 允許捲動 設定當應用程式超過螢幕高度時,是否可以捲動。
 狀態欄顯示 設定是否顯示狀態列。
 標題 設定螢幕標題,預設值為『Screen1』顯示於螢幕的左上方
 標題顯示 設定是否顯示標題。
 視窗大小 設定App應用程式的大小,可設定固定大小或隨螢幕大小自動調整。
 

*註:
  • 一個 Screen 元件就是一頁,每個應用程式至少需要一個Screen 元件。
  • 欲新增或移除Screen 元件,需按Viewer(工作面板)上方的 Add Screen(新增螢幕)或 Remove Screen(刪除螢幕)。

  •  IconsPedia:Icons & Icon Packs→Download Free PNG Icons

四、 Blocks 頁面(程式設計)


 Blocks Editor 程式設計包含三部分主要指令區:您可以拖曳左側方塊區之方塊指令至工作面板區即開始編撰程式。
    1. Built-In 內建方塊區:為系統內建,含Control(控制程式流程)、Logic(邏輯運算)、Math(數學運算)、Text(文字操作)、Lists(清單操作)、Colors(顏色操作)、Variables(變數操作)、Procedures(程序)。
    2. Screen1已建元件區:在Designer 畫面編排之元件,會在此建立對應之元件方塊。
    3. Any component 任意元件區:提供通用元件之分類。
*註:參閱 App Inventor 2 指令中文化《摘自: AppInventor中文學習網


 測試程式:連線→模擬器(emulator),執行結果如下圖。



五、範例應用

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

(一) 畫面編排(Designer)頁面:即版面配置頁面。

畫面編排(Designer) 

  • 設定元件的屬性值:
*註1:
  • 上傳資源檔:因 APP Inventor 2 應用程式的編譯是在雲端伺服器,故必須將圖片、聲音、影片等素材先上傳(Upload File)至雲端伺服器內,才能被應用程式使用該資源檔
*註2:
  • Sound 音效元件:當『多媒體→Sound音效』拖曳至工作面板中,會自動顯示於下方,為『不可見元件』,元件屬性區→來源文件→請上傳meow.mp3 (適用較小的音效檔),例: FindSounds
  • 按鈕元件→圖片屬性:顯示圖片。

*註3:Button 按鈕元件:是應用程式與使用者互動的元件,當使用者按下按鈕時,會執行設計者安排的程式片段,即為互動模式。


 
Button 按鈕元件的常用屬性如下:按鈕可使用文字(文字屬性),或圖形(圖片屬性),亦可文字及圖片屬性值都設定。

 屬性 說明 
 啟用  設定元件是否可用,即按鈕是否可用。
 字元尺寸  設定文字大小,預設值為「14」。
 圖片  設定顯示圖片按鈕,可上傳圖檔或選取素材資源檔之素材內容(素材含圖片、聲音、片等)。
 形狀  設定按鈕的形狀,含圓角、方形、橢圓形。
 圖示  設定應用程式圖示(icon),格式為.png .jpg調整圖檔解析度為『48x48』像素
 顯示互動效果  設定按下按鈕時,按鈕是否會閃動
 文字  設定按鈕文字。
 顯示狀態  設定是否在螢幕中顯示元件。 


(二) 程式設計(Blocks)頁面:在『畫面編排』的版面配置頁面右上方按下【程式設計(Blocks)】即如下左圖,拖曳左側方塊區之方塊指令至工作面板區即可開始編撰程式如下右圖→程式方塊

 程式設計(Blocks): 
 程式工作面板:
 


(三) 測試程式:
  • 若沒有Android 實機:可安裝 MIT App Inventor 2 軟體使用模擬器(emulator)測試 App程式,詳見〈測試執行程式→ 模擬器〉講義,執行結果如下圖。
  • 有Android 實機:Android 應用程式需編譯成安裝檔後才能在手機中安裝執行,詳見〈測試執行程式→ 下載安裝檔(.apk)〉講義
模擬器(emulator)


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


(一) 畫面編排(Designer)頁面:即版面配置頁面。

設定元件的屬性值(Properties):

 *註:Slider 滑桿元件屬性:
  • MaxValue:滑桿的最大值。
  • MinValue:滑桿的最小值。
  • ThumbPosition:滑桿位置。

(二) 程式設計(Blocks)頁面

  • when Slider.PositionChanged : 當滑桿指針的值發生變化則觸發此事件。下圖中,當滑鼠觸碰【thumbPosition】(指針位置),下方會自動顯示【get thumbPosition】(取指針位置)及【set thumbPosition to】(設置指針位置)方塊,將滑鼠移至所欲之指令方塊上,拖曳該指令方塊至『程式編輯區』即可顯示。

語系→English:
 語系→繁體中文:
  • 程式設計(Blocks): 
語系→English:
語系→繁體中文:

(三) 測試程式:以模擬器(emulator)測試執行,如下圖,拖曳滑桿指針位置,即可操控圖像寬度。