Constrain the Page Content & Add Background Color | Make Apps Academy

Autoplay
Autocomplete

Previous Lesson Complete and Continue

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

1: Introduction

Introduction & Course App: Quasagram (7:12)
What is Quasar? (1:43)
What is a Progressive Web App? (2:46)
How this Course is Structured (6:21)
My Editor & Software Setup (5:41)
Why do we need a Backend?

2: Getting Started

Module Introduction (0:29)
Install Node.js and Quasar CLI (1:15)
Create & Launch a New Quasar Project (not in PWA mode yet) (3:59)
Update: Quasar V1 Documentation
Folder Structure - Layouts, Pages & Routes (3:10)
Install Vue Devtools on Chrome (1:03)
Vue.js Basics (1:01)
Clean up the Project (0:51)
Developing on Android & iOS (0:31)

3: Layout, Pages & Routes - Start building Quasagram

Module Introduction (0:29)
Pages and Routes (2:23)
Footer with Tab Navigation (4:09)
Footer - Add Some Style (4:42)
Footer - Change the Icon Set (4:40)
Header - Styles (2:18)
Header - Instagram-Style Title (Install Custom Font) (3:45)
Desktop - Hide Footer on Larger Displays (5:16)
Desktop - Show Navigation in Header on Larger Displays (3:22)
Desktop - Make the Header More Desktopy on Larger Displays (5:58)
Desktop - Constrain Content for Wider Screens (2:05)
Finished Module Code

4: Design - Home Page

Module Introduction (0:26)
Constrain the Page Content & Add Background Color (2:21)
Create a List of Posts - Post Header (2:04)
Create a List of Posts - Image (1:23)
Create a List of Posts - Caption and Date (1:52)
Add a Posts Array to Data Object (1:58)
Connect the Posts Array to the View with v-for (2:26)
Format the Date with a Filter (2:58)
Add a Mini-Profile for Desktop (6:06)
Hide the Mini-Profile on Mobile (2:53)
Finished Module Code

5: Design - Camera Page

Module Introduction (0:27)
Add a Photo Frame & Capture Button (5:17)
Add Text Fields & Submit Button (5:51)
Adapt the Design for Desktop (2:40)
Setup a Data Object for the Post Data (3:32)
Finished Module Code

6: Native Device Features - Camera

Module Introduction (0:48)
Display Camera Feed in Photo Frame (3:59)
getUserMedia - Browser Support and Polyfill (2:02)
Capture the Image (7:00)
Convert the Image to a Blob (2:31)
Add a Fallback Image Upload Field (6:12)
Display Fallback Image in Canvas (5:16)
Disable Camera After Capture & When User Leaves Page (3:06)
Finished Module Code

7: Native Device Features - Location

Module Introduction (0:39)
Get User’s Location Coordinates (3:17)
Get Users’s City & Country Names (6:01)
Handle Errors (2:33)
Add a Loading State (4:10)
Hide Location Button if Geolocation Not Supported (2:08)
Finished Module Code

8: Firebase - Cloud Firestore Database & Storage

Introduction to Firebase (7:19)
How we’re going to use Firebase (3:11)
Create a Firebase Project (0:57)
Cloud Firestore Database - Add Some Posts (5:04)
Add an Image to Storage (1:55)

9: Node.js & Express Backend

Module Introduction (1:10)
Create & Launch our Backend Locally (6:05)
Add Auto Restarting with Nodemon (2:42)
Add a Simple Posts Endpoint (1:37)
Deploy our Backend Server (1) - Setup Heroku (2:49)
Deploy our Backend Server (2) - Deploy with Heroku Builds (6:13)
If you want to use Cloud Functions (10:25)
Finished Module Code

10: Get Posts Endpoint

Module Introduction (0:35)
Connect to the Firestore Database (3:55)
Posts Endpoint - Grab the Posts (3:05)
Display the Posts on the Home Page (4:20)
Sort Posts by Date (2:01)
Handle Errors (1:07)
Handle Loading (5:55)
Show a “No Posts Yet” Fallback (3:17)
Finished Module Code

11: Create Post Endpoint

Module Introduction (0:37)
Add createPost Endpoint (2:06)
Environment Variables to Manage our API URLs (5:59)
Send the Post Data to the Endpoint (6:52)
Parse the Form Data with Busboy (6:55)
Store the Field Data as a Post (1) (6:06)
Store the Field Data as a Post (2) (1:09)
Upload the Image (1) Configure Google Cloud Storage (1:51)
Upload the Image (2) Save the Image to the Temp Folder (3:47)
Upload the Image (3) Upload to Google Cloud Storage & Store the Image URL (9:59)
Add Validation (3:34)
Handle Errors & Successes (4:47)
Handle Loading (2:56)
Remember to Keep an Eye on the Size of your Images in Storage (2:15)
Finished Module Code

12: Assignment 1 - Database & Backend

Assignment 1 - Database & Backend (5:49)
Task 1 - Get the Project Running (0:41)
Task 2 - Create a Firebase Project (0:29)
Task 3 - Create a Cloud Firestore Database (1:56)
Task 4 - Setup a Node.js & Express Backend (3:46)
Task 5 - Initialize Firestore Database (2:32)
Task 6 - Tasks Endpoint (3:07)
Task 7 - Display Tasks in App (2:47)
Task 8 - Create Task Endpoint (1) (2:13)
Task 9 - Create Task Endpoint (2) (2:03)
Task 10 - Create Task Endpoint (3) (4:29)
Task 11 - Add a Loading Screen (2:44)

13: PWA - Setup and Manifest File

PWA Introduction (2:18)
Launch Quasagram in PWA Mode (2:01)
Manifest File (1:38)
Manifest Properties (5:35)
Finished Module Code

14: PWA - Icons for All Devices

Module Introduction (0:26)
Install Icon Genie (1:05)
Create the Source Icon (3:41)
Generate the Icons (5:21)
Finished Module Code

15: PWA - Home Screen Installation

Module Introduction (0:33)
Create the App Install Banner (3:47)
Add an App Icon to the Banner (3:16)
Show App Install Banner on Desktop (3:10)
Only show App Install Banner when App Installable (5:23)
Show Native Install Prompt if they click Yes (4:01)
Allow the User to Hide the App Install Banner (7:39)
Animate the App Install Banner (3:56)
Finished Module Code

16: PWA - Service Workers & Workbox

Module Introduction (1:06)
What is a Service Worker? (2:16)
Service Worker Events (2:40)
What is Workbox? (1:39)
src-pwa Folder (2:20)
Basic Caching & Offline Capabilities (2:43)
Enable Custom Service Worker File (1:52)

17: PWA - Precaching

Module Introduction (0:29)
What is Precaching? (0:50)
Enable Precache (4:51)
Build the App for Production & Switch to Live Backend (2:39)
Host the App on Firebase (5:10)
Show Precaching in Live App (3:28)
A Quicker Way to Go Online / Offline
Finished Module Code

18: PWA - Caching Strategies

Caching Strategies Introduction (1:59)
What Caching Strategies Can We Use? (3:51)
Stale While Revalidate Strategy as a Catch All for Most Requests (7:57)
Cache First Strategy for our Google Font (11:25)
Network First Strategy for Posts Request (4:17)
Finished Module Code

19: PWA - Background Sync

Background Sync Introduction (2:28)
Check for Background Sync Support (4:01)
Create Post Background Sync (9:10)
Redirect to Home Page if Post Created Offline (6:05)
Display the Offline Posts (1) - Open the IndexedDB Database with IDB (7:02)
Disable the Workbox Logs
Display the Offline Posts (2) - Get the Raw Request Data (5:27)
Display the Offline Posts (3) - Get the Form Fields & Add Offline Post to Page (13:29)
Style the Offline Posts Differently (7:25)
Show Offline Post was Uploaded (1) - Add onSync Hook to Queue (10:58)
Show Offline Post was Uploaded (2) - Send Message to the Client (Browser) (11:53)
Show Offline Post was Uploaded (3) - Remove the Offline Post Styles (6:09)
Finished Module Code

20: PWA - Push Notifications

Module Introduction (1:35)
How Push Notifications Work (5:42)
Create an “Enable Notifications” Banner (1) - Repurpose the App Install Banner (8:07)
Create an “Enable Notifications” Banner (2) - Improve the Style (4:22)
Request Notifications Permission (5:21)
Display a Notification from Our App (3:57)
Notification Options (7:12)
Display a Notification Using the Service Worker (3:49)
Notification Actions (3:00)
Handle Notification Clicks (4:49)
Handle Notification Closed (1:40)
Check for Existing Push Subscription (4:31)
Create a New Push Subscription (4:34)
Secure the Push Subscription with Web Push (1) (3:58)
Secure the Push Subscription with Web Push (2) (4:00)
Store The Subscription in Cloud Firestore Database (1) (2:55)
Store The Subscription in Cloud Firestore Database (2) (8:18)
A Note About Push Subscriptions & Service Workers (2:23)
Send a “New Post” Push Notification from Our Backend Server (10:42)
If You’re Using Cloud Functions (Important) (3:06)
Listen for Push Notifications in the Service Worker (7:22)
Display the Real Push Notification (4:46)
Open our Home Page on Notification Click (6:22)
Send the Open URL from the Backend (3:54)
Finished Module Code

21: Desktop Browsers - Testing & Fixing

Module Introduction (0:33)
Hosting the App (2:35)
Firefox - Testing (8:12)
Firefox - Fixing Issues (4:23)
Safari - Testing (3:19)
Safari - Fixing Issues (1:42)
Testing Edge & Internet Explorer on a Mac with VirtualBox (3:41)
Edge (8:05)
Internet Explorer (9:37)
Finished Module Code

22: Mobile - Android - Developing, Testing & Improving

Module Introduction (0:30)
Developing on Android Emulator (1) - Install Android Studio (1:03)
Developing on Android Emulator (2) - Setup Virtual Device (1:19)
Developing on Android Emulator (3) - Launch on Android Emulator (12:35)
Developing on Android Emulator (4) - Debugging (2:25)
Launch Live App on Android Emulator (4:57)
Developing on a Real Android Device (17:55)
Fix Background Sync Issue (13:37)
Show the Image in the Notification on Android (7:58)
Check the Background Sync Fix (9:51)
Finished Module Code

23: Mobile - iOS - Developing, Testing & Fixing

Module Introduction (0:27)
Developing on iOS Simulator (1) - Install Xcode & Launch the Simulator (1:05)
Developing on iOS Simulator (2) - Launch on iOS Simulator (8:06)
Developing on iOS Simulator (3) - Debugging (2:16)
How I Got Safari Simulator Debugging Working
Fix Footer on iOS Safari (6:13)
Developing on a Real iOS Device (8:59)
Fix the Camera & Post Image Button Issues (5:42)
Finished App Code

24: Assignment 2 - Progressive Web Apps

Assignment 2 - Progressive Web Apps (11:22)
Task 1 - Get App Running (4:51)
Task 2 - Change Theme Color (1:16)
Task 3 - Generate App Icons (1:45)
Task 4 - Install App Button (1) (1:55)
Task 5 - Install App Button (2) (1:53)
Task 6 - Enable Precache (2:22)
Task 7 - Caching Strategies (3:29)
Task 8 - Background Sync (1) (3:26)
Task 9 - Background Sync (2) (2:53)
Task 10 - Background Sync (3) (3:00)
Task 11 - Push Notifications - Notification Permission (1) (1:54)
Task 12 - Push Notifications - Notification Permission (2) (1:53)
Task 13 - Push Notifications - Create Push Subscription (1) (3:09)
Task 14 - Push Notifications - Create Push Subscription (2) (6:25)
Task 15 - Push Notifications - Store Push Subscription in Database (5:22)
Task 16 - “You’re subscribed!” Notification (2:00)
Task 17 - Send Push Notification from Backend (7:11)
Task 18 - Display Push Notification (3:51)
Task 19 - Handle Push Notification Click (4:14)
Task 20 - Host App on Firebase & Backend on Heroku (15:18)

25: What Next?

What Next? (1:29)
Update: Quasar V2, Vue 3 & Composition API (0:32)
Bonus Lecture: Learn More From Me (5:07)

Teach online with

Constrain the Page Content & Add Background Color

Complete and Continue

Discussion

0 comments