हामी वेब विकासकर्ताहरूको लागि प्रभावकारी कार्यप्रवाह व्यवस्थित गर्छौं: कन्फ्लुएन्स, एयरटेबल र अन्य उपकरणहरू

म लगभग दुई वर्षको लागि फ्रन्ट-एन्ड विकासकर्ताको रूपमा काम गरिरहेको छु, र विभिन्न प्रकारका परियोजनाहरूको निर्माणमा भाग लिएको छु। मैले सिकेको एउटा पाठ भनेको एउटै लक्ष्य साझा गर्ने तर फरक कार्य र जिम्मेवारीहरू भएका विकासकर्ताहरूको विभिन्न टोलीहरू बीचको सहकार्य सजिलो छैन।

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

Skillbox सिफारिस गर्दछ: दुई वर्षे व्यावहारिक पाठ्यक्रम "म एक वेब विकासकर्ता प्रो हुँ".

हामी सम्झाउँछौं: सबै Habr पाठकहरूका लागि - Habr प्रोमो कोड प्रयोग गरी कुनै पनि Skillbox पाठ्यक्रममा भर्ना गर्दा १०,००० रूबल छुट।

यो सबै किन आवश्यक छ?

स्क्र्याचबाट वेबसाइट सिर्जना गर्न आवश्यक न्यूनतम टोली एक डिजाइनर, प्रोग्रामर र परियोजना प्रबन्धक हो। मेरो मामलामा, टोली गठन भयो। तर केहि साइटहरु को रिलीज पछि, मैले यो संग केहि गलत भएको महसुस गरे। कहिलेकाहीँ हामीले हाम्रा जिम्मेवारीहरू पूर्णतया बुझेनौं, र ग्राहकसँगको सञ्चारले चाहेको धेरै छोडिदियो। यी सबैले प्रक्रियालाई सुस्त बनायो र सबैलाई विचलित बनायो।

म समस्या समाधान गर्न काम गर्न थाले।

गुगल खोजले हाम्रो समस्यामा राम्रो परिणाम दिन्छ।

कामलाई थप भिजुअल बनाउनको लागि, मैले यहाँ कसरी काम गरिन्छ भन्ने कुरा बुझाउने कार्यप्रवाह रेखाचित्र सिर्जना गरेको छु।

पूर्ण रिजोलुसनमा खोल्न छविमा क्लिक गर्नुहोस्।

लक्ष्य र उद्देश्यहरू

मैले परीक्षण गर्ने निर्णय गरेको पहिलो प्रविधि मध्ये एक "क्यास्केड मोडेल" (झरना) थियो। मैले यसलाई समस्याहरू हाइलाइट गर्न र तिनीहरूलाई कसरी समाधान गर्ने भनेर बुझ्न प्रयोग गरें।

समस्या: प्रायजसो, ग्राहकले वेबसाइट निर्माण प्रक्रियालाई मोड्युलर रूपमा मूल्याङ्कन गर्दैन, विकासकर्ताहरूले गरे जस्तै। उसले यसलाई नियमित साइटको रूपमा बुझ्छ, त्यो हो, उसले व्यक्तिगत पृष्ठहरूको सन्दर्भमा सोच्दछ। उनको विचारमा, डिजाइनर र प्रोग्रामरहरूले व्यक्तिगत पृष्ठहरू सिर्जना गर्छन्, एक पछि अर्को। नतिजाको रूपमा, ग्राहकले वास्तविक प्रक्रियाको क्रममा के पछ्याउँछ भनेर बुझ्न सक्दैन।

कार्य: ग्राहकलाई अन्यथा मनाउनको कुनै मतलब छैन; उत्तम विकल्प भनेको पृष्ठ-द्वारा-पृष्ठ मोडेलमा आधारित कम्पनी भित्र वेबसाइट सिर्जना गर्न मोड्युलर प्रक्रिया विकास गर्नु हो।

विश्वव्यापी डिजाइन टोकनहरू र कम्पोनेन्टहरू दुवै विकासकर्ताहरू र डिजाइनरहरूद्वारा व्यवस्थित हुन्छन्।

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

कार्य: एक विश्वव्यापी प्रणाली निर्माण गर्ने जसमा डिजाइनरहरू, विकासकर्ताहरू र प्रबन्धकहरूले एकअर्कासँग हस्तक्षेप नगरी समकालिक रूपमा काम गर्न सक्छन्।

सही विकास ट्रयाकिङ

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

कार्य: टोलीका विभिन्न सदस्यहरूले गरेका कार्यहरूको प्रगति ट्र्याक गर्न ड्यासबोर्ड सिर्जना गर्नुहोस्।

उपकरण को सेट

विभिन्न उपकरणहरू प्रयोग गरिसकेपछि, म निम्न सेटमा बसेँ: संगम, जिरा, एयरटेबल र एब्स्ट्र्याक्ट। तल म प्रत्येकको फाइदाहरू प्रकट गर्नेछु।

संगोष्ठी

उपकरणको भूमिका: सूचना र स्रोत केन्द्र।

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

उपकरणले तपाईंलाई प्रत्येक कम्पोनेन्ट र परियोजनाको बारेमा कुनै पनि अन्य विवरणहरू ठीकसँग कागजात गर्न अनुमति दिन्छ।

Confluence को मुख्य फाइदा कागजात टेम्प्लेटहरूको अनुकूलन हो। थप रूपमा, यो स्पेसिफिकेशनहरूको एकल भण्डार र विभिन्न परियोजना कागजातहरू लागू गर्न प्रयोग गर्न सकिन्छ, सहभागीहरूको पहुँच स्तरहरू अलग गर्दै। अब तपाईले चिन्ता लिनु पर्दैन कि तपाईसँग स्पेसिफिकेशनको पुरानो संस्करण हातमा छ, जब तपाईले इमेल मार्फत कागजातहरू पठाउनुहुन्छ।

उपकरण बारे थप जानकारी आधिकारिक उत्पादन वेबसाइटमा उपलब्ध छ.

Jira

उपकरणको भूमिका: समस्या अनुगमन र कार्य व्यवस्थापन।

Jira एक धेरै शक्तिशाली परियोजना योजना र व्यवस्थापन उपकरण हो। कार्यक्षमता को मुख्य भाग अनुकूलन कार्यप्रवाह को निर्माण हो। समस्याहरूको प्रभावकारी रूपमा व्यवस्थापन गर्न (जुन हामीलाई चाहिन्छ), अनुरोध प्रकार र मुद्दा प्रकार (समस्या प्रकार) को सही प्रयोगमा विशेष ध्यान दिन लायक छ।

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

जिराको साथ, तपाइँ निश्चित हुन सक्नुहुन्छ कि प्रक्रियामा सबै सहभागीहरू (मलाई सम्झाउन दिनुहोस्, हाम्रो अवस्थामा त्यहाँ 5-15 छन्) सही कार्यहरू प्राप्त गर्छन् जुन हराउँदैनन् र तिनीहरूको निष्पादक फेला पार्छन्।

Jira बारे थप जान्नुहोस् आधिकारिक उत्पादन वेबसाइटमा उपलब्ध छ.

Airtable

उपकरणको भूमिका: घटक व्यवस्थापन र प्रगति बोर्ड।

Airtable स्प्रिेडसिट र डाटाबेस को एक मिश्रण हो। यो सबै माथि छलफल गरिएका सबै उपकरणहरूको सञ्चालन अनुकूलन गर्न सम्भव बनाउँछ।

उदाहरण १: कम्पोनेन्ट व्यवस्थापन

शैली गाइड जेनरेटरको लागि, यो सधैं प्रयोग गर्न सुविधाजनक छैन - समस्या यो हो कि डिजाइनरहरूले यसलाई सम्पादन गर्न सक्दैनन्। थप रूपमा, स्केच कम्पोनेन्ट लाइब्रेरी प्रयोग गर्नु राम्रो निर्णय हुनेछैन, किनकि यसमा धेरै सीमितताहरू छन्। सम्भवतः, तपाइँ कार्यक्रम बाहिर यो पुस्तकालय प्रयोग गर्न सक्षम हुनुहुने छैन।

Airtable पनि उत्तम छैन, तर यो धेरै अन्य समान समाधानहरू भन्दा राम्रो छ। यहाँ कम्पोनेन्ट व्यवस्थापन तालिका टेम्प्लेटको डेमो छ:

जब एक विकासकर्ताले डिजाईन कम्पोनेन्ट स्वीकार गर्दछ, उसले तालिकामा कम्पोनेन्ट रेकर्ड गरेर नतिजा ABEM को मूल्याङ्कन गर्दछ। त्यहाँ कुल 9 स्तम्भहरू छन्:

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

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

पृष्ठ विकासको प्रगति मूल्याङ्कन गर्न, तपाईंलाई एउटा टेम्प्लेट चाहिन्छ जुन यस उद्देश्यका लागि विशेष रूपमा सिर्जना गरिएको हो। तालिकाले टोली र ग्राहक दुवैको आवश्यकताहरू पूरा गर्न सक्छ।

पृष्ठको बारेमा कुनै पनि जानकारी यहाँ चिन्ह लगाउन सकिन्छ। यो समयसीमा हो, InVision प्रोटोटाइपको लिङ्क, एक गन्तव्य, एक बाल घटक। यो तुरुन्तै ध्यान दिईन्छ कि अपरेसनहरू प्रदर्शन गर्न धेरै सुविधाजनक छन्, दुवै कागजात र डिजाइन अपडेट गर्ने सन्दर्भमा, साथसाथै फ्रन्ट-एन्ड र ब्याक-एन्ड विकासको स्थिति। यसबाहेक, यी अपरेशनहरू एकैसाथ प्रदर्शन गरिन्छ।

सार

उपकरणको भूमिका: डिजाइन सम्पत्तिहरूको लागि संस्करण नियन्त्रणको एकल स्रोत।

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

निष्कर्षको रूपमा

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

Skillbox सिफारिस गर्दछ:

• व्यावहारिक पाठ्यक्रम "मोबाइल विकासकर्ता प्रो".
• अनलाइन कोर्स "C# विकासकर्ता".
• एक वर्षको व्यावहारिक पाठ्यक्रम "0 देखि PRO मा PHP विकासकर्ता".

स्रोत: www.habr.com