- vừa được xem lúc

Với AI bạn có thể không cần viết 1 dòng code nào nữa?

0 0 19

Người đăng: TungDT

Theo Viblo Asia

Ý tưởng

Cuối tuần vừa rồi, rảnh rảnh mình nảy ra ý định thử phát triển 1 trang web hoàn toàn sử dụng AI mà sẽ không tự viết 1 dòng code nào cả. Mình đã dùng GitHub Copilot bản trả phí hơn 1 năm rồi và thấy rằng nó tăng tốc độ viết code của mình rất nhiều. Đôi khi chỉ viết vài dòng comment là nó sinh ra cả đoạn code hoặc cả 1 hàm luôn. Code nó sinh ra mình review qua thấy ổn thì dùng luôn, không thì sửa lại 1 chút là những code tiếp theo nó tự hiểu sai hoặc chưa tốt ở đâu để sinh ra đúng / tốt hơn. Tuy nhiên, viết hoàn toàn 1 dự án bằng AI thì mình chưa thử bao giờ nên why not?

Bài toán

Dự án mình làm liên quan tới 1 web game tên là Fantasy Premier League. Tóm tắt game này thì là nó sẽ cho bạn 100 đồng để mua bán cầu thủ. Các cầu thủ này ngoài đời thực đá như thế nào thì trong game sẽ được điểm cao thấp tương ứng. Đây là 1 trò chơi rất thú vị với người theo dõi giải Ngoại hạng và có 1 cộng đồng người chơi rất đông đảo. Trò chơi rất nổi tiếng nên có rất nhiều hội nhóm chơi và các tool phát triển giúp người chơi theo dõi các thông số trong game để mua bán tốt hơn và trang LivePL https://www.livefpl.net/ là 1 trong số các tool đó. Trang này cập nhật điểm nhanh hơn trang chủ của Fantasy nên mọi người hay vào đây xem live thay vì đợi điểm chính thức từ Fantasy. Mình có một nhóm chơi với nhau đã lâu và thường sẽ tổ chức 2 giải, 1 giải nhất tuần - ai cao điểm nhất tuần đó win và 1 giải league đá cặp theo bảng. Bình thường BTC cập nhật điểm mọi người vào 1 file excel rồi tổng kết lại sau mỗi vòng đấu. Mình quyết định sẽ dùng AI để làm 1 trang web theo dõi cho tiện. Công việc sẽ bao gồm:

  • Lấy dữ liệu từ trang LivePL
  • Bóc tách dữ liệu cần thiết
  • Hiển thị bảng cho giải tuần và bảng cho giải League.

Nhìn chung thì cũng đơn giản thôi nhưng mình muốn xem AI có thể tự viết hoàn toàn được không? Trước khi các bạn đọc tiếp thì đây là kết quả, not bad huh?

Tiến hành

Back-end

Mình quyết định dùng back-end là Flask một framework cho web nhỏ gọn của Python. Lý do là phần bóc tách dữ liệu thì Python làm là chuẩn rồi, dự án cũng đơn giản, Flask là đủ dùng. Đầu tiên để lấy dữ liệu từ trang LivePL thì mình download cái trang này về https://www.livefpl.net/leagues/88270 lưu thành 1 file .mhtml. Sau đó mình chat với GitHub Copilot bảo nó tách phần dữ liệu mình cần. Câu prompt mình dùng:

Read this file, extract data from the main table, data includes rank, team name, total points, live points, hits, return data as 2d list.

Tất nhiêu, code ban đầu nó sinh ra có thể chưa đúng nhưng nếu như mọi khi mình tự sửa thì lần này mình bôi đen đoạn code xong bảo AI nó fix. Sau khi test xong kết quả thấy đúng, thì mình bảo AI sửa lại đoạn code, thay vì extract từ file thì extract dữ liệu trực tiếp từ URL. AI làm rẹt cái là xong.

Các hàm còn lại trong back-end thì đơn giản hơn. Thường là mình comment ngay đầu hàm, AI nó hiểu luôn và hoàn thành hàm đó mà ít phải sửa nhiều. Ví dụ như hàm dưới đây, chỉ từ comment 1 câu như thế nhưng do AI nắm được cấu trúc thư mục mình tạo ra nó tạo 1 phát là xong. Mình chỉ prompt lại là cần sắp xếp theo giảm dần. Nói chung hàm nào đơn giản thì comment ngắn, hàm nào phức tạp comment chi tiết 1 chút.

Front-end

Sang đến front-end mình để AI hoàn toàn làm hết. Nghĩa là với back-end mình còn bảo nó viết từng hàm 1 nhưng với front-end mình dùng html và javasript nên mình prompt chi tiết trang mình muốn làm và để AI sinh ra. Test lại nếu không đúng ý mình hoặc yêu cầu nó sửa hoặc xoá đi prompt lại chi tiết hơn. Ví dụ với trang hiển thị bảng đấu, mình prompt và nó code như trong hình: Chưa đúng ý mình lại bảo nó code lại: Có những lúc mình còn chẳng chọn mầu mà chỉ bảo AI tự chọn mầu nào sao cho đơn giản mà trang nhã là được 😄 Sau khoảng 5-6 lần promp đi promp lại thì AI đã làm tốt cái mình cần. Các trang còn lại mình cũng làm tương tự.

Kết luận

Mình hoàn thành dự án trong khoảng 2 ngày (lúc nào rảnh làm chứ không phải full 2 ngày). Hoàn toàn không gõ 1 dòng code nào, chỉ prompt đi prompt lại cho đến khi AI làm đúng thì thôi.

Trang web mình làm (à nhầm, AI làm dưới sự hướng dẫn của mình) ở đây: https://tathyfantasy.onrender.com/ (mới vào load dữ liệu sẽ hơi lâu vì nó phải tải dữ liệu từ trang LivePL).

GitHub cho bạn nào muốn xem: https://github.com/dttung79/Fantasy

Tóm tắt lại:

  • AI hoàn toàn có thể tự code nếu prompt chuẩn và chi tiết.
  • Mình chưa thử dự án thực tế nhưng AI có thể code từ bản thiết kế. Mình đưa 1 class diagram nó code toàn bộ lớp luôn, code cả logic cho method chứ không chỉ prototye. Để lúc khác mình thử đưa 1 file figma xem nó code html ra sao.
  • Con người vẫn cần hiểu biết thì mới hướng dẫn AI cũng như ra lệnh chỉnh sửa được đúng ý mình.
  • Nhân sự ngành IT sẽ sụt giảm nhu cầu vì AI, công việc 5 người làm giờ 1 người + AI là xong

Bình luận

Bài viết tương tự

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 436

- vừa được xem lúc

2021, chúng ta cần tối ưu hóa việc tải hình ảnh trên web như nào?

Rất chào các bạn,. Như các bạn đã biết, trong kỉ nguyên công nghệ, song song với sự sinh ra dày đặc của các trang web mới cũng là sự biến mất của những trang web "lạc hậu" hay hoạt động kém hiệu quả.

0 0 57

- vừa được xem lúc

Xóa phần tử trong Array JavaScript

Xóa phần tử trong Array JavaScript là một bài toán mà hầu hết mọi người đều gặp phải khi lập trình JavaScript. Để giải quyết bài toán này, JavaScript cung cấp rất nhiều giải pháp khác nhau.

0 0 49

- vừa được xem lúc

Bài 28 - Hiểu chính xác về Responsive Web Design và cách chia khoảng màn hình

Chào các bạn, thuật ngữ Responsive Web Design có lẽ không còn xa lạ gì với mọi người nữa. Bất kỳ ai làm về web đều đã từng làm hoặc ít nhất là nghe tới thuật ngữ Responsive Web Design này.

0 0 151

- vừa được xem lúc

Giới thiệu về Mixins trong Vuejs

Xin chào năm mới năm me! Hôm nay mình sẽ tiếp tục chia sẻ cho các bạn những vấn đề liên quan đến Vuejs. Ở bài trước mình đã giới thiệu về tính năng Filter và lần này, mình xin chia sẻ với các bạn về một khái niệm cũng rất quen thuộc.

0 0 394

- vừa được xem lúc

Top JavaScript Snippets bạn nên thử một lần cho biết

Chào các bạn, tiếp tục chuỗi chủ đề về JS hôm nay mình xin chia sẻ tới các bạn một số đoạn snippets hay ho giúp chúng ta tăng hiệu suất công việc, cải thiện chất lượng code. Cùng bắt đầu nhé (go). . 1.

0 0 36