प्रभावी वेब डेवलपमेंट वर्कफ़्लो: संगम, एयरटेबल और अधिक

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

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

स्किलबॉक्स सलाह देता है: दो साल का व्यावहारिक कोर्स "मैं एक प्रो वेब डेवलपर हूं । "

हम आपको याद दिलाते हैं: "हैबर" के सभी पाठकों के लिए - "हैबर" प्रोमो कोड का उपयोग करके किसी भी स्किलबॉक्स कोर्स के लिए पंजीकरण करते समय 10,000 रूबल की छूट।

आपको यह सब क्यों चाहिए?

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

मैं समस्या के समाधान पर काम करने लगा।


Google खोज हमारी समस्या पर अच्छे परिणाम देती है

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


जब क्लिक किया जाता है, तो चित्र पूर्ण रिज़ॉल्यूशन में खुल जाएगा।

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

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



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

कार्य: विपरीत में ग्राहक को समझाने लायक नहीं है, सबसे अच्छा विकल्प एक पृष्ठ मॉडल के आधार पर कंपनी के भीतर एक साइट बनाने के लिए एक मॉड्यूलर प्रक्रिया विकसित करना है।

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



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

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

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

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

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

टूल किट

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

संगम

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

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

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



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

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

Jira

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



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

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

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

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

Airtable

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

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

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

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

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



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

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

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

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



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

अमूर्त

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



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

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

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

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

• व्यावहारिक पाठ्यक्रम "मोबाइल डेवलपर प्रो" ।
• ऑनलाइन पाठ्यक्रम "सी # -डॉलर" ।
• व्यावहारिक वार्षिक पाठ्यक्रम "पीएचपी-डेवलपर 0 से प्रो तक" ।