Mô tả

Here you will build a real world app and master app building technique by learning Flutter, Laravel, Firebase and third party SDK for audio and video call app.

Who will take it

  • Beginners to advanced learners

  • For landing a job

  • For colleague thesis

  • For prototyping

  • For mastering app building

App functional features

  • Third party login

  • Phone number login

  • Text chat

  • Image chat

  • Audio call chat

  • Video call chat

  • Sending notification (text, audio and video chat)

  • Profile page

  • Notification on text message receive

  • Notification on audio call

  • Notification on video call

  • Sound on initiating audio call

  • Sound on initiating video call

  • Save chat history

Third party login would involve Google, Facebook and Apple login. We will also see how to login using phone number. The chatting feature of this is very seamless since we used SQFLITE to save the chatting history locally. First we save chat messages locally and send them to the other end in the background service.

So users feel like the app very fast sending messages. The same happens for sending images. We first save the image locally and then send to other user.

We also save user profile locally, so you don't have to confirm with Firebase or Laravel for login.

Next time a user logs in, user will feel like it's fast, since we read the data locally first. The same happens for chatting history. Chat history is read from local storage first.

Flutter framework

We used Flutter framework for building beautiful UI for both iOS and Android. In Flutter framework, we also cover a lot of Dart knowledge and how to use models and classes to work with view and controllers.

Firebase service

We used Firebase for sending users registration and phone number login. We used Firebase also for sending notification. Here in this tutorial you will more complex features of firebase like saving chat history, images, listening to document updates and uploading images.

Laravel framework

Laravel framework we used for building API for authentication. We used it also for saving basic information and communicating with Firebase for sending notification.

Agora SDK

We used Agora SDK for using video and audio call service. Agora provides very stable API for audio and video call.

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

Flutter real world production ready video and voice chatting app including text messages

Learn how to set up different servers together and use in one project

Learn how to work with firebase, custom backend and third party servers

Learn about Laravel Framework, Firebase Firestore and Agora SDK

Learn about building API using Laravel Framework and use the API from Flutter Framework

Yêu cầu

  • Flutter and Dart SDK are installed as well PHP and Composer Installed

Nội dung khoá học

29 sections

Introduction

2 lectures
Introduction
04:46
Demo video
02:19

Project structure and folder

2 lectures
Basic project structure of the app
01:56
Create new project folder
02:27

Welcome module

7 lectures
Welcome module and controller
06:12
Welcome module and binding controller
02:41
Welcome module and create library
02:01
Welcome module and view
06:05
Welcome module and main.dart
08:29
Welcome module and onboard screen
09:39
Welcome module summary
03:32

Message module and middleware

2 lectures
Message module controller, binding, view and library
09:02
Understanding the middleware
09:37

Sign in module

2 lectures
Sign in module controller, binding and library
02:42
Sign in module routing and binding
03:21

Dependency Injection

1 lectures
Inject dependencies globally
07:32

Local storage and dependencies

3 lectures
Understand StorageService class and SharedPreferences
13:14
More on StorageService and SharedPreferences
04:39
Difference between Get.put, Get.lazyPut and Get.putAsync
04:46

Sign in module with third party login

9 lectures
Sign in module and page logo
07:07
Sign in module and third party login button
11:53
Build sign in page and dynamic name and logo part 0
02:47
Sign in module and phone number login part 1
05:59
Sign in module and phone number login part 2
10:14
Set up firebase with CLI
06:42
Sign in module and handleSignIn() part 1
06:23
Sign in module and handleSignIn() part 2
05:01
Sign in module and handleSignIn() part 3
04:41

Learn to reconfigure iOS and Android settings and SHA1 and SHA256 key generation

5 lectures
Must know about Google login
00:03
iOS and Android login and configuration
14:19
iOS and Android login and fingerprint
05:18
iOS and Android change bundle id and package name and generate SHA256 key
08:29
iOS and Android login and reset reverse client id
04:56

Learn what we are going to do next

1 lectures
Knowing about next new hours
02:18

Message module and getting messages from firebase

8 lectures
Message module and create route
05:04
Message module and middleware
06:11
Message module and basic page part 1
05:50
Message module and head bar
04:54
Message module and hear bar profile icon
09:23
Message module and more on profile icon
08:42
Message module and UserItem class
02:37
Message module and show online icon
03:33

Profile module

9 lectures
Profile module and set up
06:50
Profile module and body section
04:18
Profile module and show profile photo
06:07
Profile module and show edit icon
04:19
Profile module and complete button
05:52
Profile module and dialogue button
06:39
ProfilePage and logout part 7
03:59
Profile module and logout button
03:46
Profile module and minor changes in the UI
03:31

Backend module(server side)

8 lectures
Install laravel locally
04:49
Mac OS create MySQL database and set up
04:02
Mac OS install laravel-admin package
09:26
Laravel-admin package set up and configuration
05:46
Laravel basic understanding of the framework
17:22
Database server and local storage connection
06:55
phpMyAdmin users table edit
03:12
MySQL Workbench edit users table
05:31

Build dummy API

2 lectures
Laravel build dummy API and test using postman
10:18
Laravel dummy API test on the app
08:07

Middleware redirect and routing convention

2 lectures
Middleware redirect set up and keep the user logged in
11:39
Learn about laravel route set up and convention
05:52

Server side Login module

5 lectures
LoginController module and login method part 1
06:21
LoginController module and postman test part 2
06:13
LoginController module and Postman test part 3
07:38
LoginController module and access token and Postman test part 4
14:22
LoginController module and work on update access token part 5
06:09

API call on the app

2 lectures
Calling API from the app and understand the connection
06:16
Calling API from the app and debug API error
10:36

Deeper understanding of user profile saving and local storage connection

4 lectures
Saving user profile data during login and remove during logout
13:19
Understand how saving user profile works for better app performance
08:40
UserStore class login, logout and middleware
06:27
Create message page button (this part was missing from the original upload)
06:25

About the upcoming sections

1 lectures
Learn about the upcoming sections
02:16

Contact module and serside build API and middleware

17 lectures
Contact module front end set up
05:13
Contact module and app bar
03:23
Contact module and test API with Postman
08:04
Contact module and build middleware part 1
08:27
Contact module and Bearer token in middleware part 2
06:21
Contact module and middleware part 3
08:08
Contact module and finish working on middleware part 4
07:55
Contact module and load data from server part 5
11:55
Contact module and flutter load data and print part 6
06:36
Contact module and show other users profile photo part 7
10:26
Contact module and show other users data part 8
07:37
Upcoming sessions
01:23
Contact module and understand chatting query
09:27
Contact module and chatting algorithm query part 2
16:03
Contact module and chatting algorithm part 3
11:16
Contact module and chatting algorithm routing part 4
12:09
Contact module and routing part 5
09:51

Chat module

12 lectures
Contact module and Chat module view app bar part 7
15:41
Chat module and build user photo at the top part 2
06:06
Chat module and show dot on user photo part 3
05:36
Chat module and routing from contact module
03:20
Chat module and back button
01:50
Chat module and text field part 6
08:02
Chat module and simple debugging technique for container and textfield part 7
01:44
Chat module and textfield part 8
06:50
Chat module with send and plus buttons part 9
07:06
Chat module and plus button menu part 10
06:07
Chat module and plus button menu button part 11
06:45
Upcoming sessions
00:42

VoiceCall module

46 lectures
VoiceCall module and basic set up part 1
07:29
VoiceCall module and set up view part 2
08:25
VoiceCall module and show avatar and basic routing parameters
07:02
VoiceCall module and show the name part 3
05:06
VoiceCall module and microphone view part 4
10:32
VoiceCall module and call button and speaker button view part 5
06:14
VoiceCall module and controller and agora set up part 6
09:02
VoiceCall module and agora resisterHandler part 7
07:15
VoiceCall module and agora engine set up part 8
10:45
VoiceCall module and joinChannel and leaveChannel methods
10:33
VoiceCall module and change state in the view part 10
07:35
VoiceCall module and check if the user can join chatting room or not part 11
04:02
VoiceCall module and two simulators join the chatting room part 12
07:12
VoiceCall module and real device and simulators talking part 13
09:56
VoiceCall module and understand why we need API part 14
01:31
VoiceCall module and create controller in the laravel backend part 15
03:05
VoiceCall module and build your api for access token part 16
13:38
VoiceCall module and play sound and reinit the token part 17
07:27
VoiceCall module and get channel id dynamically part 18
10:46
VoiceCall module and token and api binding part 19
05:00
VoiceCall module and API test on Postman part 20
02:59
VoiceCall module and use access token and get Agora token 21
09:29
VoiceCall module and initiate call with real token part 22
03:44
VoiceCall module and send notification part 23
07:57
VoiceCall module and send notification part 24
06:26
VoiceCall module and send notification Firebase Admin SDK part 25
05:50
VoiceCall module and send notification part 26
05:40
VoiceCall module and send notification Postman test 27
05:45
VoiceCall module and send notification cloud api part 28
04:12
VoiceCall module and send notification and cloud api part 29
07:30
VoiceCall module and send notification android setting part 30
03:26
VoiceCall module and Assignment part 31
03:51
VoiceCall module and send notification and flutter settings part 32
05:25
VoiceCall module and send notification flutter settings and device token part 33
05:05
VoiceCall module send notification and get device token part 34
05:36
VoiceCall module and send notification and check device token part 35
05:04
VoiceCall module and send notification and create bind_fcmtoken endpoint part 36
09:36
VoiceCall module and send notification and get and save device token part 37
07:53
VoiceCall module and send notification and Postman and emulator test part 38
06:42
VoiceCall module and send notification and device to device call part 39
03:05
VoiceCall module and understanding voice call notification part 40
04:22
VoiceCall module and understanding notification part 41
14:42
VoiceCall module and understand foreground and background notification part 42
04:22
VoiceCall module and understand receive notification function part 43
12:57
VoiceCall module and understanding cancel and background notification part 44
08:24
Upcoming sessions
00:33

Chat module

34 lectures
Chat module and send message create function part 1
05:03
Chat module and send message create message object part 2
05:58
Chat module and send message add data to firebase collection part 3
10:52
Chat module and send message and return document id part 4
03:54
Chat module and send message understand collection and sub-collection part 5
04:14
Chat module and send message and understand collection fields part 6
04:22
Chat module and send message and get document id from collection part 7
04:26
Chat module and send message and get firebase collection fields part 8
08:49
Chat module and send message and update documents fields part 9
09:42
Chat module and send message and understand orderBy limit and snapshot part 10
13:47
Chat module and send message and understand snapshot data edit part 11
09:11
Chat module and send message and get query snapshot part 12
10:06
Chat module and send message and add docs to temporary list part 13
08:55
Chat module and send messages and understand the temporary list part 14
05:21
Chat module and send message and release listener resources part 15
05:47
Chat module and send message and slivers for ui part 16
05:47
Chat module and send message and show message on the ui part 17
08:39
Chat module and send message and style text in the ui part 18
10:00
Chat module and send message and understand CustomScrollView and Slivers part 19
07:14
Chat module and send message and left chat list part 20
05:35
Chat module and send message and fix bug part 21
02:55
Chat module and send message and auto scrolling part 22
07:11
Chat module and send message and minScrollExtent part 23
04:36
Chat module and send message and min and maxScrollExtent part 24
07:32
Chat module and load more data async part 25
08:04
Chat module and add listener part 26
05:07
Chat module and load more data part 27
02:39
Chat module and understand scrolling and load more data part 28
06:03
Chat module and device to device chat part 29
02:04
Chat module and send image part front end method 30
10:58
Chat module and send image and understand upload_img method part 31
03:21
Chat module and send image and API end point part 32
07:56
Chat module and send images and view on browser part 33
06:33
Chat module and send images device to device part 34
11:45

Miscellaneous

3 lectures
Hide keyboard and menu of chat
04:14
Show profile photo in message page
06:40
Show profile photo in profile page
04:36

Message module

18 lectures
Message screen and introduction
01:58
Message screen, slivertoboxadapter and tab bar part 1
05:08
Message screen and tab bar part 2
04:24
Message screen and tab bar part 3
04:46
Message screen and tab bar part 4
07:37
Message screen and load messages part 1
06:09
Message screen and load message part 2
06:43
Message screen and load message part 3
06:01
Message screen and load message part 4
07:15
Message screen and load message part 5
07:42
Message screen and load message part 6
02:57
Message screen and load message part 7
06:40
Message screen and show user icon part 8
10:20
Message screen and show name and message part 8
04:33
Message screen and show number of messages part 10
06:32
Message screen and time format part 11
05:41
Message screen and chat route part 12
05:23
Message screen and clear red dots part 13
12:06

Video call module

15 lectures
Video call and folder structure and state changes part 1
07:03
Video call and changes in the agora engine set up part 2
05:44
Video call and switchCamera method part 3
02:53
Video call and UI part 4
04:50
Video call and ui part 5
05:05
Video call and ui and make call part 6
06:49
Video call and ui button design part 7
04:09
Video call and ui and show other user's name part 8
06:42
Video call and android section part 9
07:28
Video call and iOS set up part 10
05:22
Video call and send notification between devices part 11
09:56
Video call and show time on the UI part 12
19:32
Video call and test from real device iOS and Android part 13
02:21
Video call and save call time in the database part 14
09:15
Video call and update last message data in the firebase part 15
13:11

Profile section

8 lectures
Profile and show name and edit part 1
18:53
Profile and save name in the state part 2
18:47
Backend and build end point and method part 3
15:55
Frontend profile and save description part 4
20:48
Frontend and save profile description in the database part 5
15:48
Working on change avatar and functions part 1
14:23
Work on the bottom sheet part 2
09:10
Update profile image part 3
10:13

Show call data from firebase

4 lectures
Get call data from firebase
10:24
Show call data on the ui
13:01
Show actual call time
06:58
Show call info on the message section
08:57

Complete code

1 lectures
Complete code
00:11

Đá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.