🏣 👨🏼‍💼 ⚛️ VkOMG। अगली अनावश्यक सेवा का विकास 👩‍👦‍👦 🧚🏾 🥋

मुझे विपणन के संदर्भ में सामाजिक नेटवर्क के लिए "उपहार" की एक किस्म में दिलचस्पी है। अर्थात्, यह अगली बकवास कितनी जल्दी बड़े पैमाने पर उपयोग में जाएगी और इस प्रभाव को प्राप्त करने के लिए कितना प्रयास किया जाएगा। नीचे मैं अपने पिछले काम vkomg.com के उदाहरण पर जो कुछ मैंने सीखा उसका परिणाम बताऊंगा

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

कुछ दिनों पहले, जब हमने देखा कि तस्वीरों के साथ ठीक वैसा ही ब्लॉक मुख्य फोटो के पास हमारे VKontakte पर दिखाई दिया, तो हमें पहले ही दिन VKontakte पर मौजूदा फेसबुक प्रोजेक्ट को रीमेक करने का विचार आया।

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

पद की निरंतरता में विशिष्ट संख्या, इतिहास, परिणाम और कोड के टुकड़े।

UPD: कार्रवाई में बाधा। हम वास्तविकता के वादा किए अधिकतम भार के बीच विसंगति के लिए तकनीकी सहायता के साथ शपथ लेते हैं।

UPD2: होस्टर ने तय किया है। सर्वर अच्छे स्वास्थ्य में है।

कहाँ से शुरू करें?

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

मुख्य विशेषताएं और आवश्यकताएं थीं:

प्रगति संकेतक के साथ अजाक्स फोटो फाइल अपलोड;
अधिक से अधिक उपयोगकर्ता सुविधा के लिए इंटरफ़ेस तत्वों को प्री लोड करें;
फोटो में मुखौटा की स्थिति की आसान क्षमता;
पूर्वावलोकन;
एक संग्रह में तैयार फ़ोटो डाउनलोड करने की क्षमता;
पृष्ठ को फिर से लोड किए बिना क्षैतिज रूप से फ़ोटो को प्रतिबिंबित करने की क्षमता;
विज्ञापन में किसी भी भौतिक निवेश की अनुपस्थिति।

मुखौटा और फ़ाइल स्वरूप

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

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

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

.flip-x { 
      

        
        
        
      

     -moz-transform: scaleX(-1); 
      

        
        
        
      

     -webkit-transform: scaleX(-1); 
      

        
        
        
      

     -o-transform: scaleX(-1); /*  Opera */ 
      

        
        
        
      

     transform: scaleX(-1); 
      

        
        
        
      

     filter: fliph; /*  IE */ 
      

        
        
        
      

     }

व्यवहार में, मुझे आसानी से यकीन हो गया कि यह विधि ओपेरा और IE सहित सभी ब्राउज़रों में ठीक काम करती है। हालाँकि, इस विधि में एक बड़ी लेकिन बहुत छोटी खामी है। यदि आप इस वर्ग को img टैग पर लागू करते हैं, तो जब आप अपने ब्राउज़र के साथ कोई चित्र सहेजने का प्रयास करते हैं, तो अपरिष्कृत मूल सहेजा जाएगा।

सभी सर्वर छवि रूपांतरण ImageMagick का उपयोग करके किया जाता है। क्षैतिज प्रतिबिंब, उदाहरण के लिए, निम्नानुसार किया जाता है:

system("convert -flop /path/to/file/original.jpg /path/to/file/tmp.jpg");

इसके अलावा, ImageMagick के लिए धन्यवाद, बड़ी संख्या में प्रारूपों के लिए समर्थन प्राप्त करना आसान है। केवल मानक jpg, gif और png ही नहीं। चूंकि उपयोगकर्ता को jpg प्राप्त होता है, इसलिए यह फोटो अपलोड स्टेज पर भी कनवर्टर का उपयोग करने के लिए समझ में आता है।

system("convert /path/to/file/original.ext /path/to/file/out.jpg",$result); 
      

        
        
        
      

     if ($result===0) { 
      

        
        
        
      

     //   . 
      

        
        
        
      

     }

लोडर

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

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

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

स्थिति को मापने के लिए, Uploadify नामक एक jQuery प्लगइन का उपयोग किया गया था ।

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

नफरत करने वालों के लिए एक फ्लश विकल्प पर भी विचार किया जाना चाहिए। (फ्लैश के बिना उपयोगकर्ताओं के लिए समान मानक फॉर्म का उपयोग करना)। खोज इंजन के लिए पहली पहली क्वेरी दिलचस्प परिणाम उत्पन्न करती है: सभी प्रकार के अकल्पनीय तरीकों के साथ फ्लैश के संस्करण का निर्धारण करने के लिए एक पुस्तकालय ।

HTML में एक साथ दो फॉर्म होते हैं: एक नियमित मल्टीपार्ट और फ्लैश तत्वों के साथ एक फॉर्म। फ़्लैश फॉर्म डिफ़ॉल्ट रूप से उपयोगकर्ता की आंखों से छिपा होता है।

if(FlashDetect.installed) { 
      

        
        
        
      

     $('#plainform').hide(); 
      

        
        
        
      

     $('#ajaxform').show(); 
      

        
        
        
      

     }

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

पूर्वावलोकन

पूर्वावलोकन एक और चीज है जो औसत उपयोगकर्ता के लिए जीवन को आसान बनाता है। यह विचार सरल है: एक सार्वभौमिक पृष्ठभूमि रिक्त पर सीएसएस का उपयोग करके छवियां, स्थिति छवियां उत्पन्न करें। मैं विवरण में नहीं जाऊंगा। यहाँ पर ध्यान देने योग्य बात केवल पॉपअप स्क्रिप्ट है। हाल ही में, मैं TopUp नामक एक उत्पाद के साथ आया, जो काफी ठोस साबित हुआ और उपयोग के लंबे इतिहास पर एक भी समस्या का कारण नहीं बना।

पहले से लोड होने

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

function preload(sources) 
      

        
        
        
      

     { 
      

        
        
        
      

     var images = []; 
      

        
        
        
      

     for (i = 0, length = sources.length; i < length; ++i) { 
      

        
        
        
      

     images[i] = new Image(); 
      

        
        
        
      

     images[i].src = sources[i]; 
      

        
        
        
      

     } 
      

        
        
        
      

     } 
      

        
        
        
      

     $(window).load(function() { 
      

        
        
        
      

     $("#preload").attr('src','preload-step2.php'); 
      

        
        
        
      

     preload([ 
      

        
        
        
      

     "res/images/preview.png", 
      

        
        
        
      

     "res/images/top_up/dashboard/sprite.png", 
      

        
        
        
      

     "res/images/top_up/dashboard/close_link.png", 
      

        
        
        
      

     "res/images/top_up/dashboard/bottom_left.png", 
      

        
        
        
      

     "res/images/top_up/dashboard/top_right.png", 
      

        
        
        
      

     "res/images/top_up/dashboard/bottom_right.png", 
      

        
        
        
      

     .......................... 
      

        
        
        
      

     .......................... 
      

        
        
        
      

     "res/images/btn-flip.gif"] 
      

        
        
        
      

     ) 
      

        
        
        
      

     });

वाटर-मार्क

इसके बाद, एक पारदर्शी वॉटरमार्क बनाने का सवाल उठा। यह याद करते हुए कि जीडी का उपयोग करके वॉटरमार्क को लागू करने में कितने जोड़तोड़ होते हैं, मैंने इस उद्देश्य के लिए उसी इमेजमैजिक का उपयोग करने का निर्णय लिया।

system("composite -gravity south -alpha on /path/to/file/watermark.png /path/to/file/profile.jpg /path/to/file/profile.jpg');

अप्रचलित फ़ाइलों को हटा दें

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

#!/bin/bash 
      

        
        
        
      

     for i in `find /path/to/dirs/ -maxdepth 1 -type d -mtime +1 -print`; do rm -rf $i; done

आंकड़े

और अब, सबसे दिलचस्प परिणाम है।

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

VKOMG की शुरुआत भी इसी तरह से हुई। URL के साथ अपने स्वयं के अवतार और स्थिति के प्रकाशन + 25 रूबल के बजट के साथ एक लक्षित विज्ञापन, जो केवल आधिकारिक VK पृष्ठ (वीके पृष्ठ पर नहीं, और बाहरी यूआरएल के लिए) के लिए 50 रेफरल लाया।

फिर भी, यहां 4 दिनों के काम के लिए हमारे मामूली परिणाम हैं:

1 दिन - 24 अद्वितीय आगंतुक, 56 अवतार बनाए।
2 दिन - 246 उपयोगकर्ता, 542 अवतार बनाए।
3 दिन - 440 अद्वितीय उपयोगकर्ता, 1408 अवतार बनाए
4 दिन - 890 उपयोगकर्ता - 2486 अवतार बनाए।

VkOMG। अगली अनावश्यक सेवा का विकास