လောကမှာ ကတ်သီးကတ်သပ် ဖြစ်နေတာတွေ အများကြီးပါ။ တကယ်တမ်း ကျွန်တော်က ကပ်တာ မဟုတ်ပါဘူး။ စဉ်းစားကြည့်လေ၊ ပီကေက သူ့ဖာသာ မကပ်ပါဘူး။ သူ့ကို တစ်ခုခုက လာကပ်လို့ နေမှာပေါ့။

Yahoo Pipe ျဖင့္ Blog list တစ္ခု ဖန္တီးျခင္း

20 November 2008



Acknowledgement :

တစ္ေန႔က မ်က္လံုးနဲ႔ လက္ဘက္ရည္ဆိုင္ ထိုင္ၾကရင္း ဘေလာ့ဂ္အေၾကာင္း ေျပာၾကရင္းနဲ႔က Blog List အေၾကာင္း ေရာက္သြားခဲ့တယ္။ က်ေနာ္ Blogger ရဲ႕ Blog List လုပ္ရတာ သိပ္ဘဝင္မက်တဲ့အေၾကာင္း ေျပာျပေတာ့ မ်က္လံုးက Blog List ကို စိတ္တိုင္းက် လုပ္ခ်င္သလို လုပ္လုိ႔ရေၾကာင္း နည္းလမ္း ဖတ္ဖူးေၾကာင္း ေျပာေတာ့ က်ေနာ္ အရမ္း ဝမ္းသာသြားတယ္။ ဒါနဲ႔ သူ႔ကို ေမးၾကည့္ေတာ့ အတိအက်ေတာ့ သူလည္း ေမ့ေနၿပီ။ WeSheMe ေရးထားတာကို DeGoLar က ျပန္ၫႊန္းေရးထားတာေတာ့ မွတ္မိတယ္လို႔ ေျပာပါတယ္။ WeSheMe ေရးထားတာေတာ့ ၾကာၿပီ။ DeGoLar ေရးထားတာေတာ့ ႏွစ္လေလာက္ပဲ ရွိေသးတယ္တဲ့။ ဒါနဲ႔ က်ေနာ္လည္း အိမ္ျပန္ေရာက္တာနဲ႔ DeGoLar ရဲ႕ ဘေလာ့ဂ္ကို ေျပးၿပီး အဲဒီပို႔စ္ကို ရွာဖတ္ပါေတာ့တယ္။ သူ႔ပို႔စ္မွာ အတိအက် ရွင္းမျပထားတာေၾကာင့္ သူျပန္ၫႊန္းထားတဲ့ WeSheMe ရဲ႕ ပို႔စ္ကို ထပ္ေျပးဖတ္လိုက္မိတယ္။ က်ေနာ္ စမ္းၾကည့္လိုက္ေတာ့ အေတာ္ေလး အဆင္ေျပၿပီး လုပ္ခ်င္သလို လုပ္လို႔ရတာ ေတြ႕ရေတာ့ အေတာ္ေလး ဝမ္းသာသြားတယ္။ ဒါေပမယ့္ ဘာလို႔ ဘေလာ့ဂ္ေတြမွာ မေတြ႕ရတာလဲလို႔ ျပန္ေတြးမိၿပီး လုပ္နည္း ျပန္တင္လိုက္ဦးမယ္လို႔ စိတ္ကူးလိုက္မိတယ္။ ဒီပို႔စ္ျဖစ္ေျမာက္ဖို႔ အဓိက WeSheMe နဲ႔ DeGoLar ကို ေက်းဇူးတင္သလိုပဲ ၫႊန္ျပေပးတဲ့ သယ္ရင္း မ်က္လံုးကိုလည္း အထူးအထူး ေက်းဇူးတင္ေၾကာင္း .....

Yahoo Pipe ရဲ႕ အားသာခ်က္က က်ေနာ္တို႔ ထည့္ခ်င္သေလာက္ Feed အေရအတြက္ ထည့္လို႔ရပါတယ္။ ေနာက္ၿပီး တစ္ဘေလာ့ဂ္ကို တစ္ပို႔စ္ပဲ ေပၚခ်င္တယ္။ ဒါမွမဟုတ္ ၅ ပို႔စ္ ျပခ်င္တယ္ ဆိုၿပီး ႀကိဳက္သလို စီမံလို႔ရသလိုပဲ၊ ႀကီးစဥ္ငယ္လိုက္လား ငယ္စဥ္ႀကီးလိုက္လား အဆင္ေျပသလို စီလို႔ရတယ္။ ရက္စြဲနဲ႔ စီမလား၊ ေခါင္းစဥ္နဲ႔ စီမလား၊ ဘေလာ့ဂါနာမည္နဲ႔ စီမလား ႀကိဳက္သလို ႀကီးစဥ္ငယ္လိုက္ စီလို႔ ရသဗ်ာ။ ေနာက္ၿပီး Programming အနည္းအက်ဥ္း နားလည္တဲ့သူအတြက္ အေတာ္ေလး ကလိလို႔ေကာင္းေၾကာင္း ေထာက္ခံပါရေစ။ အဓိက ႀကိဳက္တဲ့အခ်က္က Idea ကြန္႔ျမဴးရင္ ကြန္႔ျမဴးသေလာက္ လုပ္ႏိုင္တယ္လို႔ ေျပာရင္း ဘယ္လို လုပ္ရမလဲ ဆိုတာကို စေျပာၾကရေအာင္။

က်ေနာ္ ထံုးစံအတိုင္း ေလ့က်င့္ခန္း တစ္ခုနဲ႔ ရွင္းျပခ်င္ပါတယ္။ မရွင္းျပခင္ သိထားသင့္တာ တခ်ဳိ႕က
  1. အခု ရွင္းျပမယ့္ URL ေတြက Blogspot ကိုပဲ ရည္ၫႊန္းပါတယ္။ Wordpress ဆိုရင္ feed က တစ္မ်ဳိးျဖစ္ႏိုင္ပါတယ္။
  2. အ႐ိုးရွင္းဆံုးနဲ႔ အေျခခံကို ျမင္သာေအာင္ ျပခ်င္တာေၾကာင့္ Function မ်ားမ်ားစားစား မထည့္ေတာ့ပါဘူး။ အေျခခံေလာက္ေပါ႔။ က်န္တာ ကိုယ့္ဖာသာ ဆက္ၿပီး ကလိပါေလ။
  3. Yahoo Pipe ဟာ Flow Chart ဆြဲသလို Diagram ပံုနဲ႔ Program တစ္ပုဒ္ ဖန္တီးျခင္းပါ။ လိုခ်င္တဲ့ Function ကို Drag & Drop ဆြဲယူၿပီး ထည့္ေပးရပါမယ္။
  4. Yahoo Pipe မွာ Diagram ပံုတစ္ပံု ဖန္တီးယူၿပီး အဲဒီ Diagram ရဲ႕ result ကုိ Javascript နဲ႔ Blogger မွာ ယူသံုးပါ႔မယ္။
မရွင္းဘူးလား။ ကိစၥ မရွိပါဘူး။ ေအာက္မွာ ေျပာမယ့္ ေလ့က်င့္ခန္းကို တစ္ဆင့္ခ်င္း လိုက္လုပ္ၾကည့္ပါ။


Yahoo Pipe တြင္ Diagram တစ္ခု တည္ေဆာက္ျခင္း


အရင္ဆံုး Yahoo Pipe ကို ေခၚပါ႔မယ္။ သိပ္ေသခ်ာတာေပါ႔။ က်ေနာ္တို႔ အေကာင့္တစ္ခု လုပ္ရမယ္။ တကယ္လို႔ Yahoo Account ရွိၿပီးသားသူ ဆိုရင္ေတာ့ အဲ့အေကာင့္နဲ႔ ဝင္လိုက္ပါ။ Log In လုပ္ၿပီးၿပီဆိုရင္ အေပၚဆံုး Menu မွာ Create a pipe ဆိုတာ ရွိပါတယ္။ ဝင္လိုက္ပါ။ ဒါဆို Diagram Editor က်လာပါမယ္။ ဘယ္ဘက္အျခမ္းကို ၾကည့္လိုက္ပါ။ Sources ရဲ႕ ေအာက္မွာ အေပါင္းလကၡဏာနဲ႔ အမ်ားႀကီး ေတြ႕ရပါမယ္။ က်ေနာ္ရဲ႕ ေလ့က်င့္ခန္းအရ Fetch Feed ကို ေရြးၿပီး ညဘက္က Editor ထဲ ဆြဲထည့္လိုက္ပါ။ ဒါမွမဟုတ္ အေပါင္းလကၡဏာ ႏွိပ္လိုက္ပါ။ က်န္တာေတြက ဘာလဲလို႔ ေမးလာရင္ ပြင့္ပြင့္လင္းလင္း ေျပာပါ႔မယ္။ က်ေနာ္လည္း မသိေသးပါဘူး။ အိုေက Fetch Feed နာမည္နဲ႔ Box တစ္ခု က်လာၿပီး ေအာက္မွာ + URL ဆိုတာေတြ႕ပါမယ္။ သူ႔ေအာက္မွာေတာ့ အႏုတ္လကၡဏာနဲ႔ ေဘးမွာ Text Box တစ္ခု ရွိပါမယ္။ အဲဒီ Text Box ထဲမွာ URL (Blog Address) ထည့္ေပးရမယ္။ ထည့္ထားတာ ဖ်က္ပစ္ခ်င္ရင္ေတာ့ ေဘးနားက အႏုတ္ကို ႏွိပ္လိုက္ပါ။

URL ထည့္တဲ့ အခါမွာ http://pikay.myanmarbloggers.org ဆိုၿပီး ခပ္ရွင္းရွင္း ထည့္လုိက္လို႔ရပါတယ္။ က်ေနာ္က ဒီ ဥပမာမွာ နည္းနည္းေလး ကြန္ခ်င္တယ္။
  1. ပို႔စ္ေတြကို ျပခ်င္တယ္။ /feeds/posts (တကယ္လို႔ ကြန္းမန္႔ေတြပဲ ျပခ်င္ရင္ /feeds/comments)
  2. နဂို သက္မွတ္ထားတဲ့အတုိင္း ပို႔စ္ကို ျပမယ္။ /default
  3. အဲဒီ ဘေလာ့ကေန ေနာက္ဆံုး ႏွစ္ပို႔စ္ပဲ ျပမယ္။ ? max-results=2
ဒီေတာ့ http://pikay.myanmarbloggers.org/feeds/posts/default? max-results=2 ျဖစ္သြားတယ္။ အဲဒီစာအတိုင္း URL Text Box မွာ ထည့္ေပးပါ။
ေနာက္ ဘေလာ့ဂ္တစ္ခု ထပ္ထည့္ခ်င္ေသးရင္ URL ေဘးက + ကို ႏွိပ္လိုက္ပါ။ အိုေက .. က်ေနာ္ ဒီမွာ လင့္ခ္ ငါးခု ထည့္ထားပါတယ္။

က်ေနာ္ လုပ္ခ်င္တာက ခုနက က်ေနာ္ ထည့္ထားတဲ့ ဘေလာ့ဂ္ ငါးခုေၾကာင့္ ပို႔စ္ ၁၀ ပုဒ္ ရလာမယ္။ အဲဒီ ပို႔စ္ ဆယ္ပုဒ္ကို တင္တဲ့ေန႔ေပၚ မူတည္ၿပီး စီခ်င္တယ္။ ေနာက္ဆံုးတင္ထားတဲ့ ပို႔စ္ကို အရင္ဆံုး ျမင္ခ်င္တယ္။ ဒီေတာ့ Sorting လုပ္ရမယ္။
ဘယ္ဘက္က တတိယ ႀတိဂံတုံးေဘးမွာ Operators ဆိုတာ ျမင္ရမယ္ ထင္တယ္။ ႏွိပ္လိုက္ပါ။ က်လာတဲ့ အထဲက ရွစ္ခုေျမာက္မွာ Sort ရွိပါတယ္။ ကလစ္ဖိၿပီး Editor ထဲ ဆြဲသြင္းလုိက္ပါ။ စာဖတ္သူေတြ သတိထားမိမလား မသိဘူး။ ခုနက ေျပာတဲ့ Fetch Feed ဆိုတဲ့ Box ရဲ႕ ေအာက္ဘက္ အလယ္နားမွာ အလံုးေလး တစ္လံုး ရွိပါတယ္။ အခု ထည့္ထားတဲ့ Sort ဆိုတဲ့ Box ရဲ႕ အေပၚနဲ႔ ေအာက္၊ အလယ္မွာလည္း အလံုးေလး တစ္လံုးစီ ရွိပါတယ္။ Pipe Output ဆိုတာရဲ႕ အေပၚပိုင္း အလယ္မွာလည္း အလံုး တစ္လံုး ရွိပါတယ္။ Fetch Feed, Sort, Pipe Output ဆိုၿပီး အထပ္ေအာက္ စီေပးပါ။ ေနာက္ၿပီး Fetch Feed ေအာက္က အလံုးကို ကလစ္ဖိၿပီး မလြတ္ဘဲ ဆြဲလိုက္ရင္ ပိုက္လိုင္းတစ္လိုင္း ပါလာပါလိမ့္မယ္။ အဲဒီ ပိုက္ကို မလြတ္တမ္း Sort ရဲ႕ အေပၚနားက အလံုးထိ ေရာက္ေအာင္ ဆြဲၿပီးမွ လြတ္လိုက္ပါ။ ဒါဆို Fetch Feed နဲ႔ Sort နဲ႔ ဆက္သြားတာ ေတြ႕လိမ့္မယ္။ အဲဒီလုိပဲ Sort နဲ႔ Pipe Output နဲ႔ ဆက္ေပးပါ။ အဲဒီလို ဆက္ၿပီးတာနဲ႔ Sort Box အထဲမွာ စာေတြ ေပၚလာပါလိမ့္မယ္။ + Sort by ရဲ႕ ေအာက္မွာ အႏုတ္လကၡဏာနဲ႔ Combo Box ရွိပါတယ္။ ေဘးနားက ျမားကို ႏွိပ္ၿပီး item.published ကို ေရြးေပးပါ။ တင္ထားတဲ့ ရက္ကို လိုခ်င္လို႔ပါ။ ေနာက္ၿပီး Order ကို descending ေရြးပါ။ ႀကီးစဥ္ငယ္လုိက္ စီခ်င္လို႔။

အိုေက ဒီေလာက္ ဆိုရင္ ပိုက္ဆက္လို႔ ၿပီးသြားပါၿပီ။ အလုပ္ျဖစ္မျဖစ္ အၾကမ္း သိခ်င္ရင္ ပံုရဲ႕ ေအာက္ဘက္မွာ Refresh ဆိုတာ ရွိတယ္။ ႏွိပ္လိုက္လို႔ ပို႔စ္ေခါင္းစဥ္ေတြ ေပၚလာရင္ အလုပ္ျဖစ္ပါၿပီ။ ဒါဆို ညာဘက္ အေပၚက Save ကို ႏွိပ္လိုက္ပါ။ အဆင္ေျပတဲ့ နာမည္ေပးလိုက္ပါ။ Save ၿပီးသြားရင္ေတာ့ အေပၚဘက္ အလယ္မွာ Run Pipe ဆိုတဲ့ လင့္ခ္ကို ႏွိပ္ၿပီး ရလဒ္ကို ၾကည့္လို႔ရပါတယ္။ ရလဒ္ကို ၾကည့္ၿပီး Pipe ျပင္ခ်င္ေသးတယ္ ဆိုရင္ေတာ့ ဘယ္ဘက္ ေအာက္မွာ Edit Source ဆိုတာ ႏွိပ္ၿပီး ဝင္ျပင္ႏုိင္ပါတယ္။ Browser ရဲ႕ Address Bar ကို ၾကည့္လိုက္ပါ။ http://pipes.yahoo.com နဲ႔ စၿပီး ေနာက္နားမွာ ?_id= ဆိုၿပီး အကၡရာ (၂၂) လံုး ေတြ႕ပါလိမ့္မယ္။ အဲဒါ Diagram ID ပါ။ မွတ္ထားေပးပါ။ အိုေက ... ဒါဆို ဘေလာ့ဂ္ေပၚ ဘယ္လို တင္မလဲဆိုတာ ဆက္ၾကည့္လိုက္ရေအာင္။

Blog တြင္ Yahoo Pipe ထည့္ျခင္း

ပထမဆံုး အေနနဲ႔ Javascript Function ေတြ သံုးဖို႔အတြက္ အရင္ ေၾကျငာေပးရပါမယ္။ Layout >> Edit HTML ကို သြားၿပီး </head> ရဲ႕ အေပၚနားမွာ ေအာက္က စာေၾကာင္း ႏွစ္ေၾကာင္း ထည့္ေပးပါ။

<script src='http://h1.ripway.com/phyoekyaw/FeedPeek.js' type='text/javascript'/>
<script src='http://h1.ripway.com/phyoekyaw/Library.js' type='text/javascript'/>

ေနာက္ၿပီး Layout >> Page Elements မွာ Add a Gadget ကို ႏွိပ္ၿပီး HTML/Javascript ကုိ ေရြးေပးပါ။ ေနာက္ၿပီး ေအာက္က စာေၾကာင္းကို ကူးထည့္ေပးပါ။

<script src="http://pipes.yahoo.com/pipes/pipe.run?_id=Mg4ZUoO13RGkz43cbbsjiw&_render=json&_callback=feedPeek"></script>

မွတ္ခ်က္ .... အနီေရာက္ေနရာမွာ အထက္က မွတ္ခုိင္းထားတဲ့ ကိုယ့္ရဲ႕ Diagram ID ကို ထည့္ေပးပါ။ Save လိုက္ၿပီး Blog ကို ဖြင့္ၾကည့္လိုက္ပါ။ အားလံုး အာသီသ ဆႏၵ အလို ေတာင့္တ ေနတဲ့ Blog List တစ္ခု ရလာပါလိမ့္မယ္။

Function တစ္ခုခ်င္းစီ ရွင္းမျပေတာ့တာ က်ေနာ္ မစမ္းၾကည့္ရေသးတာလည္း ပါသလို အဲေလာက္ ရွင္းျပေနစရာ မလိုတဲ့ ဦးေႏွာက္ပိုင္ရွင္ေတြလို႔ ယံုၾကည္ထားလို႔ပါ။ (အဟီး ... မေရးခ်င္ေတာ့တာနဲ႔ ေျမႇာက္ပစ္လိုက္ၿပီ) ကိုယ့္ဖာသာပဲ တစ္ခုခ်င္းစီ အားရပါးရ စမ္းၾကည့္ၾကေပေတာ့လို႔ပဲ အားေပးပါရေစ။


အဆင္ေျပပါေစဗ်ာ။