新建專案&操作介面
2015/02/15 謝碧景(c)編製更新
學習目標
瞭解 App Inventor 2 操作環境、大綱及使用者介面之設計與應用。
學會『新建專案』、『Designer(畫面編排)』及『Blocks(程式設計)』之編排與設計應用。
學會使用者介面(User Interface)中Label 標籤、Button 按鈕、Image 圖片及 Slider 滑桿等元件及多媒體(Media)中Sound 音效元件之設計與應用。
學會元件、事件、屬性、方法之設計與應用。
◆ MIT App Inventor 官方網站 http://appinventor.mit.edu/ → Create apps! (繁體中文)
一、操作大綱
- 設計步驟
Designer 畫面編排：設計 Android 裝置的使用者介面(即畫面配置區)
→(1)選擇程式元件(Palette)、(2)設定元件屬性(Properties) 。Blocks Editor 程式設計：程式編撰區，即設計程式的控制及邏輯。
測試執行：模擬器 或 使用 Android 裝置下載安裝檔.apk 測試執行專案程式。
二、新建專案
先連結官網( http://appinventor.mit.edu/)→如下左圖，再按下左上方【Create Apps!】按鈕，建立專案程式。注意：請先登入自己的Gmail信箱與密碼。瀏覽器可採Chrome或Firefox，操作如下。
接著如下右圖，詢問是否允許MIT App Inventor 2 存取這個Google帳戶，請選取【Allow】按鈕，即登入MIT App Inventor 2網站之歡迎畫面，請選取【Continue】(繼續)按鈕，準備開始建置新專案。
3.建置新專案：如下圖，在【專案管理頁面】中先點選【Start new project】新增專案，再輸入專案名稱，後按下【OK】立即產生一個新專案，如範例：FirstApp。專案名稱只能使用大小寫英文字母、數字及_符號、且第一個字元必須是英文字母。
【專案管理頁面】語系→English：
新增專案名稱：
語系→繁體中文：
＊註1：切換語系為中文→選取右上方【English】於下拉式選單選取【繁體中文】，即可將操作環境變更為繁體中文。
＊註2：功能列之子功能：
語系→English：
語系→繁體中文：
三、 Designer頁面（畫面編排）
專案版面配置頁面：含4個區塊：Palette(元件面板)、Viewer(工作面板)、Component(元件清單)、Properties(元件屬性)，如下圖，左上方為專案名稱。
語系→English：
語系→繁體中文：
測試執行程式：詳見〈測試執行程式→ 模擬器〉講義。
◆練習1：以文字顯示，建立第一個手機程式。【重點：學會 Screen 元件及 Label 標籤元件(顯示文字)之設計與應用】。 教學影片 (專案名稱： FirstApp.aia)
(一) 畫面編排(Designer)：即版面配置頁面。
設定Screen1元件屬性值(Properties)
＊註1：在Designer模式下設定：
→Text(欲顯示的文字內容)
→Fill parent元件寬度與螢幕同寬
＊註2：Label 標籤元件：其用途為顯示文字。
＊註3：Screen 元件產生應用程式之頁面，一個Screen 元件就是一頁，您可在Screen1頁面中加入其他元件。
Screen 元件的常用屬性：如下：
＊註1：一個 Screen 元件就是一頁，每個應用程式至少需要一個Screen 元件。
＊註2：欲新增或移除Screen 元件，需按Viewer(工作面板)上方的 Add Screen(新增螢幕)或 Remove Screen(刪除螢幕)。
四、 Blocks 頁面（程式設計）
Blocks Editor 程式設計包含三部分主要指令區：您可以拖曳左側方塊區之方塊指令至工作面板區即開始編撰程式。
Built-In 內建方塊區：
為系統內建，含Control(控制程式流程)、Logic(邏輯運算)、Math(數學運算)、Text(文字操作)、Lists(清單操作)、Colors(顏色操作)、Variables(變數操作)、Procedures(程序)…等。
Screen1已建元件區：在Designer 畫面編排之元件，會在此建立對應之元件方塊。
Any component 任意元件區：提供通用元件之分類。
＊註：參閱 App Inventor 2 指令中文化《摘自： AppInventor中文學習網》
測試程式：以模擬器測試前需先啟用aiStarter，如下圖，再選取『連線→模擬器(emulator)』，既可測試程式。
(一) 畫面編排(Designer)頁面：即版面配置頁面。
畫面編排(Designer)：
設定元件的屬性值：
＊註1：
上傳資源檔：因 APP Inventor 2 應用程式的編譯是在雲端伺服器，故必須將圖片、聲音、影片等素材先上傳(Upload File)至雲端伺服器內，才能被應用程式使用該資源檔。
按鈕→圖片屬性：顯示圖片。
＊註2：
Sound 音效元件：當『多媒體→Sound音效』拖曳至工作面板中，會自動顯示於下方，為『不可見元件』，元件屬性區→來源文件→請上傳 meow.mp3 (適用較小的音效檔)，例： FindSounds。
＊註3：Button 按鈕元件：是應用程式與使用者互動的元件，當使用者按下按鈕時，會執行設計者安排的程式片段，即為互動模式。
Button 按鈕元件的常用屬性：按鈕可使用文字(文字屬性)，或圖形(圖片屬性)，亦可文字及圖片屬性值都設定。
(二) 程式設計(Blocks)頁面：
在『畫面編排』的版面配置頁面右上方按下【程式設計(Blocks)】即如下左圖，拖曳左側方塊區之方塊指令至工作面板區即可開始編撰程式，如下右圖→程式方塊。
程式設計(Blocks)：
程式工作面板：
(三) 測試程式：以模擬器(emulator)為例。
沒Android 實機：可安裝 MIT App Inventor 2 軟體，使用模擬器(emulator)測試 App程式，詳見〈測試執行程式→ 模擬器〉講義。
◆練習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)測試執行，如下圖，拖曳滑桿指針位置，即可操控圖像寬度。
