Yaklaşık iki yıldır front-end geliştirici olarak çalışıyorum ve çok çeşitli projelerin oluşturulmasında yer aldım. Öğrendiğim derslerden biri, aynı hedefi paylaşan ancak farklı görev ve sorumluluklara sahip farklı geliştirici ekipleri arasındaki işbirliğinin kolay olmadığıdır.
Diğer ekip üyelerine, tasarımcılara ve geliştiricilere danışarak küçük ekipler (5-15 kişi) için tasarlanmış bir web sitesi oluşturma döngüsü oluşturdum. Confluence, Jira, Airtable ve Abstract gibi araçları içerir. Bu yazımda iş akışını düzenlemenin özelliklerini paylaşacağım.
Skillbox şunları önerir: İki yıllık uygulamalı kurs .
Hatırlatıyoruz: tüm "Habr" okuyucuları için - "Habr" promosyon kodunu kullanarak herhangi bir Skillbox kursuna kayıt olurken 10 ruble indirim.
Bütün bunlara neden ihtiyaç duyuldu?
Sıfırdan bir web sitesi oluşturmak için gereken minimum ekip bir tasarımcı, programcı ve proje yöneticisidir. Benim durumumda ekip oluşturuldu. Ancak birkaç sitenin yayınlanmasından sonra bunda bir sorun olduğu hissine kapıldım. Bazen sorumluluklarımızı tam olarak anlamadık ve müşteriyle iletişim arzulanan çok şey bıraktı. Bütün bunlar süreci yavaşlattı ve herkesi rahatsız etti.
Sorunun çözümü için çalışmalara başladım.
Bir Google araması sorunumuza ilişkin iyi sonuçlar verir.
Yapılan işleri daha görsel hale getirebilmek için burada işlerin nasıl yapıldığının anlaşılmasını sağlayan bir iş akış şeması oluşturdum.
Tam çözünürlükte açmak için resme tıklayın.
Hedefler ve hedefler
Test etmeye karar verdiğim ilk tekniklerden biri “kademeli model” (Şelale) idi. Sorunları vurgulamak ve bunların nasıl çözüleceğini anlamak için kullandım.
Sorun: Çoğu zaman müşteri, geliştiricilerin yaptığı gibi web sitesi oluşturma sürecini modüler olarak değerlendirmez. Burayı sıradan bir site olarak algılıyor, yani tek tek sayfalar üzerinden düşünüyor. Ona göre tasarımcılar ve programcılar birbiri ardına bireysel sayfalar yaratıyor. Sonuç olarak müşteri, gerçek süreç sırasında neyin ardından geldiğini anlamıyor.
Görev: Müşteriyi aksi yönde ikna etmenin bir anlamı yoktur; en iyi seçenek, şirket içinde sayfa sayfa modele dayalı bir web sitesi oluşturmak için modüler bir süreç geliştirmektir.
Evrensel tasarım belirteçleri ve bileşenleri hem geliştiriciler hem de tasarımcılar tarafından yönetilir.
Sorun: Bu, birçok stratejinin ele aldığı yaygın bir durumdur. Pek çok ilginç çözüm var, çoğu durumda stil rehberi / kütüphane oluşturucuları tarafından kontrol edilen bir tasarım sistemi oluşturulması öneriliyor. Ancak bizim durumumuzda, geliştirme sürecine tasarımcıların erişim düzeylerini yönetmemizi sağlayacak başka bir bileşen eklemek kesinlikle mümkün değildi.
Görev: Tasarımcıların, geliştiricilerin ve yöneticilerin birbirlerine müdahale etmeden senkronize çalışabilecekleri evrensel bir sistem oluşturmak.
Doğru gelişim takibi
Sorun: Sorunları takip etmek ve genel ilerlemeyi ölçmek için pek çok yararlı araç mevcut olsa da bunların çoğu esnek veya optimal değildir. Araç, normalde belirli görevlerle ilgili sorular ve açıklamalar için harcanacak olan ekip zamanından tasarruf ederek yararlı olabilir. Ayrıca yöneticilerin tüm projeyi daha doğru anlamalarını sağlayarak hayatlarını kolaylaştırır.
Görev: Farklı ekip üyeleri tarafından gerçekleştirilen görevlerin ilerlemesini izlemek için bir kontrol paneli oluşturun.
Araç Seti
Farklı araçları denedikten sonra şu sette karar kıldım: Confluence, Jira, Airtable ve Abstract. Aşağıda her birinin faydalarını açıklayacağım.
Izdiham
Aracın rolü: bilgi ve kaynak merkezi.
Confluence'ın çalışma alanının kurulumu nispeten kolaydır, birçok özelliğe sahiptir, farklı uygulamalarla entegrasyona sahiptir ve bireysel, özelleştirilebilir şablonlara sahiptir. Her duruma uygun tek bir çözüm olmasa da bilgi ve kaynak merkezi olarak idealdir. Bu, projeyle ilgili her türlü referansın veya teknik detayın veri tabanına girilmesi gerektiği anlamına gelir.
Araç, her bir bileşeni ve projeyle ilgili diğer ayrıntıları doğru şekilde belgelemenize olanak tanır.
Confluence'ın ana avantajı belge şablonlarının özelleştirilmesidir. Ek olarak, katılımcıların erişim düzeylerini ayırarak tek bir spesifikasyon deposu ve çeşitli proje dokümantasyonu uygulamak için kullanılabilir. Artık, belgeleri e-postayla gönderdiğinizde olduğu gibi, elinizde spesifikasyonun eski bir sürümünün olduğundan endişelenmenize gerek yok.
Araç hakkında daha fazla bilgi .
Jira
Aracın rolü: sorun izleme ve görev yönetimi.
Jira çok güçlü bir proje planlama ve yönetim aracıdır. İşlevselliğin ana kısmı özelleştirilebilir iş akışlarının oluşturulmasıdır. Sorunları etkili bir şekilde yönetmek için (ihtiyacımız olan şey budur), istek türünün ve sorun türünün (sorun türü) doğru kullanımına özellikle dikkat etmek önemlidir.
Bu nedenle, geliştiricilerin bileşenleri doğru tasarıma göre oluşturduklarından emin olmak için, tasarımda her değişiklik olduğunda bilgilendirilmeleri gerekir. Bileşen güncellenir güncellenmez tasarımcının bir sorun açması, sorumlu bir geliştirici ataması ve ona doğru sorun türünü ataması gerekir.
Jira ile süreçteki tüm katılımcıların (hatırlatmama izin verin, bizim durumumuzda 5-15 kişi var) kaybolmayan ve uygulayıcılarını bulan doğru görevleri aldığından emin olabilirsiniz.
Jira hakkında daha fazla bilgi edinin .
Airtable
Aracın rolü: bileşen yönetimi ve ilerleme panosu.
Airtable, elektronik tablolar ve veritabanlarının bir karışımıdır. Bütün bunlar yukarıda tartışılan tüm araçların çalışmasını özelleştirmeyi mümkün kılar.
Örnek 1: Bileşen Yönetimi
Stil kılavuzu oluşturucuya gelince, kullanımı her zaman uygun değildir - sorun, tasarımcıların onu düzenleyememesidir. Ayrıca Sketch bileşen kütüphanesini kullanmak pek çok kısıtlamaya sahip olduğundan pek de iyi bir karar olmayacaktır. Büyük olasılıkla, bu kütüphaneyi programın dışında kullanamayacaksınız.
Airtable da mükemmel değil ancak diğer birçok benzer çözümden daha iyi. Bileşen Yönetim Tablosu şablonunun bir demosunu burada bulabilirsiniz:
Geliştirici bir tasarım bileşenini kabul ettiğinde, bileşeni bir tabloya kaydederek ortaya çıkan ABEM'i değerlendirir. Toplamda 9 sütun vardır:
- Ad - ABEM ilkesine göre bileşenin adı.
- Önizleme - Bu, başka bir kaynaktan indirilen bileşenin ekran görüntüsünün veya görüntüsünün yerleştirildiği yerdir.
- Bağlantılı sayfa, bir bileşenin sayfasına bağlantıdır.
- Alt bileşen - alt bileşenlere bağlantı.
- Değiştirici - stil seçeneklerinin varlığını kontrol eder ve bunları tanımlar (örneğin, etkin, kırmızı vb.).
- Bileşen kategorisi genel bir kategoridir (metin, tanıtım görseli, kenar çubuğu).
- Geliştirme durumu - gerçek geliştirme ilerlemesi ve tanımı (tamamlandı, devam ediyor vb.).
- Sorumlu - bu bileşenden sorumlu olan geliştirici.
- Atomik seviye, bu bileşenin atom kategorisidir (atom tasarımı kavramına göre).
- Verilere aynı veya farklı tablolarda başvurulabilir. Noktaları birleştirmek ölçeklendirme sırasında karışıklığı önleyecektir. Ayrıca veriler sorunsuz bir şekilde filtrelenebilir, sıralanabilir ve değiştirilebilir.
Örnek 2: sayfa geliştirme ilerlemesi
Sayfa geliştirmenin ilerlemesini değerlendirmek için özel olarak bu amaç için oluşturulmuş bir şablona ihtiyacınız vardır. Masa hem ekibin hem de müşterinin ihtiyaçlarına hizmet edebilir.
Sayfayla ilgili her türlü bilgiyi buraya not edebilirsiniz. Bu bir son tarih, InVision prototipine bir bağlantı, bir hedef, bir alt bileşendir. Hem tasarımın belgelenmesi ve güncellenmesi hem de ön uç ve arka uç geliştirme durumu açısından işlemlerin gerçekleştirilmesinin çok uygun olduğu hemen fark ediliyor. Üstelik bu işlemler eş zamanlı olarak gerçekleştirilmektedir.
Özet
Aracın rolü: tasarım varlıkları için tek bir sürüm kontrolü kaynağı.
Özet, Sketch'teki varlıklar için GitHub olarak adlandırılabilir ve tasarımcıları dosyaları kopyalayıp yapıştırma zorunluluğundan kurtarır. Aracın temel avantajı “tek gerçek kaynak” görevi gören bir tasarım deposu sağlamasıdır. Tasarımcılar ana dalı, onaylanmış düzenin en son sürümüne güncellemelidir. Bundan sonra geliştiricilere bildirimde bulunmaları gerekir. Bunlar da yalnızca ana daldaki tasarımcı varlıklarıyla çalışmalıdır.
Sonuç olarak
Yeni geliştirme sürecini ve yukarıda saydığımız tüm araçları hayata geçirdikten sonra çalışmamızın hızı en az iki kat arttı. Mükemmel bir çözüm olmasa da çok iyi bir çözüm. Doğru, çalışması için çok fazla çaba harcamanız gerekiyor - hepsini güncellemek ve çalışır durumda tutmak için "manuel çalışma" gerekiyor.
Skillbox şunları önerir:
- pratik kurs .
- çevrimiçi kurs .
- Uygulamalı yıl kursu .
Kaynak: habr.com