Realtime Chat App in React Native and AWS (Backend) 🔴

hello people hello welcome to a new stream uh where we're gonna build a real-time chat application uh and today we're gonna integrate our real-time chat application with a back end which will be an aws amplified back end with a graphql api and authentication services and all the good stuff hello hello alexandra from moldova hi everyone uh yeah please let me know where we're coming from uh today where are you joining from i'm really curious so uh we started this build previous week and we have built uh a clone of whatsapp with uh all the ui elements that uh whatsapp has like the messages the flat list and so on i'm gonna get into more details really soon i'm gonna show like what we managed to build previous week what is the plan for today and so on so guys uh thank you very much for joining uh if you're interested in this kind of content please consider subscribing to my channel as it helps uh helps me a lot to get started on this platform um yeah thank you very much for all the support that you guys are showing lately also uh join the discord server that we we have created um link in the description where everyone is sharing their own builds um we are helping each other and the most interesting thing and the thing that i like the most is that people are all are trying to go an extra mile and they are improving the builds that they that i'm building here in live stream uh because yeah i'm limited by time and i um i'm trying to clone only like the essential uh and the main part of an application and people like out of curiosity uh start implementing like extra features and they're sharing in the discord and yeah that's really awesome and i really think that this is uh a very good way to learn it's following along until you grasp all the concepts uh not just watching this live stream but actually opening your code editor and starting building it yourself if you don't manage to do it while live stream this video will be published on my channel uh like in a couple of hours after this live stream so follow along at your own pace build it uh and when you finish the build try to implement something extra uh some functionalities that i didn't implement and that's when you actually learn and that's when you understand if you actually grasp the concept or you just follow along so yeah i'm really glad uh to see all your all your builds um let's check the chat hello uh priyank hello master jim uh hello so big i'm so bad with names sorry guys to the reactor react native it depends like what what you want to build like if you want to build web application definitely go with react if you want to build mobile application react native yeah that's that's what it is so first of all let's have a look at what we managed to build previous week and i will open the project you can find the the link to this project if you didn't follow the first episode in the description it's a link to a github page so you can clone it and you'll have a project that they have it right now and i will write yarn start it will open the development server and from here run it on either ios simulator or on an android device or emulator depending on like your system and preferences it will work on both of them so i will run on ios simulator you have um added for for questions like this i would kindly ask you to ask them in our discord server because it doesn't relate to the bill that we are actually doing today so it's going to be um a bit distracting for the people that will be watching this live stream afterwards so i will be i'll i'll be glad to to help you with your questions uh but yeah let's follow up on discord on them uh so attempting to open a simulator come on come on let's go what's happening there uh yeah it asked me a question here expo client on iofn is outdated would you like to upgrade it okay let's upgrade i think like live stream is the perfect time to upgrade uh the tools hopefully everything will be okay [Music] there yeah it's building with javascript and shortly we'll have our application running on the xbox on the device hello martin uh martin is saying glad to have you working on the whatsapp part two i look forward to seeing your implement push notifications uh yeah push notification might come later uh today where we have something else planned so we have our application opened so we see uh first of all the home uh the home screen which displays a lit a list of chats that we have um people that we are chatting with uh we have like the top uh now top navigator top tab navigator and we can actually change pages we can also like scroll and change the pages uh at the moment we have implemented only the the chats tab uh also when we press on a chat for example here we go to the chat room and here we see uh all the messages and we also uh can type the message and send it right now nothing is gonna happen because we didn't implement integrate with backend yet but everything is ready to to do so one more thing here we have a floating button with uh like uh creating a new message and when we open it here we are redirected to a list of contacts and here i'm planning to display just all the contacts that will register in our application so uh that's what we have managed to build during the previous live stream uh if you haven't been there uh yeah here it is so uh what is the plan for today uh today we're gonna uh integrate this application with a backend as i said the first step will be uh to set up the aws amplify project uh the next one is to add authentication so uh only authenticated users will be able to up to to see their contacts to start chatting and so on and also will set up everything again with aws amplify uh then the graphql api which um we're gonna set up and integrate all everything with from our app to work not with dummy data that we have right now but with data from uh the api and um yeah in baby there will be like more information because we have to to do a lot there so are you guys ready yeah i almost forgot we reached 1 000 subscribers that's so nice guys thank you very much for everyone ever all win but a big start and i'm really pumped on like what the future will bring will bring us okay guys let's get started so here we have the link linked my keyboard is flashing that means that it might get disconnected soon i don't want that so uh yeah docs.amplify.aws and then there is like the starting guide and we choose react native from uh from the list um so aws simplify words like what and why i'm using it aws amplify is a set of tools that combines a lot of services from aws and it makes it really easy to develop a backend for mobile applications and web it is composed of multiple tools from aws for example it uses aws cognito for managing users uh authenticating users uh authorization also and all this stuff it uses aws appsync for the graphql api or also rest api if you want to develop a rest api uh aws has free this is the storage service from aws where we can store all the images songs or any media file that we have notifi notifications and analytics and a lot of a lot more services that uh that you might need to just get started in the real the cool thing about it that i like is how disconnects my keyboard and microphone can you confirm now that you can hear me well and we can continue working okay great so getting started um let's uh in order to get started with amplify we need to have on our system not just install npm and git then we already have a react native application uh because we uh yeah we have it uh developed from the previous episode after that we need to sign up for an aws account um and uh signing up for enable aws account is free however they ask you for your credit card details however most of the services on aws have a free tier so it's more than enough to test and uh you're not gonna get charged for like testing data and messing around with services uh however i encourage after you finish like playing around you delete it uh just to make sure that yeah you are you're clean there but um yeah i'm not a charge for any of the services that i have built using this um these cloning episodes like uh instagram twitter everything is on aws and i'm not chart so after that we need to install and configure amplify locally uh i'm not gonna do that right now because uh i already have uh amplify installed and but it's very easy to follow this guide uh there is also a video you can do that yeah amplify configure which will configure amplify locally with your aws account it will ask you to create a user and set up the secret keys and that's it the next step is setting up uh the amplify project so here uh we are starting uh to do it together uh the only thing that we need to do is run amplifying it in our project so let's go here let me also okay terminal and run amplify init amplifying it will ask us a couple of questions uh and yeah most of the services from amplify like follow the same approach like they just ask you a couple of uh questions and that's it yeah i choose your editor i don't have um webstorm there uh for the type we're gonna build a javascript application and the framework is react native for the source directory leave as it is build command the same start command the same and now we just have to wait until amplify um initializes our project now actually there is one more question to choose our profile uh and this profile is the profile that you set up during the previous step from the tutorial uh yeah from here you set the profile name or leave to default so based on the profile name you will select it uh here so i'm gonna use the ig clone test profile name but i have it already set up just out of curiosity why not use firebase then isn't firebase better than aws uh yeah maybe i'm very biased towards aws because i'm using aws every day at my startup uh i'm also aws certified and i really love all the services that uh they are creating they are providing i also had an internship at amazon so yeah that's but also um like from uh objective reasons uh aws has a much bigger um share of cloud providers and it's a lot bigger than google i think aws is 38 and google is around 10 or something like that so yeah that's why i'm using aws please step by step for new developers on aws amplify uh yeah from now on i'm gonna do like everything like step by step and everything that you need to do the only thing that i'm not following uh is setting up your aws account and installing amplify locally that should be very straightforward like uh you have to to run a couple of commands here you see like everything you need to do and that's it so the other part yeah i'm following along i'm not copy pasting some code and pasting it and saying that you need to do the same so um okay let's have a look here uh we did the amplifying it after that we need to install over a couple of libraries that amplify needs so i'm gonna copy them and make sure that you select here expo or react native cli depending on how did you set up a project in our case it's an expo project so i'm gonna do yarn add and paste in all the dependencies that i copied from the website if we have a website in react and combine uh the app for rest api then aws uh amplify will work yeah uh aws amplifier works with react for web application as well and you can also create a rest api not only a graphql api um in yeah in amplify yeah that's perfect well it's a solution okay install the libraries and the last thing is we have to copy these three lines to configure the amplify in our app.js in our case it's up dot tsx in the root folder you find out.tsx and uh after all the imports we add uh amplify configure we save it and probably we will have to rerun the code because we installed some dependencies not sure if they are updating right away so just to make sure yeah let's close it and let's just make sure that [Music] the amplifier was set up correctly and we don't have any um run on ios we don't have any bugs sorry i'm i'm blanking from time to time okay 80 percent a little bit more come on come on come on we can do it i really like the fast refresh um of react native and yeah after the first build that usually takes like around one minute everything is very smooth and it refreshes like instantly it's also when you need if you have it's that's the mirror below so yeah we see that our application still works as expected um and other than that we cannot test anything because we just initialize the amplified so i'm gonna go ahead and add the checkpoint and git commit everything commit yeah amplify yeah these are the three steps that we took okay the next one will aws notify that you are about to reach your tier limit yeah yeah aws uh sends you automatic notifications when you are at around 80 percent of your free tier so in any case you'll receive some some notification uh okay so authentication um if you'll need more uh instructions about authentication you can um find here the guide but we're gonna follow because we did it a couple of times already here so amplify add authentication and yeah that's it and uh yeah it will ask us a couple of questions um default configuration or default configuration with social providers someone was asking me on discord uh if um amplify authentication supports uh signing with facebook or with google and so on so yeah they support and you would choose this uh default configuration with social providers and you'll have to just create this application on facebook to get the key and on google and so on i'm gonna go with default configuration for this project and uh how do you want users to be able to sign in username email let's go with a username i know that actually whatsapp links a user account to a phone number but we're gonna do it a bit simpler and not require phone numbers from users [Music] so do you want to configure advanced settings no i'm done everything as simple as that okay the next step uh is to run amplify push and what this will do it will take all the services actually only off service that we added right now when set up and it will create the necessary service in the cloud so it will push our application to the cloud let's run that because that will take around two three minutes to set up all the all the services yeah on aws it will ask us regarding welfare indication category yes and yeah this may take a few minutes okay while um it creates the services on aws yeah we can have a look here what other steps we need to take and if i push it will create it [Music] and the next step will be to actually include the ui that amplify is providing us because yeah usually you spend a lot of time creating the design and ui of all the authentication authenticating screens for example sign up login then forget password then to to insert the code that you receive on gmail on on email and uh yeah you you have around like four screens and so on and um when you're developing some um some prototype application or proof of concepts you don't want to spend a lot of time on in this part and you want to actually spend time on building the actual business side of the application that that that will make sense and uh in that situation amplify comes with very easy to use ui elements and just with two lines of code like importing that with authenticator and wrapping our application inside this higher order component inside this function uh we get all the ui elements and all the screens for uh for all for for all the steps that i uh described before like login sign up for get password and so on and yeah that's that's really nice because just with two lines of code we have authentication set up and we yeah save a lot of time at the same time um let's copy this one and uh let's delete the export default from here because we're gonna export it down below here and we paste in export default with authenticator and our application and all resources are updated to the cloud now our application will refresh um let's make sure first of all let's run amplify console and this will open uh aws console to show us our application in the cloud so yeah here we see our application whatsapp clone uh it has like authentication added we'll gonna add more categories a bit later um yeah everything that you need here you can view uh your identities incognito your users and so on play around with uh with the console and see what you can understand from there okay now let's try to rerun the application here please active hardware keyboard texting is covered by keyboard what do you mean text input okay so guys uh with those two lines of code that we created like with authenticator we have um our app protected by authorization so uh here we have like the signing uh to your account screen uh however we don't have a account yet so let's sign up uh for the username let's say my dim uh password very easy password try to help me i know that you could see it okay and here's some random email sign up and um what this did we should now receive a code on our email i'm gonna check if i received it already but it's usually like instantly i received it um my mouse oh my mouse wants charging really now hope that my pc will manage to stay on the battery a bit until i charge my mouse hello don't tell me that i'll have to to use the trackpad so this is a confirmation code and now we can login let's hope yeah we logged in um and the next time that we will launch the application where um we're not gonna see both screens because we are already logged in why you're not working yeah that was really simple someone is saying that um yeah that's what it takes to set up a very basic but everything that you need uh authentication flow also the good thing is that it doesn't limit you in any way so if you want to design it in your own way and if you have like custom designs you can do that and it's also very easy because um uh yeah aws amplify has um has methods that you just call for like sign in sign up and so on and you just send the uh the credentials and they will they handle everything else so you can also do it on your own with your own designs yeah i think that i'm not gonna use the mouse with video it said that no it doesn't want and yeah let me charge my pc instead um someone asked why this promise rejection warning always pops up this is actually an issue with uh analytics but we didn't set up analytics uh so on so it's a so it's a problem with amplify but it's not um a huge problem so yeah if we go here we see that there is like an unhandled promise rejections if we will set up uh the analytic service then this error will go away uh okay so does that mean that authentication is done i guess so uh also uh for authentication someone was asking me like how to see that flow again after we seen it um basically um we can implement a very easy sign out um button but we will call the sign out method imported from aws amplify so that's also very easy you you just implement a button sign out you import the sign out function from authentication service and you call it and that's it you are signed out from your account okay so what's next let's commit everything to git yeah that was a pretty small commit and authentication is done so the next one the most interesting one uh is the graphql api how are you doing guys uh are you following everything all right so graphql api uh the same way as we added the authentication service we call amplify add api amplify will ask us a couple of questions we want a graphql api uh provide by api name we leave it as default um and choose the default authorization type for the api so um there are a couple of um ways to authorize user to use the api one of them is the api key and this will be like a generated api key um but this is only for uh development purposes so don't push the production with an api key uh because like once someone uh has this key that is generated they will be able to access uh your api so that's why when we choose api key it asks us like for how long this key should be available and we usually set up seven days uh and for some people this key got expired and they had to regenerate a new key so today i'm gonna try uh amazon cognito user pool and this is uh a way to um to we will be able to access the api only if we are registered like uh with cognito with amazon cognito and the amplify of service is using this cognito and this is uh that will mean that only the authenticated users will be able to access our api so let's choose this one uh do you con do you want to configure advanced settings for graphql api no i'm done do you have an annotated graphql schema no we don't have any schema yet but we're gonna define a shortly one and choose a schema template uh let's start with a single object field and then we will um add more objects and increase our schema do you want to edit the schema now uh yeah i want but i think if i say yes it will fail to open the file so i know where the file is um now we go to the back end where amplify uh backend api and here we can find the schema and this schema is our uh schema for the graphql api you're welcome game game buzz thank you for joining oh someone is saying that they have a bug okay maybe i'll get to that real quickly and if i open here and if it opens them simulated keyboard i don't know how to open it probably somewhere here keyboard toggle software keyboard okay yeah i understand the issue now okay we'll get back to that real quickly i hope to be able to to easily fix that okay thank you for for the information so um regarding the our schema one second so the schema is um a way to tell our amplify how will our models and uh will look like and based on this uh amplify will create um all the specific resources so basically for each model that we have amplify will create an aws table in how is it called this database dynamodb yeah forgot the name it will create a dynamodb table for each model type and it will save this information in the dynamodb table the dynamodb is a database service that scales very well like to millions and billions of items and it has like really uh a very very good uh performance it has some drawbacks as well because it's based on it's a key value database and we can query based on the key it's not like a relationship database uh but um yeah for for for some purposes it's like it's it's the best database in my opinion um so let's define how will our user look first of all let's remain from to do to user uh and our user will have an id every a model should have an id it will have a name it will also have like a image uri but let me check how did we call this image uri in our dummy data because i don't want to change the code users yeah image uri uh so the image array will be a string um what else but it's not gonna be required so the exclamation mark event means that this field is required so let's set image uri is optional because maybe not every user will be able to to have like a image and also there is like this status which is again a string uh yeah as well let's leave it as optional so i think that this is the minimum that we need for a user for our application to work i don't see any other things if we look here we have id name image and status yeah so we defined our schema um i don't i don't want to put all the schema that we need like right away because uh it is going to be confusing because our schema for today will be quite big and i want to develop it like step by step to be more clear so user that's enough for for now let's run uh amplify push and create this service on aws let's go time date time um a user actually someone is saying to what time they time to user however amplify will automatically add two more fields to this schema which are created at an updated ad and they add these fields to every model unless we uh specify but we don't want this this fields there so we don't need to add any time here because it's gonna be added automatically yeah well speak amplify asked me to confirm uh do you want to generate code for newly created graphql api yes and this code will um i will show you in a second what it will generate so we choose typescript or javascript from here and let's go with enter do we want to generate update all possible graphical operation which are queries mutation and subscriptions yes let's go with everything and the maximum statement that let's leave it to 2 right now enter the file name yeah that's going to be good hi flutie boy how are you doing so we are waiting a couple of seconds until yeah all the services will be created um in the cloud don't forget to drink water guys stay hydrated come on so let's chat with someone who do we have here let's chat with elon musk come on so guys ask something because i'm getting bored until this is creating who managed to do the first part of what's up clone is anyone from here that finished the first part and is intending to do the second one for email i did half yeah that's that's good did you get stuck on something alexander is asking not just is your sponsor or your company not just is the brand uh behind everything uh and it started as my company where we were doing um yeah a software development service company and now it's shifting more into education and content creation thanks for impression why it's taking so much time okay then good luck with uh finishing the application uh if you have any uh problems just right in our discord group and i'll be glad to help you so um okay all the resources are created that we need so let's have a look at them let's run amplify console and here we can even say like api and it will open specifically the console of the api like and graphql and hit open only different screen but i will bring it here so here is our graphql let's have a look so we have our schema and this is like what graphql generated out of the information that we provided uh and if you remember we provided only six lines of code saying that okay we will have a type user and amplify went and generated uh and generated 160 lines of code for um for everything that we will need for example all the crude operation we have them here um type mutation it it has like a create user update user delete user operations uh for queries it has get user list user for the list of all the users in our application also subscriptions uh all the inputs everything like uh just for you to understand uh how much amplify is helping us um i'm building also graphql api for my startup but i'm not using amplify there so uh all these 160 line of code i'm writing it myself with amplify uh we are writing six lines of code and we get everything set up and ready to use um so also uh here in queries we can uh run queries in right here so we see our get user now let's run the list users uh to see all the users from our application we will expand the items and from here we will choose what fields do we want to receive from the server let's go with id name and for example image let's run it it says that unable to pass gbt token it's we are unauthorized so that's what i was saying only authorized users will be able to run queries so let's log in with user pool i don't know like this um ids where they are coming from uh but we'll select the second one just select both of them and see which one works so for the username i'm gonna use the same username but i registered in the application my name and the password again the same login uh yeah it's logged in as by dim so let's run the query which i don't know where it disappeared yeah here is the query let's run it and we see that list users there is no users in our database so what does that mean um basically amplify does not uh connect a user in the cognate cognito pool they use the cognito is for authenticating so right now we have a user incognito pool but we need a way to connect this cognito user to an user from our database from amplify from from up sync sorry because we don't do it by default um and we will have to do this linking uh manually on our side so what does that mean that means that um every time we will register in our application where we will open the application we will take the idea of the user that is signing signed in from cognito from of service we will do a query using that id to our database to our backend uh and we'll see if there is no user with that id will register a user and that will happen only once because the second time we open the application there will be already a user in the database so let's do that and where we will do that we'll do that in the top level component which is our application so in our application here let's define a use effect because we want to run this code only the first uh when the um the application uh loads so run this snippet um but only the first only when up is first mounted um okay so here we will need to declare a sync function um something like patch user or manage user and this will be an async function and we need to call it just after declaring it this is a little trick because it looks weird because we are declaring this function and calling it right away and you might ask like why not declaring it a sync here and do all the logic inside here uh we cannot do that with uh use effect that's a limitation of fuse effect because use effect should receive uh a non-async function so that's why we have to declare a separate function which is a sink and just call it uh here in our use effect so the first thing um okay get uh authenticated user from off the next step will be get the user from backhand with the user id from authentication that we will receive here and if there is no user in uh in our database with the id then create one so this will be our flow that we are gonna do uh someone is asking what is dependencies empty array here we are uh inserting the dependencies like um when should this use effect be called and here we would place the variables that this use effect depends on basically meaning that whenever a variable from here changes our use effect will run so in this case we don't have any dependencies and we want this snippet to run only the first time it mounts that's why we send a empty array that's how we make sure that it runs only the first time because if we don't change send anything it's gonna run every time our component updates so we don't want that we want only the first time okay so let's start implementing the first step so user info equal to a weight off that we're gonna import shortly and let's import it right now we need some okay it doesn't want to import this way we can we will import ourselves here authentication from not cost import import import from aws amplifier we're yeah import off from aws amplify and here we self will give us the current authenticated user we can also say bypass cache to make sure that we are not taking it from cache and we are actually taking it from from the server true okay let's uh before doing anything let's console.log this information and make sure that we are actually receiving what we want and in what format we're receiving it let's save and open our yeah open the expo the expo server so here if we scroll a bit we see um cognito user so this is uh information about the sign in user it has everything like attributes email if email is verified a phone number [Music] also what information it has that we will need okay it also has in this attribute it has a sub i don't i don't remember what sub stands for but this is a unique id that defines this user in the cognito user pool so this is uh the id that we're gonna use to link this user with a user in our database so let's remember that we will need this sub so [Music] here if user info because user info might be null if user is not authenticated but we're gonna check if user info is not new then everything will happen here okay get um yeah get the user from back end with user id uh that we got here user id i mean here user sub so let's import api here because we're gonna do some calls for the api and we if we look at the source graphql here amplify generated us a couple a couple of uh queries and mutations that we can just take them and use so that's also something that uh graphql help amplify helps us uh in my application i would have to run all to write all these queries and mutation myself sometimes i encourage you doing the same here because for example uh if we have i don't know uh this page with a list of users here we see that we only need name image and uh status then it doesn't make a lot of sense to take like i don't know like created that updated ad and um yeah other other things so you might uh copy this uh query and insert it into your file where you need it and adjust it as you need for example saying that we don't need created app on updated ad for the purposes of this tutorial i'm gonna use everything that amplify generated here uh maybe later on we will need some custom custom fields so i will edit them so we see here in our queries a query get user and it receives an id and based on this id it searches in the database and returns us a user with all the information about it if it exists so we're gonna import this get user in our application.tsx so let's import from src should be here right no uh where are we in screens no no no okay it's just dot src graphql queries and from the queries we need get user get user we need also to import the graphql operation and that's it with the import we can uh we can implement it so here cost user data will be uh fetched from our api graphql and we send the graphql operation with a parameter of the query that we imported get user and as a second parameter we need to send the variables yeah it right it shows here variables and the variables is uh yeah all these variables that we need to send in this case it's only like one id called so id will be user okay let's add some space by the way can you see uh well um the font size because usually i increase it but today i forgot one size let's try 16. yeah now hopefully you can see it better so by d we're gonna take it from user info and if you remember uh user info has attributes and dot sub and this is the id that we need to search one so that's user info dot attribute dot not id but sub okay now we can console console log the response that we get and see right now we should expect a new value because we didn't register our user in the database yet let's save let's open expo server scroll here yeah object data get user null this means that uh we didn't find any user with that id in our uh server in our yeah database and let's see um if user data dot data dot get user if this is true that means that console log user is already registered in database and also let's return here if it's no then we need to create it in our database so the same way as we called uh the api with a graph collaboration we called it with a get user now we need to call it with a different operation and creating things in graphql are called mutations and this is like when you create a post you update the post and stuff like that queries when you receive information it's similar to a get request in a rest api mutation are like a post request so let's have a look at our mutations here we can see the first one create user mutation it also has an input of type create user input we don't see it here but if we want to check uh how does this input look we can check it on console so let's import let's duplicate this line and from rotations we will import create user create user and i think that's everything we need to import right now so first of all uh let's define the the the object that we want to create so new user will be an object the idea of a new user will be um as we discussed already this sub uh field from our cognito that's how we link them together the what else do we have here id name image your right and status okay name image uri and status okay for the status i will go with a hard-coded um uh string i think even whatsapp was doing that i'm not sure right now but it was saying like hey i am using whatsapp and after that maybe we can implement that we'll be able to change the status for the name we can take uh the name from user info that we receive from cognito if we scroll a bit to see uh the data that we received from cognito in our attributes we also received um yeah maybe not in an attribute somewhere should be the username yeah it's username just user info.username yeah and username is yeah our as you guessed our username so the name will set with userdata dot username name and for the image uri uh why does not exist um yeah you definitely exist we just uh don't have the types of uh the graphql so let's not worry about them right now for the image uri i will implement a simple function that will give a random image to everyone because i want to keep it simple i don't want to implement right now image upload if we will have time maybe we'll implement it into in the next week and if you're interested about that yeah let me know and i will make sure to take it into consideration so let's have a function somewhere here const we get random image will have somewhere here random images it will be a list of images and yeah if i you give me a second i think alexandra prepared something for me uh as urls yeah let's try who can help me uh in the chat uh how do you get a random element out of an array that would be helpful because i don't know what is it just been [Music] see others but no i think we are good with this amount so we should generate a random number between zero and the length of the random items and return it there how do we make sure that the generated number is between zero and length we can have a look uh javascript uh random number or someone wrote there okay i will just trust my my friends here that are helping so um return images at position and here we need a random number between uh zero and zero one two three three inclusive or zero and four exclusive so it's gonna be math.floor math.random oh my the autocomplete feature that i'm using uh plugin how to complete it with map the floor map that random and we multiply it by random images.lamp that should give a random image from here ah we'll see hopefully it will work and not crash force for anyone imagine uri get random image new user okay we have the object now we need to send it to our api so const or we don't need to receive anything back from api we're gonna just say await api dot graphql here we send a graphql operation let's make it from new line graphql operation uh the operation will be create user and for the variables we will say uh i think we need to say input yeah the variables is input will be our new user that we created here he's vetted let's try um let's save it will refresh let's make sure that our server didn't uh complain about anything i can't be sure about that possible i can do a handle promise rejection that doesn't look good um input has for years new new value for normal type string which is which one id name image status id name image status let's make sure that it didn't actually create them yeah it didn't because list users is still empty source name message variable input as i write it here correctly input id name imagery and status let's console of um yeah the new user maybe there are some new values there yeah i guess the username might be no let's see um id is okay yeah name is undefined name is undefined what does that mean name user not user data but user info why didn't it tell me guys let's save now let's check um that's something else a lot of yeah i think it created and we can check it in our aws console and we will run this list users query let's run it and we see we already have uh the user in our database and if we refresh it it will check and it will see that we already have the user with that id saved in our database that means that we don't want we don't need to create a new one so if we run we see only one it doesn't create two or more can you go back on aws uh what do you mean here somewhere so that's how you guys link a user from cognito from authentication with a user from our database and why do we need that we need that um because everywhere in our application we will have a relationship between something with a user for example a message with a user because we need to know like which user created that message and having that user in our database together like with messages alongside is going to be much easier to query and i'll show you later what do i mean by that [Music] and yeah but that's probably a bit harder than we saw uh until now it requires some custom calls checks to two services one of them is our current authenticated user based on that information we do first of all a query to our graphql api if we don't receive any result that means that there is no user there and after that we create that user in our amplify uh in our graphql api so yeah but that's a bit more complicated but when you think about it it's still pretty straightforward i will delete these comments because i think it's pretty straightforward what is service are you using to run graphql query on aws so um we are using aws hexing because that's what uh amplify is using behind the scenes so to access it we call amplify console api and this my friends opens up and here which is graphql and it opens up this page to run the queries okay so we added the amplify we created the user we registered the user on authentication now we we can display all users in our contact list which is here but before that uh guys give me one minute i need to go somewhere very important i think you can guess i'm gonna be back shortly from i'm back so how how are you doing guys uh first of all let me commit everything implement api and user model also let me show you something so if you're thinking like okay where is all our you uh data saved that's as i said uh aws dynamodb d now db this is the the database service behind uh our models so if we look at the tables here we see the tables that i was using for our project but also we can see um somewhere like users that we just created i just don't remember um i don't know the idea of that but yeah it should be here somewhere yeah image name yeah this is the one so yeah this is the the dynamodb table that we it is used to store our users that we just created let's check some chat messages suman hi from india hello welcome to welcome here okay uh i feel like react native is much similar to react yeah indeed it's uh very similar the only difference is um you have render components that we are using in in react um in in react we are using like all the div uh h1 spawn and all the web components however here we are using um alternatives like views text and so on but the logic and everything else behind it's the same react and rank native i spilled water but that's okay please put timestamps later to the stream yeah i'll definitely do that's what i thought today that i actually need timestamps it's going to be much easier and having timestamps you guys will be able to to skip this this talk that i'm doing that is not related to the project okay how to remove a word how to remove a word back from here [Music] you can i'm not sure why would you do that because um this is the default ui behavior on ios having this back button and it's present in all application it's possible by sending a null value to header back button if i'm not mistaken uh of or in the navigation of that screen so the same way as we send like head or right component same way we send here header back button and the bell will be new okay guys so how how do you feel everything good are you still here uh the next step in our plan is to display all users in the contact list so let's do that uh first of all let's close everything and open screens and contacts screen here currently we are taking users from our dummy data that we have here users but we want to take these users from um from our um yeah back-end api so first of all we need a use effect use effect that will run when we mount this component and to do that as you remember we send empty array here as dependencies let's import we use effect and here because we again will need the sync functionality we will define fetch users as an sync function and here we can just call fetch users so um let's wrap it into a try catch to make sure that it will not fail or anything we are catching all the errors that might come with a network um and here let's say const user users data will be equal to a weight api dot graphql here graphql operation let me just put them from a new line and the operation will be list users and now we need to import everything so let's import api and graphql operation from amplify and aws amplify and one more thing import the the list user query from source uh graphql queries and from the queries we will import list users users okay we have list users we call and now we can console.log and see what we receive from the server we should receive something similar to what we uh saw here because here we also run the list users um and if we save to refresh i think it already did and let's check that because here so it has data dot list users dot items and the items is an array of users and each users we see that it has like an id created at image uri name status and currently there is only one user uh that i have registered so that's good because uh using this data we can display it here so where do we save this data in our component we would need a state for that because we receive it from a server we need to save it somewhere um in the component so for that we were are gonna use state users set users equal to use state and initially it will be an empty array add import statement and here we can call set users user data dot data dot the name of operation list users dot items yeah this is quite long you don't need to memorize it just console.log have a look here like data.listusers.items and that's it like don't try to memorize it uh in the cache let's console log the error now let's delete our import of dummy data and now it should look it should work yeah it actually works here we already see there is one user uh with a name and yeah the status hey i'm using whatsapp okay right now let's manually add a couple of users through the console to be able to see them more here so i'm gonna choose here annotation i'm going to press plus sign and here i'm going to call the notation on user user i'm going to expand the create user and here we need to provide a image uri name and status okay for the image alright let's copy some images from this array image uri let's paste in here name and status hey there so right now i'm creating users but nobody will be able to sign up with them because they are not linked to any cognito users so they're gonna just be we're gonna be able to see them nobody will be able to sign up with them so yeah that's the idea uh yeah we created them right now if we reopen our application should we see more let's just make sure that it's working and then we can add a couple of more yeah it created a new one so let's do six we just change the name here to six add user whatever nine and probably that would be nine and now if we open the this page now we see four users one of them is me and voters is are the ones that i created um in the console they are not linked to any authenticated user so nobody will be able to enter there however will be able to use them as testing data so that's it that's how we display uh data from our database from our api using queries pretty straightforward yeah we import api and graphql operation we import the query cell that we need to run and after that in a use effect because we want to run this the first time that the component mounts we uh we declare a fetch user's function which will be an async function and we're gonna do this operation on our api.graphql then based on the result that we receive we're gonna set them set this data in our state so later on based on this state variable users we can display it in our flat list a lot of moving parts but yeah once you do this um more times it it it starts to make sense and it's pretty straightforward so let's do git add display users from api and yeah we are done with b step display all users in the contact list okay next one will be interesting how are you guys doing everyone good did you drink water are you hydrated my voice starts starts to crack how much time are we live one and a half hour it's still good but yeah my voice is already leaving me okay perfect now with chat rooms uh chat rooms are yeah all the rooms that we are going to create in order to um yeah like we put two users in a chat room and they exchange messages and this what we see here like chats these are the chat chatrooms and we're gonna try to uh implement them in a way to support uh groups later on uh easily so um it's for example it's not gonna just have like user one and user two but it's gonna have like an array of users so right now we're gonna work with uh just chat rooms of two people basically uh two people chatting and after that we'll be able to improve it and add groups uh very easily because it's going to be ready to do that okay so so so so let's go let's go yeah let's close everything and for our chat rooms we will need a new model in our api so let's open our amplify backend api schema and let's add a new model chat room which will be a model and the chatroom will definitely have an id because all models will should have an id um and it will also have like a list of users and a list of messages in that chat room [Music] uh okay so um what is where let's think about the relationship between a chat room and a user so basically uh one user can be in multiple chat rooms which means that at the moment i'm in a chat room with lucas i'm in the chat with daniel with alex and so on with everyone here and also a chat room can have uh multiple users basically this chat room currently has two users me and lucas because that's the users who um are part of that chat room later on if there will be groups there will be even more users in a chat room that means that the relationship between a user and a chat room is many too many so when we have a many-to-many relationship we need to add a separate model between them that will link as a one-to-many in both direction what do i mean by that uh that's gonna be let's say a chat room user will be a model and yeah as i said um every modules has an id and now uh this chatroom user should connect on one end with a user on and on the other we end with a chat room basically meaning um yeah like a connection between a user and a chat room so for that we need a user id to know with which i did connect and it shot a room id to know in which chat room this user is then uh we will add um yeah this is just by these over users and the chatrooms but we also would like to receive by querying a chat room to receive the information about users so to make the actual connection between a chatroom user and a user so for that like we uh yeah we declare here a user which will be a user type and here we also need to add the connection um the connection to the user and the fields on which this connection will happen uh our user id so based on this user id connect it with a user connect it with a user from here yeah the same way we need uh to make a connection with a chat room and the connection fields the fields are chat room id something like this okay um now we have a relationship from a chat room to a user and to a chat room however um a user now is not linked back to the list of chat rooms basically doing a query on a user we cannot know in which chat rooms he exists so to do that we will declare here chat room user field chat room chat room user and this will be an arraylist of chatroom user because uh it has a one-to-many relationship with a chatroom user and also we need to declare the connection but the connection right now um [Music] should use a secondary key to be able to search in the chatroom uh database so before doing that let's create the key here so we'll create a key on the chatroom user and we need to give it a name to be able to later on use this key so the key will be firstly by user and which fields will this key be composed of so the first one is the hash key like um you have a primary key on which we will search [Music] the items in the database so the primary key will be on user id and the second one is our sort key basically it's going to be easier to sort based on this key so the sort key can be chat room id okay let's add the same key for forever connection which is by chat room the fields here are reversed the the hash key is our chatroom id and the sort key is our users user id okay now we have this um this keys we would we can access the key here in our connection so key name is by user by user and what what is the local field that we want to do the connection the local fields are id and it will match this user id basically this user id with a user id from here that we specify this way whenever we do a query to the users we will be able to to receive information about the chat room users meaning like in which chatrooms this user is part of and this will give us an arraylist of a chatroom user and based on this chatroom user we can query all the information about the chatroom so uh what else we see here that the chatroom should also have a list of users knowing like uh yeah to to be able to display who are the users in this chat room so the same way as we connected a user with a chatroom user the same way we're gonna do it here chat room users will be an array of chatroom user and the connection will use the key name by chat room this one and the local fields will be also id okay my chatroom id if i didn't do any mistakes thank you very much if i didn't do any mistakes [Music] that should be it with a setup of the chatrooms and multiple users in one chat room so i would go and write amplify push and see if i didn't mess up any any names [Music] yeah alexander my girlfriend brought me some tea [Music] do you want to update the code yes i want how do you how do you think guys uh it was that somewhat uh more or less clear because it's yeah might be a bit confusing um i i i agree on that one with because this is a specific case with a many-to-many relationship usually usually the one-to-many relationship is much easier and you can see one-to-many relationship in um in other projects for example in instagram clone there is a one-to-many one-two many relationship between yeah user and posts um and so on but here like we have many too many and it's a bit more tricky because we need the intermediate table oh okay i think we need to ask for one more question yes okay we'll wait a couple of minutes until it updates [Music] and after that we can start implementing it so let's think about what should happen and what should we create whenever we start a chat with someone for example i go here on a new chat i press on the first contact lucas so what should we create in our database to be able to create a chatroom and set it up everything with lucas the first one that we we need to create is just to create a simple chat room we don't give any inputs there because the idea will be generated automatically and yeah we just create a new chat room after that we create a chatroom user for lucas with user id uh the idea of lucas and chatroom idea the idea that we received from the server that chatroom that we just created and this will put lucas into that chat room we also should make sure to put ourself in the chatroom we will create a new chatroom user with user id but in this time our user id and chatroom id the same id that we just created in the chat room so that's how we add two users in our chat room but as you expect and as you might see right now it doesn't limit us to two users because we can create 10 and 100 chat room users with the same chat room and that will mean that we put a lot of users into the same chat room so that's gonna be useful if we want to implement groups and group chats [Music] foreign yeah it's generating code and yeah now uh if we are looking at our queries here let's update uh yeah our queries yeah we see that we have a query getchat get chatroom user get user list chatroom users list chat rooms and list users and the same way for mutations like create a chat room create the chatroom user and so on we delete an update [Music] okay now as i said whenever we press here on a user let's create a chat room with that user so what do we need to do let's open our components contact list item and yeah this is the the the user that we display here the component contact list item so we already have a one click press on on click and if we do a console word hello that yeah if we do here yeah we see the console world yeah one click is working so what do we need to do first of all let's import let's import we don't need the moment um yeah as usual api and graph ql of aeration from aws amplify and amplify and we also should import a couple of mutations from from source graphql and mutations we're gonna create um create chatroom and also create a chatroom user to add the user to a chatroom user yeah i'm gonna put them from new line to be more clear create chat room um do we have them there create chat room users yeah make sure yeah yeah everything is good so whenever we click let's do a dry catch unlocking is enough so as we said um first step create a new chat room second step add um this user add user to the chat room and the first step add authenticated user to the chat room okay this is uh are the three steps that we need to take in order to set up everything for a chat room to be able yeah first one is pretty straightforward const new chat room data equal to a weight api come on why why graphql not operation why we need to make this function a sync and here a graphql operation and which operation is create chatroom and as i said for creating a chat room let's check where it is uh we don't need any input because the chatroom currently has only uh uh chatroom has only a id so the id will be auto generated uh and we can console log new chat from data save let's open up our server let's clean everything and let's press on one uh data new errors message variable input has null therefore i think we still have to to pass um an input there an empty input input like this let's have a look yeah object data um create chatroom create chat room and this create chatroom has an id created that and updated that and we can access it through dot data dot create chatroom dot id uh okay let's if a new chatroom data dot data is no then we had an error so in that case we can return and we can console log here oh come on failed to create a chat room um in our case if it didn't go into this if it will come here then cost new chat room equal to new chatroom data dot data dot who already forgot uh data dot create chat room this is uh the name yeah of um operation and then and then the tip [Music] um we can actually consolidate here to make sure that we didn't mess anything print yeah the object has an id and based on this id we can add users to that chatroom okay add user to the chat room we yeah let's delete this one so const um new user chat room new user chat room is the good name yeah probably it's gonna be await api graphql graphql operation and which operation create chatroom user and here for the variables we need two variables chatroom user we need the id will be able to generate it we don't need to send anything the user id we should provide like which user and the chatroom id like in which chat room we should add it so these are the two variables that we need to provide uh and the second one is chatroom id so for the chatroom idea uh we take it from our newly created chatroom dot id and for the user id we are taking it from our props from user user dot id you cannot find name create chatroom user right no no no no no no no how is it called create chat from user okay this is the first user and actually we don't need them to to receive any information we just created and the same way we did for our user and how do we get information about our user we get it from um our server service here user okay [Music] and the user id will be user info dot attributes if you remember dot sub be this his id and yeah we did the three steps we created a chatroom we added one user to that chatroom and we added uh ourselves to the chatroom so let's try to uh save run this and see what we what we get so for example let's create a new one with alex and data variable input has input input okay we need to add this data into an input object just write input object and paste in the data the same way here input save can you hear the dogs barking i think that probably this is the last time you're gonna hear anything around myself except my my voice because i order a new microphone and that one should be very good and should silence all the noises that i have around myself so i pressed a couple of times i hope it created it didn't do anything but let's check in our up sync let's do i'm gonna just i'm gonna write the query myself you can play around and press here um buttons but they feel that it's it's much easier to write it so we need a list chat chatrooms right or no let's take the user get list users and for list users in the items we're gonna request the id and name i'm just gonna grab my id this is my id and i'm going to change it from list user to get user and the id is going to be the id that i just grabbed and yeah let's read my items and here you should say like yeah id and name so do you remember how we um we created with chatroom user connection on our user model now that's how we are able in uh our query to get information about the rooms that we are inside let's we call chatroom user here this will return our us a list of items and each item will be the pres the presence of ourselves in a chat room so it will have a chat room from which we can get the id and what else does the chat room has it has user chat from users because we want to know like who our users are in that chat room besides us and again items id and name name username or just name no chat room users oh no no user and here name and also the probably the idea so what does that mean for for the user that we are querying basically myself give me all the chat rooms that i'm a part of and because this is uh an array we need to um to query the items field here and for each item give me uh the chat room that that item represents and in each chat room there is like other users so give a return back all the users that are in the chat room let's run it so vadim vadim is in account in two chat rooms let's open the first one the chat chatroom has by the this uh and it has two users the first one is how can we make it a bit bigger can you see it right now so the first user is my name the second one is alex and let's look at the second chat room but we are again with jim and alex so if i uh press on lucas and run again with query uh yeah we see the chatroom with lucas and vadim my demon with alex and so on so it means that everything seems to work right so what do hello daria so uh the last thing that i want to do uh is to once we press on a user to open the actual chat with that user so let's navigate to um we have like a chat page or something like that how do we navigate id chat from id and name okay we should navigate somehow like this and here navigate chat room we have a new chat room and it has an id that's good and we need to put the username of that chatroom basically what we need to do here in these uh chatroom users to check which one is not me like first one or second one but i guess it will always be the first one yeah because we added yeah we can hack and think that it will always be the first one and just return the name of the first chat room user um okay let's hard code it here something because i don't want to get into the details right now um coded name save uh let's create the chat from with daniel and it opens a hard-coded name chat with the neil actually the idea is of that chatroom only the the name here on the top is different that's i think not a big problem yeah at the moment it displays like dummy messages but we're gonna fix it really soon what does that mean that means that we we didn't finish actually the chatrooms because the last thing that we need to do is to display all our chat rooms in our chats page like in our home screen to display like all the chat rooms that we are part of right exactly so how are we gonna do that let's close these two let's do a commit guys an extra um an extra tax for you to challenge yourself is before creating a chat room with a user first of all check if you already have a chat room with that user and if you already have like you don't need to create a new one so that's like an extra challenge if you manage to do that that's really awesome so [Music] okay what now now we need to go to our page screens chats screen here is the flat list we follow our chatrooms so where do we get our chatrooms we get them from actually similar query as i developed here so we get the user with our id and we query all the chat rooms that he is part of okay let's do that okay let's declare the viewers effect empty dependency list clones patch chat rooms no use effect please equal to a sync function and here we call them edge rules [Music] okay let's import everything that we will need import api graph ql uh operation graph well operation and also we will need that of service to take our id from aws amplify and we also need to import a query the queries get user source rql queries so the first thing is the first thing is to get the user id that is currently authenticated we know how to do that already with um user info equal to a weight off dot current get how is it great authenticated user um if user info but user info will never be new because we cannot get to this page if user is not authenticated so i guess it we don't need to check if it's null so we will suppose that it's it's gonna be already authenticated so this value will not never be known okay now const uh user data is equal to a weight api graph ql operation which operation get user get user and for the variables for the input or no not the input just variables id will be user input dot attributes dot sub right yeah right now we can console log user data save and let's open up here so object data get user uh bazer first of all has like id name by team status and so on but it also has a chatroom user which is an array of chat rooms i'm part of however if you remember that uh during our initializing the api when we call like uh amplify add api it asks us uh how much depth which the queries should have and we set up to two so that's what that depth means so the first level is get user the second level is chatroom users and yeah the third level is the items so it will not query the user from a chat room or the chatroom it stops at depth too however we need a bit more depth for example this is the first level uh this is the second level this is the third level fourth level and yeah a lot of levels we are acquiring a lot of levels so to accomplish that what we are going to do is we are going to modify the graphql query from uh here like the get user because right now it only queries for the chat rooms items but we need to query chat from items user chat from users and so on like to to get all the information that we need uh in other tutorials i actually um edited it right away here you can do that but remember that it will be overwritten every time we run graphql push because it will generate new code and it will override this code so i would suggest not to touch this one however copy that get user query and let's create a new queries file into chat screen let's create queries.ts and let's paste it here and if we put it into another um in our folder it's not going to be over overridden and right now we we will be able to change it safely and include here information that we need so let's think we need id name chatroom items and for the chatroom items we will need my chatroom god i'm so confused like this yes it's this one so chatroom user items and then this one chatroom user items and here we have band we query the chatroom the chatroom of the chatroom user we take by d and we query also the chat from users like which other users are there and for them we just query id and name but we can copy our data that we have like id name image array and status let's copy paste it here yeah you should delete a i should delete a where from i don't see where i did a mistake but alex is saying that i should delete something we'll see if i receive any errors so let's now import the get user from here in our chat screen get user instead of importing it from source graphql queries we'll import it from dot queries let's save let's open our um yeah here okay now this is what it returned get user chatroom item but again oh no no here so yeah it's a lot of data however yeah we see here like the users that are part of that group like this is lucas this is my team this is daniel this is the dim this is vadim with alexa chat and a new vividly and so on but you move alex yeah it's just gonna be a bit interesting to to parse all this data yeah it's a lot of data it might it might look confusing it is it is confusing for me as well but let's take it step by step and hopefully we'll manage to do it [Music] so how does our mock data look let's see uh chat rooms yeah it looks so similar to what we have i'm just joking so it has like the id of the chatroom and it's users also the last message uh okay okay okay we'll see if we want to change the structure where to adjust the ui to work with this new data so let's define the state for our chat rooms set chat rooms use not use effect but use date and it's going to be initially an empty array okay we so set chat rooms with user data dot data dot get user dot chat rooms i think right because data get user chatroom user yeah get user chatroom user get user chat room user and this is very list we need to work with items because it's an array dot items and here is the array but we are going to work with chat room it has an id it has chat room users so on let's say let's import use state and let's save and now undefined is not an object evaluating chatroom users at one yeah because it's not that easy to get the users of that chat room so chat list item yeah probably we will have to to do some mapping because that data is crazy the chatroom has not user but chat room users items we might have like chatroom users.items hi andrei welcome how is it to work with drop 12 front end did it become easier remember what nightmares i was having with apollo yeah usually with graphql and apollo it's great when it works it's a nightmare when it doesn't so from time to time it's still the same because um i was trying to do some more advanced things with apollo and i and i had like similar frustration i implemented like some feature like two weeks or something like that but i think it's just like it's a complex complicated like technology and if you understand it and there is a lot of things happening in apollo behind the scenes so that's why if you don't if we don't study the magic like we we can get into real bad situations so what are we doing let's let's first of all cause a lot of these items it's going to be much easier let's go here come on chatroom and chatroom heads what does chatroom has id and users which is items and that is the way chatroom dot chat room users dot items items undefined is not an object dm is so hard to navigate with all this data reload come on reload why why are you running why are you running why aren't you running [Music] i'm enjoying my time with firebase but i can see the benefits of aws amplify a complex project by the way what might are you getting yeah yeah i believe at firebase it's more beginner friendly and some of the things are yeah easier to get started with but aws i feel that it's a more mature product and has better potential for yeah production ready applications i just don't know why it doesn't work now what my mic i'm getting i'm getting the pod mic from rode it's a xlr mic so the quality will be i hope come on what's happening hello are you working or no yeah so errors errors errors and defined chatroom is not item but item dot chart room save all right so yeah now i think we are receiving them or no and define is not an object evolution last message that content okay oh i get it last message we don't have yet last message implemented so in our chat list item last message where is it let's do like this if it exists when we display the content otherwise we display nothing save chatroom last message created at chatroom where chatroom oh here okay um here we're gonna do shadow last message and and if it's true it will display yeah i will definitely do as asmr so why don't we see anything also blog user and converso log user let's see if we at least receive a users there refresh user yeah it has something user oh probably dot user yeah yeah i get it so items dot user huh okay okay okay something better we see um you have a list of users that uh i'm chatting with so i guess that we are chatting within two times with alex and i think it should be with lucas as well oh no because we are taking it from position zero but we should yeah actually we should take we should look for these two items and check which one uh is not us but i think we are good with just assuming that the first user in the group is the user that we are talking with later on we can do some logic here and do a filter and basically take the user only if id is by the uh of our user no only if id is not the idea of our user because we want to receive the user that we are chatting with not ourselves so that's uh that's i think good and we can press on yeah on um on anything and we see the name here on top lucas if we press on then you'll receive the meal and so on but sometimes your position yeah yeah i see that sometimes i'm at the position one so do you say that we need to implement that right yep yep yep so okay let's do something like a use fact [Music] we just need to take the user id so use effect here const uh get our user get another user it's going to be an assing function uh let's call get other user um get upper user and here we will call const user info equal let's import it because it's not going to import automatically import of from mws at the time get how is it current authenticated user and the we need to state where we will save actual user const um user or let's say like other user like the user that we are chatting with said our user use state initially and here [Music] so um at this point i can do it very easily like if dot id is equal to user info dot attributes dot not id but sub in that case set our user to to the one from position one else position zero and we delete here user whenever user let's find where we are still using it anywhere else save can't find variable use state of course save uh null is not an object evaluating our user.image uri um yeah if our user is null we are still loading and let's return i don't know yeah right now it takes dynamically valver user and here is like lucas daniel alex and so on so right now it takes it dynamically and everything is good so with that said i think that we are done with chatrooms that was pretty pretty complicated i would say um yeah guys if you get stuck try it again and again and go back into the video and look uh how i am doing and make sure that you're typing all the all the information correctly because as you saw like our data structure that is coming from amplify is very huge uh that's just because of that of the many-to-many relationship between user chatrooms and because we wanted to make uh this api ready to support groups in future so let's add let's commit uh display users chat rooms and yeah with that said we are done with chatrooms guys i'm gonna be back in one minute i need it really badly to go to the toilet hey i am back how are you doing guys not a lot of people left only the the beasts are left yeah this stream is taking a bit more than expected but yeah this application is quite complicated and they don't try to take shortcuts i implement the data structure that is probably very close to production ready um infrastructure and uh yeah that's why i could take some time until we set up everything we manage all the data and so on a bit tired how are you i'm i'm pretty good i think we can pull off one more um item from our task list which is messages because yeah i feel that that's the main part of um of whatsapp application is to be able to write messages in um in the chat rooms not displaying the dummy data that we have right now so are you ready guys we do it it's quite complex yeah this uh this build is a bit more advanced than the other ones so yeah let's close everything and right now we will start implementing the the messages the messages will will be in a chat room and will come from a user that's the information we need to know about them so let's have a look here amplify back end api and schema so in our schema let's define a new type and these will be type message the message will be a model yeah working with models be like um and what information or information a message will help always we start with an id which is a required field it will have the content [Music] like which message we actually send the content will also be required it will have a user id user id to know from which user it comes id it will have a chat room chat room id to specify like in which chatroom this message was sent and it's gonna be an id so the same way as we linked the chatroom user with a user using a connection that's how we're gonna link it here as well let's copy it i think it's the same as here uh the user will return a user the connection will be user id from here a message will also contain a chat room uh and the connection will be chat room id from here yep yep yep yep what else what else okay our chatroom should return a list of messages so messages will be an array of message and we're gonna connect but before connecting we need to create a new key on the message model a secondary key on the chatroom id a secondary key yeah a key the name of the key will be by chat room the fields of the fields the fields will be uh yeah the chart room id [Music] that's the field that this key will uh will create the index on and we can also send a second key here and this as i explained previously this will be the sort key so based on uh what field do we want to sort whenever we will query the messages in one chat room we would like to sort the messages based on the date so that's why we will add here created that to be able to sort messages based on date so if we added here created that we also need to add them in our list of fields even val created it will be created automatically we need to specify it here and created that will be a string and we'll add one more thing to our key here is not equal it's like this uh so based on this uh secondary index we want to create a query we want to actually query on using the secondary index without having to go through the chat room to do that we're gonna say that it will create a query field called let's put everything from new lines can we so the query field will be called messages by chat room so we're gonna receive messages by sending a chat room id that's how we'll receive all the messages in one chat room and we'll be able to sort on create it at because that's the sword key um yeah and here for the messages let's add the connection keyname is the name of a key that we just created by chat room and the local fields will be the id here let's save and let's try to to push amplify push push me and then just touch me yeah after three hours of streaming like my mind is going crazy yes yes yes week by week my streams are taking longer and longer and that's just because i want to get into more details i want to explain more things that i'm doing not just doing and [Music] expecting you to follow but i'm actually trying to explain what what i'm thinking what i'm doing and that's why it takes a bit more time but i think like um i can pull off a 12 hour stream and that's in my mind so stay tuned and hopefully soon we're gonna do a crazy 12 hour streams where i'm thinking to to start an application from zero and to finish it into the same day and also to publish it and it's not gonna be a clone it's gonna be like uh an application but uh i'm gonna think of i'm gonna design it and publish it and yeah show you the process of the whole process from like designing uh implementing and uh deploying this application until the end what are you using for web for the back end uh we are using aws amplifi for the back end we created a graphql api on it and right now we are implementing all the features currently working on the messages can promise i'm gonna watch the 12 hour stream from one goal yeah in the beginning you didn't even watch like one hour stream but now we are watching three hours so slowly slowly you will see that it's gonna be so interesting that you're gonna watch till the end oh andrew you're still here when are you coming to moldova andrew that's very important uh information for all the people that are gonna watch this stream tell us until we are waiting for our api to update that's what to do come on come on come on [Music] thank you alex marafu thank you for the support okay so it created the messages right now what's left just to go there and create a message when we send one let's do it so in our screens chat room screen this is the yeah plus list with messages and the input box the input box where does it come from input box component components input box here index yeah it has everything here so first of all um let's import everything that we need from import uh api we will also need alph to to send the user id of our user and graph ql operation that's from aws amplify and we also need to import the the notation that will create a message so we import create message from src graphql where not queries but mutations patience um okay we importantly create message mouse like this so let's first of all in a use effect um get the user id of get our user id so in the beginning we will query the user id and we will have it stored somewhere adding for statement page user sync fetch user and here let's say const user info a weight of current authenticated user and let's store i use my user id set my user id use state and it's gonna be enrolled initially so set my user id to user info dot attributes dot sub okay we have our user id and on send press here we need to so here we need to uh call the create message graphql operation so await api dot graphql graphql operation and the operation will be create message and variables will contain the input for it and yeah and wait we need to declare it as a sync function so the input for a message id auto generated created and auto generated content content is message right we set the content uh the message that we are storing is state uh user id uh user id will do the jump user id will be my user id and what else chat room id in the last field it needs to know the chatroom id and currently we don't have a chatroom id in this input box and we will need to take it from properties props chart room id equal to props let's send it here no i will rename it to check from id with capital d and yeah right now here you can set it like this like chatroom id is chat from id but in es6 you can simplify it just by saying like chat from id and it will set it as key and value and let's make sure that whenever we use the input box we are actually sending the chatroom id there and we are using the input box in our chatroom screen here yeah the chatroom id we will take it from the params and let's have a look at how it looks when we get there we see the params contains an id and this is the chatroom id so input box chatroom id equal to route params dot id router ramps dot id save and let's try to send a message let's open our debugger to see hello world hello world let's send we don't see anything here let's see let's write here um a list of messages and see it created at least we need to update the page list messages id hello world it exists and if we write okay there and we run again the query yeah hello world hey there and we also can take the user who created it id and name we also can create the chatroom and from chatroom we can create chat from users and from chat from users we can get which user should be notified of a new message and here like user id and name and here we should expect like my demon lucas okay there uh yeah to lucas because i'm writing to lucas and the second one is again to lucas okay that means that um we are created um they're created uh successfully now we need to display them so let's check the chat are you going to enable to study or doing remote uh i didn't decide it yet for my graduation assignment and because that's the last thing that i need to do so still thinking is it better to use a advanced amplify or create your own graphql server only depends actually on like the use case uh but if it's a not very big application i would definitely go with amplify but um even for bigger application like you can use just a couple of services from amplify for example you would use i don't know like uh analytics from amplify and storage and it will easier work to store files on s3 but you can create the gradual server yourself i don't know why would you do that nowadays but because it's a lot of work and using tools like like amplify and firebase can use your work but there are edge cases where you need like that extra mile extra performance or extra flexibility of uh of a server that you will develop yourself so what else uh if you remember in our graphql we said that um this key on chat room and created it should be a separate query message messages by chat room let's check if we have it here no it's gonna be the same response messages by chatroom yeah you see it uh we have a messages by chatroom and we can provide that chatroom id let me just uh yeah i will grab a chatroom id chatroom id from here chatroom i need this one and we can query only the messages from this chatroom messages by chatroom chatroom id will be this one so right now uh our data contains only the messages in this chat room and that's what query we will use to display the messages here so let's go for it my voice is cracking okay let's let's check our um source queries or we can commit complete myself create message or send a message something like that okay uh it's created source graphql queries uh here let's find mass set just by by chatroom that's the query we're gonna need to use in our chatroom screen so right now our flat list is getting data from um yeah from our dummy data we need to fetch the data from the api using that hi i'm trying to direct an electron do you know what's the best way to load react as a file instead of loading localhost since i don't want to risk it being used by another software i don't think i understood it properly maybe my brain is just not working anymore what what do you mean you don't want to risk it being used by another software so use effect const patch messages it's going to be an sync function and let's call patch messages now let's import api api uh what else api and that's it and graphql operation operation rom nws amplifier and also our query with this we checked import from source well queries we import messages by chat room so cost messages data equal to a weight if i grow up too well operation which operation that get messages messages by chatroom and we need to send some variables as well to say like which chatroom so um here chatroom id id is route params id this is our chatroom id and also uh the sword direction and as we said like uh we declare a sort key on the date so the sword direction let's say ascending or descending i don't know descending because we need the last messages to query first and then if we scroll up we want to query later sorry direction descending yeah let's try now to console log messages data save and open our server let's open a chat here with lucas okay data messages by chatroom and it has an items with chatroom content and so on that's what i think that's gonna be a bit easier so let's uh create the state const messages set messages use state empty array at the beginning and when we receive them we are going to say set messages with messages data.date that dot the name of operation then dot items right i guess so let's import the use state chat from data we don't need it anymore so the flat list will be messages save oh it actually works whoa some bugs but it works uh probably it will not work it will not add it right away save yeah and we'll add it yeah only afterwards we can fix that later however however yeah with a new user it doesn't display anything we create a message if we check it yeah it's there um i see that uh it reversed like it doesn't know like it thinks that it's daniel's message not mine so let's check chat message uh chat message i'll open this file is my message okay here instead of u1 we need to check it against against the id from um from alf and we let's probably get it once here and send to each message with my id so closed my id set my id use state and let's declare another use effect hello rahul welcome and here let's say const first of all let's declare empty dependencies and get my id passing so first user info equal we don't have it imported we can import it user and set my id set my id user info dot attributes dot sub let's call this one here get my id to the chat message let's send my id equal to my id chat message we can open it right now my id string and we check it we restructure it and we check if user id is the same as my id save and right now we see that it recognize it as a message that i am sending same way here and actually we can check we can create a message from another user let's say from lucas in a console here first of all let's delete everything and list users items id and name just to grab the id of a user lucas input will be user id this one i need also the chatroom id how do i get it i will just console log it from here so chat room console log also log save let's take it from here this is the idea of our chatroom with lucas so through my id and content and just id will be enough great and let's open again this page yeah we see hey from lucas we see our messages we can send if we go back and rejoin we see our new message and we see that the message has been added like 16 minutes ago a few seconds ago a few seconds ago and so on so um displaying messages works and works as expected um goodbye andrew take care so guys i think it's been three and a half hours uh let's uh commit everything that we have right now patch and display messages and now i can also get push so uh all the code that we developed today is gonna be available on github and yeah it's gonna be available even right now so i think that's it for today um we did mostly everything that we have planned uh can you please fix the design bug in this page you mean that one with um of a keyboard i think that um i will fix it next week because i'm pretty tired right now so we managed to add uh for the api the user model register a user on authentication displaying all user in our contact list chatrooms messages and uh the last thing that is left from uh the plant items for today was real time functionality so whenever uh for example lucas writes a message it will update this list automatically so we're gonna do that with subscriptions but i'm pretty tired today and i'm pretty sure you're also tired because it's three and a half hours so yeah stay tuned and during the next week stream i'm gonna implement the real-time functionalities uh the application will uh receive messages and update itself in real time you'll be able to actually chat i'm gonna plan also uh creating groups because it's everything is all almost ready just a couple of uh buttons on the front end to to add more users to the group uh fixing uh bugs uh what else we'll see uh how much everything will take and i will contest all the information in uh in a like also a free hours probably stream uh and i hope to be uh to finish uh next week video with publishing this application and giving access uh to everyone who will be watching so we will be able to to start chatting with each other actually i think i can do that right now but for a short amount of time for example here i can set tunnel and if i will open the application on my screen let's see if it works expo let's you can also like open expo and if you scan this barcode it will open the application so i opened expo i scanned it and it should open the application uh yep new updates available downloading let's see i'm really curious if i'll be able to to register a new user and to start chatting with each other how do you guys feel how how was it is anyone here from the beginning till the end are you still alive probably i left some console logs there but i don't need to be there for example this one an advent um yeah i i forgot about like types and we have some red arrows it's not a big issue but in a production-ready environment you would want to make sure that all the ties for example here my id can be no but chat message expects a string here so yeah go back to the qr code here it is i can also uh copy and paste it here but it's going to be available on for a short amount of time so my expo is updating is downloading updates i don't know which updates but let's see come on so yeah let's um yeah guys do you have any questions all right so my application loaded on uh on my mobile you can see it here it asked me to to log in and i'm gonna create a new account with another email so let's create user account for elon musk yes okay one second just completing the registration form so why i can sign up okay sign up sign up come on why it's very unresponsive i think that because of the latency problems because i i i'm on this page and i press sign up and it doesn't do anything i think it's from latency pro uh adam is asking are you going to make a video for react native twitter profile um what do you mean um i think i finished everything that i planned with twitter um a lot of people are asking like more um more content on like for example instagram clone and so on so yeah i might if you're if you are interested in like more content on the uh builds that i already did i might do them in future but i would like to to move one with new projects because i have like a lot of ideas and yeah so yeah it doesn't um it doesn't want to work on my phone right now oh no actually i received a mail with a code but it's not the point so um i think we should call it a day for today because uh it's three and a half hours uh it's more it's uh yeah more than uh the previous stream and but we managed to do a lot in this stream so uh in just three hours when you think about it we set up the whole back end we added authentication with user with authentication flow with login sign up forget password uh and so on we created a whole back end and connected our application to this backend uh so we added the user model uh chatrooms messages and as you saw the chatrooms are pretty tricky because a chatroom is a many-to-many relationship between users and a lot of users can communicate with each other so yeah that was the tricky part and uh yeah thank you very much for watching uh don't forget to subscribe to my channel leave a like because it will definitely help me and also join our discord channel because um our community is very helpful and share like uh what you have managed to build and if you have any problems also ask there because i'll be happy to help you guys so um yeah see you on the next week and as usual take care guys

Channel: notJust․dev

Views: 57,146

Rating: 4.9650655 out of 5

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, typescript, 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: HdLbavvfflQ

Length: 209min 1sec (12541 seconds)

Published: Fri Oct 16 2020