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

हम नानक के बारे में बात कर रहे हैं - नॉट ए एन ओर्मल सी एमएस। यह "सामान्य नहीं" क्यों है और आप इसके साथ क्या कर सकते हैं, आप इस लेख को पढ़ने के बाद जानेंगे।

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

टेक्स्ट में अधिकांश लॉजिक ब्लॉक के अंत में, आपको एक यूट्यूब वीडियो मिलेगा, जिसमें उदाहरण के तौर पर नानक के कुछ पहलू का उपयोग/प्रदर्शन किया जाएगा।

विषयसूची

1. पहचान

2. सीएमएस के बारे में

   1. मॉडल के प्रकार

      1. संग्रह
      2. एकल

   2. संपादक

      1. सामान्य विवरण
      2. कोड-पहले
      3. इंटरफ़ेस-पहले
      4. हाइब्रिड मोड

   3. खेत

      1. बूल
      2. रंग
      3. तारीख
      4. गतिशील
      5. Enum
      6. हैडर
      7. आइकन
      8. पहचान
      9. बहुचयनकर्ता
      10. संख्या
      11. चयनकर्ता
      12. डोरी
      13. संरचना
      14. स्क्रीन

3. डायनेमिक फ़्लटर ऐप्स

   1. इंटरएक्टिव प्रलेखन
   2. तानाना
   3. सादगी
   4. शक्ति
   5. सुविधा
   6. प्रदर्शन

4. नानक डेमो ऐप

   1. आम
   2. ग्राहक
   3. व्यवस्थापक
   4. कनेक्शन प्रबंधक

5. आगे क्या है / बाद में

नानक सीएमएस के बारे में

इसलिए। नानक एक बैकएंड-एग्नोस्टिक सीएमएस है जो अपने बैकएंड को नहीं खींचता है। यह कैसे काम करता है? नानक नेटवर्क सेवा इंटरफेस को लागू करने की पेशकश करता है, जिसमें अभी 6 तरीके हैं लेकिन रिलीज के समय तक लगभग 10 होंगे। यह बहुत है या थोड़ा? उदाहरण के लिए, डेमो एप्लिकेशन के लिए एपीआई को लागू करने में कोड की 170 लाइनें लगीं। ये विधियाँ आपके मौजूदा बैकएंड के साथ नैन के सभी कार्यों के लिए ज़िम्मेदार हैं। कार्यान्वयन को डार्ट (स्पंदन के लिए भी विकास भाषा) में लिखा जाना चाहिए। भविष्य में, Nanc कुछ बैकएंड विकल्पों के लिए इन इंटरफेस के तैयार कार्यान्वयन के साथ आएगा - फायरबेस, सुपाबेस, स्थानीय / नेटवर्क SQLite और REST और ग्राफक्यूएल के सामान्य कार्यान्वयन (शायद कुछ और?) और आपको इस कार्यान्वयन के बारे में सोचने की ज़रूरत नहीं होगी सभी या करना होगा, लेकिन बस थोड़ा सा।

मॉडल के प्रकार

नानक में एक मॉडल एक इकाई का संरचनात्मक विवरण है जिसे आप नानक के साथ नियंत्रित करना चाहते हैं। एक मॉडल में एक इकाई का नाम, विभिन्न दृश्य पैरामीटर और फ़ील्ड का विवरण होता है।

संग्रह

एक संग्रह एक इकाई है जिसमें कई उदाहरण हो सकते हैं। उपयोगकर्ताओं, पुस्तकों और समीक्षाओं की एक सूची, नैनक में संग्रह-प्रकार के मॉडल के अच्छे उदाहरण हैं।

यदि आप संबंधपरक डेटाबेस से परिचित हैं, तो नैन में संग्रह का एक उदाहरण आपके डेटाबेस में लगभग कोई भी तालिका होगी।

एकल

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

 final Model landingPage = Model( name: 'Landing page', /// ? id in format [toSnakeCase(name)] will be set automatically, if omitted // id: 'landing_page', isCollection: false, icon: IconPackNames.flu_document_page_break_regular, fields: [ ...

संपादक

सामान्य विवरण

नानक को कई तरीकों से कॉन्फ़िगर किया जा सकता है: कोड द्वारा, नानक इंटरफ़ेस के माध्यम से, और इन विकल्पों का संयोजन।

कोड-प्रथम कॉन्फ़िगरेशन

जब मैं "कॉन्फ़िगरेशन" कहता हूं, तो मेरा मतलब है, सबसे पहले, आपके मॉडल की संरचना का वर्णन करना। आइए एक सरल उदाहरण लेते हैं, फ़ीचर मॉडल, जो किसी उत्पाद की विशेषताओं का वर्णन करने वाली इकाई है। इस इकाई में निम्नलिखित फ़ील्ड हैं:

• पहचान
• शीर्षक
• छवि
• विवरण

और कोड-प्रथम कॉन्फ़िगरेशन के रूप में कार्यान्वयन निम्नानुसार होगा:

 import 'package:fields/fields.dart'; import 'package:icons/icons.dart'; import 'package:model/model.dart'; final Model feature = Model( name: 'Feature', icon: IconPackNames.flu_ribbon_star_filled, fields: [ [ IdField(width: 200), StringField(name: 'Title', maxLines: 1, isRequired: true, width: 400), ], [ IconField(name: 'Image', isRequired: true), ], [ StringField(name: 'Description', isRequired: true, showInList: true), ], ], );

इस तरह के एक मॉडल का वर्णन करने और इसे Nanc CMS में उपयोग करने से, उस मॉडल के सभी CRUD ऑपरेशन आपके लिए उपलब्ध हो जाते हैं।

इंटरफ़ेस-पहला कॉन्फ़िगरेशन

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

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

हाइब्रिड कॉन्फ़िगरेशन

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

खेत

अब देखते हैं कि वर्तमान में नानक किस प्रकार के क्षेत्रों का समर्थन करता है।

बूलियन

बूलफिल्ड आपको bool डेटा प्रकार को नियंत्रित करने और डिफ़ॉल्ट मान को अनुकूलित करने की अनुमति देता है।

रंग

ColorField आपको एक आसान रंग-पिकर प्रदान करता है जो आपको नैनक में तुरंत रंग चुनने देता है। यह आपको AHEX कोड संपादित करके मैन्युअल रूप से परिवर्तन करने की क्षमता भी देता है। AHEX एक क्लासिक हेक्स-रंग है (उदाहरण के लिए, #10A0CF ), लेकिन पहले निर्दिष्ट एक अतिरिक्त पारदर्शिता मान के साथ। इस मामले में, यह रंग #FF10A0CF रंग के समान होगा ( FF 100% अपारदर्शिता है - रंग पूरी तरह से अपारदर्शी है)। और 50% अपारदर्शिता के साथ वही रंग ऐसा दिखाई देगा: #7F10A0CF ।

तारीख

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

गतिशील

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

Enum

EnumField एकाधिक मानों से मान चुनने के लिए एक फ़ील्ड है। EnumField का चयन करते समय पालन करने का नियम यह है कि यदि आपके पास चयन करने के लिए मानों की अंतिम सूची है जो एक अलग डेटाबेस तालिका में संग्रहीत नहीं है, तो Enum चुनें। अन्यथा, SelectorField चुनें, जिस पर नीचे और अधिक विस्तार से चर्चा की गई है। TODO: इस समय इस क्षेत्र को केवल CodeConfig के माध्यम से ही कॉन्फ़िगर किया जा सकता है, इंटरफ़ेस के माध्यम से कॉन्फ़िगरेशन पर काम नहीं किया गया है।

हैडर

HeaderField वास्तव में एक क्षेत्र नहीं है, लेकिन नैन में आपके मॉडल के लिए एक दृश्य बढ़ाने वाला है। आप इस गैर फ़ील्ड का उपयोग संबंधित फ़ील्ड के समूह के लिए एक सामान्य शीर्षलेख सेट करने के लिए कर सकते हैं, या हेडरफ़ील्ड को डिलीमीटर के रूप में उपयोग करके एक दूसरे से मॉडल फ़ील्ड को अलग करने के लिए कर सकते हैं।

आइकन

IconField आपको आइकन के पूर्वनिर्धारित सेट से एक आइकन ( IconData वर्ग) का चयन करने की क्षमता देता है। वर्तमान में उनमें से लगभग 25,000 हैं, और इस सेट में निम्नलिखित चिह्न शामिल हैं:

• सामग्री डिजाइन प्रतीक
• धाराप्रवाह यूआई सिस्टम आइकन
• रीमिक्स आइकन

यदि आवश्यक हो, तो मूल वितरण सेट में अन्य चिह्न जोड़े जा सकते हैं, और निकट भविष्य में आपके स्वयं के चिह्नों का भी उपयोग करने का विकल्प होगा।

कोई आश्चर्य कर सकता है, "प्रतीक हैं, रंग हैं, लेकिन फ़ॉन्ट हैं?" यदि आपने किया है, तो आप पाठ विजेट के लिए दस्तावेज़ीकरण में उत्तर पा सकते हैं। संक्षिप्त उत्तर यह है कि Google फ़ॉन्ट्स के सभी फ़ॉन्ट आपके लिए उपलब्ध हैं।

पहचान

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

मल्टी चयनकर्ता

MultiSelectorField एक अपेक्षाकृत जटिल क्षेत्र है जो एक संबंधपरक अनेक-से-अनेक या अनेक-से-एक संबंध को लागू करने के लिए ज़िम्मेदार है। इस क्षेत्र का उपयोग करने के तीन तरीके हैं। आइए उनमें से प्रत्येक के बारे में अधिक विस्तार से जानें। TODO: इस समय इस क्षेत्र को केवल CodeConfig के माध्यम से ही कॉन्फ़िगर किया जा सकता है, इंटरफ़ेस के माध्यम से कॉन्फ़िगरेशन पर काम नहीं किया गया है।

आईडी की सरणी

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

 /// user table { id: 'UUID', name: 'String', books: [ 'UUID', 'UUID' // ... ] }

ऊपर JSON5 सिंटैक्स का उपयोग करके व्यक्त की गई एक उदाहरण तालिका संरचना है।

इस मोड का नुकसान सीमित डेटा अखंडता है। यदि आप books रीडर फ़ील्‍ड से अप्रचलित (हटाए गए) पुस्‍तक आईडी के स्‍वचालित निष्कासन को लागू नहीं करते हैं, तो आपको त्रुटियां मिलेंगी.

तीसरी तालिका

SQL दुनिया से संबंध प्रदान करने का क्लासिक तरीका। इस मोड का उपयोग करते समय, आप इकाई संबंधों को एक अलग तालिका में संग्रहीत करते हैं और 100% डेटा अखंडता सुनिश्चित करते हैं। निम्नलिखित संरचना इस विधा का एक उदाहरण है:

 [ /// user table { id: 'UUID', name: 'String' }, /// book table { id: 'UUID', title: 'String' }, /// user_books_relations table { user_id: 'UUID', book_id: 'UUID' } ]

7 वें सेकंड में आप थोड़ी सी चिकोटी देख सकते हैं और यदि आप बारीकी से देखते हैं तो आप देख सकते हैं कि पेज url बदल गया है - इस तरह मैंने बग को छिपाने की कोशिश की: तीसरे टेबल मोड में डेटा को पैरेंट पेज में तभी सेव किया जाता है जब यह 🤷🏼 पहले ही सहेजा जा चुका है

वस्तुओं की सरणी

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

मैं स्क्रीनफिल्ड दिखाते हुए वीडियो में खुद से आगे निकल रहा हूं, हम इस पर वापस आएंगे

सामान्य तौर पर, "गैर-विहित" मोड को आभासी बनाने का एक विचार है - ताकि वे किसी तरह तीसरी तालिका के माध्यम से काम करें, और पृष्ठ को संपादित करते समय आवश्यक डेटा लोड हो (यदि आवश्यक हो)।

संख्या

नंबरफिल्ड नंबरों को स्टोर करता है - उतना ही सरल।

चयनकर्ता

SelectorField MultiSelectorField के समान है (जैसा कि आप उनके नाम से अनुमान लगा सकते हैं), लेकिन थोड़ा सरल - यहाँ संबंध एक-से-एक या एक-से-कई है, और दो मोड हैं। TODO: इस समय इस क्षेत्र को केवल CodeConfig के माध्यम से ही कॉन्फ़िगर किया जा सकता है, इंटरफ़ेस के माध्यम से कॉन्फ़िगरेशन पर काम नहीं किया गया है।

पहचान

SQL लिंक प्रावधान का एक सामान्य रूप, जहां मूल रिकॉर्ड फ़ील्ड लिंक किए गए रिकॉर्ड की आईडी संग्रहीत करता है। आइए पाठक को एक उदाहरण के रूप में लेते हैं। कौन है भाई? सबसे पहले यह एक व्यक्ति है, और एक व्यक्ति के पास क्या है? यह सही है! जन्म का शहर (जो किसी कारण से हमारी लाइब्रेरी भी जानना चाहता था)।

 /// user table { id: 'UUID', name: 'String', birth_place_id: 'UUID' }

वस्तु

MultiSelectorField से ऑब्जेक्ट्स के ऐरे के समान ही, लेकिन हम मूल रिकॉर्ड के क्षेत्र में एक संबद्ध मान संग्रहीत करेंगे। नुकसान वही हैं, फायदे भी बस थोड़ा सा नीचे बताए जाएंगे।

डोरी

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

संरचना

स्ट्रक्चरफिल्ड आपको मॉडल रिकॉर्ड में टाइप की गई संरचनाओं की एक सरणी को स्टोर करने की अनुमति देता है। आप संग्रहीत किए जाने वाले डेटा के प्रकार को निर्दिष्ट करते हैं और इसे आसानी से और आसानी से प्रबंधित कर सकते हैं। संरचना क्षेत्रों के लिए उपलब्ध प्रकार बिल्कुल सब कुछ हैं। तो आप आसानी से "डायनेमिक स्ट्रक्चर फील्ड रिपीट" बना सकते हैं। TODO: डेमो के भीतर स्ट्रक्चरफिल्ड में केवल "फ्लैट" फ़ील्ड जोड़े जा सकते हैं।

स्क्रीन

ScreenField एक ऐसा क्षेत्र है जो आपको Flutter में, सीधे Nanc में एक संपूर्ण एप्लिकेशन लिखने की अनुमति देता है! ScreenField के साथ आप सिंगल...स्क्रीन के इंटरफ़ेस का वर्णन कर सकते हैं, इसे अपनी इच्छानुसार अपडेट कर सकते हैं, और इसे किसी भी समय मिनटों में कर सकते हैं - बिना थकाऊ और घबराहट के Apple और Google की समीक्षाओं का इंतजार किए बिना।

आइए इस प्रकार के क्षेत्र (और वास्तव में नानक की एक पूरी अलग कार्यात्मक शाखा) को थोड़ा और विस्तार से तोड़ दें।

डायनेमिक फ़्लटर ऐप्स

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

अब आइए नैनक के साथ डायनेमिक स्क्रीन बनाने के सभी पहलुओं पर चलते हैं।

इंटरएक्टिव प्रलेखन

स्पंदन में बहुत सारे विजेट हैं। क्या आप वाकई हटाना चाहते हैं। विजेट क्या है? यह कार्यक्षमता की एक ईंट है जिससे आप अपने आवेदन को इकट्ठा करते हैं। यह केवल दृश्य हो सकता है, या यह तार्किक हो सकता है - अंदर कुछ व्यवहार के साथ। Nanc लागू किए गए विगेट्स की एक विस्तृत सूची प्रदान करता है जिसका उपयोग आप अपना UI बनाने के लिए कर सकते हैं। लेकिन जितनी अधिक संभावनाएँ - उनके बारे में सीखना उतना ही कठिन है... इसलिए नैनक में स्क्रीन एडिटर आपको एक इंटरएक्टिव दस्तावेज़ीकरण तक पहुँच प्रदान करता है जहाँ आप यह पता लगा सकते हैं कि वर्तमान में कौन से विजेट लागू किए गए हैं, उनके पास कौन से पैरामीटर और कॉन्फ़िगर करने योग्य गुण हैं, और, दस्तावेज़ीकरण में ही देखें कि वे आपके द्वारा बनाए गए इंटरफ़ेस के प्रकटन को कैसे प्रभावित करते हैं।

सादगी

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

सबसे अच्छा समाधान खोजने का परिणाम सरल और सीधा XML सिंटैक्स है। सभी मानक फ़्लटर विजेट्स के नाम बिल्कुल समान हैं, लेकिन XML रूप में। उदाहरण के लिए, नैनक में SizedBox विजेट <sizedBox>...</sizedBox> होगा, और यह नियम बिना किसी अपवाद के सभी विजेट्स पर लागू होता है। यदि विजेट में कुछ जटिल संपत्ति है, तो इसका उपसर्ग prop के साथ एक्सएमएल के समान (या सरल) नाम होगा। उदाहरण के लिए - विजेट Container एक जटिल संपत्ति boxDecoration है, जिसके अपने आंतरिक गुण हैं। तो, नैनक में इस संपत्ति का निम्नलिखित रूप होगा: <prop:decoration>...</prop:decoration> यह नियम सभी जटिल संपत्तियों पर लागू होता है। और अंतिम पहलू यह है कि अपेक्षाकृत सरल तर्क XML टैग पैरामीटर हैं। आइए एक ही SizedBox एक उदाहरण के रूप में लें:

 <sizedBox width="50" height="50"> ... </sizedBox>

कुछ विगेट्स के लिए, लेखन कोड को सरल बनाने के लिए अतिरिक्त तर्क लागू किए जाते हैं, और SizedBox के लिए यह ize तर्क है जो width और height दोनों सेट करता है।

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

तानाना

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

शक्ति

नैन एक्सएमएल कोड को फ़्लटर में एक इंटरफ़ेस में बदलने की क्षमता से अधिक प्रदान करता है। नैनक टेम्प्लेटिंग और लॉजिक राइटिंग क्षमताएं प्रदान करता है। सशर्त तत्व रेंडरिंग, लूप ड्राइंग, टैप हैंडलिंग - यह पहले से ही नैन के वर्तमान 0.0.1 संस्करण में है।

अब तक, तर्क भाग बहुत सीधा है - यह आपके '.डार्ट' कोड में पहले से लिखे गए नल और ईवेंट हैंडलिंग के माध्यम से बातचीत का समर्थन करता है - लेकिन अंततः नैनक का यह हिस्सा काफी विस्तारित हो जाएगा, जिससे आप सीधे ब्राउज़र में डार्ट में तर्क लिख सकेंगे। और यह आपके आवेदन में भी काम करता है।

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

सुविधा

नानक में एक अंतर्निहित एक्सएमएल संपादक है, लेकिन यह बहुत आसान नहीं है। यह खोजने योग्य नहीं है (अभी तक), यह बहुत सारे कोड के साथ बहुत तेज़ नहीं है, और इसकी कोई स्वत: पूर्णता नहीं है। इसके साथ कैसे रहना है? उदाहरण के लिए - उपयोगकर्ता को अपनी पसंदीदा आईडीई का उपयोग करने दें और वास्तविक समय में नैनक में परिवर्तन देखें। मुझे आपको बताने दो कि कैसे।

और यह वेब है (जिसके साथ आपको खेलना है):

भविष्य में स्वत: पूर्ण समर्थन जोड़ा जाएगा, शायद दूर के भविष्य में ... मैंने एक्सएमएल स्कीमा में गहराई से कोशिश की, कई दिन बिताए, लेकिन अभी तक 🤷🏼 नहीं कर सका

प्रदर्शन

अलग से, मैं प्रदर्शन (मोबाइल उपकरणों पर XML से ड्राइंग इंटरफ़ेस) का उल्लेख करना चाहूंगा। संक्षेप में, यह स्पंदन के प्रदर्शन के समान है, बिना किसी ओवरहेड के। फिलहाल, "स्क्रीन" विगेट्स (स्लिवरलिस्ट) की आलसी रूप से प्रदान की गई सूची है, जो एसिंक्रोनस रूप से बनाई गई है। बाद में, इस कार्यान्वयन को परिष्कृत किया जाएगा ताकि विजेट्स को एसिंक्रोनस रूप से प्रस्तुत करना शुरू किया जा सके, लेकिन बदले में, इसलिए सामग्री को प्रदर्शित करने के लिए आवश्यक समय उस समय के बराबर होगा जो XML में वर्णित पहले विजेट को रेंडर करने में लगता है।

नानक डेमो ऐप

आम

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

लिंक

• वेब क्लाइंट
• एंड्रॉइड क्लाइंट
• नानक सीएमएस

ग्राहक

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

व्यवस्थापक

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

इस डेमो के निर्माण में उपयोग किए गए डेटा मॉडल के SQL प्रतिनिधित्व के रूप में, आपको निम्न स्क्रीनशॉट द्वारा निर्देशित किया जा सकता है:

कनेक्शन प्रबंधक / "कनेक्शन"

यह खंड केवल क्लाइंट और सीएमएस अनुप्रयोगों में "डेमो" के तर्क से संबंधित है। और इसे नानक के साथ बातचीत के अनुभव और क्लाइंट को अपडेट करने की प्रक्रिया का अनुकरण करने के लिए लागू किया गया था। लेकिन पहले चीजें पहले।

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

इस मॉडल को कार्रवाई में दिखाने के लिए, वही लागू किया गया है, लेकिन सरलीकृत तरीके से:

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

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

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

इसलिए यदि आप पूरी तरह से स्क्रैच से एक स्क्रीन बनाना चाहते हैं और इसे एप्लिकेशन में प्रदर्शित करना चाहते हैं, तो निम्न सूची में से कुछ का उपयोग IdField मान के रूप में करें:

• स्क्रीन
• यूआई
• पृष्ठ
• इंटरफेस
• मार्कअप
• देखना

यदि आप कुछ तोड़ते हैं - बस admin.nanc.io डेटा रीसेट करें (Chrome: F12 -> एप्लिकेशन -> एप्लिकेशन -> स्टोरेज -> साइट डेटा साफ़ करें), ठीक है, जब आप क्लाइंट एप्लिकेशन को फिर से खोलते हैं तो यह हमेशा बनाए गए वास्तविक स्क्रीन कोड को लोड करेगा इस डेमो के लिए। (आपके ब्राउज़र से कोड तभी लोड होगा जब आप कनेक्ट करेंगे)

और अंत में, ScreenField वाले नए मॉडल का एक नया पृष्ठ बनाने और इसे एप्लिकेशन में प्रस्तुत करने का एक छोटा सा उदाहरण:

आगे क्या होगा?

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

यदि आप नानक की विशेषताओं में रुचि रखते हैं और आप सहयोग में रुचि रखते हैं - फॉर्म भी भरें, और हम निश्चित रूप से बात करेंगे।