Aduca Hướng dẫn Agent tạo webapp với OpenClaw

Agent tạo webapp làm được gì

Agent viết toàn bộ mã; bạn chỉ cần mô tả rõ mình muốn gì, xem thử và góp ý. Webapp chạy miễn phí trên Cloudflare Pages.

Hiểu nhanh 4 khái niệm

Tạo Agent Web

Bước 1 — Tạo Agent Web với bot Telegram riêng

Làm giống mục 6 hướng dẫn gốc. Tạo bot mới ở @BotFather (/newbot), lưu token vào trình quản lý mật khẩu. Mã Agent: web.

Khối 1 — tạo Agent với thư mục làm việc riêng:

openclaw agents add web --workspace ~/.openclaw/workspace-web

Khối 2 — nhập token bot vào ô ẩn (chạy riêng):

openclaw secrets store set TG_WEB_TOKEN --kind secret   # dán token bot → Enter

Khối 3 — thêm bot, nối với Agent, đặt quyền: được chạy lệnh nhưng phải hỏi bạn trước lệnh lạ:

openclaw config set channels.telegram.accounts.web '{"enabled":true,"botToken":{"source":"store","provider":"default","id":"TG_WEB_TOKEN"}}' --strict-json --merge
openclaw agents bind --agent web --bind telegram:web
openclaw config set agents.entries.web.tools.profile '"coding"' --strict-json
openclaw config set agents.entries.web.tools.exec.mode '"ask"' --strict-json   # hỏi trước khi chạy lệnh lạ
openclaw gateway restart

Nhắn "hi" cho bot mới → bot trả mã 8 ký tự → duyệt: openclaw pairing approve telegram <CODE> --account web.

Khối 4 — giao vai trò (tin nhắn này không chứa bí mật):

Hãy cập nhật SOUL.md, IDENTITY.md và AGENTS.md của bạn:
- Tên: Web. Bạn là lập trình viên web của <tên doanh nghiệp>, làm webapp đơn giản, nhanh, chạy tốt trên điện thoại.
- Mỗi dự án một thư mục trong ~/.openclaw/workspace-web/du-an/<tên-dự-án>/, có file README.md ghi cách chạy.
- Ưu tiên HTML/CSS/JavaScript thuần, ít thư viện. Giao diện tiếng Việt, chữ dễ đọc, nút bấm lớn.
- TUYỆT ĐỐI không đặt mã bí mật (token, mật khẩu, API key) trong mã chạy trên trình duyệt.
- Trước khi đưa lên mạng: kiểm tra trên màn hình điện thoại, kiểm tra form, quét mã nguồn tìm mã bí mật, chờ tôi trả lời "DUYỆT".
- Không tự cài phần mềm hệ thống, không mở cổng ra Internet, không xoá thư mục ngoài dự án.
- Không in, ghi ra file hay gửi mã bí mật; không yêu cầu tôi gửi mã bí mật qua chat.

Duyệt lệnh ngay trong Telegram (làm 1 lần cho cả bộ)

Agent có quyền chạy lệnh ở chế độ ask sẽ xin phép trước lệnh lạ. Để nhận yêu cầu duyệt ngay trong Telegram: lấy Telegram user ID của bạn (nhắn @userinfobot, nó trả về một dãy số) rồi chạy:

openclaw config set channels.telegram.execApprovals '{"enabled":true,"approvers":["<Telegram user ID>"]}' --strict-json --merge
openclaw gateway restart

Khi Agent xin chạy lệnh, bot gửi nút Cho phép 1 lần / Luôn cho phép / Từ chối hoặc dòng /approve <id> allow-once. Đọc kỹ lệnh trước khi duyệt; lệnh có rm, curl … | bash, gửi dữ liệu ra ngoài → hỏi lại Agent vì sao cần. Chi tiết: Exec approvals.

Agent Web cần chạy lệnh (tạo file, chạy máy chủ xem thử) nên ở chế độ hỏi trước. Với dự án lớn, có thể giao cho Agent lập trình chuyên dụng (Claude Code, Codex…) chạy qua OpenClaw — xem ACP agents; người mới chưa cần.

Quy trình 6 bước làm 1 webapp

Bước 1 — Mô tả yêu cầu (càng rõ càng tốt)

Tạo dự án "landing-khoa-hoc": landing page 1 trang cho khoá học <tên khoá>.
- Khách hàng: <chân dung>. Màu chủ đạo: <mã màu>. Logo: tôi gửi kèm ảnh.
- Các phần: tiêu đề + lợi ích chính, 3 lợi ích, nội dung khoá học, giảng viên, cảm nhận học viên,
  học phí + ưu đãi, câu hỏi thường gặp, form đăng ký (họ tên, số điện thoại, nhu cầu).
- Ưu tiên điện thoại, tải nhanh, ảnh nén WebP, có thẻ title/description/og:image.
- Form gửi tới địa chỉ Apps Script tôi sẽ gửi sau (để trống trước).
Dựng bản đầu và báo tôi cách xem thử.

Bước 2 — Agent dựng bản đầu

Agent tạo thư mục ~/.openclaw/workspace-web/du-an/landing-khoa-hoc/. Khi Agent xin chạy lệnh (tạo file, nén ảnh…), đọc và duyệt.

Bước 3 — Xem thử (2 cách)

Cách A (dễ nhất): nhắn bot "Nén thư mục dự án thành file zip và gửi tôi" → giải nén trên máy → mở index.html.

Cách B (xem trực tiếp trên VPS): nhắn bot "Chạy máy chủ xem thử cho dự án ở cổng 8080, chỉ nghe 127.0.0.1", rồi trên laptop mở đường hầm và vào http://127.0.0.1:8080:

ssh -N -L 8080:127.0.0.1:8080 openclaw@<IP_VPS>

Không mở cổng 8080 ra Internet (không chạy ufw allow 8080).

Bước 4 — Góp ý và sửa

Sửa landing-khoa-hoc: phần tiêu đề chữ to hơn trên điện thoại, nút "Đăng ký" luôn hiện ở cuối màn hình,
đổi ảnh giảng viên sang file tôi gửi kèm, rút gọn phần câu hỏi còn 6 câu.

Bước 5 — Kiểm tra trước khi đưa lên mạng

Kiểm tra landing-khoa-hoc trước khi đưa lên mạng và báo cáo từng mục ĐẠT/CHƯA:
1. Quét toàn bộ mã tìm mã bí mật (token, key, mật khẩu, chuỗi dài lạ) — phải không có.
2. Hiển thị đúng ở chiều rộng 360px và 1280px, không tràn ngang.
3. Form: bắt buộc nhập, kiểm tra số điện thoại, có ô bẫy chống bot, có ô đồng ý và link chính sách quyền riêng tư.
4. Tất cả liên kết và ảnh hoạt động; tổng dung lượng trang dưới 1,5 MB.
5. Có title, description, og:image, favicon.

• Đã xem trên điện thoại thật
• Đã gửi thử form và thấy dữ liệu trong Google Sheet
• Agent báo không có mã bí mật trong mã nguồn
• Có chính sách quyền riêng tư nếu thu thập số điện thoại/email

Bước 6 — Đưa lên mạng

Xem mục "Đưa lên Cloudflare Pages" bên dưới.

Form thu khách → Google Sheets + báo Telegram

Dùng Google Apps Script làm phần xử lý phía sau: miễn phí, không cần máy chủ, dữ liệu vào thẳng Google Sheet của bạn.

Bước 1 — Tạo Sheet và Apps Script

1. Tạo Google Sheet Khách từ webapp.
2. Menu Tiện ích mở rộng → Apps Script.
3. Xoá mã mẫu, dán đoạn mã dưới, bấm Lưu.

// Aduca – nhận form từ webapp, ghi vào Google Sheet và báo Telegram
// Token bot báo tin KHÔNG nằm trong mã: lưu ở Project Settings → Script Properties
function doPost(e) {
  const d = JSON.parse(e.postData.contents || '{}');
  if (d.website) return ok_();                      // ô bẫy chống bot: người thật để trống
  const ten = String(d.ten || '').slice(0, 100);
  const sdt = String(d.sdt || '').replace(/[^0-9+]/g, '').slice(0, 15);
  if (!ten || sdt.length < 9) return ok_();
  const sh = SpreadsheetApp.getActive().getSheetByName('Khach') || SpreadsheetApp.getActive().insertSheet('Khach');
  sh.appendRow([new Date(), ten, sdt, String(d.nhucau || '').slice(0, 500), String(d.nguon || '')]);
  const p = PropertiesService.getScriptProperties();
  const token = p.getProperty('TG_TOKEN'), chat = p.getProperty('TG_CHAT');
  if (token && chat) {
    UrlFetchApp.fetch('https://api.telegram.org/bot' + token + '/sendMessage', {
      method: 'post', contentType: 'application/json', muteHttpExceptions: true,
      payload: JSON.stringify({ chat_id: chat, text: 'Khách mới: ' + ten + ' – ' + sdt.slice(0, 4) + '***' + sdt.slice(-3) })
    });
  }
  return ok_();
}
function ok_() {
  return ContentService.createTextOutput('{"ok":true}').setMimeType(ContentService.MimeType.JSON);
}

Bước 2 — Lưu token bot báo tin vào Script Properties (không đặt trong mã)

1. Tạo 1 bot Telegram riêng chỉ để báo tin (không dùng bot của Agent).
2. Apps Script → Cài đặt dự án (biểu tượng bánh răng) → Thuộc tính tập lệnh → Thêm: TG_TOKEN = token bot báo tin, TG_CHAT = ID nhóm Telegram nhận tin. Bạn tự nhập trong trang của Google — không gửi qua chat.
3. Tin báo chỉ hiện 4 số đầu và 3 số cuối điện thoại khách; số đầy đủ nằm trong Sheet.

Bước 3 — Triển khai

1. Triển khai → Tùy chọn triển khai mới → Loại: Ứng dụng web.
2. Thực thi dưới dạng: Tôi; Người có quyền truy cập: Bất kỳ ai → Triển khai → cấp quyền.
3. Copy URL ứng dụng web (dạng https://script.google.com/macros/s/…/exec). URL này không phải mã bí mật — gửi cho Agent được.

Bước 4 — Nối form với Apps Script

Nối form của landing-khoa-hoc với Apps Script: URL <URL ứng dụng web>.
Gửi bằng fetch POST, Content-Type text/plain (tránh lỗi CORS), dữ liệu JSON gồm ten, sdt, nhucau, nguon (lấy utm_source trên URL),
website (ô bẫy ẩn). Gửi xong hiện lời cảm ơn; lỗi mạng thì báo khách gọi hotline <số>.

Gửi thử form → dòng mới xuất hiện trong Sheet, nhóm Telegram nhận tin là đạt. Sửa mã Apps Script thì phải Triển khai → Quản lý triển khai → Chỉnh sửa → Phiên bản mới.

Đưa lên Cloudflare Pages

Cách 1 (khuyên dùng cho người mới) — Kéo thả trên web

1. Nhắn bot: "Nén thư mục dự án landing-khoa-hoc (chỉ các file web) thành zip và gửi tôi".
2. Đăng nhập Cloudflare (tài khoản miễn phí) → Workers & Pages → Create → Pages → Upload assets.
3. Đặt tên dự án (vd landing-khoa-hoc) → kéo thả file zip/thư mục → Deploy.
4. Mở https://landing-khoa-hoc.pages.dev kiểm tra. Lần sau cập nhật: vào dự án → Create deployment → tải bản mới.
5. Gắn tên miền: dự án → Custom domains → Set up a domain (vd khoahoc.tenmien.vn).

Cách 2 — Agent tự đưa lên bằng token giới hạn quyền

1. Cloudflare → My Profile → API Tokens → Create Token → Custom token.
2. Quyền: Account · Cloudflare Pages · Edit (chỉ quyền này). Account resources: chỉ tài khoản của bạn. Có thể đặt thời hạn.
3. Create Token → copy (chỉ hiện 1 lần) → nhập bằng khung đỏ:

openclaw secrets store set CLOUDFLARE_API_TOKEN --kind secret   # dán token Cloudflare → Enter

openclaw secrets store set CLOUDFLARE_API_TOKEN --allow-host api.cloudflare.com
openclaw secrets store set CLOUDFLARE_ACCOUNT_ID --kind env --value <Account ID>   # Cloudflare → trang tổng quan → Account ID
openclaw gateway restart

Khi tôi trả lời "DUYỆT" mới đưa landing-khoa-hoc lên mạng bằng lệnh:
npx wrangler pages deploy ./ --project-name landing-khoa-hoc (chạy trong thư mục dự án, chỉ các file web).
Dùng biến $CLOUDFLARE_API_TOKEN có sẵn, không in giá trị. Gửi tôi địa chỉ bản vừa đưa lên.

Token này chỉ đưa web lên Pages được, không sửa DNS hay tài khoản. Nếu lệnh báo lỗi kết nối/chứng chỉ khi đi qua proxy bí mật, quay về Cách 1.

Mẫu yêu cầu cho các webapp hay dùng

Máy tính giá / phí ship

Tạo dự án "bao-gia": khách chọn sản phẩm <danh sách + giá>, số lượng, khu vực giao hàng (bảng phí <…>),
hiện tổng tiền, ưu đãi theo số lượng, nút "Nhận báo giá qua Zalo" mở zalo.me/<số> kèm nội dung đơn.

Quiz chọn sản phẩm

Tạo dự án "quiz-chon-san-pham": 5 câu hỏi trắc nghiệm về nhu cầu, cuối cùng gợi ý 1 trong 3 sản phẩm <…>
kèm lý do, nút mua và form để lại số điện thoại (nối Apps Script như dự án landing).

Tra cứu đơn hàng

Tạo dự án "tra-cuu-don": khách nhập mã đơn + 4 số cuối điện thoại, trang gọi Apps Script (doGet) đọc Sheet "Don hang"
và chỉ trả về trạng thái, ngày giao dự kiến — không trả tên, địa chỉ. Giới hạn 10 lần tra cứu/phút.

Mini CRM nội bộ

Tạo dự án "crm-noi-bo": bảng danh sách khách từ Sheet "Khach", lọc theo trạng thái, nút đổi trạng thái
(mới / đã gọi / hẹn / chốt / không mua), ghi chú. Đọc/ghi qua Apps Script. Trang này dành cho nội bộ.

An toàn và sao lưu dự án

• Mã chạy trên trình duyệt là công khai: không đặt token, mật khẩu, API key, link Sheet nội bộ có quyền sửa.
• Dữ liệu khách nằm trong Google Sheet của bạn; chỉ chia sẻ Sheet cho người cần.
• Thu thập số điện thoại/email: có ô đồng ý và link chính sách quyền riêng tư.
• Thư mục dự án nằm trong ~/.openclaw/ nên đã có trong bản sao lưu hằng ngày (mục 5b hướng dẫn gốc). Nhờ Agent giữ thêm bản nén theo phiên bản trước mỗi lần đưa lên mạng.
• Cloudflare Pages lưu lịch sử các lần đưa lên: bản mới lỗi thì vào dự án → Deployments → chọn bản cũ → Rollback.

Lỗi thường gặp & cách sửa

Nguồn

• Cloudflare Pages – Direct Upload
• Cloudflare Pages – Custom domains
• Cloudflare – Tạo API token
• Cloudflare Access (bảo vệ trang nội bộ)
• Google Apps Script – Web apps
• Apps Script – Script Properties
• OpenClaw – ACP agents (Claude Code, Codex…)
• Aduca – Hướng dẫn cài đặt OpenClaw trên VPS (nền tảng)

Miễn trừ trách nhiệm