[AI FOR WORK] Ứng dụng Chat GPT trong xây dựng một widget có độ phức tạp cao.

August 2025
M	T	W	T	F	S	S
	1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

P – Point (Quan điểm/Điểm chính)

Với sự phát triển của AI, việc xây dựng những widget có độ phức tạp cao trở nên đơn giản hơn bao giờ hết. Chat GPT là một công cụ hữu ích, giúp lập trình viên tiết kiệm thời gian, tăng độ chính xác và khả năng mở rộng. Đồng thời, nó còn gợi ý các cải tiến kĩ thuật để widget đạt chất lượng cao hơn.

R – Reason (Lý do/Giải thích)

Có ba lý do chính để lập trình viên nên ứng dụng ChatGPT khi xây dựng widget phức tạp:

Tối ưu thời gian phát triển: Thay vì phải tra cứu hàng loạt tài liệu hoặc StackOverflow, lập trình viên chỉ cần mô tả yêu cầu bằng ngôn ngữ tự nhiên, ChatGPT trả về code mẫu cùng giải thích logic, giúp tiết kiệm nhiều giờ tìm hiểu.
Giải quyết vấn đề phức tạp: Khi đối diện với các bài toán UI phức tạp (ví dụ: animation mượt mà, xử lý gesture kéo thả, tối ưu state), ChatGPT có thể gợi ý nhiều phương pháp tiếp cận khác nhau. Điều này giúp lập trình viên có nhiều góc nhìn kiến trúc, tránh rơi vào lối mòn.
Hỗ trợ học tập & giảm lỗi: ChatGPT không chỉ đưa ra code, mà còn giải thích vì sao chọn cách đó. Khi gặp lỗi, có thể đưa log hoặc code snippet để ChatGPT phân tích và gợi ý sửa. Điều này biến ChatGPT thành một mentor ảo song hành cùng lập trình viên.

E – Example (Ví dụ/Minh họa)

1. Bài toán thực tế:

Xây dựng đường cong mềm mại trên UI màn hình Gamification như theo hình vẽ.

2. Prompt cho AI

Bạn là một Flutter Expert AI.
Hãy viết code Flutter để dựng UI giống ảnh sau:

Mô tả giao diện:

Dùng CustomClipper để bo góc đáy của Container, có độ cong 3 so với đường thẳng.

Yêu cầu code:

Code rõ ràng, dễ bảo trì, tách file hợp lý.

Kết quả mong muốn:

Code hoàn chỉnh Flutter UI.
Hiển thị chính xác giao diện như hình minh hoạ (step + wave bottom).

3. Chạy prompt và nhận kết quả

/// CustomClipper tạo đường cong
/// CustomClipper tạo đáy cong nhẹ
class WaveClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(0, size.height - 30);

    // Điểm control & end để tạo cong dạng "bo dưới"
    final controlPoint = Offset(size.width / 2, size.height + 30); // kéo xuống
    final endPoint = Offset(size.width, size.height - 30);

    path.quadraticBezierTo(
      controlPoint.dx,
      controlPoint.dy,
      endPoint.dx,
      endPoint.dy,
    );

    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

4. Phân tích kết quả nhận được

Kết quả : Giao diện đúng với mô tả và ảnh designer đưa ra
Đánh giá : Chưa có độ khái quát cao, cần dựng một class như common và truyền vào độ cong
Đề xuất : Thêm tham số curseHeight để truyền thêm độ cong cho widget

📌 Tổng quan đánh giá chất lượng

Điểm mạnh: Giúp dựng giao diện phức tạp nhanh chóng và định hướng sử dụng tối ưu cao.
Điểm yếu: Cấn prompt đúng với ảnh design, tránh việc prompt nhiều làm mất thời gian trao đổi
Đề xuất hành động cho Sprint tiếp theo: Tạo 1 prompt phân tích giao diện trước khi yêu cầu code. Nêu ra những điểm cần lưu ý và cần làm đúng, các widget sẽ được sử dụng.

P – Point (Nhắc lại quan điểm/Kết luận)

Tận dụng AI để xây dựng UI có độ phức tạp cao từ ảnh design cung cấp giúp tiết kiệm đáng kể thời gian và công sức.
Dựa vào trải nghiệm thực tế:

Thực hiện thủ công: trung bình 3h/sprint → 6h/tháng (2 sprint).
Khi sử dụng AI: chỉ mất 1h/sprint → 2h/tháng (2 sprint).
👉 Như vậy, giảm được 4h/tháng cho dev.

Nói cách khác, AI giúp dev thoát khỏi những công việc thủ công lặp lại, dành nhiều thời gian hơn cho phát triển logic nghiệp vụ. Đây là bước tiến quan trọng để dev chuyển mình và học hỏi được nhiều kĩ năng hơn.

Tác giả: TamNTT2, ToanTT

Calendar