जावास्क्रिप्ट में क्लाइंट-सर्वर इन्फ्रास्ट्रक्चर का विकास (भाग 1 - ग्राहक)

यह लेख किस बारे में है मैं फोनगैप पर एक मोबाइल एप्लिकेशन विकसित करने के अपने अनुभव को साझा करना चाहता हूं। नतीजतन, हमें RESTfull सर्वर, क्लाइंट्स और यहां तक ​​कि PaS पर होस्ट किया गया एक संपूर्ण सॉफ्टवेयर पैकेज मिला। इसलिए, मैं अलग से क्लाइंट एप्लिकेशन (फोनगैप में लिपटा एचटीएमएल 5 सिंगल पेज ऐप), सर्वर (स्वैगर-नोड-एक्सप्रेस-नोड-ओआरएम 2 के साथ नोड्ज), और यह सब ओपनहैफ्ट्स एएएस पर कैसे रखा जाए, इसका वर्णन करेंगे।

जावास्क्रिप्ट में क्लाइंट-सर्वर इन्फ्रास्ट्रक्चर का विकास (भाग 2 - सर्वर और होस्टिंग)

अधीर के लिए:
प्रोजेक्ट पेज
स्रोत कोड

मुझे लगता है कि साइट तुरंत हेब्राफ़ेक्ट से गिर जाएगी। यह एक ट्रायल अकाउंट है जिसमें नोड के लिए सिर्फ दो स्लॉट हैं। लेकिन अंत में इसके बारे में अधिक।

मैं तुरंत स्पष्ट करना चाहता हूं - परियोजना समाप्त नहीं हुई है, लेकिन यह पहले से ही महत्वपूर्ण रूप से काम कर रहा है, साथ ही आप मुख्य भागों और वास्तुशिल्प समाधान दिखा सकते हैं।

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

this.startWithParent = false; 

और मैं मुख्य मॉड्यूल को इनिशियलाइज़ करने के बाद उन्हें मैन्युअल रूप से शुरू करता हूं।

 require( [ 'css!bootstrap_css', 'bootstrap', 'app/modules/conferences', 'app/modules/auth', ], function () { app.start(); } ); 

 MyConference.addInitializer(function(options){ mainLayout = new MainLayout; MyConference.mainView.show(mainLayout); var headerView = new HeaderView; headerView.MyConference = MyConference; mainLayout.header.show(headerView); MyConference.Conferences.start(); MyConference.Auth.start(); }); 

प्रामाणिक - पंजीकरण / प्राधिकरण। मैं सामाजिक प्राधिकरण पर ध्यान देना चाहता हूं। मैं हमेशा खुद को प्राधिकरण लागू करता हूं और तीसरे पक्ष के एग्रीगेटर का उपयोग नहीं करता हूं; मुझे नहीं पता कि यह अच्छा है या बुरा। Google, लिंक्डइन, फेसबुक, ट्विटर द्वारा कार्यान्वित, आप बस मेरा कोड ले सकते हैं यदि आपको कुछ समान लागू करने की आवश्यकता है। सामाजिक प्राधिकरण का सार यह है कि मैं Api कुंजी प्राप्त करने के लिए क्लाइंट पर js का उपयोग करता हूं, और फिर इसे सत्यापन के लिए सर्वर पर स्थानांतरित करता हूं। उदाहरण के लिए facebook:

 var afterInit = function(){ var sendAccessToken = function(response){ $.post( cfg.baseUrl + 'auth.json/facebook', {FacebookKEY: response.authResponse.accessToken}, function(data, message, xhr){ process_social_resporce(model, data, xhr); }, "text" ); } FB.getLoginStatus(function(response) { if(response.status == "not_authorized" || response.status == "unknown"){ FB.login(function(response, a) { if (response.authResponse) { sendAccessToken(response); } else { console.log(response, a) } }, {scope:'email'}); }else{ sendAccessToken(response); } }); } window.fbAsyncInit = function() { FB.init({ appId : cfg.facebookAppId, // App ID status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); afterInit(); }; // Load the SDK asynchronously (function(d){ var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return afterInit();} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; ref.parentNode.insertBefore(js, ref); }(document)); 

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

 var childWin = window.open(cfg.baseUrl + 'auth.json/twitter/'+Storage.get('API_KEY'), 'Twitter Auth', "height=640,width=480"); childWin.onunload = function(){ var check = function(){ if(childWin.document){ var body = childWin.document.getElementsByTagName("body")[0]; if(!model.isNew() || body.textContent.length > 0){ process_social_resporce(model, body.textContent); childWin.close(); }else{ setTimeout(check, 100); } }else{ setTimeout(check, 100); } } setTimeout(check, 100); } 

अब मुख्य मॉड्यूल - कॉन्फ्रेंस पर चलते हैं। यहां, वास्तव में, सब कुछ बहुत सरल है। मैं मार्गों के साथ नियंत्रक का वर्णन करता हूं।

 var ConferencesController = Marionette.Controller.extend(new function(){ return { main: function(){ MyConference.mainView.currentView.header.currentView.setHeader('Conferences'); var conferencesCollection = new ConferencesCollection; var spinnerView = new SpinnerView(); spinnerView.render(); conferencesCollection.fetch({ error: function(){ console.log('error'); }, success: function(collection){ var mainView = new MainView; mainView.collection = conferencesCollection; MyConference.mainView.currentView.content.show(mainView); spinnerView.remove(); } }) }, conference: function(id){ var conferenceModel = new ConferenceModel; conferenceModel.set('id', id); conferenceModel.fetch({ error: function(){ var conferenceNotFoundView = new ConferenceNotFoundView; MyConference.mainView.currentView.content.show(conferenceNotFoundView); }, success: function(conference){ var conferenceFullView = new ConferenceFullView; conferenceFullView.model = conference; MyConference.mainView.currentView.content.show(conferenceFullView); } }); }, streams: function(conference_id){ ShowStreams( conference_id, function(){ ShowStream(streams.at(0).get('id')); } ); }, stream: function(id){ ShowStream(id); } } }); var MainRouter = Backbone.Marionette.AppRouter.extend({ appRoutes: { "conference/:id": "conference", "conferences": "main", "": "main", "streams/:conference_id": "streams", "stream/:id": "stream" }, controller: new ConferencesController }); 

जैसा कि आप देख सकते हैं, सामान्य बेकन मॉडल / संग्रह बनाया जाता है, डेटा प्राप्त होता है और दृश्य में प्रेषित होता है। सम्मेलनों की सूची एक नियमित संग्रह दृश्य है। मैं सम्मेलन के विस्तृत विवरण के दृश्य के लिए और अधिक विस्तार में रुकूंगा। OpenStreetMap और GoogleMaps के लिए समर्थन मैन्युअल रूप से लागू किया गया है। आप निश्चित रूप से, कैटलॉग का उपयोग कर सकते हैं, लेकिन मुझे यकीन नहीं है कि Google को उनके चित्रों तक सीधी पहुंच पसंद है। इसके अलावा वहाँ एक तस्वीर / पीडीएफ प्रदर्शित किया जाता है या फ़ाइल के लिए एक लिंक, यदि कोई हो। और सबसे ऊपर दाईं ओर रिपोर्ट की सूची का लिंक है।
यदि उपयोगकर्ता लॉग इन है, तो वह तीन बटन देखता है, "गो" सम्मेलन में, पसंदीदा और मना करने के लिए। मुझे आइटम दृश्य से विस्तृत विवरण विरासत में नहीं मिला, लेकिन लेआउट से, इसलिए मैंने सिर्फ उस ब्लॉक को निर्धारित किया जहां इन तीन बटन को प्रस्तुत करना है।

 regions: { decision: "#decision" }, 

और उपयोगकर्ता की स्थिति के आधार पर, मैं यह या वह दृश्य दिखाता हूं।

 if(MyConference.Auth.getUser().isNew()){ var view = new GuestDecisionView; }else{ var desisionModel = new DecisionModel(view.model.get('decision')); var view = new LoggedInDecisionView({model: desisionModel}); view.parent = this; } this.decision.show(view); 

यह केवल परियोजना को फोन पर इकट्ठा करने और चलाने के लिए बना हुआ है। यदि आपको प्लेटफ़ॉर्म समाप्त करने की आवश्यकता है, तो "कॉर्डोवा प्लेटफ़ॉर्म ऐड एंड्रॉइड" चलाएं

 cordova platform add android 

तो

 cordova build android 

विधानसभा के लिए या

 cordova run android 

अपने फोन पर देखने के लिए।

अंतिम लक्ष्य Google play, Apple App Store और Windows Store पर ऐप्स को होस्ट करना है। लेकिन मेरी मुख्य गतिविधि वेब है, और मोबाइल नहीं, विकास, इसलिए मैंने अभी तक इनमें से किसी भी स्टोर में डेवलपर के रूप में पंजीकरण नहीं किया है।

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