Hướng dẫn giới thiệu Svelte.js
HEROPY
Miễn phí
Cơ bản / Svelte
4.9
(156)
3,300+
Bài giảng Svelte.js miễn phí cho người mới bắt đầu trong hơn 2 giờ!!
Cơ bản
Svelte
Dự án tìm kiếm phim Svelte.js SPA
Tạo và triển khai trang web tìm kiếm phim SPA dựa trên Svelte!
Svelte
Svelte
SPA
SPA
Đánh giá từ những học viên đầu tiên
5.0
5.0
jude
100% đã tham gia
Dự án tìm kiếm phim được thực hiện bằng Svelt đã hoàn thành :) Thực ra mình mua khóa học này cũng lâu rồi và chỉ xem qua phần đầu tiên, nhưng sau khi nghỉ việc và chuẩn bị học nghiêm túc về phát triển front-end, mình lại bắt đầu tìm hiểu lại. Lần đầu tiên tôi biết đến người hướng dẫn là qua bài giảng trên YouTube Svelt của anh ấy và những lời giải thích rất đơn giản và rõ ràng. Tôi nên nói gì đây... Có lẽ vì anh ấy là một nhà thiết kế nên anh ấy giảng dạy rất xuất sắc theo cách mà ai cũng có thể hiểu được. liệu họ có làm theo tốt những lời giải thích hay không, ngay cả khi họ có rất ít kiến thức cơ bản. Tôi đã so sánh bài giảng này với ví dụ về một trang tìm kiếm phim được tạo bằng Vue.js trong gói Super Gap của Fast Campus và tôi có thể thấy rằng số lượng mã đã giảm đáng kể và khái niệm cửa hàng phức tạp của Vue đã bị loại bỏ hoàn toàn, giúp việc thiết kế dự án trở nên dễ dàng hơn Tôi nghĩ tôi có thể nhìn thấy bức tranh lớn rõ ràng hơn. Và tôi nghĩ Svelt là một framework đang thực sự phát triển nhanh chóng mỗi ngày. Màn hình đầu tiên của Daum đã sử dụng Svelt, vì vậy tôi rất mong chờ tương lai vì nó không còn đủ để có thể sử dụng được trong thực tế. Vẫn còn rất nhiều React và Vue nhưng tôi có thể thấy từ Svelt xuất hiện dần dần trên thị trường việc làm haha. Nếu bạn muốn trở thành nhà phát triển front-end trong tương lai, tôi thực sự khuyên bạn không chỉ khóa học này mà còn cả phần giới thiệu về Svelt của giảng viên Park Young-woong và các bài giảng hướng dẫn đầy đủ :D Cảm ơn
5.0
mysend12
100% đã tham gia
Tôi rất quan tâm đến giao diện người dùng, nhưng tiến độ gọn gàng đến mức tôi có cảm giác như nó mắc kẹt trong đầu, và hơn hết là tôi rất vui khi xem nó!
5.0
정현진 Jeong
100% đã tham gia
Có rất nhiều thông tin thực sự hữu ích nên tôi đã học được rất nhiều.
Bạn sẽ nhận được điều này sau khi học.
Bạn có thể cấu hình SPA (Single Page Application) của Svelte.js!
Có thể tận dụng những ưu điểm và khắc phục những nhược điểm của SPA!
Bạn có thể dễ dàng xây dựng API backend bằng cách sử dụng Serverless Functions!
Sử dụng Svelte, với ví dụ tự tạo SPA trực tiếp!
.jpg?w=960)
Hãy tham khảo các bài giảng Svelte khác nữa!
"Hướng dẫn hoàn chỉnh Svelte.js Core API"
"Hướng dẫn nhập môn Svelte.js"
Bắt đầu!
Hãy tạo ví dụ về SPA (Single Page Application) bằng Svelte.js!
Bạn có thể sử dụng router để phân chia các trang và áp dụng nhiều tính năng khác nhau như hiệu ứng chuyển trang và khôi phục vị trí cuộn.
Bạn có thể nhanh chóng tạo và dễ dàng quản lý các API backend bằng cách sử dụng SF (Serverless Functions) mà không cần xây dựng máy chủ riêng biệt gây tốn kém,
giúp giải quyết các vấn đề bảo mật vốn là nhược điểm của SPA một cách nhanh chóng và dễ dàng!
Snowpack là công cụ xây dựng (build tool) mới nhất,
có thể rút ngắn đáng kể thời gian xây dựng trong quá trình phát triển.
Bạn có thể phát triển trong một môi trường thoải mái hơn!
Sử dụng CD (Triển khai liên tục) của Netlify.
Khi bạn tải lên kho lưu trữ GitHub, trang web sẽ được tự động triển khai ngay lập tức,
vì vậy bạn không cần phải tốn thời gian cho việc triển khai trang web nữa!
Hãy tham khảo nhé!
Bài giảng lần này tuy yêu cầu kiến thức nền tảng nhưng tôi đang cố gắng giải thích một cách dễ hiểu nhất có thể.
Sẽ tốt hơn nếu bạn nắm vững kiến thức cơ bản về Svelte thông qua khóa học 'Svelte.js Core API 완벽 가이드' đã ra mắt trước đó
rồi mới nghe bài giảng này.
Chúng ta sẽ tạo một trang web SPA có thể tìm kiếm phim thực tế bằng cách sử dụng OMDb API!
Bằng cách cấu hình API backend với Netlify Serverless Functions,
bạn có thể cung cấp chức năng tìm kiếm cho người dùng mà không làm lộ API Key.
GitHub Repo: https://github.com/HeropCode/Svelte-Movie-app
Demo: https://competent-cori-258206.netlify.app
Thông số kỹ thuật
Svelte
Snowpack
SPA Router
OMDb API
Netlify Hosting với GitHub(CD)
Netlify Serverless Functions
Gói phần mềm
snowpack
@snowpack/plugin-svelte
@snowpack/plugin-dotenv
@snowpack/plugin-sass
@snowpack/plugin-optimize
@snowpack/plugin-babel
babel-plugin-transform-remove-console
svelte
svelte-spa-router
autoprefixer
postcss
lodash
axios
qs
netlify-cli
Nếu có thắc mắc?
Nếu có bất kỳ thắc mắc nào trong quá trình học, vui lòng sử dụng trang Hỏi & Đáp.
Tôi sẽ phản hồi sớm nhất có thể.
Nếu bạn đang phân vân về việc đăng ký học hoặc có những thắc mắc khác trước khi đăng ký,
vui lòng sử dụng trang Hỏi đáp trước khi đăng ký.
Tài liệu Svelte.
Nếu bạn cần tài liệu tiếng Hàn về Svelte API,
hãy kiểm tra bài viết 'Svelte.js Hướng dẫn hoàn chỉnh (Renew)'.
https://heropy.blog/2019/09/29/svelte
Thông báo!
2020.12.24
Đã thêm phần tiếp theo!
Hãy nhớ xem trước khi bắt đầu các ví dụ trong toàn bộ bài giảng!
- 2-1. Thống nhất phiên bản module cho ví dụ bài giảng
Khuyến nghị cho
những người này
Khóa học này dành cho ai?
Dành cho những ai cần ví dụ về cách sử dụng Svelte.js!
Dành cho những ai đang chuẩn bị xây dựng trang web SPA!
Dành cho những ai muốn trải nghiệm Netlify Serverless Functions!
Cần biết trước khi bắt đầu?
HTML
CSS(SCSS)
JS
Svelte
Xin chào
Đây là HEROPY
Xác minh sự nghiệp
4,243
Học viên
224
Đánh giá
162
Trả lời
4.9
Xếp hạng
3
Các khóa học
Xin chào~ Rất vui được gặp các bạn! Tôi là Park Young-woong, hiện là nhà phát triển Frontend đang phát triển giải pháp quản lý doanh nghiệp tại một startup nhỏ. Tôi cũng đang vận hành blog kỹ thuật HEROPY.
Xin chào~ Rất vui được gặp các bạn!
Tôi là Park Young-woong, hiện là nhà phát triển Frontend đang phát triển các giải pháp quản lý doanh nghiệp tại một startup nhỏ.
Tôi đang vận hành blog kỹ thuật HEROPY,
ngoài ra tôi cũng tham gia các hoạt động giảng dạy tại doanh nghiệp và các khóa học online/offline.
Blog: https://heropy.blog
Youtube: https://www.youtube.com/channel/UCcjhMpoaNvyy0StN9KgtF6w
Email: thesecon@gmail.com
Chương trình giảng dạy
Tất cả
49 bài giảng ∙ (7giờ 46phút)
Ngày đăng:
Cập nhật lần cuối:
Đánh giá
Tất cả
30 đánh giá
5.0
30 đánh giá
mysendĐánh giá 4
∙
Đánh giá trung bình 5.0
5
100% đã tham giaTôi rất quan tâm đến giao diện người dùng, nhưng tiến độ gọn gàng đến mức tôi có cảm giác như nó mắc kẹt trong đầu, và hơn hết là tôi rất vui khi xem nó!
- heropyGiảng viên
Cảm ơn bạn đã thích bài giảng của tôi~ Tôi rất vui vì bạn thích nó. Tôi hy vọng bài giảng này hữu ích~ Cảm ơn bạn.😉
- shk72301233
Đánh giá 7
∙
Đánh giá trung bình 5.0
5
100% đã tham giaDự án tìm kiếm phim được thực hiện bằng Svelt đã hoàn thành :) Thực ra mình mua khóa học này cũng lâu rồi và chỉ xem qua phần đầu tiên, nhưng sau khi nghỉ việc và chuẩn bị học nghiêm túc về phát triển front-end, mình lại bắt đầu tìm hiểu lại. Lần đầu tiên tôi biết đến người hướng dẫn là qua bài giảng trên YouTube Svelt của anh ấy và những lời giải thích rất đơn giản và rõ ràng. Tôi nên nói gì đây... Có lẽ vì anh ấy là một nhà thiết kế nên anh ấy giảng dạy rất xuất sắc theo cách mà ai cũng có thể hiểu được. liệu họ có làm theo tốt những lời giải thích hay không, ngay cả khi họ có rất ít kiến thức cơ bản. Tôi đã so sánh bài giảng này với ví dụ về một trang tìm kiếm phim được tạo bằng Vue.js trong gói Super Gap của Fast Campus và tôi có thể thấy rằng số lượng mã đã giảm đáng kể và khái niệm cửa hàng phức tạp của Vue đã bị loại bỏ hoàn toàn, giúp việc thiết kế dự án trở nên dễ dàng hơn Tôi nghĩ tôi có thể nhìn thấy bức tranh lớn rõ ràng hơn. Và tôi nghĩ Svelt là một framework đang thực sự phát triển nhanh chóng mỗi ngày. Màn hình đầu tiên của Daum đã sử dụng Svelt, vì vậy tôi rất mong chờ tương lai vì nó không còn đủ để có thể sử dụng được trong thực tế. Vẫn còn rất nhiều React và Vue nhưng tôi có thể thấy từ Svelt xuất hiện dần dần trên thị trường việc làm haha. Nếu bạn muốn trở thành nhà phát triển front-end trong tương lai, tôi thực sự khuyên bạn không chỉ khóa học này mà còn cả phần giới thiệu về Svelt của giảng viên Park Young-woong và các bài giảng hướng dẫn đầy đủ :D Cảm ơn
- hanmg
Đánh giá 10
∙
Đánh giá trung bình 4.9
5
100% đã tham giaCảm ơn bạn vì bài giảng tuyệt vời. Tôi đã có thể thu được nhiều thông tin không chỉ về mảnh dẻ mà còn về cả netlify, những thông tin cần thiết cho quá trình triển khai thực tế.
- heropyGiảng viên
Tôi rất vui vì bài giảng của tôi hữu ích cho HAN_MG. Tôi hy vọng tôi có thể quay lại với một bài giảng hay hơn ~ 😆 Cảm ơn
- the27920609
Đánh giá 13
∙
Đánh giá trung bình 5.0
5
100% đã tham giaĐó là điều tốt nhất. Đây là một cấu trúc bài giảng rất gọn gàng.
- heropyGiảng viên
Xin chào Jon~ Cảm ơn bạn vì bài đánh giá tuyệt vời và đáng khích lệ ~👍 Chúc một ngày tốt lành!
Khóa học khác của HEROPY
Hãy khám phá các khóa học khác của giảng viên!
![Hướng dẫn hoàn hảo về Svelte.js [Core API]Hình thu nhỏ khóa học](https://cdn.inflearn.com/public/course-325523-cover/f70444f1-ed0a-4b46-b5ec-39c250885e9a?w=420)
Khóa học tương tự
Khám phá các khóa học khác trong cùng lĩnh vực!
![Chinh phục hoàn toàn GraphQL (khóa học full stack vừa học vừa tạo kiosk) - [Đổi mới một phần vào năm 2024]Hình thu nhỏ khóa học](https://cdn.inflearn.com/public/courses/329186/cover/a63c6c95-2318-4e7a-a4f0-34d4512b3ae6/329186-eng.png?w=420)