Build WhatsApp Clone with Clean Architecture - WEEK 4 & 5 of Flutter & Firebase Developer Bootcamp

Просмотров 8 тыс.

% 255

#flutter #firebase #bootcamp #cleanarchitecture #whatsapp
Welcome to the Complete Clean Architecture WEEK 4 & 5 of Flutter & Firebase Development Bootcamp, in these WEEKs we will build complete WhatsApp Clone with Clean Architecture, including the following features:
🎉 WEEK 4 Flutter & Firebase Bootcamp 🎉
00:00 - Overview to Software Structure & Design
05:49 - Understanding Clean Architecture
08:45 - Why only four layers?
10:17 - Clean Architecture in Flutter
10:46 - Clean Architecture VS TDD Clean Architecture in Flutter
13:06 - Clean Architecture Presentation Layer Call Flow
14:12 - Setup Presentation Layer in Flutter Project
14:36 - Clean Architecture Domain Layer Call Flow
15:48 - Setup Domain Layer in Flutter Project
16:17 - Clean Architecture Data Layer Call Flow
17:30 - Setup Data Layer in Flutter Project
18:37 - Understanding combine workflow of Clean Architecture
20:43 - Demo of WhatsApp Clone Clean Architecture
38:07 - Designing WhatsApp Clone UI in Flutter Part 1
01:10:08 - Designing WhatsApp Clone UI in Flutter Part 2
01:44:23 - Designing WhatsApp Clone UI in Flutter Part 3
02:37:56 - User Feature Domain Layer
02:57:40 - User Feature Data Layer
03:22:28 - User Feature Presentation Layer
03:47:53 - User Feature Dependency Injection
04:04:05 - User Feature Binding Logic in UI
05:00:47 - Chat Feature Domain Layer
05:26:46 - Chat Feature Data Layer
05:59:21 - Chat Feature Binding Logic in UI
06:00:29 - Load Contacts from Firebase
06:08:53 - Create other user in Firebase
06:10:53 - Load MyChat Conversations
06:17:30 - Load Messages in SingleChatPage
06:30:51 - Send Text Message (Text)
06:36:59 - Realtime Message Test
06:39:40 - Common method for messages (Image, Video, Gif, Audio)
06:43:58 - Preparing methods for messages (Image, Video, Gif, Audio)
06:52:16 - Track Bottom on Message send
06:58:50 - Adding Preview Widgets
07:09:07 - Binding Methods in UI
07:13:19 - Add Permission in Android & iOS
07:14:21 - Send Image Message
07:15:03 - Send Video Message
07:16:16 - Send Gif Message
07:16:51 - Send Audio Message
07:18:35 - Delete Message
07:20:20 - Run Flutter App on iOS Simulator
07:21:40 - Firebase Exception [firestore/core] duplicates app named "[DEFAULT]" already exist
07:23:15 - Firebase Phone Auth fails in iOS Simulator [FIXED]
07:25:20 - Firebase Exception [cloud_firestore/unavailable] - [FIXED]
07:29:07 - iOS Simulator Limitations
07:30:01 - video_player not work on iOS issue #5665 [PlatformException]
07:31:18 - Reply Message in WhatsApp Flutter Clean Architecture
07:54:05 - Show Emoji Keyboard Flutter
08:03:09 - Seen Message in WhatsApp Flutter Clean Architecture
08:11:25 - Online/Offline Status in WhatsApp Flutter Clean Architecture
08:15:19 - Test Seen Message & Online/Offline Status
🎉 WEEK 5 Flutter & Firebase Bootcamp 🎉
08:20:35 - INTRO
08:21:24 - Status Feature Domain Layer
08:40:13 - Status Feature Data Layer
09:09:14 - Status Feature Binding Logic in UI
10:12:10 - Call Feature Domain Layer & Data Layer
10:32:43 - Call Feature Binding Login in UI
10:33:55 - Adding Update Call Status feature
10:36:04 - Flutter Agora Setup (Create Project)
10:37:30 - Adding Agora Config in Flutter App
10:38:45 - Creating Call Feature Cubits
10:44:09 - Injecting Call Feature Classes (Dependency Injection)
10:45:36 - Create Agora Call Page
10:49:06 - Create Agora Pick Up Call Page
10:54:20 - Implementing Make Call Method
10:57:07 - Agora Token-based Authentication
10:59:41 - Set up Node Server to get Agora Token
11:02:15 - Set up Agora tokenUrl in Flutter App
11:03:05 - Flutter Agora RealTime Calling in Action WhatsApp Clone Clean Architecture
11:07:23 - Flutter Agora Call History WhatsApp Clone Clean Architecture
11:10:39 - Flutter Agora Call History in Action
11:12:38 - Intro to Firebase Cloud Messaging
11:13:13 - What is FCM (Firebase Cloud Messaging)?
11:13:37 - What are Firebase Cloud Functions?
11:15:01 - Enable Firebase Project Billing
11:16:27 - Switch Firebase Project in Flutter
11:18:59 - Explore Firebase Cloud Messaging & Functions
11:21:17 - Adding "token" field in user model
11:23:42 - FCM set up in Flutter App
11:28:59 - Send Push Notification Manually
11:30:56 - Setting up notification collection for push notifications
11:38:24 - Set up Firebase Cloud Functions
11:40:53 - Write Firebase Cloud Function for Push Notification
11:44:39 - Deploy Firebase Cloud Function
11:45:57 - Push Notifications on message send in action
11:48:18 - Ending
Flutter WhatsApp Clone Clean Architecture Source Code: github.com/AdnanKhan45/whatsapp-clone
Flutter Firebase Push Notifications source code: gist.github.com/AdnanKhan45/cfd83e7a51a74d5895505ffbbbaaf66b
Node.js Server source code : gist.github.com/AdnanKhan45/b4da97865439c5b36e717f00365eb6d1
LinkedIn : www.linkedin.com/in/muhammad-adnan-23bb8821b/
Medium : medium.com/@ak187429
Instagram: etechviral
LinkedIn: www.linkedin.com/company/etechviral

Наука

Опубликовано:

31 янв 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 55

@takundamafuta7355 12 дней назад

Hi sir, do you have a tutorial of how you setup your vscode extensions, everything looks awesome? I'm curious to know when you minimise e.g. it appears with a closing bracket.

@anshajlogan1040 4 месяца назад

Good one ❤ thankyou 🎉

@takundamafuta7355 13 дней назад

Thank you, can you share vscode extensions you are using?

@Decem02 3 месяца назад

Thank you for your teaching My master

@CartoonHouse-nc5sm Месяц назад

Sir great work ❤

@cromuelbarut9859 7 месяцев назад

awesome bootcamp

@hectorprx 9 месяцев назад

Thanks amd all the best

@icecream-wzsz 8 месяцев назад

Awesome bootcamp >>>>>🌷

@frankyjunior6005 16 дней назад

hi is this support pagination to load old message?

@takundamafuta7355 11 дней назад

Hi, which text editor or IDE is this?

@SubramanyanS-x3t 3 месяца назад

hi is there any way to use the agora without serrver i have to host for my bootcamp. or do i hve to use the zegocloud

@eTechViral 2 месяца назад

Try heroku

@SargodhaBut 7 месяцев назад

I haven't learned bloc state management. But I have learned provider can I start this tutorial? Easily or I should go and learn bloc 1st?

@eTechViral 7 месяцев назад

You don't need to learn anything else. We will teach you everything you need to know. We already taught Bloc and Cubit in Week 2. Make sure you check that out too. 🤗

@locnguyenxuan1891 6 месяцев назад

I have an error with onSwipe in the single_chat_page as follows:The argument type 'void Function()?' can't be assigned to the parameter type 'void Function(DragUpdateDetails)?'. dartargument_type_not_assignable {void Function()? onSwipe} Type: void Function()? , how to fix it, thank you very much

@eTechViral 6 месяцев назад

Change the onSwipe type to Function(DragUpdateDetails)? in the parameters of MessageLayout method. And while calling it in the list view just put the value in the paranthesis and you're good to go.

@wandanichikanda5567 6 месяцев назад

@@eTechViral This is the only error in the code. Please show us exaclty where to change the code to fix this problem and please provide the code so I can just copy paste. Kind regards

@wandanichikanda5567 6 месяцев назад

so basically here's how I did it following the code: _messageLayout( {Color? messageBgColor, Alignment? alignment, Timestamp? createAt, void Function(DragUpdateDetails)? onSwipe, String? message, String? messageType, bool? isShowTick, bool? isSeen, VoidCallback? onLongPress, MessageReplayEntity? reply, double? rightPadding}) { return Padding( padding: const EdgeInsets.symmetric(horizontal: 5.0), child: SwipeTo( onRightSwipe: onSwipe, then I updated the other swipe code as follows: onSwipe: (DragUpdateDetails details) { onMessageSwipe( message: message.message, username: message.senderName, type: message.messageType, isMe: false); setState(() {}); }, and onSwipe: (DragUpdateDetails details) { onMessageSwipe( message: message.message, username: message.senderName, type: message.messageType, isMe: true); setState(() {}); } Works like a charm. Give me a page like and subscribe if this was usefull to you

@Hande_hoch 4 месяца назад

5:10:14 how did you share your phones screen on the comp screen?

@shafeemahmoud5769 4 месяца назад

We heard that this course is too hard for you. Let us know what exactly you're struggling with, sir.

@ghulammurtaza7959 8 месяцев назад

Wow man! you are Allah's gift for us.

@eTechViral 8 месяцев назад

Glad to hear that ❤️

@tuangreen9244 7 месяцев назад

can i ask that if i turn off the internet and use the app, can it show data locally in my device? Like message history, call history,... Because i don't see you use local storage like hive or sqflite here

@eTechViral 7 месяцев назад

Yes, the data will be loaded but other actions will not work.

@tuangreen9244 7 месяцев назад

@@eTechViraloh so how can it be loaded if u not store them locally in device bro?

@eTechViral 7 месяцев назад

This is because we're using Firebase Cloud Firestore and it provides offline persistence of data. Firestore automatically caches data locally when app is online. If the user lost connectivity, then the app can still query this cached data.

@tuangreen9244 7 месяцев назад

@@eTechViral Oh that's it, thanks u so much for answer me, btw u are a great teacher ever!

@trijalsrimal2725 6 месяцев назад

does this have the feature where messages are no longer stored on firebase when they are on users device ??

@eTechViral 6 месяцев назад

You can view all the features on the GitHub link below: github.com/AdnanKhan45/whatsapp-clone

@shrayeshdahal 3 месяца назад

Amad sir you give to option delete message but did not save message like vido and image we cannot save device storage how to add healp me

@eTechViral 3 месяца назад

The videos and images are currently stored in the Firebase Storage. You can add them into device storage by using some other package from pub.dev

@Oveshshaikh001 8 месяцев назад

sir you handled stream data with cubits?

@eTechViral 8 месяцев назад

Yes.

@Oveshshaikh001 7 месяцев назад

now my i got my Mistake, i was implemented my all logic in bloc class, but now i understand only call the function not write logic here, right Sir?

@eTechViral 7 месяцев назад

Absolutely right!

@Oveshshaikh001 7 месяцев назад

@@eTechViral without clean architecture we are implement logic in bloc Class?

@penielngeleka3515 9 месяцев назад

What state management you using?

@eTechViral 9 месяцев назад

Bloc's Cubit

@henrik908 9 месяцев назад

Cross Platform is good for the small businesses.

@eTechViral 9 месяцев назад

Even large companies are adopting flutter from 2022 because of it's increasing growth and performance in the community. Please do some research.

@henrik908 8 месяцев назад

@@eTechViral Your flutter depends on the plugins which are written in the native and it can never become as efficient as native. Native offers more hardware control and high performance.

@Oveshshaikh001 8 месяцев назад

in this app your using bloc state management???

@eTechViral 8 месяцев назад

It's Cubit. The Bloc's subset

@Oveshshaikh001 8 месяцев назад

@@eTechViral it can projects coming with bloc after 7 week bootcamp completed

@eTechViral 8 месяцев назад

Yes. We will create videos on that too.

@eTechViral 8 месяцев назад

If you want to learn BLoC, we already taught that in WEEK 2. even we build 2 apps with BLoC. You can check full playsuit you'll found other useful content too.

@usamaali7825 9 месяцев назад

Can you help me in one page ?

@eTechViral 9 месяцев назад

Yes. Which one?

@shafeemahmoud5769 4 месяца назад

Sir, maybe you're good at making architecture, but your UI-related code is very bad. Why you don't decompose such long code? It's too hard or even impossible to read it. Also you don't follow DRY principle in UI.

@eTechViral 4 месяца назад

Noted.

@anmolrao4021 3 месяца назад

: Error: The getter 'subtitle1' isn't defined for the class 'TextTheme'. - 'TextTheme' is from 'package:flutter/src/material/text_theme.dart' ('/C:/flutter/sdk/flutter/packages/flutter/lib/src/material/text_theme.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'subtitle1'. style: Theme.of(context).textTheme.subtitle1!, getting this error how to slove it?

@eTechViral 3 месяца назад

Try upgrading your flutter version