Google maps और फ़्लिकर APIs को जोड़ना

कल्पना कीजिए कि आपने ग्राहक का अनुरोध किया गया सुंदर नक्शा बनाया है; दिलचस्प मार्करों, पॉप-अप, कस्टम ओवरले और फ़ोटो के सभी प्रकार जोड़ना। लेकिन फिर ग्राहक का उल्लेख है कि वे आपको परेशान किए बिना अपनी स्वयं की फ़ोटो जोड़ना चाहते हैं, या स्वयं कोडिंग कर रहे हैं। यह वह जगह है जहां फ़्लिकर API काम बहुत आसान बनता है।

Flickr API आपको अनिवार्य रूप से फ़्लिकर वेबसाइट को अपने फोटो के लिए अपने डाटाबेस या स्टोरेज एरिया के रूप में उपयोग करने की अनुमति देता है। फ़्लिकर एपीआई का उपयोग करके, आप फ़्लिकर से अपनी तस्वीरों को पकड़ सकते हैं और उन्हें अपने Google maps पर अन्य जगहों के साथ प्रदर्शित कर सकते हैं। हर बार जब आप या आपका ग्राहक फ़्लिकर वेबसाइट पर आपके एकाउंट्स में फोटो जोड़ता है, तो आपका Google maps स्वचालित रूप से अपडेट हो जाता है।

यदि आप demo पर एक नज़र डालते हैं, तो फ़ोटो जो 'Smaller events' बटन पर क्लिक करते हैं, a Flickr account से खींचा जा रहा है जो मैंने इस ट्यूटोरियल के लिए स्थापित किया था। या, अगर आप अपने Portsmouth History map को देखते हैं, तो फ़ोटो जो पुराने फोटोट्स बटन (दाएं हाथ वाले मेनू) पर क्लिक करते हैं, उन सभी को फ़्लिकर से खींचा जा रहा है।

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

यह ट्यूटोरियल पिछली ट्यूटोरियल पर बना है, जिसमें  getting creative with the Google Maps API और Google Maps API के साथ Flickr API को कैसे लिंक किया जा सकता है, यह समझाकर creating custom overlays शामिल है।

क्विक रिमाइंडर API के बारे में

एक API, या एप्लीकेशन प्रोग्रामिंग इंटरफेस, एक कंपनी (जैसे फेसबुक, ट्विटर, यूट्यूब, फ़्लिकर) द्वारा प्रकाशित कमानों के एक सेट को परिभाषित करने का एक शानदार तरीका है, जो कि किसी को भी अपनी कंटेंट का अत्यधिक अनुकूलित संस्करण बनाने की इजाजत देता है। जब लोग 'mash-ups' के बारे में बात करते हैं तो उनका मतलब है कि उन्होंने दो या अधिक कंपनियों के API का उपयोग कंटेंट को संयोजित करने के लिए किया है। वहाँ सचमुच इन API के आसपास हजारों रहे हैं; सूची के लिए Programmable Web साइट पर एक नज़र डालें।

first tutorial में देखा गया कि Google Maps API आपको रंगों, मानचित्र मार्करों, पॉप-अप बॉक्स शैली, विस्तार का स्तर, ज़ूम स्तर को अनुकूलित करने सहित सभी तरह की चीजों को करने में सक्षम करेगा। फ़्लिकर API बस उतना व्यापक है।

फ़्लिकर API के साथ आरंभ करना

फ़्लिकर API के साथ आरंभ करने के लिए आपको  create a Flickr account की आवश्यकता है, फिर अपने एकाउंट्स में कुछ तस्वीरें जोड़ें ताकि आपके पास काम करने के लिए कुछ हो। विभिन्न स्थानों से कुछ चित्रों का उपयोग करने की कोशिश करें (यह बाद में महत्वपूर्ण होगा)। इस ट्यूटोरियल में उपयोग की जाने वाली इमेजेज इस पेज के शीर्ष पर स्रोत फाइलों में उपलब्ध हैं।

नोट: यदि आप इन इमेजेज का उपयोग करते हैं, तो कृपया अपने मूल निर्माता, इस पेज के फुट में सूचीबद्ध करें।

एक बार आपके साथ खेलने के लिए कुछ कंटेंट है, तो समय आ गया है कि API शुरू हो जाए। ये कुछ प्रमुख वेबसाइट हैं।

• Flickr API developers’ guide। यह एक 'शुरुआती गाइड' की तरह है।
• Flickr API documentation। यह सभी API पद्धतियों को सूचीबद्ध करता है (अर्थात आप API के साथ क्या कर सकते हैं सब कुछ), वे प्रारूप जो आप डेटा का अनुरोध करने के लिए उपयोग कर सकते हैं, और स्वरूपों में डेटा वापस किया जा सकता है। इस पृष्ठ को बुकमार्क करें!
• Flickr API help page

आरंभ करने से पहले, आपको अपनी  get your own API key करने की आवश्यकता है। इन विवरणों का ध्यान रखें; आपको बाद में उनकी आवश्यकता होगी!

फ़्लिकर API के 'Hello World'

इस simple example पर एक नज़र डालें; यह इस ट्यूटोरियल के लिए बनाए गए the Flickr account से तस्वीरें खींचने के लिए फ़्लिकर API का उपयोग करता है। यहां पृथक कोड स्निपेट सूचीबद्ध करने के बजाय, यह अधिक उपयोगी है यदि आप पूरी वेबसाइट के लिए कोड को देखने के लिए देखते हैं कि कैसे चीजें एक साथ काम करती हैं। simple example पर जाएं, पृष्ठ पर राइट-क्लिक करें और view source चुनें। या इस पेज के ऊपर से सोर्स डाउनलोड करें और उसे अलग खींचें।

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

The URL

अपने हेड को चारों ओर ले जाने की सबसे महत्वपूर्ण बात यह है कि आप एक विशेष URL का इस्तेमाल करते हुए फ़्लिकर API तक पहुंच कैसे करते हैं। आप इस URL को 'ask' के लिए डेटा के बाद बनाते हैं। इस URL का पहला भाग है -

http://api.flickr.com/services/rest/

इसके बाद आप यह निर्दिष्ट करने के लिए चीजें जोड़ सकते हैं कि आप क्या कर रहे हैं। पहली चीज जो आप जोड़ते हैं वह मेथड है -

http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos

फिर आप जो तर्क और प्रारूप आप की ज़रूरत होती हैं, जिसमें प्रत्येक के बीच एक और चिह्न है -

http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=1c9f777eb7446f34a7261dc1a54be4b2&user_id=99599718@N05&format=json&jsoncallback=?

• user_id तर्क वह अकाउंट है जिसे आप तस्वीरें खींचना चाहते हैं। यह काम करने के लिए idGettr का उपयोग करें।
• api_key आप पिछले चरण में प्राप्त कोड है। आप अपनी चुनी गई मेथड के दस्तावेज़ीकरण को देखकर मैन्युअल रूप से इस URL का निर्माण कर सकते हैं, उदा। flickr.people.getPublicPhoto, लेकिन यह थोड़ा सा फीड्लय है।

URL विज़ार्ड

सौभाग्य से, फ़्लिकर प्रत्येक 'method' पृष्ठ के निचले भाग में एक आसान विज़ार्ड (API Explorer) को एक लिंक प्रदान करता है। चेतावनी का एक शब्द है, हालांकि; डिफ़ॉल्ट रूप से विज़ार्ड द्वारा उत्पन्न URL के अंत में 'nojsoncallback = 1' है। जैसा कि हमें परिणामों को फ़ंक्शन में धकेलने की जरूरत है, हमारे मामले में अंत 'nojsoncallback=?' होना चाहिए (अधिक विवरण के लिए JSON response format देखें)।

इसलिए, आपके URL का निर्माण करने के लिए जो फ़्लिकर API कहलाता है, आपको ये करने की आवश्यकता है: -

• Flickr API Documentation homepage पर जाएं और मेथड का चयन करें (दाईं ओर की सूची से) जिसे आप उपयोग करना चाहते हैं।
• फिर 'method' पृष्ठ पर (उदाहरण के लिए,  flickr.people.getPublicPhoto), यह सुनिश्चित करने के लिए विवरण पर एक करीब से नज़र डालें कि यह आपके लिए है। फिर पृष्ठ के निचले भाग में नीचे स्क्रॉल करें और API explorer लिंक पर क्लिक करें।
• API एक्सप्लोरर पृष्ठ पर, तर्क के बारे में प्रासंगिक जानकारी भरें और फिर नीचे स्क्रॉल करें। JSON आउटपुट का चयन करें। (बाद में आउटपुट स्वरूपों के बारे में अधिक) और, 'कॉल पर हस्ताक्षर न करें' का चयन करें क्योंकि हम सार्वजनिक डेटा को देख रहे हैं। फिर Call Method बटन (ऊपर) पर क्लिक करें।
• अब स्क्रीन के निचले हिस्से पर नज़र डालें आपको यह देखना चाहिए कि यह आपको आपकी क्वेरी के परिणाम प्रस्तुत करता है। और, अंत में, आपको URL की ज़रूरत है!
• यदि आप इस URL को अपने ब्राउज़र में कॉपी करते हैं, तो आप वास्तव में क्वेरी का परिणाम देखेंगे। वे अक्सर पढ़ने में थोड़ा कठिन होते हैं, लेकिन अगर आप परिणामों को JSON Formatter में प्रतिलिपि करते हैं तो सभी प्रकट होंगे। जैसा कि ऊपर बताया गया है, फ़्लिकर को अपने स्वयं के वेब पृष्ठों के भीतर से कॉल करने के लिए इस URL का उपयोग करने से पहले, 'nojsoncallback =?' को समाप्त करें, और अपनी key के साथ api_key argument को बदलना याद रखें।

$.getJSON("http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=YOUR_FLICKR_API_KEY_HERE&user_id=YOUR_FLICKR_ID_HERE&format=json&jsoncallback=?", displayImages1);

परिणाम कैप्चर करें

फ़्लिकर API को कॉल करने के बाद आपके URL का निर्माण करने के बाद हमें परिणाम कैप्चर करने का एक तरीका चाहिए। हम $.getJSON jQuery मेथड का उपयोग करते हैं। $.getJSON मेथड डेटा में जो JSON प्रारूप में है (उदाहरण के नीचे) पढ़ता है और एक फ़ंक्शन कॉल करता है (इस स्थिति में displayImages1), जो डेटा किसी तरह से संसाधित करती है (इस स्थिति में एक वेब पेज पर इमेजेज प्रदर्शित करने के मामले में)।

रुको - क्या वास्तव में JSON है?

जब तक हम JSON के विषय पर हैं, यह बता रहे है कि JSON जानकारी स्वरूपण या संरचना करने का सिर्फ एक तरीका है, ताकि कंप्यूटर इसे पढ़ सकें। यदि आप JSON आउटपुट (उपरोक्त) को देखते हैं, तो आप यह देखना शुरू कर सकते हैं कि कोड प्रत्येक बिट डेटा तक कैसे पहुंच रहा है। इसलिए, उदाहरण के लिए, data.photos.photo (simple example के स्रोत कोड में displayImages1 function में देखें) JSON में फोटो array में javaScript को निर्देशित कर रहा है जहां अधिक जानकारी संग्रहीत की जाती है। फिर, उदाहरण के लिए, var photoID = item.id; प्रत्येक तस्वीर के लिए id तत्व तक पहुंच रहा है।

एक अंतिम उदाहरण: बिल्ली के बच्चे

आगे बढ़ने से पहले, यह एक और उदाहरण पर एक त्वरित नज़र लेने के लायक है। आइए इंटरनेट के प्राथमिक उद्देश्य को गले लगाते हैं (यानी बिल्ली की तस्वीरें साझा करना) और शब्द 'Kitten' के साथ टैग किए गए चित्र ढूंढें।

हमारे बिल्ली के बच्चे की खोज क्षमताओं को अधिकतम करने के लिए, इस बार हम हर किसी द्वारा अपलोड की गई तस्वीरों के माध्यम से खोज करना चाहते हैं। तो पहला कदम फ़्लिकर API क्वेरी का निर्माण करना है, जो इस तरह दिखता है -

http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1c9f777eb7446f34a7261dc1a54be4b2&tags=kitten&format=json&jsoncallback=?

यह API कॉल flickr.photos.search मेथड का उपयोग कर रहा है। यह URL तब $.getJSON मेथड में खिलाया जाता है और पहले उदाहरण के समान तरीके से संसाधित होता है। परिणाम देखने के लिए live example पर एक नज़र डालें। सोर्स कोड इस पृष्ठ के शीर्ष पर स्थित लिंक से उपलब्ध है।

एक बार जब आप दोनों उदाहरणों पर एक नज़र डालते हैं, तो अपने फ़्लिकर एकाउंट्स से अपनी स्वयं की इमेजेज को पकड़ने और उन्हें वेब पेज पर प्रदर्शित करने के लिए API का इस्तेमाल करने पर जाना है।

बर्फ की चट्टान का कोना!

फ़्लिकर API के साथ आपका पहला ब्रश आपका कैसे काम करता है इसके महत्वपूर्ण सिद्धांतों के साथ सुसज्जित किया है। हालांकि, यह भी संभव है कि आपने ध्यान दिया कि यह कितना बड़ा है!

यह एक बुरी बात नहीं है क्योंकि यह आपको संभावनाओं की एक सरणी प्रदान करता है। API documentation का प्रयोग एक तरह की 'shopping list' में करें। प्रस्ताव में क्या है यह देखने के लिए समय निकालें (API documentation home page के दाईं ओर सूचीबद्ध)।

आपने अलग-अलग अनुरोध प्रारूपों (उदाहरण के लिए हम 'rest' का उपयोग कर रहे हैं - जैसा URL में उपर्युक्त API में दिखाया गया शब्द है), प्रतिक्रिया स्वरूप (जैसे हम JSON का प्रयोग कर रहे हैं), और प्रोग्रामिंग भाषाओं का इस्तेमाल कर सकते हैं। API के साथ (उदाहरण के लिए हम JavaScript का प्रयोग कर रहे हैं)। फिर, यह API की एक ताकत है क्योंकि इसका अर्थ है फ़्लिकर से कंटेंट को अलग-अलग ऐप्स में पोर्ट किया जा सकता है।

इस ट्यूटोरियल में उपयोग किए गए संयोजन को चुना गया था क्योंकि फ़्लिकर API के बारे में सीखने के साथ शुरुआत करने के लिए यह एक अच्छा संयोजन है, और क्योंकि JavaScript आधारित Google Maps API के साथ इस API को जोड़ते समय यह तार्किक संयोजन है। API documentation home page के बाएं हाथ पर उपलब्ध अन्य विकल्पों पर एक नज़र रखना अभी भी लायक है।

Geotagging

फ़्लिकर की सुंदरता यह है कि आप प्रत्येक तस्वीर के सभी प्रकार के मेटा डेटा को संपादित कर सकते हैं।

हम यहां जो दिलचस्पी रखते हैं, वह प्रत्येक फ़ोटो का भौगोलिक स्थान है, और प्रत्येक इमेज के लिए इसे सेट करना आसान है:

• अपने फ़्लिकर एकाउंट्स में लॉग इन करें।
• शीर्ष-बाएं में 'You' पर क्लिक करें।
• नीचे-दाईं ओर मेनू आइकन (एक पंक्ति में तीन छोटे सर्कल्स) पर क्लिक करें।
• 'Add to map' पर क्लिक करें। फिर स्क्रीन पर दिए निर्देशों का पालन करें। फ़्लिकर स्वचालित रूप से प्रत्येक फ़ोटो के लिए अक्षांश और देशांतर को बाहर काम करता है और संग्रहीत करता है।

आपको अपनी प्रत्येक तस्वीर के लिए इस प्रक्रिया को दोहराना होगा।

Google और फ़्लिकर Mashup बनाना

एक बार फ़्लिकर में अपनी तस्वीरों को जियोटैग करके, आप उन्हें Google मानचित्र पर प्रदर्शित कर सकते हैं। Click here to see live demo और फिर स्रोत कोड देखने के लिए राइट-क्लिक करें।

इसी तरह पिछले उदाहरण के लिए, स्रोत कोड के अंदर की टिप्पणियां एक विस्तृत व्याख्या प्रदान करती हैं। हालांकि, कुछ प्रमुख बिंदुओं पर प्रकाश डालने के लिए यह लायक है। सबसे पहले, फ़्लिकर API को कॉल करने वाले URL का निर्माण करने के लिए, हम flickr.photos.search करके फिर से इस्तेमाल करते हैं। इस बार हमने तर्क दिया है has_geo=1 और extras=geo, यह सुनिश्चित करने के लिए कि प्रत्येक इमेज के लिए अक्षांश और देशांतर को भी परिणाम में शामिल किया गया है। URL के परिणाम देखने के लिए जो फ़्लिकर API कहते हैं, इसे अपने ब्राउज़र में कॉपी करें (नीचे) और उसके बाद आउटपुट को और अधिक स्पष्ट रूप से देखने के लिए JSON Formatter का उपयोग करें।

http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1c9f777eb7446f34a7261dc1a54be4b2&user_id=99599718@N05&has_geo=1&extras=geo&format=json&jsoncallback=?

साथ ही, यह भी ध्यान देने योग्य है कि इमेजेज के जरिए JavaScript कोड लूप के रूप में, यह फ़्लिकर API के अक्षांश और देशांतर मानों का उपयोग करके मानचित्र मार्कर बनाने के लिए Google मानचित्र API का उपयोग भी करता है। फिर, body tags के भीतर, Google मानचित्र API का उपयोग मानचित्र को स्वयं बनाने के लिए किया जाता है।

आपको फ़्लिकर में लोड की गई अपनी स्वयं की इमेजेज का उपयोग करके कुछ इसी तरह से पुन: निर्मित करने में सक्षम होना चाहिए। iTouchMap website आपके मानचित्र का केंद्र बिंदु क्या होना चाहिए, यह जानने में उपयोगी है।

फ़्लिकर और हमारे ब्रिटेन के त्योहारों का नक्शा

जो कुछ भी अब बना हुआ है, वह इस ट्यूटोरियल में शामिल सभी चीजों को लेना है और इसे यूके फेस्टिवल मैप पर लागू करना है, जो कि हम इस श्रृंखला के first और second ट्यूटोरियल पर निर्माण कर रहे हैं।

This is the kind of thing we are aiming for। यदि आप 'Smaller events' बटन पर क्लिक करते हैं तो आपको फ़्लिकर से चित्रित होने वाली इमेजेज दिखाई देंगीI

पूर्णता के लिए मैंने भी इमेजेज जो भी फ़्लिकर से नहीं आ रही हैं, को 'main festival' चिह्नों में शामिल कर लिया है I इसके अलावा, आप पॉप-अप बक्से के मामले में विभिन्न विकल्पों को देख सकते हैं, मैंने 'info boxes' ('main festivals' के लिए) और फ़्लिकर के फोटो के लिए डिफ़ॉल्ट 'info windows' का उपयोग किया हैी

यह मानचित्र previous tutorial से कोड में कुछ बदलाव करके और Google मानचित्र और फ़्लिकर मैशप (ऊपर) से कोड जोड़कर बनाया गया था। हम पहले एक वेरिएबल (smallEventsToggle) बनाते हैं कि क्या 'small events' मार्कर वर्तमान में दिखाए जा रहे हैं या नहीं। और, तब 'small events' बटन (smallEvents) पर क्लिक किए जाने पर स्थिति से निपटने के लिए handelRequests फ़ंक्शन में एक नया विकल्प बनाएं। अंत में, पिछले चरण से कोड जोड़ा जाता है और कुछ अंतिम रूप से छूए गए हैं, जैसे कि डिफ़ॉल्ट मानचित्र मार्कर बदलनाI

हमेशा की तरह, आपको ट्यूटोरियल के भीतर बड़े स्निपेट्स को छोड़ने के लिए, downloadable source code के अंदर की टिप्पणियां एक विस्तृत व्याख्या प्रदान करती हैं।

आगे क्या?

अगले ट्यूटोरियल अनुकूलन, उत्तरदायी डिजाइन, डीबगिंग और परीक्षण पर दिखेगा।

इमेज क्रेडिट्स

• Green Man Festival – by Nicholas Smale
• V-Festival - by Liam Swinney
• V-Festival - by Dylan J C
• Download – by Sezzles
• Bestival - by Mike Mantin
• Hop Farm Festival – by Gerardo Lazzari
• Strawberry Fields Festival - by remixyourface
• Wireless – by Surreal Name Given
• Lovebox  – by Annie Mole
• Global Gathering – by Oli R
• Wilderness – by Andy Carter
• Beautiful Days – by Brian Marks
• Creamfields – by Gerardo Lazzari
• British Summer Time – by Andrea Sartorati
• Rewind – by Chris Osborne
• End of the road festival – by jaswooduk
• Y Not Festival  - by  Jo Jakeman
• Isle of Wight – by David Jones
• Reading Festival – by David Martyn Hunt
• Latitude – by markheybo
• Leeds Festival - by Richard Riley
• Secret Garden Party – by Wonderlane
• Glastonbury Festival – by wonker
• Glasgowbury – by Mike Mantin
• T in the Park – by Ian Oldham
• Rockness – by Ian Oldham
• Green map icons

मानचित्र मार्करों पर फ़ोटो के लिए क्रेडिट खुद को first tutorial के अंत में मिल सकते हैं।