練習(0)-如何開始撰寫AppInventor程式

如何開始撰寫AppInventor程式

 

1.      使用CHROME，輸入http://ai2.appinventor.mit.edu

2.      連結後，會要求以Google 戶口登入。

3.      登入後，便可以看到以下畫面，預設會自動開啟最後貯存的文件:

4.      如要撰寫新的方案，撰擇Project>Start new project。

5.      輸入方案(project)的名稱，按OK。

6.      會出現如下畫面:

說明: 最左方(A區)的元件區。

中間(B區)是流動裝置模擬畫面(Viewer)，留意上方有不同大小的畫面大小可供選擇。

已選擇的元件位於Components(C區)內，預設會有第一個螢幕(screen1)，因為不可能甚麼也沒有的。

最右方是元件的Properties特性區(D區)，顯示相關元件的特性，由於已有一個screen1的元件，因此顯示的是這螢幕的特性。每一元件也有許多不同的特性，可嘗試變更部份特性，例如background(背景)及title(標題)，其他特性不清楚是甚麼的話，暫時不用理會。

 

7.      要撰寫第一個方案，於螢幕上輸出Hello World的話，於左方介面元件區找到Label(標簽)，拖至螢幕內便可以。

8.      會出現以下畫面，中間模擬畫面多了一個標簽，右方Components內的Screen1下多了一個元件。(如要刪除這元件，選擇這元件後按DELETE鍵便可以。)

9.      如要更改label內的文字(預設是Text for Label1)，於Componenets介面內先選擇Label1的元件，系統最右方會顯示這元件的特性，然後於右方特性內選擇TEXT項目，輸入相應的文字便可以。例如輸入hello world。

10.  輸入後按ENTER鍵，於模擬畫面上便看到轉換後的文字。

 

11.  如要顯示於手機/平板電腦上，可撰擇Connect>AI Companion。

重要提示: 手機/平板電腦必須先安裝相應的APP，如是iOS，安裝MIT App Inventor2，如是Android，安裝MIT AI2 Companion。

12.  如出現以下畫面。

13.  開啟相應的app，會出現以下畫面，掃描或輸入相應的code便可以，手機畫面便會呈現想應的畫面。

 

 

##不用按貯存檔案的。登出後，會自動貯存在雲端。