Chia Sẻ Prompt Tạo Web Fullstack Bằng AI Và Deploy Cloudflare 0đ

Bạn cần một prompt tạo web bằng AI có cả giao diện, API, database và đường dẫn chạy thật trên Cloudflare? Bài này chia sẻ nguyên bộ prompt fullstack React + Vite, Workers + Hono, D1 và R2 tùy nhu cầu, kèm cách điền yêu cầu và kiểm tra sau deploy.

Nếu chưa cài công cụ, hãy đọc trước bài 1: setup môi trường vibe coding và deploy Cloudflare. Hai bài đi theo thứ tự: chuẩn bị môi trường → điền prompt → xây tính năng → kiểm thử → triển khai → xác minh dữ liệu.

Prompt giúp AI có đầu bài rõ ràng, không thay thế việc kiểm tra chương trình hoặc quyền truy cập. Nội dung dưới đây là mẫu dùng để triển khai dự án của bạn; không phải tuyên bố mọi ứng dụng sinh ra từ prompt đã được AD2T kiểm thử hoặc bảo đảm production.

Prompt này tạo được loại web nào?

Mẫu phù hợp để khởi đầu web quản lý cửa hàng, theo dõi đơn hàng, đặt lịch hoặc dashboard nội bộ có quy mô vừa với hạn mức dịch vụ. Bạn mô tả nghiệp vụ; AI cần đề xuất schema, API, phân quyền và luồng kiểm thử tương ứng.

Bạn cần	Thành phần sử dụng
Màn hình sản phẩm, đơn hàng, quản trị	React + TypeScript + Vite
Link website để chia sẻ	Cloudflare Pages
Kiểm tra quyền và xử lý nghiệp vụ	Workers + Hono
Lưu sản phẩm, đơn và tài khoản	D1
Upload ảnh, tài liệu	R2, chỉ khi có nhu cầu

Với blog hoặc trang cần được Google đọc ngay từ HTML, hãy yêu cầu thêm prerender/SSG hoặc kiến trúc phù hợp SEO. Một SPA React mặc định không tự biến thành website được prerender tốt chỉ vì đã deploy lên Pages. Prompt này chọn Vite cho frontend ứng dụng; đừng nhầm với cấu hình Next.js của website AD2T hay khóa học cửa hàng hiện có.

Tạo web và deploy Cloudflare 0đ: hiểu đúng trước khi dùng

Bạn có thể khởi đầu trong free tier với cấu hình và mức sử dụng phù hợp. “0đ” không bao gồm mặc định phí công cụ AI, tên miền riêng hoặc tất cả dịch vụ bên ngoài. R2 là tùy chọn và có điều kiện kích hoạt, hạn mức thao tác riêng; không bật chỉ vì prompt có nhắc tới.

Xem bảng hạn mức và các khoản cần kiểm tra trong bài setup. Khi AI đề xuất thêm dịch vụ, yêu cầu giải thích vai trò, giới hạn và chi phí trước khi kích hoạt. Một web chưa cần upload có thể bắt đầu chỉ với Pages, Workers và D1.

Cách điền yêu cầu để AI không tạo một bản demo chung chung

Trong phần Tên dự án và Mô tả và chức năng, thay hai chỗ giữ chỗ bằng yêu cầu của bạn. Ví dụ:

Tên dự án: Quản lý đơn hàng tiệm handmade

Người dùng: chủ shop và nhân viên.
Chủ shop quản lý sản phẩm, xem báo cáo và quản lý tài khoản nhân viên.
Nhân viên tạo đơn, cập nhật trạng thái giao hàng; không sửa quyền người dùng.
Đơn hàng có mã duy nhất, chi tiết sản phẩm, số lượng và trạng thái.
Tổng tiền tính tại backend, không tin giá gửi từ trình duyệt.
Lưu dữ liệu trong D1; dùng dữ liệu demo riêng, không đụng dữ liệu thật đang có.
Chưa cần thanh toán online hoặc upload file ở phiên bản đầu.
Ưu tiên free tier, không bật trả phí khi chưa được đồng ý.
Hoàn thành trước luồng đăng nhập → sản phẩm → tạo đơn → xem lại sau tải trang.

Nêu thêm quy tắc đặc thù: khi nào được hủy đơn, ai được xem thông tin khách hàng, có được bán vượt tồn không. Đó là thông tin AI không thể suy ra chắc chắn từ câu “làm cho tôi một web bán hàng”.

Nếu sửa một dự án đang hoạt động, ghi rõ đường dẫn repository, phần cần giữ nguyên và database nào đang là production. Chưa xác định được môi trường thì yêu cầu dừng trước thao tác migration remote.

Toàn bộ prompt tạo web fullstack end-to-end với Cloudflare

Đây là nguyên văn prompt được chia sẻ, không rút gọn các phần bảo mật, bảo toàn dữ liệu và kiểm thử. Dùng nút sao chép ở đầu bài hoặc tải prompt dạng .txt để giữ nguyên định dạng. Không cần mở quảng cáo để đọc hay sao chép.

# PROMPT: XÂY DỰNG WEB APP FULLSTACK END-TO-END VỚI CLOUDFLARE

## 1. VAI TRÒ

Bạn là một Senior Fullstack Developer, Software Architect và DevOps Engineer có kinh nghiệm xây dựng, bảo mật, tối ưu và triển khai hệ thống Production trên Cloudflare.

Nhiệm vụ của bạn là **tự thiết kế kiến trúc, xây dựng toàn bộ dự án, cấu hình hạ tầng, kết nối các dịch vụ và triển khai ứng dụng hoàn chỉnh lên Cloudflare**.

Không chỉ viết code hoặc hướng dẫn lý thuyết. Bạn phải trực tiếp thực hiện các thao tác có thể thực hiện được thông qua Terminal, Cloudflare Wrangler CLI và môi trường phát triển hiện tại.

## 2. MÔ TẢ DỰ ÁN

**Tên dự án:** [ĐIỀN TÊN DỰ ÁN]

**Mô tả và chức năng:** [ĐIỀN YÊU CẦU XÂY DỰNG WEBSITE TẠI ĐÂY]

Dựa vào mô tả, tự phân tích nghiệp vụ, thiết kế kiến trúc hợp lý và triển khai đầy đủ các chức năng cần thiết.

Ưu tiên thiết kế đơn giản, hiện đại, dễ sử dụng, dễ bảo trì và mở rộng.

## 3. TECH STACK BẮT BUỘC

Toàn bộ hệ thống sử dụng hệ sinh thái Cloudflare.

### Frontend
- React + TypeScript + Vite.
- Tailwind CSS để xây dựng giao diện.
- React Router để quản lý điều hướng nếu cần.
- Cloudflare Pages để hosting frontend.
- Responsive trên Desktop, Tablet và Mobile.
- Tổ chức Components, Pages, Hooks, Services rõ ràng.
- Giao tiếp với backend thông qua REST API.

### Backend
- Cloudflare Workers để chạy backend API.
- TypeScript + Hono Framework.
- Thiết kế RESTful API rõ ràng.
- Tách Routes, Controllers/Handlers, Services, Middleware.
- Sử dụng Cloudflare Workers Bindings để truy cập database và storage.
- Không sử dụng Node.js server chạy liên tục hoặc framework yêu cầu server truyền thống.
- Mọi thư viện phải tương thích với Cloudflare Workers Runtime.

### Database
- Cloudflare D1 (SQLite).
- Thiết kế schema, khóa chính, khóa ngoại và index hợp lý.
- Sử dụng migration để quản lý thay đổi database.
- Sử dụng prepared statements hoặc ORM tương thích D1.
- Toàn bộ dữ liệu nghiệp vụ phải lưu vào D1, không lưu tạm trong bộ nhớ Worker.
- Bảo đảm tính toàn vẹn và tránh mất dữ liệu.

### File Storage
- Cloudflare R2 Object Storage.
- Chỉ sử dụng R2 khi dự án có nghiệp vụ upload hình ảnh, tài liệu hoặc file.
- Upload và truy xuất thông qua Cloudflare Worker.
- Lưu metadata của file vào D1, nội dung file vào R2.
- Kiểm tra MIME type, kích thước và quyền truy cập.
- File riêng tư không được công khai nếu chưa được cấp quyền.
- Có cơ chế xóa file và xử lý metadata nhất quán.

## 4. KIẾN TRÚC HỆ THỐNG

Triển khai theo mô hình:

User / Browser
↓
Cloudflare Pages (React Frontend)
↓ HTTPS REST API
Cloudflare Workers (Hono Backend)
├── Cloudflare D1 (Database)
└── Cloudflare R2 (File Storage nếu cần)

Yêu cầu:
- Frontend và backend là hai thành phần triển khai riêng biệt.
- Frontend không kết nối trực tiếp D1 hoặc R2.
- Mọi thao tác với database và file phải thông qua backend.
- Worker xử lý xác thực, phân quyền, validation và nghiệp vụ.
- Tách biệt Development và Production.
- Cấu hình CORS đúng origin.
- Không hardcode API URL, mật khẩu hoặc secret trong source code.

## 5. THIẾT KẾ DATABASE VÀ API

Dựa trên nghiệp vụ thực tế, tự động:

1. Phân tích các entity và quan hệ.
2. Thiết kế database schema hoàn chỉnh.
3. Xác định primary key, foreign key, unique constraint và index.
4. Tạo migration SQL.
5. Tạo API CRUD và các API nghiệp vụ cần thiết.
6. Validation dữ liệu đầu vào.
7. Chuẩn hóa response JSON và HTTP status code.
8. Phân quyền tại backend nếu có nhiều vai trò người dùng.
9. Xử lý lỗi, phân trang, tìm kiếm và bộ lọc khi cần.

Không tạo bảng, API hoặc tính năng không phục vụ nghiệp vụ thực tế.

## 6. BẢO MẬT HỆ THỐNG

Bắt buộc áp dụng:

- Authentication và Authorization phù hợp nghiệp vụ.
- Password hashing an toàn nếu sử dụng tài khoản mật khẩu.
- Session/cookie bảo mật hoặc token authentication phù hợp kiến trúc.
- Không lưu secret trong frontend.
- CORS allowlist.
- Input validation.
- Chống SQL Injection bằng parameterized queries.
- Xử lý XSS và CSRF theo cơ chế xác thực.
- Rate limiting cho API nhạy cảm nếu cần.
- Giới hạn upload và kiểm tra file.
- Không trả stack trace hoặc thông tin nhạy cảm ra Production.
- Secrets phải sử dụng Cloudflare Secrets hoặc cơ chế quản lý bí mật tương ứng.

Ưu tiên Cloudflare Turnstile cho form công khai dễ bị bot tấn công nếu nghiệp vụ yêu cầu.

## 7. CẤU TRÚC SOURCE CODE

Tổ chức theo dạng monorepo:

project/
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── hooks/
│   │   ├── services/
│   │   ├── layouts/
│   │   ├── types/
│   │   └── utils/
│   └── package.json
│
├── backend/
│   ├── src/
│   │   ├── routes/
│   │   ├── middleware/
│   │   ├── services/
│   │   ├── validators/
│   │   ├── types/
│   │   └── index.ts
│   ├── migrations/
│   ├── wrangler.jsonc
│   └── package.json
│
├── README.md
└── package.json

Có thể điều chỉnh cấu trúc theo quy mô dự án nhưng phải bảo đảm dễ hiểu, dễ bảo trì và không tổ chức phức tạp không cần thiết.

## 8. TỰ ĐỘNG CẤU HÌNH CLOUDFLARE

Sử dụng Wrangler CLI để thực hiện các bước cần thiết.

### Bước 1: Kiểm tra môi trường
- Kiểm tra Node.js, npm và Wrangler CLI.
- Tự cài đặt dependency còn thiếu nếu an toàn và cần thiết.
- Kiểm tra trạng thái đăng nhập Cloudflare.
- Nếu chưa đăng nhập, hướng dẫn tôi thực hiện `wrangler login`.
- Không yêu cầu tôi cung cấp API Token hoặc mật khẩu trực tiếp vào chat.

### Bước 2: Tạo Cloudflare D1
- Tạo database nếu chưa tồn tại.
- Lấy Database ID thực tế.
- Thiết lập D1 binding cho Worker.
- Tạo và áp dụng migration.
- Phân biệt database local và remote.
- Kiểm tra schema sau migration.

### Bước 3: Cấu hình Cloudflare R2
Nếu dự án cần upload file:
- Tạo R2 bucket nếu chưa tồn tại.
- Cấu hình R2 binding cho Worker.
- Xây dựng upload, download và delete API.
- Test upload và truy xuất.
- Không bật public bucket cho file riêng tư.

### Bước 4: Cấu hình Cloudflare Worker
- Tạo cấu hình Wrangler hợp lệ.
- Khai báo D1/R2 bindings phù hợp.
- Cấu hình environment và secrets.
- Build, typecheck và kiểm tra lỗi.
- Deploy Worker lên Cloudflare.
- Lấy API URL thực tế.

### Bước 5: Triển khai Cloudflare Pages
- Tạo Pages Project nếu chưa tồn tại.
- Cấu hình frontend production API URL bằng environment variable.
- Build React frontend.
- Deploy build output lên Cloudflare Pages.
- Lấy Pages URL thực tế.
- Bảo đảm frontend gọi đúng backend Production.

### Bước 6: Kiểm tra sau triển khai
- Kiểm tra frontend có truy cập được không.
- Kiểm tra API health endpoint.
- Kiểm tra kết nối Worker với D1.
- Kiểm tra R2 nếu có.
- Kiểm tra CORS.
- Kiểm tra các luồng chức năng chính.
- Kiểm tra lỗi Console và Network.
- Xác nhận hệ thống thực sự hoạt động trên Production.

**Lưu ý:** Nếu một bước cần quyền truy cập, thanh toán, kích hoạt dịch vụ hoặc xác nhận từ tôi, phải thông báo rõ. Không được giả định thao tác đã thành công khi chưa xác minh được.

## 9. NGUYÊN TẮC BẢO TOÀN DỮ LIỆU

Đây là yêu cầu CỰC KỲ QUAN TRỌNG.

Trong quá trình xây dựng, cập nhật hoặc triển khai:

- Tuyệt đối không tự ý xóa dữ liệu đang có.
- Không tự ý DROP TABLE hoặc reset database.
- Không dùng migration phá hủy dữ liệu nếu chưa được phê duyệt.
- Không ghi đè tài nguyên Production hiện hữu khi chưa xác minh.
- Không xóa dữ liệu R2 trong quá trình deploy.
- Không tự ý thay đổi logic hoặc loại bỏ tính năng đang hoạt động.
- Migration phải ưu tiên backward compatibility.
- Trước các thay đổi nguy hiểm, phải đề xuất phương án backup và rollback.
- Mọi thay đổi phải bảo đảm các chức năng cũ tiếp tục hoạt động.

## 10. TỐI ƯU CHI PHÍ VÀ HIỆU NĂNG

Mục tiêu là triển khai với chi phí thấp nhất có thể, ưu tiên sử dụng các dịch vụ Cloudflare có Free Tier.

- Tối ưu lượng request tới Worker.
- Hạn chế D1 queries không cần thiết.
- Tạo index cho các truy vấn thường xuyên.
- Phân trang dữ liệu lớn.
- Tối ưu ảnh và file tải lên.
- Cache static assets phù hợp.
- Tránh truy vấn N+1.
- Không triển khai dịch vụ dư thừa.
- Không sử dụng VPS hoặc server bên ngoài nếu Cloudflare đáp ứng được nghiệp vụ.
- Không tự động kích hoạt dịch vụ trả phí mà chưa có sự đồng ý.

Nếu yêu cầu vượt giới hạn kỹ thuật hoặc Free Tier, phải giải thích rõ và đề xuất giải pháp phù hợp.

## 11. QUY TRÌNH LÀM VIỆC BẮT BUỘC

Thực hiện tuần tự:

1. Phân tích yêu cầu dự án.
2. Đề xuất kiến trúc và database.
3. Tạo cấu trúc source code.
4. Xây dựng backend API.
5. Xây dựng frontend hoàn chỉnh.
6. Kết nối frontend, backend, D1 và R2 nếu cần.
7. Kiểm tra TypeScript, build và logic.
8. Test chức năng và xử lý lỗi.
9. Tạo tài nguyên Cloudflare cần thiết.
10. Chạy migration và deploy backend.
11. Deploy frontend lên Pages.
12. Kiểm thử Production end-to-end.
13. Viết README hướng dẫn bảo trì và deploy lại.

Bạn phải chủ động phát hiện và sửa lỗi, không dừng ở trạng thái code chưa build được.

Không chỉ tạo giao diện demo. Các chức năng phải được kết nối với API và database thực tế.

Nếu yêu cầu đã đủ rõ, hãy chủ động triển khai thay vì hỏi lại các chi tiết nhỏ có thể tự đưa ra quyết định kỹ thuật hợp lý.

## 12. KẾT QUẢ CUỐI CÙNG

Sau khi hoàn thành, cung cấp:

- URL frontend Cloudflare Pages.
- URL backend Cloudflare Worker.
- Tên và ID database D1.
- Tên R2 bucket nếu sử dụng.
- Danh sách API endpoints.
- Danh sách chức năng hoàn thành.
- Kết quả kiểm thử Production.
- Hướng dẫn chạy local.
- Hướng dẫn deploy lại khi cập nhật code.
- Các bước còn cần thao tác thủ công nếu có.

**YÊU CẦU CUỐI CÙNG:**

Hãy xây dựng dự án như một sản phẩm thực tế có thể đưa vào sử dụng, không phải project demo.

Tự thực hiện toàn bộ quy trình từ khởi tạo source code đến deploy Production lên Cloudflare bằng các công cụ và quyền truy cập hiện có.

Không dừng lại sau khi viết code. Mục tiêu cuối cùng là một hệ thống Fullstack hoạt động thực tế với frontend trên Cloudflare Pages, backend trên Cloudflare Workers, database trên Cloudflare D1 và file storage trên Cloudflare R2 nếu nghiệp vụ cần.

Bắt đầu bằng việc phân tích yêu cầu dự án, sau đó tiến hành triển khai.

Cách chạy prompt theo từng chặng để dễ kiểm soát

Không cần yêu cầu AI làm lại toàn bộ mỗi lần gặp lỗi. Giữ kế hoạch, chỉ chạy tiếp khi chặng trước có kết quả kiểm tra rõ ràng:

1. Chốt thiết kế: xem entity, quyền truy cập, API và những dịch vụ thực sự cần. Một vai trò người dùng không cần hệ thống phân quyền phức tạp không phục vụ nghiệp vụ.
2. Làm một luồng hoàn chỉnh ở local: ví dụ thêm sản phẩm qua giao diện, ghi D1 local rồi tải lại để kiểm tra. Làm xong luồng nhỏ trước khi mở rộng mọi màn hình.
3. Kiểm tra lỗi và phân quyền: đăng xuất, gửi dữ liệu sai, thử thao tác bằng tài khoản không có quyền và xem API có từ chối hay không.
4. Chuẩn bị production: xác nhận account, resource ID, migrations và secrets. Nếu có dữ liệu cũ, chuẩn bị backup và cách phục hồi trước.
5. Deploy API rồi build frontend: lấy Worker URL thật, cấu hình biến môi trường frontend và CORS đúng origin Pages.
6. Xác minh online: thao tác một bản ghi thử có đánh dấu rõ, tải lại trang, kiểm tra bằng thiết bị khác và xóa dữ liệu thử theo quy trình cho phép.

Ở cuối mỗi chặng, yêu cầu AI ghi: file đã sửa, lệnh đã chạy, kết quả thực tế và việc còn thiếu. Một URL được tạo ra chưa đủ để kết luận hệ thống hoạt động.

Thứ tự deploy Pages, Workers, D1 và R2

Phần backend phải có binding đến đúng database trước khi frontend gọi tới. Với frontend Vite thông thường, thư mục build là dist; không upload src hoặc nhầm sang thư mục out của Next.js static export. Xác nhận bằng hướng dẫn React trên Pages.

Biến môi trường có tiền tố VITE_ là dữ liệu công khai được đưa vào frontend khi build. VITE_API_URL có thể chứa URL API, nhưng không chứa secret đăng nhập, JWT signing key hay khóa thanh toán. Đổi giá trị trong dashboard thường cần một lần build mới để frontend nhận cấu hình mới.

Migration D1 local và remote là hai phạm vi khác nhau. Với database mới đã xác nhận đúng tên, AI có thể dùng lệnh migrations apply theo cấu hình dự án; với database đang có dữ liệu, phải xem migration trước. Xem Wrangler commands cho D1, không chạy lại schema phá hủy dữ liệu để “sửa nhanh”.

Nếu dùng R2, giữ file riêng tư qua API kiểm tra quyền; không công khai cả bucket chỉ để làm cho ảnh hiện lên. Backend phải kiểm tra loại file, kích thước, quyền đọc và metadata liên quan.

Checklist kiểm thử trước khi chia sẻ link web

Luồng	Kết quả cần quan sát
Mở frontend	Tải được CSS/JS, không chỉ một trang trắng
Kiểm tra API	Health endpoint phản hồi; frontend gọi đúng production URL
Tạo dữ liệu	Bản ghi xuất hiện lại sau khi tải trang và đăng nhập lại
Phân quyền	API từ chối thao tác của tài khoản không có quyền
Dữ liệu sai	Giá âm, số lượng sai, trường thiếu được xử lý rõ ràng
Lỗi mạng	Không báo lưu thành công khi backend thất bại
File upload, nếu có	Kiểm tra giới hạn và quyền đọc; không lộ file riêng tư
Vận hành	Biết cách xem lỗi, backup và deploy lại

Đặc biệt với đơn hàng, hãy kiểm tra bấm hai lần có tạo đơn trùng không và tổng tiền có được tính lại ở backend không. AI có thể hoàn thành TypeScript mà vẫn bỏ sót các lỗi nghiệp vụ này.

Prompt bổ sung khi AI viết xong nhưng chưa deploy được

Tiếp tục từ source code hiện tại, không tạo lại dự án.
Đọc lỗi build/deploy thực tế và xác định đúng nguyên nhân.
Kiểm tra tài khoản Cloudflare, binding, environment và API URL bằng công cụ chính thức.
Không đọc hoặc in token; không DROP/reset database; không bật trả phí.
Chỉ sửa phần liên quan, chạy lại kiểm tra phù hợp và xác minh URL production.
Nếu thiếu quyền hoặc cần tôi thao tác, nêu đúng bước đang bị chặn.
Không báo hoàn thành nếu chỉ có URL mà chưa kiểm tra luồng lưu dữ liệu.

Đừng gửi token cho người hỗ trợ qua chat. Khi chia sẻ lỗi, che credential, dữ liệu cá nhân và thông tin khách hàng; giữ lại tên lệnh, mã HTTP và thông báo lỗi cần thiết.

Đọc tiếp và nguồn đối chiếu

• Bài 1: setup Node.js, Git và Wrangler cho vibe coding.
• Lộ trình học xây web quản lý cửa hàng với Cloudflare, dùng kiến trúc riêng được trình bày trong khóa học.
• Cloudflare Pages: Git integration.
• Cloudflare Workers và D1.
• Bảng giá R2 để kiểm tra trước khi thêm upload file.

Nếu cần đội ngũ hỗ trợ cấu hình hoặc triển khai dự án đang có, bạn có thể xem dịch vụ deploy Cloudflare của AD2T. Khi gửi yêu cầu, mô tả chức năng và lỗi hiện tại; không gửi secret hoặc quyền tài khoản qua bình luận công khai.