Bài 12: Tạo mini tool hữu ích — Phần 2: Form thu thập khách hàng & bảng so sánh
Giai đoạn 3: BIẾT LÀM 🔨 Thời lượng: 45-90 phút (đọc + thực hành + bài tập) Công cụ: Google AI Studio — aistudio.google.com
🎯 Mục Tiêu Bài Học
- Sau bài này, bạn sẽ tạo được form thu thập thông tin khách hàng (lead generation form) đẹp và chuyên nghiệp
- Sau bài này, bạn sẽ tạo được bảng so sánh sản phẩm/dịch vụ tương tác
- Sau bài này, bạn sẽ hiểu cơ bản về lưu trữ dữ liệu với Firebase (sổ ghi chép trên mây)
💡 Ví Dụ Thực Tế
Anh Phong dạy tiếng Nhật online. Anh muốn thu thập thông tin người quan tâm (gọi là “lead” — khách hàng tiềm năng) trước khi khóa học mở bán. Anh tạo form “Đăng ký nhận thông tin khóa học” gồm: tên, email, số điện thoại, trình độ hiện tại (mới bắt đầu/N5/N4/N3), và câu hỏi “Bạn muốn học tiếng Nhật để làm gì?”. Mỗi khi có người điền form, dữ liệu được lưu vào Firebase (tưởng tượng như một bảng Google Sheets trên mây mà AI tự tạo cho bạn). Anh Phong mở ra xem được ai đăng ký, bao nhiêu người, và liên hệ họ khi khóa học sẵn sàng.
📚 Kiến Thức Cần Biết
Form thu thập thông tin là “cổng vào” để khách hàng tiềm năng để lại thông tin cho bạn. Giống như khi bạn vào siêu thị và họ mời bạn điền phiếu rút thưởng — bạn điền tên, SĐT, siêu thị có thông tin để liên hệ bạn sau.
Firebase (đọc là “fai-bês”) là dịch vụ của Google, bạn có thể hiểu đơn giản nó là “sổ ghi chép trên mây” (cloud database). Khi ai đó điền form, dữ liệu sẽ được lưu vào Firebase — giống như tự động ghi vào sổ mà bạn có thể mở xem bất kỳ lúc nào, từ bất kỳ máy tính nào.
Google AI Studio có thể tự động kết nối Firebase cho bạn. Bạn chỉ cần yêu cầu “lưu dữ liệu form vào database” — AI sẽ tự thiết lập mọi thứ, bạn chỉ cần bấm đồng ý khi nó hỏi “Bạn có muốn kết nối Firebase không?”
Bảng so sánh sản phẩm (comparison table) giúp khách hàng dễ quyết định khi có nhiều lựa chọn. Giống menu nhà hàng có 3 set: set A, set B, set VIP — so sánh bên cạnh nhau để khách chọn nhanh.
🧪 Thực Hành Từng Bước
Phần A — Tạo form thu thập khách hàng:
- Mở Google AI Studio
- Gõ prompt:
Tạo trang đăng ký thu thập thông tin khách hàng tiềm năng (lead generation page) bằng tiếng Việt:
NỘI DUNG TRANG:
- Tiêu đề: "[TIÊU ĐỀ HẤP DẪN - VD: Đăng Ký Nhận Ưu Đãi Đặc Biệt]"
- Mô tả ngắn: 2-3 câu giải thích lý do đăng ký
- Hình ảnh hoặc icon bên cạnh form
FORM GỒM CÁC TRƯỜNG:
- Họ và tên (bắt buộc)
- Số điện thoại (bắt buộc)
- Email (bắt buộc)
- [THÊM TRƯỜNG TÙY CHỈNH - VD: "Bạn quan tâm dịch vụ nào?" dạng dropdown: Dịch vụ A / Dịch vụ B / Dịch vụ C]
- [THÊM TRƯỜNG NẾU CẦN]
SAU KHI GỬI:
- Hiển thị thông báo "Cảm ơn bạn! Chúng tôi sẽ liên hệ trong 24h"
- Lưu dữ liệu vào database
THIẾT KẾ:
- Form nằm bên phải, nội dung giới thiệu bên trái (desktop)
- Trên mobile: nội dung trên, form dưới
- Nền gradient nhẹ, form có nền trắng với đổ bóng
- Nút "Đăng ký ngay" lớn, nổi bật
- Có validation (kiểm tra): nếu bỏ trống trường bắt buộc, hiện lỗi màu đỏ- nhấn Run (nút tam giác)
- ⚠️ Bước quan trọng: Nếu AI hiển thị thông báo hỏi “Would you like to set up Firebase?” hoặc “Kết nối Firebase?”, hãy bấm “Yes” / “Đồng ý”. AI sẽ tự tạo database cho bạn
- Thử điền form trên khung kết quả chat và bấm gửi — xem thông báo cảm ơn có hiện không
- Nếu đã kết nối Firebase, dữ liệu sẽ được lưu. Bạn có thể yêu cầu:
Thêm một trang admin đơn giản để xem danh sách tất cả người đã đăng ký. Trang admin hiển thị dạng bảng gồm: STT, Họ tên, SĐT, Email, Ngày đăng ký.Phần B — Tạo bảng so sánh sản phẩm/dịch vụ:
- Tạo project mới hoặc tiếp tục trong chat, gõ:
Tạo bảng so sánh [SỐ] gói dịch vụ/sản phẩm bằng tiếng Việt:
CÁC GÓI:
1. [TÊN GÓI 1] - Giá: [GIÁ] - Tính năng: [LIỆT KÊ]
2. [TÊN GÓI 2] - Giá: [GIÁ] - Tính năng: [LIỆT KÊ]
3. [TÊN GÓI 3] - Giá: [GIÁ] - Tính năng: [LIỆT KÊ]
THIẾT KẾ:
- 3 cột song song, gói giữa (phổ biến nhất) nổi bật hơn với viền và badge "Phổ biến nhất"
- Mỗi tính năng có icon check (có) hoặc x (không có)
- Nút "Chọn gói" ở dưới mỗi cột
- Có hiệu ứng hover khi rê chuột vào mỗi cột
- Responsive: trên mobile hiển thị dạng card xếp dọc- nhấn Run (nút tam giác) và xem kết quả
✅ Kết Quả Đầu Ra
Bạn sẽ có: (1) Form thu thập khách hàng hoạt động được, có validation, và (tùy chọn) kết nối Firebase để lưu dữ liệu, và (2) Bảng so sánh sản phẩm/dịch vụ chuyên nghiệp.
💡 Mẹo & Lưu Ý
- Form thu thập thông tin không nên có quá nhiều trường — 3-5 trường là đủ. Càng nhiều trường, càng ít người điền
- Nếu không muốn dùng Firebase (phức tạp quá), bạn có thể tạo form đơn giản hơn: khi bấm gửi, hiển thị thông báo cảm ơn + tự động mở email/Zalo với nội dung đã điền sẵn. Gõ: “Thay vì lưu database, khi bấm gửi hãy mở link mailto với nội dung form đã điền để gửi email cho tôi tại [EMAIL CỦA BẠN]”
- ⚠️ Lỗi thường gặp: Firebase đôi khi không kết nối được. Nếu vậy, thử: (a) đảm bảo bạn đã đăng nhập Google, (b) thử bấm đồng ý lại, © gõ “Hãy thiết lập lại Firebase cho project này”
📝 Bài Tập Về Nhà
Tạo 1 form thu thập thông tin cho chính doanh nghiệp/dịch vụ bạn. Thử điền form 3 lần với thông tin giả để kiểm tra hoạt động bình thường. Nếu đã kết nối Firebase, kiểm tra dữ liệu có lưu đúng không.
🏆 Achievement Bài 12
- [ ] Hoàn thành đọc phần kiến thức
- [ ] Làm xong các bước thực hành
- [ ] Nộp bài tập về nhà
- [ ] Ghi chú những điều học được
Bài tiếp theo: Website nhiều trang — Phần 1 🚀