步驟一:點我進入 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 呢?快開始撰寫你的第一支程式吧!
沒有留言:
張貼留言