Chương 04 · Hà Nội · Buildathon Chapter 04 · Hà Nội · Buildathon 04 章 · 河内 · Buildathon
CK ShopX · GemLabs

Chương 04.
Một ngày, build
một app thật.
Chapter 04.
One day, build
a real app.
第 04 章。
一天,做出
一个真 app。

Ba buổi coffee chat ở Sài Gòn, giờ ra Hà Nội. Lần này là Buildathon. Không cần biết code. Sáng học căn bản, chiều mỗi người đẩy một app lên link thật. Three coffee chats in Saigon, now Hà Nội. This time it's a Buildathon. No code needed. Learn the basics in the morning, ship a real app to a live URL by afternoon. 西贡三场 coffee chat,如今来到河内,这次是 Buildathon。不用会写代码。上午学基础,下午每人把一个 app 发布到线上网址。

Thứ Bảy 25/07 · 09:00 – 15:00 · có ăn trưa
VP GemCommerce · Tầng 5, số 3 Lê Trọng Tấn, Hà Nội
Chris Koh & Brothers · mang laptop sạc đầy (ưu tiên MacBook)
Saturday Jul 25 · 09:00 – 15:00 · lunch included
GemCommerce office · 5th floor, No. 3 Le Trong Tan, Hà Nội
Chris Koh & Brothers · bring a charged laptop (MacBook ideal)
周六 7 月 25 日 · 09:00 – 15:00 · 含午餐
GemCommerce 办公室 · 河内莱重信街 3 号 5 楼
Chris Koh & Brothers · 带上充满电的笔记本(最好是 MacBook)

Mô tả → AI build → chạy thật Describe → AI builds → it runs 描述 → AI 来写 → 真的能跑
chriskoh.devGemLabs · Hà Nội Buildathon · 04
01 · Mình là aiWho I am我是谁
Giới thiệu nhanhQuick intro快速自我介绍

Chào, mình là Chris.Hi, I'm Chris.大家好,我是 Chris。

Mình là founder GemCommerce / GemPages, một trong những page builder lớn trên Shopify App Store, seller khắp thế giới đang dùng. Bọn mình cũng đang build GemBoss, nền tảng Self-Driving Storefront: storefront tự vận hành, tự bán hàng. I'm the founder of GemCommerce / GemPages, one of the larger page builders on the Shopify App Store, used by sellers worldwide. We're also building GemBoss, a Self-Driving Storefront platform: a storefront that runs and sells on its own. 我是 GemCommerce / GemPages 的创始人,Shopify 应用商店里较大的页面搭建工具之一,全球卖家都在用。我们也在做 GemBoss,一个 Self-Driving Storefront 平台:会自己运营、自己卖货的店面。

Gần một năm nay, mình build phần lớn tool nội bộ (dashboard, công cụ research, automation) bằng cách ngồi nói chuyện với AI thay vì gõ từng dòng code. For about the last year, I've built most of my internal tools (dashboards, research tools, automations) by talking to AI instead of hand-writing every line. 差不多近一年,我大部分内部工具(仪表盘、调研工具、自动化)都是靠跟 AI 对话做出来的,而不是一行行手写。

Mình có nền tảng kỹ thuật, nhưng cái đó không phải điều quan trọng. Quan trọng là biết cách mô tả, hiểu rõ bản chất nó chạy ra sao. Nắm được mấy thứ đó thì ai cũng build được phần mềm cho chính mình. I do have an engineering background, but that's not the point. What matters is knowing how to describe it, and understanding what's really going on under the hood. With that, anyone can build software for themselves. 我有技术背景,但这不是重点。重点是会描述需求、真正理解底层在发生什么。掌握这些,谁都能给自己做软件。

Hôm nay chúng ta cùng trao đổi, cùng đóng góp ý tưởng, rồi chia nhóm để build ra workflow của riêng mình. Today we trade ideas, chip in, then split into teams to build our own workflows. 今天我们一起交流、一起出主意,然后分组做出各自的 workflow。
GemBoss · Self-Driving Storefront
02 · Ra về với gìWhat you walk out with你会带走什么
Mục tiêu hôm nayGoals for today今天的目标

Cuối ngày, ae sẽ có…By the end, you'll have…结束时,你会拥有……

01

Hết sợ chữ kỹ thuậtNo more jargon fear不再怕技术词

Hiểu nôm na một app gồm gì: "server", "database", "localhost", "deploy" không còn đáng sợ.A plain-language picture of what an app is: "server", "database", "localhost", "deploy" stop being scary.对 app 由什么构成有个大白话概念:“服务器”“数据库”“localhost”“部署”不再吓人。

02

Biết "ra lệnh" cho AIKnow how to direct AI知道怎么指挥 AI

Cách mô tả để AI build hộ, rồi bắt nó chứng minh hiểu đúng trước khi viết code.How to describe what you want so AI builds it, then make it prove it understood before coding.怎么描述让 AI 帮你做,并在写代码前让它证明理解对了。

03

Máy sẵn sàng buildA machine that's ready一台准备好的机器

VS Code, GitHub cá nhân, Docker, Railway: dựng xong tại chỗ, còn xài mãi về sau.VS Code, your own GitHub, Docker, Railway: set up on the spot, yours to keep.VS Code、你自己的 GitHub、Docker、Railway:现场装好,以后一直能用。

04

Một app chạy thậtA tool that actually runs一个真能跑的工具

Tự tay đẩy 1 app lên URL thật qua Railway, mở được trên điện thoại.You ship a tool to a live URL on Railway. Open it on your phone.亲手把一个工具发布到 Railway 上的真实网址,手机就能打开。

05

Mô hình trong đầuThe mental model心智模型

Đủ để về nhà tự build tiếp, không phụ thuộc buổi học này.Enough to keep building on your own after today.足够让你今天之后自己继续做。

06

Người làm cùngPeople you built with一起做事的人

40 builder Hà Nội vừa cùng giải bài toán thật, không chỉ trao danh thiếp.40 Hà Nội builders who just solved real problems, not just a card swap.40 位河内 builder 刚一起解决了真实问题,不只是换名片。

chriskoh.dev02
03 · Tinh thầnThe spirit气氛
Tinh thầnSpirit气氛

Đến để build cùng nhau, không chỉ để nghe.Come to build together, not just to listen.来一起做东西,不只是来听。

Buổi này This room is 这房间

  • Thực hành tại chỗ, hands-on cả buổiHands-on the whole time全程动手实操
  • Mang bài toán vận hành thật của mình tớiBring a real ops problem you have带上你真实的运营问题
  • Làm nhóm, hỏi khi vướng, debug cùng nhauWork in teams, ask when stuck, debug together分组做,卡住就问,一起 debug
  • Ưu tiên chạy được trước, đẹp tính sauWorking first, pretty later先能跑,再好看

Buổi này không phải This room is not 这房间 不是

  • Lớp nghe giảng một chiềuA one-way lecture单向听课
  • Phải biết code trước mới chơi đượcOnly for people who already code只给会写代码的人
  • Nơi phải hoàn hảo mới được shipA place where it must be perfect to ship必须完美才能发布
  • Chỗ ngồi im nghe rồi vềA sit-quietly-then-leave thing安静坐着然后走人
Hôm nay, mục tiêu là một thứ chạy thật trên một cái link. Today, the goal is one thing that actually runs on a link. 今天的目标,是一个在链接上真的能跑的东西。
chriskoh.dev03
04 · Ngày chạy thế nàoHow the day runs今天怎么走
Timeline · 09:00 – 15:00 · có ăn trưaTimeline · 09:00 – 15:00 · lunch included流程 · 09:00 – 15:00 · 含午餐

Sáng học căn bản. Chiều tự build & deploy.Foundations in the morning. Build & deploy after lunch.上午打基础。午饭后动手做并部署。

Phần 1 · Gom câu hỏi + chia teamPart 1 · Collect + split teams第一部分 · 收集 + 分组
09:00 – 09:45 Chào · mình là ai · viết bài toán trên Notewave · chia team theo mối quan tâmWelcome · who I am · write problems on Notewave · split teams by interest欢迎 · 我是谁 · 在 Notewave 写问题 · 按兴趣分组
Phần 2 · Căn bảnPart 2 · Foundations第二部分 · 基础
09:45 – 11:00 Build với AI · mổ xẻ app & từ ngữ · database · agentBuild with AI · app anatomy & terms · database · agents用 AI 搭建 · 拆解 app & 术语 · 数据库 · agent
11:00 – 11:15☕ Giải lao☕ Break☕ 休息
Phần 3 · Build & SetupPart 3 · Build & Setup第三部分 · 搭建与准备
11:15 – 12:00 Setup: VS Code · GitHub cá nhân · Docker · localhost vs liveSetup: VS Code · your GitHub · Docker · localhost vs live准备:VS Code · 你的 GitHub · Docker · localhost vs 线上
12:00 – 13:00🍜 Ăn trưa tại văn phòng GemCommerce🍜 Lunch at the GemCommerce office🍜 在 GemCommerce 办公室午餐
13:00 – 13:40 Kết nối Railway · deploy trang HTML đầu tiênConnect Railway · deploy your first HTML page连接 Railway · 部署第一个 HTML 页面
13:40 – 14:40 Build sprint · biến bài toán thành tool · mình đi từng bànBuild sprint · turn your problem into a tool · I roam to helpbuild 冲刺 · 把问题变成工具 · 我逐桌帮忙
14:40 – 15:00 Deploy bản cuối · demo 2 phút/nhóm · chụp hìnhDeploy final · 2-min demo per group · group photo部署最终版 · 每组演示 2 分钟 · 合影
6 tiếng · 3 phần · 1 → 36 hours · 3 parts · 1 → 36 小时 · 3 部分 · 1 → 3
chriskoh.dev04
Phần 1 · ~45'Part 1 · ~45'第一部分 · 约 45 分钟

Gom câu hỏi.Collect the questions.收集问题。

Trước khi học gì, cả phòng viết ra: ae muốn build cái gì, và cái gì đang cản ae. Danh sách đó lái cả ngày. Before we learn anything, the room writes it down: what you want to build, and what's stopping you. That list steers the whole day. 在学任何东西之前,全房间先写下来:你想做什么、又是什么卡着你。这份清单引导一整天。

Phần 1 · Khởi độngPart 1 · Warmup第一部分 · 热身
Mỗi người một tấm, viết bài toán thậtOne sticky each, write a real problem每人一张,写下真实问题

Ae ước gì có một cái app làm hộ việc gì?What one thing do you wish an app did for you?你最希望有个 app 帮你做什么?

Gộp đơn từ 3 nơi về một bảngMerge orders from 3 places into one board把 3 个来源的订单汇到一张表POD shop
Tự viết mô tả sản phẩm bằng AIAuto-write product descriptions with AI用 AI 自动写商品描述Fashion
Trang tính lãi cho từng SKUA page that computes margin per SKU按 SKU 算利润的页面Ops
Chấm creative nào đáng chạy adsScore which creative is worth ad spend评估哪个素材值得投广告Growth
01

Một câu, một việcOne line, one job一句话,一件事

"Tôi muốn một app để ___." Càng cụ thể càng dễ build trong chiều nay."I want an app to ___." The more concrete, the easier to build this afternoon.“我想要一个 app 来 ___。”越具体,今天下午越好做。

02

Bài toán thật của aeA problem that's really yours你真正的问题

Không cần to. Một việc lặp đi lặp lại mỗi tuần là quá đủ.Doesn't need to be big. A weekly repetitive chore is plenty.不用很大。每周重复的一件杂事就够了。

03

Cái này = đề bài chiềuThis = your afternoon brief这 = 你下午的题

Tấm sticky ae viết bây giờ chính là thứ ae sẽ build và deploy lúc chiều.The sticky you write now is exactly what you'll build and deploy later.你现在写的这张便签,就是下午要做并部署的东西。

chriskoh.dev05
Phần 1 · Notewave · quét QRPart 1 · Notewave · scan QR第一部分 · Notewave · 扫码
Cùng viết bài toán trên NotewaveWrite problems together on Notewave在 Notewave 上一起写问题

Việc gì trong công việc đang ngốn thời gian của ae nhất?What eats the most of your time at work?工作里,哪件事最吃你的时间?

Notewave QR
notewave · live
gemlabs-notewave-production.up.railway.app
  • Quét QR · gõ tên · vào phòngScan the QR · type your name · join the room扫码 · 输入名字 · 进入房间
  • Chụp sticky hoặc gõ tay 1–3 bài toán, việc gì lặp đi lặp lại, càng cụ thể càng tốtSnap a sticky or type 1–3 problems, what repeats every week, be specific拍便利贴或直接打 1–3 个问题,每周重复的事,越具体越好
  • Cả phòng thấy hết · AI gom theo chủ đề · lát nữa dùng để chia teamEveryone sees them · AI clusters by theme · used next to split teams全场都看得到 · AI 按主题聚类 · 待会儿用来 分组
Notewave này chính là một tool mình build bằng Claude. Chiều nay ae cũng build kiểu như vậy.Notewave is a tool I built with Claude. This afternoon you'll build something like it.这个 Notewave 就是我用 Claude 做的工具。今天下午你也会做出类似的东西。
Mỗi tuần copy đơn từ 3 sàn vào 1 sheet, mất 4 tiếngCopy orders from 3 channels into one sheet, 4 hrs/week每周把 3 个平台的订单复制进一个表,4 小时
Không biết đối thủ đang để giá & ưu đãi gìNo clue what competitors price & offer不知道对手在定什么价 & 做什么优惠
Soạn mô tả sản phẩm cho 200 SKUWriting product descriptions for 200 SKUs给 200 个 SKU 写产品描述
Trả lời câu hỏi khách lặp đi lặp lại cả ngàyAnswering the same customer questions all day整天重复回答客户同样的问题
chriskoh.dev06
Phần 1 · Chia teamPart 1 · Split teams第一部分 · 分组
Cùng mối quan tâm ngồi cùng bànShared interest, same table同一兴趣,同一桌

Chia team theo thứ ae quan tâm.Teams split by what you care about.按你关心的话题分组。

Sau khi cả phòng viết xong, Notewave gom câu hỏi theo chủ đề. Bấm một nút, hệ thống chia team dựa trên mối quan tâm chung, người hỏi về ads ngồi cùng người hỏi về ads, về email ngồi với email. Cùng bài toán thì chiều build chung mới hăng. Once everyone's written, Notewave clusters the questions by theme. One click and it splits teams by shared interest, the ads people together, the email people together. Same problem, same table, better afternoon. 大家写完后,Notewave 按主题聚类问题。点一下,它就按共同兴趣分组,问 ads 的坐一起,问 email 的坐一起。同一个问题,同一桌,下午做得才带劲。

Mở tab Teams trên điện thoại là thấy team của mình. Số người mỗi team chỉnh được. Open the Teams tab on your phone to see your table. Team size is adjustable. 在手机上打开 Teams 标签就能看到你的组。每组人数可调。

Notewave chia · cùng chủ đề một bànNotewave splits · one topic per tableNotewave 分组 · 一桌一个主题
chriskoh.dev07
Phần 2 · ~75'Part 2 · ~75'第二部分 · 约 75 分钟

Căn bản.Foundations.打基础。

Đủ để hết sợ. Không cần học thuộc, chỉ cần hình dung đúng cái app là gì và ai làm việc gì. Just enough to stop being scared. No memorizing, just the right picture of what an app is and who does what. 够用就好,不怕就行。不用背,脑子里有正确的图:app 是什么、谁干什么。

Phần 2 · Tư duyPart 2 · Mindset第二部分 · 思路
Vai của ae trong phòngYour role in the room你在房间里的角色

Ae không thành dev.
Ae thành khách khó tính.
You don't become a dev.
You become a picky client.
你不用变成开发者。
你变成挑剔的甲方。

Coi AI như một anh dev freelance giỏi tay nghề, nhanh kinh khủng, nhưng mới vào ngày đầu: chưa biết shop ae bán gì, chưa biết khách ae là ai, và ngại hỏi lại nên toàn tự đoán.Treat AI like a freelance dev who's skilled, insanely fast, but on day one: doesn't know what your shop sells, who your customers are, and guesses rather than asking.把 AI 当成一个 手艺好、快得离谱、但才上班第一天 的外包开发:不知道你卖什么、客户是谁,又不好意思问,就全靠猜。

Ae đã brief agency, brief freelancer, brief xưởng may. Kỹ năng đó chuyển thẳng sang đây, không mất gì.You've briefed agencies, freelancers, factories. That skill transfers straight here, nothing wasted.你给 agency、外包、工厂都下过 brief。那套能力直接搬过来,一点不浪费。
Ae quyết · AI thi côngYou decide · AI builds你决定 · AI 施工
Mình đâu biết code?But I can't code?我又不会写代码? Biết ra lệnh là đủ!Knowing how to direct is enough!会指挥就够了!
chriskoh.dev06
Phần 2 · Ba từPart 2 · Three words第二部分 · 三个词
Nghe nhiều nhất cả ngàyWhat you'll hear all day今天听得最多的词

Cả ngày xoay quanh ba từ.The whole day turns on three words.一整天就围着三个词转。

Web App

Cái ae build hôm nayWhat you build today你今天要做的

Một phần mềm mở bằng đường link, chạy trong trình duyệt. Không phải cài, gửi link là xài.Software you open with a link, running in the browser. No install, just share the link.用一条链接打开、在浏览器里跑的软件。不用安装,发链接就能用。

Máy khách
· Máy chủ
Client · Server客户端 · 服务器

Khách và cái bếpThe guest and the kitchen客人和后厨

Client là máy ae bấm. Server là máy chạy hoài, phục vụ mọi người cùng lúc.Client is the machine you tap on. Server is the always-on machine serving everyone at once.客户端是你点的那台机器。服务器是常开、同时服务所有人的机器。

Database

Cái khoThe storeroom仓库

Nơi cất mọi dữ liệu để mai mở vẫn còn. Cứ hình dung là Excel có kỷ luật.Where all data is kept so it's still there tomorrow. Think Excel with discipline.存放所有数据、明天还在的地方。就当它是有纪律的 Excel。

Nắm ba từ này là hết sợ nửa còn lại. Mấy slide sau chỉ mở rộng đúng ba thứ này thôi.Get these three and the rest stops being scary. The next slides just unpack these same three.抓住这三个词,剩下的就不吓人了。后面的 slide 只是把这三样展开讲。
Ba từ này thôi hả?Just these three?就这三个词? Ừ, xong nền tảng!Yep, that's the foundation!对,基础就齐了!
chriskoh.dev07
Phần 2 · Mổ một cái appPart 2 · Anatomy第二部分 · 拆解
Nghĩ nó như mở một quán cà phêThink of it like opening a café把它想成开一家咖啡店

App nào cũng chỉ có 5 mảnh.Every app is just 5 parts.任何 app 都只有 5 块。

Frontend

Mặt tiền quánThe storefront店面

Cái khách nhìn và bấm. Nút, form, bảng, màu. Sai ở đây thấy ngay.What users see and tap. Buttons, forms, tables, colour. Mistakes show instantly.用户看到和点的部分。按钮、表单、表格、颜色。错了立刻看得见。

Backend

Cái bếpThe kitchen后厨

Xử lý đơn, tính tiền, gọi AI, gửi mail. Khách không thấy nhưng sai là hỏng món.Handles orders, money, AI calls, email. Unseen, but errors ruin the dish.处理订单、算钱、调用 AI、发邮件。看不见,但出错就砸锅。

Database

Cái khoThe storeroom仓库

Nơi cất mọi thứ để mai mở ra vẫn còn. Đổi bếp dễ, dọn kho sai thì mệt.Where everything's kept so it's still there tomorrow. Swapping kitchens is easy; a wrong storeroom is pain.存放一切、明天还在的地方。换后厨容易,仓库设计错了很麻烦。

API

Bồi bànThe waiter服务员

Chạy qua lại giữa mặt tiền và bếp. Cũng là cách app nói chuyện với Shopify, với Claude.Runs between storefront and kitchen. Also how your app talks to Shopify, to Claude.在店面和后厨之间跑腿。也是 app 跟 Shopify、Claude 对话的方式。

Hosting

Mặt bằngThe premises铺面

Chỗ để app chạy 24/7 cho người khác vào. Trên máy ae là localhost, chỉ mình ae, tắt máy là tắt. Deploy lên hosting mới thành link gửi được. Hôm nay mặt bằng của ae là Railway.Where the app runs 24/7 for others. On your machine it's localhost, just you, off when you close it. Deploy to hosting and it becomes a link. Today your premises is Railway.app 24/7 运行、供别人访问的地方。在你机器上是 localhost,只有你,关机就没。部署到 hosting 才变成链接。今天你的铺面是 Railway。

Railway hôm naytoday今天

Nối GitHub là ra link, tự nhận Docker, có sẵn database. Hợp khi app cần cả server + kho.Connect GitHub and you get a link, it detects Docker, database built in. Good when the app needs a server + storeroom.连上 GitHub 就出链接,自动识别 Docker,自带数据库。当 app 需要服务器 + 仓库时很合适。

Vercel

Cùng vai "mặt bằng", mạnh cho web tĩnh và Next.js. Nhẹ, nhanh; còn phần server/kho thì hôm nay Railway tiện hơn.Same "premises" role, great for static sites and Next.js. Light and fast; for a server/storeroom, Railway is handier today.同样是"铺面",擅长静态站点和 Next.js。轻快;但服务器/仓库这块,今天用 Railway 更顺手。

chriskoh.dev07
Phần 2 · Máy khách & máy chủPart 2 · Client & server第二部分 · 客户端 & 服务器
Hai từ hay gặp nhấtThe two words you'll hear most最常听到的两个词

Nhiều máy khách,
một máy chủ.
Many clients,
one server.
多个客户端,
一个服务器。

Máy khách (client) là điện thoại/trình duyệt của từng người, cái mặt tiền. Máy chủ (server) là một máy chạy hoài ở đâu đó, phục vụ tất cả mọi người cùng lúc, cái bếp + cái kho.The client is each person's phone/browser, the storefront. The server is one always-on machine somewhere, serving everyone at once, the kitchen + storeroom.客户端是每个人的手机/浏览器,也就是店面。服务器是某处一台常开的机器,同时服务所有人,也就是后厨 + 仓库。

"Deploy" = mang cái bếp của ae đặt lên một máy chủ chạy 24/7. Đó là việc ae làm với Railway chiều nay."Deploy" = putting your kitchen onto an always-on server. That's what you'll do with Railway this afternoon.“部署” = 把你的后厨放到一台常开服务器上。这就是下午你用 Railway 做的事。
Ai cũng nối về một chỗEveryone connects to one place所有人连到同一处
Nhà hàng = một appA restaurant = an app餐厅 = 一个 app
chriskoh.dev08
Phần 2 · Hành trình một cú clickPart 2 · A click's journey第二部分 · 一次点击的旅程
Hiểu cái này là hiểu 80% một appGet this and you get 80% of any app懂这个就懂了 app 的 80%

Ae bấm một nút, chuyện gì xảy ra?You tap a button, what happens?你点一个按钮,发生了什么?

01
Ae bấmYou tap你点击
trên trình duyệt (client)in the browser (client)在浏览器(client)
02
Gửi yêu cầuSends a request发出请求
qua Internetover the Internet通过互联网
03
Server xử lýServer handles it服务器处理
cái "bếp"the "kitchen"那个"厨房"
04
Hỏi DatabaseAsks the database问数据库
lấy / lưu dữ liệuread / save data读 / 存数据
05
Trả về & vẽ raReturns & renders返回并显示
ae thấy kết quảyou see the result你看到结果

↩ Trả ngược lại theo đúng đường đó, tất cả trong ~tích tắc.↩ The answer travels back the same path, all in a blink.↩ 答案沿原路返回,全程一眨眼。

Mỗi lần bấm "lưu", "tải", "đăng nhập"… vòng này chạy. localhost là khi cái server đó chạy ngay trên máy ae; deploy là đưa nó lên mạng.Every "save", "load", "log in"… runs this loop. localhost is when that server runs on your own machine; deploy puts it online.每次"保存""加载""登录"……都跑这一圈。localhost 是那台服务器就跑在你机器上;deploy 是把它放上网。
Rối chỗ nào?Lost?晕了? Cứ theo mũi tên.Just follow the arrows.跟着箭头走。
chriskoh.dev11
Phần 2 · Cơ sở dữ liệuPart 2 · Database第二部分 · 数据库
Ae biết rồi, chỉ là tên khácYou already know this, different name你早就会,只是换了名字

Database là Excel có kỷ luật.A database is Excel with discipline.数据库就是有纪律的 Excel。

bảng dịch nghĩatranslation table对照表
Trong ExcelIn ExcelExcel 里Trong databaseIn a database数据库里
Một sheetA sheet一个 sheettable · bảngtable
CộtColumncolumn · trườngfield字段
DòngRowrow · bản ghirecord记录
Mã đơn duy nhấtA unique code唯一编号id · primary key
VLOOKUPforeign key
Filter + Pivotquery

Khác biệt thật nằm ở ba chỗThe real difference is three things真正的区别在三点

  • Không lặp lại. Lưu khách một lần, mọi đơn trỏ về. Đổi số điện thoại, sửa một chỗ.No repetition. Store a customer once, every order points back. Phone changes, fix one place.不重复。客户只存一次,所有订单指回来。改电话,只改一处。
  • Có luật. Cột giá chỉ nhận số. Không ai gõ nhầm "liên hệ shop" vào ô giá.Rules. A price column takes only numbers. Nobody types "call us" into it.有规则。价格列只收数字。没人能往里打“联系店家”。
  • Nhiều người cùng ghi. Hết cảnh bao-cao-final-v3.xlsx.Many writers. No more report-final-v3.xlsx.多人同时写。再没有 报告-final-v3.xlsx
AI hỏi "schema thế nào?" nghĩa là: sheet nào, cột nào, cái nào nối cái nào?"What schema?" from AI means: which sheets, which columns, what links to what?AI 问“schema 怎样?”意思是:哪些表、哪些列、谁连谁?
Sợ database?Scared of databases?怕数据库? Excel có kỷ luật thôi.Just Excel with discipline.有纪律的 Excel 而已。
chriskoh.dev09
Phần 2 · Database trông thế nàoPart 2 · What a database looks like第二部分 · 数据库长什么样
Nhìn một cái thật cho quen mắtSee a real one看一个真实的

Database = vài sheet Excel liên kết nhau.A database = a few linked Excel sheets.数据库 = 几张相互关联的 Excel 表。

Hình dung đơn giản: giống vài sheet Excel. Mỗi bảng là một sheet, hàng = một bản ghi, cột = một thuộc tính. Các bảng nối nhau qua id. Think a few Excel sheets. Each table is a sheet, a row = one record, a column = one attribute. Tables connect via an id. 简单想象:就像几张 Excel。每张是一个 sheet,一 = 一条记录,一 = 一个属性。表之间靠 id 连起来。

khach_id trong don_hang trỏ về id trong khach_hang. Đó là "liên kết". khach_id in don_hang points to id in khach_hang. That's the "link". don_hang 里的 khach_id 指向 khach_hang 里的 id。这就是"关联"。

Khác Excel ở chỗ: app tự đọc/ghi, nhiều người cùng lúc, dữ liệu không mất khi tắt máy. Unlike Excel: the app reads/writes automatically, many users at once, data persists after shutdown. 和 Excel 不同:app 自动读写、可多人同时用、关机后数据不丢

khach_hang
idtênname姓名email
1Anan@shop.vn
2Bìnhbinh@shop.vn
don_hang
idkhach_idtổng (đ)total金额
10011250.000
10022480.000

khach_id 1 → khách "An". Một liên kết là vậy.khach_id 1 → customer "An". That's a link.khach_id 1 → 客户 "An"。这就是一个关联。

Bảng nối nhau kiểu gì?How do tables link?表怎么连? Qua id, thế thôi.Through an id, that's it.靠 id,就这样。
chriskoh.dev13
Phần 2 · Tìm bảngPart 2 · Find your tables第二部分 · 找出你的表
Mẹo 3 phútA 3-minute trick3 分钟小技巧

Kể một câu.
Gạch chân danh từ.
Tell one sentence.
Underline the nouns.
讲一句话。
给名词划线。

Cách tìm bảng nhanh nhất mà không cần biết gì về database: kể một câu về app của ae, rồi gạch chân mọi danh từ chỉ vật. Mỗi danh từ gần như chắc chắn là một bảng.The fastest way to find your tables without knowing databases: say one sentence about your app, then underline every thing-noun. Each one is almost certainly a table.不懂数据库也能最快找出表:用一句话讲你的 app,然后把每个表示"东西"的名词划出来。每个几乎必定是一张表。

Một khách ngồi vào một bàn, quét QR chọn vài món, rồi gửi một đơn xuống bếp. A guest sits at a table, scans the QR to pick a few dishes, then sends one order to the kitchen. 一位客人坐到一张桌子,扫码点几道,然后发一个订单到后厨。

Ba danh từ → ba bảng. Xong bước khó nhất.Three nouns → three tables. The hardest step is done.三个名词 → 三张表。最难的一步搞定了。

Rồi hỏi: cái nào nhiều, cái nào một?Then ask: which is many, which is one?再问:哪个是多,哪个是一?

  • Một bàn có nhiều đơn, nhưng một đơn thuộc một bàn.One table has many orders, but one order belongs to one table.一张桌子有个订单,但一个订单只属于张桌子。
  • Một đơn có nhiều món.One order has many dishes.一个订单有道菜。
  • Một món nằm trong nhiều đơn khác nhau.One dish appears in many different orders.一道菜出现在个不同订单里。

Chỗ nào "nhiều... nhiều..." cả hai chiều thì cần một bảng nối ở giữa. Khỏi nhớ tên kỹ thuật, cứ tả bằng tiếng Việt, AI dựng đúng.Where it's "many... many..." both ways, you need a link table in between. No need for the technical name, just describe it plainly and AI builds it right.凡是两边都"多对多"的地方,中间就需要一张连接表。不用记术语,用大白话描述,AI 就建对。

Dán nguyên câu nàyPaste this exact prompt照这段贴给 AI
Đây là câu chuyện app của tôi: [dán đoạn trên]. Trước khi viết code: vẽ cho tôi schema database, liệt kê bảng, cột, kiểu dữ liệu và quan hệ giữa các bảng. Giải thích bằng tiếng Việt cho người không rành kỹ thuật. Chỉ ra 2 chỗ tôi dễ thiết kế sai. Chờ tôi duyệt rồi mới làm tiếp. Here's my app's story: [paste the sentence]. Before writing code: draw me the database schema, list tables, columns, data types and how the tables relate. Explain it in plain language for a non-technical person. Point out 2 places I'm likely to design wrong. Wait for my approval before continuing. 这是我 app 的故事:[粘贴上面那句]。写代码前:给我画出数据库 schema,列出表、列、数据类型以及表之间的关系。用大白话讲给不懂技术的人听。指出我 2 处容易设计错的地方。等我确认再继续。
Vậy là xong schema?That's the schema done?schema 就这样好了? Gần hết phần khó rồi.The hard part's mostly over.最难的基本过了。
chriskoh.dev14
Phần 2 · Từ điển bỏ túiPart 2 · Pocket glossary第二部分 · 口袋词典
Đủ để không đứng hìnhEnough to not freeze够用,不卡壳

14 từ. Đủ dùng cho cả ngày.14 words. Enough for the whole day.14 个词。够用一整天。

repocommitdeploylocalhostserverenv varAPI keyendpointschemalogpackagecontainerimageport

repo: thư mục chứa toàn bộ project. Trên GitHub.the folder holding your whole project. On GitHub.装整个项目的文件夹。在 GitHub 上。

commit: nút save game. Lưu một mốc để lỡ hỏng thì quay lại.a save point. Mark a spot to roll back to.存档点。存一个能回退的位置。

deploy: đẩy app lên mạng cho người khác vào.push the app online for others.把 app 推上网供别人访问。

localhost: bản chạy trên máy ae. Người khác không vào được.the version on your machine. Nobody else can reach it.在你机器上的版本。别人进不来。

server: máy chạy hoài, phục vụ mọi người.an always-on machine serving everyone.常开、服务所有人的机器。

env var: ngăn kéo cất mật khẩu, tách khỏi code.a drawer for secrets, kept out of code.放密钥的抽屉,跟代码分开。

API key: chìa khoá để app xài dịch vụ khác. Lộ = ae trả tiền.a key to use another service. Leaked = you pay.用别的服务的钥匙。泄露 = 你买单。

endpoint: một địa chỉ trong app để hỏi/gửi dữ liệu. /api/orders.an address in the app to fetch/send data. /api/orders.app 里取/发数据的地址。/api/orders

schema: bản vẽ cái kho: bảng nào, cột nào.the storeroom blueprint: which tables, columns.仓库蓝图:有哪些表、哪些列。

log: nhật ký app tự ghi. Khi hỏng, sự thật ở đây.the app's own diary. When it breaks, truth's here.app 自己的日记。出问题时,真相在这。

package: đồ người khác viết sẵn mình lắp vào. Càng ít càng dễ sống.prebuilt parts you plug in. Fewer = easier life.别人写好、你装上的零件。越少越好活。

container: cái hộp gói cả app + mọi thứ nó cần, chạy giống nhau ở mọi máy. Đó là Docker.a box packing the app + all it needs, running the same everywhere. That's Docker.把 app + 它需要的一切打包的盒子,在哪都一样跑。这就是 Docker。

image: "khuôn" để tạo ra container. Một khuôn, nhiều hộp giống hệt.the "mold" a container is made from. One mold, many identical boxes.造 container 的“模具”。一个模具,多个一模一样的盒子。

port: "cửa" số mà app mở ra để nghe. Hay gặp :3000.the numbered "door" the app listens on. Often :3000.app 监听的编号“门”。常见 :3000

Không thuộc cũng được. Nhưng khi AI nói "missing env var ANTHROPIC_API_KEY" mà ae hiểu "nó thiếu chìa khoá, dán vào ngăn kéo" thì ae tự gỡ, khỏi chờ.No need to memorize. But when AI says "missing env var ANTHROPIC_API_KEY" and you get "it needs a key, put it in the drawer", you unblock yourself.不用背。但当 AI 说 "missing env var ANTHROPIC_API_KEY",你懂“它缺钥匙,放进抽屉”,就能自己解围。

chriskoh.dev10
Phần 2 · AgentPart 2 · Agents第二部分 · Agent
Chatbot / trợ lý / agent khác nhau ở đâuChatbot / assistant / agent: the difference聊天机器人 / 助手 / agent 的区别

Agent = AI được cho tay chân.An agent = AI given hands.Agent = 给了手脚的 AI。

01

ChatbotChatbot聊天机器人

Ae hỏi, nó trả lời bằng chữ. Chỉ nói, không làm gì cả.You ask, it answers in text. Talks, does nothing.你问,它用文字答。只说,不做。

02

Trợ lýAssistant助手

Nói + làm được một hai việc ae bấm, trong khuôn khổ hẹp.Talks + does one or two things you trigger, in a narrow lane.会说 + 做一两件你触发的事,范围很窄。

03

AgentAgentAgent

Ae giao mục tiêu, nó tự chia bước, tự dùng công cụ (đọc file, chạy lệnh, sửa code), tự kiểm tra rồi lặp lại tới khi xong. Claude Code là một agent.You give a goal; it plans steps, uses tools (read files, run commands, edit code), checks itself and loops until done. Claude Code is an agent.你给目标,它自己拆步骤、用工具(读文件、跑命令、改代码)、自查并循环到完成。Claude Code 就是一个 agent。

Vì sao ae quan tâm: agent là thứ làm được cả một app từ một brief. Nhưng vì nó tự chạy nhiều bước, ae phải nghiệm thu chặt, đó là phần cuối buổi.Why it matters: an agent can build a whole app from one brief. But because it runs many steps on its own, you must review tightly, that's the last part of today.为何重要:agent 能从一个 brief 做出整个 app。但正因它自己跑很多步,你得严格验收,这是今天最后一部分。
Agent khác chatbot chỗ nào?Agent vs chatbot?agent 和聊天机器人差在哪? Nó tự làm nhiều bước.It runs many steps itself.它自己跑很多步。
chriskoh.dev11
Phần 2 · Vòng đời một appPart 2 · The app loop第二部分 · app 循环
Từ ý tưởng tới cái linkFrom idea to a link从想法到一个链接

Vòng lặp ae chạy cả chiều.The loop you'll run all afternoon.你整个下午都在跑的循环。

01
Brief
Mô tả, dán vào Claude CodeDescribe, paste to Claude Code描述,贴进 Claude Code
02
Chạy thửRun it试跑
Mở localhost, tự bấm như kháchOpen localhost, click like a user开 localhost,像用户一样点
03
SửaFix
Báo lỗi cụ thể, sửa từng cáiReport the exact error, one at a time报确切错误,一次一个
04
Lưu mốcSave point存档
Commit. Chạy được là lưuCommit. Works = saveCommit。能跑就存
05
Deploy
Lên Railway, ra linkTo Railway, get a link上 Railway,出链接

Vòng 1 phải xấuRound 1 must be ugly第一轮必须丑

Mục tiêu vòng đầu là chạy được, không phải đẹp.The first goal is it runs, not that it's pretty.第一目标是能跑,不是好看。

Deploy sớm, deploy nhiềuDeploy early, deploy often早部署,多部署

Deploy ngay khi có màn hình trắng chạy được, để lỗi hosting lộ sớm.Deploy the moment a blank screen runs, so hosting bugs surface early.一有能跑的白屏就部署,让 hosting 的坑早暴露。

Chạy được là commitWorks = commit能跑就 commit

20 phút sau AI phá hỏng, ae quay về mốc này mất 10 giây.20 min later AI breaks it; rolling back takes 10 seconds.20 分钟后 AI 弄坏了,回退只要 10 秒。

chriskoh.dev12
Phần 2 · Ví dụPart 2 · Worked example第二部分 · 实例
Ráp mọi thứ vừa học vào một app thậtEverything you just learned, in one real app把刚学的一切拼进一个真 app

Ví dụ: app gọi món tại bàn.Example: an order-at-table app.示例:桌边点餐 app。

01
Quét QRScan QR扫码
Khách mở web app trên điện thoại · clientGuest opens the web app on their phone · client客人在手机上打开 web app · client
02
Chọn mónPick dishes选菜
Xem menu, bỏ vài món vào giỏBrowse the menu, add a few dishes看菜单,加几道
03
Gửi đơnSend order发订单
server lưu vào databaseserver saves to the databaseserver 存进 database
04
Bếp thấy đơnKitchen sees it后厨看到
Màn hình bếp · endpoint /kitchenKitchen screen · endpoint /kitchen后厨屏 · endpoint /kitchen

Gạch chân danh từ ra bốn bảng cho cái kho:Underline the nouns and you get four tables for the storeroom:给名词划线,就得出仓库要的四张表

ban · bàn· table· 桌 mon · món· dish· 菜 don_hang · đơn· order· 订单 mon_trong_don · bảng nối· link table· 连接表
Vẫn đúng vòng client → server → database ae vừa học. Chỉ là giờ nó thành một app thật, có link gửi được.Same client → server → database loop you just learned. It's just a real app now, with a link you can share.还是你刚学的 client → server → database 那圈。只是现在成了真 app,有能发的链接。
chriskoh.dev15
Phần 2 · Prompt mẫuPart 2 · Sample prompt第二部分 · 示范 prompt
Chỉ cần nhắc tên, AI tự lo phần còn lạiJust name them, AI handles the rest点名即可,其余交给 AI

Một prompt, nhắc đủ keyword.One prompt, every keyword.一个 prompt,点齐关键词。

Ae không cần mô tả kỹ từng chi tiết. Cứ nhắc tới các từ đã học, AI tự dựng phần còn lại. Đây là prompt cho app gọi món ở slide trước:You don't need to spell out every detail. Just name the words you learned; AI fills in the rest. Here's the prompt for that order-at-table app:不用把每个细节写清楚。点到学过的词,AI 会补全其余。这是上一页那个点餐 app 的 prompt:

Tôi muốn build một web app đặt món tại quán ăn. Khách quét QR mở app trên điện thoại (client), xem menu, chọn món rồi bấm gửi. Đơn về server xử lý và lưu vào database. Có màn hình bếp riêng, một endpoint như /kitchen, hiện đơn mới.

Về database: tự thiết kế schema giúp tôi, gồm các bảng ban, mon, don_hang, mon_trong_don, nối bằng id và khoá ngoại. Vẽ ra cho tôi duyệt trước khi code.

Kỹ thuật: đóng gói bằng Docker, deploy lên Railway. Khoá bí mật (API key, mật khẩu DB) để trong env var, đừng lộ ra client. Chạy thử ở localhost cổng 3000. Chạy được là tôi commit.
I want to build a web app for ordering at a restaurant. A guest scans a QR to open it on their phone (client), views the menu, picks dishes and hits send. The order goes to the server and is saved in the database. There's a separate kitchen screen, an endpoint like /kitchen, showing new orders.

For the database: design the schema for me, with tables ban, mon, don_hang, mon_trong_don, linked by id and foreign keys. Draw it for me to approve before coding.

Tech: containerize with Docker, deploy to Railway. Secrets (API key, DB password) go in env var, never exposed to the client. Test on localhost port 3000. When it works, I commit.
我想做一个餐厅点餐 web app。客人扫码在手机上打开(client),看菜单、选然后点发送。订单发到 server 处理并存进 database。还有一个单独的后厨屏,一个像 /kitchenendpoint,显示新订单。

数据库方面:帮我设计 schema,包含 ban、mon、don_hang、mon_trong_don,用 id 和外键连接。写代码前先画出来给我确认。

技术:用 Docker 打包,deployRailway。密钥(API key、数据库密码)放 env var,别暴露给 client。在 localhost 端口 3000 试跑。能跑我就 commit

Một prompt này chạm tới: web app · client · server · database · endpoint · schema · Docker · deploy · Railway · env var · API key · localhost · port · commit. Đủ để AI dựng bản chạy được đầu tiên.This one prompt touches: web app · client · server · database · endpoint · schema · Docker · deploy · Railway · env var · API key · localhost · port · commit. Enough for AI to build a first working version.这一个 prompt 触及:web app · client · server · database · endpoint · schema · Docker · deploy · Railway · env var · API key · localhost · port · commit。足够让 AI 做出第一个能跑的版本。

chriskoh.dev16
Phần 3 · Thực hành tại chỗPart 3 · Hands-on第三部分 · 动手实操

Build & Setup.Build & Setup.搭建与准备。

Dựng máy, tạo GitHub, hiểu localhost vs Docker, nối Railway, và đẩy trang HTML đầu tiên lên link thật. Xong 6 bước này là ae có sân để build. Set up your machine, create GitHub, get localhost vs Docker, connect Railway, and ship your first HTML page to a live link. Clear these 6 and you have a field to build on. 装好机器、建 GitHub、搞懂 localhost vs Docker、连 Railway、把第一个 HTML 页面发到线上链接。过了这 6 步,你就有场地开做了。

Phần 3 · Bước 1 · Chỗ ae ngồiPart 3 · Step 1 · Where you sit第三部分 · 第 1 步 · 你坐的地方
Cài một lần, xài mãiInstall once, keep forever装一次,一直用

VS Code: bàn làm việc của ae.VS Code: your workbench.VS Code:你的工作台。

VS Code là một cái editor miễn phí của Microsoft, nơi mở project, xem file, và chạy Claude Code / Cursor ngay bên trong. Ae không gõ code; ae gõ prompt ở đây, AI thấy toàn bộ project và tự sửa nhiều file.VS Code is Microsoft's free editor, where you open the project, see files, and run Claude Code / Cursor right inside. You don't type code; you type prompts here, AI sees the whole project and edits many files.VS Code 是微软的免费编辑器,在这里打开项目、看文件,并直接内置运行 Claude Code / Cursor。你不打代码;你在这打 prompt,AI 看到整个项目、自动改多个文件。

Cursor là một bản VS Code đã gắn sẵn AI. Dùng cái nào cũng được, hôm nay bọn mình đi theo VS Code + Claude Code.Cursor is VS Code with AI baked in. Either works, today we go VS Code + Claude Code.Cursor 是内置了 AI 的 VS Code。用哪个都行,今天我们走 VS Code + Claude Code。

Làm tại chỗ · ~8 phútDo it now · ~8 min现场做 · 约 8 分钟

Tải VS CodeDownload VS Code下载 VS Code

code.visualstudio.com · chọn đúng máy Mac/Windows.pick Mac/Windows.选 Mac/Windows。

Mở Terminal tích hợpOpen the built-in Terminal打开内置终端

Ctrl/⌘ + ` · chỗ ae gõ lệnh, ngay trong cửa sổ.where you type commands, in-window.在窗口里打命令的地方。

Cài Claude CodeInstall Claude Code安装 Claude Code

Một lệnh dán vào terminal, mình chiếu lên màn hình.One command pasted in the terminal, I'll put it on screen.往终端里贴一条命令,我会投屏。

Đăng nhậpSign in登录

claude, đăng nhập bằng tài khoản. Xong.Type claude, sign in. Done.输入 claude,登录。完成。

VS Code để làm gì?What's VS Code for?VS Code 干嘛的? Bàn làm việc của ae.It's your workbench.你的工作台。
chriskoh.dev13
Phần 3 · Bước 2 · Nút save gamePart 3 · Step 2 · Your save game第三部分 · 第 2 步 · 存档
Tài khoản của riêng aeYour own account你自己的账号

GitHub: kho + lịch sử của app.GitHub: your app's home + history.GitHub:app 的家 + 历史。

GitHub là chỗ cất repo (thư mục project) trên mạng, kèm toàn bộ lịch sử commit. Hai lý do ae cần nó hôm nay: (1) mỗi lần chạy được thì lưu một mốc quay lại được; (2) Railway sẽ đọc thẳng từ GitHub, cứ push là tự lên link mới.GitHub stores your repo (project folder) online, with the full commit history. Two reasons you need it today: (1) each working state saved as a rollback point; (2) Railway reads straight from GitHub, every push auto-ships a new link.GitHub 把你的 repo(项目文件夹)存到线上,带完整 commit 历史。今天需要它有两个理由:(1) 每个能跑的状态存成可回退点;(2) Railway 直接从 GitHub 读,每次 push 自动上新链接。

Ae không cần học lệnh git. Bảo Claude Code "tạo repo, commit và push hộ tôi", nó làm.You don't learn git commands. Tell Claude Code "create the repo, commit and push for me", it does it.你不用学 git 命令。让 Claude Code "帮我建 repo、commit 并 push",它就做。

Làm tại chỗ · ~5 phútDo it now · ~5 min现场做 · 约 5 分钟

Tạo tài khoảnCreate an account建账号

github.com · một email, một username. Miễn phí.an email, a username. Free.一个邮箱、一个用户名。免费。

Xác minh emailVerify email验证邮箱

Bấm link trong mail để mở khoá tạo repo.Click the link in the mail to unlock repos.点邮件里的链接以解锁建 repo。

Repo đầu tiênFirst repo第一个 repo

Để Claude Code tạo, hoặc bấm New → đặt tên → Private.Let Claude Code make it, or click New → name → Private.让 Claude Code 建,或点 New → 命名 → Private

Giữ PrivateKeep it Private保持 Private

Public = ai cũng đọc code + key của ae. Buildathon để Private.Public = anyone reads your code + keys. Keep it Private.Public = 谁都能看你的代码 + 密钥。保持 Private。

Git khó không?Is git hard?git 难吗? Bảo AI push giùm.Tell AI to push for you.让 AI 帮你 push。
chriskoh.dev14
Phần 3 · Bước 3 · Hai từ dễ lẫn nhấtPart 3 · Step 3 · The most confusing pair第三部分 · 第 3 步 · 最易混的两个词
Làm rõ một lần cho xongClear it up once一次讲清

"Chạy trên máy tôi"
≠ "đã live".
"Runs on my machine"
≠ "it's live".
“在我电脑上跑”
≠ “已上线”。

localhost (thường localhost:3000) là app chạy trong máy ae, nhanh, tiện, nhưng chỉ mình ae mở được, tắt máy là tắt. Live là khi app đã deploy lên một server (Railway) và có một URL công khai ai cũng mở được, kể cả trên điện thoại.localhost (usually localhost:3000) is the app running inside your machine, fast, handy, but only you can open it, and it's off when the machine is off. Live is when the app is deployed to a server (Railway) with a public URL anyone can open, phone included.localhost(常见 localhost:3000)是 app 跑在你机器里,快、方便,但只有你能开,关机就没。Live 是 app 部署到服务器(Railway)、有一个谁都能开的公开 URL,手机也行。

Cạm bẫy kinh điển: chạy ngon ở localhost rồi deploy vỡ: thiếu env var, sai đường dẫn ảnh, DB chưa mở quyền. Vì vậy: deploy sớm.Classic trap: perfect on localhost, broken on deploy: missing env var, wrong image path, DB not opened. So: deploy early.经典坑:localhost 完美,部署就崩:缺 env var、图片路径错、数据库没开权限。所以:早部署。
localhost → deploy → livelocalhost → deploy → livelocalhost → 部署 → 上线
localhost với live khác gì?localhost vs live?localhost 和 live 差在哪? Riêng ae với ai cũng vào.Just you vs everyone.只有你 vs 谁都能进。
chriskoh.dev15
Phần 3 · Bước 4 · DockerPart 3 · Step 4 · Docker第三部分 · 第 4 步 · Docker
Nghe ghê, thật ra đơn giảnSounds scary, actually simple听着吓人,其实简单
Docker

Docker = xe tải
chở nguyên cái nhà hàng.
Docker = a truck that
hauls the whole restaurant.
Docker = 一辆
拉着整间餐厅的卡车。

Vấn đề muôn thuở: "máy tôi chạy được, máy anh thì không", vì hai máy cài đồ khác nhau. Docker gói app + đúng phiên bản mọi thứ nó cần vào một cái hộp (container). Cái hộp đó chạy giống hệt trên máy ae, máy mình, và trên Railway.The eternal bug: "works on my machine, not yours", because the two machines have different stuff installed. Docker packs the app + the exact versions of everything it needs into a box (container). That box runs identically on your machine, mine, and on Railway.永恒的 bug:“我这能跑,你那不行”,因为两台机器装的东西不同。Docker 把 app + 它需要的一切的确切版本 打包进一个盒子(container)。这盒子在你机器、我机器、Railway 上跑得一模一样。

Ae không cần viết Docker bằng tay. Bảo AI "đóng gói app bằng Docker để deploy lên Railway", nó tạo file giùm. Ae chỉ cần hiểu vì sao có nó.You won't write Docker by hand. Tell AI "containerize this with Docker for Railway", it writes the file. You just need to know why it's there.你不用手写 Docker。让 AI "用 Docker 打包好上 Railway",它会写文件。你只要懂它为什么存在。
Một thùng xe · tới đâu cũng y hệtOne truckload · identical everywhere一车装走 · 到哪都一样
Docker ghê không?Is Docker scary?Docker 吓人吗? Xe tải chở cả bếp thôi.Just a truck for the kitchen.只是拉后厨的卡车。
chriskoh.dev16
Phần 3 · Bước 5 · RailwayPart 3 · Step 5 · Railway第三部分 · 第 5 步 · Railway
Mặt bằng của app aeYour app's premises你 app 的铺面

Railway: nối GitHub, ra link.Railway: connect GitHub, get a link.Railway:连 GitHub,出链接。

Railway là chỗ app ae chạy 24/7. Cái hay: nó đọc thẳng repo GitHub của ae, tự nhận diện Docker, và mỗi lần ae push code là nó tự build và deploy lại. Không cần bê file đi đâu.Railway is where your app runs 24/7. The nice part: it reads your GitHub repo directly, detects Docker, and every time you push, it rebuilds and redeploys on its own. No moving files around.Railway 是你 app 24/7 运行的地方。妙处:它直接读你的 GitHub repo、识别 Docker,每次你 push,它就自动重建并重新部署。不用搬文件。

Key/mật khẩu không nằm trong code, dán vào phần Variables của Railway (đây là "env var"). Code đọc từ đó, không ai thấy.Keys/passwords do not live in code, paste them into Railway's Variables (these are "env vars"). Code reads them there, nobody sees them.密钥/密码放代码里,贴进 Railway 的 Variables(就是 “env var”)。代码从那读,没人看得到。

Nối trong 4 bướcConnect in 4 steps4 步连上

Đăng nhập bằng GitHubSign in with GitHub用 GitHub 登录

railway.app · một cú bấm, khỏi tạo mật khẩu mới.one click, no new password.一键,不用新密码。

New Project → Deploy from repoNew Project → Deploy from repoNew Project → 从 repo 部署

Chọn đúng repo ae vừa tạo.Pick the repo you just made.选你刚建的 repo。

Dán biến vào VariablesPaste into Variables贴进 Variables

API key, mật khẩu DB… để đây, không để trong code.API keys, DB passwords… here, not in code.API key、数据库密码……放这,别放代码。

Generate DomainGenerate DomainGenerate Domain

Bấm một cái là có URL công khai. Đó là link của ae.One click gives a public URL. That's your link.点一下就有公开 URL。那就是你的链接。

Sao ra được link?How do I get a link?怎么出链接? Nối GitHub, bấm Generate.Connect GitHub, hit Generate.连 GitHub,点 Generate。
chriskoh.dev17
Phần 3 · Bước 6 · Khoảnh khắc "nó live"Part 3 · Step 6 · The "it's live" moment第三部分 · 第 6 步 · “上线了”时刻
Trước khi build app thậtBefore the real app在做真 app 之前

Deploy một trang HTML.
Chỉ để thấy nó live.
Deploy one HTML page.
Just to see it live.
部署一个 HTML 页面。
就为看到它上线。

Trước khi lao vào app phức tạp, mỗi người đẩy một trang HTML "Hello Hà Nội" lên Railway. Mục tiêu không phải nội dung, mà là chạy trọn một vòng deploy để lỡ có trục trặc thì lộ ra ngay, lúc còn dễ sửa.Before diving into a complex app, everyone ships one "Hello Hà Nội" HTML page to Railway. The point isn't the content, it's running one full deploy loop so any snag surfaces now, while it's easy to fix.在扎进复杂 app 之前,每人先把一个 “Hello 河内” 的 HTML 页面推到 Railway。重点不是内容,而是跑完一整个部署循环,让任何小坑现在就暴露、趁好修。

Khi ae mở URL đó trên điện thoại và thấy dòng chữ của mình, ae vừa hiểu trọn quy trình. Phần còn lại của ngày chỉ là lặp lại vòng này với app xịn hơn.When you open that URL on your phone and see your own text, you've grasped the whole pipeline. The rest of the day just repeats this loop with a richer app.当你在手机上打开那个 URL、看到自己写的字,你就吃透了整条流程。剩下的一天只是用更强的 app 重复这个循环。
Dán nguyên câu này vào Claude CodePaste this into Claude Code把这句贴进 Claude Code
Tạo một project web tối giản: một file index.html in ra "Hello Hà Nội 👋" với chút CSS cho đẹp. Thêm Dockerfile để chạy được trên Railway. Rồi tạo repo GitHub, commit và push giúp tôi. Cuối cùng chỉ tôi từng bước bấm gì trên Railway để nó live. Giải thích bằng tiếng Việt, chưa rõ thì hỏi.Create a minimal web project: one index.html printing "Hello Hà Nội 👋" with a little CSS. Add a Dockerfile so it runs on Railway. Then create a GitHub repo, commit and push for me. Finally, walk me click-by-click through Railway to make it live. Explain in plain terms, ask if unsure.建一个极简 web 项目:一个 index.html 打印 "Hello 河内 👋",加点 CSS。加一个 Dockerfile 让它能在 Railway 跑。然后建 GitHub repo、commit 并 push。最后一步步教我在 Railway 上点什么让它上线。用大白话讲,不确定就问。

Một prompt này chạm vào cả 5 thứ ae vừa học: repo, commit, Docker, Railway, live. Đó là lý do bọn mình bắt đầu từ đây.This one prompt touches all 5 things you just learned: repo, commit, Docker, Railway, live. That's why we start here.这一个 prompt 触及你刚学的 5 样:repo、commit、Docker、Railway、上线。所以我们从这开始。

Deploy trang trắng chi?Why deploy a blank page?为啥先部署空白页? Để lỗi lộ sớm.So bugs show up early.让坑早点冒出来。
chriskoh.dev18
Phần 3 · Luật vàng khi buildPart 3 · The golden rule第三部分 · 黄金法则
Cách không bị lạc lúc buildHow not to get lost怎样不迷路

Một prompt.
Một việc.
Một lần commit.
One prompt.
One thing.
One commit.
一个 prompt。
一件事。
一次 commit。

Prompt càng dài, càng nhiều tính năng nhét chung, thì lúc hỏng ae càng không biết hỏng ở đâu. Cắt nhỏ. Mỗi việc chạy được thì commit ngay, đó là nút save game.The longer the prompt and the more features crammed in, the less you know where it broke. Cut small. Each working thing → commit right away, that's the save point.prompt 越长、塞的功能越多,坏了越不知道坏在哪。切小。每个能跑的东西 → 立刻 commit,那就是存档。

Team nào cuối buổi nói "nãy nó chạy được mà giờ hỏng rồi", 100% là team không commit.Any team that says "it worked earlier, broken now", 100% didn't commit.凡是说“刚才还能跑现在坏了”的组,100% 没 commit。
Năm lần, mỗi lần một mốcFive times, one save each五次,每次一个存档
  • Trang chính đọc dữ liệu → chạy → commitMain page reads data → runs → commit主页读数据 → 跑 → commit
  • Ô lọc/tìm kiếm → chạy → commitFilter/search → runs → commit筛选/搜索 → 跑 → commit
  • Đăng nhập → chạy → commitLogin → runs → commit登录 → 跑 → commit
  • Gọi AI làm một việc → chạy → commitOne AI call → runs → commit一次 AI 调用 → 跑 → commit
  • Deploy lại lên Railway → commitRedeploy to Railway → commit重新部署到 Railway → commit

Hết giờ ở bước 4? Ae vẫn có app chạy được để demo. Đó mới là điều quan trọng.Out of time at step 4? You still have a working app to demo. That's what matters.第 4 步就没时间了?你仍有能跑的 app 可演示。这才重要。

Commit chi cho mệt?Why bother committing?干嘛老 commit? Nút save game đó.It's your save point.那是你的存档点。
chriskoh.dev19
Phần 3 · Đọc kỹ chỗ nàyPart 3 · Read this carefully第三部分 · 仔细看这
AI sẽ không tự nhắc aeAI won't warn youAI 不会提醒你

Ba thứ làm mất tiền.Three things that leak money.三件会漏钱的事。

Không phải lỗi kỹ thuật. Là lỗi vận hành, người trả giá là ae, không phải AI.Not technical bugs. Operational ones. You pay, not the AI.不是技术 bug。是运营失误,买单的是你,不是 AI。

Trước khi demo, hỏi AI đúng một câu: "Có key hay mật khẩu nào đang nằm trong code không? Liệt kê hết."Before demo, ask AI one line: "Any keys or passwords sitting in the code? List them all."演示前,问 AI 一句:"有没有密钥或密码留在代码里?全列出来。"
1 · API key nằm trong code1 · API key in the code1 · API key 留在代码里
AI hay nhét thẳng key vào file. Push lên GitHub là bot quét ra trong vài phút, hoá đơn về tên ae. Key phải nằm trong Variables của Railway.AI loves inlining keys. Push to GitHub and bots find them in minutes; the bill is yours. Keys belong in Railway Variables.AI 爱把 key 直接写进文件。推到 GitHub,几分钟就被 bot 扫到,账单算你的。key 该放 Railway Variables。
2 · Gọi AI từ phía trình duyệt2 · Calling AI from the browser2 · 从浏览器调用 AI
Nếu app gọi Claude ngay từ mặt tiền, key hiện ra cho ai cũng thấy. Mọi cuộc gọi AI phải đi qua bếp (server). Câu chốt: "gọi API phía server, không lộ key ra client."If the app calls Claude from the storefront, the key is visible to everyone. All AI calls go through the kitchen (server). Say: "call the API server-side, never expose the key to the client."若 app 从店面直接调 Claude,key 谁都看得到。所有 AI 调用都要走后厨(服务器)。就说:"在服务器端调 API,别把 key 暴露给 client。"
3 · Nhầm "chạy máy tôi" với "đã live"3 · "runs on mine" ≠ "live"3 · 把“我这能跑”当“已上线”
Chạy ngon localhost rồi deploy vỡ là chuyện thường. Vì vậy mới có luật deploy sớm.Perfect on localhost, broken on deploy is routine. Hence: deploy early.localhost 完美、部署就崩很常见。所以要早部署。
Sai thì ai chịu?Who pays for mistakes?出错谁买单? Ae, không phải AI.You, not the AI.你,不是 AI。
chriskoh.dev20
Phần 3 · Nghiệm thu không cần đọc codePart 3 · Review without reading code第三部分 · 不看代码也能验收
Làm sao biết AI hiểu đúng ýHow to know AI got it right怎么知道 AI 理解对了

Đừng đọc code. Bắt nó chứng minh.Don't read code. Make it prove it.别读代码。让它证明。

Chiêu 01 · Nói lạiMove 01 · Say it back招 01 · 复述

"Nhắc lại yêu cầu của tôi bằng lời của bạn, đừng viết code.""Repeat my request in your own words, no code yet.""用你的话复述我的需求,先别写代码。"

Nó tóm tắt trật là ae vừa tiết kiệm 20 phút sửa. Chiêu rẻ nhất, hiệu quả nhất.If the summary's off, you just saved 20 min. Cheapest, most effective.总结跑偏,你就省了 20 分钟。最便宜、最有效。

Chiêu 02 · Lộ giả địnhMove 02 · Expose assumptions招 02 · 暴露假设

"Liệt kê 3 điều bạn đang tự giả định mà tôi chưa nói.""List 3 things you're assuming that I didn't say.""列出 3 个我没说、你却在假设的点。"

Chỗ nguy hiểm nhất là chỗ AI đoán thầm rồi làm luôn. Câu này lôi ra ánh sáng.The danger is where AI guesses silently and builds. This drags it into the light.最危险的是 AI 默默猜了就做。这句把它拽到明处。

Chiêu 03 · Kế hoạch trướcMove 03 · Plan first招 03 · 先给计划

"Cho tôi kế hoạch từng bước + file sẽ đụng. Chờ tôi duyệt.""Give me a step plan + files you'll touch. Wait for my OK.""给我分步计划 + 会动的文件。等我确认。"

Kế hoạch nói "sửa 14 file" cho một cái nút thì có gì sai. Duyệt kế hoạch dễ hơn duyệt code."14 files" for one button means something's wrong. Reviewing a plan beats reviewing code.一个按钮要“改 14 个文件”就有问题。审计划比审代码容易。

Chiêu 04 · Tự chạy thửMove 04 · Self-test招 04 · 自测

"Tự chạy thử luồng và dán kết quả thật, đừng đoán.""Run the flow yourself and paste real results, don't guess.""自己跑一遍并贴真实结果,别猜。"

Claude Code chạy được thật. Bắt nó test rồi báo cáo, thay vì tin lời "đã xong!".Claude Code can actually run things. Make it test and report, don't trust "done!".Claude Code 能真跑。让它测完再汇报,别信“搞定了!”。

Bốn câu này tốn 3 phút. Không xài thì mỗi lần hiểu nhầm tốn 30 phút. Toán này ae tự tính được.These four cost 3 minutes. Skip them and each misread costs 30. Do the math.这四句花 3 分钟。不用,每次误解花 30 分钟。这账你自己会算。
chriskoh.dev21
Sẵn sàng · Làm trước khi tớiReady · Do before you come准备 · 来之前做
Tới nơi là build, không ngồi cài đặtArrive ready to build, not to install到场就能做,不用坐着装

Checklist trước Buildathon.Pre-Buildathon checklist.Buildathon 前清单。

Tài khoảnAccounts账号

  • VS Code đã cài, Claude Code đã đăng nhậpVS Code installed, Claude Code signed in装好 VS Code,登录 Claude Code
  • GitHub: có tài khoản, đã xác minh emailGitHub: account made, email verifiedGitHub:建好账号,验证邮箱
  • Railway: đăng nhập bằng GitHub sẵnRailway: signed in via GitHubRailway:用 GitHub 登录好
  • Docker Desktop đã cài (mình hướng dẫn được)Docker Desktop installed (I can help)装好 Docker Desktop(我能帮)

Bốn cái này làm tại chỗ là mất 45 phút của team.Doing these on site burns 45 min.这四样现场做要耗 45 分钟。

Máy mócGear装备

  • Laptop sạc đầy + cục sạc (ưu tiên MacBook)Charged laptop + charger (MacBook ideal)充满电的笔记本 + 充电器(最好 MacBook)
  • Node.js đã cài (AI hướng dẫn được)Node.js installed (AI can guide)装好 Node.js(AI 能带)
  • Trình duyệt ChromeChrome browserChrome 浏览器
  • 4G dự phòng: wifi hội trường luôn là wifi hội trườngBackup 4G: venue wifi is venue wifi备用 4G:会场 wifi 就是会场 wifi

Nội dungContent内容

  • Một bài toán thật: tấm sticky ở Phần 1A real problem: your Part 1 sticky一个真实问题:你第一部分的便签
  • Dữ liệu mẫu thật: ~20 dòng CSV của shop aeReal sample data: ~20 CSV rows from your shop真实样本数据:你店铺约 20 行 CSV
  • Ảnh, logo, tên brand để trong một thư mụcImages, logo, brand name in one folder图片、logo、品牌名放一个文件夹

Data thật làm bài demo của ae khác hẳn phần còn lại.Real data makes your demo stand out.真实数据让你的 demo 与众不同。

chriskoh.dev22
ChốtClose收尾
CK ShopX · GemLabs

Ae không cần biết code.
Ae cần biết mình muốn gì.
You don't need to code.
You need to know what you want.
你不用会写代码。
你要知道自己想要什么。

Mười năm qua, thứ ngăn ae tự làm phần mềm là cú pháp. Cái đó vừa hết giá trị. Thứ còn giá trị (hiểu khách, biết chỗ nào đang chảy máu trong shop, biết cái gì đáng làm) thì ae có sẵn, AI không có.For ten years, syntax kept you from building software. That just lost its value. What still has value (knowing your customers, where your shop bleeds, what's worth doing) you already have; AI doesn't.十年来,挡着你自己做软件的是语法。它刚刚失去价值。仍有价值的(懂客户、知道店里哪在流血、什么值得做)你早就有,AI 没有。

Mang về đúng ba thứTake home exactly three things带走三样东西

  • Một app trên link Railway, mở được trên điện thoại.An app on a Railway link, opens on your phone.一个在 Railway 链接上的 app,手机能开。
  • Một bộ setup còn xài mãi: VS Code, GitHub, Docker, Railway.A setup you keep: VS Code, GitHub, Docker, Railway.一套一直能用的环境:VS Code、GitHub、Docker、Railway。
  • Thói quen hỏi lại: "nhắc lại xem bạn hiểu gì?"The habit of asking: "say back what you understood?"复问的习惯:"复述一下你理解了什么?"
Brief rõ → app chạyClear brief → app runsbrief 清晰 → app 跑起来
chriskoh.devGemLabs · Hà Nội Buildathon · 04