close

20140102000

http://beta.appinventor.mit.edu/

https://appengine.google.com/

這個MIT是指『麻省理工學院』(Massachusetts Institute of Technology)


http://ai2.appinventor.mit.edu/ 新版網址(2015.11.04)

 


 

APP流程建立示範

建立專案完後,首先先拉畫面

20140102002

 

然後開啟程式流程編輯畫面
按右上角的『Open the Blocks Editor

20140102003

會跳出下載檔案『AppInventorForAndroidCodeblocks.jnlp

下載完後,直接點兩下檔案,啟動程式

按下去沒反應的,是那台電腦有缺元件
請先到這個頁面安裝『 http://explore.appinventor.mit.edu/ai2/update-setu... 』

20140102008 自動呼叫java

20140102007 自動連線

20140102006 編輯畫面開啟完成

 

啟動完成後,右上角變成『Opening the Blocks Editor…(click to cancel)

 20140102005

 

接著開始玩拼圖遊戲

 

拼圖完成。(程式流程編輯完成後畫面)

 

20140102008  

 

展示程式有三種方法
按右上角的「Package for Phone」可以選擇

Show Barcode」這個會在畫面上呈現QR Code碼給手機掃描,掃描成功後會自動下載程式到手機中,最後再手動點選安裝程式即可。

Download to this Computer」這是下載一個封裝好的APK檔到電腦上,主要是供程式要上架時使用。

Download to Connected Phone」這是給和電腦連線中的手機使用,但手機需另安裝驅動程式。

20140102004

 

 


 

拼圖示範

 

20140102003

藍色的拼圖,在其左上角有「def」是指定義、宣告變數
join是指合併字串
用滑鼠拖移【拼圖「A」「B」】到【join拼圖】的缺口

20140102001

再把【join拼圖】拖到【變數STR拼圖】的缺口

20140102002

上圖相當於
String STR = “A” + “B” ;

 


 

拼圖解析說明

 

20140102006

20140102007  

 

定義Button4在Click事件時要做兩件事。

1.指定Web物件的URL。

2.執行Web物件,並啟動向URL取得資源。

 

在Web.Get後,會自動呼叫執行「Web.GotText」
首先我們先定義從網路上取得的資源是哪一種格式。(XML , JSON)
在此我是使用JSON,所以是「Web.JsonTextDecode
因為我在定義Button時,使用的是陣列型態拼圖 make a list
所以在這裡我要定義一個Index,讓我在抓陣列時好用
迴圈 foreach ( var list in XXXX) → XXXX = results
為什麼我會叫他XXXX,那是因為我並沒有特別指定
但Web元件會自動幫我做Bind動作。

 

接著我指定Button.Text
首先我們要先建立一個Button

因為是陣列,所以我們到左方工具清單,點選『Advanced』頁籤
再來選『Any Button
就會看到很多跟Button有關的屬性拼圖可以使用,我們把Button.Text拖出來用
這時我們要在「component」這個指定其屬性內容,找到其在陣列中匹配的Button
因為是要取自陣列,所以使用「拼圖select list item
告訴程式我們在list要指定是使用哪一組陣列
並且在index指定值,告訴程式我們要使用陣列中的第幾個項目。

 

接著我們來解析JSON並放到Text中

JSON基本上,最少是一個二維陣列
{
"title":"This is Title.",
"num":”6”,
"userid":"456",
"information":"這是測試訊息1"
}

所以而要兩層的「拼圖select list item
首先先在回傳回來的變數list中,指定要抓JSON的第3項值
再來指該項目的第2個值
第3項是取自文字排序後的項次 「"title":"This is Title."」
英文字母排序:ABCDEFGHIJKLNMOPQRSTUVWXYZ

1 "information":"這是測試訊息1"
2 "num":”6”
3 "title":"This is Title."
4 "userid":"456"

第2個值是該項目的第2個陣列,也就是「This is Title」
因為是自動化的關係,所以這塊就只能克難一些。
其餘以此類推。

 

因為程式為了好看
所以把所有Button都給隱藏了
因此我們要把所以啟動的Button都顯示出來
做法如上面所述一樣使用「拼圖select list item」。

 

把這個轉成常見的程式語言,大約長相如下:

void Button4_Click()
{
  Web.Url = “http://xxxxxxxx” 
  JsonTextString results = Web.GetReqest(XXXX)
  int index = 0
  foreach ( var list in sesults )
  {
    index = index +1
    Button btn = buttons[index]
    btn.Text = list[3][2].ToString()
    btn.Visible = true
  }
}

 


 

雖然說是提供給不會打程式的人使用
但相關程式原則、流程,還是一模一樣的
只不過是把程式再物件化一次。

對於不會寫程式的人來說,其實真的很好用
會寫程式的人,也可以來學一學
雖然第一次使用時,會不習慣
( 我個人花了半天時間在摸這個 )
但只要遵照程式原則、流程去做
其實有時會比自己去使用Android的編輯程式還快一些
唯一的遺憾,是現在還沒有支援中文字體
這個對於我們來說,就是一個缺點了

用這個去做DEMO畫面,非常的快
比自己去打程式快多了
但若要做到更好,可能還是得回到Android程式開發工具使用了。

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 Jiang Ying-Fu 的頭像
    Jiang Ying-Fu

    Jiang Ying-Fu的部落格

    Jiang Ying-Fu 發表在 痞客邦 留言(0) 人氣()