fullstackBeginner
Phát triển Web Fullstack
Phát triển Web Fullstack
Lộ trình Fullstack thực chiến với Angular, NestJS, Postgres và Firebase/Supabase: tư duy UI/UX, API chuẩn REST, bảo mật JWT, logging/monitoring, Docker/CI/CD. Kết thúc khóa, bạn có dự án hoàn chỉnh sẵn sàng deploy và kỹ năng teamwork chuyên nghiệp.
⭐ 4.9 (156 đánh giá)⏱ 40h👥 320 học viên📚 30 bài học📎 80 tài liệu🌐 Vietnamese
20.000.000 ₫
25.000.000 ₫
IT
Tạo bởi ITSS Training
🌐 VietnameseBeginner
Lộ trình học
Buổi 1
15/01/2025 - 16/01/2025
Mục tiêu
- Làm quen với các khái niệm UI/UX
- Đăng ký và sử dụng GitHub Student Pack
- Đăng ký và sử dụng Jetbrain Education
Nội dung
- Hoàn tất đăng ký GitHub Student Pack và kích hoạt các ưu đãi dành cho sinh viên, bao gồm quyền truy cập các công cụ cần thiết cho quá trình học và làm dự án.
- Đăng ký tài khoản JetBrains Education, nhận license miễn phí và cài đặt IDE phù hợp để chuẩn bị môi trường phát triển đồng bộ trong lớp.
- Phân công đề tài, chia nhóm và gán mentor phụ trách; thống nhất cách trao đổi, nhịp gặp gỡ và tiêu chí đánh giá trong suốt khóa học.
- Giới thiệu các khái niệm UI/UX nền tảng như tính nhất quán, phân cấp thị giác, affordance và feedback nhằm định hình tư duy thiết kế đúng đắn.
- Làm quen với Figma: cấu trúc file, frame, component và auto‑layout; thiết lập thư viện chung để hợp tác hiệu quả.
- Tìm cảm hứng trên Dribbble/Behance, ghi chú điểm hay dở của từng mẫu và rút ra bộ tiêu chí đánh giá thiết kế phù hợp mục tiêu dự án.
Buổi 2
16/01/2025 - 17/01/2025
Mục tiêu
- Các khái niệm UI/UX (tiếp theo)
- Xây dựng hệ thống Colors, Typography, Layout, Sizing, Icons trên Figma
- Tìm hiểu về các Design System
Nội dung
- Hoàn thành giáo trình UI/UX cốt lõi và thực hành áp dụng vào bài toán cụ thể của nhóm để hình thành ngôn ngữ thiết kế nhất quán.
- Xây dựng prototype mức độ trung bình‑cao (mid‑hi‑fi) cho các màn hình chính, tập trung vào luồng người dùng và khả năng hoàn thành tác vụ.
- Chuẩn hóa prototype bằng hệ thống màu sắc, typography, layout, kích thước và icon; tạo token để dễ tái sử dụng và mở rộng.
- Tổ chức buổi critique: đánh giá prototype theo tiêu chí usability, accessibility và tính nhất quán, ghi lại hạng mục cần cải tiến.
- Thống nhất Design System nền tảng sẽ sử dụng xuyên suốt dự án, bao gồm quy tắc tên gọi, grid, spacing và component chuẩn.
Buổi 3
17/01/2025 - 18/01/2025
Mục tiêu
- Tổng kết các khái niệm và vấn đề về UI/UX
- Trình bày ý tưởng và thiết kế theo yêu cầu
Nội dung
- Hoàn thiện prototype theo yêu cầu dự án, đảm bảo đầy đủ kịch bản người dùng chính và trạng thái edge (loading, empty, error).
- Trình bày phương án thiết kế, giải thích các quyết định quan trọng và nhận phản hồi; thống nhất phiên bản prototype để chuyển sang giai đoạn xây dựng.
Buổi 4
18/01/2025 - 19/01/2025
Mục tiêu
- Biết sử dụng Git/GitHub
- Cộng tác trên dự án nhiều thành viên với Git
- Thử nghiệm triển khai prototype với HTML, CSS, JS cơ bản
Nội dung
- Thiết lập Git/GitHub cho dự án: quy ước nhánh, commit message và bảo vệ nhánh chính để đảm bảo lịch sử sạch và dễ truy vết.
- Thực hành quy trình cộng tác: mở Pull Request, review chéo, xử lý xung đột merge và đồng bộ nhánh tính năng với nhánh chính.
- Chuyển một số thành phần giao diện từ prototype sang HTML/CSS/JS cơ bản, tập trung vào bố cục, typography và tính responsive.
Buổi 5
19/01/2025 - 20/01/2025
Mục tiêu
- HTML, CSS chuyên sâu
- Trình duyệt và JS Engine V8
- JS chuyên sâu
Nội dung
- Đào sâu CSS: Box Model, kỹ thuật layout hiện đại (Flexbox/Grid), one‑line‑layout, animation cơ bản và responsive theo breakpoint.
- Ôn tập JavaScript nền tảng: function, object, class, scope/closure; mô hình thực thi của V8 và tác động đến hiệu năng.
- Áp dụng tư duy hướng đối tượng trong JS để thiết kế component UI có trách nhiệm rõ ràng và dễ mở rộng.
- Sử dụng import/export theo module ES, cấu trúc mã nguồn theo tính năng và chuẩn hóa đường dẫn import.
- Nắm các chuẩn ES mới nổi bật và cách transpile/bundling để tương thích trình duyệt mục tiêu.
Buổi 6
20/01/2025 - 21/01/2025
Mục tiêu
- Sử dụng thành thạo HTML, CSS, JS
- Có khả năng triển khai ý tưởng thành giao diện hoàn chỉnh
Nội dung
- Hoàn thiện phần giao diện đã chuyển đổi bằng HTML/CSS/JS, bảo đảm tính nhất quán với prototype và khả năng truy cập cơ bản.
- Trình bày kết quả, nhận phản hồi về UX copy, khoảng cách, màu sắc và điều chỉnh theo tiêu chí thiết kế đã thống nhất.
Buổi 7
21/01/2025 - 22/01/2025
Mục tiêu
- Bổ sung thời gian hoàn thiện giao diện
Nội dung
- Dành thời gian hoàn thiện các thành phần còn lại, tối ưu responsive và kiểm tra trên nhiều thiết bị/trình duyệt.
- Trình bày giao diện cập nhật, tổng hợp tồn đọng và chốt phạm vi cho giai đoạn chuyển sang framework.
Buổi 8
22/01/2025 - 23/01/2025
Mục tiêu
- Nhập môn Angular
- NodeJS và các JS Framework
- Các thành phần cơ bản trong Angular
Nội dung
- Khởi động với Angular: cấu trúc project, module và component; thực hành tạo component theo chuẩn đặt tên và thư mục tính năng.
- Thiết lập routing giữa các component, bảo đảm breadcrumb và trạng thái URL phản ánh đúng điều hướng người dùng.
- Sử dụng built‑in directives và viết directive đơn giản để tái sử dụng logic trình bày; quản lý điều kiện và lặp hiệu quả.
- Tích hợp một số thư viện UI bên thứ ba, cấu hình theme và đảm bảo kích thước bundle ở mức chấp nhận được.
Buổi 9
23/01/2025 - 24/01/2025
Mục tiêu
- Các thành phần Angular nâng cao
- Chuyển đổi giao diện web tĩnh thành Angular
- BaaS với Firebase
Nội dung
- Tìm hiểu cơ chế binding và change detection; tối ưu render với OnPush và trackBy trong danh sách lớn.
- Thiết kế giao tiếp giữa component cha/con thông qua Input/Output và dịch vụ chia sẻ trạng thái.
- Tổ chức service theo domain, tách logic nghiệp vụ khỏi component để dễ test và tái sử dụng.
- Tích hợp Firebase: xác thực người dùng, lưu trữ dữ liệu với Firestore/Storage và triển khai hosting cho bản demo.
- Chuyển đổi các thành phần giao diện trọng yếu sang Angular, bảo đảm tính năng tương đương prototype.
Buổi 10
24/01/2025 - 25/01/2025
Mục tiêu
- Bổ sung thời gian chuyển đổi giao diện và thiết kế
Nội dung
- Tiếp tục hoàn thiện binding phức tạp và tối ưu hiệu năng hiển thị với các kỹ thuật memo và lazy render.
- Chuẩn hóa contracts truyền dữ liệu giữa các module, tránh rò rỉ chi tiết nội bộ và tăng khả năng mở rộng.
- Mở rộng hệ thống service: interceptor cho HTTP, xử lý lỗi tập trung và hiển thị thông báo thân thiện.
- Tận dụng thêm dịch vụ Firebase như rules bảo mật, cấu hình cache và xem log để hỗ trợ giai đoạn thử nghiệm.
- Hoàn thiện chuyển đổi các phần còn lại sang Angular, đảm bảo chất lượng thông qua walkthrough kịch bản người dùng.
Buổi 11
25/01/2025 - 26/01/2025
Mục tiêu
- Quản lý trạng thái trong Angular
- Khái niệm Lập trình Phản ứng
Nội dung
- Ôn tập bất đồng bộ với Promise và Async/Await, đối chiếu với mô hình Observable để chọn giải pháp phù hợp.
- Xử lý luồng dữ liệu với RxJS: tạo, biến đổi, kết hợp và hủy subscribe đúng cách để tránh rò rỉ bộ nhớ.
- Áp dụng các toán tử RxJS thường dùng (map, switchMap, mergeMap, catchError) vào luồng gọi API và UI.
- Thiết lập quản lý trạng thái với NgRx hoặc giải pháp tối giản hơn tùy quy mô; xác định nguồn sự thật duy nhất (single source of truth).
- Tích hợp state management vào dự án hiện tại, thêm devtools và selector để theo dõi thay đổi rõ ràng.
Buổi 12
26/01/2025 - 27/01/2025
Mục tiêu
- Hoàn thiện dự án với kiến thức Angular đã học
Nội dung
- Hoàn thiện các màn hình, xử lý trạng thái lỗi/empty/loading đầy đủ và viết tài liệu sử dụng ngắn gọn cho người dùng thử nghiệm.
- Trình bày bản build demo, thu thập phản hồi về hiệu năng/UX và lập danh sách cải tiến ưu tiên cao.
Buổi 13
29/01/2025 - 30/01/2025
Mục tiêu
- Bổ sung thời gian hoàn thiện ứng dụng
Nội dung
- Thêm thời gian để xử lý các hạng mục tồn đọng, nâng cấp khả năng truy cập và tối ưu kích thước gói phần mềm.
- Trình bày tiến độ, xác nhận tiêu chí hoàn thành và chuẩn bị cho tích hợp backend.
Buổi 14
31/01/2025 - 01/02/2025
Mục tiêu
- Bổ sung thời gian hoàn thiện ứng dụng
Nội dung
- Khóa sổ phạm vi frontend giai đoạn 1, bổ sung kiểm thử thủ công và kịch bản hồi quy cho các luồng quan trọng.
- Trình bày sản phẩm ứng dụng, chốt backlog giao cho giai đoạn backend để đảm bảo tích hợp trơn tru.
Buổi 15
01/02/2025 - 02/02/2025
Mục tiêu
- Khái niệm RESTful API
- Open API
- Khái niệm về Server, Docker image, Docker container
- Một số khái niệm Networking
- Khái niệm Clean Architecture
Nội dung
- Sử dụng Postman/Insomnia để định nghĩa hợp đồng API (OpenAPI), chia nhóm endpoint và quy tắc trả lỗi thống nhất.
- Vẽ lưu đồ/lược đồ hệ thống: kiến trúc logic, luồng dữ liệu, phân quyền và ranh giới giữa các bounded contexts.
- Khởi tạo dự án NestJS áp dụng Clean Architecture: tách module, use‑case và adapter, giúp mã nguồn dễ kiểm thử và mở rộng.
- Thiết lập môi trường phát triển bằng Docker/Docker Compose cho API, database và các dịch vụ phụ trợ.
- Kết nối NestJS với Firebase và cơ sở dữ liệu (Postgres/Prisma), cấu hình migration và seed dữ liệu mẫu.
Buổi 16
02/02/2025 - 03/02/2025
Mục tiêu
- Middleware
- JWT
- NestJS chuyên sâu
Nội dung
- Hoàn thiện các API chính với NestJS: middleware, validation/DTO, guard và filter để kiểm soát truy cập và xử lý lỗi nhất quán.
- Viết kiểm thử tích hợp API tự động, dựng dữ liệu thử bằng factory và đo lường độ bao phủ để ngăn hồi quy.
- Đóng gói ứng dụng bằng Docker multi‑stage, tối ưu kích thước image và thời gian build cho pipeline CI.
Buổi 17
03/02/2025 - 04/02/2025
Mục tiêu
- Tích hợp NestJS với Angular
- Trình bày được thiết kế Server và kiến trúc hệ thống Back-end
Nội dung
- Tích hợp API NestJS vào frontend Angular: cấu hình môi trường, interceptor auth và chiến lược xử lý lỗi tập trung.
- Thực hiện kiểm thử end‑to‑end giữa frontend và backend, xác nhận hợp đồng dữ liệu và hiệu năng cơ bản của các luồng chính.
Buổi 18
05/02/2025 - 06/02/2025
Mục tiêu
- Hoàn thành hoàn chỉnh các API
- Hoàn thành tích hợp NestJS với Angular
- Đóng gói và triển khai sản phẩm trên nền tảng điện toán đám mây
Nội dung
- Khép lại các API còn thiếu, tinh chỉnh truy vấn và bổ sung chỉ mục để đảm bảo độ trễ hợp lý.
- Hoàn tất tích hợp Angular–NestJS, đóng băng giao diện hợp đồng và bổ sung tài liệu sử dụng/triển khai.
- Đóng gói và triển khai bản demo lên nền tảng đám mây (Vercel/Render/Fly.io), kèm checklist giám sát và quy trình rollback.