Hoàn thiện acticrawl.com chỉ trong 17 giờ với Claude Code: khả năng mới của hợp tác cùng AI
(youtube.com)- Trong 17 giờ từ 9 giờ sáng đến 2 giờ sáng hôm sau, đã sử dụng Claude Code và Rails 8 để phát triển và triển khai hoàn chỉnh frontend cho một dịch vụ thu thập dữ liệu có thể vận hành thực tế
- Hợp tác với AI ở mọi mảng trừ backend: từ lập kế hoạch, thiết kế, frontend, mã kiểm thử đến triển khai, tạo nên quy trình phát triển one-stop
- Chỉ cần cung cấp URL của trang tham chiếu, AI sẽ phân tích tone & manner để tự động xây dựng hệ thống thiết kế nhất quán
- Phát triển song song bằng cách nhân bản thư mục: tiến hành đồng thời phát triển tính năng chính và sửa lỗi để tối đa hóa hiệu suất phát triển
- Áp dụng bắt buộc phương pháp TDD để đảm bảo chất lượng mã ở mức production kèm độ bao phủ kiểm thử
- AI tự xử lý cả lỗi triển khai: khi phát sinh sự cố migration, hệ thống tự động thực hiện backup → rollback → tái triển khai
- Thiết kế cụ thể cả hệ thống affiliate với mức hoa hồng khác nhau cho B2B/B2C và mô hình doanh thu phản ánh chi phí dịch vụ bên ngoài
- Kết nối domain thực tế và vận hành dịch vụ: hiện có thể kiểm tra dịch vụ thực tại acticrawl.com
Quá trình thực tế của cuộc marathon phát triển 17 giờ
Giai đoạn 1: Xây dựng hệ thống thiết kế dựa trên tham chiếu (2 giờ)
- Cung cấp URL của một trang SaaS hiện có cho AI để tự động phân tích màu sắc, typography, layout pattern
- Xây dựng hệ thống component bằng TailwindCSS ở mức tương đương Bootstrap để đảm bảo UI/UX nhất quán
- Hiện thực trải nghiệm người dùng chuyên nghiệp bằng việc chuẩn hóa nút bấm, animation và hiệu ứng hover
Giai đoạn 2: Cấu thành trang và triển khai tính năng (8 giờ)
- Landing page: trang chính để giới thiệu dịch vụ và thu hút người dùng
- Hệ thống xác thực người dùng: đăng ký thành viên, đăng nhập
Giai đoạn 3: Thiết kế logic kinh doanh và mô hình doanh thu (4 giờ)
- Hệ thống affiliate: cấu trúc hoa hồng phân tầng B2B 20%, B2C 15%
- Tính toán chi phí dịch vụ bên ngoài: định giá thực tế có phản ánh chi phí vận hành như proxy IP
Giai đoạn 4: Kiểm thử và triển khai (3 giờ)
- Viết mã kiểm thử theo phương pháp TDD để đảm bảo độ ổn định
- Pipeline triển khai tự động: khi lỗi xảy ra, AI xử lý theo từng bước
- Tối ưu hóa kết nối domain và môi trường production
Phát hiện workflow mang tính đột phá
Phát triển song song bằng cách nhân bản thư mục
- Nhân bản dự án thành hai thư mục và chạy Claude Code độc lập trên từng thư mục
- Tiến hành đồng thời phát triển tính năng chính và sửa lỗi, giúp tăng gấp đôi tốc độ phát triển
- Quản lý nhánh an toàn theo kiểu GitHub Flow và giảm thiểu xung đột
Dạy AI các quy tắc phát triển
- Các quy tắc đã thiết lập một lần sẽ tiếp tục được AI tuân thủ: TDD, Git Flow, nguyên tắc DRY, I18n, v.v.
- Con người có thể quên nhưng AI thì không bỏ sót, từ đó duy trì chất lượng mã nhất quán
- Tự động áp dụng best practice ở cấp độ lập trình viên senior
The 17-Hour Development Principle
Vượt qua giới hạn của cách phát triển truyền thống
- Trong phát triển frontend, những công việc vốn mất vài tuần đến vài tháng đã được hoàn thành chỉ trong một ngày
- Một cá nhân nay có thể đảm nhiệm cả vai trò designer + frontend developer, mở ra một mô hình mới
- Đạt được chất lượng frontend có thể vận hành thực tế, không chỉ dừng ở mức MVP
Hiệu ứng cộng hưởng từ việc kết hợp các công cụ AI
- Claude Code + Rails 8 + TailwindCSS cho thấy năng lực kết hợp ngoài mong đợi
- Từng công cụ riêng lẻ đều tốt, nhưng khi dùng cùng nhau thì tạo ra hiệu quả theo cấp số nhân
- Đề xuất một chuẩn mới cho năng suất phát triển
Kết quả đã được kiểm chứng và công khai minh bạch
Dịch vụ đang vận hành thực tế
- acticrawl.com: frontend đầy đủ chức năng hiện có thể truy cập ngay (backend dự kiến sẽ được phát triển riêng)
- Kiểm thử frontend hoàn chỉnh: codebase UI/UX ổn định được phát triển bằng TDD
- Mô hình kinh doanh cụ thể: thiết kế phản ánh cấu trúc doanh thu thực tế và chi phí vận hành
Công khai toàn bộ quá trình
- Toàn bộ quá trình phát triển được công khai minh bạch qua video tổng hợp quá trình phát triển trong 17 giờ (https://www.youtube.com/live/zNy9BM8LJwc)
- Ghi lại sinh động các cuộc hội thoại thực tế với AI và quá trình giải quyết vấn đề
- Có thể được các developer khác áp dụng như một workflow có thể tái hiện
Dấu hiệu thay đổi của hệ sinh thái phát triển
Mở rộng năng lực của nhà phát triển cá nhân
- Đã đến thời kỳ một người cũng có thể tự phát triển frontend ở cấp độ doanh nghiệp
- Chu kỳ từ lập kế hoạch → thiết kế → triển khai được rút ngắn từ theo tuần → theo ngày
- Rào cản gia nhập phát triển frontend giảm mạnh, mở ra nhiều khả năng đổi mới hơn
Tiêu chuẩn mới cho hợp tác cùng AI
- Vượt qua việc chỉ tạo mã đơn thuần, AI được sử dụng như một đối tác phát triển frontend toàn diện
- Phương pháp hợp tác hiệu quả với AI trong mọi giai đoạn frontend, từ lập kế hoạch đến triển khai
- Một ví dụ thực chứng cho việc đồng thời đạt được tăng tốc độ mà không làm giảm chất lượng
Kết luận
Dự án này là một ví dụ thực chứng cho thấy các công cụ AI có thể cải thiện năng suất của frontend developer một cách đột phá như thế nào. Điểm cốt lõi không chỉ là làm nhanh, mà là có thể xây dựng một frontend hoàn chỉnh có tính đến cả kiểm thử, triển khai và vận hành chỉ trong một ngày.
PS: Nếu muốn thử thách phát triển trong 17 giờ, nên tham khảo video tổng hợp (https://www.youtube.com/live/zNy9BM8LJwc)
PPS: Nếu tò mò về dịch vụ thực tế, có thể tự trải nghiệm tại acticrawl.com
9 bình luận
Thật vinh dự khi ở Hàn Quốc cũng có những video YouTube như thế này. Tôi sẽ tham khảo kỹ, xin cảm ơn!
Phần docs có khá nhiều chỗ không hoạt động.
Ví dụ: https://acticrawl.com/en/docs/quickstart
Chúng tôi thực sự dự định sẽ tiến hành công việc liên quan đến tài liệu. Xin cảm ơn!
Câu chữ như bên dưới có ổn về mặt pháp lý không?
> Được hàng nghìn công ty tin dùng
Samsung, LG, Kakao, Naver, Coupang
17 tiếng, thật sự quá khủng.
Có lẽ sẽ rất hữu ích khi tham khảo để làm dịch vụ. Cảm ơn bạn.
Tuy nhiên, tôi có một câu muốn hỏi: trong quá trình làm, bạn có gặp điểm nào khó khăn hay vướng mắc không? (Tôi vẫn chưa xem video.. nhưng sẽ xem sớm.)
Khó khăn khi sử dụng AI
Video nhìn chung rất tích cực về việc sử dụng AI cho phát triển, nhưng diễn giả cũng đề cập đến một số thách thức và điểm cần cân nhắc.
Tôi đã thử dùng AI..
Bạn đã dùng AI nào để tóm tắt vậy? Có vẻ chất lượng bản tóm tắt chưa cao lắm nhỉ haha
Do trẻ con viết 😭
Những điểm khó khăn hay vướng mắc đều đã được đề cập trong video. Xin cảm ơn.