🔴 Build the Uber Driver App in React Native & AWS Amplify (Tutorial for Beginners) Part [5]

hello node.js developers welcome to a new live stream of the uber clone series i'm happy to see everyone here because yeah today we've come a long way and we are approaching the end of the uber series where we have built uh a lot of things a lot of new things we have learned all together uh starting from the uh user side up uh setting up everything in the ui managing the maps and so on then we want to with a back end after that we implemented the driver side up and today our goal is to connect everything together with the same back end with the same amplifier back end and sync the user up with driver app to have the same data and to work with the same data also to have like real time updates uh for example when a user creates an order then the driver will automatically get the order he'll be able to accept reject this order and if he accepts then uh we will start tracking his position send it to the to the server here in the amplify and then uh subscribing to new updates to live updates from the user side application and displaying the position of a car on the map in real time so i think that uh this is really uh nice features uh can you confirm that you can hear me well when yeah let me know where where are you joining me from today all right did you was i live from the beginning uh did you hear me or was there any issues yeah i'm not sure if everything is all right but let's hope so if anyone can confirm that we are live then we can move on yes let's go so for um guys hi hi everyone in richard uh glad to see you here uh okay where are we so for everyone who is new to this live stream or who is watching this uh video after the live stream is published uh hello my name is vadim i'm glad to see you i'm a full stack developer for over seven years at the moment i'm the cto at vitanium uh yeah uh i also worked at amazon and i'm passionate about coding building impactful startups sharing this uh experience uh and yeah my everything that i know so far with you guys here on youtube so if you are interested in that please consider subscribing to my channel because i'm gonna i have a lot of plans in future to build a lot of new uh clones uh and not only we we have pretty interesting ideas coming on guys which i'm excited about okay so um for this build uh what do you need if you want to follow along you will need the react native environment setup you will need a google developer account and you will need the asset bundle that includes everything that will use for example dummy data images icons pdf presentation so if you want to get the updated pdf presentation with the new slides download it download the assets again and there you'll find the updated pdf uh this is the fifth this is the fifth video yeah that's uh in this series uh this longest series on this channel so far because we went into more details implemented more features uh there is actually two applications not one a driver application and a user application so uh if you haven't follow along previous videos i highly suggest you start from the beginning where we implement the user application we implement the maps uh in the third video we implement the backend uh of the user application and in the third in the fourth video we implement the driver side ui so that was the previous video however if you didn't follow along or you just want to start from here then it's also possible so what you have to do is clone the repository that you can find here on my profile uber clone and specifically clone the branch with the name part four and that is the branch with a code that we finished during the previous part so the main branch will probably have the updated code and it will change in future but the part four will always remain as it is right now so we can start from the same page uh then you will have to create a google developer account follow and enable all the apis that that we will need get this api key because you'll need to put it into the code uh and replace it in the whole project i think now it's even more than five files i think it's i don't know more than five uh then you'll have to install all the libraries and the last step will be uh to initialize and deploy the amplify backend that lives in the user side application so once you do that uh then we are on the same page and we can start working all right so let's have a look here here is our repository so if you clone it you should see it like this we will we have a folder for the driver application and we have a folder for the user application these are two separate react native projects they're completely isolated they're completely separate separated uh they even could be separate repositories but they decided to keep them together because they belong to the same like bigger project so um yeah our user application already has the amplify backend here and today we will uh connect the driver application to the same user application um backend so here on the left we can see some of the things that we have built for the driver application so when you open the application you can put if you're online or offline you can set your activity uh then let me refresh it uh when if there will be new worders in coming you will see a pop-up and if you press on the pop-up you accept the order and here we can see that we are picking up uh the client uh and the map should show the direction to them um to the client uh it doesn't show right now probably uh i forgot to update the api key so uh yeah we're gonna go and update the api key make sure that everything works and then we'll we'll connect this with real data let me put it here so let's have a look at the chat what are people seeing i i see a lot of interesting questions uh but they are not related to the uber clone so if you uh can write me on discord i would be very happy to answer them or i can stay after the advent of uh of this live stream and i can answer some of them um [Music] okay joining from tanzania africa hello love to see you as well guys i'm so happy that uh but you came here we are on the fifa uber episode okay um yeah i see i see the questions if you can uh send these questions uh in discord i will be able to help however if you have some uh questions related to this build uh let me know and i'm gonna i i'll try to stop and answer them um okay the first thing is let's have a look why our maps are not working and the thing that i want to do is to check the api key because i think that as far as i remember i updated it but it doesn't seem so so let's let me open involver screen them the google console and project like the project credentials i think i restricted the api key to my ip and something didn't work what's that this is driver up but why only v screens okay probably is it only this free what's happening here driver home screen yeah that should be it uh let me check my ap and see if i somehow restricted way back key to a wrong app so what's wrong with you come on should be working maybe my position yeah the back end is built with graphql well it's built with amplify but in amplify we use a graphql api so um i'm thinking that maybe the location my location on map is uh where are features location custom location let me try here to put uh look driver upsource screens in the home screen index um 28 yeah it's this come on what's happening oh it appeared probably is too slow or maybe the location was not initializing it only worked now yeah let me try to refresh to make sure that everything is is still working here yeah yeah right now it works and yeah there is a lot of logic behind the states of a worder so for example if you are picking up the client the client and the map shows you the direction to the client or you are actually dropping over client and the map shows the direction to the destination and so on so we implemented a lot of logic here if you didn't follow along the previous build uh yeah this is quite a huge file it's in the home screen yep on decline on accept on direction found yeah okay so nonetheless uh our application is working the driver the driver's side which means that we can we can start configuring amplify in the driver application um yeah the first step is to configure amplify in the driver application uh and the the interesting part about this is that we need to use the same backend as the user application we don't need to create a new backend because we want to share the data between these two applications so if we look here on the where is it yeah yeah if we look here on the right we can see that we will have the same amplify back end and we'll have two separate applications that will communicate communicate with the same backend so in order to do that um i believe amplify has this command amplify pool and this will allow us to uh pull an existing back end in this project so we will be able to uh we are able to pull both uh the actual code of the backend and the metadata and uh when i'm speaking about the actual code of the of the backend and speaking about uh yeah if i go to user up amplify backend and here we have a code for our back and here we have for example our functions here we have our api with a schema and we are able to pull everything that is here in our application however that's not uh recommended uh because if you pull the actual code and the actual backend then and start editing it when we have two sources of truth so for example uh in the back end of a user app you'll add one table in the driver app you'll forget to add that table and then there will be conflicts so it's better to pull only the metadata and the metadata is um where is it our app.exports and this file is built and has only the metadata over of the backend and it knows like with to which backhand i i should connect for example yeah here is the idea of identity pool uh the up sync endpoint yeah it's not just how to communicate with that back end so uh this is the preferred way to pull uh to keep the whole logic the whole backend in one place and involve our application just to pull the metadata so let's uh let's try to do that i'll open the terminal and i'm gonna let me open a new one and i'm gonna go in the driver application folder drive cd driver up and from here i'm gonna do amplify pull and why it takes so much time okay uh do you want to use an aws profile yes we want and we'll choose the same profile that we used for our user application and here uh it asks us which application you're working on and it will give you uh a list of all the application that you have created in amplify so i have a lot of them here but we are interested in the uber clone yes we are uh for the default editor i'm gonna choose none if you're using using visual studio code choose that one uh javascript react native uh default default default and this is the important part do you want to do you plan on modifying this backend and based on this answer it will pull the code and the metadata or only the metadata so we will say no we don't want to modify this backend in the driver application if we will need to modify the backend we'll go into the user application it there push it come back to driver application and pull it back so we're going to go with no we don't plan to modify this back end and that's it our amplify backend is configured here so if we go to driver application we see the same aws export exports in the file and this is the file that tells aws amplify how to connect to our backend what's up with the yellow jumper that's with the brand not just developer this uh this hoodie gives me power and energy okay the first step is done pull the existing back end and let's install the amplify packages in our driver application i'm going to copy them from here come on yarn odd let's install the packages okay yeah the dependencies are installed then we can install the pods and that's only if you're on ios on building for ios hello hi guys how are you doing so for everyone that is just uh connecting i'm gonna give a brief overview um we are building today we are finishing today our uber uh clone series and now we are bill we are connecting the driver application to the back end uh that we created for our user application and we'll implement more interesting features like real-time location syncing with from the driver application to the user application so the user will see in real time where is the driver where is the car on the map so yeah that's that's the plan for today we uh installed this okay that's good next step is to configure uh our driver application for that we're going to open up the js in the driver app folder and here on top we will import amplify oh why you're so slow amplify from amazon aws amplify we're gonna import the aws exports like the config that was generated from this folder aws export and then we're gonna call amplify configure config and that's it and now we can run our application again so that it will include the venue libraries and yeah the it should be the same however now amplify is configured and we are ready to implement the feature that we need next congratulations on competition thank you very much yeah it was a really fun project uh we were in the first in the top 10 uh by the end so yeah i'm very happy with that yeah building an application in 12 hours is not that easy i may ask if there is any notification design in this application uh we will not manage will not have time to implement the push notifications at least not in this video maybe we will do one more for notifications uh but yeah i cannot promise that but yeah i'm thinking of extending my builds that i already have on on the channel with extra features because uh there are a lot of extra features that you can implement and uh but yeah if i'm if i'm gonna go with better out all the bills will be i don't know 10 15 series or even longer so uh i'm thinking how to how how to do it better because there is a lot of uh interesting and cool features that we can implement and that can be very helpful for you and for our application that you are building for example push notifications uh analytics pagination if you have a lot of data filtering sorry yeah filtering and a lot more so i'm thinking how how to do it hello from uh i cannot read that city name unfortunately i've just logged in so i didn't follow the beginning uh yeah we just started um yeah it's already half an hour so yeah we you you can follow along after this video ends because the video will be published on my channel as usual correct me if i'm wrong live location for driver is only supported by premium google maps api right what do you mean by premium google maps api um yeah like you need to you need to enable the payments in in google api in order to have these maps um and you're gonna be charged uh for every request like a couple of i don't know like uh exact amount how much you'll be charged so you should get into that and check for yourself but yeah hey how much does a webstorm cost i have no idea i'm using webstorm from uh from my university because they are providing the the license for it but i'm finishing my university in a couple of months so i think that i'm gonna move to vs code but i'm looking forward to that because i know that a lot of uh our community is using vs code so i think that would be better if i'm gonna also use vs codes so we're gonna be on the same page uh the next step is okay we installed the amplify packages okay the uh amplifier is configured uh let's move on and configure authentication so that if you remember from the previous video when we wanted to configure authentication the first thing that we were doing is to run amplify uh off and that was creating this authentication but in our case we already have our authentication our if i write amplify status not sure if it's with status but yeah we already have our authentication that we created for our user application yeah it's not here i think i have to call amplify status from the user side application yeah but the thing is that we already have this service added it's there we just need to use it uh so let's just with one line of code um [Music] let me just think yep import with uh fan decatur oh that's a mistake yeah i think like this uh and we're gonna import it from aws amplifier react native and just with this line of code our application oh come on our application is supposed to have authentication so let's open it here let's save it didn't do anything amplifier react nato with authentication is not function with authenticator authenticator and now restarting it let's see it come on uh it doesn't show us the authentication but i think that is because i already tested this and it remembered me as uh it remember the token and i am authenticated so i'm just gonna call real quick uh of dot sign uh out let's save yes and let me remove this sign out so right now uh yeah the thing is that i previously tested it and it remembered me as authenticated so now if we go to the application to the driver side application we see the login screen and here we can either create an account from scratch or we can use the same account that we are using for the user side application so i'm gonna use the same account which i think was had a username by dim and i'm gonna sign in and we are in so the next time if i refresh uh the application and if my emulator would like to refresh please yes then we are not gonna see the login screen because yeah it remember us as logged in so we share the same cognito user pool and all the users that we are registered either in the user application or in the driver application they share the same account so they can sign in in the user application then go into the driver application login and so on um in real life probably you would put some restrictions on that i don't know how it happens in the uber uh probably you get an invite or you get accepted you apply somewhere i'm not sure but for simply for yeah the simplicity of reasons we're gonna keep it this way also you can add the different users to different groups so you can create a drivers group incognito and add all the drivers there and give them extra um yeah access to extra services and features and manage their uh yeah manage their access from there um all right the our authentication is configured and we um we are logged in in the application so let's go back in our user application and have a look at the amplify backend schema yeah at our schema let me close this okay we have a user in our back end and we have a car now in the user application every time a user signs up we created a function that automatically creates a user model in our database so whenever we sign up with a new user in cognitoservice we automatically create a new user in the database now the thing is that if that user is a driver we need to create a car as well so we need to assign one car to each user that is joining the driver application so we can do that uh in a bit hacky way so every time the user uh opens the driver application we will check if that user has a car assigned to him and if not we will gonna create a new car for him because that's probably his first time that he is joining the the driver application uh yeah and all the information about the user will leave in a separate table with his email id and so on and all the information about uh his car let's say it like this uh uh things like the position of a car uh the waters of a car and so on the availability of a car we live in this in this type in this in this model okay with that being said let's add a one-to-one relationship between a user and a car uh so we will be able to query them easier and our relationship will depend on the on the id because both uh for a one-to-one relationship will have both uh car id and user id the same representing that they belong to to the same user uh okay for um yeah car the car will be uh yeah a car and it's not um it's not required because uh user will join the user side application will not have any cars so the car will be a connection um and let me think not sure but let's try and just to say that the fields are id do we need a key name by user probably not yeah um but no let let's do it let's do it this way yeah let's do it this way and we'll we'll just have a normal user id here representing who is the user of this car so user id will be a required id user id yeah something like this user id and a user will be a connection fields user id and then we will add also a key to this model and we can take it from here because we are lazy and we don't want to type yeah it's going to be by user and fields on the user id and here when we make the the connection with the car we say that the key name will be by user so it will be car by user yes yeah that's uh that's better uh that's regarding the connection between a user and a car now um before going into that step let's think about what other fields we will need in our database uh and i think i had some notes because we will update our api so in order not to wait two times we're gonna add them the fields right now for example a car should have um a variable that will define his availability for example uh if he's looking for worders or if he's yeah if he's active or not so we can add it here um i don't know probably is active is not the best name but that basically means that this car is looking for worders is on the market so exactly will be a boolean uh and let's let's keep it as not mandatory because if it's null then we can say that it's false we can assume that this false so we have is active on our car what else do we need oh and also on the order um we didn't add any any status for example because we will need this uh the order can be in different um different statuses like they can have different status for example it it's a new worder or it's uh borders in picking up a client and so on so based on these status we will be able to to decide if we want to display to new drivers because if status is not new then it doesn't have um we shouldn't show this order to new drivers because it means that but someone is already picking up a client and also finished and so on so our status will be of type a string string like this all right so let's um i think that's uh that's it for now probably we'll need something else but we'll add it later let's open a new terminal and go in our user side up because we created changes to the back end and our backend lives in the user side application so now we can say amplify push and it will push all the changes to a neural core no such file or directory that's interesting whoa why amplify team uh okay i see the issue is something with a path because in the uber clone it should be user up and then amplify but where uh where is it is it somewhere in the aws exports where is it trying to find this where is this coming from uh let me do a quick search in the whole project like this nothing like this um there was a pulling back an environment very weird no but i should be able to find somehow who is referencing this file maybe not json team provider info come on come on think we moved it around let's do amplify status api update yes and why i don't want to update amplify push is it amplify push yeah i think so no such file or directory amplify pool but i don't think that's a good idea no local changes detected so we don't want to override them amplify in need yeah i'm just messing around hoping that but something will work um and if we try to push now will you work please let's be friends yeah i hope it fixed the problem fetching updates uh and we updated the api yes we did oh come on connection is to a single object but the key name by user was provided which does not reference the default table okay i think we did a mistake there by user user id it has user id why the key name was not saved here did we forget to to add it no but if i remember that we added it by user no by uh by car oh what i am doing yeah it's a bit no no no no no i thought that this is the user model so here fields user id yes by user user id what was there again uh created add is of type id to support uh created add is the type of id order no i don't have why did is create that id should be string but probably that's not a problem connection is to a single object but the key name by user was provided which does not reference the default table so here all right the car is uh connection i think we don't need a key name because we not here why i'm doing these mistakes to the car because we connect to a single car it's not many too many i have i probably have never worked with a one-to-one relationship because usually when i have a one-to-one relationship i put them in the same table but here it makes sense to have a one-to-one relationship between users and cars uh all right update let's try their call schema completed okay this seems to work but we'll see if it actually works we want to update the code yes we want uh andre hello uh ruby on rails programmer here hello i heard so much about ruby on rails but to be honest i think i have never saw a code like written in ruby on rails i don't know how it looks [Music] hey this is really great work sadly can stick around but hope this stream goes well thank you very much so yeah the stream will be published after the live stream it will be published on my channel so you can follow along after that vadim you are really amazing only person on youtube who really uh teaching on project based thank you very much uh i really appreciate it uh and yeah i think that project-based learning is uh is the best uh and easiest way uh to learn and also it's a lot of fun to learn this way because you're not spending time i don't know reading books or reading documentation but you're actually building stuff so time pass is very fast when when you're into work and you you're trying to achieve a specific goal you're trying to implement a specific feature and you don't even realize how you learn new things how you start googling uh like how to do that how to connect that with this and this is how uh how how is the best way to learn in my opinion hey science and space for kids hello bro are you using linux no i'm not using linux i'm on a mac os uh are you reading comments yes i am hello all right i think that while this is updating in the back end we we can actually start working on the feature that we we were working on so whenever we open the driver application we want to create a new car object in the database if one already doesn't exist if one already doesn't exist okay let's let's close everything close all tabs and let's open driver up.js and here we'll need uh yeah we'll need authentication and we will also need uh the ap api and what else we will need we will probably need also a graphql operation from here like this uh for the graphql operation i'm gonna grab from the user application from the where is it source right graphql and from queries i will grab the get car query here it is here we see export cost get car let's copy this query uh because we will need it it's in user application this query and it is auto generated but we will need it here in our driver app so in the source um yeah i'm going to create a directory probably a graph ql and here i'm going to create a file queries dot js and paste in this information but we actually don't need that many um fields we need only to see if the car with this id exist or not so probably we will uh delete everything except the id so the query will uh will be a bit more optimal because that's the idea of a graphql you query only what you actually need get car okay let's keep it like this or or better let's say get car id because in future maybe we will need an actual query that will get cars uh let's import this get car here in our app.js import get car id get car id from source uh graphql queries like this uh and yeah probably that's it what else from react we will need the use effect use effect oh alexander has joined the channel hello alexandra how are you doing so all our logic should happen whenever we open the application so to do that we need to declare a use effect pass here a function that will that is going to be called and if we pass an empty array as a second argument then this function will be called only the first time when the application runs renders here let's declare a new function like um update user car and this is going to be an asynchronous function because we're going to work with that api there and yeah and let's call it right away yeah we need to do that like to declare a function and then call it because we cannot have a synchronous code directly here so we cannot say uh await something because our function is not a thing it's not a sync and it cannot be a sync so that's the life hack and here we will need to follow a couple of steps uh first one is get authenticated user then check if the user has already a car and if not if not create a new car for the user okay let's start with the first step to get a current authenticated user authenticated user is equal to off dot current authenticated user and we can also say bypass cache through so we make sure that it's not taken from cache but it's actually from it it does a request what what can we check let's fail first that's uh my approach to hill first fail early so if there is no authenticated user when we return return from this function we don't do anything uh then here yeah we got the authenticated user now we should check if the user has already uh a car to do that we're gonna uh do a query with a get car id to see if we receive sorry guys to see if we receive anything from from the database [Music] so here we'll have const car data is equal to a weight api dot graphql uh in in the graphql we send a graphql operation graphql operation and the operation will be get car id and the id of a car the idea of a car will be will be the idea of a user will be the idea of an authenticated user so let's yeah the id will be authenticated user dot attributes three views dot sub and this is the id of that user yeah i think that's how how it should be done um let's first of all console log the car data initially it should be null and then we will check it here if it's no we will create this car for the user alright let's [Music] restart is it somewhere here it should consult something yeah here we see data data get car is null so let's check for this uh data get car and let's check if it's null uh let's do it like this let's again fail fail first if car data dot data dot get car is not null so we leave it like this if if it's true we can even put double negation sign if it's not null we can say console log you user already has a car assigned if it's not null however if it's not we need to uh to create this new car for the user let's do it here uh okay let's define when the new car comes new car is equal to oh whoa whoa uh for the uh yeah the car will need an id uh i can open them where is it the amplifi the the schema so we can see what fields do we need to send to the car we need an id we need a type 2 id we will need a type related logic to the heading is not required is active is not required user id is required so here and user id for our id and user id we will pass this authenticate the the user id that we have here so they'll have the same id and we will be able to easily query them for the type here you can continue this and create this feature that the user will be able to select his type however i think i'm gonna hard code this type i don't know what types do we have let me just check what do we expect their screen component uber type row index yeah uber x probably right let's hope but it's this one where is it okay the type is uberwax okay we created the new car object uh and let's add it to our database to to call this api uh yeah the api graphql graphql operation and here we need uh we need a mutation and we need the mutation to that will create and submit this car if we go to [Music] back to our user application because that's where we have all these queries graphql mutations here we see create user no that's not what we actually need update user delete user create car yeah this is the one that we actually need create car oh my god so many fields yeah we'll clean it a bit so it's going to be much uh yeah the query will be smaller so let's go back to the driver application source graphql and here uh besides the queries we'll need to add a new file mutations dot js and add this mutation and let's let's what create car yeah but uh it's a lot of information there we need we don't need to query the worders of that car uh okay we can query the user id we don't need the actual user created and yeah let's leave it like this only the information about the car all information about the car create car so let's go back to our driver app dot uh yeah app.js and here in graphql operation we will need to send that mutation but first let's import it so the same way as we imported here the query we will import the mutation create car the mutation will be create car and the variables will be what are the variables what does it expect oh it expects an input and that input will be the new car let's save and see if everything works as expected i'm going to open them debugger here and wait for some logs to to pop up come on [Music] user already has a car register this means [Music] but why are you trying to register a car if user will oh because we can so log but we don't return so yeah don't forget to return here let's save it was just saying that um the user with the same id is already a conditional check fail exception like the user with this id is already in the database yeah but the thing is that now it created once the user it created once the car and the next time when we open it it should say that the user user already has a car register assigned and this this error is coming from analytics plugin that we didn't set up so don't worry about that all right so now uh now we have this uh login setup and whenever the user logins in the driver application we automatically create a new car for him so the next time when for example another user goes into the user application he will see that car on the map okay let's uh i think that it's a good idea to uh to commit everything um i'm gonna go into the root directory and do get add git commit okay the first step is done how are you doing guys how did you find that yeah i see a lot of people in the chat um anything interesting happen happened let's smash the like button please yeah thank you very much for uh reminding everyone to destroy this the like button thanks thanks hello adam what is the best tool to maintain on device data persistent indirect native project it really depends on like what library do you use for data management for example in at my startup we are using apollo apollo client and there is a library to persist the data from apollo to the device uh if we are speaking about amplify amplify has this service data store amplify data store and this service gives you the ability to [Music] to build offline first application so your backend data like your api data like remote data will be in sync with a local database so you can check this out if you are building with with amplify if you're using uh redux i heard i know that there are solutions from that as well yeah check it out do we need some knowledge about aws to know about the code um yeah some knowledge about aws will help you with amplify however it's not required amplify tries to make it easier and easier to get started and to to implement the backend features for and especially targets the front-end developers uh yeah it makes it easier however it's still uh a bit more technical than let's say firebase uh but yeah they're improving a lot so it gets easier and easier uh what's anything interesting okay all right let's uh let's continue with our build so i see that a lot of people uh are joining and are new to to this live stream uh where i am i'm somewhere here hello guys thank you for joining uh let me real quickly tell you what we are doing on this live stream so on this live stream we are building um vulgar clone uh in react native naws amplify and this is the last episode in our series uh and today we're connecting everything to the same back-end exchanging data between two different applications between a user application and a driver application we will have a real-time sharing of the location between the driver and the user and a lot of more interesting stuff uh yeah on this if you're new to this uh to this channel here uh i'm doing project based learning and we are cloning uh popular application that you probably use every day like instagram twitter whatsapp what else airbnb uber and so on we're cloning them in rec native and amplify with educational purposes so if you enjoyed this please consider subscribing to the channel because there will be a lot of more builds coming up so same being the fox that being said let's move on with the next feature someone is asking where to start i would recommend you to start with a tesla clone check it out on my channel it's a very beginner friendly application it's less than two hours and in less than two hours you will build your first react native application and it's it has a lot of cool features there it's only front-end and it's very good to to get started moving on configure authentication was done update available availability of a car so in the home screen what does that mean let's decline this order in the home screen here we display that you are offline this right now i will close all the tabs and show you some code so this is our home screen and if we scroll on the top is online is just a local state in this component so our goal is to have this is online yeah probably is online uh would have made more sense to call it in our graphql api but we called it something else we called it is active uh okay get user or get car which one get car let's let's get the car okay we will need to run this query to get the details of the car from the backend and instead of working with a local state variable we will work with the we will fetch the data from the back end and use this is active flag from the car so to display if you're offline or not all right let's do it like this i'm gonna copy the get car query from our user app i'm gonna move in the home screen and i'm gonna put it here like very close to or no let let's uh let's put it in our graphql queries to keep them all in the same place um get car let's think of what we will need we will definitely not need orders because these are the words that the user already had we will need new new orders we need the user yeah we might need the user but we will definitely not need the car of a user okay okay let's keep it like this it's probably we can still delete some of the fields that we don't need from here we'll but yeah let's let's start from here get car so in the home screen index yeah i think we can remove them this original destination because we don't need them but let's keep them this is reminds us of where we started from all right let's import the libraries that we will need we will need api and graphql rfql operation and also let's add it at the beginning authentication service from aws amplify and from the queries we will import the get car from graphql graphql queries from here what would do we need to do here okay whenever the home screen uh starts like whenever it renders the first time we need to fetch the car data from the from the back end for that we are going to have a use effect and i'm going to create this function but i'm going to create it outside because maybe we'll need it to call it from somewhere else as well so we'll have a function called fetch car yeah fetch car sync and here we're gonna try to fetch this car so error yeah like that so in order to fetch the car we need to know the user id that we want to fetch the car for so to do that we're going to say const user data is equal to a weight authentication get current current come on give me good recommendations autocomplete uh yeah current authenticator user then const car data is equal to the api.graphql we want to do this graphql operation and get the information about the car and graphql yeah operation operation and the operation will be get car get car and the variables will be uh i think id is going to be user data dot attributes attribute attributes dot not id but sub like that so let's console log first of all we use car data to see what we we get here and let's not forget to call this patch car in our use effect and also let's not forget to add them uh dependencies array because if we don't this fetch car will be called every time the component updates so that's not very optimal unexpected token unexpected token we're here yeah we don't need we need that here let's save it's there and data data get car uh id is active is null that's okay user is null it doesn't [Music] it doesn't properly do the connection between the user and and the car now for us it doesn't really matter because we can query directly the car so i think we will not even need this uh connection between the user i mean it's there like logically it's there but we will not need to query the connection but that's okay if that will be a problem i'm gonna tell you uh yeah we can save all this information about the car in state and then use this is active to decide if a car is active or not um my position okay car const is online i'm gonna add a new state car and set car right a new state initially is gonna be null we set the car with the things that we receive here set car car data dot data dot get car yep like this and what do we need to do next [Music] render bottom title yeah right now this is online we should replace the iso line to the car dot is active so let's have a look where we use this is online on go press here on go press we will update the car okay that's not what we will need here where else oh here so if is online we show your online if not you're offline so here we'll say if car dot is active then we will show your online let's save let's decline this order and it says you're offline [Music] okay let's assume that it works and move on with updating the car [Music] is online where okay set is online we are calling whenever we press on this go button because right now it will not display anything here oh one more place one more place we display that text of a button go over and based on if the user is online or not where is that button yeah here is online if he's online we display and otherwise we display go so we really replace it with car is active so if car is active we will display and otherwise go let's now whenever we press on the button we should update the is active field of a car so here on go press update the car and set it to active or yeah like inverse active hmm let's import the update mutation of a car and we can do that by going to our user application source graphql mutations and here we have a update car let's copy this update car oh my god it's when i see this long queries okay we have a mutation update car it will receive the input and back we want only this information we don't want more so i'm going to delete everything from inside make sure that you delete you don't delete extra uh brackets so it seems that i didn't and let's paste in the the data that we want to receive back after the update is complete okay update car let's save and let's go back to our uh driver no where yeah to our home here where we were we were working let's import the uh from rotation the update car update car like this and here we'll say try catch me if you can uh try okay you know what but no it's okay let's get again the user data the function should be a sync and const updated car data is equal to a weight api graphql graphql operation and here we send the mutation update car and for the input uh input or input i think we need uh to provide by d which is mandatory so it will know um what car to update and also we we need to provide the fields that we want to to change so i'm gonna declare it here const input id is user data dot attributes dot sub dot sub and is equal here and there is active we're gonna do the same as we did here we just invert the current user data dot is active uh and after that let's console log the updated car yeah let's hope that it works and let's check it okay let's decline this and let's press go and updated car is active is true so now if you see it didn't update anything like the button is still the same the text is still the same however if i refresh the application i expect to see the the text where you're online because in the database it's already active so not here so let's refresh come on and see that's true decline you're online and the button is end uh yeah that works but we want to update it right away so we see that we receive the same data after updating the car and i think it's a great way to set it back to state and uh update it with the new values so updated car and data.data.updatecar right that's how it was here update car yes let's save and now if we press end it doesn't do anything but if we refresh and do it again set car yes should be decline order let's press on the end what's going on there and end something interesting is happening console log update car is active is true and why you're not updating his activist true is active straw what we call sad car what that's interesting [Music] sad car you're online that means it's true oh why why user data is active come on video no it's car dot is active and now if i press end we are offline if i press back we are online however this time it's not only locally in our states component but it's also in the database so the user can actually query only the the active uh drivers that are on the map uh i think that's it with this tab update availability of a car query the availability update one driver changes it yeah i think that's uh that's it let's check if where else do we use this is online so we can safely delete it on go press no we will we delete this one anything else yeah which means that set is online yeah now they are with gray and we can safely remove them because we will use the car dot is active okay let's uh let's commit everything get add and git commit uh car f say let availability what a hard word to write okay how are you guys are you following along uh i'm just wondering uh from people in the chat how many of you have discovered my channel with this video and how many have already followed some of my videos and so on uh but dim haven't you planned too many features for the live stream you're going to make it 12 hours no we already did a 12 hours live stream uh this one we are already one and a half hour um i think i think we are good yeah probably we should get going because we have some important things to implement um yeah i see a lot of um a lot of people let me give you a brief overview what what we are doing here uh in this live stream we are building the uber clone in react native naws amplify and this is already the fifth episode of the uber series uh and in previous videos we built the user side application that you can see here on the right it has a lot of features there like to order uber to see them on the map and so on then we went on and developed a driver side application and in this video we are creating the amplify backend and i just realized that i'm not sharing the screen so yeah that's what i was showing you and in this video we connect both the user side application and the driver side to the same backend so we can share the data we can share the same data we will implement real-time [Music] gps track location tracking of the driver so the user will see the driver on the map with updated position vadim yes i've got that a lot thank you so yeah we we are yeah halfway through this build uh the next step will be uh we'll be handling the worders properly because right now if we uh look here in the application we see the worder but this is just a hard-coded order so in we need to implement like fetching the new orders from the api and then also confirming a worder which means that we will change the status of a worder we will assign the car of to the worder so that the user will see that his order has been accepted so yeah that's a quick overview what what we are doing here so if you enjoyed what you are watching please consider subscribing to the channel down below because i saw that probably 99 of the people watching the videos are not subscribed uh so that's a lot uh so should we move on subscribed thank you very much uh yeah one person subscribed then we can move on amit is saying i learned many things from you oh let's wait thank you very much and i'm planning to drop more uh videos in future so what is the plan uh when we open the driver up query existing orders and also like we should filter to query only new orders all right that's gonna happen uh also here where in the driver application source no no yeah source screens home screen index in this index file [Music] we have here new worder and we just hard coded and we just hard coded uh yeah the thing is that now this is just one worder but we will have an array of orders so i'm not sure why i did that uh but let's move let's move the current solution with dummy data to support arrays but because that will help us later integrate it with uh with api so i'm going to switch to new worders and set new orders and this is going to be an array that will contain just one word or here like this and let's find where we we're doing new order one decline on decline we need to remove the first element from this array because we are declining only one worder and you'll probably laugh but i'm gonna google how to remove the first element from a javascript array uh remove javascript it's with split but i will always forget them javascript remove first element from array shift pop pop pop really where is the method shift the easiest way is to function shifts everything to the left slice yeah i think it's with slice but let's try with shift i have never used the shift so set new worder set new orders to the worders dot shift shift shift new orders let's save and we'll see on accept uh on accept new order set order to that order set new orders and again to this set new orders like this okay let's check where else [Music] if new orders dot length is more than zero and if we don't have already a order because if we already selected the worder we shouldn't show the popup then new order is new orders at position zero so to the popup we still give only one word like the first one from our array on accept new orders at position zero save and will it work let's do decline uh yeah it kind of worked but i'm gonna add uh more orders in this array so if i add one more like this uh different id and different client name let's save so first client should be okay different type uber black so first one is uberx if i decline this one nothing happens nothing happens on decline new orders console.log let's see the logs refresh okay here we have okay let's decline it and um that's weird i'm going to go with new orders dot slice start at position one and end the position if you don't put end of its own accept but i will do the same here slice and position one refresh come on change and here if we decline now we see the next order we see uber black and if we decline the next order again we don't see any of them and also if we accept the first one we should not see them we should not see the pop-up even if there are new orders we already accepted the first one so if we take the first one yeah picking up a client yeah right now we switched uh a bit the logic so it will work with arrays and now is the time to integrate the backend and for that reason we will not need we will not need this information okay let's leave it so we're going to just check if we have the same type information uh however we will do we'll create a new function const fetch new orders fetch worders is again a synchronous function try and catch catch and we will need a query for the worders so let's go to our user application in the queries and check the query for the [Music] get order not get order but least orders because we need uh a list of multiple worders not just one so i'm going to copy this from the user queries and i'm going to go to the driver application uh source graphql queries and add it here uh and as well we're going to change something so for list orders okay we have information about the order that's that's fine we have information about user that's also good uh information about the car an update yeah i think that uh yeah this query makes sense like it doesn't have a lot of crazy information it has information that we actually need uh the interesting thing will be to query only the orders with the status new so yeah let's let's first list all the orders and then add some filters to it fetch orders fetch orders let's import this where is it get car and here list orders okay in the fetch worders we're gonna do const uh order orders data is api.graphql and we're going to send the graphql operation uh the list orders operation list orders and we don't um we don't need any variables so far we will need it when we will add filters uh and let's set um set set new orders with the orders data dot data dot list worders i think that i've got it okay uh i think that we're not gonna implement filters in this um in this video uh it's gonna take a bit of time to to test and to show you that it works but the way you will do them you will add here in the variables um you see here there is a filter variable and you're gonna add filter um which is an object which it which is gonna be status again an object and here equal to new so as far as i remember this will make sure that we get only orders we the status equal to new but as we don't have any orders we've start to sql new in our database let's try it like this let's save and let's think yeah let's delete everything from here let's save now nothing there uh feature because we didn't call fetch word just from anywhere so i'm gonna call fetch orders here with a fetch car save waiting waiting nothing is shown um let's console.log them maybe indeed there are no orders in the database maybe where is it not here come on come on reload uh yeah it is live pushing pandas it's live i'm here hello welcome to to the live stream data list worders yeah oh list words dot items yeah that's what we need to do list orders dot items save and oh here it is the first one it's over x let's decline it and probably all of them yeah there was some like comfort and so on canadian property rating of null new order dot user that's in new order pop-up new order pop-up new order user rating so i'm gonna put here a question mark and save and see if it works yeah we declined all the words that we had uh yeah right now our orders are uh queried from uh the backend uh and if we add this filter then we're gonna query only the new orders that are in the backend because right now we are querying all of them uh yeah probably it's not a problem but you can you can adjust it by adding this one and make sure that whenever you create a new order from the user application you add this property status equal to new i'm gonna do it right now source in the user up source let's go to screens um search results index and here somewhere we yeah one submit we do input car id one and here we we say status equal new and all the users all the orders that are placed by a user will have this status new yep um yeah that's um that's probably it with uh good commit with fetching orders from the api if we select one we are picking up someone picking up it doesn't display the name because it doesn't have a name it has a username so let's where is the title uh instead of name we will say username save yeah now picking up a dim and here as well dropping off order user username and here as well hmm uh on the car changes position update this in the back end okay that's gonna be the next step uh i think yeah i should go and grab some water how are you doing guys how is it going are you enjoying it can you make a clone of any app which shows payment gateways actually i'm preparing a video which i'm gonna probably shoot tomorrow which teaches you how to integrate subscriptions in the application so yeah it's not a payment it's not an actual payment gateway it's uh yeah subscription in-app subscriptions with google play and with apple okay let me grab some water and i'm gonna be back in uh one minute yeah all right i am back why didn't uh not buy a new chair yet i didn't buy a chair because i still don't know for sure where i will be staying so if i'm gonna stay in tender if you or not so because yeah i'm uh i'm buying like i have a chair in another country and then i left and the chair is still there in netherlands and yeah we'll see uh okay the next step will be when the car changes position we should update this in the back end we should update this in the backend and we have this we have this function somewhere here [Music] on user location change on user location change and here is when we [Music] when we should update the user position in the database let's uh check out our source graphql mutations update car yeah yeah yeah we will use the same update car as here but we already have it where oh it's actually quite similar to this update so can it be a sync let's hope so the idea will be this one the uh latitude the latitude and also we should set the longitude and the heading to know where the car is is moving toward towards heading here hey what's popping um sorry yeah i'm gonna make a subscription-based application very very soon so probably the next week you will see you'll see a tutorial on that the latitude will be event coordinate let's first of all console log base console log position i just want to see the names of the latitude and longitude here so i'm gonna comment out this one for a moment and open it here data data do we need this data list orders uh let's where is list orders list worders don't console.log because okay we have here let's now try to change a bit of a position going in the features location custom location uh and change here from two to free okay yes um so we need the heading we need latitude and longitude okay that's that's pretty clear um going back here we will do it this way because they have the same names we will be able to destructure these variables from the coordinate and we and the latitude will be equal to event.native event.coordinate.latitude longitude with dot longitude and so on and here we can even put them like this because uh what this means is that latitude is equal to latitude so we can shorten this up by providing only one uh input update and car data set car updating car data okay let's try to save and and what um my position my position my position is where is it used because we we don't need it we will work with a position from the car variable again um set my position no then my view origin is latitude uh longitude come on laundry and these values we're gonna take from um put them from new lines uh the latitude will be car dot latitude and the longitude will be car [Music] dot longitude map view direction okay let's save um let's move the features let's move a bit the car to see if it updates uh free let's do two okay and it updated and it shows from the position that the car is currently at this position is already updated in the database i can show you that that's true by going to uber clone here and doing amplify console and if we go to the api there we will see that the coordinates are updated so let me try to sign in real quick always the first time amazon asks me to insert some digits no i'm not a robot [Music] okay okay here is our uh where is our uber clone uber clone here uh in the api let's view it in up sync too good to first cycle overflow now stack overflow is my friend always and in the queries let's do uh list car list cars and here let's do items the idea of a car the latitude and the longitude and the heading heading um and just understand which one is this one i'm gonna go uh to check the e's active and all of them should be null except one should be true this one so i'm gonna grab the id and instead of list cars i'm gonna do a get car id is id is this one and without items so i'm just gonna get the information about this car okay so if i do the query now we see the coordinates and let's go back to our um emulator let's go to the features location custom location and this is uh this is a way to change the user location with simulated user location on ios uh i'm not sure how to simulate this change of a user location in android emulator but i think it should be possible as well so let's go from two to six uh but for for the latitude and for the longitude from six to zero probably is too much uh and yeah it's on the water but it's okay and let's run again the query and we see that uh yeah it's it's the location that we just set it's with six and with zero instead of six here so that means that we whenever the car will move uh on the street this function one change location will be called and we will update the position uh and the heading of the car in our database um yeah an extra feature here would be uh i don't know to to limit how many times uh the application will update it to the database maybe you want to update the location only once per second to limit the amount of requests maybe you will want to to limit even like once per 10 seconds and so on so it depends on you uh how to to throttle this function so it will not go crazy uh in production and it will not like fire every every sec every like a millisecond and so on that's uh it about updating car position in the back end right uh okay and get status and let's let's let's add everything here git update car position so we updated the car position all right we are approaching the end but this is going to be a bit uh interesting because we are moving to the user side application uh we're gonna have to create uh the order page whenever the user places an order he'll be redirected to a new page and there he will see a map with a position of a car uh and we will subscribe to the car position updates so we can update the position of a car on the user's phone okay uh that's that's interesting how are you doing guys um let's let's check some questions medium have you used any other services another another than aws if yes which ones uh i used amplify for some of not amplify firebase sorry for some of the tasks um but mostly i'm using aws aws one love automatic failure is calculated bro uh that's their formula like they have probably a formula based on uh the kilometers uh uh the distance i mean and yeah it depends on how they depends on their business model for example if they want to charge 50 cents per kilometers you're gonna have this function that's going to calculate this failure so i think that's how it works in their case so where car position is stored uh car position is stored in a database so we saw it here here is the api but actually if you want to know exactly where it is stored which probably doesn't actually matter but uh yeah here is the amazon dynamodb table that amplify automatically generated for us and this table contains all the information about the cars so whenever we whenever the application updates the position of a car uh i'm not sharing with screen uh yeah but it's loading so here in dynamodb oh yeah whenever i was saying whenever the position updates in the application in the uh driver application then it does a request of to the graphql api and this graphql api actually updates the position the values in the car uh dynamodb table and here if we look at the items yeah we should see this uh this item with heading zero i think that this is the car that we're looking at so yeah this was the updated positions yeah this is the database and this is where we store the information about the cars do you have a video of your development tools set up no i don't that's gonna be a good idea actually so thank you uh for small application would you recommend firebase or you would you still go with aws um it depends what you have in mind for uh like what is your end goal with that application because if it's just an application that you know of it uh i don't know for a university or something like that but you know that it's going to be from here till there and it's a small application it's not going to grow it's just for showing something and if you already know firebase go go ahead and implement it with firebase however if you're starting a startup and even though the application at the beginning will be small i would highly recommend you to go with aws because you never know when you scale when you start growing and at that point you it's a good idea to to be ready and to to scale the application and aws especially with amplify mostly everything is automatic so the application will scale will scale up to to meet requirements from one user up to millions of users so you code it once and never have to worry about oh servers are going down yeah of course like in firebase you uh it's also uh yeah it's a back end as a service so you're not gonna it also scales uh it scales well and automatic but i think uh amplify can handle uh better with this amount of users uh okay let's uh let's get going with the user side application uh create the order page a map with position of a car create let's um where is what oh i have it somewhere here i will close the development server of the driver application because as i said these are two separate applications so um i'm gonna go in the user up uh no it's called yeah it's called user app pfd okay like this user up ls what's happening here okay that's that's good that's good um so let's start with development server yarn start and let's do yarn ios let's open until the application is build and let's hope that application still works loading loading loading uh come on what's happening here oh my god okay so let's have a look at uh at the you could not connect to development server oh yeah because that's the driver up oh it's okay so let's uh until it builds let's have a look at at the user app and what components we'll have to work with so here we have a source we have a screens and here is the search results screen and this is a screen where we will be able to place the worder so here is on submit we do all the uh we settle the origin destination and so on the user id and also the status new and after creating the worder what do we do we do an alert your order has been submitted however in our case now we we want to implement a separate screen a screen that will represent the worder i mean when we place the worder we see a map initially there won't be any cars because the water will be yeah waiting to be picked up by a driver and after someone um after some someone uh takes this order i mean one driver takes this order we will see the car position and then we will be able to subscribe to updates to that car and and update the car on the map so for that reason uh what i'm gonna do [Music] should i duplicate the home screen it has a home map home search let me just duplicate the home screen because i'm too lazy uh and that's gonna be the worder screen and let's open the order screen change a bit here order export word or screen and let's leave let's leave only the home map what do we have here yeah let's leave at this point only the whole map probably on the bottom part will display something but i'm not sure um okay then we will in the navigation in the in the route right home your trips yeah uh where should we put it in the home custom drawer no home what do we have here home destination search search results yeah i think that we can put it here um order yeah just order order page and that's going to be this order screen yeah like this and then in our search results instead of instead of this alert instead of this alert we're gonna do navigation dot navigate to the order page and we are going to send the order id that we get from a response dot cree dot data dot create order dot id i think that's the way we'll see save and let's check what's going on here and why it's not yet running uber clone are you here are you working why are you building uber clone again and again uh actually we're not building uber clone again and again we are uh building a lot of features in the uber clone so we have built a user side application we have built a driver side application we have built the back end of both now we are connecting everything together so this is a special build that we go a bit more in depth uh yeah but i'm also looking forward to to start new new builds uh i have a lot of ideas and a lot of uh of cool projects that i want to build so let's go if here in the user up and the user up i think uh i didn't change them the api key from google so it is this one let's close all the tabs and in the user up let's go to android upsource main android manifest and check if it's the same no it's not the same that means that i'm gonna go and replace all with this vsab key and the old one is from here let's hope that let's replace all let's save i think i have to do again yarn ios yarn ios thank you very much rafael for the kind words so any of this here come on what's why you're not updating it's very any errors that are not showing none of this file exists okay now it works and let's hope it a yeah this as well works um i'm gonna go with current location and after selecting the uh uber and confirming a a worder we should be redirected yeah we are redirected to the order page here initially there won't be any any cars but we will need to subscribe to uh to the updates about this about this order but first of all let's um yeah let's open our amplify backend api schema and we will need a subscription to the order to order updates and also we'll need subscription to the car updates yes from the order we will be able to see if we get a new car id wait uh however from the actual car we will be able to get updates about heading latitude and longitude and to add these mutations yeah we we will define the subscription here because we want to subscribe to a specific order uh using the id and to a specific car using as well id let me let me open the docs from amplify and here is how to create a graphql subscription by id so by default uh amplify creates the subscriptions uh like oncreate on update and on delete but they work like for example one update will be fired when any order is updated so if you have a million of orders and one worder is updated and a million of users everyone will be updated so we want to subscribe to updates only to a specific order and to do that we're gonna take it as an example this subscription type subscription on comment add by post id [Music] we can say on order updated on order updated and by d overwater will be this one and we will receive a worder uh that's going to be an aws subscribe for the regulation not create comment but update order and that's the same thing for one car updated id update car save now let's try to push these changes amplify console not console just amplify push so that this and amplify our core driver up yeah because we are not in the user up amplify push again uh update yes we're following either okay that's okay and yes we want graphql api yes yes yes updating resources in the cloud okay let's now think about the next our next steps so we have our screen order screen here we have a home map uh let's have a look at what the home map actually is so the home map will will fetch the cars okay i understand route map will also okay i think we could have implemented it a bit different so that the cars was a property of a home app uh but i'm okay with that and i'm gonna copy and paste the whole map from here and call it order map order map and this is not okay this is order map order map we will not need the fetch cars definitely uh get image uh probably we will need it that one okay so this um yeah we will not need to loop through all the cars because we will only have one car and there's gonna be only one image and only if the car will be present in the car we will receive from our properties we'll receive a car and we will receive and that's it we don't need to receive a order we only need to receive a car here on the map we'll check if car is not null then we'll render this marker and yeah car id correlated longitude car heading let's save [Music] it shows me that it has some issues yeah let's refactor everything that we don't need from here in our order screen let's import not home but order map order map components from here and we will have to send a car there and the car will be saved in the state but will fetch it from the database um how this build is different from previous builds of uber up this is a continuation this is not something new um for example in the first episode of uber application we have built the ui of a user application in the second episode we have built advanced ui features like maps and autocomplete features for the search input in the first episode we created the back end the fourth one we created the ui of a driver application and now we connect the driver application with the same back end as the user application and we make sure that they are synchronized the data between them so that's a quick explanation but yeah they're not different they they are just one after another so here we'll have a car set car use state null initially it's gonna be null we will import it from uh react and we will send it to our car here uh we'll also need um information about a worder and set order but how will we get information about the worder we will do a query but we need the worder id uh so we will receive a word already using the use route hook from and navigation where is it import from from react native navigation react navigation native let's grab the route use route and let's console worn route dot params dot id so this should be contained by id of a worder because we send it there whenever we navigate to this page and yeah we see the word already here at the bottom that's good because with that id we can go to we can fetch the details about the worder the word itself use effect this effect is also from react let's do const fetch order i passing and let's call it right away uh we will import the import import import api and graphql graphql operation graph ql operation from aws amplify and we're gonna import the query to get the order from graphql queries okay here we need the list orders and als no get order get order and also the get car data is equal to weight api graphql and here we will uh pass the get order and the variables let me put it from newline so we can see the variables will be uh id is going to be the route params dot id and we can set worder in state to order data dot data dot get worder let's save and we don't see anything but if we want we can have i don't know a view here down below view saying with a text saying word or status just simply so we can know that it actually works will be worder dot status let's import the text from react native save yeah we see here order status is new and that means that we successfully fetch the worder [Music] we successfully fetch the worder from our backend all right let's see if resource is not invested stack okay something schema has the following errors the subscription has an invalid output type subscription has an invalid output type amplify backend api schema what's your problem order car hopefully it's because of this issue uh are you sure won't continue yes yes and yes and now we'll have to wait a couple of more minutes so it will build in the cloud but if we go back to the order screen now let's think um about the next steps yeah uh let's register the same use effect to fetch the car so we will register a use effect that will fetch a car car so order data wait api graphq well car data is get car and we need to send the id of a car and to set to get the idea of a car we can do it uh from order dot i think it's car id order car id and here we'll set car to car data data dot get car but we should call this function whenever we update the order so not when we start the application because then we will not have any orders where there will be no so let's do here whenever we update the order we try to fetch a car and we don't do it always we if if order is null or if uh no let's do if worder dot car id is null or if order dot car id is equal to one because that's the hard-coded id when we create a worder and that this means that the order is new or what we can do with status right but yeah we we can keep it with car id because if we go to the search results here we can see that we set the car id to 1 meaning that it's a wrong id and there is no car like it's a new one so if a car id is equal to one then we will return because we don't want to fetch because there is no car with id one um okay however otherwise we will fetch the car fetch the car and yeah let's wait a couple of more minutes so it will update all resources are updated uh right now let's check our source graphql the things that it generated source graphql subscriptions and here we should see a subscription on order updated with id and this is what we will need one order updated and one car updated with id and the rest are the ones that are automatically generated so you know what i'm gonna uh take this to export because uh i need to edit them i need to edit what with the returns but if i do it here it's going to be overwritten the next time we do amplify push so if you need to edit never edit in this file uh but copy it and move it to another file for example in source components where no ins in order screen we will do uh we'll create a new file called subscriptions dot js and we're gonna put them here and we need to update it because it's very important for the subscription to have the same fields to return the same fields as the mutation that was run to update to update this data if the fields are different if one includes more fields for example here we include more fields where the subscription will just not run and it's a very hard bug to debug hard bug to debug because it doesn't throw you any error it just is not it's not triggered by subscription and yeah i really hope that that's not gonna happen so let's have a look at what fields do we query whenever we set one order updated uh and we do that one order updated in our driver application source graphql mutations and here should be somewhere create car update car but we never we never update the order really screen home screen uh on accept oh we forgot to update the worder here jeez um okay um i think i'm gonna come back to this uh after we implement it in the user application because it's going to be harder to to run again the server and and change it and test it uh and right now we're going to follow um with just updating manually the worder from chrome from from from the amplify amplify console api and it will open our console and we can update it there so we simulate an update that is coming from the driver but then then uh later in the video we're gonna move there and finish it there as well uh to amplify console we have here the api let's open it in um in appsync and we have a queries we have a queries let's do it this way close all tabs user up order screen index i want to i need the id of this order so i know what i'm working with the idea of a worder is going to be route for rams id like this and if i create a new order yeah let's select uh uber type confirm uber order status new and let's get the idea of this order from the console from here yeah query get order by d this one and we need yeah let's get everything that we know about this order what you know about errors unable to parse because we are not logged in vadim and now is active is true where is the status and why are we working with a get car status status is new all right okay let's go with um yeah we'll we'll have to to decide here what information we need in the on order updated because one updated we already decided but here we will we don't need the car we don't need the user only um information about the the order itself yeah i think that's good this one uh subscription okay like this so wait a second libraries api graphql subscribe to data graph collaboration and yeah it's the same thing uh in our where in order screen index we will need to subscribe to order updates uh to do that this let's add some comments uh fetch order on initial render and here will be subscribe to order updates we're gonna uh also use the use effect and we'll we are gonna register this listener uh also whenever the component mounts so we can say that we will return api not subscribe dot graphql graphql operation the operation will be uh we didn't import it yet right import from subscriptions on order updated one order updated is the operation and also we need to send the id of a worder so the idea of a worder will be same as this one and here we do a subscribe so the next will be the function called with [Music] provider value yeah let's do just a console here save an effect function must not return oh oh okay okay okay okay it's a bit different uh it's not returning this one we assign it to a subscription and we return return subscription dot unsubscribe but don't call the function because we need to return a function so we will return a function and the use effect will automatically call it save okay we have our console log we have our console log here let's try to update the status and see uh update order is let's see if we get the notification update order the input will be id this id let me get some more space here and there is the status status will be not new but peaking up client so here um update not work car but order and the important part here is from the mutation to return the same things as we subscribe to so the same things if we wanted to be called let's save no no no not like this so our console is clear let's run it uh update query the status has been updated but let's see the debugger provider here we get a new value one order updated we've updated status picking up client all right that's nice so we can instead of just console logging we can do like this set order because we get updates we need to set it in our state so we can work with it will be value dot value data dot one order updated value dot data dot on order updated save we don't need the provider okay we are gonna have to go again current location come on yeah it will create a new order and the status is new and now if we uh if i can find google chrome yeah now if we update the status here to dropping off then we shouldn't see any change because this is a world order this is an id this is not the new order so i think we shouldn't get any changes let's run this one uh run update query and yeah we are not getting any changes however if we get this new id paste it into the update order here and run now the query if we look in our application without any updates our order status right now is dropping up the client so we didn't do any updates i can do it again status yeah picking up a client and i'm running the update query and have a look at the order status here so i'm running it it's instantly updated in our application okay that's the good part we subscribed to updates about the water status and that means that let's uh you know what let's assign let's assign a new car id because we still don't see the car but that's because the car id is still one so um i'm gonna create a new query just to get cars to check which car i'm interested in list list cars items and i'm interested in id and also in is is active because only that car is activate what i'm interested in get cars no no no true and this is the id of that car and i want to update the worders and set the car id here car id to this id and if everything works correctly if when i update the order and set the new car id the car should automatically show up on the map update order um what's happening oh our car was way there ah get car i'm gonna update the car update car update car and input will be id this and i want latitude to set his latitude to our destination latitude no let's do it with origin and longitude is gonna be this one let me update the update car validation error with value string is not valid they are float but i give them string values update cars okay it's updated and here let's run again the update order update order we see the car yeah something is not working there but we can debug so um here fetch car data when order is updated i'm gonna console log the car data save and let's open it here enter it property state of anything maybe that's fixed already in the update order state of undefined unsubscribed should i do it like this subscription dot unsubscribe a finger of kill subscribe and then unsubscribe yep that's how it's supposed to be okay a new order okay here is the new order the status is new let's grab by d uh let's group by d um what's this data go to up sync update the order with this id and set the status picking up client and the car id of that car update order picking up client however i don't see what's here errors cannot return no notable type id list cars list items no no no no id oh that's yeah let's get car so it gets a car late longitude why it's not rendered latitude longitude order map car order map we get a car oh initial region that's weird 28 16. let's just uh console log car here car save and open again our debugger and the car where that latitude and longitude yeah white car let me just try one thing lately dude this one will you show anything and longitude this one yes it shows then what's the issue latitude and longitude maybe i just need to scroll a bit because it's not on the screen 28 minus 16 what 28 minus 16 let me just update the car's position with this one because i think it is just not on the screen so this one is 28 yeah i think it was not on the screen and 16 update update car and what else an update order and now we see them the car we see the car on the screen but this is the initial position of a car so that's good but we would like to subscribe to car updates so whenever the car will update we will automatically move it on our map [Music] fetch car subscribe to order updates uh i'm gonna copy the subscribe to order updates and do the same for here subscribe to car updates so subscription and pan graphql operation on car update did we import it no on car updated one car updated variables will be uh order dot car id order.car id and subscribe next value set car here with a value data on car updated yeah i think that's latitude of null country property latitude of null i just components order map worder map save okay here in the subscription we need to add the fields that our mutation is using whenever it's updating so that notation in our case is in driver application source graphql mutations and update car and these are the fields that it will include so these are the fields that we are going to include here save going back here yeah i think that we are good to go so uh let's test it with amplify from from the console okay [Music] confirm cannot read property card id okay here [Music] okay we're gonna do the same uh thing here whenever we update the order we will register this subscription all right confirm order status new there is no car here let's grab the order id and assign a card to it so this simulates that a driver accepted the worder not here with them but in them oh no in the update order and the order id will be this one and let's run the update order picking up a client and soon we yeah we see the car on the map we see the car on the map now let's grab the same fields over on car update and do put them here and try to update the some of the fields here i'm trying i'll i will do it with heading for example i'm gonna save it the heading is updated to 90 degrees let's try to update the car and see if it and we get the updates on the app as well did you saw it it's almost instantly so if i do 180 run it here uh update car it's almost instantly in our application the car moves the position uh yeah if i do 90 and move it uh a bit like this save uh yeah update car it shows how it moves and here if we do 60 and do 0 0 update car it moves yep it moves and 900 update car alright guys this is really nice because we receive this uh subscription events and we are able to update uh the car in real time based on the changes that are happening in the back end um well the only thing that is left that i promised to do is uh to do that change in the driver application uh where first of all let me uh let me run the driver application and then i can say what we still have to do come on stop stop stop stop stop clear cd the driver up and then i'm thinking how to test it and show you that it's actually working yarn start yarn start and now i need to practice holy weekend thank you man so yeah it's going to be a productive weekend and yarn ios let's run it on ios what do we need to do we need in graphql and new mutation to uh update the worder because we we did not do that we did not update the worder source graphql mutations and here should be somewhere update order update word yeah this one and we're gonna copy it and move it to our driver up graphql mutations and down below here update order and to keep them to make sure to update the fields that you query back to match the fields that we defined in our user app source screens order screen subscriptions and for here not on car update but on order update it's important that one order update here contains the same fields as the [Music] in the driver application update order otherwise uh we're gonna not receive the subscription events like this and we go in the screens index and on accept on accept we need to update the order set change the status and set the car id to our car id all right let's do it let's do it let's do it uh i'm not sure if we'll still need this too but uh we'll try so try catch [Music] so ordered data is equal to a weight uh graphql operation the operation will be um we need to import that operation update order update order we can do it yeah let's go what's happening here okay still compiling interesting here on accept so uh update order and the input will be do we have update car update car input okay we'll send here the input and the input will be const input uh the idea of a worder will be the new order new word dot id and not equal dot id then what else are have we been updating here status is picking up a client status picking up a client what else is car id car id is car id car dot id car dot id and instead of just setting new order here we're going to do it set order to order data dot data dot update order yeah probably something like that on accept yeah let's let's see if it will work but we'll have to test we'll have to test both applications we'll have to run both application and have a demo have a test if it actually works uh what's happening here come on now this this live stream is uh is yeah quite intense uh yeah after three and a half hours i'm a bit tired hopefully you're taking it step by step and taking some breaks uh yeah i think that um i can build i can build a user application and install it as a production version on uh on an android emulator or should i just open xcode yeah i think i'm going to open it with xcode now we have here an android device let's go and try to build the user application so cd user up ls and [Music] racked native build production all right the internet is so slow okay uh we'll need to do gradle assemble release let's go to user up then cd android and run grand grad blue bundle release to build a release version of our user up but we can uh so we will be able to test it on two devices the user app will be there yeah let's see if it will work yeah i'm pretty sure that it works uh it's gonna be just hard to test and why it's compiling so long uh yeah while it builds i'm gonna grab some water because i don't have any so i'm gonna be back in one minute oh he's still building right okay that's uh that's interesting yeah we'll have to wait a bit it's so quiet in the chat right now did you guys put me on the background and minding your own business okay build successful so driver up you know one more thing uh we can uncomment this filter and see if it actually works because right now we have this status new and we can test it properly let's open uh our console and let's do actually [Music] uh at least orders here query orders first worders a filter filter status equal new id items id status save orders and there are currently two new worders could not connect to development server why you could not connect to development server it's here [Music] okay okay okay what's going on here unable to resolve what something is happening let's just wait and see i don't know why why it takes so much time and interesting 60 let's let's wait maybe yeah i have so many apps uh opened right now my computer is going crazy and also streaming two emulators oh my god this wait and come on here i don't see any progress 74. what should we do in this situation come on come on you can do it 99 and oh really that's not the end and everything from the beginning right now it has not been released it can happen metro local dev server is running from the wrong folder what's going on pfd driver application yarn start reset cache um and driver up let's do yarn ios yeah here i don't see any results so i'm gonna cancel it and try again i didn't think that testing would be so time consuming foreign and everything from the beginning great success oh jeez i think i'll give up on the idea to build the android because this might actually slow down my pc so let me just close them later because we already saw uh yeah cpu struggles yeah i think that as well um i think we already saw that the user application receives updates every time we update the data in our back end and now let's do the last test in the driver application to make sure that it actually updates the data it updates the yeah the worder in the back end and then yeah we we are sure that the driver updates we know that the user receives so it should be working uh i think i'm gonna do a video demo after uh after the live stream because yeah my pc is struggle struggling right now um and if there will be any issues with updating uh i will create a pull request uh to the to the github and uh add it in the in the description down below so you can check it out to make sure that everything is working everything hurts already i probably need a good chair for these live streams yeah just let's make sure that this works and reload okay okay it's here so right now uh we are fetching orders with that filter with status new so i saw that there are only two orders we start to snow let's first of all decline one and decline second and we saw all the orders okay now let's let's accept the first order that we see let's accept it cannot read property username of undefined username of undefined and that's where their order dot distance somewhere order user i don't know which user did that order right and let's accept this one username of undefined anywhere else yeah here picking up so now there won't be any um you know orders but let's have a look at this order get order by this id because this is the one that we just right now update accept it from the app and let's make sure that the car id is the id of our car that's good because it's not one we know that it updated correctly the car id of a worder start to speaking of a client that's good and user id i'm wondering what's happening with a user here user id yeah it should work user name oh i know we are not we are not carrying back this user so yeah uh the issue there that we uh we do not we we had an error with uh throwing that the username is not there is because in order uh when we update it where driver up source graphql mutations here we are not returning the user and the id and username and if you add this make sure you also update the mutation in the user up so that they will both mutation and the subscription will have the same data i think i put a lot of emphasis on this uh so you will know so yeah that's um i think that's it for today um i'm pretty sure that it it works uh i will do a video demo showing side by side let me first of all get add get cap mid minus m but no not from driver up but hit commit minus m um yeah subscriptions probably and let's do git push origin main and now all the code is available on on the github repository so guys finally we [Music] came to an end to the uber to the uber clone series we started this series uh previous year we started it uh in 2020. actually that's a bit of nostalgia uh and we have built five five series we have done for v super clone so it's a lot of content guys i understand but i try to get into more details into more depth to show you how we implemented a lot of new stuff in this application that we don't have in our application and yeah i think that that's a good learning opportunity for everyone we built two separate application one for user one for yeah one for user one for driver one second yeah we build two separate user application we synchronize everything together in the same back end and everything thanks to amplify and how easy it makes to to do that a lot of work with maps with directions with map markers with uh auto complete features come on like this this build is packed with uh with features with things that you can uh take from here and implement in your application that probably you are working on so i think that's there's a valuable part let me know down below in the comments if you have follow along and if you manage to to build a full uber clone it would be really nice to see that people are actually following following along and building their own ubers if you can add extra features because there is a lot of extra features that you can add that would be even better for you to learn better react native to learn amplify and all these all this stuff so if you finish uh send me a link to the github repository and i'll be happy to to to check it out so guys do you have any questions is anyone still here yeah i think it's uh it's time to get into the weekend uh so uh guys thank you very much for joining thank you very much for sticking till the end of this long series i really had a lot of fun and i hope you find this valuable if you enjoy what i am doing here on the channel please consider subscribing to the channel because i know that 99 of you are not subscribed [Music] next week also on friday also at 3 p.m we are starting a new build so i'm not gonna tell you what we're gonna do uh as the next build but i'm very excited about it and i'm pretty sure that all of you will uh will love it because a lot of a lot of you are asking me for it so join me uh during next uh friday's live stream uh yeah subscribe to the channel join the discord all the good stuff so guys i think that's it for today take care stay hydrated write clean code and i'm out bye

Channel: notJust․dev

Views: 69,979

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react native live coding, live coding, javascript, typescript, react tutorial, react native, javascript tutorial, react native clone, react native app, react native for beginners, learn react native, react native project, react native project tutorial, build uber clone, uber clone react native, uber clone tutorial, uber clone, lyft clone, taxi app react native, taxi mobile app

Id: E95VMb6nzKc

Length: 224min 55sec (13495 seconds)

Published: Fri Mar 05 2021