Главная страницаКатегория progressive web app (pwa)PWA с Vue JS, Quasar и Firebase (с NodeJS и Express)

PWA с Vue JS, Quasar и Firebase (с NodeJS и Express)

Name: PWA с Vue JS, Quasar и Firebase (с NodeJS и Express)
Price: 13 USD
Rating: 5 (30 reviews)

PWA with Vue JS, Quasar & Firebase (with NodeJS & Express)

udemy

★5 (всего оценок - 30)

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

14 ч 36 мин

Категория

Progressive Web App (PWA)

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

215 Видео

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

13 авг. 2020 г., 15:50

Язык

Английский

Дата выхода

1 авг. 2020 г., 14:55

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

29 апр. 2026 г., 08:24

Освойте создание современных PWA на базе Vue JS, Quasar и Firebase и постройте мощное фото‑приложение в стиле Instagram, работающее на любых устройствах. Этот курс покажет вам, как объединить передовой фронтенд, облачную инфраструктуру и собственный NodeJS‑бекенд в единую производительную систему.

Что вы создадите в ходе обучения

На практике вы разработаете полноценный клон Instagram — приложение под названием Quasagram. Оно объединяет работу с камерой, геолокацией, облачным хранилищем и базой данных в удобном, отзывчивом интерфейсе.

Основные возможности будущего приложения

Отображение ленты постов с изображениями, геометкой, датой и описанием
Доступ к камере устройства и создание новых фото прямо из приложения
Получение локации пользователя и автоматическое добавление координат к посту
Хранение данных в Firebase Cloud Firestore
Загрузка изображений в Firebase Storage

Интеграция NodeJS и Express

Вы создадите собственный сервер на NodeJS и Express с несколькими API‑эндпоинтами для взаимодействия с базой данных и выполнения серверных операций. Это даст понимание того, как клиенты и серверы работают вместе в современных веб‑экосистемах.

Реализация всех ключевых функций PWA

Курс подробно объясняет, как превратить обычное веб‑приложение в полноценное PWA, способное работать офлайн и устанавливаться на устройство пользователя.

Вы внедрите следующие PWA‑функции

Установка ярлыка на домашнем экране
Предварительное кэширование ресурсов
Разные стратегии кэширования для оптимальной производительности
Фоновая синхронизация данных
Push‑уведомления

Поддержка всех платформ и браузеров

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

Какие технологии вы освоите

Vue JS и компоненты Quasar Framework
Service Workers и Workbox
Firebase Cloud Firestore и Firebase Storage
NodeJS и Express
Основы офлайн‑работы, кэширования и оптимизации веб‑приложений

Результат обучения

К концу курса вы будете уверенно создавать собственные прогрессивные веб‑приложения, сочетая Vue JS, Quasar, Firebase, NodeJS и Express. Вы получите навыки, которые востребованы в разработке современных высокопроизводительных веб‑решений.

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

Урок 1. 00:07:13
Introduction & Course App: Quasagram
Урок 2. 00:01:44
What is Quasar?
Урок 3. 00:02:47
What is a Progressive Web App?
Урок 4. 00:06:22
How this Course is Structured
Урок 5. 00:05:42
My Editor & Software Setup
Урок 6. 00:00:29
Module Introduction
Урок 7. 00:01:16
Install Node.js and Quasar CLI
Урок 8. 00:03:01
Create & Launch a New Quasar Project (not in PWA mode yet)
Урок 9. 00:03:11
Folder Structure - Layouts, Pages & Routes
Урок 10. 00:01:04
Install Vue Devtools on Chrome
Урок 11. 00:01:02
Vue.js Basics
Урок 12. 00:00:52
Clean up the Project
Урок 13. 00:00:32
Developing on Android & iOS
Урок 14. 00:00:30
Module Introduction
Урок 15. 00:02:24
Pages and Routes
Урок 16. 00:04:10
Footer with Tab Navigation
Урок 17. 00:04:43
Footer - Add Some Style
Урок 18. 00:04:41
Footer - Change the Icon Set
Урок 19. 00:02:19
Header - Styles
Урок 20. 00:03:46
Header - Instagram-Style Title (Install Custom Font)
Урок 21. 00:05:17
Desktop - Hide Footer on Larger Displays
Урок 22. 00:03:23
Desktop - Show Navigation in Header on Larger Displays
Урок 23. 00:05:58
Desktop - Make the Header More Desktopy on Larger Displays
Урок 24. 00:02:06
Desktop - Constrain Content for Wider Screens
Урок 25. 00:00:27
Module Introduction
Урок 26. 00:02:22
Constrain the Page Content & Add Background Color
Урок 27. 00:02:05
Create a List of Posts - Post Header
Урок 28. 00:01:24
Create a List of Posts - Image
Урок 29. 00:01:53
Create a List of Posts - Caption and Date
Урок 30. 00:01:59
Add a Posts Array to Data Object
Урок 31. 00:02:27
Connect the Posts Array to the View with v-for
Урок 32. 00:02:59
Format the Date with a Filter
Урок 33. 00:06:07
Add a Mini-Profile for Desktop
Урок 34. 00:02:54
Hide the Mini-Profile on Mobile
Урок 35. 00:00:28
Module Introduction
Урок 36. 00:05:18
Add a Photo Frame & Capture Button
Урок 37. 00:05:52
Add Text Fields & Submit Button
Урок 38. 00:02:41
Adapt the Design for Desktop
Урок 39. 00:03:32
Setup a Data Object for the Post Data
Урок 40. 00:00:48
Module Introduction
Урок 41. 00:04:00
Display Camera Feed in Photo Frame
Урок 42. 00:02:03
getUserMedia - Browser Support and Polyfill
Урок 43. 00:07:01
Capture the Image
Урок 44. 00:02:32
Convert the Image to a Blob
Урок 45. 00:06:13
Add a Fallback Image Upload Field
Урок 46. 00:05:17
Display Fallback Image in Canvas
Урок 47. 00:03:07
Disable Camera After Capture & When User Leaves Page
Урок 48. 00:00:40
Module Introduction
Урок 49. 00:03:18
Get UserвЂ™s Location Coordinates
Урок 50. 00:06:01
Get UsersвЂ™s City & Country Names
Урок 51. 00:02:34
Handle Errors
Урок 52. 00:04:11
Add a Loading State
Урок 53. 00:02:08
Hide Location Button if Geolocation Not Supported
Урок 54. 00:07:20
Introduction to Firebase
Урок 55. 00:03:12
How weвЂ™re going to use Firebase
Урок 56. 00:00:58
Create a Firebase Project
Урок 57. 00:05:05
Cloud Firestore Database - Add Some Posts
Урок 58. 00:01:56
Add an Image to Storage
Урок 59. 00:01:11
Module Introduction
Урок 60. 00:06:06
Create & Launch our Backend Locally
Урок 61. 00:02:43
Add Auto Restarting with Nodemon
Урок 62. 00:01:38
Add a Simple Posts Endpoint
Урок 63. 00:02:50
Deploy our Backend Server (1) - Setup Heroku
Урок 64. 00:06:14
Deploy our Backend Server (2) - Deploy with Heroku Builds
Урок 65. 00:10:26
If you want to use Cloud Functions
Урок 66. 00:00:36
Module Introduction
Урок 67. 00:03:56
Connect to the Firestore Database
Урок 68. 00:03:06
Posts Endpoint - Grab the Posts
Урок 69. 00:04:21
Display the Posts on the Home Page
Урок 70. 00:02:02
Sort Posts by Date
Урок 71. 00:01:08
Handle Errors
Урок 72. 00:05:55
Handle Loading
Урок 73. 00:03:18
Show a вЂњNo Posts YetвЂќ Fallback
Урок 74. 00:00:38
Module Introduction
Урок 75. 00:02:07
Add createPost Endpoint
Урок 76. 00:06:00
Environment Variables to Manage our API URLs
Урок 77. 00:06:53
Send the Post Data to the Endpoint
Урок 78. 00:06:56
Parse the Form Data with Busboy
Урок 79. 00:06:06
Store the Field Data as a Post (1)
Урок 80. 00:01:10
Store the Field Data as a Post (2)
Урок 81. 00:01:52
Upload the Image (1) Configure Google Cloud Storage
Урок 82. 00:03:48
Upload the Image (2) Save the Image to the Temp Folder
Урок 83. 00:10:00
Upload the Image (3) Upload to Google Cloud Storage & Store the Image URL
Урок 84. 00:03:35
Add Validation
Урок 85. 00:04:48
Handle Errors & Successes
Урок 86. 00:02:57
Handle Loading
Урок 87. 00:02:16
Remember to Keep an Eye on the Size of your Images in Storage
Урок 88. 00:00:42
Task 1 - Get the Project Running
Урок 89. 00:00:30
Task 2 - Create a Firebase Project
Урок 90. 00:01:57
Task 3 - Create a Cloud Firestore Database
Урок 91. 00:03:47
Task 4 - Setup a Node.js & Express Backend
Урок 92. 00:02:33
Task 5 - Initialize Firestore Database
Урок 93. 00:03:08
Task 6 - Tasks Endpoint
Урок 94. 00:02:48
Task 7 - Display Tasks in App
Урок 95. 00:02:14
Task 8 - Create Task Endpoint (1)
Урок 96. 00:02:04
Task 9 - Create Task Endpoint (2)
Урок 97. 00:04:29
Task 10 - Create Task Endpoint (3)
Урок 98. 00:02:45
Task 11 - Add a Loading Screen
Урок 99. 00:02:18
PWA Introduction
Урок 100. 00:02:02
Launch Quasagram in PWA Mode
Урок 101. 00:01:39
Manifest File
Урок 102. 00:05:36
Manifest Properties
Урок 103. 00:00:27
Module Introduction
Урок 104. 00:01:05
Install Icon Genie
Урок 105. 00:03:42
Create the Source Icon
Урок 106. 00:05:22
Generate the Icons
Урок 107. 00:00:34
Module Introduction
Урок 108. 00:03:48
Create the App Install Banner
Урок 109. 00:03:17
Add an App Icon to the Banner
Урок 110. 00:03:11
Show App Install Banner on Desktop
Урок 111. 00:05:24
Only show App Install Banner when App Installable
Урок 112. 00:04:02
Show Native Install Prompt if they click Yes
Урок 113. 00:07:40
Allow the User to Hide the App Install Banner
Урок 114. 00:03:57
Animate the App Install Banner
Урок 115. 00:01:07
Module Introduction
Урок 116. 00:02:17
What is a Service Worker?
Урок 117. 00:02:41
Service Worker Events
Урок 118. 00:01:40
What is Workbox?
Урок 119. 00:02:21
src-pwa Folder
Урок 120. 00:02:44
Basic Caching & Offline Capabilities
Урок 121. 00:01:53
Enable Custom Service Worker File
Урок 122. 00:00:30
Module Introduction
Урок 123. 00:00:50
What is Precaching?
Урок 124. 00:04:52
Enable Precache
Урок 125. 00:02:40
Build the App for Production & Switch to Live Backend
Урок 126. 00:05:11
Host the App on Firebase
Урок 127. 00:03:29
Show Precaching in Live App
Урок 128. 00:02:00
Caching Strategies Introduction
Урок 129. 00:03:52
What Caching Strategies Can We Use?
Урок 130. 00:07:58
Stale While Revalidate Strategy as a Catch All for Most Requests
Урок 131. 00:11:26
Cache First Strategy for our Google Font
Урок 132. 00:04:18
Network First Strategy for Posts Request
Урок 133. 00:02:29
Background Sync Introduction
Урок 134. 00:04:02
Check for Background Sync Support
Урок 135. 00:09:10
Create Post Background Sync
Урок 136. 00:06:06
Redirect to Home Page if Post Created Offline
Урок 137. 00:07:02
Display the Offline Posts (1) - Open the IndexedDB Database with IDB
Урок 138. 00:05:28
Display the Offline Posts (2) - Get the Raw Request Data
Урок 139. 00:13:26
Display the Offline Posts (3) - Get the Form Fields & Add Offline Post to Page
Урок 140. 00:07:26
Style the Offline Posts Differently
Урок 141. 00:10:59
Show Offline Post was Uploaded (1) - Add onSync Hook to Queue
Урок 142. 00:11:54
Show Offline Post was Uploaded (2) - Send Message to the Client (Browser)
Урок 143. 00:06:10
Show Offline Post was Uploaded (3) - Remove the Offline Post Styles
Урок 144. 00:01:36
Module Introduction
Урок 145. 00:05:42
How Push Notifications Work
Урок 146. 00:08:07
Create an вЂњEnable NotificationsвЂќ Banner (1) - Repurpose the App Install Banner
Урок 147. 00:04:23
Create an вЂњEnable NotificationsвЂќ Banner (2) - Improve the Style
Урок 148. 00:05:22
Request Notifications Permission
Урок 149. 00:03:58
Display a Notification from Our App
Урок 150. 00:07:13
Notification Options
Урок 151. 00:03:50
Display a Notification Using the Service Worker
Урок 152. 00:03:01
Notification Actions
Урок 153. 00:04:50
Handle Notification Clicks
Урок 154. 00:01:41
Handle Notification Closed
Урок 155. 00:04:32
Check for Existing Push Subscription
Урок 156. 00:04:35
Create a New Push Subscription
Урок 157. 00:03:59
Secure the Push Subscription with Web Push (1)
Урок 158. 00:04:00
Secure the Push Subscription with Web Push (2)
Урок 159. 00:02:56
Store The Subscription in Cloud Firestore Database (1)
Урок 160. 00:08:19
Store The Subscription in Cloud Firestore Database (2)
Урок 161. 00:02:23
A Note About Push Subscriptions & Service Workers
Урок 162. 00:10:43
Send a вЂњNew PostвЂќ Push Notification from Our Backend Server
Урок 163. 00:03:07
If YouвЂ™re Using Cloud Functions (Important)
Урок 164. 00:07:23
Listen for Push Notifications in the Service Worker
Урок 165. 00:04:47
Display the Real Push Notification
Урок 166. 00:06:23
Open our Home Page on Notification Click
Урок 167. 00:03:55
Send the Open URL from the Backend
Урок 168. 00:00:34
Module Introduction
Урок 169. 00:02:36
Hosting the App
Урок 170. 00:08:13
Firefox - Testing
Урок 171. 00:04:24
Firefox - Fixing Issues
Урок 172. 00:03:20
Safari - Testing
Урок 173. 00:01:43
Safari - Fixing Issues
Урок 174. 00:03:41
Testing Edge & Internet Explorer on a Mac with VirtualBox
Урок 175. 00:08:06
Edge
Урок 176. 00:09:38
Internet Explorer
Урок 177. 00:00:31
Module Introduction
Урок 178. 00:01:04
Developing on Android Emulator (1) - Install Android Studio
Урок 179. 00:01:20
Developing on Android Emulator (2) - Setup Virtual Device
Урок 180. 00:12:36
Developing on Android Emulator (3) - Launch on Android Emulator
Урок 181. 00:02:26
Developing on Android Emulator (4) - Debugging
Урок 182. 00:04:58
Launch Live App on Android Emulator
Урок 183. 00:17:56
Developing on a Real Android Device
Урок 184. 00:13:38
Fix Background Sync Issue
Урок 185. 00:07:59
Show the Image in the Notification on Android
Урок 186. 00:09:51
Check the Background Sync Fix
Урок 187. 00:00:28
Module Introduction
Урок 188. 00:01:05
Developing on iOS Simulator (1) - Install Xcode & Launch the Simulator
Урок 189. 00:08:07
Developing on iOS Simulator (2) - Launch on iOS Simulator
Урок 190. 00:02:17
Developing on iOS Simulator (3) - Debugging
Урок 191. 00:06:14
Fix Footer on iOS Safari
Урок 192. 00:09:00
Developing on a Real iOS Device
Урок 193. 00:05:43
Fix the Camera & Post Image Button Issues
Урок 194. 00:04:52
Task 1 - Get App Running
Урок 195. 00:01:17
Task 2 - Change Theme Color
Урок 196. 00:01:45
Task 3 - Generate App Icons
Урок 197. 00:01:55
Task 4 - Install App Button (1)
Урок 198. 00:01:54
Task 5 - Install App Button (2)
Урок 199. 00:02:23
Task 6 - Enable Precache
Урок 200. 00:03:30
Task 7 - Caching Strategies
Урок 201. 00:03:27
Task 8 - Background Sync (1)
Урок 202. 00:02:54
Task 9 - Background Sync (2)
Урок 203. 00:03:01
Task 10 - Background Sync (3)
Урок 204. 00:01:54
Task 11 - Push Notifications - Notification Permission (1)
Урок 205. 00:01:54
Task 12 - Push Notifications - Notification Permission (2)
Урок 206. 00:03:10
Task 13 - Push Notifications - Create Push Subscription (1)
Урок 207. 00:06:26
Task 14 - Push Notifications - Create Push Subscription (2)
Урок 208. 00:05:23
Task 15 - Push Notifications - Store Push Subscription in Database
Урок 209. 00:02:01
Task 16 - вЂњYouвЂ™re subscribed!вЂќ Notification
Урок 210. 00:07:12
Task 17 - Send Push Notification from Backend
Урок 211. 00:03:51
Task 18 - Display Push Notification
Урок 212. 00:04:15
Task 19 - Handle Push Notification Click
Урок 213. 00:15:19
Task 20 - Host App on Firebase & Backend on Heroku
Урок 214. 00:01:30
What Next?
Урок 215. 00:05:08
Bonus Lecture: Learn More From Me

Автор - udemy

udemy

Udemy — одна из самых масштабных платформ в мире, предлагающая обучающий контент от авторов и экспертов со всего света. Сервис объединяет миллионы учеников и десятки тысяч преподавателей, создающих курсы на самые разнообразные темы.Основные возможности платформыШирокий выбор тем: от программирования и дизайна до маркетинга, психологии и личной эффективности.Глобальное сообщество авторов: материалы создаются специалистами из разных стран.Удобный ф

+198

Комментарии

argfede
23 апр. 2021 г., 22:12
video 131 at 6:05 he burps LOL
MarCec
20 авг. 2020 г., 17:36
Есть какие то Промо коды или Акция для оплаты Taruca на год за 5$?
Retro
14 авг. 2020 г., 19:07
Курс - огонь!
Anonymous Retro
26 янв. 2021 г., 10:40
Ты уверен? есть аргументы?