Hướng dẫn tạo một website giới thiệu cho doanh nghiệp với Vibe Coding
Back To Blogs
Nguyễn Thị Thanh Tuyền - Chuyên viên Marketing
Vibe Coding với EzyPlatform
Hướng dẫn tạo một website giới thiệu cho doanh nghiệp với Vibe Coding
Thay vì bắt đầu bằng việc tự viết từng dòng HTML, CSS hay JavaScript, bạn có thể chuẩn bị môi trường, lấy một bộ mã nguồn mẫu phù hợp, để AI đọc dự án và mô tả yêu cầu bằng ngôn ngữ tự nhiên.
"Hãy biến website mẫu này thành website giới thiệu cho doanh nghiệp của tôi."
AI Assistant sẽ đóng vai trò như một lập trình viên hỗ trợ trực tiếp trong VS Code: đọc mã nguồn, chỉnh giao diện, tạo trang, sửa nội dung và hoàn thiện website theo yêu cầu của bạn. Trong bài viết này, chúng ta sẽ đi qua các bước cơ bản để tạo một website giới thiệu doanh nghiệp có thể chạy thực tế trên EzyPlatform.
Website chúng ta sẽ xây dựng
Mục tiêu là tạo một website giới thiệu doanh nghiệp cơ bản gồm các khu vực chính:
- Trang chủ.
- Giới thiệu doanh nghiệp.
- Sản phẩm hoặc dịch vụ.
- Tin tức hoặc Blog.
- Thông tin liên hệ.
- Header và Footer thống nhất trên toàn website.
Sau khi website cơ bản hoạt động, bạn có thể tiếp tục mở rộng thêm các trang khác theo nhu cầu thực tế. Quy trình tổng thể sẽ đi qua ba giai đoạn:
Phần 1. Chuẩn bị EzyPlatform
Trước khi bắt đầu Vibe Coding, bạn cần có một môi trường EzyPlatform đang hoạt động. Nếu chỉ muốn học hoặc thử nghiệm, bạn có thể cài EzyPlatform trên máy tính cá nhân. Nếu muốn xây dựng website thật với tên miền riêng, hãy triển khai EzyPlatform trên VPS hoặc sử dụng một nhà cung cấp hosting có hỗ trợ sẵn.
Sau khi EzyPlatform hoạt động, hãy cài đặt các plugin cần thiết gồm EzyArticle, EzySupport, GraphQL và Freestyle. Bạn có thể tham khảo thêm hướng dẫn cài đặt plugin cho EzyPlatform. Mục tiêu của phần này là đảm bảo bạn đã có một EzyPlatform hoạt động ổn định trước khi bắt đầu làm website.
Phần 2. Chuẩn bị môi trường Vibe Coding
Tiếp theo, bạn cần chuẩn bị môi trường để làm việc với AI. Bộ công cụ tối thiểu gồm:
- Một tài khoản AI có hỗ trợ coding, chẳng hạn ChatGPT với Codex hoặc Claude với Claude Code.
- Visual Studio Code.
- EzyArticle Extension.
- Codex hoặc Claude Code trong VS Code.
Bạn chỉ cần lựa chọn Codex hoặc Claude Code, không cần cài cả hai. Sau khi hoàn thành, hãy kiểm tra để chắc chắn bạn có thể mở khung chat của AI ngay trong VS Code.
Phần 3. Kết nối VS Code với EzyPlatform
Bước tiếp theo là kết nối môi trường phát triển trên máy tính với EzyPlatform. Thông qua EzyArticle
Extension, bạn sẽ cấu hình environment.json chứa địa chỉ trang quản trị EzyPlatform
và admin_access_token. Access Token có thể lấy tại trang hồ sơ quản trị.
Sau khi kết nối thành công, VS Code sẽ trở thành môi trường chính để chúng ta lấy mã nguồn, chỉnh sửa website bằng AI và đồng bộ với EzyPlatform.
admin_access_token là thông tin xác thực. Không đưa token vào repository công khai
hoặc chia sẻ cho người khác.
Đến đây, phần chuẩn bị môi trường đã hoàn thành. Từ bước tiếp theo, chúng ta mới thực sự bắt đầu quá trình Vibe Coding website giới thiệu doanh nghiệp.
Phần 4. Lấy một website mẫu làm điểm xuất phát
Ở phần này, chúng ta sẽ đi từ việc chọn một template phù hợp đến khi mở được mã nguồn trong VS Code và để AI phân tích dự án. Hãy làm chậm ở giai đoạn đầu: template càng rõ cấu trúc, AI càng dễ hiểu và quá trình chỉnh sửa website về sau sẽ mượt hơn.
Bước 1: Tìm mã nguồn website phù hợp
Thay vì yêu cầu AI tạo toàn bộ website từ đầu, chúng ta sẽ bắt đầu bằng một website mẫu đã có sẵn giao diện. Bạn có thể tìm mã nguồn trên GitHub hoặc sử dụng một template mà mình đã có. Website mẫu không cần giống hoàn toàn website cuối cùng, chỉ cần có cấu trúc tương đối gần với sản phẩm bạn muốn xây dựng.
Bước 2: Tải repository từ GitHub
Sau khi tìm được template phù hợp, tải repository về máy bằng Git hoặc chức năng tải ZIP của GitHub. Nếu tải ZIP, hãy giải nén rồi mở thư mục dự án bằng VS Code.
Ở thời điểm này, bạn đã có: website mẫu, VS Code, AI Assistant và EzyPlatform. Tuy nhiên, chưa nên yêu cầu AI sửa website ngay. Trước tiên, chúng ta cần để AI hiểu dự án.
Bước 3: Yêu cầu AI phân tích dự án
Mở Claude Code hoặc Codex trong VS Code. Thay vì bắt đầu bằng câu lệnh "hãy sửa website", hãy yêu cầu AI đọc toàn bộ mã nguồn trước.
Hãy đọc và phân tích toàn bộ mã nguồn của dự án hiện tại. Xác định cấu trúc thư mục, các trang hiện có, Header, Footer, CSS, JavaScript, hình ảnh và những thành phần có thể tái sử dụng. Chưa chỉnh sửa bất kỳ file nào. Sau khi đọc xong, hãy tóm tắt cấu trúc website và cho tôi biết những phần chính của template hiện tại.
Việc này giúp AI hình thành ngữ cảnh về dự án trước khi bắt đầu chỉnh sửa. Nếu bỏ qua bước này và ngay lập tức yêu cầu AI thay đổi nhiều thứ, AI có thể tạo thêm code không cần thiết hoặc thay thế những thành phần vốn đã có sẵn trong template.
Bước 4: Cung cấp thông tin doanh nghiệp
Sau khi AI đã hiểu template, hãy mô tả sản phẩm mà bạn thực sự muốn tạo. Trước khi nhập prompt, hãy chuẩn bị sẵn một bộ nhận diện thương hiệu cho doanh nghiệp của mình. Bạn nên xác định trước màu sắc, logo, font chữ và phong cách hình ảnh để website có định hướng rõ ràng.
