Tạo một app với Claude Code trong ba bước

1. Từ một ý tưởng app tới một ứng dụng chạy được

Video mở đầu bằng một câu hỏi: nếu từ một ý tưởng app đơn giản, bạn biến được nó thành một ứng dụng thật, chạy được, mà không phải mất hàng tuần học cách tự code mọi thứ từ đầu thì sao? Người dẫn kênh Easy AI Coding nói đó chính là điều anh sẽ cho xem, bằng Claude Code (theo video đăng ngày 12/10/2026).

Điểm xuất phát chỉ là một ý tưởng. Theo lời anh trong video đăng ngày 12/10/2026, Claude Code sẽ giúp tạo cấu trúc project, build các feature chính, sửa lỗi, rồi biến tất cả thành một app hoạt động được; và anh nói bạn không cần là một developer có kinh nghiệm.

2. App mẫu: một habit tracker, chia làm ba bước

Trong bài hướng dẫn này, app được chọn là một habit tracker (app theo dõi thói quen) đơn giản. Người dùng có thể thêm thói quen, đánh dấu hoàn thành mỗi ngày, theo dõi tiến độ, và dữ liệu của họ được lưu lại. Theo người dẫn, app này đủ đơn giản cho người mới, nhưng có đủ chức năng để thật sự cho thấy Claude Code làm được gì (theo video đăng ngày 12/10/2026).

Anh chia toàn bộ quá trình thành đúng ba bước đơn giản, để ngay cả người chưa từng build app nào cũng làm theo được. Anh cũng nói sẽ không "nhảy cóc như ảo thuật" từ một folder trống sang ứng dụng đã xong. Chỗ nào trông chưa ổn, anh sẽ cho xem cách nhờ Claude Code cải thiện. Chỗ nào hỏng, anh sẽ cho xem cách nhờ Claude tìm ra vấn đề và sửa. Anh nói đó có lẽ là phần anh thích nhất trong cả workflow này (theo video đăng ngày 12/10/2026).

3. Bước 1: chuẩn bị Claude Code và một folder trống

Bước 1 là biến ý tưởng thành một project. Người dẫn gọi đây là phần quan trọng nhất với anh, vì trước khi Claude Code có thể build app, ta phải nói cho nó biết chính xác mình muốn gì (theo video đăng ngày 12/10/2026).

Trước hết là chuẩn bị Claude Code. Anh hướng dẫn mở trang chính thức của Claude và làm theo hướng dẫn cài đặt cho máy của mình. Cài xong thì đăng nhập vào tài khoản Claude khi được hỏi. Trên màn hình là trang đăng nhập của Claude với nút "Download desktop app", rồi cửa sổ cài đặt "Claude for Windows" (demo trong video đăng ngày 12/10/2026).

Tiếp theo, tạo một folder mới trên máy. Anh đặt tên folder là Habit Tracker App. Folder này sẽ chứa mọi thứ Claude tạo ra cho project. Theo lời anh, bạn mở folder đó trong terminal rồi khởi động Claude Code, và từ đó Claude Code có thể làm việc trực tiếp với project (theo video đăng ngày 12/10/2026).

Trên màn hình thì cách làm hơi khác lời nói: anh dùng ứng dụng Claude trên desktop, chọn chế độ Cowork (model ghi trên màn hình là Sonnet 5, mức High), gắn folder Habit Tracker App trên Desktop làm project, và bấm "Allow" khi ứng dụng hỏi có cho Claude thay đổi file trong folder này không (demo trong video đăng ngày 12/10/2026).

Anh nói: đừng lo nếu nhìn terminal thấy sợ. Chính anh, lần đầu nhìn một terminal đầy chữ, cũng có cảm giác như mình sắp hack một vệ tinh. Nhưng ở đây mọi thứ sẽ được giữ cực kỳ đơn giản. Thay vì tự tạo file và viết hàng trăm dòng code, ta sẽ giải thích app của mình bằng tiếng Anh bình thường (theo video đăng ngày 12/10/2026).

4. Prompt mở đầu viết bằng tiếng Anh thường

Anh gõ một đoạn mô tả app như sau, rồi gửi đi:

Create a modern habit tracker web app for beginners. Users should be able to add habits, mark them as completed, delete habits, and see their daily progress. Save the habits locally so they remain after refreshing the page. Use a clean modern interface, rounded cards, simple icons, responsive mobile design, and make the app easy to use

Nghĩa là: tạo một web app habit tracker hiện đại cho người mới; người dùng phải thêm được thói quen, đánh dấu hoàn thành, xoá thói quen và xem tiến độ trong ngày; lưu thói quen ở máy để chúng vẫn còn sau khi refresh trang; giao diện gọn và hiện đại, thẻ bo góc, icon đơn giản, thiết kế responsive cho điện thoại, và dễ dùng.

Theo người dẫn (video đăng ngày 12/10/2026), khi nhận ý tưởng app, Claude Code phân tích project, tạo cấu trúc và bắt đầu sinh ra các file cần thiết. Anh nói mình rất thích ngồi xem đoạn này. Thay vì bắt anh hiểu từng file trước khi bắt đầu, Claude Code lo được một phần rất lớn của khâu setup đó. Khi nó chạy xong, hãy nhìn vào các file của project: lúc này ta đã có cấu trúc cơ bản cho ứng dụng.

5. Bản đầu chỉ cần chạy được, chưa cần hoàn hảo

Sau đó, anh hướng dẫn nhờ Claude Code chạy app ở máy (locally) và chỉ rõ cách mở nó trong trình duyệt, rồi làm theo hướng dẫn trên màn hình. "Và nó đây", anh nói. Từ một folder trống, ta đã có bản đầu của một app thật (demo trong video đăng ngày 12/10/2026).

Trên màn hình, câu trả lời của Claude ghi rằng habit tracker đã được lưu trong folder "Habit Tracker App" trên Desktop thành ba file index.html, style.css và app.js, và chỉ cần nhấp đúp vào index.html để mở bằng bất kỳ trình duyệt nào (demo trong video đăng ngày 12/10/2026). Phần "What it does" liệt kê những gì app làm được:

• Thêm thói quen với tên tuỳ ý và một icon emoji (có bảng chọn nhanh vài emoji thông dụng) (demo trong video đăng ngày 12/10/2026).
• Chạm vào vòng tròn để đánh dấu đã làm trong ngày, chạm lần nữa để bỏ (demo trong video đăng ngày 12/10/2026).
• Xoá thói quen có hỏi xác nhận, để không lỡ tay xoá (demo trong video đăng ngày 12/10/2026).
• Một vòng tiến độ và các ô thống kê ở trên cùng: số thói quen xong hôm nay, tổng số thói quen, và chuỗi ngày (streak) tốt nhất đang có (demo trong video đăng ngày 12/10/2026).
• Mọi thứ tự lưu vào local storage của trình duyệt, nên vẫn còn sau khi refresh hay mở lại trang (demo trong video đăng ngày 12/10/2026).
• Thẻ bo góc, animation mượt, giao diện sáng/tối theo cài đặt hệ thống, và layout responsive chạy tốt trên màn hình cỡ điện thoại (demo trong video đăng ngày 12/10/2026).

Có thể nó chưa đẹp hoàn hảo, và anh nói điều đó hoàn toàn bình thường. Mục tiêu của bản đầu không phải là sự hoàn hảo, mà là có một thứ chạy được (theo video đăng ngày 12/10/2026).

Rồi anh đưa ra điều mà theo anh phần lớn mọi người không biết: prompt mở đầu không cần chứa mọi chi tiết nhỏ. Cố mô tả 50 feature cùng lúc thậm chí có thể khiến quá trình rối hơn. Hãy bắt đầu với chừng ba hay bốn feature quan trọng, làm cho chúng chạy trước, rồi cải thiện app từng phần một. Anh gọi đó là một thay đổi lớn (game changer) cho người mới (theo video đăng ngày 12/10/2026).

Giờ đã có bản ứng dụng cơ bản chạy được, ta tới phần vui: biến bản cơ bản này thành thứ thật sự có cảm giác là một app (theo video đăng ngày 12/10/2026).

6. Bước 2: nói chuyện với Claude Code để làm đẹp app

Bước 2 là build và tuỳ biến các feature chính. Người dẫn nói đây là phần anh thích nhất, vì đây là lúc ta thôi chấp nhận bất cứ thứ gì bản đầu đưa ra, và bắt đầu biến app thành của mình.

App đã chạy rồi, nhưng có thể làm nó tốt hơn rất nhiều. Có thể nút bấm của bạn quá đơn điệu. Có thể layout trông trống trải. Có thể chưa có đủ phản hồi khi bạn hoàn thành một thói quen. Anh nói chuyện đó bình thường: đừng xoá hết, đừng làm lại project, chỉ cần nói chuyện với Claude Code (theo video đăng ngày 12/10/2026). Ví dụ, anh gõ:

Improve the design of the app. Add a dashboard at the top showing how many habits I completed today and my completion percentage. Make each habit appear inside a modern card and add a visual completed state when I check it

Rồi để Claude Code thực hiện thay đổi, refresh app và nhìn sự khác biệt: có danh sách thói quen, có thông tin tiến độ, và giao diện rõ ràng hơn nhiều (demo trong video đăng ngày 12/10/2026). Anh nói mình "mê" việc có thể thử các ý tưởng khác nhau nhanh như thế này.

Câu trả lời của Claude trên màn hình (video đăng ngày 12/10/2026) còn kể một chi tiết: trong lúc test, nó tìm ra một bug thật. Hai class .confirm-overlay và .emoji-menu đặt display vô điều kiện, đè lên thuộc tính hidden, khiến lớp hỏi xác nhận xoá tuy vô hình nhưng vẫn chặn click suốt thời gian đó; nó sửa luôn. Phần "What changed" ghi: một thẻ dashboard dải màu gradient ở trên cùng với vòng tiến độ lớn cho phần trăm hoàn thành hôm nay, dòng đếm kiểu "2/4 habits completed", một câu nhắn đổi theo tiến độ ("Let's get started", rồi "Great progress", rồi "Amazing! Every habit done today"), và một huy hiệu best streak; mỗi thói quen nằm trong một thẻ bo góc lớn hơn, hơi nhấc lên khi rê chuột; đánh dấu xong thì hiện huy hiệu "Done" màu xanh kèm animation dấu tích.

7. Thêm feature: nút Add Habit và form chọn emoji

Giờ thêm một feature khác: anh muốn người dùng tạo được các thói quen khác nhau. Anh gõ:

Add a button called Add Habit. When I click it, open a simple form where I can enter the habit name and choose an emoji or icon. Then add the new habit to my dashboard

Theo người dẫn (video đăng ngày 12/10/2026), Claude Code có thể xem project hiện có và implement feature đó mà ta không phải tự build lại cả ứng dụng. Câu trả lời trên màn hình (demo trong video đăng ngày 12/10/2026) ghi: thanh nhập liệu luôn hiện trước đây đã bị bỏ, thay bằng một nút "Add Habit" đậm bên dưới dashboard. Bấm vào sẽ mở một form popup để gõ tên thói quen và chọn trong một lưới 18 icon emoji (icon được chọn có viền nổi bật), với hai nút Cancel và Add Habit ở dưới. Form đóng được bằng dấu X, bằng cách click ra ngoài hoặc phím Escape, và tự xoá trắng mỗi lần mở lại. Claude cũng ghi đã test cả luồng (mở, chọn icon, thêm, huỷ, chặn tên trống, Escape) từ đầu tới cuối trước khi giao.

Rồi test thử. Anh bấm Add Habit, tạo một thói quen tên Drink Water, rồi một cái nữa là workout, và có thể thêm read 20 minutes. Giờ có ba thói quen; anh đánh dấu hoàn thành hai cái, và dashboard lẽ ra phải tự cập nhật. Ảnh trên màn hình ở đoạn này cho thấy thẻ Drink water vừa được thêm, dashboard ghi "0/1 habits completed" và thông báo "Habit added" (demo trong video đăng ngày 12/10/2026). Anh nói cái thay đổi tiến độ nho nhỏ đó rất dễ thương, nhưng quan trọng hơn, nó cho người dùng phản hồi ngay lập tức.

8. Test từng feature, và tả bug bằng lời thường

Một điều nữa mà theo anh phần lớn mọi người không biết: khi build với Claude Code, hãy test mọi feature lớn ngay sau khi thêm nó. Đừng build mười thứ rồi đợi tới cuối. Thêm một feature, test nó, rồi mới làm tiếp (theo video đăng ngày 12/10/2026).

Nếu có gì không chạy, hãy nói cho Claude biết chính xác chuyện gì đã xảy ra (theo video đăng ngày 12/10/2026). Anh đưa hai ví dụ:

When I refresh the page, my habits disappear. Find the problem and fix it without changing the design

The add habit button works on desktop, but is difficult to use on mobile. Fix the mobile version.

Bạn không cần biết tên kỹ thuật của vấn đề, chỉ cần tả những gì mình thấy. Anh nói đó là một trong những lợi thế lớn nhất cho người mới (theo video đăng ngày 12/10/2026).

Trên màn hình, prompt thứ nhất trong hai ví dụ được gửi thật, và Claude trả lời: "Found it, and it's a real one", tức đã tìm ra, và đây là lỗi thật chứ không phải đoán (demo trong video đăng ngày 12/10/2026). Theo giải thích của Claude, đoạn code nạp thói quen đã lưu và hiển thị chúng chỉ chạy ở dòng cuối cùng của script, sau khi mọi nút trên trang đã được gắn xong. Nếu một dòng gắn nút nào đó lỗi (ví dụ trình duyệt dùng một bản app.js cũ trong cache không còn khớp với trang), script dừng ngay tại đó và thói quen không bao giờ được nạp lên màn hình, dù chúng vẫn nằm yên trong bộ nhớ trình duyệt. Đó đúng là triệu chứng "thói quen biến mất" mà dữ liệu thật ra không mất.

Cách sửa Claude ghi trên màn hình (demo trong video đăng ngày 12/10/2026) gồm ba việc: sắp lại script để việc nạp và hiển thị thói quen chạy ngay, trước khi gắn nút; thêm version tag vào link style.css và app.js để trình duyệt không giữ bản cache cũ sau khi cập nhật; và hiện một thông báo rõ ràng nếu trình duyệt chặn dữ liệu đã lưu (hiếm, nhưng một số cài đặt riêng tư làm vậy). Claude ghi đã kiểm tra từ đầu tới cuối: thêm thói quen, đánh dấu vài cái, xoá một cái, reload trang thật, mọi thứ quay lại y như cũ, không lỗi nào. Nó dặn thêm nên hard refresh một lần (Ctrl+F5 hoặc Ctrl+Shift+R) sau bản cập nhật này.

Giờ app đã có chức năng thật, nhưng chưa xong, vì theo anh bước tiếp theo mới là thứ phân biệt một thí nghiệm AI "hay hay" với một app thật sự có cảm giác chỉn chu (theo video đăng ngày 12/10/2026).

9. Bước 3: thử phá chính app của mình

Bước 3 là test, sửa lỗi và hoàn thiện app. Người dẫn gọi đây là phần làm anh thoả mãn nhất: ta sẽ cố phá chính app của mình. Anh nói nghiêm túc đấy, vì app trông đẹp không có nghĩa là mọi thứ thật sự chạy.

Trước hết anh test luồng sử dụng cơ bản: thêm một thói quen mới, đánh dấu hoàn thành, bỏ đánh dấu, xoá một thói quen khác, rồi refresh trang và kiểm tra xem dữ liệu còn đó không.

Tiếp theo, thu nhỏ cửa sổ trình duyệt hoặc mở app trên một màn hình nhỏ hơn, để xem chuyện gì xảy ra trên điện thoại. Có thể chữ bị cắt mất. Có thể một nút trở nên quá nhỏ. Có thể hai thẻ đè lên nhau.

10. Prompt review như một app developer chuyên nghiệp

Thay vì tự đi tìm từng vấn đề trong code, anh nhờ Claude Code (demo trong video đăng ngày 12/10/2026):

Review the entire application like a professional app developer. Test the main user experience and identify the five biggest bugs, design problems, or usability issues. Fix them without removing the current features

Theo người dẫn (video đăng ngày 12/10/2026), khi được nhờ review cả project, AI có thể xem lại những gì ta đã tạo và giúp cải thiện các điểm yếu. Anh nói mình rất thích prompt này vì đôi khi nó bắt được những chi tiết nhỏ anh còn chưa hề nghĩ tới.

Câu trả lời trên màn hình (demo trong video đăng ngày 12/10/2026) mở đầu: Claude đã chạy một lượt kiểm tra toàn app, test điều hướng bàn phím, hành vi của popup, hành vi DOM/animation, độ tương phản màu và kiểm tra form bằng một trình duyệt thật, không chỉ đọc code. Rồi nó liệt kê năm vấn đề, nặng nhất trước:

1. Phím Tab thoát khỏi popup, nhảy xuống các nút bị che bên dưới. Khi popup Add Habit hoặc popup xác nhận xoá đang mở, bấm Tab liên tục sẽ đưa focus ra các thẻ thói quen phía sau lớp phủ tối, kể cả nút xoá. Sửa bằng cách giữ Tab bên trong popup đang mở và trả focus về chỗ cũ khi đóng (demo trong video đăng ngày 12/10/2026).
2. Trang vẫn cuộn phía sau popup đang mở. Với đủ nhiều thói quen, cuộn chuột vẫn cuộn nền, và trên điện thoại có thể cuộn popup ra khỏi màn hình. Sửa bằng cách khoá cuộn nền khi popup mở (demo trong video đăng ngày 12/10/2026).
3. Đánh dấu một thói quen làm mọi thẻ chạy lại animation. Cả danh sách bị dựng lại sau mỗi thay đổi, kèm một tác vụ nền chạy mỗi 60 giây. Claude viết lại phần render để chỉ thẻ thật sự đổi mới bị động tới, và tác vụ nền chỉ làm gì đó khi sang ngày mới (demo trong video đăng ngày 12/10/2026).
4. Chữ trên dashboard có thể không đạt chuẩn tương phản. Claude ghi đã đo: chữ trắng gần mép hồng của thẻ gradient chỉ còn khoảng 3:1, dưới chuẩn dễ đọc cho cỡ chữ đó. Sửa bằng một lớp bóng mờ sau chữ, giữ nguyên màu và gradient (demo trong video đăng ngày 12/10/2026).
5. Gửi tên thói quen trống thì không có gì xảy ra, không giải thích. Giờ app hiện một thông báo đỏ rõ ràng và tô nổi ô nhập (demo trong video đăng ngày 12/10/2026).

Claude ghi đã kiểm tra cả năm bằng test tương tác tự động, cộng thêm một lượt regression (thêm, đánh dấu, xoá, reload) để chắc không có gì hỏng và giao diện giữ y như trước; file cập nhật đã lưu trong folder Habit Tracker App, hard refresh (Ctrl+F5) là thấy (demo trong video đăng ngày 12/10/2026). Sau đó, người dẫn nói: giờ hãy test lại mọi thứ.

11. Yêu cầu cụ thể, và nhờ giải thích từng file

Thêm một mẹo nữa: đừng chỉ nói "make my app better" (làm app của tôi tốt hơn). Hãy cụ thể. Anh gợi ý vài câu có thể dùng:

Make the mobile layout easier to use with one hand.

Make completed habits feel more satisfying.

Add a confirmation before permanently deleting a habit.

Make the empty screen more helpful when the user has no habits yet

Theo anh, những chỉ dẫn nhỏ như vậy có thể khiến trải nghiệm có cảm giác chủ ý hơn nhiều (theo video đăng ngày 12/10/2026).

Trên màn hình, câu cuối được gửi thật. Claude trả lời rằng màn hình trống giờ không chỉ báo là đang trống mà còn cho người dùng một điểm khởi đầu: năm "suggestion chip" chạm một lần là thêm được (Drink water, Exercise, Read, Meditate, Sleep early), mỗi cái thêm một thói quen đầy đủ kèm icon phù hợp, không cần gõ, không mở popup; vẫn xoá được sau đó hoặc dùng "Add Habit" cho thói quen tuỳ ý. Claude ghi đã test từ đầu tới cuối và ở chế độ tối (demo trong video đăng ngày 12/10/2026).

Và một điều nữa mà theo anh phần lớn mọi người không biết: bạn cũng có thể nhờ Claude Code giải thích bất cứ thứ gì bạn không hiểu (theo video đăng ngày 12/10/2026). Nếu thấy một file mà không biết nó làm gì, hãy hỏi:

Explain this file to me like I'm a complete beginner

Như vậy, anh nói, bạn không chỉ build, mà còn thật sự bắt đầu hiểu project trong lúc làm (theo video đăng ngày 12/10/2026).

12. Nhìn lại: từ folder trống tới một app hoàn chỉnh

Giờ nhìn lại điểm xuất phát: một folder hoàn toàn trống. Và kết quả trong demo của video đăng ngày 12/10/2026 là một habit tracker chạy được với nhiều thói quen, theo dõi hoàn thành, dữ liệu được lưu, giao diện responsive, và trải nghiệm người dùng chỉn chu hơn nhiều. Anh nói chính sự chuyển đổi đó là lý do Claude Code có thể là một thay đổi lớn cho người mới (theo video đăng ngày 12/10/2026).

Anh so sánh: nếu thuê một developer build một app riêng, bạn có thể dễ dàng tốn hàng trăm hoặc hàng nghìn đô, tuỳ project. Đi con đường học truyền thống cũng có thể mất hàng tuần hay hàng tháng với HTML, CSS, JavaScript, các framework và debug (so sánh của người dẫn, video đăng ngày 12/10/2026).

Anh nói rõ Claude Code không xoá bỏ mọi phần của việc phát triển app, nhưng theo anh nó có thể giảm lượng code bạn phải tự viết và giúp biến một ý tưởng thành một bản chạy được nhanh hơn nhiều (theo video đăng ngày 12/10/2026).

13. Ba câu hỏi của người mới, và những app khác có thể build

Người dẫn nêu ba câu hỏi và trả lời từng câu:

• "Nhưng tôi không biết code." Bắt đầu đơn giản, và đưa cho Claude những chỉ dẫn rõ ràng (theo video đăng ngày 12/10/2026).
• "Nếu Claude làm sai thì sao?" Giải thích chuyện gì đã sai, và nhờ nó sửa đúng vấn đề đó (theo video đăng ngày 12/10/2026).
• "Nếu app làm lần đầu của tôi trông xấu thì sao?" Chuyện đó bình thường. Cải thiện nó, mỗi lần một thay đổi (theo video đăng ngày 12/10/2026).

Một khi đã hiểu workflow, theo anh, bạn có thể build nhiều thứ hơn một habit tracker: app năng suất, app lập kế hoạch học tập, app theo dõi tập luyện, tool cho công việc kinh doanh, game, hoặc chính ý tưởng của bạn (theo video đăng ngày 12/10/2026).

14. Tóm lại ba bước, và quyền tự do sáng tạo

Tóm lại, chỉ với ba bước, anh đã lấy một ý tưởng đơn giản và biến nó thành một ứng dụng chạy được bằng Claude Code. Thứ nhất, tạo project và đưa cho Claude một ý tưởng app rõ ràng. Thứ hai, thêm các feature quan trọng và tuỳ biến design. Cuối cùng, test app, sửa lỗi và hoàn thiện trải nghiệm (demo trong video đăng ngày 12/10/2026).

Project đầu không cần đồ sộ. Bắt đầu nhỏ, làm cho một thứ chạy được, rồi cứ thêm feature. Theo anh (video đăng ngày 12/10/2026), đó là con đường dễ nhất để học workflow này mà không làm mọi thứ phức tạp lên.

Và điều anh "mê" nhất có lẽ là sự tự do sáng tạo. Không thích gì thì đổi nó. Nghĩ ra feature khác thì thêm vào. Có gì hỏng thì nhờ Claude giúp sửa. Ứng dụng của bạn có thể tiếp tục thay đổi khi ý tưởng của bạn tốt lên (theo video đăng ngày 12/10/2026).