你Facebook上哪個好友是來自華盛頓?怎樣建立一個mashup來尋找不同製造商低於800美元的攜帶型電腦?iTunes中排名第一的HipHop歌曲是哪首?怎樣完成一個地圖mashup來使用不同顏色的圖釘在地圖上標記美國境內各處一加侖汽油的成本。
所有這些任務需要使用邏輯來選擇恰好滿足那些情境的項目,或者基於它們的值來顯示不同的結果。本課將要介紹怎樣建立Popfly mashup來完成處理這些類型問題的解決方案。
決定,決定:藉助 Popfly學習邏輯
本課的Professor Popfly Mashups參考:
l MonsterMash (http://www.popfly.com/users/professorpopfly/MonsterMash)
l NorthSouth States (http://www.popfly.com/users/professorpopfly/NorthSouthStates)
l FacebookFriendsFilter (http://www.popfly.com/users/professorpopfly/FacebookFriendsFilter)
l Shopping(http://www.popfly.com/users/professorpopfly/Shopping)
l ConditionBuilderNumericComparisonTest(http://www.popfly.com/users/professorpopfly/ConditionBuilderNumericComparisonTest)
l PenniesFromHeaven(http://www.popfly.com/users/professorpopfly/PenniesFromHeaven)
學習目標
完成本課學習後,你將可以:
l 理解用於比較值得不同操作
l 解釋分支邏輯與過濾邏輯的不同
l 使用ConditionBuilder塊來為Filter與Logic塊建立條件
l 使用Filter塊選擇資料中匹配一個條件的子集
l 使用Logic塊基於一個條件或一組條件取得一個結果
l 在多個條件上使用AND,OR,與NOT操作
l 理解將數字字元作為字元與作為數字比較的結果的不同
概覽
你Facebook上哪個好友是來自華盛頓?怎樣建立一個mashup來尋找不同製造商低於800美元的攜帶型電腦?iTunes中排名第一的HipHop歌曲是哪首?怎樣完成一個地圖mashup來使用不同顏色的圖釘在地圖上標記美國境內各處一加侖汽油的成本。所有這些任務需要使用邏輯來選擇恰好滿足那些情境的項目,或者基於它們的值來顯示不同的結果。本課將要介紹怎樣建立Popfly mashup來完成處理這些類型問題的解決方案。
本課集中介紹三個塊的使用:ConditionBuilder, Filter與Logic。ConditionBuilder塊協助建立可作為Filter或者是Logic塊輸入的條件(比較值的準則,如“這個值與那個值是否相等”)。
Popfly使用Filter塊來過濾一列資料,只返回那些滿足過濾條件的項,而Logic塊執行”if then else”與”if then else if”樣式的使用一個或多個條件的分支邏輯。
ConditionBuilder塊
使用Condition Builder塊來建立比較資料值的條件。依據這個條件被使用的方式,ConditionBuilder塊提供了兩個操作來建立條件。
FilterCondition操作建立一個與Filter塊一起使用的條件。使用它來建立一個條件用於比較列表中每一項。comparisonVariable輸入欄中的變數x這個運算式表示列表中每個項要比較的部分。
LogicCondition操作建立一個與Logic塊一起使用的的條件。使用其來比較兩個值並根據條件的結果做出選擇。
ConditionBuilder允許你使用如下這些條件來比較值:
l is equal to
l is not equal to
l is greater than
l is greater than or equal to
l is less than
l is less than or equal to
l contains
l does not contain
l begins with
l ends with
任一個操作都可以應用到字元或數字類型的資料。預設是用於字串比較,即,比較字元資料。最後4個操作符(contains, does not contain, begins with, ends with)自動將它們處理的資料作為字串對待。標準比較子(equal, not equal, greater than, greater than or equal, less than, less than or equal to)可以作用於數字或字元資料。
最終提供給FilterCondition或LogicCondition的輸入是一個Boolean值(或真或假)以高速Popfly怎樣解釋你正比較的資料。如果是字元型資料,提供給stringComparison這個輸入參數的值應該為true。如果資料位元數字資料,將這個值設為false。預設是則是進行字串比較;即,比較字元資料。
合并條件
ConditionBuilder塊提供Combine2Conditions與Combine3Conditions操作合并2個或3個使用LogicCondition或FilterCondition操作建立的簡單條件來構建更複雜的條件。
你可以使用AND或OR操作符合并簡單條件。為了讓一系列使用AND合并在一起的條件為true,每個獨立的條件必須為true。而讓一系列使用OR合并在一起的條件為true,任意一個條件為true就可以實現這個目的。Not運算子是一個條件意思反轉。
在這個例子中,4個塊組成的序列展示了建立一個通過檢查相關url是否以.gif,.jpg或.png來判斷圖片是否為GIF,JPG或PNG檔案的FilterCondition。
要在一個mashup中使用這個序列,需將ContainBuilder(4)與一個包含URL列表的塊串連到一個Filter塊。
邏輯塊
邏輯塊通過按一系列比較執行分支來決定一個值。最簡單的操作符是if1 – 一個使用單一條件的”if”操作符。如果條件為真,操作符返回第一個值,否則其返回第二個值。當建立與邏輯塊一起使用的條件時,在ConditionBuilder塊中使用LogicCondition。
剩下的操作符,if2,if3,if4,if5與if6在2,3,4,5與6個條件上各自的執行分支。使用if3操作的邏輯塊的處理步驟如所示。其它運算子(if1,if2,if4,if5,if6)工作方式相似。
過濾塊
過濾塊應用一個過濾條件到一個列表值(通常通過由一個串連的塊傳過來一個完整的對象來指定)並返回包含符合過濾條件的值的列表。當建立與過濾塊一起使用的條件時,請使用ConditionBuilder塊的FilterCondition操作。
供過濾塊使用的條件需為一個包含變數x的短語,這個變數x代表了列表中每個待比較的項。如果你會使用JavaScript,你可以在JavaScript中編寫條件。而不是在一個FilterCondition操作中使用ConditionBuilder塊來建立條件,並將其串連到過濾塊。
RSS過濾塊工作方式相似,但其輸入總是一個RSS源,塊允許你指定要過濾的RSS源中的列。更多關於RSSFilter塊中使用ConditionBuilder塊的資訊請參考本系列中關於RSS的課程。如果你知道怎樣使用JavaScript,你可以在過濾塊或RSS過濾塊中編寫作為條件的JavaScritp代碼,而不是使用CondtionBuilder來構建並指定條件。
邏輯塊樣本1:混合怪物
這個例子介紹了怎樣建立一個在平鋪模式下隨機顯示怪物(或其它任何東西)圖片的mashup。“調整它(Tweak It)”頁面顯示了用來建立這個mashup的每個塊的mashup與setting。
如下是mashup:
這個mashup使用一個Timer塊以半秒的間隔觸發後面的塊序列20秒。
計算塊(Caculator)使用getRandomWholeNumber操作選擇一個0到3之間的隨機整數。
兩個ConditionBuilder塊使用那個值來構建使用LogicCondition操作檢查這個值的條件。唯一可能的值是0,1或2。所以僅需兩個條件塊(來檢查值為0還是1),如果值為3邏輯塊將進入預設的流程。
邏輯塊使用if2操作接收兩個條件來檢查這個值。使用者輸入每個值成為條件的一個結果,其描述了一個與隨機數值一致的圖片。
Live圖片搜尋塊尋找第一張描述為其由邏輯塊接收的圖片。最後,SimpleImage塊接收一個圖片的URL並顯示它(使用指定的高和寬)。
Logic塊樣本2:北部/南部的州
這個mashup針對名稱以”北部(North)”(北卡羅萊納州和北達科他州(North Carolina and North
Dakota))開始的州顯示一個上箭頭,名稱以單詞South開始的州(South Carolina and South Dakota)上顯示一個下箭頭,其它州上顯示一個星號。
如下是mashup:
此處的條件是專用的(”以North開始”或”以South開始”),一種相似的技術可以被用來基於其它值以紅或黃色塊或有色圖釘來顯示。參見練習,你將使用這種技術來顯示一個在地圖上展示當前汽油價格的mashup,基於每個州的汽油價格顯示不同顏色的圖釘。
過濾塊樣本:FacebookFriendsFilter
這個mashup使用Facebook塊顯示指定州中你的Facebook好友的資訊。如果你要展示你Facebook好友的真實資料你需要獲得一個developer key。如果你還沒有key,點擊需要你擷取一個key的連結,根據說明得到一個key。
每個ConditionBuilder使用一個串連到Filter塊的FilterCondition。
FaceBook塊的getFriends操作(傳入friends=0這個參數)返回所有你的Facebook好友的資訊。
這個mashiup使用了兩個FilterCondition:前者由賬戶資訊中表示州的列返回所有州的列表,後者根據使用者在使用者輸入塊下拉式清單選擇的州來尋找那些賬戶資訊中匹配這個州的好友資訊。
第一個ConditionBuilder使用FilterCondition – [x]不等於[](即值不為空白)檢查並確保州的值被提供了。(本例中比較值這個輸入留空。)這步操作時必須的因為可能(且很可能)一些好友沒有在他們Facebook賬戶資訊中選擇一個州。根據這個mashup的目的,這些好友不會被包含在內,因為他們沒有指定他們的州,而這個mashup的過濾又是基於其所在的州。這裡[x]值被用作比較值,因為過濾塊中正在被過濾的列表是來自Facebook塊的州的列表。
Bentley_TextTools塊包含一個名為RemoveDuplicates的操作可以移除一個列表中的重複項。這個操作是必須的這樣每個州才僅在使用者輸入塊的下拉式清單中出現一次。(不使用這個塊,如果有兩個來自麻薩諸塞州的朋友,麻薩諸塞州這個值將在下拉式清單中出現兩次。)移除重複的州建立一個唯一的州的列表,通過其來過濾Facebook好友。
順便說,注意雖然當前的實現沒有這麼做,但你可以將過濾塊的結果輸出到排序塊來將州按首字母順序排序後顯示在使用者輸入塊的下拉式清單中。
第二個ConditionBuilder塊使用過濾條件[x.state][is equal to][output string]基於使用者輸入塊下拉式清單中選擇的州的值來過濾整個Facebook對象。注意ConditionBuilder中使用的x.state指定了Facebook對象中一個單獨的條目,過濾即按此值進行。
SimpleImage塊建立下面的HTML代碼來將好友的縮圖URL顯示為一個圖片,TableDisplay塊在一個表格中顯示每個好友的圖片,姓名與州。每次你由下拉式清單選擇一個不同的州時,這些結果將被重新整理。
合并條件:購買一個膝上型電腦
如果你想深鑽邏輯操作符的使用,考慮這個例子,其展示怎樣使用AND邏輯操作符來合并兩個簡單條件。
考慮你正尋找一台800美元以下的Sony膝上型電腦。你可以使用MSN購物塊協助你做出決定。
這個mashup使用MSN購物塊搜尋匹配這些條件的物品,並將商品的名稱,價格,商品的URL及表示這個商品是否滿足價格區間條件的單詞YES或NO顯示在一個表格中。
使用者在使用者輸入塊中輸入品牌,產品,及打算支出的最大金額。
MSN購物塊的getProducts操作被設定為尋找符合指定品牌且開支小於指定最大可支出金額的30個商品的資訊。使用者輸入塊的預設值是搜尋Sony膝上型電腦中價格小於或等於800美元的膝上型電腦。
第一個ConditionBuilder構建了檢查品牌是否為Sony的條件。
第二個ConditionBuilder塊檢查判斷價格是否小於或等於800美元。注意,由於這是一個數字間比較(價格是一個數字),stringComparison這個到LogicCondition操作的輸入值應該被設定為false。
第三個ConditionBuilder塊使用Combine2Conditions操作將兩個ConditionBuilder產生的邏輯條件使用AND運算子合并。如果兩個簡單條件都為true,合并後條件的結果為true。邏輯塊檢查合并條件的結果,如果為true返回YES,否則為NO。
StevesTableWithHotFirstColumn顯示商品的名稱,價格,URL及當前商品是否滿足為Sony牌並且花費小於或等於指定價格。
技術細節:比較字元與數字資料
如果你對瞭解更多關於JavaScript內部怎樣處理字元與數字資料感興趣請閱讀這部分內容。Popfly塊是用JavaScript編寫的。一些數字資料(如郵遞區號)的確應該被作為字元資料處理,即使這個值是由字元字母組成的字串。
舉個例子,見ProfessorPopfly的mashup – “ConditionBuilderNumericComparisonTest” (http://www.popfly.com/users/professorpopfly/ConditionBuilderNumericComparisonTest)。
這個mashup展示了字串與數字比較的不同結果:
讓我們建立一個包含下面這些值的列表:這個mashup尋找大於或等於24的值。其中使用到FilterCondition操作,因為這個條件被串連到一個過濾塊。
上方兩個ConditionBuilder塊中條件的唯一不同是左側使用一個數字比較而右側的使用字串比較。每個塊將比較條件發送到Filter,這個過濾塊使用指定的條件過濾上方值的列表。當使用數字方式過濾值時,條件(x>=24)的結果為24與34。結果顯示在使用者輸入欄的下拉式清單中。
當使用字串比較過濾值時,條件(x>=’24’)的結果為’24’,’3’,’34’與’4’。(注意使用單引號表示字元為字串值。)字串比較將列表中每個值與字串’24’執行一個逐字元。字串比較的順序是按ASCII碼這個已知的順序,其給每一個數字、字母字元與電腦鍵盤上的符號一個獨一無二的順序。由於在ASCII順序中3在2的後面(這是電腦表示字元”順序”的模式),3被包含在列表中,因為字元’3’在字元’2’及所有2開頭的字串的前面,雖然數字上3<24。