Mô tả

In this course I’ll show you how to use Quasar Framework V1 (along with Vue JS 2, Vuex & Firebase) to create real-world, cross-platforms apps using a single Vue JS codebase; and get these apps production-ready and deployed to all the major platforms - Web, iOS, Android, Mac & Windows.

Throughout this course we'll create a real-world app called Awesome Todo. In this app we can add, edit or delete tasks and mark them as completed. 

We can also sort tasks by name or date and search through tasks using a search bar.

It's also going to have a Settings page, with 2 real settings which change the way the app works - and which persist when app is closed and restarted (or the browser reloaded on the web version). It will also have a help page, a "visit our website" link and an "email us" link.

The app will have its own back-end created using a Firebase Realtime Database. Users can register, log in and see their data sync in realtime across all of their devices.

We'll get the app production ready for all the different platforms - web, iOS, Android, Mac & Windows.

You'll learn all of the basics of Quasar Framework, including the Quasar CLI, Quasar Components, Quasar Plugins, Quasar Directives, Platform Detection, Layouts, Theming & various Quasar Utilities.

I'll also show you all of the basics of Vue.js, including Data Binding, Events, Computed Properties, Components, Directives, Filters, Lists & Lifecycle Hooks.

You'll learn how to manage the state of your app using Vuex, where I'll cover State, Mutations, Actions & Setters.

I'll cover all of the basics of Firebase, including Authentication, Reading data, Writing data & protecting your data with Database Rules.

By the end of this course, you will be able to create your own real-world apps, with real back-ends which work on all the different platforms.

NOTE: This course is for Quasar V1 (with Vue 2). Quasar V2 (with Vue 3) is not covered in this course.


Bạn sẽ học được gì

How to create a real-world, cross-platform app for web, iOS, Android, Mac and Windows using Quasar Framework V1 and Firebase

How to manage the state of your app using Vuex

How to create a back-end for the app using Firebase Realtime Database - including user authentication, reading and writing data

All the essentials of Quasar Framework V1 and VueJS 2

Yêu cầu

  • Basic HTML and CSS knowledge is required
  • Basic JavaScript knowledge is beneficial but not required
  • Basic VueJS knowledge is beneficial but not required
  • A Mac for development is preferred

Nội dung khoá học

36 sections

Introduction

3 lectures
Introduction & Course App: Awesome Todo
03:26
What is Quasar?
03:30
What is Vue.js?
07:16

Getting started

6 lectures
Module Introduction
00:25
Install Node.js and Quasar CLI
01:40
Create & launch a new Quasar Project in the Browser
03:35
Update: Quasar V1 Documentation
00:10
Auto-import Components & Directives
00:25
Folder structure - Layouts, Pages, Routes & more
03:26

Vue.js Basics

16 lectures
Module Introduction
00:37
Anatomy of a Vue Single File Component
01:55
Binding Data to the View
01:54
Two-way Data Binding with v-model
00:59
Events & Methods - Click
02:31
Events - Keyboard & more
05:42
Showing and Hiding Elements - v-show
02:23
Conditional Rendering - v-if & v-else
02:43
Computed Properties
05:38
Filters
03:23
Directives
02:33
Binding to Attributes & CSS
05:11
Lifecycle Hooks - Introduction
02:02
Lifecycle Hooks - In Action
03:15
Refs
04:15
Practise Vue.js Basics
1 question

Vue.js Lists and Components

8 lectures
Module Introduction
00:49
Displaying Lists with v-for
02:25
Displaying more details
05:17
Child Components
04:03
Passing Data to Child Components - Props
02:10
Passing Data to Child Components - Slots
00:52
Keys
01:39
Practise Vue.js Lists & Components
1 question

Start building the Awesome Todo app

10 lectures
Module Introduction
00:20
Pages and Routes
04:04
Add Page Navigation to Sidebar (Drawer)
06:59
Tab Navigation for Mobile
06:11
Consolidating Navigation Data
05:23
Only show Drawer on Desktop, Tabs on Mobile
03:51
Adding some Style to the Layout
07:21
Add SCSS support
02:01
Customise Theme with Theme Builder
01:42
Module Code
00:06

Create the List of Tasks

5 lectures
Module Introduction
00:22
Display a List of Tasks
07:15
Add Due Date and Time
07:31
Add some Style to the List of Tasks
04:02
Module Code
00:06

Vuex - State Management - Setting Up

7 lectures
Introduction to Vuex
03:38
Setup a Vuex Store
03:05
Add Tasks Data to the Vuex Store / Vue Devtools Chrome Extension
02:15
Create a Getter for the Tasks Data
04:01
Change Tasks Array into an Object Structure
03:00
Put Task into a Child Component
04:07
Module Code
00:06

Vuex - Actions & Mutations

5 lectures
Module Introduction
00:23
Set Completed Status in Vuex Store
10:16
Delete Task - Add Delete Button & Confirm Dialog
06:20
Delete Task - Delete the Task from the State
04:22
Module Code
00:06

Add Task - Forms, Fields & Validation

8 lectures
Module Introduction
00:34
Add Task - Button & Modal
08:00
Add Task - Customize the Modal
04:07
Add the Fields
09:02
Form Validation & Submission
08:24
Vuex - Add Task when Form Submitted
10:11
A Few Improvements
12:40
Module Code
00:06

Edit Task - Child Components in-depth, Update and Sync, Slots

10 lectures
Module Introduction
00:27
Add Task - Reusable Components (1/5): Modal Header
03:15
Add Task - Reusable Components (2/5): Task Name
05:08
Add Task - Reusable Components (3/5): Due Date
03:55
Add Task - Reusable Components (4/5): Due Time
02:42
Add Task - Reusable Components (5/5): Buttons
02:58
Edit Task - Add the Button & Show the Modal
04:09
Edit Task - Customise & Setup the Modal
05:59
Module Code
00:06
Practice Vuex, Forms, Quasar Components & Vue.js
1 question

Split Tasks into "Todo" and "Completed" Sections

9 lectures
Module Introduction
00:32
Create Getters for Todo and Completed Tasks
05:46
Display Todo and Completed Tasks in Separate Lists
05:36
Add Headings to the Task Lists
07:25
Make the Heading Background Color Adjustable
02:36
Conditionally Show & Hide the Task Lists
01:28
Add a "No tasks to do today!" Banner
04:04
Use Global Event Bus to fix the "No tasks" Banner Button
05:38
Module Code
00:06

Add a Search Bar

8 lectures
Module Introduction
00:14
Add the Search Bar Markup
03:33
Connect Search Bar to Vuex State with mapState
02:20
Use a Computed Property Setter to set the Vuex search value
01:29
Setup an Action & Mutation to set the search property
02:21
Filter the Tasks based on Search Value
06:27
Display “No search results” & Hide the “No tasks today” Banner
03:47
Module Code
00:06

Add a Sort Dropdown (to sort Tasks by Name / Due Date)

7 lectures
Module Introduction
00:10
Add Sorting Getter to Vuex Store
08:45
Make the Sort Criteria Configurable
01:14
Add a Sort Dropdown Component to the Page
04:37
Sort Dropdown - Configure the Options
05:18
Link the Sort Dropdown to the Vuex Store State
04:11
Module Code
00:06

Improve the app with Transitions, Directives, Filters, Mixins & Scroll Area

12 lectures
Module Introduction
00:37
Custom Directive - Select All Text in Input when Clicked
05:00
Custom Directive - Make it Global!
02:51
Clear the Search Field when Esc pressed
01:11
Click and Hold a Task to Edit with v-touch-hold Directive
02:57
Filter - Format the Date Nicely
03:27
Filter - Highlight the Search Query on Matching Tasks
08:51
Mixin - Combine Duplicated Code on Add / Edit Task into Mixin
04:23
Transitions - Animate the Showing & Hiding of Components
06:06
Add a Scroll Area
06:22
Enable clicking beside the Add Task button
01:44
Module Code
00:06

Settings Page

12 lectures
Module Introduction
00:44
Add a "Show 12 hour time format" Setting
04:21
Vuex - Create a Settings Store
03:05
Add a Computed Getter & Setter
03:04
Format the Time with a Computed Property
05:43
Add a "Show tasks in one list" Setting
07:19
Make the Settings Persistent using LocalStorage Plugin
07:00
Get & Apply the LocalStorage Settings on App Load
04:21
Add a "More" Section and a Help Page
05:03
Add a "Visit our website" Link with openURL Utility
01:38
Add an "Email us" Link
01:29
Module Code
00:06

Create a Login & Register Page

10 lectures
Module Introduction
00:19
Create a Login & Register Page (and Route)
02:46
Create Tab Panels for Login & Register
03:44
Register - Create Component & Add a Banner
02:30
Register - Add Email/Password Fields & Button
04:14
Register - Form Validation
04:36
Register - Submit Form if Valid
01:52
Login - Reuse the Register Component
03:06
Login / Register - Customise the Banner
02:31
Module Code
00:06

Firebase - Introduction

4 lectures
Introduction to Firebase
04:07
How we’re going to use Firebase
02:48
Create a Firebase Project
04:06
Setup Authentication
01:35

Firebase - Authentication

14 lectures
Module Introduction
00:35
Add Firebase to the Project using Boot File
05:47
Vuex - Create an Auth Store
01:10
Register User
05:30
Login User
02:20
Add Logout Button - Show only when User Logged In
05:44
Logout Button - Log the User Out
03:02
Redirect on Log In / Log Out
03:12
Fix the NavigationDuplicated error
00:24
Navigation Guards - Protect Routes when Logged Out
02:30
Navigation Guards - Create a Boot File
05:48
Handling Errors
04:54
Show a Loading Overlay when Logging In
03:37
Module Code
00:06

Firebase - Setup the Data Structure

3 lectures
Module Introduction
00:26
Data Structure - Design
03:25
Data Structure - Add to Firebase using Import
02:54

Firebase - Reading Data

7 lectures
Module Introduction
00:19
Read Data when user Logs In
03:16
Connect to the Database
01:24
Read Data - When Task Added
07:31
Read Data - When Task Updated
02:51
Read Data - When Task Deleted
02:27
Module Code
00:06

Firebase - Writing Data

5 lectures
Module Introduction
00:11
Write Data - When Task Added
05:01
Write Data - When Task Updated
02:13
Write Data - When Task Deleted
01:51
Module Code
00:06

Firebase - Improve The Loading Experience

5 lectures
Module Introduction
00:10
Add a Loading View for the Todo Page
03:12
Make the Loading View Pretty
01:32
Hide Loading View when Tasks Downloaded
03:07
Module Code
00:06

Firebase - Multiple Users & Database Rules

4 lectures
Module Introduction
00:20
Clear the State after User Logs Out
04:05
Update the Firebase Database Rules
09:57
Module Code
00:06

Firebase - Handle Errors & Show Notifications

6 lectures
Module Introduction
00:15
Handle Write Errors
03:45
Handle Read Errors
01:22
Add Notifications
06:39
Module Code
00:06
Practice Firebase
1 question

Platforms - Web

7 lectures
Module Introduction
00:18
Icon Genie - Introduction & Installation
01:39
Create the Source Icon (or just download it)
04:22
Generate Icons with Icon Genie
02:55
Create an NPM Script for our Command
01:04
Build and Deploy App to the Web
03:29
Module Code
00:06

Platforms - Mac (Electron)

18 lectures
READ THIS If you don't have a Mac
00:33
Module Introduction
00:50
Add the Mac Platform
01:47
Fix Style Issues
07:12
Electron Main Process file & Tidying Up
04:56
Customise Browser Window Settings
01:59
Make Menu Customizable with a Menu Template
04:14
Put the Menu Template into a Separate File
02:28
Menu - Add a Settings Option
03:29
Menu - Listen to Settings Option with IPC Receive / Platform Detection
03:17
Add a Keyboard Shortcut to the Settings Menu Option
02:01
Add a Quit Button to the Drawer with IPC send
04:34
Listen for the Quit Event and Quit the App
01:20
Removing App Data (LocalStorage etc)
02:09
Add an App Icon
01:28
Build for Production
02:16
Security concerns for Electron apps
00:34
Module Code
00:06

Platforms - Windows (Electron)

10 lectures
READ THIS If you're developing on a Windows Computer
00:35
Module introduction
00:18
Install VirtualBox
01:14
Install Windows 10 Virtual Machine
01:23
Setup Virtual Machine - Enable File Sharing
02:35
How to work on the Windows version of your app
00:58
Build the Windows version
04:51
Menu - Add File Menu with Settings option
03:25
Generate your Windows Icon with Icon Genie
00:18
Module Code
00:06

Platforms - iOS (Cordova)

17 lectures
Module Introduction
00:28
Install Cordova and Xcode
01:49
Launch the app on iOS Simulator for Development
04:44
src-cordova folder
02:04
Add iOS Statusbar and Footer Padding / Safari Dev Tools
04:50
Fix the Email Input
01:21
Fix the Task List
02:56
Auto Focus - Fix Auto Focus issue on Add / Edit Task Modals
03:19
Auto Focus - config.xml - Enable Automatic Input Focussing
03:43
Auto Focus - Limit the Focus Delay to only Cordova Platform
02:09
Auto Focus - Make the Delay Period Configurable
05:52
Cordova Plugins - InAppBrowser
02:01
Generate Icons & Splashscreens with Icon Genie
03:45
Simulator - Run on Different iOS Devices
03:12
Develop on a Real iOS Device
04:59
Build the App for Production
01:28
Module Code
00:06

Platforms - Android (Cordova)

8 lectures
Module Introduction
00:20
Install Android Studio & SDK
01:36
Setup Virtual Device
01:49
Add Android to your Path
02:57
Launch on Android Simulator
09:31
Generate your Android Icon & Splashscreen with Icon Genie
00:16
Build the App for Production
00:56
Module Code
00:06

Course Round Up

2 lectures
Course Round Up
02:55
Update: Quasar V2, Vue 3 & Composition API
00:32

Bonus Lectures

2 lectures
More Content from Me!
00:14
My VSCode Extension - "Split HTML Attributes"
00:12

ARCHIVE: 25 Platforms - Web

4 lectures
Download all Icons and Splashscreens
01:15
How I Created the Icon in Sketch (optional)
06:17
Add the Icons to Awesome Todo
04:23
Icon Genie - Generate Icons & Splashscreens Instantly!
00:16

ARCHIVE: 26 Platforms - Mac (Electron)

4 lectures
ARCHIVE: Make Menu Customizable with a Menu Template
04:38
ARCHIVE: Put the Menu Template into a Separate File
02:16
ARCHIVE: Add an App Icon
02:20
ARCHIVE: Icon Genie - Generate Icons & Splashscreens Instantly!
00:16

ARCHIVE: 27 Platforms - Windows (Electron)

2 lectures
ARCHIVE: Add Icon
03:10
ARCHIVE: Icon Genie - Generate Icons & Splashscreens Instantly!
00:16

ARCHIVE: 28 Platforms - iOS (Cordova)

4 lectures
ARCHIVE: Add App Icons
06:10
ARCHIVE: Splashscreen - Create (optional)
04:07
ARCHIVE: Splashscreen - Add to App
01:53
ARCHIVE: Icon Genie - Generate Icons & Splashscreens Instantly!
00:16

ARCHIVE: 29 Platforms - Android (Cordova)

4 lectures
ARCHIVE: Add App Icons
03:04
ARCHIVE: Icon Genie - Generate Icons & Splashscreens Instantly!
00:16
ARCHIVE: Splashscreen - Create (optional)
04:42
ARCHIVE: Splashscreen - Add to App
02:02

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.