वेब प्रौद्योगिकियों का उपयोग करके बनाए गए मोबाइल एप्लिकेशन धीरे-धीरे दुनिया पर कब्जा कर रहे हैं। लेकिन लोकप्रिय प्लेटफार्मों के लिए ऐसे अनुप्रयोगों के निर्माण में बहुत सारी समस्याएं शामिल हैं - बग के अज्ञात इतिहास से, चिड़ियाघर के स्क्रीन आकार, प्रदर्शन समस्याओं के लिए जो केवल पतली जगहों को फिर से लिखने से हल नहीं की जा सकती हैं।
लेकिन सौभाग्य से, इस विषय को ऐसे अनुप्रयोगों को विकसित करने की सामान्य त्रासदी से नहीं भरा जाएगा। आज के बाद से, मैं एक वास्तविक उदाहरण के साथ दिखाऊंगा कि फ़ायरफ़ॉक्स ओएस के लिए अनुप्रयोगों को कैसे विकसित किया जाए, जो अधिकांश आधुनिक वेब प्रौद्योगिकियों का समर्थन करता है, और आम तौर पर बोल रहा है, उनके लिए बनाया गया था और उनके लिए धन्यवाद।
विधि
खाना पकाने के लिए, हमें चाहिए:
०) कुछ सेवा के आपी, हमारे मामले में यह फोटोफुनिया (विज्ञापन के लिए इस पर विचार न करें)।
1) कोणीय js - एक आधार के रूप में
2)
बिल्डिंगफायरफॉक्स जीएसयू -इंजीनियरिंग- ui- ब्लॉकों के रिक्त स्थान
3) jQuery और अन्य स्वाद के लिए
०) आपी
चूंकि आप वास्तविक एप्लिकेशन दिखाना चाहते हैं, तो आपको वास्तविक एपीआई का उपयोग करने की आवश्यकता है। PhotoFunia एक ऐसी साइट है जिसकी मदद से आप अपनी बोरिंग सेल्फी से मजेदार छोटी तस्वीरें बना सकते हैं। इसलिए, हमें थोड़ा, क्लाइंट पर छवियों के साथ काम करना होगा (हालांकि मुख्य कार्य सर्वर पर होगा, निश्चित रूप से)।
1) कोणीय js
कोणीय अच्छा है। बेशक, मोबाइल उपकरणों पर प्रदर्शन के दृष्टिकोण से, मेरे पास इसकी प्रवृत्ति है, लेकिन यह आपको केवल डेटा करने के लिए रूटीन कोड, तत्वों और अन्य चीजों के अपडेट से दूर होने की अनुमति देता है। इसके अलावा, एक कोणीय अनुप्रयोग बिना किसी प्रयास के आसानी से संरचित होता है।
2) बिल्डिंग ब्लॉक
बिल्डिंग ब्लॉक्स गैया स्रोत कोड - फ़ायरफ़ॉक्स ओएस की यूआई परत से (आंशिक रूप से) तैयार किए गए डिज़ाइन तत्व हैं। ये रिक्तियाँ js का उपयोग नहीं करती हैं, जो सभी तर्क हैं वे छद्म चयनकर्ताओं के माध्यम से लागू होते हैं। इस स्थिति में, सभी कोड html5 तत्वों का उपयोग करके लिखे गए हैं, और ब्लॉक की भूमिका को इंगित करने के लिए डेटा- * विशेषताओं का उपयोग करते हैं।
मैंने एक महत्वपूर्ण बात यह भी देखी - बिल्डिंग ब्लॉक्स कोड उस कोड की तुलना में अधिक तेजी से और सुचारू रूप से काम करता है जो मैंने खुद लिखा था, चाहे मैंने कोई भी कोशिश क्यों न की हो। कम से कम यह सूचियों पर लागू होता है। शायद कुछ तत्वों को मूल रूप से त्वरित किया जाता है - मुझे यकीन नहीं है कि यह कितना सच है। इसलिए यदि संभव हो तो, रिक्त स्थान का उपयोग करें - वे विकास को गति देते हैं, आवेदन को मूल जैसा बनाते हैं और इसे चिकना बनाते हैं।
3) jQuery और अन्य
सामान्यतया, मुझे jQuery से छुटकारा पाना अच्छा लगेगा, लेकिन यह
github.com/segdeha/jquery-pan-zoom pinch zoom प्लगइन की एक निर्भरता है। Zepto प्लगइन को हुक करने में विफल रहा। सौभाग्य से, jQuery को आपकी ज़रूरत के टुकड़ों से बनाया जा सकता है। इसलिए, मैंने निर्दयता से रोज़मर्रा के जीवन में सीज़ल और अन्य अनावश्यक चीजों से छुटकारा पाया।
संरचना के बारे में थोड़ा सा
हर कोई एप्लिकेशन की संरचना का उपयोग करता है जो वे चाहते हैं। मेरे मामले में, ऐसा लगता है
/build/ /build.js /build.css /scripts/ /vendors/ /controllers/ /services/ /.../ /app.js /dictionary.js /config.js /styles/ /helpers/ /variables.less /mixins.less /main.less /header.less /... /images/ index.html
लिपियों और शैलियों को वास्तविक समय में ग्रन्ट का उपयोग करके बनाया गया है। और ग्रंट रिलीज पहले से ही सब कुछ बताता है। मैं ग्रंट-कोणीय-टेम्प्लेट का भी उपयोग करता हूं जो सभी टेम्प्लेट को जेएस कोड में बदल देता है, जिसे बिल्ड.जेएस में भी जोड़ा जाता है
प्रारंभिक पृष्ठ लेआउट
<!doctype html> <html ng-app="PhotoFunia" ng-csp> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta charset="UTF-8"> <title>PhotoFunia</title> <link rel="stylesheet" href="build/build.css"/> </head> <body role="application"> <section ng-controller="PreloaderController"> <div id="preloader" ng-hide="preloaderHide"> <div class="preloader-content"> <div class="logo"></div> </div> </div> </section> <section data-type="sidebar" ng-include="VIEWS.DRAWER"></section> <section id="drawer" role="region" ng-view ng-class="{'menu-opened': drawerOpened}"></section> <section role="status" ng-controller="ToastController"> <p ng-if="text" ng-bind="text"></p> </section> <section ng-include="VIEWS.POPUP"></section> <script src="build/build.js"></script> </body> </html>
महत्वपूर्ण है
मुझे लगता है कि कुछ तत्व में एनजी-सीपी पर ध्यान दिया गया है। इस निर्देश में सामग्री सुरक्षा नीति का समर्थन शामिल है - और फ़ायरफ़ॉक्स ओएस के लिए एक आवेदन बनाना अनिवार्य है। इसके अलावा, हमें कोणीय को थोड़ा सा पैच करने की आवश्यकता है!
हम लाइन
window.XMLHttpRequest(); के लिए कोणीय कोड में देख रहे हैं
window.XMLHttpRequest(); और इसे
window.XMLHttpRequest({mozSystem: true}); साथ बदलें
window.XMLHttpRequest({mozSystem: true});और हमें अपनी शैलियों में हाथ जोड़ने की भी आवश्यकता है - सहायक शैलियों कोणीय।जे। अर्थात् -
code.angularjs.org/1.2.16/angular-csp.cssJs के बारे में थोड़ा सा
यह ध्यान दिया जाना चाहिए कि मैं शुरू में कॉफ़ीस्क्रिप्ट में कोड लिखता हूं, लेकिन मैं आपको इसकी जावास्क्रिप्ट एनालॉग दिखाऊंगा। शायद गलतियाँ कहीं न कहीं सामने आएंगी - फिर हम उन्हें एक साथ ठीक कर देंगे।
मुझे यह भी उम्मीद है कि आप कोणीय और जेएस से अच्छी तरह परिचित हैं ताकि मैं हर कदम पर रुक न जाऊं। अन्यथा, कोई भी इस लेख को जीवन में कभी नहीं पढ़ेगा।
बहुभाषी
हमारा आवेदन बहुभाषी होगा। इसलिए, हमें कोड में शब्दों को सम्मिलित करने के लिए एक शब्दकोश, उसके दुभाषिया और किसी प्रकार के निर्देश या फ़िल्टर की आवश्यकता होती है। अक्सर जब यह कोणीय के साथ बहुभाषावाद की बात आती है, तो कुछ फ़िल्टर पॉप अप होते हैं जो बहुत अच्छे नहीं लगते हैं। उदाहरण के लिए, हमें इस तरह से लिखने की पेशकश की जाती है, यह मुझे थोड़ा दुखी करता है - क्यों हर बार एक अतिरिक्त फ़ंक्शन को कॉल करें और इस तरह के असुविधाजनक कोड लिखें यदि आप सिर्फ वैश्विक दायरे में शब्दकोश का उपयोग कर सकते हैं और इसे एक्सेस कर सकते हैं? उदाहरण के लिए, जैसे। मेरे काम के सभी समय के लिए, यह विधि मुझे विफल नहीं हुई। इसे लागू करते हैं।
मैं चाहता हूं कि यह कोई भी घोंसला बन जाए, किसी भी भाषा का समर्थन करें। कोई बात नहीं!
var DICTIONARY = { header: { search: { title: { ru: '', en: 'Search' }, favorites: { ru: '', en: 'Favorites' } } }, cancel: { ru: '', en: 'Cancel' } };
एक संरचना है, अब, चर को सीधे (और भाषा को नहीं) एक्सेस नहीं करने के लिए, आपको एक छोटा पार्सर लिखने की आवश्यकता है।
App.run(['$rootScope', function ($rootScope) { var lang = 'ru';
यही है, हम बस पुनरावर्ती रूप से उस क्षण तक पहुंचते हैं जब चर का मूल्य एक वस्तु नहीं बन जाता है, और वांछित भाषा के साथ मान लौटाता है। सब कुछ सरल है, और अब हमारे पास मूल क्षेत्र में चर एम है, जिसे हम सुरक्षित रूप से संदर्भित कर सकते हैं।
कोई व्यक्ति इस तरह के समाधान के प्रदर्शन पर संदेह करेगा, लेकिन मैं आपको आश्वस्त कर सकता हूं कि यह बाल्टी में गिरावट है। सामान्य तौर पर, कोई भी आपको एक निर्देश लिखने के लिए परेशान नहीं करता है जो एक चर पर घड़ी को लटकाएगा नहीं। तो सब ठीक है।
वापस मार्कअप में
चलो दराज (मेनू) को समाप्त करें। मान लीजिए कि हमारे पास पहले से ही js के रूप में एक रूपरेखा है। एक नियंत्रक है जो हमारे मेनू को कार्य करता है, और हम पहले से ही उन श्रेणियों की एक सूची का उपयोग करके प्राप्त कर चुके हैं जिन्हें हम मेनू में प्रदर्शित करेंगे। फिर मेनू कोड बहुत सरल है।
जैसा कि आप देख सकते हैं, हमारे index.html मार्कअप में, हमने बिल्डिंग ब्लॉक्स से पहले ही कोड का हिस्सा इस्तेमाल कर लिया है। अब हम दराज कोड लेते हैं और इसे अपने लिए थोड़ा बदलते हैं।
buildingfirefoxos.com/building-blocks/drawer.html <nav ng-controller="DrawerController"> <div class="empty-space"></div> <ul> <li> <a ng-click="go('/favorites'); closeDrawer()"> <span class="text" ng-bind="m.menu.favorite"></span> <span class="counter" ng-bind="favorite.get().length"></span> </a> </li> </ul> <h2 ng-bind="m.category.title"></h2> <ul> <li ng-repeat="cat in categories"> <a ng-click="openCategory(cat.key)"> <span class="text" ng-bind="cat.title"></span> <span class="counter" ng-bind="cat.count"></span> <span class="new-counter" ng-if="cat.new_count" ng-bind="'+'+cat.new_count"></span> </a> </li> </ul> </nav>
जैसा कि आप देख सकते हैं, हमारे पास मेनू में दो सूचियां हैं, सबसे ऊपर पसंदीदा में केवल एक लिंक है (ध्यान दें कि हम पहले से ही हमारे वेरिएबल मी हैं?), चयनित फोटो प्रभाव की संख्या भी साइड पर प्रदर्शित होती है। नीचे हमारे पास वास्तव में, श्रेणियों की सूची है।
और तस्वीर को पूरा करने के लिए, हम एक और पेज करेंगे - प्रभावों की एक सूची, यानी एक श्रेणी पेज।
buildingfirefoxos.com/building-blocks/headers.html - यहाँ हम हेडर लेते हैं
buildingfirefoxos.com/building-blocks/lists.html - यहाँ लिस्टिंग हैं
buildingfirefoxos.com/building-blocks/filters.html - यहाँ फ़िल्टर (टैब)
buildingfirefoxos.com/building-blocks/buttons.html - और फिर बटन
और हम, सरलता से, कुछ इस तरह से:
<header> <menu type="toolbar"> <a ng-click="go('/search')"> <span class="icon action-icon search"></span> </a> </menu> <a ng-click="closeDrawer()"><span class="icon icon-menu"></span></a> <a ng-click="openDrawer()"><span class="icon icon-menu"></span></a> <h1 ng-bind="category.title"></h1> </header> <div role="main" data-type="list" id="category"> <ul role="tablist" data-type="filter" data-items="2"> <li role="tab" aria-selected="{{ sorting === 'new'}}"> <a ng-click="setSorting('new')" text="m.category.new"></a> </li> <li role="tab" aria-selected="{{ sorting === 'popular'}}"> <a ng-click="setSorting('popular')" text="m.category.popular"></a> </li> </ul> <ul class="effects"> <li ng-repeat="effect in effects" ng-click="openEffect(effect.key)"> <aside class="pack-end"> <img ng-src="{{CONFIG.DOMAIN + effect.icon}}"> </aside> <a> <p ng-bind="effect.title"></p> <p ng-if="effect.labels"> <span ng-repeat="label in effect.labels" ng-class="label" class="label"></span> </p> </a> </li> </ul> <div class="load-more" ng-if="isNeedMore && effects.length"> <button ng-click="showMore()" text="m.category.show_more"></button> </div> </div>
मुझे उम्मीद है कि सब कुछ स्पष्ट है। और हमें निम्नलिखित को समझने की आवश्यकता है - हम तैयार किए गए ब्लॉक लेते हैं और हमारे लिए सबसे जरूरी है। वे जैसे चाहें घुमा सकते हैं और घुमा सकते हैं।
अन्य सभी पृष्ठ उसी तरह से किए जाते हैं।
फ़ायरफ़ॉक्स ओएस एपीआई के बारे में
फ़ायरफ़ॉक्स ओएस अनुप्रयोगों के संस्करण में = = 1.3, इनपुट [फ़ाइल] काम नहीं करेगा, इसके बदले में, हमें MozActivity का उपयोग करने की पेशकश की जाती है। जो कार्य को सरल भी करता है।
इस प्रकार छवि प्राप्त होती है:
var pick = new MozActivity({ name: "pick", data: { type: ["image/*"], nocrop: true } }); pick.onsuccess = function() { var blob = pick.result.blob;
यहाँ साझा है:
new MozActivity({ name: "share", data: { type: "image/*", number: 1, blobs: [blob] } });
और कुछ इस तरह से - बचत:
var sdcard = navigator.getDeviceStorage("sdcard"); var request = sdcard.addNamed(blob, name); request.onsuccess = function() {}; request.onerror = function() {};
आवेदन तैयार होने के बाद, इसे बनाने और परीक्षण करने की आवश्यकता है।
बनाने के लिए - आप एमुलेटर का उपयोग कर सकते हैं।
मेरा सुझाव है कि आप अनुप्रयोग प्रबंधक का उपयोग करें, जो फ़ायरफ़ॉक्स के नए संस्करणों में डिफ़ॉल्ट रूप से एकीकृत है।
developer.mozilla.org/en/docs/Mozilla/Firefox_OS/Using_the_App_Manager । यहां आप एमुलेटर के विभिन्न संस्करण स्थापित कर सकते हैं, डिवाइस और डेबिट कनेक्ट कर सकते हैं! जो बहुत सुविधाजनक है।
हमें एक एप्लिकेशन मेनिफ़ेस्ट भी चाहिए। यह दिखता है और बहुत सरलता से लिखा जाता है।
मैं एक उदाहरण दूंगा:
{ "name": "PhotoFunia", "description": "PhotoFunia is the best way to add a spark to your photos, make them special and more original.", "launch_path": "/index.html", "version" : "1", "type": "privileged", "developer": { "name": "", "email" : "" }, "default_locale": "en", "icons": { "256": "/images/app_icon_256.png" }, "permissions": { "device-storage:pictures": { "description": "Save result images", "access": "readwrite" }, "device-storage:sdcard": { "description": "Save result images", "access": "readwrite" }, "mobilenetwork": { "description": "Check for available connection" }, "systemXHR": { "description": "Need for internet connection" } } }
दरअसल, हम सभी आवश्यक फाइलों को .zip आर्काइव में डालते हैं और उसे सत्यापन के लिए
marketplace.firefox.com पर भेजते हैं। कुछ दिनों में (और शायद शाम को) आवेदन बाजार में दिखाई देगा!
वह क्या था?
मैं आपको बताना चाहता हूं कि फ़ायरफ़ॉक्स ओएस का विकास बहुत सरल, दिलचस्प और मजेदार है! बेशक, अभी के लिए, कोई भी इससे पैसे नहीं कमा सकता है। लेकिन आप सोच सकते हैं कि हम यहां पैसे के लिए हैं। तो, आईडीई उठाओ और फ़ायरफ़ॉक्स ओएस के लिए एप्लिकेशन बनाएं!
हम में से उन सभी
के लिए जिनके पास फ़ायरफ़ॉक्स ओएस पर एक डिवाइस है - मैं टेबल
मार्केटप्लेस से पूछता हूं
।firefox.com/app/photofuniaमैं सभी इच्छाओं, साथ ही पीएम की गलतियों और कमियों को स्वीकार करता हूं।