Organizujemy efektywny przepływ pracy dla twórców stron internetowych: Confluence, Airtable i inne narzędzia

Organizujemy efektywny przepływ pracy dla twórców stron internetowych: Confluence, Airtable i inne narzędzia

Od około dwóch lat pracuję jako front-end developer i brałem udział w tworzeniu szerokiej gamy projektów. Jedną z lekcji, jaką wyciągnąłem, jest to, że współpraca pomiędzy różnymi zespołami programistów, którzy mają ten sam cel, ale mają różne zadania i obowiązki, nie jest łatwa.

W porozumieniu z pozostałymi członkami zespołu, projektantami i programistami stworzyłem cykl tworzenia stron internetowych przeznaczony dla małych zespołów (5-15 osób). Zawiera narzędzia takie jak Confluence, Jira, Airtable i Abstract. W tym artykule podzielę się funkcjami organizacji przepływu pracy.

Skillbox poleca: Dwuletni kurs praktyczny „Jestem PRO Web Developerem”.

Przypomnienie: dla wszystkich czytelników „Habr” - rabat w wysokości 10 000 rubli przy zapisywaniu się na dowolny kurs Skillbox przy użyciu kodu promocyjnego „Habr”.

Dlaczego to wszystko jest potrzebne?

Minimalny zespół potrzebny do stworzenia strony internetowej od podstaw to projektant, programista i kierownik projektu. W moim przypadku zespół powstał. Ale po wydaniu kilku witryn odniosłem wrażenie, że coś jest z nimi nie tak. Czasami po prostu nie do końca rozumieliśmy swoje obowiązki, a komunikacja z klientem pozostawiała wiele do życzenia. Wszystko to spowolniło proces i zaniepokoiło wszystkich.

Zacząłem pracować nad rozwiązaniem problemu.

Organizujemy efektywny przepływ pracy dla twórców stron internetowych: Confluence, Airtable i inne narzędzia
Wyszukiwarka Google daje dobre wyniki dotyczące naszego problemu.

Aby praca była bardziej wizualna, stworzyłem diagram przepływu pracy, który pozwala zrozumieć, jak praca jest tutaj wykonywana.

Organizujemy efektywny przepływ pracy dla twórców stron internetowych: Confluence, Airtable i inne narzędzia
Kliknij na obrazek, aby otworzyć w pełnej rozdzielczości.

Cele i zadania

Jedną z pierwszych technik, którą zdecydowałem się przetestować, był „model kaskadowy” (Waterfall). Użyłem go, aby podkreślić problemy i zrozumieć, jak je rozwiązać.

Organizujemy efektywny przepływ pracy dla twórców stron internetowych: Confluence, Airtable i inne narzędzia

Problem: Najczęściej klient nie ocenia procesu tworzenia serwisu modułowo, jak to robią deweloperzy. Postrzega ją jak zwykłą witrynę internetową, czyli myśli kategoriami poszczególnych stron. Jego zdaniem projektanci i programiści tworzą pojedyncze strony, jedna po drugiej. W rezultacie klient po prostu nie rozumie, co następuje w trakcie faktycznego procesu.

Zadanie: Nie ma sensu przekonywać Klienta, że ​​jest inaczej, najlepszą opcją jest opracowanie modułowego procesu tworzenia strony internetowej w firmie w oparciu o model strona po stronie.

Uniwersalne tokeny i komponenty projektu są zarządzane zarówno przez programistów, jak i projektantów.

Organizujemy efektywny przepływ pracy dla twórców stron internetowych: Confluence, Airtable i inne narzędzia

Problem: Jest to powszechna sytuacja, którą rozwiązuje wiele strategii. Ciekawych rozwiązań jest wiele, w większości przypadków proponuje się stworzenie systemu projektowania kontrolowanego przez przewodnik stylów/generatory bibliotek. Jednak w naszej sytuacji dodanie do procesu rozwoju kolejnego komponentu, który pozwoliłby nam zarządzać poziomami dostępu dla projektantów, było po prostu niemożliwe.

Zadanie: zbudowanie uniwersalnego systemu, w którym projektanci, programiści i menedżerowie będą mogli pracować synchronicznie, nie zakłócając się nawzajem.

Dokładne śledzenie rozwoju

Organizujemy efektywny przepływ pracy dla twórców stron internetowych: Confluence, Airtable i inne narzędzia

Problem: Chociaż dostępnych jest wiele przydatnych narzędzi do śledzenia problemów i pomiaru ogólnego postępu, większość z nich nie jest elastyczna ani optymalna. Narzędzie może być przydatne, oszczędzając czas zespołu, który normalnie spędzałby na pytaniach i wyjaśnieniach dotyczących konkretnych zadań. Ułatwia także życie menadżerom, dając im dokładniejsze zrozumienie całego projektu.

Zadanie: utwórz dashboard, w którym będziesz mógł śledzić postęp zadań wykonywanych przez poszczególnych członków zespołu.

Zestaw narzędzi

Po eksperymentach z różnymi narzędziami zdecydowałem się na następujący zestaw: Confluence, Jira, Airtable i Abstract. Poniżej przedstawię zalety każdego z nich.

Zbieg

Rola narzędzia: centrum informacji i zasobów.

Przestrzeń robocza Confluence jest stosunkowo łatwa w konfiguracji, ma wiele funkcji, integracji z różnymi aplikacjami i posiada indywidualne, konfigurowalne szablony. Nie jest to rozwiązanie uniwersalne, ale idealnie sprawdza się jako centrum informacji i zasobów. Oznacza to, że wszelkie odniesienia lub szczegóły techniczne związane z projektem muszą zostać wprowadzone do bazy danych.

Narzędzie pozwala odpowiednio udokumentować każdy komponent oraz wszelkie inne szczegóły dotyczące projektu.

Organizujemy efektywny przepływ pracy dla twórców stron internetowych: Confluence, Airtable i inne narzędzia

Główną zaletą Confluence jest możliwość personalizacji szablonów dokumentów. Dodatkowo można go wykorzystać do wdrożenia jednego repozytorium specyfikacji i różnorodnej dokumentacji projektowej, rozdzielając poziomy dostępu uczestników. Teraz nie musisz się martwić, że masz pod ręką starą wersję specyfikacji, jak to ma miejsce w przypadku przesyłania dokumentów e-mailem.

Więcej informacji o narzędziu dostępny na oficjalnej stronie produktu.

Jira

Rola narzędzia: monitorowanie problemów i zarządzanie zadaniami.

Organizujemy efektywny przepływ pracy dla twórców stron internetowych: Confluence, Airtable i inne narzędzia

Jira to bardzo potężne narzędzie do planowania i zarządzania projektami. Główną częścią funkcjonalności jest tworzenie konfigurowalnych przepływów pracy. Aby skutecznie zarządzać sprawami (a tego nam potrzeba) warto zwrócić szczególną uwagę na prawidłowe użycie rodzaju żądania i rodzaju sprawy (rodzaj sprawy).

Aby więc mieć pewność, że programiści budują komponenty w oparciu o prawidłowy projekt, należy ich powiadamiać za każdym razem, gdy coś zmieni się w projekcie. Gdy tylko komponent zostanie zaktualizowany, projektant musi otworzyć zgłoszenie, przypisać odpowiedzialnego programistę, przypisując mu odpowiedni typ problemu.

Dzięki Jirze masz pewność, że absolutnie wszyscy uczestnicy procesu (przypomnę, że w naszym przypadku jest ich 5–15) otrzymają poprawne zadania, które nie gubią się i nie znajdują swojego wykonawcy.

Dowiedz się więcej o Jirze dostępny na oficjalnej stronie produktu.

Zgodny z prawem

Rola narzędzia: zarządzanie komponentami i tablica postępu.

Airtable to połączenie arkuszy kalkulacyjnych i baz danych. Wszystko to sprawia, że ​​istnieje możliwość dostosowania działania wszystkich omówionych powyżej narzędzi.

Przykład 1: Zarządzanie komponentami

Jeśli chodzi o generator przewodników po stylach, nie zawsze jest on wygodny w użyciu - problem w tym, że projektanci nie mogą go edytować. Ponadto korzystanie z biblioteki komponentów Sketch nie byłoby dobrą decyzją, ponieważ ma ona wiele ograniczeń. Najprawdopodobniej po prostu nie będziesz mógł korzystać z tej biblioteki poza programem.

Airtable też nie jest idealny, ale jest lepszy od wielu innych podobnych rozwiązań. Oto demonstracja szablonu tabeli zarządzania komponentami:

Organizujemy efektywny przepływ pracy dla twórców stron internetowych: Confluence, Airtable i inne narzędzia

Kiedy programista akceptuje komponent projektu, ocenia powstały ABEM, zapisując komponent w tabeli. W sumie jest 9 kolumn:

  • Nazwa - nazwa komponentu zgodnie z zasadą ABEM.
  • Podgląd — tutaj umieszczany jest zrzut ekranu lub obraz komponentu pobranego z innego źródła.
  • Połączona strona to łącze do strony komponentu.
  • Komponent potomny — łącze do komponentów potomnych.
  • Modyfikator - sprawdza obecność opcji stylu i definiuje je (na przykład aktywny, czerwony itp.).
  • Kategoria komponentów to kategoria ogólna (tekst, obraz promocyjny, pasek boczny).
  • Stan opracowania - faktyczny postęp prac rozwojowych i jego definicja (zakończony, w trakcie itp.).
  • Odpowiedzialny - programista odpowiedzialny za ten komponent.
  • Poziom atomowy to kategoria atomowa tego składnika (zgodnie z koncepcją projektu atomowego).
  • Do danych można odwoływać się w tej samej lub w różnych tabelach. Połączenie kropek zapobiegnie pomyłkom podczas skalowania. Ponadto dane można bez problemu filtrować, sortować i zmieniać.

Przykład 2: postęp w tworzeniu strony

Aby ocenić postęp w rozwoju strony, potrzebujesz szablonu stworzonego specjalnie w tym celu. Stół może służyć zarówno potrzebom samego zespołu, jak i klienta.

Organizujemy efektywny przepływ pracy dla twórców stron internetowych: Confluence, Airtable i inne narzędzia

Można tu zanotować wszelkie informacje na temat strony. To termin ostateczny, łącze do prototypu InVision, miejsce docelowe, komponent potomny. Od razu widać, że operacje są bardzo wygodne w wykonaniu, zarówno jeśli chodzi o dokumentowanie i aktualizację projektu, jak i stan rozwoju front-endu i back-endu. Co więcej, operacje te są wykonywane jednocześnie.

Abstrakcyjny

Rola narzędzia: pojedyncze źródło kontroli wersji zasobów projektowych.

Organizujemy efektywny przepływ pracy dla twórców stron internetowych: Confluence, Airtable i inne narzędzia

Streszczenie można nazwać GitHubem dla zasobów w programie Sketch, co pozwala projektantom uniknąć konieczności kopiowania i wklejania plików. Główną zaletą narzędzia jest to, że zapewnia repozytorium projektów, które działa jako „pojedyncze źródło prawdy”. Projektanci muszą zaktualizować gałąź główną do najnowszej wersji zatwierdzonego układu. Następnie muszą powiadomić programistów. Te z kolei powinny współpracować wyłącznie z zasobami projektantów z głównej branży.

Jako podsumowanie

Po wdrożeniu nowego procesu deweloperskiego i wszystkich wyżej wymienionych narzędzi, tempo naszej pracy wzrosło co najmniej dwukrotnie. Nie jest to rozwiązanie idealne, ale bardzo dobre. To prawda, aby to zadziałało, trzeba włożyć dużo wysiłku - aktualizacja i utrzymanie wszystkiego w dobrym stanie wymaga „pracy ręcznej”.

Skillbox poleca:

Źródło: www.habr.com

Dodaj komentarz