🤙 🤽🏼 🎫 7 मिनट में पटरियों पर एक्सट जेएस और रूबी पर CRUD आवेदन 🉑 👨‍🚀 🙇🏿

यह एक पुरानी पोस्ट का अपडेटेड वर्जन है ।

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

इस ट्यूटोरियल को बनाते समय, मैंने निम्नलिखित लाइब्रेरी संस्करणों का उपयोग किया: रेल 3.2.8, नेटज़के-कोर v0.8.0, नेटज़के-बेसेपैक वी0.8.0, एक्सट जेएस 4.1.1 ए - साथ ही रूबी 1.9.3 और मैक ओएससी माउंटेन लॉयन

प्रारंभिक चरण

एक नई रेल एप्लिकेशन बनाएं:

$ rails new netzke_task_manager && cd netzke_task_manager

Gemzile में Netzke जोड़ें:

 gem 'netzke-core', '~>0.8.0' gem 'netzke-basepack', '~>0.8.0'

रत्न स्थापित करें:

 $ bundle install

हम क्रमश: एक्सएस जेएस लाइब्रेरी, और (वैकल्पिक रूप से) फेम्फैम आइकन को public/extjs और public/images/icons public/extjs हैं। उदाहरण के लिए (उदाहरण के लिए! ):

 $ ln -s ~/code/extjs/ext-4.1.1 public/extjs $ mkdir public/images $ ln -s ~/assets/famfamfam-silk public/images/icons

Netzke रुट निर्दिष्ट करें और रूट रूट को config/routes.rb मार्गों में लिखें।

 NetzkeTaskManager::Application.routes.draw do netzke root to: "welcome#index" end

एक स्वागत नियंत्रक बनाएँ:

 $ rails g controller welcome index

public/index.html हटाने के लिए याद रखें।

app/views/layouts/application.html.erb Application.html.erb में app/views/layouts/application.html.erb हम डिफ़ॉल्ट कोड को प्रतिस्थापित करते हैं जो JavaScript और शैलियों को load_netzor सहायक से जोड़ता है। परिणाम कुछ इस तरह दिखना चाहिए:

 <!DOCTYPE html> <html> <head> <title>Netzke Task Manager</title> <%= load_netzke %> <%= csrf_meta_tag %> </head> <body> <%= yield %> </body> </html>

ध्यान दें कि load_netzke सहायक वह सब है जो Netzke और Ext JS दोनों के लिए स्क्रिप्ट और शैलियों को जोड़ने के लिए आवश्यक है।

3 मिनट बीत गए - और हम वास्तव में दिलचस्प हिस्सा शुरू करने के लिए तैयार हैं!

मॉडल निर्माण

आइए एक टास्क मॉडल बनाएं जिसमें विशेषताओं का name , priority , notes , due_date और done झंडा होगा:

 $ rails g model Task done:boolean name notes:text priority:integer due:date

हमारे डेटाबेस के स्कीमा को अपडेट करें:

 $ rake db:migrate

हम चाहते हैं कि हमारे कार्यों में कम से कम हमेशा किसी प्रकार का नाम हो, इसलिए आइए उचित सत्यापन जोड़ें (फ़ाइल app/models/task.rb ):

 class Task < ActiveRecord::Base attr_accessible :done, :due, :name, :notes, :priority validates :name, presence: true end

कार्य ग्रिड घटक बनाना

आइए, हमारा पहला नेटज़के घटक बनाएं, इसे पूरी तरह कार्यात्मक Netzke::Basepack::Grid से विरासत में Netzke::Basepack::Grid । लेकिन पहले हमें app/components निर्देशिका बनाने की आवश्यकता है:

 $ mkdir app/components

इस निर्देशिका में, निम्न सामग्री के साथ functions.rb फ़ाइल बनाएँ:

 class Tasks < Netzke::Basepack::Grid def configure(c) super c.model = "Task" end end

हमारा घटक एक रूबी वर्ग है जो Netzke::Basepack::Grid से विरासत में मिला है, और पहले से निर्मित Task मॉडल का उपयोग करने के लिए कॉन्फ़िगर किया गया है। अब हमें अपने आवेदन के मद्देनजर निर्मित घटक को एम्बेड करना होगा। app/views/welcome/index.html.erb फ़ाइल में, निम्न पंक्ति के साथ डिफ़ॉल्ट कोड बदलें:

 <%= netzke :tasks, height: 400 %>

चलो सर्वर शुरू करते हैं:

 $ rails s

... और देखें कि यह ब्राउज़र में कैसा दिखता है http: // localhost: 3000 / :

हमारे आवेदन काम करता है और पहली नज़र में बहुत अच्छा लग रहा है। एक मिनट में मैं आपको एक प्रभावशाली सूची दूंगा कि यह क्या सुविधाएँ प्रदान करता है, लेकिन पहले, आइए आवेदन के रूप में सुधार करने के लिए कुछ मामूली सुधार करें (हमारे पास अभी भी इसके लिए पर्याप्त समय है)।

Netzke::Basepack::Grid , जिसमें से हमारा ग्रिड विरासत में मिला है, लचीले ढंग से कॉन्फ़िगर किया गया है। आइए 4 सरल सुधार करें:

निरूपित करें कि हम कौन-से कॉलम देखना चाहते हैं (बनाया created_at और updated_at )
"कारण" पर "शीर्षक" शीर्षक कॉलम बदलें
"नोट्स" कॉलम को कॉन्फ़िगर करें ताकि वह Ext.grid.column.Column के flex गुण का उपयोग करके पूरी शेष चौड़ाई को भर Ext.grid.column.Column
हम अपने ग्रिड के scope कॉन्फ़िगरेशन पैरामीटर का उपयोग उन प्रविष्टियों को बाहर करने के लिए करेंगे जिनमें किया गया झंडा सेट है

हमारे घटक के लिए अंतिम कोड इस तरह दिखेगा:

 class Tasks < Netzke::Basepack::Grid def configure(c) super c.model = "Task" c.columns = [ :done, :name, {name: :notes, flex: 1}, :priority, {name: :due, header: "Due on"} ] c.scope = {done: [nil, false]} end end

बहुत बढ़िया। हम शेष दो मिनटों का उपयोग अंतिम, विशुद्ध रूप से दृश्य को संपादित करने के लिए करेंगे। हमारे ग्रिड को पृष्ठ के मध्य में रखने के लिए, कुछ शैलियों को app/views/layouts/application.html.erb , load_netzke सहायक के ठीक बाद:

 <style type="text/css" media="screen"> h1 { text-align: center; margin: 10px;} .netzke-component { width: 800px; margin: auto; } </style>

app/views/welcome/index.html.erb में h1 हेडर जोड़ें:

 <h1>Incomplete tasks</h1> <%= netzke :tasks, height: 400 %>

खैर, यह बात है! आप स्टॉपवॉच को रोक सकते हैं और परिणामों पर चर्चा कर सकते हैं:

हम परिणामों पर चर्चा करते हैं

चूंकि Netzke::Basepack::Grid पूरी तरह कार्यात्मक घटक है, हमें इसके लिए एक भी लाइन लिखे बिना कार्यक्षमता का एक गुच्छा मिलता है। आइए अधिक विस्तार से देखें।

स्वचालित रूप से फ़ील्ड प्रकारों का पता लगाएं

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

पेज

भले ही कार्य तालिका में हजारों रिकॉर्ड हों, लेकिन यह अंतर्निहित पेज समर्थन के लिए नेटज़के ग्रिड के लिए कोई समस्या पेश नहीं करता है।

एक साथ कई लाइनों को संपादित करने की क्षमता

एक साथ कई रिकॉर्ड जोड़ना, अपडेट करना और हटाना आसान है:

प्रसंग मेनू

ग्रिड के निचले पैनल के बटनों के कुछ कार्यों को संदर्भ मेनू में डुप्लिकेट किया गया है:

सत्यापन का समर्थन करता है

रेल सत्यापन को ध्यान में रखा जाता है:

सर्वर पर रिकॉर्ड की छंटनी

प्रविष्टियों को क्रमबद्ध करने के लिए कॉलम शीर्षक पर क्लिक करें:

सर्वर पर रिकॉर्ड को फ़िल्टर करना

फ़ील्ड के प्रकार के अनुसार प्रत्येक कॉलम में स्मार्ट फ़िल्टर डिफ़ॉल्ट रूप से एकीकृत होते हैं।

दिनांक के लिए:

प्राथमिकता के लिए:

फॉर्म के माध्यम से प्रविष्टियों को जोड़ना और संपादित करना

कभी-कभी रिकॉर्ड जोड़ना या संपादित करना फ़ॉर्म के माध्यम से करना आसान होता है। नेट्ज़के आपको ऐसा अवसर प्रदान करता है (कई प्रविष्टियों का संपादन भी समर्थित है - बस कुछ पंक्तियों का चयन करें और "फॉर्म में संपादित करें" पर क्लिक करें)।

उन्नत खोज क्वेरी के लिए समर्थन के साथ

जटिल क्वेरी संपादक को कॉल करने के लिए खोज बटन पर क्लिक करें:

केवल हिमशैल के टिप

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

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

अनुवादक से नोट: नेटज़के बेसेपैक के घटक रूसी स्थानीयकरण का समर्थन करते हैं ।

7 मिनट में पटरियों पर एक्सट जेएस और रूबी पर CRUD आवेदन