Tự tạo ứng dụng quản lý công việc trên Gemini rất đơn giản

Với sự hỗ trợ của chức năng Canvas trên Gemini, người dùng có thể tự triển khai nhiều ứng dụng hỗ trợ cho công việc và cuộc sống, chẳng hạn ứng dụng quản lý công việc.

Ứng dụng quản lý công việc sẽ chạy trực tiếp trên trình duyệt nên bạn không lo mất dữ liệu. Giao diện ứng dụng vô cùng đơn giản để bạn thêm nội dung, kéo thả công việc giữa các cột quản lý. Chỉ cần cung cấp câu lệnh chuẩn và Gemini sẽ thực hiện quá trình xây dựng ứng dụng quản lý công việc cho người dùng. Dưới đây là hướng dẫn tạo ứng dụng quản lý công việc trên Gemini.

Hướng dẫn tạo ứng dụng quản lý công việc trên Gemini

Bố cục ứng dụng quản lý công việc

Ứng dụng được thiết kế theo hướng đơn giản, tập trung vào việc theo dõi và quản lý tiến độ công việc mà không cần những tính năng phức tạp. Giao diện gồm các thành phần chính sau:

• 4 cột quản lý công việc: Gồm Cần làm, Đang thực hiện, Đang xem xét và Hoàn thành.
• Thẻ công việc: Mỗi công việc được hiển thị trên một thẻ riêng, bao gồm tiêu đề, ghi chú, mức độ ưu tiên và ngày đến hạn. Người dùng có thể dễ dàng xem thông tin quan trọng mà không cần mở thêm màn hình khác.
• Quản lý công việc: Cho phép thêm, chỉnh sửa và xóa công việc. Người dùng cũng có thể kéo và thả thẻ giữa các cột để thay đổi trạng thái một cách nhanh chóng.
• Hiển thị mức độ ưu tiên: Mỗi thẻ có một dải màu ở cạnh trái để biểu thị mức độ ưu tiên.
• Thao tác trực quan: Các nút Chỉnh sửa và Xóa được ẩn khi bình thường và chỉ xuất hiện khi người dùng di chuột lên thẻ.
• Form tạo công việc: Khi thêm công việc mới, người dùng nhập các thông tin cần thiết như tiêu đề, ghi chú, mức độ ưu tiên và ngày đến hạn. Tiêu đề là trường bắt buộc, còn mức độ ưu tiên được đặt mặc định là Trung bình để quá trình tạo công việc nhanh hơn.

Bước 1:

Trước hết chúng ta chuyển sang chế độ Canvas trên Gemini. Sau đó chúng ta paste câu lệnh dưới đây để tiến hành xây dựng ứng dụng quản lý công việc.

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:

Chờ một lúc và bạn có được ứng dụng như dưới đây, nhấn vào Download để tải ứng dụng xuống máy tính.

Bước 3:

Mở file HTML để sử dụng ứng dụng quản lý công việc trên máy tính. Trước hết ở mỗi thẻ quản lý chúng ta nhấn vào Thêm thẻ để thêm công việc.

Chúng ta điền đủ nội dung công việc vào giao diện như hình dưới, mức độ công việc, thời gian hoàn thành rồi nhấn Lưu.

Kết quả chúng ta có danh sách công việc trong cột Cần làm như dưới đây.

Bước 4:

Để chỉnh sửa công việc đã thêm nhấn vào biểu tượng hình bút, để xóa công việc nhấn biểu tượng thùng rác.

Bước 5:

Sau khi tạo công việc, bạn có thể cập nhật tiến độ bằng cách kéo và thả thẻ công việc giữa các cột.

• Bắt đầu thực hiện: Khi bắt đầu làm một công việc, kéo thẻ từ Cần làm sang Đang thực hiện.
• Chuyển sang kiểm tra: Khi đã hoàn thành phần thực hiện và cần kiểm tra lại, kéo thẻ sang Đang xem xét.
• Hoàn tất: Sau khi công việc đã được kiểm tra và không còn việc cần xử lý, kéo thẻ sang Hoàn thành.

Bạn có thể di chuyển thẻ qua lại giữa các cột bất cứ lúc nào nếu trạng thái công việc thay đổi. Ứng dụng sẽ tự động lưu trạng thái mới để bạn có thể tiếp tục công việc khi mở lại bảng.

Lưu ý: dữ liệu được lưu trong trình duyệt trên thiết bị đó. Vì vậy nếu bạn xóa dữ liệu trình duyệt hoặc chuyển sang máy khác thì dữ liệu không tự đi theo.