JQuery और PHP के साथ अपने खुद के Instagram खोज इंजन का निर्माण कैसे करें

जब से Google ने त्वरित खोज सुविधाएँ शुरू की हैं, यह वेब डिज़ाइन में एक लोकप्रिय प्रवृत्ति बन गई है। ऑनलाइन कुछ मजेदार उदाहरण हैं जैसे कि माइकल हार्ट का Google Images ऐप। तकनीकें पूरी तरह से सीधी हैं, जहां मध्यम jQuery के अनुभव वाले एक वेब डेवलपर भी प्रोग्रामिंग एपीआई और JSON डेटा उठा सकते हैं.

इस ट्यूटोरियल के लिए मैं समझाना चाहता हूँ हम एक समान त्वरित खोज वेब एप्लिकेशन कैसे बना सकते हैं. Google से छवियां खींचने के बजाय हम Instagram का उपयोग कर सकते हैं जो कि कुछ ही वर्षों में काफी बढ़ गया है.

इस सामाजिक नेटवर्क ने iOS के लिए एक मोबाइल ऐप के रूप में शुरुआत की। उपयोगकर्ता फ़ोटो ले सकते हैं और उन्हें अपने दोस्तों के साथ साझा कर सकते हैं, टिप्पणियां छोड़ सकते हैं और फ़्लिकर जैसे 3 पार्टी नेटवर्क पर अपलोड कर सकते हैं। टीम ने हाल ही में फेसबुक द्वारा अधिग्रहण किया था और एंड्रॉइड मार्केट के लिए एक नया ऐप प्रकाशित किया था। उनके यूजरबेस में जबरदस्त वृद्धि हुई है, और अब डेवलपर्स इस इंस्टासर्च डेमो की तरह ही अद्भुत मिनी ऐप बना सकते हैं.

डेमो देखें
स्रोत डाउनलोड करें

एपीआई क्रेडेंशियल प्राप्त करना

किसी भी प्रोजेक्ट फाइल को बनाने से पहले हमें पहले इंस्टाग्राम के एपीआई सिस्टम के पीछे के विचारों पर गौर करना चाहिए। आपको डेवलपर के पोर्टल तक पहुंचने के लिए एक खाते की आवश्यकता होगी जो शुरुआती लोगों के लिए उपयोगी निर्देश प्रदान करता है। हम सभी को Instagram डेटाबेस को क्वेरी करने की आवश्यकता है a “ग्राहक ID”.

शीर्ष टूलबार में ग्राहक प्रबंधित करें लिंक पर क्लिक करें, फिर हरे बटन पर क्लिक करें “एक नया ग्राहक पंजीकृत करें”. आपको एप्लिकेशन को एक नाम, संक्षिप्त विवरण और वेबसाइट URL देना होगा। URL और रीडायरेक्ट URI इस उदाहरण में एक ही मान हो सकता है क्योंकि हमें किसी भी उपयोगकर्ता को प्रमाणित करने की आवश्यकता नहीं है। बस सभी मूल्यों को भरें और नए आवेदन विवरण उत्पन्न करें.

आपको नाम के वर्णों की एक लंबी स्ट्रिंग दिखाई देगी ग्राहक ID. बैकएंड स्क्रिप्ट का निर्माण करते समय हमें बाद में इस कुंजी की आवश्यकता होगी, इसलिए हम इस अनुभाग पर लौट आएंगे। अभी के लिए हम अपने jQuery के त्वरित खोज एप्लिकेशन का निर्माण शुरू कर सकते हैं.

डिफ़ॉल्ट वेबपृष्ठ सामग्री

वास्तविक HTML हम जिस कार्यक्षमता का उपयोग कर रहे हैं, उसके लिए बहुत पतला है। चूंकि अधिकांश छवि डेटा गतिशील रूप से जोड़ा जाता है, हमें केवल पृष्ठ के अंदर कुछ छोटे तत्वों की आवश्यकता होती है। इस कोड के अंदर पाया जाता है index.html फ़ाइल.

    Instagram फोटो इंस्टेंट सर्च ऐप jQuery के साथ         नोट: कोई स्थान या विराम चिह्न की अनुमति नहीं है। खोज एक (1) कीवर्ड तक सीमित हैं.

मैं दो बाहरी .css और .js संसाधनों के साथ नवीनतम jQuery 1.7.2 लाइब्रेरी का उपयोग कर रहा हूं। इनपुट खोज फ़ील्ड में कोई बाहरी प्रपत्र आवरण नहीं है क्योंकि हम कभी भी फ़ॉर्म सबमिट नहीं करना चाहते हैं और पृष्ठ पुनः लोड करना चाहते हैं। मैंने खोज फ़ील्ड के अंदर कुछ कीस्ट्रोक्स को अक्षम कर दिया है ताकि उपयोगकर्ता टाइप करते समय अधिक सीमित प्रतिबंध हों.

हम मध्य खंड आईडी के अंदर सभी फोटो डेटा को आबाद करेंगे #तस्वीरें. यह हमारे मूल HTML को साफ और पढ़ने में आसान रखता है। अन्य सभी आंतरिक HTML तत्वों को jQuery के माध्यम से जोड़ा जाएगा, और प्रत्येक नई खोज से पहले हटा दिया जाएगा.

एपीआई से खींच रहा है

मैं अपनी डायनेमिक PHP स्क्रिप्ट बनाकर पहले शुरू करना चाहता हूं और फिर jQuery में जाना चाहता हूं। मेरी नई फ़ाइल का नाम है instasearch.php जिसमें एपीआई में सभी महत्वपूर्ण बैकएंड हुक होंगे.

पहली पंक्ति यह दर्शाती है कि हमारे रिटर्न डेटा को सादे या HTML के बजाय JSON के रूप में स्वरूपित किया गया है। डेटा को ठीक से पढ़ने के लिए जावास्क्रिप्ट कार्यों के लिए यह आवश्यक है। बाद में मुझे एप्लिकेशन क्लाइंट आईडी, उपयोगकर्ता खोज मान और अंतिम API URL वाले कुछ चर मिल गए हैं। सुनिश्चित करें कि आप अपडेट करें $ ग्राहक अपने स्वयं के अनुप्रयोग से मिलान करने के लिए स्ट्रिंग मान.

इस URL डेटा तक पहुंचने के लिए हमें फ़ाइल सामग्री को पार्स करने या cURL फ़ंक्शन का उपयोग करने की आवश्यकता है। कस्टम फ़ंक्शन get_curl () कोड का एक छोटा सा हिस्सा है जो वर्तमान PHP विन्यास के खिलाफ जांच करता है.

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

$ प्रतिक्रिया = get_curl ($ api);

डेटा का आयोजन और वापसी

हम इंस्टाग्राम से इस मूल JSON प्रतिक्रिया को सभी भरी हुई जानकारी के साथ वापस कर सकते हैं। लेकिन वहाँ बहुत अधिक डेटा है और यह सब कुछ के माध्यम से लूप करने के लिए बहुत कष्टप्रद है। मैं अजाक्स प्रतिक्रियाओं को व्यवस्थित करना पसंद करता हूं और हमें डेटा के कौन से टुकड़े चाहिए.

पहले हम सभी छवियों के लिए एक खाली सरणी सेटअप कर सकते हैं। फिर अंदर प्रत्येक के लिए() पाश हम JSON डेटा ऑब्जेक्ट्स को एक-एक करके बाहर निकालेंगे। हमें केवल तीन (3) विशिष्ट मान चाहिए जो हैं $ src(पूर्ण आकार का चित्र URL), $ अंगूठे(थंबनेल छवि URL), और $ url(अद्वितीय फोटो पर्मलिंक).

$ छवियां = सरणी (); अगर ($ प्रतिक्रिया) foreach (json_decode ($ response) -> डेटा $ आइटम के रूप में) $ src = $ आइटम-> चित्र-> standard_resolution-> url; $ अंगूठे = $ आइटम-> चित्र-> थंबनेल-> यूआरएल; $ url = $ आइटम-> लिंक; $ छवियां [] = सरणी ("src" => htmlspecialchars ($ src), "अंगूठा" => htmlspecialchars ($ अंगूठा), "url" => htmlspecialchars ($ url));

जो लोग PHP लूप से अपरिचित हैं, वे प्रक्रिया में खो सकते हैं। यदि आप सिंटैक्स को नहीं समझते हैं तो इन कोड स्निपेट पर इतना ध्यान न दें। छवियों की हमारी सरणी में सबसे हालिया प्रकाशन तिथि से खींची गई फ़ोटो की अधिकतम 16-20 अद्वितीय प्रविष्टियाँ होंगी। तब हम पेज पर इस सभी कोड को jQuery Ajax प्रतिक्रिया के रूप में आउटपुट कर सकते हैं.

Print_r (str_replace ('\\ /', '/', json_encode ($ छवियाँ))); मरने ();

लेकिन अब जब हम उन दृश्यों के पीछे लग गए हैं जिन्हें हम फ्रंटएंड स्क्रिप्टिंग में कूद सकते हैं। मैंने एक फ़ाइल बनाई है ajax.js जिसमें खोज क्षेत्र पर बंधे एक युगल ईवेंट हैंडलर शामिल हैं। यदि आप अब तक का पालन कर रहे हैं तो उत्साहित हो जाओ हम पूरा होने के बहुत करीब हैं!

jQuery के प्रमुख कार्यक्रम

जब पहली बार दस्तावेज़ खोलने तैयार() घटना मैं एक जोड़ी चर स्थापित कर रहा हूँ। पहले दो खोज क्षेत्र और फ़ोटो कंटेनर के लिए प्रत्यक्ष लक्ष्य चयनकर्ताओं के रूप में व्यवहार करते हैं। उपयोगकर्ता द्वारा टाइप करने के बाद 900 मिलीसेकंड तक खोज क्वेरी को रोकने के लिए मैं एक जावास्क्रिप्ट टाइमर का उपयोग कर रहा हूं.

$ (दस्तावेज़)। पहले से ही (फ़ंक्शन () var sfield = $ ("# s"); var कंटेनर = $ ("# फ़ोटो"); var टाइमर;

केवल दो मुख्य फ़ंक्शन ब्लॉक हैं जिनके साथ हम काम कर रहे हैं। खोज क्षेत्र पर ध्यान केंद्रित करने पर प्राथमिक हैंडलर को एक .keydown () घटना से चालू किया जाता है। हम पहले जांचते हैं कि क्या कुंजी कोड हमारे किसी भी निषिद्ध कुंजी से मेल खाता है, और यदि कुंजी घटना को नकारती है। अन्यथा डिफ़ॉल्ट टाइमर साफ़ करें और कॉल करने से पहले 900ms प्रतीक्षा करें instaSearch ().

/ ** * कीकोड शब्दावली * 32 = स्पेस * 188 = COMMA * 189 = DASH * 190 = PERIOD * 191 = बैकस्लैश * 13 = ENTER * 219 = LEFT BRACKET * 220 = फॉरवर्ड शब्दार्थ = 221 = राइट ब्रेट * / $ (sfield) ) .keydown (फ़ंक्शन (e) if (e.keyCode == '32' || e.keyCode == '188' 'e.keyCode ==' 189 '|| e.keyCode ==' 13 ') | e.keyCode == '190' || e.keyCode == '219' || e.keyCode == '221' || e.keyCode == '191' || e.keyCode == [220] || e.preventDefault (); और क्लियर टाइमआउट (टाइमर); टाइमर = सेटटाइमआउट (फंक्शन () इंस्टासर्च) (;; 900);;

हर बार जब आप मूल्य को अपडेट करते हैं तो यह स्वचालित रूप से नए खोज परिणाम लाएगा। कई अन्य महत्वपूर्ण कोड भी हैं जिन्हें हम अजाक्स फ़ंक्शन को ट्रिगर करने से रोक सकते थे - लेकिन इस ट्यूटोरियल में लिस्टिंग के लिए बहुत सारे.

Ajax instaSearch () फ़ंक्शन

मेरे नए कस्टम फ़ंक्शन के अंदर हम पहली बार एक जोड़ रहे हैं “लोड हो रहा है” खोज क्षेत्र पर कक्षा। यह क्लास एक नई लोडिंग gif छवि के लिए कैमरा आइकन को अपडेट करेगी। हम फ़ोटो अनुभाग के भीतर बचे किसी भी संभावित डेटा को भी खाली करना चाहते हैं। क्वेरी चर को खोज क्षेत्र में दर्ज वर्तमान मूल्य से गतिशील रूप से खींचा जाता है.

समारोह instaSearch () $ (sfield) .addClass ("लोडिंग"); $ (कंटेनर) .empty (); var q = $ (sfield) .val (); $ .ajax (प्रकार: 'POST', url: 'instasearch.php', डेटा: "q =" + q, सफलता: फ़ंक्शन (डेटा) $ (sfield) .removeClass ("लोडिंग"); $ .each (डेटा, फ़ंक्शन (i, आइटम) var ncode = ' 
'; $ (कंटेनर) .append (ncode); ); , त्रुटि: फ़ंक्शन (xhr, प्रकार, अपवाद) $ (sfield) .removeClass ("लोडिंग"); $ (कंटेनर) .html ("त्रुटि:" + प्रकार); );

यदि आप .ajax () फ़ंक्शन से परिचित हैं, तो इन सभी मापदंडों को परिचित होना चाहिए। मैं उपयोगकर्ता खोज पैरामीटर पास कर रहा हूं “क्ष” POST डेटा के रूप में। सफलता और असफलता पर हम दूर करते हैं “लोड हो रहा है” कक्षा और किसी भी प्रतिक्रिया में वापस जोड़ें #तस्वीरें आवरण.

सफलता समारोह के भीतर हम व्यक्तिगत div तत्वों को बाहर निकालने के लिए अंतिम JSON प्रतिक्रिया के माध्यम से लूपिंग कर रहे हैं। हम इस लूपिंग को $ .each () फ़ंक्शन के साथ पूरा कर सकते हैं और हमारी प्रतिक्रिया डेटा सरणी को लक्षित कर सकते हैं। अन्यथा विफलता विधि सीधे इंस्टाग्राम एपीआई से किसी भी प्रतिक्रिया त्रुटि संदेश का उत्पादन करेगी। और यह वास्तव में यह सब वहाँ है!

डेमो देखें
स्रोत डाउनलोड करें

अंतिम विचार

इंस्टाग्राम टीम ने इस तरह के जबरदस्त एप्लिकेशन को बढ़ाते हुए एक शानदार काम किया है। एपीआई कभी-कभी धीमा हो सकता है, लेकिन प्रतिक्रिया डेटा हमेशा ठीक से स्वरूपित होता है और इसके साथ काम करना बहुत आसान होता है। मुझे आशा है कि यह ट्यूटोरियल यह प्रदर्शित कर सकता है कि तीसरे पक्ष के अनुप्रयोगों से बहुत अधिक शक्ति काम कर रही है.

दुर्भाग्य से वर्तमान Instagram खोज क्वेरी एक समय में 1 से अधिक टैग की अनुमति नहीं देती हैं। यह हमारे डेमो तक सीमित है, लेकिन यह निश्चित रूप से इसके आकर्षण को दूर नहीं करता है। आपको ऊपर दिए गए लाइव उदाहरण की जांच करनी चाहिए और साथ में खेलने के लिए मेरे स्रोत कोड की एक प्रति डाउनलोड करनी चाहिए। इसके अलावा हमें नीचे चर्चा क्षेत्र में अपने विचारों को जानते हैं.