Cách xây dựng ứng dụng To-Do List trong 10 phút với Bubble
Nguồn: Joshua Haas, Dịch: Huy Hoàng
Trong bài viết này, mình sẽ chia sẻ lại quy trình xây dựng một ứng dụng quản lý công việc (To-Do List) đơn giản bằng Bubble chỉ trong khoảng 10 phút. Đây là phần tóm lược và Việt hoá dựa trên hướng dẫn gốc từ Bubble. Bài viết sẽ giúp bạn hiểu cách tạo dữ liệu, xây giao diện và thiết lập logic của ứng dụng cơ bản.
Bước 1: Tạo cấu trúc dữ liệu cho ứng dụng
Trong tab Data → chọn Data types → tạo loại dữ liệu mới To-do.
Thêm các trường:
Content– kiểu TextDone?– kiểu Yes/No
Đây là phần quan trọng nhất giúp Bubble hiểu ứng dụng của bạn sẽ quản lý những thông tin gì.
Bước 2: Tạo dữ liệu mẫu
Vào tab App Data
Tạo vài mục ví dụ như “To-do 1”, “To-do 2”…
Điều này giúp bạn xem trước dữ liệu khi xây giao diện.
Bước 3: Thiết kế giao diện hiển thị danh sách
Thêm Repeating Group để hiển thị danh sách công việc.
Cấu hình Type of content = To-do, Data source = Search for To-do.
Trong mỗi ô:
Thêm Text hiển thị nội dung công việc
Thêm Icon để đánh dấu hoàn thành
Bạn có thể mô tả thêm:
Khi mục nào được đánh dấu là “Done”, icon sẽ đổi thành dấu check màu xanh (hoặc tuỳ bạn thiết kế).
Bước 4: Tạo workflow đánh dấu công việc đã hoàn thành
Nhấn vào icon → Start/Edit workflow
Chọn “Make changes to a thing”
Thing =
Current cell’s To-doSet trường
Done?= yes
Bước 5: Thêm chức năng tạo công việc mới
Tạo một Button “New To-do”
Tạo một Popup chứa ô nhập nội dung
Workflow khi nhấn “Add To-do”:
Create a new thing → To-do
Content = giá trị từ input
Reset input
Ẩn popup
Chỉ với vài bước đơn giản, bạn đã có thể xây dựng một ứng dụng quản lý công việc hoàn chỉnh bằng Bubble mà không cần viết mã. Đây là một ví dụ tuyệt vời giúp người mới làm quen với Bubble và hiểu tư duy xây dựng sản phẩm no-code.