CodeRainbow: इंटरैक्टिव कोड लर्निंग और प्रलेखन



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

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

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

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

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

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

अब इस बारे में कि यह सब कैसे व्यवस्थित है। "मार्कर टिप्पणियों" की अवधारणा शुरू की गई है। यह एक प्रोग्रामिंग भाषा की एक नियमित टिप्पणी है (फिलहाल यह एक एकल-पंक्ति टिप्पणी है "//" जो कई भाषाओं में उपयोग की जाती है - सी, सी ++, सी #, जावा, ...), इसके बाद विशेष वर्णों का एक अनुक्रम, जिसके बाद एक पहचानकर्ता और / या टैग होते हैं। जिसका अनुसरण सामान्य मानव टिप्पणी कर सकता है। मैंने तीन प्रकार की मार्कर टिप्पणियां पेश कीं

  1. एक मनमाना क्षेत्र को उजागर करने के लिए टिप्पणी करें। केवल "क्लोज़" मार्कर टिप्पणी की आवश्यकता होती है। "// <<" से शुरू होता है और "// >>" के साथ समाप्त होता है।
  2. कोड में एक मनमानी लाइन इंगित करने के लिए टिप्पणी करें। "// $$" द्वारा अस्वीकृत
  3. कोड को सही ढंग से हाइलाइट करने के लिए टिप्पणी करें। यह "// @@" से शुरू होता है और नीचे कोड ब्लॉक शामिल होता है, जो घुंघराले ब्रेसिज़ "{" और "}" द्वारा सीमित होता है, जो कि अधिकांश सी-लाइक प्रोग्रामिंग भाषाओं में कोड ब्लॉक के लिए उपयोग किया जाता है। एक पूर्ण ब्रेस विश्लेषण लागू किया गया है - नेस्टेड घुंघराले कोष्ठक की अनुमति है, और पार्सर लाइनों और टिप्पणियों में घुंघराले कोष्ठक को सही ढंग से छोड़ देता है।

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



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



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



फिलहाल, पेड़ में तीन मुख्य भाग होते हैं (शीर्ष-स्तरीय नोड्स): FILES, TAGS और NOTES (शायद यह अंतिम समाधान नहीं है, क्योंकि अवधारणा अभी तक काफी स्पष्ट नहीं है, साथ ही साथ ऐसी संरचना की सुविधा भी है)।



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

TAGS एक वैश्विक परियोजना टैग क्लाउड है; टैग स्रोत कोड फ़ाइल से बंधे नहीं हैं और किसी भी प्रोजेक्ट फ़ाइल में जितनी बार चाहें उतनी बार आ सकते हैं।

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

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

प्रत्येक नोड को नोड में चेकबॉक्स को अनचेक करके अक्षम किया जा सकता है। यह इस नोड के हाइलाइटिंग का कारण होगा और कोड में सभी बच्चे नोड्स को हटा दिया जाएगा। इस प्रकार, उदाहरण के लिए, तीन रूट नोड्स (FILES, TAGS और NOTES) से चेकमार्क, आप सभी मार्कर टिप्पणियों के हाइलाइटिंग को बंद कर सकते हैं, केवल उन लोगों को छोड़कर जिनका रंग कोड में (बार के माध्यम से) स्पष्ट रूप से निर्दिष्ट किया गया है।

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

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



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

  1. ब्लॉक - एक ब्लॉक हाइलाइट किया गया है, एक हस्ताक्षर के साथ शुरू होता है और एक कोड अनुक्रम जिसमें घुंघराले ब्रैकेट में संलग्न है।
  2. सिंगल-लाइन - हस्ताक्षर के साथ पूरी लाइन हाइलाइट की गई है
  3. प्रतीकात्मक - केवल हस्ताक्षर अनुक्रम पर प्रकाश डाला गया है। व्यक्तिगत नामों - चर, कार्यों, कक्षाओं को उजागर करने के लिए ऐसे हस्ताक्षरों का उपयोग करना सुविधाजनक है।

सिग्नेचर ब्लॉक के साथ काम मार्कर ब्लॉक के साथ ही होता है। इसी तरह, एक पेड़ में नोड्स बनाए जाते हैं।

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



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

डेटाबेस के भंडारण प्रारूप के बारे में थोड़ा सा। दरअसल, स्रोत कोड में केवल मार्कर टिप्पणियां संग्रहीत हैं; ट्री की सामग्री को एक्सटेंशन ".cr" के साथ एक विशेष xml फ़ाइल में संग्रहीत किया जाता है। डेटाबेस फ़ाइल का कोई स्पष्ट बाइंडिंग प्रोजेक्ट्स के लिए नहीं है, हालाँकि जब आप कोई प्रोजेक्ट खोलते हैं, तो क्रै-फ़ाइल को उसी नाम से खोलने का प्रयास किया जाता है यदि कोई cr-file पहले अपलोड नहीं की गई हो।

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

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

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

डाउनलोड लिंक: https://www.dropbox.com/s/9iiw5x7elwy3tpe/CodeRainbow4.zip?dl=0
सिस्टम आवश्यकताएँ: विंडोज, क्यूटी क्रिएटर> = 4.5.1 MSVC2015 32 बिट द्वारा संकलित किया गया (यह डाउनलोड पर वितरित असेंबली असेंबली है।)
स्थापना: संग्रह को अनज़िप करें और फ़ोल्डर में प्लगइन कॉपी करें c: /Qt/Qt5.10.1/Tools/QtCreator/lib/qtcreator/plugins (यह मानक QQ प्लेसमेंट के लिए एक उदाहरण है, यदि आपने Qt को अलग तरीके से स्थापित किया है या कोई अन्य संस्करण - पथ भिन्न होगा) और (पुनः) क्यूटी निर्माता चलाएं।

Source: https://habr.com/ru/post/hi425061/


All Articles