강의

N
챌린지

멘토링

N
클립

로드맵

Programming

/

Web Development

Dễ dàng học Svelte với các dự án (SvelteKit + Supabase)

Thực hành và triển khai dự án có hệ thống, sử dụng cửa hàng tích hợp sẵn và ứng dụng toàn ngăn xếp cùng một lúc với SvelteKit và Supabase!

(5.0) 9 đánh giá

82 học viên

  • Michael Kwon
실습 중심
Svelte
sveltekit
supabase

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • Tìm hiểu các chức năng cốt lõi của giao diện người dùng và phát triển kỹ năng giải quyết vấn đề thông qua các dự án về nhiều chủ đề khác nhau, từ trang chủ, trò chơi thông thường đến ứng dụng toàn diện.

  • Chúng tôi sử dụng cú pháp ngắn gọn và trực quan của Svelte để xây dựng kiến ​​trúc dựa trên thành phần và bao gồm các chủ đề chính như quản lý trạng thái, xử lý sự kiện và định tuyến.

  • Tạo và xây dựng các dự án thông qua Vite và dễ dàng triển khai chúng lên web thông qua GitHub và Vercel.

  • Bạn có thể dễ dàng tìm hiểu cách xử lý quản lý trạng thái toàn cầu thông qua cửa hàng tích hợp sẵn.

  • Dễ dàng phát triển các ứng dụng full-stack với SvelteKit và Supabase.

  • Bạn có thể học được rất nhiều thứ trong một khoảng thời gian tối thiểu.

Thực hành và triển khai dự án từng bước một cách có hệ thống, sử dụng kho lưu trữ tích hợp và phát triển ứng dụng đầy đủ với SvelteKit và Supabase—tất cả trong một nơi!

Khóa học này nhằm mục đích cung cấp kiến thức thực tế về các nguyên tắc cơ bản của Svelte , phù hợp với các xu hướng phát triển web mới nhất. Svelte tự hào với tính trực quan, thiết kế gọn nhẹ, hiệu suất tuyệt vời và khả năng tối ưu hóa thời gian biên dịch hiệu quả để giảm kích thước mã và mang lại hiệu suất vượt trội.

Đối với những người mới bắt đầu đã học những kiến thức cơ bản về HTML, CSS và JavaScript và hiện muốn tìm hiểu một khuôn khổ (thư viện), nó có thể khơi dậy hứng thú của họ trong lĩnh vực phát triển, và đối với những nhà phát triển đã sử dụng các khuôn khổ khác, đây là lựa chọn thứ hai tốt nhất để trải nghiệm sự đơn giản và linh hoạt của Svelte so với các khuôn khổ UI hiện có!

Ngày càng nhiều nhà phát triển và công ty sử dụng Svelte (SvelteKit) để phát triển ứng dụng web, và các dự án được xây dựng bằng Svelte đang vận hành thành công. Đừng chỉ học cú pháp rồi chán nản bỏ cuộc. Hãy học bằng cách xây dựng!

💡 Học tập thực hành theo dự án

  • Bạn có thể trải nghiệm những lớp học thú vị, nơi bạn dần dần tiếp thu kiến thức thông qua các dự án thay vì chỉ tập trung vào ngữ pháp.

  • Phương tiện trực quan và lời giải thích ngắn gọn, dễ hiểu giúp người mới bắt đầu học dễ dàng hơn.

Tìm hiểu về những điều này

1⃣ Trang chủ thông tin phim

Bạn sẽ học những kiến thức cơ bản về phát triển ứng dụng front-end, bao gồm các thành phần, liên kết dữ liệu, xử lý biến trạng thái, nội dung động và vòng đời.

1

Trang chủ thông tin phim

2⃣ Trang chủ thương hiệu

Bạn có thể triển khai các trang động bằng cách sử dụng các tính năng định tuyến để kết nối các trang và truyền dữ liệu đến các trang bằng tham số URL. Cuối cùng, bạn có thể triển khai kết quả lên web.

2.thương hiệu-nhà

Trang chủ thương hiệu

3⃣ Tạo một trò chơi thông thường

Chúng ta sẽ tìm hiểu toàn diện các kỹ năng phát triển cốt lõi mà chúng ta đã học cho đến nay, chẳng hạn như phát triển chức năng ở cấp độ thành phần, quản lý trạng thái, sự kiện và vòng đời, đồng thời tận dụng tối đa quản lý trạng thái toàn cầu để quản lý điểm trò chơi.

3. trò chơi bài

Trò chơi thông thường (ghép cặp)

Ứng dụng Nhật ký 4⃣ (SvelteKit + Supabase)

Thông qua dự án SvelteKit, mở rộng chức năng của Svelte, bạn sẽ học cách xử lý định tuyến dựa trên tệp, logic phía máy chủ và thậm chí xây dựng một ứng dụng đầy đủ tích hợp với cơ sở dữ liệu thực. Với Supabase, bạn có thể dễ dàng xử lý cơ sở dữ liệu đám mây.

4.Ứng dụng nhật ký

Ứng dụng nhật ký

Những điều cần lưu ý trước khi tham gia khóa học

Môi trường thực hành

  • Hệ điều hành và Phiên bản (OS): Hỗ trợ tất cả các hệ điều hành, bao gồm Windows, macOS và Linux.

  • Công cụ sử dụng: Visual Studio Code, tài khoản GitHub

  • Thông số kỹ thuật của PC: PC có thông số kỹ thuật cơ bản có khả năng truy cập Internet

Tài liệu học tập

  • Định dạng tài liệu học tập được cung cấp: Chia sẻ liên kết GitHub, văn bản, mã nguồn, v.v.

  • Số lượng và dung lượng: Tài liệu học tập được cung cấp cho từng phần

Kiến thức và biện pháp phòng ngừa của người chơi

  • Cơ bản về HTML, CSS, JavaScript


  • Bài giảng này được giữ bản quyền bởi tác giả, nghiêm cấm phân phối và sao chép trái phép. Tài liệu học tập cũng được giữ bản quyền, nghiêm cấm mọi hành vi sử dụng cho mục đích khác ngoài mục đích học tập cá nhân.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Những người có hiểu biết cơ bản về HTML, CSS và JavaScript nhưng có ít kinh nghiệm sử dụng framework hoặc thư viện.

  • Bất cứ ai muốn tìm hiểu những điều cơ bản về front-end

  • Những người muốn học nhanh và tập trung vào đào tạo thực tế

  • Các nhà phát triển muốn có kết quả nhanh chóng so với đầu vào

Cần biết trước khi bắt đầu?

  • Khái niệm cơ bản về HTML, CSS và JavaScript

Xin chào
Đây là

225

Học viên

24

Đánh giá

17

Trả lời

5.0

Xếp hạng

5

Các khóa học

스타트업에서 멀티미디어 콘텐츠 크리에이터로 입문하여 한 분야에만 머물지 않고 게임과 웹, 멀티미디어 분야에서 기획과 개발을 주도하며 현업에서 다양한 상용 작품을 런칭했습니다. 대학에서 디지털 미디어와 영상학을 전공했으며 주요 교육기관에서 웹 디자인과 프론트엔드 개발 및 미디어 교육(10년 이상) 등을 진행하면서 튜토리얼도 제작하고 있습니다.

- 저서 -

자바스크립트 프로젝트북(한빛미디어,2017)

Chương trình giảng dạy

Tất cả

104 bài giảng ∙ (8giờ 23phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

9 đánh giá

5.0

9 đánh giá

  • leaguematter7718님의 프로필 이미지
    leaguematter7718

    Đánh giá 5

    ∙

    Đánh giá trung bình 4.6

    5

    100% đã tham gia

    The lectures are structured in short, functional units, making it easy to learn.

    • csslick
      Giảng viên

      Mr. Lee Jong-su, thank you for your valuable feedback~

  • startop10님의 프로필 이미지
    startop10

    Đánh giá 4

    ∙

    Đánh giá trung bình 4.0

    5

    100% đã tham gia

    You explain the charm of svelte in a clear and easy-to-understand way. Thank you.

    • csslick
      Giảng viên

      Thank you for your valuable evaluation and comments~

  • grooveturtle290048님의 프로필 이미지
    grooveturtle290048

    Đánh giá 10

    ∙

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    I think this will be a good warm-up lecture for those who are new to Svelte. Since you learn by progressing through projects, it is not boring and you can quickly finish the course in a short period of time, which is good.

    • csslick
      Giảng viên

      Mr. Rocking Turtle, thank you for your valuable feedback!

  • antk7894님의 프로필 이미지
    antk7894

    Đánh giá 1

    ∙

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    I took the course because I wanted to try out Svelte and SvelteKit, and I think I was able to learn both the basics and applications well. I liked the parts that were explained with actual references, and I was also very satisfied with the parts where I could refer to GitHub as a branch for each lecture. Thank you for the valuable lecture!!

    • csslick
      Giảng viên

      Thank you for your active participation in class and valuable opinions ^^;

  • kimks018540님의 프로필 이미지
    kimks018540

    Đánh giá 1

    ∙

    Đánh giá trung bình 5.0

    5

    92% đã tham gia

    Through this lecture, I was able to truly feel the charm of Svelte, SvelteKit, and Supabase! The curriculum is concise and systematic, from the basics to the application, and especially thanks to the project, I was able to apply what I learned right away, which made it much easier to understand. I have experience using other frameworks, so I can compare, but I am completely immersed in the simplicity and efficiency of Svelte. The backend integration using Supabase was explained in an easy-to-understand manner, so I was able to naturally learn the parts that were unfamiliar at first. The instructor's explanations were clear and kind, so it was easy to understand, and the parts that corrected actual errors and tips in the middle of the class were also useful~

    • csslick
      Giảng viên

      The simplicity of Svelte is a big attraction. Our lectures are the same. Thank you for your valuable opinion~

1.044.612 ₫

Khóa học khác của Michael Kwon

Hãy khám phá các khóa học khác của giảng viên!

Learning TypeScript Basics Easily Through ProjectsCourse Thumbnail

Learning TypeScript Basics Easily Through Projects

Michael Kwon

TypeScript: Core concepts, from basic to practical, all at once! Practical application through a project.

Basic

Basic

JavaScript, TypeScript, TailwindCSS

Learning TypeScript Basics Easily Through ProjectsCourse Thumbnail

Learning TypeScript Basics Easily Through Projects

Michael Kwon

Vanilla JavaScript & Tailwind CSSCourse Thumbnail

Vanilla JavaScript & Tailwind CSS

Michael Kwon

Practical web UI development using AI and component-centric UI creation, An essential course for Designers + Developers!

Basic

Basic

JavaScript, vanilla-javascript, frontend

Vanilla JavaScript & Tailwind CSSCourse Thumbnail

Vanilla JavaScript & Tailwind CSS

Michael Kwon

From Figma design to publishingCourse Thumbnail

From Figma design to publishing

Michael Kwon

All-in-one course for designers and developers! New UI3 included

Basic

Basic

Figma, HTML/CSS

From Figma design to publishingCourse Thumbnail

From Figma design to publishing

Michael Kwon

Creating a job search site with Vue3 and SupabaseCourse Thumbnail

Creating a job search site with Vue3 and Supabase

Michael Kwon

From developing your own full-stack application to a Progressive Web App (PWA)!

Basic

Basic

Vue.js, supabase, Vue 3

Creating a job search site with Vue3 and SupabaseCourse Thumbnail

Creating a job search site with Vue3 and Supabase

Michael Kwon

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!

[Fullstack Complete] Clone 3 websites with Supabase (Next.js 14)Course Thumbnail

[Fullstack Complete] Clone 3 websites with Supabase (Next.js 14)

lopun

Supabase: Giving Wings to Full-stack Development! Through 3 clone projects, you will quickly learn how to build practical-level full-stack applications using Next.js 14 and Supabase.

Basic

Basic

Next.js, supabase, TailwindCSS

[Fullstack Complete] Clone 3 websites with Supabase (Next.js 14)Course Thumbnail

[Fullstack Complete] Clone 3 websites with Supabase (Next.js 14)

lopun

Inflearn Clone Coding All-in-One LMS Solution: Multilingual HLS Streaming-Based MVP Project Built with Next.js·Flutter·AWS·SupabaseCourse Thumbnail

Inflearn Clone Coding All-in-One LMS Solution: Multilingual HLS Streaming-Based MVP Project Built with Next.js·Flutter·AWS·Supabase

ludgi

This course is not just simple clone coding or a basic tutorial. By implementing an LMS (Learning Management System) platform like Inflearn from start to finish at an MVP level, it provides an all-in-one solution that freelancers, solo developers, and early-stage startup members can immediately apply in real-world projects. We cover the entire tech stack used in actual production environments at once: Next.js, Flutter, Supabase, Firebase (FCM), AWS, Vercel, Xcode, Android Studio, ElevenLabs, and Toss Payments. You'll experience the complete process of simultaneously developing web and mobile apps, including social login, automatic multilingual dubbing, HLS streaming-based lecture playback, payment integration, and deployment to the App Store and Play Store. This course focuses on the important workflows, configurations, and deployment processes that matter in real-world development, rather than detailed line-by-line coding. Therefore, it's suitable for developers looking to become independent freelancers, teams that need to quickly validate MVPs at startups, and junior developers who want to experience the full scope of real-world development.

Intermediate

Intermediate

Flutter, AWS, supabase

Inflearn Clone Coding All-in-One LMS Solution: Multilingual HLS Streaming-Based MVP Project Built with Next.js·Flutter·AWS·SupabaseCourse Thumbnail

Inflearn Clone Coding All-in-One LMS Solution: Multilingual HLS Streaming-Based MVP Project Built with Next.js·Flutter·AWS·Supabase

ludgi

Getting Started with Supabase and Next Full Stack (feat. Supabase OAuth, Next.js 14)Course Thumbnail

Getting Started with Supabase and Next Full Stack (feat. Supabase OAuth, Next.js 14)

dodocoding

Firebase's SQL version! You can master the basics of Next.js full-stack development through Supabase!

Basic

Basic

Next.js, supabase, React

Getting Started with Supabase and Next Full Stack (feat. Supabase OAuth, Next.js 14)Course Thumbnail

Getting Started with Supabase and Next Full Stack (feat. Supabase OAuth, Next.js 14)

dodocoding

[Fullstack Introduction] Supabase, 10x Better Than FirebaseCourse Thumbnail

[Fullstack Introduction] Supabase, 10x Better Than Firebase

lopun

Supabase to give wings to full-stack development! Complete full-stack development in 2 hours with Supabase, a superset of Firebase.

Basic

Basic

PostgreSQL, Next.js, TailwindCSS

[Fullstack Introduction] Supabase, 10x Better Than FirebaseCourse Thumbnail

[Fullstack Introduction] Supabase, 10x Better Than Firebase

lopun

Learn Svelte by BuildingCourse Thumbnail

Learn Svelte by Building

Indie Coder

This course will teach you the latest front-end framework, Svelte. After learning the basics of Svelte, you will learn how to use Svelte in real projects by creating a Todo app.

Basic

Basic

Svelte

Learn Svelte by BuildingCourse Thumbnail

Learn Svelte by Building

Indie Coder

Complete Mastery of GraphQL (Full-stack Course Learning by Building a Kiosk) - [2024 Partial Renewal]Course Thumbnail

Complete Mastery of GraphQL (Full-stack Course Learning by Building a Kiosk) - [2024 Partial Renewal]

Indie Coder

You will learn the basics and advanced usage of GraphQL, the next-generation API control technology, and gain real-world project experience through a virtual kiosk service created with GraphQL. The course has been partially updated to the latest version, apollo-server v4, as of February 2024.

Basic

Basic

GraphQL, Svelte, MongoDB

Complete Mastery of GraphQL (Full-stack Course Learning by Building a Kiosk) - [2024 Partial Renewal]Course Thumbnail

Complete Mastery of GraphQL (Full-stack Course Learning by Building a Kiosk) - [2024 Partial Renewal]

Indie Coder

Web frontend starting with SvelteCourse Thumbnail

Web frontend starting with Svelte

Indie Coder

This is a basic lecture that summarizes the core usage methods of Svelte, a front-end framework that is gaining attention worldwide. I created this lecture in the hope that more people in Korea can use Svelte easily and conveniently.

Basic

Basic

Svelte

Web frontend starting with SvelteCourse Thumbnail

Web frontend starting with Svelte

Indie Coder

Svelte REST-API projectCourse Thumbnail

Svelte REST-API project

Indie Coder

This lecture is a video lecture on the latter part of the book, ‘Web Frontend with Svelte’, which I wrote, about creating a SLOG project. I prepared this lecture in the hope that it would supplement the parts that were a bit lacking in the book and make more people interested in the frontend framework called Svelte.

Basic

Basic

Svelte, REST API

Svelte REST-API projectCourse Thumbnail

Svelte REST-API project

Indie Coder

Non-Developer Creates Profitable Service in Just 4 Weeks: AI Vibe Coding Web + App ALL IN ONE

dingcodingco

Don't know coding? OK! Turn your ideas into real revenue in just 4 weeks. Using AI and the latest tools, create websites and apps simultaneously and connect them directly to services.

Beginner

Beginner

Flutter, Next.js, cursor

Non-Developer Creates Profitable Service in Just 4 Weeks: AI Vibe Coding Web + App ALL IN ONE

dingcodingco