Project setup

📖 Nội dung bài học

Làm việc với Claude Code sẽ thú vị hơn nếu bạn có một dự án để thực hành.

Tôi đã chuẩn bị một dự án nhỏ để khám phá cùng Claude Code. Đây là ứng dụng tạo giao diện người dùng (UI) giống như trong video trước. Lưu ý: bạn không nhất thiết phải chạy dự án này. Bạn luôn có thể theo dõi phần còn lại của khóa học với cơ sở mã của riêng mình nếu muốn!

Thiết lập

Dự án này yêu cầu một chút thiết lập:

1. Đảm bảo bạn đã cài đặt Node JS trên máy cục bộ. Liên kết đến hướng dẫn cài đặt.
2. Tải xuống tệp zip có tên uigen.zip đính kèm với bài giảng này và giải nén nó.
3. Trong thư mục dự án, chạy npm run setup để cài đặt các dependency và thiết lập cơ sở dữ liệu SQLite cục bộ.
4. Tùy chọn: dự án này sử dụng Claude thông qua Anthropic API để tạo các thành phần UI. Nếu bạn muốn kiểm tra đầy đủ ứng dụng, bạn sẽ cần cung cấp API key để truy cập Anthropic API. Điều này là tùy chọn. Nếu không có API key nào được cung cấp, ứng dụng vẫn sẽ tạo ra một số mã giả tĩnh. Đây là cách bạn có thể thiết lập API key:
   1. Lấy Anthropic API key tại https://console.anthropic.com/
   2. Đặt API key của bạn vào tệp .env.
5. Khởi động dự án bằng cách chạy npm run dev

Tóm tắt

Tải xuống

• uigen.zip

🔁 Bài học liên quan

• Bài tiếp: Adding context
• Bài trước: Claude Code setup
• Cùng section: Claude Code setup
• Thuộc lộ trình: Path C
• Docs tham khảo: Glossary · Skills atlas · By use-case

📚 Nguồn & ghi nhận

• Bài học gốc Anthropic Academy: https://anthropic.skilljar.com/claude-code-in-action/301615
• © 2025 Anthropic. Chỉ dùng cho mục đích giáo dục, fair-use.
• Crawl: — · Chuẩn hoá: 2026-05-01