Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Master Svelte 5 & SvelteKit – Build & Deploy Real-World Apps

Thành thạo Svelte 5 & SvelteKit – Xây dựng & Triển khai Ứng dụng Thực tế

Thành thạo Svelte 5 & SvelteKit – Xây dựng & Triển khai Ứng dụng Thực tế

Học Cú pháp Svelte 5 Rune, Xây dựng với Stripe, Supabase, OpenAI – Học Svelte qua các dự án thực tế!

4.5
(507 đánh giá)
3,454 học viên
Giảng viên
Niklas Fischer
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 1.149.000đ -96%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
16.0 giờ video
127 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026

Bạn sẽ học được gì

Xây dựng ứng dụng web hiện đại bằng Svelte 5 và SvelteKit, áp dụng cú pháp mới nhất, bao gồm cú pháp Rune, vào các dự án thực tế.
Tích hợp các dịch vụ bên thứ ba như Stripe, Supabase và OpenAI vào ứng dụng web để xử lý thanh toán, xác thực và nhận diện hình ảnh.
Phát triển và triển khai ứng dụng được render từ server với tính tương tác cao, nhẹ và tối ưu hiệu suất bằng SvelteKit.
Tạo một ứng dụng CRUD đầy đủ chức năng với xác thực, quản lý cơ sở dữ liệu và giao diện người dùng, bao gồm tải lên và xử lý hình ảnh thông qua AI.
Cách sử dụng TypeScript trong Svelte & SvelteKit

Yêu cầu

Cần kiến thức JavaScript, mọi thứ khác bạn có thể học trong khóa học. Không cần biết trước bất kỳ framework nào

Đối tượng phù hợp

Dành cho lập trình viên JavaScript muốn mở rộng kỹ năng và thành thạo Svelte 5 & SvelteKit bằng cách xây dựng dự án thực tế.
Frontend developer muốn học một framework hiện đại, nhanh và nhẹ để dẫn đầu trong phát triển web.
Freelancer muốn cung cấp cho khách hàng các ứng dụng web hiệu suất cao với tích hợp Svelte, Stripe, Supabase và OpenAI.
Developer đã quen với các JavaScript framework khác, muốn tìm hiểu một giải pháp thay thế hiệu suất cao và dễ sử dụng hơn để xây dựng ứng dụng web.

Nội dung khóa học

6 phần • 126 bài giảng
1 Về khóa học này
2 Cách học khóa học hiệu quả
3 Tất cả tài liệu cho khóa học
4 Svelte 5 Ra mắt – Điều gì đã thay đổi trong khóa học này?
1 Cấu trúc một File Svelte
2 Reactivity trong Svelte - state & derived rune
3 Sử dụng reactive state trong inputs và effect rune
4 Debug trong Svelte - Inspect rune
5 Truyền props giữa các Svelte component
6 Snippets, ngôn ngữ template và reactive state nâng cao
1 Cấu trúc & Định tuyến trong SvelteKit
2 Fetch dữ liệu phía server với file page.server.ts
3 Fetch dữ liệu phía server & client với hàm load
4 Xây dựng API endpoints trong SvelteKit
1 TÀI NGUYÊN DỰ ÁN
2 Tổng quan Dự án: Landing Page cho Sản phẩm Số với tích hợp Thanh toán
3 Tùy chọn: Trường hợp bạn không muốn viết CSS
4 Bắt đầu - Thiết lập dự án ban đầu (svelte & css reset)
5 Phần Hero - Cấu trúc HTML
6 Phần Hero - Styling
7 Tạo một button tái sử dụng - HTML
8 Button - Styling
9 Phần Xem trước Chương
10 Xem trước Chương - Styling
11 Xem trước Chương - Ngôn ngữ template Svelte - Cách dùng từ khóa #each
12 Xem trước Chương - Render nội dung động dựa trên input người dùng
13 Xem trước Chương - Dùng derived state để đơn giản hóa cấu trúc code
14 Phần Giới thiệu Tác giả - Cấu trúc HTML
15 Phần Giới thiệu Tác giả - Styling
16 Phần Câu hỏi Thường gặp (FAQ) - Cấu trúc HTML
17 Phần Câu hỏi Thường gặp (FAQ) - Styling
18 Phần Câu hỏi Thường gặp (FAQ) - Chức năng
19 Thiết lập Tài khoản Stripe
20 Giải thích khái niệm tích hợp thanh toán với Stripe
21 Code tích hợp Stripe
22 Trang Thành công & Thất bại sau thanh toán
23 Đăng ký tài khoản Sendgrid & Tạo API key
24 Triển khai lên vercel & thiết lập stripe webhook
25 Gửi email chứa sản phẩm số khi nhận webhook thanh toán từ stripe
26 Tùy chọn: Cách bảo mật stripe webhook của bạn
1 TÀI NGUYÊN DỰ ÁN
2 Tổng quan dự án & cơ sở hạ tầng ứng dụng
3 Thiết lập dự án
4 Phần Hero
5 Component Button Linh hoạt
6 Styling cho Button Linh hoạt
7 Component Tiêu đề Phần
8 Phần Giới thiệu Bản thân (About Me)
9 Styling Phần Giới thiệu Bản thân
10 Bảng Kinh nghiệm Làm việc
11 Styling Bảng Kinh nghiệm Làm việc
12 Thiết lập Sanity
13 Fetch dữ liệu từ Sanity trong frontend SvelteKit
14 Hiển thị dữ liệu Sanity trên frontend
15 Phần Dự án Của Tôi (My Work) - Schema dữ liệu Sanity & thêm dữ liệu
16 Thiết lập kiểu dữ liệu cho dữ liệu thô và đã xử lý từ Sanity
17 Xử lý dữ liệu từ thô sang dạng có thể dùng trên frontend
18 Phần Dự án Của Tôi - Cấu trúc HTML
19 Phần Dự án Của Tôi - Styling
20 Định tuyến động & tải bài viết blog
21 Render bài viết blog trên frontend
22 Styling bài viết blog
23 Tạo kỹ năng & thêm icon kỹ năng
24 Phần Kỹ năng
25 Phần Kỹ năng - styling
26 Phần Liên hệ
27 Phần Liên hệ - Styling
28 Xác thực Frontend cho form Liên hệ
29 Xử lý phần liên hệ trong backend endpoint
30 Header
31 Header - Styling
32 Cấu trúc & Styling Footer
33 Triển khai dự án lên vercel
1 TÀI NGUYÊN DỰ ÁN
2 Tổng quan Dự án
3 Thiết lập Dự án
4 Phần Hero
5 Phần Hero - Styling
6 Component Button Linh hoạt
7 Button Linh hoạt - Styling
8 Header
9 Header - Styling
10 Form Xác thực cho Trang Đăng ký & Đăng nhập
11 Form Xác thực - Styling
12 Form Actions trong SvelteKit cho Đăng ký & Đăng nhập
13 Thiết lập Supabase
14 Đăng ký Supabase với Email và Mật khẩu
15 Tổng quan Luồng Xác thực Svelte & Supabase
16 Triển khai xác thực phía server
17 Form action đăng nhập
18 Thiết lập context để theo dõi trạng thái người dùng
19 Đăng nhập xã hội với Google
20 Thiết lập cơ sở dữ liệu và thêm username khi đăng ký
21 Sửa lỗi đăng xuất
22 Lấy sách từ supabase
23 Lấy & Hiển thị username
24 Thanh điều hướng bên & Layout Xác thực
25 Layout Xác thực - Styling
26 Bảng điều khiển Người dùng (Dashboard)
27 Bảng điều khiển Người dùng - Styling
28 Component Thẻ Sách
29 Thẻ Sách - Styling
30 Component Đánh giá Sao
31 Đánh giá Sao - Styling
32 Tích hợp Đánh giá Sao với Thẻ Sách và kết nối Cơ sở dữ liệu
33 Component Danh mục Sách
34 Danh mục Sách - Styling
35 Lọc sách theo các danh mục khác nhau
36 Trang Sách Cá nhân
37 Trang Sách Cá nhân - Styling
38 Chế độ Chỉnh sửa trên Trang Sách
39 Trường Chỉnh sửa - Styling
40 Cập nhật sách trong cơ sở dữ liệu
41 Tải lên bìa sách với supabase storage
42 Droparea - Styling
43 Giao diện Xóa sách và xóa khỏi supabase db
44 Trang Quét Kệ sách với Dropzone
45 Tích hợp OpenAI - Gửi ảnh đến chat-gpt để nhận mảng sách
46 Trang Quét Kệ sách - Bảng sách và tích hợp state
47 Trang Quét Kệ sách - Styling
48 Thêm sách vào cơ sở dữ liệu qua trang scan-shelf
49 Trang Cài đặt & Tính toán thống kê người dùng
50 Trang Cài đặt - Styling
51 Chỉnh sửa thông tin tài khoản trên trang cài đặt
52 Xóa tài khoản và dọn dẹp dự án và CẢM ƠN BẠN!!!
53 Triển khai dự án

Giới thiệu khóa học

Learn Svelte 5 from scratch through hands-on, real-world projects! Whether you're a JavaScript developer eager to explore a hot new framework or looking to add modern web development skills to your toolkit, this course is for you.


Why Learn Svelte & SvelteKit?

Svelte is a revolutionary framework that compiles your code to pure JavaScript, making your web apps fast, lightweight, and highly efficient. Unlike other frameworks, Svelte doesn’t rely on a virtual DOM, meaning it ships less code and performs faster. Pair it with SvelteKit, and you’ve got a full-featured toolkit for building server-rendered, highly interactive, and accessible apps with ease.
With Svelte 5, the code you write is even leaner and more efficient, and this course covers all the new syntax and best practices, making it the perfect time to start learning Svelte.

What You’ll Learn:

  • Master the brand-new Svelte 5 features

  • Build three fully-functional projects: from a product landing page with Stripe integration to authenticated web apps

  • Integrate Stripe for payments, Sanity CMS for content management, and Supabase for authentication

  • Automate emails with SendGrid and connect your app to OpenAI for image recognition

  • Apply project-based learning to solve real problems

  • How to use TypeScript within a Svelte & SvelteKit app (second & third project are using it)


Course Overview:

This course takes you deep into Svelte 5, the next major version of the Svelte framework. You’ll build three progressively complex projects, designed to help you level up with practical, hands-on learning. The second and third project are written in TypeScript, while the first one uses vanilla JavaScript.

  1. eBook Landing Page with Stripe Integration
    Create a sleek landing page to sell a product online, fully integrated with Stripe for payments. Learn how to handle webhooks with your SvelteKit API endpoints and send emails with the ebook automatically when receiving a request from Stripe.

  2. Developer Portfolio with Sanity CMS
    Showcase your skills with a developer portfolio powered by Sanity CMS. Capture contact requests using a dynamic form, and use SendGrid to send personalized emails. Ideal for freelance developers looking to land new clients.

  3. Authenticated CRUD App with Supabase and OpenAI
    Dive into user authentication, database management, and image recognition with this feature-rich app. Upload book covers and leverage OpenAI to recognize books from a bookshelf image. The ultimate full-stack project!


Why This Course?

  • Project-Based Learning: Forget boring theory! Each project tackles real-world scenarios that you’ll use in your own work.

  • Svelte 5 Syntax: Be one of the first to learn Svelte 5, including the latest syntax and features.

  • Progressive Difficulty: As you progress, the projects get more advanced, helping you build confidence and a solid understanding of SvelteKit.

  • CSS Simplified: Every project comes with a skeleton CSS templates to skip styling videos and focus on JavaScript and Svelte functionality. If you don't want to, you don't have to write a single line of CSS.


Who is This Course For?

Everybody who knows JavaScript. Svelte is super easy to pick up and everything you need to know is covered in the course.

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Frontend Development
Hiển thị tất cả khoá học Svelte
Hiển thị tất cả khoá học Sveltekit
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊