步驟一：點我進入 App Inventor 2 的網站。
步驟二：按右上角的創建(Create)
步驟三：登入你的 Gmail 帳號密碼
步驟四：開啟新專案(New Project)，為你的專案命名，按下OK進入 App Inventor 2 的 Designer視窗。(註：專案名稱中可用底線，但不能有空格或其他特殊字元，且必須含有英文字)
_________________________________________________________________________
到 Desiner 頁面囉！讓我們來認識一下執行環境，分成５個區塊。
(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 頁面，我們來認識一下執行環境，共分成４個區塊。
(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 呢？快開始撰寫你的第一支程式吧！
沒有留言:
張貼留言