Hướng dẫn dùng ChatGPT tạo bảng Kanban quản lý công việc

Không phải lúc nào bạn cũng cần biết lập trình để tạo một ứng dụng đơn giản phục vụ công việc hằng ngày. Với khả năng viết và xử lý mã nguồn, ChatGPT có thể biến một yêu cầu được mô tả bằng ngôn ngữ tự nhiên thành một ứng dụng web hoàn chỉnh.

Trong bài viết này, chúng ta sẽ hướng dẫn ChatGPT xây dựng một bảng Kanban quản lý công việc có thể sử dụng trực tiếp trên trình duyệt. Ứng dụng sẽ chạy offline trên máy tính mà bạn không cần tới máy chủ. Dưới đây là hướng dẫn chi tiết cách thực hiện.

Cách thiết kế bảng Kanban quản lý công việc trên ChatGPT

Ứng dụng Kanban quản lý công việc có gì?

Ứng dụng theo mô hình Kanban quản lý công việc hiển thị dưới dạng thẻ (card) và sắp xếp theo từng cột tương ứng với trạng thái xử lý. Khi đó người dùng dễ dàng theo công việc đang ở khâu nào để tiếp tục xử lý nếu chưa hiển thị ở cột Hoàn thành.

Các tính năng chính của bảng:

• Các cột công việc: Bảng Kanban gồm 4 cột Cần làm, Đang thực hiện, Đang xem xét và Hoàn thành để phân loại công việc theo trạng thái.
• Thêm công việc: Cho phép tạo các thẻ công việc mới và đưa vào bảng Kanban.
• Xóa công việc: Cho phép xóa những thẻ công việc không còn cần thiết.
• Kéo và thả: Cho phép di chuyển thẻ công việc giữa 4 cột để cập nhật trạng thái.
• Lưu dữ liệu: Sử dụng localStorage để lưu lại các công việc và trạng thái của chúng ngay trên trình duyệt.

Chi tiết tạo bảng Kanban quản lý công việc bằng ChatGPT

Bước 1:

Trước hết bạn cần nhập câu lệnh dưới đây vào khung chat để tiến hành tạo bảng quản lý công việc Kanban trên ChatGPT.

Create a single self-contained HTML file for a personal Kanban board that runs entirely offline.

Requirements:

Return only one complete HTML document. Do not split the code into multiple files.
Include all HTML, CSS, and JavaScript in that single file.
Do not use any external libraries, frameworks, CDNs, or internet resources.
The board must work by simply saving the file as .html and opening it in a web browser.

Features:

Four columns: Cần làm, Đang thực hiện, Đang xem xét, and Hoàn thành.
Add new tasks.
Edit existing tasks.
Delete tasks.
Drag and drop tasks between columns.
Each task should support a title, optional notes, a priority (Thấp, Trung bình, Cao), and an optional due date.
Automatically save all changes using localStorage so the board is restored after closing and reopening the file.
Display the number of tasks in each column.
Use a clean, modern, responsive design suitable for desktop use.

Code quality:

Write clean, well-organized code with comments where appropriate.
Ensure there are no obvious bugs or placeholder functionality.
Everything should work immediately without any additional setup.

Return only the HTML code inside a single code block.

Bước 2:

Sau khi gửi yêu cầu, ChatGPT sẽ phân tích các chức năng được mô tả và tạo mã nguồn cho ứng dụng Kanban. Toàn bộ phần giao diện và xử lý của ứng dụng được xây dựng bằng HTML, CSS và JavaScript, vì vậy bạn không cần cài đặt thêm môi trường lập trình phức tạp.

Khi hoàn thành bạn nhấn biểu tượng play để chạy thử ứng dụng.

Phóng to giao diện để xem trước bảng Kanban quản lý công việc offline trên máy tính. Giao diện sẽ có các cột quản lý công việc như dưới đây. Nhấn biểu tượng save để tải file HTML xuống.

Bước 3:

Để sử dụng bảng quản lý công việc chúng ta nhấn vào file HTML mới tải xuống để chạy ngay trên máy tính. Trước hết bạn cần nhấn Thêm công việc ở góc phải giao diện.

Trong giao diện thêm task, chúng ta nhập đầy đủ nội dung hiển thị trong bảng để phân loại công việc quản lý rõ ràng và khoa học hơn. Có mức độ phân cấp cho công việc tùy vào nội dung và hạn cần xử lý. Nhập xong nội dung nhấn Lưu công việc.

Chúng ta tiếp tục nhập công việc vào giao diện để phân loại.

Công việc ở một cột có thể di chuyển qua cột khác bằng cách kéo thả các thẻ công việc.

Điểm đáng chú ý là ứng dụng không cần kết nối đến máy chủ để thực hiện những thao tác trên. Các mã HTML, CSS và JavaScript được xử lý ngay trong trình duyệt, còn dữ liệu được lưu cục bộ bằng localStorage. 

Cho dù bạn tắt bảng quản lý và mở lại thì nội dung vẫn hiển thị như trước đó.