2014年3月13日 星期四

App Inventor 2 基礎操作與執行環境

安裝好 App Inventor 2 的環境建置了,接著就讓我們來認識 App Inventor 2 的基礎操作與執行環境吧。如果還沒,請先參考「App Inventor 2 環境建置」。



步驟一:點進入 App Inventor 2 的網站。




步驟二:按右上角的創建(Create)




步驟三:登入你的 Gmail 帳號密碼



步驟四:開啟新專案(New Project),為你的專案命名,按下OK進入 App Inventor 2 的 Designer視窗。(註:專案名稱中可用底線,但不能有空格或其他特殊字元,且必須含有英文字)




_________________________________________________________________________

到 Desiner 頁面囉!讓我們來認識一下執行環境,分成5個區塊。




(1) 元件面板(Palette)

  元件面板又分成許多子項目,是用來設計程式版面的基本模組




以下我們介紹幾個常用的子項目

(a) 使用者介面(User Inteorface)

  使用者介面是最經常被使用的一個子項目,當中包括按鈕、圖片、文字輸入格等基本元件。


(b) 版面佈局(Layout)

  當我們設計手機遊戲時,常需要使用不同的排版,增加畫面的豐富性。App Inventor 2 本身的排版是垂直的(Vertical) ,因此當我們想要變化物件的排版方式時,便需要使用版面佈局(Layout)的元件。



(c) 影音媒體(Media)

  加入影音媒體可以讓你的程式增加更多互動性與趣味。

(d) 繪畫與動畫(Drawing and Animation)

  想讓你的程式裡有動畫嗎?那就要使用這一個子項目,運用「畫布(Canvas)」這個元件當作框架開始設計你的動畫吧!




認識完第一區塊元件面板(Palette)後,接著讓我們來認識其他區塊。



(2) 預覽視窗(Viewer)

  預覽視窗就像我們的手機,在這裡設計你的手機畫面。

  操作方式:在第一個區塊元件面板(Palette)選取元件後,將元件拖曳至預覽視窗(Viewer)中。




(3) 組成元件(Components)

  在這裡你可以管理你所使用的元件。




(4) 屬性面板(Properties)

  在屬性面板中(Properties)你可以調整你的元件屬性,如下圖以按鈕(Button)作範例說明。



(5) 媒體庫(Media)

  在這裡你可以一次上傳所有你需要的媒體素材,包含圖片、音樂。
(注意:檔名中可用底線,但不能有空格或其他特殊字元,且必須含有英文字)




第一步:點上傳(Upload File)


第二步:選擇你的檔案,按下OK就完成了。




_______________________________________________________________________


恭喜你已經認識完Designer頁面囉!接下來要帶你認識Blocks頁面!

步驟五:點 Blocks ,切換到 Blocks 頁面,在這裡我們要設計元件的程式。




進到 Blocks 頁面,我們來認識一下執行環境,共分成4個區塊。


















(1) Blocks

  Blocks分為兩大區塊,一個是內建、另一個是你自己設計的元件。
  裡面有App Inventor 2 幫你寫好的基本語法,只要找到你要的,將它拖曳出來就可以囉!



內建Blocks又分成了八種

a. 控制(Control):控制 if-then 的程序性問題、迴圈設計
b. 邏輯(Logic):包含true、false等,判斷性問題
c. 數學:純數值、數學的四則運算、亂數設定
d. 文字:字串、使字串相連



e. 清單(List):產生表格、提供暫時儲存空間
f. 顏色(Color):設定顏色
g. 變數(Variables):設定像X、Y的變數
h. 副程式(Procedures):需要重複執行的程式,可以利用副程式縮短程式







在你自己設計的元件區裡,你可以設計你的元件要如何和使用者作互動。





(2) 預覽視窗(Viewer)

  在預覽視窗中設計你的互動程式。

  操作方式:在第一個區塊 Blocks 選取你要設計的元件後,在展開的程式中找到你需要的互動方式,將它拖曳至預覽視窗(Viewer)中。透過像拼拼圖的方式,即可以寫出你的程式。



(3) 程式出錯警告區

  你不知道這樣寫對不對嗎?沒關係,App Inventor 2 會自動幫你檢查,如果你的程式出錯了,它會像圖中一樣有警告標誌,告訴你哪裡有錯要修改哦!






(4) 垃圾桶 
  
  不小心拉錯元件了嗎?沒關係!把不要的元件拉進垃圾桶吧!






學完了 App Inventor 2 的基礎操作,認識了執行環境,是不是有更了解 App Inventor 2 呢?快開始撰寫你的第一支程式吧!

沒有留言:

張貼留言