🌸 🤜🏼 🧙 आसान प्रोग्रामिंग: एक कार्य दिवस में गिटलैब के लिए कानबन बोर्ड 👁️ 🐦 ⛱️

निम्नलिखित संवाद के साथ काम करने का सोमवार शुरू हुआ:

नेता (पी): यह आपकी टीम में स्पष्ट नहीं है कि कौन क्या कर रहा है।
I (I): हां, हमारे पास एक ऐसा उपकरण नहीं है जो कार्यों पर कार्य की सामान्य तस्वीर को प्रतिबिंबित करेगा। हिटलैब में कानबन बोर्ड हैं, लेकिन वे केवल परियोजनाओं और समूहों के संदर्भ में हैं। एक आम कानबन बोर्ड समस्या का समाधान करेगा।
R: फिर एक बोर्ड बनाते हैं।
मैं: सुबह तक यह तैयार हो जाएगा।

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

क) यांत्रिक हाथ और उसके लिए एक नियंत्रक का निर्माण, जो दूर से स्टिकर को बोर्ड पर फिर से चिपका देगा, जबकि निर्णय को जटिल नहीं करने के लिए, हमें अपने दुर्गम सहयोगी के लिए स्टिकर पर लिखना होगा, जो अनुचित है;
b) एक सॉफ्टवेयर kanban बोर्ड का कार्यान्वयन जो हमारे हिटलैब से सभी कार्यों को एकत्रित करेगा।

बेशक, आत्मा भौतिक बोर्ड की ट्यूब के खिलाफ रखती है। मैं भी एक यांत्रिक हाथ नियंत्रक के रूप में DualShock 4 का उपयोग करने के बारे में सोचना शुरू कर दिया था, लेकिन मैं खुद अगली सुबह की समय सीमा निर्धारित करता हूं, इसलिए मुझे एक सौलस सॉफ्टवेयर समाधान के साथ मिलना था।

कहानी के तकनीकी भाग का वर्णन करने के लिए शुरू करने से पहले, मैं आपको बताता हूं कि हम कैसे Onlanta में gitlab का उपयोग करते हैं। हिटलैब में समूह हमारे पास आंतरिक / बाहरी ग्राहक या एक अलग बड़ी परियोजना के अनुरूप हैं, और परियोजना एक विशेष सेवा के कोड के लिए एक भंडार है। उदाहरण के लिए, हमारे पास एक बिलिंग कंट्रोल पैनल का एक समूह है जिसमें चार परियोजनाएँ सेवाएँ और वेब अनुप्रयोग हैं, और एक विपणन समूह है जिसमें एक कॉर्पोरेट साइट के लिए एक परियोजना है, amoCRM के साथ एकीकरण के लिए एक microservice, सभी प्रकार के लैंडिंग पृष्ठ और इतने पर। वर्तमान में हमारे नौ सक्रिय समूह हैं, और कम प्रोग्रामर हैं, इसलिए सभी प्रोग्रामर सभी समूहों में भाग लेते हैं।

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

हमें आवश्यकता होगी:

- Node.js पर बैकएंड - गिटलैब के साथ कार्यों को इकट्ठा करने और उन्हें क्लाइंट को स्थानांतरित करने के लिए;
- Vue.js पर क्लाइंट - इसे जल्दी और खूबसूरती से करने के लिए;
- टाइपस्क्रिप्ट के साथ यह सब मौसम, बिल्कुल!
- PostgreSQL - जहां हम बोर्ड पर कार्यों और उनकी स्थिति के बारे में जानकारी संग्रहीत करेंगे;
- काम के समय के 8 घंटे;
- अच्छा मूड।

सबसे महत्वपूर्ण शर्त यह है कि विकास आसान और मजेदार होना चाहिए, चलो इसे "आसान प्रोग्रामिंग" कहें।

चिड़ियाघर

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

karcass

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

अब हमें समूहों, परियोजनाओं, कार्यों और निश्चित रूप से, कलाकारों की प्राप्ति और भंडारण से निपटने की आवश्यकता है।

TypeORM

"मैं कुछ संस्थाएँ देख रहा हूँ ..."
^{- मनोविज्ञान मंच पर चर्चा से}

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

दसियों मिनटों में, उपयोगकर्ताओं , समूहों , परियोजनाओं और कार्यों के लिए माइग्रेशन और कक्षाएं दिखाई देती हैं। यहाँ उनमें से एक है:

import { Entity, PrimaryColumn, Column } from 'typeorm' @Entity({ name: 'group' }) export class Group { @PrimaryColumn('integer') public id!: number @Column('varchar') public name!: string @Column('varchar') public url!: string }

और माइग्रेशन बनाने के लिए, मैंने फिर से एक CreateMigrationCommand सहायक बाइक बनाई। यह कमांड उपयोग करने के लिए बहुत सरल है:

अंक वर्ग में, गीतालाब से डेटा संग्रहीत करने वाले क्षेत्रों के अलावा, हम उन क्षेत्रों को जोड़ते हैं जिनके कारण संपूर्ण उपद्रव शुरू हुआ, यानी कि कानन बोर्ड पर कार्य की स्थिति का संकेत:

 export class Issue extends AbstractEntity { /* ... */ @Column('varchar', { name: 'kanban_status' }) public kanbanStatus?: 'new'|'planed'|'working'|'checking'|'done' @Column('int', { name: 'kanban_order' }) public kanbanOrder?: number }

हमें जानकारी चाहिए

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

 export class GroupService extends AbstractService { /* ... */ public async updateGroups() { for (const data of await this.app.gitlabService.getGroups()) { // <=     GitlabService let group = await this.getGroup(data.id) if (!group) { group = this.groupRepository.create({ id: data.id, }) } group.name = data.name group.url = data.web_url await this.groupRepository.save(group) } } /* ... */ }

अपडेटप्रोजेक्टसोमैंड कमांड जितालाब से जानकारी प्राप्त करने और हमारे डेटाबेस में प्रासंगिक जानकारी को अपडेट करने के संचालन के लिए जिम्मेदार होगा, जिसे कंसोल से कॉल किया जा सकता है, लेकिन हमारा एप्लिकेशन इसे स्वयं ही कॉन्फ़िगरेशन में निर्दिष्ट आवृत्ति के साथ लॉन्च करेगा:

 export class Application { /* ... */ protected initCron() { if (this.config.gitlab.updateInterval) { setInterval(async () => { if (!this.updateProjectsCommand) { this.updateProjectsCommand = new UpdateProjectsCommand(this) } await this.updateProjectsCommand.execute() }, this.config.gitlab.updateInterval * 1000) } } /* ... */ }

हम बोर्ड पर कॉलमों की संख्या, रंग और नाम को हार्डकोड नहीं करेंगे, लेकिन उन्हें config.js में अनुकूलन योग्य बनाएंगे। हमारे पास उनमें से पांच हैं, लेकिन किसी के लिए, शायद केवल दो की जरूरत है और एसिड का रंग:

 columns: [ { key: 'new', title: '', color: 'rgb(255, 255, 219)' }, { key: 'planed', title: '', color: 'rgb(236, 236, 191)' }, { key: 'working', title: ' ', color: 'rgb(253, 214, 162)' }, { key: 'checking', title: ' ', color: 'rgb(162, 226, 253)' }, { key: 'done', title: '', color: 'rgb(162, 253, 200)' }, ],

मुख्य बात यह है कि कम से कम दो होना चाहिए, अन्यथा आवेदन शुरू नहीं होगा।

मोर्चे के साथ बातचीत करने के लिए, हमें एक विधि की जरूरत है जो डेटाबेस से कार्य प्राप्त करे और उन्हें "कॉलम" में छाँटे:

जारी करें

 export class IssueService extends AbstractService { /* ... */ public async getKanban() { let issues = await this.issueRepository.find({ where: { updatedTimestamp: MoreThanOrEqual(new Date().getTimestamp() - 60 * 60 * 24 * 30) }, order: { kanbanOrder: 'ASC', updatedTimestamp: 'DESC' }, }) const keys = this.app.config.columns.map(c => c.key) const result: { [key: string]: Issue[] } = {} for (let ki = keys.length - 1; ki >= 0; ki--) { const key = keys[ki] if (ki === keys.length - 1) { //        result[key] = issues.filter(i => i.closed) } else if (ki === 0) { // ,  ,    ,    result[key] = issues } else { result[key] = issues.filter(i => i.kanbanStatus === key) } issues = issues.filter(i => !result[key].includes(i)) //     } return result } /* ... */ }

और एक नियंत्रक जो नए कार्य पदों को बचाता है:

इश्यूकंट्रोलर को दिखाएं

 export default class IssueController extends AbstractController { /* ... */ public async kanbanUpdate(data: IQueryData) { const keys = this.app.config.columns.map(c => c.key) for (const c of data.params as { key: string, title: string, color: string, issues: number[] }[]) { if (keys.indexOf(c.key) < 0) { continue } let index = 0 for (const i of c.issues) { index++ const issue = await this.app.issueService.getIssue(i) if (!issue) { continue } issue.kanbanStatus = c.key issue.kanbanOrder = index this.app.issueService.issueRepository.save(issue) } } } }

Shtosh। हम GitLab से जानकारी एकत्र करते हैं, बोर्ड प्रदर्शित करने के लिए डेटा तैयार करते हैं, यहां तक कि यह भी जानते हैं कि बोर्ड पर कार्यों के अपडेट किए गए पदों को कैसे बचाया जाए। केवल एक चीज बची है वह है बोर्ड को खुद बनाना। और यहाँ हम एक शक्तिशाली उपकरण से लैस हैं:

Vue CLI - एक हजार शब्दों के बजाय

TSX

रिफैक्टिंग की सुविधा के लिए, बग्स, लाइनिंग और मन की अन्य शांति को खोजने के लिए, हम tsx टेम्प्लेट का उपयोग करते हैं जो Vue.js बॉक्स से बाहर का समर्थन करता है ^{* लगभग} । उदाहरण के लिए, हमारे बोर्ड में सबसे महत्वपूर्ण घटक, कार्य प्रस्तुति का घटक:

कोड जारी करें .tsx

 import { Vue, Component, Prop, Watch } from 'vue-property-decorator' import './Issue.css' import { CreateElement, VNode } from 'vue' interface IIssue { groupId: number groupName: string groupUrl: string projectName: string projectUrl: string url: string title: string executor: { color: string, name: string } spent: number estimate: number } @Component export default class extends Vue { @Prop() public issue!: IIssue public issueValue!: IIssue public selectUser = false @Watch('issue', { immediate: true }) public onIssueChange() { this.issueValue = this.issue } // eslint-disable-next-line @typescript-eslint/no-unused-vars public render(h: CreateElement): VNode { return <div class="kvcIssue"> <div class="kvciTitle"> { this.issueValue.groupId ? <small><a href={ this.issueValue.groupUrl } target="_blank"> { this.issueValue.groupName } </a> / </small> : undefined } <a href={ this.issueValue.projectUrl } target="_blank">{ this.issueValue.projectName }</a> </div> <div class="kvciText"><a href={ this.issueValue.url } target="_blank">{ this.issueValue.title }</a></div> <div class={ ['kvciExecutor', this.issueValue.executor ? '' : 'none'] }> <span class="timeTd"> <span title=" ">{ this.issueValue.spent.time() }</span> / <span title=" "> { this.issueValue.estimate.time() }</span> </span> { this.issueValue.executor ? <span class="kvcieUser" style={ { background: this.issueValue.executor.color } }> { this.issueValue.executor.name } </span> : <span class="kvcieSelect"> </span> } </div> </div> } }

यह घटक कार्य पट्टी प्रदर्शित करता है। ध्यान दें कि कार्य ने वास्तव में समय और योजना बनाई है:

इसमें Column.tsx और Kanban.tsx घटक भी हैं। केवल तीन घटक बोर्ड पर कार्यों की प्रस्तुति प्रदान करते हैं:

Vue.Draggable , जिसके पैर SortableJS से बढ़ते हैं, बोर्ड पर चलने वाले कार्यों के लिए जिम्मेदार है। यह उपयोग करने के लिए अत्यंत सरल है:

 import Draggable from 'vuedraggable' /* ... */ export default class extends Vue { /* ... */ public render(h: CreateElement): VNode { /* ... */ <Draggable class="kvcIssues" vModel={ this.issuesValue } group={ { name: 'issues', pull: true, put: true } } onEnd={ this.onDrag } onAdd={ this.onDrag } > { this.issuesValue.map(i => <Issue key={ i.id } issue={ i } />) } </Draggable> /* ... */ } }

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

मुझे अपना उपयोगकर्ता नाम दें और मैं आपको बताऊंगा कि आपके पास कौन सा रंग है

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

 export class User extends AbstractEntity { /* ... */ public get color() { const hash = crypto.createHash('md5').update(this.username).digest() //  md5       .     -   . const result: number[] = [] for (let i = 0; i < 3; i++) { result.push(Math.round(200 - hash[i] / 255 * 150)) //      ,     ,       } return `rgb(${result.join(', ')})` } }

जो लोग जानना चाहते हैं कि उनके लिए क्या रंग है, मैं कोडपेन पर स्निपेट को काटने के लिए बहुत आलसी नहीं था।

वह सब

निम्नलिखित संवाद के साथ मंगलवार से काम करना शुरू किया गया:

आर: ठीक है, बोर्ड कैसे तैयार है? ..
मैं: हाँ, यहाँ।
R: ओह, अच्छा!

मेरे "कार्यदिवस" का परिणाम यहाँ है: https://github.com/onlanta/kanban । आप इसे न केवल देख सकते हैं, इसे छू सकते हैं, बल्कि इसका उपयोग भी कर सकते हैं (वहां निर्देश)। और आप इस पर हिटलैब के लिए एक पूरे समय का ट्रैकर बना सकते हैं, जो हमने कंपनी में किया था।

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

खैर, हम बिना रिक्तियों के कहां हैं।

आसान प्रोग्रामिंग: एक कार्य दिवस में गिटलैब के लिए कानबन बोर्ड