🧑‍🤝‍🧑 🎊 👨 एचटीएमएल 5 मोबाइल ऐप: बग या सफलता। प्रयास नंबर 1 👆🏿 👨‍👩‍👧‍👦 ☝🏿

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

इसलिए, हमें एक छोटा मोबाइल वेब एप्लिकेशन प्राप्त होता है जिसे हम केवल कुछ माउस बटन पर क्लिक करते हुए कई मोबाइल प्लेटफ़ॉर्म के तहत चला सकते हैं।

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

आर्किटेक्चर

हम कुछ सरल लागू करते हैं:

बिक्री एजेंट मार्गों (एक व्यक्ति जो खरीदारी के लिए जाता है और माल का आदेश देता है)। मार्ग सप्ताह का दिन है।
मार्ग से जुड़ी दुकानों (दुकानों) की सूची।
दुकानों के आदेश

हम सर्वर से आवश्यक डेटा प्राप्त करेंगे और इसे स्थानीय रूप से सहेजेंगे।

सर्वर साइड एक स्टैंडअलोन .net MVC है जिसमें ओडटा एप्लिकेशन है। इस आलेख में, मुझे कार्यान्वयन पर विचार करने का कोई कारण नहीं दिखता है, क्योंकि सर्वर को केवल ओडटा प्रोटोकॉल का उपयोग करके डेटा भेजने की आवश्यकता है।

क्लाइंट पार्ट पुस्तकालयों के साथ एक फोनगैप एप्लिकेशन है: फोनजेएस और ब्रीजज ।

तो, चलिए शुरू करते हैं ...

त्वरण के लिए, हम निम्नलिखित संरचना के साथ PhoneJS एप्लिकेशन टेम्पलेट का उपयोग करेंगे:

सीएसएस
js
लेआउट
विचारों
index.css
index.html
index.js

ऐसा लगता है कि सब कुछ स्पष्ट है। Index.html फ़ाइल में, BreezeJS के लिए आवश्यक पुस्तकालयों के लिंक जोड़ें।

एप्लिकेशन लॉन्च

एप्लिकेशन को स्वयं index.js फ़ाइल में बनाया गया है, नेविगेशन और अन्य सेवा कार्यों का वर्णन किया गया है। PhoneJS हमें कई लेआउट प्रदान करता है। मैंने स्लाइडआउट चुना। तो चलो आवेदन बनाएँ:

$(function () { app = ms.app = new DevExpress.framework.html.HtmlApplication(APP_SETTINGS); app.router.register(":view/:item", { view: "Home", item: undefined }); ms.app.viewShown.add(onViewShown); ms.app.navigationManager.navigating.add(onNavigate); startApp(!ms.dataservice.initUserData()); setTimeout(function () { document.addEventListener("deviceready", onDeviceReady, false); console.log("delay"); if (device.platform == "tizen") { document.addEventListener("tizenhwkey", function (e) { if (e.keyName === "back") onBackButton(); }); } }, 1000); });

APP_SETTINGS - एप्लिकेशन पैरामीटर जिसमें हम नेविगेशन और लेआउट इंगित करते हैं:

छिपा हुआ पाठ

 APP_SETTINGS = { namespace: ms, navigationType: "slideout", navigation: [ { "id": "Home", "title": "Home", "action": "#Home", "icon": "home" }, { "id": "Settings", "title": "Settings", "action": "#Settings", "icon": "card" }, { "id": "About", "title": "About", "action": "#about", "icon": "info" } ] };

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

  function startApp(needToSynchronize) { if (needToSynchronize) ms.app.navigate("Settings/1"); else ms.app.navigate(); }

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

डेटा के साथ काम करें

डेटा के साथ काम करने के लिए, एक अलग dataservice.js फ़ाइल बनाएँ:

छिपा हुआ पाठ

 MobileSales.dataservice =function ($, DX, app, undefined) { var DATA_VERSION_KEY = "mobilesales-version", DATA_KEY = "mobilesales-data", logger = app.logger; serviceName = "http://mobsalessrv.azurewebsites.net/odata/"; breeze.config.initializeAdapterInstances({ dataService: "OData" }); var manager = new breeze.EntityManager(serviceName); var store = manager.metadataStore; var queries = { Routes: { name: "Routes", query: breeze.EntityQuery.from("Routes").orderBy("RouteID"), }, Customers: { name: "Customers", query: breeze.EntityQuery.from("Customers").orderBy("CustomerName"), }, ProductTypes: { name: "ProductTypes", query: breeze.EntityQuery.from("ProductTypes").orderBy("ProductTypeName"), }, Products: { name: "Products", query: breeze.EntityQuery.from("Products").orderBy("ProductName"), }, Orders: { name: "Orders", query: breeze.EntityQuery.from("Orders").orderBy("Date"), }, OrderDetails: { name: "OrderDetails", query: breeze.EntityQuery.from("OrderDetails"), }, }; function initUserData() { var dataFromStorage = localStorage.getItem(DATA_KEY); if (dataFromStorage) { manager.importEntities(dataFromStorage); return true; } else { return false; } } function loadData(query) { return manager.executeQuery(query); } function getRoutes(){ return manager.executeQueryLocally(queries.Routes.query); }; function getCustomers() { return manager.executeQueryLocally(queries.Customers.query); }; function getProduct(productID) { var query = queries.Products.query.where("ProductID", "==", productID); return manager.executeQueryLocally(query)[0]; }; function getOrders(customerID) { var query = queries.Orders.query; if (typeof customerID != "undefined" && customerID > 0) query= query.where("CustomerID", "==", customerID); return manager.executeQueryLocally(query); }; function getOrderDetails(orderID) { var query = queries.OrderDetails.query; if (typeof orderID != "undefined" && orderID > 0) query = query.where("OrderID", "==", orderID); var result = manager.executeQueryLocally(query); result.forEach(function (item) { item.ProductName = getProduct(item.ProductID()).ProductName; }); return result; }; function saveDataLocally() { var exportData = manager.exportEntities(); localStorage.setItem(DATA_KEY, exportData); } var dataservice = { manager: manager, metadataStore: manager.metadataStore, initUserData: initUserData, queries: queries, loadData: loadData, getRoutes: getRoutes, getCustomers: getCustomers, saveDataLocally: saveDataLocally, getOrders: getOrders, getOrderDetails: getOrderDetails, }; return dataservice; }(jQuery, DevExpress, MobileSales);

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

ब्रीज़ के पास स्थानीय रूप से manager.exportEntities () और manager.importEntities (dataFromStorage) का उपयोग करके सभी डेटा को स्थानीय रूप से सहेजने और पुनर्स्थापित करने का एक शानदार अवसर है। InitUserData फ़ंक्शन DATA_KEY कुंजी का उपयोग करके स्थानीय संग्रहण में डेटा की जांच करता है और इसे पुनर्प्राप्त करता है। प्रपत्र के अन्य सभी कार्य स्थानीय रूप से आवश्यक संस्थाओं का चयन करते हैं और आवश्यक प्रकारों में उपयोग किए जाते हैं।

सर्वर से सभी डेटा को डाउनलोड करने के लिए, हम एक अलग सेटिंग दृश्य का उपयोग करते हैं, जिसमें डेटा डाउनलोड करने के लिए एक बटन, एक लोडिंग पैनल और संस्थाओं की एक सूची है:

 <div data-options="dxView : { name: 'Settings', title: 'Settings' } "> <div data-options="dxContent : { targetPlaceholder: 'content' } "> <div class="actions"> <div data-bind="dxButton: { text: 'Synchronize', clickAction: synchData }"></div> </div> <div data-bind="dxLoadPanel: { message: message, visible: loading().length>0 }"></div> <div data-bind="dxList: { items: entityList }"> <div data-options="dxTemplate : { name: 'item' }"> <div data-bind="text: $data.name" class="entity-name"> </div> <div data-bind="text: $data.status" class="entity-status"></div> </div> </div> </div> </div>

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

settings.js

 MobileSales.Settings = function (params) { var app = MobileSales, needToSynchonize = params.item==="1", self = this; var vm = { entityList: ko.observableArray([]), loading: ko.observableArray(), viewShowing: function () { if (needToSynchonize) getEntities(); }, viewShown: function () { $(".dx-active-view .dx-scrollable").data("dxScrollView").scrollTo(0); }, synchData: getEntities, }; vm.message = ko.computed(function () { return "Loading ...(left:" + this.loading().length + ")" }, vm); function getEntities() { var mapped = $.map(app.dataservice.queries, function (item) { item.status = ko.observable("Loading"); vm.loading.push(true); app.dataservice.loadData(item.query).then(function (data) { app.logger.log("Loaded data: " + item.query.resourceName); item.status("Succeded"); app.logger.log(app.dataservice.getRoutes()); vm.loading.pop(); if (vm.loading().length === 0) app.dataservice.saveDataLocally(); }).fail(function (error) { item.status("Error"); app.logger.error("Error Loading data"); app.logger.log(error); vm.loading.pop(); }); return item; }); vm.entityList(mapped); }; return vm; };

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

चलो getEntities फ़ंक्शन का विश्लेषण करते हैं: हम dataservice.queries के सभी तत्वों के माध्यम से जाते हैं , प्रत्येक में स्थिति फ़ील्ड जोड़ते हैं और vm.loading.push सरणी (सत्य) के लिए कोई भी मान जोड़ते हैं। सफल निष्पादन या त्रुटियों की पीढ़ी के लिए हैंडलर में, हम तत्व की स्थिति को अपडेट करते हैं और लोडिंग सरणी को कम करते हैं। नतीजतन, हम बहुत आसानी से पूर्ण नियंत्रण के साथ कई संस्थाओं के अतुल्यकालिक लोडिंग प्राप्त करते हैं। इस तरह से यह सब दिखता है।

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

होम दृश्य में, आप मार्ग के मार्ग पर एक खुदरा बिंदु का चयन कर सकते हैं, साथ ही इस बिंदु के आदेश भी देख सकते हैं। यह कैसा दिखता है:

यह कुछ ही क्लिक में मोबाइल एप्लिकेशन प्राप्त करने के लिए बना हुआ है:

● http://build.phonegap.com पर जाएं।

● GitHub के माध्यम से लॉगिन करें।

● इच्छित रिपॉजिटरी का चयन करके एक नया एप्लिकेशन जोड़ें

● जादू बटन दबाएं "निर्माण के लिए तैयार"

● और हम 5 में से 5 प्लेटफार्मों पर आवेदन प्राप्त करते हैं (दुर्भाग्य से मेरे पास आईओएस पर चाबी नहीं है):

छोटी बारीकियाँ: ऊपर की तस्वीर PhoneGap संस्करण 2.9 पर ली गई थी, वैसे, WP यहाँ संस्करण 7 है। संस्करण 3. चुनने पर + हमें यह संदेश मिलता है : ब्लैकबेरी, सिम्बियन, और वेबओएस अब PhoneGap 3 के रूप में समर्थित नहीं हैं , लेकिन इसके लिए WP8 का समर्थन है। ।

यह थोड़ा टार (शायद बहुत कुछ) जोड़ने के लिए रहता है: प्रदर्शन। पुराने या कमजोर उपकरणों पर काम करना असंभव है - ब्रेक बिलकुल सही है। लेकिन जैसे ही मैंने उपकरण को कम या ज्यादा सामान्य मापदंडों के साथ लिया, सब कुछ काम कर गया। मैं मानता हूं, यह एक मूल एप्लिकेशन नहीं है, लेकिन मैं तुलना करना भी नहीं चाहता - ये दो अलग चीजें हैं। और मुझे यकीन है कि यह दृष्टिकोण (ठीक है, सामान्य रूप से HTML5 के अर्थ में) का भविष्य है, और एक आला मिलेगा।

आवेदन लिंक:

● सूत्र https://github.com/gfhfk/MobSales

● एक ब्राउज़र में परीक्षण (मैंने क्रोम और IE11 की कोशिश की) http://mobsales.azurewebooks.net/ ।

● सर्वर साइड के बारे में कौन परवाह करता है: http://mobsalessrv.azurewebooks.net/odata/

● कार्यक्रम ही:

संस्करण 3.4 https://build.phonegap.com/apps/727149

कौन परवाह करता है संस्करण 2.9 https://build.phonegap.com/apps/733422/

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

नोट 2 : कभी-कभी, खासकर जब आप इसे पहली बार शुरू करते हैं या जब आप इसे एमुलेटर पर शुरू करते हैं, तो यह त्रुटि दिखाई देती है:

इस समस्या का हल बहुत आसान है:

1. index.html फ़ाइल को main.html में बदलें।

2. एक नया index.html बनाएँ और टुकड़ा चिपकाएँ:

 <!doctype html> <html> <head> <title>tittle</title> <script> window.location='./main.html'; </script> <body> </body> </html>

3. सब कुछ (कोई भी त्रुटि नहीं है (हालांकि संस्करण 2.9 के साथ, यह अभी भी कुछ उपकरणों पर दिया गया है)।

नोट 3 : WP8 एमुलेटर में, एप्लिकेशन को पहली बार लॉन्च नहीं किया गया है, जब तक कि मुझे पता नहीं क्यों। मैंने वास्तविक उपकरणों पर इसकी कोशिश नहीं की। WP8.1 में यह बिल्कुल भी शुरू नहीं हुआ (मैंने अभी तक इसका पता नहीं लगाया है)।

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

मैंने एक परिणाम नहीं लिखा है, मैं हर किसी को सुझाव देता हूं कि वह खुद इसका परीक्षण करे और एक सर्वेक्षण का उत्तर दे, जिसके अनुसार मैं तय करता हूं कि आगे क्या करना है:

एचटीएमएल 5 मोबाइल ऐप: बग या सफलता। प्रयास नंबर 1

आर्किटेक्चर

एप्लिकेशन लॉन्च

डेटा के साथ काम करें

More articles: