Radim kao front-end developer oko dvije godine i sudjelovao sam u izradi raznih projekata. Jedna od lekcija koje sam naučio jest da suradnja između različitih timova programera koji dijele isti cilj, ali imaju različite zadatke i odgovornosti nije laka.
U dogovoru s drugim članovima tima, dizajnerima i programerima, izradio sam ciklus izrade web stranica namijenjen malim timovima (5-15 ljudi). Uključuje alate kao što su Confluence, Jira, Airtable i Abstract. U ovom ću članku podijeliti značajke organiziranja tijeka rada.
Skillbox preporučuje: Dvogodišnji praktični tečaj .
Podsjećamo: za sve čitatelje "Habra" - popust od 10 000 rubalja pri upisu na bilo koji tečaj Skillbox koristeći promotivni kod "Habr".
Zašto je sve ovo potrebno?
Minimalni tim potreban za izradu web stranice od nule je dizajner, programer i voditelj projekta. U mom slučaju tim je formiran. Ali nakon objavljivanja nekoliko stranica, dobio sam osjećaj da nešto nije u redu s tim. Ponekad jednostavno nismo u potpunosti razumjeli svoje odgovornosti, a komunikacija s klijentom je bila daleko od željenog. Sve je to usporavalo proces i smetalo svima.
Počeo sam raditi na rješavanju problema.
Google pretraga daje dobre rezultate za naš problem.
Kako bih obavljeni posao učinio vizualnijim, napravio sam dijagram tijeka rada koji daje razumijevanje kako se ovdje radi.
Kliknite na sliku za otvaranje u punoj rezoluciji.
Ciljevi i ciljevi
Jedna od prvih tehnika koju sam odlučio isprobati bio je “kaskadni model” (vodopad). Koristio sam ga da bih istaknuo probleme i razumio kako ih riješiti.
Problem: Klijent najčešće ne ocjenjuje proces izrade web stranice modularno, kao što to rade programeri. On ga doživljava kao običnu stranicu, odnosno razmišlja o pojedinačnim stranicama. Prema njegovom mišljenju, dizajneri i programeri stvaraju pojedinačne stranice, jednu za drugom. Kao rezultat toga, kupac jednostavno ne razumije što nakon čega slijedi tijekom stvarnog procesa.
Zadatak: Nema smisla klijenta uvjeravati u suprotno, najbolja opcija je razviti modularni proces izrade web stranice unutar tvrtke po modelu stranica po stranica.
Tokenima i komponentama univerzalnog dizajna upravljaju i programeri i dizajneri.
Problem: Ovo je uobičajena situacija kojom se bave mnoge strategije. Postoji mnogo zanimljivih rješenja, u većini slučajeva predlaže se stvaranje sustava dizajna koji je kontroliran vodičem za stil / generatorima knjižnice. Ali u našoj situaciji dodavanje još jedne komponente razvojnom procesu koja bi nam omogućila upravljanje razinama pristupa za dizajnere jednostavno nije bilo moguće.
Zadatak: izgradnja univerzalnog sustava u kojem dizajneri, programeri i menadžeri mogu raditi sinkronizirano bez ometanja jedni drugih.
Precizno praćenje razvoja
Problem: Iako postoje mnogi korisni alati dostupni za praćenje problema i mjerenje ukupnog napretka, većina njih nije fleksibilna niti optimalna. Alat može biti koristan jer timu štedi vrijeme koje bi inače potrošili na pitanja i pojašnjenja specifičnih zadataka. Također olakšava život menadžerima dajući im točnije razumijevanje cijelog projekta.
Zadatak: izradite nadzornu ploču za praćenje napretka zadataka koje obavljaju različiti članovi tima.
Set alata
Nakon eksperimentiranja s različitim alatima, odlučio sam se za sljedeći skup: Confluence, Jira, Airtable i Abstract. U nastavku ću otkriti prednosti svakog od njih.
ušće
Uloga alata: središte informacija i resursa.
Confluenceov radni prostor je relativno jednostavan za postavljanje, ima puno značajki, integracija s različitim aplikacijama i ima individualne, prilagodljive predloške. To nije univerzalno rješenje, ali je idealno kao središte informacija i resursa. To znači da se sve reference ili tehnički detalji vezani uz projekt moraju unijeti u bazu podataka.
Alat vam omogućuje pravilno dokumentiranje svake komponente i svih ostalih detalja o projektu.
Glavna prednost Confluencea je prilagodba predložaka dokumenata. Osim toga, može se koristiti za implementaciju jedinstvenog repozitorija specifikacija i različite projektne dokumentacije, odvajajući razine pristupa sudionika. Sada se ne morate brinuti da imate pri ruci staru verziju specifikacije, kao što se događa kada dokumente šaljete e-poštom.
Više informacija o alatu .
Jira
Uloga alata: praćenje problema i upravljanje zadacima.
Jira je vrlo moćan alat za planiranje i upravljanje projektima. Glavni dio funkcionalnosti je stvaranje prilagodljivih radnih procesa. Kako bismo učinkovito upravljali problemima (a to je ono što nam je potrebno), vrijedi obratiti posebnu pozornost na pravilnu upotrebu tipa zahtjeva i tipa problema (tip problema).
Dakle, kako bi bili sigurni da programeri grade komponente na temelju ispravnog dizajna, moraju biti obaviješteni svaki put kada se nešto promijeni u dizajnu. Čim se komponenta ažurira, dizajner treba otvoriti problem, dodijeliti odgovornog programera, dodijeliti mu ispravnu vrstu problema.
S Jirom možete biti sigurni da apsolutno svi sudionici u procesu (dopustite mi da vas podsjetim, u našem slučaju ih je 5-15) dobivaju točne zadatke koji se ne gube i pronalaze svog izvršitelja.
Saznajte više o Jiri .
Airtable
Uloga alata: upravljanje komponentama i tabla napretka.
Airtable je mješavina proračunskih tablica i baza podataka. Sve to omogućuje prilagodbu rada svih gore spomenutih alata.
Primjer 1: Upravljanje komponentama
Što se tiče generatora stilskih vodiča, nije uvijek prikladan za korištenje - problem je što ga dizajneri ne mogu uređivati. Osim toga, ne bi bila dobra odluka koristiti biblioteku komponenti Sketch, jer ima mnogo ograničenja. Najvjerojatnije jednostavno nećete moći koristiti ovu biblioteku izvan programa.
Airtable također nije savršen, ali je bolji od mnogih sličnih rješenja. Evo demonstracije predloška tablice upravljanja komponentama:
Kada programer prihvati komponentu dizajna, on procjenjuje rezultirajući ABEM bilježeći komponentu u tablicu. Ukupno ima 9 stupaca:
- Naziv - naziv komponente prema ABEM principu.
- Pregled - Ovdje se postavlja snimka zaslona ili slika komponente preuzete iz drugog izvora.
- Povezana stranica je poveznica na stranicu komponente.
- Dijete komponenta - poveznica na dijete komponente.
- Modifikator - provjerava prisutnost stilskih opcija i definira ih (na primjer, aktivno, crveno itd.).
- Kategorija komponente je opća kategorija (tekst, promotivna slika, bočna traka).
- Status razvoja - stvarni napredak razvoja i njegova definicija (završeno, u tijeku itd.).
- Responsible - programer koji je odgovoran za ovu komponentu.
- Atomska razina je atomska kategorija ove komponente (prema konceptu atomskog dizajna).
- Podaci se mogu pozivati na iste ili različite tablice. Povezivanje točaka spriječit će zabunu prilikom skaliranja. Osim toga, podatke je moguće bez problema filtrirati, sortirati i mijenjati.
Primjer 2: napredak u razvoju stranice
Za procjenu napretka razvoja stranice potreban vam je predložak koji je izrađen posebno za tu svrhu. Stol može poslužiti kako za potrebe samog tima tako i za potrebe naručitelja.
Sve informacije o stranici možete zabilježiti ovdje. Ovo je rok, veza na prototip InVision, odredište, podređena komponenta. Odmah postaje vidljivo da su operacije vrlo prikladne za izvođenje, kako u pogledu dokumentiranja i ažuriranja dizajna, tako i statusa front-end i back-end razvoja. Štoviše, te se operacije izvode istovremeno.
Sažetak
Uloga alata: jedan izvor kontrole verzija za sredstva dizajna.
Sažetak se može nazvati GitHub za sredstva u Sketchu i štedi dizajnere kopiranja i lijepljenja datoteka. Glavna prednost alata je u tome što pruža repozitorij dizajna koji djeluje kao "jedinstveni izvor istine". Dizajneri moraju ažurirati glavnu granu na najnoviju verziju odobrenog izgleda. Nakon toga moraju obavijestiti programere. Oni bi pak trebali raditi samo s dizajnerskim sredstvima iz glavne grane.
Kao zaključak
Nakon što smo implementirali novi razvojni proces i sve gore navedene alate, brzina našeg rada se povećala barem dvostruko. Nije savršeno rješenje, ali je vrlo dobro. Istina, da bi radio, potrebno je uložiti puno truda - potreban je "ručni rad" da se sve to ažurira i održava u radnom stanju.
Skillbox preporučuje:
- Praktični tečaj .
- Mrežni tečaj .
- Praktični godišnji tečaj .
Izvor: www.habr.com