💿 🐨 🚜 सीमावर्ती रुझान। मोबाइल उपकरणों के लिए जावास्क्रिप्ट एपीआई 🗣️ 🛃 🧚🏼

प्रस्तुति: http://sergey.makoveev.info/2013/01/frontend.js-apis-mobile.pretation/
उदाहरण: http://goo.gl/5jv4i
स्रोत: http://goo.gl/YYj0R

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

विकासशील अनुप्रयोगों और सेवाओं के विभिन्न तरीके दिलचस्प हैं। ज्वलंत उदाहरण हैं Adobe अपने Adobe क्रिएटिव क्लाउड के साथ, Microsoft इसके SkyDrive और Microsoft Office वेब ऐप के साथ - यहाँ लोकप्रिय एप्लिकेशन वेब पर चले गए। एक अन्य विकास पथ सेवाओं का विकास है, जब वेब सेवाएं, लोकप्रियता प्राप्त कर रही हैं, अनुप्रयोगों के साथ "अतिवृद्धि" हैं - जीमेल, यूट्यूब।

इस प्रकार, अनुप्रयोग (सेवा), जिसका उद्देश्य "उच्च गुणवत्ता, सुविधाजनक और लोकप्रिय होना" है, वर्तमान में इसकी संरचना में शामिल है:

लोकप्रिय OS (iOS, Android, Windows, Linux, ...) के लिए क्लाइंट एप्लिकेशन;
लोकप्रिय ब्राउज़रों के लिए एक्सटेंशन;
लोकप्रिय ब्राउज़रों के लिए बुकमार्क;
वेब क्लाइंट;
एक सामान्य बैकएंड, जिसमें, मुख्य कार्यक्षमता के साथ, अपने स्वयं के एपीआई और बाहरी सेवाओं के साथ एकीकरण उपकरण लागू होते हैं।

यह स्पष्ट है कि:

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

निस्संदेह, इस तरह के एक अनुप्रयोग का समर्थन करने और विकसित करने की श्रमसाध्यता (और, परिणामस्वरूप, लागत) एक "शुद्ध-वेब-अनुप्रयोग" की तुलना में अतुलनीय रूप से अधिक होगी। इस तरह के अनुप्रयोग की संरचना अधिक संक्षिप्त लगती है:

वेब इंटरफ़ेस;
लोकप्रिय ब्राउज़रों के लिए लोकप्रिय ओएस, एक्सटेंशन और बुकमार्क के लिए क्लाइंट एप्लिकेशन एक तुच्छ "शेल" का प्रतिनिधित्व करते हैं जिसमें वेब इंटरफ़ेस "पैक" होता है;
सामान्य बैकएंड, + एपीआई, + बाहरी सेवाओं के साथ एकीकरण का साधन।

इस तरह की सेवा संरचना के साथ, ऊपर सूचीबद्ध लगभग सभी नुकसान इस तथ्य के कारण समाप्त हो जाते हैं कि संरचना के सभी हिस्सों को मोनोमोर्फिक प्रौद्योगिकियों (जेएस, सीएसएस, एचटीएमएल) का उपयोग करके लागू किया जाता है, और इसलिए, विकास प्रक्रिया का एक मोनोमोर्फिक बुनियादी ढांचा खुद और विकास टीम।

इससे स्वाभाविक प्रश्न उठता है - इस तरह के अभ्यास का सार्वभौमिक रूप से उपयोग क्यों नहीं किया जाता है?
इसका उत्तर सरल है: हाल तक, वेब इंटरफेस प्रत्येक प्लेटफॉर्म के मूल टूल का उपयोग करके लागू किए गए इंटरफेस के साथ प्रतिस्पर्धा नहीं कर सकते थे।

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

जुलाई 2009 में, वर्ल्ड वाइड वेब कंसोर्टियम (W3C) के हिस्से के रूप में, " डिवाइस APIs वर्किंग ग्रुप (GAP) " बनाया गया था, जिसका उद्देश्य डिवाइस सेवाओं (कैमरा, कैलेंडर, कॉन्टैक्ट्स) के साथ वेब एप्लिकेशन की बातचीत के लिए क्लाइंट-साइड API बनाना है। ..)। यहां आप समूह की वर्तमान विकास दिशाओं को देख सकते हैं। उनमें से कुछ पहले से ही ब्राउज़रों में लागू हैं।

नोट : परीक्षण मामले फ़ायरफ़ॉक्स मोबाइल बीटा के लिए लिखे गए हैं।

बैटरी स्थिति एपीआई

ग्राहक मशीन की बैटरी स्थिति के बारे में जानकारी प्रदर्शित करता है।
ब्राउज़र उपसर्ग के साथ कार्यान्वित किया गया।

//,     var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery; //battery.level -    (   0...1) var onlevelchange = function(e) { console.warn("Battery level change: ", battery.level); }; //levelchange -     battery.addEventListener("levelchange", onlevelchange); //battery.charging -   (true - , false -  ) var onchargingchange = function() { console.warn("Battery charge change: ", battery.charging); }; //chargingchange -     battery.addEventListener("chargingchange", onchargingchange); //battery.chargingTime -      var onchargingtimechange = function() { console.warn("Battery charge time change: ", battery.chargingTime); }; //chargingchange -       battery.addEventListener("chargingtimechange", onchargingtimechange); //battery.dischargingTime -      var ondischargingtimechange = function() { console.warn("Battery discharging time change: ", battery.dischargingTime); }; //dischargingtimechange -       battery.addEventListener("dischargingtimechange", ondischargingtimechange);

एक उदाहरण :
डेविड वाल्श / बैटरी स्टेटस एपीआई / उदाहरण ।

स्रोत :
W3C बैटरी स्थिति API ,
MDN / window.navigator.battery ,
डेविड वाल्श / बैटरी स्टेटस एपीआई ।

कंपन एपीआई

डिवाइस के कंपन को नियंत्रित करने के लिए डिज़ाइन किया गया।

 //  1  navigator.vibrate(1000); //:  0.5 ,  1 ,  0.3  navigator.vibrate([500, 1000, 300]); //   navigator.vibrate( ('111111111111111111'+ '111111111111111111').split('') .map(function(){ return 300; }) ); //  navigator.vibrate(0); //  10  navigator.vibrate(10000); //  navigator.vibrate([]);

उदाहरण :
कंपन एपीआई उदाहरण ,
डेविड वाल्श / कंपन एपीआई / उदाहरण ।

स्रोत :
W3C कंपन एपीआई ,
MDN / window.navigator.vibrate ,
डेविड वाल्श / कंपन एपीआई

स्क्रीन ओरिएंटेशन एपीआई

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

 // screen.orientation -     console.log("orientation: " + screen.mozOrientation); // screen.onorientationchange -      screen.addEventListener( "mozorientationchange", function() { console.log("orientation: " + screen.mozOrientation); } );

एक उदाहरण :
स्क्रीन ओरिएंटेशन एपीआई उदाहरण ।

स्रोत :
W3C / स्क्रीन ओरिएंटेशन API ,
एमडीएन / ओरिएंटचेंज इवेंट ।

डिवाइस ओरिएंटेशन एपीआई

डिवाइस ओरिएंटेशन परिवर्तन ईवेंट प्राप्त करने के लिए डिज़ाइन किया गया।

 // window.ondeviceorientation -     // e.alpha, e.beta, e.gamma -     //   x, y, z  window.addEventListener( "deviceorientation", function(e){ console.log(e.alpha, e.beta, e.gamma); } );

उदाहरण :
डिवाइस ओरिएंटेशन API उदाहरण ,
ओपेरा / कम्पास ।

स्रोत :
W3C / उपकरण-निर्माण ,
MDN / ओरिएंटेशन और मोशन डेटा समझाया ,
ओपेरा / ओरिएंटेशन एपीआई ।

डिवाइस मोशन एपीआई

डिवाइस की गति के बारे में एक्सेलेरोमीटर सेंसर की घटनाओं को प्राप्त करने के लिए डिज़ाइन किया गया।

 // window.ondevicemotion -    //    x, y, z : // e.acceleration.x, e.acceleration.y, e.acceleration.z //     x, y, z (  ) : // e.accelerationIncludingGravity.x, e.accelerationIncludingGravity.y, e.accelerationIncludingGravity.z //       z, x, y ( ) : // e.rotationRate.alpha, e.rotationRate.beta, e.rotationRate.gamma window.addEventListener( "devicemotion", function(e){ console.dir(e.acceleration); console.dir(e.accelerationIncludingGravity); console.dir(e.rotationRate); }; );

एक उदाहरण :
डिवाइस मोशन एपीआई उदाहरण ।

स्रोत :
W3C / विचलन ,
MDN / ओरिएंटेशन और मोशन डेटा समझाया ,
एमडीएन / विचलन ,
ओपेरा / ओरिएंटेशन एपीआई ।

एम्बिएंट लाइट इवेंट्स

डिवाइस लाइट सेंसर इवेंट प्राप्त करने के लिए डिज़ाइन किया गया।

 window.addEventListener( "devicelight", //e.value -     function(e){ console.log(e.value); } ); window.addEventListener( 'lightlevel', // e.value = ("normal"|"dim"|"bright") function(e) { console.log('lightlevel: ' + e.value); } );

उदाहरण :
परिवेश प्रकाश एपीआई उदाहरण ,
डग टर्नर / एम्बिएंट लाइट इवेंट्स / उदाहरण ।

स्रोत :
W3C एम्बिएंट लाइट इवेंट्स ,
MDN / DeviceLightEvent ,
डग टर्नर / एम्बिएंट लाइट इवेंट्स ।

निकटता की घटनाओं

डिवाइस निकटता सेंसर घटनाओं।

 window.addEventListener( "deviceproximity", function(e){console.log( e.value, //       (!) e.min, //  ,     (==0) e.max //  ,     )} ); window.addEventListener( "userproximity", function(e){console.log( e.near //true - , false -  )} );

उदाहरण :
निकटता की घटनाओं का उदाहरण है ,
डॉग टर्नर / डिवाइस प्रॉक्सिमिटी / एक्साप्लेम ।

स्रोत :
W3C निकटता घटनाएँ ,
MDN / DevicePro निकटता ,
MDN / UserPro निकटता
डग टर्नर / डिवाइस निकटता ,
डग टर्नर / उपयोगकर्ता निकटता ।

पृष्ठ दृश्यता API

आपको यह निर्धारित करने की अनुमति देता है कि डिवाइस स्क्रीन पर पृष्ठ प्रदर्शित किया गया है या नहीं।
ब्राउज़र उपसर्ग के साथ कार्यान्वित किया गया।

 // ,    : // document.hidden = (true|false) // document.visibilityState = ("hidden"|"visible"|"prerender"|"unloaded") console.log( document.mozHidden, document.mozVisibilityState ); //     : // document.onvisibilitychange = function(e){ ... } document.addEventListener( 'mozvisibilitychange', function(){console.log( document.mozHidden, document.mozVisibilityState );} );

उदाहरण :
पृष्ठ दृश्यता API उदाहरण ,
डेविड वाल्श / पृष्ठ दृश्यता एपीआई / उदाहरण ,
मोज़िला / पृष्ठ दृश्यता एपीआई / उदाहरण ।

स्रोत :
W3C पृष्ठ दृश्यता ,
डेविड वॉल्श / पृष्ठ दृश्यता API ,
Chrome / पृष्ठ दृश्यता API ,
एमडीएन / पृष्ठ दृश्यता एपीआई ।

फुलस्क्रीन एपीआई

पूर्ण स्क्रीन मोड के साथ काम करने की क्षमता प्रदान करता है।
ब्राउज़र उपसर्ग के साथ कार्यान्वित किया गया।

 //   : // document.fullScreenEnabled = (true|false) console.log('fullScreenEnabled :', document.mozFullScreenEnabled ); //  DOM-   : // el.requestFullScreen(); document.mozRequestFullScreen(); // ,    : // document.fullscreenElement console.log('fullscreenElement:', document.mozFullscreenElement); //    : // document.cancelFullScreen(); document.mozCancelFullScreen();

उदाहरण :
फुलस्क्रीन एपीआई / उदाहरण ,
एमडीएन / फुलस्क्रीन एपीआई / उदाहरण ,
डेविड वॉल्श / फुलस्क्रीन एपीआई / उदाहरण ।

स्रोत :
W3C फुलस्क्रीन ,
एमडीएन / फुलस्क्रीन मोड का उपयोग करना ,
डेविड वाल्श / फुलस्क्रीन एपीआई ।

परिणाम

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

सूत्रों का कहना है

प्रस्तुति: http://goo.gl/2CkWb
उदाहरण: http://goo.gl/5jv4i
स्रोत: http://goo.gl/YYj0R

सीमावर्ती रुझान। मोबाइल उपकरणों के लिए जावास्क्रिप्ट एपीआई