Lộ trình học lập trình 2025 (cho người mới bắt đầu)

Đây là chia sẻ của Marc Lou trong video Coding in 2025 is EASY (full roadmap to build ANY project from 0)

Bạn có tin rằng lập trình trong năm 2025 thực sự dễ dàng không? Điều khó khăn nhất không phải là bản thân việc viết code, mà là biết chính xác cần học gì và quan trọng hơn, nên bỏ qua những gì. Trong bài viết này, chúng tôi sẽ vạch ra một lộ trình học lập trình chi tiết, giúp bạn xây dựng bất kỳ dự án kinh doanh trực tuyến nào từ con số không. Với lộ trình này, bạn hoàn toàn có thể bắt đầu kiếm tiền online với một sản phẩm số chỉ sau vài tuần nỗ lực.

Nắm vững nền tảng: Hiểu cách internet vận hành

Sai lầm phổ biến nhất của người mới học lập trình là muốn đi quá nhanh và lạm dụng các công cụ AI để xây dựng website. Đúng là bạn có thể dùng vài câu lệnh tiếng Anh đơn giản để AI tạo ra một trang web đẹp mắt, nhưng đây là một cái bẫy. Khi bạn muốn thêm tính năng mới, sửa lỗi, bạn sẽ không biết phải yêu cầu AI như thế nào nếu không hiểu các nguyên tắc cơ bản của Internet.

Vì vậy, bước đầu tiên trong lộ trình học lập trình của chúng ta là hiểu rõ các khái niệm nền tảng.

Sử dụng AI để học, không phải để code hộ (lúc đầu)

Thay vì yêu cầu AI viết code cho bạn, hãy dùng nó như một người thầy kiên nhẫn.

1. Hỏi ChatGPT về cách một trang web hoạt động: Yêu cầu ChatGPT giải thích quá trình xảy ra khi bạn truy cập một website bất kỳ (ví dụ: vnrom.net). Nhấn mạnh rằng bạn muốn lời giải thích đơn giản, sử dụng ẩn dụ và không dùng thuật ngữ kỹ thuật phức tạp.
2. Tìm hiểu các khái niệm cốt lõi:
   • Internet Browser (Trình duyệt Web): Chương trình bạn dùng để lướt web (Chrome, Firefox, Safari).
   • HTTP/HTTPS (HyperText Transfer Protocol/Secure): Giao thức truyền tải siêu văn bản, cách trình duyệt và máy chủ “nói chuyện” với nhau.
   • URL (Uniform Resource Locator): Địa chỉ của một trang web (ví dụ: https://vnrom.net).
   • DNS (Domain Name System): Hệ thống phân giải tên miền, giống như danh bạ điện thoại của Internet, chuyển đổi tên miền dễ nhớ thành địa chỉ IP mà máy tính hiểu được.
     Hãy dùng ChatGPT để hiểu rõ từng khái niệm này, tập trung vào vai trò và ý nghĩa tổng quan của chúng.

Khám phá “bên trong” website với Developer Console

Mở bất kỳ trang web nào, nhấp chuột phải và chọn “Inspect” (hoặc “Kiểm tra phần tử”). Đây là Developer Console (Bảng điều khiển dành cho nhà phát triển). Hãy tò mò khám phá tab “Elements”, di chuột qua các dòng mã và xem chúng tương ứng với phần nào trên trang web. Đây là bước đầu tiên để bạn nhìn nhận Internet dưới góc độ của một nhà phát triển.

Hiểu internet từ góc độ nhà phát triển: Xây dựng trang web đầu tiên

Khi đã có cái nhìn cơ bản về cách Internet hoạt động, bạn đã sẵn sàng để tự tay tạo ra một thứ gì đó. Đây là lúc bạn thực sự bắt đầu với lộ trình học lập trình web.

Công cụ cần thiết

• Code Editor (Trình soạn thảo mã): Đây là nơi bạn sẽ viết code.
  • VS Code (Visual Studio Code): Miễn phí, mạnh mẽ và phổ biến nhất.
  • Cursor AI: Một trình soạn thảo tích hợp AI mạnh mẽ, có thể giúp tăng tốc độ làm việc.

Ba ngôn ngữ nền tảng của web

Mọi trang web bạn thấy trên Internet đều được xây dựng từ bộ ba ngôn ngữ này:

1. HTML (HyperText Markup Language): Dùng để xây dựng cấu trúc, bộ khung của trang web.
   • Cần học: links (liên kết), inputs (ô nhập liệu), buttons (nút bấm), các thẻ định dạng văn bản cơ bản.
2. CSS (Cascading Style Sheets): Dùng để tạo kiểu dáng, làm đẹp cho trang web (màu sắc, bố cục, font chữ).
   • Cần học: Các thuộc tính như color (màu sắc), display (cách hiển thị), margin (khoảng cách bên ngoài), padding (khoảng cách bên trong).
3. JavaScript: Dùng để tạo sự tương tác cho trang web (ví dụ: hiệu ứng khi nhấp chuột, thay đổi nội dung động).
   • Cần học: Cách xử lý sự kiện (như onclick), thay đổi nội dung HTML, các khái niệm cơ bản về biến và hàm.

QUAN TRỌNG: 
Bạn không cần phải học sâu toàn bộ ba ngôn ngữ này ngay lập tức. Mục tiêu là học khoảng 10% kiến thức cốt lõi của mỗi ngôn ngữ, đủ để bạn xây dựng một trang web nhỏ đơn giản (ví dụ: trang portfolio cá nhân, trang giới thiệu ý tưởng kinh doanh) và gửi cho bạn bè xem. Đừng quá phức tạp hóa vấn đề ở giai đoạn này.

Xây dựng ứng dụng thực tế: Chọn tech stack và thiết lập môi trường

Sau khi đã tạo được trang web tĩnh đơn giản, bạn sẽ muốn xây dựng những thứ phức tạp hơn: một trang landing page chuyên nghiệp, một khu vực quản trị riêng cho người dùng, tính năng gửi email, và quan trọng nhất là nhận thanh toán. Đây là lúc “tech stack” (Bộ công cụ công nghệ) phát huy tác dụng.

Chọn tech stack phù hợp

Một tech stack là tập hợp các công cụ, thư viện và framework bạn sử dụng để xây dựng ứng dụng. Thay vì tự viết mọi thứ từ HTML, CSS, JavaScript thuần túy, tech stack giúp bạn tăng tốc độ phát triển đáng kể.

Ví dụ về một tech stack hiện đại:

• Daisy UI: Thư viện component để tạo kiểu nhanh chóng cho website, xây dựng trên Tailwind CSS.
• Auth.js (NextAuth.js): Thư viện giúp xác thực người dùng dễ dàng.
• Datafast (ví dụ): Công cụ theo dõi phân tích web (tùy chọn).
• React: Thư viện JavaScript mạnh mẽ để xây dựng giao diện người dùng (UI) tương tác.
• Next.js: Framework xây dựng trên React, giúp tổ chức code, tối ưu hiệu suất và cung cấp nhiều tính năng sẵn có.

Tại sao không dùng HTML/CSS/JS thuần túy? Vì tốc độ! Các nhà phát triển muốn đưa sản phẩm ra thị trường nhanh nhất có thể. Tech Stack cung cấp các giải pháp dựng sẵn, giúp bạn không phải “phát minh lại bánh xe”. Ví dụ, tạo một nút bấm có bộ đếm đơn giản bằng React sẽ ngắn gọn hơn rất nhiều so với viết bằng HTML và JavaScript thuần.

LỜI KHUYÊN:
Đừng bị cuốn theo việc thử mọi thư viện UI mới nhất hay phiên bản ReactJS mới nhất. Đó chỉ là sự trì hoãn. Hãy chọn một Tech Stack và gắn bó với nó. Bạn có thể tham khảo Tech Stack được đề cập ở trên, đây là một lựa chọn rất phổ biến.

Làm quen với Terminal (dòng lệnh)

Terminal là một ứng dụng có sẵn trên máy tính, cho phép bạn tương tác với hệ thống bằng các câu lệnh. Với tư cách là một nhà phát triển, bạn cần biết một vài lệnh cơ bản. Hãy yêu cầu ChatGPT giải thích nhanh về Terminal và cách sử dụng nó. Bốn lệnh quan trọng bạn nên biết (ví dụ trên Linux/macOS): ls (liệt kê file), cd (thay đổi thư mục), mkdir (tạo thư mục mới), pwd (hiển thị thư mục hiện tại).

Thiết lập môi trường phát triển

Dựa trên Tech Stack ví dụ (React/Next.js):

1. Cài đặt Node.js: Môi trường chạy JavaScript bên ngoài trình duyệt. Node.js đi kèm với npm (Node Package Manager).
2. Cài đặt Next.js: Framework sẽ giúp bạn biên dịch và kết hợp tất cả các trang của bạn.
3. Code Editor: Nếu chưa có, hãy cài đặt VS Code.

Hiểu cấu trúc dự án Next.js

Khi bạn tạo một dự án Next.js, nó sẽ cài đặt khá nhiều thứ. Hãy dành thời gian để hiểu những gì đang diễn ra:

• npm (Node Package Manager):
  • package.json: File trung tâm điều khiển của ứng dụng, liệt kê các thư viện phụ thuộc và các script.
  • npm install <tên-gói>: Cài đặt một thư viện mới.
  • npm run <tên-script>: Chạy một script được định nghĩa trong package.json (ví dụ: npm run dev để khởi động server phát triển).
    npm cho phép bạn sử dụng lại code miễn phí từ cộng đồng (ví dụ: thư viện vẽ biểu đồ Recharts).
• ESLint (Linter): Một công cụ giúp tự động phát hiện lỗi cú pháp hoặc code không theo chuẩn trong quá trình bạn viết. Nó sẽ hiển thị các cảnh báo màu đỏ nếu bạn gõ sai, giúp bạn viết code ít lỗi hơn.
• Cấu trúc thư mục: Trong dự án Next.js, bạn sẽ thấy các thư mục như app (chứa các route và UI), components (chứa các thành phần UI tái sử dụng), public (chứa các file tĩnh). Hãy nhờ AI trong code editor giải thích cấu trúc này cho bạn.

Quản lý phiên bản và triển khai dự án lên internet

Giờ đây bạn đã có một dự án được thiết lập, bước tiếp theo trong lộ trình học lập trình là quản lý code và đưa nó lên mạng cho mọi người thấy.

Hệ thống quản lý phiên bản: Git và GitHub

• Git: Một hệ thống giúp bạn theo dõi các thay đổi trong code của mình theo thời gian, tạo ra các “phiên bản” khác nhau.
  • Cần cài đặt Git trên máy.
  • Học các lệnh cơ bản:
    • git add .: Thêm tất cả các thay đổi vào khu vực chuẩn bị (staging area).
    • git commit -m "Tin nhắn mô tả thay đổi": Lưu lại các thay đổi vào lịch sử với một tin nhắn.
    • git push: Đẩy các thay đổi đã commit lên một kho lưu trữ từ xa (như GitHub).
      Chỉ cần nắm vững ba lệnh này là bạn có thể bắt đầu sử dụng Git.
• GitHub: Một nền tảng lưu trữ code trực tuyến, giống như “Google Drive cho lập trình viên”. Bạn tạo tài khoản GitHub, tạo một “repository” (kho lưu trữ) cho dự án của mình, và đẩy code từ máy tính lên đó bằng Git.

Xây dựng Landing Page chuyên nghiệp

Bắt đầu với phần giao diện người dùng (frontend) vì nó trực quan và tạo động lực. Với Tech Stack đã chọn (React, Next.js, Tailwind CSS, Daisy UI):

• React:
  • Học về components (thành phần giao diện người dùng có thể tái sử dụng).
  • Nắm vững một vài React Hooks cơ bản. Có khoảng 20 hooks, nhưng bạn có thể xây dựng rất nhiều thứ chỉ với 3 hooks chính (ví dụ: useState, useEffect, useContext). Đừng cố học tất cả ngay lập tức.
  • Một số khái niệm JavaScript nâng cao hơn mà bạn có thể cần học thêm khi làm việc với React.
• Next.js: Đóng vai trò là framework bao quanh React, giúp tổ chức các trang, file, routing (điều hướng) một cách hiệu quả.
• Styling với Tailwind CSS và Daisy UI:
  • Tailwind CSS: Một framework CSS dạng “utility-first”, cho phép bạn viết các class trực tiếp trong HTML để tạo kiểu (ví dụ: text-blue-500, p-4, flex).
  • Daisy UI: Một thư viện component xây dựng trên Tailwind CSS, cung cấp sẵn các thành phần giao diện đẹp mắt như buttons, cards, toggles, checkboxes. Điều này giúp bạn có thiết kế nhất quán mà không cần tự thiết kế mọi thứ từ đầu.

Triển khai (Deploy) website lên internet

Sau khi xây dựng xong landing page, bạn cần đưa nó lên mạng.

• Vercel: Một nền tảng phổ biến để host (lưu trữ và chạy) các ứng dụng Next.js (và nhiều loại khác). Họ có gói miễn phí rất tốt.
• Quy trình triển khai (Workflow):
  1. Bạn code trên máy tính.
  2. Dùng git commit và git push để đẩy code lên GitHub.
  3. Vercel sẽ tự động phát hiện thay đổi trên GitHub, lấy code mới về, chạy các lệnh cần thiết và triển khai phiên bản website mới của bạn.
     Quá trình này thực ra rất đơn giản khi đã thiết lập.

Mua tên miền (Domain Name)

Đây là phần thú vị!

• Namecheap: Một nhà cung cấp tên miền phổ biến.
• Lời khuyên: Cố gắng chọn tên miền dễ đọc, dễ nhớ và có ý nghĩa với dự án của bạn. Nếu tên miền .com đã bị mua, đừng quá lo lắng. Bạn vẫn có thể thành công với các đuôi tên miền khác (ví dụ: .io, .app, .net).

Chúc mừng! Đến đây, bạn đã có thể xây dựng một trang frontend, thêm nút thanh toán và bắt đầu kiếm tiền.

Phát triển Backend: Lưu trữ dữ liệu, xác thực người dùng và hơn nữa

Frontend chỉ là một nửa câu chuyện. Để có các tính năng nâng cao như lưu trữ thông tin người dùng, cho phép tải file, bạn cần đến Backend. Backend là tất cả những gì xảy ra “phía sau cánh gà”, không hiển thị trực tiếp cho người dùng.

API Endpoint: Cánh cửa vào Backend

Một trong những cách sử dụng phổ biến nhất của backend là tạo API Endpoint. API Endpoint giống như một “cánh cửa” mà frontend có thể gửi yêu cầu đến để thực hiện một hành động nào đó (ví dụ: lưu thông tin người dùng đăng ký, tạo link thanh toán, lấy dữ liệu).

• Trong Next.js: Bạn có thể tạo API Endpoint rất dễ dàng bằng cách tạo một file route.js (hoặc route.ts) bên trong thư mục con của thư mục app/api/. Ví dụ: app/api/users/route.js.
• Khái niệm cần học:
  • HTTP Methods: GET (lấy dữ liệu), POST (gửi dữ liệu mới), PUT (cập nhật dữ liệu), DELETE (xóa dữ liệu).
  • HTTP Parameters: Dữ liệu gửi kèm theo yêu cầu (trong URL hoặc trong body của request).
  • HTTP Response: Dữ liệu trả về từ API Endpoint.
• JavaScript bất đồng bộ: Khi gọi API, yêu cầu phải đi qua Internet, thời gian phản hồi không xác định. Do đó, bạn cần học về:
  • async/await: Cú pháp giúp viết code bất đồng bộ dễ đọc hơn.
  • Promises: Đối tượng đại diện cho kết quả (thành công hoặc thất bại) của một hành động bất đồng bộ.
• Gọi API của bên thứ ba: Bạn cũng có thể gọi API từ các dịch vụ khác, ví dụ như API của ChatGPT để tích hợp AI vào ứng dụng của mình.

Cơ sở dữ liệu (Database): Nơi lưu trữ thông tin

API Endpoint cần nơi để lưu trữ và truy xuất dữ liệu.

• NoSQL Database (ví dụ: MongoDB): Một loại cơ sở dữ liệu linh hoạt, không yêu cầu cấu trúc cố định như SQL.
• MongoDB Atlas: Dịch vụ host MongoDB trên cloud, có gói miễn phí để bạn bắt đầu. Bạn sẽ tạo một “cluster” (cụm máy chủ) nhỏ để lưu trữ dữ liệu.
• MongoDB Compass: Công cụ trực quan để xem và quản lý dữ liệu trong MongoDB trên máy tính của bạn.
• Connection String: Một chuỗi ký tự bí mật mà MongoDB Atlas cung cấp, dùng để kết nối ứng dụng của bạn với cơ sở dữ liệu.

Biến môi trường (Environment Variables)

Các thông tin nhạy cảm như Connection String của database, API Key của các dịch vụ bên thứ ba không nên được viết trực tiếp vào code. Thay vào đó, hãy lưu chúng vào biến môi trường.

• Trong dự án Next.js, bạn thường tạo file .env.local (file này sẽ không được đưa lên Git) để lưu các biến này. Ví dụ: DATABASE_URL="your_connection_string".

Xác thực người dùng (Authentication)

Để người dùng có thể đăng nhập và có trải nghiệm cá nhân hóa:

• Auth.js (trước đây là NextAuth.js): Một thư viện mã nguồn mở tuyệt vời giúp việc này trở nên đơn giản. Chỉ với vài dòng code, bạn có thể có trang đăng nhập với Google, email (magic link), v.v.
• Khái niệm cốt lõi trong Auth.js:
  • Providers: Các dịch vụ người dùng có thể dùng để đăng nhập (Google, GitHub, Email, etc.).
  • Adapters: Kết nối Auth.js với cơ sở dữ liệu của bạn để lưu thông tin người dùng khi họ đăng nhập.
• Cookies: Rất quan trọng cho việc xác thực. Auth.js sử dụng cookies để duy trì trạng thái đăng nhập của người dùng.
• Chức năng cần xây dựng: Đăng nhập, đăng xuất, tạo các trang/API riêng tư chỉ dành cho người dùng đã đăng nhập.

Gửi Email

Có hai loại email chính:

• Transactional Emails (Email giao dịch): Email tự động gửi để phản hồi một hành động của người dùng (ví dụ: email chào mừng, email xác nhận đặt hàng, email chứa magic link để đăng nhập).
• Marketing Emails (Email tiếp thị): Email gửi hàng loạt để quảng bá sản phẩm, thông báo khuyến mãi.
• Resend: Một dịch vụ gửi email tốt, hỗ trợ cả transactional và marketing email.
• MX Record: Một loại bản ghi DNS cần thiết để cấu hình cho tên miền của bạn có thể gửi và nhận email.

Nhận thanh toán trực tuyến

Để kiếm tiền từ sản phẩm của bạn:

• Payment Provider (Nhà cung cấp dịch vụ thanh toán):
  • Stripe: Rất phổ biến và mạnh mẽ (lưu ý: Stripe có thể không hỗ trợ ở một số quốc gia).
  • Lemon Squeezy: Một lựa chọn khác, đặc biệt hữu ích vì họ xử lý luôn vấn đề VAT cho bạn, đơn giản hóa quy trình.
• Chức năng cần học/xây dựng:
  • Checkout Session: Tạo một trang thanh toán nơi người dùng nhập thông tin và trả tiền. Stripe cung cấp các component UI hoặc link để nhúng vào trang của bạn.
  • Webhook: Stripe sẽ gửi một thông báo (request) đến API Endpoint của bạn khi có một sự kiện xảy ra (ví dụ: thanh toán thành công). Dựa vào webhook này, bạn sẽ cấp quyền truy cập dịch vụ cho người dùng.
  • Customer Portal (Cổng thông tin khách hàng): Nơi người dùng có thể quản lý gói đăng ký, xem hóa đơn, cập nhật thông tin thanh toán. Stripe cung cấp sẵn tính năng này, bạn chỉ cần một URL để trỏ người dùng đến.

Bảo mật và các khái niệm nâng cao trong lộ trình học lập trình

Khi ứng dụng của bạn bắt đầu có người dùng và dữ liệu thật, bảo mật trở thành ưu tiên hàng đầu.

Đảm bảo an toàn cho ứng dụng

• Sử dụng AI để kiểm tra bảo mật: Bạn có thể hỏi AI (ví dụ, trong code editor) về các lỗ hổng tiềm ẩn trong code của mình. Bắt đầu từ câu hỏi tổng quát và đi sâu vào chi tiết.
• React Server Components vs. Client Components:
  • Server Components: Code chạy trên server, an toàn hơn để xử lý logic nhạy cảm, truy cập database.
  • Client Components: Code chạy trên trình duyệt của người dùng. Tránh đặt các key bí mật hoặc logic quan trọng ở đây.
• Luôn sử dụng biến môi trường: Để lưu trữ API keys, connection strings và các thông tin bí mật khác. Tuyệt đối không đẩy chúng lên GitHub.
• Bảo vệ API Endpoints: Đảm bảo rằng chỉ những người dùng được xác thực và có quyền mới có thể truy cập các API nhất định.
• Nâng cao (khi cần):
  • Middlewares: Code chạy trước khi request đến API endpoint, có thể dùng để chặn truy cập, kiểm tra quyền.
  • Firewalls: Tường lửa để chặn các truy cập đáng ngờ từ một số quốc gia hoặc địa chỉ IP.

Các khái niệm nâng cao (Học khi thực sự cần)

Đừng cố học những thứ này trừ khi bạn có nhu cầu cụ thể:

• Metadata trong Next.js: Cấu hình tiêu đề, mô tả, hình ảnh cho từng trang để tối ưu SEO (giúp Google hiểu và xếp hạng trang web của bạn).
• Transitions và Animations trong Tailwind CSS: Làm cho ứng dụng của bạn mượt mà và dễ chịu hơn khi sử dụng.
• Local Storage trong JavaScript: Một nơi trên trình duyệt của người dùng để lưu trữ một lượng nhỏ dữ liệu mà không cần đến database (ví dụ: lưu trữ cài đặt giao diện của người dùng).

Trở thành lập trình niên 10x bới sự hỗ trợ của AI

AI không chỉ giúp bạn học, mà còn giúp bạn code nhanh hơn gấp nhiều lần.

• AI tích hợp trong Code Editor:
  • VS Code: Có các extension AI (ví dụ: GitHub Copilot, có thể có gói miễn phí hoặc trả phí).
  • Cursor: Một code editor tập trung vào AI, có thể yêu cầu gói trả phí.
  • Trae: Một code editor tập trung vào AI tương tự như Curcor, do ByteDance (công ty mẹ của TikTok) phát triển, hiện tại đang miễn phí.
• LLM (Large Language Model): Loại mô hình ngôn ngữ lớn mà AI sử dụng (ví dụ: Claude 3.7 Sonnet). Thực tế, với các tác vụ lập trình thông thường, sự khác biệt giữa các LLM hàng đầu không quá lớn.
• AI sẽ là người bạn đồng hành tốt nhất của bạn:
  • Autocomplete (Tự động hoàn thành code): AI gợi ý code khi bạn đang gõ, hoặc bạn có thể chọn một đoạn code và yêu cầu AI viết lại, cải thiện (thường dùng phím tắt như Command + K).
  • Chat: Hỏi AI về cách tổ chức dữ liệu, các vấn đề bảo mật, giải thích một đoạn code phức tạp.
  • Composer (Agent): Yêu cầu AI tạo file mới, viết script, thực hiện các tác vụ phức tạp hơn.

Sử dụng AI đúng cách sẽ giúp bạn tăng tốc độ làm việc một cách đáng kinh ngạc.

Hành trình học lập trình của bạn bắt đầu từ hôm nay!

Lộ trình học lập trình này có vẻ dài, nhưng đừng nản lòng. Chưa bao giờ có thời điểm tốt hơn để học lập trình và xây dựng một dự án phụ như bây giờ. Lập trình đòi hỏi thời gian và sự kiên trì, nhưng nếu bạn dành ra chỉ 30 phút mỗi ngày, bạn sẽ ngạc nhiên về những gì mình đạt được sau vài tháng.

Tương lai của bạn đang chờ đợi bạn bắt đầu ngay bây giờ. Hãy đóng bài viết này và bắt tay vào xây dựng một thứ gì đó. Nếu bạn muốn tìm hiểu sâu hơn từng bước trong lộ trình này, có rất nhiều tài liệu và video hướng dẫn chi tiết trên mạng.

Chúc bạn thành công trên con đường trở thành một nhà phát triển!