Let's build WhatsApp with React Native and AWS Amplify [p2] 🔴

what's up ninjas developers welcome back to a new live stream and I'm super excited about today's build because we are continuing the application that we started previous week and here I'm talking about the WhatsApp clone so previous week we have managed to build the user interface of WhatsApp clone and if you have missed that you can check it out on our Channel and today we're gonna take this build to the next level and we're gonna work on the backend side of it so um yeah let's uh let's have a look at what is going to be the plan for today um So the plan for today is going to be to start creating and managing the AWS amplify backend that will um where we will manage all of them uh the resources that will that will help us build the back end including the database API and so on after that we're gonna implement the authentication in our application to let users sign in uh and create a new account manage their account manage their password and so on after that's done we're gonna get into the database and we're gonna start by modeling the database we're gonna think about what data we will need um in our application and then we're gonna Define this data there we'll create the relationship between models and that will allow us to query the data using graphql in our rec native application so yeah uh The Next Step would be to actually Implement these queries mutations subscriptions in our application to get and fetch all the dynamic data from our database and yeah that is the plan for today um in order to follow along I have prepared for you the asset bundle that you can get by following give me one second here yeah to get the asset bundle it actually should be what's up two without zero uh follow the link in the description below and you will receive um the asset bundle and also the source code and also this uh step-by-step guide that we are using to um to help us move along uh this build so yeah here as you can see I'm providing a lot of um code Snippets in order for you to check it out if you get stuck throughout this build so how are you guys doing uh everyone from the live chat can you hear me well everything is fine all right uh let me double check if everything is okay hey okay let me know how uh how did it go for the first part for the user interface part did you implement it um and do you have it ready because that would be really great however if you're interested only in the backend part that's also possible uh because yeah I'm providing the source code for them for them for the code that we had in the first uh previous week all right I see yeah that everything is fine and we can we can get started but before that let's have a look at our application uh the way we have it right now so I have it here opened previous week I was working on a MacBook but today I decided to work on my Windows machine because we're not going to focus too much on the UI so yeah it's going to be a bit easier for me to manage everything but that's the good thing about track native is because the application that we are building will work uh the same both on iOS and on Android and we have a possibility to develop this application both on Mac OS and on Windows so um as you can see here this is the application that we have at the moment and uh the main screen contains the list of charts that we have at the moment all of this is dummy data and our goal for today is to integrate with have a back end and to query this data from the database we can see at the top like the header title which is a native title and from here we can actually go to the contact list and see all the all the content contacts that Verizon replication and from here we will be able to start chatting with them um then when we press on a chat we're going uh we are entering the chat room and here we can see a list of messages were displayed similar as in WhatsApp and we're going to be able to type some messages and send it like this uh uh all right and I think that um with the application that we have at the moment and this is what we are gonna work with so um hello from Indonesia hello wood um so from the email that you received by downloading asset bundle you should receive Airway URL to this guide and here um if you scroll down a bit we have a WhatsApp board um there is the to-do list which with all the tasks and there is the board let's splits them into UI and backend so today our goal is going to be to complete all of these eight tasks that we have here starting with a prerequisites um here I provided for you a little bit more information about the prerequisites that you need such as the node.js npm git which I thing that you already have because if you follow along so far most probably you already have npm and no no Jazz and also git if you don't click here the links and check it out also you will need an AWS account which is uh free to create um however yeah they require the credit card to be attached right away but don't worry because AWS offers a free tier a very generous free tier for new users so you're not going to be charged for the things that we're gonna build today I cannot promise anything um out of the scope of this tutorial so in this tutorial you're definitely not going to be charged I have more than 25 applications on AWS and I'm not charged anything so create your AWS account and lastly install the amplify CLI using npm install minus G at AWS amplify CLI and last step would be to configure your amplifier if you're done with this then we can get started and we can start creating our application so I'm gonna open this up like this so the first step what we have to do is to of course login in our AWS console to start working and creating our amplify application so I'm gonna click this URL uh I'm going to log in real quick behind the camera give me one second all right and here is a reminder for you to set up multi-factor authentication for all your accounts um okay something is not working for me maybe I shouldn't type and talk but that's the fun part yes now we have it and here is our Okay so after you sign in in your AWS console this is what you're supposed to see um first steps when you sign in is double check the region in which you uh AWS console is selected all these regions are separate data center around the world and the idea of a rule of thumb is um to choose a region that is closest to your end users or if this is a development project or a project for learning then choose a region that is closer to you so I'm gonna choose a region from Europe if I'm still allowed to to start projects here let's see and after that in the search bar let's search AWS amplify here let's choose endless amplify and from this page of course in your case it should be a bit different uh you should see a create application button in the middle for me I already have a couple of applications so what I have to do is I have to press on the new application here build application let's give it an application name for example what's up and let's press confirm and deploy um the next app this will take around one to two minutes and amplify will set up our project and then we will be able to access it and take it from there so while that is being done how are you guys tell me something nice content as always will be great if you can do a react native woocomm Commerce integration one of these days uh that's interesting I don't know we'll see don't have a lot of experience with woocommerce or how do you pronounce it hello Pat I think I'm gonna have to open the door because it's too hot here okay nice work thank you very much Edo all right let's think we serve last steps until everything is deployed so amplify for if you're not fit amplify is a set of tools provided by AWS that makes it very easy for front-end and mobile developers to build full stack applications so as as a service amplifies nothing new amplify is just a way to use the existing AWS services that are out there but are too complicated and too technical for uh for a lot of developers to get into that so I already have like AWS certifications so for me it makes a bit more sense but at the beginning everything was uh kind of a mess with AWS everything is over complicated there is so many services there are more than 200 services at the moment and they add Services every day in order to support them the growing industry of cloud computing that's understandable but at the same time that became very complicated and AWS team decided to create a tool that will simplify the entry point to these services so today we're gonna see how easy it is to implement some of the things and I'm gonna try to explain you what's behind the scenes of these tools for example when we Implement authentication we will have to write probably three lines of code and we're gonna have everything but at the same time I'm going to explain what's behind our authentication Service and how we can check it in AWS and yeah because there are a lot of things going on behind the scenes all right so uh our project has been deployed and this is what you should see you should see uh here the staging environment and what we have to do is simply press launch Studio amplify studio is um graphical user interface for our backend services so before amplify studio in order to create amplify projects we had to work only with CLI now you can also work with the CLI and create the projects there but I think it's a bit more intuitive to work with amplify studio uh whenever that's possible because there are things that we will have to do from the CLI as well so um here amplify Studio in the left menu we see three topics manage we see design and we see setup for the let's start from the bottom up for for the setup here is where we are going to set up our backend resources for example here is where we're gonna set up the authentication storage provider data and so on in the design that's not for us design is for react applications and it allows you to convert figma to react code that's also something exciting but that's not for react native at least for now and manage is where we will manage the data of our application for example after launching our data our database from here we're gonna simply manage our content and we're gonna see that throughout this tutorial the same way we will manage users to see how many users are authenticated how many of them like confirm their email and so on and also managing files if you have them so that's mostly everything about the amplify Studio from a high level perspective but we're gonna get into these details now these specific details when we will Implement these features now um The Next Step would be to pull the backend in our application but I'm gonna uh I'm gonna jump a bit to the next task in order to save us a bit of time in order not to have to pull the backend twice let's go back to Whatsapp board and let's start working on the Authentication because setting up authentication is super simple the only thing that we have to do is we go here to the setup we go to the authentication and basically we press deploy but let's see what are the things that we can configure here first of all is we are we can configure the way user can log in and there are multiple login mechanisms for example by default we have enabled the email login mechanism and when you're signing up with an email um yeah like you need a password as well you can add additional for example signing in with phone number signing in with Facebook signing in with Google Amazon with apple and so on so as you can see there is a lot of options here but I'm gonna keep it simple and I'm Gonna Keep only that default email sign in because that's gonna help us simplify the sign up flow and it will allow us to use some of the pre predefined user interface components from AWS amplifier rack native Library but it is also possible to add the phone number sign in and in that situation users will be able to sign in with phone number for this you'll have to adjust a bit the user interface and it implies a little bit more work but that's possible so um the next step is oh here multi-factor authentication you can also enable or disable it I'm Gonna Keep It disabled for now and lastly the configuring sign up you can add additional fields that the user will be required to provide when he will create his account but again if we do that we're gonna have to customly manage and create the user interface for these forms and this is out of a scope for this tutorial however we are covering this in details in our course because we have the opportunity to get into these details and build custom forms with all of the data that we require here uh then we have password protection settings here you can choose the rules for your password I'm gonna make it um as easy as possible for me to sign in to simplify the yelling the sign-in process right now uh this is not a production application and for me that's fine and lastly you can also uh change the verification message setting visu is going to be the emails that you're gonna receive to confirm your account so with that being said uh again I'm gonna leave everything by default email login mechanism and let's do deploy um so yeah the deployment will start right now and in a moment we're gonna see what we have to do next uh junan I have some doubts about as many belongs to and has one um let me know specifically what's not clear when we will get to the database and relationships I'm gonna try to stop and explain these types of relationships uh but yeah let me not get into this at the moment because I'm gonna scare everyone with them technical terms when we get to the relationships I'm gonna get to that hello from Cambodia hello from China next food delivery application please we have a very good tutorial for future applications uh we have done the Uber Eats clone which is uh five or no it's actually a seven episode series it's crazy huge and during that series we're building uh free applications we're building one application for the user side that allows users to order food we have one application for vet drivers that track their location they can manage orders they can pick up orders deliver orders and so on and lastly before the application there is the restaurant dashboard which is a web which is the react.js application a web application for restaurants to manage their orders to manage their menu and so on so that's a huge project a lot of value there and it's completely for free you can find it somewhere on the channel foreign if you have other ideas guys please let me know what what projects you would like to um to see us building in the next um in the future uh didara is saying I'm here to thank you Vadim I'm about to finish my first project oh my God that's so awesome thank you very much and I appreciate uh your kind words what projects are you finishing so while things are deep I are being deployed yeah they are still being deployed let's go back in our task list here uh this and let's go back to our create our amplify application because as I said we don't we haven't finished everything here um no oh and our authentication has successfully been deployed and right away it shows us what we have to do for the next steps the next steps is to pull our backend application in our react native project and for that we're gonna copy this amplify pull command or if you don't see this page uh you can check it out in that top right corner here deployment successful you can press on it and then it's gonna show you this one for example yeah let's do it like this and let's bring it in our application let's open up uh a terminal and here uh let me think what I want to do here um here you know I'm going to create a new Branch for our back end uh to keep everything organized so yeah let's open a terminal and paste the amplify pool command but we copied from our dashboard viewer let's do that uh this will open an amplify page to uh for both indication press yes and after that just close that window let's go back here and it will ask us a couple of questions to set it up for specifically for our environment for example the first one is the editor in my case Visual Studio then the application is Javascript come on JavaScript is react native The Source directory will leave it by default just press enter enter enter enter and do you plan on modifying this back end as well enter to choose yes uh by doing that we are gonna be able to see the back end locally uh as cold so we see that our backend has successfully been pulled um in our application and if you want to see what files and what changes did it create we can do a git status here and we see that we have uh the amplify folder so if we look at the amplify folder here is where all the code for our backend is at the moment we have a authentication folder and this contains information about our Authentication usually we don't have to get into these details a lot except managing our that our schema but that uh that's for a bit later in this tutorial now yeah there is nothing interesting there at this moment what's interesting is in the source directory we already see a AWS export file this AWS exports file is the configuration that tells amplify how to connect with specifically our backend because there are millions of amplify projects out there but it needs to know what are the ideas of our resources so this file is auto-generated um by amplify and it will allow us to um to configure amplify to configure amplify we will have to first install all the dependencies I have prepared them for for you here so let's go ahead and copy them from here from uh yeah and going back in our application let's install these dependencies so uh I think I made a mistake there I don't really like it what's going on here let me open a new terminal and I'm gonna try to do it again yes so we need to install AWS amplify we need to install AWS amplify rack native that will provide us a couple of Rec native built-in components that will simplify our development in a couple of our dependencies that amplify depends on I don't know anything about AWS amplify what to do to follow this build and to learn about AWS amplify and the best way to learn something new is of course to to build something to build an application with it so this is your opportunity to learn about AWS and I'm pretty sure you will love it foreign dependencies are installed we have to set up our amplify project in our application here so what do we have to do for that let me grab everything like this I'm gonna make it a bit smaller yeah so what do we have to do in order to configure amplify in our application is to open the entry file up.js uh and from here we need to import a couple of things the first thing is we will import amplify from AWS amplify then we're going to import the file that I just showed you in then Source AWS exports this is the configuration so we will import AWS config from The Source directory and then AWS exports make sure that this AWS exports file is in the source directory because if it's not it might also be in the root directory and in that case you would have to remove it here Source when importing it but for me it's in the source so I'm going to leave it like this now having amplify and having the configuration for it we're gonna simply put it together like this amplify dot configure AWS config and that's it we can finger in our amplify if we refresh the application nothing should change because we simply configure amplify and if we don't see any errors that means that everything is good however I expect to see an error to be honest um but we'll see yeah in web maybe in the next let me try to restart the server I want to see a warning and show you how to solve it okay let's open it on Android hello okay I still don't see anything but we're gonna see that error in a moment so I'm gonna show you how to fix it alright so we have configured uh amplify and with that we are done with the first steps to create and configure our backend now let's finish our authentication because we have set it up in the cloud but we still have to to to implement it in our application to implement the the basic authentication that is provided by AWS amplify is super simple the only thing that we have to do is we have to import in also in app.js we have to import a function called with Authenticator we're gonna import it from AWS amplify react native so a simple rule of thumb if something is related to user interface then it should come from Adobe simplified react native otherwise it will come from Elvis amplify so because our authenticator works with user interfaces we are importing it from here now we need to wrap our application inside this with authenticator and what do we what do I mean by that uh well let's first of all instead of exporting by default the application right away here let's remove this export default let's define first level application and at the end of a file let's export default application now uh the what I said before makes a bit more sense we have to wrap our application inside with authenticator to do that we simply say with authenticator and then we put our application as a parameter to this function and if I save and refresh my application then we should see our authenticator authenticating screens off screens and here it is that's it that's everything we have to do we have to do in order to have proper authentication set up in our application and we see here we signed in screen but that's not everything but it it got for example there is a sign up screen and we're gonna start by signing up sorry um this is the form that I was talking about that we get by default from uh with authenticator and yes there are possibilities on how you can adjust um everything about this form including like the fields or colors The Styling and so on um and to do that um by doing that yeah like you can provide like proper field names because here you'll see that not all the fields make a lot of sense for example username here um you'd expect to put something like a username but no here it expects an email so I'm gonna add my email because this is the authentication method that we chose in amplify if you remember we chose email login if you had here phone login van in this field you'd put the phone number then for the password that's pretty clear I'm gonna do a simple password for email we're gonna repeat our email that's why I thought I said that it's not very optimal this form but it gets its job done and for phone number it's required but we can put anything here and then we can press sign up after that we are redirected to the confirm sign up page and we should put the confirmation code that we receive on our email let me check the email come on oh uh I made a mistake so I'm gonna go back to sign in uh because it's a different email let's do it like this sign up and why is it still Gmail let's see if I received it yes I already received it uh on email foreign six let's confirm and we are back to the sign in screen now after we confirmed our email we are allowed to sign in with that account so let's do that right now and after I press sign in we are back in our application we are signing we created our account and the next time we will open the application will not be asked again to to sign in because all of this uh token synchronization updating these tokens and so on all of this is taken care by amplify behind the scenes um and yeah that's how you implement Authentication now uh you might ask uh okay let me let me do one more thing um for Visa Authentication look what I want to do I want to let you uh to show you how you can sign out of an account because I think that's quite important and um might be a bit confusing for for some people so to sign out actually the challenge is to where to put the button probably I'm gonna put it somewhere in the settings uh and let me create the screen for the settings that will simply have one button sign out so this is going to be settings dot g settings screen dot GS here it's generator quick component and we're yeah let's let's do sign out and no text but button to have a bit of styles this is yeah title sign out and some styles for this one Flex one justify content Center and align items Center just to have a button in the middle now let's go ahead in our navigation in the main tab Navigator let's first of all import our screen at the top uh settings screen and let's replace the tub that has the name settings instead of not implemented with the settings screen now I see the button sign out in the middle if I press nothing happens but let me show you how we can um sign out so to interact with them authentication module what we have to do is we have to import of from AWS amplify Now using this of um object we can interact with the authentication and we can do a lot of things for example in our case when we press on this button let's do on press what I want to do is I want to call off DOT sign out and as simple as that if I press sign out here I'm redirected to the sign in screen and if a refreshable application I I will be again like redirect you to assigning screen because it cleared all the tokens all the cache and so on and here we have a possibility tool log in again so uh one more thing um the next question you might have is whether we are able to uh to adjust like these screens because it's nice to have all of this user interface by default and I think it's very useful for a lot of applications especially in the early stage when your authentication screens are not the most important part of uh of of your of your business of your mobile application in that case you can Implement everything like as you saw like in 5 or 10 minutes and focus your energy on building features that will add value to the application however in a lot of situations you when you are past that stage where the focus is on the main features and you also have to think about like edge cases and Edge um screens like authentication and onboarding and so on uh in that cases it's possible to adjust everything about these authentication screens and there are two levels actually on how you can adjust things one level is still using this with authenticator that will manage like all the navigation between screens and so on uh we can pass here um some options that will specify our theme and by doing that we can adjust the colors we can adjust um like border Riders background color like everything when it comes to the styling when it comes to ballet out we don't have a lot of control there but still with these layouts by adding some Styles you can make these screens match your design very easily we can also with this wave authenticator adjust the fields that we we ask the user here in the create new account and by doing that here like you can optimize a bit like these fields because you don't need the username and email you only need one field here and probably also don't need a phone number if there's a case the second level of of flexibility is building all of these screens yourself and simply calling them API methods similar to how we uh called the authentication sign out because all of the all all of the methods that we have here for example sign up for example sign in all of these methods we can call them directly on the authentication module and if you check here like check have a look sign in and here what you have to do it will even say okay you need to pass here username uh and then the password so here for example I don't know you'll put the email and then the password which of course you're gonna get from State and I'll sign in will either return an error or will actually return the tokens and you will be able to allow the user in uh in your application so with that being said um I just wanted to point out that sky is the limit in terms of flexibility here and it covers uh all the use cases from the most lazy one that we have done to today with simply wrapping with authenticator to the most uh flexible one or most do-it-yourself way uh to to build everything yourself and integrate with the of API uh we're covering all of these um adjustments uh using that wave of indicator styling and also with custom screens we're covering that in our uh private course that you can check it out following the description below uh you can join the wait list because soon we're gonna enroll a new batch of users a new batch of students and also we have some content around authentication screens on YouTube and I have provided it here so you can check it out this um these tutorials with that being said we are done with both indication and let me actually sign in back in uh in that application okay sign in yes here we have it um and yeah this is the error that I was telling you about uh you should see a promise and candle rejection uh don't worry that's nothing critical it's not gonna crash your application but if you're a perfectionist and want to get rid of that to do that where we can figure amplify we have to disable analytics so to do that uh put this AWS config into an object destructure it close this object at the end and provide here and analytics which is going to be an object for the configuration and disabled equal true and by doing that we disable analytics and we're going to get rid of that error that was triggered by this analytics which we didn't actually enabled yet so I don't know why it happens so uh with that yeah with that being said I think we can go ahead and commit everything for the back end authentication creating application and so on so let's do git add everything foreign tication all right and our next step would be to start working on our data model guys how is it going uh are you following along do you have any questions when it comes to Authentication please do a multi-roll authentication application that's a good topic that's something that we should cover foreign you can provide different groups different roles for users so you can have a role for administrator a role for user a role for okay thank you very much so um uh the next step is to start working on our database model so before we start working on the database model let's quickly think about what data do we need in replication and a good example would be to check out our dummy data that we can found in the assets data and here we have charts and this data provides the data for this screen a screen of chance and the messages provides data for our messages here so if we look here we see that well we have some information about users like name and image and status in order to display status here um we have some some information about a message so a message actually here makes more sense a message will have an ID it will have a text of an actual message it will have some time steps like created that and also it will have a relationship with a user so out of these things we can we can kind of understand what information we will need so let's start by probably designing the user because that's the most straightforward one um so for that let's go ahead and in our amplify backend here and under the setup let's open the data tab here we can press on the add model to allow add our first model the first model will be our user and it automatically comes with an ID after idea we also need the name of a user which is going to be a string and if you want this field to be required we can check it out here is required and that will add that question mark at the end of a string this is coming from graphql and whenever you see the type name with a question mark that means that this field is required then we have a status I don't think the status is required maybe maybe not and also an URL to a image which is going to be a string and as well I will not make it required maybe some users don't want to upload the picture okay that's good uh what else do we need about a user that's it I think that's everything now um The Next Step probably also not very complicated is going to be our message model so a message will have a text that you want to send and this text is required text what else if we look in the messages it has ID packs it has a created ad but the cool thing about amplify is that it will automatically add some additional Fields including the created ad so we don't have to specify it separately we can leave it like this uh and here it has a user but this is a relationship so I'm gonna talk about the relationships in a moment about the messages yeah I think that everything that it has it needs a text message now um now um where will this messages be sent well these messages will be sent in the chat rooms basically a chat room let's consider a chat room a group of two or even more people that can communicate between each other so basically our list here of chats are our chat rooms the rooms in which people can exchange messages so let's go ahead and create this chat room uh let's call it chat room and for the data if we look here at the charts besides relationship to a user in relationship to a last message it doesn't have anything else and that's okay that's fine because chat room will mostly serve for us as a as a relationship table for our yeah like rooms in future a property of a chat room might be I don't know let's say who is the admin um and yeah I cannot think of our uh interesting things or maybe like the background image if every chat room has a background a separate background image that also might be a feature now now let's get back let's get to our relationships because with the data we are we are done we are clear but now uh about messages so starting with a message no starting with a chat room a chat room will have a list of messages right because when we open a chat room this is a list of messages in that chat room so let's go ahead another relationship with the message and here we have a couple of options one two one chat room to one message in this case if we want um the chat room to have only one message that's the relationship you want to go but in our case we want our chat room to have many messages so one chat room has a lot of messages but one message can belong only to one chat room because the same message you cannot send to multiple chat rooms and even if you would like to do that feature like sending to multiple users at the same time those will be technically separate messages attached to different chat rooms here we can also provide the relationship name which will help us query the data in our application but I'm gonna leave it as default if I press save here we see the relationship name added under the chat room but if we look at the message table we see a new property here that is coming from a relationship this property is chat room ID and this is actually how we design uh one-to-many relationships so for the side where we have like many many is our messages we simply add an ID that points to one specific chat room and by having that we create this relationship and we will be able to query the messages from here the same way as a message has a chat room ID we want a message to have a user ID to know who is sending that message well let's do the same let's go to the users let's add the relationship and relationship to message and one user can send multiple messages right yes let's do that and here we have user ID in the message automatically added okay uh so okay all right let's see what are our things that we need in terms of relationships messages okay now um now let's talk about the relationship between a chat room and a user so when thinking about like cardinality like is it a one-to-one one to many many too many we should ask uh the question let me try to I will not be able to bring it down or will I no I'm not gonna be able but that's okay I can do it like this okay so the relationship between a chat room and a user let's ask how many users can a chat room have well a chat room can have at least two users but it can also be a group chat room where we have multiple users so one chat room has multiple users now let's reverse this question and ask how many chat room can a user participate in well the user can have multiple chat rooms as well because here I'm talking with Elon Musk here I'm talking with Adrian here I'm talking with borja and all of them are different chat rooms but the user is the same I am the user being part of multiple chat rooms that means that we have many chat rooms to many users to design this relationship here amplify provides us with many-to-many relationship so from the user I'm gonna create a relationship to the chat room as a many-to-many relationship We Are Gonna Save this and um if you know some SQL or database modeling you might think that well this is weird because many to many relationships for that we need a pivot table in between that will connect them uh together and the interesting thing is that amplify will automatically create for us this pivot table that will allow us to have this many-to-many relationship um so now we have here chat rooms we have here in the chat room messages what else what else uh lastly as you can see in our application we will have one feature that when displaying a list of chat rooms these are list of chat rooms we also display what was the last message in that chat room so to design that we're gonna have to define a relationship between a chat room and a message that will hold the information about what was the last message so if I do message here one chat from two one message and if I call it last message let's see save yes last message one to one perfect um let's double check if we have everything so for the message ID text is string uh and we have two relationship sources for the chat room we have simply ID and free relationships messages one too many users many to many last message one two one and lastly for the user we have ID name image status and relationship for chat rooms and messages chat rooms and messages awesome so with this data model I think we will be ready to to have a lot of functionality in our application it's quite simple but it will allow us to do a lot uh in recording so let's press save and deploy here and press deploy to deploy our backend data matios hello uh following along can we add log on with her screen or we need to build custom screens for that logo for both indication screens to be honest I'm not sure about that uh when it comes to the layout as far as I know you cannot adjust a lot of things but logo is such a common use case that I would expect it to be available to to be able to um to define it um but yeah I would have to go through the documentation to to check that out my deal is how is the course going Joshua hello use your Uber clone tutorial to build my startup completely grateful oh my God that's so nice I'm so happy when people um start with a tutorial and then work on it and extend its functionality extended features and actually create uh and deploy an application out of them that's that's the end goal this is something that I'm always um struggling with simplifying this thing because yeah like it makes sense but to go into that Lambda like I would have to explain a lot of topics uh what is Lambda functions what are the event triggers how does it work how to give access from a Lambda to a dynamodb table directly how to write directly in dynamodb which is not the most developer friendly API and yeah like doing it one time I always look back at some of my examples where I previously have done that but yeah like explaining that is quite difficult and I would really love to see a way uh amplify to synchronize uh authentication users with database users and for everyone else listening we're gonna see this problem in a moment and we're gonna solve it uh but yeah like it's still not the best developer experience here all right Mateos is saying course is going great finishing the API module that's awesome great the next one yeah the next one is interesting uh after API I know yeah after API we have storage and then we have like setting up a deployment um the production environment and deploying and CI CD Tuan you are welcome hola amigo como esta okay we're waiting for our database model to be to be deployed to amplify and then we're going to continue integrating it in our application in the future will you be able to update with inner clone with a chat option um I I would be able to do that but I'm not sure if that's going to be our priority um what I recommend you doing and that's gonna be a very good um like practice exercise for you and I don't think it's going to be very complicated is to uh merge two tutorials together so if you're following the Tinder clone and you want to add chatting application then follow this clone of WhatsApp and see what are the functionalities we build here and build them in your project that you started in that Tinder clone and these are going to be like the same functionality only like different screens like your boot them in a different navigation screen probably the main page is not going to be this one but it's going to be your Tinder page and when you go to the chats that's what you're gonna see so I think that's going to be like a very good exercise for you to to see how you can to see if you understand actually the topic and if you can adjust it for your own specific needs all right it's taking a bit of time to deploy because deploying an API actually a lot of things are happening behind the scenes so for for a model for every model that we created and we created three of them and actually there are four behind the scenes one of them is the users the chat rooms then the messages and also the chat room users the table that connects them together so for every four models that we have amplify will go ahead and create four dynamodb tables to service our database dynamodb is a very very performant database and uh you know like when you have some advantages you have to sacrifice some other things and for dynamodb that's a bit on them how easy it is to work with a dynamodb and I will tell you that's not very easy to manually work with dynamodb there are a lot of new things there that are not similar to our SQL databases that you might be familiar with there are some things that are not working as easy as you would expect like counting things is not that straightforward with dynamodb but all of these downsides are with a reason all of these downsides are there in order to provide a very performant database that will if used correctly will give you like 100 milliseconds performance uh for for any size of of your data so a lot of big companies are using dynamodb behind the scenes just for this reason for the performance and actually after you have some experience with it it makes it uh it it becomes a bit easier so um yeah like as I said like for every model we have a dynamodb database and then we have our upsync which um defines and creates our graphql API and in the upsync uh amplify automatically creates all the operations that we need all the queries and mutations and subscription that we need for every single model in order for us to have crude operation out of a box to create a user to read the user update a user delete a user and all of these operations for everything foreign I'm gonna still like talk about how it works behind the scenes we're gonna still see some queries how to run how to see the upsync dynamodb but for now let's go ahead and pull the changes in our application to get them yeah like to get this data model in our application so I'm gonna close this one here and yeah let's do gitpool our application ID and the environment name staging that will fetch our data but while it is being fetched we can go back to our amplify Studio let's press done here and now that we have defined the data model we can go into the manage content and we can start managing our content from here right away and this is another benefit of amplify Studio because it gives you a CMS a Content management system out of a box that you can use to manage the data in your application without having to develop some dashboards yourself for example here we can select the table that we want to look into and I'm gonna check the user table and let's go ahead and auto generate some data here let's try to generate you know 10 users and let's see [Music] um for example for the name that's going to be a [Music] full name and for the status that's going to be a sentence length and for the image we don't need actually an image so let's generate some data here it actually added some dummy words for our image and this will make it um we will not see any images there but that's okay for the demonstration purposes so right away we have some data to work with we have a list of users now um yes now let's see how we can interact with our API and as I said our API is a graphql API and let's go ahead in the setup here and let's open graphql API here we see the resource name and we can click on this resource name to open our upsync that is responsible for our amplify so here we see the elbows up sync page for our graphql API uh you can look and play around here um for example yeah like we can check the schema and the schema is how our um like basically all the models all of them uh mutations and all the queries that we can run on our API so here you can see that amplify generated for us like 600 lines of call code for our schema to Simply Define it so this is work that normally you'd have to write but here amplify takes it takes care of it uh what's interesting here is not of this schema is actually the queries because here under the queries we can interact with our API for example let's see um like these are all our queries we selected them from the top and we see that we have a couple of queries what I'm interested in is in the query list users let's click on it and under items let's open the items select the field that you want to receive for example ID name and image and also maybe create that and if we run this query we will see the response data list users items and items is an array with all the users that we just generated here in our console in the content so we see the name ID and so on this is the power um the power of graphql is that it allows us from the front-end basically when we query the data it allows us to specify what data specifically we need because if you compare it with a rest API when you query some data from a rest API it will send you everything that it knows for example if you query the post it will send you everything about the post uh in this situation we can specifically uh choose the fields that we want to to query any for example on a page where we don't need a lot of information for example on this page we only need the image name and status then we can remove like created that and on this page to query only these fields another thing is that relationships but for them I think I'm gonna talk about them a bit later so um yeah now we see here how we can run a query to list all the users in the application um and the next step would be to actually run this query in our application let's go ahead in our application here we see that everything was pulled successfully our API is created and we from from the new things we see the models here that yeah when it comes to uh working with API there are a couple of ways to do that one way would be to use datastore which is a library uh developed by amplify that helps us cache data offline and also interact with our API to sync the data from locally to remote data the data store is really great for small applications but I think when replication grows like you get into some edge cases that are really complicated to work around it so that's why today we're gonna work with a graphql client provided by AWS amplify it's a Very Thin Client it doesn't do much except querying the data but it will get this job done for this project the next step for you would be to use our um graphql clients for example Apollo and in the course we're teaching Apollo that allows us besides interacting with our graphql API like querying and so on it also serves as a caching mechanism and it automatically caches um the information locally so it improves a lot the performance it also helps a lot with keeping the data in sync in your application across like different screens across different features so if you have time definitely look into Apollo but for now we're gonna work with the graphical cry client provided by amplify it's quite simple and it gets its job done but for that we need to generate some queries because yeah we can write all of these queries ourselves but if amplify can help us with that we're gonna we're gonna take advantage of that so for that I'm gonna clear my screen and let's do amplify uh cold Jen add let's add a kojan that will help us um create the queries let's choose JavaScript uh let's keep the same file name do you want to generate all yes and for that depth um for the depth let's go with a depth for free just to make sure that we have enough data to work with today and later on I'm going to talk I'm gonna show you how you can adjust and improve this this queries um so that means that uh amplify generated our graphql operations and we are in the source graphql let's have a look Source graphql here we have three files queries and the queries as you can see are all of the queries that we saw available on the website get chat room get messages get users and so on we come already built with the fields to get to um to query and them the advantage of going with these graphql queries is that we can start using them right away without having to write them but these Advantage is that um yeah like the fields basically where it queries all the fields and usually you don't need all the fields so as the next step would be to write your own queries for now we can work with these queries because they are pretty okay for our use case so let's scroll down until we see the list users query here it is and as you can as you can see this list user queries will return our items and for every user it will have an ID a name status a list of messages chat rooms and so on yeah okay so what does that mean that means that um we can go ahead in our screens in the context screen and instead of taking the data from the dummy data to display these contacts here as you can see we want to query these contacts so to query the data we need to import a couple of things we're going to import something from AWS amplify AWS amplify and what we have to import here is the API module and also the graphql operation now we need to import the graphql query that we uh we saw here this list users query so let's go ahead here and do import list users from uh One Directory up then graphql then queries now uh having this information having this here we will be able to query them users but we need to first of all store them somewhere so for that we need the use state use state from react and also we need to run this query when the component mounts so to do that use effect will help now let's go ahead and Define our um let's start with yeah like defining our state for the users set users equal use State and initially it's going to be empty array now we can replace this flat list with data for the flat list to come from the users instead from the chats and now we don't need the chat and we can easily remove them we don't see anything because we haven't queried it yet we initialize it with empty array to query it let's define the use effect because we want to query the data when the component mounts and for that we will provide the empty dependency array here Now using the API module let's do API dot then we have to access the type of API that you have either a rest API or a graphql in our case that's a graphql API and inside this as a parameter we're going to send the graphql operation and the graphql operation will receive a parameter specifically what operation we want to run we want to run list users and after this api.graphql results it will it's an asynchronous function so for that we will do a DOT then and the result here let's do result let's simply console log result let's do that and let's open them here and if I go to the contacts I see data I see an object which has data then inside that object we have list users then we have items which is an array of items so that means that our users are in the response.data.listusers.items okay perfect so knowing that we can set users by specifying result dot data dot list users dot items and as you can see I always access to the next property safely because if some error happens data will be undefining this will return an error if we don't have a question mark now if I go here um I Define is not an object evaluating user dot image let's have a look at the list of users so let's do console log oh I think is that here we are accessing item.user uh now we simply have to access the item because our array contains an array of users not an array of chat rooms or something like that so now if I open it all right and right away I see users with their name and their status we don't see any images uh because yeah let me first copy one image from here from the data charts for example this one uh yeah as I said we don't have any images because if we look at our data our automatically generated information doesn't have a proper image so that's why we see it like this but if we're gonna update it with a proper URL and do save user and then refresh our application here one of the users there will have the photo yes it's the first one and we see it right away there I'm gonna go ahead and see if I can simply fix the issue with text going outside the screen I think I will be able because I simply have to say uh username here uh chat subtitle I don't know with 100 percent will it work it doesn't work this is chat list no I don't have to do it in the chat list item sorry uh let's go to the contact list item contact list item has a username and a text here and with text subtitle hmm align self stretch oh my god um wait a second wait a second we have this content okay content content content where is a Content Style content style needs a flex one and now it works better alright so with that being said we saw was the most important for now uh how to query um how to query out the information from our database we use the api.graphql to access specific living graphql because we also have a rest API and to this function graphql we send a graphql operation with the query that we want to send this query we imported from the automatically generated queries but we can see here in the source graphql queries that was generated by amplify and that gave us this possibility to query them the users and render them here perfect so um we've implemented with the third task for the data model we are finished and we can go ahead and do git add git commit back end free data model okay perfect and we can go to the next one back and forth for the users and here we will have to manage our users we already saw uh the first query to to get the users here and yeah we have to implement other stuff in a moment okay hello Moses how are you doing thank you very much foreign try to explain them um the issue that I was discussing a bit before uh when it comes to authentication users and database users and what do I mean by that well when we signed up uh Here sign up the information about this user like the username password email and so on this information is managed by the AWS Cognito service which is responsible behind the scenes of Authentication to see that we can simply go to um I don't think I have to go there to show you but yeah like if we go to the users management here we see that we have two users here one of them is confirmed one of them is the one and confirmed that I failed to um I made a mistake so as you can see users authentication users are managed by Cognito service and these users are different than the users from our database users come on the users from our database I don't see here any users with my account um well while the authentication users are of course responsible for uh authenticating you're in authorizing you making sure um you are the person who you are saying to be um managing with password and so on well sometimes and by sometimes I mean most of the times the data that we have will have some relationships to a user for example in our application we needed relationship between a message and a user to Define this relationship we need to define the user as a model in our database we need information about that user in our database now the problem is that we have two sources of Truth for our users one of them is here in the user management and I see here two users and another source of Truth is in our database which I'm gonna refer to as database user and whatever one authentication user um because we have two sources of Truth we need a way to somehow merge them together or at least connect them logically together connecting them logically together we're gonna be able to do that by automatically creating a database user every time someone signs up basically every time an authentication user is created here we need to go ahead and duplicate not everything but duplicate the information about that user in our database in order later to be able to search for that user to add him to to a chat room to send messages and so on how we're gonna merge them together based on what field well we can do it on email if that's unique value but what I like uh about a user in our authentication is that it has this sub ID this subject ID is a unique identifier of a user Incognito and it will remain the same for the whole life cycle of a user in your authentication this is not going to change so it's safe to use Visa ID as the idea of our user in our database and that way we're going to be able to match and merge them together so we're gonna get the authentication user we're gonna get his ID and then we're gonna query information about the user from the database using that ID so I think that that was pretty uh hopefully that was pretty clear and now uh we need to to implement that and this is the challenge that I was talking about because implementing this uh creating the user in the database automatically when a user is signed in with Cognito with our authentication doing it automatically is possible but it involves a lot of moving parts for that we will we would need to create a Lambda function that will be triggered by Cognito that's not very complicated to do and when Cognito will trigger this Lambda function every time someone signs up and we in the Lambda function can get this data and write it directly to dynamodb to write it directly to dynamodb that's a bit complicated and then we have to think about permissions and yeah to get into that which is the right way to approach this problem uh would require me to explain a lot of other stuff which stuff which is outside the scope of this project what we can do is um we can have on the front end we can manage this information on the front end basically every time we log in in the application we will do a couple of operations to understand if the user signs up for the first time or not firstly we will get the authentication user we will know his sub ID because every authenticated user has that sub which is the unique identifier of a user based on that idea we will query the database to check if there is a user with that ID and if there is no user with that ID that means that this is the first time a user joins the application and that means that we have to save the information in the database in the next time we will check if it's in the database and it's going to be there and we will not do anything so this is actually a bit hacky but it's very efficient very um it's quite a good solution for for a lot of applications so let's go ahead in our application and think what we have to do here um all of this logic will happen as soon as possible and as soon as possible I mean probably here in the app.js in web.js um when the application mounts we're gonna have a use effect use effect and remember with our application will Mount only after the user signs in before the user signs in the application will not be mounted something else from the authenticator will be mounted so that means that if application mounted that means that the user is authenticated so let's do here const fetch or let's do a sync user that's going to be an async function and we can call it here sync user what do we have to do in vsync user as I said get the authentication user then uh query the database using Alf user ID or yeah like it's going to be called sub um if there is no users in database create one otherwise do nothing so let's um see how to do all of these steps getting authentication user for that we're gonna need to import authentication or actually I have already here amplify so I can import of here so getting the off user is um yeah let's do off user equal a weight we're gonna use the authentication module uh dot current uh authenticated user and we also can provide here some programs like bypass cache to make sure that uh this call will actually will not use that cache and will actually do a query to our authentication and if it's quite important like probably we should bypass the cache let's go ahead and console log our off user for that I'm gonna have to of course sign in to mount the application and not just Dev and here password and if I look here we have it okay so here is our authentication user so there is a lot of stuff here but if I take it and put into a Json formatter um we see that our organization user has a session it has some attributes that are email phone number the subject this is the thing that we are interested in it's in the off user dot attribute dot subject then a lot of other things that that manages like the tokens and so on okay so we saw that we need the attribute then subject foreign the next step is to query our database using the authentication user ID okay we can do that uh let's go ahead and import our API let's import our graphql operation and also let's see what actual graphql query we will need so from the queries instead of getting the list users that will get us all the users we need one specific user so that function should be called get user yes get user which expects one ID and it will try to get as a user with that specific ID okay so let's import um get user from uh Source then graphql then queries okay let's go ahead and try to get the user so const user data equal a weight API not up but API Dot graphql uh then as you remember we need to provide here a graphql operation and what operation we need to get the user but that's not it because we need one more parameter for the variables and yeah like the parameters here is going to be ID is equal to of user dot attributes Dot sub that's the idea of our user right now let's go ahead and um console log our user data let's console log our user data let's refresh okay something is not working I'm gonna stop and restart the server foreign and reload and right away we see here data get user null that means that our user with this ID is not in the database and yes that's true because this user is not yet in the database OK the next step is if there is no user in database so if user data dot data dot uh how is it usernata.data dot um usually it goes like this the response dot data then the name of the query and the name of a query is get user so if this let's do it like this if this exists then I'm gonna return I'm gonna stop it here and I can also do a console log user already exists in database otherwise we are gonna go here and we have to create a user in the database okay to create a user now we get into mutations so a query in graphql is something that allows us to get data from the database and a mutation is something that allows us to update data in then that in in our backend that includes adding new data like inserting things or updating it or deleting it so everything that changes our data is a mutation everything that simply retrieves the information is a query as simple as that both of them work kind of similar in a similar way it also has like these inputs that we can send and yeah let's see how we can work with it so we actually need a create user so let's simply search create user here is our create user and it expects an input form uh for the data about this user okay let's import create user from them source graphql and then mutations okay um so const new user response let's go ahead and call our API dot graphql we again need a graphql operation and that graphql operation is our mutation so it's create user um and for the second one we have our variables variables then we have our input and for the input we need to send Vader the data that we need for the user so I'm gonna call it new user and we can Define it here to to be more clear something like that all right now for the new user let's think what are the fields what are the required fields that we need to send there an easy way to see those fields hope that everything is okay with stream quality yeah uh to get the information that we have to provide one easy way would be to go to the app sync here let's choose a mutation from here uh and that added notation let's press plus with a limitation here on the bottom let's do create user and as you can see there is this input field which is input variable which is required and in the input we have uh for example the name is required we have ID image and what status version we don't need to provide that's going to be taken care for us so yeah these are the four Fields ID image name status ID something the name something then image something and then status foreign is very important here because four of ID we need to provide this authentication user sub because as I explained before this is how we map one database user with one authentication user and by providing this ID here as the sub we're going to be able to query as you can see here via users based on this sub for the name uh here I don't have a very good solution because we don't have that name in our Cognito profile and I can go ahead and display uh let's just you can display from the attributes in mail or also you can display in the phone I expect that nobody will put via real phone uh here so I think it's better to display the phone for my application um because we want to test it at the end of this video so I don't want to expose the emails of everyone or you can put here like a random name like placeholder and let the user update it later that's also possible but I'm gonna do attributes phone I'm wondering if it's phone or phone number phone number like this phone number okay for the image um I'm not gonna provide any image the user will be able to update it later for the status we can provide similar to how WhatsApp is using a um yeah like a default status hey I am using Whatsapp foreign let's refresh and let's we already see possible and handle promise rejection if we look at this here what's a problem possible rejection data errors message variable input has null value for type create user input variable input variable input new user if I do here console log new user I want to see what new user we have here we have ID name and Status yeah everything is fine um wait a second what's the issue here variables import new user create uh might be without variables just input might be yes now we didn't see any errors and if I go ahead and run this list list users let's try to run this query we're gonna see that besides all of this uh generated users I'll see the last one not the last one with this one that is the user that I just created and if I get the status you will see that it's actually the user but I created here hey I'm using WhatsApp I showed it I showed it uh for to you here but you can also see it in the content here automatically updated and added here with a name with status and without any image [Music] now we should also test this part we should test if we stop the execution of adding things to our database if a user is already there so if I sign in the second time this time the user should be found in the database and it shouldn't be created one more time and we can see here user already existing database perfect and with that being said we have implemented this functionality of syncing oh my God of syncing a database user with um authentication user so to recap what we did here when we launch the application and because our application is um wrapped by with authenticator that means that here the user will will be authenticated and when we launch this application we need to get the information about the authenticated user based on that information we need to query our database and we need to check if we already have this user in our database and if we don't have that we need to create the user and we need to send it to our API using the graphql to save it there and the second time our user will open the application the flow will stop at the receive statement because at the second time our API here when we query based on yd it will return us via the user from the database and we will stop here so yeah we queried the user we create user one first sign in we can also provide like some random avatars but I think that's not very important uh and we connected our authentication user with our API user and now we're going to be able to create messages and Link them to this user and everything is going to be working fine all right so um with that being said we are done with this B for users be for users so let's go ahead and do git add git commit minus m B E4 users like this and our next task is going to be chat rooms chat room so we need to create a chat room we need to list all of them we need to make sure that we have unique chat rooms all right that's that's going to be interesting what's going on here Alex how to install rack native and AWS for react native we have um on this channel we have the environment set up for both react native Expo for both Windows and Mac OS so we have four Total videos for every use case user already existing database perfect and yeah everything is working all right so give me one second I'm gonna be back and we are going to continue with our chat room users so I will be right back don't go anywhere foreign so I'm back and we can continue [Music] so for the chat rooms how we're gonna do them well we're gonna create a chat room whenever we go to our list of contacts and when we press on one of these contacts we want to create a chat room with that user and start talking with him as simple as that so let's go ahead and do that right now this list item is our components chat no contact list item index so here we have this pressable um let's define a function for this pressable so const on press equal to this let's start with a console warn press now I want to give this function to our pressable and whenever we let's go to that contacts whenever I press on these users I see this function pressed perfect um let's get some hydration all right all right all right so contact list item we have it here so what do we have to do well as I said firstly we have to create a chat room create a new chat room then we need to add people to this chat room and to add people to this chat room what we have to do is um chat room let me see um how to explain it here um yeah I was explaining you that um in the schema design here we see that the relationship between our chat room and the user is a many-to-many but there are no many too many relationships and what amplify is doing behind the scene is creating another for another table called chat room user and that table is helping us add users to the chat room so for every user that we want to add to a chat room we need to create that invisible chat room user but if we look in the apps and console and if I'm gonna zoom in a bit here and if I scroll you should see here create user chat room this is the user that connects this is the table that connects one user on the one side with one chat room on valver side and because it connects them together for the input we have a chat room ID that specify which shot from are we adding a user to and when we specify the user ID we specify which user we're trying to add to that chat room so that means that we have to add uh where clicked user to the chat room and then add the authentication user to the chat room these are our steps that we have to do in order to and lastly probably navigate to the new look newly created um chat room and before we start implementing it uh let's see if we have any uh issues with this flow creating a chat room so if every time I press on a user every time I create a new chat room that means that we might have duplicated chat rooms with that user this is not exactly what we want so for that reason before we do all of this we need to first um check if we already have a a chat a room with user so and if we have already a chat room off user we simply will redirect there without going through that creating and adding them there okay uh we're gonna get to this part a bit later but now let's start with creating a new chat room creating a new chat room uh for that let's start importing um let's import our API let's import our graph Q okay I'm gonna do bam AWS amplify first and then I'm gonna get there my cups look uh key just decided to jump and then let's do graphql operation and what graphical operation we will need well we will need to create a new chat room so so we will need something from our mutations because we want to create that's a mutation um we take it from graphql mutations come on graphql and when mutations and we will take create chat room for this one create the chat room uh add the user to the chat room that's going to be create user chat room this is adding user to a chat room add authentication user to a chat room that's going to be the same rotation and check if we already have chat rooms we're gonna handle that a bit later so now uh let's go ahead and create a new chart from here so const new chat room data equal to a weight API well we need to make this function a sync so API dot graphql then a graphql operation which operation create chat room and then we need to provide here the input for the new room the thing is that our creating a chat room doesn't need any data if we look here at create chat room we can provide the version but that's automatically provided and that's it we don't need anything to provide here we will simply use it as we are like connecting things together um but we still have to provide this input even for with it's empty foreign okay let's go ahead and of course console log new chat room data okay let's open it here let's try to press on one of these pressed we see beta create chat room and information about the chat room including its ID the ID is very important because we will need it so let's check if new chat room data dot data dot uh create chat room if it exists or if it doesn't let's do if it doesn't then we're gonna let's for now simply console log error creating the chat room if the data doesn't exist that means that there is an error creating it otherwise we can continue our flow and I'm gonna do const new chat room equal foreign access it without having to always access it like this now this new chat room has an ID and it has like whatever information about the chatron but we mostly are interested in the ID of it now add the clicked user to the chat room for that we need to create a user chat room so um let's start by a weight API Dot graphql what we're gonna call the graphql operation what operation uh create user chat room and here for the input we're gonna have to provide two things if you remember let's double check that here create user chat room it has two required Fields chat room ID and user ID so it has chart room ID and it has user ID for the chat room ID we're gonna get it from the newly created chat room new chat room dot ID for the user ID we're gonna get it from the information here user dot ID now we need to do the same thing for our user add authentication user to a chat room but yeah the chat room ID is going to be the same only the user ID should be different we need to get the idea of our user and remember in the previous step when we connected authentication with database now we can simply get the off user from them um of also need to import it here of we simply can get this of dot current authenticated user and using this of user we can specify the attribute dot sub and this is going to be the ID that is the same ID from our database and this way we create this relationship between that database user without even having to query our database user because we know that the sub is the same as the ID of a database user foreign foreign and the last step is to navigate to the newly created chat room so we have a navigation dot navigate where we have to navigate to a screen with a chat so let's see in the navigation index that chat and it needs some properties I think it should be ID but let's double check that in the screens we have a chat screen and we have a route well we are not using it anymore so let's simply send the ID of a chat room so new chat room dot ID okay let's see if everything works okay all right let's press on the first user uh it's pressed and it automatically goes to the chat room but uh because we don't query any data here let's go ahead in our yeah information here to see if everything worked correctly so from the content we should see one chat room that includes two users so chat room are two here and if I look at one of them the first one includes two users one of them is these user that I'm authenticated with which displays my phone number and the second user is the one that I clicked on with the avatar that's perfect that's amazing that's everything we needed here um so we have created a chat room when clicking on a user now we need to list all chat rooms to list regarding my front the theme for the vs code I have a tutorial on the YouTube channel for the top 10 vs code themes top 10 vs code extensions in there I also specify the theme I don't remember if I'm not mistaken it's material Community material theme something like that foreign so let's move on to the next step to query all the chat rooms on the main screen so if we go here to the chats here instead of dummy data we should actually query the chat rooms will this have end-to-end encryption um today we're not going to implement that but I'm interested in extending this application with more advanced features um not sure if that's going to be encryption but most probably we're gonna extend it with sending different types of messages like images videos or audio and um yeah doing other interesting features I would like to get into that sorry why can't we use datastore to fetch the user is exist or not instead graphql API I explained that a bit earlier why we're not doing using datastore here um I'm really not a big fan of data store even though I'm giving it a lot of chances I'm actually using datastore in one of my production projects we'll see how it will go there but in some situations we get into some edge cases that datastore like makes it a bit more complicated overall it it's a great tool and for small application it works really nice but yeah if application grows there are some cons wear all right guys so as I said we need to list all chat rooms to display them on this chats page okay that's going to be complicated a bit because we're gonna have to work with um relationship and nested data let's have a look at where we need to query this information well we need in the screens in the chats screen here we are taking the chance from our assets but what we have to do is to query them from our API so let's import API and the graphql operation and what graphql operation we want to import well we want to import it from graphql queries in the query is going to be list uh chat rooms list chat rooms [Music] um by calling this list chat rooms and the problem is that it will give us all the chat rooms from a database yes there are some ways to provide some filters for example yeah let me see here at least chat rooms so if I'm gonna query it uh my query here we see two of them but yeah as I said like it's it's gonna return us all the chat rooms even the ones that we are not part of that's not what we want to do we actually want to query only with chat rooms where we are a user again it has some filters but uh it's not gonna be something that will help us in this situation what we can do is we can use them get user query to query our user and by querying our user let me let me get my ID for example from here this is my ID and let me put it here in the parameters of get user and I'm gonna get name image and so on so by simply querying my user I get information about myself but a cool thing about graphql is that we can query in one single query we can include relationship data and nested data and what do I mean by that well whenever a query the get user I also can query all his chat rooms by simply adding them here in the items we have a chat room ID for example and now we see that the user with my name is part of only one chat room not of two of them and that's that's exactly right because if we look at the previous chat room I'm not in that one we have two chat rooms okay never mind so it actually gives us the right chat room uh but this is this is not an actually chat room this is a user chat room or how is it called chat room user or user chat room basically that intermediate table so here we cannot query information about the actual chat room but if we open up the chat room here we go one level uh deeper and here we can get the actual information about the chat room when it was created um the last message the messages from it and yeah and also very important users users that are part of a chat room as you can see our query becomes quite quite a bit complicated and this means that we're not going to be able to rely on the query from here because the query that was generated for the get user will will get us as so far like it will not solve all the problems because as we can see here it gets the information about the user um it gives me information about all the user messages which we actually don't need so that's uh wasteful to query them it gives you information about the chat rooms but again it only gets us information about one level like the chat room user it doesn't actually give information about the chat room itself so yeah that means that instead of relying on this uh query here it would be better if we create our query ourself with specifically the information we need in order to have this query optimized because as you can imagine like there are a lot of relationship between user chat rooms and so on so in itself this query is going to be a bit more expensive so we have to make sure that we properly get the information only the information that we need so with that being said uh we're gonna get our user but we don't need the name of our user we're never rendering it so why should we ask it when we get the chat rooms in the items do which actually should be called chat room user um yd we don't need by D of a chat room user we need information about the chat room itself because when we will click on it we will send them actual chat room ID when do we need when it was created I don't think so because even though we have such a date here this refers to when was the last message so actually in the chat room we are interested in the last message so let's open last message here and say we need that idea of the last message and then uh uh created that when was the last message sent in order to be able to display this information and the text here is also from the last message let's check the text here okay text perfect but for the users in the chat room we're gonna get what the ID and the name right and there no no no again these users here are chat room users so we need to open the users and get the ID image and name so as you can see the query is quite complicated but it will give us information that we need it will give us information about the chat room and about the users inside that chat room and based on these users will be able to get the image and the name of that user and also we will get the last message to display it here so I think that's everything that we need so far so let's go ahead and copy this query and let's copy it and add it inside our screens um let's go ahead and create a separate screen a separate folder for our chats screen uh let's move this one here move make sure to update the imports from the navigation and inside this folder let's create a file called queries.js this is going to be our custom queries for the chat screen let's um let's do export um list chats chat rooms equal to how they are written queries as a string so equal to a string and like this is it like this query yeah but I'm not sure why I I have a bit different maybe it's because of his graphql yes wow did I know that he'll leave you learn um and another thing I will like to change here is actually the uh the header of this get user because it has like um these variable IDs that we can send through parameters so uh I can actually simply rename this to get user well why do I need to reinvent it if I can copy these two Fields query and get user and replace it in our case with query and get user in this way we're gonna be able to provide Dynamic IDs and get this information dynamically okay so let's try to run this and do it yourself query that we created for our information so going into the chat screen let's um yeah we're not gonna need this list chat queries from there we're gonna need it from uh queries list chat rooms so yeah again we're gonna need a use effect and here let's define the function fetch chat rooms equal I think and we can call this fetch chat rooms right away so let's go ahead and const data not data but response equal a weight with the API we're gonna do a graphql query using a graphql operation which is list chat rooms and for the ID in the chat screens for vid we need to provide uh the idea of a user for which we need to provide to to get them the chat rooms to get the idea of a user we simply will use the off module and here let's get them of user equal weight uh uh authentication dot current authenticated user come on and here we can provide of user dot attributes dot sub let's have a look at our our console console response are you using websockets no for this application we're gonna use for real-time communication we're going to use graphql subscriptions foreign to do react what language we should learn with JavaScript JavaScript yeah start with JavaScript I'm not sure what's happening so I'm gonna stop a server started again come on running on Android uh unable to resolve screens chat screen uh that means that in our navigation it wasn't on correctly updated so from the main tab here where we import the chat screens we need to import it from the chat screen like this now uh let's see the debunks uh yes we see some information we see data get user we see the chat rooms which is an object um okay that's good um chat rooms which is an object and you should have items so let's go ahead and console.logresponse Dot data dot get how is it called uh uh get user then chat rooms get user then chat rooms then items and let's have a look at this console log undefined uh uh chat I definitely did a mistake uh response dot data dot get user dot chat rooms oh its items should be now items is an array of chat rooms and yeah we at the moment have only one chat room so all right let's um let's check like if no let's simply set it into State and then we're gonna know how to work with it so we're gonna see how to work with it yeah uh chat rooms and set chat rooms equal use state initially it's going to be an empty array and let's go ahead and give here the chat room Store Flat list and remove the dummy data import from the top all right we don't see anything but if instead of console log we do set chart rooms any fine evaluating chat user dot image yeah let's go in the chat list and do a couple of things here for example whenever we are accessing the user for example let's do it safely um I mean the user Fields chat user like this um as well like these last message as well we need to access it safely because last message can be null and when you just create a chat room it's gonna be null and we already see one chat from there uh if I'm gonna go to the context and I'm gonna press on one more okay I can go back to my list here and if I'm gonna refresh I should see two rows there it's not exactly what I wanted to see but it's uh yeah it's um it's two rows basically uh and it's not what I wanted to see because of the information that we receive so let's see at console log chat what information do we receive here we see that the chart is a chat room I mean has a chat room here [Music] um so probably we can send here directly item dot chart room item dot chat room yes and this will send their last message uh ID and a list of users users items are an array of two items okay perfect but the problem is that yeah like if I look at that console log chat Dot how did I say users users dot items users dot items then we should see an array of two users first user which is the other user and then me all right all right so for the information that we need to display on the screen for example the user image uh we're gonna take it from the chat users items let's say at position zero first uh so let's do const user equal chart users item set position 0 and now instead of accessing it from the chat we can simply access it from the user same thing here uh and the same thing here and if I save now I should see even their names I really hope that I will no because why no because why console log uh user let's do that so user uh items dot user and now yes and now we see the name and the image of that specific user the thing is that um where the user is not always going to be at position at position zero so an improvement here would be a loop uh through chat users items and find a user that is not us that is not the authenticated user but I know that whenever we press on a chat room VR I firstly add the other user and then I add myself and I can assume that the other user will be at position zero again this is not um how's it called This is not um I mean it can be our way otherwise as well so uh to have it like production ready it would be wise to look for them and check based on your ID I'm pretty new to AWS ecosystem by any chance uh is it possible to integrate machine learning into this application yes it's possible to integrate machine learning with basically any application because the machine learning model will usually run on the back end so it really doesn't matter what is the application because the data we will receive it through the API and from the application standpoint it really doesn't make a difference what is the data that is coming so if you have a machine learning model behind the scenes that generates the data and puts it into a database and then the application can consume it that's perfectly fine also in this topic amplify has uh predictions here you can look it's it's quite complicated but you can look into it and you can Implement [Music] um you can Implement um how's it called um recommendation algorithm with it so if you have like a shop like you can you can recommend users items but they are more likely to buy uh all right so with the chat rooms I think we are good we're gonna see um what's up with the last message after we actually add a message there for now that's good we can navigate to the chat with ID chat uh by D is going to come from them I don't know from where from chat let's see last message ID yeah I think it's from here so chat dot ID it's okay and if I press on the user it goes here awesome so that means that we implemented the list all chat rooms query in our application the next step is having unique chat rooms between two users because now if I'm gonna go in the context and press again on the first User it's gonna create a new chat room with that user and we're gonna have duplicated chat rooms here um I would like to come back to this feature a bit later and move on to the next step for the messages um or should I or should I implement it right now let's let's have a look at at the messages first uh because it's a bit easier and after that we're gonna think how to solve that question hey Mr Frank thank you very much this build is awesome let's go how are you doing my man I remember you you were watching the channel for quite quite some time but I haven't seen you around for for a bit how have you been all right so um our next task is going to be on this page and we need to one create messages when we press on this send button we need to get all messages and also we need to think about updating the last message in the chat room okay um you know what I think I'm gonna spend a bit of time to have like unique chat rooms between two users right now just to have like all the code um like together so uh creating unique chat rooms for the users how we're gonna do that what would be the logic there uh our screen there is no it's not in the screen it's in the component contact list item um yeah here is where we need to check if we already have a chat room with a user so I'm going to I'm going to extract this into I don't know a utility function just because there will be a bit of code there and I don't want to to mess it up here so let's go ahead in the source um and create a folder I don't know services and for the a new file chart room service dot yes and here let's define a function export default get chat room uh for user user one ID and user 2 ID we basically need to get the chat room between these two users how we're gonna do that um a very optimal um query would require us to write some back-end code to properly query the information for the database for these two things but in our case we are going to first get all chart rooms of user one then get all chat rooms of user two uh chat rooms yes chat rooms then um find get the common chat rooms or we can also remove uh chat rooms with more than two users because in that case that a group chat we haven't implemented it yet but it's good to think about this use case as well because one chat room can have multiple users and if we're in a group with that person we still want to have like a private one-to-one message group with him um okay let's start from the top um let's start from the top we're going to have to import the API we're going to have to from AWS amplify uh besides the amplify we need the graphql operation um so get all chat room of user one we're gonna use a very similar query as we use in the screens chat rooms here queries so let's go ahead and copy this query I'm gonna copy in verb I don't know uh directly in this service file because uh we need to get the user with ID then we get the chat rooms items chat room IDE and I think that's it like this well uh I'm looking right now and I think there is a another option instead of querying all the chatrons for user one and when querying all the user chat rooms for user too we can simply query all the chat rooms for user one and check if the user 2 is in any of those chat rooms so yeah we have users item user ID I don't need name and image here because I only need the ID I don't need the last message so it's gonna be yeah let's let's try this one so caused my chat rooms equal my chat rooms is equal to um and as well I think instead of receiving my user ID I'm going to get it here using the oauth so const of user equal a weight of current authenticated user current authenticated user saw my chat rooms is going to be API Dot I mean await API Dot graphql I'm already tired away.api graphql and here we will have a graphql operation and what operation we need this list chat rooms with their ID of user.etry builds dot I sub okay and the name of a function probably is not going to be get chat room but get um common chat room with user and here we're going to specify the user ID so now my chat rooms let's simply console log my chat rooms and wheels we're gonna see what do we get here now in our shot list item let's import this function import from services not screens but Services then chat room service and from the chat room service I'm gonna get calm on this one and here check if we already const chart existing chat room equal await get common chat room with the user that we are clicking on this thing and the logic will be if existing chat room is not null then we don't need to continue because we want to Simply navigate to the ID existing chatroom.id all right let's go ahead and let's go ahead in our contact list and see what do we get a required model Source service chat room which for an exception can find variable get command chart from with user oh no default export const uh uh in here from the chat room we know what I'm gonna do I'm gonna comment out the creation of his chat rooms until I have that function ready not to create a necessary data in my database so right now if I'm going to press on one of his users we see data get user chat rooms and it's an object these chat rooms are chat rooms that I am part of so um let's do here response and I'm gonna do chat rooms equal response dot data Dot uh get user when it's get user with like this get user dot items now let's do that here well we should also do that and if I press it's an empty array because my chat rooms are empty [Music] um chat rooms items oh it's getuser dot chat rooms dot items it's like this now if I press it's again empty what's up with chat rooms uh if I press and find oh get user I'm doing some some silly mistakes yes now it should be working with items or empty array and yeah these are the chat rooms that I am part of I am actually part of two of them uh and as you can see yes that's that's right I'm part of two chat rooms here one with Caroline in one with raid so now what we have to do is to uh loop through all the chat rooms and see if there is any chat room that contains the user that I'm interested in so let's do it like this uh chat rooms we need to find the chat room find the chat room that has chatron dot users chat room dot users dot items if that items if any of those items um if user dot ID is equal to the ID that we received here now let's go ahead and console log the uh chat room let's console log this chat room foreign users items chat room [Music] uh let's go ahead and debug some of the stuff here uh so let's do console log to the chat room itself foreign this is an item and we have item dot chat room most probably here it's going to be the same item children items n is not a function it's not any but some if some of the items if some of the users have the ID that means that we have a chat remove that user undefined but first one yes chat room why it's still an array because we are doing chat rooms fine we need one element of those chant room with ID with users wait a second oh it's this one but the second one is undefined it's undefined because let's do chat rooms dot uh chat rooms at positions there I just want to see the structure of our users so chat rooms at position zero Dot um chat room dot users let's see though that field its items user object user object and if I take the first user what do I see there no I need items Dot item set position zero the queries are a bit crazy yeah user is an object with ID so I need a chart ROMs we look through them here and for every item we access the chat from here when users then items items items if uh it's item here so I need to check item Dot user.id user item let's call it user item not to confuse it with here chat room item now if I do that I see the chat room and if I check the other one it's undefined think it works and I can simply now return this chat room or I can yeah return chat room and if I'm gonna press on this one I'm going to be redirected here I don't need this console worn anymore if I'm gonna do here nothing is gonna happen the second one nothing is gonna happen only the ones that I have a room with like this one perfect so now I'm gonna uncomment all of the rest of the code and we will be sure that we don't create duplicated chat rooms let's double check if everything is working uh for example here I'm not going to create a new one I'm gonna go here but if I go to the earner I should create a new one and if I can come back and reload the application we see that we have a new chat room and as you can see my assumption that vower user will always be first is wrong because here it we see my phone number which means that my authenticated user is first so it doesn't mean that always it's gonna follow the same order so let's fix that real quick in there um components contact chat list item and here uh let's let's have a state variable four-way user or no let's actually do it like this user is going to be items and Dot find item the item dot user dot ID that is different than our own user ID our own user ID we're gonna get it in them we need to get it from the authentication module so for that reason we need that's why I didn't want to do it because it complicates a bit of a code unnecessarily so user set user we need to um to query it use state null now in a user fact use a fact in the use effect we are going to cost fetch user this part is easy but the part we need a const of user equal await a let's import this one as well and let's get the current authenticated user because we need to check the item that has a different idea than ours so of user at three builds Dot sub attributes like this and then after finding it that's gonna be a user item and we can check where we can set user using user item Dot user yeah like this and let's not forget to call this fetch user function inside our use effect okay good now yeah now everything is working uh good as before uh and the first chat room where I was the first user now displays the second user which has a different user ID even mind uh perfect so that means that we implemented this fix as well and with that being said we are done with the chat rooms definitely we have implemented all of the things that we wanted there so unique chat rooms between two users perfect let's go ahead and uh get commit B 5 is it five yeah chat rooms and let's do git push no not yet okay so with the chat rooms we are done and we can move on to the next step the next step is our chat room and here we're gonna work with creating a message getting all the messages and um and so on so for that let's go ahead in the components input box because the input box is the one that we see here at the bottom input box and when we press send what we have to do is to create a new message so to create a new message with our API we remember what we have to import API from AWS amplify we also need the graphql operation and we need the create message method from our queries so from graphql query not queries mutations because this is a mutation mutations a mutation is called create message and let's go ahead and implement it here so let's first make the function a sync um let's do um API Dot oh wait API dot graphql graphql operation and what operation we want the create message and the variables will have a input and here is going to be new message let's go ahead and Define the data for our new message but for that let's see what data do we need for that we can check them the schema here so let's add the mutation create message create where is create message create message and for the input we need the chat room ID to specify in which chat room we send the message the text and the user ID so we serve three things that we need I'm gonna copy them from here and I'm gonna paste them here chat room ID text and user for the text it's simple it's a new message that we wrote in the input box uh it got rid of my styles wait a second I'm gonna do some Ctrl Z until I see my styles okay here they are and I can now yeah for the chat room ID for the chat room ID um we're gonna think it uh about it in a second because for the user ID that's pretty straightforward we already know how to get the user ID using the authentication so let's do cost of user equal weight of dot current authenticated user and we can take them off user dot at 3 build dot sub for the chat room ID as I said we're gonna receive it in the parameters because we don't know here in the input box what is the chat room ID so where we use this input box that's in our screens chat screen where we render the input box we need to send also a chat room ID which we're gonna get from the well we don't have a chat room here uh at this moment but we have we have a route that if I console log if I console log the route uh we should see that it has a parameter for the ID yeah so uh chat chat room ID equal route Dot params.id so let's send this chat room ID here okay let's try to send a message hello let's try to send it sending new message undefined sending your message new message why is it undefined variable input [Music] um variable input has no value for type string foreign new message was undefined we are gonna see value set new message hello oh because we have here a new message uh new um let's change the name of a state with text set text simply text input text no no no no this one is text uh and here value is text and on change set text okay let's see now hello sending but the promise is still rejected uh why confirm variable set new message oh yeah yeah yeah because at the end we need to do set text with empty string but the mass that means that the message actually was sent so we can go in our content here in the messages and receive a message hello with a chat room ID and with a user ID and hello again we will see that it appears here automatically all right so creating messages uh is done we saw how we we did that now let's go ahead and query our messages so create a message is done get all messages for the chat room um let's see what query we will use because we we can use the list messages but list messages will give us all the messages so let's check in the filter if we can filter by the chat room ID and it seems that we can um yeah we will be able to filter based on the chat room ID or another option would be to get the chat room get chat room by 18 and then get the messages like this that's also possible and I think we're gonna use this method if I'm not mistaken this is a bit more performant because it will use the index behind the scene to to link these messages so get chat room let's do it with the get chat room in the screens chat screen uh let's go ahead and import API from AWS amplify we're going to import API we're going to import the graphql operation and what graphical operation foreign queries get chat room okay let's define the state variable for our chat room chat room set chat room equal use date uh initially probably is going to be null yeah and we can add here if chat room if chat room is null then that means that we're still loading so let's simply return a activity indicator uh reload okay so um now let's go ahead and query our chat room uh and we're gonna do it in a use effect and we can do API Dot graphql and graphql operation for our get chat room for with the ID chat room ID and after all that's done we can simply use van and uh result set chat room with the result dot data Dot get chat room let's have a look at the information that we receive about the chat from here and see if we have everything that we need uh let's reload islav hello I'm good how are you doing so we have information about the chat room including last message we have messages very good um and this is actually what we're interested in in the messages so our flat list will be chat room dot messages well let's let's wait a bit let's actually look at the chat room dot messages just to see what we have here okay here we have items with the actual messages that's good that's perfect so we need messages dot items we need to send this one to our flat list and I find it's not an object evaluating user ID okay let's go ahead in our message here um and let's add some question marks um for example like this hello we have text we have uh time uh the only thing that doesn't work properly is that is my message because let me con Sol log the actual message information to see how we can get it uh I think we can work with the user ID instead of accessing information about the user we can simply do if message dot user if message.user ID is oh and here it was a hard-coded thing but we need the cost of user we need the off user here import ant off from AWS amplify a weight current authenticated user and here we should check if it's the same as the sub and it indeed is the same as sub because now if I'm gonna go um for example here and and basically change the ID to the other user foreign linked to an existing link to an existing user for example if I'm gonna link it to you know that one save changes and if now I'm gonna go here why is my message message ID I think it's still getting the same it's getting from the cache let me try to insert a new uh a new message good uh linking to a chat room uh with this ID and from a user I don't know this one save message and now if I'm gonna go here oh it's actually the same it's good here we have three messages user ID is is kind of different for all of them oh because it's in a sink here but we made the function a sync uh okay I'm gonna have to Define um State variable is me set is me use state uh initially is me probably is gonna be false uh here instead of returning I'm gonna set is me in the state because we have like this async function uh and here we can simply check is me and here as well is me safe all right now it works better and only that first message remade on the right and valver on the left um all right that those with messages create a new message get all messages and the last step the last step is actually um it takes a bit of time until it realizes that it should be there oh but I need to call this is my message into invam so much complexity just because of this a weight authentication uh and we can very easily improve this by by having a context and saving the data about the authenticated user in the context and having access to it every time maybe we can we can show how to do that in the next episode because it will simplify a lot of calls and we will not need the use effect we will not need the use date and so on uh and now yes now it works better so we have created a message got all messages lastly we need to update the last message in the chat room because on the main screen we will always show the message of a last message the text of the last message and in our chat room if you remember we have this chat room last message ID so let's go ahead and update whenever we create we send a new message let's update this chat room to point to the last message in order to be able to Simply query it on the first screen so for that what do we have to do where we send the message and that's in our components input box index where we send the new message we should also set the new message as last message of that chat room so let's go ahead and do that uh for that we need to actually run an update mutation we're gonna update we're gonna update the chat room update chat room we're gonna update the chat room uh but updating the chat room we need some information about the chat room that we need to update and besides the ID we also need for example the version because every time we update an object with dynamodb whenever the version is enabled uh we need to always increment that version of object so here instead of saying receiving the chat room ID I would rather receive a chat from object because now in the chat screen we already have this object chat room and we can simply send it here as chat room to the input box uh now we have a chat room that means that we can uh update the chat room so let's go ahead and run the um API Dot graphql we want to run the graphql operation which one the update chat room and the variables let's see what variables do we need whenever we want to update a chat room so uh for update chat room here for the input we need the version we need the yeah chat room last message and a very important ID because we need to know what um chat room are we trying to update so let's copy all of it from here input version as I said we need to increase the current version of the chat room so let's do chat room dot underscore version plus one the chat room last message ID is going to be um is going to be new message data equal to that so it's going to be new message data dot data Dot uh create message dot ID over chat room is where chatroom.id and with that being said let's see this is our last last message send possible and cannot promise rejection let's have a look and handled can find variable chat room ID where am I using it it's here so chat room ID is going to be chatram dot ID okay last message sending last message I don't need this console worn anymore uh what did you save here did it work or not they didn't see probably didn't uh last sand possible and handle promise rejection let's see the error client version is greater than the corresponding server version oh uh version think we we don't have to increase it it will automatically increase am I right last now I think it worked we don't see any errors and if I'm gonna refresh it here we should see the last message uh we don't see it yet but let's see if it's in the database let's go ahead yes we see last message ID here uh that means that let's double check the way we are querying the chart list here and let's see why don't we see the last message uh in them in there I'm gonna go in that shot list item and let's console log the chat console log chat so last message dot text last message uh how do we render it oh we need to make it capital last message save yes and for the text as well yes now we see last here uh how are you if I send this message and I go back and I refresh we still need to refresh because we didn't Implement real-time data but after refreshing we see that the last message is how are you and it's a few seconds ago isn't it um amazing all right so now every time we are sending a new message we are um properly updating it in the database so that the chat room points to the right message that was lastly sent and if our user sends a new message from his side he's also gonna going to update the last message and now his message is going to be the last one and will be visible here foreign tail using dynamodb transactions so that would be interesting uh that's quite uh quite Advanced and we can do it like in a separate video probably uh but yeah if I do that like probably uh it's gonna be quite difficult for a lot of people even for me I I don't say that I'm any different um oh um what do we do now because we for the chat room we updated the last message and I think we are good for the chat room we also will have to do a couple of things for example sword by sword chronological oh no logical to to have like them the messages in chronological order because at the moment we are not um what else what else and the last step is our real-time data to listen for new messages to update everything but my idea is that um in order not to rush this process with real-time data which is quite an important topic I suggest going for it during the next week including with other improvements like sorting chronologically including real-time data and other extra feature that I'm going to prepare for the next week that's going to include maybe filtering pagination um Storage storage is also very important topic that we will not be able to cover it today but it's it's a must have in this this type of applications including like storing images for our users and also maybe including image messages that's also possible so um please let me know what other features you'd like me to add to this build and we can include them during the next weeks um build and for today I want to say thank you very much for being here with me till the end I hope you enjoyed this tutorial and if you did please consider subscribing to our Channel because from our analytics we see that more than 90 percent of uh people watching the our tutorials are not yet subscribed and uh yeah that hurts a bit but yeah um hope you will will you'll manage to build this application yourself and my recommendation is to never stop here try to add extra features so I try to add to go that extra mile uh be curious like how I would do it differently how we how I would add that feature how we do that in a different way in more performant way because what I'm doing here is definitely not the only way I don't say that this is the best way but this is a way to get started and to build something meaningful and yeah that's everything for today subscribe to my channel like uh turn over notification Bell not to miss our future video because we are going live every Friday at the same time 3 P.M GMT plus one and also we are publishing a lot of videos lately if you saw yeah have a nice weekend ahead guys and I will see you next week also here

Channel: notJust․dev

Views: 59,604

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react expo, react native live coding, live coding, react native aws amplify auth, react native auth, javascript, react tutorial, whatsapp clone, build a whatsapp clone, whatsapp clone react native, whatsapp clone tutorial, aws amplify, chat app, react native, react native tutorial, javascript tutorial, real time chat app, socket io, programming, react native chat app

Id: 8psijC5ezkc

Length: 199min 26sec (11966 seconds)

Published: Fri Oct 21 2022