FileAPI 2.0: एक साल बाद सर्वर पर फाइलें अपलोड करना

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

इस दौरान एक लंबा सफर तय किया गया है। पुस्तकालय ने 670+ सितारे और 90+ कांटे अर्जित किए। गितुब समुदाय की मदद से, मैंने बहुत सी "बच्चों की" समस्याओं को ठीक किया और कई सुधार किए। 100 से अधिक कार्यों को बंद कर दिया गया था, और इल्या लेबेदेव के लिए धन्यवाद, फाइलों को भागों में डाउनलोड किया गया था। आज, मैं गर्व से FileAPI 2.0 को पेश करना चाहता हूं।


तो, पहले संस्करण में निम्नलिखित विशेषताएं थीं:

• एकाधिक फ़ाइल चयन;
• सूचना प्राप्त करना (नाम, आकार और माइम प्रकार);
• लोड करने से पहले पूर्वावलोकन की पीढ़ी;
• स्केलिंग, क्रॉपिंग और क्लाइंट पर घुमाव;
• सर्वर + CorS को हुआ सब कुछ अपलोड करना;
• IE6 सहित पुराने ब्राउज़रों में उपरोक्त सभी के लिए समर्थन।

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

<span class="js-fileapi-wrapper"> <input id="file" type="file" multiple /> </span> <script> var input = document.getElementById("file"); FileAPI.event.on(input, "change", function (){ var list = FileAPI.getFiles(input); //    //    FileAPI.upload({ url: "./ctrl.php", files: { userFiles: list }, complete: function (err, xhr){ /*...*/ } }); }); </script> 

पुस्तकालय ब्राउज़र की क्षमताओं को निर्धारित करेगा और, अगर कुछ गायब है, तो फ्लैश पर स्विच करता है।

प्रकाशन के लगभग तुरंत बाद, मुझे पहली समीक्षा और सुझाव मिलना शुरू हुआ, मैं उनमें से सबसे दिलचस्प दे दूँगा।

ओफिसकेशन के दौरान त्रुटि

एक उपयोगकर्ता के लिए, कोड बिल्कुल भी काम नहीं करता था। समस्या निर्माण में थी (api.expando + ++gid) । यह पता चला कि उसके पर्यवेक्षक ने इसे नहीं समझा और बस रिक्त स्थान को हटा दिया, जिसके कारण एक सिंटैक्स त्रुटि हुई, इसलिए कोड को (++gid, api.expando + gid) ।

अमेज़ॅन एस 3 के साथ एकीकृत करने की विशेषताएं

जिस फ़ाइल के लिए अनुरोध किया जाता है, उस url के लिए FileAPI.upload पद्धति को कॉल करते समय, लाइब्रेरी मोबाइल डिवाइसों पर POST पोस्ट अनुरोध को रोकने के लिए एक अद्वितीय GET पैरामीटर जोड़ता है। और अमेज़ॅन एस 3 के साथ एकीकरण करते समय, यह पता चला कि यह जीईटी मापदंडों की अनुमति नहीं देता है। चूंकि उपयोगकर्ता-एजेंट द्वारा सभी मोबाइल उपकरणों को पर्याप्त सटीकता के साथ निर्धारित करना असंभव है, इसलिए कैश विकल्प को अपलोड करने के लिए जोड़ा गया है, जिसके साथ आप एक अद्वितीय जीईटी पैरामीटर के अतिरिक्त को प्रभावित कर सकते हैं।

छवियों के साथ काम करें

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

“बिना फ़ाइलों के डाउनलोड करें

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

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

समीक्षाओं को एकत्र करने और उनका विश्लेषण करने के बाद, एक कार्य योजना तैयार की गई:

• ग्रंट - बिल्डिंग कोड के लिए एक उपकरण;
• क्वनिट - मुख्य कार्यक्षमता का परीक्षण (ग्रंट + फैंटमजेएस);
• विशेषताएं - छवियों और वेबकैम के साथ बेहतर काम;
• jQuery प्लगइन - सामान्य कार्यों के लिए एक सुपर-डुपर प्लगइन;
• प्रलेखन - विधियों और उदाहरणों का विस्तृत विवरण।

घुरघुराना

जैसा कि मैंने पहले ही कहा था, पहले संस्करण में, js को एक आदिम लिपि का उपयोग करके बनाया गया था जो कि केवल एक में 6 फाइलों को मर्ज और ऑबफुसेट करता था। परिवर्तन करने या कोड को डीबग करने के लिए, एक निश्चित क्रम में 6 स्रोतों को जोड़ना आवश्यक था। यह असुविधाजनक है, इसलिए परियोजना के निर्माण के लिए एक उपकरण की आवश्यकता थी। ग्रंट को ऐसे उपकरण के रूप में चुना गया था, जो परियोजना के विकास और संयोजन में वास्तविक मानक है। इसकी मदद से, हम न केवल FileAPI संकलित करते हैं, बल्कि JSHint और Qunit परीक्षणों के माध्यम से अपना कोड भी चलाते हैं, जिसके बारे में मैं बाद में चर्चा करूंगा। ग्रंट का उपयोग शुरू करने के लिए, यह दो फ़ाइलों को बनाने के लिए पर्याप्त है: पैकेज का विवरण और पैकेज और विवरणों और उनके विकल्पों को सूचीबद्ध करने के लिए Gruntfile.js के साथ पैकेज।

चलिए Gruntfile.js पर करीब से नज़र डालते हैं । इसमें 5 मुख्य कार्य शामिल हैं:

JSHint

यह जावास्क्रिप्ट कोड को मान्य करने के लिए सत्यापनकर्ता JSLint से एक अपराध है । इसके विपरीत, जेएसहिंट को एक सामान्य शैली का पालन करने के लिए आपके कोड को अनुकूलित किया जा सकता है, लापता अर्धविराम, किसी सरणी या वस्तु के अंत में अतिरिक्त कॉमा, अप्रयुक्त चर और कोड के कुछ हिस्सों के लिए जाँच करें।

concat

एक में फाइल जमा करता है। FileAPI में, इस भाग में दो भाग होते हैं, `all` और` html5`, जो दो विधानसभाओं से मेल खाता है: फ्लैश समर्थन के साथ और इसके बिना, उदाहरण के लिए, मोबाइल परियोजनाओं के लिए।

कुरूप कर देना

कोड का विरोध, हमारे मामले में यह कॉनैट के बाद प्राप्त फ़ाइलों को संपीड़ित करता है।

घड़ी

क्योंकि लाइब्रेरी में कई फाइलें होती हैं, और केवल एक ही जुड़ा होता है, यह कार्य js फाइलों में परिवर्तन की निगरानी करता है और कॉन्कैट कार्य को लॉन्च करता है।

qunit

PhantomJS की मदद से, Qunit परीक्षण किए जाते हैं, जो आपको मूल कार्यक्षमता का परीक्षण करने की अनुमति देता है।

ग्रंट का उपयोग करना बहुत सरल है, लेकिन आपको शुरू करने से पहले आवश्यक निर्भरता स्थापित करने की आवश्यकता है। यह एक बार किया जाता है, npm install कमांड का उपयोग करते हुए।

अब हम कार्य चला सकते हैं:
$ /FileAPI/ > grunt - डिफ़ॉल्ट कार्य निष्पादित करें (jshint + build)
$ /FileAPI/ > grunt build - बिल्ड और ऑब्ससकेट (concat + uglify + qunit)
$ /FileAPI/ > grunt watch

परीक्षण

जैसा कि आप पहले से ही समझ चुके हैं, क्वनिट का उपयोग परीक्षण के लिए किया जाता है, मुझे हमेशा इसकी सुगमता और सरलता के लिए पसंद आया। इसके अलावा, उसके लिए एक तैयार - से- गंभीर काम है। PhantomJS के माध्यम से टेस्ट चलते हैं, और विकास के दौरान आप केवल पृष्ठ को रीफ्रेश कर सकते हैं और परीक्षा परिणाम की प्रतीक्षा कर सकते हैं।



लेकिन, जैसा कि यह निकला, मानक ग्रंट कार्य में आप उन फाइलों को नहीं बाँध सकते हैं जो मुझे परीक्षण के लिए आवश्यक इनपुट के लिए चाहिए। इसलिए, मुझे इसे थोड़ा संशोधित करना पड़ा:

 qunit: { options: { // :  —  ,  —   files: { one: ["foo.jpeg"], multiple: ["bar.txt", "baz.png", "qux.zip"] } }, all: ["tests/*.html"] } 

फ़ाइलों के साथ काम करने वाले पहले तरीकों का परीक्षण किया जाता है। जैसे मेटा जानकारी (नाम, प्रकार, आकार, एक्जिफ़), पढ़ने की सामग्री (डेटाुर, बाइनरीस्ट्रिंग और टेक्स्ट) प्राप्त करना। आगे किस लोडिंग के दौरान घटनाओं और सर्वर से प्रतिक्रिया की जाँच की जाती है।

लेकिन सबसे दिलचस्प बात छवियों का परीक्षण है, यह सब मुश्किल है। चूंकि फाइलएपीआई "आउट ऑफ द बॉक्स" दिए गए नियमों के अनुसार छवियों को बदल सकता है, इसलिए आपको यह जांचना होगा कि सर्वर द्वारा प्राप्त छवि ठीक वही है जो आपको चाहिए। इसके लिए, छवियों के दो सेट का उपयोग किया जाता है: स्रोत वाले, जिन्हें पुस्तकालय लोड करता है, और संदर्भ वाले, जिनके साथ परिणाम की तुलना की जाती है। यह कैसे होता है? FileAPI परीक्षण किए गए परिवर्तन मापदंडों के साथ छवि को लोड करता है और प्रतिक्रिया में dataURL प्राप्त करता है। डेटा को एक मुखर फ़ंक्शन में स्थानांतरित किया जाता है, जिसे कैनवास में परिवर्तित किया जाता है और पिक्सेल की तुलना संदर्भ छवि के साथ पिक्सेल द्वारा की जाती है। यदि विसंगति <1% से कम है, तो परीक्षण पारित किया जाता है।

 function imageEqual(actual/**Image*/, expected/**Image*/, message/**String*/){ actual = toCanvas(actual); expected = toCanvas(expected); if( actual.width != expected.width ){ ok(false, message + ' (width: ' + actual.width + ' != ' + expected.width + ')'); } else if( actual.height != expected.height ){ ok(false, message + ' (height: ' + actual.height + ' != ' + expected.height + ')'); } else { var actualData = actual.getContext('2d').getImageData(0, 0, actual.width, actual.height); var expectedData = expected.getContext('2d').getImageData(0, 0, expected.width, expected.height); var pixels = 0, failPixels = 0; for( var y = 0; y < actualData.height; y++ ){ for( var x = 0; x < actualData.width; x++ ){ var idx = (x + y * actualData.width) * 4; pixels++; if( !pixelEqual(actualData.data, expectedData.data, idx) ){ failPixels++; } } } ok(failPixels / pixels < .01, text + ' (fail pixels: ' + (failPixels / pixels) + ')'); } } function pixelEqual(actual, expected, idx){ var delta = 3; //   return (Math.abs(actual[idx] - expected[idx]) < delta) && (Math.abs(actual[idx+1] - expected[idx+1]) < delta) && (Math.abs(actual[idx+2] - expected[idx+2]) < delta); } 

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

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

सुविधाओं

ग्रंट, परीक्षण बेशक, अच्छा है, लेकिन यह संस्करण 2.0 पर नहीं खींचता है, मुझे ऐसा कुछ चाहिए था।

छवि ओवरले

प्रकाशन के लगभग एक महीने बाद, मुझसे पूछा गया कि किसी चित्र पर वॉटरमार्क लगाने के लिए और सर्वर पर परिणाम अपलोड करने के लिए पुस्तकालय का उपयोग कैसे किया जाए? इस समस्या को कैनवस तक सीधी पहुँच प्रदान करके हल किया जा सकता है जिसके माध्यम से परिवर्तन होते हैं (जैसा कि jQuery FileUpload में किया जाता है)। लेकिन, अफसोस, संस्करण 10 से नीचे IE हैं, जहां सभी परिवर्तन फ्लैश से गुजरते हैं, इसलिए यह एक ऐसी विधि बनाने का निर्णय लिया गया था जो आपको लचीली पोजिशनिंग सिस्टम के साथ किसी भी संख्या में ओवरले करने की अनुमति देगा:

 FileAPI.Image(file) .overlay([ { x: 10, y: 5, //  rel: FileAPI.Image.RIGHT_BOTTOM, //  opacity: 0.7, //  ,  0  1 src: "watermark.png" //   } ]) .get(err/**Mixed*/, img/**HTMLElement*/){ /*__*/ }) ; 

इसके अलावा, एक ही नाम की संपत्ति छवि में समर्थित है:

 FileAPI.upload({ imageTransform: { overlay: { x: 5, y: 5, rel: FileAPI.Image.CENTER_TOP, src: "watermark.png" //   } } }); 

जैसा कि आप देख सकते हैं, विधि सरल, लेकिन लचीली हो गई।

वेब कैमरा

मुख्य नवाचार एक वेब कैमरा के साथ काम था। ऐसा करने के लिए, navigator.getUserMedia पद्धति HTML5 में दिखाई दी। उसके साथ काम करना बहुत सरल है:

http://jsfiddle.net/RubaXa/uZhRp/

 function setWebCam(video/**HTMLVideo*/, doneFn/**Function*/) { var navigator = window.navigator; var getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; getMedia.call(navigator, { video: true //    - }, function (stream) { var URL = window.URL || window.webkitURL || window.mozURL; video.addEventListener('loadedmetadata', function () { doneFn(); }, false); video.src = URL.createObjectURL(stream); video.play(); }, function () { /*    */ }); } setWebCam(videoEl, function () { //   }); 

सब कुछ काम करने लगता है, लेकिन अगर आप फायरफॉक्स में इस उदाहरण को खोलते हैं, तो आप देखेंगे कि छवि दिखाई देने से पहले कॉलबैक चालू हो जाता है। इसलिए, मुझे कैनवास के माध्यम से एक संकेत परिभाषा बनानी थी:

http://jsfiddle.net/RubaXa/uZhRp/
काश, लेखन के समय, navigator.getUserMedia पद्धति केवल फ़ायरफ़ॉक्स और क्रोम का समर्थन करती है , जो निश्चित रूप से अच्छा है, लेकिन पर्याप्त नहीं है। इसलिए, हमने फ्लैश में कमबैक किया, जिसने हमें अन्य सभी ब्राउज़रों का उपयोग करने की अनुमति दी। नतीजतन, हमें कैमरे के साथ काम करने के लिए निम्नलिखित एपीआई मिले:

 var el = document.getElementById('container'); //   FileAPI.Camera.publish(el, { width: 320, height: 240 }, function (err, cam/**FileAPI.Camera*/){ var btn = document.getElementById('shot') // btn — ,      FileAPI.event.on(btn, 'click', function (evt){ var shot = cam.shot(); //  FileAPI.Image FileAPI.upload({ url: './ctrl.php', files: { photo: shot } }); }); }); 

FileAPI.Camera

• प्रकाशित (एल, विकल्प, कॉलबैक) - एक कैमरा प्रकाशित करने के लिए स्थिर विधि;
• start (कॉलबैक) - प्रसारण शुरू करना;
• शॉट () - एक स्क्रीनशॉट बनाएं, इनहेरिट किए गए फ़ाइल को लौटा दें।
• stop () - कैमरा बंद करो।

फिल्टर

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

इसका उपयोग करना बहुत सरल है, CamanJS में 10 पूर्व-स्थापित फिल्टर हैं, आप उन्हें यहां और यहां काम में देख सकते हैं।

 FileAPI.Image(file) .filter('hazyDays') // CamanJS  .get(function (err, img/**Image*/){ /* ... */ }) ; 

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

 FileAPI.Image(file) .filter(function (canvas, callback){ //  canvas callback(); }) .get(function (err, img/**Image*/){ /* ... */ }) ; 

काश, यह सब केवल HTML5 समर्थन के साथ काम करता। सच कहूं तो, मैं वास्तव में फ्लैश के माध्यम से उपरोक्त कार्यक्षमता के लिए समर्थन करना चाहता था, और यह भी संभव है: बस फ्लैश में कैनवास के साथ काम करने के लिए आवश्यक तरीकों को लागू करने की आवश्यकता है। कुछ और समय।

jQuery.FileAPI

अंतिम नवाचार jQuery के लिए एक पूर्ण प्लगइन था। इसमें, मैंने फ़ाइलों को डाउनलोड करने की सबसे सामान्य विशेषताओं को ध्यान में रखने की कोशिश की, जैसे:

• "एक बटन" - चुनें और स्वचालित रूप से फ़ाइल डाउनलोड करें;
• "सीमाएं" - चौड़ाई और ऊंचाई में फ़ाइल और छवि दोनों का न्यूनतम / अधिकतम आकार;
• "कतार के साथ काम करें" - फ़ाइल अपलोड कतार को सॉर्ट करना और फ़िल्टर करना;
• "छवियां" - पूर्वावलोकन, रोटेशन और फसल;
• "इंटरफ़ेस" - लचीला और पारदर्शी इंटरफ़ेस सेटिंग्स;
• साथ ही Drag'n'Drop और WebCam ।

आप डेमो पेज पर सुविधाओं का मूल्यांकन कर सकते हैं, गिथब या स्पॉइलर के नीचे देखकर।


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

 $("#userpic").fileapi({ url: "./ctrl.php", accept: "image/*", imageSize: { minWidth: 200, minHeight: 200 }, elements: { //    ( ),  active: { show: ".js-upload", //   hide: ".js-browse" //   }, //      preview: { el: ".js-preview", width: 200, //   height: 200 }, //       progress: ".js-progress" }, onSelect: function (evt, ui){ var image = ui.files[0]; if( image ){ createModal(function (overlay){ $(overlay).on("click", ".js-upload", function (){ closeModal(); $("#userpic").fileapi("upload"); //  }); $(".js-img", overlay).cropper({ //   file: image, //   bgColor: "#fff", //  ,      maxSize: [$(window).width() - 100, $(window).height() - 100], //   - minSize: [130, 130], //  -: Math.min(width*.9, height*.9) selection: 0.9, //  "90%" //   - aspectRatio: 1, //   - onSelect: function (coords/**Object*/){ $("#userpic").fileapi("crop", image, coords); } }); }); } } }); 

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

पुस्तकालय और प्लगइन के अलावा, प्रलेखन को बहुत संशोधित किया गया है। अब ये दो पूर्ण साइट हैं:

• FileAPI : उदाहरण | स्रोत कोड | मुद्दों
• jQuery.FileAPI : उदाहरण | स्रोत कोड | मुद्दों

आप हमारी परियोजनाओं का भी अनुसरण कर सकते हैं:

github.com/mailru - FileAPI, टारनटूल, उत्सव और बहुत कुछ
github.com/rubaxa - मेरा जीथूब
@ibnRubaXa