Giới Thiệu
Taurus Pan là một ứng dụng React tương tác giúp bạn khám phá những công thức nấu ăn ngon miệng. Ý tưởng của tôi là tạo ra một cuốn sách công thức số nơi bạn có thể nhanh chóng tìm kiếm cảm hứng cho món ăn cụ thể. Dự án này được phát triển trong khuôn khổ KendoReact Free Components Challenge, nơi tôi đã sử dụng thư viện KendoReact miễn phí để xây dựng một giao diện người dùng mượt mà, nhanh chóng và trực quan.
Mục Tiêu Dự Án
Mục tiêu của tôi là xây dựng một ứng dụng dễ sử dụng, với tính năng tìm kiếm thông minh cho phép người dùng nhận kết quả ngay khi họ nhập. Dự án này được thực hiện trong 48 giờ cho một hackathon, minh chứng rằng một ứng dụng đầy đủ chức năng có thể được xây dựng từ đầu trong thời gian ngắn với công cụ phù hợp.
Demo
🎥 Xem video demo tại đây:
👉 Video YouTube
Bạn có thể thử nghiệm ứng dụng trực tiếp tại đây:
👉 Liên kết demo trực tiếp
Và đây là kho mã nguồn:
👉 Kho mã GitHub
Hình Ảnh & Hướng Dẫn
Dưới đây là màn hình chính của ứng dụng. AppBar đóng vai trò là tiêu đề, trong khi Card được sử dụng để tạo bố cục sạch sẽ và đáp ứng cho các công thức nấu ăn.
Nhấp vào bất kỳ thẻ nào sẽ mở ra một hộp thoại với thông tin chi tiết, bao gồm biểu đồ giá trị dinh dưỡng và thành phần đánh giá.
Các Thành Phần KendoReact Sử Dụng
Để đáp ứng yêu cầu của thử thách về việc sử dụng ít nhất 10 thành phần, tôi đã tích hợp tổng cộng 12 thành phần KendoReact khác nhau để xây dựng toàn bộ giao diện người dùng từ đầu. Dưới đây là phân tích vai trò của từng thành phần:
AppBar&AppBarSection: Được sử dụng để tạo tiêu đề chính của ứng dụng, chứa tiêu đề, logo và các điều khiển chính như sắp xếp và nút "Hiển thị tất cả".Input: Trường tìm kiếm chính. Được bọc trong một thành phầnClearableInputtùy chỉnh để cải thiện trải nghiệm người dùng.Button: Được sử dụng cho một số hành động chính: nút "Hiển thị tất cả" và "Đóng", cũng như biểu tượng nút xóa trong trường tìm kiếm.CardSuite: Bộ hoàn chỉnh (Card,CardImage,CardHeader,CardTitle,CardBody,CardActions) rất cần thiết để hiển thị từng công thức một cách sạch sẽ, hấp dẫn và có cấu trúc.Dialog: Cung cấp cửa sổ modal hiển thị đầy đủ chi tiết công thức, bao gồm các bước và thông tin dinh dưỡng, mà không cần rời khỏi trang.Loader: Cung cấp phản hồi hình ảnh quan trọng cho người dùng, cho biết rằng kết quả tìm kiếm đang được xử lý.Notification&NotificationGroup: Được sử dụng để cung cấp phản hồi không gây rối cho người dùng, chẳng hạn như thông điệp "Không tìm thấy công thức nào", cải thiện trải nghiệm tổng thể.ChartSuite: Một biểu đồ thanh cao cấp (Chart,ChartSeries, v.v.) được sử dụng trongDialogđể trực quan hóa giá trị dinh dưỡng của công thức (protein, chất béo và carbohydrate).Rating: Hiển thị đánh giá sao cho mỗi công thức, xuất hiện cả trong xem trướcCardvà trong chế độ xem chi tiếtDialogđể nhấn mạnh.DropDownList: Cho phép người dùng sắp xếp kết quả tìm kiếm theo các tiêu chí khác nhau, chẳng hạn như 'Đánh giá (Cao đến Thấp)' hoặc 'Tên (A-Z)'.SvgIcon: Vẽ biểu tượng vector có thể mở rộng trong ứng dụng.xIcon: Một biểu tượng cụ thể được sử dụng vớiSvgIconđể tạo nút xóa, đảm bảo tính đồng nhất về hình ảnh với chủ đề Kendo.
Sử Dụng Trợ Lý Lập Trình AI
Trong hạng mục "Lập Trình Thông Minh, Không Khó Khăn", tôi đã sử dụng Trợ Lý Lập Trình AI KendoReact để tạo mã ban đầu cho ba tính năng:
- Tạo Dữ Liệu: Để mở rộng tập dữ liệu công thức, trợ lý đã được giao nhiệm vụ tạo 10 mục công thức mới cho tệp
recipes.json. - Logic Sắp Xếp: AI đã được yêu cầu "thêm logic sắp xếp cho các kết quả tìm kiếm bằng cách sử dụng thành phần DropDownList", tạo ra hàm
handleSortChangeban đầu. - Chức Năng "Hiển Thị Tất Cả": Trợ lý đã được yêu cầu "tạo một hàm cho nút 'Hiển thị Tất cả' để hiển thị tất cả các công thức từ tập dữ liệu gốc", tạo ra hàm
showAllRecipes.
Tích Hợp Nuclia
Một Thách Thức Bất Ngờ & Kế Hoạch B của Tôi 🚀
Kế hoạch ban đầu của tôi cho hạng mục "RAGs to Riches" là tích hợp Nuclia để tìm kiếm nâng cao, sử dụng AI. Tôi rất hào hứng khám phá các khả năng của RAG.
Nhưng… tôi đã gặp một trở ngại bất ngờ: không thể đăng ký bằng email cá nhân. Trong tinh thần hackathon, tôi không thể mất động lực. Sau khi báo cáo sự cố, tôi đã nhanh chóng chuyển hướng.
Thay vì phụ thuộc vào một dịch vụ AI bên ngoài, tôi đã triển khai một tìm kiếm mờ mạnh mẽ phía khách hàng bằng cách sử dụng Fuse.js. Điều này giữ nguyên chức năng cốt lõi mà tôi muốn và đảm bảo tôi giao một sản phẩm hoàn chỉnh, hoạt động trong thời gian hạn chót 48 giờ.
Tôi chưa có cơ hội thử nghiệm Nuclia lần này, nhưng kinh nghiệm này là một lời nhắc nhở tuyệt vời về khả năng thích ứng và giải quyết vấn đề — hai kỹ năng quý giá nhất trong bất kỳ hackathon nào.
Thực Hành Tốt Nhất
- Chọn Thành Phần Thích Hợp: Khi sử dụng KendoReact, hãy chọn các thành phần phù hợp với nhu cầu của bạn để tối ưu hóa hiệu suất.
- Tối Ưu Tìm Kiếm: Sử dụng các thuật toán tìm kiếm hiệu quả như Fuse.js để cải thiện trải nghiệm người dùng.
Cạm Bẫy Thường Gặp
- Không Kiểm Tra Đầy Đủ: Đảm bảo kiểm tra toàn diện mọi tính năng trước khi ra mắt để tránh lỗi.
- Quá Phụ Thuộc Vào Công Cụ: Đừng quá phụ thuộc vào các công cụ, luôn giữ khả năng giải quyết vấn đề.
Mẹo Tối Ưu Hiệu Suất
- Giảm Thiểu Tải Trang: Sử dụng lazy loading cho các thành phần không cần thiết để giảm tải trang.
- Thực Hành Tốt Về Mã: Viết mã sạch và có cấu trúc tốt để dễ dàng bảo trì và mở rộng trong tương lai.
Giải Quyết Vấn Đề
- Nếu bạn gặp lỗi khi chạy ứng dụng, hãy kiểm tra console để tìm thông báo lỗi và gỡ lỗi từng bước.
Câu Hỏi Thường Gặp (FAQ)
1. Taurus Pan có miễn phí không?
Có, ứng dụng hoàn toàn miễn phí và có thể sử dụng trực tiếp trên trình duyệt.
2. Tôi có thể đóng góp cho dự án không?
Chắc chắn rồi! Bạn có thể gửi pull request trên GitHub để đóng góp.
3. Ứng dụng có hỗ trợ nhiều ngôn ngữ không?
Hiện tại, ứng dụng chỉ hỗ trợ tiếng Việt, nhưng chúng tôi dự định thêm nhiều ngôn ngữ trong tương lai.
Kết Luận
Taurus Pan không chỉ là một ứng dụng tìm kiếm công thức nấu ăn thông minh, mà còn là một minh chứng cho khả năng sáng tạo và hiệu suất trong lập trình. Nếu bạn muốn tìm hiểu thêm về KendoReact và cách phát triển ứng dụng tương tác, hãy tham gia cộng đồng lập trình viên và bắt đầu dự án của riêng bạn ngay hôm nay!
