Build app mobile với Claude Code: hướng dẫn A-Z (2026)

- Tooling mobile đổi nhanh (Expo SDK, EAS), nên mình dùng lệnh dạng @latest để bài không lỗi thời.

Claude Code có build được app mobile không?

Có - Claude Code build được app mobile, và làm khá tốt nếu bạn đi theo stack JavaScript. Claude Code là công cụ dòng lệnh agentic của Anthropic: nó đọc toàn bộ repo, viết và sửa file, chạy lệnh terminal (như npx expo start hay eas build), đọc log lỗi rồi tự lặp lại cho tới khi app chạy được (Anthropic - Claude Code docs, 2026).

Điều đó biến Claude Code thành một cộng sự lý tưởng cho vibe-coding app điện thoại: bạn tập trung vào việc app cần làm gì, còn nó lo phần gõ code lặp đi lặp lại. Với React Native + Expo, cả chuỗi từ scaffold, chạy dev server, tới đóng gói .apk/TestFlight đều là lệnh CLI - đúng thứ Claude Code làm mạnh nhất.

Cần nói thẳng: Claude Code không thay bạn hiểu sản phẩm. Nó cực nhanh ở phần "làm app điện thoại bằng AI" ở tầng JS/UI, nhưng đụng tới native module sâu (Swift/Kotlin) hay quy trình duyệt store thì vẫn cần bạn. Nếu bạn mới hoàn toàn, đọc trước Claude Code là gì để nắm cách nó hoạt động.

So với việc gõ tay từng file hay copy-paste từ chatbox, khác biệt lớn nhất là Claude Code làm việc trong dự án của bạn: nó thấy cấu trúc thư mục Expo Router, đọc package.json để biết đang dùng thư viện nào, chạy được dev server rồi tự đọc lỗi trả về. Vòng lặp "sửa → chạy → đọc lỗi → sửa tiếp" khép kín ngay trong terminal, nên bạn ít phải nhảy qua lại giữa trình duyệt và editor. Đúng kiểu làm việc này khiến nó hợp với mobile - nơi mỗi thay đổi cần chạy lại trên Expo Go để kiểm chứng.

Chuẩn bị: chọn stack & cài môi trường

Trước khi gõ lệnh nào, chọn stack. Đây là ma trận mình dùng để quyết định - cùng logic với skill dựng app mobile trong AgentKit:

Bài này đi theo Expo + React Native vì đó là con đường nhanh nhất để có app chạy được. Cần chuẩn bị:

• Node LTS (bản mới nhất, để chạy npx).
• Expo Go cài trên điện thoại thật (iOS App Store / Google Play) - để xem app ngay không cần build.
• Claude Code đã cài trên máy - xem hướng dẫn cài đặt Claude Code.
• macOS chỉ bắt buộc khi build bản iOS lên App Store. Còn lại (code, test Android, dev trên Expo Go) chạy được trên Windows/Linux.

Không cần cài sẵn Xcode/Android Studio để bắt đầu - Expo Go xử lý phần chạy thử, còn khâu build native đẩy lên đám mây qua EAS (nói ở Bước 6).

Bước 1 - Lập kế hoạch app với Claude Code

Đừng bảo AI "code cho tôi một app" rồi để nó lao vào gõ. Bước đắt giá nhất là chốt phạm vi trước khi có dòng code nào. Mình mở Claude Code ở chế độ plan và mô tả app muốn làm - ví dụ bài này dựng một app habit-tracker nhỏ: danh sách thói quen, tick hằng ngày, xem streak.

Prompt mình dùng đại ý:

Mình muốn build app mobile habit-tracker bằng Expo + React Native.
Trước khi code, hãy đề xuất:
1. Danh sách màn hình (list, detail, thêm/sửa thói quen, thống kê)
2. Data model (habit, log tick theo ngày)
3. State + lưu local (offline-first)
Chưa viết code. Chỉ chốt kế hoạch để mình duyệt.

Claude Code sẽ trả về sơ đồ màn hình + data model để bạn duyệt. Chỉnh ở tầng kế hoạch rẻ hơn nhiều so với chỉnh khi đã có 20 file. Muốn đào sâu kỹ thuật này, xem cách lập kế hoạch dự án với Claude Code.

Bước 2 - Scaffold dự án Expo + CLAUDE.md cho mobile

Chốt kế hoạch xong, để Claude Code (hoặc tự bạn) chạy lệnh tạo dự án:

npx create-expo-app@latest habit-tracker
cd habit-tracker
npx expo start

create-expo-app dựng sẵn cấu trúc với Expo Router (định tuyến theo file, giống Next.js). npx expo start bật dev server + hiện mã QR - quét bằng Expo Go trên điện thoại là app chạy ngay, không cần build.

Thứ tạo khác biệt lớn nhất cho chất lượng output là một file CLAUDE.md cho mobile. Đây là "bộ quy ước" Claude Code đọc mỗi lần làm việc - đặt ở gốc repo. Template copy-paste được của mình:

# CLAUDE.md - Habit Tracker (Expo + React Native)

## Stack
- Expo (SDK mới nhất) + React Native + TypeScript
- Định tuyến: Expo Router (file-based, thư mục app/)
- State: Zustand
- Lưu local: AsyncStorage (offline-first, không phụ thuộc mạng)

## Quy ước code
- Component hàm + hooks; KHÔNG dùng class component
- Đặt tên file kebab-case; component PascalCase
- Import tuyệt đối qua alias @/ (đã cấu hình trong metro/tsconfig)
- Style bằng StyleSheet.create, không hardcode màu - dùng theme trong constants/

## Quy tắc làm việc
- Trước khi commit: chạy `npx tsc --noEmit` và `npx expo lint`, sửa hết lỗi
- Mỗi màn hình đặt trong app/, tách logic ra hooks/ nếu > 100 dòng
- Không hardcode API key; đọc từ biến môi trường / expo-constants
- Sau khi sửa UI, nhắc mình test lại trên Expo Go

File này giữ Claude Code đi đúng quy ước xuyên suốt phiên - thay vì mỗi lần lại dựng theo một kiểu. Muốn hiểu sâu cơ chế CLAUDE.md, xem hướng dẫn viết CLAUDE.md.

Bước 3 - Build từng màn hình (UI) với Claude Code

Đây là lúc vibe-coding phát huy. Nguyên tắc mình luôn giữ: build từng màn một, xem trên Expo Go sau mỗi màn, đừng để AI phun ra 6 màn hình cùng lúc rồi ngồi gỡ.

Thứ tự mình làm với app habit-tracker: màn danh sách → màn chi tiết → form thêm/sửa. Prompt cho màn đầu tiên đại ý:

Dựng màn hình danh sách thói quen (app/index.tsx):
- FlatList render các habit từ store Zustand
- Mỗi item: tên thói quen, streak hiện tại, nút tick hôm nay
- Trạng thái rỗng: text "Chưa có thói quen, thêm ngay"
- Bấm item → điều hướng sang app/habit/[id].tsx (Expo Router)
Dùng đúng quy ước trong CLAUDE.md. Xong thì bảo mình mở Expo Go kiểm tra.

Sau mỗi màn, quét lại QR trên Expo Go để xem thật. Thấy sai gì (khoảng cách, màu, điều hướng) thì mô tả cho Claude Code sửa tiếp - vòng lặp này rất nhanh nhờ hot reload. Với phần dựng giao diện, kỹ thuật prompt UI giống hệt web; tham khảo cách dựng giao diện React với Claude Code và mẹo UI/UX khi làm việc với Claude Code.

Bước 4 - Thêm state, data & backend

App có UI rồi nhưng chưa "nhớ" gì. Giờ nối data. Với app nhỏ-vừa mình dùng Zustand cho state và AsyncStorage để lưu local - quan trọng nhất là offline-first: mạng mobile chập chờn, app phải chạy được khi mất sóng rồi đồng bộ sau.

Nhờ Claude Code dựng store + persist:

Tạo store Zustand (store/habits.ts):
- state: danh sách habit + log tick theo ngày
- action: addHabit, toggleTickToday, computeStreak
- persist toàn bộ vào AsyncStorage (offline-first)
- khôi phục state khi mở app
Viết kèm type TypeScript đầy đủ.

Khi cần đồng bộ nhiều thiết bị hay đăng nhập, mới thêm backend. Lựa chọn nhanh gọn là một backend-as-a-service (ví dụ Supabase) cho auth + database; Claude Code viết được cả lớp gọi API lẫn schema. Nếu bạn muốn tự dựng API riêng, xem build backend API với Claude Code; phần thiết kế bảng thì có làm việc với database bằng Claude Code.

Một mẹo thực chiến: yêu cầu Claude Code tách hẳn tầng lưu trữ (store + persist) khỏi tầng UI ngay từ đầu. Khi sau này bạn đổi từ AsyncStorage sang backend thật, chỉ phải sửa một chỗ thay vì lục từng màn hình. Đây cũng là lúc nên nhờ nó viết vài hàm nhỏ tính toán (như computeStreak) kèm test, vì logic ngày tháng rất dễ sai lệch.

Nguyên tắc bảo mật đừng bỏ qua: không hardcode API key trong code app (dễ lộ khi decompile) - dùng biến môi trường và, với dữ liệu nhạy cảm, lưu qua Keychain (iOS) / KeyStore (Android). Nếu app có màn đăng nhập, ưu tiên OAuth2 + JWT và cân nhắc mở khoá bằng sinh trắc học (Face ID / vân tay) cho trải nghiệm mobile mượt hơn.

Bước 5 - Debug & test trên thiết bị thật

Bài học đắt nhất của mọi người mới làm mobile: simulator nói dối về performance. Nó chạy trên CPU máy tính khỏe nên mọi thứ mượt; lên điện thoại tầm trung mới lộ giật, tốn pin, tải chậm. Luôn test bản gần release trên máy thật.

Cách debug với Claude Code: dán nguyên log lỗi (từ terminal Expo hoặc màn hình lỗi đỏ trên app) vào phiên, để nó đọc và sửa. Nó bám được stack trace React Native khá tốt. Vài lỗi mobile đặc thù hay gặp:

• Metro bundler cache bẩn: sửa code mà app không đổi → chạy npx expo start -c để xoá cache.
• Sai phiên bản Expo SDK: thư viện không tương thích SDK → dùng npx expo install <package> (nó tự chọn bản khớp SDK) thay vì npm install.
• Native module cần rebuild: thêm thư viện có phần native → không hiện trong Expo Go, phải build lại development build (npx expo run:android/run:ios).

Gặp lỗi lạ khác của bản thân công cụ, xem tổng hợp các lỗi Claude Code thường gặp và cách khắc phục.

Bước 6 - Ship lên App Store & Google Play (EAS Build)

Expo Go chỉ để dev. Muốn có file cài thật hoặc lên store, dùng EAS Build - dịch vụ build đám mây của Expo, nên không có macOS vẫn build được iOS.

npm install -g eas-cli
eas login
eas build:configure
# Build bản nội bộ để test:
eas build --profile preview --platform android # ra file .apk
eas build --profile preview --platform ios # cần tài khoản Apple Developer

Sau khi có bản build:

• iOS: nộp qua TestFlight để test nội bộ, rồi mới submit App Store. Cần Apple Developer Program 99 USD/năm (Apple Developer, 2026).
• Android: dùng Google Play internal testing trước, sau đó mở rộng dần Closed → Open → Production. Phí đăng ký nhà phát triển Google Play là khoản trả một lần khi tạo tài khoản.

Chiến lược phát hành mình khuyên: đừng đẩy thẳng lên production. Đi theo bậc thang staged rollout - bản nội bộ (internal) cho vài người, rồi closed testing cho nhóm lớn hơn, rồi mới open/production. Mỗi bậc là một cơ hội bắt bug trên thiết bị thật trước khi tới tay số đông. Claude Code giúp được phần cấu hình eas.json (các profile build) và script tự động hoá, nhưng quyết định "khi nào lên bậc tiếp theo" là của bạn.

Nói thật để bạn khỏi vỡ kế hoạch: duyệt App Store thường mất vài ngày và có thể bị trả về nếu vi phạm guideline - đây là khâu con người, không AI nào rút ngắn được. Muốn quy trình đóng gói/đưa lên chạy trơn hơn, xem deploy app với Claude Code. Cấu hình EAS chi tiết theo tài liệu chính thức (Expo - Claude Code docs, 2026).

Tăng tốc: skill ak-mobile-development dựng sẵn trong AgentKit

Làm rõ để khỏi nhầm: "AgentKit" ở đây là bộ kit skill/agent cho Claude Code tại agentkit.best (dùng qua CLI ak) - khác sản phẩm AgentKit của OpenAI.

Nếu không muốn tự viết CLAUDE.md và tự chọn quy ước mobile mỗi lần, Engineer Kit (có skill mobile) ship sẵn skill ak-mobile-development: ma trận chọn framework, mặc định offline-first, quy trình EAS Build và checklist bảo mật OWASP mobile - Claude Code đọc thẳng và áp dụng. Engineer Kit hiện có giá 99 USD (trang không nêu phí định kỳ) kèm cập nhật trọn đời và money-back guarantee. Muốn xem tổng thể trước, đọc AgentKit là gì hoặc xem AgentKit (giảm 20% qua link). Không bắt buộc - bạn hoàn toàn làm được bằng template ở Bước 2.

Giới hạn thật khi build app mobile bằng Claude Code

Để bạn kỳ vọng đúng, đây là những chỗ Claude Code đuối - không đối thủ nào chịu nói:

• Native module sâu: đụng code Swift/Kotlin phức tạp (Bluetooth, camera nâng cao, xử lý nền) thì AI dễ sai, cần bạn hiểu native.
• iOS bắt buộc hệ Apple: build/ký iOS cần macOS hoặc dịch vụ cloud (EAS) + tài khoản Apple trả phí - AI không vượt qua ràng buộc này.
• Duyệt store nằm ngoài tầm AI: Apple/Google review thủ công; không có "prompt" nào làm app được duyệt nhanh hơn.
• Dễ "trôi scope": nếu bỏ Bước 1 (plan), app phình ra khó kiểm soát. Plan chặt là cách rẻ nhất để tránh.

Câu hỏi thường gặp (FAQ)

Không có Mac thì build app iOS bằng Claude Code được không?

Được. Bạn code và test trên Expo Go từ Windows/Linux bình thường, rồi dùng EAS Build (build đám mây của Expo) để tạo bản iOS mà không cần máy Mac. Chỉ cần một tài khoản Apple Developer trả phí để nộp lên TestFlight/App Store.

Nên dùng Expo hay React Native "thuần"?

Người mới nên bắt đầu với Expo: cài nhanh, chạy thử ngay qua Expo Go, build đám mây qua EAS. Chỉ chuyển sang React Native bare khi cần một native module mà Expo không hỗ trợ.

Không biết code có build app mobile bằng Claude Code được không?

Làm được app đơn giản theo kiểu vibe-coding, nhưng bạn vẫn nên hiểu cơ bản: đọc lỗi, biết app nên làm gì, biết duyệt kết quả. Không biết gì về code thì sẽ khó debug và dễ trôi scope.

Claude Code build app Flutter được không?

Có, Claude Code viết Dart/Flutter tốt. Nhưng bài này khuyên Expo + React Native vì chuỗi lệnh CLI hợp với cách làm việc agentic hơn, dễ để AI tự chạy và tự sửa.

Publish app lên store mất bao lâu?

Phần code có thể xong trong vài buổi. Khâu duyệt mới là điểm nghẽn: App Store thường mất vài ngày và có thể bị trả về; Google Play thường nhanh hơn. Đây là quy trình con người, không rút ngắn bằng AI được.

Chi phí để build và phát hành app là bao nhiêu?

Bản thân code miễn phí (Expo, React Native mã nguồn mở). Chi phí chính: gói Claude Code bạn dùng (Pro 20 USD/tháng trở lên), Apple Developer 99 USD/năm nếu lên App Store, và phí đăng ký Google Play khi phát hành Android.

Kết luận + bước tiếp theo

Tóm lại 6 bước: lập kế hoạch → scaffold Expo + CLAUDE.md → build từng màn hình → thêm state/data → test máy thật → ship qua EAS. Claude Code lo phần gõ code, bạn giữ vai trò chốt scope và duyệt kết quả. Bước tiếp theo: đào sâu dựng giao diện với Claude Code và quy trình deploy. Nếu muốn bỏ qua khâu tự viết quy ước mobile, AgentKit cho Claude Code (giảm 20% qua link) có skill dựng sẵn để bạn bắt đầu nhanh hơn.