Lập trình cho nhà tiếp thị: Hướng dẫn từng bước với AI Coding Tools

Hướng dẫn từng bước biến người không biết gì về kỹ thuật thành người có thể xây và vận hành sản phẩm bằng AI coding tools.

Lập Trình cho nhà tiếp thị

Hướng dẫn từng bước để từ người không biết code trở thành pro với các công cụ AI agent.

$ npm install -g @anthropic-ai/claude-code
> Đang cài đặt...
✓ Cài đặt thành công

$ claude
> Chào mừng bạn đến với Claude Code!

Tạo landing page cho SaaS của tôi

✓ Đã tạo project Next.js
✓ Cài đặt dependencies
✓ Xây dựng homepage với hero section
✓ Thêm bảng giá
✓ Deploy lên Vercel

✓ Website đã sẵn sàng!

Không cần kinh nghiệm terminal

Claude Code sẽ chạy lệnh cho bạn. Bạn chỉ cần mô tả những gì bạn muốn xây dựng.

Sự khác biệt quan trọng

💡 ChatGPT chỉ cho bạn lời khuyên. Công cụ Agentic làm thay bạn.

ChatGPT vs Claude Code

| Bạn: Tạo form liên hệ | Bạn: Tạo form liên hệ với name, email, message | | ChatGPT: Đây là cách tạo... | Claude Code: | | jsx | ✓ Đọc project structure | | function ContactForm() { | ✓ Tạo file ContactForm.tsx | | return form...form | ✓ Thêm validation | | } | ✓ Cập nhật trang | | | ✓ Chạy thử | | Bạn phải tự copy, tạo file… | Bạn chỉ cần xem kết quả… |

Agent giỏi những gì?

Agent xuất sắc trong những công việc mà con người thấy tẻ nhạt, dễ sai sót, hoặc quá tải.

Loại công việc	Ví dụ cụ thể	Agent làm được
Big Data	Quét file log, phân tích dữ liệu lớn	Không mệt mỏi, không mất context
Task Chains	Chuỗi thao tác phức tạp	Thực hiện tuần tự chính xác
Multi-File	Sửa nhiều file cùng lúc	Đảm bảo nhất quán
Cross-Project	Liên kết nhiều project	Hiểu mối liên hệ giữa các phần
Grunt Work	Viết boilerplate, refactor	Làm nhanh, không than vãn

Thay đổi tư duy

Ngừng nghĩ “tôi có thể xây dựng gì?”. Hãy nghĩ “tôi có thể ủy thác gì?”. Bạn là đạo diễn. Agent là người thực hiện.

Bạn có thể xây dựng gì?

Những dự án marketing thực tế chỉ cách một prompt.

Landing Page

“Tạo landing page đẹp với 3 tiêu đề khác nhau để thử A/B test xem tiêu đề nào khách hàng click nhiều hơn.

Những phần cần có:

Phần đầu trang nổi bật (Hero section - hình lớn + tiêu đề chính)

Phần chứng minh uy tín (Social proof - đánh giá, logo khách hàng, số liệu thật)

Các nút kêu gọi hành động (CTA buttons - “Đăng ký ngay”, “Thử miễn phí”, “Mua ngay”…)

Thiết kế responsive (đẹp mượt trên điện thoại, máy tính bảng và máy tính)“

Trang bảng giá

“Tạo trang bảng giá đẹp, có nút chuyển đổi giữa thanh toán theo tháng và theo năm.

Những phần cần có:

3 gói giá khác nhau (gói cơ bản - gói phổ biến - gói cao cấp)

Bảng so sánh chi tiết tất cả tính năng giữa các gói

Hiệu ứng chuyển động mượt mà khi bấm nút tháng/năm

Sẵn sàng kết nối với Stripe (cổng thanh toán online)“

Trang so sánh

“Tạo trang so sánh sản phẩm của mình với đối thủ cạnh tranh.

Những phần cần có:

Bảng so sánh tính năng (feature matrix) rõ ràng

Phần “Tại sao nên chọn chúng tôi” (lợi ích nổi bật)

Tối ưu SEO để Google dễ tìm thấy”

Câu chuyện thành công

“Tạo trang case study (câu chuyện thành công của khách hàng) kèm số liệu cụ thể.

Những phần cần có:

Phần kết quả rõ ràng (số liệu trước - sau)

Hình ảnh so sánh Trước / Sau

Lời chứng thực thật từ khách hàng (client quote)

Nút tải xuống tài liệu (Download CTA)“

Công cụ CLI thân thiện với bạn

Claude có thể sử dụng các công cụ này. Chỉ cần nói “deploy lên Vercel” hoặc “tích hợp Stripe”.

Công cụ	Mô tả	Lệnh ví dụ
Vercel	Deploy trong vài giây	`vercel --prod`
Stripe	Test payment locally	`stripe listen`
Resend	Gửi transactional email	`resend emails:send`
Supabase	Database & auth	`supabase db push`
PostHog	Analytics & experiments	`posthog-cli`
GitHub CLI	GitHub từ terminal	`gh repo create`

💡 Mẹo Chọn một thứ bạn muốn có. Nói Claude xây dựng. Cứ như vậy.

Cơ bản về Terminal

Terminal là nơi bạn chạy lệnh. Claude Code cũng dùng nó. Đây là những lệnh bạn sẽ thấy.

Di chuyển

Lệnh	Mô tả
`cd folder-name`	Vào thư mục
`cd ..`	Lên một cấp
`cd ~`	Về thư mục home
`ls`	Liệt kê file
`pwd`	Xem vị trí hiện tại

File

Lệnh	Mô tả
`mkdir new-folder`	Tạo thư mục
`touch file.txt`	Tạo file
`rm file.txt`	Xóa file
`rm -r folder`	Xóa thư mục
`cat file.txt`	Xem nội dung file

Packages

Lệnh	Mô tả
`npm install`	Cài dependencies
`npm run dev`	Chạy dev server
`npm run build`	Build production
`pnpm install`	Cài bằng pnpm

Git

Lệnh	Mô tả
`git status`	Xem trạng thái
`git add .`	Stage changes
`git commit -m "msg"`	Commit
`git push`	Push lên GitHub

💡 Lưu ý Bạn không cần nhớ những lệnh này. Claude Code chạy chúng cho bạn. Nhưng biết chúng làm gì giúp bạn hiểu agent đang làm gì.

Cài đặt Node.js

Trước khi cài Claude Code, bạn cần Node.js. Đây là runtime để chạy JavaScript tools.

Bước 1: Tải Node.js

Truy cập nodejs.org và tải phiên bản LTS

👉 Truy cập: https://nodejs.org
👉 Click nút LTS màu xanh lá
👉 Cài đặt như app bình thường

Bước 2: Kiểm tra

Mở terminal và kiểm tra version

$ node --version
v20.11.0
$ npm --version
10.2.4
✓ Node.js đã sẵn sàng!

Bước 3: Cài Claude Code

Cài đặt Claude Code toàn cục

$ npm install -g @anthropic-ai/claude-code
> Đang cài đặt...
✓ Claude Code đã sẵn sàng!

Bắt đầu trong 5 bước

Từ zero đến project đầu tiên. Không cần kiến thức coding.

Mở Terminal - Mac: Cmd+Space, gõ ‘Terminal’. Windows: tìm ‘Command Prompt’
Cài Node.js - Tải từ nodejs.org, phiên bản LTS
Cài Claude Code - Chạy: npm install -g @anthropic-ai/claude-code
Tạo project - Vào thư mục, chạy: claude
Mô tả ý tưởng - Nói Claude bạn muốn xây gì

Code thực chất là gì?

Code chỉ là file text trong thư mục. Một “project” là thư mục với quy tắc về cách các file hoạt động cùng nhau.

Cấu trúc Project

my-project/
├── src/
│   ├── page.tsx           # Trang chủ
│   ├── layout.tsx         # Wrapper cho tất cả trang
│   └── components/
│       └── ContactForm.tsx
├── package.json           # Cấu hình project
└── .env.local            # Secrets (không commit)

Click để khám phá. Đây là tất cả một project: các file text được tổ chức.

Software Stack

Phần mềm hiện đại có nhiều lớp. Đây là vị trí của bạn.

Lớp	Ví dụ	Vai trò
1. AI Providers	OpenAI, Anthropic, Google	Bộ não. Bạn không tương tác trực tiếp.
2. Agentic Tools	Claude Code, Cursor, Copilot	Bạn ở đây. Agent gọi AI và thực thi.
3. Frameworks	Next.js, Rails, Django	Cấu trúc sẵn. Agent viết code trong đó.
4. Source Control	Git, GitHub	Theo dõi mọi thay đổi. Safety net.
5. Hosting	Vercel, Heroku, Railway	Chạy code để thế giới truy cập.

💡 Vị trí của bạn Là nhà tiếp thị, bạn làm việc ở lớp 2. Agentic tool xử lý mọi thứ khác.

Chạy Local & Ports

localhost nghĩa là máy tính của bạn. port như số căn hộ: app nào để kết nối.

Port	Dùng cho
`:3000`	Next.js, React
`:3001`	App thứ hai
`:5173`	Vite
`:5432`	PostgreSQL
`:6379`	Redis

⚠️ Port đã được sử dụng? Nếu thấy “port 3000 is already in use”, dừng server khác hoặc chạy port khác: npm run dev -- --port 3001

Environment Variables & API Keys

Secrets như password và API keys được lưu riêng, không trong code. Không bao giờ commit lên GitHub.

.env.local

# File này bị git ignore - secrets giữ ở local

DATABASE_URL=postgresql://...
STRIPE_SECRET_KEY=sk_live_...
NEXTAUTH_SECRET=your-secret-key

👉 Thêm .env.local vào .gitignore
👉 Không bao giờ commit file này!

🔴 Cảnh báo nghiêm trọng Nếu vô tình push API key lên GitHub, coi như đã bị lộ. Rotate (tạo lại) key ngay lập tức. Claude Code sẽ cảnh báo nếu bạn cố commit .env files.

Context & Tokens

AI models có “context window” - giới hạn bao nhiêu chúng nhớ trong một cuộc trò chuyện.

Context: 9,830 / 200,000 tokens

📄 Writing src/components/ContactForm.tsx +2,341
📄 Updating src/app/page.tsx +1,902
Bạn: Nút thành màu xanh +8
📄 Reading src/components/ContactForm.tsx +2,341
📄 Updating button styles +847
Bạn: Thêm form validation +9
📄 Reading src/components/ContactForm.tsx +2,892

✅ Còn nhiều chỗ! Tiếp tục chat!

Token là gì?

Token là đoạn text, khoảng 4 ký tự hoặc 3/4 từ. “Xin chào” = 2 tokens. Mọi thứ bạn gửi VÀ nhận đều tính vào giới hạn.

Mẹo quản lý context

Chia task lớn thành các cuộc trò chuyệ
Nến riêngu Claude quên, nhắc lại
File code dài tốn nhiều token, nên reference bằng tên thay vì paste

File Markdown

Markdown (.md) là cách đơn giản để format text. Dùng cho README, docs, và notes.

Cú pháp

# Heading 1
## Heading 2
**bold**
*italic*
[Link](url)
- Item 1
- Item 2
`code`

Tại sao dùng Markdown?

Nội dung đọc như văn bản thường nhưng sẽ hiển thị đẹp mắt trên GitHub, các trình soạn thảo và trang tài liệu.

Nếu bạn đã sử dụng Notion hoặc Slack, bạn đã từng viết markdown 😄

Agent hoạt động như thế nào?

Bạn mô tả điều muốn làm. Agent đọc code, lập kế hoạch, và thực thi.

Bạn mô tả

Rõ ràng, cụ thể

Bạn: Thêm form liên hệ với name, email, message

Agent phân tích

Đọc project, hiểu structure

📁 Đọc project structure
📄 Tìm component phù hợp
📝 Lập kế hoạch implementation

Agent thực thi

Viết code, kiểm tra lỗi

✓ Tạo ContactForm.tsx
✓ Thêm validation
✓ Cập nhật trang chủ
✓ Chạy thử

Bạn review

Xem thay đổi, phê duyệt

✅ Phê duyệt và deploy!

Công việc của bạn	Công việc của Agent
Communication rõ ràng	Đọc docs
Review thay đổi	Viết code
Định hướng	Kiểm tra lỗi

Chế độ Agent

Kiểm soát mức độ tự chủ của agent. Bắt đầu an toàn, tăng tốc khi quen.

Default Mode

Bạn phê duyệt từng thay đổi file

✅ An toàn cho người mới
✅ Thấy mọi thay đổi
✅ Dễ từ chối lỗi
❌ Workflow chậm hơn
❌ Click nhiều

💡 Tuyệt vời cho người mới. Bạn sẽ học bằng cách review.

Auto-Accept

Tự động chấp nhận thay đổi

✅ Nhanh hơn
✅ Ít gián đoạn
❌ Cần review sau

💡 Phù hợp khi đã quen.

Plan Mode

Agent tạo kế hoạch trước

✅ Thấy toàn bộ trước khi làm
✅ Phù hợp task lớn

💡 Dùng cho refactor, feature lớn.

YOLO Mode

Tự do tối đa

⚠️ Chỉ dùng khi hiểu rõ
⚠️ Có thể tạo nhiều thay đổi

💡 Dùng cho prototype nhanh.

🚀 Quá trình phát triển Default → Auto-accept → Plan mode cho task lớn. Hầu hết developer dùng auto-accept với plan mode thỉnh thoảng.

Vòng lặp Iteration

Bạn không cần làm đúng ngay lần đầu. Mô tả → Xây dựng → Review → Tinh chỉnh.

Iteration 1: Thay đổi headline

Bạn: Đổi headline thành 'Tăng tốc với AI'
✓ Đã cập nhật Hero.tsx

Iteration 2: Thêm CTA

Bạn: Thêm nút CTA màu xanh
✓ Đã thêm button component
✓ Đã cập nhật styles

Iteration 3: Responsive

Bạn: Làm cho mobile
✓ Đã thêm responsive classes
✅ Hoàn thành!

Pattern: Mô tả → Agent xây → Review → Tinh chỉnh → Lặp lại

Git & GitHub

Safety net của bạn. Mọi thay đổi được theo dõi, không gì bị mất.

Git vs GitHub

Git (máy tính)

Theo dõi mọi thay đổi
Tạo save points (commits)
Hoạt động offline

GitHub (internet)

Lưu code online
Cho phép collaboration
Kết nối deployment

Các câu lệnh cơ bản

Lệnh	Mô tả
`git status`	Xem trạng thái
`git add .`	Stage tất cả
`git commit -m "msg"`	Commit
`git push`	Push lên GitHub
`git pull`	Pull từ GitHub
`git checkout .`	Hoàn tác thay đổi

Học bằng cách hỏi

Bạn không cần nhớ cú pháp. Hỏi “tại sao” và xây dựng trực giác theo thời gian.

Ví dụ: Hiểu Stripe Webhooks

Bạn: Tại sao cần webhook thay vì check sau checkout?

Claude: Người dùng có thể đóng browser
trước khi site nhận success callback.
Webhooks đảm bảo Stripe báo trực tiếp
cho bạn về payment.

✅ Hiểu rõ hơn!

Cách hỏi hiệu quả

Yêu cầu giải thích: “Giải thích từng bước khi làm”
Hỏi tại sao: “Tại sao dùng cách này thay vì X?”
Xem diff: “Cho tôi xem bạn đã thay đổi gì”

📖 Quá trình học Tuần 1: “Cái này làm gì?” → Tuần 8: “Tôi biết chúng ta cần gì” → Tuần 12: “Thử cách này xem”

Debug

Lỗi là bình thường. Copy và hỏi agent “Điều này nghĩa là gì?”

Lỗi phổ biến

Cannot read properties of undefined

❌ Cannot read properties of undefined

Nghĩa là: Truy cập thứ không tồn tại
Fix: Thêm optional chaining: users?.map(...)

Debug Loop

1️⃣ Copy error (full message)
2️⃣ Paste cho agent: "Chuyện gì xảy ra?"
3️⃣ Review fix rồi apply

Hoàn tác

$ git checkout .
✅ Quay lại trạng thái trước

Testing & TDD

Test là code kiểm tra code của bạn. Viết test trước, rồi viết code.

Red

Viết test thất bại trước

test("validates email", () => {
  expect(isValid("a@b.com")).toBe(true);
});

❌ FAIL: isValid is not defined

Green

Viết code để test pass

function isValid(email) {
  return email.includes("@");
}

✅ PASS

Refactor

Cải thiện code

function isValid(email) {
  return /^[^\s@]+@[^\s@]+$/.test(email);
}

✅ Vẫn pass, code tốt hơn

Không có test	Có test
Thay đổi → Check thủ công → Miss bug → Deploy → User tìm thấy lúc 2am	Thay đổi → npm test → Bắt bug → Fix → Deploy tự tin

Mở rộng Agent

Cho AI thêm quyền lực. Như xây dựng đội ngũ chuyên gia.

MCPs

Kết nối bên ngoài

Stripe - Kiểm tra thanh toán và gói đăng ký
PostHog - Truy vấn dữ liệu phân tích
Browser - Thu thập dữ liệu từ trang web đối thủ
Slack - Gửi thông báo

Hỏi: “Kết nối Stripe để kiểm tra doanh thu từ đăng ký”

Skills

Thêm chuyên môn sâu về lĩnh vực

Cài skill cho Claude:

npx skills add owner/skill-name

Skills phổ biến:

vercel-react-best-practices
web-design-guidelines
shadcn-ui

👉 Vào trang: skills.sh

NPM Packages

Thư viện sẵn có

Hỏi: “Package tốt nhất để gửi email?”

Agent sẽ gợi ý và cài đặt:

Resend - Transactional email
Nodemailer - SMTP
SendGrid - Email API

Tech Stack

AI tools hoạt động tốt nhất với ngôn ngữ phổ biến. Bắt đầu với Next.js trừ khi có lý do khác.

Next.js (Khuyến nghị)

Chi tiết
Ngôn ngữ	TypeScript
Deploy	Vercel, Netlify
Dùng bởi	Notion, TikTok, Nike
Điểm mạnh	Chạy mọi nơi, ecosystem khổng lồ, AI support tốt nhất
Phù hợp cho	Marketing sites, SaaS apps, E-commerce, Dashboards
AI Support	Xuất sắc. Hầu hết code online là JS/TS.

❓ Không chắc? Hỏi Claude: “Tôi muốn xây [project của bạn]. Nên dùng tech stack nào?”

Học qua việc khám phá

Clone các template Vercel open source để xem project thực được xây như thế nào. Sửa, phá, hỏi Claude giải thích.

Template	Mô tả	Học được
Portfolio Starter	Portfolio và blog đơn giản	Markdown content, RSS, SEO, Dark mode
Blog Starter	Blog tĩnh với Next.js	Static generation, Tailwind, TypeScript
AI Chatbot	Chatbot đầy đủ tính năng	AI SDK, Streaming, Auth, Database

$ git clone https://github.com/vercel/nextjs-portfolio-starter
$ cd nextjs-portfolio-starter
$ npm install && npm run dev

✅ Server chạy tại http://localhost:3000

👉 Sau đó hỏi Claude: "Giải thích project này được tổ chức thế nào?"

Thử ngay

Bạn vừa học mọi thứ cần thiết để bắt đầu xây dựng.

Interactive Demo

👋 Chào mừng! Thử các lệnh:
   help    - Xem hướng dẫn
   install - Cài Claude Code
   create  - Tạo project mới
   deploy  - Triển khi dự án

Tham gia cộng đồng

Học từ người khác đang xây dựng với AI. Nhận giúp đỡ khi bị kẹt. Chia sẻ những gì bạn tạo ra.

Cộng đồng đang chuyển mình thành builder với sự trợ giúp của AI.

Tóm tắt

Agentic AI làm thay bạn, không chỉ cho lời khuyên
Bạn là đạo diễn, agent là người thực hiện
Bắt đầu với Next.js + Claude Code
Học qua việc làm, không cần nhớ cú pháp
Lặp lại là chìa khóa: Mô tả → Xây dựng → Đánh giá → Tinh chỉnh

⚡ Sẵn sàng bắt đầu? Cài Claude Code ngay hôm nay và xây dựng project đầu tiên của bạn. Chỉ cần một prompt.