[Vibe Coding Thực Chiến #01] Đừng Bắt Đầu Từ Con Số 0: Tại Sao Tôi Chọn EzyPlatform Cho Dự Án Đầu Tiên?
Tác giả: Lee
Series: Vibe Coding Thực Chiến Cùng EzyPlatform (#01)
Hạ tầng thực nghiệm: VPS Ubuntu 22.04 LTS (157.66.47.xxx) | EzyPlatform Enterprise v1.x
Bộ công cụ: VS Code + Extensionyoungmonkeys.ezyarticle+ Claude Code / Codex
📌 Lời tác giả: Đây là bài viết mở màn cho chuỗi bài ghi chép thực chiến về hành trình tự tay xây dựng sản phẩm số hoàn chỉnh bằng phương pháp Vibe Coding kết hợp với nền tảng EzyPlatform. Toàn bộ mã nguồn, cấu hình và hình ảnh trong bài đều được chụp trực tiếp từ VPS cá nhân của mình, không dùng ảnh mạng, không lý thuyết suông. Chúc anh em có những phút giây đọc bài thú vị và lượm lặt được nhiều kinh nghiệm hữu ích!
1. Hào hứng với Vibe Coding và bài học "vỡ mộng" đầu tiên
Chắc hẳn anh em dev dạo gần đây lướt đâu cũng thấy cụm từ Vibe Coding — từ X (Twitter), Reddit cho tới các cộng đồng lập trình ở Việt Nam. Sau bài đăng gây bão của Andrej Karpathy (cựu Giám đốc AI của Tesla), đâu đâu cũng thấy mọi người hào hứng khoe làm xong cả một trang web, một con app chỉ trong vài tiếng bằng cách chat với AI. Nghe cuốn hút thật sự!
Mình cũng không ngoại lệ. Bản tính tò mò, mình mở ngay VS Code, kết nối Claude 3.7 Sonnet và ChatGPT Codex rồi gõ một câu prompt rất tự tin:
"Viết cho tôi một web bán bánh ngọt có giỏ hàng, thanh toán và quản lý đơn hàng."
Trong 15 phút đầu tiên, trải nghiệm công nhận là "phê" 🎉:
- AI nhả code thoăn thoắt, giao diện hiện ra chỉn chu, responsive mượt mà trên cả điện thoại lẫn máy tính.
- Danh sách sản phẩm nhìn rất bắt mắt, bấm "Thêm vào giỏ" là badge giỏ hàng nhảy số tanh tách.
- Cảm giác lúc đó đúng nghĩa là: Thời kỳ phải ngồi gõ từng dòng boilerplate code mỏi tay đã kết thúc rồi!
Nhưng hỡi ôi, đời không như là mơ 😣! Đến khi bắt đầu tính chuyện đưa nó thành một sản phẩm thực tế có người dùng thật, một "rổ" vấn đề cốt lõi lập tức ập tới:
- F5 là bay màu giỏ hàng: Dữ liệu chỉ lưu tạm trong RAM trình duyệt hoặc
localStorage. Khách lỡ tay tắt tab hoặc đổi thiết bị là giỏ hàng biến mất không dấu vết. - Không có Backend & Database thật: Đơn hàng lưu ở đâu? Trừ tồn kho thế nào? Validate giá tiền ra sao khi toàn bộ logic chỉ chạy hời hợt ở phía frontend?
- Không có Admin Dashboard: Đơn đặt xong thì ai duyệt? Ai đổi trạng thái từ "Đang giao" sang "Đã nhận"? Chẳng lẽ dev phải mở file code ra xem log?
- Thiếu sạch các dịch vụ tích hợp: Chưa có dịch vụ gửi mail (SMTP) để gửi hóa đơn xác nhận, chưa có cổng thanh toán như VietQR hay VNPay.
- Deploy thì rối như tơ vò: AI nhả ra một mớ file HTML/JS rời rạc. Chưa có web server (Nginx), chưa có domain, chưa có chứng chỉ bảo mật SSL HTTPS.
Đến lúc mình yêu cầu AI: "Bây giờ viết tiếp backend, tạo database schema rồi dựng thêm trang admin cho tao", thì mọi thứ nhanh chóng trở thành thảm họa 😡:
- AI bắt đầu bị "ảo giác" (hallucination), sinh code chắp vá và mâu thuẫn lẫn nhau.
- Các file code phình to từ vài trăm lên hàng nghìn dòng.
- Sửa được cái nút giỏ hàng thì gãy chức năng gửi mail; thêm một cột trong database thì trang admin không map được dữ liệu.
- Context window của AI chạm trần khiến nó "quên sạch" những quy ước kiến trúc vừa thỏa thuận trước đó 10 phút.
Sau cả tuần loay hoay bực bội, mình rút ra một bài học xương máu:
👉 Vibe coding mà không có một nền tảng hạ tầng (foundation platform) vững chắc thì chỉ dừng lại ở mức làm demo cho vui, không bao giờ đưa vào sử dụng thực tế được!
2. Vibe Coding thực sự là gì dưới góc nhìn làm sản phẩm?
Sau cú "vấp ngã" đó, mình nhìn nhận lại bản chất của Vibe Coding một cách sòng phẳng và thực tế hơn:
Sơ đồ so sánh luồng phát triển phần mềm: Lập trình truyền thống (gõ syntax thủ công) vs Vibe Coding thực chiến (tập trung kiến trúc & nghiệp vụ).
Nhìn vào sơ đồ trên, có 2 điểm then chốt chúng ta cần hiểu đúng:
- Vibe Coding tuyệt đối không phải là "không cần biết gì cũng làm được app":
Nếu bạn không nắm được logic nghiệp vụ hay cách thức hệ thống vận hành, AI sẽ chỉ gen ra cho bạn một "bãi rác code" khổng lồ mà chính bạn cũng không thể nào sửa chữa hay bảo trì được. - Bản chất của Vibe Coding là sự giải phóng sức lao động:
Thay vì dành 80% thời gian còng lưng gõ từng ký tự cú pháp, tra cứu syntax hay lặp lại các đoạn boilerplate nhàm chán, bạn tập trung toàn bộ chất xám vào System Design, trải nghiệm người dùng (UX), luồng nghiệp vụ và kiểm soát chất lượng đầu ra. AI sẽ đảm nhận vai trò người thực thi (implementation) theo đúng spec bạn đưa ra.
[!TIP] Bí kíp cốt lõi (Recommend 👍): Đừng bao giờ bắt AI "phát minh lại bánh xe"! Những thứ mang tính nền tảng như Authentication, Database ORM, CMS, Quản trị phân quyền, hay Gửi email tự động... đều đã có giải pháp chuẩn hóa rồi. Bắt AI tự code lại từ đầu vừa tốn token, vừa rước thêm bug vào người.
Đó chính là lý do mình quyết định chọn EzyPlatform làm bệ phóng hạ tầng cho toàn bộ hành trình Vibe Coding này.
3. Tại sao lại là EzyPlatform?
Mình biết đến EzyPlatform qua trang chủ chính thức ezyplatform.com và chuỗi bài hướng dẫn Vibe Coding của đội ngũ phát triển:
Giao diện trang chủ EzyPlatform — Nền tảng Low-code nguồn mở được thiết kế sẵn sàng cho việc kết hợp cùng AI.
Họ đã chuẩn hóa một bộ tài liệu bài bản gồm 19 chương, đi từ tư duy căn bản đến việc xây dựng tính năng nâng cao:
Hệ thống 19 chương học được thiết kế theo lộ trình thực chiến.
Đặt EzyPlatform lên bàn cân so sánh với các cách làm phổ biến hiện nay, anh em sẽ thấy ngay lý do vì sao nó lại phù hợp với Vibe Coding đến vậy:
| Hạng mục công việc | Tự code từ đầu cùng AI | WordPress / No-Code kéo thả | Vibe Coding trên EzyPlatform |
|---|---|---|---|
| Hạ tầng & Server | Tự dựng Nginx, SSL, Docker, DB (rất dễ lỗi) | Dễ cài nhưng phụ thuộc plugin nặng nề | Chạy cực mượt trên VPS Ubuntu bằng Java core |
| Quản trị nội dung (CMS) | AI phải tự viết trang Admin, CRUD bảng | Có sẵn nhưng tùy biến giao diện rất tù | Module EzyArticle có sẵn, giao diện hiện đại |
| Thương mại điện tử | Tự thiết kế Order, Cart, logic tính tiền | Dùng WooCommerce (cồng kềnh, thừa thãi) | Plugin E-commerce tối ưu, chuẩn nghiệp vụ |
| Giao tiếp dữ liệu với AI | Copy-paste code hoặc schema thủ công | Rất khó cắm trực tiếp với LLM | Tích hợp GraphQL kiêm MCP Server cho AI tự query |
| Tùy biến giao diện | Tự viết HTML/CSS, dễ vỡ responsive | Bị đóng khung trong theme bán sẵn | Dùng theme Freestyle rỗng, tự do sáng tạo UI |
| Tiêu hao Token của AI | Đốt hàng tá token vì nhồi cả context backend | Không hỗ trợ workflow cho AI | Cực kỳ tiết kiệm token nhờ kiến trúc 4 file rõ ràng |
4. "Mục sở thị" hạ tầng thực tế trên VPS
Nói có sách, mách có chứng — toàn bộ những gì mình chia sẻ đều đang chạy thật 100% trên VPS cá nhân của mình, không dùng hình ảnh dựng sẵn hay lý thuyết suông.
4.1. Thông số tài nguyên và tiến trình hệ thống (Ubuntu 22.04 LTS)
Mình sử dụng một con VPS cấu hình vừa phải: 2 vCPU, 4GB RAM chạy Ubuntu 22.04 LTS với IP 157.66.47.xxx.
Mở terminal SSH vào kiểm tra trực tiếp:
Terminal thực tế trên VPS 157.66.47.xxx: Hệ thống Ubuntu đang chạy mượt mà cả Nginx, Web core và Admin core.
Nền tảng chạy bằng Java core tối ưu tài nguyên rất đáng nể:
- Tiến trình
AdminStartup(port nội bộ 9090) gánh trọn vẹn dàn plugin:ecommerce,ezylogin,graphql,freestyle,ezydelivery,ezyarticle,logs-monitor,ezypayment,ezymail,ezysupport... - Tiến trình
WebStartup(port nội bộ 8080) phục vụ traffic người dùng. - Nginx đứng ngoài cùng làm reverse proxy, phân luồng traffic và xử lý chứng chỉ bảo mật SSL HTTPS. Tổng RAM ăn chưa tới 1.5GB khi nhàn rỗi!
4.2. Giao diện quản trị EzyPlatform Admin
Trang quản trị hệ thống tại địa chỉ: https://1576647xxx-admin.interdata.io.vn/login:
Giao diện đăng nhập Admin EzyPlatform sạch sẽ, bảo mật.
Vào bên trong Dashboard quản trị trung tâm:
Dashboard EzyPlatform: Đầy đủ các công cụ quản lý Bài viết, Đơn hàng, Thành viên, Logs hệ thống.
4.3. Theme Freestyle & Quản lý Page Fragments
Đây là 2 tính năng "chân ái" cho dân Vibe Coding:
-
Theme Freestyle: Cho phép chọn layout rỗng (Empty Layout) để AI tha hồ vẽ giao diện mà không bị dính bất kỳ thành phần thừa nào của theme mẫu.
Giao diện Freestyle Settings tại /freestyle/settings: Bật Empty Layout để làm chủ 100% mã HTML. -
Page Fragments: Cho phép chúng ta tách Header, Footer hoặc các block giao diện dùng chung ra một nơi riêng, các trang con chỉ việc tái sử dụng lại mà không cần copy code lặp lại.
Quản lý các khối giao diện dùng chung tại /ezyarticle/pages/fragments.
4.4. Template Explorer & Cơ chế Access Token
-
Template Explorer: Giúp bạn tra cứu nhanh cấu trúc template hệ thống khi cần kiểm tra cú pháp.
Template Explorer: Xem trực tiếp cây thư mục template Thymeleaf trên server. -
Quản lý Access Token: Nơi lấy token bảo mật để extension trên VS Code bắt tay đồng bộ dữ liệu trực tiếp với VPS.
Trang cá nhân /admins/me: Nơi sinh chuỗi Access Token cho extension.
4.5. Cấu hình hệ thống linh hoạt
Mọi thiết lập như loại file được phép upload (MIME types), dung lượng tối đa, chia sẻ token giữa các tên miền đều nằm gọn trong /settings/regular:
Trang cài đặt hệ thống: Quản lý tập trung mọi thông số vận hành của dự án.
5. Workflow 4 bước khi Vibe Coding cùng EzyPlatform
Xuyên suốt chuỗi bài thực chiến này, chúng ta sẽ áp dụng một workflow khép kín, tinh gọn và cực kỳ sướng tay:
Quy trình 4 bước: Mô tả Spec ➔ AI sinh mã nguồn chuẩn ➔ Preview trên VPS ➔ Xuất bản 1-click.
- Mô tả yêu cầu (Spec & Context): Đưa ra yêu cầu cụ thể, rõ ràng cho AI Assistant (Claude Code, ChatGPT hoặc Cursor) ngay trong editor.
- AI sinh mã nguồn theo quy chuẩn: AI viết code theo cấu trúc 4 file tinh gọn của EzyArticle:
content.html(nội dung),head.html(CSS/Font),foot.html(JS logic) vàmeta.json(metadata). - Xem trước (Preview): Dùng extension
youngmonkeys.ezyarticleđể xem trước trực tiếp trên domain VPS ở trạng thái bản nháp (Draft), an toàn và bảo mật. - Xuất bản (Publish): Khi đã ưng ý, bấm 1-click xuất bản thẳng lên server. Toàn bộ lịch sử được quản lý chặt chẽ bằng Git để sẵn sàng rollback nếu có sự cố.
6. Hai bài học kinh nghiệm trước khi bắt tay vào gõ lệnh
Từ những lần "vấp ngã" thực tế, mình rút ra 2 lưu ý vàng này gửi tới anh em:
Bài học 1: Tránh bẫy "Mega-Prompt" — Chia nhỏ bài toán để trị (Divide and Conquer)
Đừng bao giờ quăng cho AI một câu prompt dài ngoằng kiểu: "Làm cho tao một sàn thương mại điện tử như Shopee đầy đủ tính năng". AI chắc chắn sẽ bị "ngáo" và nhổ ra một đống code rác.
Cách làm khôn ngoan là chia nhỏ bài toán theo từng chặng:
- Chặng 1: Định hình Layout & Khung sườn tổng thể.
- Chặng 2: Hoàn thiện giao diện tĩnh (Static UI) cho chuẩn chỉ.
- Chặng 3: Thêm tương tác phía Client (State & JavaScript cơ bản).
- Chặng 4: Cuối cùng mới đấu nối dữ liệu thật qua API Backend.
Bài học 2: Chú trọng bảo mật ngay từ ngày đầu tiên (Lưu ý ⚠️)
Khi làm việc trên server thật, hãy tập thói quen đưa các file chứa thông tin nhạy cảm (.env, environment.json, secret keys) vào .gitignore. Khi viết bài chia sẻ ra ngoài, luôn nhớ masking địa chỉ IP VPS (157.66.47.xxx), tên miền admin và token để tránh việc bị các bot tự động dò quét lỗ hổng server của bạn!
7. Tổng kết & Kỳ tiếp theo
🎯 3 điểm cốt lõi cần nhớ:
- Vibe Coding không phải trò đùa: Đây là phương pháp làm việc hiện đại giúp dev x3, x5 tốc độ, nhưng bạn vẫn phải là người nắm chắc kiến trúc và bài toán nghiệp vụ.
- Đứng trên vai người khổng lồ: EzyPlatform lo trọn gói phần hạ tầng backend, DB, Auth và CMS, giải phóng đôi tay bạn để tập trung vào sản phẩm.
- Thực chiến 100%: Toàn bộ dự án được triển khai trên hạ tầng VPS thật
157.66.47.xxx, không vẽ vời lý thuyết.
🚀 Kỳ tiếp theo (#02): Setup "Bàn Làm Việc" Chuẩn Chỉ
Ở bài tiếp theo, chúng ta sẽ bắt tay vào phần chuẩn bị đồ nghề thực tế:
- Hướng dẫn kết nối SSH vào VPS Ubuntu và kiểm tra EzyPlatform.
- Cài đặt VS Code, Extension
youngmonkeys.ezyarticlevà thiết lập fileenvironment.json. - Đặc biệt: Khám phá 3 bẫy lỗi kinh điển khi setup (lỗi MIME type chặn upload, lỗi preview trắng tinh do token sharing, và theme mặc định đè layout) cùng cách fix trong 1 nốt nhạc!
👉 Anh em đón đọc bài tiếp theo nhé:
[Vibe Coding Thực Chiến #02] Setup "Bàn Làm Việc": VS Code, VPS Ubuntu Và EzyPlatform Để Vibe Code Mượt Nhất
💬 Góc trò chuyện: Anh em đã từng thử nghiệm Vibe Coding vào dự án thực tế nào chưa? Trải nghiệm lúc đó là "phê" hay là "vỡ mộng" vì đống code rối rắm? Cứ thoải mái comment chia sẻ bên dưới bài viết này, mình cùng ngồi chém gió và trao đổi kinh nghiệm nhé!
Đừng quên bấm Upvote 👍 và Bookmark 🔖 bài viết để không bỏ lỡ các kỳ tiếp theo trong series nhé. Cảm ơn anh em rất nhiều!
All Rights Reserved
