PhoneJS - नया एचटीएमएल 5 मोबाइल एप्लीकेशन फ्रेमवर्क

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

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



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

DevExpress पर, हमने एक छोटी टीम का आयोजन किया जो कई महीनों के दौरान विश्लेषण करती है और विभिन्न मौजूदा उपकरणों और तरीकों की कोशिश करती है। इस अनुभव का परिणाम - फोनजेएस - एचटीएमएल 5 में क्रॉस-प्लेटफॉर्म मोबाइल एप्लिकेशन बनाने के लिए हमारा व्यापक समाधान।

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

इस नींव पर, हमने एक लेआउट इंजन और यूआई घटकों का निर्माण किया, जो उनकी उपस्थिति को तीन सबसे लोकप्रिय प्लेटफार्मों - आईओएस, एंड्रॉइड और विंडोज फोन 8 पर अनुकूलित करते हैं।

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



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

आवेदन एक टिप गणना एल्गोरिथ्म लागू करता है। स्रोत कोड GitHub पर उपलब्ध है , और आप इसे ऑनलाइन सिम्युलेटर में कार्रवाई में देख सकते हैं।

संक्षेप में, यह HTML5 में एक सिंगल पेज एप्लीकेशन है। प्रविष्टि बिंदु index.html फ़ाइल है, जिसमें आपको केवल आवश्यक मेटा टैग और अन्य सभी संसाधनों का कनेक्शन दिखाई देगा। फ़ाइलें कैसे जुड़ी हैं, इस पर ध्यान दें

<link rel="dx-template" type="text/html" href="views/home.html" /> 

यह दृष्टिकोण एकल पृष्ठ अनुप्रयोगों की सामान्य समस्या से बचा जाता है जब सभी HTML मार्कअप को एक लंबे सूचकांक में रखना होता है। हम आवेदन के अपघटन के सिद्धांतों का पालन करते हैं और विकास और डिबगिंग के बाद के चरणों की सुविधा प्रदान करते हैं।

Index.js फ़ाइल में, TipCalculator नाम स्थान घोषित किया जाता है और एप्लिकेशन ऑब्जेक्ट बनाया जाता है:

 TipCalculator.app = new DevExpress.framework.html.HtmlApplication(...) 

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



यहां यह आवश्यक है कि लेआउट के बारे में सामान्य रूप से एक विषयांतर किया जाए। PhoneJS में, हमने लेआउट के साथ सजाने वाले पृष्ठों (विचारों, स्क्रीन) के परिचित, सिद्ध और लंबे समय से ज्ञात विचार का उपयोग किया। यह कई सर्वर-साइड वेब फ्रेमवर्क (रूबी ऑन रेल्स, ASP.NET MVC और कई PHP लाइब्रेरी) में किया जाता है।

आप हमारे प्रलेखन में दृश्य और लेआउट के बारे में अधिक पढ़ सकते हैं ।

रूटिंग भी है:

 TipCalculator.app.router.register(":view", { view: "home" }); 

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

मॉडल देखें

विचारों / home.js फ़ाइल में, होम फ़ंक्शन को टिपकाकुलर नेमस्पेस में जोड़ा जाता है, जो होम स्क्रीन के लिए व्यू-मॉडल बनाता है

 TipCalculator.home = function(params) { . . . }; 

तीन इनपुट पैरामीटर हैं: billTotal की राशि ( billTotal ), प्रतिभागियों की संख्या ( splitNum ) और इनाम का आकार ( tipPercent )। उन्हें अवलोकनीय घोषित किया जाता है ताकि वे UI घटकों और ट्रैक मान परिवर्तनों के लिए बाध्य हो सकें।

 var billTotal = ko.observable(), tipPercent = ko.observable(DEFAULT_TIP_PERCENT), splitNum = ko.observable(1); 

उपयोगकर्ता इनपुट के आधार पर, 4 परिणामों की गणना की जाती है: totalToPay , totalPerPerson , totalTip और tipPerPerson । सभी चार अवलोकनीय (या संगणित) निर्भर हैं - अर्थात, जब परिणाम परिवर्तन की गणना करने में कम से कम एक अवलोकनीय शामिल होता है, तो वे स्वचालित रूप से अपडेट हो जाते हैं।

 var totalTip = ko.computed(...); var tipPerPerson = ko.computed(...); var totalPerPerson = ko.computed(...); var totalToPay = ko.computed(...); 

अंतिम राशि आमतौर पर गोल होती है, जिसके लिए दो कार्य roundUp और roundDown , जो roundDown के मूल्य को roundMode । इसका परिवर्तन इसके पर निर्भर कुल totalToPay की एक totalToPay है:

 var totalToPay = ko.computed(function() { var value = totalTip() + billTotalAsNumber(); switch(roundMode()) { case ROUND_DOWN: if(Math.floor(value) >= billTotalAsNumber()) return Math.floor(value); return value; case ROUND_UP: return Math.ceil(value); default: return value; } }); 

हालाँकि, इनपुट मापदंडों में से प्रत्येक को बदलते समय, राउंडिंग को रीसेट करना आवश्यक होता है, ताकि उपयोगकर्ता को सटीक संख्या दिखाई दे, इसके लिए, subscribe विधि का उपयोग करते हुए, हम उनके परिवर्तन की सदस्यता लेते हैं:

 billTotal.subscribe(function() { roundMode(ROUND_NONE); }); tipPercent.subscribe(function() { roundMode(ROUND_NONE); }); splitNum.subscribe(function() { roundMode(ROUND_NONE); }); 

दृश्य मॉडल बहुत सरल है, खासकर उन पाठकों के लिए जो पहले से ही नॉकआउट से परिचित हैं। और जो परिचित नहीं हैं, उनके लिए यह अपनी क्षमताओं का अच्छा प्रदर्शन है।

राय

आइए HTML मार्कअप पर चलते हैं, अर्थात् विचार / home.html फ़ाइल । शीर्ष स्तर पर, दो विशेष div तत्व हैं: "होम" नाम के साथ दृश्य के लिए, "सामग्री" नाम के साथ क्षेत्र के लिए मार्कअप सेट किया गया है।

 <div data-options="dxView : { name: 'home' }"> <div data-options="dxContent : { targetPlaceholder: 'content' }"> . . . </div> </div> 

अंदर एक टूलबार है:

 <div data-bind="dxToolbar: { items: [ { align: 'center', text: 'Tip Calculator' } ] }"></div> 

dxToolbar का एक विजेट है। इसका मार्कअप विवरण नॉकआउट बंधन के रूप में लागू किया गया है।

फील्ड सेट नीचे हैं। उन्हें बनाने के लिए, CSS फ्रेमवर्क में पूर्वनिर्धारित dx-fieldset और dx-field वर्गों का उपयोग किया जाता है। प्रतिशत और लोगों की संख्या के लिए राशि और दो स्लाइडर दर्ज करने के लिए क्षेत्र के अंदर:

 <div data-bind="dxNumberBox: { value: billTotal, placeholder: 'Type here...', valueUpdateEvent: 'keyup', min: 0 }"> </div> <div data-bind="dxSlider: { min: 0, max: 25, step: 1, activeStateEnabled: true, value: tipPercent }"></div> <div data-bind="dxSlider: { min: 1, step: 1, max: 10, activeStateEnabled: true, value: splitNum }"></div> 

अगला, दो बटन ( dxButton ) कुल राशि को गोल करने और परिणाम प्रदर्शित करने के लिए।

 <div class="round-buttons"> <div data-bind="dxButton: { text: 'Round Down', clickAction: roundDown }"></div> <div data-bind="dxButton: { text: 'Round Up', clickAction: roundUp }"></div> </div> <div id="results" class="dx-fieldset"> <div class="dx-field"> <span class="dx-field-label">Total to pay</span> <span class="dx-field-value" style="font-weight: bold" data-bind="text: Globalize.format(totalToPay(), 'c')"></span> </div> <div class="dx-field"> <span class="dx-field-label">Total per person</span> <span class="dx-field-value" data-bind="text: Globalize.format(totalPerPerson(), 'c')"></span> </div> <div class="dx-field"> <span class="dx-field-label">Total tip</span> <span class="dx-field-value" data-bind="text: Globalize.format(totalTip(), 'c')"></span> </div> <div class="dx-field"> <span class="dx-field-label">Tip per person</span> <span class="dx-field-value" data-bind="text: Globalize.format(tipPerPerson(), 'c')"></span> </div> </div> 

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

बाजारों के लिए लॉन्च, डिबगिंग और पैकेजिंग

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



एक और सुविधाजनक विकल्प रिप्पल एमुलेटर है , जो एक ब्राउज़र में चलता है।



लेकिन हम बाजारों में प्रकाशन की संभावना (AppStore, Google Play और Windows Store) के साथ एक वास्तविक मोबाइल एप्लिकेशन प्राप्त करना चाहते हैं।

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

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

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

मरहम में एक छोटी सी मक्खी: आज PhoneGap Build Windows Phone 8 के लिए पैकेजिंग का समर्थन नहीं करता है (वे इस साल के अंत में जोड़ने की योजना बना रहे हैं), और पैकेज बनाने के लिए आपको PhoneGap वितरण में शामिल Windows Phone SDK और CordovaWP8App टेम्पलेट की आवश्यकता होगी।

विजुअल स्टुइडो के उपयोगकर्ताओं के लिए, हमारे पास एक अलग उत्पाद DXTREME मोबाइल (घटकों में से एक के रूप में PhoneJS सहित) है, जो आपको विकास के वातावरण से सीधे iOS, Android और विंडोज फोन 8 के लिए एप्लिकेशन बनाने की अनुमति देता है।



तो PhoneGap + PhoneJS - आप सभी को मोबाइल एप्लिकेशन विकसित करने की आवश्यकता है

PhoneGap हार्डवेयर क्षमताओं तक पहुँच प्रदान करता है और देशी पैकेजों में पैकेजिंग की समस्या को हल करता है।

PhoneJS सिंगल-पेज एप्लिकेशन के लिए बुनियादी ढाँचा और क्रॉस-प्लेटफ़ॉर्म UI बनाने के लिए स्पर्श-अनुकूलित तत्वों का एक सेट प्रदान करता है।

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

सभी विजेट दो मोड में उपयोग किए जा सकते हैं - जैसे नॉकआउट बाइंडिंग:

 <div data-bind="dxCheckbox: {checked: checked} "></div> <script> var myViewModel= { checked: true }; ko.applyBindings(myViewModel); </script> 

और एक jQuery प्लगइन के रूप में:

 <div id="checkboxContainer" ></div> <script> $(function() { $("#checkboxContainer").dxCheckbox({ checked: true }); }); </script> 

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

एक महत्वपूर्ण विवरण पर ध्यान दें: PhoneJS हमारे अधिकांश उत्पादों की तरह नहीं है - यह एक विशिष्ट विकास उपकरण से बंधा नहीं है। वितरण एक ज़िप आर्काइव है, और आप अपने पसंदीदा टेक्स्ट एडिटर, अपने पसंदीदा वेब सर्वर, और डेवलपर टूल को अपने पसंदीदा ब्राउज़र से विकास और डीबगिंग टूल के रूप में उपयोग कर सकते हैं। PhoneJS यहाँ डाउनलोड करें ।

PS PhoneJS गैर-व्यावसायिक उपयोग के लिए निःशुल्क है । और हमारी सहायता टीम आपके प्रश्नों का उत्तर देने और आने वाली कठिनाइयों को दूर करने में मदद करने के लिए तैयार है।