Chương 6. Tạo website đầu tiên chỉ trong vài phút

Đã đến lúc thực hành. Chương này sẽ dẫn bạn qua toàn bộ quy trình tạo ra một trang web hoàn chỉnh đầu tiên — từ mô tả ý tưởng đến lúc trang thực sự chạy trên trình duyệt — để bạn cảm nhận rõ tốc độ của Vibe Coding.

Bước 1: Khởi tạo dự án

Từ Visual Studio Code, bạn hãy mở đến một thư mục trống, sau đó chuột phải vào khung Explorer — một mục Create EzyArticle Project sẽ hiện ra, hãy click vào đó để khởi tạo dự án.

Khi dự án được khởi tạo, bạn sẽ thấy cấu trúc thư mục sau xuất hiện:

├── .gitignore
├── AGENTS.md
├── README.md
├── environment.json
├── api
│   └── v1
│       └── media
└── pages
    └── example-page
        ├── content.html
        ├── foot.html
        ├── head.html
        └── meta.json

• environment.json — tập tin môi trường.
• README.md — hướng dẫn sử dụng.
• AGENTS.md — hướng dẫn AI code.
• pages/example-page — trang ví dụ mẫu để bạn tham khảo cấu trúc, gồm content.html, head.html, foot.html và meta.json.

Bước 2: Cài đặt môi trường

Trước tiên bạn sẽ cần thiết lập môi trường trong tập tin environment.json. Môi trường được sử dụng sẽ có thuộc tính "default": true. Bạn sẽ cần truyền các giá trị:

• admin_url — đường dẫn đến trang EzyPlatform admin của bạn, ví dụ https://admin.example.com.
• admin_access_token — access token của bạn đối với trang EzyPlatform admin. Bạn có thể truy cập vào page profile <admin_url>/admins/me, ví dụ https://admin.example.com/admins/me, sau đó tìm đến thuộc tính Access Token, nhấn hiển thị, điền mật khẩu, sau đó sao chép access token vào thuộc tính admin_access_token.

{
  "environments": [
    {
      "name": "production",
      "admin_url": "https://admin.example.com",
      "admin_access_token": "access_token_cua_ban",
      "default": true
    }
  ]
}

Ví dụ về nội dung tập tin environment.

Nếu bạn không cần môi trường nào, bạn có thể xoá nó đi, nhưng bắt buộc phải giữ lại ít nhất một môi trường có thuộc tính "default": true.

Bước 3: Xác định trang bạn muốn tạo

Giả sử bạn muốn tạo một trang chủ đơn giản cho một tiệm bánh nhỏ. Trước khi mở AI Assistant, hãy hình dung nhanh: trang cần có những phần gì? Ví dụ: banner giới thiệu, danh sách bánh nổi bật, và thông tin liên hệ.

Bước 4: Mô tả yêu cầu cho AI

Tạo một trang độc lập cho tiệm bánh "Sweet Home Bakery" gồm 3 phần:

1. Banner đầu trang: tên tiệm, slogan "Bánh ngọt handmade mỗi ngày",
   nút "Xem thực đơn".
2. Danh sách 3 loại bánh nổi bật, mỗi loại có ảnh, tên, giá.
3. Thông tin liên hệ: địa chỉ, số điện thoại, giờ mở cửa.

Yêu cầu: giao diện responsive, tông màu be và nâu ấm áp,
phù hợp với ngành bánh ngọt.

Bước 5: Xem AI tạo cấu trúc trang

AI sẽ tạo (hoặc cập nhật) bốn file trong thư mục pages/sweet-home-bakery:

• content.html — nội dung chính: banner, danh sách bánh, thông tin liên hệ.
• head.html — các đoạn CSS định dạng màu sắc, bố cục.
• foot.html — JavaScript nếu cần (thường chưa cần thiết ở bước này).
• meta.json — thông tin mô tả trang (tiêu đề, đường dẫn...).

Trước khi sang bước xem trước, hãy kiểm tra các tab file trong VS Code — nếu tab nào còn dấu chấm tròn (chưa lưu), nhấn Cmd/Ctrl + S để lưu, hoặc dùng File → Save All để lưu một lượt tất cả. Nếu quên lưu, bản xem trước sẽ không phản ánh đúng nội dung AI vừa tạo.

Bước 6: Xem trước (Preview)

Trong VS Code, chuột phải vào thư mục sweet-home-bakery (hoặc bất kỳ file nào bên trong), chọn Preview Page. Trình duyệt sẽ tự mở lên với một đường dẫn dạng <admin_url>/pages/sweet-home-bakery/preview, ví dụ https://admin.example.com/pages/sweet-home-bakery/preview, hiển thị đúng những gì bạn sắp xuất bản. Đây là đường dẫn nội bộ trong trang quản trị, chỉ mình bạn xem được — người dùng thật sẽ không thể truy cập — nên đây là bước an toàn để kiểm tra trước khi công khai.

Kết quả bạn sẽ thấy trên trình duyệt gồm đủ ba phần đã mô tả: banner, danh sách bánh nổi bật và thông tin liên hệ.

Bước 7: Tinh chỉnh nếu cần

Nếu banner chưa ưng — ví dụ ảnh nền quá tối, chữ khó đọc — bạn chỉ cần quay lại khung chat và mô tả cụ thể:

"Ảnh nền ở banner đang hơi tối, làm chữ tiêu đề khó đọc. Hãy thêm một lớp phủ màu nâu nhạt mờ lên ảnh, và đổi màu chữ tiêu đề sang trắng."

Sau mỗi lần AI chỉnh sửa file, hãy nhớ lưu (save) lại trước khi bấm Preview, nếu không trình duyệt vẫn sẽ hiển thị nội dung cũ. Lặp lại bước Preview cho đến khi bạn hài lòng với kết quả.

Bước 8: Xuất bản (Publish)

Khi đã ưng ý, chuột phải vào thư mục trang, chọn Publish Content To Server. Chỉ sau vài giây, trang sẽ chính thức chạy tại đường dẫn <web_url>/sweet-home-bakery, ví dụ https://example.com/sweet-home-bakery — khác với đường dẫn preview, lần này bất kỳ ai truy cập website của bạn cũng xem được.

Bước 9: Khởi tạo Git cho dự án

Sau khi trang đã chạy thật, đây là lúc thích hợp để lưu lại toàn bộ công sức của bạn bằng Git. Git giúp lưu lại lịch sử mỗi lần thay đổi, cho phép bạn quay lại phiên bản cũ bất cứ lúc nào, và là bước chuẩn bị cần thiết nếu sau này bạn muốn sao lưu dự án lên GitHub. Bạn không cần thuộc lệnh Git — chỉ cần mở khung chat AI Assistant ngay trong VS Code và mô tả điều bạn muốn.

Hãy khởi tạo Git cho dự án này, thêm toàn bộ file vào staging area
và tạo commit đầu tiên với nội dung "Khởi tạo dự án".

AI sẽ lần lượt chạy các lệnh sau trong terminal:

• git init — khởi tạo một kho Git (repository) trong thư mục dự án.
• git add . — đưa toàn bộ file trong dự án vào staging area, sẵn sàng để commit.
• git commit -m "Khởi tạo dự án" — tạo commit đầu tiên, giống như một "ảnh chụp" lưu lại hiện trạng dự án tại thời điểm này.

Nếu bạn muốn sao lưu dự án từ xa hoặc làm việc nhóm, hãy tạo một repository trống trên github.com (không tick khởi tạo README, .gitignore hay license để tránh xung đột với dự án hiện có), sau đó sao chép đường dẫn repository và chat tiếp với AI để đẩy code lên:

Tôi vừa tạo một repository trống trên GitHub tại địa chỉ
https://github.com/ten-ban/ten-du-an.git
Hãy kết nối repository này với dự án hiện tại và đẩy (push)
toàn bộ code lên đó.

AI sẽ chạy thêm các lệnh như git remote add origin ..., git branch -M main và git push -u origin main để đưa toàn bộ commit lên GitHub. Từ những lần chỉnh sửa sau, bạn chỉ cần chat ngắn gọn, ví dụ "Hãy commit và đẩy các thay đổi vừa rồi lên GitHub", AI sẽ tự hiểu và thực hiện đúng các bước cần thiết.

Tổng hợp các bước cần thực hiện

flowchart TD
    subgraph S1["Thiết lập dự án"]
        direction LR
        A["1. Khởi tạo dự án"] --> B["2. Cài đặt môi trường"]
    end

    subgraph S2["Lên ý tưởng & tạo trang"]
        direction LR
        C["3. Xác định"] --> D["4. Mô tả"] --> E["5. Tạo cấu trúc"]
    end

    subgraph S3["Kiểm tra & hoàn thiện"]
        direction LR
        F["6. Preview"] --> G["7. Tinh chỉnh"]
    end

    H["8. Publish"] --> Z["9. Khởi tạo Git"]

    S1 --> S2 --> S3 --> H

    classDef setup fill:#3b82f6,stroke:#1d4ed8,color:#ffffff;
    classDef idea fill:#f59e0b,stroke:#b45309,color:#ffffff;
    classDef check fill:#8b5cf6,stroke:#6d28d9,color:#ffffff;
    classDef publish fill:#10b981,stroke:#047857,color:#ffffff;
    class A,B setup;
    class C,D,E idea;
    class F,G check;
    class H,Z publish;
    linkStyle default stroke:#94a3b8,stroke-width:1.5px;

• 1. Khởi tạo dự án — Tạo dự án bằng lệnh Create EzyArticle Project.
• 2. Cài đặt môi trường — Khai báo admin_url và admin_access_token trong environment.json.
• 3. Xác định — Hình dung các phần cần có trên trang.
• 4. Mô tả — Gửi prompt rõ ràng cho AI Assistant.
• 5. Tạo cấu trúc — AI viết content/head/foot vào đúng thư mục.
• 6. Preview — Xem trước kết quả trên trình duyệt.
• 7. Tinh chỉnh — Mô tả lại những điểm cần sửa.
• 8. Publish — Đưa trang lên chạy thật.
• 9. Khởi tạo Git — Chat với AI để chạy git init, git add, git commit (và git push nếu có repo trên GitHub).

Đây chính là vòng lặp cốt lõi bạn sẽ lặp lại xuyên suốt cuốn sách này, dù là tạo trang, bài viết, hay tính năng phức tạp hơn ở các chương sau.