[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?
Series: Vibe Coding Thực Chiến Cùng EzyPlatform
Tác giả: Lee
Tags:Vibe Coding,AI,EzyPlatform,DevOps,Web Development
Hạ tầng thực nghiệm: VPS Ubuntu 22.04 LTS (157.66.47.xxx) | EzyPlatform Enterprise v1.x
📌 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ố 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 minh họa trong bài đều được thực hiện trên chính VPS cá nhân của mình, không dùng ảnh mạng, không lý thuyết suông. Chúc các bạn có những phút giây đọc bài thú vị!
1. Hào hứng với Vibe Coding và bài học thực tế
Đầu năm 2025, thuật ngữ "Vibe Coding" bùng nổ mạnh mẽ sau những chia sẻ của Andrej Karpathy. Trên X (Twitter), Reddit hay các cộng đồng lập trình, đâu đâu cũng thấy mọi người hào hứng chia sẻ việc tạo ra ứng dụng hoàn chỉnh chỉ trong vài tiếng bằng cách chat với AI.
Mình cũng không ngoại lệ. Là người thích thử nghiệm công cụ mới, mình mở VS Code, kết nối Claude 3.7 Sonnet và ChatGPT Codex rồi đưa ra một 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 thực sự rất ấn tượng. AI generate ra giao diện chỉn chu, responsive mượt mà, có danh sách sản phẩm, bấm thêm vào giỏ hàng số lượng cập nhật ngay lập tức. Cảm giác như thời kỳ phải ngồi viết từng dòng boilerplate code đã kết thúc.
Nhưng khi bắt đầu muốn biến nó thành một sản phẩm thực tế có người dùng thật, các vấn đề cốt lõi lập tức xuất hiện:
- Dữ liệu không bền vững (Persistence): F5 trình duyệt là giỏ hàng mất sạch, vì dữ liệu lúc này chỉ lưu tạm trong memory hoặc
localStorage. - Thiếu Backend & Database: Không có database thực sự, không có API backend để xử lý transaction, validate dữ liệu hay trừ tồn kho.
- Không có Admin Dashboard: Không có trang quản trị để người vận hành duyệt đơn, xem thống kê hay cập nhật trạng thái đơn hàng.
- Thiếu các tích hợp hệ thống (System Integrations): Chưa có mail service (SMTP) để gửi xác nhận đơn, chưa có cổng thanh toán như VietQR hay VNPay.
- Khâu triển khai (Deployment): Source code sinh ra rời rạc, chưa cấu hình web server (Nginx), chưa có domain, chưa có chứng chỉ SSL HTTPS.
Khi mình yêu cầu AI viết tiếp backend, tạo database schema rồi dựng thêm trang admin, mọi thứ nhanh chóng trở nên mất kiểm soát. AI bắt đầu bị hallucinate (sinh code sai lệch), các file code phình to từ vài trăm lên hàng nghìn dòng. Sửa được tính năng giỏ hàng thì hỏng chức năng gửi mail; thêm bảng database thì trang admin không map được dữ liệu; context window của AI chạm trần khiến nó không còn nhớ được các thỏa thuận kiến trúc trước đó.
Sau vài ngày loay hoay, mình nhận ra một thực tế rõ ràng: Vibe coding mà không có một nền tảng hạ tầng (foundation platform) vững chắc thì rất khó để đưa sản phẩm vào sử dụng thực tế.
2. Vibe Coding thực sự là gì dưới góc nhìn làm sản phẩm?
Sau trải nghiệm đó, mình nhìn nhận lại bản chất của Vibe Coding một cách thực tế hơn:
flowchart LR
subgraph Traditional["1. Lập trình truyền thống"]
A1["Developer"] -->|"Tự viết syntax & boilerplate"| B1["Codebase phức tạp"]
B1 --> C1["Hệ thống thực thi"]
end
subgraph VibeCoding["2. Vibe Coding Thực Chiến"]
A2["Developer / Creator"] -->|"Thiết kế User Flow, Spec & Business Logic"| B2["AI Assistant"]
B2 -->|"Generate code theo chuẩn quy cách"| C2["Nền tảng hạ tầng có sẵn"]
C2 --> D2["Sản phẩm chạy thực tế"]
end
- Vibe Coding không có nghĩa là "không cần hiểu biết gì": Nếu không nắm được logic sản phẩm hay cách thức hệ thống vận hành, bạn sẽ chỉ nhận về một codebase chắp vá và không thể maintain lâu dài.
- Bản chất của Vibe Coding là sự chuyển dịch trọng tâm công việc: Thay vì dành 80% thời gian để viết cú pháp, tra cứu syntax hay cấu hình các tác vụ lặp đi lặp lại, bạn tập trung vào system design, user experience (UX), business logic và kiểm soát chất lượng đầu ra. AI đảm nhận vai trò thực thi (implementation) theo yêu cầu của bạn.
💡 Điểm then chốt: AI cần một nền tảng hạ tầng đã chuẩn hóa sẵn. Bạn không nên bắt AI vừa viết tính năng nghiệp vụ, vừa phải tự dựng lại từ đầu những thành phần phức tạp như Authentication, Database ORM, CMS, hay Transactional Email. Việc đó vừa tốn token, vừa dễ gây lỗi kiến trúc.
Đó là lý do mình quyết định chọn EzyPlatform làm nền tảng hạ tầng cho toàn bộ dự án này.
3. Tại sao lại là EzyPlatform?
Mình tiếp cận EzyPlatform thông qua trang chủ chính thức ezyplatform.com và chuỗi tài liệu Vibe Coding của họ:
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 tích hợp AI.
Khi xem qua cấu trúc 19 chương trong tài liệu chính thức:
Hệ thống 19 chương học được chuẩn hóa bài bản, từ tư duy, công cụ đến thực chiến module nâng cao.
Có thể thấy rõ sự khác biệt khi đặt lên bàn cân so sánh giữa các phương pháp phát triển hiện nay:
| Hạng mục công việc | Tự code từ đầu cùng AI | Dùng WordPress / No-Code kéo thả | Vibe Coding trên EzyPlatform |
|---|---|---|---|
| Hạ tầng & Server | Tự dựng Nginx, SSL, Docker, DB từ đầu (dễ phát sinh lỗi) | Phụ thuộc plugin cồng kềnh, dễ chậm hệ thống | Triển khai nhanh gọn trên VPS Ubuntu |
| 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 khá phức tạp | Có sẵn module EzyArticle, giao diện Admin hiện đại |
| Thương mại điện tử | Tự thiết kế bảng Order, Cart, logic tính tiền | Dùng WooCommerce (nhiều tính năng thừa, nặng) | Có sẵn 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 | Khó kết nối trực tiếp với LLM | Tích hợp GraphQL kiêm MCP Server cho AI query |
| Tùy biến giao diện | Tự code HTML/CSS, dễ vỡ responsive | Bị giới hạn trong khuôn khổ theme có sẵn | Dùng theme trắng Freestyle, thoải mái sáng tạo UI |
| Tiêu hao Token của AI | Tốn nhiều token vì phải nhồi cả context backend | Không tối ưu cho workflow của AI | Tiết kiệm token nhờ cấu trúc module và quy chuẩn rõ ràng |
4. Kiểm tra hạ tầng thực tế trên VPS
Để đảm bảo tính xác thực, dưới đây là thông tin trực tiếp từ VPS mình đang sử dụng cho dự án này.
4.1. Thông số tài nguyên và tiến trình hệ thống (Ubuntu 22.04 LTS)
Hạ tầng thử nghiệm là một VPS cấu hình cơ bản: 2 CPU, 4GB RAM chạy Ubuntu 22.04 LTS với IP 157.66.47.xxx. Dưới đây là thông số kiểm tra trực tiếp qua terminal:
Terminal thực tế trên VPS 157.66.47.xxx: Hệ thống Ubuntu 22.04 LTS đang chạy mượt mà cả Nginx, Web core và Admin core.
Nền tảng vận hành trên nền tảng Java core với mức sử dụng tài nguyên rất hợp lý:
- Tiến trình
AdminStartup(port nội bộ 9090) phục vụ toàn bộ các plugin:ecommerce,ezylogin,graphql,freestyle,ezydelivery,ezyarticle,logs-monitor,ezypayment,ezymail,ezysupport... - Tiến trình
WebStartup(port nội bộ 8080) xử lý traffic người dùng bên ngoài. - Nginx 1.18.0 đảm nhiệm vai trò reverse proxy, định tuyến traffic và xử lý chứng chỉ SSL HTTPS.
4.2. Giao diện quản trị EzyPlatform Admin
Đường dẫn quản trị của hệ thống tại https://1576647xxx-admin.interdata.io.vn/login:
Trang đăng nhập Admin EzyPlatform, an toàn với giao diện chuẩn Enterprise.
Sau khi đăng nhập bằng tài khoản quản trị, đây là Dashboard trung tâm:
Dashboard EzyPlatform: Toàn bộ công cụ quản lý Bài viết (EzyArticle), Khách hàng, Cài đặt hệ thống, Giám sát Log đã sẵn sàng.
4.3. Theme Freestyle & Quản lý Page Fragments
Nền tảng cung cấp sẵn các công cụ rất phù hợp cho workflow của Vibe Coding:
-
Theme Freestyle: Cho phép chọn layout rỗng (blank layout) để AI tự do thiết kế giao diện từ đầu mà không bị phụ thuộc vào template có sẵn.
Giao diện Freestyle Settings tại /freestyle/settings: Tắt các menu mặc định để tạo trang trắng phục vụ thiết kế tự do. -
Quản lý các phần trang dùng chung (Page Fragments): Nơi quản lý header, footer hoặc các block giao diện dùng chung cho toàn bộ website.
Danh sách fragments tại /ezyarticle/pages/fragments: Tùy biến nhanh các khối giao diện common.
4.4. Template Explorer & Cơ chế Access Token
-
Trình xem mẫu gốc (Template Explorer): Cây thư mục cho phép đối chiếu mã nguồn template hệ thống khi cần kiểm tra cấu trúc.
Template Explorer tại /ezyarticle/pages/template-explorer: Tra cứu cấu trúc template Thymeleaf trên máy chủ. -
Quản lý Profile & Access Token:
Trang hồ sơ tại /admins/me: Nơi lấy Access Token để extension VS Code kết nối đồng bộ trực tiếp với VPS.
4.5. Cấu hình hệ thống linh hoạt
Các thông số như định dạng tệp tải lên, dung lượng tối đa, chia sẻ Access Token giữa các tên miền đều được thiết lập tập trung tại /settings/regular:
Trang cấu hình hệ thống: Thiết lập các tham số vận hành cần thiết cho dự án.
5. Workflow 4 bước khi làm việc 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 tinh gọn và có cấu trúc rõ ràng:
flowchart LR
Step1["1. Mô Tả Requirement<br/>(Spec & Brand Brief)"] --> Step2["2. AI Generate Code<br/>(Chuẩn EzyArticle)"]
Step2 --> Step3["3. Preview Tức Thì<br/>(Xem trước trên VPS)"]
Step3 --> Step4["4. Publish Nhanh Chóng<br/>(Đưa lên Production)"]
Step4 -.->|"Refine & Lặp lại"| Step1
classDef s1 fill:#3b82f6,stroke:#1d4ed8,color:#ffffff;
classDef s2 fill:#10b981,stroke:#047857,color:#ffffff;
classDef s3 fill:#f59e0b,stroke:#b45309,color:#ffffff;
classDef s4 fill:#ec4899,stroke:#be185d,color:#ffffff;
class Step1 s1;
class Step2 s2;
class Step3 s3;
class Step4 s4;
- Mô tả yêu cầu (Requirement & Spec): Đưa ra yêu cầu cụ thể, rõ ràng cho AI Assistant (Claude Code hoặc Codex) ngay trong VS Code.
- AI sinh mã nguồn theo quy chuẩn: AI viết code theo cấu trúc 4 file của EzyArticle:
content.html,head.html,foot.html, vàmeta.json. - Xem trước (Preview): Dùng extension
youngmonkeys.ezyarticleđể xem trước trực tiếp trên domain VPS ở chế độ bản nháp (draft), hoàn toàn không ảnh hưởng tới người dùng thật. - Xuất bản (Publish): Sau khi kiểm tra hoàn tất, xuất bản nội dung lên server. Toàn bộ lịch sử thay đổi đều được quản lý bằng Git để dễ dàng rollback khi cần.
6. Hai bài học kinh nghiệm trước khi bắt đầu
Từ quá trình thực tế, mình đúc kết 2 lưu ý quan trọng để tránh mất thời gian khi làm việc với AI:
Bài học 1: Tránh bẫy "Mega-Prompt" — Hãy chia nhỏ bài toán (Divide and Conquer)
Đừng cố gắng đưa toàn bộ yêu cầu của một website phức tạp vào một prompt duy nhất. Cách tiếp cận hiệu quả là chia nhỏ lộ trình:
- Bắt đầu từ Layout & Khung sườn
- Hoàn thiện Giao diện tĩnh (Static UI)
- Bổ sung Tương tác phía Client (State & JavaScript)
- Cuối cùng mới kết nối Dữ liệu thật qua API Backend
Bài học 2: Chú trọng bảo mật thông tin ngay từ đầu
Khi làm việc trên môi trường server thật, hãy luôn đưa các file nhạy cảm (.env, environment.json, NOTE.md) vào .gitignore. Trong các bài viết chia sẻ công khai, hãy chủ động masking địa chỉ IP máy chủ (157.66.47.xxx) và domain quản trị để phòng tránh các rủi ro quét lỗ hổng tự động từ bên ngoài.
7. Tổng kết & Nội dung kỳ tiếp theo
🎯 3 điểm cốt lõi cần ghi nhớ:
- Vibe Coding là một phương pháp làm việc nghiêm túc: Giá trị lớn nhất nằm ở tư duy định hình sản phẩm và thiết kế giải pháp; AI là công cụ hỗ trợ thực thi nhanh chóng.
- Tận dụng hạ tầng có sẵn: EzyPlatform cung cấp nền móng hoàn chỉnh về CMS, Database, Authentication và E-commerce, giúp bạn và AI tập trung vào logic riêng của ứng dụng.
- Môi trường thực hành thực tế: Toàn bộ nội dung trong chuỗi bài đều được thực nghiệm trực tiếp trên VPS
157.66.47.xxx.
🚀 Kỳ tiếp theo (#02): Thiết lập môi trường làm việc thực chiến
Ở bài viết sau, chúng ta sẽ bắt tay vào cấu hình chi tiết:
- Hướng dẫn SSH vào VPS Ubuntu và thiết lập EzyPlatform.
- Cài đặt VS Code, Extension
youngmonkeys.ezyarticlevà thiết lập kết nối an toàn quaenvironment.json. - Xử lý cấu hình chia sẻ Access Token giữa các domain để khắc phục lỗi Preview trên các subdomain đa cấp.
💬 Thảo luận: Bạn đã từng áp dụng Vibe Coding vào dự án thực tế nào chưa? Bạn gặp khó khăn gì nhiều nhất trong quá trình làm việc với AI? Hãy chia sẻ ở phần bình luận bên dưới nhé!
Nếu thấy bài viết hữu ích, hãy ủng hộ mình bằng một Upvote 👍 và Bookmark (Clip) 🔖 để theo dõi các bài viết tiếp theo trong series. Cảm ơn các bạn!
All Rights Reserved
