Μια καλύτερη ροή εργασίας στο web development: Confluence, Airtable, Jira και Abstract

Συγκρότημα, Jira, Airtable και Abstract

中文 版 連結 (κινεζική έκδοση) / Αρχικά δημοσιεύτηκε στο vinceshao.com

Δουλεύοντας ως πρωτοπόρος προγραμματιστής για σχεδόν δύο χρόνια, έχω χρήσιμη εμπειρία από το να συμμετέχω σε πολλά προγράμματα ανάπτυξης ιστοσελίδων σχεδιαστικών / ψηφιακών οργανισμών.

Ένα προφανές αλλά πολύτιμο μάθημα που έχω μάθει είναι ότι η συνεργασία ανάμεσα σε κάθε ομάδα με ένα στόχο αλλά ξεχωριστές ευθύνες και σκοπούς δεν είναι εύκολη. Υπάρχουν διαφορετικές πτυχές και επίπεδα δυσκολιών όσον αφορά τη συνεργασία και το συγκεκριμένο μέρος του οποίου θα ήθελα να ασχοληθώ εδώ είναι η διαδικασία ροής εργασίας.

Με βάση την εμπειρία μου και με τη βοήθεια των φίλων σχεδιαστών και προγραμματιστών μου, έχτισα μια ροή εργασίας για την ανάπτυξη ιστοσελίδων που σχεδιάστηκε για μικρές ομάδες (5-15 άτομα). Το σύστημα αποτελείται από Confluence, Jira, Airtable και Abstract. Σε αυτό το άρθρο, θα μοιραστώ το γιατί και πώς αυτή η ροή εργασίας.

Κίνητρα για την οικοδόμηση μιας νέας ροής εργασίας

Για την παράδοση ενός προσαρμοσμένου ιστότοπου χωρίς τη χρήση προτύπων που παρέχονται από κατασκευαστές ιστότοπων, οι ελάχιστες απαιτήσεις ταλέντου περιλαμβάνουν έναν σχεδιαστή, έναν προγραμματιστή και έναν διαχειριστή έργου. Αφού συμμετείχα σε μερικές περιπτώσεις, είχα την αίσθηση ότι κάτι δεν συνέβη με τη ροή εργασίας που είχαμε: οι σημαντικές πληροφορίες δεν ήταν πάντα ευθυγραμμισμένες τόσο εσωτερικά μεταξύ διαφορετικών ρόλων όσο και εξωτερικά προς τον πελάτη. Αυτή η αναποτελεσματική επικοινωνία σαφώς επιβραδύνει τον αναπτυξιακό κύκλο και πλήττει την ομάδα.

Έτσι άρχισα να λύνω αυτό το πρόβλημα.

Η ροή εργασιών της Google σε μεγάλους πόρους αναζήτησης: Σχεδιαστικές λειτουργίες συστημάτων, πόροι οδηγών στυλ και ορισμός ροής εργασίας

Έχω αναζητήσει πόρους Google σχετικά με τη δημιουργία και τη βελτίωση μιας ροής εργασίας. Αν και έμαθα πολλά από όλους τους μεγάλους πόρους, δεν βρήκα σχεδόν τίποτα από τα οποία ήταν για τα έργα ανάπτυξης ιστοσελίδων σε ένα design / digital agency. Ήταν είτε ένα σύστημα σχεδιασμού είτε κατευθυντήριες γραμμές κωδικοποίησης που περιλάμβαναν ρόλους σχεδιασμού ή front-end ή μια ροή εργασίας που χτίστηκε για μια ομάδα με δικό της προϊόν.

Ως αποτέλεσμα, αποφάσισα να επιλέξω τα μέρη που χρειάστηκα για να λύσω τα προβλήματά μας και να διαμορφώσω μια προσαρμοσμένη ροή εργασίας για την ανάπτυξη ιστοτόπων.

Προβλήματα και στόχοι

Ακολουθούν τα προβλήματα που επιθεώρησα από την υπάρχουσα ροή εργασίας μας και τους αντίστοιχους στόχους βελτίωσης:

1. Μεθοδολογία καταρράκτη

μοντέλο καταρράκτη αφηρημένη επίδειξη

Πρόβλημα: Με βάση την εμπειρία μου, τα έργα ιστότοπων υιοθετούν μια προσέγγιση με καταρράκτες, επειδή οι πελάτες δεν έχουν μια έννοια ελάχιστου βιώσιμου προϊόντος (MVP). Αντί να διαχωρίζουν τις λειτουργικότητες από τις απόψεις και την προσαρμογή, οι πελάτες τείνουν να σκέφτονται για τον ιστότοπο με έναν παραδοσιακό τρόπο ανά σελίδα, ο οποίος αναγκάζει τόσο τους σχεδιαστές όσο και τους προγραμματιστές να δουλεύουν ανά σελίδα στη σελίδα. Αυτό τους αναγκάζει να χάσουν μια καθολική προοπτική σε ολόκληρο το έργο. Αυτή η κατάσταση έχει ως αποτέλεσμα πολλές υπερβολικές αναθεωρήσεις μεταξύ σελίδων.

Στόχος: Η αλλαγή της νοοτροπίας των πελατών είναι τόσο αλαζονική όσο και μη ρεαλιστική. Ο στόχος είναι να βρεθεί ένας τρόπος για να διαχωριστούν οι απαιτήσεις από τις προβολές το συντομότερο δυνατό και να αναπτυχθούν όσο το δυνατόν πιο τροποποιημένοι όσο το δυνατόν περισσότερο εσωτερικά με βάση το μοντέλο ανά σελίδα.

2. Ζεύγη και εξαρτήματα γενικού σχεδιασμού τα οποία διαχειρίζονται τόσο οι σχεδιαστές όσο και οι προγραμματιστές

σχεδιαστικά μάρκες από το Salesforce

Πρόβλημα: Αυτό είναι ένα κοινό ζήτημα στο οποίο πολλά άρθρα έχουν μοιραστεί μεγάλες λύσεις, οι οποίες προτείνουν ως επί το πλείστον την οικοδόμηση ενός συστήματος σχεδιασμού το οποίο διαχειρίζεται οι οδηγοί στυλ / γεννήτριες βιβλιοθήκης. Παρόλο που είναι εξαιρετική λύση, η διαχείριση μιας επιπλέον τοποθεσίας που μόλις παρείχε άδεια επεξεργασίας στους σχεδιαστές δεν ήταν κατάλληλη για την περίπτωσή μας.

Στόχος: Εκτός από τη δημιουργία παγκόσμιων σχεδίων και γλωσσών σχεδίασης, οι σχεδιαστές, οι προγραμματιστές και οι διαχειριστές μπορούν όλοι να κατανοήσουν, να δημιουργήσουν ένα σύστημα που να επιτρέπει σε όλους να διαχειρίζονται τα περιουσιακά στοιχεία με σύγχρονο τρόπο.

3. Ακριβής, ενημερωμένος πίνακας ελέγχου προόδου

χρειαζόμαστε έναν επεξεργάσιμο και προσβάσιμο πίνακα ελέγχου προόδου

Πρόβλημα: Αν και οι ιχνηλάτες θέματος, το kanban και άλλα μοντέλα διαχείρισης έργων είναι χρήσιμα και πρακτικά, οι περισσότεροι δεν κατάφεραν να λειτουργήσουν ως απλός, ευέλικτος και φιλικός πίνακας ελέγχου προόδου. Αυτού του είδους ο πίνακας ελέγχου θα σώσει την ομάδα πολύ χρόνο, επειδή θα εμπόδιζε τα μέλη της ομάδας να αναφέρουν ενεργά ή να ρωτούν για την τρέχουσα κατάσταση συγκεκριμένων εργασιών. Επίσης, διευκολύνει τη ζωή των διαχειριστών εάν έχουν σαφή γνώση του συνόλου του έργου χωρίς πολύ μεγάλη προσπάθεια.

Στόχος: Δημιουργήστε ένα σύστημα πίνακα ελέγχου που παρέχει δικαιώματα επεξεργασίας για άτομα που είναι επιφορτισμένα με συγκεκριμένες εργασίες.

Διάγραμμα ροής εργασιών

Πριν βυθίσουμε τη λεπτομερή εισαγωγή των εργαλείων διαχείρισης, συγκεντρώνουμε μια αφηρημένη απλοποιημένη ροή εργασίας που οργανώσαμε. Είναι λίγο απλά μια απεικόνιση μιας κανονικής ροής εργασίας που έχουν οι περισσότεροι οργανισμοί, αλλά υπάρχουν δύο σημεία που πρέπει να σημειωθούν εδώ.

διάγραμμα ροής εργασίας που σχεδίασα

1. Αξιολόγηση προγραμματιστών

Πρώτον, όταν οι απαιτήσεις ή τα θέματα που προέρχονται από τον πελάτη εγκρίνονται και τεκμηριώνονται από τον διαχειριστή, με εξαίρεση την αποστολή του έργου σε έναν σχεδιαστή, πηγαίνουν επίσης σε έναν προγραμματιστή για αξιολόγηση. Σε αυτή τη διαδικασία, ο προγραμματιστής ανασκοπεί τις προδιαγραφές της εργασίας, ελέγχοντας αν υπάρχουν κάποιες μάλλον πολύπλοκες λειτουργίες ή χαρακτηριστικά που περιλαμβάνονται. Εάν είναι θετική, ο προγραμματιστής θα μπορούσε να αρχίσει να εργάζεται σε αυτό ή να ειδοποιήσει τον σχεδιαστή σχετικά με τα πιθανά προβλήματα εκ των προτέρων.

2. Μοναδική πηγή αλήθειας

Επίσης, παρατηρήστε ότι μετά την παραλαβή του σχεδίου εγκρίνεται από τον πελάτη και προτού παραδώσει την εργασία στο χέρι του προγραμματιστή, περνάει μια διαδικασία εγγραφής / τροποποίησης / διαγραφής πάνω από το σχεδιαστικό κατάστημα που πραγματοποιεί ο σχεδιαστής. Αυτό οφείλεται στο γεγονός ότι ο κύριος του έργου πρέπει πάντα να είναι εκτεθειμένος σε μία και μοναδική πηγή σχεδίου, η οποία περιέχει συνεχώς διατηρημένα και ενημερωμένα περιουσιακά στοιχεία έτοιμα προς ανάπτυξη.

Τώρα μπορούμε να βουτήξουμε στα εργαλεία διαχείρισης που έχουμε προετοιμάσει και να δούμε πώς τα εργαλεία μας βοηθούν να λύσουμε τα προβλήματά μας.

Τα εργαλεία στοίβα

Μετά από να πειραματιστεί με διάφορες επιλογές στην αγορά, η στοίβα που προτείνω εδώ αποτελείται από Confluence, Jira, Airtable και Abstract. Εκτός από τη βασική εισαγωγή και λίγα παραδείγματα βασικών εφαρμογών, δεν θα καλύψω όλες τις λεπτομέρειες χρήσης των εργαλείων.

ατομικό σχεδιασμό και ABEM

Σημείωση: Το σύστημα υποθέτει ότι η ομάδα ανάπτυξης υιοθετεί τη μεθοδολογία ατομικού σχεδιασμού και το σύστημα ονομασίας ABEM.

1. Συρροή

Ρόλος: κέντρο πληροφοριών και πόρων

Αν και είναι εκφοβιστικό στην αρχή, το Confluence παρέχει ένα ισχυρό χώρο εργασίας που είναι εύκολο να οργανωθεί και έχει πολλούς χαρακτήρες, ενσωμάτωση εφαρμογών και προσαρμοσμένα πρότυπα. Δεν είναι σίγουρα μια καθολική λύση για όλα τα προβλήματα, αλλά είναι ιδανική για την τεκμηρίωση των προδιαγραφών, των απαιτήσεων, των σημειώσεων των συναντήσεων και πολλά άλλα.

Επομένως, το Confluence σε αυτήν τη στοίβα λειτουργεί ως κέντρο πληροφόρησης και πόρων, πράγμα που σημαίνει ότι κάθε σχετικός σύνδεσμος και λεπτομέρεια σχετικά με αυτό το έργο θα πρέπει να τεκμηριωθεί σωστά εδώ.

Το αγαπημένο μου πλεονέκτημα του Confluence είναι η δυνατότητα προσαρμογής των προτύπων εγγράφων. Αυτό το χαρακτηριστικό καθιστά πραγματικά ευκολία στην τυποποίηση της ροής εργασίας.

στάδιο αξιολόγησης προγραμματιστών

Παράδειγμα: Ανασκόπηση λειτουργικότητας συνιστωσών

Ανέφερα την παραπάνω διαδικασία αξιολόγησης των προγραμματιστών, η οποία είναι στην πραγματικότητα περίπλοκη δουλειά. Αυτό οφείλεται στο γεγονός ότι αυτή η διαδικασία περιλαμβάνει βασικές πληροφορίες για το στοιχείο, επισκόπηση FSM του προγραμματιστή (εάν είναι απαραίτητο), χώρο για τις συνήθεις ερωτήσεις και πολλά άλλα. Αλλά η ευελιξία του προτύπου και των εργαλείων Confluence παρέχει εξαιρετική ευκολία. Απλά δημιουργήστε ένα πρότυπο στις ρυθμίσεις διαμόρφωσης και είστε καλοί να πάτε.

προσαρμοσμένο πρότυπο για την αναθεώρηση των στοιχείων στη Συγκρότηση

2. Jira

Ρόλος: Παρακολούθηση προβλημάτων και διαχείριση τύπου ενέργειας

Επίσης, μέλος της οικογένειας Atlassian, η Jira είναι ένα εξαιρετικά ισχυρό λογισμικό παρακολούθησης και προγραμματισμού έργων. Το αγαπημένο μου μέρος για αυτό είναι να κάνετε προσαρμοσμένες ροές εργασιών για θέματα. Δεδομένου ότι υπάρχουν τόνοι σπουδαίων εκπαιδευτικών για το πώς να χρησιμοποιήσετε τη δύναμη της Jira, το μόνο πράγμα που θέλω να επισημάνω εδώ είναι η χρήση του τύπου, όπως αναφέρεται παρακάτω.

σχεδιαστής επεκτάσεων σχεδιασμό κατάστημα

Παράδειγμα: Ενημερώστε τον προγραμματιστή για τις αλλαγές του καταστήματος σχεδιασμού ανά τύπο έκδοσης

Για να διασφαλιστεί ότι οι προγραμματιστές χτίζουν τα στοιχεία βάσει σωστών προβολών σχεδίασης, πρέπει να ενημερώνονται όποτε αναβαθμίζεται κάτι στο κατάστημα σχεδιασμού, το οποίο περιλαμβάνει ενέργειες όπως εγγραφή, τροποποίηση και διαγραφή. Επομένως, καθώς ενημερώνεται ένα στοιχείο, ο σχεδιαστής θα πρέπει να ανοίξει ένα θέμα με τον υπεύθυνο προγραμματιστή και να επιλεγεί ο σωστός τύπος / τύπος ενέργειας.

Τύπος λειτουργίας τύπου Jira

3. Airtable

Ρόλος: διαχείριση στοιχείων και πίνακας ελέγχου προόδου

Το Airtable, ένα μείγμα υπολογιστικού φύλλου και βάσης δεδομένων, είναι το πράγμα που κάνει αυτό το stack work. Υπάρχουν δύο εκπληκτικά χαρακτηριστικά που υποστηρίζουν τη ροή εργασίας μου: τέσσερις τύποι μετάβασης προβολής σε έναν πίνακα και σχετική σύνδεση περιεχομένου. Θα παρουσιάσω δύο παραδείγματα χρήσης αυτών των δύο χαρακτηριστικών εδώ.

ο προγραμματιστής αρχίζει να εργάζεται για την εργασία

Παράδειγμα 1: Διαχείριση στοιχείων

Πώς διαχειρίζεστε τη βιβλιοθήκη στοιχείων; Επιλέξαμε να μην χρησιμοποιήσουμε μια γεννήτρια οδηγών στυλ, επειδή δεν είναι προσπελάσιμη για τους σχεδιαστές να επεξεργαστούν. Η χρήση της βιβλιοθήκης εξαρτημάτων Sketch δεν ήταν κατάλληλη, επειδή έχει πάρα πολλούς περιορισμούς αν προσπαθήσαμε να την χρησιμοποιήσουμε εκτός του πεδίου εφαρμογής του ίδιου του λογισμικού.

Δεν θα έλεγα ότι το Airtable είναι μια τέλεια λύση, αλλά είναι η πιο εύκολη και πιο ευέλικτη λύση που θα μπορούσα να σκεφτώ. Ρίξτε μια ματιά στο πρότυπο επίδειξης του πίνακα διαχείρισης των στοιχείων εδώ:

πίνακα στοιχείων

Μόλις μια νέα καταχώρηση σχεδίασης που είναι έτοιμη να αναπτυχθεί προγραμματικά υποβληθεί στον προγραμματιστή, θα εκτιμήσουν την άποψη που βασίζεται στο σύστημα ABEM και θα την καταχωρήσουν στον πίνακα. Υπάρχουν 9 στήλες στον πίνακα, όπως:

1. Όνομα: ονομασία του στοιχείου στην αρχή ABEM

2. Προεπισκόπηση: στιγμιότυπο οθόνης ή εξαγόμενη εικόνα εξαρτήματος

3. Συνδεδεμένη σελίδα: ο σύνδεσμος προς τη σελίδα περιέχει αυτό το στοιχείο

4. Παιδικό εξάρτημα: σύνδεσμος με παιδικά εξαρτήματα περιέχει αυτό

5. Τροποποιητής: ελέγχει αν υπάρχουν στυλ παραλλαγές (ex: - ενεργό, - κόκκινο)

6. Κατηγορία συστατικού: ταξινόμηση γενικής κατηγορίας (π.χ. κείμενο, ήρωας, πλαϊνή μπάρα)

7. Κατάσταση ανάπτυξης: κατάσταση της εξέλιξης της ανάπτυξης (σε εκκρεμότητα, ανάθεση, εξέλιξη, ολοκλήρωση, αναθεώρηση)

8. Δικαιούχος: υπεύθυνος για την ανάπτυξη αυτού του στοιχείου

9. Ατομικό επίπεδο: ατομική κατηγορία αυτού του συστατικού (άτομο, μόριο, οργανισμός)

Το καλύτερο πράγμα είναι ότι μπορείτε να αναφέρετε δεδομένα τόσο στον ίδιο όσο και σε άλλους πίνακες. Αυτή η σύνδεση των κουκίδων εμποδίζει τα πράγματα από το να γίνονται πιο ασταθή καθώς μεγαλώνει η κλίμακα. Επίσης, παρατηρήστε ότι μπορείτε να φιλτράρετε, να ταξινομήσετε και να αλλάξετε εύκολα τις προβολές.

Παράδειγμα 2: Κατάσταση εξέλιξης σελίδας

Δεδομένου ότι η υπόθεση είναι ότι θα αναθεωρήσουμε αναπόφευκτα την εξέλιξη της ανάπτυξης ανά σελίδα, είναι απαραίτητο ένα επιτραπέζιο πρότυπο που σχεδιάστηκε για το σκοπό αυτό. Αυτός ο πίνακας μπορεί να είναι πίνακας ελέγχου προόδου για τις δύο εσωτερικές ομάδες και να μοιραστεί ταυτόχρονα με τον πελάτη.

πίνακα λίστας σελίδων

Μπορούν να οργανωθούν εδώ όλες οι πληροφορίες σχετικά με τη σελίδα, συμπεριλαμβανομένης της προθεσμίας, του πρωτοτύπου InVision, του παραχωρητηρίου και των παιδιών. Σημειώστε ότι είναι πολύ βολικό να τεκμηριώνετε και να ενημερώνετε ταυτόχρονα την κατάσταση ανάπτυξης σχεδιασμού, front-end και back-end.

4. Περίληψη

Ρόλος: Μοναδική πηγή αλήθειας και έλεγχος εκδόσεων παγίων σχεδιασμού

Η περίληψη είναι το GitHub για στοιχεία σκαριού που σώζουν τους σχεδιαστές από την κόρη της αντιγραφής και επικόλλησης αρχείων. Είναι έξω από το πεδίο αυτού του άρθρου να παρουσιάσει λεπτομέρειες σχετικά με τη διαχείριση ροής ελέγχου εκδόσεων. Το βασικό σενάριο εδώ είναι ότι το Abstract είναι το κατάστημα σχεδιασμού που λειτουργεί ως η μόνη πηγή της αλήθειας. Οι σχεδιαστές θα πρέπει να ενημερώνουν τον κύριο κλάδο στην τελευταία έκδοση του επιβεβαιωμένου σχεδιασμού και στη συνέχεια να ενημερώνουν τους προγραμματιστές. Από την άλλη πλευρά, οι προγραμματιστές θα πρέπει να πάρουν μόνο στοιχεία σχεδιασμού στον κύριο κλάδο ως αναφορά.

Αφηρημένο πρότυπο κλάδου

Περισσότερη δουλειά που πρέπει να γίνει

Από τη δική μου εμπειρία, η ανάπτυξη ολόκληρου του έργου μετά την υιοθέτηση αυτής της νέας ροής εργασίας ήταν τουλάχιστον δύο φορές πιο γρήγορη από πριν. Δεν είναι μια τέλεια λύση, επειδή απαιτεί ακόμα πολλές χειρωνακτικές εργασίες για ενημέρωση και συντήρηση.

Αλλά νομίζω ότι θα μπορούσε να είναι μια χρήσιμη αναφορά στις ομάδες ανάπτυξης ιστοσελίδων που ψάχνουν για μια καλύτερη ροή εργασιών και ελπίζουμε ότι περισσότερα άτομα μπορούν να μοιραστούν τις ροές εργασίας τους στο μέλλον!