हम वेब डेवलपर्स के लिए एक प्रभावी वर्कफ़्लो व्यवस्थित करते हैं: कॉन्फ्लुएंस, एयरटेबल और अन्य टूल

मैं लगभग दो वर्षों से फ्रंट-एंड डेवलपर के रूप में काम कर रहा हूं, और विभिन्न प्रकार की परियोजनाओं के निर्माण में भाग लिया है। मैंने जो सबक सीखा है, वह यह है कि डेवलपर्स की विभिन्न टीमों के बीच सहयोग करना आसान नहीं है, जिनका लक्ष्य एक ही है, लेकिन उनके कार्य और जिम्मेदारियां अलग-अलग हैं।

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

स्किलबॉक्स अनुशंसा करता है: दो वर्षीय व्यावहारिक पाठ्यक्रम "मैं एक PRO वेब डेवलपर हूं".

अनुस्मारक: "हैबर" के सभी पाठकों के लिए - "हैबर" प्रचार कोड का उपयोग करके किसी भी स्किलबॉक्स पाठ्यक्रम में नामांकन करते समय 10 रूबल की छूट।

यह सब क्यों आवश्यक है?

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

मैंने समस्या के समाधान पर काम करना शुरू किया।

गूगल सर्च हमारी समस्या पर अच्छे परिणाम देता है।

किए गए कार्य को और अधिक दृश्यमान बनाने के लिए, मैंने एक वर्कफ़्लो आरेख बनाया जो यह समझ देता है कि यहां कार्य कैसे किया जाता है।

पूर्ण रिज़ॉल्यूशन में खोलने के लिए छवि पर क्लिक करें।

लक्ष्यों और उद्देश्यों

पहली तकनीकों में से एक जिसे मैंने परीक्षण करने का निर्णय लिया वह "कैस्केड मॉडल" (झरना) थी। मैंने इसका उपयोग समस्याओं को उजागर करने और उन्हें हल करने के तरीके को समझने के लिए किया।

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

कार्य: अन्यथा ग्राहक को समझाने का कोई मतलब नहीं है; सबसे अच्छा विकल्प पेज-दर-पेज मॉडल के आधार पर कंपनी के भीतर एक वेबसाइट बनाने के लिए एक मॉड्यूलर प्रक्रिया विकसित करना है।

यूनिवर्सल डिज़ाइन टोकन और घटकों को डेवलपर्स और डिज़ाइनर दोनों द्वारा प्रबंधित किया जाता है।

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

कार्य: एक सार्वभौमिक प्रणाली का निर्माण करना जिसमें डिज़ाइनर, डेवलपर और प्रबंधक एक-दूसरे के साथ हस्तक्षेप किए बिना समकालिक रूप से काम कर सकें।

सटीक विकास ट्रैकिंग

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

कार्य: विभिन्न टीम के सदस्यों द्वारा किए गए कार्यों की प्रगति को ट्रैक करने के लिए एक डैशबोर्ड बनाएं।

उपकरण का एक सेट

विभिन्न उपकरणों के साथ प्रयोग करने के बाद, मैंने निम्नलिखित सेट पर फैसला किया: कॉन्फ्लुएंस, जीरा, एयरटेबल और एब्सट्रैक्ट। नीचे मैं प्रत्येक के लाभ बताऊंगा।

संगम

उपकरण की भूमिका: सूचना एवं संसाधन केंद्र.

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

उपकरण आपको प्रत्येक घटक और परियोजना के बारे में किसी भी अन्य विवरण को उचित रूप से दस्तावेज़ित करने की अनुमति देता है।

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

टूल के बारे में अधिक जानकारी आधिकारिक उत्पाद वेबसाइट पर उपलब्ध है.

Jira

उपकरण की भूमिका: समस्या की निगरानी और कार्य प्रबंधन।

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

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

जीरा के साथ, आप यह सुनिश्चित कर सकते हैं कि प्रक्रिया में सभी प्रतिभागियों (मैं आपको याद दिला दूं, हमारे मामले में उनमें से 5-15 हैं) को सही कार्य प्राप्त होते हैं जो खो नहीं जाते हैं और उनके निष्पादक को ढूंढ लेते हैं।

जीरा के बारे में और जानें आधिकारिक उत्पाद वेबसाइट पर उपलब्ध है.

Airtable

उपकरण की भूमिका: घटक प्रबंधन और प्रगति बोर्ड।

एयरटेबल स्प्रेडशीट और डेटाबेस का मिश्रण है। यह सब ऊपर चर्चा किए गए सभी उपकरणों के संचालन को अनुकूलित करना संभव बनाता है।

उदाहरण 1: घटक प्रबंधन

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

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

जब कोई डेवलपर किसी डिज़ाइन घटक को स्वीकार करता है, तो वह घटक को एक तालिका में रिकॉर्ड करके परिणामी एबीईएम का मूल्यांकन करता है। कुल 9 कॉलम हैं:

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

उदाहरण 2: पृष्ठ विकास प्रगति

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

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

सार

टूल की भूमिका: डिज़ाइन परिसंपत्तियों के लिए संस्करण नियंत्रण का एकल स्रोत।

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

एक निष्कर्ष के रूप में

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

स्किलबॉक्स अनुशंसा करता है:

• व्यावहारिक पाठ्यक्रम "मोबाइल डेवलपर प्रो".
• ऑनलाइन पाठ्यक्रम "सी# डेवलपर".
• व्यावहारिक वर्ष पाठ्यक्रम "PHP डेवलपर 0 से PRO तक".

स्रोत: www.habr.com