Files
test-repo/docs-readme/vi-VN/README.md
T
sanbuphy 73f4788d7e feat: comprehensive documentation and demo updates
- Update READMEs and docs across multiple languages
- Enhance interactive demos for Agent, LLM, VLM, Audio, Image Gen, Terminal, and Web Basics
- Add new appendix sections for Database and IDE intros
- Update VitePress config, theme, and utility scripts
- Clean up unused assets and components
2026-01-16 19:10:51 +08:00

25 KiB
Raw Blame History

███████╗ █████╗ ███████╗██╗   ██╗    ██╗   ██╗██╗██████╗ ███████╗
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝    ██║   ██║██║██╔══██╗██╔════╝
█████╗  ███████║███████╗ ╚████╔╝     ██║   ██║██║██████╔╝█████╗
██╔══╝  ██╔══██║╚════██║  ╚██╔╝      ╚██╗ ██╔╝██║██╔══██╗██╔══╝
███████╗██║  ██║███████║   ██║        ╚████╔╝ ██║██████╔╝███████╗
╚══════╝╚═╝  ╚═╝╚══════╝   ╚═╝         ╚═══╝  ╚═╝╚═════╝ ╚══════╝

Easy-Vibe: Learn Vibe Coding from 0 to 1

Từ số không, học tập dựa trên dự án, xây dựng sản phẩm AI đầu tiên của bạn

📌 Bắt đầu đọc online (Start Reading Online)

Đọc online · Bản đồ học tập · Cộng đồng

Stars Forks License

简体中文 繁體中文 English 日本語 Español Français 한국어 العربية Tiếng_Việt Deutsch

🚀 Giới thiệu dự án

Khi bạn cố gắng viết code bằng AI, liên tục gặp lỗi, thường muốn từ bỏ và không rõ cách đưa chương trình của bạn lên thực tế 😢

Hướng dẫn này được thiết kế đặc biệt để đưa bạn từ 0 đến 1, làm chủ dần các kỹ thuật Vibe Coding:

  • Giai đoạn 0: Nhập nhanh qua mini-game để có kỹ năng Vibe Coding
  • Giai đoạn 1: Từ góc nhìn Product Manager, kỹ năng Vibe Coding và hiểu biết kinh doanh, thực hiện nguyên mẫu ứng dụng web
  • Giai đoạn 2: Học phát triển frontend/backend và khả năng AI liên quan đến kỹ thuật Vibe Coding, hoàn thành ứng dụng hoàn chỉnh
  • Giai đoạn 3: Làm chủ xây dựng ứng dụng phức tạp đa nền tảng, hướng tới ứng dụng cấp sản xuất

Chúng tôi tin rằng thông qua việc làm chủ Vibe Coding kết hợp với đào tạo có hệ thống, một người có thể trở thành nhà phát triển kết hợp phát triển frontend, phát triển backend, tích hợp khả năng AI và thiết kế sản phẩm.

Dự án này chủ yếu hướng tới ba loại người học:

  • Người mới bắt đầu (người bình thường / sản phẩm và vận hành): Giúp người học phi kỹ thuật hiểu các khái niệm chính và hoàn thành nguyên mẫu sản phẩm đầu tiên
  • Nhà phát triển cấp sơ-trung (sinh viên và nhà phát triển có cơ sở nhất định): Làm chủ kiến thức Vibe Coding frontend/backend và khả năng AI
  • Nhà phát triển cấp cao (công ty và startup, mã nguồn mở và nhà phát triển độc lập): Kỹ thuật phát triển cấp cao, phát triển đa nền tảng

📖 Điều hướng nội dung

Learning Map

Phụ lục tổng quát

Từ điển khả năng AI: các khái niệm cốt lõi AI phổ biến, thuật ngữ và giải thích kịch bản

0. Mẫu giáo

Chương Nội dung chính Trạng thái
Lời nói đầu: Bản đồ học tập Hướng dẫn lộ trình học tập tổng thể
Sơ cấp 1: Kỷ nguyên AI, biết nói là biết lập trình Trải nghiệm khả năng lập trình AI lần đầu qua các trường hợp như Snake

1. Quản lý sản phẩm AI

Chương Nội dung chính Trạng thái
Sơ cấp 2: Biết các công cụ IDE AI Học sử dụng IDE, tạo mini-game cục bộ
Sơ cấp 3: Tự làm nguyên mẫu Phân tích yêu cầu, tạo trang đơn bằng AI, đến tạo nguyên mẫu sản phẩm đa trang
Sơ cấp 4: Thêm khả năng AI vào nguyên mẫu Học kết nối các khả năng AI phổ biến (văn bản, hình ảnh, video)
Sơ cấp 5: Dự án hoàn chỉnh thực chiến Mô phỏng kịch bản thực tế, chấp nhận phản hồi người dùng để cải tiến, hoàn thành dự án
Đề tài lớn: Tạo nguyên mẫu ứng dụng web hoàn chỉnh và trưng bày Thực hiện ứng dụng hoàn chỉnh, trình bày hiệu ứng ứng dụng

Phụ lục

Chương Nội dung chính Trạng thái
Phụ lục A: Bổ sung tư duy sản phẩm Các khung tư duy cần thiết để tạo sản phẩm từ số không đến một
Phụ lục B: Lỗi phổ biến và giải pháp Các lỗi phổ biến trong Vibe Coding và phương pháp khắc phục sự cố

2. Kỹ sư phát triển cấp sơ-trung

Phần Frontend

Chương Nội dung chính Trạng thái
Frontend 0: Sử dụng lovart tạo tài sản Sử dụng lovart tạo hàng loạt tài sản hình ảnh như nhân vật, cảnh, cung cấp cơ sở tài sản cho thiết kế UI và phát triển frontend 🚧
Frontend 1: Nhập môn Figma và MasterGo Sử dụng công cụ thiết kế tổ chức kiến trúc thông tin và cấu trúc trang, chuẩn bị cơ sở cho triển khai frontend 🚧
Frontend 2: Xây dựng ứng dụng hiện đại đầu tiên - Thiết kế UI : Hoàn thành giao diện dựa trên thành phần từ thiết kế, thực hiện lộ trình đầu tiên từ thiết kế đến code 🚧
Frontend 3: Tham khảo thông số thiết kế UI và thiết kế UI đa sản phẩm : Mở rộng giao diện đa sản phẩm quanh một hình ảnh chính thống nhất, thực hành khả năng thiết kế có hệ thống 🚧
Frontend 4: Cùng làm chân dung Hogwarts : Tạo ứng dụng frontend có khả năng AI tích hợp từ 0 đến 1, kết nối thiết kế và phát triển

Phần Backend và Full Stack

Chương Nội dung chính Trạng thái
Backend 1: API là gì : Hiểu giao diện HTTP và mô hình yêu cầu-phản hồi, chuẩn bị tích hợp backend và phối hợp
Backend 2: Từ cơ sở dữ liệu đến Supabase : Triển khai cơ sở dữ liệu và API trên Supabase, kết nối mô hình dữ liệu với trang frontend
Backend 3: LLM hỗ trợ viết code giao diện và tài liệu : Sử dụng LLM hỗ trợ tạo tài liệu và code cho giao diện và cơ sở dữ liệu, thực hiện backend có thể đọc và kiểm tra 🚧
Backend 4: Quy trình làm việc Git : Quản lý code trong quy trình làm việc Git, thực hiện kiểm soát phiên bản và cộng tác
Backend 5: Triển khai Zeabur : Triển khai ứng dụng lên Zeabur để đưa vào hoạt động
Backend 6: Công cụ phát triển CLI hiện đại : Sử dụng công cụ lập trình AI loại CLI để tăng tốc phát triển và gỡ lỗi, hình thành quy trình kỹ thuật cá nhân
Backend 7: Cách tích hợp hệ thống thanh toán như Stripe : Kết nối hệ thống thanh toán, hoàn thành quy trình thanh toán và quy trình thanh toán cơ bản 🚧
Đề tài lớn 1: Xây dựng ứng dụng hiện đại đầu tiên - Ứng dụng full stack : Tích hợp frontend, backend và module thanh toán, hoàn thành ứng dụng web full stack sẵn sàng sản xuất 🚧
Đề tài lớn 2: Thư viện thành phần frontend hiện đại + Trae thực chiến : Sử dụng thư viện thành phần frontend hiện đại và Trae, hoàn thành độc lập một sản phẩm có đăng nhập/đăng ký và hỗ trợ thanh toán 🚧

Phụ lục khả năng AI

Chương Nội dung chính Trạng thái
AI 1: Nhập môn Dify và tích hợp cơ sở kiến thức : Sử dụng Dify Workflow và RAG cơ bản để xây dựng sản phẩm loại công cụ, tạo ví dụ cho nâng cấp ứng dụng trong tương lai
AI 2: Học tra cứu từ điển AI và tích hợp API đa phương thức : Học tìm kiếm mô hình và API phù hợp, tích hợp khả năng đa phương thức như văn bản, hình ảnh vào sản phẩm 🚧

3. Kỹ sư phát triển cấp cao

Chương Nội dung chính Trạng thái
Cao cấp 1: MCP và ClaudeCode Skills : Mở rộng khả năng IDE qua MCP và Skills, kết nối dịch vụ bên ngoài như công cụ 🚧
Cao cấp 2: Cách để Coding Tools hoạt động lâu : Thiết kế và cấu hình nhiệm vụ chạy dài, làm Coding Tools ổn định và đáng tin cậy hơn 🚧
Cao cấp 3: Phát triển đa nền tảng: Cách xây dựng chương trình nhỏ WeChat : Hiểu hệ sinh thái chương trình nhỏ WeChat, hoàn thành chương trình nhỏ frontend từ mẫu chính thức đến phát hành
Cao cấp 4: Phát triển đa nền tảng: Cách xây dựng chương trình nhỏ WeChat - Bao gồm backend : Tích hợp cơ sở dữ liệu và logic backend vào chương trình nhỏ, thực hiện vòng tuần hoàn hoạt động hoàn chỉnh 🚧
Cao cấp 5: Phát triển đa nền tảng: Cách xây dựng ứng dụng Android : Sử dụng công cụ như Expo, hoàn thành phát triển ứng dụng Android tích hợp Web/native 🚧
Cao cấp 6: Phát triển đa nền tảng: Cách xây dựng ứng dụng iOS : Sử dụng công cụ như Expo, hoàn thành phát triển ứng dụng iOS tích hợp Web/native 🚧
Cao cấp 7: Cách xây dựng trang web cá nhân và blog học thuật của riêng bạn : Từ lựa chọn, xây dựng đến triển khai, xây dựng trang chủ online dài hạn trưng bày dự án cá nhân và kết quả học thuật 🚧

Phụ lục khả năng AI

Chương Nội dung chính Trạng thái
AI cao cấp 1: RAG là gì và nó hoạt động như thế nào : Hiểu có hệ thống nguyên lý RAG và kiến trúc phổ biến, cung cấp cơ sở truy xuất kiến thức cho ứng dụng phức tạp
AI cao cấp 2: RAG trung cấp-cao cấp và điều phối quy trình làm việc: Ví dụ LangGraph : Sử dụng công cụ như LangGraph để thiết kế quy trình làm việc đa bước và hệ thống RAG trung cấp-cao cấp 🚧

🛠️ Cách học

  • Theo khả năng cá nhân, đọc và thực hành có chọn lọc các chương liên quan, nếu có câu hỏi hãy đặt trong Issues.

💻 Khởi động bài học này cục bộ

Phương pháp hiện đại

Trong hộp thoại IDE AI (vscode, cursor, trae, v.v.), nhập prompt sau để khởi động bài học này:

Vui lòng giúp tôi chạy dịch vụ cục bộ của dự án này

Phương pháp cũ

  1. npm install
  2. npm run dev
  3. Mở trình duyệt của bạn và truy cập http://localhost:3000 để xem.

🤝 Đóng góp

  • Nếu bạn phát hiện ra vấn đề hoặc nghĩ có cách nào để cải thiện dự án này, bạn có thể gửi Issue để phản hồi. Nếu sau khi gửi không ai trả lời, bạn có thể liên hệ đội ngũ chăm sóc để phản hồi và theo dõi~
  • Nếu bạn muốn đóng góp vào dự án này, bạn có thể gửi Pull Request, nếu sau khi gửi không ai trả lời, bạn có thể liên hệ đội ngũ chăm sóc để phản hồi và theo dõi~
  • Nếu bạn rất quan tâm đến Datawhale và muốn bắt đầu một dự án mới, vui lòng làm theo hướng dẫn dự án mã nguồn mở Datawhale~

🙏 Cảm ơn mỗi người đóng góp

  • 散步-Lãnh đạo dự án (Thành viên Datawhale)
  • Fang Ke-Giảng viên hướng dẫn (Thành viên Datawhale, Đại học Thanh Hoa)
  • Yerim KangPhần dự án thực tế-Đại học Thanh Hoa
  • Triệu Tri LânPhần dự án thực tế-Đại học Thanh Hoa
  • Lý Nghi TuyênThiết kế nghệ thuật trang-Đại học Thanh Hoa
  • Tất cả các bạn trong nhóm beta test AI Vibe Coding 101 đã cung cấp đề xuất và kinh nghiệm

Cảm ơn đặc biệt

  • Cảm ơn @Sm1les đã giúp đỡ và hỗ trợ dự án này
  • Cảm ơn tất cả các nhà phát triển đã đóng góp vào dự án này ❤️

📧 Liên hệ với chúng tôi

Nếu bạn có câu hỏi, đề xuất, phàn nàn, hoặc muốn trao đổi, vui lòng quét mã QR bên dưới

Quét mã QR bên dưới để theo dõi tài khoản chính thức: Datawhale

📄 GIẤY PHÉP

Star History

Star History Chart