Chương 3. Chuẩn bị môi trường làm việc

Trước khi bắt đầu vibe coding, bạn cần chuẩn bị một bộ công cụ gọn nhẹ. Tin vui là bạn không cần cài đặt phức tạp như một lập trình viên chuyên nghiệp — chỉ vài bước là đủ để bắt đầu.

Bộ công cụ cần có

• EzyPlatform: nơi website/ứng dụng của bạn sẽ thực sự chạy, kèm tên miền và SSL.
• Các plugin tối thiểu cho EzyPlatform: EzyArticle, EzySupport và GraphQL.
• Tài khoản AI (gói trả phí): ví dụ ChatGPT (kèm Codex) hoặc Claude (kèm Claude Code), đủ lượt dùng để vibe coding không bị gián đoạn.
• Visual Studio Code (VS Code): trình soạn thảo miễn phí, nơi bạn sẽ trò chuyện với AI và xem code được tạo ra.
• Extension EzyArticle cho VS Code: cầu nối đồng bộ nội dung giữa máy tính của bạn và máy chủ EzyPlatform.
• AI Assistant: phần mở rộng (extension) tích hợp AI ngay trong VS Code, để bạn mô tả yêu cầu và nhận code.
• Git (tuỳ chọn nhưng nên có): giúp lưu lại lịch sử thay đổi, để bạn có thể quay lại phiên bản cũ nếu cần.
• MCP Server (nâng cao): cho phép AI Assistant thao tác trực tiếp với dữ liệu thật trên EzyPlatform, sẽ tìm hiểu kỹ hơn ở Chương 9.

Các bước cài đặt

Toàn bộ 11 bước dưới đây được tóm tắt trong sơ đồ sau — bạn có thể làm lần lượt từ trên xuống:

flowchart TD
    subgraph S1["Chuẩn bị EzyPlatform"]
        direction LR
        A["1. Cài EzyPlatform"] --> B["2. Cài plugin"]
    end

    subgraph S2["Chuẩn bị AI"]
        direction LR
        C["3. Tài khoản & gói AI"]
    end

    subgraph S3["Công cụ trên máy"]
        direction LR
        D["4. VS Code"] --> E["5. Extension EzyArticle"] --> F["6. AI Assistant"]
    end

    subgraph S4["Kết nối & sao lưu"]
        direction LR
        G["7. Kết nối EzyPlatform"] --> H["8. Cài Git"]
    end

    I["9. Thử prompt đầu tiên"]
    J["10. Cấu hình tải lên đa phương tiện"]
    K["11. Cấu hình theme Freestyle"]

    S1 --> S2 --> S3 --> S4 --> I --> J --> K

    classDef server fill:#3b82f6,stroke:#1d4ed8,color:#ffffff;
    classDef ai fill:#f59e0b,stroke:#b45309,color:#ffffff;
    classDef local fill:#8b5cf6,stroke:#6d28d9,color:#ffffff;
    classDef connect fill:#10b981,stroke:#047857,color:#ffffff;
    classDef git fill:#ec4899,stroke:#be185d,color:#ffffff;
    classDef practice fill:#6366f1,stroke:#4338ca,color:#ffffff;
    classDef media fill:#0891b2,stroke:#0e7490,color:#ffffff;
    classDef theme fill:#f43f5e,stroke:#be123c,color:#ffffff;
    class A,B server;
    class C ai;
    class D,E,F local;
    class G connect;
    class H git;
    class I practice;
    class J media;
    class K theme;
    linkStyle default stroke:#94a3b8,stroke-width:1.5px;

Bước 1: Cài đặt EzyPlatform

Nếu bạn chỉ muốn thử nghiệm, bạn có thể cài EzyPlatform trên máy tính cá nhân (localhost). Nếu muốn có một website thật với tên miền riêng, bạn cần triển khai EzyPlatform lên một máy chủ (server). Có hai cách để bạn tự cài đặt, không cần nhờ ai:

• Tự cài trên máy chủ riêng: nếu bạn đã có sẵn một máy chủ (VPS) chạy Ubuntu, hãy làm theo hướng dẫn triển khai EzyPlatform trên Ubuntu.
• Dùng dịch vụ hosting có sẵn: nếu chưa có máy chủ, hãy truy cập danh mục nhà cung cấp hosting, chọn một nhà cung cấp bất kỳ trong danh sách rồi làm theo hướng dẫn cài đặt được cung cấp bên trong.

Nếu bạn chưa có tên miền và SSL, bạn có thể mua tên miền ở bất kỳ nhà cung cấp nào (Mắt Bão, PA Vietnam, Namecheap...), sau đó tham khảo hướng dẫn trỏ tên miền và cài đặt SSL cho EzyPlatform.

Bước 2: Cài đặt các plugin cho EzyPlatform

Sau khi cài đặt xong EzyPlatform, tên miền và SSL, bạn cần cài đặt tối thiểu 3 plugin: EzyArticle, EzySupport và GraphQL, Freesylte. Nếu chưa biết cách cài đặt plugin, bạn có thể tham khảo hướng dẫn cài đặt plugin cho EzyPlatform.

Bước 3: Tạo một tài khoản và mua một gói AI

Vibe coding cần một AI Assistant đủ mạnh để viết code thay bạn. Hãy tạo tài khoản và đăng ký một gói trả phí ở nhà cung cấp AI mà bạn muốn dùng — ví dụ ChatGPT (gói có kèm Codex, đăng ký tại trang giá của OpenAI) hoặc Claude (gói có kèm Claude Code, đăng ký tại trang giá của Anthropic). Gói trả phí cho bạn nhiều lượt sử dụng hơn hẳn bản miễn phí, giúp quá trình vibe coding không bị gián đoạn giữa chừng.

Bước 4: Cài đặt VS Code

Tải và cài đặt Visual Studio Code từ trang chủ chính thức. Đây là công cụ miễn phí, chạy được trên Windows, macOS và Linux. Sau khi cài xong, mở VS Code lên — đây sẽ là "bàn làm việc" chính của bạn trong suốt cuốn sách.

Bước 5: Cài đặt EzyArticle extension

Trong VS Code, vào mục Extensions (biểu tượng hình khối vuông ở thanh bên trái), tìm và cài đặt extension EzyArticle. Đây là cầu nối đồng bộ nội dung giữa máy tính của bạn và máy chủ EzyPlatform mà bạn sẽ cấu hình kết nối ở bước tiếp theo.

Bước 6: Cài đặt AI Assistant

Cả Claude Code lẫn Codex đều chạy dựa trên một công cụ dòng lệnh (CLI) cài riêng ngoài VS Code — extension chỉ là lớp giao diện giúp bạn dùng CLI đó ngay trong VS Code cho tiện. Nếu bạn không rành kỹ thuật, cách đơn giản nhất là: cứ cài extension trước (theo hướng dẫn bên dưới), mở nó lên — nếu máy chưa có CLI, extension sẽ tự phát hiện và hiện nút Install để cài giúp bạn, không cần biết Node.js hay dòng lệnh là gì.

Nếu nút cài tự động không xuất hiện hoặc bạn muốn cài thủ công, dưới đây là các cách cài CLI theo từng gói:

• Nếu dùng Claude: cài extension Claude Code trong mục Extensions của VS Code. Nếu cần cài CLI thủ công, mở Terminal (macOS) hoặc PowerShell (Windows) rồi chạy một trong hai lệnh sau: curl -fsSL https://claude.ai/install.sh| bash (macOS/Linux, không cần cài Node.js) hoặc irm https://claude.ai/install.ps1| iex (Windows, PowerShell). Nếu máy bạn đã có Node.js, cũng có thể dùng npm install -g @anthropic-ai/claude-code. Sau đó mở lại VS Code, bấm vào biểu tượng Claude ở thanh bên trái, chọn Sign in và đăng nhập bằng tài khoản Claude đã đăng ký gói trả phí.
• Nếu dùng ChatGPT: cài extension ChatGPT trong mục Extensions của VS Code. Nếu cần cài CLI thủ công trên macOS và đã có Homebrew, chạy lệnh brew install codex; nếu máy đã có Node.js, dùng npm install -g @openai/codex. Trên Windows, có thể tải sẵn file thực thi (binary) từ trang phát hành chính thức của Codex CLI thay vì phải cài Node.js. Sau đó mở lại VS Code, mở extension từ thanh bên trái, chọn Sign in và đăng nhập bằng tài khoản ChatGPT đã đăng ký gói có Codex.

Sau khi đăng nhập thành công, bạn sẽ thấy một khung chat ngay trong VS Code — đây chính là nơi bạn sẽ "nói chuyện" với AI để mô tả yêu cầu và nhận code. Bạn chỉ cần chọn một trong hai (Claude Code hoặc Codex) để bắt đầu, không cần cài cả hai.

Nếu sau khi cài Claude Code hoặc Codex xong mà bạn chưa thấy chúng ở đâu thì chúng nằm ở thanh công cụ bên phía tay trái. Bạn có thể giữ icon và kéo sang khung bên phải để chat cho thuận tiện.

Bước 7: Kết nối VS Code với EzyPlatform

Tạo file cấu hình environment.json với hai thông tin quan trọng để extension EzyArticle biết cần đồng bộ tới đâu:

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

Bạn lấy admin_access_token bằng cách đăng nhập vào trang quản trị EzyPlatform, vào trang hồ sơ cá nhân (/admins/me), tìm mục Access Token, nhập mật khẩu để hiển thị, rồi sao chép vào file cấu hình.

Bước 8: Cài đặt Git (khuyến khích)

Git giúp bạn lưu lại từng phiên bản của website — hữu ích khi bạn muốn thử nghiệm một thay đổi mà vẫn an tâm có thể quay lại bản cũ nếu không ưng ý. Cách cài đặt trên từng hệ điều hành như sau:

• Trên macOS: mở ứng dụng Terminal, gõ lệnh git --version. Nếu máy chưa có Git, macOS sẽ tự hiện hộp thoại đề nghị cài đặt Xcode Command Line Tools — bạn chỉ cần bấm Install và chờ hoàn tất. Nếu đã dùng Homebrew, bạn cũng có thể cài nhanh bằng lệnh brew install git.
• Trên Windows: tải trình cài đặt Git for Windows tại git-scm.com/download/win, chạy file .exe vừa tải, cứ để nguyên các tuỳ chọn mặc định và bấm Next cho đến khi cài xong. Sau khi cài, bạn sẽ có thêm ứng dụng Git Bash để chạy các lệnh Git.

Sau khi cài xong, bạn có thể khởi tạo một kho Git ngay trong thư mục dự án, hoặc đơn giản là nhờ AI Assistant thực hiện giúp. Một vài câu lệnh Git bạn sẽ hay cần nhờ AI chạy giúp trong quá trình làm việc:

• git init — khởi tạo một kho Git mới trong thư mục dự án.
• git add . — đánh dấu toàn bộ thay đổi hiện tại để chuẩn bị lưu lại.
• git commit -m "mô tả thay đổi" — lưu lại một "điểm khôi phục" kèm mô tả ngắn gọn về thay đổi đó, để sau này có thể quay lại nếu cần.

Bạn không cần tự gõ các lệnh này — chỉ cần nhờ AI Assistant "lưu lại thay đổi vừa rồi bằng Git" là đủ. Nếu muốn lưu trữ mã nguồn trên đám mây và chia sẻ với người khác, bạn có thể tạo thêm một tài khoản GitHub (miễn phí), sau đó nhờ AI Assistant đẩy (push) kho Git của bạn lên đó.

Bước 9: Thử gõ prompt đầu tiên

Mọi thứ đã sẵn sàng. Hãy mở khung chat của AI Assistant trong VS Code và gõ thử một prompt đơn giản, ví dụ: "Tạo cho tôi một trang giới thiệu đơn giản." Quan sát cách AI trả lời và tạo code — đây chính là bước thực hành đầu tiên của hành trình vibe coding mà bạn sẽ tiếp tục xuyên suốt cuốn sách này.

Bước 10: Cấu hình tải lên (upload) đa phương tiện

Mặc định thì EzyPlatform sẽ chỉ cho phép tải lên một số dạng tập tin, với dung lượng tối đa 1MB cho ảnh và 5MB cho các loại tập tin khác. Bạn có thể điều chỉnh các cài đặt này bằng cách truy cập vào {đường-dẫn-admin-của-bạn}/settings/regular sau đó cập nhật các thông số và lưu lại, ví dụ trong dự án của chúng ta sẽ cho phép lưu cả ảnh svg, tập tin css và javascript nên các bạn hãy cập nhật các loại media được chấp nhận là image/png,image/jpeg,application/javascript,image/svg+xml,image/vnd.microsoft.icon,text/css.

Bước 11: Cấu hình theme Freestyle

Mặc định, theme Freestyle vẫn có sẵn một giao diện demo ngay sau khi được cài đặt và kích hoạt. Với Vibe Coding, chúng ta sẽ không dùng giao diện mặc định này, vì vậy hãy nhấn vào menu cài đặt của Freestyle hoặc truy cập trực tiếp đường dẫn {đường-dẫn-admin-của-bạn}/freestyle/settings, thiết lập các thuộc tính như hình dưới đây rồi lưu lại.

Không cần cài đặt hoàn hảo ngay từ đầu. Bạn có thể bắt đầu chỉ với VS Code và AI Assistant, rồi bổ sung dần các công cụ khác khi cần.

Giới thiệu các công cụ

Phần dưới đây mô tả kỹ hơn về từng công cụ đã nhắc ở các bước trên, dành cho ai muốn hiểu rõ trước khi bắt tay vào cài đặt. Nếu bạn chỉ muốn làm ngay, có thể bỏ qua và quay lại tra cứu khi cần.

EzyPlatform

Là nền tảng low-code đã có sẵn toàn bộ hạ tầng mà một sản phẩm số cần: quản trị nội dung (CMS), bán hàng trực tuyến (E-commerce), gửi email, quản lý tài khoản người dùng, và một kho ứng dụng mở rộng (Marketplace). Website/ứng dụng của bạn sẽ thực sự chạy trên EzyPlatform, thay vì bạn phải tự dựng server, database, hệ thống đăng nhập... từ đầu.

Plugin EzyArticle, EzySupport và GraphQL

• EzyArticle: quản lý trang, bài viết và danh mục (term) — đây cũng là plugin đứng sau extension EzyArticle trên VS Code.
• EzySupport: quản lý ticket hỗ trợ, mẫu nội dung và đa ngôn ngữ (i18n).
• GraphQL: cách linh hoạt để truy vấn đúng dữ liệu cần thiết, đặc biệt hữu ích khi AI Assistant cần lấy dữ liệu phức tạp, có liên kết nhiều bảng, đồng thời nó cũng cung cấp MCP Server.
• Freestyle: Đây là một theme trắng cho phép người dùng có thể làm bất cứ thứ gì.

Bốn plugin này là bộ tối thiểu để AI Assistant có đủ "cửa ngõ" thao tác với nội dung và dữ liệu trên EzyPlatform trong suốt cuốn sách. Bạn sẽ tìm hiểu sâu hơn về kiến trúc module ở Chương 5.

Tài khoản AI: ChatGPT (Codex) và Claude (Claude Code)

Đây là "bộ não" thực sự viết code cho bạn. ChatGPT (qua Codex) và Claude (qua Claude Code) đều là AI Assistant có thể đọc hiểu yêu cầu, viết code, sửa lỗi và thao tác trực tiếp trên file dự án. Bạn không bắt buộc phải chọn cả hai — chỉ cần một tài khoản trả phí của một trong hai nhà cung cấp là đủ để bắt đầu vibe coding.

Visual Studio Code (VS Code)

Trình soạn thảo code miễn phí, phổ biến nhất hiện nay, chạy được trên Windows, macOS và Linux. Trong cuốn sách này, VS Code không chỉ là nơi xem code — nó còn là nơi bạn trò chuyện với AI Assistant và đồng bộ nội dung với EzyPlatform, nhờ các extension được cài thêm.

Extension EzyArticle (VS Code)

Là cầu nối đồng bộ nội dung giữa máy tính của bạn và máy chủ EzyPlatform: bạn (hoặc AI) chỉnh sửa file trên máy, extension sẽ đẩy thay đổi đó lên trang quản trị EzyPlatform thông qua file cấu hình environment.json đã thiết lập ở Bước 7.

AI Assistant: Claude Code và Codex

Là extension tích hợp AI ngay trong VS Code, cho khung chat để bạn mô tả yêu cầu bằng ngôn ngữ tự nhiên và nhận lại code. Cả hai đều dựa trên một CLI cài riêng ngoài VS Code (xem chi tiết ở Bước 6) — extension chỉ là lớp giao diện giúp bạn thao tác với CLI đó thuận tiện hơn, thay vì phải gõ lệnh trong Terminal.

Git

Là hệ thống quản lý phiên bản, giúp lưu lại lịch sử từng thay đổi của dự án. Không bắt buộc, nhưng rất nên dùng: nếu một thay đổi do AI tạo ra không như ý, bạn có thể quay lại phiên bản trước đó một cách an toàn thay vì phải sửa tay hoặc làm lại từ đầu. Ngoài ra việc theo dõi được những thay đổi mới nhất cũng sẽ giúp AI làm việc hiệu quả hơn

MCP Server (nâng cao)

Viết tắt của Model Context Protocol Server — cho phép AI Assistant không chỉ sinh code tĩnh, mà còn truy vấn và thao tác trực tiếp với dữ liệu thật trên EzyPlatform của bạn, ví dụ hỏi AI "cho tôi biết 5 sản phẩm bán chạy nhất tuần này" và nhận câu trả lời dựa trên dữ liệu thật. Đây là công cụ nâng cao, sẽ được trình bày kỹ ở Chương 9.