👨‍🍳 🛴 🕞 Gae, रीढ़ की हड्डी, अंडरस्कोर, आवश्यकता पर जापानी क्रॉसवर्ड पहेली सेवा लिखना और नरक की मदद से जानिए क्या है 💖 🏢 ⛎

प्रविष्टि

बहुत से लोग Google से बुनियादी ढांचे के बारे में जानते हैं जिसे कहा जाता है, कुछ इसे बहुत अधिक स्वामित्व मानते हैं, अन्य बहुत महंगा है। हां, यह सस्ता नहीं है, और हम गे के लिए इष्टतम आवेदन लिखने की कोशिश करेंगे, जो बहुत कम संसाधनों का उपभोग करेगा और आदर्श रूप से फ्री कोटा से बाहर भी नहीं जाता है। जापानी क्रॉसवर्ड की एक सेवा लिखते समय मैं अपनी गलतियों, सफल तकनीकी समाधानों का वर्णन करूंगा। साइट की विशेषता यह है कि यह आपको एक साधारण चित्र से अपनी खुद की पहेली बनाने और मित्रों के साथ साझा करने की अनुमति देता है।
साइट बनाने के लिए, निम्नलिखित का उपयोग करें। प्रौद्योगिकी:
backbone.js - जावास्क्रिप्ट में प्रसंस्करण अनुरोधों के लिए रूपरेखा। इसकी मदद से, हमें उम्मीद है कि हम मुफ्त कोटा के भीतर रहते हैं, क्योंकि सभी कोड क्लाइंट पर निष्पादित किए जाते हैं, केवल सर्वर में json प्रारूप में वर्ग पहेली पर डेटा का अनुरोध किया जाता है।
requirement.js - किसी भी संसाधन (js, html) को फिर से लोड करने के लिए एक पुस्तकालय, आप उन कोड को निर्दिष्ट कर सकते हैं जो इन संसाधनों को लोड करने के बाद निष्पादित करेंगे। आदर्श यदि आपके पास साइट पर जावास्क्रिप्ट है और इसका उपयोग 1% मामलों में किया जाता है, और आप js फ़ाइल को index.html में शामिल नहीं करना चाहते हैं, तो यह आपके अनुरूप होगा।
undescore.js - संपूर्ण वस्तु या इसकी विशिष्ट संपत्ति में परिवर्तन को ट्रैक करने के लिए सभी प्रकार के उपहार। एक बहुत बड़ा और शांत पुस्तकालय, लेकिन मैं इसे एक टेम्पलेट इंजन के रूप में उपयोग करता हूं।
बूटस्ट्रैप - डिजाइन के साथ परेशान करने के लिए नहीं।
कम - ठीक नहीं, इसका उपयोग क्यों नहीं करते? (क्योंकि हम कर सकते हैं)
खैर और निश्चित रूप से गा - क्या यह सब बदल जाएगा पर।

वाह ये MVC है !!!

हमारे पूरे MVC में तीन घटक होते हैं: मॉडल, व्यू, कंट्रोलर, और एक राउटर जो जानता है कि किस कंट्रोलर को कॉल करना है।

रूटर

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

नियंत्रक लोडिंग देरी
कम से कम प्रत्येक नियंत्रक का अपना दृश्य + प्लस दृश्य लोड करने में देरी है
पृष्ठ के लिए डेटा लोड हो रहा है।

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

require ( [ //        DOM ,  $(document).ready 'backbone/domReady', //   'backbone/views/menu', 'backbone/views/start', 'backbone/views/create', 'backbone/views/image', 'backbone/views/view_puzzle', 'backbone/views/list', 'backbone/views/mylist', 'backbone/views/search', 'backbone/views/edit_puzzle', ], function(domReady, MenuView, StartView, CreateView, ImageView, PuzzleViewView, ListView, MyListView, SearchView, EditPuzzleView){ domReady(function () { //       var menu = new MenuView(); menu.render(); var Router = Backbone.Router.extend({ //        , //        routes: { "": "start", "!/": "start", "!/create": "create", "!/image": "image", "!/list": "list", "!/list/:page": "list", "!/search/:query": "search", "!/search/:query/:page": "search", "!/mylist": "mylist", "!/mylist/:page": "mylist", "!/puzzle/:id": "view_puzzle", "!/puzzle/edit/:id": "edit_puzzle" }, start: function () { this.show_view(StartView, 'start'); }, create: function () { this.show_view(CreateView, 'create'); }, image: function () { this.show_view(ImageView, 'image'); }, view_puzzle: function(id) { this.show_view(PuzzleViewView, '', id); }, edit_puzzle: function(id) { this.show_view(EditPuzzleView, '', id); }, search: function(query, page) { this.show_view(SearchView, '', query, page); }, list: function(page) { this.show_view(ListView, 'list', page); }, mylist: function(page) { this.show_view(MyListView, 'mylist', page); }, show_spinner: function() { menu.show_spinner(); }, hide_spinner: function() { menu.hide_spinner(); }, show_view: function(View, view_name, arg1, arg2) { this.current_view = new View(arg1, arg2); $('.navbar li').removeClass('active'); if (view_name) { $('#'+view_name+'_item').addClass('active'); } this.current_view.render(); } }); window.router = new Router(); Backbone.history.start(); }); });

नियंत्रक

नियंत्रक, किसी भी अन्य संसाधन की तरह, की शैली में परिभाषित किया जाना चाहिए:

 define(['backbone/text!backbone/templates/start.html'], function(template){ var StartView = Backbone.View.extend({ el: "#block", template: _.template(template), //       #block render: function () { //      var data = {}; $(this.el).html(this.template(data)); } }); return StartView; });

परिभाषित फ़ंक्शन एक संसाधन को परिभाषित करता है और पहला पैरामीटर निर्भरता की एक सूची है। वापसी मान संसाधन ही होना चाहिए। मेरे मामले में, यह एक वर्ग है। अजीब प्रविष्टि बैकबोन / टेक्स्ट! बैकबोन / टेम्प्लेट / स्टार्ट। Html का मतलब है कि मॉड्यूल सर्वर से तुरंत लोड नहीं किए जाते हैं, लेकिन पाठ प्लगइन की मदद से। लाइब्रेरी में कई उपयोगी प्लगइन्स की आवश्यकता होती है:

पाठ - सर्वर से टेम्प्लेट डाउनलोड करने के लिए। प्लस यह है कि क्लाइंट पर टेम्प्लेट किए जाते हैं, और सर्वर उन्हें स्टेटिक रूप से देता है, अर्थात। हमारे उदाहरण पर कोई भार नहीं। वैसे, मुक्त कोटा में, वह केवल एक है (यदि)
i18n - स्थानीयकरण फ़ाइलों को डाउनलोड करने के लिए।
डोमरी - डोम तैयार होने के बाद कोड चलाने के लिए।

आदर्श

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

 define (function(){ var Puzzle = Backbone.Model.extend({ urlRoot : '/puzzle/', defaults: { title: '', width: 5, height: 5 }, //       , ... }); return Puzzle; });

राय

दृश्य सबसे आम HTML फ़ाइल है जिसमें आप इस तरह से डेटा सम्मिलित कर सकते हैं:

 <div id="data"><%= data %></div>

और <%%> टैग में आप सामान्य रूप से किसी भी जावास्क्रिप्ट कोड को लिख सकते हैं, यहां तक कि शर्तें:

 <% if (loaded) { %> <div></div> <% } else { %> <div>...</div> <% } %>

नियंत्रक द्वारा प्रस्तुत किए जाने पर डेटा दृश्य में स्थानांतरित कर दिया जाता है:

 var data = { 'loaded': true }; $(this.el).html(this.template(data));

अनुकूलन

प्रोजेक्ट को पहले पेज लोड होने में लंबा समय लगता है, लेकिन यदि आप एक फ़ाइल में सभी संसाधनों को इकट्ठा करते हैं और एक ही समय में इसे संपीड़ित करते हैं, तो इसे दूर करना आसान है। इसके लिए node.js की आवश्यकता है, क्योंकि संकलन कार्यक्रम js में लिखा गया है। कोई फ़ाइल बनाने के लिए निर्भरता को संसाधित करने वाला कॉन्फ़िगरेशन बनाएँ और दूसरी फ़ाइल बनाएँ:

build.js

 ({ baseUrl: "../cross/static/js", name: "common", out: "../cross/static/js/common-pro.js" })

और हमारे बिल्डर को लॉन्च करें:

node r.js -o build.js

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

Google विश्लेषिकी एकीकरण

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

पहला भाग:

  var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA--']); (function () { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();

भाग 2, यह काम करता है जब राउटर फायर करता है। मेरे पास एक फ़ंक्शन है जो इसमें नियंत्रक (show_view) प्रदान करता है, हम बस जोड़ते हैं:

  _gaq.push(['_trackPageview', document.location.href]);

सर्वर साइड

कुछ तथ्य:

Ndb लाइब्रेरी का उपयोग किया जाता है (जिसके लिए पहले से ही आधिकारिक Gae सहायता उपलब्ध है)। इसे इसलिए चुना गया क्योंकि यह जानता है कि डेटाबेस में कई क्वेरीज़ को एक क्वेरी में कैसे पैक किया जाए और इसे सर्वर को भेजें (हालांकि मुझे नहीं लगता कि यह एक साधारण सर्वर में कहीं होता है), और इसलिए भी कि इसमें अंतर्निहित कैश है।
सर्वर से प्राप्त डेटा जसन प्रारूप में जाता है।

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

 class PuzzleIndex(db.Model): keywords = db.StringProperty(repeated=True) update_date = db.DateTimeProperty(auto_now=True) @classmethod def index(cls, puzzle): index = PuzzleIndex.get_or_insert(str(puzzle.key.id())) index.keywords = cls.stemming(puzzle.title) index.put() @classmethod def delete_index(cls, puzzle): db.Key(PuzzleIndex, str(puzzle.key.id())).delete() @classmethod def stemming(cls, text): words = set(re.split(ur'\s+', text.lower(), re.U)) return list(filter(None, words)) @classmethod def search(cls, text, limit=10, offset=0): puzzles = [] words = cls.stemming(text) query = PuzzleIndex.query()\ .order(-PuzzleIndex.update_date)\ .filter(PuzzleIndex.keywords.IN(words)) indexes = query.fetch(limit + 1, offset=offset, keys_only=True) if len(indexes): keys = [db.Key(Puzzle, int(key.id())) for key in indexes] puzzles = db.get_multi(keys) return puzzles

धन्यवाद

लेआउट और लोगो के लिए मदद के लिए मेरे दोस्त रेनुम को धन्यवाद।

निष्कर्ष

मैं Gae पर एप्लिकेशन विकसित करता हूं और वास्तव में एक ऐसी सेवा बनाने की कोशिश करना चाहता हूं जो काफी सस्ती हो और साथ ही गैर-शून्य ट्रैफ़िक हो।

Gae, रीढ़ की हड्डी, अंडरस्कोर, आवश्यकता पर जापानी क्रॉसवर्ड पहेली सेवा लिखना और नरक की मदद से जानिए क्या है