Hướng dẫn Build App bằng Claude Code

​

Có một sự thật mà ít người nói với bạn: ngày xưa muốn có một phần mềm riêng, bạn phải trả vài chục đến vài trăm triệu để thuê developer. Còn bây giờ?

Mình vừa build xong một web quản lý quán cà phê hoàn chỉnh trong khoảng 10 phút — và mình không hề biết code.

Ý tưởng này đến từ một người bạn của mình. Bạn ấy nhắn hỏi: "Tao muốn một app để quản lý quán — biết khi nào hết stock, có workflow cho nhân viên mới, có cả công thức pha chế."

Thay vì trả lời "khó lắm", mình quyết định ngồi build thử.

Và trong email này, mình sẽ dẫn bạn đi qua toàn bộ quy trình, từ ý tưởng đến một trang web thật sự "sống" trên internet mà ai cũng truy cập được.

Công cụ chính: Claude Code

Thứ mình dùng để build là Claude Code. Nếu bạn tải app Claude về máy tính, bạn sẽ thấy 3 phần: Chat, Cowork và Code. (Nếu chỉ dùng bản web, bạn chỉ thấy Chat thôi.)

• Chat: để hỏi đáp thông thường, nó trả lời bạn.
• Cowork: làm được nhiều hơn — tạo PowerPoint, kết nối phần mềm bên thứ ba, tạo file cho bạn.
• Code: nơi bạn coding và thiết kế ra phần mềm, sản phẩm bạn muốn.

Điểm hay nhất ở đây là: trước kia, làm app là việc chỉ dành cho dân IT. Nhưng từ khi có AI, kể cả người không rành developing như mình và bạn vẫn có thể tạo ra app phục vụ công việc và cuộc sống.

Một lưu ý nhỏ: để có Claude Code, bạn cần đăng ký gói Pro — khoảng 17 đô (hoặc 20–22 đô nếu trả theo tháng).

Bắt đầu setup

Bước đầu tiên là chọn một folder trên máy để lưu trữ những gì bạn build được. Mình đặt tên quán là "Between Us".

Tiếp theo là chọn model AI và tốc độ:

• Haiku: không quá thông minh nhưng trả lời nhanh.
• Sonnet (4.6): trung lập, tiết kiệm token — mình chọn cái này cho task developing.
• Opus 4.8: thông minh nhất nhưng tốn nhiều token nhất.

Mình cũng chọn Plan mode. Cái này quyết định độ "strict" của AI: nếu chọn chế độ hỏi-từng-bước, nó sẽ liên tục xin permission và tốn nhiều thời gian. Plan mode là điểm cân bằng tốt nhất.

Viết prompt đầu tiên

Prompt của mình đơn giản: "Giúp tôi tạo một trang web để quản lý quán cà phê, bao gồm tracking stock, workflow cho nhân viên, recipe, và số lượng order mỗi ngày."

Một mẹo quan trọng: mình đính kèm một ảnh tham khảo (mình từng generate thử bằng ChatGPT) để AI hiểu mình muốn trang web trông như thế nào. Rồi mình ghi thêm yêu cầu: publish lên GitHub và host bằng Hostinger.

Trước khi build, AI sẽ hỏi bạn vài câu cấu hình:

• Dùng trên 1 máy hay nhiều máy? Nếu chỉ 1 máy tại quán → dùng local storage, không cần backend. Nếu nhiều thiết bị cần đồng bộ → dùng cloud như Supabase (có gói miễn phí).
• Có cần login phân quyền không? (Manager khác, barista khác — hay vào web là dùng được luôn.)

Để demo cho đơn giản, mình chọn 1 máy tính và không cần login. Sau đó AI cho bạn xem plan — kế hoạch nó sẽ build: dashboard (doanh số, order, inventory), danh sách nguyên liệu, recipe, task cho nhân viên, report. Đây cũng là chỗ bạn điều chỉnh tính năng trước khi nó build — làm vậy sẽ tốn ít token hơn nhiều.

Mẹo lấy design đẹp miễn phí

Trong lúc chờ AI build, mình muốn chia sẻ một tip mình rất hay dùng. Nếu bạn không thích "vibe" mặc định, hãy lên các trang này tìm style bạn thích:

• Dribbble — nơi có rất nhiều design đẹp
• Pinterest
• Behance

Cách làm cực đơn giản: screenshot cái style bạn thích, bỏ vào Claude Code và nói "code lại theo style này". AI đủ thông minh để hiểu bạn muốn gì. Mình thử đổi sang vibe retro game điện tử — và kết quả ra một trang hoàn toàn khác: màu sắc, font chữ, inventory gắn emoji, hiệu ứng hover khi rê chuột. Đẹp và interactive hơn hẳn bản đầu, mà mình không cần đụng vào một dòng code nào.

Đẩy code lên GitHub

Nếu bạn chưa từng làm IT, đây là cách dễ hiểu nhất: GitHub giống như Google Drive, nhưng thay vì lưu file doc hay PDF, nó lưu code của trang web/app bạn.

Lý do cần nó: code nằm trên máy bạn thì chỉ mình bạn đọc được. Khi đẩy lên GitHub, các bên đối tác (như Hostinger) mới truy cập và chạy được app của bạn.

Các bước:

1. Tạo một repository (giống một folder dự án để lưu code).
2. Copy đoạn lệnh GitHub đưa, dán vào Claude Code và nói "push it to GitHub".
3. Claude Code sẽ đẩy code từ máy bạn lên GitHub. Lần đầu, nó sẽ yêu cầu bạn authorize — chỉ cần làm theo hướng dẫn (nhập mã 6 số) là xong.

Host trang web bằng Hostinger

App mới chỉ nằm trên máy bạn. Để người khác truy cập được, bạn cần một bên host nó lên internet. Mình dùng Hostinger — đối tác của mình trong video này, một bên hosting nổi tiếng và uy tín.

Vài điểm đáng chú ý về gói cước:

• Giá chỉ từ 75.900đ/tháng.
• Chọn gói từ 12 tháng trở lên thì được tặng tên miền miễn phí và hộp thư để bắt đầu kinh doanh.
• Gói 48 tháng thì chi phí hosting rẻ hơn rất nhiều.
• Nhập code HUYDAO để được giảm 10%.

​ĐĂNG KÝ HOSTINGER + code "HUYDAO" tại đây​

Sau khi vào Hostinger, các bước deploy:

1. Vào Website → chọn Node.js → Deploy.
2. Kết nối GitHub vào Hostinger, chọn folder "Between Us Cafe" mình vừa push.
3. Đến phần Environment variables — đây là chỗ rất hay gặp lỗi.

Về phần environment variables: với web đơn giản như của mình thì thường không cần. Nhưng nếu bạn dùng API từ nhiều nguồn khác nhau, bạn sẽ cần file này (file có đuôi .env). Nó là một file ẩn — để hiện ra, bạn bấm Command + Shift + dấu chấm. App của mình không có file ẩn này nên mình bỏ qua bước đó.

Cuối cùng, bấm Deploy. Và bùm — trang web chính thức live trên internet, ai cũng vào được. Vì mình dùng domain tạm của Hostinger nên địa chỉ trông hơi dài, nhưng nếu đăng ký gói ít nhất 1 năm, bạn có thể chọn tên miền đẹp như betweenus.coffee và connect vào.

Khi gặp lỗi thì làm gì?

Đây là phần mình muốn nhấn mạnh cho những bạn không chuyên về coding. Trong quá trình làm, chắc chắn sẽ có lúc gặp lỗi hoặc bước bạn không biết. Cách xử lý đơn giản: bảo AI fix giúp bạn. Chỉ cần nói "tôi có lỗi như thế này, hướng dẫn tôi sửa" — và nó sẽ dẫn bạn từng bước.

Đặc biệt, khi bạn tải app Claude Code về máy và cho phép nó access, nó có thể take over máy tính của bạn để tự thực hiện việc chỉnh sửa — bạn sẽ thấy một viền cam quanh màn hình khi nó đang làm.

Từ một ý tưởng đơn giản trong đầu, bạn dùng Claude Code để code, đẩy lên GitHub, và publish qua Hostinger — thế là có một trang web thật sự sống và một business cho riêng mình.

Hẹn gặp bạn trong email tiếp theo,
Huy Dao

P.S. Deploy your first app with Hostinger tại: https://hostinger.com/huydao (dùng code HUYDAO for 10% OFF)