Главная страница Категория svelte Svelte и Firebase: Полный курс (2023)

Svelte и Firebase: Полный курс (2023)

Name: Svelte и Firebase: Полный курс (2023)
Price: 13 USD
Rating: 5 (10 reviews)

Svelte and Firebase: The Full Course (2023)

udemy

Начать Сейчас

Продолжительность

25 ч 26 мин

Категория

Svelte

Количество уроков

281 Видео

Дата добавления

18 июн. 2023 г., 02:01

Язык

Английский

Дата выхода

1 мая 2023 г., 01:00

Этот курс охватывает создание двух приложений с использованием фреймворка Svelte. Большая часть функциональности создается с нуля без использования сторонних пакетов. В курсе рассматриваются такие темы, как валидация форм, пагинация, модальные окна, всплывающие окна, Snackbar и многое другое. Вы научитесь создавать все с нуля.

Курс предоставляет понятные объяснения работы Svelte на основе реальных проектов. Он поможет вам получить уверенность и навыки, необходимые для начала работы над любым проектом.

Студенты должны иметь базовые знания JavaScript, чтобы начать работу над этим курсом.

Что такое Svelte?

Svelte - это новый радикальный подход к созданию пользовательских интерфейсов. В отличие от традиционных фреймворков, таких как React и Vue, которые выполняют большую часть своей работы в браузере, Svelte переносит эту работу на этап компиляции при построении вашего приложения.

Вместо использования техник, таких как сравнение виртуального DOM, Svelte пишет код, который оперативно обновляет DOM при изменении состояния вашего приложения.

На первом приложении будет рассмотрены основные функции Svelte на реальном проекте - клоне Trello, простом приложении для управления задачами.

Во втором приложении студенты создадут приложение, похожее на Twitter, с нуля - часть разметки HTML не является частью курса (она будет предоставлена в материалах курса, чтобы сэкономить время и сосредоточиться исключительно на Svelte). Основное внимание в курсе уделяется программированию, а не написанию HTML-кода.

Курс начинается с подготовки базового макета приложения. Все дизайны - изображения и контент - предоставляются преподавателем.

Содержание можно кратко охарактеризовать следующими пунктами:

Подготовка макета: несколько лекций по подготовке HTML для вашего приложения и разделение макета на компоненты Svelte.
Синтаксис шаблонов: использование специального синтаксиса внутри HTML.
Директивы и события: привязка значений переменных.
Маршрутизация с использованием Svelte Kit: создание "многостраничного" приложения, настройка маршрутизации с различными стратегиями и навигация по маршрутам.
Реактивность: объяснение создания и управления реактивными данными.
Функции жизненного цикла: использование onMount и onDestroy.
Хранилища (stores): более сложные реактивные данные.
Анимации (переходы): добавление эффектов с использованием Svelte.
Аутентификационные формы: создание реактивной формы и привязка данных к вводу формы.
Пользовательская валидация форм: создание пользовательской валидации ввода/формы и обработка ошибок с нуля.
Firebase/Firestore: инициализация приложения Firebase (хранение данных).
Функции хранилища: важная часть проектов, позволяющая разделять код, относящийся к конкретным функциям, в их контексте.
Аутентификация: создание функциональности входа, регистрации и выхода из системы. Обучение аутентификации пользователя при посещении приложения.
Провайдер и контекст: создание компонента-провайдера, который может хранить данные на уровне корневого компонента и предоставлять их вложенным компонентам.
Всплывающие окна (snackbars): функциональность приложения, созданная с использованием провайдера, для отображения сообщений в виде всплывающих окон.
Создание "glide" (сообщения): создание нового "glide" и отображение его на главной странице. От этого момента студенты будут часто работать с Firebase/Firestore.
Функциональность подписки: возможность подписываться на других пользователей.
Отображение глайдов от пользователей, на которых вы подписаны: подписка на других пользователей позволяет видеть глайды (сообщения), которые они публикуют.
Постраничная навигация глайдов: для эффективности необходимо избежать загрузки и отображения всех глайдов при начальной загрузке. Студенты научатся реализовывать ленивую загрузку страниц глайдов, при которой данные загружаются по мере просмотра пользователем приложения.
Создание подглайдов: важно иметь возможность отвечать на глайды. Эта функция позволяет пользователю создавать подглайды, которые являются ответом на исходный глайд.
Модальное окно "Мессенджер": студенты научатся создавать компонент модального окна с нуля. Он будет использоваться для отображения компонента мессенджера на любой странице.
Загрузка изображений: размещение изображений в Firebase Storage.
Развертывание на Vercel: наконец, приложение будет размещено на Vercel и будет доступно для посещения всем пользователям интернета.

В процессе работы над указанными функциями студенты будут учиться и понимать особенности Svelte. Они узнают, как проектировать приложения и смогут создавать свои приложения с использованием Svelte.

Посмотреть больше

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:08:45

Introduction
Урок 2. 00:05:52

How to get a help
Урок 3. 00:05:25

Github repo tricks
Урок 4. 00:06:30

Init Project
Урок 5. 00:04:21

Coding Editor Setup
Урок 6. 00:09:22

Folder Structure
Урок 7. 00:07:23

Src Folder
Урок 8. 00:04:09

Layout
Урок 9. 00:07:48

Tailwind
Урок 10. 00:03:41

Tailwind Correction
Урок 11. 00:03:58

Additional CSS Improvements
Урок 12. 00:03:06

New Route
Урок 13. 00:06:11

More about layouts
Урок 14. 00:04:22

Sub Page
Урок 15. 00:01:59

Cleanup
Урок 16. 00:03:37

Svelte Reactivity
Урок 17. 00:04:04

Reactive statement
Урок 18. 00:02:20

Reactive declarations
Урок 19. 00:05:02

Copy/Paste Layout
Урок 20. 00:05:23

Task Item
Урок 21. 00:04:02

Task List
Урок 22. 00:08:05

Props
Урок 23. 00:04:21

Formatting Options
Урок 24. 00:04:21

Task List Data
Урок 25. 00:07:31

Each Loop
Урок 26. 00:04:24

Iterate Tasks
Урок 27. 00:03:50

Editable Component
Урок 28. 00:04:30

If Block
Урок 29. 00:02:39

Button Formatting
Урок 30. 00:03:19

Editing Mode
Урок 31. 00:05:45

Value binding
Урок 32. 00:04:16

Default Value
Урок 33. 00:06:23

Bind to Component
Урок 34. 00:04:21

Dispatch Event
Урок 35. 00:01:45

Rename event
Урок 36. 00:04:00

Pass Data in Events
Урок 37. 00:10:21

Stores
Урок 38. 00:08:01

Sub to Store
Урок 39. 00:05:27

Update Store
Урок 40. 00:07:46

Unsub
Урок 41. 00:05:03

Auto Subscription
Урок 42. 00:05:03

Start Function
Урок 43. 00:05:22

Stop Function
Урок 44. 00:04:27

Readable Store
Урок 45. 00:02:45

Task List Store Data
Урок 46. 00:05:56

Event Forwarding
Урок 47. 00:02:58

Revert Update Task
Урок 48. 00:07:04

Pass List Index
Урок 49. 00:05:34

Find Task Idx
Урок 50. 00:04:03

Update Task
Урок 51. 00:03:30

Return subscribe only
Урок 52. 00:08:44

Move update to store
Урок 53. 00:01:59

Add List Prep
Урок 54. 00:04:59

Add new list
Урок 55. 00:01:24

Allow X Scrolling
Урок 56. 00:05:30

Add Task
Урок 57. 00:01:26

Make list full height
Урок 58. 00:02:45

Drag Start
Урок 59. 00:04:27

Drop Item
Урок 60. 00:10:02

Event data transfer
Урок 61. 00:02:22

Move code to store
Урок 62. 00:05:51

Move Item
Урок 63. 00:02:44

Refactor Props
Урок 64. 00:03:49

List Hover Id
Урок 65. 00:06:17

Hovering Effect
Урок 66. 00:08:19

Script Module
Урок 67. 00:11:06

Crossfade Transition
Урок 68. 00:03:45

Animate Flip
Урок 69. 00:08:11

More Transitions
Урок 70. 00:08:04

Persistence
Урок 71. 00:05:01

Store Data
Урок 72. 00:04:11

Remove item function
Урок 73. 00:03:54

Remove Task
Урок 74. 00:03:16

Remove List
Урок 75. 00:04:09

Editable List
Урок 76. 00:05:54

Update List Name
Урок 77. 00:04:38

Load Function
Урок 78. 00:17:36

SSR + CSR
Урок 79. 00:13:08

Prerendering
Урок 80. 00:04:26

Fan with Scrollbar
Урок 81. 00:05:13

Project 2 Layout
Урок 82. 00:02:13

Bottom Menu
Урок 83. 00:02:21

Home Page
Урок 84. 00:00:35

Format Document
Урок 85. 00:04:05

Sidebars Components
Урок 86. 00:03:10

Trends data
Урок 87. 00:03:52

Each Loop Trend
Урок 88. 00:06:45

Nav Links Data
Урок 89. 00:04:00

Render Links
Урок 90. 00:08:21

Create Shared Layout
Урок 91. 00:04:14

Api Endpoint
Урок 92. 00:07:45

Provide data to Layout
Урок 93. 00:05:44

Create glide - simple
Урок 94. 00:03:16

Provide more data to Glide
Урок 95. 00:05:08

Glide post component
Урок 96. 00:05:03

Login and Register Page
Урок 97. 00:11:42

Route Grouping
Урок 98. 00:07:17

Auth layout component
Урок 99. 00:07:47

Error page
Урок 100. 00:04:45

Path Alias
Урок 101. 00:04:31

Fix Intelisense
Урок 102. 00:04:00

Popup component
Урок 103. 00:03:59

Wrap bottom menu in popup
Урок 104. 00:01:57

Logout Menu
Урок 105. 00:04:53

Before Update and after update
Урок 106. 00:05:25

Close popup
Урок 107. 00:05:26

Clean event listener
Урок 108. 00:09:40

Popup Bottom Position
Урок 109. 00:09:34

Portal
Урок 110. 00:04:34

Adjust popup left position
Урок 111. 00:02:21

Adjust while resizing
Урок 112. 00:07:29

Close on outside click only
Урок 113. 00:05:12

Actions
Урок 114. 00:07:30

Handle popup close in action
Урок 115. 00:06:00

UI Context
Урок 116. 00:07:33

Set context
Урок 117. 00:02:37

Get context abstraction
Урок 118. 00:05:53

Set screen size
Урок 119. 00:04:18

Helper size variables
Урок 120. 00:03:58

Svelte window component
Урок 121. 00:02:55

Simplify Ui context
Урок 122. 00:04:00

Display icon conditionally
Урок 123. 00:04:37

Check for loading UI
Урок 124. 00:03:05

CSR
Урок 125. 00:06:18

Auth Context
Урок 126. 00:04:13

Simulate Authentication
Урок 127. 00:02:58

Loader Component
Урок 128. 00:04:28

Conditional Auth
Урок 129. 00:06:53

Redirect if authenticated
Урок 130. 00:03:17

Main layout component
Урок 131. 00:05:01

Main pages redirect
Урок 132. 00:02:50

Move forms to components
Урок 133. 00:03:21

Bind login data
Урок 134. 00:03:14

Bind register data
Урок 135. 00:06:11

Validate action
Урок 136. 00:02:53

Add alias for actions and stores
Урок 137. 00:04:04

Form Handler Store
Урок 138. 00:09:24

Add state to form store
Урок 139. 00:07:00

Create store separately
Урок 140. 00:07:18

createStore lifecycle
Урок 141. 00:05:27

Input event handlers
Урок 142. 00:07:09

Check Validity Preparation
Урок 143. 00:04:53

Errors store
Урок 144. 00:03:38

Update Errors
Урок 145. 00:03:48

Random validator
Урок 146. 00:05:05

Max length validator
Урок 147. 00:05:57

Max length validator rework
Урок 148. 00:03:49

Detach validator
Урок 149. 00:03:32

Loop validators
Урок 150. 00:07:32

First uppercase validator
Урок 151. 00:04:21

Errors array
Урок 152. 00:03:31

Form Errors Component
Урок 153. 00:04:04

Pass errors as props
Урок 154. 00:05:30

More validators
Урок 155. 00:03:25

Pass custom values to validators
Урок 156. 00:08:39

Nice name function
Урок 157. 00:05:41

Submit function
Урок 158. 00:06:41

Remove form store
Урок 159. 00:07:25

Validate on submit
Урок 160. 00:08:05

Submit only when valid
Урок 161. 00:05:25

Pass form to validator
Урок 162. 00:04:34

Compare with validator
Урок 163. 00:03:52

On Input validation
Урок 164. 00:02:37

Login form validation
Урок 165. 00:09:04

Firebase Intro
Урок 166. 00:04:31

Add firebase config
Урок 167. 00:08:08

Create Users in DB
Урок 168. 00:04:49

Register callback
Урок 169. 00:03:29

Api folder
Урок 170. 00:05:03

Register user firebase
Урок 171. 00:10:22

Create user in collection
Урок 172. 00:08:08

Check auth state in callback
Урок 173. 00:06:01

Refactor auth state
Урок 174. 00:04:01

Logout user
Урок 175. 00:04:08

Login User
Урок 176. 00:04:26

Reactive redirects
Урок 177. 00:10:59

Auth Store
Урок 178. 00:07:48

Loading auth state
Урок 179. 00:06:52

Get user from Firestore
Урок 180. 00:05:50

Display user data in bottom menu
Урок 181. 00:06:34

Messenger component
Урок 182. 00:04:26

Snackbar Start
Урок 183. 00:04:02

Snackbar in context
Урок 184. 00:05:10

Snackbar Objects
Урок 185. 00:04:28

Add snackbar
Урок 186. 00:06:13

Remove snackbar
Урок 187. 00:03:18

Remove snackbar from store
Урок 188. 00:08:34

Auto hide snack
Урок 189. 00:05:17

Progress bar
Урок 190. 00:03:34

Snackbar transitions
Урок 191. 00:02:20

Snackbar on authentication
Урок 192. 00:03:51

Create glide store
Урок 193. 00:08:12

Create glide in Messenger
Урок 194. 00:03:39

Disable messenger when adding glide
Урок 195. 00:07:47

Glides API
Урок 196. 00:02:27

Try catch
Урок 197. 00:07:42

Store glide in FS
Урок 198. 00:07:09

Add new glide reactively
Урок 199. 00:02:01

Fetch glides prep
Урок 200. 00:06:44

Fetch glides
Урок 201. 00:04:19

Store glides
Урок 202. 00:05:23

Attach glide user to glide
Урок 203. 00:03:22

Data loader indicator
Урок 204. 00:07:39

Order data with constraints
Урок 205. 00:08:44

Change glides to pages
Урок 206. 00:05:00

Display Pages
Урок 207. 00:04:57

Rework add glide
Урок 208. 00:02:07

Paginated glides component
Урок 209. 00:10:17

Add treshold to load glides
Урок 210. 00:08:05

Last glide doc
Урок 211. 00:09:29

Load more glides
Урок 212. 00:07:20

Loading stop condition
Урок 213. 00:05:35

Profile page
Урок 214. 00:06:45

Page store
Урок 215. 00:05:11

Load users
Урок 216. 00:04:16

Fetch users from firestore
Урок 217. 00:04:16

User item and loading
Урок 218. 00:04:48

Fetch all but logged in user
Урок 219. 00:08:54

Follow user preparations
Урок 220. 00:09:46

Follow User Update in FS
Урок 221. 00:07:57

Filter out followed users
Урок 222. 00:04:48

Disable button while following
Урок 223. 00:07:38

Update auth user after follow
Урок 224. 00:04:41

Throw error if following user
Урок 225. 00:05:51

Remove following user from list
Урок 226. 00:02:55

Display message when no users
Урок 227. 00:13:02

Display glides from followed users
Урок 228. 00:10:48

Subscribe to new glides
Урок 229. 00:04:33

Get glide raw data
Урок 230. 00:02:13

Get glides from documents
Урок 231. 00:07:04

Store fresh glides
Урок 232. 00:03:30

Button to display more glides
Урок 233. 00:07:05

Display glides - duplicate keys
Урок 234. 00:09:56

Resub to glides
Урок 235. 00:04:11

Autosize text area
Урок 236. 00:11:24

Add Lookup
Урок 237. 00:03:49

Return lookup from extract function
Урок 238. 00:05:06

Glide detail screen
Урок 239. 00:02:13

Get route params
Урок 240. 00:05:42

Navigate to detail page
Урок 241. 00:07:22

Get glide lookup from user
Урок 242. 00:02:48

Get glide data
Урок 243. 00:04:33

Glide Id store
Урок 244. 00:03:04

Loading State in Detail
Урок 245. 00:05:44

Provide glide post and messenger
Урок 246. 00:05:21

Back Button
Урок 247. 00:05:42

Fetch subglides
Урок 248. 00:05:40

Pass glide lookup to messenger
Урок 249. 00:13:17

Add glide in correct collection
Урок 250. 00:06:00

Pass glide lookup to fetch subglides
Урок 251. 00:04:06

Fetch subglides from lookup
Урок 252. 00:03:35

Add paginated to detail page
Урок 253. 00:04:21

Increment glide count in FS
Урок 254. 00:03:14

Update subglide count in real time
Урок 255. 00:02:43

Add glide to subglides list
Урок 256. 00:06:09

Handle refetch case
Урок 257. 00:04:50

Refetch glide
Урок 258. 00:02:25

On glide loaded callback
Урок 259. 00:06:06

Reset pagination
Урок 260. 00:05:54

Subglides pagination
Урок 261. 00:04:48

Check for no glides
Урок 262. 00:05:15

Modal start
Урок 263. 00:02:08

Open modal conditionaly
Урок 264. 00:05:42

Named slot
Урок 265. 00:02:24

Opener slot
Урок 266. 00:04:46

Slot props
Урок 267. 00:03:48

Close on click outside
Урок 268. 00:04:56

Messenger and disable scroll
Урок 269. 00:09:20

Global Glide
Урок 270. 00:05:58

Global on glide posted callback.mov
Урок 271. 00:03:07

Close modal when glide posted
Урок 272. 00:03:08

Handle image selection
Урок 273. 00:07:53

Get image bytes
Урок 274. 00:07:12

Preview image
Урок 275. 00:03:56

Upload image function
Урок 276. 00:06:19

Upload image working
Урок 277. 00:06:12

Attach image to glide
Урок 278. 00:03:21

Fix issue with pagination
Урок 279. 00:08:22

Github Repo
Урок 280. 00:03:40

Deployment to Vercel
Урок 281. 00:06:33

Testing App & Finish

Автор - udemy

udemy

Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.

+190

Категории

Комментарии

Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.

Другие материалы в этой категории

Amy Dutton

11 мая 2023 г., 22:22

Svelte

Все о Svelte

Everything Svelte (Complete package)

Этот курс предназначен, чтобы научить вас всему необходимому для создания настраиваемого веб-приложения на полном стеке технологий.Мы начнем с нуля, то есть без готовых файлов! Мы будем двигаться постепенно, создавая фронтенд и бэкенд. Мы изучим такие темы, как аутентификация, прием платежей, реляционные базы данных, тестирование и автоматическое развертывание.

20 ч 35 мин

Английский

Посмотреть

+38

frontendmasters

15 апр. 2023 г., 16:08

Svelte

Svelte & SvelteKit

Svelte - это фреймворк для создания пользовательских интерфейсов, который использует компилятор для написания кратких компонентов, которые выполняют минимальную работу в браузере, используя уже знакомые вам языки - HTML, CSS и JavaScript. SvelteKit - это фреймворк для создания приложений, построенный на основе Svelte. По окончании этого курса, проводимого создателем Svelte, вы будете уверены в создании приложений любой сложности.

4 ч 53 мин

Английский

Посмотреть

+19

Удален по просьбе правообладателя

Изображение курса Svelte и SvelteKit: Полное руководство

udemy

22 февр. 2023 г., 00:09

Svelte

Svelte и SvelteKit: Полное руководство

Svelte & SvelteKit: The Complete Guide

Svelte - это JavaScript фреймворк, который позволяет создавать компоненты, управляемые состоянием. Однако что отличает Svelte от других фреймворков, таких как Angular, React и Vue; суть в том, что Svelte — это компилятор. Svelte запускается во время сборки. Это означает, что ваш код Svelte будет скомпилирован во время сборки в высокоэффективный императивный код, который запускается в браузере для выполнения операций DOM.

29 ч 4 мин

Английский

Посмотреть

+16

Изображение курса Создание компонентов Svelte

leveluptutorials

23 окт. 2021 г., 22:21

Svelte

Создание компонентов Svelte

Building Svelte Components

В этой серии уроков мы собираемся заняться Svelte компонентами. К концу этого курса вы будете иметь возможность не только использовать полную библиотеку ваших собственных компонентов, но и лучше понимать, как создавать компоненты, пригодные для повседневного использования в Svelte.

4 ч 2 мин

Английский

Посмотреть

leveluptutorials

12 сент. 2021 г., 15:11

Svelte

Svelte Kit

Из этого курса вы узнаете, что такое Svelte и Svelte Kit. Мы поговорим о том, как Svelte Kit может улучшить ваши веб-приложения как для разработчиков, так и для пользователей.

3 ч 21 мин

Английский

Посмотреть

+15

Svelte и Firebase: Полный курс (2023)

Ограничение времени просмотра

Автор - udemy

udemy

Svelte

Другие материалы в этой категории

Все о Svelte

Svelte & SvelteKit

Svelte и SvelteKit: Полное руководство

Создание компонентов Svelte

Svelte Kit