Nhật Ký Frontend Devloper Phần 2: Tôi Đã Biến 8 Giờ Làm Việc Thành 4 Giờ Nhờ Vào ChatGPT.
Trước đây, một tuần làm việc của tôi cũng như bao frontend developer khác: 8 tiếng một ngày, chìm trong mớ component, logic state, API call và những dòng CSS dường như vô tận. Tôi vẫn luôn nghĩ rằng đó là cái giá phải trả cho sự sáng tạo. Nhưng tuần vừa rồi, một thứ đã thay đổi mãi mãi cách tôi nhìn nhận công việc. Tôi đã thực sự cắt đôi thời gian làm việc của mình, không phải bằng cách làm ít đi, mà bằng cách làm việc với một hiệu suất không tưởng.
Và "người đồng đội" đã giúp tôi làm điều đó chính là ChatGPT.
Đây không phải là một bài viết lý thuyết. Đây là nhật ký ghi lại hành trình tôi xây dựng một feature phức tạp từ đầu đến cuối trong tuần qua, và cách ChatGPT đã can thiệp vào từng giai đoạn, giải phóng tôi khỏi những "gông cùm" của công việc lập trình tốn thời gian nhất.
1. Giai Đoạn 1: Lên Ý Tưởng và Dựng Khung Component Phức Tạp
Thử thách: Task của tôi là xây dựng một bảng dữ liệu (Data Table) cho trang quản trị. Yêu cầu không hề đơn giản: bảng phải có phân trang (pagination), sắp xếp (sorting), và bộ lọc (filtering) theo thời gian thực. Bình thường, việc dựng khung cho một component như thế này, suy nghĩ về các props cần truyền, quản lý state cho các trạng thái... ngốn của tôi cả một buổi sáng.
Bước ngoặt với ChatGPT: Thay vì cắm đầu vào code, tôi bắt đầu bằng một cuộc "thảo luận" với AI.
Prompt:
"Tôi đang xây dựng một component Bảng Dữ Liệu (DataTable) bằng React và TypeScript. Hãy giúp tôi lên ý tưởng về các props cần thiết cho component này. Bảng cần có tính năng sắp xếp theo cột, lọc dữ liệu phía client, và phân trang. Gợi ý luôn cấu trúc state ban đầu với hook useState."
Kết quả chuyên sâu: ChatGPT không chỉ trả về một danh sách props (data, columns, itemsPerPage...), nó còn gợi ý một cấu trúc state hoàn chỉnh (useState cho currentPage, sortConfig, filterText). Nó thậm chí còn dựng sẵn cho tôi bộ khung JSX với < table >, < thead>,< body> và logic map qua dữ liệu. Đây không phải là code-for-fun, đây là kiến trúc. Nó đã tiết kiệm cho tôi 2 giờ suy nghĩ và viết code boilerplate.
2. Giai Đoạn 2: Viết Logic Phức Tạp và Tương Tác API
Thử thách: Phần khó nhất của bảng dữ liệu là ô tìm kiếm. Yêu cầu là khi người dùng gõ, API sẽ không bị gọi liên tục, mà phải có một độ trễ (debounce) để tránh quá tải server. Viết một custom hook useDebounce từ đầu khá tốn thời gian và dễ sai sót.
Bước ngoặt với ChatGPT: Tôi biến AI thành chuyên gia về React Hooks.
Prompt:
"Viết cho tôi một custom hook trong React tên là useDebounce. Hook này nhận vào một giá trị (value) và một khoảng thời gian trễ (delay), sau đó trả về giá trị đã được debounce. Cung cấp code bằng TypeScript."
Kết quả chuyên sâu: Trong vòng 30 giây, tôi có một hook useDebounce hoàn hảo, sử dụng useState và useEffect với logic setTimeout/clearTimeout chuẩn không cần chỉnh. Tôi chỉ việc tích hợp nó vào component của mình để gọi API một cách tối ưu. Việc mà trước đây có thể mất 1-2 giờ để viết và debug, giờ chỉ còn 5 phút.
3. Giai Đoạn 3: Hoàn Thiện Giao Diện và Viết Test
Thử thách: Bảng đã có logic, nhưng giao diện vẫn còn thô. Tôi cần làm cho header của bảng "dính" lại (sticky header) khi người dùng cuộn trang. Đây là một thủ thuật CSS khá phiền phức. Sau đó, tôi phải viết unit test để đảm bảo các logic sắp xếp và lọc hoạt động đúng.
Bước ngoặt với ChatGPT: Tôi dùng AI cho cả hai việc.
Prompt (cho Unit Test):
"Tôi đang dùng Jest và React Testing Library. Đây là component DataTable của tôi. Hãy viết các test case để kiểm tra các hành vi sau:
Khi component render, nó hiển thị đúng số dòng dữ liệu.
Khi người dùng nhấp vào tiêu đề cột "Tên", dữ liệu được sắp xếp lại theo thứ tự bảng chữ cái.
Khi người dùng gõ "Apple" vào ô tìm kiếm, chỉ những dòng chứa từ "Apple" được hiển thị."
Kết quả chuyên sâu: ChatGPT đã cung cấp code test cực kỳ chất lượng, mô phỏng hành vi người dùng (fireEvent.click, fireEvent.change) và kiểm tra kết quả hiển thị trên DOM. Nó đã tự động hóa phần việc mà tôi thấy nhàm chán nhất. Tổng thời gian tiết kiệm cho cả CSS và Test: ít nhất 3-4 giờ.
4. Giai Đoạn 4: Tự Động Hóa Documentation Với Storybook
Thử thách: Feature đã xong, nhưng công việc chưa hết. Tôi cần viết tài liệu (documentation) cho component này trên Storybook để team có thể tái sử dụng. Việc này bao gồm viết các "stories" và mô tả chi tiết cho từng prop (argTypes), một công việc cực kỳ tỉ mỉ và tốn thời gian.
Bước ngoặt với ChatGPT: Tôi giao phó luôn công việc "nhàm chán nhưng quan trọng" này cho AI.
Prompt:
"Đây là code của component DataTable tôi vừa hoàn thành.
TypeScript
// [Dán toàn bộ code component React của bạn vào đây] //
Hãy giúp tôi tạo một file story cho Storybook (DataTable.stories.tsx). File này cần:
Một story mặc định (Default).
Một story với dữ liệu trống (Empty State).
Tự động tạo và điền mô tả chi tiết cho từng prop vào phần argTypes."
Kết quả chuyên sâu: ChatGPT đã tạo ra một file story hoàn chỉnh, không chỉ có các kịch bản sử dụng mà còn tự viết mô tả cho từng prop dựa trên TypeScript types. Bảng tài liệu trên Storybook hiện ra đầy đủ, chuyên nghiệp mà tôi không cần phải gõ tay từng dòng mô tả. Việc này tiết kiệm thêm cho tôi ít nhất 1 giờ làm việc.
5. Thay Đổi Không Chỉ Là Tốc Độ, Mà Là Tư Duy
Sau một tuần, tôi nhận ra việc "biến 8 giờ thành 4 giờ" không chỉ là con số. Sự thay đổi lớn nhất nằm ở chính tư duy và vai trò của tôi với tư cách là một developer. Cụ thể:
Giải phóng khỏi "gông cùm" của cú pháp: Tôi không còn phải tốn năng lượng não bộ để nhớ chính xác từng dòng lệnh CSS hay cấu trúc phức tạp của một hook. AI đã trở thành một bộ nhớ ngoài hoàn hảo, lo phần việc đó.
Tập trung vào "Tại sao" thay vì "Như thế nào": Thời gian của tôi giờ đây được chuyển từ việc loay hoay "làm sao để code chạy" sang việc suy nghĩ ở một tầm cao hơn: "Kiến trúc này đã tối ưu chưa?", "Trải nghiệm người dùng đã tốt nhất chưa?", "Giải pháp này giải quyết đúng bài toán kinh doanh không?".
Chuyển dịch từ "Người viết Code" sang "Người thiết kế Giải pháp": Khi các tác vụ thủ công được tự động hóa, vai trò của tôi được nâng cấp. Tôi không còn là một người thợ chỉ biết xây theo bản vẽ, mà trở thành một kiến trúc sư, người tham gia vào việc định hình chính bản vẽ đó.
Developer không bị thay thế, mà được "nâng cấp": Đây là điều quan trọng nhất tôi nhận ra. AI không lấy đi công việc của tôi; nó loại bỏ những phần nhàm chán và kém hiệu quả nhất, giúp tôi trở thành một phiên bản developer có giá trị và năng suất hơn.
Câu Hỏi Thường Gặp (FAQs)
Chất lượng code do AI viết? – Là một bản nháp chất lượng, nhưng luôn cần lập trình viên kiểm tra và tinh chỉnh lại.
AI có thay thế developer không? – Không, nó nâng cấp vai trò của họ bằng cách tự động hóa các tác vụ nhàm chán.
Bảo mật khi dùng code công ty? – Rủi ro rất cao. Tuyệt đối không được dán code nhạy cảm hoặc độc quyền.
Có làm mai một kỹ năng không? – Không, nếu bạn chủ động dùng nó như một công cụ để học hỏi và hiểu vấn đề sâu hơn.
Đến Lượt Bạn: Hãy Nâng Cấp Workflow Của Mình!
Việc tích hợp AI vào quy trình làm việc không còn là một lựa chọn, mà là một bước tiến tất yếu. Sự thay đổi trong hiệu suất mà tôi trải qua là minh chứng rõ ràng nhất. Hãy bắt đầu từ những tác vụ nhỏ nhất, thử nghiệm và tìm ra cách AI có thể trở thành trợ lý đắc lực cho riêng bạn.
Bạn đã dùng ChatGPT để giải quyết "nỗi đau" nào trong công việc code hàng ngày? Chia sẻ prompt hay nhất của bạn trong phần bình luận nhé
.jpg)
.jpg)
.jpg)
.jpg)
.jpg){kind=logo}
.jpg)
.png){kind=logo}
.png){kind=logo}
.png)
.png)
.png){kind=logo}
.png){kind=logo}
.png){kind=logo}
.png)
.png){kind=logo}
.png){kind=logo}
.png){kind=logo}
.jpg){kind=logo}
.jpg)
.png)
![Phương Hoa Sea Garden Hà Tiên [DEMO]](https://netid.vn/datafiles/18/2024-07/thumbs-43280754-z5663208563916_ca6fa4455aeeac4c01cc4a8f079f1893.jpg)
.png)
.jpg)
.png)
![[WS13] NB // MC - Làm chủ sân khấu](https://netid.vn/datafiles/18/2023-11/thumbs-56502092-IMG_1068.jpeg)
.png)
.png)
.png)
 of thông bao.jpg)
