Quy Trình Dùng Claude Code Để Xây App Thật | Vibe Code Pro #1

#1Foundations ▶ Xem phần #2:    • Nâng Cấp Claude Code Với MCP, Skills & Plu...   ▶ Xem Phần #3    • Điều phối nhiều AI Agent với Claude Code: ...   📩 Nhận lộ trình học AI miễn phí và đăng ký AI Newsletter cùng Timi để nhận tin tức AI hàng tuần https://www.hitimi.com/lo-trinh-ai-2026 ------------------------------------------------------------------------------------------------------------------------------- 🎓 Nếu bạn muốn học sâu hơn và tự tay xây dựng AI systems từ đầu đến production đồng hành cùng mình trên khoá học: *AI Engineer Thực Chiến*— Hands-on từng bước từ Machine Learning cơ bản → RAG → LLM → AI Agents → Production Deployment https://www.udemy.com/course/ai-engin... *AI Agents Thực Chiến*— Xây dựng AI Agent với n8n, Python, OpenAI Agents SDK, MCP và LangGraph https://www.udemy.com/course/ai-agent... =============================================================== Mình thử xây một portfolio web app hoàn chỉnh bằng Claude Code, từ file trắng đến ứng dụng có backend, database và một AI chat thật chạy bên trong. Không cần viết một dòng code nào, chỉ để hiểu từng bước đang xảy ra 😉 Đây là phần đầu của series Vibe Code Pro. Các tập sau sẽ đi sâu hơn vào sub-agent, hooks, skills, MCP. Tài liệu: https://github.com/tam1511/ClaudeCode... ---------------------------------------------------------------------------------------------------- ⏰ Timestamps 0:00 - Intro 0:32 - Vibe coding 🧑‍💻 1:51 - IDE, Extension hay CLI - chọn cái nào 3:11 - Setup 8:11 - Context Engineering 9:06 - CLAUDE.md 9:46 - Context Window và giới hạn của LLM 10:36 - Compacting và rủi ro mất thông tin 14:05 - Dự án 1: Portfolio cho người sáng tạo nội dung 15:22 - Gặp Claude Code 19:39 - Đọc /context 21:52 - Thêm dữ liệu thật 22:56 - database, đăng nhập, ghi dữ liệu, nối UI 23:42 - Lấy API key từ OpenRouter và file .env 27:23 - Session, Checkpoint và Git 29:42 - Chủ động /compact 30:58 - Phase 8: làm sao biết model thật sự được gọi 31:23 - Phase 9: bắt AI trả lời có căn cứ 31:55 - Phase 10: Thêm công cụ cho AI 34:12 - Code review toàn diện 34:46 - RECAP 35:16 - Dùng coding agent miễn phí: OpenCode #claudecode #vibecoding #aiagent #nextjs #lậptrình