Build a full stack UBER EATS clone - 4/5 Days Challenge 🔴

what's up nudges developers welcome back to the day four of our our five day challenge and today we are starting working at the back end side of our courier application so uh if you're new here we are running a five days intensive challenge where we will build free applications for the ubereats clone first of all we have built the user side application already now we are finishing with a driver side application and tomorrow we will do the restaurant dashboard so everything is done with react native and aws amplify and this is a great opportunity for you to get some experience with this improve your skills with building rack native applications uh both for front-end and back-end with adless amplify so let's have a quick look at the recap of what we have done in the previous days what we are going to do today and what's going to happen next so in the first day we have built a user application ui with react native and we are like we went crazy and we implemented a lot of screens uh for that application and this is by far the biggest and most complex project that we have done on youtube so um in the day two we took that react native application and we created the back end using the aws amplify we have set up authentication we have model the whole database with all the data that we will need throughout this series and believe me it's a lot of tables and a lot of data but we have done that in day two in day free yesterday we have built that driver's side application uh again with rack native and there we worked a lot with uh maps with directions bottom sheet navigate bottom sheet and our interesting features uh if you haven't follow along so far i highly recommend you to start from the beginning and try to implement it yourself because in that way you are gonna learn in just five days uh how to build ubereats application and that will give you a lot of experience on building mobile applications from start to end so um moving on to today's build today we are connecting a courier application that we have built yesterday to the same amplify backend that we have created for our user um for our user application and we connect to the same backend because we depend on the same data an order that a user will place in his application must be shown on the driver side application to be picked up and delivered so we need to connect to the same application and the interesting part will be to synchronize the data in real time between different applications like user and driver in order for uh let's say the user to always be up to date of uh what's the status of his order where it is at on the map at the moment and yeah this is exciting and let's see how to do that in today's live stream tomorrow we're going to do the restaurant dashboard with rackjazz and aws amplify and that's also something very exciting because a lot of people are asking how to build a dashboard for your application from where you'll be able to manage the data in in your application and tomorrow is going to be a good opportunity to do just that i'm going to repeat if you already follow the videos you already know about the ubereats asset bundle uh the folder with everything that you will need during uh while following along and building it yourself uh by the way if you already downloaded it uh download it uh one more time because every day i'm updating it with new information with uh presentations every day and also i include the source code of our previous days there so that you can have a look at what we build and maybe start from there and implement uh today's project today's like features uh so i think we can get started with day four but before that for everyone who is new on this channel hi welcome here my name is vadim and on this channel my goal is to share my knowledge and experience with developers and help them upskill and get to the next level as a mobile developer today i'm joined by lucas um i think you all already know lucas thank you very much for joining today as well and um yeah how are you today hello guys hello yeah i'm good i'm ready to spectate and see what's going to i know what we'll have at the end of the stream from our application yeah that's uh that's also interesting for me as well uh but yeah we're gonna have a huge project that is gonna work and uh yeah like with a couple of changes i think you can start the business out of it but yeah alright so i think we can get started before we get into all of that things that we have to do today let's have a quick look at what we managed to build yesterday so here we have our application running on android and we first of all see the map and also right away on the map we see a couple of worders that are um that are there so uh the more details about the worders is in this bottom sheet navigator that is not working at the moment so this is the first thing that we are going to do is to debug why it's not working on android but it is working on ios and i think we we have an idea why is that happening right we i we have two ideas i found like uh the problem is uh that the bottom sheet navigator that we have developed yesterday is actually working properly because if i give here the index to index solar one index one index one there is no uh we see all the orders here the problem is with detecting gestures of a user swiping down or swiping up and uh to fix that or at least to try to fix that i think we're gonna go to app.js and at the top of a file we need to import the gesture handler import yes react native gesture handler and now it's still not working but do we have to wrap our reload i think we need to wrap it with uh i've sent you the issue that i found and actually there is quite a well not quite a few but a few problems with the android okay because react native gesture handler requires a wrapper around the root view to function so we need to import gesture handler root view the one that i've sent you in the private chat is that yeah this one so most likely because it has a lot of upvotes and the problem is the same as hours okay so before it was like this but then it's like this so it has a gesture handler root view yeah then a bottom sheet model do we need bottom sheet model no so this bottom sheet model provider is most likely what we don't need here so we need to put this gesture handler root view yeah import it from let me see yeah from okay so let's uh let's go ahead and import uh something from the gesture handler here and we're going to import gesture handler router yeah i saw it already here and we simply have to put wrap navigation yeah navigation here this let's hope for the best yes let's see come on i'm still trying to look for what might be the problem so let me know doesn't want to run but i'm gonna stop it and start again hey everyone how is it going how is your progress in the challenge let me know in the in the live chat by your opening here when i want you to open here so let's close everything run on device they're using bottom sheet model so i'm not sure what's the difference between those two but because that's as well from this guy bottom sheet but he's using a different component that's not working i don't see anything but i might give this style of flex 1 to this root view oh yeah root view style flex 1 and oh but why is it root okay like this come on don't let us down we're nice with you at this moment yeah so that's why you always need to test on both ios and android after and yes it's working let's go good job good job perfect we figured out this this problem that's very nice now i can check the comments oh no you should show what we've built yesterday yeah so continue our um continuing what we have done yesterday first of all on the map you're gonna see the worders and if i'm gonna be able to zoom in which i forgot how it's very weird to zoom in with them try to use shift and then zoom you should maybe work as well so here we see different orders on the map and to always see more details about them we can open up this bottom sheet model and from here we see the restaurant that the water is for the address of a restaurant and also the delivery details about the user who were there vis after this you can press on this one then we are asked to give permission to the device location which we should say allow uh here and we see right away the direction from our side till the restaurant tell the restaurant and also use it yeah i'm gonna try to so here we have some um some worders there in dummy data that today we're gonna implement for to to fetch them from the back end but it shows us that yeah first we have to go to the restaurant and then it shows the direction to the end user and also with information about the restaurant and end user after you see this order you didn't accept it yet you just look if you would like to take it and you can go here and say accept worder after that the map automatically zooms in we are in a kind of a park here and you will start driving there for android i don't think we have this uh possibility to to show how i actually move or maybe we do we'll check later for example here maybe we have location no settings we'll see if it's possible but on ios we had this possibility to move this dot and see how everything the route included automatically recalculates all of this information like 51 minutes 60 kilometers this is not dummy data this is actually calculated by the direction api from google and it will automatically update every 100 meters that you advanced on your route so here you can see more details about the order at the moment the pickup order button uh is disabled uh because we are not close to we are 60 kilometers from the restaurant once you get in the range of a restaurant like 500 meters or 100 meter this button will be enabled and you'll be able to say pick up order and the map will switch to showing you direction uh to the user to deliver your order once you get to the user as well like close uh to him then you'll be able to say complete wonder and after that you're done you can take the next one so this is the application that we have uh lucas built it yesterday that was an amazing stream not gonna lie and today let's start to integrate it with the same backend that we have so but i'm gonna also delete this index one to start with the bottom sheet closed like this and i can open it anytime perfect so uh let's add this to the stream uh the first step is gonna be to install our dependencies in our project for amplify and we are gonna do that by copy pasting this command i'm just gonna try to find it in my presentation come on here it is so let me copy it and let's go in our application let's close everything let's open a terminal here uh i can go into a new terminal by pressing this plus sign and here let's install the aws amplifier react native it will simplify real native and other dependencies from amplify i'm not going to go into details like what are we solve all of these libraries because we already have done that in the day two when we integrated the amplify for our user side today we're kind of doing the same when it comes to setting up a project implementing authentication but we're gonna have uh some other tasks new tasks like real-time data that we didn't see in the previous live stream so what do we see here completing period dependencies react 18. okay the bottom sheet gives us some troubles hmm what's the problem you weren't showing um oh i was not showing that's bad but i was trying to install the dependencies and it says that uh this bottom sheet library depends on react 18 but we have rack native community net info is not in the register maybe i i've made a mistake wrecked native community not info let me grab a comment like that react native community without any yeah maybe i have a mistake there uh so yeah guys hello to everyone i didn't have time and i see a lot of people are saying hello and thanking for this course so we're very happy to be able to give you this course and we're happy that you are enjoying it as well and yep hello again to everyone that i have yeah i copied the library uh wrong and you're already so let's go ahead and here grab this command from here from the documentation and let's try again yeah community was different here yeah at the setting of android that you will find auto routing that's interesting uh yeah it should be location oh location first one and i can provide routes here yeah and you should be that's nice we'll we'll get to that yeah i think it's possible i googled it as well and you viewers are saying amazing so uh we installed the dependencies now uh we can go ahead and check out our backend application that we have built in day two for that let's go to our aws account go to aws amplify service here choose amplify service and in the list of projects you should see the uber reads application that we have built yeah previous time let's go ahead and launch the studio and what we have to do here actually we don't have to do a lot of things here the only thing that we have to do is go in the local setup do amplify copy the pull command and we are going to pull the same amplified backend that we used in our user side application we are simply going to pull it in our driver side application and by doing that we basically connect two applications to the same backend and we are going to use the same um the same data layer so let's go in our project paste amplify pull command this will uh yeah pull the back end in our project and we will be able to connect to it first of all we need to authenticate our cli let's say yes yep thank you brainpower official and captain varun for the tips on routing i think we're definitely uh covered here and if we're gonna have problems with android emulator they will definitely help us with those coordinate setting auto routing and stuff like that happy that's amazing still catching up from previous days and fitting in some work in between client meetings looking forward to finishing up this project soon enjoyed today's stream thank you very much i understand it's a lot it's a lot of content but as well like it's it's valuable content i hope at least that it's valuable and you are learning something new out of it uh what i want to discuss next while we are waiting for amplify to pull in our project um is actually not even this one but it's the data modeling part let's think if we have everything that we need in order to uh yeah to implement today's features so our driver side application actually will work with everything that we have already for example warders it will work with restaurants dishes and so on the only thing that we are missing is a way to store information about the drivers store information about the driver location and also connect an order with a driver because we want to know at the moment our order is connected with a user it is connected with a restaurant basically we know who ordered uh where he ordered from but we also need to know who is the driver so we will need to somehow connect the water to the driver so let's think about that because there are a couple of ways to do that so if we look at the data model here we could store drivers in a complete new um in a complete new table and i think i'm gonna stop here and say that this is the best approach because one way would be to consider the driver as a user because it also has like id name maybe we don't have address but current latitude current longitude and sub in order to connect him with the authentication module here so yeah no no it's a bad practice in this situation to to consider the driver the same as the user because they have completely separate uh needs and the driver yeah like is in a completely different place so for that reason let's go ahead and add a model for our driver or courier how do you want lucas courier korea so for the courier what do we have name we will have is required uh vest sub definitely because we need to link uh the user who is authenticating in the courier application with a user in the database i talked more in detail about this sub in the previous in the day 2 but this is going to help us simply connect them together what else the latitude and longitude we need that because we need to know where is he on the map to be able also to show this information to the user um what else it would be interesting you know what i know that the direction api has a simple prop that specifies what route what mode of transportation are you using are you on a bicycle or are you on a car or something like that walking as well maybe we can set this in the courier to know like what uh transportation method he is using and simply send it there yeah yeah you could do that then we could even improve them up few directions and yeah according to that you know the science and it's not a lot so uh tran transport or how transportation transport transportation mode it's called transportation mode but how to call it in database i think that makes sense because if you wear for example that's for the viewers if you're uh going let's say delivering packages with a bike you shouldn't be able to go on highways yeah so if you vice versa or vice versa yeah so if you select that you're using a bike it will google map view directions will show you a route that's uh where you can go with bikes so for transportation mode i'm going to create a new enum because i want only very specific uh values transportation modes lucas can you see what values does it accept that prop in order to send it directly there so first of all strongly thank you very much for your donation you're going uh the long route check out ablaze tracking api i'm using it in a project with very similar needs uh that's interesting i have didn't hear about that is that some kind of library i didn't heard about it either transportation modes what do we have there right now checking so probably it's going to be bike so yeah it's driving drive should i send you to the private just tell me driving then bicycling oh my god that's what i told you but i sent you okay i'm gonna wait for lucas to send it okay uh walking i'm not sure if we should include walking problems yeah let's go driving and bicycling just to see how it works maybe later you can add hours as well so this transportation mode is one of those values and yeah that's it here for the information that we need about the courier now we need to go to our order and the same way we did one-to-one relationship to a restaurant the same way let's do a one-to-one relationship to the courier in order to know who is then courier that picked up this wonder right yeah and juan for now there won't be any ratings for the courier but i think that you could like implement this as an extra feature because it shouldn't be too difficult after the whole uh like tutorial and it's a very nice feature after you finish your delivery the user should see a table where it says like raid the driver and i also had one yeah so hello vadim and lucas thanks for this tutorial that you are giving us for free of charge may the lord continue to bless you and yep you're welcome i hope you're and vadim definitely does as well hope that you're getting the most value out of it yeah thank you very much so with that being said let me just uh double check and press the save and deploy so we have our courier with all his information important is latitude and longitude uh we have the courier connected with a worder which is important with a one-to-one connection and i think that's it and we can press save and deploy and while everything is deploying we can go to the next feature in our application actually the features that we started there so we started pulling that changes where is it and how to move here okay okay i wrote the amplify pull command but uh i didn't follow the guide to choose the default editor and so on i'm gonna pull right now even if i know that the new changes that i added for the courier are not are not yet there i'm just going to pull it to set it up and after it finishes deploying to cloud i'm going to pull it one once again and continue from there basically saving here some time so when we run this command let's choose our editor visual studio code javascript react native source the default one build command the default one and that's it let's say yes here do you plan to modify the backend we might need to do some changes what is enums inundates is a set of values uh that a variable can uh can take so for example uh instead of saying that okay now i don't have it instead of saying that that transportation mode is a simple string which can be any string out there like driving cycling uh i don't know dog cat and so on i said that the transportation mode is a one of that values that i provided in the enum so i strictly typed that field to be either biking or bicycling or driving and if you're gonna try to send their uh i don't know abc you it's gonna fail and it will say like vcenum doesn't have that value so basically it says it's a set of values that you can type uh your variable or in that case the field okay oh our application is still deploying here but we fetched everything in the project that means that we can go ahead and connect our rack native application with our amplified and to do that i'm going to recap when we did amplify pool amplify generated a couple of things for us one of them is this amplify folder that contains all the code for our backend like api authentication types and so on uh in most of the cases we don't have to uh go into this i was not showing okay thank you in a lot of cases we will not have to go into this amplify folder another thing that it was generated for us is in the source and here we have models these models are the things where the database models that we declare for example the basket is here uh basket dishes here dish and so on using these models we will be able to query fetch create entries in our database and the last and an important thing that was generated for us is this aws exports file that contains information on how should amplify connect to the back-end basically to what back-end and to what services it should connect so never added this file because it is auto-generated but we need it uh yeah as i said in order to connect to amplify so let's go ahead and open up.js and start uh setting up amplify for that we will need to import amplify amplify from aws amplify we need to import the aws config from the source directory source then aws export basically the file that i just showed you this configuration file and now having uh now having the amplify here and aws config we can simply do amplified dot configure aws config and with that uh our amplify is configured and ready for our next steps let's have a look if we didn't i think you'll have to restart everything i think i remember this happened yeah as well yeah it actually stopped so let's start with development server again uh some dependencies okay let me grab it here and run on android and voila almost almost almost there why it's stuck i don't know we can refresh yeah new update available come on better than the previous time 98 i have reloaded that can i cannot wait well that's the patience okay so guys are you following the this tutorial or maybe you asked that already i didn't heard while looking for the problem with volume sheet we had some errors wait a second what's happening because i don't see the error here [Music] come on uh let's do open on android hello nigel and here we have it everything is working fine uh that means that we configured amplify correctly uh the only thing that i'm gonna show you here i don't see the error you know but in the previous project uh sometimes amplify when you configure it like this will throw you like an error in the logs it will not crash your application but it will say something like and handle promise rejection something with region not being set that error is coming from amplify trying to configure analytics models but we don't have it yet so we have manual to manually disable analytics for that let's destructure aws config inside an object because we want to override one thing from the amplifier config and that thing that we want to override is called the analytics and li tics and we should say disabled true so that's actually the problem that leonardo menor was referencing to today and here's how you fix it if you're still here yeah we simply disable analytics module and we will not see that uh problem we see something else can find okay i was just typing and that's why okay so uh our project is set up and ready for the next feature and our next feature we are we connected uh our native app with amplify we have done the data modeling let's have a look if it is finished uh by going to amplify studio and we see at the top right corner deployment successfully click for the next steps what we have to do is to pull again the project and in that situation we will have access to the courier the transportation modes and the things that we just added there because right now if we look in the models if i search courier there is nothing but we will pull again our backend wait a bit for for it to to pull zaid is asking why are you not using your mac so he is still deciding whether he likes more no like um if i do the live stream for the mac like i don't know it doesn't support so many things when i work normally on it like it runs perfectly and i love it but when i do the live streams like it's it's a pain like and you saw it in the first day so that's why i switched to the windows it's a bit more powerful and yeah we successfully pulled everything here let's now go in our models dot yes and search for the courier all right we already see that the worder has a field courier and we see a lot of things about the courier and so on that means that we have added correctly our new uh model in our database perfect uh what's next lucas authentication authentication and how much time do you give me to implement well authentication well now i know how fast it is so i'm not going to impress you i think yeah the first time if you ask this i would have said like i'll i don't know a few hours probably all right so let's um let's implement authentication for the driver side application so that the drivers can authenticate first and after that like see the application so for that let's import a higher water component called wifi from aws amplify react native now the next step is instead of exporting the default uh the application here let's remove this export default and export it a bit later so export default application and this is the same thing as we had before but now we can uh put this application inside the with authenticator higher order component and what it will do it will simply add authentication and will render our application only if a user is authenticated that's it we have a fully functioning authentication system and if i reload the application the longest thing in this whole creating authentication part was importing with authenticate so yeah that's how fast it is i think you'll have to rerun your app again because you just pulled your changes um yeah what's happening here operation not permitted on what okay and i should update my expo but it's a minor version so no worries there oh no from four to five use ios simulator i cannot use a simulator here on the windows machine uh but it works well on android as well but we are testing it both on ios and android so one day we do ios one day android all right so here we have it our authentication screens so what we can do here is we can go ahead in the sign up screen and create a new account here so for the username i'm gonna add my support at not just dot dev but that's username not email uh for that um in this situation we have set up our authentication to work with emails and yeah the label should be different uh but it expects an email so okay this by the way can be uh adjusted with some customization but we are going here with uh easy route like with with authenticator and we're gonna deal with it as it is so for the number just some random numbers but email is important because after pressing sign up we will receive a email and in that email we will see a confirmation code to confirm your account and here i have mine seven five five three eight seven confirm and now we are redirected to the signing screen and here we can go and sign in sign in we are here and after reloading everything we will not be presented with the authentication is because it automatically remembers and caches that you are authenticated it keeps track of all the tokens and all the hard parts of the authentication system and we don't have to to deal with that which is um amazing so we are done with authentication but we um we are not done with the whole authentication system yet because right now if we go to the amplify studio i can go to the user management and i will see this account support at not just dev but if i'm gonna go to the content okay come on i'll guess it's not going to be here it's not going to be here and if we're going to look at the couriers the couriers are not in the database and i explained this in the data but i'm gonna repeat uh shortly uh authentication and database they are completely independent and uh it's our job to connect them and to save a new courier whenever he creates his account in database so that's what we have to do whenever a courier signs up the first time we should see are you already in the database or not if not we should uh just display for him a simple form where he can put all the details and with the details we can save him in the database and uh the next time when he signs up we'll see that he's already provided the details in the database and we don't need to ask them again so for that uh reason let's go ahead and from the asset bundle that actually you know what uh yeah actually from the asset bundle we need to bring the authentication screen but you know where i'm gonna bring it from i'm gonna bring it from the user side application because we have done the work already for them for the profile screen with a form where he will be able to put his details so i'm going to open recent uber its user the one that we have done did i you close the other one so i should have done a new window and here is a courier application and in the source screen screens of a courier application we need to drag the source screens from the user side application that we have done in the first two days we need to bring the profile screen so let me give me some time i'm gonna do it okay something like this no the screen is too small for me so from user side uh project if i'm gonna drag and drop will it work profile screen i hope that it will so i have here profile screen i have here profile screen uh that means it's perfect i can close the user side application for now or maybe we should get the authentication context as well or should we do it from scratch we can do it from scratch i mean but now we have these uh in our driver side application we have screens profile screen uh let's double check if all the imports are okay here so from react native um from models yes context the context we don't have it yet so we will have to develop this context but you know what i'm gonna grab the context as well i think yeah that makes sense it will take two weeks because we have done it already and the logic for that authentication context is mostly the same so let's go ahead and create a folder here contexts and again do new window let's open the user side application juan is asking uh and one second one second and i'm gonna address it and from the user side application from the source context let's bring the authentication context in our application and let me double check if it didn't delete from there no okay now i can close that what else will double check the fields here and the next step is to fix a bit this this information here because we are not going to work with user model but with courier model so before doing that let me see what question was there i guess i'm guessing okay will there be an issue if a user that is already in the database as a user later signs up as a courier if a user that is created like in the user side application if he created his account there he will be able to sign in with the same credentials with the same email and password uh to the driver's side application because we are using the same cognito user pool but the first time when he will enter this application he is going to be asked to provide more information about himself like uh yeah like providing them the things that we are going to do in the next step basically the the transportation mode for example and so on so yeah some of the data will be duplicated like the name but that's not a problem the good thing about this approach is that we separate the logic of users from the logic the logic of drivers so in our of context provider as i said we are not going to you work with user model but with courier model because we are going to save couriers we still have the authentication user but instead of database user let's say database over here not to confuse ourselves and the same here said database courier you state sub is as well coming from the of user because we are using the same um cognito authentication service here set of user perfect when the sub changes we are going to do data store query not user but courier cool rear and here courier warrior sub is equal to the sub of the user that is authenticated then users couriers set bb courier with couriers at position zero so here we are just simply querying from our database to see if we already have information about the courier with this sub with this subject and now in the off context provider we will send the database courier we will send the set database courier and that's it that's it the last step to finish setting up this context provider we we need to wrap uh our application with with with that provider so let's go in our app.js and import our contact provider from source contexts and then of context now let's wrap our navigation with our of context provider like this and by doing this now all the screens in our navigation will have access to uh using this uh of user database courier sub set database courier and so on so let's go in our screens and uh because we renamed from database user to database courier we need to rename it here as well so database courier use of context and where else basically everywhere where we have it and here we have it two times why we have it two times we need it we can do it in the same call and here not set database user but set database courier on save database courier basically it was easier for me just to search and replace uh but if we started let's go ahead on save yeah so ferrari is asking uh hello do the bottom sheet works on android devices i tried it but it didn't work so vadim is using right now a bottom uh sheet on android device and we've actually implemented a fix at the start of the stream because at first it was important so yeah you could rewind the video in two words what you have to do is to import gesture gesture handler root view from react native gesture handler and wrap our navigation with this gesture handler root view and also provide the style flex one yeah that's it after that it's gonna work fine we also had that issue so don't worry okay back to our uh profile screen here we're gonna also update some of the the names here so instead of update user it's gonna be update courier and when we call it as well here not create user but create courier let's take it and rename the function pay attention very closely at everything that we are refactoring because one little step that we miss and we're gonna have some errors but uh let's go ahead and yeah const user courier await data store save we are not doing a copy of a user we are doing a copy of a courier copy of database courier updated name at least these ones are good we don't have address but we are going to cover that in a moment so set database courier with the newly updated courier and in the create query oh my god so i'm gonna just be silent and do it i'm not gonna pull your career set database courier with uh here i think we are done search if there is anything called user yes let's search user we don't need it from the models and that's it we don't have any more references for our user um let's see first of all this thing on our screen and for that we need to we need to check if the database courier is null that means that the user is not yet saved in the database as a courier and in that case we do not we shouldn't show the map here and all our screens but we should see the profile screen and for that we're gonna implement some conditional rendering of the screens inside our navigation index the first thing is we need to import the newly added screen the profile screen full screen as profile i prefer profile screen we need to import the use authentication context from the context because we inside this navigation we need to determine if the database courier is defined or not re yeah career we need to decide what screens we are rendering here so let's add this check so if database courier is defined then we need to render something otherwise we need to render something else so if it is defined that means that the user is saved in database and we can safely show him our word screen where the delivery screen and so on we cannot have two children here inside this um inside here uh we have to uh put them in a simple empty fragment just in order to have only one child here and for the second option when that database courier is not defined we will render a stacks dot screen with a name profile and the component is going to be profile screen while you're not giving suggestions let's save and let's reload our application i'm curious if it's gonna work hey sulak by the way i remember him as well from the previous streams hello animal is asking hey please help me i'm from java background can anyone tell me should i start with react and switch to react native or probably vice versa i think if like it doesn't really matter if you start from react or react native i started with the react native vadim doesn't remember but he says most likely he started with react native as well and then learned react so i think it depends on what you want to build like either websites or mobile applications yeah i agree um someone says that you need drug jazz knowledge uh before getting into react native but i don't say so like you can learn the react jazz basics while learning react native or by learning recognition yeah i agree uh of course like it's gonna be easier for you if you already have some experience with rockjs but i don't consider that as a prerequisite uh my server stopped yeah so let's start it again npm start that was actually my background before before starting to learn like react native also i knew java a little bit of c plus plus and android photo yeah actually an android yeah but so and then i started working learning react native and then gradually learn react j like as well when i needed to and it wasn't a hard switch or anything it was pretty easy to like figure out what's where and what's doing what after that so here we have it our application loaded uh what happened uh like in our application well let me close everything so our app.js is where everything starts we get here to the authentication context and let's see what logic do we have in authentication context when the component is rendered so if we go to the source context we see that in authentication context we have this use effect that runs when the component mounts and what it does it gets the current authenticated user perfect it gets it and then it sets in the state after we set in the state this sub basically by d of the authentication user will change and it will automatically trigger the next use effect that will query the data store the database for a courier wave that matches this sub that we know it has it doesn't have anything so it sets in the database so it sets in the state the database courier with null now back to our app.js the next step is our navigation okay let's go to navigation what does our navigation do first it gets the database courier which you remember is null it checks is database courier defined or is it null it's null when that means that we have to render the profile screen perfect that's how we ended up here and that's what we uh needed now uh let me go ahead and in the profile screen let's see if we need all of these things for example address is something that we don't need because the database courier we said that doesn't have an address we don't care about the address of the courier we care about his latitude and longitude but again it's not going to be set here because he's going to move and we are going to automatically take it from his location so we don't need this one as well what we need here is a way to check his driving um the transportation mode right because if we look at the data that we have in amplify studio for a courier we have name we have sub the sub we will get from them um authenticated user latitude longitude they are required but we're gonna initialize with zero and later one update with his real location and then transportation mode for transportation mode uh two uh remind me if we have any default and some very easy drop downs in react native without installing without installing any libraries i don't want to go through installing libraries only for this feature there is a deprecated one and they say like you should use community created once so you know what i'm gonna create a selector myself is it a good idea or not i don't know it will take more time i think this one will take more time look we're gonna we're gonna have uh two check boxes for uh driving or what what's the other one driving or driving but with the bike oh no you know what we're gonna have like even better uh give me some icons for driving and cycling and we're gonna have them here in a view um we're gonna have two two icons with two boxes so this is box one for driving this is box two for uh true cycling so style here we have flex one let's do background color white or i know red for now just to see it on the screen [Music] and for the icons did you find something i sent you a bike already a bike the bike is material icons pedal bike but we need to import material icons on the top here as import material icons from expo actor icons so let's see material icons and the second one should be under the name size 40. okay there it is and i can duplicate it for now accenture all ready for a car as well just in case you want it and for the car is an icon font awesome 5 car and i need to import it as well from vector icons now let's go ahead and where is it here it is for this view that contains both of these buttons i'm going to say flex direction roll okay now as i said we will do let's do also justify content please make the car icon bigger as well it's so hard to watch okay i'm not going to work there miss 40 don't tell me that you again stopped okay we have him here and let's style the the whole thing so let's add them some margin some potting tan uh and some and some border with of one border color uh gray but it will depend if it's selected or not and border radius 10. perfect like this or right yeah yeah something like this now let's give the same style for our second icon and you know what we have to do we have to keep a state variable with the selected icon so transportation mode and set transportation mode is equal use state and by default let's uh initialize it with a value transportation modes that we import from the models in order to access as an enum this is a long line of code yeah so we say that the by default the trans the selected transportation mode is bicycling what the i i thought it's driving but it's okay driving let's go for wave driving and in that case i'm gonna i'm gonna but it's okay now what we have to do is to say uh will green look good light green i don't know like i can give you the green from yes green like this we won't see the screen for too much so yes so let's uh set the background color depending on what is our state uh what is the current transportation mode selected so we're gonna do it like this if transportation mode is equal to the driving um we're probably gonna have to do it like this then the background color will be light green otherwise it's going to be white just saying if you want you have the code in private chat yeah color yeah okay lucas gives me a better color okay perfect and let's do the same for our transportation mode uh for our background color for the bike as well but here we need to check if it's bicycling now it displays properly but whenever we click on some of them we need to move from one to another and for that we will need a pressable to detective press events on the view itself oh let's go ahead and replace this view with a pressable and say on press we want to set the current transfer transportation mode to bicycling basically this one if i press it switches automatically and we need to do the same for the car because now i cannot go back to the car and if you guys want you could like extract the comparing what mode to a separate function and then also change the border color and icon color to white or green it will look even better yep i also think so but for now what we want just to select are you bicycling or driving and that's it and this information is stored inside our state so that the next step is that whenever we first of all create a courier we will save the name we don't have an address we for the latitude let's do zero and zero because if i'm not mistaken we made them required and but we don't care about them at this moment we will care later the sub and also that transportation mode right i think so i hope so yeah and let's uh do the same for the update courier the updated name yes we can update name actually we were not going to update it but let's prepare it address we don't have it later longitude no only the updated updated dot transportation mode equal transportation mode that's it so now i can say i'm vadim and i'm gonna drive a bicycle let's save uh field letters should be of type string number received why did they make them string lukay that's not good uh if we look at the data here what we will see is that latitude and longitude here is string but everywhere else for example for a user it's a float for yeah we need to change from uh string here not required but it's not required which is good so that's perfect let's go ahead in our amplify studio and change the data type for latitude in the courier model to a float number and the same thing here with a float number and here is required but late and long is not required perfect that's what actually we needed let's press save and deploy and while we are working it will deploy the new changes and until we get to the point where when we need validity to the longitude we're going to have them there but now because we are not required we can keep them from creating when creating a new courier and now let's give it a try one more time save and we are right away in the application and the next time we reload replication we will fetch the database courier we will see that it is there because i can show you in the content data content i cannot see the content because it's deploying but basically we see that it automatically redirects here and i can also for example in the context of context let me simply console log database courier by doing that i can see it in here somewhere courier id latitude no longitude null name vadim transportation mode bicycling perfect exactly what we wanted i think you should have selected driving it's easier to uh demonstrate while driving on uh we can wait later yeah yeah uh but yeah we are done with our authentication system and we store our user both in um both in the cognitive world authentication that we didn't implement much where just use the authentication module and also in our database yep all right okay with it's good progress right now after all of these changes we'll start getting into into the meat yeah yes because we are done with um authentication so the next step is actually use our driver crude as well because we have created our driver veer uh we are done with this as well uh the next one is worders on the first screen that we see here we are displaying some dummy uh dummy worders but what we have to do is to actually query uh the words from our database and display them here right lucas yep right so let's go ahead and do just that and while you're starting algomatic i'm going to catch a short break and come back in a second okay so uh let's go ahead in our screen that has these words and that's the worders screen let's open our index.js and here on the top we see that we are simply importing orders from our assets data from the dummy data and we are displaying them here first of all on the map and second of all in the flat list okay now our goal is to first fetch these orders from our database save them in state and then use them to display on the map and in the flat list to save a mistake we will need a state variable called orders and set orders which is going to be a use state and by default we're going to have an empty uh dependent an empty uh array for the worders my use date was not imported from the right place it should be from react so let's delete this one here uh and the next step we are gonna need a use effect to query the orders when this component mounts so let's go ahead and say use effect when should it happen well when the component mount that's why we have empty dependency array here and we will need to query orders using datastore so let's import datastore datastore datastore how do you say it data datastore i say it like that and we need to import the model that we want to fetch the model is going to be inside the models folder and the model is orders okay let's go ahead and using datastore datastore datastore okay uh let's do query and we're gonna query the orders after we query them then we simply set the worders when you when you read this it's like it's so close to how we speak like how how english works yeah like with data store query rewarders and then set them in state makes so much sense if you would add set order state that's one word after change the naming and it's completely the same yeah so uh with that we don't see any worders we don't have any worders i don't know do we maybe oh because probably oh it's warder actually yeah the model is order yes and and then maybe at the end i'm gonna show you how not to have that small moment in time when we see that profile form because it's quite easy to implement we just need to add a spinner layer while it is loading uh and if i is not an object order user and name uh let's go ahead and console log uh orders and see what date data do we have there uh because we might not have everything that we need thank are you displaying it i think it displayed and it was undefined maybe it's because it's still updating the in the amplify no i don't think so okay and arrow core one fetching the backhand missing credential in config what okay it's done let me see if it was updated so for the courier yes float and float and also check if there are any orders yeah um so let's go ahead and pull first of all because we have made these changes and they are already updated and after that we can continue uh but yeah not to forget to pull everything so amplify pull while it's doing that you can quickly check if we have any orders created already yeah in the back yeah that's true let's go ahead in the content i think we should i don't know what happened i remember that we were doing that but no the error is saying that there is an order but there is no dot user there so i i just need to look so for example orders yeah we have a couple of them but do we have a yeah a user there uh it should be but maybe not when we query it maybe we need one extra query uh let's go ahead i think we only have user like yeah i think we will need that extra query for the user yeah so my server again stopped and i can do npm start again yeah it the worder has order id use that a worder have user id and based on that user id we will need to not ios please basically to fix that issue without even looking at it we can say something like this it's in the water item right yeah let's and while you're still here okay okay i don't know what happened there and find it's not an uh evaluating you order username and for that let's go in our components order item index and here we receive a but when we try to render information about the user we need to safely access it because at this moment the user is not queried basically in the data about the user we don't have it so to show you we can look at the console log here and this is the information about the worders that we know so order we know information right away about the restaurant because we you know why we have information about the restaurant but we don't know about the user uh is because of the way we created the relationship we created the relationship from an order to a restaurant as a one-to-one relationship but in our case we created the relationship from a user to the worder in order for easier querying all the orders for a user so now we just have a user id but we don't have user itself so it's not that hard to get the user itself as well uh for example here in the order item we can query it here most probably so let's do yeah yeah we can query it here so const user set user use state null initially and after that we can in a use effect i you don't work on my side import use don't press enter use state from react and we will need to import data store from aws amplify and also import user from models and that's it so in this use effect we are going to do data store dot query user and we know already the user id because we have it in the order dot user i d and we can query directly the user and then simply set the user in state and at this moment instead of working with worder.user we're going to work with user directly from our state user and we see five orders from different restaurants oh you know what the flat list is not i saw this error on android as well so while you are working let me try to i remember yeah i remember some of his errors with flat list but okay we're gonna see later why it's not working here that the scrolling but uh queering our worders and displaying them here is working and all of this data is coming from the database so i can look here at the water we see that it's 72 kilometers away but on this screen we are not querying the data yet so i don't i shouldn't go here because everything is here and all the waters on the map as well are displayed properly because i created them somewhere in moldova and i'm gonna try to zoom in if i'm gonna be able after you're ready let's uh try to fix it i found one way so here on the map we see two different restaurants because the worders are from the same restaurant that's why we see them here not the same restaurant oh two of them are in one stack two of them three of them are from one restaurant williamson that's why we see the williamson here and the other one is from culture and so on and i see that we see them here one nice feature as well that you could add like for viewers can add is if there are multiple in one show icon with uh like a pop-up like saying five or something like that that's good so i found the way to fix it so go to the top of this page and instead of to the top top where the imports are and instead of importing flat list from react native oh i remember yeah import bottom sheet flat list from the same yeah from here like right yeah bottom sheet flat list flat list so basically this is the same flat list but it is aware that it is inside a flat list and it knows how to scroll properly so let's just replace our flat list it has the same props uh yeah just how how it works behind the scenes and now i can scroll through them it properly knows like when to scroll the list and when you are closing the bottom key yeah but it it works so good like if i scroll slowly it scrolls the list but if i scroll very fast it automatically scroll uh closes this one amazing yeah uh perfect so uh that means that we are done with what we've wait a second where they're screwed so fetch worders the next one is the order details page basically whenever we press on one of these worders we need to fetch the data from um from the database as well yep but you know what before moving there before moving there i want to show something on the worders screen we shouldn't query all the orders we should query only the worders that are in the state ready for pickup so for that let's go ahead in our database with amplify studio let's grab one of these orders and let's make only this order ready for pickup because you as a driver should see orders only that are ready for pickup on the map so to filter the worders based on that status we're going to provide a filter function here so for the order i want to filter the order based on the status and it should be equal to ready for pickup and just by doing that we see only one order nice great amazing and i i'll make the one more other restaurant let me see how to understand for or the restaurant i did make this one so it should be different it's probably this one yeah this one is different ready for pickup save and now if i'm gonna refresh refresh take it easy we even heard about him singing well this stream is and on another level like before they am going crazy yeah after accepting a word our driver could hit the back button on the android navigation and exit that word when clicking on the order again the example is possible um yeah maybe maybe we will keep track of the active order somewhere and always know like hey you have an active order go there deliver it uh all right oh the next app as we said is that details page and we will do that in the order delivery screen so let's grab it probably i will need to right away move my position there but we can do it later because it will not be able to calculate the route from here uh but yes we don't need this order anymore go away we don't need these orders we will query them but i think it makes more sense to change the longitude and letter to all of the restaurants because right now we won't be able to simulate the driving if it's the same as on the iphone i think here it's a bit different i think here like you're selecting this driving from there roads that you see yeah i think you can i don't know import oh here just drag your location on the map no can you click and oh and okay and from here to here for example okay and we can save route okay we will be that's good yeah okay so uh what else we will need we use state use effect we will need datastore here so let's import datastore and we will need the import order from models and that's it okay now um first things first let's declare our state variable here for the order const order set order use state null now in order to get rid of that error we will add the if statement before rendering everything here the if statement will be if order is still null that means that we are still loading so let's return and i think we have that already for a little bit higher did we uh we added it for i think user location so driver location oh let's grab it down there yeah yeah make sense because it's about like what's rendered on the screen so i'm gonna combine these together and say if at least one of these two are not defined then return this activity indicator this activity indicator because lucas will not let me leave without having it large and also color lucas yes exactly and find variable worder where we hear you can't find variable word there maybe it's there's going to be a lot of orders but we don't get here [Music] oh here for order delivery location uh restaurant oh delivery location so this delivery location we should initialize them also like later on but we do need this for check for checks yeah actually i'm going to grab them and add them here i think you need to add them on there no that that would be an option but again like i like keeping them here so we can say access safe yeah safely accessing them probably we definitely will have to change them because it's going to be a bit different like for winter and so on uh but at least for now it's good if i'm going to go here i see the loading indicator because the order is not fetched yet what we have to do is to scroll up somewhere here and let's hbo order in a use effect we fetch it when we get here and we will need them we will need the id of a worder so we will get the id from the route for that we need to use route from react navigation native where we have navigation i'm gonna also get the route route use out oh my god one two words like seven mistakes actually one well and the id of um of a order is going to be inside route dot params dot id here as well safely if i'm not mistaken we already are sending this whenever we press and i'm going to add this id to the use effect because i want to refresh the order whenever id changes so data store dot query order i'm going to provide by d then i'm gonna set order but let me also check if id is undefined i don't want to do anything so record okay now if i go here and define is not an object evaluating worder.user yes that's right because we need to fetch the user of a worder separately so let's go ahead and do the same user set user initially it's going to be null and and when should we query the user when we already have the ordering state because we depend on the order dot user id to know who is the user so let's add an effect on this property yeah a lot of effects and the effect is going to be user simply user not order no order word order if order changes we can order design define return but otherwise query them where user from the models with the order with id order dot user id and then set it in state set user let's go ahead and see once again but uh is whenever we do let's check dot user and whenever we are doing this we should change to innate location we should simply change to user dot latitude because it's in a separate state variable user dot longitude uh same things here user dot latitude i think we can simply pass that well um one option would be not order with user so to still show the loading indicator no i mean like that's why we created those two constants oh the coordinate so this marker is going to be the user location or how is it called i think uh i forgot actually how it's called delivery location yeah yeah so this is delivery location and here user but as well instead of always worrying that the user can be null let's add uh the third check here if where there is null or user is null or driver location is no evangel loading indicator and only after that display what we have here so we have where are we order.user make sure that everywhere where we access the order.user we change to them simplyuser here as well and here no no no no no no yeah that's it and now let's see if it works okay probably it failed to calculate the distance but it takes some time because it's far give it a second i almost tip spilled my tea on my computer okay don't do that so as we can see we have a title we have a addressover restaurant and this is coming from the database as you can see dsda and we have everything that the user ordered great no but that's the that's the user order we need to change uh that data because everything that user ordered is dummy data right now oh yeah so let's go ahead and find i'm lost most likely you need to reload we have in egypt what a user is there uh let's uh let's see what data are we working with uh for the restaurant let's see his address the address is yeah this one is 46 and power 1 is 28 remember for the user we should also say 26 and this one 48 no no i remember and we already forgot i think it's the other way around like latitude should be 48 restaurant 46 and 28 46 and 28. so uh user i'm gonna say 40 6 and 28. and that's the same for my location so for location let's do but now where did you split the coordinates i saw someone said that you can set the specific coordinates a single point here i think maybe okay so let's see where are your leveling one save this point oh okay that's nice that's even nicer than ios i think set location i can do and i'm here and now if i'm gonna restart the application we have a new data [Music] come on are you working something is n no no i should clear up like everywhere yeah muscle logs yeah um yeah boom most likely we'll have to restart again run on android i don't want to i don't think it's gonna work like that oh no it don't work so let's go ahead and open our first order here and we see that we are wow uh in total the whole drive is gonna take yeah because this one is quite far not in moldova anymore so you know what i'm gonna put everything like around these two but i mean it's not it's okay right yeah it's okay so we see the updated data here and we see that we have to go first to a restaurant here and then to the user in a completely different country perfect uh here what do we have we have information about restaurant it's working address as well because we can see it in the restaurant williamson this one we see williamson uh we see his address florian forest and that's it but everything that we need to know from the restaurant and the same thing for the user we see the end address that is here okay yeah we what did we added orders uh other details in our uh modeling when we were modeling the database because right now we're just displaying hard coded data for onion rings big mac for this one yeah are you asking if we can uh query them yeah if we can display them yes we can display them and for that we're gonna need to query to do one more query but it's possible so the same way as we did for the users we're going to do for the dish items set these items use state and empty array because we expect them to be an array and we will query them when also the word changes so same way here as we query more information about the word like the user we also need to query more information about the worder like dishes so datastore.query worder and we will not query all of them but we will filter so word dish or dish dot order id should be equal not equal we call it and we provide equal to the order dot id and then we simply set whether dishes set dishes items okay and let's have a look at them let's uh go ahead and check if we have it before rendering i think as well for order user driver location and order items uh i wouldn't say to wait for it but if we don't have that then it means it will crash unless you add it it will not crash because it's oh yeah this is empty already yes yeah that's that's the beauty of it so we can do console.log order the ish come on how do they call them these items said dish okay these items hey let's have a look here array not not this one i need to clean up a bit i promise mom i'm gonna do it later we still need to go there because we are on a different screen so let's select this one and we see water dish with a dish and with the quantity that's everything that we need oh uh now let's display them here instead of is dummy data uh here we have onion ring so i'm gonna delete everything uh else except this text and i'm going to render it in uh in a bottom sheet flat list so in order to work here so it's going to be shed flat list where are you some on the bottom yeah here it is okay so bottom sheet flat list for the data we're going to work with these items and for the render item what we are going to do we are going to get the item that we want to render and we're going to simply render this simple text and after that close the bottom sheet close everything and here we have it so for the name uh we're gonna do item dot dish dot name and for the quantity it's gonna be item dot co quantity quantity quantity quantity oh it's not working maybe it doesn't have any dishes if i go here i think maybe er it's hidden somewhere and we don't display the water details container do we need this one if i don't have it hmm these items if i do it like this one two three and here i think it is like loading them i'm pretty sure but it just doesn't display them maybe add like flex one on the whole view and see what we yeah yeah yeah have it here or the details container try to set the background to red and then we'll be able to see where is it okay you know what uh another way to test it and is to do here you you don't have to do it guys like i'm gonna do console log item or this i think that's how you do it so right now i need to remove this one okay like this water dish another word tradition number and another one yeah okay something is oh maybe let's see where yeah how do you access them you know i'm not even sure that having a scroll view here like a flat list here is uh perfect maybe we can simply map through them because they are not a lot like they will never be like a hundred were their dish items well you don't know maybe it's a party but maybe so i would actually do it this way i will do dish items dot map and for each dish item i am going to simply return this text here and go away bottom sheet flat list this item and each item where the problem was is it the flat list yep yes and now it says that it needs a key so we can simply do key is equal to dish item dot id and for the styles i can remove the color red and we are back to uh to normal yeah okay okay okay all right um the only thing is you know what lucas no i'm thinking if there will be a lot of them it will push the buttons down i think no okay no at least it doesn't push the button down so if we have time we can work on it uh later on i'll fix it yeah so we are displaying all the information all the details about the worders okay daniel is here hello um the next step the next step lucas is to actually accept the order right yep okay and add the order to accept that order state if that depends uh how are we approaching this do we need it we need it like to know in the whole application if you go back and try to accept another one for that but um look what we're gonna do i think i want to extract the logic of like accepting creating and so on in uh in a context because we already have a lot of things here yeah it's a lot so we have one hour okay uh let me think yeah let's let's let's go with the context and we are going to create like this context in order for us to know on in any part of application if we have an active order like to to interact with active order and so on so let's go ahead and create the order context dot gs and let's grab some of the things from here from of context that we will need for example this one is going to be worder context and let's define the order context provider now let's return the order order context dot provider with the value empty object at the moment later we're gonna add it and everything that we are gonna receive as children we're gonna render inside here to give with our screens access to the context now let's export default worder context provider and also let's export a helper helper hook called use order context that will help us to get them context using use context or their context okay no no no no no no uh in app.js we need to import that provider with context provider for our order context let's rename it as well to word our context and let's wrap our navigation with a word or context provider put navigation there so that authentication is first and then order context because in where the context we still have need some information about the authentication okay look we could have move we could move the functionalities that we have already there like querying the order here but maybe we will do it later now what we need here is a function on accept on accept worder on accept worder and let's expose it and on accept worder we're gonna receive a worder here now uh let's get this function inside our screens order delivery do we have a urge contexts here we don't have context here uh but we will get them somewhere here it's going to be used for the context the one that we define right now and from the whole context at the moment we only need that function uh except order on accept word or just accept worder because on accept word feels like a callback function so accept order we should call it on button pressed uh picked up or misaccepted and the first one we are when we change to access this one right yeah okay so at the moment we'll still use these said delivery status but later we will move uh to something else but now we just simply say accept worder and we can say that word of it we want to accept were there now in the order context what should happen when a driver accepts the worder uh we should update the order and assign a change status and also and assign the driver to the order yep so uh to assign the driver to the order we first need uh the database driver the database courier okay courier for that we can easily take it from the use of context and we can take as database user otherwise courier okay now uh to do what we have to do we have to use data store to save a copy of the order that we are trying to update that's how we update a word an item with data store so order dot copy of the order that we are working with and in the function that will receive this updated order we can change for example updated dot status equal to oh we are missing a status right but after you accept but yeah like in this case we can go ahead and work when the driver accepts we can still keep the order in no no no no no but you can hard code it here what what's the problem i need to update the data yeah so why can't you just say like after accepting the the the state will be picked up oh you don't have that that's the problem so let's go ahead in our database because we will not be able to work without this at the moment and add in the word in the data where there's status let's add this accepted accepted value and i can probably even move it right i don't know if i want to and why would i i don't know yes it's okay yeah and after adding this accepted let's save and deploy uh deploy and while we are waiting we will uh we will just work for the moment we for example let's say you do you really want to do that yeah i'm going to set it for now to cooking because i we need to move to progress with our application update to accept it and i just want to show you how how it works now another thing that we need to change is the word dot courier that we will set why is it like this oh wait a second and in here like this okay update status cooking a bit courier courier and let's also uh save this new worder as the const what should we call it exactly what active order were accepted if active order and set active order what are you thinking about um thinking about just water don't you think that will be like very hard to because we have order also in our order item we have order in our ah yes yes no the problem the problem here that i'm thinking about is that inside our water delivery here we are working with we are treating this screen for both unaccepted orders and accepted worders [Music] but then if you click accept if you click accept the order it's that's what that that's going to be the one that you accept yeah but uh then we're going to have to add a lot of checks like are we working with an accepted order or with a word that we re fetched from the props but then that's where you have active order we'll see maybe maybe it's going to be easy so what do we have here well we need to do uh okay data store save and after we save we simply set active worder here what i am interested right now is to see that we actually assign a driver to a worder and for that we're not going to be able to see until we deploy everything here yeah now that i'm thinking yeah that might be a big problem with uh because we're treating that screen as this with order and later act order as well yeah yeah yeah that's what i'm thinking i'm i'm just trying to think of separating into two screens that was our initial like idea after you click that green button that means that's it you accepted this but it makes sense to see the route that you have to go through we'll see we'll figure it out uh maybe we will take some time tomorrow probably to refactor it a bit uh but until everything is uh deployed and we can see i'm gonna take a very small break and i'm gonna be back okay and it's updated and it's updated so i don't have time for the break uh let's go ahead and do the pull command because we updated our backend let's pull everything and we can right away change in our order context the status that we're setting here yeah we first should wait for it to pull and then we will have access to it hello and welcome back at dtr accepted we have it so let's set it to the accepted now now now we can go to the content we can look at for example let's get this order okay and say accept order nothing much changed but if i'm gonna look at the orders one of them should be accepted or it's still cooking oh [Music] i think it's uh it didn't update and it moved it to cooking uh okay i'm gonna have to refresh it one more time but the good thing is that it has a courier and the courier is i should have named it something else but yeah that's good that's good let's try it one more time because i didn't refresh the application so let's put it in ready for pickup and let's remove the courier from here remove yes come on it doesn't want but that's not that wasn't the problem the problem was with the status so i updated it here let's refresh the application tracking option yes we're going to implement that as well not sure when but uh i was wondering if he's thinking about the tracking option for a user who ordered to see where the driver is or i think we're gonna do that as well because that's very interesting i'm not sure how we're managing time and when probably not this week i don't think there will be time this week but maybe okay we'll see we'll decide so we still have two orders let's take this first one let's accept it and let's see how it updated it in our database if i look at the last one we see that it is accepted and it has a courier and if i'm going to refresh the page i shouldn't see this order on the map already because it's not in the ready for pickup state and other drivers will not be able to take it come on okay i probably need a short break so while it loads oh wow again so yeah you should just go so yeah the the thing is that yeah we don't see that word there it's already picked up by someone by someone it was us uh but yeah we are filtering properly yeah let's move it back to to accepted to ready for pickup hey and uh yeah now definitely i'm gonna be back in one second okay so vadim really needed a break after this intense two-hour coding and how are you guys holding up i'm yawning a lot because i didn't have my nap today so i wanna and i didn't had much sleep as well so i really want to go to sleep um yeah so how are you guys holding up are you coding together uh what about order history and ratings options with comments about food items so uh order history you will be able to see your order history uh rating options that's probably an extra feature so we're not sure if we're going to do this and if we are going to do this probably uh maybe not this week but yeah we'll decide we'll see but for order history you will see that uh how long do you take naps my nap is 20 minutes i go to sleep i set my alarm for 20 minutes and after i wake up i feel like fresh yes but that works for me as well and i remember when we were living in belgium together you didn't used to take naps and when we were studying but now now i take nails because uh i go to the gym at 5 00 in the morning like like 40 and like at midday like i need that like 20 minutes per hour nap just to start a new same way uh so what's the next plan what are we doing here we power naps way to go yes james i agree definitely agree i love him okay my game is in spain right now in spain without what without us [Laughter] hopefully not uh so we pick the worder but we still see no way no no no no i i updated it manually oh yeah just just to see it just to see it there now i'm just trying to think while our next steps for example i think in our word delivery screen we will not have to work with the delivery status because we will take it from the active worder yes now we don't need it anymore but also i think the next step is that's pretty important like to not allow take another uh order while you still have an active order which is in accepted or picked up while it's not completed in the completed state you shouldn't be able to take another order yeah but that's probably the next steps now i'm trying to think how to you know how how we we can do it yep we can say something like this where is the well we need to take the active order from context equal use active order trying to to code in my head like all the options still banned and trying to understand like which one is the best one yeah this is a tricky situation right now there's a lot of gifts and no you know what you know what you know what i'm going to move the logic of for example fetching the worder fetching the user everything related to fetching and orders basically all the logic for the worders i'm going to move it in the worder context and i'm gonna work here i'm gonna tr i'm gonna keep the same order in state being it active or not and i'm gonna only uh and i'm gonna decide if it's active or not based on it uh it's status yeah you could yeah yeah you can even have a separate variable that's only for that yeah yeah yeah a separate state like he's taken or something if i need easier way so in that case let's move back to order here and set order uh use state and uh from there this order delivery i'm gonna grab these two use effects the one but it they shouldn't be use effects um uh here in the user fact when we receive a id or the word that we need to query let's call a function fetch folder and send video this fetch order is gonna come from our order context patch order let's go ahead in order context and define these fetch worder const patch order equal order and we are gonna do datastore dot actually here i'm gonna work work with async function so datastore.query order by id not word here id here react use state returns an array is that different in react native no it's also an array uh aditya says if i got a chance to visit there i will meet you both in spain but i am not currently in spain hopefully i'll go there somewhere to visit vadim so let's do uh first of all set order wave await this one then then uh as i said why do i have order uh now i need to uh clear things for the user and for the word dish but you're gonna say that i'm crazy but i'm gonna go back to not saving them separately in state like user and dish items but just um add them to our order model there yeah i like it it's so crazy so i'm going to say user is equal data store query user word user id and for that i'm gonna have to first query the worder so const attached worder equal await that we set word with a fetched order fetched uh and when we no we will set it at the end you know not here like somewhere at the end because we want to edit this fetched order i want to say fetched word dot user is equal to query user and here not worder but fetched order uh i am from lithuania and the same for fast order dot dishes equal to [Music] this one and without van because we will await data store query worder dish where it is not order but fetched order that's why now we are querying different things but we are putting everything together here in order not to have to work with a lot of state variables and for the fetch order okay set order here and we can expose this were there that was a definition of a cleanup and i think that's what your mom and my means when she said like clean up your room you made it everything so clean like in one state everything nicely yeah let's see let's see how it will work yeah that's all fetch but fast here okay now in the index here we're going to have to change a lot of things for example we don't need the state for the order here we don't need the state for the user nor do we need the state for the dish items what we need is from this use order context which i'm gonna move at the top just for us to see i will do fetch order yeah uh yeah we need to export fetch order here in the value uh and on our screen we import the fetch order and also we the first thing that we import is the order itself uh now now everywhere where we have user dot something we will have order dot capital u with user change yeah let's let's put with lowercase u right well not much different okay in 30 minutes uh yeah i'm gonna set it to the user and here to the dishes will i regret this i don't know dot user but as well let's safely access it uh word dot user save the access address next one dot user order dot user this what else user navigate sounds like a greek name uh this user fact in the order delivery we don't need it anymore because we are fetching information about user and weather dishes in that context uh through delivery location is gonna be order.user.location and here order dot user dot longitude okay uh we don't need this user check just order check uh order order order everything with the word there is okay now uh where we are rendering the dishes these items so it's not going to be dish items it's going to be order dot how we call it dishes and it might be null let's let's give it a try let's just reload and see if everything so far works that we managed to do that's a lot of refactoring yeah most likely like from this blue loading screen i think you'll have to restart your server you think so yeah but i don't know we'll see probably unless you're very patient oh i am not npm start okay are you tired of adam from all these no no not tired i'm a bit stressed because um after the live stream i have to join um office hours of aws amplify and uh yeah i'm gonna have a talk there so thinking how to manage everything and at the same time not to rush everything because they don't want to to rush these features because these are quite complicated as you see yeah and i'm thinking right now like how to properly do it so let's see a worder here it's still loading that means that something is not working properly reference error cannot find variable user where did we do that probably i know where um in the water context when we have here user and order dish we need to import it user and worder dish order dish ow okay let's go let's so let's see if it at least fetches it doesn't work again yeah yeah uh let's see set order is not a function set worder is not a function but order fetched orders okay uh in also context set order oh state wait a second oh good bad it should be square brackets again uh here no information but in here attempting to assign to read-only property you know why because this first order is read only hmm oh damn and we thought that's such a great idea yeah um look what we're gonna do we don't have an option but to get back to what we had before with user and set user please and fishes set dishes we will however export it interestingly so so it's user here we're gonna do set user user id then uh here let let let me do it with van because it looks better set user here after we do this we then set dishes and do the same for orders for order i mean again we're gonna refactor that file sad order but yeah like this is what what it takes to until you get to a solution that you actually are happy with yeah especially when this is a very complex situation so so for that reason we will have to export the water the what are you thinking i'm thinking to put them into an object all of them and then there wouldn't be the so many like but yeah still we would need to adjust maybe that makes sense user and dishes okay back here again we are going to refactor the things with the user and so on so besides the user where they're from where the context we're gonna get user and we're gonna get the dishes and let's search again dot user uh we're gonna remove water before it as simple as that okay like this okay that's everything about the user and the dishes as well so it's actually not in a lot of places yeah uh let's have a look open it here uh coordinate overview managed by air map marker latitude okay user for the market of marker of a user i was trying to render it before the user was fetched so if user thank you some refreshment coffee yes so if i go here again possible and handle exception and find variable fetched worders most likely in context fetched worders you can control z to that no i'm not gonna do it i'm gonna do it like this const fetched order equal a weight and without the then because we first need we need this fetched order that i wrote incorrectly we needed freshwater here in or not have to add one more use effect or something like that uh now if we go here will we see it something is still not still not so something we are missing something that's what oh we are not setting it in state oh yeah set or there fetched etched further finally it works i'm pretty sure please [Music] try to reload everything because you were like crashing a lot of times so let's see let's see completely wear like this like this okay i got the joke that you understood but i didn't mean it like to restart completely okay loading perfect something is happening hopefully yeah okay here we have it uh let's go here and it works back to normal and we can accept the water but let me think what are the next steps after accepting the water uh we accept the word that we don't need to send order here because we know the worder in the state so i'm going to remove it from here and in the index when we call accept worder set accepted order i'm gonna remove it from here and the next step for us is going to be order what's happening except order and then we set it there look uh the next step is we are going to move from um water statuses to working with the actual worder.status so let's remove it from here or at least comment it out for now because we know what what might happen we don't need this order status says and whenever we have delivery status let's check delivery status so if delivery status is equal to that means that we need to check if look i'm gonna duplicate this line and i'm gonna copy the previous one now we need to check if order dot status is equal to ready for pickup is equal to but it should be safely accessed ready for pickup pick up hey sakosava two dollars the nation thank you very much oh thank you very much okay uh we don't need to set the delivery status and here as well we need to move from this one to uh order order dot status where they should be here so if i'm not mistaken sakurasan is here from day one so that's dedication i know a few people are still here as well but he's also active in the chat and so that's very nice is accepted and we don't need to do anything here and the same if statement here we need to do it like order dot status is equal to uh oh what picked picked up i think yeah yeah and here here we go what if order status is picked up yes then i think you've completed okay so let's let's do the same for our render button title if order dot status is equal to basically v string ready for pickup uh if order dot status is equal to accepted and if order dot status is equal to picked up okay so last well not a lot and disabled order dot status it's very easy to do this thing because we use the same names uh yesterday as we used in the database so werder.status accepted order.status picked up and check other places because i'm sure we do use it there uh here map view the destination uh delivery status let's simply do order dot status order statuses yes if it's accepted we need to deliver the restaurant first and then if it's something else then delivery location okay what else uh delivery status order dot status like this yeah but now if it changes again then you can go back again that's the issue that one viewer said so we need to check if it's something else then then accept it where is that place what for the back button yes only show it when it's in accepted state e where is ben think up here yeah here if it's over something else been accepted then we shouldn't show it but if we should show it only when it's uh yeah so it wasn't normal only when it was so maybe that's not what no the problem here is like not with the icon it's with a physical back button oh in android yes yeah yeah yeah yeah so uh whoa a lot of comments came yeah first of all hey guys can you tell me the what vs code theme are you using so vadim has a video on that and maybe olatunda can even send a link uh to that video and also vadim shows like what uh plugins he's using and stuff so it's very nice uh saying this is amazing man i'm learning so much you guys are legends thank you very much and yeah i'm very happy that you're learning let's have a look at uh if everything works here so at least we should see accept order and if we press we should actually accept the worder and set active order can find variable because in accept order we need to call set worder okay let's do again uh here let's accept the worder and it works so now if we will move there uh the next function is going to be which one in the on press for example on press here so i'm gonna delete these comments this one is accept whether if word status is accepted we should pick up order and if it's picked up let's do let's do a weight complete worder is this function i think we need to make it a sync and we need to implement the pickup and complete worder in the order context let's first import it and i'm going to do a complete order and pick up order let's go in rewarded context and the same thing as we have for accept order let's add for the pick up order and for the complete order for the pickup order what we need we simply need to change the status to complete we don't need that one isn't it completed i think i'm not exactly sure we'll see we'll see for example yeah completed picked up completed picked up and accepted okay and here it should be a complete order no here picked up and here completed and we should simply export this pickup order and the complete order so now i'm going to have to draw to play with them for example let's take this order and set that it is ready for pickup save i don't think you have enough time for everything uh yes let's just see if uh things that we implemented right now works yeah so juan is asking while it's loading i'm going to quickly answer i'm using i'm assuming we're not going to deal with any non-star standard deliveries like if a delivery couldn't be made and the food is taken back to the restaurant probably no that's a very most likely an edge case so even if you're a courier and you are delivering the package no one could take it you're just going to leave it like there uh under there there might be scenarios like to cancel onward or something like this but i don't want to get into that uh details maybe later i don't know yeah these are very edge cases not the main flow so for now yeah um then also mark said that we could use the make the code dryer by moving those like checks is already accepted yeah like yeah so i think this is a good idea and that makes sense maybe so let's go ahead and accept this order uh i'm gonna accept it and now we need to change our location to uh how to change it no to wait a second james is asking what will happen to the features that are still missing that we planned for today don't worry we will definitely finish them most likely tomorrow but we'll check when but it's going to be finished for sure hmm should i just move it like this you're gonna try it like that i don't know i am there and let's zoom in no it's not it's not gonna work like this it's almost impossible to like near the border completely completely near the border uh oh you know where where is it i think no oh no where is so we are very close yeah we need a bit down here i think even more oh it's be after this one the the city i'm not yeah this one we're getting there three kilometers still what i thought moldova is not that big so it's here yeah i think it's exactly here so now we are almost there we're still not there yeah we need to be you know i think we should have changed like oh my god we should have changed how to like 500 meters no but we are close to the restaurant we can say pick up worder and we are automatically redirected to deliver it to the user come on the user and our user is here juan is asking is there a limit to the amount of people that can join the full stack mobile developer course i'm on the waitlist of wondering how is that going to work i don't think there's a limit there is only the time limit yeah yeah one week after the launch yeah is it right is it correct what yeah the doors will be open for one week and after that it's gone so yeah grab it guys okay okay it's somewhere here it's somewhere here yeah it's near viavia we need to cross the border we are very close four kilometers we need more precision five minutes right here this sign like 2 000 for i think the closer side yeah the one above oh my god we need to be a little bit closer down yes yes and we are there we can complete the delivery we are back to our orders but now uh we don't see that order and if we look in our amplify studio our order should be completed if i call that function correctly come on you really need to go it's not accepted but i'm gonna check it but uh look guys so uh the problem is that uh i have to talk uh in three minutes at aws amplify so if you would like please join us on discord on amplifyserver maybe someone from our team can paste the link there so we can continue our discussion there but what's regarding our project we are going we are not stopping here we are going to continue tomorrow and we are going to make sure to polish all the features that we have started today and make sure that all these applications are working properly actually i think this is a very good opportunity for us because even if we would still go today we would not manage to implement all the features that i have in my mind uh and here i'm talking about features specifically on synchronizing data like real-time database real-time data synchronization between the user application and the driver application so that we can see the user in the user application we can see the driver moving on the map like this is the part that i'm mostly excited about i really want to um have like me and lucas two phones i would be the user and lucas would pick up my water will change his place and i can see right away on my phone uh how these things happen i think you may be in real life yes uh i think that you are also interested in this but for that we need a bit more time so tomorrow we will have this opportunity to go into depth uh into finishing up these two uh applications and regarding the dashboard we are gonna come with uh the dashboard uh in the following weeks definitely so everything that we promised will be there uh let's continue our discussion on the amplify student amplify um discord channel uh we have your office hours and also check out the course because it's coming very very soon it's coming up next monday and you can join it starting from the next monday and uh yeah start working towards becoming a full stack mobile developer i haven't done via outro so fast in very long time uh but thank you very much for watching till now and i will see you tomorrow bye guys for being here yeah always thank you guys for being here as well see you tomorrow guys bye

Channel: notJust․dev

Views: 39,158

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react expo, react native live coding, live coding, react tutorial, uber eats clone, uber eats clone app, ubereats clone, food delivery app, how to build a food delivery app, how to build a uber eats app, food delivery app development, uber eats react native, amplify tutorial, full stack mobile development, build a full stack uber eats clone, coding challenge, uber clone tutorial

Id: gunuloenCpU

Length: 171min 20sec (10280 seconds)

Published: Thu Apr 21 2022