🌶️ 🔔 💥 Vkontakte एपीआई में IFrame आवेदन का विकास 🤱🏿 🤜🏻 🎹

कुछ दिनों पहले, मेरे एक मित्र ने मुझे एक ऑनलाइन वोटिंग में मदद करने के लिए कहा, क्योंकि VKontakte में पर्याप्त कार्यक्षमता नहीं थी (वहां आप केवल 15 लोगों के लिए एक सर्वेक्षण बना सकते हैं)। यह काम दिलचस्प निकला। तो, बात करने के लिए!

कौन इस पोस्ट का उपयोग कर सकता है:

कोई व्यक्ति जो यह जानने की कोशिश कर रहा है कि एपीआई VKontakte में कैसे काम करता है;
लोकप्रिय सीएमएस के साथ अनुभव है, यहाँ हम जूमला के बारे में बात करेंगे;
समय में बहुत सीमित;

चरण 1: परिचय

हम संपर्क करते हैं और अपना पहला आवेदन बनाते हैं - आप इसे यहां कर सकते हैं (मुझे यह वर्णन नहीं करना चाहिए कि वहां क्या भरा जाना चाहिए, मुझे लगता है कि सभी ने इसे समझ लिया है)

स्टेज 2: सर्वर साइड

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

सर्वर सॉफ्टवेयर सबसे आम है:

nginx
अपाचे
php 5.2+ (अपाचे मॉड्यूल के रूप में) - संस्करण महत्वपूर्ण है!
memcashed
mysql

जूमला स्थापित करें - वहां सब कुछ बहुत पारदर्शी और स्पष्ट है।

चरण 3: JS API और "संपर्क में API"

हमारे पास सेवा में क्या है: VKontakte में एक नया एप्लिकेशन और कुछ मानक जूमला टेम्पलेट पर बनाई गई साइट।

फिर मैं तुरंत Vkontakte में एपीआई पर ध्यान देना चाहता हूं!

एपीआई के 2 प्रकार हैं:

जावास्क्रिप्ट एपीआई
संपर्क में एपीआई

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

दूसरे की संभावनाएं बहुत अधिक हैं! स्क्रिप्ट www.vkontakte.ru/api.php को किसी भी सुविधाजनक तरीके से एक्सेस किया जा सकता है, यह सर्वर से सीधे AJAX अनुरोध या HTTP अनुरोध हो सकता है। सभी एपीआई विधियों का विवरण यहां है ।

अब एपीआई को शुरू करने और उनके साथ काम करने के बारे में अधिक जानकारी। चलिए शुरू करते हैं:

JS एपीआई को हमारे टेम्पलेट में निम्नलिखित जावास्क्रिप्ट जोड़कर आरम्भ किया गया है:

src = http: //vkontakte.ru/js/api/xd_connection.js? 2

VK.init(function() {
// API initialization succeeded
// Your code here
});

मैं तुरंत ध्यान देना चाहूंगा कि "एपीआई इनिशियलाइज़ेशन सक्सेसफुल" यह लाइन अच्छे कारण के लिए यहाँ लिखी गई है और यह इंगित करती है कि एपीआई काम करने के लिए तैयार होने पर VK.init फ़ंक्शन निष्पादित करेगा! लेकिन आपका वेब संसाधन नहीं। अपने js कोड के निष्पादन के लिए तत्परता की जांच करने के लिए, आप अपने पसंदीदा js-पुस्तकालय या ढांचे का उपयोग कर सकते हैं। निजी तौर पर, मैं मुटूल को पसंद करता हूं - मैंने इसका इस्तेमाल किया।

मेरा आरंभिक कोड इस तरह दिखता है:

VK.init(function() {
// API initialization succeeded
window.addEvent('domready', function(){
//DOM ready
})
});

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

VK.api('getUserSettings', function(data){
if (data.response){
if (!(256 & data.response))
VK.callMethod('showSettingsBox', 263);
}
if (data.error){
alert('Error Code:'+data.error.error);
}
});

ऐसा करने के लिए, पहले getUserSettings फ़ंक्शन को कॉल करें, जो हमें वर्तमान उपयोगकर्ता की सेटिंग्स के बिटमास्क लौटाएगा। कॉल VK.api विधि का उपयोग करके किया जाता है, जहां पहला पैरामीटर फ़ंक्शन का नाम है, और दूसरा कॉलबैक फ़ंक्शन। डेटा चर getUserSettings फ़ंक्शन का परिणाम है, जिसे त्रुटियों के लिए जांचना चाहिए, यदि data.error वापस आ गया है, तो एक त्रुटि है! दो (मेरी राय में) कारणों से कोई त्रुटि हो सकती है: साइट प्रशासन द्वारा आवेदन को मंजूरी नहीं दी गई थी (केवल getProfiles ने अनुमोदन से पहले मेरे लिए काम किया था, वैसे, मैंने बाद में मंचों पर पदों को पूरा किया जो सब कुछ परीक्षण मोड में काम करता है)। यदि फ़ंक्शन data.response वापस आ गया है, तो हम काम करना जारी रखते हैं, वर्तमान अधिकारों और आवश्यक लोगों के बिट मास्क की जांच करते हैं और जेएस एपीआई शोसेटिंगबॉक्स फ़ंक्शन को एकल पैरामीटर (आवश्यक अधिकारों का मुखौटा, मेरे पास 263 कहते हैं - यह उपयोगकर्ता के बाएं मेनू में फ़ोटो, दोस्तों और एप्लिकेशन के लिंक तक पहुंचते हैं) को कॉल करते हैं।

मास्क के बारे में यहाँ और अधिक।

मेरी राय में, जेएस एपीआई का उपयोग करके "एपीआई इन कॉन्टैक्ट" विधियों को कॉल करना किसी भी तरह से अच्छा नहीं है। यह सरल कार्यों के लिए सुविधाजनक है। JS पर बनाया गया एक पूरी तरह से Iframe एप्लिकेशन बहुत समय लेने वाला है। और इसलिए हम HTTP अनुरोध के एपीआई के अध्ययन पर आगे बढ़ते हैं।

चरण 4: PHP और "संपर्क में एपीआई"

ऐसा करने के लिए, हमारे पास जूमला और एक वर्ग है जिसे हम लिंक vkapi.class.php पर उठाते हैं

PHP के माध्यम से एपीआई के साथ काम करने के लिए, आपको दो स्थिरांक बनाने की आवश्यकता होगी, इसमें आपके अनुरोध में यह शामिल होगा आपके आवेदन का यह एपी_आईडी (यह सीधे पता पट्टी में देखा जा सकता है जब आप आवेदन के लिंक पर क्लिक करते हैं) और गुप्त कुंजी जारी की जाती है जब आप आवेदन बनाते हैं (यह लंबा है और इसे बदला जा सकता है। अनुप्रयोग सेटिंग्स में)

PHP द्वारा एपीआई कॉल इस प्रकार है:

foreach ($this->items as $item){
$uids[] = $item->item;
}
$api = new vkapi();
$ans = $api->api('getProfiles', array('uids' => implode(',',$uids), 'fields' => 'photo, photo_big'));

पहला फ़ॉर्चे सभी पंजीकृत उपयोगकर्ताओं को मेरे एप्लिकेशन से लेता है (लेकिन 1000 से अधिक नहीं), और फिर इन उपयोगकर्ताओं के बारे में डेटा डाउनलोड करने के लिए "एपीआई इन कॉन्टैक्ट" से अनुरोध किया जाता है। आउटपुट में, हमारे पास फ़ॉर्म के मानों की एक सरणी होती है: $ ans ['response'] [$ i] ['फ़ील्ड'], जहाँ प्रतिक्रिया उपयोगकर्ता डेटा की एक सरणी होती है, फिर $ i तत्व और अंत में उपयोगकर्ता फ़ील्ड की आवश्यक संपत्ति, उदाहरण के लिए first_name (नाम) या फ़ोटो।

इस दृष्टिकोण के लाभ:

1. सुरक्षित एपीआई तरीके उपलब्ध हो जाते हैं, जो महत्वहीन नहीं है यदि आपको शेष राशि का पता लगाने या वोटों को नामांकन / वापस लेने की आवश्यकता है।
2. एपीआई के साथ काम करने के लिए जेएस में कोड की लाइनों की "हजारों" लिखने की आवश्यकता नहीं है
3. हमें एक ही समय में एक आसान-प्रशासित साइट और एप्लिकेशन मिलता है।

मैंने बहुत लंबे समय तक जूमला में क्या किया और मुझे इसकी आवश्यकता नहीं है। मैं केवल अपने आवेदन का अनुमानित तर्क दूंगा।

यह कोई रहस्य नहीं है कि सभी जूमला घटक MVC पैटर्न पर आधारित हैं। जो सब कुछ समतल पर रखता है!

घटक का नियंत्रक सभी उपयोगकर्ता आदेशों / अनुरोधों को स्वीकार करता है (लिंक का पालन करते समय कम से कम उपयोगकर्ता कार्यों के लिए, जेएस का उपयोग करके कम से कम AJAX अनुरोधों का उपयोग करते हुए)

मॉडल हमारे घटक के डेटाबेस के साथ सभी संचालन के लिए जिम्मेदार है, उदाहरण के लिए, यह स्वयं मतदान को प्रदर्शित करता है, एक विशेष मतदान प्रतिभागी के लिए मतदाताओं की सूची, उत्तर सत्यापन और पुनः मतदान, और कई अन्य सहायक कार्य करता है।

व्यू विभिन्न लेआउट के आउटपुट और मॉडल से डेटा के हस्तांतरण को नियंत्रित करता है।

जूमला के लिए घटकों के विकास में शामिल सभी बहुत स्पष्ट हैं।

कोई भी हमें एप्लिकेशन में कहीं भी vkapi.class.php वर्ग का उपयोग करने के लिए परेशान नहीं करता है, मैंने व्यक्तिगत रूप से इसका उपयोग केवल आउटपुट के लिए डेटा तैयार करने के लिए किया था (उदाहरण के लिए, मेरे आवेदन देने वाले संपर्क में उपयोगकर्ताओं के यूआईडी द्वारा, मैंने फोटो पते अपलोड किए हैं)

चरण 5: विजेट

पहले से ही हर कोई सोशल नेटवर्क से बहुत सारे विभिन्न रूपों और बटन का आदी है। मैं भी अपने इफ्रेम आवेदन में यह चाहता था। टिप्पणी विजेट कैसे कनेक्ट करें:

किसी भी स्थिति में निम्न कोड को पृष्ठ में न जोड़ें:

src = " userapi.com/js/api/openapi.js?22 "

यह साइटों के लिए उपयुक्त है, लेकिन iframe अनुप्रयोगों के लिए उपयुक्त नहीं है!

यह इस तरह से करने के लिए पर्याप्त है:

VK.Widgets.Comments("vk_comments", {limit: 10, width: "578", attach: "*"});

JS API ने विजेट्स जोड़ने के लिए पहले से ही फंक्शन्स लागू कर दिए हैं।

जैसा कि स्वयं टिप्पणियों के लिए है, आप जानते हैं कि जब कोई उपयोगकर्ता किसी एप्लिकेशन के साथ एक पृष्ठ पर एक टिप्पणी छोड़ता है, तो वह इसे अपनी दीवार पर भी प्रकाशित करता है, लेकिन आपकी साइट के लिंक के साथ, आवेदन के लिए नहीं! इससे बचने के लिए, आपको पेजरेल पैरामीटर का उपयोग करने की आवश्यकता है जो प्रारूप www.vkontakte.ru/app {app_id} में आवेदन पते को इंगित करेगा।

अंत में, यह इस तरह निकला:

VK.Widgets.Comments("vk_comments", {limit: 10, width: "578", attach: "*", pageURL: "http://vkontakte.ru/app2176209"});

चरण 6: निष्कर्ष

आउटपुट में, हमारे पास एक जटिल नहीं है, लेकिन Vkontakte में एक कामकाजी अनुप्रयोग है। जिसे Vkontakte और JS API में API के साथ अपने पसंदीदा CMS का उपयोग करके नई सुविधाओं और घटकों को जोड़कर आसानी से विस्तारित और विकसित किया जा सकता है।

यहाँ मुझे क्या मिला है: vkontakte.ru/app2176209

आपका ध्यान के लिए धन्यवाद, सम्मान से Danila।

PS प्रशासन ने एक दिन बाद आवेदन को मंजूरी दे दी, जिसमें 10 वोटों की प्रतिज्ञा मांगी गई थी।
पीपीएस डेढ़ घंटे बाद, कई खरीद प्रस्ताव प्राप्त हुए थे! तुरंत मैं कहता हूं कि यह बिक्री के लिए नहीं है, मैं इस बिंदु को नहीं देखता, अब और भी बहुत कुछ!