नॉकआउट, jQuery और ASP.NET MVC 3 का उपयोग करके एक ट्विटर लाइव खोज एप्लिकेशन विकसित करना

यह प्रतिक्रिया, प्रदर्शन और सुविधाओं के स्तर के साथ एक अच्छी तरह से डिज़ाइन किए गए फ्रंट-एंड वेब एप्लिकेशन को विकसित करने के लिए तुच्छ नहीं है, जो उपयोगकर्ता आज की उम्मीद करते हैं। ईवेंट हैंडलर, HTML मार्कअप और AJAX कॉल के उबलते हुए jQuery मिश्रण में खो जाना आसान है, और यहां तक ​​कि अपेक्षाकृत सरल जीयूआई जल्दी से बनाए रखने के लिए एक बुरा सपना बन सकता है।

क्लाइंट की ओर से कुछ संरचना और ऑर्डर जोड़ने का एक तरीका नॉकआउट जैसे ढांचे का उपयोग करना है। नॉकआउट एक मुक्त, खुला स्रोत जावास्क्रिप्ट लाइब्रेरी है जो क्लाइंट पर मॉडल-व्यू-व्यू मॉडल (एमवीवीएम) पैटर्न को लागू करने में मदद करता है। यह अच्छी तरह से प्रलेखित है और आधिकारिक वेबसाइट वास्तविक दुनिया के उदाहरणों के एक समूह के साथ एक महान प्रारंभिक बिंदु है जो न केवल लाइब्रेरी की अंतर्निहित सुविधाओं का उपयोग प्रदर्शित करता है, बल्कि यह भी दिखाता है कि इसे अपनी सुविधाओं के साथ कैसे विस्तारित किया जाए।

इस पोस्ट में, हम देखेंगे कि ट्विटर पर लाइव खोज के लिए एक सरल लेकिन प्रभावी अनुप्रयोग बनाने के लिए नॉचआउट का उपयोग प्रदर्शन प्लगइन, कुछ jQuery और ASP.NET MVC 3 बैकेंड (या मॉडल, जैसा कि आप) के साथ कैसे किया जा सकता है।

लक्ष्य

हमारा लक्ष्य सरल है: उपयोगकर्ता को कुछ खोज मानदंडों (जैसे हैशटैग या ट्विटर उपयोगकर्ता नाम) में प्रवेश करने में सक्षम होना चाहिए, जिसके बाद आवेदन को संबंधित सबसे प्रासंगिक ट्वीट प्रस्तुत करना चाहिए। साथ ही, क्लाइंट पर एक पृष्ठभूमि प्रक्रिया में कई परिणाम स्वचालित रूप से अपडेट होने चाहिए ताकि GUI हमेशा सबसे हाल ही में किए गए ट्वीट को प्रदर्शित करे। (यह उपयोगी हो सकता है, उदाहरण के लिए, जब यहां और अभी हो रही किसी घटना को ट्रैक कर रहा है।) अंततः, हम इसके समान कुछ प्राप्त करना चाहेंगे:

चरण 1: मॉडल परिभाषा

ट्विटर एक खोज एपीआई का उपयोग करता है जो उपयोग करने के लिए काफी सरल है और जो एक्सएमएल (एटम) या जेएसएन प्रारूप में खोज प्रश्नों को वापस कर सकता है। हम अपने मुवक्किल को ट्विटर एपीआई से सीधे संवाद करने की अनुमति दे सकते हैं, लेकिन यह हमें कैशिंग जोड़कर आवेदन में सुधार करने के अवसर से वंचित करेगा, कुछ मामले में ट्विटर क्रैश, आदि; इसलिए, इसके बजाय अपना स्वयं का मॉडल बनाना अच्छा होगा, और इसके लिए हम एक बहुत ही सरल ASP.NET MVC 3 एप्लिकेशन का उपयोग करने जा रहे हैं।

सबसे पहले, एक मानक खाली वेब एप्लिकेशन बनाएं (डिस्प्ले इंजन के रूप में रेजर के साथ) और एक नियंत्रक जोड़ें - चलो इसे ट्विटरकंट्रोलर कहते हैं। फिर "अनुक्रमणिका" क्रिया का नाम बदलें, जो स्वचालित रूप से नए नियंत्रक के साथ "खोज" के लिए बनाई गई थी। नियंत्रक कुछ इस तरह दिखेगा:

public class TwitterController : Controller
{
[HttpGet]
public ActionResult Search()
{
return View();
}
}

* This source code was highlighted with Source Code Highlighter .

अगला, हम एक एक्शन विधि बनाने जा रहे हैं जो ट्विटर पर वास्तविक खोज करता है। इस कार्य के लिए, हम खोज एपीआई के एटम संस्करण का उपयोग करेंगे। अनुरोध URL निम्न प्रारूप search.twitter.com/search.atom?q= [URL-encoded खोज मापदंडों] से मेल खाता है। क्योंकि एटम एक्सएमएल है, हम कई परिणामों को पार्स करने और बदलने के लिए लिनक्यू टू एक्सएमएल का उपयोग कर सकते हैं (ट्विटर को बहुत अधिक डेटा देता है जिसकी हमें आवश्यकता नहीं है, इसलिए हम इसे कम से कम कर देंगे)।

लेकिन क्लाइंट के लिए XML को भेजने की हमारी कोई इच्छा नहीं है - बेहतर JSON। सौभाग्य से, अधिकांश वस्तुओं को JSON में बदलना आसान है, और इस मामले में, सबसे आसान तरीका अंतर्निहित Json विधि का उपयोग करना है, जो JsonResult लौटाता है। यह सब नीचे आता है:

[HttpPost]
public ActionResult Search( string query)
{
var atomResult = XDocument .Load( string .Format(
"http://search.twitter.com/search.atom?q={0}" ,
HttpUtility.UrlEncode(query)));
XNamespace ns = "http://www.w3.org/2005/Atom" ;
var searchResult =
from tweet in atomResult.Descendants(ns + "entry" )
let image = tweet.Elements(ns + "link" )
.Where(e => e.Attributes()
.Any(a => a.Name == "rel" &&
a.Value == "image" ))
.First(). Attribute ( "href" ).Value
let url = tweet.Elements(ns + "link" )
.Where(e => e.Attributes()
.Any(a => a.Name == "rel" &&
a.Value == "alternate" ))
.First(). Attribute ( "href" ).Value
select new
{
id = tweet.Element(ns + "id" ).Value,
author = tweet.Element(ns + "author" ).Element(ns + "name" ).Value,
imageUrl = image,
tweetUrl = url,
tweetText = tweet.Element(ns + "title" ).Value
};
return Json(searchResult);
}

* This source code was highlighted with Source Code Highlighter .

(ऊपर दिए गए कोड में लेखक की प्रोफ़ाइल में एक अवतार को उजागर करने और प्रत्येक व्यक्तिगत ट्वीट से लिंक करने के लिए एक पार्सिंग प्रक्रिया शामिल है।)

वह सब - हमने अपना मॉडल बनाया!

चरण 2: दृश्य मॉडल को लागू करना

जीयूआई विकसित करने से पहले, हमें अपने समाधान के लिए कुछ लिंक जोड़ने होंगे। या तो NuGet के माध्यम से, या मैन्युअल रूप से jQuery, नॉकआउट और jQuery.tmpl लोड कर रहा है। फिर दृश्य / ट्विटर पर "Search.cshtml" दृश्य जोड़ें / "मास्टर पेज" या लेआउट का उपयोग न करें - यह एक आसान काम का एक विचार प्राप्त करने के लिए आसान है, हमारे समान, यदि हम अलग-अलग फ़ाइलों में समाधान नहीं फैलाते हैं)। उल्लेख जावास्क्रिप्ट लिंक जोड़ें। जब आप ऐसा करते हैं, तो आपके पास कुछ ऐसा होगा:

<! DOCTYPE html >
< html >
< head >
< meta charset ="utf-8" />
< title > Twitter Live Search </ title >
< script src ="@Url.Content(" ~/ Scripts / jquery-1 . 6 . 2 . js ")"
type ="text/javascript" ></ script >
<script src= "@Url.Content(" ~/Scripts/jquery.tmpl.min.js ")"
type= "text/javascript" ></script>
<script src= "@Url.Content(" ~/Scripts/knockout-1.2.1.js ")"
type= "text/javascript" > </ script >
</ head >
< body >
<!-- TODO -->
</ body >
</ html >

* This source code was highlighted with Source Code Highlighter .

यह हमारे विचार मॉडल के निर्माण का समय है। दृश्य मॉडल में क्लाइंट पक्ष पर एप्लिकेशन लॉजिक शामिल है या, यदि आप चाहें, तो यह निर्धारित करता है कि एप्लिकेशन क्या कर सकता है और इसके क्या गुण हैं, बिना किसी मार्कअप तत्व या डोम तत्वों के सीधे बंधन के बिना।

इस कार्य के लिए, दृश्य मॉडल अत्यंत सरल है: इसमें वर्तमान खोज क्वेरी और पाए गए ट्वीट्स को संग्रहीत करने के लिए उपयोग किए गए 2 गुण हैं, और तदनुसार मॉडल पर खोज करने के लिए एक विधि है। यह इस तरह लग सकता है:

<script type= "text/javascript" >
function SearchViewModel() {
this .query = ko.observable( '' );
this .tweets = ko.observableArray();
}

SearchViewModel.prototype.search = function () {
var q = this .query();
if (q.length > 0) {
$.ajax({
type: 'POST' ,
url: '/Twitter/Search' ,
data: { query: q },
dataType: 'json' ,
success: function (data) {
// TODO
}.bind( this )
});
} else {
// TODO
}
};
</script>

* This source code was highlighted with Source Code Highlighter .

यह कहना कठिन है कि यहां कुछ भी सार्थक है; अनुरोध और ट्वीट गुण प्रारंभिक रूप से खाली हैं, खोज विधि सर्वर पर हमारे मॉडल के लिए एक AJAX अनुरोध भेजने और JSON ऑब्जेक्ट (ट्वीट्स की सरणी) के रूप में परिणाम वापस करने के लिए jQuery का उपयोग करती है।

हमें खोज विधि में "सफल" हैंडलर को कैसे लागू करना चाहिए? हम ट्वीट्स की सरणी को साफ़ कर सकते हैं और नए खोज परिणाम जोड़ सकते हैं। लेकिन याद रखें कि हम अपने खोज परिणामों के लिए लगातार "अपडेट" प्राप्त करना चाहते हैं, आदर्श रूप से हम पूरे संग्रह को बदलने के बिना नए ट्वीट जोड़ना चाहेंगे (और पुराने को हटा दें)।

यह नॉकआउट के लिए मैपिंग प्लगइन की कोशिश करने का एक शानदार अवसर है। जब हमने इसे डाउनलोड किया और स्क्रिप्ट में लिंक जोड़ा, तो हम एक सफल AJAX अनुरोध हैंडलर लागू कर सकते हैं:

success: function (data) {
ko.mapping.updateFromJS( this .tweets, data);
}.bind( this )

* This source code was highlighted with Source Code Highlighter .

और फिर ट्वीट्स के संग्रह के लिए " प्रमुख परिभाषा " सेट करें (जो कि डिस्प्ले द्वारा यह निर्धारित करने के लिए उपयोग किया जाता है कि किन तत्वों को जोड़ा जाना चाहिए, अपडेट किया जाना चाहिए, या हटा दिया जाना चाहिए), हम सिर्फ हमारे निर्माता को थोड़ा फिर से लिखते हैं:

function SearchViewModel() {
this .query = ko.observable( '' );
this .tweets = ko.mapping.fromJS(
[],
{
key: function (tweet) { return ko.utils.unwrapObservable(tweet.id) }
});
}

* This source code was highlighted with Source Code Highlighter .

ध्यान दें कि हम ट्वीट्स के संग्रह के लिए कुंजी को आईडी मान के रूप में परिभाषित करते हैं जो ट्विटर भी आसानी से प्रदान करता है। यदि आपको मैपिंग प्लगइन के बारे में अधिक जानकारी की आवश्यकता है, तो आधिकारिक नॉकआउट वेबसाइट पर जाएं।

अगला: ऑटो-अपडेट की सुविधाओं का कार्यान्वयन। हर बार जब कोई खोज क्वेरी होती है, तो संबंधित ट्वीट को अपडेट किया जाना चाहिए, कहते हैं, मॉडल में परिवर्तन को प्रतिबिंबित करने के लिए हर 3 सेकंड। इसे प्राप्त करने का एक तरीका AJAX खोज अनुरोध के लिए एक सफल कॉलबैक बनाना है जो पुनरावर्ती को कॉल करता है, लेकिन विलंबित, खोज विधि। इस मामले में पूर्ण दृश्य मॉडल इस तरह दिखता है:

<script type= "text/javascript" >
function SearchViewModel() {
this .query = ko.observable( '' );
this .tweets = ko.mapping.fromJS(
[],
{
key: function (tweet) { return ko.utils.unwrapObservable(tweet.id) }
});
this .autoRefreshId = null ;
}

SearchViewModel.prototype.search = function () {
var timeoutId = this .autoRefreshId;
if (timeoutId) {
window.clearTimeout(timeoutId);
this .autoRefreshId = null ;
}
var q = this .query();
if (q.length > 0) {
$.ajax({
type: 'POST' ,
url: '/Twitter/Search' ,
data: { query: q },
dataType: 'json' ,
success: function (data) {
ko.mapping.updateFromJS( this .tweets, data);
this .autoRefreshId = window.setTimeout(
this .search.bind( this ), 3000);
}.bind( this )
});
} else {
ko.mapping.updateFromJS( this .tweets, []);
}
};
</script>

* This source code was highlighted with Source Code Highlighter .

(जब खोज क्वेरी इनपुट लाइन खाली हो, तो ऑटो-अपडेट बंद करने के लिए मैंने कुछ पंक्तियाँ जोड़ीं; प्लस एक जाँच जो किसी भी नई खोज के शुरू होने पर चलने वाली खोजों को बाधित करती है। यदि आप खाली क्वेरी खोजते हैं, तो भी खोज परिणाम शून्य हो जाते हैं।)

चरण 3: डिज़ाइन देखें

चीजों को सरल और स्पष्ट रखने के लिए, दृश्य में केवल खोज क्वेरी की इनपुट लाइन और ट्वीट्स की सूची शामिल होगी। हम इस भावना में कुछ हासिल करना चाहते हैं:

< form >
< input type ="search" placeholder ="Input #hashtag, @@username or something else" autofocus />
< input type ="submit" value ="Search" />
</ form >

< ul id ="tweets" >
< li >
< a href ="[url-of-tweet]" title ="[author-name]" >
< img src ="[url-of-author-image]" alt ="[author-name]" />
</ a >
< h6 > [author-name] </ h6 >
< p > [tweet-text] </ p >
</ li >
<!-- More tweets... -->
</ ul >

* This source code was highlighted with Source Code Highlighter .

आइए कुछ घोषणात्मक नॉकआउट डेटा बाइंडिंग भी जोड़ते हैं जो दृश्य और दृश्य मॉडल को जोड़ते हैं। यदि हम खोज फ़ॉर्म को थोड़ा संशोधित करते हैं ...

< form data-bind ="submit: search" >
< input type ="search" data-bind ="value: query, valueUpdate: 'afterkeydown'" placeholder ="Input #hashtag, @@username or something else" autofocus />
< input type ="submit" value ="Search" />
</ form >

* This source code was highlighted with Source Code Highlighter .

... जब उपयोगकर्ता खोज क्वेरी फ़ील्ड में पाठ परिवर्तित करता है, तो नॉकआउट दृश्य मॉडल की क्वेरी संपत्ति को स्वचालित रूप से अपडेट कर देगा और जैसे ही उपयोगकर्ता Enter कुंजी दबाएगा, खोज निष्पादित की जाएगी।

खोज परिणामों के बारे में क्या? उत्कृष्ट स्क्रिप्ट नॉकआउट टेम्पलेट बाइंडिंग का उपयोग करने के लिए! सबसे पहले, प्रत्येक ट्वीट के लिए एक टेम्पलेट बनाएं:

< script id ="tweetTemplate" type ="text/html" >
<li data-bind= "attr: { id: id }" >
<a data-bind= "attr: { href: tweetUrl, title: author }" >
<img data-bind= "attr: { src: imageUrl, alt: author }" />
</a>
<h6 data-bind= "text: author" ></h6>
<p data-bind= "text: tweetText" ></p>
</li>
</ script >

* This source code was highlighted with Source Code Highlighter .

फिर व्यू मॉडल में ट्वीट्स की HTML सूची की डेटा-बाइंड प्रॉपर्टी, उनमें से प्रत्येक को प्रदर्शित करने के तरीके के रूप में अपना टेम्पलेट सेट करना। अपेक्षाकृत आसान:

< ul id ="tweets"
data-bind =" template: {
name: 'tweetTemplate' ,
foreach: tweets
}, visible: tweets (). length > 0" >
</ ul >

* This source code was highlighted with Source Code Highlighter .

(ध्यान दें कि यदि दृश्य मॉडल में ट्वीट नहीं हैं तो सूची दिखाई नहीं देगी)

बोनस: एक एनीमेशन जोड़ें जिसका उपयोग तब किया जाता है जब नए ट्वीट को सूची में जोड़ा जाता है।

< ul id ="tweets"
data-bind =" template: {
name: 'tweetTemplate' ,
foreach: tweets ,
afterAdd: function ( element ) {
$( element ). hide (). fadeIn ( 'fast' );
}
}, visible: tweets (). length > 0" >
</ ul >

* This source code was highlighted with Source Code Highlighter .

इस बिंदु पर, केवल एक ही काम करना बाकी है - बूटस्ट्रैपिंग लॉजिक। जब DOM बूट करता है, तो हमें अपने व्यू मॉडल को तत्काल करने की जरूरत है और नॉकआउट से हमारे बाइंडिंग को संलग्न करने के लिए कहें। JQuery दस्तावेज़ तैयार इवेंट हैंडलर में कोड की एक पंक्ति:

<script type= "text/javascript" >
$( function () {
ko.applyBindings( new SearchViewModel());
});
</script>

* This source code was highlighted with Source Code Highlighter .

और हो गया! Chrome 12, इंटरनेट एक्सप्लोरर 9 और फ़ायरफ़ॉक्स 5 में मेरी विंडोज 7 मशीन पर परीक्षण किया गया। यहां एक संपूर्ण समाधान है (जहां मैंने इसे कम भयानक दिखने के लिए कुछ सीएसएस जोड़ा): TwitterLiveSearchLab.zip