2014/09/19

App inventor 2

今天當助教老師用App inventor 2來教學,所以順手寫下筆記,不過在這邊我是照自己的方式用的


首先,先到Installing and Running the Emulator in AI2找到屬於系統的Emulator;這邊我以Windows作示範請點此下載Windows用Emulator

下載且安裝完成,會看到桌面多出名為aiStarter連結,請點擊該圖示兩下



會開啟一個Terminal,請不要將它關閉,Terminal用於讓App inventor 2與Emulator做溝通用的

接著我們再來使用App inventor 2網址為http://ai2.appinventor.mit.edu/,不過App inventor 2必須透過Google帳號才能使用

首次登入,會看到如下圖的畫面
這邊的意思是要求存取你的個人資訊作為登入帳號用,都將其打勾後點選Allow


這邊可以直接點擊Never Tak Survey



對於App inventor 2不太理解,可以點擊那兩個連結,會有一些操作說明
沒問題的話,點擊Continue


接著我們點擊左上角New Project


這邊專案命名標準必須是英文開頭,不能為中文

開啟完成後就可以看到頁面了
頁面總共分四格,從左邊開始
第一格:可用的元件
第二格:實際畫面
第三格:畫面所擁有的元件
第四格:畫面內元件的屬性



App inventor 2有兩個模式

Designer:設計畫面的模式
Blocks:貼程式碼的地方

我現在作個範例,按鈕點擊一下會把Label的Text改為C.Y. Fang
頁面內有Button和Label


拼圖則是將Button的OnClick拉出來,且將Label的SetText拼到OnClick,最後從Text內拖曳出空的字串,將空字串改為C.Y. Fang


接著移到上方的Connect/Emulator等待幾分鐘,讓它跑完就會出現模擬器



模擬器到保護畫面時,先解鎖
 模擬器跑出這個畫面,稍待幾秒,並不要關閉網頁視窗



就可以看到執行結果


注意命名不能為中文或數字開頭,否則輸出apk會產生錯誤
可以透過USB與手機做連結
可以輸出APK,有下載電腦或是透過QR Code的方式下載


參考資料:
http://appinventor.mit.edu/explore/ai2/setup-emulator
http://appinventor.mit.edu/explore/ai2/windows.html