Giới thiệu

Trong thời đại công nghệ hiện nay, việc sử dụng AI để hỗ trợ lập trình viên là điều ngày càng phổ biến. Tuy nhiên, có một thách thức lớn mà mọi người thường gặp phải là làm thế nào để AI có thể sửa lỗi một cách hiệu quả mà không gây ra thêm vấn đề. Bài viết này sẽ khám phá một giải pháp mà chúng tôi phát triển tại Webvizio nhằm cải thiện khả năng của AI trong việc xử lý các lỗi phần mềm.

Vấn Đề Cốt Lõi: AI Không Có Ngữ Cảnh

Một AI không thể "nhìn thấy" website của bạn. Khi bạn yêu cầu nó sửa một lỗi, bạn đang mô tả một vấn đề trực quan và tương tác cho người mà chưa bao giờ thấy ứng dụng của bạn. AI thiếu đi ngữ cảnh quan trọng mà một lập trình viên con người thường có:

• Ngữ Cảnh Hình Ảnh: Giao diện người dùng trông như thế nào? Phần tử nằm ở đâu trên trang? Có bị che khuất bởi phần tử khác không?
• Ngữ Cảnh Thời Gian Chạy: Có lỗi nào trong console không? Tab mạng báo cáo điều gì? Tình trạng của ứng dụng như thế nào?
• Ngữ Cảnh Môi Trường: Người dùng đang sử dụng trình duyệt, hệ điều hành và kích thước màn hình nào?
• Ngữ Cảnh DOM: Phần tử cụ thể là gì? Các thuộc tính CSS của nó, cha mẹ và anh chị em của nó ra sao? Một mô tả mơ hồ như "nút màu xanh" là không đủ.

Nếu không có thông tin này, AI chỉ đang đoán dựa trên mã của bạn và thường thì nó đoán sai.

Giải Pháp Của Chúng Tôi: Cầu Nối "Ghi Nhận Ngữ Cảnh"

Chúng tôi đã phát triển một công cụ để hoạt động như mắt và tai cho trợ lý AI của chúng tôi. Công cụ này được thiết kế để cho phép các thành viên trong nhóm không chuyên báo cáo vấn đề một cách dễ dàng trong khi thu thập tất cả dữ liệu kỹ thuật mà lập trình viên (hoặc AI) cần.

Quy Trình Làm Việc:

1. Chỉ, Nhấp và Báo Cáo
   Các thành viên không chuyên (như đội ngũ tiếp thị hoặc quản lý dự án) có thể duyệt trang web staging hoặc trực tiếp. Khi họ thấy một vấn đề, họ sử dụng tiện ích mở rộng của trình duyệt để chỉ và nhấp vào phần tử có vấn đề. Họ có thể để lại một bình luận đơn giản bằng tiếng Anh như: "Nút này không gửi biểu mẫu khi tôi nhấp vào."

2. Phép Màu Ẩn Sau
   Ngay khi họ gửi báo cáo, tiện ích mở rộng tự động ghi lại một lượng lớn thông tin ngữ cảnh kỹ thuật. Đây là phiên bản số của việc lập trình viên nhìn qua vai người dùng. Chúng tôi thu thập:

   • Ảnh chụp màn hình có chú thích: Hình ảnh về những gì người dùng đang thấy, với cú nhấp chuột được làm nổi bật.
   • Đầu ra Console: Tất cả lỗi, cảnh báo và nhật ký tại thời điểm báo cáo.
   • Hành động của người dùng: Dấu vết các cú nhấp chuột và nhập liệu gần đây.
   • Bộ chọn phần tử chính xác: Bộ chọn CSS duy nhất cho phần tử được đánh dấu và tất cả cha mẹ của nó.
   • Thông số kỹ thuật: Phiên bản trình duyệt, hệ điều hành, kích thước viewport, v.v.

3. Cấu Trúc và Lưu Trữ Ngữ Cảnh
   Tất cả dữ liệu được ghi lại này tự động được tổ chức thành một nhiệm vụ có cấu trúc trong hệ thống của chúng tôi. Thay vì một email lộn xộn hoặc một ticket mơ hồ, chúng tôi nhận được một báo cáo lỗi toàn diện với mọi thông tin kỹ thuật được phân loại rõ ràng và liên kết với bình luận gốc của người dùng. Điều này tạo ra một nguồn thông tin chính xác cho vấn đề.

4. Kết Nối AI Qua Máy Chủ MCP
   Đây là lớp tích hợp giúp quy trình làm việc trở nên liền mạch. Chúng tôi đã tạo ra máy chủ MCP của riêng mình hoạt động như một nhà cung cấp ngữ cảnh cho trợ lý lập trình AI.
   Khi một lập trình viên sẵn sàng giải quyết một lỗi, họ không cần sao chép và dán gì cả. Họ chỉ cần hỏi tất cả các nhiệm vụ có sẵn cho đến khi thực hiện ngay trong cuộc trò chuyện với AI. AI nhận được bình luận của người dùng, ảnh chụp màn hình, nhật ký console, bộ chọn DOM và thông tin trình duyệt trong một phản hồi API sạch sẽ.

Kết Quả: Từ Đoán Đến Chính Xác

Với kết nối tự động trực tiếp này, AI có tất cả thông tin cần thiết để hiểu vấn đề một cách sâu sắc. Khi nhận nhiệm vụ, nó biết chính xác nút nào người dùng đang nói đến, thấy được loại lỗi từ console và hiểu rõ bối cảnh nơi lỗi xảy ra.

Giải pháp mà AI đề xuất giờ đây trở nên tập trung và có khả năng đúng ngay từ lần thử đầu tiên. Không còn là vấn đề đoán; mà là thực hiện chẩn đoán dựa trên một tập dữ liệu phong phú và toàn diện.

Điều này đã gần như loại bỏ việc "bạn có thể gửi cho tôi một ảnh chụp màn hình của console không?" cho chúng tôi. Vòng phản hồi trở nên chặt chẽ hơn, việc sửa chữa nhanh hơn và các lập trình viên có thể tập trung vào việc phê duyệt và thực hiện giải pháp thay vì phải đóng vai trò thám tử.

Thực Hành Tốt Nhất

• Ghi lại tất cả thông tin ngữ cảnh: Đảm bảo rằng mọi báo cáo đều đi kèm với thông tin chi tiết cần thiết.
• Sử dụng công cụ hỗ trợ: Các tiện ích mở rộng hoặc phần mềm hỗ trợ giúp thu thập dữ liệu luôn hữu ích.
• Đào tạo đội ngũ không chuyên: Giúp họ hiểu cách báo cáo vấn đề một cách chính xác.

Cạm Bẫy Thường Gặp

• Không cung cấp đủ thông tin: Một báo cáo thiếu thông tin sẽ dẫn đến việc AI không thể xử lý lỗi đúng cách.
• Đánh giá sai vấn đề: Thiếu ngữ cảnh có thể dẫn đến việc AI đưa ra giải pháp không phù hợp hoặc sai lệch.

Mẹo Tối Ưu Hiệu Suất

• Tối ưu hóa quy trình báo cáo: Giảm thiểu thời gian cần thiết để báo cáo và thu thập thông tin.
• Thường xuyên cải tiến công cụ: Đảm bảo rằng công cụ thu thập ngữ cảnh luôn được cập nhật và tối ưu hóa.

Khắc Phục Sự Cố

• Nếu AI không đưa ra giải pháp đúng: Kiểm tra lại dữ liệu ngữ cảnh được cung cấp và đảm bảo rằng tất cả thông tin cần thiết đã được ghi lại.

Kết Luận

Chúng tôi đã phát triển một cách tiếp cận mới để giúp AI xử lý các lỗi phần mềm một cách chính xác hơn. Nếu bạn muốn xem nó hoạt động như thế nào, chúng tôi đã chuẩn bị một video trình diễn ngắn trên YouTube.

Đặt Câu Hỏi: Bạn Làm Thế Nào?

Đây là cách chúng tôi giải quyết vấn đề ngữ cảnh, nhưng chúng tôi biết rằng không phải chỉ mình chúng tôi gặp phải điều này. Tôi rất muốn nghe cách mà những người khác đang xử lý vấn đề này, đặc biệt là với các nhóm không chuyên.

• Nếu bạn là lập trình viên độc lập, bạn giữ ngữ cảnh như thế nào khi lặp lại mã do AI tạo ra?
• Nếu bạn làm việc trong một nhóm, quy trình của bạn để biến một báo cáo lỗi mơ hồ từ PM hoặc khách hàng thành nhiệm vụ có thể thực hiện cho một AI là gì? Bạn có sử dụng mẫu, biểu mẫu hoặc công cụ nào khác không?