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

hey what's up everybody welcome to a new live build and today we're gonna continue our uh what's up clone and here we are building a real-time chat application uh based on a whatsapp design and if you didn't see the previous episodes uh in the first one we built the whole ui of whatsapp i'm gonna show you uh real soon how it looks right now in the second episode we built the beckham application and connected everything with an aws amplifier and today we're gonna continue with uh with back-end integration and more technical stuff uh so in order to make our application uh real-time so whenever you receive a message you will instantly it will instantly display in your chat room so you will be able to uh chat with people because yeah that's usually what you would expect from a real-time chat application to send messages and as soon as you send them uh they would appear on the on the other people phone so thank you everyone for joining uh thanks for everyone who is joining live right now and if you are new here my name is vadim and on this channel we are doing uh live builds uh we are taking popular application that you love for example instagram twitter um spotify and we are cloning them in react native using uh also a double aws amplifier at the back end and i'm doing that because i think that that's the best way to learn new technologies and that's the best way to practice and improve your skills uh because i feel that a lot of people are stuck in the tutorial phase and they're watching like tutorial after tutorial but never actually have the chance to start working on a real project that you can you can see and use and um yeah i think that this is the best way to learn and that's how i actually learn all the technologies uh that that i'm using and that helped me yeah become a cto at a startup and then have an internship at amazon as a developer and yeah currently i want to share uh this knowledge with you guys and uh yeah you seem to to enjoy these builds and i'm gonna continue doing them in future so if you're interested in that please consider subscribing to the channel leaving a like and maybe share it with uh people that you think that might be interested in this yeah let's wait a bit for people to join and we're gonna get started real soon so how are you doing guys people who are watching this live where are you coming from where are joining us today yeah you might see that i've got an upgrade i have a new microphone here and i hope that you can hear me well it's a road boat mic that my microphone arm can barely hold because this dude is pretty heavy but yeah i hope that this will improve the sound quality and you're probably gonna hear a bit less my dogs barking in the yard and all the noises around me yeah um hi alexandra hi anas from palestine so guys uh first of all let's have a look um at what we have right now uh what we built during the previous episodes uh to know like uh our starting point for today's episode by the way you can find all the all the code so far on the github link in the description and you can um either start from the first episode which i highly encourage because you will go through all the steps of building the application from setting up a project building the ui interface uh then integrated with a back end and so on but if you're interested in only like the real-time functionalities uh yeah go ahead and clone the project and uh start with me from from this point also guys we have a very awesome community on discord uh and everyone is sharing their knowledge and are sharing their progress with uh with their builds and also like all our interesting information there so make sure to to join the discord channel link as well in the description okay then let's let's have a look at what we have right now so yeah after you clone the project let me close everything um let's just do a yarn start to start the development server of over expo and the expo will open this window from where we can run our application either on an android device or emulator if you have a windows machine or you can choose ios or android if you have a mac os so also you can run it on your own android device by just scanning this code in your expo app if you download it from market and that's like really easy way to to test real time your application even on your personal phone so i'm gonna go and press run on ios simulator the application should work both on android and ios so i've got the coffee i go i've got the water everything is here stay hydrated guys don't forget to drink water uh so yeah here we can see our application uh first of all from the ui side yeah we uh we have all the navigation uh the header with the color of whatsapp uh the tabs uh currently we have implemented only the chat chats tab but we can easily swipe for through our tabs and yeah i encourage you implemented implementing this as well because that can can help you improve your skills far far so from the chats here uh if we go into a chat room then we will see the messages uh with that person this is all connected to a back end and if we go to another one we'll see different messages we can also start a new chat with a new user by going to here the floating button for the new message and here we will see a list of contacts in our application that are registered these are also coming from the back end and if we press we're gonna go to a new chat room and we can start typing there the messages are also working so for example if i go here with mike and say hello we send it we don't see anything but if we go back and go again into the chatroom with mike we will see the message hello here so yeah that's not the best user experience to send a message and then go back and enter again uh and whenever whenever mike will send us a message we'll not be able to see it right here but we're gonna be able to see it again like by going back and refreshing the the messages here so that's what we want to to do today so whenever we send a message whenever we send a message the message will instantly show here and also whenever mike sends us a message it will again appear here so we will have this uh real cool uh interaction with the application and it will update we on uh every new message that is incoming to this chat room yeah that's the plan for today um so uh but before doing that i also want to implement something uh something else and let me show you what i want to implement so if we see here uh for example in a real whatsapp application we see that in the chats where we display the chat rooms besides the name and the avatar that we are displaying we are also displaying the last message from that chatroom and also like when that last message was uh published um we don't have uh yet these functionalities so i want to to start with this one because this one should be a bit easier than subscriptions and real time functionalities and slowly get into in uh into the harder part so are you ready guys how do you hear me how do you feel um yeah not this one we are already in part three real-time functionalities uh let's start by implementing the last message in a chat room uh so how can we do that uh my idea is whenever a user creates a message whenever the user submits a new message into the chat room we will do an update to the chat room itself and store a reference to the last message so basically in the chat room we will have a last message id which will be updated every time someone uh writes a new message that's how we from a chat room we will be able to easily query uh which is the last message who posted that when posted that and so on all these details so to do that first of all we need to update our schema for the api um and yeah let's let's start by doing that so uh all right all right or right or right let's open this one as well so uh our uh schema for our graphql api leaves in uh the amplify folder backend api and then here schema so in uh in this schema we see all the models that we built during the previous live stream and that's a user model uh that's a chatroom user and this uh this model indicates a relationship between a user and a chat room so this is a many-to-many relationship between user and chat rooms because one user can be part of multiple chat rooms for example here i'm part of a lot of chat rooms and as well a chat room can contain multiple user in it so that's uh why we need a many to any relationship and that's why we need an intermediate model between a user model and the chatroom model yeah a chatroom model holds a list of users who is part of this chat room and a list of messages like what are the messages in this chat room the message uh model uh let's not edit anything right now so the the message model um uh yeah has an id uh the content like what message we are sending has a reference to the user id to know who is uh sending this message and also has a reference to a chatroom id to indicate in which chat room this user is um is writing is sending the message so uh we need to have a reference to the last message in our chat room so let's uh let's do that the same way as we attach a message to a chatroom by having a chatroom id and then connecting them uh with a connection the same way we we can do a connection between a chatroom and having a last last message id which will be a type id and should it it shouldn't be required the exclamation mark is if this field is required it shouldn't be required because initially when we create a chatroom there is no last message so it's not required and also last message which will return in our case a message model so from a chat room using this field last message we will be able to query everything from the message for example just by doing a query to the chat room we will be able to get the content the created ad like the user and everything about the last message so we connect this with a message using a connection and the key name will be let's think what will be the key name because i think we need to create a key on the message [Music] will we need that i think that we can use the the by chatroom key let me think because the fields are chatroom id so actually not uh we don't need we don't need a key name because this is a one-to-many relationship and we can just indicate what are the local fields that will um uh that will indicate like the chatroom so the local fields are id and just by that uh i think that we we we will have a connection from from a chatroom to um a last message so if i didn't do any mistakes uh that should work so let's try to push these changes to aws so it will do the proper changes on in our cloud for our api for our database and everything so to do that we'll write amplify uh push push me and then just touch me i can do like this as well should i do some asmr videos amplify is pushing it's asking me if i'm sure i'm pretty sure yeah uh yeah joking so yes yes to override all the queries and subscription annotation everything that we have is that everything that we need let's hope so no no no it's not id the local field is last message id come on buddy let's um abort abort please yeah i made a mistake the the local field is uh last master jd because that's how we we will make the connection between a chat room and a message hi uh so vic how are you doing uh yeah this might take a couple of minutes i'm not sure if i can abort and i don't want to risk aborting something and not being able to to continue because i'm pressing ctrl c but it doesn't stop so i think that we will just have to wait a bit until it updates once maybe it will give us an error and then we can run again amplify push with the last message id that we changed here so guys are you following these bills yourself uh how is it going do you have any progress do you need any help yeah there is no not other thing that we can do until we wait that amplify updates everything so hello from india hi waiting waiting hello how are you doing oh with my camera position you might not see the commands that i'm writing right that's not very good if i do uh move to top right yeah here we will be able to see and i should make sure not to edit anything on the end of the screen hello edit so it pushed let's do again because we did a type of air a mistake and let's wait one more minute no changes detected no changes detected um i'm not sure if that's the case but we could check let's do a amplify console api and this will open the aws console for our api we choose graphql there and here and here in the queries let's have it a bit bigger so in the queries uh let's think first of all where is so let's do a mutation to update to update update a chat room update chatroom chatroom and here is update chatroom for the inputs update chatroom for the input we will say id is required like which chatroom we want to update and also um last message id which is the last message in the chat room so we're gonna pop find those ids are real shortly id uh last message id then we're gonna query the last message to see if the relationship between a chatroom and message was created successfully and for the last message id content user id name but before that let's do um only uh query chat rooms and we're gonna run the list not users but list chat rooms and what we're gonna query we're gonna query the id of the chatroom um and messages right yeah messages id it's enough id's enough no messages is all items because it's a list of messages and uh yeah here we can write the id so let's run the first chatroom's query we see the first chat room with no messages no messages no messages no okay here we have a chat room with messages um hopefully we okay we will be able to to find this one so chatroom this one this is the idea of a chatroom and we copy it and put it into the id of update statement and the last message there let's say that this is the last message this is the last message and now we can run this mutation and hopefully it works yeah last message null the last message id was set successfully but the connection didn't create successfully so we will have to we will have to rerun this but it says that no updates let's do a dummy update hopefully it will work amplify push uh okay now it detected all fields provided to a connection must be null null scalar or enum fields non-null all right non-null this means that the last message shouldn't be null but we know that the last message they can be null because if we set it as non-null we will have troubles creating a new chatroom but let's say that the id is not null and we can give it a dummy id when we create a chat room and it will just not find that message with that dummy id that we will give initially so yeah let's try that hopefully we didn't we do not break anything so just to remember that we need to test creating a chatroom so we will see if it still works or it it broke and this will override yes yes my friend please yeah let's wait one more minute until everything is updated in the cloud in uh uh someone is asking how do i get directly a native application ready for production um how do you get the rack native app ready for production um basically you start building it with the mindset of uh being ready for production from the beginning and that means that um you're doing it in an optimal way not just to work because a lot of times like developers say okay yeah it's working but that doesn't mean that that's the most optimal way that it will work so other than that like you just do good manual testing if you don't have automatic tested setup and if when you make sure that everything is tested like yeah start go ahead and then you'll have time fixing the box in production that's the most fun part of it yeah because like when you think about like all the important stuff that should be taken into consideration before production uh that's mostly related to the back end so we're speaking here about security uh about the back and being able to to hold a big amount of traffic like a lo load testing the application the back end uh making sure it's scalable in the first place because yeah like you never know like when the application will hit like millions of users if that's like the intention of application so you should be re not specifically ready but to have a very good plan in mind like okay if that happens like i'm gonna do that if that happens i'm gonna move to that service i'm gonna increase the resources on that um yeah service or that database or stuff like that and yeah i like to to know where are the bottlenecks because yeah maybe your uh your serv server for the api uh is scales pretty well but if you run like the database on a raspberry pi uh then like your bottleneck is the database because vet will not be able to handle all the requests but that's mostly about like the the back end for the for the mobile like make sure that it works don't have any critical issues uh yeah it's optimal and go ahead yeah i'm coming more from a startup environment so in in a startup environment you never wait for the perfect moment to get started so you it's actually better to to to deliver like not perfect application because that means that you can work faster and that means that if something works you will have time to to improve it but if something doesn't you can kill it very fast so if a feature you think that is going to be like the awesome feature of the application but nobody is using and if you spend like one year developing it you will feel um bad deleting that feature but if you put together a prototype like in two weeks of that feature and it doesn't work like okay go ahead and delete that features if it works okay spend like months uh improving it and optimizing it so that's my approach on like production ready um okay so it updated uh let's go back in our let's go back let's go back let's go back where where is it come on um aws console here and let's try again to update our chatroom now we see the last message id and we will also see that the last message in that chatroom is hello the id and it's coming from vadim that means that we have a reference to the last message from a chat room so what we can do with that first of all first of all we should update the chat room for any new messages that meaning that whenever a user sends a message we should update the chatroom and saying that this is the last message so yeah if you send like two messages it will update two times and the last time it will update it to update with the last message so it will always keep track of which message is the last one sorry my voice come on hello from iraq um so let's uh implement that and let's update our chatroom from our application whenever we send a new message so how can we do that uh let's go in our uh let's think where is our message messages going uh we are creating the messages from the components and a new message not new message button but the input box the input box here we have a chat room id here we have a message and here we have a api call to create a new message so first of all we need to uh to store the information that we receive from the api about the newly created message because we will need the id of that message so a new message data will be uh this one so first of all as usual console.log when you message data to see like what that we receive and how we can get the idea out of that so let's do that let's open our debugger let's open our emulator and go into a new message here and write a message send it and i don't see the ios here usually you should see the vlogs of ios here so i'm gonna try to run it once again is it running from another server i don't think so where is the ios come on um yeah i think we also receive a logs in the server itself do we yeah what's going on why i don't see ios here um i'm gonna close the server i'm gonna close the server here and restart it yarn start and starting the expo server here we can close the application and now we can run on ios simulator oh maybe the remote debugger is not um enabled in our application yeah that might be the case but no no we now we see our iphone here so we can select to see only the logs from our application um yeah let's now go ahead and send a message send and here is the response that we receive so we receive data dot create message and we see the id here create message dot id and this is the idea of a newly created message the data.createmessage.id okay [Music] so let's um yeah let's store it here somewhere in let new message id or we can even create a new function to to split up the functionalities and say const update chat room update chat room last message it's a pretty long name but it's self-explanatory so we will receive the message id message id it's going to be a sync because we need asynchronous calls to the back end the type of it will be string so let's instead of console logging let's say um await update chat room message and the message id will be new message data dot data dot create message dot id yeah i hope that's uh that's correct so here we receive a new message id and we need to update the chatroom with that message to update the chatroom we will need to import a new mutation which will be update chatroom yeah it almost knew what i wanted to do so uh yeah let's put uh the call in a try catch because we are doing network requests and we never know what might happen console.log error and here await api api dot graphql um and we send the graphql operation and what operation we send update chatroom uh and it needs uh variables variables will be will have an input and we need to send two variables id of a chat room which we want to update and we i think we have it here chatroom id and we need a last message id id like that if i'm not mistaken and this will be the message id that we receive as parameter to the function so that should update a chatroom with id of this chat room and set the last message to this last message so okay okay okay that's good i'm thinking how to test it right now okay it's refreshed first of all let's have a look if we don't receive any error messages so uh be dated uh i don't see any error messages so i think that it works now let's uh go here in our console and do a query to see if everything ran correctly so we have list chatrooms we don't need messages we need to check the last message which will have id uh content user um id name so let's run the chatrooms query last message new new null we see here yeah this is our chatroom that we just updated so we see uh the last message in this chat room uh the content of the message is updated that's what we wrote and it's coming from the user vadim and that means that we are updating correctly the chatroom with the last message and if we if we go ahead and write a new message uh really let's send it and let's rerun this query scroll a bit again from the dim that the content now is really so it with a new message it updates the last message of that chat room so yeah i see some uh messages in the chat i'll get to back pretty soon when we will have to to wait some updates but now i think we we we should uh move on so yeah i'm gonna get back to you to your questions soon so we update the chatroom for the new messages that's good and also let's um let's make sure that we uh we actually display the last message here because right now i don't think that we do i had that ui design of the last message to be displayed there but i might commented it out because it was not implemented and also not forget to test something yeah let's have a look at at what project uh contact list item no chat list item and this is the chat list item that we are speaking about here like every chat room separately let's see what it has here chatroom last message if chat from last message but it should have let's just console the chatroom message here um console.log chatroom and to see if it has the last message property so update let's go here chatroom items so first one we are receiving their chat room users and that's an array chatroom users yeah we need here besides the user of that chatroom user also that to query the chatroom so let's see where we have that query to be able to adjust because um right now our query is just wearing the users of that chatroom of a chatroom user right chatroom users so uh screens chat room screen chat screen oh queries and here we get user we in this queries we define a custom query and we are not importing it from the generated queries because we need to adjust it in a in a way that we suits us best so um for the chatroom user uh we are querying we are querying the chat room uh and here we need to besides the chat room um in the chat room we are querying only the id and chat from users but we also need to query the last message so let's uh add it here let's make sure where this uh bracket ends it's saving here and add last message and the last message will uh contain um yeah here we can write like what we need to query for from the last message is the id uh content created at but instead of writing everything myself i'm gonna uh see uh in the source graphql queries uh list i'm gonna find the list chat rooms last message yeah here is the information we need hope you can see it so we will need id create that content user id we don't need user id because and we don't need chat room id and also we will not need the created ad will need only the id content of the last message and also we'll need some information about that user uh itself so the user who created the last message will get the idea that user will get the name and that's it because we just need to display yeah the name and the id and the content itself we don't need to display the avatar or anything else so let's save right now and check our updated i already can see it so here we can see that this chatroom uh displays the last message which is really uh displays the date but it doesn't display the user that that created that last message that might be just because we didn't actually render a username so if we go into the chat list item component let's have a look here what we are rendering yeah we're rendering here the last message content um yeah i'm gonna do some spacing so it will fit on the screen so if chatroom okay so besides the content i'm gonna uh append the last message username in front of it so i'm gonna wrap everything inside the template string uh i'm gonna add it as a variable here in the string and before that we will display the chatroom dot last message dot user dot name right then a space then the message save and here we see vadim is writing something we can even put here double dots yeah we see here the vadim is writing something and here we see the date of the last message yeah that's pretty good so if we go here and say uh possible handle hello did it create hmm have some errors you know there are some errors errors errors errors first of all where i'm consoled console logging this one i'm gonna delete it because we don't need it anymore save and let's go into one chat room and look i cannot return null for non-nullable type id for chatroom uh last message id um okay that's an issue that i was speaking about because chatrooms this chatroom doesn't have a last message id and it cannot return a null value for non-nullable field because we said that this field is required that's what amplifier was asking us to do so let's see what how can we fix it fast in the query screens dot queries yeah i think there is no other way than just creating a dummy id when we create a chat room so um our old chat rooms will not we will not be able to open them but let's update uh the way we create new chat rooms and let's add a dummy id and see if that works if it doesn't complain so contact list item and this is the contact list here so that's when we create a chatroom when we press on a contact list so for creating a chatroom new chatroom here let's say last message id is going to be we probably need at least to have that amount of digits but we're going to change it to something something different so let's change some digits here so let's save and see if we can still create chat rooms let's go with lucas here and error lucas a null variable input contains a field name last message oh typo last message id with capital d save uh lucas come on okay that means that we should have a new chatroom here with lucas i'm just gonna reopen it to update the the list so where is the last one oh god i don't know where is it should i just delete all of them yeah let's not confuse anything anyone let's just delete all the old chat rooms so list chat rooms i'm gonna get only by these of the chat rooms so let's chat rooms let's run it and let's add a mutation mutation delete chat room uh delete chat room and the input will be id and the id that we will want to remove so we need to return something what delete chatroom what can we query back id okay so let's start from the first one and delete okay that's gonna be interesting are we actually deleting yeah this is a different idea delete chat room chat rooms gonna have to delete a couple of them delete chat rooms delete chat rooms delete it's gonna be fun guys before i finish that i really need to go to the toilet sorry i'm gonna be back like in one minute i am back let's not touch anything because everything can disconnect easily so let's continue our interesting stuff here deleting chatrooms what if i just copy this put it into a notes here i can copy easier uh by this oh god it's so many geez but maybe not all of them i'm part of no there's too many i don't want to do that no no no no we need a different plan guys a board a board um is anyone that i don't have a chat room with i'll create a new user that's the idea i'll create a new user and i'm gonna [Music] i'm gonna start a chatroom with that one that's when you plan so uh let's add a mutation to create a new user notation new user create user and the inputs what inputs does it need input create user uh it needs image uri image image image we can get images from from some chatroom users right uh you items you user image uri chatrooms let no this one i'm not done yet come on uh image uri will be a string but i need that image alright from somewhere and the name chatrooms here we got the image and for the name new user let's run new user created let's go to our application let's go back let's open again do we see the new user yeah we do new user let's start the chat room with him if we go back to the chats let's reopen the application to update with chatrooms chat with new user it's here chat with new user and yeah right now i think i can send messages to it go back new user yeah yeah yeah everything is good uh the only thing is that it doesn't update here right away but we're gonna fix that with subscriptions because yeah if i close it and reopen we should be able to see the last message in our view here let's go here yeah here vadim says hello yeah that's good and we made sure that we can create a new chatroom uh and we we're using a dummy last message id that will redirect to nothing uh but we need it because it's a required field so um yeah that's pretty good how are you doing guys are we still here everyone alive so um mark is saying my current favorite direct native youtuber thank you thanks very much i really appreciate it so what's the plan what's the plan so that's it with last messages uh let's get into the interesting stuff guys graphql subscriptions so first of all let's start with a problem uh let's remind ourselves what was the problem so whenever we uh yeah whenever we type something it doesn't appear here and whenever the new user will write us a message it again doesn't uh it will not update our list automatically so uh to accomplish that we need a way for our backend to send a notification to our application but we'll say hey there is a new message you need to update the ui and in graphql we can accomplish that with the subscriptions so in graphql there are three types of operation first one is queries which uh a client requests data from the server there is a mutation which the client sends data to the server meaning like creating a new item updating a new item and so on and there is the third type of operation with which are subscriptions and subscriptions um will be triggered by annotation so whenever um annotation is run on the server the server will notify all the clients that are subscribed to that uh to that event so suppose that we have for example a web application that is running our um that is connected to the server a mobile application and uh it can be like multiple like tens of thousands of mobile application uh each client will subscribe to the graphql server uh two in this case to a new note event uh and when the subscription is done uh behind the scenes graphql keeps a websocket connection with a client uh so after that someone for example in this case this web application creates a new mutation and runs a mutation add node and it uh the mutation goes to the graphql server and the graphql will save them will save a note and will notify everyone who is subscribed to new note events uh saying that hey there is a new note maybe you should update the ui and it accomplished that yeah as i said uh because it keeps a uh um websocket connection with all the clients so yeah here we can have like uh a lot of mobile applications connected and subscribe to new events and whenever a new event fires then all the clients will be notified about that event so in our case we would like to subscribe to the new message mutation so whenever a new message arrives we would like to receive a notification about that because uh we want to update the ui of that message so we're gonna uh do write that hopefully that's that's clear about graphql subscriptions uh there is like a lot of information on the internet to dive deeper i cannot get into a lot of details in this live stream because we got a build so yeah that's shortly about graphql subscriptions by the way i didn't work with graphql subscription in my uh production builds so not in my startup application or other production application that i'm working on and this is actually a good way for me to to get started and have some hands-down experience with subscriptions because yeah i know i knew about subscription from from a long time but i didn't have like the necessity to to implement them so that's a good um reason to to do that let's learn together guys so if i'm googling a lot in the next like half an hour or an hour like uh bear with me but i um yeah i think that it's going to be pretty straight forward because they're pretty easy so our plan is we need to subscribe to new messages and yeah we need to create a subscription to new messages and whenever a message will update we will update our ui luck luckily enough amplify i'll close everything luckily amplify generates all the subscriptions the same way as it generates like queries and mutations so if we go into the source graphql we will see here subscriptions dot yes and here is all the subscription that graphql generated and they look pretty similar to the queries and mutation basically we we have like a subscription web subscription will return as an object for example create new user this will return a user so uh here we have all the fields about the about the user his name his image his status everything that that is required however we will need like on message message somewhere message created no on message message message come on message where is message oh one create on create message this one so we will need this subscription and this subscription will be triggered every time a new message is created that's what we need so where we are we're gonna uh subscribe to this oncreate message we're gonna subscribe we're gonna start simple so whenever we open a chat room for example we are in this chat room we will create a subscription to all the messages uh for this chat room so uh yeah we're gonna for now we're gonna work with only the chatroom uh screen to keep it simple after that we can uh yeah take this concept and apply it in other screens and everywhere we see fit so let's open our chat screen one second yeah let's open our chat screen and have a look here what we have so we have a unnecessary console log here that i guess we don't need let's save um okay we have a use effect that fetches novi patches chatrooms or fetch chat room uh get user yeah yeah no no no i'm in the wrong spot not chat screen but chat room screen yep hello welcome how is it going uh okay so chat room screen this is the screen that we're talking about a chat with a person so first of all we have like this use effect that fetch messages we have a use effect that gets the user id uh i will um collapse that because we don't need that at the moment and we're gonna create a new use effect uh that will run the first time our chat room uh opens when the component mounts and in that situation we're gonna subscribe and when the chatroom uh disconnects like when we go back we're gonna unsubscribe so to do that let's uh create this cha uh chatroom um and let's import our subscriptions so i'm gonna copy paste this one because i'm too lazy to type and here i'm gonna replace two subscriptions and one create create message come on come on with the fat fingers uh yeah we get this one so yeah right now um yeah the subscription uh is the same as our uh query so we do um but yeah we're gonna receive a subscription back subscription is equal to api and uh this is uh synchronous so we don't need a weight api graphql but just graphql graphql because if we hover over this one we see that it returns either a promise with a graphql object in case of a mutation or in case of a query and this promise uh we need to await or it returns an observable object without a promise so that's what is going to return in our case right now so our uh again graphql operation and our graphql operation will be on create message um yeah and that's it i think we don't even need to so much space and advanced because this api graphql will return an observable we can subscribe to this observable so let's do a dot subscribe and the subscribe function will receive a method with a next parameter and this next is the function that is going to be called every time a new message is uh received so we're gonna receive a data here and yeah let's uh first of all console.log data but that's that's a lot of data you will see in a moment so let's console.log data and we'll see uh okay this is how we subscribe and we need to unsubscribe um every time that we leave this screen so to do that we will return a function to the usquare use effect we will return a function and this function is going to be called every time the component unmounts so when the component unmounts we need to run uh subscription dot on subscribe yeah returning a function to a use effect this function will be called every time the component unmounts so we can unsubscribe in that case uh hopefully that's all we need at the moment so so let's let's open our console and let's try to send some messages and we'll see what we receive and i would like to send messages from the new user in this chat room so i'm gonna do a query on the chat rooms items chatroom user let's do user name and chatroom i d i'm gonna i want to find the id and the user id from um from this chatroom where i'm chatting with a new user we will need that so let's run our where did it disappear now where did it disappear okay we can write it again uh query uh get shot rooms so list chat rooms items uh and in the chatrooms chatroom users items user name that's how we will see them the the usernames and the id of the chatroom so let's get the chatrooms here i'm speaking with if mike with lucas mike with mike daniel with mike mike with my dim lukas alexandra come on new user i'm gonna do a search new user come on oh here new user oh god i need the id of that new user here yeah we have idea of a new user and we have a idea of a chat room that's good so let's create a query uh to create a message that is coming from the new user in our chat room so create message mutation not query but mutation right create a message create message input the input will be uh chatroom id and a user id for the chat room id this is the chat room id for the user will take the id of a new user here and we're gonna say yeah id content oh yeah and also the content content hey yeah let's create the message duplicate operation uh name create message i think we already have this one create message yeah here i'm just gonna delete this query create message yeah it's sent so let's check our build and yeah here we can see that's what i was speaking about this is the response for the subscription so the good thing is that uh we are receiving a notification but it's a lot of data so uh yeah looking for the documentation i found like where exactly is that data so it's somewhere in data dot data dot value value dot data dot one create uh yeah just like that and we're gonna see just a little bit less data there let's again create a new clean our logs and create a new message and here we see our object oncreatemessage however we see null and oh boy i spend a lot of time understanding why it's null and yeah sometimes a aws amplified documentation is not the best and in this case i spent like around two hours understanding why on create mess we receive a notification but we don't receive a date about that message like which message was created so i found i found out in some github issues that the thing that we are querying here uh when we create a message for example id content and so on the thing that we are querying back when we create a message should be the same thing as our subscription fields so our subscription fields is this oncreate message returns id created ad and all the good stuff so i'm gonna copy everything from here so if you have the same issue guys just copy the all the fields from the oncreate message uh subscription and let's go back here and paste them inside here let's run again create message yeah we will see all the fields that we queried back and when we go back here uh we don't see null field but we actually see one create message which is which is an object it has like uh created ad id it has a last message and yeah all the good stuff that we need so that's good that we receive a notification so let's go in our chatroom screen and we'll say const new message will be equal to uh data.value.data. on create message and this is going to be our new message and um yeah one more thing uh we receive this notification about a new message when any message is created like even uh in a in a different room so for any message that will be created in our backend we will receive this notification and it's our responsibility right now to check uh if a message belongs to our room then we will try to do something with it if it's not related to our room then we can just skip so let's do a if statement if new message dot uh chatroom id yeah it has you see new message has a chat room id um if chatroom id is different then the the actual chatrooms which we keep in route params id if it's different than this one then let's uh return let's stop the execution because okay this is not a message that we are interested in it's probably a new message in a different chat room however if they are equal we need to update our state and display the new message that was created so let's call the set messages and set messages will receive an array so uh the messages we will need to append the new messages to the existing messages that are already in the state so to do that we're gonna say like okay the first one will be the new message that we received and after that will be all the messages that we we already have there so messages right messages message message yeah let's save and let's hope that it will work so if we write a message the message is posted and we receive an update with the message and it's set in the state now if new user answers us something back new user i'm not touching the application right now at all so if new user says yeah create chatroom message hopefully we will be uh token has expired uh token has expired that means that i'll probably have to log out and log back in and here we choose the app client web and we insert the credentials that we register the user with so when we registered a user in our application that's what we're gonna set here so let's create a message again it created and will you receive anything um maybe our check is not good so uh let's console.log here um message is in another room new user new user let's try to send a new great message message is in another room um yeah maybe i need uh yeah the check is not good so let's just console.log the new message chatroom just to be sure that their type is not different so maybe we need to do like two string before comparing them so and then our console log to the route programs id yeah i think we need to just convert them to string and they will be equal so let's go here let's run another message and here message is in another room and it displayed only only one here two separate ids um oh i think i know because i have two chat two rooms with a new user and this is probably the other one create message again in another room um let's console log the the room id to be sure at the beginning to be sure that we are actually sending the the message to the right room so let's open our debugger close this one and let's open again the chatroom uh and here is the idea of this chat room so let's make sure that it's the same one as we are creating messages too oh god this is so small i don't have enough space chatroom i create message chatroom id let's replace it with this chatroom id save and run create message hey we receive a message however it deleted all our messages how cool is that and if we create a new one oh i think i know after we uh logged out and logged it back in our create message mutation updated so actually this is not our user's id this is my id let's go back and come on vadim um list users let's list users and find the id of new user here we go and let's make sure that this is the id here no it's not this is actually my id i don't know why it updated so if we create the message right now yeah we see that the message is coming from the new user however i don't know why it deletes all the messages that they were previously so let's have a look here um set messages new message and then we destructure the messages why are why are you doing that can you explain let's delete this once and let's console.log messages.length to see how many messages we already have in state okay yeah there you go so if we create a new message it's only one message in state how come why is that happening why the messages in state has a length of one when because initially displays them pretty good so let's just console log messages in state messages dot length yeah messages in state nine and when we create a message becomes two that's weird am i doing something wrong probably uh a good solution that we always should try close and reopen you will see them but however messages 10 messages in state that's good uh create message and it deletes everything where are the messages so so so so use effect i'm thinking about the scope messages let's just create a separate function like add message to state a message and it will and it will send the messages from here set messages message and messages and from here let's just call that function add messages to state new message save and in this case if we create a new one no god message messages what am i doing wrong i think i tested that before and it was working actually good didn't have vc flight can be that be a problem like why create message no no no no i feel that the scope of a subscription is is lost is different hmm why that happens am i doing a typo somewhere if i just set messages to messages but now we we see that the length of the messages is um is free in this case message somebody can get a that's a little bit of problem you know what i'm gonna try i'm gonna try um what i'm gonna try i don't even know what i'm gonna try new message message any ideas guys let's commit everything and i'm gonna try the the version that i was doing before uh beforehand while i was prepping so let's do a git add git commit subscription work in progress and you check out this one and here let's go to the new user hello all the same the same yeah that means that we can go back to our main branch and try to debug it there so why messages here are different from the state when are they updated are we somehow recalled here set because only here we are calling the set messages set messages uh yeah here yeah only here let's do console log patch messages let's save receive our consoles fetch messages called only once that's true and when we call this one create message now it appear is that magic bye create message hello what what happened there who can explain we did we just added a console log and it started working yeah but it oh you seen it's very weird yeah and we subscribe the the messages are kept like pretty weirdly in the state uh let's have a look like react native use state in a subscribe something like that in observable no no no no that's something different maybe it's a problem with like observables and yes you state we are calling set value set state not working we are using a custom observable yeah that seems um an interesting problem that i would have to debug a bit later the the good thing is that we are receiving this uh subscription subscription updates uh and every time a new user writes uh writes a message we receive this update uh however yeah however when we cannot access the state properly so yeah uh i think that uh in this live stream we're gonna move uh move on uh and i'm gonna come with some updates for you guys how we can uh fix this uh using the state inside the observables uh right now i don't know like maybe we can refresh them all the messages yeah that would be one um that would be one solution but that's not the most elegant one because like yeah we can take out these fetch messages uh yeah from here and say like yeah um whenever we receive a new message and this message is for us we're gonna refresh all the messages and that i guess would work fetch messages let's save and that would work let's let's check if that would work create a new message yeah we see that it adds properly we create a new one it adds again um let's create a new message here working with uh yeah working working but it's not the proper implementation that i wanted to to do because we are doing extra stuff but it's working yeah so if we send a message it's again it's refreshing the messages i don't know why put two times um yeah i think i just entered two times yeah i pressed enter two times so yeah we see that it's working uh there was a bit of an issue with adding the message to the state but yeah i i can fix that later and update you guys how to do it so uh yeah if you manage to fix that uh please let me know that would be interesting uh but currently whenever we receive a new message we're gonna re-fetch all the messages in this chat room and by refreshing all the messages we will definitely see the new message that was inserted by the user so that's actually also working as i said not the as i planned but yeah so um yeah we don't need this one and probably we don't need this add message to the state function yeah let's save and let's uh commit get add git commit uh subscription [Music] kinda working that's uh that's the best commit message it can possibly be kind of working but not as expected how are you doing guys are still here so let's uh check a bit we have the chatroom uh why use expo not using react native cli uh that's pretty simple answer because with expo it's so much easier to get started to create a new project and uh to get started and uh like less setups and i feel that expo is much more beginner friendly and uh whenever you need you fee you'll have like the limitation of expo you can eject and have a bare bone like bare workflow of react native the same way as you would start with react native cli so by choosing xbomb you get the benefits but you don't have limitations because whenever you you you're limited by expo you can with running one command expo eject uh you have a bare react native application and you can use any libraries that you wish so i have advanced work uh high vlad vadim from greetings from argentina hello gabrielle uh you can use all on the same use effect yeah i can use all on the same use effect but i like to to spread the logic into multiple functions uh to have much more cleaner code because yeah here i look like okay this use effect this is effect is responsible for getting my user id this use effect is responsible for fetching messages whenever the component mounts and this use effect manages the subscription if we put everything together it's starting it starts to getting a lot of code harder to maintain and whenever you have like different dependencies that's even harder to to manage and you'll get in into some troubles and all function you can create around use effect and use it in uh yep yep yep so rob hello from india hello so um i think that this is the main part of subscriptions to receiving new messages as some improvements that you can follow along yourself uh would be to subscribe to new messages only in the chat room that we receive we we are part of uh because currently we are receiving all the subscriber notification events for all the messages but we can accomplish to receive subscription events only for the chat rooms that we are part of and also you can subscribe to chat room updates the same way as we subscribe to new messages we can subscribe to a chat room update and when whenever we are in this screen we will subscribe to chatroom updates and we will update the last message whenever it is updated on the server so being on this screen when someone sends you a message the last message will be updated here so that's something for you guys to uh to do it yourself to to practice your uh knowledge and to understand if you actually uh grasp the concept of subscriptions so yeah um if you have any problems let me know in the that would be description awesome and yeah send me an update and uh say that hey i did that the next step that i want to get into is a keyboard avoiding view so this is a problem with keyboard keyboards that are going above your views and this prevents seeing some of your important stuff on the screen so for example let's not speak a lot but actually do here we see that at the bottom of the screen we have the input box for the message and that's cool if we are typing on a pc on an emulator but on a real device you will have a keyboard there so i'm gonna go into io keyboard toggle software keyboard and we can see that by toggling the software keyboard our input message disappeared so this is a very common problem in a lot of application and yeah to solve that we're gonna use a keyboard avoiding view there is a component directly from react native so we will just have to import the keyboard avoiding view from react native and put everything in that we have in this page inside that keyboard avoiding view so let's copy this one and let's open our chatroom screen chatroom screen here so we have our image uh we have flat list and image box yeah i will um put everything in this keyboard avoiding view that we can import from uh react native let's make sure that yeah it's good and let's save and hopefully it works can find variable name styles uh yeah because we actually created them inline styles for this one save will you work okay now it looks okay and let's try to toggle our keyboard come on io keyboard toggle uh our keyboard was toggled and it doesn't actually uh display that one let's have a look why actually we see that the whole like flat list is moving but the input box because i think we set the input box as position absolute and that's why yeah that's the idea we set the position of the input box to absolute so let's change that let's go to our components input box styles and is it actually position absolute for the container container margin right no it's not position absolute it just displayed at the flex and no that's not the case or is it io keyboard come on come on come on come on and somewhere our ui input element disappears maybe here in the chatroom but no we don't have anything if i for testing purposes i put it on top what if we put the keyboard avoiding view platform here oh i didn't import the platform save let's test with this one no it doesn't work so what if we put the keyboard avoiding view on the input itself here input yeah we can even say like let's comment out this view i have extra brackets there now if i open yeah now it works so let's remove it from uh the other one because we will not need it in the whole screen but we need just the input uh to wrap around the keyboard avoiding you let's save and now it opens and we can see it hello that does it need both that's interesting that's something with uh has to do with um uh with a flat list i guess we don't need it here yeah it moves but not exactly how i want maybe i need like more padding uh if ios is padding automatically i just hide position or button padding based on the keyboard height height position and padding i'll just gonna try different uh types behaviors so there is height position and padding uh let's putting is that one i think position position save oh no oh no oh no no no hmm oh is it sean oh god where did you disappear styles with 100 percent where do you disappear messing around until it will work but it will that's when a back-end developer goes into into developing ui offset i don't know 200 what that will do oh that will works yeah i think we just needed some offset 30 100 yeah that's what we want yeah you see right now our uh just by adding the keyboard vertical offset uh is uh this value if i'm not mistaking is the distance between the top of the user screen and the react uh native view um yeah i think it's yeah this amount so if by adding that uh we have a keyboard avoiding view uh and whenever we see the keyboard it doesn't uh hide our text input and we can type and send the messages uh yeah i hope that that also works on android i don't i didn't check it right now um but if it doesn't just play around with uh the behavior um on on their website uh it displays as height for uh android because this is if a platform is ios then it will say that behavior is putting and if not its height but it depends like uh play around maybe it also needs padding and in that case like it will work like uh like that so yeah we have uh implemented like uh fix the bug with a keyboard avoiding view um let's add everything git commit fix uh issue with keyboard okay so what's next um yeah i think that we implemented uh more or less all the important parts of uh real-time chat application uh with um rack native and aws amplify and at this point you you i showed you all the concepts of techniques how you can accomplish features so if you want to continue building this application just uh yeah take what we already have and uh implement the same thing for for the new features uh that being said like if you want to to have um yeah to have uh v screen subscribe to changes so whenever a user sends you a message uh you will have as an example with subscriptions for new messages and you will do that same thing with a subscription for a chatroom update uh you can implement the status page uh to display all users with their statuses uh and yeah much more because all the basic functionalities of this application are done and what's left just uh yeah improving it and and adding it to to your portfolio hopefully and hopefully that will help you get get a job so some improvements ideas because uh i try to keep this live stream relatively short this whatsapp was quite long we had like uh first first and second one was almost four hours and this one is two hours so yeah it's almost 10 hours of content um and yeah that's um that's quite a lot so i would like to to start building new projects for you guys and what you can do next here are some improvement ideas that you can implement for this application if you want to go one step forward because i highly encourage doing that you will learn much more things you will understand if you actually grasp the concept or there is something that uh still needs to to be researched or learned or yeah i don't know so the first thing is pagination uh we didn't implement pagination for uh chats and not for user uh for messages and uh what do i mean by that is for example uh if you're chatting a lot with the users you might have like thousands and tens of thousands of messages so you don't want to query all the messages uh when you open the application with that user because that will take a lot of time and a lot of bandwidth and most of the times that's not necessary however you want to query for example the last 100 messages and that's by the way the default value of the size that amplifier will return it will return the most the at most 100 items so you will return 100 items 100 messages you'll display here however when you scroll up when you scroll up you will gradually load more messages and you will do that with pagination in graphql that's pretty easy and yeah go ahead and research uh amplify pagination and you'll see that uh amplify for each request let me just show you quickly because yeah i think there will be some question but it's very easy so in list users for all the list queries which is like list users list messages everything whenever you have like items uh you also have uh what do you have here token next token and the next token is an id of the next page so let's do list user and if we run the query it will return like a lot a couple of users we by default it will return maximum 100 user so let's say that we want only the first two users um and if we run the query we see that it returned only two users in our items array however it gave us the next token and this token is the idea of the next page and you just take this next token and paste it in the into the variables next token is this one and let's check first one is lucas second one is mike if we run again it will be vadim and then alexandra and again like next page you copy the next token let me yeah paste the next token run again uh new user daniel and you do that until you receive next token as null and when next token is null that means that there are no more pages here we go next token is null the last user is alex so that's that's how you do it here but that's similarly how you would do it in code you just take the next token and you give it to to the next page to the next request as a variable so um yeah it shouldn't be very challenging however it's a new topic and a quite important one uh yeah that's about pagination you can paginate messages you can paginate the chat rooms uh you can paginate users contacts and so on the next one adding people to chat rooms uh in order to create groups of users uh and this is actually also not very hard to implement uh because by default uh we designed our application to support multiple users in our chat in our chat rooms because we have a many many-to-many relationship we don't have just a chat room contains user one and user two because if we have done that from the beginning it's gonna be it would be hard to adjust it to support multiple users but we said that a chat room contains a list of uh of users and in that list currently we added only two users but you can add like multiple users so you just need um to implement a pop-up menu uh here that will open when you press these three dots and a button like add user and that add user will redirect to a separate page that will look something like uh like this where you will select the user that we you want to add and when you press on that user you will run the query that we yeah that we are running here like um yeah add user to chat room you will have that user id you will have the chat room id you run the query and boom that user in is in our uh chatroom and he will see the chatroom in here he'll be able to send messages there and everything will work yeah magically hopefully uh next one updating user data so uh you can implement a page i don't know somewhere like also maybe here with settings or as a separate tab where the user will be able to update his name his status and so on the next one which is pretty cool would be to implement emojis so you would be able to to see a list of emojis you'll be able to send them and so on and from something more technical that's like extra challenge let's put it like this extra challenge uh is sending voice messages and sending media files uh sending media files uh means that we we're gonna send like images and for that we're gonna connect an amplify service called storage which work with s-free storage from aws and whenever we select a image we're going to store that image into s3 get the url and put that url into our message into our message into the database so besides the content we'll have like a image uri for example and we'll check like if image uri is in back end we'll display an image instead of a content if you need an example i implemented storage with aws amplify in twitter so in twitter uh clone we are able to post tweets with images and the approach is pretty similar to what you would need here you will need to update some things and to adjust it to work with this one but yeah you you have an example in the twitter clone you can check it uh on my channel and sending voice messages uh yeah this is yeah again like a bit more technical and here you would use a library to record the voice and when you record uh to record the voice you can use the same library that i was using for spotify which is i'm not mistaking expo media av for videos and audios and that library allows you to record a message to record the voice message and after you record that voice message the things goes similar to the media files you send that voice message to us free to store it in uh to store it when you get back a url and you attach that url uh to the message when you send to the database yeah i think that would be very nice if you can implement that but yeah if you have any questions ask them in discord i might try to i will try to to help you guys and um yeah what i can say how how um how are you doing guys how did you feel i think that's the end of our uh whatsapp clone said said music said noises but don't uh yeah don't be sad because new bills are coming next week uh yeah i have a lot of ideas and also like all of you guys are sending me application ideas that [Music] i'm taking into consideration and yeah uh next week we're gonna start a new react native build uh from scratch and if you didn't catch this one uh start with the next one so yeah thanks again for watching everyone don't forget to subscribe to the channel if you enjoyed and if you found this valuable uh leave a like share it with one friend that might be interested in this um yeah that's it and as usual guys stay hydrated write clean code take care bye bye

Channel: notJust․dev

Views: 17,381

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: Uq_vkUFnrss

Length: 129min 50sec (7790 seconds)

Published: Sat Oct 24 2020