Xây app eCommerce GreenShop với React Native + Expo
Học từ cách khởi tạo dự án, dựng giao diện, quản lý trạng thái đến kết nối Firebase, gửi notification và đóng gói sản phẩm — với Claude Code đồng hành trong từng bước.
Khóa học này dành cho ai?
Được thiết kế riêng cho người không có nền tảng lập trình.
Chủ shop, người kinh doanh online
Muốn tự chủ công cụ bán hàng của riêng mình.
Marketing, content, vận hành
Muốn hiểu và tự làm được sản phẩm số.
Designer, product owner
Muốn dựng nhanh bản mẫu (prototype) để thử ý tưởng.
Bất kỳ ai tò mò
"Liệu tôi có thể tự làm được một cái app không?" — câu trả lời là CÓ.
Bạn KHÔNG cần biết
Ngôn ngữ lập trình, thuật ngữ kỹ thuật, toán cao cấp.
Bạn CHỈ cần
Biết dùng máy tính, diễn đạt rõ điều mình muốn, mình cần xây dựng các tính năng phần mềm.
Vibe Coding là gì?
Thay vì tự gõ từng dòng code, bạn mô tả điều mình muốn bằng ngôn ngữ đời thường cho một trợ lý AI (trong khóa này là Claude Code), AI viết code, bạn chạy thử và yêu cầu chỉnh sửa cho đến khi ưng ý.
Vòng lặp cốt lõi của cả khóa học
Lặp lại đến khi ưng ý — rồi quay lại bước ① với tính năng tiếp theo.
Bạn sẽ xây được gì? — App GreenShop
Xuyên suốt 08 buổi, cả lớp dùng React Native và Expo để xây GreenShop — một ứng dụng bán rau củ quả chạy trên cả iOS và Android.
Mua sắm
Trang chủ có banner, danh mục (rau ăn lá, củ quả, trái cây, rau organic...), lưới sản phẩm, tìm kiếm.
Sản phẩm
Trang chi tiết: ảnh, giá, mô tả, nguồn gốc, nút thêm vào giỏ.
Giỏ hàng
Thêm/bớt số lượng, xóa, mã giảm giá, phí ship, tính tổng tiền.
Tài khoản
Đăng nhập Google/số điện thoại, sổ địa chỉ, danh sách yêu thích.
Đặt hàng
Luồng thanh toán, COD + thanh toán online (thử nghiệm), tạo đơn.
Đơn hàng
Lịch sử đơn, trạng thái đơn (chờ xác nhận → đang giao → hoàn thành).
Thông báo
Báo trạng thái đơn, khuyến mãi qua thông báo đẩy.
Quản lý
Chủ shop tự cập nhật sản phẩm, giá, tồn kho — không cần code.
Thành quả cuối khóa
Một ứng dụng React Native hoàn chỉnh, sẵn sàng đóng gói
Chạy thử trên điện thoại bằng Expo và chuẩn bị bản release cuối khóa.
6 kỹ năng của một Vibe Coder giỏi
Khóa học không chỉ dạy bạn viết code. Khóa học rèn 6 kỹ năng để biến ý tưởng thành sản phẩm hoàn chỉnh.
Mô tả
Viết yêu cầu (prompt) rõ ràng, chia một tính năng lớn thành nhiều bước nhỏ để AI làm đúng ý.
Đọc hiểu cấu trúc
Biết app gồm những màn hình nào, dữ liệu nằm ở đâu — đủ để "chỉ đường" cho AI, không cần hiểu từng dòng code.
Kiểm thử
Chạy app, bấm thử mọi nút, phát hiện chỗ sai và mô tả lại cho AI một cách chính xác.
Kiểm soát phiên bản (Git)
Dùng Git như nút Save/Undo: lưu mốc trước khi thử, quay lại khi hỏng. Đây là "dây an toàn" giúp bạn dám thử mọi thứ.
Ra quyết định sản phẩm
AI làm được nhiều cách; bạn là người quyết định giao diện, tính năng và thứ tự ưu tiên dựa trên mục tiêu kinh doanh.
Tích hợp hệ sinh thái
Biết kết nối giao diện, dữ liệu, điều hướng, thông báo và tính năng thiết bị thành một sản phẩm chạy trọn vẹn — thay vì những màn hình rời rạc.
Lộ trình 10 bài học
Đi từ môi trường phát triển giao diện đến dữ liệu, notification, API thiết bị di động, release và bảo trì sản phẩm.
- 01
Cài đặt môi trường học & khởi tạo dự án
Chuẩn bị công cụ, làm quen Expo và chạy dự án React Native đầu tiên
- 02
React Components, State & Lifecycle
Tổ chức màn hình bằng component, cập nhật dữ liệu với state và hiểu vòng đời ứng dụng
- 03
Thiết kế giao diện với React Native
Dựng giao diện GreenShop nhất quán bằng component và bộ UI React Native Paper
- 04
Làm việc với React Navigation
Tổ chức các screen, thiết lập luồng điều hướng và di chuyển trong ứng dụng
- 05
Kết nối cơ sở dữ liệu với Google Firebase
Đọc, ghi và đồng bộ dữ liệu sản phẩm, tài khoản và đơn hàng trên cloud
- 06
Quản lý trạng thái với Zustand
Đồng bộ giỏ hàng, tài khoản và dữ liệu dùng chung giữa nhiều screen
- 07
Gửi notification với OneSignal
Cài đặt OneSignal và lập trình thông báo cho đơn hàng, ưu đãi và cập nhật quan trọng
- 08
Các thành phần đặc thù của mobile
Làm việc với calendar, reminder, sensor, compass và các API thiết bị
- 09
Đóng gói & release ứng dụng di động
Chuẩn bị cấu hình, tài nguyên và bản build để phát hành sản phẩm
- 10
Bảo trì & nâng cấp sản phẩm
Quản lý phiên bản, cập nhật dependency, sửa lỗi và phát triển tính năng mới an toàn
Kỹ thuật React Native bạn sẽ làm chủ
Từ component, state và navigation đến notification và API thiết bị — tất cả được thực hành trực tiếp trên dự án Expo.
Giao diện React Native
Xây giao diện mobile nhất quán bằng component và React Native Paper.
- •Bố cục, danh sách, form và thẻ sản phẩm
- •Theme, màu sắc và component tái sử dụng
- •Giao diện thích ứng trên nhiều kích cỡ màn hình
Component, State & Lifecycle
Hiểu cách màn hình được cấu thành, cập nhật và phản hồi theo dữ liệu.
- •Chia giao diện thành các component rõ trách nhiệm
- •Cập nhật nội dung tương tác bằng state
- •Xử lý tác vụ theo vòng đời của component
Trạng thái với Zustand
Đồng bộ dữ liệu dùng chung xuyên suốt ứng dụng bằng store gọn nhẹ.
- •Giỏ hàng, tài khoản và sản phẩm yêu thích
- •Tách logic trạng thái khỏi giao diện
- •Cập nhật một nơi, phản ánh trên mọi screen
React Navigation
Tổ chức luồng di chuyển tự nhiên giữa các screen trong ứng dụng.
- •Stack, tab và màn hình lồng nhau
- •Truyền dữ liệu giữa các screen
- •Nút quay lại và deep link
Notification với OneSignal
Giữ kết nối với người dùng qua thông báo đúng thời điểm.
- •Cài đặt OneSignal cho dự án
- •Gửi thông báo trạng thái đơn hàng và ưu đãi
- •Xử lý hành động khi người dùng mở notification
API đặc thù của mobile
Khai thác khả năng thiết bị thông qua hệ sinh thái Expo.
- •Calendar và reminder
- •Sensor, compass và vị trí thiết bị
- •Quyền truy cập và trải nghiệm trên thiết bị thật
Một mã nguồn React Native, trải nghiệm trên cả iOS và Android, quy trình phát triển và đóng gói được hỗ trợ bởi Expo.
Mỗi buổi học diễn ra thế nào?
Mỗi buổi kéo dài 2 giờ và gồm 3 phần, tương ứng 3 tài liệu.
Lý thuyết
lythuyet.mdKhái niệm, tư duy, kỹ thuật prompt, ví dụ minh họa.
→ Hiểu "vì sao" và "cách nghĩ".
Thực hành
thuchanh.mdBài lab làm ngay tại lớp, từng bước cụ thể.
→ Bắt tay làm, có sản phẩm ngay.
Bài tập về nhà
baitap.mdBài tập mở rộng, thử thách sáng tạo.
→ Củng cố & chuẩn bị cho buổi sau.
Công cụ sử dụng
React Native
Nền tảng xây ứng dụng cho iOS và Android từ một mã nguồn
“Bộ khung ứng dụng”Expo
Khởi tạo, chạy thử, đóng gói và phát hành ứng dụng
“Xưởng phát triển app”React Native Paper
Bộ component giúp dựng giao diện mobile nhất quán
“Bộ UI hoàn chỉnh”Claude Code
Trợ lý AI viết code theo mô tả của bạn
“Người thợ AI”Firebase
Kho dữ liệu trên mây (sản phẩm, đơn hàng, tài khoản)
“Google Sheets siêu cấp cho app”Zustand
Quản lý và đồng bộ trạng thái giữa các screen
“Bộ nhớ dùng chung”OneSignal
Gửi và quản lý notification cho người dùng
“Kênh thông báo”Git
Lưu và khôi phục các mốc làm việc
“Nút Save/Undo”Ba lời hứa với học viên
Bạn có một app thật
Kết thúc khóa, bạn có một app React Native chạy trên điện thoại và sẵn sàng đóng gói.
Bạn tự vận hành được cửa hàng
Cập nhật sản phẩm, giá, xử lý đơn mà không cần lập trình viên.
Bạn có một bộ kỹ năng mới
Vibe Coding — để tiếp tục tự làm những sản phẩm số khác sau này.
Sai là chuyện bình thường. Ngay cả lập trình viên chuyên nghiệp cũng phải sửa đi sửa lại nhiều lần. Mỗi vòng chỉnh sửa là một bước tiến. Với Git làm dây an toàn, bạn được phép thử mọi thứ mà không sợ làm hỏng.
💡 Nguyên tắc số 1 xuyên suốt khóa học
Trước khi thử một điều gì lớn → lưu mốc Git. Đó là bí quyết giúp người không biết code vẫn tự tin xây được app hoàn chỉnh.
Sẵn sàng tự tay xây app đầu tiên của mình?
08 buổi. Một ứng dụng React Native chạy trên iOS và Android. Một quy trình hoàn chỉnh từ khởi tạo dự án đến release.