Tọa đàm AI Thực Chiến · ĐH Nông Lâm TP.HCM · Hậu trường
Cách làm app Từ điển bằng AI, không cần code
App 180 loài không dựng một lần là xong. Trang này ghi lại ý tưởng ban đầu, cách UX/UI được cải thiện qua từng vòng, và prompt thực tế đã dùng — để bạn áp dụng được cho ngành của mình.
01 Ý tưởng ban đầu — đơn giản hơn bạn nghĩ
Xuất phát điểm không phải "làm app lớn". Chỉ là một câu hỏi: sinh viên nông lâm cần tra cứu loài — sao không có cái gì nhanh hơn lật giáo trình?
YÊU CẦUTra cứu được 100 loài cây phổ biến, lọc theo nhóm, xem chi tiết từng loài. Chạy offline trên điện thoại, không cần cài đặt.
LÝ DOWeb app tĩnh (HTML + JSON) là lựa chọn tốt nhất: ai cũng có trình duyệt, không cần App Store, không cần server, không tốn chi phí hosting. Học sinh dùng điện thoại là chính.
NGUYÊN TẮCLàm cái nhỏ trước cho chạy được. 100 loài cây (2 lĩnh vực) trước. Chạy ổn rồi mới mở rộng chăn nuôi và thủy sản.
KEY MESSAGE: con người vẫn là người NGHĨ và QUYẾT. Việc tự tìm hiểu trường có 4 khoa, quyết định mở rộng cho khớp, chủ động hỏi AI nên gom loài vào nhóm nào — đó là phần "người". AI lo gom dữ liệu, vẽ ảnh, viết giao diện.
02 UX/UI cải thiện qua 5 vòng — mỗi vòng một prompt
Không thiết kế từ đầu rồi code một lần. Mỗi vòng đưa cho AI một yêu cầu cụ thể, xem kết quả, rồi nói tiếp cần sửa gì.
V1 Chạy được
Danh sách + chi tiết cơ bản
Hiển thị 100 loài dạng danh sách, bấm vào xem 6 trường thông tin. Không ảnh, không filter. Mục tiêu: có thứ chạy được trước.
V2 Nhìn được
Thêm ảnh bản khắc thực vật
Dùng AI tạo ảnh theo phong cách botanical illustration (bản khắc cổ trắng nền giấy). Mỗi loài 2 ảnh: đại diện + chi tiết nhiều góc nhìn. Kết quả: app trông "chuyên môn" hơn hẳn, sinh viên nhận ra ngay.
V3 Tìm được
Thanh tìm kiếm + lọc theo nhóm
180 loài không thể cuộn. Thêm tìm kiếm tên tiếng Việt/tên khoa học và bộ lọc 4 lĩnh vực. Prompt chỉ nói: "thêm filter, giữ nguyên hết mọi thứ khác".
V4 Mobile OK
Responsive + lưới gọn trên điện thoại
Desktop 3 cột → mobile 2 cột. Ảnh thu nhỏ đúng tỉ lệ. Bấm vào ô mở trang chi tiết trượt lên mượt. Prompt: "kiểm tra và sửa lỗi hiển thị trên màn hình 390px".
V5 Dùng lâu
Tab 4 lĩnh vực + tinh chỉnh trải nghiệm
Tab chuyển nhanh Nông học / Lâm nghiệp / Chăn nuôi / Thủy sản ngay trên đầu. Làm xong rồi vẫn mài cho mượt.
03 Prompt thực tế — 3 ví dụ dùng công thức 5 điều
Mỗi prompt bên dưới viết theo đúng công thức Nói rõ 5 điều trong handout chính. Đây là lời nhờ thật, không phải ví dụ giả.
Gom dữ liệu loài — 100 cây trồng đầu tiên
ViệcViết thông tin chi tiết cho 10 loài cây trồng phổ biến ở miền Nam Việt Nam, mỗi loài gồm 8 trường: tên tiếng Việt, tên khoa học, họ thực vật, mô tả ngắn, điều kiện trồng, mùa vụ chính, sâu bệnh thường gặp (tên tiếng Việt + tên khoa học), giá trị sử dụng.
Làm tayTra từng giáo trình nông học, mỗi loài mất 20–30 phút ghi chú.
MuốnJSON hợp lệ, đúng cấu trúc — đây là file JSON mẫu của 1 loài đã có (đính kèm).
Có sẵnFile JSON mẫu 1 loài để AI hiểu cấu trúc cần theo.
Dễ saiĐừng bịa số liệu. Phần sâu bệnh phải ghi tên tiếng Việt + tên khoa học. Nếu loài này ở Việt Nam khác với tài liệu nước ngoài thì nói rõ, đừng tự sửa. Đừng làm ngay — hỏi lại mình trước khi bắt đầu.
Kết quả: AI trả về JSON đúng cấu trúc, 10 loài trong ~2 phút. Kiểm tra lại 30% bằng cách đối chiếu với sách giáo khoa. Phát hiện 2 chỗ sâu bệnh bị nhầm tên khoa học — sửa và prompt lại lần 2 với ghi chú rõ lỗi đó.
Mở rộng sang chăn nuôi — thêm 40 loài vật nuôi
ViệcThêm dữ liệu 40 loài vật nuôi phổ biến ở Việt Nam vào bộ từ điển hiện có.
Làm tayChưa có bộ dữ liệu chăn nuôi nào — phải xây từ đầu.
MuốnJSON 40 loài, cùng cấu trúc file hiện tại nhưng thay trường "mùa vụ / loại đất" thành "giống phổ biến ở VN / thức ăn / chuồng trại / bệnh thường gặp" — vì con vật cần thông tin khác cây trồng.
Có sẵnFile JSON hiện tại (5 loài cây mẫu) để AI thấy cấu trúc đang dùng.
Dễ saiƯu tiên giống địa phương Việt Nam, không phải giống nước ngoài. Hỏi lại nếu không chắc loài đó có phổ biến thật không.
Kết quả: AI tự đề xuất chia nhóm: Trâu bò · Heo · Gia cầm · Dê cừu · Thỏ · Cá nước ngọt. Mình duyệt lại cấu trúc nhóm trước khi để AI điền dữ liệu — đây là phần "người quyết".
Cải thiện UX — thêm tab lọc 4 lĩnh vực
ViệcThêm 4 tab lọc (Nông học · Lâm nghiệp · Chăn nuôi · Thủy sản) vào thanh tìm kiếm hiện tại. Bấm tab thì danh sách lọc ngay, không tải lại trang.
Làm tayHiện tại phải cuộn qua 180 loài để tìm theo lĩnh vực.
Muốn4 nút tab trên thanh tìm kiếm. Tab đang chọn highlight màu xanh lá. Kết hợp được với ô tìm kiếm — vừa lọc lĩnh vực vừa tìm tên.
Có sẵnFile index.html hiện tại (đính kèm).
Dễ saiChỉ thêm tab, không đổi bất kỳ thứ gì khác — màu sắc, font, layout đang OK rồi. Đừng "cải thiện" thêm khi mình không hỏi.
Kết quả: Thêm được tab đúng yêu cầu. Lần đầu AI tự ý đổi màu nút tìm kiếm — nhắc lại câu "không đổi bất kỳ thứ gì khác" và AI sửa lại ngay.
04 Tự làm một bộ từ điển cho ngành của bạn
Toàn bộ là web app mã nguồn mở — bạn không cần biết lập trình để làm được một bộ tương tự. Chỉ cần biết ngành của mình, biết cần gì, rồi dùng công thức 5 điều để bàn với AI từng bước một.