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