🏴 💃🏿 🙀 उल्का पर वास्तविक विकास का अनुभव 🤗 ⏸️ 🐸

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

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

इस परियोजना के लिए उल्का एक अच्छा विकल्प निकला। या परियोजना के रूप में उल्का, बराबर में मेरी पहली नौकरी के रूप में अच्छा निकला। उल्का की मुख्य विशेषता तथाकथित है Reactivity ( Reactivity )। विचार यह है कि प्रोग्रामर ग्राहक और सर्वर के बीच संचार प्रोटोकॉल के बारे में सोचे बिना तर्क का वर्णन करता है। सर्वर पर डेटा बदलते ही क्लाइंट पर डेटा अपडेट करना अपने आप हो जाता है। इसका मतलब यह है कि परियोजना कोड में कोई और AJAX अनुरोध नहीं है।
मैं उल्का के लिए इनपुट डेटा की नकल नहीं करना चाहता। साइट www.meteor.com पर कुछ अच्छे वीडियो हैं, साथ ही हब पर कई लेख भी हैं

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

ग्राहक / - उल्का के ग्राहक भाग के लिए उपलब्ध डेटा
client / client.js - क्लाइंट भाग की मुख्य स्क्रिप्ट
Meteor में उपयोग की जाने वाली html फाइलों के क्लाइंट / व्यू / स्टोरेज
सार्वजनिक / - स्थिर फाइलें जो URL द्वारा सुलभ हैं
server / server.js - सर्वर भाग की मुख्य स्क्रिप्ट
model.js - सर्वर और क्लाइंट पक्ष के लिए एक सामान्य स्क्रिप्ट

संग्रह

डेटाबेस MongoDB है। क्लाइंट भाग में डेटाबेस डेटा तक उसी तरह पहुंच होती है जैसे सर्वर भाग में। यहां तक कि एक्सेस इंटरफ़ेस भी एक ही है - मिनीमोंगो का उपयोग क्लाइंट की ओर से डेटाबेस क्वेरी को अनुकरण करने के लिए किया जाता है। क्लाइंट, मिनिमोंगो के माध्यम से, जावास्क्रिप्ट सरणियों पर काम करता है, सर्वर के विपरीत, जो मोंगोडीबी डेटाबेस के लिए सीधे अनुरोध करता है।

फ़ाइल: model.js

//       Members = new Meteor.Collection('members');

ऊपर के उदाहरण में, सदस्यों का एक संग्रह घोषित किया गया है। चूंकि यह फ़ाइल परियोजना के क्लाइंट और सर्वर दोनों भागों के लिए उपलब्ध है, इसलिए क्लाइंट और सर्वर दोनों पर मेंबर्स चर तक पहुँच उपलब्ध है। यह केवल एक ब्राउज़र में कंसोल को खोलकर और टाइपऑफ़ मेंबर या मेंबर को सत्यापित करके किया जा सकता है। अंतर केवल कार्यान्वयन में है, क्योंकि सर्वर पर सदस्य तरीके सीधे MongoDB के साथ और क्लाइंट पर Minimongo आवरण के माध्यम से जावास्क्रिप्ट सरणियों के साथ काम करेंगे।

ये संग्रह खुद Meteor द्वारा प्रबंधित किए जाते हैं - वह तय करता है कि ग्राहक को डेटा कब अपडेट करना है। प्रोग्रामर ग्राहक पर सदस्य चर द्वारा प्रतिनिधित्व किए जाने वाले डेटा की मात्रा को सीमित कर सकता है। यह सर्वर से डेटा का सबसेट होगा। यह Meteor.publish () और Meteor.subscribe () का उपयोग करके किया जाता है।

फ़ाइल: ग्राहक / client.js

 Meteor.subscribe('members');

इस मामले में, उनके सभी डेटा वाले सभी प्रतिभागियों को क्लाइंट के लिए उपलब्ध होना चाहिए, इसलिए कोई कृत्रिम प्रतिबंध नहीं लगाया जाता है।

फ़ाइल: सर्वर / server.js

 Meteor.publish('members'); Meteor.startup(function () { if (Members.find().count() === 0) { Members.insert({ name: ' ', title: '', url: 'http://mariels.ru/member/profile_alexandra_igorevna.html', photo: 'images/member/ .jpg', thumb: 'http://mariels.ru/$userfiles/thumb_450_1136_94.jpg', vote: 0 }); Members.insert({ name: ' ', title: '', url: 'http://mariels.ru/member/profile_Alionushka.html', photo: 'images/member/ .jpg', thumb: 'http://mariels.ru/$userfiles/thumb_444_1120_90.jpg', vote: 0 }); //   ... } });

ऊपर दिए गए कोड में, Meteor में एक संग्रह को इनिशियलाइज़ करने का एक मानक तरीका है। चूंकि कोड सर्वर / server.js फ़ाइल में है, इसलिए इसे सर्वर पर ही निष्पादित किया जाता है।

HTML टेम्पलेट्स और प्रतिक्रियाशीलता

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

फ़ाइल: ग्राहक / दृश्य / सदस्य। html

 <template name="members"> <div id="members"> {{#render_members members}} <span class="member span6"> <span class="info-cont"> <span class="shadow"></span> <a href="{{member.url}}" class="account"> <img src="{{member.thumb}}" width="" height="" class="avatar"/> <span>{{member.name}}</span> </a> </span> <img src="{{member.photo}}" class="image" /> <span class="rate-cont"> <span class="shadow"></span> <button class="btn {{#if voted}}btn-info{{else}}btn-warning{{/if}} pull-center btn-large" data-id="{{member._id}}" {{#if voted}}disabled{{/if}}> {{#if voted}}    {{else}}   <span>{{member.title}}</span> {{/if}} </button> </span> </span> {{/render_members}} </div> </template>

रेंडर_मैमर्स टैग केवल आउटपुट को लाइनों में विभाजित करने के लिए बनाया गया था (आउटपुट <div class = "row"> हर दो प्रविष्टियाँ), लेकिन सामान्य तौर पर यह एक सामान्य फ़ॉरेस्ट लूप है। टेम्पलेट के लिए उपलब्ध एकमात्र चर सदस्य सरणी है। रेंडर_मैमर्स बॉडी में, सदस्य सरणी से प्रत्येक ऑब्जेक्ट के सभी फ़ील्ड उपलब्ध हैं। पूरी तरह से सटीक होने के लिए, फिर सदस्य एक सरणी नहीं, बल्कि एक कर्सर हैं, लेकिन यह बात नहीं है।

फ़ाइल: ग्राहक / client.js

 Template.members.members = function() { return Members.find({}, { sort: { vote: -1 }}); }

Members.find () कर्सर लौटाता है, जबकि Members.find ()। Fetch () एक साधारण जावास्क्रिप्ट सरणी है। कर्सर को सदस्य टेम्पलेट चर के रूप में उपयोग करना और इसे फ़ंक्शन () {} में लपेटना, हम इस टेम्पलेट चर पर उल्का प्रतिक्रियाशीलता को सक्रिय करते हैं। इसका मतलब यह है कि जैसे ही सदस्य सर्वर पर डेटा संग्रह करते हैं और क्लाइंट को अपडेट भेजे जाते हैं, नए डेटा का उपयोग करके टेम्पलेट स्वचालित रूप से फिर से तैयार हो जाएगा। और इसके लिए आपको क्लाइंट पर किसी अतिरिक्त कोड की आवश्यकता नहीं है!

सर्वर के तरीके

फ़ाइल: सर्वर / server.js

 //     Votes = new Meteor.Collection('votes');

सभी आवाज़ों को वोट संग्रह में संग्रहीत किया जाएगा और यह कई हजार रिकॉर्ड तक बढ़ सकती है। हम स्पष्ट कारणों के लिए सर्वर और क्लाइंट के बीच डेटा की इतनी बड़ी मात्रा में प्रवाह करने की अनुमति नहीं दे सकते। इसके अलावा, क्लाइंट पर, हमें पूरी तरह से प्रत्येक आवाज के डेटा को जानने की आवश्यकता नहीं है, जैसे कि आईपी और तारीख। इन कारणों से, सर्वर पर निष्पादित कोड में केवल एक चर घोषित किया जाता है, और Meteor.publish () / Meteor.subscribe () नहीं कहा जाता है।

फ़ाइल: सर्वर / server.js

 //   IP     var CanVote = Match.Where(function(ip) { check(ip, String); if (ip.length > 0) { var yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1); //       return Votes.find({ ip: ip, date: { $gt: yesterday } }).count() == 0; } return false; }); //  ,   Meteor.methods({ //  true      false    canVote: function() { return Match.test(headers.get('x-forwarded-for'), CanVote); }, //    vote: function(memberId) { check(memberId, String); check(headers.get('x-forwarded-for'), CanVote); var voteId = Votes.insert({ memberId: memberId, ip: headers.get('x-forwarded-for'), date: new Date() }); //  SQL JOIN Members.update(memberId, { $set: { vote: Votes.find({ memberId: memberId }).count() } }); return voteId; }, //      getMemberVotes: function(memberId) { check(memberId, String); return Votes.find({memberId:memberId}).count(); }, //      getTotalVotes: function() { return Votes.find().count(); } });

Meteor.methods () का उपयोग करके, परियोजना के ढांचे के भीतर क्लाइंट और सर्वर के बीच एक संचार इंटरफ़ेस घोषित किया गया है। चूंकि ग्राहक पर वोट संग्रह उपलब्ध नहीं है, इसलिए इस संग्रह के बारे में आवश्यक डेटा प्राप्त करने के लिए तरीकों की घोषणा की गई है, जैसे कि प्रति प्रतिभागी वोटों की संख्या और कुल वोटों की संख्या।

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

सामान्य तौर पर, Meteor.methods () को model.js में परिभाषित किया जा सकता है, फिर क्लाइंट भाग के लिए इन विधियों के रैपर बनाए जाएंगे और, जब बुलाया जाता है, तो क्लाइंट पर डेटा तुरन्त अपडेट किया जाएगा, और उसके बाद ही समायोजित किया जाएगा यदि सर्वर सर्वर पर अलग तरह से व्यवहार करते हैं। इसे लेटेंसी कम्पेंसेशन कहा जाता है। लेकिन इस मामले में, ग्राहक पर वोट संग्रह उपलब्ध नहीं है, जिसका अर्थ है कि इसका कोई मतलब नहीं है। सभी समान, आपको सर्वर से प्रतिक्रिया के लिए इंतजार करना होगा।

अधिक प्रतिक्रियाशीलता

फ़ाइल: ग्राहक / विचार / रेटिंग। html

 <template name="ratings"> <div id="ratings" class="well"> <h1 class="heading uppercase"></h1> <div class="chart"> {{#each_with_index members}} <div class="rating num{{index}}"> <img src="{{data.thumb}}" class="avatar"/> </div> {{/each_with_index}} </div> <div class="pull-center pull-center-1"> <div id="votes">{{votes}}</div> <div><strong></strong></div> </div> </div> </template>

फ़ाइल: ग्राहक / client.js

 Session.setDefault('totalVotes', 0); Meteor.startup(function() { //   totalVotes  Deps.autorun(function() { var total = 0; Members.find().forEach(function(m) { total += m.vote; }); Session.set('totalVotes', total); }); //    -5 Deps.autorun(function() { var top = Members.findOne({}, { sort: { vote: -1 }}); //    // update ratings chart Members.find({}, { sort: { vote: -1 }, limit: 5 }).forEach(function(m, i) { var height = top ? Math.floor((m.vote / top.vote) * 190) + 100 : 100; $('.rating.num'+(i+1)).css('height', height); }); }); }); Template.ratings.members = function() { return Members.find({}, {limit: 5, sort: { vote: -1 }}); }; Template.ratings.votes = function() { return Session.get('totalVotes'); };

सत्र केवल क्लाइंट पर मौजूद होता है और यह लगातार नहीं रहता है, अर्थात यह पृष्ठ रीफ्रेश होने पर रीसेट हो जाता है। सत्र ऑब्जेक्ट, जैसे कि संग्रह कर्सर, प्रतिक्रियाशीलता को सक्रिय करता है, इसलिए जब आप TotalVotes के मूल्य को बदलते हैं, तो सत्र में रेटिंग टेम्पलेट को फिर से तैयार किया जाएगा।

हर बार एक फ़ंक्शन में प्रतिक्रियाशील डेटा कैसे बदलता है, डिपेसटॉरन () को निष्पादित किया जाता है। इस मामले में, यह कर्सर Members.find () है। विचार यह है कि जैसे ही सर्वर किसी भी प्रतिभागी के वोटों को अपडेट करता है, सत्र के कुलVotes का मूल्य सभी क्लाइंट के लिए अपडेट किया जाता है, और इससे रेटिंग ब्लॉक को फिर से जोड़ा जाएगा। Deps.autorun () का उपयोग क्लाइंट पर डेटा परिवर्तन करने के लिए कॉलबैक जोड़ने के लिए किया जाता है। संग्रह के विशिष्ट आयोजनों की सदस्यता लेने के तरीके हैं, जैसे, बदले, अधिक विस्तार से यहां हटाए गए हैं ।
इस प्रकार, यदि कोई व्यक्ति मतदान करता है जबकि आगंतुक रेटिंग ब्लॉक देखता है, तो रेटिंग बार उनकी ऊंचाई बदल देंगे और काउंटर बढ़ जाएगा।

आप यहां jQuery के उपयोग को भी देख सकते हैं। यह लगभग कोई सीमा नहीं के साथ उल्का ग्राहक कोड के साथ मिलाया जा सकता है। वैसे, Meteor.startup (function {}) और jQuery (function () {}) समान हैं।

फ़ाइल: ग्राहक / client.js

 Session.setDefault('voted', false); //       Template.members.voted = function() { return Session.get('voted'); } Template.members.events = { 'click button': function(event) { var $btn = $(event.currentTarget); //  ,   Latency Compensation   //         DOM Session.set('voted', true); //     Meteor.call('vote', $btn.data('id'), function(error, vote) { if (error) { Session.set('voted', false); } }); } }

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

इस कोड में DOM इवेंट्स का उपयोग करने का एक उदाहरण भी है। सिद्धांत रूप में, आप jQuery.on () का उपयोग कर सकते हैं, लेकिन मैंने विहित तरीके से जाने का फैसला किया।

फ़ाइल: क्लाइंट / विचार / index.html

 <head> <!--  meta   ..  SEO   --> <link href="stylesheets/project.css" media="screen" rel="stylesheet" type="text/css" /> <!-- ...   CSS --> <script type="text/javascript" src="js/flipclock/flipclock.min.js"></script> <!--   JavaScript --> <title>  2013</title> </head> <body> <div class="page-header-bg"></div> {{>header}} <div class="container-fluid"> <div class="container"> <div class="page-header"> <h1 class="header-gradient">  2013</h1> </div> {{>page}} </div> </div> </body> <template name="page"> {{#if contestInProgress}} {{>countdown}} {{>members}} {{>social}} {{>ratings}} {{>terms}} {{>footer}} {{else}} {{>winner}} {{>social}} {{>footer}} {{/if}} </template>

उल्का परियोजना में पाए जाने वाले सभी जावास्क्रिप्ट, एचटीएमएल, सीएसएस फाइलों को संसाधित करता है और उन्हें कुछ नियमों के अनुसार संयोजित करता है। हालाँकि, सार्वजनिक फ़ोल्डर की फ़ाइलों को स्थिर माना जाता है, जो सुलभ है और मेट्योर द्वारा संसाधित नहीं की जाती है। शैलियों को उल्का नियंत्रण के तहत स्थानांतरित किया जा सकता है, लेकिन यह मानक दृष्टिकोण का उपयोग करने का निर्णय लिया गया - HTML हेडर में स्थिर फ़ाइलों के लिंक को शामिल करने के लिए।

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

फ़ाइल: ग्राहक / client.js

 contestEndDate = new Date('01/30/2014 12:00'); Session.set('inProgress', new Date() < contestEndDate); Template.header.contestInProgress = Template.page.contestInProgress = Template.footer.contestInProgress = function() { return Session.get('inProgress'); } Meteor.startup(function() { //   var targetDate = contestEndDate; var currentDate = new Date(); var offsetSeconds = (targetDate.getTime() - currentDate.getTime()) / 1000; offsetSeconds = Math.max(0, offsetSeconds); var clock = $('#countdown').FlipClock(offsetSeconds, { clockFace: 'DailyCounter', defaultClockFace: 'DailyCounter', countdown: true, callbacks: { stop: function() { Session.set('inProgress', false); } } }); });

Index.html में, प्रतिक्रियाशीलता का एक और अनुप्रयोग देखा जा सकता है। चर प्रतियोगिताInProgress प्रतियोगिता की स्थिति को इंगित करता है - प्रगति में या पहले से ही। इस स्थिति के आधार पर पृष्ठ की उपस्थिति पूरी तरह से बदल जाती है। जब पेज को इनिशियलाइज़ किया जाता है, तो स्टेटस सेट किया जाता है, और क्लाइंट द्वारा तब भी बदलाव होता है जब FlipClock काउंटर का स्टॉप इवेंट होता है।

चर प्रतियोगिताInProgress तीन टेम्पलेट्स में है और इसका मूल्य समान है। टेम्प्लेट एक-दूसरे से स्वतंत्र होते हैं और अलग-अलग फिर से बनाए जाते हैं।

यह कोड से देखा जा सकता है कि तृतीय-पक्ष FlipClock लाइब्रेरी द्वारा शुरू किए गए ईवेंट हैंडलर से, उल्का ग्राहक सत्र का मूल्य बदल जाता है। और यह इस तथ्य के बावजूद कि पृष्ठ लोड होने पर FlipClock लाइब्रेरी क्लाइंट ब्राउज़र द्वारा लोड की जाती है।
यह वह जगह है जहां उल्का का खुला लाभ खुलता है। चूंकि उलटी गिनती के अंत में पृष्ठ को फिर से बनाना इतना आसान है, ऐसा क्यों नहीं करते ? यह कोड की सिर्फ एक पंक्ति है, लेकिन यदि कोई व्यक्ति उस क्षण पृष्ठ देख रहा है तो यह शानदार लगेगा।
यदि इस परियोजना को PHP + AJAX में विकसित किया गया था, तो यह एक अलग कार्य होगा। अपूर्ण, लेकिन यह देखते हुए कि यह घटना परियोजना के पूरे अस्तित्व के दौरान केवल एक बार होगी, यह संभव है कि प्रोग्रामर को केवल पृष्ठ की स्थिति को अपडेट करने पर अपने हाथ नहीं मिलेंगे। और क्यों इस पर समय बर्बाद करते हैं अगर कुछ लोग इसे देखते हैं? बाकी बस एक विजेता के साथ एक पेज मिलेगा। यह उल्का का आकर्षण है - प्रोग्रामर को संचार प्रोटोकॉल के बारे में सोचने की आवश्यकता नहीं है और वह उन छोटी चीजों पर ध्यान केंद्रित कर सकता है जिन्हें पहले एक लंबे बॉक्स में रखा गया था।

उत्कर्ष

खैर, अंत में मैं एक निश्चित परिणाम का सारांश दूंगा। यह परियोजना सफल रही और मुझे लगता है कि उल्का प्रतिक्रिया ने यहां महत्वपूर्ण भूमिका निभाई। उल्का पर इस तरह की एक छोटी सी वेब परियोजना विकसित करना एक खुशी की बात है, हालांकि कभी-कभी तुच्छ समस्याओं का हल खोजने में लंबा समय लगता है। अगर मैंने PHP का उपयोग किया होता तो मैं निश्चित रूप से इतने सारे इंटरैक्टिव तत्वों वाला पेज नहीं बनाता।

लाभ:

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

नुकसान:

अभी भी पूर्वावलोकन चरण में, बड़ी परियोजनाओं के लिए उपयुक्त नहीं है
कोड में, भारी निर्माणों का उपयोग करके कुछ तुच्छ समस्याओं को हल किया जाना है
एक लड़ाकू सर्वर पर इंस्टॉलेशन के लिए एक नोड.जेएस सर्वर की आवश्यकता होती है, और यदि पहले से ही एक http सर्वर है, तो पोर्ट 80 से प्रॉक्सी सेटिंग्स
जावास्क्रिप्ट की बड़ी मात्रा के कारण मोबाइल उपकरणों के लिए बिल्कुल उपयुक्त नहीं है
ब्राउज़र की सभी सामग्री जावास्क्रिप्ट का उपयोग करके बनाई गई है, यह एसईओ को नकारात्मक रूप से प्रभावित कर सकती है

प्रतियोगिता स्वयं ही समाप्त हो गई है, और आप यहाँ पर test version का प्रमोशन कर सकते हैं
Github.com/imajus/promo प्रोजेक्ट के सूत्र

उल्का पर वास्तविक विकास का अनुभव