Tạo website: từ Cloudflare, Telegram đến ba hệ thống nội bộ

Ví von: mặt bằng, chìa khoá và số máy nội bộ

• Cloudflare Pages là mặt bằng miễn phí để dựng biển hiệu và cửa hàng trên mạng. Website của Sếp sẽ có địa chỉ ten-sep-chon.pages.dev, mở được từ bất kỳ đâu, không tốn tiền thuê máy chủ.
• API token là chìa khoá mặt bằng Sếp giao cho trợ lý (Claude) để nó tự ra vào dựng sửa. Giao bản sao có giới hạn quyền (chỉ được sửa website, không được động tới hoá đơn), và không đưa chìa cho ai khác.
• Telegram bot là số máy nội bộ: hệ thống dùng số này để nhắn Sếp "có đơn đặt lịch mới", "có phiếu chi chờ duyệt", và nhận lệnh Sếp bấm "Duyệt".

Phần này có ba việc chuẩn bị (4.1 Cloudflare, 4.2 Telegram, 4.3 cách giao việc) và ba website (4.4a–c). Làm tuần tự; website đầu tiên sẽ lâu nhất, hai cái sau nhanh hơn nhiều vì Claude đã quen "văn phòng".

4.1 Cloudflare: tạo tài khoản và lấy API

1. Tạo tài khoản

   Vào dash.cloudflare.com/sign-up, đăng ký bằng email công ty. Gói Free là đủ cho mọi website trong bộ này (không giới hạn lượt truy cập trang tĩnh; có 500 lần đẩy website/tháng).

2. Ghi lại Account ID

   Đăng nhập → menu trái chọn Workers & Pages. Ở cột bên phải trang tổng quan có dòng Account ID (một dãy 32 ký tự). Bấm copy, dán tạm vào Notepad.

3. Tạo API token

   Bấm vào biểu tượng người dùng góc trên phải → My Profile → thẻ API Tokens → nút Create Token → kéo xuống dưới cùng chọn Create Custom Token → Get started.

   • Token name: claude-code-website
   • Permissions (bấm Add more để thêm dòng):
     • Account · Cloudflare Pages · Edit — để đẩy website
     • Account · D1 · Edit — để website có bảng dữ liệu (đặt lịch, phiếu chi, khách hàng)
     • Account · Workers KV Storage · Edit — bộ nhớ nhỏ cho cấu hình, đếm lượt
     • Account · Workers Scripts · Edit — để chạy phần xử lý phía sau website (nhận form, gọi Telegram)
   • Account Resources: Include · tài khoản của Sếp
   • Bấm Continue to summary → Create Token.

   Màn hình hiện token đúng một lần. Copy ngay.

4. Giao chìa khoá cho Claude — qua file, không qua khung chat

   Tạo file D:\CongTy_Claude\40-web\.env bằng Notepad, nội dung 2 dòng (dán giá trị thật của Sếp):

   Nội dung file 40-web\.env

   CLOUDFLARE_API_TOKEN=dán_token_vào_đây
   CLOUDFLARE_ACCOUNT_ID=dán_account_id_vào_đây

   Prompt mẫu · kiểm tra kết nối Cloudflare

   Tôi đã lưu token Cloudflare vào 40-web/.env (CLOUDFLARE_API_TOKEN và CLOUDFLARE_ACCOUNT_ID).
   1. Thêm ".env" vào .gitignore nếu chưa có, để file này không bao giờ bị commit.
   2. Nạp biến từ .env rồi chạy "wrangler whoami" (dùng npx, ghim bản wrangler 4.115.0) để kiểm tra token hợp lệ.
   3. Tuyệt đối không in giá trị token ra màn hình hay ghi vào file nào khác; chỉ báo tôi "kết nối OK" kèm tên tài khoản, hoặc lỗi gì.

4.2 Telegram bot: lấy token và chat_id

1. Tạo bot với BotFather

   Mở Telegram, tìm @BotFather (có tích xanh) → bấm Start → gõ /newbot. BotFather hỏi hai thứ: tên hiển thị (ví dụ "Trợ lý ABC") và username (phải kết thúc bằng bot, không dấu, ví dụ troly_abc_bot). Xong nó trả về một dòng dài dạng 123456789:AAH... — đó là token bot.

2. Lấy chat_id của Sếp

   Tìm @userinfobot → Start → bot trả về Id: 123456789. Số đó là chat_id — "số máy" của Sếp để bot biết gửi cho ai.

   Muốn bot nhắn vào nhóm (ví dụ nhóm Ban giám đốc): thêm bot vào nhóm, gửi một tin bất kỳ trong nhóm, rồi bảo Claude gọi getUpdates để đọc ra chat_id của nhóm (số âm, dạng -100…).

3. Bấm Start với chính bot của mình

   Tìm username bot vừa tạo (@troly_abc_bot) → bấm Start. Chưa bấm thì bot không được phép nhắn cho Sếp — đây là lỗi hay gặp nhất.

4. Lưu vào .env và thử gửi
   Thêm vào file 40-web\.env

   TELEGRAM_BOT_TOKEN=dán_token_bot
   TELEGRAM_CHAT_ID=dán_chat_id

   Prompt mẫu · thử gửi Telegram

   Tôi đã thêm TELEGRAM_BOT_TOKEN và TELEGRAM_CHAT_ID vào 40-web/.env.
   Hãy viết một script nhỏ tools/gui-telegram.py nhận một đoạn chữ và gửi tới chat_id đó qua API sendMessage của Telegram (đọc token từ .env, không ghi cứng).
   Chạy thử gửi tin: "✅ Bot của Sếp đã sẵn sàng — gửi từ Claude Code lúc [giờ hiện tại]".
   Không in token ra màn hình. Báo tôi kết quả API trả về (ok hay lỗi gì).

4.3 Cách giao việc dựng website: vòng lặp 5 bước

1. Mô tả bằng lời — như giao cho một nhân viên mới

   Trả lời bốn câu: ai dùng (khách, nhân viên, Sếp)? màn hình nào cần có? dữ liệu nào phải lưu lại? ai cần được báo khi có việc mới? Không cần nói công nghệ. Ba prompt ở mục 4.4 đã viết sẵn theo khung này.

2. Bản 1 chạy trên máy, chưa lên mạng

   Claude dựng, tự mở trong trình duyệt tích hợp, tự chụp màn hình máy tính và điện thoại, tự bắt lỗi. Sếp xem ảnh chụp hoặc bấm thử ngay trong ứng dụng.

3. Góp ý như góp ý bản in

   "Chữ bé quá", "bỏ cột này", "thêm ảnh nhà máy ở đầu trang", "màu phải theo logo". Có thể dán ảnh chụp màn hình kèm vẽ khoanh. Lặp 2–3 vòng.

4. Nối dữ liệu thật và Telegram

   Bản 1 thường dùng dữ liệu giả để xem bố cục. Vòng này Claude tạo bảng D1, nối form vào, nối bot. Thử một quy trình trọn vẹn: tạo phiếu → nhận tin → bấm duyệt → trạng thái đổi.

5. Đẩy lên Cloudflare và kiểm tra trên link thật

   Claude create project, deploy, rồi mở link thật bằng trình duyệt để kiểm lần cuối (ảnh có hiện, form có gửi). Sếp nhận link kèm ảnh chụp.

4.4a Website cá nhân + đặt lịch họp với đối tác

Mục tiêu: một trang giới thiệu Sếp và công ty, đối tác/nhà cung cấp mở lên là tự chọn được khung giờ họp trong lịch rảnh Sếp đã khai, không phải nhắn qua lại 5 lần. Mỗi lần có lịch mới, Telegram báo Sếp; Sếp bấm Xác nhận là khách nhận thông báo.

Hãy dựng website cá nhân kiêm đặt lịch họp cho tôi, lưu trong 40-web/dat-lich/, sau này đẩy lên Cloudflare Pages với tên project "lich-hop-abc".

NGƯỜI DÙNG: đối tác, nhà cung cấp, ứng viên muốn gặp tôi. Họ không có tài khoản.

TRANG CHÍNH (một trang cuộn):
- Giới thiệu ngắn về tôi và công ty (lấy từ ~/.claude/CLAUDE.md và 02-kien-thuc/nang-luc.json; ảnh nhà máy trong 00-nhan-dien/anh/ nếu có).
- Khối "Đặt lịch họp": chọn loại (Gặp tại nhà máy 60 phút / Họp online 30 phút) → chọn ngày trong 3 tuần tới → chọn giờ còn trống → điền họ tên, công ty, số điện thoại, nội dung → bấm Đặt lịch.
- Giờ rảnh mặc định của tôi: thứ 2–6, 9h–11h30 và 14h–17h, trừ thứ 4 chiều. Nghỉ lễ VN tự loại.
- Trang xác nhận: "Đã nhận yêu cầu, tôi sẽ xác nhận trong 24 giờ".

PHÍA SAU:
- Lưu từng yêu cầu vào D1 (bảng lich_hen: id, loai, ngay_gio, ho_ten, cong_ty, sdt, noi_dung, trang_thai, tao_luc).
- Gửi Telegram cho tôi (token trong 40-web/.env → đặt thành biến môi trường trên Cloudflare, không ghi cứng) với nội dung đầy đủ và 2 nút: ✅ Xác nhận · 🔁 Đề nghị đổi giờ. Bấm nút → cập nhật trang_thai và sửa tin nhắn thành "ĐÃ XÁC NHẬN".
- Một giờ đã có lịch xác nhận thì không hiện cho người khác chọn nữa.

TRANG QUẢN TRỊ /quan-tri (mã truy cập đặt trong biến môi trường): xem lịch tuần, chặn một ngày/giờ bận, danh sách yêu cầu theo trạng thái.

NHẬN DIỆN: màu, font, logo theo 00-nhan-dien/ (nếu đã có skill thiết kế thì dùng skill đó). Phải đẹp trên điện thoại.

CÁCH LÀM: dựng bản 1 chạy trên máy với dữ liệu giả trước, tự mở trình duyệt kiểm tra máy tính + điện thoại, chụp ảnh cho tôi xem. CHƯA deploy, CHƯA tạo D1 cho tới khi tôi duyệt bố cục.

4.4b Hệ thống duyệt chi nội bộ

Mục tiêu: thay chuỗi "nhắn Zalo xin chi → Sếp hỏi lại → chụp hoá đơn → quên" bằng một luồng rõ ràng: nhân viên tạo phiếu, hệ thống tự chuyển đúng người duyệt theo hạn mức, Sếp duyệt bằng một nút trên Telegram, kế toán nhìn thấy mọi phiếu đã duyệt để chi và đối soát.

Hãy dựng hệ thống duyệt chi nội bộ, lưu trong 40-web/duyet-chi/, tên project Cloudflare "duyet-chi-abc".

NGƯỜI DÙNG VÀ VAI TRÒ (đăng nhập bằng tài khoản + mật khẩu, lưu D1, mật khẩu băm):
- nhan_vien: tạo phiếu, xem phiếu của mình.
- truong_bo_phan: như nhân viên + duyệt phiếu của bộ phận mình dưới 5.000.000 đ.
- giam_doc (tôi): duyệt mọi phiếu từ 5.000.000 đ trở lên, xem báo cáo.
- ke_toan: xem phiếu đã duyệt, đánh dấu đã chi, xuất Excel.

PHIẾU CHI: mã tự sinh dạng DC-0001; hạng mục (chọn từ danh sách: vật tư sản xuất, sửa chữa máy, công tác phí, tiếp khách, văn phòng phẩm, khác); số tiền; lý do; nhà cung cấp; ảnh báo giá/hoá đơn (tối đa 3 ảnh, lưu R2 hoặc base64 trong D1 nếu nhỏ); ngày cần tiền.
TRẠNG THÁI: cho_duyet → da_duyet / tu_choi / hoi_lai → da_chi. Mỗi lần đổi trạng thái ghi ai, lúc nào, ghi chú gì (bảng lich_su).

TELEGRAM:
- Phiếu mới → gửi cho đúng người duyệt theo hạn mức, nội dung đầy đủ + ảnh, 3 nút: ✅ Duyệt · ❌ Từ chối · ❓ Hỏi lại. Bấm nút → cập nhật trạng thái, sửa tin nhắn thành kết quả, báo lại người tạo phiếu.
- Phiếu đã duyệt → báo kế toán.
- 8h sáng thứ 2 → gửi tôi tổng hợp tuần trước: số phiếu, tổng tiền theo bộ phận, phiếu quá 3 ngày chưa duyệt.
Mỗi người dùng có ô "Telegram chat_id" trong hồ sơ để nhận tin.

BÁO CÁO: tổng chi theo tháng, theo bộ phận, theo hạng mục; xuất Excel.

NHẬN DIỆN: theo 00-nhan-dien/. Dùng được trên điện thoại vì nhân viên tạo phiếu ngay tại xưởng.

CÁCH LÀM: bản 1 trên máy với 4 tài khoản mẫu và 10 phiếu giả, chạy thử trọn luồng tạo → duyệt → chi; chụp ảnh từng màn cho tôi duyệt rồi mới tạo D1 thật và deploy. Mật khẩu tài khoản mẫu ghi vào 40-web/duyet-chi/TAI-KHOAN-MAU.md (file này vào .gitignore).

4.4c Website quản trị khách hàng (CRM)

Mục tiêu: một chỗ duy nhất trả lời "khách này đang ở đâu trong hành trình mua, ai đang phụ trách, việc tiếp theo là gì, đã hứa gì" — thay cho Excel của từng sale và trí nhớ của Sếp. Với doanh nghiệp sản xuất B2B, hành trình thường là: liên hệ mới → khảo sát / nhận bản vẽ → báo giá → đàm phán → ký hợp đồng → sản xuất & giao → chăm sóc, đơn lặp lại.

Hãy dựng CRM quản trị khách hàng cho công ty sản xuất B2B, lưu trong 40-web/crm/, tên project Cloudflare "crm-abc".

ĐĂNG NHẬP: tài khoản + mật khẩu băm, vai trò sale / ky_thuat / ke_toan / giam_doc. Sale chỉ thấy khách mình phụ trách (và khách chung), giám đốc thấy tất cả.

DỮ LIỆU (D1):
- khach_hang: mã tự sinh KH-0001, tên công ty, mã số thuế, ngành, tỉnh, nguồn (giới thiệu / triển lãm / website / gọi lạnh), người phụ trách, nhóm khách (FDI / nội địa / đại lý).
- nguoi_lien_he: thuộc khách, họ tên, chức vụ, số điện thoại (BẮT BUỘC, 10 số), email, vai trò (người quyết định / kỹ thuật / mua hàng).
- co_hoi: thuộc khách, tên, sản phẩm quan tâm (chọn từ 02-kien-thuc/san-pham.json), giá trị dự kiến, giai đoạn (lien_he_moi → khao_sat → bao_gia → dam_phan → ky_hop_dong → san_xuat_giao → cham_soc), ngày dự kiến chốt, lý do thua (nếu thua).
- hoat_dong: thuộc khách/cơ hội, loại (gọi / gặp / email / gửi báo giá / demo), nội dung, ngày, người làm, việc tiếp theo + hạn.
- hop_dong: thuộc cơ hội, số HĐ, giá trị trước thuế, VAT, các đợt thanh toán (tỷ lệ, số tiền, hạn, đã thu), file đính kèm.

MÀN HÌNH:
- Tổng quan: giá trị theo giai đoạn, cơ hội sắp chốt tháng này, khách quá 30 ngày không có hoạt động, việc quá hạn.
- Khách hàng: danh sách lọc theo người phụ trách / tỉnh / nhóm; chi tiết khách = hồ sơ + liên hệ + cơ hội + dòng thời gian hoạt động.
- Cơ hội: bảng Kanban kéo thả giữa giai đoạn; chuyển sang "ky_hop_dong" bắt buộc nhập hợp đồng.
- Việc của tôi: việc tiếp theo của tôi sắp tới hạn / quá hạn.
- Báo cáo: tuần / tháng, xuất Excel.

TELEGRAM (mỗi người dùng có chat_id):
- Việc quá hạn 1 ngày → nhắc người phụ trách.
- Đợt thanh toán tới hạn trong 3 ngày → nhắc kế toán + sale.
- 8h sáng hằng ngày → gửi giám đốc: hoạt động hôm qua (ai gọi/gặp bao nhiêu), cơ hội đổi giai đoạn, hợp đồng mới.

QUY TẮC: không xoá khách — chỉ "lưu trữ"; mọi sửa đổi hợp đồng ghi lịch sử; nhập khách mới trùng số điện thoại người liên hệ thì cảnh báo trùng.

NHẬN DIỆN: theo 00-nhan-dien/. Bản 1 chạy trên máy với 20 khách giả lấy đúng ngành của tôi; chụp từng màn cho tôi duyệt rồi mới tạo D1 thật và deploy.

Bảng tóm tắt ba website

Làm theo thứ tự a → b → c. Sau website a, Claude đã có sẵn cách đăng nhập, cách nối Telegram, cách deploy — b và c dùng lại gần hết.

Bẫy đã gặp khi dựng web với Claude

Checklist kết thúc Phần 4

• Có tài khoản Cloudflare, Account ID và API token lưu trong 40-web/.env, file này nằm trong .gitignore
• wrangler whoami báo đúng tài khoản
• Bot Telegram gửi được tin thử cho Sếp (và nhóm nếu cần)
• Website a) chạy trên link thật, đặt thử một lịch → nhận Telegram → bấm Xác nhận → trạng thái đổi
• Website b) chạy trọn luồng tạo → duyệt → chi với tài khoản mẫu
• Website c) nhập 5 khách thật đầu tiên, nhận được báo cáo 8h sáng
• Mỗi website có hồ sơ (README) trong 40-web/: link, cách sửa, điểm còn treo