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

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