GrapesJS के लिए क्लाउड कौशल: एआई हमारे दृश्य संपादकों के निर्माण के तरीके को कैसे बदल रहा है

हमने GrapesJS विकास के लिए क्लाउड स्किल जारी किया है - एक मुफ्त, ओपन-सोर्स कौशल जो क्लाउड को एक डेवलपर में बदल देता है जो वास्तव में GrapesJS जानता है। यह एमआईटी के तहत GitHub पर रहता है, 0.21.x, 0.22.x और 0.23.x के साथ काम करता है, और स्टूडियो GrapesJS साथ संगत है। यहां बताया गया है कि हमने इसे क्यों बनाया है, वास्तव में दिन-प्रतिदिन के काम में क्या बदलाव होता है, और हमें लगता है कि यह कहां जा रहा है।

समस्या कभी यह नहीं थी कि एआई कोड नहीं लिख सकता

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

घटक मॉडल के साथdefaults,traits,,isComponent कस्टमviewऔरmodel। ब्लॉक प्रबंधक और उसकेcontentशब्दार्थ। आदेश और उनका जीवनचक्र। स्टाइल मैनेजर अपने क्षेत्रों और गुणों के साथ। भंडारण प्रबंधक। परिसंपत्ति प्रबंधक। डिवाइस प्रबंधक। आरटीई एक्सटेंशन। सीएसएस संगीतकार। दर्जनों संपादक घटनाएं।

यदि किसी मॉडल ने ज्यादातर React और एक्सप्रेस देखा है, तो GrapesJS के बारे में उसका ज्ञान उथला है - और यह आत्मविश्वास से उन एपीआई का आविष्कार करेगा जो मौजूद नहीं हैं। आप पैटर्न जानते हैं: कोड बेदाग दिखता है, सफाई से आयात करता है, फिर टूट जाता है। क्योंकिeditor.addBlock()उस आकार में कोई चीज नहीं है, और आपको वास्तव में जिसकी आवश्यकता थीeditor.BlockManager.add()।

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

कौशल क्या करता है

एक कौशल डोमेन ज्ञान और सम्मेलनों का एक संरचित पैकेज है जिसे क्लाउड तब खींचता है जब यह पहचानता है कि कार्य एक GrapesJS है। 200-लाइन सिस्टम प्रॉम्प्ट नहीं जिसे आप हर बातचीत में कॉपी करते हैं - ज्ञान जो मॉडल के साथ रहता है और अपने आप सक्रिय हो जाता है। व्यवहार में इसका मतलब है कि आप ढांचे की व्याख्या करना बंद कर देते हैं और सुविधा का वर्णन करना शुरू करते हैं:

एक GrapesJS प्लगइन बनाएं जो संपादन योग्य योजनाओं के साथ एक मूल्य निर्धारण तालिका ब्लॉक जोड़ता है।

एक कस्टम विशेषता बनाएं जो उपयोगकर्ताओं को पूर्वनिर्धारित संग्रह से एक आइकन चुनने देती है।

CSS ग्रिड नियंत्रणों के लिए एक नया स्टाइल मैनेजर सेक्टर जोड़ें।

एक React घटक बनाएं जो इस प्लगइन आर्किटेक्चर के साथ GrapesJS को आरंभ करता है।

जो वापस आता है वह पारिस्थितिकी तंत्र सम्मेलनों का अनुसरण करता है: सही प्लगइन हस्ताक्षर, उचित घटक पंजीकरण, TypeScript प्रकार, एक समझदार फ़ाइल संरचना।

कौशल में प्लगइन्स, घटक, ब्लॉक, लक्षण, कमांड, पैनल और बटन, स्टाइल मैनेजर और आरटीई एक्सटेंशन, स्टोरेज और एसेट मैनेजर इंटीग्रेशन, डिवाइस मैनेजर, सीएसएस कंपोजर यूटिलिटीज, पूर्ववत मैनेजर, कैनवास एक्सटेंशन शामिल हैं - साथ ही उनके आसपास सब कुछ: React, Vue, Next.js, लारवेल बैकएंड।

वास्तव में क्या बदलता है

प्रवेश के लिए बाधा गिरती है। आपका पहला GrapesJS प्लगइन आमतौर पर दस्तावेज़ों और अन्य लोगों के स्रोत को पढ़ने के दो दिन खर्च करता है। अब आप एक काम करने वाले कंकाल से शुरू कर सकते हैं और जाने से पहले के बजाय आगे बढ़ते हुए सीख सकते हैं।

बॉयलरप्लेट संपीड़ित करता है। ब्लॉक, लक्षण, पैनल - कोड जिसे आपने छोटे बदलावों के साथ सौ बार लिखा है। यह ठीक उसी तरह का काम है जो अच्छी तरह से प्रतिनिधि है।

प्रोटोटाइप सस्ते हो जाते हैं। "क्या होगा अगर हमने एक कस्टम ईमेल बिल्डर बनाया है?" केवल विचार का परीक्षण करने के लिए एक सप्ताह की प्रतिबद्धता होना बंद हो जाता है। आधा घंटा और आपके पास दिखाने के लिए कुछ है।

अड़चन चलती है। यह हुआ करता था किआप GrapesJS में भी ऐसा कैसे करते हैं . अब यह है किहम क्या बना रहे हैं और इसका उपयोग कैसा महसूस करना चाहिए। यह एक और दिलचस्प समस्या है जिस पर अटका रहना चाहिए।

कौशल क्या नहीं करता है

स्पष्ट रूप से कहने लायक है, क्योंकि एआई टूलींग के आसपास की उम्मीदें गर्म होती हैं।

यह ढांचे को समझने की जगह नहीं लेता है। यह काम करने वाले कोड के लिए पथ को छोटा करता है, लेकिन जटिल कैनवास व्यवहार को डिबग करना, बड़े दस्तावेजों पर प्रदर्शन से निपटना और वास्तुशिल्प कॉल करना अभी भी आपका है।

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

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

यह कहाँ जा रहा है

कौशल एक पहला कदम है। दिलचस्प हिस्सा बाद में आता है।

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

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

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

विशेषज्ञता के लिए वितरण प्रारूप के रूप में कौशल। यदि किसी ढांचे के बारे में ज्ञान को पैक और साझा किया जा सकता है, तो ढांचे पर क्यों रुकें? एक विशिष्ट प्लगइन के लिए एक कौशल। एक कंपनी के डिजाइन सिस्टम के लिए। एक ग्राहक के ईमेल-टेम्पलेट नियमों के लिए। हमें लगता है कि यह दस्तावेज़ीकरण के लिए एक सामान्य साथी बन जाता है।

अक्सर पूछे जाने वाले प्रश्न

GrapesJS के लिए क्लाउड कौशल क्या है?

यह एक मुफ्त, ओपन-सोर्स कौशल है जो क्लाउड को GrapesJS एपीआई का संरचित ज्ञान देता है - घटक, ब्लॉक, लक्षण, कमांड, पैनल, स्टाइल मैनेजर, स्टोरेज और एसेट मैनेजर - इसलिए यह कोड उत्पन्न करता है जो उन तरीकों का आविष्कार करने के बजाय पारिस्थितिकी तंत्र सम्मेलनों का पालन करता है जो मौजूद नहीं हैं।

यह किन GrapesJS संस्करणों का समर्थन करता है?

कौशल का परीक्षण GrapesJS 0.21.x, 0.22.x और 0.23.x के साथ किया जाता है, और यह GrapesJS स्टूडियो के साथ संगत है।

क्या यह वाणिज्यिक परियोजनाओं के लिए मुफ़्त है?

हाँ। यह एमआईटी लाइसेंस के तहत जारी किया गया है और व्यक्तिगत और व्यावसायिक उपयोग दोनों के लिए मुफ्त है। स्रोत GitHub पर है और योगदान के लिए खुला है।

क्या मुझे यह जानने की आवश्यकता है कि इसका उपयोग GrapesJS करना है?

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

क्या यह React, Vue या Next.js के साथ काम करता है?

हाँ। कोर GrapesJS एपीआई से परे, कौशल में React, Vue और Next.js के लिए एकीकरण पैटर्न शामिल हैं, साथ ही भंडारण और परिसंपत्ति प्रबंधन के लिए लारवेल जैसी बैकएंड वायरिंग भी शामिल है।

यह सिर्फ एआई से GrapesJS के बारे में पूछने से कैसे अलग है?

डोमेन संदर्भ के बिना, मॉडल GrapesJS एपीआई को मतिभ्रम करते हैं - प्रशंसनीय दिखने वाली कॉल जो किसी भी संस्करण में मौजूद नहीं हैं। कौशल वास्तविक एपीआई सतह और सम्मेलनों को सामने से आपूर्ति करता है, इसलिए आप अपना समय आविष्कृत तरीकों को सही करने के बजाय कोड की समीक्षा करने में व्यतीत करते हैं।

शुरू करना

कौशल मुफ़्त, खुला स्रोत, एमआईटी है - व्यक्तिगत और व्यावसायिक उपयोग, कोई शर्त नहीं।

पुल अनुरोध, विचार और बग रिपोर्ट सभी का स्वागत है। GrapesJS पारिस्थितिकी तंत्र हमेशा उन लोगों पर चलता है जो उन्होंने अपने लिए बनाया है उसे साझा करते हैं - यह उनमें से एक और है।

यदि आप इसे आज़माते हैं और कुछ बग़ल में चला जाता है, तो एक समस्या खोलें। हम वास्तव में उत्सुक हैं कि आप इसके साथ क्या बनाएंगे।