Bản đồ công trìnhTờ này lắp: Giao diện app, API
Bài nàyĐã họcChưa tớiĐã thay thế
Bạn sẽ học được gì
Tiêu chí nghiệm thu
Vì sao chủ doanh nghiệp cần biết chuyện này
Khi chị Lan bắt đầu hỏi quanh, mỗi người tư vấn một kiểu. Một bạn freelancer bảo “làm bằng PHP Laravel, rẻ”. Một công ty phần mềm đề xuất “Java Spring cho chắc”. Người cháu học IT khuyên “Flutter, viết một lần chạy cả iPhone lẫn Android”. Một video trên mạng nói “giờ có AI, ngôn ngữ nào cũng được”.
Câu cuối chỉ đúng một nửa. Đúng là AI viết được nhiều ngôn ngữ. Nhưng lựa chọn công nghệ quyết định ai có thể bảo trì sản phẩm sau này, AI làm việc tốt đến đâu, chi phí vận hành, và bạn tuyển được người hay không. Bạn không cần thành thạo ngôn ngữ nào, nhưng cần đủ hiểu để đặt câu hỏi đúng và không bị dắt mũi bởi những từ nghe “kêu”.
Ngôn ngữ, thư viện, framework: ba tầng trong căn bếp
Hãy hình dung việc mở một tiệm bánh mới.
Ngôn ngữ lập trình (programming language) giống ngôn ngữ dùng để viết công thức: tiếng Việt, tiếng Anh, tiếng Pháp. Cùng một chiếc bánh có thể viết công thức bằng nhiều thứ tiếng; mỗi thứ tiếng có từ vựng, ngữ pháp và “văn hóa” riêng. TypeScript, Python, Go, PHP, Swift là các ngôn ngữ.
Thư viện (library) giống dụng cụ mua sẵn: máy đánh trứng, khuôn bánh, cân điện tử. Bạn chủ động lấy ra dùng khi cần, dùng xong cất đi. Bạn quyết định quy trình, dụng cụ chỉ phục vụ. Ví dụ trong dự án Bánh Mộc: Zod (kiểm tra dữ liệu), Drizzle ORM (làm việc với database), thư viện xử lý ngày giờ.
Framework (khung làm việc) giống một căn bếp được thiết kế sẵn theo chuẩn của một chuỗi nhượng quyền: khu sơ chế ở đây, lò nướng ở kia, quy trình nhận phiếu order theo mẫu cố định. Bạn không tự quyết bố cục; bạn đặt công việc của mình vào đúng chỗ framework quy định, và framework gọi bạn khi tới lượt. Next.js là một framework: bạn đặt file trang vào thư mục app/, Next.js tự biết khi nào hiển thị trang đó.
Câu tóm tắt dễ nhớ mà giới lập trình hay dùng: “Bạn gọi thư viện; framework gọi bạn.“
Còn một khái niệm nữa hay gặp: runtime (môi trường chạy) là thứ trực tiếp chạy code, giống điện và gas để căn bếp hoạt động. Code JavaScript/TypeScript có thể chạy trong trình duyệt (runtime có sẵn trong Chrome, Safari) hoặc trên server qua Node.js (các runtime khác như Bun, Deno cũng tồn tại). Khi agent nói “cần cài Node.js”, nghĩa là cần lắp đường điện cho căn bếp.
| Khái niệm | Ẩn dụ | Ai nắm quyền điều khiển | Ví dụ trong stack Bánh Mộc |
|---|---|---|---|
| Ngôn ngữ | Thứ tiếng viết công thức | Bạn | TypeScript, SQL |
| Thư viện | Dụng cụ mua sẵn | Bạn gọi khi cần | Zod, Drizzle ORM, React |
| Framework | Căn bếp thiết kế sẵn | Framework gọi code của bạn | Next.js, Tailwind CSS (framework cho phần trang trí) |
| Runtime | Điện, gas cho bếp chạy | Môi trường thực thi | Trình duyệt, Node.js |
| Dịch vụ nền tảng | Thuê mặt bằng có sẵn kho, bảo vệ | Nhà cung cấp | Vercel (hosting), Supabase (database, đăng nhập) |
Vì sao framework quan trọng khi làm với AI
Framework mang theo quy ước (convention): file này đặt ở đây, tên thế này, làm theo trình tự này. Với AI, quy ước là một món quà: thay vì phải đoán bạn muốn tổ chức code ra sao, agent làm theo cách hàng triệu dự án khác đã làm. Code sinh ra đồng đều hơn, người khác (hoặc agent khác) tiếp nhận dễ hơn.
Mặt trái: nếu framework có nhiều phiên bản với quy ước khác nhau, AI có thể trộn lẫn chúng. Ví dụ quen thuộc: Next.js có hai cách tổ chức là Pages Router (thư mục pages/, cách cũ) và App Router (thư mục app/, cách mới hơn). AI học từ code của cả hai thời kỳ nên đôi khi viết code kiểu cũ vào dự án kiểu mới. Cách phòng tránh sẽ có ở phần sau.
Bản đồ ngôn ngữ theo loại sản phẩm
Không có ngôn ngữ “tốt nhất”, chỉ có ngôn ngữ phù hợp với loại sản phẩm. Sơ đồ dưới đây là bản đồ đơn giản hóa tại thời điểm viết (2026):
- Bạn muốn làm gì?
- Ứng dụng web
- App điện thoại
- Phân tích dữ liệu, AI, tự động hóa
- Hệ thống hiệu năng cao, hạ tầng
Xem sơ đồ gốc (Hình 1)
Vuốt ngang để xem hết sơ đồ
Đọc sơ đồ dạng chữ
- Bạn muốn làm gì? → Ứng dụng web
- Bạn muốn làm gì? → App điện thoại
- Bạn muốn làm gì? → Phân tích dữ liệu, AI, tự động hóa
- Bạn muốn làm gì? → Hệ thống hiệu năng cao, hạ tầng
- Ứng dụng web → Giao diện trên trình duyệt: JavaScript / TypeScript (bắt buộc) React, Vue, Svelte, Angular
- Ứng dụng web → Phía server: TypeScript (Node.js), Python, PHP, Go, Java/Kotlin, C#, Ruby
- App điện thoại → Bản địa: Swift (iOS), Kotlin (Android)
- App điện thoại → Đa nền tảng: React Native (TypeScript), Flutter (Dart)
- Phân tích dữ liệu, AI, tự động hóa → Python, SQL
- Hệ thống hiệu năng cao, hạ tầng → Go, Rust, C/C++, Java
Web
- Giao diện trên trình duyệt: JavaScript là ngôn ngữ duy nhất trình duyệt chạy trực tiếp (bên cạnh công nghệ chuyên biệt WebAssembly), nên mọi frontend cuối cùng đều thành JavaScript. TypeScript được “dịch” sang JavaScript trước khi chạy. Các thư viện/framework giao diện phổ biến: React, Vue, Svelte, Angular.
- Phía server: lựa chọn rộng hơn nhiều. TypeScript trên Node.js (Next.js, Express, NestJS…), Python (Django, FastAPI), PHP (Laravel; WordPress cũng viết bằng PHP và rất phổ biến tại Việt Nam cho website nội dung), Go, Java/Kotlin (Spring), C# (.NET), Ruby (Rails).
Mobile
- Bản địa (native): Swift cho iPhone, Kotlin cho Android. Trải nghiệm tốt nhất, nhưng phải làm hai lần.
- Đa nền tảng (cross-platform): React Native (viết bằng TypeScript, gần với stack web) và Flutter (ngôn ngữ Dart). Viết một lần, chạy cả hai hệ.
- Với nhiều doanh nghiệp nhỏ, một website tốt trên điện thoại (có thể cài lên màn hình chính như app, gọi là PWA) là đủ cho giai đoạn đầu. Bài Responsive, mobile-first và PWA05-04 bàn kỹ hơn.
Dữ liệu và AI
- Python là ngôn ngữ thống trị trong phân tích dữ liệu, học máy và nghiên cứu AI, nhờ hệ sinh thái thư viện khổng lồ.
- SQL là ngôn ngữ truy vấn database, gần như ai làm phần mềm cũng gặp.
- Lưu ý: dùng AI trong sản phẩm (gọi API của mô hình ngôn ngữ để trích xuất đơn hàng từ tin nhắn Zalo) không bắt buộc phải dùng Python. Các nhà cung cấp mô hình lớn đều có SDK chính thức cho TypeScript. Module 12 sẽ làm điều này ngay trong Mộc OMS.
Hệ thống và hạ tầng
- Go, Rust, C/C++: dùng khi cần hiệu năng rất cao, công cụ hạ tầng, phần mềm nhúng. Doanh nghiệp nhỏ hiếm khi cần ở giai đoạn đầu.
Ngôn ngữ biên dịch và thông dịch: một ghi chú ngắn
Bạn có thể nghe “ngôn ngữ biên dịch” (compiled) và “ngôn ngữ thông dịch” (interpreted). Ẩn dụ: biên dịch giống dịch trọn cuốn công thức sang tiếng của thợ trước khi giao; thông dịch giống có người phiên dịch đứng cạnh dịch từng dòng khi thợ làm. Trong thực tế, ranh giới đã mờ và bạn hiếm khi phải quan tâm. Điều đáng nhớ: TypeScript có một bước “build” để kiểm tra kiểu và chuyển thành JavaScript. Khi agent báo “build failed”, nghĩa là bước chuẩn bị này gặp lỗi, thường do lỗi kiểu hoặc cú pháp, và sản phẩm chưa thể chạy.
AI “quen tay” với hệ sinh thái nào?
Mô hình AI học từ lượng rất lớn code và tài liệu công khai. Từ đó suy ra vài nguyên tắc định tính (không có con số chính xác, và mức độ thay đổi theo từng mô hình):
- Hệ sinh thái càng phổ biến, AI càng quen. JavaScript/TypeScript và Python có lượng code công khai, câu hỏi, hướng dẫn rất lớn. AI thường viết code cho chúng trôi chảy và ít “bịa” hơn so với ngôn ngữ hay framework ít người dùng.
- Quy ước rõ ràng giúp AI làm đúng. Framework có cấu trúc thư mục và cách làm chuẩn (Next.js, Laravel, Django, Rails) giúp agent đoán đúng nơi đặt code.
- Kiểu dữ liệu tĩnh cho AI vòng phản hồi. Với TypeScript, agent viết xong có thể chạy kiểm tra kiểu và tự phát hiện lỗi trước khi bạn thấy. Đây là lợi thế thật, như bạn đã thấy ở bài Đọc hiểu code cơ bản01-04.
- Phiên bản mới là vùng mù. Mô hình có ngày cắt kiến thức (knowledge cutoff); phiên bản thư viện ra sau ngày đó, AI có thể chưa biết, hoặc trộn cách viết cũ và mới. Bài LLM hoạt động thế nào02-01 giải thích kỹ hơn.
Tiêu chí chọn công nghệ cho doanh nghiệp nhỏ
Một doanh nghiệp nhỏ không phải Google. Bạn không cần công nghệ “chịu được trăm triệu người dùng”; bạn cần thứ chạy ổn định, dễ bảo trì, tìm được người hỗ trợ. Bảy câu hỏi nên đặt cho mọi lựa chọn:
- Có phổ biến không? Nhiều người dùng nghĩa là nhiều tài liệu, nhiều câu trả lời trên mạng, AI quen tay, dễ tuyển người.
- Có ổn định không? Công nghệ đã qua nhiều năm sử dụng thực tế an toàn hơn công nghệ “hot” vừa ra mắt.
- Một ngôn ngữ cho nhiều tầng được không? Ít ngôn ngữ hơn nghĩa là ít thứ phải học, ít chỗ AI nhầm lẫn.
- Triển khai và vận hành có dễ không? Có nền tảng hosting đưa lên mạng trong vài cú bấm không?
- Chi phí tổng thể ra sao? Không chỉ chi phí viết, mà cả hosting, bảo trì, nhân sự nhiều năm.
- Có dễ thoát không? Nếu nhà cung cấp tăng giá hay đóng cửa, bạn chuyển đi được không?
- Hệ sinh thái tích hợp có đủ không? Có thư viện, SDK cho thanh toán, gửi email, thông báo mà bạn cần?
Đây chính là tinh thần “công nghệ đơn giản, phổ biến thắng công nghệ hot” của chuỗi bài. Bài Chọn tech stack04-06 ở module 4 sẽ đi sâu vào quy trình ra quyết định và ghi lại lý do.
So sánh vài phương án cho Mộc OMS
Bảng dưới đây so sánh định tính các phương án chị Lan được tư vấn. Không có phương án “sai”; mỗi cái hợp một hoàn cảnh.
| Tiêu chí | Next.js + TypeScript + Supabase | Laravel (PHP) + MySQL | Django (Python) + PostgreSQL | Nền tảng no-code |
|---|---|---|---|---|
| Một ngôn ngữ cho cả frontend và backend | ✅ | ❌ (giao diện tương tác thường cần thêm JavaScript) | ❌ (giao diện tương tác thường cần thêm JavaScript) | Không áp dụng |
| AI quen tay | ✅ Rất phổ biến | ✅ Phổ biến | ✅ Phổ biến | Hạn chế, tùy nền tảng |
| Kiểm tra kiểu giúp agent tự phát hiện lỗi | ✅ | Một phần | Một phần (có gợi ý kiểu tùy chọn) | ❌ |
| Hosting dễ cho người mới | ✅ (Vercel, nhiều nền tảng khác) | ✅ (nhiều hosting phổ biến) | Trung bình | ✅ Có sẵn |
| Tùy biến theo quy trình riêng của tiệm | ✅ | ✅ | ✅ | Hạn chế khi quy trình phức tạp |
| Tìm người hỗ trợ tại Việt Nam | ✅ | ✅ | ✅ | Tùy nền tảng |
| Sẵn sàng mở rộng thành SaaS (giai đoạn 4) | ✅ | ✅ | ✅ | Khó |
Nếu bạn còn phân vân giữa tự xây, mua phần mềm có sẵn hay dùng no-code, bài Tự xây, đi mua hay dùng no-code?03-03 sẽ giúp ra quyết định đó trước khi chọn ngôn ngữ.
Vì sao chuỗi bài chọn TypeScript + Next.js
Tóm lại các lý do, cũng chính là lý do Bánh Mộc chọn:
- Một ngôn ngữ từ đầu đến cuối: TypeScript dùng cho giao diện, backend, test, script. Chị Lan chỉ cần làm quen một thứ tiếng; agent không phải chuyển ngữ cảnh.
- Kiểu dữ liệu bắt lỗi sớm: agent tự kiểm tra, bạn đọc được lỗi.
- Hệ sinh thái lớn nhất của web: gần như dịch vụ nào cũng có SDK cho TypeScript, từ Supabase tới các nhà cung cấp mô hình AI.
- Next.js gộp frontend và backend (như bài Frontend, backend, database01-03 đã giải thích), một dự án duy nhất, triển khai đơn giản.
- AI quen tay: phổ biến, nhiều tài liệu, quy ước rõ.
- Lộ trình mở rộng: từ công cụ nội bộ tới SaaS mà không phải viết lại.
Và những điểm cần dè chừng, nói thẳng:
- Next.js thay đổi khá nhanh giữa các phiên bản; cần ghi rõ phiên bản và cách làm trong file hướng dẫn agent.
- Ranh giới server/trình duyệt trong Next.js dễ nhầm, cần review kỹ.
- Hệ sinh thái JavaScript có rất nhiều gói phụ thuộc, kéo theo rủi ro chuỗi cung ứng (sẽ bàn ở bài An toàn chuỗi cung ứng phần mềm09-05).
Áp dụng vào dự án Bánh Mộc
Nhật ký công trình · Bánh Mộc
BM-261012-011
12.10.2026
- Chị LanChủ chuỗi
Chị Lan ngồi lại với ba lời tư vấn ban đầu và đi qua bảy câu hỏi tiêu chí. Chị ghi lại quyết định thành một đoạn ngắn, dự định sau này đưa vào thư mục docs/adr/ (nơi lưu các quyết định kiến trúc, sẽ học ở module 4):
# Quyết định: Ngôn ngữ và framework cho Mộc OMS
## Bối cảnh
- Chủ dự án không chuyên lập trình, làm việc chủ yếu cùng coding agent.
- Cần web dùng tốt trên điện thoại cho nhân viên 3 chi nhánh; chưa cần app trên kho ứng dụng.
- Có kế hoạch mở rộng thành phần mềm bán cho tiệm khác trong 1-2 năm.
## Quyết định
- Ngôn ngữ: TypeScript cho toàn bộ dự án.
- Framework: Next.js (App Router), React, Tailwind CSS + shadcn/ui.
- Database và đăng nhập: Supabase (PostgreSQL).
## Lý do
- Một ngôn ngữ cho mọi tầng; kiểm tra kiểu giúp agent tự phát hiện lỗi.
- Phổ biến, nhiều tài liệu, AI quen tay; dễ tìm freelancer hỗ trợ.
- Triển khai đơn giản; đủ khả năng mở rộng.
## Đánh đổi chấp nhận
- Next.js thay đổi nhanh: ghi phiên bản trong AGENTS.md, yêu cầu agent đọc tài liệu chính thức.
- Không có app native: dùng web responsive, cân nhắc PWA sau.Chị gửi đoạn này cho bạn freelancer từng tư vấn Laravel để xin góp ý. Bạn ấy đồng ý rằng cả hai lựa chọn đều làm được, và chỉ ra một điểm chị chưa nghĩ tới: cần chắc chắn có người hỗ trợ khi agent “bí”. Chị thêm một dòng vào kế hoạch: tìm một lập trình viên TypeScript làm cố vấn theo giờ khi cần. (Bài Khi nào cần kỹ sư chuyên nghiệp13-07 bàn kỹ chuyện này.)
Prompt mẫu
Điền ô trống rồi sao chép
Tôi là chủ doanh nghiệp nhỏ (chuỗi 3 tiệm bánh, khoảng 100 đơn/ngày), không biết lập trình,
sẽ xây phần mềm quản lý đơn hàng chủ yếu cùng coding agent. Hãy so sánh các phương án
[liệt kê phương án] theo bảng với các tiêu chí: độ phổ biến, độ ổn định, một ngôn ngữ cho
nhiều tầng, dễ triển khai, chi phí vận hành, khả năng tìm người hỗ trợ tại Việt Nam,
mức độ AI quen thuộc. Với mỗi đánh giá, nêu lý do ngắn gọn. Chỗ nào bạn không chắc chắn
hoặc thông tin có thể đã lỗi thời, hãy nói rõ. Không cần chọn hộ tôi.Điền ô trống rồi sao chép
Trước khi viết code, hãy đọc package.json và cấu trúc thư mục, rồi cho tôi biết:
phiên bản Next.js, React, TypeScript đang dùng; dự án dùng App Router hay Pages Router.
Với tính năng sắp làm, liệt kê các API/cách viết của framework bạn định dùng và xác nhận
chúng phù hợp với phiên bản này. Nếu không chắc, hãy tra tài liệu chính thức trước.Điền ô trống rồi sao chép
Trong package.json của dự án có thư viện [tên]. Hãy giải thích bằng tiếng Việt dễ hiểu:
nó là thư viện hay framework, dùng để làm gì trong dự án này (chỉ ra file nào dùng nó),
và nếu bỏ nó đi thì ảnh hưởng gì.Sai lầm thường gặp
-
Sự cố 01
Chọn công nghệ theo độ “hot”.
Triệu chứngFramework mới ra, nhiều người bàn tán, nhưng ít tài liệu, AI chưa quen, cộng đồng chưa có lời giải cho lỗi.
Cách tránhƯu tiên công nghệ phổ biến, đã ổn định nhiều năm. Để công nghệ mới cho dự án thử nghiệm.
-
Sự cố 02
Tin rằng “có AI thì ngôn ngữ nào cũng như nhau”.
Triệu chứngAI viết được, nhưng chất lượng, tốc độ và khả năng tự kiểm chứng khác nhau đáng kể giữa các hệ sinh thái.
Cách tránhĐánh giá thêm tiêu chí “AI quen tay” và “có kiểm tra kiểu” khi chọn.
-
Sự cố 03
Trộn quá nhiều ngôn ngữ và framework.
Triệu chứngFrontend một kiểu, backend một kiểu, script tự động một kiểu nữa. Mỗi thứ thêm vào là thêm thứ phải bảo trì.
Cách tránhGiữ số lượng ngôn ngữ tối thiểu; chỉ thêm khi có lý do rõ ràng và ghi lại.
-
Sự cố 04
Không ghi rõ phiên bản cho agent.
Triệu chứngAgent trộn cách viết của phiên bản cũ và mới, sinh lỗi khó hiểu.
Cách tránhGhi phiên bản chính và quy ước bắt buộc trong file hướng dẫn agent; yêu cầu agent tra tài liệu chính thức cho tính năng mới.
-
Sự cố 05
Làm app native khi chưa cần.
Triệu chứngLàm riêng app iPhone và Android tốn gấp đôi công sức, trong khi nhân viên chỉ cần mở web trên điện thoại.
Cách tránhBắt đầu bằng web responsive; chỉ làm app khi có nhu cầu thật (thông báo đẩy phức tạp, dùng camera chuyên sâu, hoạt động ngoại tuyến).
Checklist
Bài tập thực hành
-
Bài 1
Cơ bản
Phân loại
Xếp các tên sau vào nhóm ngôn ngữ, thư viện, framework, runtime, dịch vụ nền tảng: TypeScript, Python, React, Next.js, Django, Node.js, Zod, Supabase, Vercel, Flutter, Swift, Laravel.
Kết quả mong đợi
Ngôn ngữ: TypeScript, Python, Swift. Thư viện: React, Zod. Framework: Next.js, Django, Laravel, Flutter (bộ công cụ/framework giao diện viết bằng Dart). Runtime: Node.js. Dịch vụ nền tảng: Supabase, Vercel.
-
Bài 2
Cơ bản
Tìm hiểu một phần mềm bạn đang dùng
Hỏi nhà cung cấp phần mềm bán hàng hoặc website hiện tại của bạn (hoặc tự tìm hiểu): nó được viết bằng ngôn ngữ, framework gì? Áp bảy câu hỏi tiêu chí lên lựa chọn đó.
Kết quả mong đợi
Một đoạn ngắn đánh giá điểm mạnh, điểm yếu, đặc biệt là câu “nếu nhà cung cấp ngừng hỗ trợ, tôi có thể tìm người khác tiếp quản không?”.
-
Bài 3
Nâng cao
Viết bản ghi quyết định của riêng bạn
Dùng Prompt mẫu 1 để so sánh 2–3 phương án cho dự án của bạn. Sau đó viết một bản ghi quyết định theo mẫu của chị Lan: bối cảnh, quyết định, lý do, đánh đổi chấp nhận.
Kết quả mong đợi
Một văn bản dưới một trang, đủ để người khác (hoặc agent) hiểu vì sao dự án dùng công nghệ này.
Thuật ngữ trong bài
- Ngôn ngữ lập trình
- “Thứ tiếng” để viết chỉ dẫn cho máy
- Thư viện (library)
- Bộ code mua sẵn, bạn gọi khi cần
- Framework
- Khung làm việc có sẵn cấu trúc và quy ước; nó gọi code của bạn
- Runtime
- Môi trường trực tiếp chạy code (trình duyệt, Node.js)
- Quy ước (convention)
- Cách làm chuẩn mà framework/cộng đồng thống nhất
- Native
- App viết riêng cho từng hệ điều hành
- Cross-platform
- Viết một lần, chạy nhiều nền tảng
- Build
- Bước chuẩn bị (kiểm tra, chuyển đổi, đóng gói) trước khi chạy
- SDK
- Bộ công cụ chính thức để dùng một dịch vụ từ code
- Knowledge cutoff
- Ngày cắt kiến thức của mô hình AI
- App Router / Pages Router
- Hai cách tổ chức trang trong Next.js (mới / cũ)
Đọc thêm
- Next.js Documentation
- MDN Web Docs: giới thiệu JavaScript và công nghệ web.
- Chọn tech stack: công nghệ ‘nhàm chán’ và thân thiện với AI04-06
- Tài liệu hóa kiến trúc: ADR, sơ đồ C4 và Mermaid04-09
- Bản đồ công cụ AI coding02-03
Nghiệm thu tờ 01-05
Đọc xong và tự kiểm theo phiếu nghiệm thu, rồi đánh dấu tờ này.
