Vue JS and Firebase:Build an iOS and Android chat app [2020]
4.2 (65 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
10,672 students enrolled

Vue JS and Firebase:Build an iOS and Android chat app [2020]

Vue JS, Vuex and Framework7 are awesome mix to build iOS and Android app. Firebase help to create a real time mobile app
4.2 (65 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
10,672 students enrolled
Created by Kim Chen
Last updated 3/2020
English
English [Auto-generated]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 10 hours on-demand video
  • 2 articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Build an amazing real world iOS and Android Chat Application
  • Implement Firebase Authentication to the mobile app
  • Send Image to your friends through the mobile app you create
  • How to create one on one chat
  • How to create a group chat which allow to add and remove members
  • Implement email verification and forget password to the Firebase Authentication
Course content
Expand all 92 lectures 09:48:05
+ Create Chat App pages and signup function
24 lectures 03:01:45
Create a project reminder
00:09
Source code
00:14
Create sign up page
09:51
Connect the app to firebase
04:13
implement Vuex
05:30
Create sign up action
16:05
Toast Firebase message
12:59
Apply mixin
04:06
Browser custom photo for user profile picture
03:46
Create read file action
12:18
Sign up with custom profile picture
15:28
Auto go to sign in page after sign up
05:08
Create send email verification action
04:59
Create sign in action
10:11
Make the app remember the sign in status
03:49
Create sign out action
04:05
Check whether the email is verified
06:40
Create count down on sending verification email
11:18
Dynamic style of button
03:02
Conditionally display resend button
04:09
Add forget password function
05:49
Add profile picture and name to the left panel
12:06
+ Edit Profile Page
32 lectures 03:53:47
Create edit profile page
11:35
Modifiy the data and ui inside edit profile page
09:01
Create update profile function
11:40

We'll create one notification icon for notifying there are incoming requests. The other icon is to go to another page to add some new friends

Create two icons
03:28

In this part we are going to create two pages, the requests page for listing out who send you a friend request. The contacts pages is to show all the available users.

Create two pages
03:49

For getting all the users, we will use Vuex , which go to the store.js to add an action to get all users

Get all user action
07:35
Beautify the contacts page
07:27
Create send request action
04:48
Create send request function
05:03
Install lodash and make it can use the async await
25:05
Complete get my requests action
14:40
Beautify the requests
03:07
Create delete request action
07:44
Create confirm request action
07:42
Create get all friends action
07:59
Beautify the home page
02:45
Create chat page
07:46
Detail the chat page
08:45
Create send message action
05:43
Create send message function
04:44
Create get chat messages action
10:15
Display messages
03:23
Group the messages by date
04:59
Clear unnecessary code
03:04
Browse photo as message
05:34
Create read file message action
06:53
Create upload chat images action
05:38
Send image messages
07:42
Create get user key action
05:21
Create send latest message action
06:26
Modify send message action
05:28
Display latest message on friend list
08:38
+ Group Chat
36 lectures 02:52:32
Create chat groups page
04:41
Create new group page
03:49
Beautify the create new group page
04:57
Create group chat module
04:34
Initialize group image
03:18
Modify the readFile action
04:54
Create new group
03:46
Modify upload file action
04:54
Create group action
06:27
Create get all groups action
05:05
List out the groups
03:53
Create chatgroup page
03:15
Edit chat group page
06:35
Add options to chat group
03:52
Add pages relate to the options
06:05
Get group image
07:13
Add new members action
04:15
Add new member function
07:58
Get group members action
04:23
Modify potential member list
05:50
Display group members
02:43
Remove member
09:09
Show number of members
03:08
Determine which action group
05:17
Leave group action
05:53
Bind leave group action to method
01:36
Edit get group member action
01:43
Group info page
03:32
Delete unncessary data
03:11
Send group message action
11:31
Send group message function
04:07
Send image message
04:45
Get group messages
07:19
Display group messages
02:44
Send latest message to group
05:01
Display latest message
01:09
Requirements
  • Basic VueJS knowledge is required
  • ES6 knowledge is an advantage
  • A basic understanding of HTML, CSS & JavaScript
Description

Master the VueJS and Firebase together to build an amazing iOS and Android chat application. By learning from this course, you are not only can build chat application, but also can apply these knowledge to build other incredible applications.


If you’re looking to get started building a real-world mobile chat app, then this course is best for you. In this course, I will teach you how to use Vue JS and Framework7 as frontend, Firebase as backend to build the chat app from scratch.


VueJ S is a very simple framework, which combine with the best of Angular and React


Framework7 is an open source framework7, which let you develop mobile, desktop or web app with a native look and feel


Firebase is a real time database, it allows you to create authentication easily, user can login with email, google, Facebook and twitter account.


The course will cover

Firebase user Authentication

Forget the password

Email Verification

Firebase real time database

One on one chat

Group chat


Who this course is for:

  • Anyone who wants to learn how to create native view mobile app with Vue JS & Firebase

  • Anyone who wants to learn Vue JS and Firebase

  • Anyone who wants to learn about Authentication in Vue JS apps

  • Anyone who wants to learn how to use Firebase in their real time applications

Who this course is for:
  • You are interested in building a state-of-the-art iOS and Anrdoid applications
  • You are looking for the best back-end which can help to create a real time application
  • You are looking for the framework which is much easier than Angular or React