เราจัดระเบียบขั้นตอนการทำงานที่มีประสิทธิภาพสำหรับนักพัฒนาเว็บ: Confluence, Airtable และเครื่องมืออื่นๆ

ฉันทำงานเป็นนักพัฒนาส่วนหน้ามาประมาณสองปี และมีส่วนร่วมในการสร้างโครงการที่หลากหลาย บทเรียนอย่างหนึ่งที่ฉันได้เรียนรู้คือการทำงานร่วมกันระหว่างทีมนักพัฒนาต่างๆ ที่มีเป้าหมายเดียวกัน แต่มีงานและความรับผิดชอบที่แตกต่างกันไม่ใช่เรื่องง่าย

ในการปรึกษาหารือกับสมาชิกในทีม นักออกแบบ และนักพัฒนาคนอื่นๆ ฉันได้สร้างวงจรการสร้างเว็บไซต์ที่ออกแบบมาสำหรับทีมขนาดเล็ก (5-15 คน) ประกอบด้วยเครื่องมือต่างๆ เช่น Confluence, Jira, Airtable และ Abstract ในบทความนี้ ผมจะแบ่งปันคุณลักษณะของการจัดระเบียบเวิร์กโฟลว์

Skillbox แนะนำ: หลักสูตรภาคปฏิบัติสองปี "ฉันเป็นนักพัฒนาเว็บ PRO".

เราเตือนคุณ: สำหรับผู้อ่าน "Habr" ทุกคน - ส่วนลด 10 rubles เมื่อลงทะเบียนในหลักสูตร Skillbox ใด ๆ โดยใช้รหัสส่งเสริมการขาย "Habr"

ทำไมทั้งหมดนี้ถึงจำเป็น?

ทีมงานขั้นต่ำที่จำเป็นในการสร้างเว็บไซต์ตั้งแต่เริ่มต้นคือนักออกแบบ โปรแกรมเมอร์ และผู้จัดการโครงการ ในกรณีของฉัน ทีมได้ก่อตั้งขึ้น แต่หลังจากการเปิดตัวเว็บไซต์สองสามแห่ง ฉันรู้สึกว่ามีบางอย่างผิดปกติเกิดขึ้น บางครั้งเราไม่เข้าใจความรับผิดชอบของเราอย่างถ่องแท้ และการสื่อสารกับลูกค้าก็ยังเป็นที่ต้องการอีกมาก ทั้งหมดนี้ทำให้กระบวนการช้าลงและรบกวนทุกคน

ฉันเริ่มทำงานเพื่อแก้ไขปัญหา

การค้นหาของ Google ให้ผลลัพธ์ที่ดีกับปัญหาของเรา

เพื่อให้งานเสร็จเป็นภาพมากขึ้น ฉันได้สร้างไดอะแกรมเวิร์กโฟลว์ที่ให้ความเข้าใจเกี่ยวกับวิธีการทำงานที่นี่

คลิกที่ภาพเพื่อเปิดแบบเต็มความละเอียด

เป้าหมายและวัตถุประสงค์

เทคนิคแรกๆ ที่ฉันตัดสินใจทดสอบคือ “แบบจำลองน้ำตก” (น้ำตก) ฉันใช้มันเพื่อเน้นปัญหาและทำความเข้าใจวิธีแก้ปัญหา

ปัญหา: โดยส่วนใหญ่ ลูกค้าไม่ได้ประเมินกระบวนการสร้างเว็บไซต์แบบโมดูลาร์เหมือนกับที่นักพัฒนาทำ เขามองว่ามันเป็นเว็บไซต์ปกตินั่นคือเขาคิดในแง่ของแต่ละหน้า ในความเห็นของเขา นักออกแบบและโปรแกรมเมอร์สร้างเพจแต่ละหน้าทีละหน้า เป็นผลให้ลูกค้าไม่เข้าใจสิ่งที่ตามมาในระหว่างกระบวนการจริง

ภารกิจ: ไม่มีประโยชน์ที่จะโน้มน้าวลูกค้าเป็นอย่างอื่น ตัวเลือกที่ดีที่สุดคือการพัฒนากระบวนการแบบแยกส่วนสำหรับการสร้างเว็บไซต์ภายในบริษัทตามแบบจำลองทีละหน้า

โทเค็นการออกแบบสากลและส่วนประกอบได้รับการจัดการโดยทั้งนักพัฒนาและนักออกแบบ

ปัญหา: นี่เป็นสถานการณ์ทั่วไปที่หลายกลยุทธ์ระบุ มีวิธีแก้ไขปัญหาที่น่าสนใจมากมาย ในกรณีส่วนใหญ่จะเสนอให้สร้างระบบการออกแบบที่ควบคุมโดยไกด์สไตล์ / ตัวสร้างไลบรารี แต่ในสถานการณ์ของเรา การเพิ่มองค์ประกอบอื่นในกระบวนการพัฒนาที่จะช่วยให้เราจัดการระดับการเข้าถึงสำหรับนักออกแบบนั้นเป็นไปไม่ได้

ภารกิจ: การสร้างระบบสากลที่นักออกแบบ นักพัฒนา และผู้จัดการสามารถทำงานพร้อมกันได้โดยไม่รบกวนซึ่งกันและกัน

การติดตามการพัฒนาที่แม่นยำ

ปัญหา: แม้ว่าจะมีเครื่องมือที่มีประโยชน์มากมายสำหรับติดตามปัญหาและวัดความก้าวหน้าโดยรวม แต่เครื่องมือส่วนใหญ่ไม่ยืดหยุ่นหรือเหมาะสมที่สุด เครื่องมือนี้มีประโยชน์โดยการประหยัดเวลาของทีมซึ่งปกติแล้วจะใช้ในการถามคำถามและชี้แจงเกี่ยวกับงานเฉพาะ นอกจากนี้ยังทำให้ชีวิตของผู้จัดการง่ายขึ้นโดยทำให้พวกเขามีความเข้าใจที่ถูกต้องมากขึ้นเกี่ยวกับโครงการทั้งหมด

งาน: สร้างแดชบอร์ดเพื่อติดตามความคืบหน้าของงานที่ดำเนินการโดยสมาชิกในทีมที่แตกต่างกัน

ชุดเครื่องมือ

หลังจากทดลองใช้เครื่องมือต่างๆ ฉันก็ตัดสินใจเลือกชุดต่อไปนี้: Confluence, Jira, Airtable และ Abstract ด้านล่างนี้ฉันจะเปิดเผยประโยชน์ของแต่ละข้อ

ที่บรรจบกัน

บทบาทของเครื่องมือ: ศูนย์ข้อมูลและทรัพยากร

พื้นที่ทำงานของ Confluence นั้นค่อนข้างติดตั้งง่าย มีคุณสมบัติมากมาย สามารถทำงานร่วมกับแอพต่างๆ ได้ และมีเทมเพลตที่ปรับแต่งได้เป็นรายบุคคล ไม่ใช่โซลูชันที่เหมาะกับทุกคน แต่เหมาะเป็นอย่างยิ่งสำหรับการเป็นศูนย์ข้อมูลและทรัพยากร ซึ่งหมายความว่าจะต้องป้อนการอ้างอิงหรือรายละเอียดทางเทคนิคที่เกี่ยวข้องกับโครงการลงในฐานข้อมูล

เครื่องมือนี้ช่วยให้คุณสามารถจัดทำเอกสารแต่ละส่วนประกอบและรายละเอียดอื่น ๆ เกี่ยวกับโครงการได้อย่างเหมาะสม

ข้อได้เปรียบหลักของ Confluence คือการปรับแต่งเทมเพลตเอกสาร นอกจากนี้ยังสามารถใช้เพื่อนำพื้นที่เก็บข้อมูลข้อกำหนดและเอกสารโครงการต่างๆ ไปใช้ในพื้นที่เก็บข้อมูลเดียว โดยแยกระดับการเข้าถึงของผู้เข้าร่วม ตอนนี้คุณไม่ต้องกังวลว่าคุณจะมีข้อกำหนดเวอร์ชันเก่าอยู่แล้ว เช่นเดียวกับที่เกิดขึ้นเมื่อคุณส่งเอกสารทางอีเมล

ข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือ มีอยู่บนเว็บไซต์ผลิตภัณฑ์อย่างเป็นทางการ.

จิระ

บทบาทของเครื่องมือ: การติดตามปัญหาและการจัดการงาน

Jira เป็นเครื่องมือการวางแผนและการจัดการโครงการที่ทรงพลังมาก ส่วนหลักของฟังก์ชันนี้คือการสร้างเวิร์กโฟลว์ที่ปรับแต่งได้ เพื่อที่จะจัดการปัญหาได้อย่างมีประสิทธิภาพ (ซึ่งเป็นสิ่งที่เราต้องการ) ควรให้ความสนใจเป็นพิเศษกับการใช้ประเภทคำขอและประเภทปัญหา (ประเภทปัญหา) อย่างถูกต้อง

ดังนั้นเพื่อให้แน่ใจว่านักพัฒนากำลังสร้างส่วนประกอบตามการออกแบบที่ถูกต้อง พวกเขาจะต้องได้รับแจ้งทุกครั้งที่มีการเปลี่ยนแปลงในการออกแบบ ทันทีที่มีการอัปเดตส่วนประกอบ ผู้ออกแบบจะต้องเปิดปัญหา มอบหมายนักพัฒนาที่รับผิดชอบ และกำหนดประเภทปัญหาที่ถูกต้องให้เขา

ด้วย Jira คุณสามารถมั่นใจได้ว่าผู้เข้าร่วมทุกคนในกระบวนการ (ฉันขอเตือนคุณในกรณีของเรามี 5-15 คน) ได้รับงานที่ถูกต้องที่ไม่หลงทางและค้นหาผู้ดำเนินการ

เรียนรู้เพิ่มเติมเกี่ยวกับ จิรา มีอยู่บนเว็บไซต์ผลิตภัณฑ์อย่างเป็นทางการ.

Airtable

บทบาทของเครื่องมือ: การจัดการส่วนประกอบและกระดานความคืบหน้า

Airtable เป็นส่วนผสมของสเปรดชีตและฐานข้อมูล ทั้งหมดนี้ทำให้สามารถปรับแต่งการทำงานของเครื่องมือทั้งหมดที่กล่าวถึงข้างต้นได้

ตัวอย่างที่ 1: การจัดการส่วนประกอบ

สำหรับตัวสร้างแนวทางสไตล์นั้นไม่สะดวกในการใช้งานเสมอไป - ปัญหาคือนักออกแบบไม่สามารถแก้ไขได้ นอกจากนี้ การใช้ไลบรารีส่วนประกอบ Sketch คงไม่ใช่การตัดสินใจที่ดี เนื่องจากมีข้อจำกัดมากมาย เป็นไปได้มากว่าคุณจะไม่สามารถใช้ไลบรารีนี้นอกโปรแกรมได้

Airtable ก็ไม่สมบูรณ์แบบเช่นกัน แต่ก็ดีกว่าโซลูชันอื่นที่คล้ายคลึงกันมากมาย นี่คือการสาธิตเทมเพลตตารางการจัดการส่วนประกอบ:

เมื่อนักพัฒนายอมรับส่วนประกอบการออกแบบ เขาจะประเมินผล ABEM โดยการบันทึกส่วนประกอบลงในตาราง มีทั้งหมด 9 คอลัมน์:

• ชื่อ - ชื่อของส่วนประกอบตามหลักการ ABEM
• ดูตัวอย่าง - นี่คือที่ที่ทั้งภาพหน้าจอหรือรูปภาพของส่วนประกอบที่ดาวน์โหลดจากแหล่งอื่นถูกวางไว้
• หน้าที่เชื่อมโยงคือการเชื่อมโยงไปยังหน้าของส่วนประกอบ
• องค์ประกอบย่อย - ลิงก์ไปยังส่วนประกอบย่อย
• ตัวแก้ไข - ตรวจสอบการมีอยู่ของตัวเลือกสไตล์และกำหนด (เช่น ใช้งานอยู่, สีแดง ฯลฯ )
• หมวดหมู่ส่วนประกอบเป็นหมวดหมู่ทั่วไป (ข้อความ รูปภาพโปรโมต แถบด้านข้าง)
• สถานะการพัฒนา - ความคืบหน้าการพัฒนาจริงและคำจำกัดความ (เสร็จสมบูรณ์ กำลังดำเนินการ ฯลฯ)
• รับผิดชอบ - นักพัฒนาที่รับผิดชอบส่วนประกอบนี้
• ระดับอะตอมเป็นหมวดหมู่อะตอมของส่วนประกอบนี้ (ตามแนวคิดของการออกแบบอะตอม)
• ข้อมูลสามารถอ้างอิงในตารางเดียวกันหรือต่างกันได้ การเชื่อมต่อจุดต่างๆ จะป้องกันความสับสนเมื่อปรับขนาด นอกจากนี้ยังสามารถกรอง จัดเรียง และเปลี่ยนแปลงข้อมูลได้โดยไม่มีปัญหาใดๆ

ตัวอย่างที่ 2: ความคืบหน้าในการพัฒนาเพจ

ในการประเมินความคืบหน้าของการพัฒนาเพจ คุณต้องมีเทมเพลตที่สร้างขึ้นเพื่อจุดประสงค์นี้โดยเฉพาะ โต๊ะสามารถตอบสนองความต้องการของทีมและลูกค้าได้

ข้อมูลใด ๆ เกี่ยวกับหน้าสามารถบันทึกได้ที่นี่ นี่คือกำหนดเวลา ลิงก์ไปยังต้นแบบ InVision ปลายทาง ส่วนประกอบย่อย จะสังเกตเห็นได้ทันทีว่าการดำเนินการทำได้สะดวกมาก ทั้งในส่วนของการจัดทำเอกสารและการอัปเดตการออกแบบ ตลอดจนสถานะของการพัฒนาส่วนหน้าและส่วนหลัง นอกจากนี้ การดำเนินการเหล่านี้ยังดำเนินการไปพร้อมๆ กันอีกด้วย

นามธรรม

บทบาทของเครื่องมือ: แหล่งเดียวในการควบคุมเวอร์ชันสำหรับสินทรัพย์การออกแบบ

บทคัดย่อสามารถเรียกได้ว่าเป็น GitHub สำหรับเนื้อหาใน Sketch และช่วยให้นักออกแบบไม่ต้องคัดลอกและวางไฟล์ ข้อได้เปรียบหลักของเครื่องมือนี้คือให้พื้นที่เก็บข้อมูลการออกแบบที่ทำหน้าที่เป็น "แหล่งความจริงแหล่งเดียว" ผู้ออกแบบต้องอัปเดตสาขาหลักเป็นเวอร์ชันล่าสุดของโครงร่างที่ได้รับอนุมัติ หลังจากนั้นจะต้องแจ้งให้ผู้พัฒนาทราบ ในทางกลับกัน ควรใช้ได้กับสินทรัพย์ของนักออกแบบจากสาขาหลักเท่านั้น

สรุป

หลังจากที่เราใช้กระบวนการพัฒนาใหม่และเครื่องมือทั้งหมดที่กล่าวมาข้างต้น ความเร็วในการทำงานของเราก็เพิ่มขึ้นอย่างน้อยสองเท่า มันไม่ใช่วิธีแก้ปัญหาที่สมบูรณ์แบบ แต่ก็เป็นวิธีแก้ปัญหาที่ดีมาก จริงอยู่เพื่อให้มันใช้งานได้คุณต้องใช้ความพยายามอย่างมาก - ต้องใช้ "งานด้วยตนเอง" เพื่อปรับปรุงและบำรุงรักษาให้อยู่ในสภาพใช้งานได้

Skillbox แนะนำ:

• หลักสูตรภาคปฏิบัติ "นักพัฒนามือถือ PRO".
• คอร์สออนไลน์ "นักพัฒนา C#".
• หลักสูตรปีปฏิบัติ "นักพัฒนา PHP จาก 0 ถึง PRO".

ที่มา: will.com