Chương 16. Xây dựng sản phẩm thực tế
Back To Blogs
Young Monkeys - Founder
Chương 16. Xây dựng sản phẩm thực tế
📚 Mục lục sáchĐây là chương thực hành tổng hợp — nơi bạn áp dụng tất cả kiến thức từ các chương trước để xây dựng những sản phẩm thực tế, có thể đưa vào sử dụng ngay. Mỗi mục dưới đây là một "công thức" gợi ý, bạn có thể làm theo hoặc tùy biến cho đúng nhu cầu của mình.
Làm báo cáo phân tích số liệu thực tế
Qua thực tế triển khai Vibe Coding tôi thấy rằng việc tạo ra website ứng dụng không phải là công việc lúc nào cũng cần. Thay vào đó những công việc lặp đi lặp lại thường xuyên như làm báo cáo phân tích, cập nhật hồ sơ công ty, làm landing page, viết bài lại thường xuyên hơn rất nhiều. Nghĩa là Vibe Coding len lỏi vào đời sống công việc một cách tự nhiên thay vì gượng ép để ra một thứ gì đó thoả mãn nhu cầu đi khoe.
Bây giờ chúng ta hãy sử dụng Vibe Coding để làm báo cáo phân tích. Hãy nói chúng ta cần làm báo cáo phân tích tình hình số lượng bài viết được tạo ra trong 6 tháng đầu năm 2026.
Bạn hãy mở VSCode và một phiên chat mới, yêu cầu AI kiểm tra kết nối MCP Server sau đó gõ prompt:
Sử dụng MCP lấy giúp tôi số liệu số lượng bài viết được tạo ra nửa đầu năm 2026 theo từng tháng.
AI có thể trả về kết quả thế này:
| Tháng | Số nội dung tạo mới |
|---|---|
| Tháng 1 | 0 |
| Tháng 2 | 1 |
| Tháng 3 | 2 |
| Tháng 4 | 0 |
| Tháng 5 | 5 |
| Tháng 6 | 24 |
| Tổng | 32 |
Bạn hãy gõ tiếp prompt:
Tạo trang độc lập để hiển thị biểu đồ tăng trưởng và phân tích để tôi làm báo cáo trình bày trong cuộc họp. Lưu ý tôi cần đưa lên web để tất cả admin đều xem được còn người dùng thì không.
AI có thể sinh ra thư mục bao-cao-tang-truong-noi-dung-h1-2026, bạn hãy chuột phải và chọn "Publish Content To Server". Sau đó bạn có thể truy cập vào đường dẫn {đường dẫn admin của bạn}/ezyarticle/pages/bao-cao-tang-truong-noi-dung-h1-2026/view hoặc nhờ AI lấy đường dẫn giúp bạn qua prompt:
Hãy lấy đường dẫn trang ở admin giúp tôi
Bạn truy cập vào đường dẫn và sẽ thấy giao diện báo cáo, ví dụ:
3. Landing Page
Landing Page là một trang đơn, tập trung vào một mục tiêu chuyển đổi duy nhất — ví dụ giới thiệu và bán một sản phẩm cụ thể. Prompt cho landing page thường dài hơn hẳn các ví dụ trước vì bạn cần mô tả rõ bố cục từng phần, nội dung, màu sắc/style, lẫn yêu cầu SEO ngay trong một lần — bù lại AI có thể sinh ra gần như trọn vẹn 3 file content.html, head.html, foot.html chỉ sau một prompt duy nhất. Ví dụ dưới đây là prompt dựng landing page bán sách:
Tạo giúp tôi một trang landing page giới thiệu/bán sách (dạng HTML tĩnh, dùng Bootstrap grid classes: row, col-lg-*, col-md-*, gy-4, g-3...) gồm 3 file: content.html, head.html, foot.html.
BỐI CẢNH: Đây là trang sản phẩm cho một cuốn sách kỹ thuật tên "Lập trình AI cho người mới bắt đầu: Để không bỏ lỡ xu thế của thời đại", mã sản phẩm 8936107814290, giá bìa 250.000đ, tác giả TS. Lương Anh Vũ và Tạ Văn Dũng, 5 chương, 304 trang, khổ 16x24cm, bìa mềm, ISBN 978-632-00-0185-9. Link mua hàng: /products/ai-for-beginner/checkout. Ảnh sách đặt tại /api/v1/media/lap-trinh-ai-cho-nguoi-moi-bat-dau-{1..12}.jpg (ảnh 1 là bìa chính, 2-12 là ảnh gallery bên trong sách).
CẤU TRÚC content.html (bọc trong <div class="book-page py-5"><div class="container py-3">):
1. Hero section (class "hero-glow row align-items-center gy-4 p-4 p-md-5"):
- Cột trái (col-lg-5): nhãn "Sách kỹ thuật", tiêu đề h1, mã sản phẩm, đoạn mô tả ngắn, các badge (số chương/số trang/khổ sách/loại bìa), nút CTA "Mua ngay" + giá bìa.
- Cột phải (col-lg-7): ảnh bìa sách + card "Thông tin nhanh" (tác giả, lĩnh vực, ISBN, mã vạch, chip "Còn hàng") + dải ảnh gallery (grid nhiều ảnh nhỏ, object-fit cover).
2. Section "Mô tả sách": 3 đoạn văn giới thiệu về AI và mục đích cuốn sách, đặt trong 1 card.
3. Section "Nội dung chi tiết theo chương": liệt kê 5 chương, mỗi chương 1 card (h3 tiêu đề chương + đoạn mô tả ngắn nội dung chương đó). Nội dung 5 chương: (1) Giới thiệu về AI - định nghĩa, lịch sử, ứng dụng thực tế, công cụ Python; (2) Bài toán trí tuệ nhân tạo - học máy truyền thống (SVM, cây quyết định) đến mạng nơ-ron, CNN, RNN, thực hành PyTorch; (3) Ứng dụng vào thực tế - xây dựng hệ thống AI từ đầu đến cuối; (4) ChatGPT - cơ chế hoạt động, tích hợp ứng dụng thực tế; (5) Định hướng nghề nghiệp - vai trò, kỹ năng, lộ trình phát triển trong ngành AI.
4. Section "Thông tin tác giả": 2 card song song (col-md-6) giới thiệu ngắn về từng tác giả.
5. Section "Thông tin sách": bảng (table) liệt kê các thuộc tính: Thể loại, Tác giả, Khổ sách, Số trang, Hình thức, Giá bìa, Số ISBN, Mã vạch, Đơn vị liên kết, Liên kết liên quan.
6. Section "Kết luận": card căn giữa, đoạn văn tổng kết giá trị cuốn sách + nút CTA "Mua ngay".
7. Ngoài div .container: nút mua hàng nổi (floating-buy) chỉ hiện trên mobile (d-lg-none).
YÊU CẦU STYLE (đặt trong <style> ở head.html):
- Bảng màu: nền gradient xanh nhạt pha cam nhẹ (linear-gradient 130deg từ #f8fbff qua #eef7ff đến #fffaf0), text chính #1b2340, text phụ #5c6682, màu nhấn primary #0066ff, accent cam #ff7a18.
- Font: "Trebuchet MS", "Segoe UI", system-ui, sans-serif.
- Hero có nền radial-gradient loang màu (glow effect), bo góc lớn (24px), đổ bóng mềm.
- Ảnh bìa sách: bo góc 18px, viền trắng mờ, đổ bóng đậm.
- Tiêu đề sách dùng clamp() để responsive font-size.
- Badge dạng pill (border-radius 999px), nền xanh nhạt, viền mảnh.
- Nút CTA dạng pill, gradient xanh, đổ bóng, hiệu ứng hover nhích lên nhẹ (translateY).
- Card thông tin (book-meta-card, chapter-card, author-card): bo góc 16px, viền mảnh, nền trắng/be nhạt, đổ bóng nhẹ.
- Gallery ảnh dùng CSS Grid (auto-fit, minmax 120px), ảnh cao 120px, object-fit cover, bo góc, viền trắng.
- Bảng thông tin sách: border-collapse, viền dưới mỗi dòng, cột th rộng cố định ~220px.
- Chip "Còn hàng" màu xanh lá nhạt.
- Nút mua nổi (floating-buy): position fixed góc dưới phải, z-index cao, chỉ hiện mobile.
- Responsive: giảm padding hero và margin-top card ở màn hình < 768px.
YÊU CẦU head.html (SEO/metadata):
- <title> và <meta name="description">, <meta name="keywords">, <meta name="author">.
- Open Graph tags đầy đủ (og:title, og:description, og:type="product", og:url, og:image, og:site_name).
- Twitter card tags (summary_large_image).
- JSON-LD schema.org dạng "Book": name, author (array Person), isbn, bookFormat, numberOfPages, image, offers (Offer với priceCurrency VND, price, availability InStock, url checkout).
YÊU CẦU foot.html:
- Script JS nhỏ, không dùng framework: chọn tất cả nút có href trỏ tới link checkout, gắn event click để set data-trackLabel (dùng cho tracking đơn giản), format "{text nút} - {đường dẫn hiện tại}".
Kết quả trả về là 3 khối code riêng biệt: content.html, head.html, foot.html.
Chỉ với một prompt, AI đã dựng được gần như hoàn chỉnh một landing page bán sách — đủ hero, gallery ảnh, thông tin tác giả, bảng thông tin sách và nút mua hàng nổi trên mobile:
1. Blog cá nhân hoặc chuyên môn
Phù hợp với người muốn chia sẻ kiến thức, xây dựng thương hiệu cá nhân. Các phần cần có:
- Trang chủ liệt kê bài viết mới nhất.
- Trang chi tiết bài viết, có phần bình luận (tùy chọn).
- Phân loại bài viết theo danh mục hoặc thẻ (tag).
- Trang giới thiệu tác giả.
2. Website doanh nghiệp
Phù hợp với công ty muốn có sự hiện diện chuyên nghiệp trên internet. Cấu trúc thường gồm: trang chủ, giới thiệu công ty, dịch vụ/sản phẩm, dự án tiêu biểu, tin tức, và liên hệ — tương tự ví dụ "Hồ sơ năng lực" đã thực hành ở Chương 1.
4. CRM mini
Một hệ thống quản lý khách hàng đơn giản (Customer Relationship Management) giúp bạn theo dõi khách hàng tiềm năng và lịch sử tương tác. Với quy mô nhỏ, bạn có thể xây dựng:
- Danh sách khách hàng: tên, thông tin liên hệ, nguồn tiếp cận.
- Trạng thái chăm sóc: mới liên hệ, đang tư vấn, đã chốt, đã hủy.
- Ghi chú lịch sử trao đổi với từng khách hàng.
Tạo trang quản lý khách hàng tiềm năng gồm: danh sách khách hàng (tên, số điện thoại, nguồn tiếp cận, trạng thái), có thể lọc theo trạng thái (Mới, Đang tư vấn, Đã chốt, Đã hủy), và xem lịch sử ghi chú khi bấm vào từng khách hàng.
5. Website bán hàng
Kết hợp toàn bộ kiến thức đã học: giao diện hấp dẫn (Chương 7), chức năng CRUD và tìm kiếm (Chương 8), dữ liệu sản phẩm (Chương 10), tự động hóa xác nhận đơn hàng (Chương 12), và tích hợp cổng thanh toán (Chương 13):
- Trang chủ giới thiệu sản phẩm nổi bật, danh mục chính.
- Trang danh sách sản phẩm có tìm kiếm và lọc.
- Trang chi tiết sản phẩm với ảnh, mô tả, giá, nút thêm vào giỏ.
- Giỏ hàng và quy trình thanh toán.
- Tự động gửi email xác nhận sau khi đặt hàng thành công.
Lời khuyên khi bắt tay vào một sản phẩm thực tế: đừng cố làm hoàn chỉnh mọi thứ ngay từ đầu. Hãy xây dựng phiên bản tối thiểu (MVP) trước — chạy được, giải quyết đúng vấn đề cốt lõi — rồi bổ sung dần các tính năng nâng cao.
📌 Tóm tắt chương
- Vibe Coding phù hợp nhất với các công việc lặp lại thường xuyên: làm báo cáo phân tích, blog, website doanh nghiệp, landing page, CRM mini, và website bán hàng.
- MCP Server giúp AI lấy số liệu thật từ hệ thống để dựng báo cáo trực quan, publish riêng cho admin xem mà người dùng không truy cập được.
- Một prompt mô tả đầy đủ bố cục, nội dung và style có thể giúp AI dựng gần trọn vẹn một landing page chỉ trong một lần.
- Nên bắt đầu từ phiên bản tối thiểu (MVP), sau đó mở rộng dần thay vì làm hoàn chỉnh ngay từ đầu.