Bài viết được viết bởi Robert (Front-end Engineer tại Engineering Team) và Kyle (Front-end Engineer tại Design Team) ở Got It Vietnam.
UI (User Interface) – Giao diện người dùng là một yếu tố vô cùng quan trọng giúp người dùng đánh giá thẩm mỹ và mức độ hiệu quả của một thiết kế website/ứng dụng. Để có được một UI vừa đẹp vừa thân thiện là nhờ sự “tam kiếm hợp bích” của cả team Front-end, HTML/CSS và Design. Ở bài viết lần này, chúng tôi sẽ mô tả chi tiết các bước làm việc của 03 bên trong việc thiết kế một ứng dụng thực tế tại Got It.
Để dễ dàng nắm bắt bài viết hơn, trước hết, hãy đọc qua về G Process – quy trình làm việc đặc biệt tại Got It được chúng tôi áp dụng qua bức ảnh dưới đây:
Nếu muốn tìm hiểu chi tiết hơn về G Process, bạn có thể khám phá tại đây. Giờ thì, hãy bắt đầu quá trình làm nên một UI thật đẹp và thân thiện ngay thôi!
Mục lục
1. G3b – Product specs and design
1.1 Research requirements (Tìm hiểu yêu cầu)
Công việc của các thành viên thường sẽ bắt đầu sau khi văn bản về Product Specs được PM của project chia sẻ cho các thành viên liên quan. Tất cả các công việc sẽ được chia thành từng đầu việc nhỏ hơn để thuận tiện cho việc quản lý và theo dõi. Mỗi đầu việc như vậy sẽ tương ứng với một ticket ở trên Jira, ứng dụng được Got It sử dụng để quản lý việc phát triển phần mềm.
Phía bên dưới là ví dụ của một ticket trên Jira. Với yêu cầu “Ask a Question Page”, Project Managers (PM), Engineers, Designers và QA (Testers) sẽ nghiên cứu, ước lượng tính khả thi của những tính năng cần đạt được.
Vẫn với ví dụ trên, sau khi tìm hiểu, các thành viên sẽ đưa ra những vấn đề kỹ thuật như sau:
– Đường dẫn URL sẽ trông như thế nào khi người dùng điều hướng đến trang “Your question”? Các câu hỏi khác nhau có nên có những đường dẫn riêng biệt?
– Điều kiện chính xác cần có để chuyển từ tuỳ chọn 5 câu hỏi mặc định sang 5 câu hỏi thực tế hàng đầu từ người dùng là gì?
1.2 G3b – Design Team: Design mockups (Thiết kế bản mô phỏng)
Đây là khi Design Team bắt đầu tham gia vào công việc để biến những dòng chữ khô khan kia thành các bản thiết kế mockup bắt mắt và thân thiện đối với người dùng. Ở giai đoạn này, Design Team sẽ làm việc trực tiếp với PM để tạo nên layout cho lo-fi mockup. Đây là phần khung xương cho một bản thiết kế nhằm định vị bố cục và giúp designers tính toán để thiết kế trải nghiệm tốt cho người dùng. Đôi lúc, các Engineers cũng tham gia ngay từ bước này để đưa ra những góp ý, đóng góp về thiết kế từ góc độ chuyên môn của mình.
Sau khi bản lo-fi mockup được thông qua, các UI Designers sẽ tiếp tục bước tạo ra hi-fi mockup. Kết quả của bước này gần như chính là thiết kế cuối cùng mà người dùng có thể nhìn thấy. Bên cạnh đó, bản thiết kế này về sau cũng được team QA (Tester) dùng để làm tài liệu cho việc test giao diện.
Vì vậy, bước này cần được đầu tư nhiều về tính thẩm mỹ, sự thống nhất chung về mặt giao diện trong toàn bộ sản phẩm, cũng như sự chính xác đến từng pixel. Một hệ thống thiết kế có tên Got It Design System được đưa vào áp dụng ngay từ bước này nhằm hỗ trợ tối đa các nhà thiết kế hoàn thành được các mục tiêu trên nhanh và chính xác nhất có thể.
1.3 G3b – Engineering Team: Engineering Design (Thiết kế kỹ thuật)
Sau bước trên, team Engineers đã có trong tay những thiết kế của màn hình và tính năng được yêu cầu. Kể từ đó, team sẽ phải thống nhất với nhau được phương án tiếp cận chung. Tới đây, các thành viên trong đội kỹ thuật sẽ họp để trả lời những câu hỏi sau:
– Những tính năng nào sẽ được triển khai?
– Điều gì sẽ xảy ra khi người dùng tương tác với tính năng mới?
– Cách các dòng thông tin di chuyển giữa trình duyệt và giao diện lập trình ứng dụng?
– Những khó khăn kỹ thuật có thể gặp phải?
Để đạt được sự thống nhất của cả team, nhiều khi các thành viên sẽ phải ngồi với nhau hàng tiếng đồng hồ liên tục. Có nhiều lúc, anh Tech Lead phải cho cả đội ra ngoài “nghỉ lấy sức” trước khi quay trở lại chiến đấu tiếp.
2. G4 – Estimation (Ước tính)
Trong một dự án, nhóm phát triển sẽ được giao cho thời hạn nhất định để thực hiện công việc của mình. Với đa số các dự án của chúng tôi, 02 tuần là khoảng thời gian để đi hết tất cả bước từ G3b tới G7.
Để các thành viên trong team có thể cho ra sản phẩm hoàn chỉnh, việc đầu tiên là đưa ra dự tính thời gian để hoàn thành công việc. Việc này rất quan trọng vì nó giúp team phân chia nhân sự hợp lý để đảm bảo sản phẩm được phát triển theo đúng thời gian dự kiến.
Có vài lần các thành viên trẻ trong team lại có những pha dự tính ngoài sức tưởng tượng. Khi gặp tình trạng này, anh trưởng nhóm lại trầm ngâm một lúc rồi tự động làm tròn thêm một ngày cho những dự đoán “thắng lợi tinh thần” để đảm bảo mỗi thành viên không bị quá tải và hoàn thành tốt các công việc được giao.
3. G5 – Execution (Triển khai)
3.1 Thiết kế cấu trúc lập trình
Giữa G4 và G5, đội Front-end sẽ phải làm thêm một bước đệm là thiết kế Front-end. Với mỗi dự án đòi hỏi sự hợp tác của nhiều Front-end Engineers một lúc, bước thiết kế cấu trúc lập trình là rất quan trọng. Nó giúp đảm bảo phần code chung mà tất cả chúng tôi cần sẽ được tái sử dụng tối đa. Làm tốt việc này, chúng tôi có thể rút ngắn được thời gian triển khai và tránh trường hợp các thành phần không thể hoạt động với nhau. Các tiêu chí cần cho một thiết kế của chúng tôi là:
- Các component được dùng ở nhiều nơi sẽ được đưa vào tệp thông tin chung bên ngoài để dễ được truy cập hơn.
- Các component nào chỉ được dùng bên trong component lớn hơn sẽ nằm bên trong folder của component lớn hơn.
Với Jira ticket ở mục 1.1, thiết kế sẽ được đưa ra như sau:
3.2 G5 – Coding (Lập trình)
Đây là lúc Engineers chính thức bắt tay vào việc viết ra logic cho các thành phần của ứng dụng.
Ngôn ngữ lập trình mà chúng tôi sử dụng là Javascript. Để xây dựng ứng dụng một cách đơn giản, nhanh chóng, và có thể phát triển hơn qua thời gian, Got It đã chọn sử dụng Reactjs làm thư viện chính cho phía client. Công việc của những coder là tạo nên những thành phần nhỏ trên ứng dụng, truyền cho các thành phần đó dữ liệu cần thiết để hiển thị và hoạt động. Công đoạn cuối cùng là tạo logic hợp lý để ứng dụng có thể phản ứng lại những tương tác từ người dùng cũng như các event được truyền đến từ những server hoặc API khác.
Sự chuẩn bị của các Engineers trong những giai đoạn trước càng kỹ lưỡng, việc triển khai bước này sẽ càng có nhiều thuận lợi. Khi có công tác chuẩn bị tốt, chúng tôi có thể ghép code với nhau một cách trôi chảy dù đó là những ứng dụng có những tính năng phức tạp. Ngược lại, nếu gặp khó khăn và phải sửa chữa nhiều, đó là bởi chúng tôi đã làm không chuẩn bị kỹ càng trong các giai đoạn trước.
3.3 G5 – Ghép HTML/CSS
Sau khi nhận được bản thiết kế của Design Team, chúng tôi chuyển sang công đoạn kiểm tra các thành phần của bản thiết kế. Tiếp theo, chúng tôi phân chia chúng thành các thành phần nhỏ hơn để tạo ra những dòng code hiển thị lên giao diện mà mắt thường nhìn thấy. Công đoạn này mất khá nhiều thời gian vì phải chuyển đổi chúng giữa nhiều tỉ lệ màn hình hay còn có một cái tên khác là “responsive”. Công việc này gọi là thiết kế bản thô HTML.
Do thời gian để hoàn thành dự án thường khá dồn dập nên việc thực hiện HTML/CSS của team HTML/CSS và coding của team Front-end hay được thực hiện song song. Cứ mỗi khi team HTML/CSS hoàn thành giao diện cho các trang khác nhau, chúng sẽ được dựng trên một bản chạy thử hoàn chỉnh sử dụng Storybook, rồi được chuyển sang team Front-end. Đến lúc này, đội ngũ Front-end chỉ việc lồng ghép hai phần sẵn có vào nhau, đặt mọi thứ vào đúng vị trí và xử lý các lỗi UI nhỏ. Vậy là công việc ở phần giao diện sẽ được hoàn thành.
3.4 G5 – Code Review and Integration (Rà soát và tích hợp code)
Sau khi giai đoạn lập trình đã hoàn tất, các kỹ sư Front-end sẽ ghép các thành phần vào một môi trường chung để sẵn sàng ghép với phần logic đặt trên server. Một thành viên nhiều kinh nghiệm làm người giữ cổng có nhiệm vụ đọc và duyệt toàn bộ các thay đổi của các thành viên khác. Nếu có vấn đề, người giữ cổng sẽ gửi lại các lời nhận xét để mỗi thành viên chỉnh sửa lại phần việc của họ.
Khi mọi thứ được thông qua, các thành phần riêng sẽ được nhập vào trong thư mục chung của toàn bộ Front-end Team, sẵn sàng cho quá trình ghép với Back-end. Việc ghép Front-end và Back-end có thể được hiểu là xây dựng code base của cả hai trên các server và đảm bảo cho hai bên nhận được đủ các thông tin cần thiết đúng lúc đúng chỗ. Từ đó, hai thành phần mới có thể hoạt động trơn tru.
Ví dụ, nếu bên Front-end gửi một câu hỏi cho Back-end, bên Back-end sẽ tạo ra record cho câu hỏi, gán cho nó một ID cố định và gửi lại câu trả lời cho Front-end. Khi câu trả lời được gửi lại cho Front-end thì màn hình sẽ hiển thị kết quả Back-end đã trả về. Bất cứ một chi tiết nào sai sót trong các khâu trên đều có thể dẫn đến việc người dùng không nhận được kết quả chính xác hoặc là kết quả không bao giờ được hiện ra.
Các kỹ sư Got It sẽ ngồi với nhau, có lúc tới 2-3 ngày chỉ để kiểm tra và rà soát tất cả các phần tương tác giữa Back-end, Front-end diễn ra đúng ý muốn. Kết quả của quá trình này là người dùng sẽ có một ứng dụng hoạt động trơn tru từ đầu tới cuối. Đến đây thì công việc của Engineers cho bước G5 đã tương đối xong. Một UI có đẹp và thân thiện hay không sẽ phụ thuộc rất nhiều vào sự kết hợp giữa Fron-end, HTML/CSS và Design trong những bước đầu tiên này.
Bước tiếp theo là đưa ứng dụng này lên một môi trường website thực tế để thử nghiệm, bạn có thể tìm hiểu thêm về các bước tiếp theo từ G5 trở đi qua bài viết này. Cảm ơn bạn đã đọc bài viết!
