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

what's up nudges developers welcome back to the second day of our challenge and uh yeah i'm super excited about today because we are gonna get into a lot of uh beckon stuff and uh it's gonna be exciting so if you're new here welcome uh we are doing the ubereats challenge which is the second day uh what exactly we're doing in this challenge well in this challenge we are building the whole uber it's um apps like a lot of apps uh we're gonna build the driver side application the user side application from where he will be able to look through the restaurants order his uh next meal and also we're gonna do the restaurant dashboard advent of e-series where the restaurants will be able to manage their waters and also weird uh dishes all right so everything is gonna be done with rack native and aws amplify so this is a great opportunity for you to get real hands-on experience uh building mobile applications with react native and aws amplify so let me quickly go go through the plan of uh what we are doing each day during the challenge so yesterday which was day one we have completed the user application ui uh with react native if you haven't follow it along check out a previous video from yesterday where we did all the screens like the application is huge i'm gonna show you in a moment because we're gonna use the same application uh today for the day two of a challenge in order to create the back end connect our rack native application with aws amplify back-end fetch all the data authenticate users and other important stuff in the date free we're gonna uh move to the driver side application and where we're gonna work a lot with uh google maps uh and other interesting libraries in order to make them the driver application for the uber it application so uh day four is going to cover the back end of a driver application as well we're gonna do like authentication data fetching and so on but the focus there is gonna be on creating like a proper like synchronization between the two application the user side and the driver side so that any time the driver moves along his path towards the user the user will be like updated automatically and he is gonna see like the live location of a driver on his uh phone so in the last day uh we're gonna build the restaurant dashboard with rugges and aws amplify uh so the area as as i said like the the restaurant managers will be able to manage their orders their dishes and other important information uh like location about the restaurant uh if you want to follow along and i always highly encourage you to actually get your hands dirty and start coding together with us then you're going to need a couple of uh prerequisites first of all you're going to need the acid bundle that will contain like this pdf presentation and also a lot of other important stuff for today some dummy data and as well some pre-made components for you to use not to waste time on building them also you'll need the expert environment setup and also an aws account but about that i'm gonna talk a bit uh in a moment so i think we can uh kickstart the day two uh let's let's get i get it going and if you're new here hi welcome to the channel i'm super excited to see you here um hungry to to learn new stuff and to to improve as a software developer my goal with this channel is to share my experience that i governed uh like over seven years being a software engineer and working from like startups small companies to even large companies like uh amazon so yeah if you uh see some value out of this channel and if you find it helpful please subscribe to the channel down below because it's gonna help us a lot but i'm not alone here so i want to introduce you to lucas probably you already know lucas from our content that he's doing on our channel hi look guys hello hello welcome back i'm excited for day two this is going to be something new to me and interesting so i'm very excited yeah that's nice um so you don't have a lot of experience with amplifier right yeah actually the only experience i have with amplify was from watching a few of your videos and also not like a full video but like clips and stuff so i'm very excited to learn and i think i will ask i'll try to ask good questions for people and for myself okay that's i think uh great opportunity for to to have like a more interactive lesson and to see like if something that i'm doing is kind of confusing to you please stop me let me know or if people have questions in the live chat also let me know and we can go over everything one more time at the end yeah at the end i'll maybe you will be able to compare like for example amplify with what i'm using and we'll see we'll see what i like what people like more yeah let's see uh so um hi everyone from the live chat i see a lot of people here how are you doing so let's uh let's get going because we as i said have a lot of things to cover today and i'm going to start with a couple of prerequisites specifically for working with aws cli and first of all of course you're going to need an aws account that you can sign up for free however you will need a credit card in order to sign up and uh aws has a uh quite a good free tier which means that for most of the services and actually i can say for all of the services that we're gonna use today they are covered by the free tier so you're not gonna get charged unless like you deploy your application to a million of users i don't know but as i said like everything that we're gonna do today like covers by is covered by free tier so don't worry on that side other things that you will need to have installed is node.js and npm but i guess you already have if you are following this video as well as git um so the last step is the amplify cli for more information you can access the documentation of amplify specifically showing how to set up the node.js and other prerequisites so at this moment i assume that you already have amplify cli installed and set up on your machine and from there we're going to take it step by step from creating the project and building everything that we need specifically for this project so um let's get started i think we can uh we can get started and um the first app that we have to do is to create our application back-end which we can do at aws.amazon.com um so let's go ahead there um okay so we we're gonna get to that shall we have a question all demo why amplify the first question why amplify yes okay that's that's interesting amplify is a very powerful set of tool that makes it very easy for front-end and mobile developers to get into building back-ends and to get into aws so like aws by itself like is super flexible but a super powerful flexible but it's quite technical and complicated when you want to to deploy everything yourself on on aws i've done that i have the certifications for aws and it's a lot of uh it's very technical but with aws amplify we're trying to simplify a lot of the steps that you have to do in order to build applications and these are things that uh are very general and probably any application would need something like authentication to do to set up authentication without amplify uh and without like aws like you would need like a good like i don't know i can say but let's say two weeks at least like it took me one week just to set um the login with apple for fitting or something like that so but with amplify you can do that like in a couple of lines of code because they have prepared it and they have made the infrastructure ready for us to easier get started and use them this services from aws so that's why amplify yeah another another thing is that um whenever some things are easy that means that we are not flexible so like i don't know for example if firebase is easy it means that it's not very flexible if you need some very custom things with amplify like they are doing great on the flexibility side because what amplify is it's not a new service it's just a utility a helper in front of other services that exist on aws so if you have like very custom features you can do them separately like with lambda functions and other um other things and just connect them to your application in case aws amplified doesn't support something at the moment yeah that from what i've noticed is uh yeah that the segment is a lot easier with amplify than creating like your own back end from scratch and some things like what instead like authentication to have a proper authentication done by yourself it takes like a lot longer than i've seen with him well and he'll showcase it here i think yeah so yeah some things what from what i've noticed are a lot faster and easier not sure how flexible compared to custom backhand but we'll see i guess yeah so before we get started with our back and let's really quick have a look at our application that we build build yesterday and here we can see the homepage with a list of restaurants and the details about them after which you can press on one and see the details of the restaurant and below you see the menu with all the dishes that they offer at the moment these are all dummy data but today our goal is to have everything coming from the database um if you press here for example on one of these dishes you will see the details of this dish you'll be able to set how many of them you want to order and after that you can add them to basket after you have created your basket you will be able to create your order and after you create your order you will see the word details page and also you can go to the order list and see them here in this list from where you can press on them see the details of a word there where is it coming from the status of a worder uh and like information about the dishes that you you ordered and lastly we have a profile that is not ready yet but we are going to do it today so with that being said let's get going and let's start implementing the back end for this for all of these features that we described here so uh the first app as i said we need to create our application so let's go to aws.amazon.com and here let's sign in i'm gonna sign in i'll tell the screen and i need my phone alex can you give me my phone please but fast security mfa i'm gonna grab it myself okay so hello guys i saw a lot of people are coming and yeah uh what a good day to start day two day one was super awesome i'm going to learn a lot of new packages as a developer thank you guys yep no problem i remember actually cutting orlando from yesterday so very nice to see you again here working good job good job all right so okay here i have it we should see it and uh after you create your account sign in let's search in visbar aws amplify let's open aws amplify from here and we can go to the new application and uh select the build and application for the application name we're gonna choose uber it's and let's press confirm deployment that's it this is how we create the application backend and the rest is covered by amplify behind the scenes to create all the necessary roles the necessary resources to manage your application in a moment uh this should be done and we will be able to open the amplify studio from where we will do most of our work okay so this uh initializing and setting up is pretty fast usually right yeah this one takes i don't know one minute or something like that okay um so here create an account we were gonna go to the amplified dashboard yes and yeah we just have to wait let's see if we have any questions i have one question when you wouldn't recommend using amplify when i wouldn't recommend using amplify whoo this is a uh this is a good question uh when i wouldn't hmm because i know you really love it especially from when would you talk about it yeah yeah i feel like i wouldn't recommend it there definitely are the cases that i cannot think about now most probably [Music] most probably like i i what i'm thinking about are the project that that are completely at a different level i don't know like facebook building their facebook they'll definitely not use amplify they will use their custom infrastructure database and their custom servers but like on on the level of all our like on the level of developers that we we are i don't see i don't see an application where i say like amplify wouldn't work here okay so the application is the usual application that we are talking about like mostly based on data like media storage like images files if it's not something very niche and edge case like i don't know some machine learning but even machine learning you can do with family yeah so is it because of customizability or because of pricing you wouldn't in edge cases like for facebook big applications where there's a lot of demand um yeah it's probably it's probably both okay but amplify itself does not add any price to your application yeah you are priced based on the services behind the scenes like lambda functions cognito s3 buckets which you probably might use yeah we are done here our application has initialized and on this page we can scroll down a bit until we see a orange button called saying lounge studio so let's launch the studio and this is the amplify studio where we can design and manage our backend we can select an environment staging usually it selects automatically but in my case it asks me before amplify studio like the only options you would have is using the cli like configuring everything through the cli but with amplify studio now you can set up your data model and the database right away here in a very visual way which we're gonna get uh to it like a bit later so i'm not gonna go into it right now you can manage authentication storage for example uh lambda functions and a lot of things um here under the setup under manage is where we manage the content and the users of our application as well we're going to see in a moment when we define our database and have some content there we will be able to see it here what's cool about amplify studio is that this is a separate application and a separate like domain and everything separate from the aws so as you see aws has amazon.com advanced but amplify studio dot com that means that with this approach it's much easier to collaborate on the same project with your team and especially with non-technical uh members of your team for example it's going to be much easier to give access to this amplify studio to a content creator or a copywriter or some someone that is dealing with the content and he is going to work in this content in a very in a user-friendly way and by this you don't have to give him access to your whole aws account and risk like having something deleted by him by mistake as well like users and also files so this is by default it comes with a very powerful cms here that you can use okay so this is our creative application back end uh we went over the amplify studio and uh we're gonna get we're gonna get more familiar with amplify studio as we progress with this tutorial because we are going to have to work a lot here to set up everything let's start with setting up authentication so [Music] to set up authentication to let only authenticated users use our application and also to give them possibility to create an account and to manage their account um we have a possibility to integrate that with amplify by integrating the module authentication so let's go to the setup authentication here and here we will be able to configure our login mechanism by default we have a mail login mechanism but we can choose also our login mechanism like login with your phone number with facebook with google amazon sign in with apple and so on i i'm okay with email so i'm gonna leave email for multi-factor authentication i'm gonna leave it off by default uh and the only thing that i'm gonna change in the password protection i will take it easy with the rules or my password because this is um this is a demo but in your case you can include the rules that you need the passwords to um to comply with and yeah that's it uh we can press deploy and then confirm deploy and now amplify behind the scenes is uh creating all the services that are necessary for the authentication i can go into more details on what services are used use used behind the scenes but i think that's going to be too complicated and confusing so let's just think of a magic box behind the scenes that amplify is doing to to set up everything that we that we need okay so far everything looks easy yeah it's good that everything is like done in a dashboard especially as a new developer it would make so much sense in writing some like random commands in the terminal i don't know uh for me i was always like more into like cli commands yeah like i know that even like for stuff like git when i see people using visual git i i don't understand it like for me it's easier but that's how i started and that's how i got used to uh but like here like to manage all the data and to manage everything like it's so much powerful to do it like in a visual way um yeah but you have also the ability to do it with a cli most likely it depends from what you've started because for git i also started using like cli and that's what i got used to but i see people use as well like uh visual and well it looks cool but i don't understand much what's happening in their dashboard so yeah someone loves aws it's great yay and i see people that are still like coming today saying hi but they said like okay i'm working on yesterday's build because it didn't manage to finish and come back to this later so that's nice all right yeah probably we we went crazy yesterday like five hours of pure content of a lot of uh learning yeah yes code with uh late i've as i said in the start i've never used the amplify like it's my i didn't even saw how to set it up so i usually usually use like custom backend so this one is going to be really interesting to me and as i said i'll try to ask as many questions as i can in order to make it like uh and to take you and very interesting as well to me all right come on this deployment deployment takes a bit of time like probably two to three minutes so just waiting but it's done so um oh actually i think that while we were waiting for setting up the authentication we can go and implement the next step and to install all the aws uh amplify libraries in our project to be able to connect uh and manage like the amplifier back and from the rack native um to integrate with it so um i don't i cannot copy them from here like and i don't have a presentation so let's go to the amplified docs just to copy this um this command let me amplify docs let's go getting started react native and set up a full project and i'm going to go with expo and install here you can copy them directly from them from the presentation but in my case i don't have it open on my pc so i'll copy them from here i need to get used to copying it with control not with windows key okay so let's go in our application let's uh by the way if uh you had some issues in the first day with application with building everything uh the good news is that i have added the the source code from yesterday in the dummy data that you can download at assets dot not just the dev uber it so you can go where download and inside the asset bundle you'll also find the source code from day one so if you want to start from exactly the same page as i am doing here you can get that folder open it in visual studio code install the dependencies with npm installed and we are ready to to get started together so the first step as i said we are going to install the aws amplify libraries that we will need and and yeah after these after this yeah we will we will move on to connect our red native application with amplify back end okay will you be implementing social media login authentications i don't think so do you will you in this in this tutorial no we're not going to do that because that's a bit more uh advanced but we do that in the course by the way we do both google sign in with google and sign in with apple or no facebook facebook okay so uh now let's go back to our amplify studio you can see it right and from here after our authentication is deployed at the top right corner we will see local setup instruction let's press on this and it provides us with a command that we have to run to pull all the changes about our amplify inside our project so let's copy this command and let's go back in our terminal and say amplify pool everything that we copied from there [Music] this opened for me a browser window to say uh to authenticate me with amplify so what the only thing that i have to do is say yes and i can close this window window now amplify will ask us a couple of uh questions to make sure that it sets up with uh best settings for specifically our project and environment so the first one is the uh editor so i'm going to choose visual studio code uh the second one we have to choose javascript because we are building with rack native and in the third one choose react native for the framework and the source directory path we can leave it as source so just press enter distribution directory as well enter enter enter for the build and start command and here the last question is do you plan on modifying this back end let's say yes we plan just because if you say yes you plan to modify this back-end it will also pull the code for your back-end and we will be able to have a look and modify if needed now everything successfully pulled uh the backend environment from staging from the cloud and what do we see new in our project the new stuff that we see in our project let me see something because okay [Music] okay no worries we're going to get there we're going to get there just not to forget uh lucas remind me about the bug with navigation i'll try it after after we uh go over uh v structure so by doing amplify pull the things that we will see in our project is first of all a directory called amplify and here is where all the backend code for our uh for yeah for our back end leaves in a lot of cases we will not work with this amplify folder only in some edge cases when we have to adjust some uh code for specifically for it but now like i don't even i probably never went into these folders and and so on so don't if you open them don't get scared it's okay this is managed by amplify uh for us in our source directory we should see a file called aws exports and this aws exports file is all the configuration that helps us connect our application with our backend so it contains information like the region of your project the user pool which is for our authentication like the idea of our user pool like our information about authentication and so on so these aws exports help us connect to our backend but how we are going to connect it well let's go in our app.js but before doing anything let me see could not be found in okay i know why so i'm gonna go here i was messing around before the stream so let me just so yeah guys uh thank you for kind words again probably i'll have to say this not once because i cannot ignore those uh nice words from you so yeah thank you everybody from vadim and me no star vamp because they don't manage to see them but they want to so let let me run again grab project so npm start oh it's here actually it's running so i just need to find that window oh this is how you do it on windows so hard for me to go to switch from macbook to windows and i was thinking today like what's wrong with me i i haven't figured out like what is my preferred uh the windows or the macbook i don't know that's what i wanted to say ask you right now so what i don't use like their main one i don't know it depends on the mood okay look like yeah like the windows machine is a bit more powerful so as you can see now it's better than yesterday but only like for these hardcore tasks like streaming and so on for like normal day-to-day work like the macbook pro macbook is running much better than um then the windows and like the whole like ecosystem of everything is better but yeah like one good question so what databases can you use with the amplifier by default we're going to get there but by default amplify uses the dynamodb database which is a super like insanely performant database like no [Music] nosql database developed by by aws so it has some limitations but this limitation come just because of the performance that it gives you like it's under 100 milliseconds requests for for a lot of data and it scales scales almost infinitely to to match the demand of your users um so uh i'm running the application again uh everything is fine that means that we didn't break anything so far let's go ahead and update update.js and as i said um to bring back my thought that is having back then like our aws exports is helping us connect to our aws uh amplify backend in order to connect let's go in our app.js and we're going to have to import a couple of things here like this yes the first thing that we want to import is going to be from aws amplify and we are going to import aws no just aws amplify how how am i calling it always oh amplify just amplify okay so add to stream so we need to destructure the amplify from aws amplify and also we need to import the config file that we saw there inside the dot source dot aws exports the one that i was showing you here that helps you connect now that you have the amplify and config we can put them together and say amplify.configure and provide the config that was generated for us automatically and by doing this now we configured our project to connect with our backend and yeah let's reload if we don't see any errors but that's perfect yes as you see here so far we don't see any new features of course we are going to do them in a moment but what we had to do is to configure and not to see any errors perfect so the next step this is everything about configuring amplify the next step is to implement authentication and yes lucas this is just this screen and these two lines of code in order to implement authentication in your application so what do we have to do well first we have to import a higher order component with authenticator from aws amplifier react native i don't even need to do that like just it'll be simplified react native now using this with authenticator higher water component and higher word the component if that sounds too complicated to you like it's just a function with which you encapsulate another component so what we have to do is we need to wrap our application inside the with authenticator higher water component for that instead of exporting right away here in line i'm going to remove this export default just simply declaring the function application and below i'm going to export default application but now i want to encapsulate it inside the with authenticator application and that's it now we have a fully working authentication system with all the authentication screens that we need there but probably i'm gonna have to re reload it most probably yes because we have a lot of new libraries so let me close it yes and let's do npm start again so yes as simple as this and this will give us all the screens that we will need like log in sign up uh confirm your account you will receive an email on your email with a confirmation code uh you can set forget password then reset your password uh and a lot of more stuff so as you can see uh a bit faster than i expected yeah like a lot faster this app is always like fascinating like how fast it is to implement like authentication so by providing this with authenticator before our application we right away see the authentication screens now what we can do is go to the sign up here for the username provide your email this is something that is a bit confusing but because we said that our login method is using an email address that's what we're going to have here for the email again my dm not just.dev and before now phone number i can say any random number the email is important to be yours because you will need to confirm your account and you will receive an email so let's press sign up and now on my email i received the code and the code is eight nine zero one three four eight nine zero let's confirm if we are back to the sign into your account that means that our account is already confirmed like we successfully confirmed it we didn't have any errors and we can go ahead and use our email and password to sign up in our application sign in and we are in our application now if you're gonna refresh the application like this with authenticator uh higher order component will know to to check first if user is authenticated or not and in our case we are already authenticated and it manages like caching and storing all these data for us in order for us to to have a very easy development experience um just by having one line of code so here it is we are authenticated we have a user and we can uh we can see that uh here back in our amplify studio if we go to the user management i see already the first first user created here i see his id then yeah by d i see that the account is confirmed because we confirmed our email and we can also reset the password from here or delete the account or do any other things that we can do that's it it was a lot faster than i expected for sure and it's like crazy how much it helps with the authentication wow i mean but one person also asked like is it easy to customize the fields that you need it's easy so for example if i don't need a phone number i can delete it um yes the thing is that yeah it's super easy to get started but if you have to customize this it's possible so it's also easy like just by providing some options here to the with authenticator to provide the sign up fields if i'm not mistaken uh right now i'm teaching this in the course like in detail on uh actually there are two ways of how you could uh customize um the the whole experience of uh the sign up screens one is going to be to simply provide your own theme uh for uh to to them amplify and by providing your theme you can style completely the way you want all of them all the buttons all the inputs all the headers texts everything that is inside the authentication screens the thing that you will not be able to uh to adjust is i don't know like things like a complete different layout or a different flow for example if you need first some onboarding screens and then some authentication like these things that are more complex you cannot you cannot adjust using a theme a theme you you can adjust like button styles to match your design um input styles textiles and so on but another approach like if you need like full customization uh in that situation you can build everything like all the ui yourself and using simply uh some api calls you can integrate with uh authentication module and actually we have a very good tutorial on youtube that teaches exactly that we have built the authentication series you can see it on the channel where we build the ui ourself like everything custom build and then we simply integrate it with the authentication from amplify by calling off dot sign up and providing username and email and it gives you back like the error or the status code so it's quite simple but check out that tutorial to to get more details yeah i think i'll let you in the face that you're talking about so um what i want to show here like the way you can interact directly with authentication module uh without uh yeah like yeah exactly the way you can interact with that uh i will go ahead um do i want to yes uh okay so let's let me think how to structure everything i have one bug to fix and i also want to add the sign out feature but the sign out feature is going to be in in the profile but the profile we didn't import yet lucas what do you say yes let's import the profile now uh because we want to add the sign out functionality inside the profile so let's open the screens and also let's open oh but you know what i don't have them here the screen or do i hmm but i can get it real quick so open the asset bundle that you downloaded and where in a moment i'm also gonna download them hello zaid is the country code changeable for the phone number uh victor is asking like um to be honest i don't know uh i should look into that into the documentation because there are a lot of things it should be definitely like it should either like inside the with authenticator or if not like you can provide your own like component there yeah uh so extract all come on here so i have the sn bundle here and inside that we have uber its asset bundle we have come on it didn't update for me so i'm gonna have to download it from there let's go to academy not academy assets but not just the dev that uber eats okay leonardo is uh did you got the warning of an handle promise rejection right now because he's asking why it's happening um yes we we're gonna fix that issue as well okay so i didn't notice it but yeah they're not it will be fixed if the issue is something about the didn't find application id or something like that we're gonna handle it in a moment that's from amplify yes so here i have uh finally my asset bundle and in web pre-made components we have this folder profile screen so let's grab this profile screen inside our screens directory here come on no you didn't want to copy okay learning how to use a windows machine no i cannot do it why oh because i have to extract them first now where are they extracted oh so hard okay it's here okay so let's go in bring the profile screen here in our screens finally and the profile screen is a simple uh component that has a couple of text inputs the text input for the name the address the latitude and longitude uh for the user uh and a button to to save everything so um let's go ahead in our uh in our navigation index and let's scroll down for the bottom top navigator home tabs inside the home tabs we have home worders and profile so for the profile instead of rendering orders let's render web profile screen that we guys will import isn't the text too close for you maybe it looks like that only to me so i wanted to make sure because i can see like it's too big that's what it looks for me but i'm not sure about the other so that's why i act well right now it looks better a lot okay but maybe we can uh we can do it like this and like this in order for us not to cover it i think this this looks a bit better for me it's also hard to follow the tutorial when they're very close i saw i remember so just wanted to make it yeah but not everyone has good internet yes yes so as i said uh for our profile we render profile screen but we also have to import it so let's import it here on the top from the screen profile screen the screen that we just added that's it and now let's see let's refresh development server okay what's happened profile screen he didn't like how i imported the profile screen let's try again because i think it should be good hey dreamland okay catalin saying it's good like that come on [Music] why are you stuck here i'm gonna do that and here let's do npm start okay come on let's go what do you think if you press multiple times will it run faster well i don't think so but you can try so why oh it was complaining about how you import the profile screen something like that but i think it was like an old error while i was typing it is it even loading like building the metro i think so i hope so hmm let's wait think that it's opening yeah oh something went wrong i still don't see any errors on my side maybe try to like delete and reinstall the app let's try like clear from expo go and then i mean i'm gonna try to open it again simply and if not like i'm gonna nuke expo interesting so guys are you following today or just watching and planning to get into this tutorial the second one a bit later why i'm logged in as lucasgreen on my expo account because of the i think of the tutorial that you did you remember no i think it was revenue cat no i think so let uh let me go ahead and you know what start everything but let's do uh clear is it clear no i don't want to install those please install typescript why do you want me to install typescript do i have any typescript screens profile screen yes profile screen is tsx sorry guys let's rename it to uh gs and i'm gonna also update the asset bundle to to be just gs not to confuse you but yeah like it's everything is is fine here so i will restart again we have a first timer here david is first time here so he's just watching hello david welcome here hopefully you'll enjoy the stream and get a lot of value out of it we'll see we'll see if our application is running no i'm joking it's running everything it's fine uh building let's go and then the sniper is following but slower than you and i think yeah that's good i think it's better to take it slow reap like replay a few times to actually understand what you're doing and go with yourself yeah um so yeah like have in mind that i have some preparation already we're working with lucas on these projects like for a long time uh to prepare it for you so that's why it might look easy but it's definitely not easy like i we we understand like the struggles that you're going through so take it easy give yourself self some time and you're gonna get there slowly but steadily like the most important thing is to continue building yeah uh so now inside our profile okay we have this simple form where we will be able to write anything but why i imported this profile screen here is because i wanted to show you how we can sign out from uh from the application so in profile screen let's add one more button here a simple button that will say sign out sign out style margin origin 10 will it work does it have a style this button um let me double check button it should have style margin come on love from india you're doing a great job which will help a lot of programmers yep thank you thank you very much look instead of this button i'm for the sign out i'm going to just do a text you know sign out because i don't want to focus on styles right now that's what i'm doing right now uh align text uh center or text align center uh and color let's do red it's danger sign out so for a profile okay we have it here and some margin it's so funny that they always say like don't be perfectionist and when i expanded i think on button you needed container style maybe i don't know con or styles not style iron files and maybe inside the styles we need container style not sure but yeah watching but what i don't i don't need it i i i don't want to focus on it yeah don't spend time here yeah what i wanted to show you is the sign out functionalities so i'm going to add this sign out text and i'm going to attach no i'm not even gonna touch anything what i have to do is uh to import the authentication module from aws amplify and whenever we press on the sign out we will call uh on press so we will function that will execute authentication dot sign out and that's it that's everything that we have to do and um this is how we directly um let's press sign out and we are back to the login screen so this is how we directly access features from authentication the same like sign out the same way there are features like sign in and here you need to provide like a username and password and sign up and forget password like there are a lot of uh functions here and this gives you a lot of flexibility if you need that in your project but in my case i'm gonna sign in again i i could also show you how the of a forgot password works but i think it's pretty obvious like if you press on the forget password you're gonna receive a code on your email automatically you press put that code and you go ahead and reset your password with a new one and everything is is already there it's done and it's working uh all right so uh we have this one here for the sign out and as i said uh we will have to fix two two issues right one of the issues is the one that i encountered when i moved from uh my macbook to windows and if i go from the home screen to the profile and that then back to the home screen for some reason that the screen disappears and that happens like the same way the orders from the word is to profile and then back to the worders it disappears it's a very weird bug uh but and uh i didn't have enough time to look deep into it like why is it happening that way but what uh we can do is we instead of using material bottom tab navigator we can use simply the bottom tab navigator and by doing that this bug is gonna be fixed so let's go ahead and install the npm install uh react native navigation navigation slash let me let's hope that i'm gonna write it correctly it's bottom slash tabs uh dash tabs bottom tabs like this uh now okay now uh here instead of importing this one from uh the material bottom tab navigator we can import the create function uh the create function from react and navigation navigation bottom tabs and we will import create bottom tab navigator so the only thing that now we have to do is to replace uh scroll down a bit where we have this tab and instead of creating them with material bottom tab navigator we will create them simply bottom tab navigator and now we can remove this uh import and also we could remove the the library from package.json if we decide that we will not need it anymore it's this material bottom tabs i wouldn't suggest it because maybe we will need it later so let's save and now home screen i don't see anything at all let's refresh required module what module bottom tabs we have it and maybe maybe yeah maybe i have to rerun so let's stop the server start it again i'm gonna start it without clear hopefully it's gonna work and now let's run on android did you understand that a little bit yes lucas is uh is learning here today and he's making sure that your questions are answered so yeah he's he's helping me with with everything come on okay it's building that's good thank you very much we appreciate that sign out is dangerous why you said it i should make it uh red because it's dangerous oh yeah yeah uh okay so now let's see if i go from worders back to the home it still works profile home it works everything works now the only issue is that we have to um how they are called the headers for the home and restaurant and the way to fix it inside the home tabs we are going to give screen options and we want to header shown to be false it like this false save now the header for the home disappeared and we only have a restaurant header that is coming from the home stack navigator here on the bottom uh so it's working like this for the worders while we are still fixing these issues like i have left that spacing on the top that we already don't need so i can go to the order screen index and we don't need padding top 50 here we can live without that and now it looks better what else we don't need if i go to order details yes this is good we can go back profile this is good try to go to order but you know what we have a profile but no i don't need it so home and we can go here we can go back either we need that one we don't need that one right so that means that uh where in the home stack navigator for the restaurants we need to hide the header so let's give options uh header shown shown false for the restaurant no for the restaurant details or the here itself yeah like this and what about the dish for the dish we can have it hmm yeah probably we don't have a way to go back so we need to yes let's let's leave it like this now now it's much better um so with the navigation we fix this bug um let me see if we have any other warnings about navigation um no that's about the keys we're gonna get there it's about something else something else no okay promise rejections we're gonna get there to fix it uh no other than that we don't have any problems okay so that means that let's handle them can you see it yep let's handle the problem that we see here to unhandle promise rejections error no credential application uh region why is this happening this is happening after we uh configured aws amplify and it's coming from from the app.js here where we call amplify configure with a config and it's happening because uh it tries to initialize the analytics module but we didn't set it up yet so how we will do it is we are going to disable manually if analytics library by saying that the config will be piece config basically we destructure everything from the config inside another object because we want to override the analytics and we want to uh disable let me remember is it disable or enable or disabled so give me one second maybe i have it here no i don't have it here and after this finally getting into yes it's something interesting like there we will have to to code more but still like you'll see how easy it is so let me find them yes something we should say to false but it's probably in i don't even want to try to to remember okay it should be here okay it's disabled and analytics analytics and we need to say that the analytics is disabled true and we can either have it like here or from new lines if for like this so by doing that uh let me clean everything refresh the application and we shouldn't see that error yes no it's still loading okay here it is and we don't have an error perfect okay so i think we have fixed uh everything but we we had to so for that reason um we can go to the next step or let's see if there are any interesting questions right now i cannot find the the one that i wanted to ask for uh okay so for uh amplifi authentication we are done we saw how easy it is to uh set up our amplify project to set up our authentication module and also how to integrate that in our application with a couple of lines of code the next step is to start working on our database and whenever we start working on the database everything starts with designing the structure of our database on how we're gonna uh keep our data in our database in order to have it like performant and fast and optimized so uh we're gonna start with two data points uh one of them is the restaurant that contains information uh like image name price no not price but uh ratings um and the other part is the dish item a dish item is one item that the restaurant is selling so here it's interesting because we will be able to work a bit with relationships and we will see how to to model these things so um let's go ahead and start by opening our amplify studio and let's go to the setup data so as i said we need two models in our application uh for now one of them let's press add model and the first one is called rest run and the other model is called dish okay now it's time to think about the fields that we need to store for each individual item inside this uh this table for that we can uh we can look at our dummy data that's gonna be a very good example uh of what data your application needs so we can go to the assets data and in the restaurants here you can see that okay one restaurants need a name a delivery fee a mean delivery time and so on so uh let me take it step by step and we will cover all of these fields that we need all right let's uh go back to it yet so let's start with defining the fields that we need for our restaurant let's press add field in the first field we need a name for the restaurant on the right we can choose the type that we want the restaurant the field to be it can be a string an integer a float number a boolean other custom types uh that are coming specifically implemented by amplify like aws date time date and time time step like there are a lot of things for example if you put the aws url this is very similar to a string but also it will give you by default some data validation to make sure that the string that you're defining is a url what we're interesting here is indeed a string but we need we have one more option on the right here we have we have a possibility to make this field required and i think the name of a restaurant should be required because every restaurant should have a should have a name there and if the name is required after the the string here we see a question mark specifying that it is required if i disable it no question mark okay let's move on with the next field we need the image the image is going to be a url to an image that will be stored somewhere for that reason i'm gonna keep string uh should it be required or not can we have restaurants without an image maybe we do we don't display it like that let's say that the name is required uh the next field is that delivery fee uh and the delivery fee is going to be a float like it should be like i don't know 3.5 uh dollars or something like that and again like this delivery fee like in your application if you are going to improve it most probably is going to be calculated based on a formula like the distance between the restaurant and the user driver i don't know but in our case i'm we're gonna just have it in the restaurant model one field with a delivery fee then we have the minimum delivery time again in your application like if you want to improve it most probably you will gonna have to um um calculate this based on the distance to the user but in this case like we're gonna put it here and it's gonna be an integer because we want to specify it in minutes so 10 or 15 minutes something like that for the max delivery time we also have an integer isn't delivery fee required because how then i know how much i'll pay for delivery let's make it required like if it's not there you can assume that it's zero so for the minimum delivery time i'm gonna also go with required but no let's let's let's not make them required um in uber it's always displayed but yeah okay if a number is always the play is required zero it says zero uh so max delivery time then we have the rating of the restaurant that's going to be a float probably like 3.5 you can have right [Music] yes and they're rating what else the address of the restaurant this is going to be a string and i'm going to make it required for the rating as well let's make it required no because rating if you don't have any ratings that doesn't mean that you have a rating of zero if you're a new restaurant you don't have any rating so you know it should be uh should should not be required okay besides the address we will need two more uh fields to identify where is that restaurant located and these fields are latitude and longitude this is going to be the easiest way to determine like the physical location of the restaurant and use it on a map it doesn't mean that the restaurant will and it's also afloat it doesn't mean that the restaurant will have to input this latitude and longitude because we can uh use some libraries for example google autocomplete that the restaurant will simply search for their name google autocomplete will give it in uh the result they will choose it and from there we will take the late to the longitude so but still we need to to know this information in our database about a restaurant to know where to send the driver to pick the order and i think that's everything that i govern for uh for this one we'll see hopefully we will not need more because it takes a bit of time to deploy the database so i'm going to try it from the first time let's move on to the dish and let's define the fields of a dish so we're going to start with a name string required then we're gonna have a same an image but here the image is not required because we don't want uh yeah it should be optional the image uh let's go with a short description and also a proper description like a long description but my question is do we need to complicate ourselves with short and long description well for us maybe it's not no let's not go with short description yeah let's the description as the only description and when we need to render it in a short form we're just going to limit like the first character what's the difference between these two in uber is that that short description just says like what kind of uh ingredients does it have and then long description says like the whole uh describes the whole dish what it is so we're gonna work on the descriptions yeah because we're gonna have to add data so in order to make our our life a bit easier and lastly we have the price the price of a dish which is going to be a float number and it should be required because we need to know what's the price uh description is optional yeah let's have it optional anything else for the dish no probably that's it okay that's all the fields that we will need but we are not done yet because we need to define some relationship between a restaurant and a dish and i don't think i can connect my ipad to draw but um yeah the relationship as i said here the relationship between a dish and a restaurant is a one-to-many relationship and it is one too many because one restaurant can have many dishes on one side but one single dish can belong to only one restaurant did it make sense lucas yep it meant a lot again no well at least for me it made sense uh okay where where where what what happened we have a few like uh questions did you do sign in screen so yeah vadim did it at the start the same as register he showcased it a little bit later and also there were some comments about the fields that you were providing rating should be an integer because it's easier to pick 4 stars compared to 4.3 but the restaurant itself can can be rated 4.5 let's say or something like that yeah that's the average rating rating that we we said here it's not the actual rating of a user but it's the average one that is calculated somehow yes then add a registration date for the restaurant so you could know when you started registration date these are fields that are automatically added by amplify like created that updated that these are two fields that are managed for us so if i look in the graphql schema probably i'm not gonna see it but later we're gonna see what what i'm talking about here so we will know when that restaurant was registered yeah and other suggestions from antinda sniper make sense but we're just trying to make this as simple as possible like you could add all of your uh suggestions fields to that and it would make sense but yeah it's still like not simple so we try to focus on the main things of this application in order to fit in the time so as you saw like yesterday it was a five hour stream so today we still want not to go over five hours because that's a lot and i understand like it's quite hard for you and tiring for you to to go so long so i want to only focus on the main things of this application and that's what we're gonna do today so now we can move on uh to to define this relationship between a restaurant and a dish well this uh we can go to the restaurant and click on other relationship here we will select the dish that we want to add the relationship with and the model relationship here is we want one restaurant to have many dishes not one restaurant to have only one dish because that doesn't make sense to be a restaurant if you have only one dish and as well we don't need many restaurants too many dishes because we don't want one dish to belong to multiple restaurants we don't want the hamburger to belong both to mcdonald mcdonald's and to the burger king because they have very specific burgers so that's one it's one restaurant too many dishes and the relationship name here is dishes and this is going to be how we're going to be able to get information about the dishes inside our restaurant but we're going to see that later so let's save and when we did that if i scroll up a bit one field appeared in my dish and that field is restaurant id and it's a relationship source that means that now every dish in our database will know the idea of the restaurant it belongs to so with that being said let's press save and deploy because this is going to take a bit of time and then we can cover more questions about the data and the next step is going to be to actually start fetching this data and integrating our application with this okay yeah so here the next one yes deploy changes that's what we are doing now and then we're gonna pull everything and continue yep oh a new question um oh yes you could add those to your app if you actually that's maybe even nicer if you're following this tutorial you can play around with all the data and make this whole app even bigger even better that's that's like what i encourage people uh to do like first of all okay follow what we are doing here but because we are limited by time uh we cannot cover all the aspect of your application probably neither does uber it's cover everything that they want to cover because it's an it's a never-ending process of improving an application and take this journey the same for you if you build this and you're curious like okay but how can i make uh the ratings calculate automatically were let's say the delivery time to automatically be calculated based on the user location and try to do that or okay but in it can be very small things like vadim did the short description but i want to do both a short description and a long description to have them separate and i want to display them in different places in my application just by doing that like it's so valuable to you and you'll learn much better and you will validate if you understood the concepts because when you follow along like it's one thing and you might think that yeah i get everything but when you try to do on your own that's when you're gonna connect all the dots in your brain to properly understand this concept yes i agree and i can definitely confirm that by even myself because that's how i actually learned just when i started programming we were getting in university like some uh homework let's say and uh i was doing it but then i was trying to add like a little bit more extra challenge maybe it's not something super difficult but something more more and little extra challenges i think that was uh yeah a very very good learning experience because that's when you get into problems right yeah and that's why by solving those problems you get to that aha moment like that's why it didn't work and that's why in that case it worked but now it doesn't and i think this is the reason why i got hooked on programming so much because yeah as i said like when i started university i didn't know anything about it so but those like little okay i got stuck on a problem i was spending so much time like trying to figure out like oh my god i own i wanted to throw my laptop out of the window nothing is working and then like oh so that's what it is the dopamine heat yeah yeah and then okay i wanted more one more and yeah this one so that's the life of a software engineer like struggling in order to have like that better moment yeah yeah yeah addiction very very big addiction uh mirbac welcome here yes these videos are going to be published on the channel uh i cannot promise for how long maybe like after two weeks we're gonna make them private but for the beginning there will be there so you can go back rewatch them so yeah take your time and do it now while we are still here public yep [Music] okay yeah so and how long does usually this take uh pushing new changes this like specifically for vape i and specifically the first time it takes a bit more like i know five minutes maybe uh so it's still in progress i see in my case um but like after you do some small changes like it's a bit faster okay so you don't need to like what change because yeah you don't need to change everything yeah right now like if you get into the details of how many services and how many things it initialized just by just now like it's crazy like so many like tables rolls uh up sync api rules and so on um yeah like i know what's going on behind the scenes and i can appreciate how easy it is just in a couple of clicks to do everything because before that i was doing that manually like at vitinum i was writing this these things like manually all the infrastructure is code and it's not the most enjoyable process but now our data model has finished deploying we see deployed here and uh we can go ahead and do amplify pool to get the latest changes in our project but before that wait let's go to the manage and let's go to the content now that we have uh two models in our application one for restaurants and one for the dishes we can manage them from the content tab here let's open it fetches the items and we have a dish table here selected let's go to our restaurant table and we don't see any data because it's a new table we don't have any data yet what is uh cool about amplify is the auto generating seed data this is nice whenever you're getting started then you need like a lot of data in order to test your application and you don't want to imp input this data manually so what we're going to do is just press on this auto generate seed data and we can uh specify how many restaurants do we want to generate i'm gonna start with how many do we have like three or four four four and we can add constraints on how would we want to generate some other fields for example for the name i don't want any string i want for example a a company and this will give us a random name but that looks similar to a company let's give for the image for the image here like i i wish there would be like uh an option here for image urls but we don't have so the image will just be generated randomly and we will have to change it manually but for the delivery fee we can say uh give me a value from we've arranged like i don't know zero to five dollars for the mean delivery time let's do a range of 5 to 15 a random value in this range and for the max delivery time i'm gonna do 15 to probably i don't know one hour or even more one hundred twenty one hours yes it's more than one hour the delivery i'm not waiting back uh then the rating let's add a range from probably two to five what else address here you we can have uh there is a street name street address but just address uh no i think it's straight address that i'm looking for and this will generate an uh a random address looking string for the latitude i think i wanted to generate them all of them like in the same region so that's why for the latitude i wanted to generate them in a range of i don't know 46 to 47 because by generating them in a very small region they will we will easier work with them with a driver's side application and for the longitude i have 28 to 29. can i let's say add a simple data for myself that i want for example uh if i want something simple string for all of them like a type no that's not possible like that would be nice for the image and we could say or even to have option of giving a list of of strings and to randomly choose from them but it's not possible at the moment uh but this seeding is quite a new feature so i'm pretty sure they will improve it over time but now that we have added all the constraints actually rendering only four like is too little let's render ten of them generate data and right away we have data in our application now what i want to do is as i said to get a image url from our dummy data here and go back and add some images to all of them for example here i'm gonna for the image i'm gonna say restaurant one and as you can see the name of this restaurant is williamson minimum delivery time 10 maximum 46 rating 4.2 perfect address something like this loyalty related to longitude and these fields that i mentioned about created that and updated that are automatically added for us so let's press save restaurant because we updated the image and let's do the same for a couple more and then i want to um to see if i'm going to be able to give access to you lucas so you can help me with this stuff but no actually it's going to be easier just to go through them uh because it's not bad yeah i think it will take around the same amount we have restaurant for maybe we do all right let's go from restaurant one again but uh i'm okay like this only to have a couple of restaurants with images bobbers we will not see the images in the application but let's go to generate some dishes as well to properly see them in our application here the problem is that we will not be able to auto generate at the moment uh just because we have like a relationship here so it doesn't support it uh at this moment i'm mostly 100 sure that it's going to be available like in a couple of months because amplified team is working is moving very fast and this is quite a basic feature that we would need and it's not that hard to implement but for now what we can do is to create some dishes here so oh my god i'm gonna have to get some some information but uh we can generate a couple of them what do we need [Music] okay uh but i think lucas like these things like if you would be able to to help me with but let's see so for the description we have this one for the price we have 6.9 and for the image i don't know i'm gonna provide the same images of a restaurant just to see it there and we need to link it to an existing restaurant so let's go ahead and attach it to the first one to the florian forest the one with this address and let's save a dish let's add one more like this and for the image i'm gonna choose another one and another one description and tinder is asking uh can we have a placeholder placeholder image for restaurant images so it shows that in case no image is downloaded i think that's what we are gonna do that's probably a good thing so let's save a second dish um and let me see in the user management uh if i'm gonna be able to to invite you lucas but let me see can a force change i'm not sure if with this user you're going to be able to to get here so don't worry um but what exactly do you want to do uh crazy i want to give you access to to come here uh let's try oh i'm gonna send you here in the private chat and i see if you if you receive an email or if you can access this url with your email and this password and um yeah like i generated uh two dishes that's enough just for us to see that we receive them in our application uh hopefully lucas will be able to join the project and add more dishes so we will see them uh in the application but for now we can move to next step because we have deployed the changes we need to pull the backend because we didn't do that yet we populated with database by seeding we updated the images for restaurant and also added manually some dishes so let's go ahead and come here and we need to push all pull all the changes from the studio in our application so let's copy this amplify pull command again let's open uh vs code here and yeah let's open the terminal and i'm going to open a new one basically this one the second one so here in the terminal let's paste the command the amplify pull command to pull the changes from our amplify uh that we just did because at the moment this is our current local backend that has only authentication but now we are going to see that we will have two of these categories authentication and api perfect that's it that's it from from this side and now the next step is quite exciting the next step is to start fetching restaurant data on the home screen instead of rendering them from the dummy data so don't look for the code because this is only for you as a note after uh just just to have it to download the presentation but we're going to do it like step by step and you're going to see how easy it is to query the data using datastore yes we're going to use datastore to query our data and datastore is a library that serves like two purposes one of the purposes that it offers offline functionality for storing data on the physical device and also it has the possibility to sync with local data from your from the device storage with the cloud data that you have in the amplify so if you use datastore with racknative and with amplify like it's a great uh combination of having uh of fetching querying the api and as well of uh saving everything and being able to uh have offline support for your application so how do we work with the um with that look at he didn't did it no no no but what email we see me well lucas not just that yeah yeah what did it say i received an email in the like work mail but i just can't log into it it says incorrect password or for me it says that you have to change the password yeah yeah but i can't even access that place to change the password okay okay don't worry we're going to manage to do it so as i said we are going to use data store to query our information about the restaurants available in our application and that's going to happen in our source screens and we have a home screen index at the moment this flat list but you can see on the right it renders the it takes the data from them asset but from them come on from the dummy data that we have provided here in the assets we don't need to take them from the damage data because we are going to fetch them we are going to store them inside the state variable for the restaurants and set runs use state is going to be an empty array at the moment at the beginning so now if i save i could see no restaurants on this page nothing is working so yeah i don't see the my development tools so what did i miss your is your metro running no something happened oh and i know what happened usually we have this error after let's see if we'll have it one more time but i hope we do because i want to show you how to solve it where is this error like this one operation not permitted on them should be duplicate files or something like this no actually it works but if you have an error hmm with duplicate files and specifying these current where is it i cannot find it at the moment um but yeah like if you have any issues at the moment let me know down in the comments and i'm gonna send you the solution uh to that error but in this case it didn't appear i think it mostly appears for react native cli pro projects but the problem that we have right now is that we didn't import use date from react so let's import use state from react and now come on why is it taking so long i don't know it seems that internet but i don't know okay now restaurants page is displayed but we don't see any restaurants because uh by default now we are taking them from the state and at the moment the state defaults it with an empty array so we need to somehow get the restaurants fetching from our back end and then using the setter of the state set the restaurants here so when should this happen when should we fetch the restaurants well it should happen whenever we open the home screen whenever the home screen mounts so in order to execute some some logic based on the life cycle of a component like whenever the component mounts this is a life cycle of a component we will use use effect hook and uh we're going to use it like this use effect it's a hook it expects two parameters the first one is a function which is the effect like which is the function that is going to execute based on uh some dependencies the dependency is the second parameter and if we don't provide any dependency this function that we provide here is going to be run on every update so it's the same as not using a user effect but if we add an empty array as the dependency of a user fact this will make sure that the function that we provide is going to be executed only the first time when the component mounts so um uh yes let's i'm just thinking if to to go the first route or to show you the long route and then to show you the easy route let's let's go with uh with a long route so uh we will have we will need a function to fetch ra star runs so this function is going to be an async function and here we need to do something we're going to call the function in the use effect that we define here because we want to fetch the results when the component mounts and we need a separate function because our logic should be a sync but you cannot add directly inside the function of a use effect the await keyword so that's why we need to separate it into a separate function so what should happen here so we need to get some results uh just by querying datastore that we need to import so let's import data store from aws amplify and also we need to tell datastore what model do we want to query if we go to our source here amplify generated for us a folder called models and here there are uh it exports all the models that we have in our application as you see in the index.js it exports the dish and the restaurant whenever we need to query the restaurant we need to import that model from there rest run from somewhere here then models and that's it from the models now with this information here we can say uh get me the results by awaiting their response from datastore.query and what do we want to query we want to square even restaurant model and now we can do console log raise re results and if i open the debug tools here is what we see we see a list of restaurants an array with a list of restaurants with all their data that was easy it's yeah it's it's as easy as it gets so what do we have to do is simply call set restaurants with a result that we get uh with the re results that we get and we will start seeing restaurants here so let's do it like this come on i think these don't have images don't yeah yeah yeah yeah most probably they don't have images but the other ones have images we're going to have to work a bit with numbers because they are crazy but the cool thing is that that's it like with what one line of code we have queried our restaurants model that is coming from our database and um yeah we have them displayed in our application uh the thing that i wanted to show you like the long route or the easy route is some tricks of how we can do this in one single line directly in the use effect so as you can see do i want to show you that okay as you can see we have here cost results is equal to a weight datastore.query the problem is that we cannot have this code with a weight we cannot have it directly in the use effect so i'm gonna remove the function because we will not need it uh but we as i said we cannot have a weight here inside the use effect but if you remember studying like i think a weight then you know that we got to await from another way of dealing with asynchronous uh calls and that way was with dot van so we could use that approach to simplify this uh process and we will do it like this so uh datastore.query.restaurant which is a promise we're not gonna wait for the execution of this promise but we're gonna provide a van operator and then operator will receive this result basically i'm reconstructing this syntax here so we're going to receive a result and this is going to be like a function that is going to be executed with these results we can simply set restaurants results like this so these two are the same one is using a weight one is using the then the problem is that a weight we cannot use here so i'm going to comment it out but the van syntax we can use here so we can write this in one single line but uh there is one more improvement that we can do here whenever we have v syntax basically we declare a arrow function that receives a parameter we take this parameter and we simply send it to another function that means that the lambda arrow function that we declared here is just a simple middleman that is doing nothing it takes the parameters from one side and it moves to our side so instead of declaring this arrow function here and calling the function we can simply pass the set restaurants function without calling it we just pass it and it's going to be executed with results that we get from the data store query so now we are down to one simple line hopefully now it makes sense like i didn't want to say like this is how you do it and like why i took it step by step to explain you so um yeah now we we have our restaurants here with images uh it kills me that some of them don't have images just add the default one in the restaurant item uh okay i can do some workarounds there because we still need to adjust some some of the things in the component that is rendering one restaurant item here cancel what's going on so let's open the components and what what is this is a restaurant item let's open the index and for the image let's do this logic because the image here is not null it's a string so i'm gonna say if the image starts starts with http then render the restaurant image otherwise render the default image and this default image we can declare here on the top we need const and i'm gonna provide um a default image there from ssdata restaurants i'm gonna provide like one of these images but like in your application you can have like a proper image that is saying like no restaurants or like some uh like a gray image that displays that there is a missing image if you get what i mean but by doing that now uh these two that do not have an image they now display this dummy image and the other ones that do have an image they display their own images perfect now let's fix these numbers because we are going crazy uh and we are coming from uh delivery fee for example right is one of them so if you remember from yesterday in order to cut uh some of the digits after the the dot in a float number we can use that to fixed and we can say to fixed one like 0.6 or something like that for the minimum delivery time we don't need anything but for the rating we also need two fixed and here we need also one digit after the dot so we have 3.6 we don't care if it's 3.657 where it fits yeah that's why we cut the valverdes okay now look good all the data is coming from the back end amazing perfect and yeah like look how how easy it is like we simply do where i don't even see where in the screen's home screen we simply have data store query restaurant and then set them in the state yeah this is just simply querying but we can also provide like uh very like we can provide um arguments uh filters we can filter them ourselves so yeah we're gonna see that in uh involver use cases where we uh have for for for today that would have definitely taken more time doing it like with node.js or something setting up everything and wow crazy you can imagine right yeah so we have a fetch restaurant uh the next step is going to be to fetch the details of a restaurant so let's let's get going but yeah before that let me see if we have any questions related this topic that we are covering right now not really okay so it seems that the stuff is clear it's quite simple uh yeah we can move on yep yep let's go uh so the next step is in our screens whenever we press on one restaurant i want to display the data about that restaurant so in the [Applause] restaurant details screen let's go in the index here and at the moment as you can see the data is coming from uh state or from from dummy data from assets data restaurants but now we will delete it uh we will d come on control yes delete it we will delete this restaurant and we are going to save the details about the restaurant in state after fetching them from them um from our api so let's import the use state and also use effect because we will need use effect here as well from react and let's declare the state variable at the top const past i'll run and set rest run use equal use date and what should we initialize it with well at the start we don't have a we don't know the restaurant so we're going to initialize it with null uh now a lot of things will not work because it's initially null but we're trying to access for example restaurant.something so for that reason like if a restaurant is still null that means that we are still loading so i'm gonna say if restaurant is not defined is null i'm doing this before returning our actual component uh i will return a simple activity indicator a t vt indicator imported from react native why let's import it from react native here activity indicator which is a simple spinner that shows that the data is loading so that's what we need while we're still loading just display a spinner so if i open i don't see it but it should be somewhere where on the top size what size does it expect large maybe some style as well but i don't care like i don't want to to spend time on uh showing this activity indicator it should be somewhere there like a very small spinner i don't know why i don't see it but like for the use yeah for the viewers yeah yeah you could add some padding and align this in the center of the screen to show the loading screen but now what we want to do is uh well basically we know the idea of a restaurant that we pressed on and we see it here because we console warning it so as you can see like this is the id now what we have to do is knowing this id we need to query the restaurant details that has this specific id so uh when do we want to do it well we want to do it when the component mounts when we get to this restaurant detail screen and uh for this specific uh scenario i'm gonna actually have a separate function because we need to do two things here or actually we can productivity indicator you need to add color i think yeah ella tunde is right alert for android and for ios the default is grey but for android you need to specify the color i guess yes i see it now okay thank you very much uh so back to our use effect what are we gonna do here well let's fetch the restaurant with the id so uh data store yeah we need to import it import data data store from aws amplify and also the model that we want to work with the model is something from models and then that's it and the model itself is called restaurant so let's go ahead and do datastore.query we remember how to query restaurants by providing restaurant here but we don't want all of them we want only one of them so if you just simply specify the id as a second parameter it's going to query by id and we can then set it back in our state set restaurant save if i click here i see the name yes the image because it doesn't have a default image yeah yes yes yes but now all the details is fetched from that restaurant and we see them here uh yes again we need to fix them when we display in the header i'm going to fix it in a moment so in the header where we have the restaurant image here let's do the same as we did in our components restaurant item uh let's bring this default image to our where is the header uh header here so we need the default image in the header of our detail screen and when we set it let's do it this logic i can give the image starts with an http that means that it's a url uh then set that url otherwise just provide the default image and now even the first ones will work yeah perfect and the same thing with the details like names subtitle here delivery fee dot to fixed one uh mean delivery time is okay yes everything else is okay so we have queried the data about restaurants but uh we still don't uh yeah let's um let's simply where is it restaurant item i don't need it in the restaurant details screen after we query it let's go ahead and console log restaurant dot and that's it just restaurant so let's see what data do we have there sakosa no problem so the restaurant data is this one so we have all the information about the restaurant itself now what we have to do if we look in the presentation we have to query the dishes that belong to our restaurant i'm not going to spoil you the code because the fun is in actually implementing it but we need another state variable for our dishes so uh dishes set the shares equal use state and the dishes is going to be an array so we can initialize it with an empty array at the moment now after fetching the restaurant we can also fetch the dishes that belongs to this restaurant so for that we need another model to import here called dish and we can use datastore dot query what do we want to query we want to query wet dishes so query dish model and and if we yes if we provide as a second parameter one function here this function is going to be applied uh behind the scenes to filter items so we need to filter not to get all the dishes but only the dishes that has the restaurant id uh matching this idea that we have on the screen so for every dish i want uh that dish dot dot the field that we want to query one is restaurant id and the way we filter is just by uh calling this function and providing first operator the operator here can be eq is equal g greater or equal gt greater than le lower or equal lower than not equal not contains begins with contains and so on what we want is the restaurant id of our dish to be equal to the id that we have in the route this id lucas does it make sense yep perfect sense okay so after we do the query we simply say van set dishes save i think we can probably do it like this very dish we'll see if this vs code will allow me to do it no it doesn't okay so it's okay like this as well so uh yes let's have a look if i go to okay dishes is not used the value of our state is not used because if i scroll down here for the flat list of our dishes we are taking them from that restaurant but now we just simply have to take them from the state variable with the name dishes so let's go to the first one killing group for example we don't see any menu items that's okay because our menu items were attached to one specific uh this one one specific restaurant so actually i think it's something with um uh something with um i think there we saw simply the address not the name of restaurant oh yeah we're gonna find it we're gonna it's gonna be the last yes it's the last one williamson so as you can see now williamson has two dishes here but we have added invest admin studio but the cool thing is that now if let's validate that we are not simply displaying all of them here but actually the one that belongs to this restaurant and we're gonna do that by going to the amplify studio and creating one more dish let's let's do a very dumb one dish one enter image i'm not going to provide an image very good very tasty that's it and price 10 link to an existing restaurant we were linking it to [Music] florian forest i'm going to link it to something else to this one save dish and now i can refresh my page the restaurant was williams we we yeah come on um let's find the other one i think you should start from the bottom but if they do not um yeah yeah they're right there probably order right yeah it's just like this one yeah cauter has one dish dish one very good very tasty and the williamson has two dishes and doesn't display the dish that belongs to the other restaurant perfect exactly what we needed oh uh that's that's it uh here with this feature we saw how we can query not um yeah basically in the previous feature we saw how to query a list of restaurants now we saw how to query specifically one restaurant by providing the idea of a model that you want to query as the second parameter and also we saw how to query a list of things but to filter based on some field and the filters can be equal not equal greater than lower than if you're comparing numbers and just with this like you can have like very um performant filters for your database any questions so far nope so far everything is clear okay that means that we should go to the next page fetch these details okay that's quite easy uh right we will remember how but this time lucas you're gonna tell me how to do it okay let's go to dish detail page this details page yep and here we'll need use a effect to import from react okay okay also we'll need to import uh from avs data something data store yeah the store and now we'll need to uh yeah import the model from the models and i don't know the name of the model but probably dish just yeah and now i'll need to create a use effect with an empty array as dependencies and in here we'll need to fetch by data store i think that query if i'm not mistaken then passing the dish and now we'll also need to query by id so pass the dish id like here for the restaurant id uh but we don't have an initial id from the route so also we'll need to pass it from i'm not sure if we're passing we are passing it yeah i think yesterday we were passing it yeah and now yeah the same like do cons route use route the structure to take id from params route dot params yeah and uh yeah so that now will uh also we'll need a state but now yeah let's create a state for a dish uh item and it will be no for now okay and now in the jump just what happened oh my my home is breaking falling apart okay okay so now let's pass the id in the query and with then just simply set the this uh yeah to this dish that it was query okay now also let's check if we already have the the data query because now we will get an error if it's different than this what did we say there that we want color and also make size bigger because it's the small one is very small large or how is it yeah large okay let's see what's happening oh elsa import and also we don't need already with this import the restaurants okay so let's press on this cheese de cuenos which is the cuenos and whatever one is hamburger la super cabo voila from the first time lucas lucas is first time sees amplify and like just from memory without even coding it like he managed to to remember like this simple syntax of datastore.query by id and then setting it to a state yeah another thing that uh i think is that we can do here is to query this not when the component mounts but when the id changes because if i send a different id to this page but the page already is mounted i want to re-fetch with a new id to have a new data and we can also add a check like if id is defined only van query otherwise like if id is not defined like you don't have to query it because it's null or it wasn't there so for idea i cannot hear a question mark in some cases it might be null and yeah this is a simple if that that can prevent some some problems and the same i'm gonna do on the restaurant details page in the index uh as you can see we depend here on the id so let's add it to the dependency and let's check at the beginning if id is undefined i'm going to do it otherwise if i design the file i'm going to stop the execution of this function and stop it here um yes that's it like the restaurant details this uh this is it good job lucas uh okay let's see do we have any questions so far let me fix my studio hello hello hello all right so um we are to our scene but we still have a lot of things to do because so far we have learned the fundamentals of amplify with authentication and with with data with our api and also querying using datastore we saw how to query it and in the next steps is going to be more intense of where is it take note here taking uh all the data that we will possibly need in this application for our users for our basket for the orders that the user will place and also implement them in the application to properly manage track the orders track the basket track information about the user and so on so it's quite intense um and we it's going to be interesting and a lot of fun to implement all of these tables with their fetching but before we jump into that i want yesterday after uh announcing the launching of a course next week i've got a lot of questions related to the content of a course like what's going to be there inside and also about the uh how is it different from the youtube videos and all the youtube content that uh we are putting here for free so uh today i want to discuss these questions a bit before moving on to to our challenge uh in order to give you more information about that so uh starting with a course content like here is where uh everything is different than like on youtube basically the structure the way we are learning is the same we are using the same project based methodology and we are working a lot like hands-on building uh applications and by the end of it you're gonna build two real world projects one is gonna be duolingo clone and the other one is gonna be a full stack like in-depth instagram clone with a lot of features and uh production ready features uh we already have in the course more than 105 video lessons that around more than 30 hours of videos and um yeah as you can see a lot of code we're gonna write um but now let's let's cover a bit more details about specifically the modules that we're going to cover in the course and how they can help you like you can find these details at academy.notjust.dev and read them thoroughly uh at the moment i'm just going to go through them explain in a couple of words what we are covering there so for the instagram clone here we start by setting up the project with react native cli and then in the third module we implement the whole instagram ui i mean not the whole but the main parts that we are covering there um we are covering there a lot of react native fundamentals um like state props managing components having scalable structure of your project and a lot of things that i just simply do not have time to implement them in this live stream and i sometimes don't follow all the best practices in on the youtube live streams just because they take a bit of time but we are good to to learn and to get used to them uh if you want to continue working as a full stack developer uh after that we cover the navigation and income in in comparison with navigation that we have implemented here like in the course we go way way deeper here and we cover a lot of other types of navigators like stack navigator bottom tab navigator top top navigator uh vm um how is it called drawing navigate drawer navigator yes we also cover deep linking of your application to be able to send a link that we when opened will automatically open your application to a specific page and a lot more uh then we are getting into the back end and we are covering the fundamentals of aws amplify and here we cover first of all from the fury side like how everything works and uh then like practice to implement these features um the things that um that we focus in the course is on like security like how to secure your aws account in order not to have like i don't know an expected beatles were to have uh open some um vulnerabilities to be able to easily get your account hacked or something like that so we cover these steps here uh in very detail uh after that we have authentication and the authentication uh in comparison with the two lines of code that we saw here today in the course like this chapter has like probably 10 videos and it's like four or five hours long at least and where we go very in-depth into customizing your authentication flows we showcase how to properly um set the theming of your navigation and also we get into more details with very custom uh screens how to do that as well we cover there sign in with facebook and google that uh that is quite important for a lot of application and uh and a lot more like i i could list so many things that we are covering there that we never covered on youtube like lambda triggers how to automatically sync uh um users involve authentication with the users in the database and um yeah that's uh that's exciting like lucas if i go too long stop me and the last module not the last module the next module is the api and here we start by designing and going step by step like what data do we need like how to design the relationships and i take an approach of showing you the thought process in order for you to be able to apply the same principle that you learn here to apply them in other projects that you are building so it's not just teaching you how to build this instagram flow it's teaching you how to build full stack mobile applications based on yeah like we are just using instagram clone as a way to to teach that uh what's different uh in the api module like this is one yes this is one of the most uh the biggest modules like it has more than 10 hours if i'm not mistaken uh then the way the amount of things that we cover there uh one thing is that we are not using data surveyor just because data store has some limitations and uh i discussed the limitations of data store in the course for the querying library on the user side on the client side we are using apollo client which is a very performant graphql client that helps us one query our graphql api and to manage and cache everything on the device and apollo client is used a lot in a lot of companies and i decided to spend this time to teach you one more library that is going to be crucial for uh for for your career later on like we uh we also cover a lot of more advanced topics like pagination sorting real-time data security things uh things that are you don't see them right away and that's why we don't cover all of these things on youtube because we don't have this time but in order to have production rate application you should have at least like pagination to to be able to load more data or sorting to properly display in the order that you want or real-time data okay i'm going to move on to the next slide it takes me too too much uh the module 8 is about storage and here we implement the storage for our images videos and a lot more then in the module 9 we learn how to prepare our application to production and here we cover both uh like how to prepare it from the marketing side like what assets do you need uh to successfully upload them to uh to the markets and also from the technical side on how to set up the the how to build your application how to manage your builds and also how to uh distribute that to uh to the apple store and play at the end store this module we take this step and this process is then automated in a ci cd pipeline so that every time you push some code it automatically gets billed and sent to the user which is really exciting the next module that i'm working on right now are first of all the following system that will allow you to follow people see a feed only from the posts from your followers uh also like the following counters and so on after that the notification system a very important part of mobile development are notifications and here we are talking both about in-app notifications that you can see inside the application and also about push notifications that you send even when um the user receive them even when the application is turned off uh and the last one is uh testing and here we will implement proper testing mechanism for for our react native application and for some of them aws amplify services so this is just one course that you're going to get by joining the full stack mobile development course because we have one more specifically tailored to beginners and that is going to be the dual lingo clone and where we cover very very in-depth and very easy the fundamentals of react native so if you even don't have any experience with react native you're going to be fine because you're going to start with a dual lingo clone get improve your fundamentals of rack native and then move to this more advanced like instagram clone that covers a lot of advanced uh stuff so uh yes uh of course we've been testing uh all of these modules with everyone who has joined uh during the pre-launch campaign back in august 2021 and thank you very much everyone who is part of the batch zero and who has given me valuable feedback and suggestion on what they exactly they want to learn and if something doesn't make sense like to probably do it in a better way so thank you very much um yes the course is launching next monday 25th of april here you can see uh the time zone time in different time zones and uh yeah if you are interested join the wait list because the uh launching period is only seven days and after seven days like we're going to close them the doors to the queries and start actually working with the batch of students that will join to work close together to vm in order to help them uh get to the next level as a mobile as a full stack mobile developer so academy.not just they have checkout join the waitlist and i'm gonna come with more details during this week uh and um yeah i'm super excited about that we've been working for the last eight months like crazy for it uh the whole team it's not just me it's me lucas our catalina our video editor uh and other team members that are helping me uh bring this to uh to life so thank you everyone who is involved and super excited for that now back to our projects uh here yeah just a quick uh note like i don't have to be biased or anything like i could say like the truth and i had a little sneak peek not a lot of content i saw from the uh tutorial the whole series but i had a little sneak peek so it's crazy how in depth like one thing is explained with charts and also like with diagrams for example i saw the sneak peek about the uh when you were doing with avs so i think there's like a lot a lot of value for beginners as well it's very experienced developers thank you thank you yeah i was trying to introduce like more ways of explaining the same thing for example right now for the data model the best way for me to explain your like the whole data modeling process is like with a pen and a paper to draw like these tables and relationships but in like on youtube like i don't have this time um to to do that but like for the course i'm doing that because we can edit a hotline we can make it look perfect so um yeah like i'm i include there like different types of content it's not just building one video is uh like theory about what's behind uh aws amplify authentication because if you just learn amplify without knowing the behind the scenes what's going on there like you sooner or later you'll gonna get into uh troubles of why is that not working like why um how to adjust that and in that case like you need to have an understanding like what's behind amplify because there are a lot of stuff behind amplify and i explain very in-depth like everything that is behind how to adjust them if needed how to um yeah improve them and so on uh yeah other videos are just explaining on the ipad like how data modeling how to data model your database um but most of the things are hands-on experience um building a very uh end-to-end application with a lot of features yeah all right so people are excited let's go come on thank you coffee i am saying i want to thank you for giving me the confidence that i need to start coding and building these amazing applications uh it means so much to me like v-swords like uh to let's that's what we're trying to do here on the channel like to encourage you and to give you the confidence that you need that it is possible to build these applications and yeah like it if you know the tools and um the things that that are important like it's it's quite quite easy i would say okay i wouldn't say quite easy because i might give the wrong impression but this is easy this is not easy this is possible and once you get there like it's very worth it like yep that's that's what i can say totally agree all right so let's continue with our project here and we need to do the data modeling for the rest of the things that we have in the application oh i just ran obviously yeah same you will be the main reason i'll be successful we we are rooting for you like yeah for all of you guys yeah yeah all right so um we need to create the data model for the rest of our models that we need in our application we are we are done with restaurant and dish but uh when we get into the next features like let's say a user hey priyank thank you very much for the donation i appreciate it yeah as well priyank is here from probably when we didn't have even 1 000 subscribers donating like always so thank you i remember it uh so as i said when we get into the next features of a user placing an order or a user adding something to the basket that means that we need to have a model about the user that we're going to have it in the database that's why the next one is the user so let's go ahead and see what information do we need about the user and we will take it step by step so let's go in amplify studio in the data and we're gonna add one more model called user what information do we need about the user uh give me one second and i'm gonna where is it okay for the user we need uh first of all the name of a user which is required uh we need the address we're going to have minimal information about the user just the ones that we need for the placing an order and receiving an order and that's the address and this is required as well and the same way as we did for the restaurant like latitude and longitude did we name it no no you said lng yeah lng and they should also be float numbers and they should also be required again at this moment we are simply gonna ask this latitude and longitude from the user as input this is not very user friendly and you could use uh like some libraries and maybe by the end of the um of this project we're gonna implement the google autocomplete feature that we can get his address just by searching similar ways you do all of our applications but for now we are good with these three four fields okay back here so now we are starting to get into the basket uh functionality uh for the basket how we are gonna do it um the way that ubereats work is uh you don't have one commod common basket in your account that you can add things um the common basket methodology like let's say is amazon like you have one common basket you go to research you add a lot of things to the basket and then you check out the way that ubereats work is they have one basket per restaurant so if you want to uh order some food from i don't know some restaurant uh then the basket is gonna be just for that restaurant because that makes sense like uh on how they they work they cannot like you cannot order like a burger from mcdonald's and a coca-cola from from someone else and expect it to be delivered uh the same way so for that reason we will need one model model that will represent the basket the basket right this model let's uh let's do it let's do it here add model it's a basket what do we need to know about the basket well what restaurant is this basket for and what user did create this basket so basically it's a relationship between two models user and restaurant for that reason i will not add any fields we're going to add relationships later but now what do we add in the basket well in the basket we add dishes right so you might think that okay in the basket we're going to create a relationship to the dish one basket too many dishes because you can put many dishes in one basket save and that's it well that might work and that would work unless we have this quantity filled because at the moment with designing it like this we would not be able to save the quantity of a dish that we added to the basket so for that reason this type of relationship will not work because we need one more extra field for uh the dish that we added to the basket so for that reason we're gonna add one more table called basket dish right how did i you had basket item i think uh i i will keep it basket dish because this is a dish or we can work with basket item to be honest let's check it out real quick oh no actually you did basket dish yeah so this basket dish will contain a property called quantity because we need to know how many issues did you add of this type did you add to the basket so it's going to be int and is required we don't need any more information here we're going to work with relationships or maybe we should add a relationship now well let's add the relationship now why not so let's add a relationship so one basket dish will reference the dish because we need to know what dish did the user add to them to the basket so one basket dish will refer one single dish that's it save uh that's good and another relationship of a basket dish is in which basket does it belong so for that i will go to the basket and in the relationship say that the basket has a lot of basket dishes has a lot of basically dishes so let's save this and by doing this we have here the property basket id that we can set here okay um for the basket dish i think we are done we have relationship to the dish and we know what basket and what quantity this is important stuff like what did you order that's uh the dish here how many things did you wear there that's the quantity here and to which in which basket did you put it basically from which restaurant did you take it uh we have everything there but for the basket we still have to add a couple of relationships uh for example uh for a basket we need as i said to know who is the user that created this basket so uh i will add this relationship to the user so one basket belongs to one user save and then one basket belongs to one restaurant because this is who created the basket this is the restaurant that will fulfill the water with that basket and these are all the dishes inside the basket so i think that with relationships here we are done as well okay now we move to the next part it's about the the worders and we need it's basically the same as a basket and a dish but now it's not just something that you want but it's something that you actually place like the water in terms of structure like it's mostly the same so let's go ahead and uh an add an order model order here and what does a worder need we need a relationship to the user because a worder needs a user but instead of doing this we could do that but um i will reverse this relationship because if we do this if i add the relationship from a worder to a user uh let's see maybe i don't need let's see the user no yeah in that case it's going to be a bit harder for me to query to create the query give me all my orders because i don't see a field here for the user id and if i added inverse from the user to the orders basically one user has uh what happened here why i cannot add one too many one i think it remembered oh my god don't tell me that you remembered that one and you didn't delete it properly let me try to remove this model and add it again so it's a worder and i want to go to the user and other relationship to the order one too many so one user has many worders and by doing this in our order field we have a user id and we will easily fetch and filter only the orders for this specific user then we will be i think for the basket as well we're gonna do that but we're gonna think about it in a moment what else the worder also should have a relationship to a restaurant or maybe it's better to add it uh the inverse one as well from restaurant to the worder but no let's add it here restaurant one worder to one restaurant okay and what else what else well uh we need dishes inside this uh order because right now we just know who made the water and from what restaurant but we also need uh dishes for the same reason as we have created a basket dish because we need more information about it like quantity the same for the same reason we're gonna do order dish uh and the water dish will have quantity quantity which is going to be integer required do we have a same for basket dish yes basket dish and it as well will map to one dish like this word dish quantity for the worder you know what i'm thinking about adding one more field the field for the values like subtotal and total [Music] just to calculate them once and put it here so is required and total load is required but uh what will be the difference between between subtotal and total subtotal will be i don't know let's let's work with only one yeah that's what i thought as well oh my god i mean we could do subtotal without calculating the delivery price but is does it matter really we'll see uh okay so basically we have everything let's just double check uh from here if we didn't miss anything oh we missed i already see uh what we missed we missed the order status so the order should have a status uh whether it's a news order if it's in prepare in uh cooking uh yeah in preparation or is being delivered or it's completed so let's add the status here and instead of providing a string which we can also do because these are strings a better way would be to add a enum enumeration and we can press create new here and that will create an enumeration on top the enumeration will be order status and the values will be mu uh what value do they provide there new cooking ready for pickup picked up and completed so new uh what did i say cooking cooking yeah ready for pickup uh what else uh picked up up and after that it is completed because the user received order so now these were their status we can go to the order and the status is this word or status that we can make even require okay uh let's see our things so we have order status the next step is here word dish order dish id quantity integer yes word or id is coming from a relationship source we don't have water id here because in a worder we didn't make the relationship to the order dishes one too many so without that we wouldn't be able to link a worder dish to a worder now we have this worder id that is coming from the relationship source uh and let's go back oh i didn't miss to show it yeah yeah okay i'm gonna do it again so what i did is i saw that in the water we don't have a relationship towards the water dish and what we need is a one worder should have many werther dishes let's save and this automatically added for us order id on the worder dish model okay let's move on to check our stuff for the order dish we are done okay the next one is worder where do i have it its id user id coming from a relationship source status yes and also we have added the total perfect and for the relationships we have one to one to a you want restaurant oh and were there dishes one too many because one worder can have multiple order dishes perfect the next one is the basket dish the dish that you added to the basket that has a quantity the basket id where it belongs to and also the dish that you selected perfect and lastly the bucket the basket the basket has an id and it has also them uh as i see in that in the model that i did previously i had the relationships a bit different i had them coming the other way for the user and the restaurant yeah because at the moment as you can see it's gonna be hard for me uh to yeah like in previously in previous design i have a relationship not here but on the user uh table uh and that is gonna work better because at the moment when i'm gonna query the basket it's gonna be harder for me to to filter by the user and the restaurant but this is what we will need in order to know to get the basket that you created for a specific restaurant you'll have to filter one the user id and restaurant id so for that i'm gonna remove user from here this relationship user and restaurant from which table from web basket table and i'm gonna add them on the user table for example i'm gonna add a relationship to the basket and one user again it doesn't support no don't you say that yeah i'm gonna have to remove a basket and add it one more time uh it just have like this yes so it remembers that i had those relationships even though i deleted them and it doesn't allow me to make the relationship on valver model so i'm going to remove a basket i'm going to have to check our relationships with so i think yeah i mean this uh there's one question hey is redux needed in this project so no the predicts will not be used here because there a lot of things will be covered and just there will be no time for that yeah so i did again the basket and as i remember we had a relationship to the basket dish where one basket has multiple basket dishes we also need a relationship from the user back to the basket as one user can have many baskets because one user can have one basket at mcdonald's another one at uh give me some restaurant names burger king burger king yeah wendy's yes exactly and he's gonna call baskets okay and the same thing on a restaurant we're gonna add a relationship to the basket where one restaurant can have many basket baskets one restaurant for example mcdonald's can have a basket that lucas created and another one that i created so that's why it's one-to-many relationship okay save and these two things added for our basket here two properties user id and restaurant id perfect that's exactly what we needed uh and let's check the rest of the things so for i was at the basket uh id user id okay basket dishes perfect we went through the orders and so one basket dish basket dish where is the basket here top right we have id quantity integer and basket id coming from a relationship source perfect and a one-to-one relationship to a dish to know what dish is bad then we have user oh we need one more property for the user and this property is going to be called sub string and it is required and this sub is going to be the way we link come on i cannot do it but it doesn't matter the way we link the user that is authenticated with a user in the database basically so far we are not saving information about our user in the database because that's not how it works the information about the user now is handled by cognito but at this moment we need to uh to link a user in the database with a user incognito so uh we're gonna do that with a subfield that we add here it would be perfect if we could um add this sub inside the id and that's how i do it whenever i do not work with datastore but with datastore we cannot provide custom ids so that's why we have a separate sub here but it's okay so uh let's see what else we have for the user sub name address latitude longitude and to relationship to the baskets baskets and to the worders and lastly have dish id name image but we did that already description price and restaurant id lastly restaurant just to make sure because it takes a lot of time to deploy and i don't want to do it twice but i think we are uh good to go and we can um yeah double check like i can go very slowly through everything that i have here and you can double check it so now is just going to be the fields have a look at them why so silent lucas uh yeah i know i was also like double checking but yeah i think uh this the whole ui of creating all these tables is very nice and like easy to understand and grasp i think you did as well but when i like designed this i like to first of all like have a really good drawing on one second look at this one so let's press save and deploy and let's continue talking because it's going to take us a lot of time uh deploy yeah so where do you think when i do like design database i usually and i think you did the same when you were like planning this one like just simply draw everything on a simple paper maybe like an ipad or something but i like to use a real pen not uh there are some like uh tools that help you to build it on the internet and it's easier with a pen yeah paper pen and paper the best and like still works yeah like how i approach yeah yeah you might think that okay you throw a lot of data at us like where is all this relationship coming up from it's as lucas is saying like drawing the this on with pen and paper uh first of all you draw like squares for all the modules that you will need basically wall like restaurants users warders uh dishes and probably initially that's the four things that you came up with after that you start uh thinking about the relationships okay uh how will uh what's the relationship between a restaurant and a dish okay one restaurant can have a lot of dishes but one dish belongs only to one restaurant okay let me add a restaurant idea on the dish model and this way i can connect the dish to the restaurant that it belongs to or the way that i design it with um with this um for example basket table this is a interesting approach and actually in this situation it makes sense just to call it the basket model but actually what we did with this basket model is simply made a many-to-many relationship between users and restaurants if you think about it because one user is allowed to order from multiple from many restaurants and at the same time one restaurant can serve multiple users so the relationship between users and restaurant is many too many and to there is no way to design a many-to-many relationship with one extra table in the middle that will connect on one side one too many with users this is our basket by the way one too many with users and one too many with restaurants and now we have this many too many between users and restaurants okay maybe that's a bit more saying that he saw a mistake in the order field know what mistake in the weather field okay now i cannot see it because it's deploying but what mistake tell us please hopefully it's nothing major but yeah yeah i think and it just makes a lot more sense when you have everything on paper after like because maybe if you start i think building right away in here and this that i think you can get lost so you you will get to but in the end like you will get better but it's going to be very frustrating because you're going to have to do a lot of changes to the data structure and you see everyone like it takes time so in here like if you even like delete one only relation you have to delete the whole like table for some reason ah he was just kidding you naughty naughty okay okay i think it's a good time while we're waiting to get a short break at least for me uh because my back is hurting i need to wait um maybe in two minutes where do you need it originally no i don't need to touch it no let's just wait a bit don't leave me while i'm oh okay you can leave me i thought you want to leave as well because i saw you were drinking your coffee and water very very much so maybe you need to refill or something yeah probably i need to refill but we can do it a bit okay in a moment uh okay nice challenge bro thank you very much jump yeah it's actually so but there's i think today the stream might be even longer i mean there is still quite a bit to do i hope i like my photos like okay we don't have a lot of things to do more but yeah like yeah oh my god i just thought about it like connected may but yeah maybe it will won't take that much it's everything like just connecting and making sure it works yeah but yeah well the challenging part is going to be the basket system uh where there's no the orders is quite easy but just like a bet we can make a bet whether it will last longer or not than yesterday and whoever wins the loser will have to like when we meet uh buy a dinner or something uh that between us yeah i would say it will take longer than yesterday longer than yesterday yeah i say but it's not gonna take longer than yesterday yesterday was five hours yeah 5 17 5 12 something like that it's not going to take but that's a good way to motivate me to to do it faster but you have to make it as well clear to us yes of course so that means that i see the deployment is successful and we can pull the changes in our application and start working with our newly updated database now if we're gonna go to the content we're gonna see all the new tables that we have here and we can manage them as well come on let's um let's not waste time but what was the bet lucas uh i i let me think about it so okay let's let's do the pull come on first okay so he still came here even though he's sick to watch the stream wow that's very very nice learning even when being sick hello crazy yeah so uh as you can see here in the content we have now all the models that we need for our basket dishwarder and so on uh but based on our thing here what is our next steps our next step is the user crude the create read that they delete operations for the user crude we are gonna do it in the following way first of all yes first of all we will at this moment we don't have the user saved in the database if i look at the user in our database we don't have it but the user is still there because the user is managed by the cognitive service for the authentication what we have to do is we will check if a user that is signed up but is signed in is available in our database then we will show him like the restaurants and he is going to be able to see the manual create baskets order and so on if the user is not yet in the database let's simply display this profile screen and whenever the user presses save then when is the time to save the information about him in the database is it clear yep and and moon thank you very much for the donation thank you that's amazing so uh let's let's do that uh for managing the data about whether the user is signed in or not we will create a context because we need this data to be shared across multiple components in our application and in order not to copy-paste code it's better to save this information in a context and then use it whenever we need it so for that investors let's create a new folder where we will keep our context uh like this and let's create the first context called of context dot gs of context is going to be responsible for the authentication so what do we need here we need to import the create context from react context from react and let's start creating the context so authentication context context is equal to create context and initially it's going to be like an empty object now let's define the function that will store of the data about the authenticated user the database user and so on so this function i call it of context provider and it's going to be a simple react functional component that will return what will it return well it will return the of context.provider because in order to consume this context the place where we are consuming it should be inside the the of context dot provider so i'm gonna put uh i'm gonna wrap something in this provider but what i'm gonna rub i'm gonna rub the children basically all the components that i receive as children through props hopefully that makes sense but now let's export it and show you how we use it export default of context provider and we are going to import it inside our app.js let's import the of context provider from from source context and of context now we're gonna wrap our root navigator inside this of context provider and we put the root navigator here by putting the root navigator inside the of context provider the root navigator is sent to the of context provider as children so any navigator screen that is rendered here is going to be by default inside this of context provider and that means that from any screen in our application we can easily access this context that we need here we're going to see in a moment how we're going to access this context but what we need right now is two two basically variables uh one of them is going to hold the often the authentication the user that is coming from the authentication module so of user and set of user use state initially it's going to be null and another one a user that is coming from the database at the moment we don't have any user in the database but later we will have and we will expose it through this context to be able to be used by uh other components basically we're simplifying our work in the next steps so set db user use state no okay uh for the authenticate the off user oh now we are going to send this off user and database user to our provider as the value so of user is here and database user is here by sending them as value to the of provider that's how we expose uh data to the other components that will need it so whenever we will do use context of context then we're going to have access to our user and database user for database user it's quite simple what we have to do we have to in a use effect because it will happen when this component mounts we are going to get the authenticated user using the off module from aws amplify so let's do that right now and i use effect that is called uh here let's do off dot current authenticated user this function will return us the yeah basically the user that is currently authenticated and we can say here bypass bypass cache in order to make this request to the server not to take it from the cache this is a bit more secure and like it's going to actually do a request of a server to check if the user is authenticated or not uh bypass cache true and then let's set of user let's go ahead and console log of user just to see if it works uh so we need this one here it's not here why it's not here did i make a mistake and my i think after pulling changes it happens maybe might be so lucas think about them what are we betting on okay uh i think it depends where we meet it doesn't mean but we have to meet something to the community but the community is gonna be involved oh like that okay i was thinking um okay then i don't have any ideas because i was thinking just like simple people [Music] i have no clue i think if you are offered something like that you have something in mind no i know i don't like i just think that it's a great idea um i might have gotten myself into a big problem here so who can uh think of uh an interesting idea minified react what's going on there full message i probably did something but you're not supposed to do and perform react state update on an amount this is an op indicates a memory minified react error very easily created by up off context provider do you import it the arrow is located in the of context provider minified react error [Music] that's very let me see the code maybe i will spot the bug right away so we don't have a use date it was imported from react production use state now bro i think we no i think this is i don't have first of all i don't know i first of all i don't know how to make clown makeup i am pretty sure know gabiano don't have the i don't have instagram as well you can send it to me i know what to do with it i'll think give the people what they want i think they uh i think they will want you to see but so here is all the information about the user cognito user it has a lot of things that we might not be interested in but we what we are interested in is this sub id that represents the idea of a user that you can find inside the attributes as well with sub id if you go to the user management and if you press on one of these users this is the sub id that i'm talking about so if i copy paste it here like you will see right away my sub okay so that means that yeah like we successfully get access to the uh authenticated user so we can go ahead and do what let's also uh let's also get the vet sub thing out of the authenticated user because we might need it in some queries so chrome sub is equal to off user safely accessing the attributes and then sub and we can send it uh to expose it in our context sub this sub is the idea of a user so when we will need to fetch only the orders of this user it's going to be easy to take the sub from this context without having to get first the current authenticated user and then attributes that sub like that's we can do it once and forget about it now uh regarding the database user well the database user as i said is going to be no you know what let's first uh instead of first querying the database user that is not there let's first save a database user but better let's first display conditionally the profile screen if the database user is null that means that if the user is just signing up he is not yet in the database then display the profile page he's going to put all his data he's going to save and after that we are going to be able to display the restaurants for him it's just an extra like registration step so for that uh where do we control what screen do we show in our application we do that in the navigation index here so uh in the navigation index you know what i'm gonna do in the root navigator i'm gonna add one more stack screen here stack screen with a name uh profile and the component is gonna be profile screen now i want to either render the home tabs or the profile depending on the database user so for that we need to we need to access to the context access to our context here of context to have access to the context i'm going to export from this file i'm going to export use of context hook that is a custom hook that will simply return use context of context basically i simplify the way we are accessing this authentication context in order not to have to import use context and this authentication context every time we can simply import this hook so we can import can you hear me yep okay it was too silent from uh contexts and here of context now with this use of context we can call like this equal use of context and here we have access to all the variables that we are uh putting in the provider so what i'm interested is in this database user so let's destructure the database user from the of context and depending on if it's null or not we are going to render these screens so let's add this conditional if database user is defined then i want to render the home tabs because the user is already properly signed up otherwise we're going to display the profile screen save now after it loads again you state was imported from somewhere where did it happen so try to maybe search in code where you imported it but to work here did you chill chill chill what what i'm doing hello from the upper side in rook navigator authenticator failed to verify contact in root navigator of context provider it's still coming from the off context provider so oh use context i don't have it imported it was important again what's going on i don't have this on macbook but here like the auto import probably i don't we didn't set properly um vs code but what do we see here now is automatically when we refresh the application and after we are properly logged in with our account uh let's go we see our profile screen so let's go in our profile screen and uh whenever we press save to actually save a new user in aws with aws amplify with datastore so in our screens profile screen index we have here this button save not this one this button that has onsave and here we need to save in datastore saving datastore is the same is as easy as it is to fetch it so we need to import first data store from aws amplify and we need to import the model that we uh are working with and that model is going to be a user from models that's it from just models and now let's do um let's do it like this datastore dot save a new user with these properties the name that we need to set is this one then what property uh the address well latitude the longitude and also we need to provide the sub because if you remember this is our yeah i can look at the crate name address related longitude and also this sub so for the sub as i told before we can import it from here easily because we are uh sending it with uh off with a context provider so let's get it first from const equal use of context and we're gonna get the sub use of context imported from here and let's send it there as well save uh and i think that's it uh if i go here and see ready address one two three 26 and i don't know 26 and if i press save uh field later should be of type number string received yes because these uh values in the text input there are actually strings but we need to parse it right while you do that i'm going yes uh so it's float parser how is it [Music] let me remember [Music] so javascript string to float that's a question with par explode okay so for the uh latitude i'm gonna provide the parse float latitude and for the longitude as well ours float longitude l and g so let's save this file and you saw that it threw an actual error for example if i comment with outward and i simply provide the lng and if i'm gonna try to save it actually throws an error that's not good so for that reason it's better to put these network calls inside the try catch block uh we're going to catch the error and we're going to simply use the alert dot alert error and then error dot message this alert error i forgot how to write error error oh i don't care like this error with doubler with only one okay finally so the alert uh imported from not correct native web but for actually react native so let's import it from here uh alert and now by doing that we have some um error managing errors and it says like field should be of type number string received okay so let's do that number that we were supposed to do and now let's press save we don't see any errors our application doesn't do anything and i'm going to explain you in a moment why but if we go to the content i see this vadim user that we just created here with the data from there first perfect what uh i will do now is i'm actually gonna i'm gonna delete it uh at this moment so delete one item uh because i'm gonna want to show you once again this uh flow uh but we i want to fix the thing that at the moment we are not redirected anywhere so in order to be redirected uh we need to set this database user uh here but we are not setting it so let's go ahead and um expose like i mean export the set database user function and in the index here we're gonna do a const user equal await data store save this will give us the user and we can set it in our of context by getting that set this is called set database user and we can call set database user with a user that was received from the data source save let me also console log user just to make sure that it's the one that i expect so if i go here come on user await yeah because i have to make the function a sync how's it going uh good good you are almost losing so uh yeah let's try again so dim one two three zero zero is going to be fine let's press save and we are redirected to the restaurant page because we have set this user the database user in the authentication context by calling set database user here and these have set it in our state in the authentication context and because we have that check in the navigation index the check of the database user this component updated with a new database user that we have set in the state and now it's defined and it renders the home tabs and if i'm gonna refresh i'm gonna be redirected actually to the login screen to the profile screen but that's good because we can fix it come on yes we are uh here again and why is this happening well because we when this component mounts we are never setting the database user we set the database user only when pressing on this save what we have to do is after we get the current authenticated user that means that in a use effect we need to query the database user using that database so the use effect here will depend on the of user or actually on the sub you know because we need only the sub so i can put the sub here so whenever the sub changes that means the user id changes and we need to query uh we need to query it again so we can say that yeah we need the datastore to query the database and we need to import the user from models that's it so we need to query well let's do that datastore dot query we're gonna query the user table but we need to provide we don't know the idea of a user this is what uh what they really can't wait amplify to fix [Music] because we are not getting the user by its id but by a field called sub and this is because we cannot set a custom id so we are gonna say let's say user user dot sub should be equal to a sub that we know that we took from the authentication user does it make sense yeah it does it's like yeah we just me we just filter all the users in our database and we want only the users that have a sub uh matching them and after we receive that we could say set database user here but that will set an array of users because this query uh v square will return us an array of users so for that reason in the van i'm gonna say users and we're gonna set database user with user at position zero users even if it didn't find like the user not user but users even even if it didn't find the user set position zero will be undefined and that means that there is no database user and as you saw it right away redirected us there because it queried the database user when we mounted come on and we are here right away uh to show you uh this process again we can go here and delete this item now if i'm gonna refresh in the database uh it will not find any users and we're gonna be required to fill our form here with our address uh with is and this and then press save and then we are redirected here automatically and we have the information about the user here in them um that in the table yeah in the database okay we have covered creating and fetching the user uh now let's cover updating the user so there are a couple of more steps uh to do to implement the update the user and one of them and yeah basically let's open our screens profile screen because this page is used both in this menu and in the previous menu where we actually created the user we are going to have two uh logic here when we press save one logic uh is gonna be if um like i don't know user exists then uh update user but if it doesn't exist then create user and doing this we will use the same screen for both creating the user and updating it and this logic is about creating a user so i'm going to take it out in another function called create user which is going to be a sync and this is logic about creating a user we can also do here a weight and a weight and we will have to define a function for update user in a moment but before updating user let's see this if statement user exists let's check if the user exists right how do we do that well we already did that if you remember we did that in our authentication context we vet database user so the only thing that we have to do is we don't have to query it one more time we can simply take the database user from the of context and by doing that we will know if a user exists or not here where where here oh let's go ahead and to let's get the database user from not from but equal use of context and it was imported automatically from the context of context okay so with the database user we can put this database user here so if database user is defined then we need to update the user otherwise we need to create the user uh but before implementing the update user i also want to pre-fill pre-populate the fields with the information that we know about the user here so we already know his name is vadim so instead of having to write it one more time usually we have these values filled for us and we can just change them so for that reason uh let's do it like this like how let's get the database user here and let's initialize the default value of a name as database user question mark name or if that's undefined then empty string and let's do the same for the other fields i already save ibm that means it's working this is address this is database lot and i need to make it a string right yep so i can do [Music] l and g i can do in order to transform it to a string if i'm not mistaken i can just simply add it to a string i might be wrong because javascript is perfect for this scenarios like you never know what's gonna happen uh but we are good to go here i don't know why the address oh because i got the set address so database user address and it's already here uh i hope that it works for our use case as well but we could check it afterwards um now after i modify something here when i press on save we're gonna call this update user so let's implement the update user function which is an async function and what we're going to do well we are going to as well get the user using a weight datastore dot not save but not actually save because the save method is used both for creating models and for updating object models if you pass a new object like this it's going to create a new one but if you provide the user dot copy off we need to create a separate copy using this syntax user copy off and here is a function of [Music] where we will modify the user and it's done like this because the model exam for example this user that we get from datastore it's immutable so we cannot update it uh the user itself we need to create a copy of it so we create a copy of it by calling the model dot copy of the first argument is that the model that we are trying to uh update and that's gonna be our database user is what are trying to update and the second one is the function that is going to tell how to update it so for example updated dot name equal to our name from the state then updated dot address is going to be address from the state and like this for other fields so latitude latitude but as well to parse it as float latitude and here ours float longitude and what do we have to do after that well let's update it in our authentication context by calling set database user so any other place where we query this user we will have a most up-to-date user in them context so with that being said i can press save right now nothing happens but if i go here i hope to see that updated yes yes yes i see them uh content come on well i saw them and i can refresh the application yes the data is updated and i can refresh the application go to the profile and here i can see the updated fields that i can update again so my dim let me check if this works 27 save uh and after pressing save usually what happens in applications is you go back so for that reason i'm gonna do i don't have navigation here no so let's import use navigation const navigation use navigation and after we update it after we update and also after we create it basically we can say navigation dot go back so if i'm coming from here to the profile and save idm1 save i am back to here and if i go to profile i see video one perfect that's um if i'm not mistaken that's everything about the user crude of managing everything in a separate context uh creating users fetching users updating users um everything that we need to know about this um interacting with data store and with our api who that's intense so we are getting close to four hours so i might think that you're right lucas but i don't think so not a lot is left actually like only uh yeah well yeah that's actually it okay so uh have a talk with the people i'm gonna grab some water and we continue with our basket uh but before that let me just double check if we have everything covered everything so user crude uh for the authentication context we have created the authentication context we saved the authentication user and the database user in in state where we exported the provider and a custom use authentication hook show the profile form if a database user is null we have done that and we saved a new user uh when we submit the form after that for update user we first populate fields with dynamodb user and then we save a user by making a copy of it and updating the fields yes the next step is basket so we're gonna be back very shortly and continue working let me know if everything makes sense in the comments yeah yeah i think it should be make sense but yeah let us know and uh i is the basket actually the last thing that we are left with i'm wondering but if it is then it's definitely going to be shorter one so hopefully it's not the last thing yeah so how are you guys doing are you following the guide the tutorial or are you going just watching and just planning to do it later are you not tired yet that's a good question as well this these five days will be quite intense i mean even especially for those who work like following everything from day one i know that few people say that they are still like in day one uh but yeah no i at least yeah i always think i was talking about something very like soft uh i don't know how to explain but nothing something that major i i even said at first like let's uh then i'm going to buy you dinner or if it's other way around and he's going to that's like what i mean like a very minor bet fun one this one is is it for him it would be fun to see him with the makeup for sure setting the community against me no no no i was saying like probably we will be under five hours and then what to understand that that means i will have to wear clown maker but then i said i was talking about like a soft bed a very like okay that even i said like then i'm going to buy a dinner one with me and then excuses excuses excuses you see i i think everybody would like to see you as a maker not not that much for me i don't know i don't know it's debatable we can run as well all right so um moving back to our application where we have to implement the basket functionalities so for the basket what do we have to do there well we will the similar way as we managed everything about the authentication in a separate context because we need this data in multiple places of our application and it's easier to centralize it in a single place we're going to use context as well for the basket so let's start by defining this context in our application uh and in our context let's add a new file basket context.js uh so let's import uh create uh not from here create context use state definitely we will need and probably a use effect as well from react then what else we will need definitely data store uh from aws amplify uh and the bus cat basket this from the modules models models and something like that okay we'll import our rest all the things later so let's create the basket context so basket context equal create context uh like this now let's create the func the component that will keep the state with a basket and so on that's going to be our basket context provider that will receive children as a property and we will return our basket context dot provider and inside it we will render the children that we receive here now we can easily export default the component that we need to use in app.js and also we need to export a helper hook that will give us access to this basket context the hook is going to be called use basket context is equal to use context basket context let's make sure yes it's from there we need it from here okay so now that we have a boilerplate for our context let's go ahead in our app.js and import the same way as we import the off context provider we're going to import the basket ascet context provider so basket context provider now we need to put the basket context provider below basically inside the of context provider but at the same time we need to wrap our root navigator the root navigator should be inside the basket context provider so in the basket we will need access to authentication and in the root navigator we will need access to both basket and authentication okay so um the first step the first function that we are going to import the first thing yeah of course what uh the basket is gonna allow us to do is to add uh dish to basket this function is going to be called what's going on with you here so this function is going to be called okay that's fine when we press when we press on a dish here and when we press add one to basket so as you can see the function needs two parameters the dish that we want to add and the quantity of those dishes that we want to order quantity we are going to figure out what we have to do here in a moment but now let's do a dish to basket we're gonna export as a value to our provider add dish to basket okay where do we need this function well as i said there where we had that add to basket and in our application that is inside our screens this detail screen this is the details of one dish and index so here when we press what do we have here pressable it navigates automatically to the basket but um we are gonna do we're gonna call a function here instead uh we're gonna call the on add to basket so let's grab this function and define it on the top here so const or not to basket will do something what will it do well it will call this a dish to basket that we can take from the basket context so um i'm gonna do it here so const add dish to basket equal use plus use basket context now we can call this function here and we need to send the dish that we already know the dish and the quantity that we have in state okay we can also await here so the function should be a sync and only after that we can say navigation dot actually go back because we want to redirect back to the restaurant page after we add dish to basket now let's go in our add dish to basket here and we want to console log add dish to basket and here is addition here is the quantity let's just see if we managed to put everything together and we see this console log i'm gonna clear everything i'm gonna go to the last one still have a lot of console logs that i need to clear cheese tequenos quantity five add five to basket a dish to basket this is the dish that we want to add with the title cheese take cuenos and the quantity is 5. okay what do we have to do when we want to add a dish to basket well one thing that we have to do is to create a fish a basket dish basket dish item and save to beta store right because we know the dish we know the quantity so that means that we can create this basket dish that we in the data we have here basket dish where is it basket dish so for id it's auto-generated quantity we have a data dish we have a data but basket id we don't have this data yet so before adding a dish to the basket we should know to what basket so get the existing bus kit or create a new one right if we already added some items to the basket then it means that we already have a basket with this restaurant but if we are the first time using the application that means that there is no basket and we need to create one so uh [Music] let's do it like this first of all we need to to see if there is any basket and for that we are going to fetch it and save it here to the basket and set basket use state null what do we need to know when we query a basket we need to know who is the user that wants to receive his basket and that information we can get like sub from use of context let's import this use of context from from the same actually file of context now we have a sub but to identify one unique basket we need two pieces of information the user on one side and the restaurant on the other side so for that reason it means that we also need to keep track of a restaurant actually here it shouldn't be oh no it's really good um yeah as i said we need another piece of information resto run to know on which restaurant page are we at the moment set restaurant use state initially it's null but when should we set this restaurant well we should set this restaurant whenever we get on the restaurant detail page we should mention that okay now we are focused on this restaurant and get the basket from clean group if i go back and open another one display the basket that i have with this restaurant so for that reason i will export this set restaurant the setter and i'm going to set the restaurant in this basket context provider when we get to the restaurant detail page because that's when we will actually activate one restaurant not activate focus on one restaurant let's see so for the screens we have restaurant detail screen index and here we will need the we will need to get something from not from from use basket context and we will need to get the set restaurant but it's also here so i'm gonna have to rename it to set restaurant at basket restaurant so this function i'm gonna call it um i'm gonna call it whenever we actually receive the data from the data store query here so to do that we can simply add a use effect when we receive the restaurant in the state which means that we finished fetching it we want to also update it in our basket restaurant with this restaurant but i think another way is like when we start fetching we need to set it to null set basket restaurant canal to reset the previous one just not to have this weird moment in time while we are waiting data store to fetch a moment when the page will display the basket from the previous restaurant that's why initially we set it to null we query after we query we set it back in our basket context lucas uh a lot of steps but uh what um rating do you give on the it makes sense uh scale it's uh more complex than the previous one but it does make sense i mean like after having everything in place uh you can go and say like okay step by step yeah i think yeah like we are doing it in a lot of places but but that's the complexity of this application so i'm trying to do it in the easiest way possible like with this context provider even though like the contact provider might add a bit of complexity it makes it easier for us to structure our code and to keep all the logic uh grouped together here for the basket for example so now that we have set the restaurant here we can query the basket so let's go ahead and query but when should we query it the basket depends on two fields the sub and the restaurant so anytime the sub of a user changes which shouldn't change but let's say where the restaurant changes then we need to fetch uh the basket so let's do data store dot query we want to query the basket model and our i'm going to say b for basket should be should have a restaurant id uh it should equal to the restaurant dot id and um user id should equal to uh sub no no no no no no sub is not the user id so we need that database user to have a user id sub is just a field of a user so database user database user and database user dot id and after we do that we query we filter we then get back baskets and we need to set the basket the first result that we get in a perfect scenario is going to be zero items or one item so by accessing the first one basket position zero we take the first one if it exists otherwise we set it with null um okay so this one will it no it's not gonna allow me okay now we have fetch the basket uh but because of the moment we don't have any baskets we will need to first create it so let's do it like this here the comment is when adding a dish to the basket get the existing basket which we did here or create a new one so if basket is null then create new basket with this restaurant let's implement this function let's do it below const create new basket oh come on no uh and this function is going to be a sync and we should simply say datastore dot save a new basket with the fields what fields does it need uh the basket cat basket itself has a user id and a restaurant id so this is the two fields that we need provide user id is database user dot id and the restaurant id is restaurant dot id and then we simply set the basket in our state with this value or next time when we press on add this to basket it's not going to create a new one because we already have it so let's see let's see new basket create basket uh we need to await hmm that's weird uh no no let's let's not do it this way because i feel um okay const new basket equal a weight and we don't need the van i feel that it's not going to weigh a weight here properly if it's that way now we can simply set basket with a new basket uh and now yeah this thing will await first to create the basket but also we need it here because when we create a dish bask this basket item we need the basket so let's do hmm uh the basket here we need uh to keep track of the basket because it can be either a new basket or if it already exists it's going to be the basket is equal to the one from the state because we need it here later on this thing can be written very easily with conditioner like this so basket is is not is and is null then it's going to be create new basket otherwise it's going to be simply assigned with this basket i think it's it makes sense uh otherwise if basket actually we don't even need a tertiary operator it's basket war await this is going to assign the basket if it's true if it's a valid value it's going to put the basket here otherwise it's going to if it's a null it's going to go here and create it okay but we also need to make sure that from create new basket besides setting it there we also return the new basket here okay uh to to create new basket let's see if it was created in the database uh i think we have what a dish to basket function should be a sync and in the content let's check the basket no basket yet but let's go ahead open this restaurant we don't see anything let's open this one and as you remember we crave a basket when we add the first item there so let's try to press add item to basket and did it create a new basket what do you think lucas i think it did well hopefully well i shouldn't root for you but i i do it it did with a user like my user and the restaurant vet restaurant great i think that's uh that's amazing but the second time we will add something here it's not going to create a new basket because it already exists right moment of truth yes uh now it is time to add dishes to the basket because we didn't do it so far but it's quite easy to do that so we have to do data storage save and new basket dish and now we know everything that the basket dish needs it needs a quantity it needs a dish that we received there as dish and also it needs a restaurant id that we not restauranted but yeah restaurant idea that we no basket id uh basket i b to basket but new basket dish so it means quantity it needs this and it needs basket id and the basket idea will be their basket here either the new one or the existing one dot id is this everything that it needs so let's create a basket here quantity a dish in a basket what's this basket dish dish id okay um so let's go ahead and try it right now here your badge zero student just uh wrote the comment hey vadim and lucas missing you guys and i am unable to join this five-day live challenge because of the exams after the exams you will watch this and most probably follow the tutorial so that's very exciting and nice and what kind of exam do you have um higher details yeah yeah i'm also wondering uh so yes we are trying to add four cheese tequenos let's add them to the basket the basket is already created but what we expect now is a basket dish to be created and let's see let's see if it was created and yes nice and we have a quantity basket id and basket dish id perfect um what's what's next now we created the basket we are can add things to the basket um we created it we fetch the basket when the restaurants or the database user changes that's fine to the basket create the basket okay were we at the sphere okay perfect try to test like if for example you add a for another restaurant for another restaurant yeah if it will create a new dish and new bed and a new basket okay let's let's do that right now the other one is culture here and i want his dish one i want only one because it's this one i created it and let's have a look i see one basket dish here and as you can see it has a different basket id that means that it created a new basket for a different restaurant but now if i let me think which one was which basket dish one dish one this is the latest one yeah yeah yeah the one that you just created um no uh don't worry don't worry about what you were doing i wanted to delete something see you understand but it's it's so complicated for my brain right now okay so he's having his pde exam because he's planning to study in australia and he's nice it's like yells i think yeah i i think but i'm not 100 sure uh so yeah it's very ambitious goals yeah i really really want to move yeah i really want to go to australia like it's afraid of old not a fan of spiders and snakes but i would love to and crazy wild as well had his exams i yeah i just remembered that right now all the exam like period is coming so don't don't want to remember that okay so now uh you know what i want to do is if the user has already a basket with this restaurant i want to display view basket button here on the bottom so let's start that in the screens um the screen is the this one is the restaurant detail screen in the index uh i want here a button that will look very similar to this add one to basket so i'm gonna just real quick steal it from the dish detail screen index here we should have this button let's take it to the restaurant details page and it needs some styles it needs some styles for button and button text so i'm going to take them from here as well button and button text and i'm going to move them to the copy them and to the restaurant detail screen styles here as button and button text and one more thing one more thing one more thing i don't need the console here is the add to basket no we don't want to add to basket we simply want to navigation navigate to basket that's when you are aware i'm a bit lost i was reading um that's when you get on can find variable pressable so we need to import it from react native when you are on the restaurant detail page if you already have a basket i want to display a button saying blue basket text as well here text he is what uh that aditya what university because he's saying that he gets that you and him are from the same university but i'm not sure because we finished the same universe yes did you study in netherlands uh so i'm gonna clean up or beat this uh but yeah guys good luck to in your exams from both of us like best of luck i hope you will do good and vadim same the open basket should be here on the bottom uh that's good and the last step is to uh make sure that this open thing oh but it's good it's right on the bottom and you know what uh for example uber and similar app do like if it's possible to easily check if you have at least one item already in the bask and then show this button otherwise don't show it that's what we're gonna do lucas okay perfect so um that's what uh what that's what we want to do and in order to display it only if you have a basket then we're going to go to the basket context let's make sure that we have access to the basket basically we are giving it to the value to the contacts provider let's export the basket and we can take this basket and in by index we can first of all use basket contacts so let's import basket and the button is going to be rendered conditionally only if basket is defined that means only if we already created a basket and if i go here i will not see the button but if i'm going to go to the williams fadel here i see open basket because i already have um this yeah in the basket inside the basket yeah you could really quickly delete the if it's easy to delete and show but probably it will appear so it doesn't really matter that much after adding and he's from leeds university so yeah we finished the studies in the netherlands yeah uh so we are showing uh the basket button only if the basket is created created and also we have this uh fetching all the basket dishes and displaying the length in the button uh i will do this because it's not only for this feature is for the next feature as well so i want to uh display here open basket and the number of items where for that let's fetch all the dishes inside the basket and we're going to do it here in the basket contacts provider for that we need const basket dishes and set basket dishes use eight empty array and we are going to do that also inside the use effect so let's do it here use effect and we will fetch the basket dishes every time the basket changes so if basket is defined it shouldn't be nude then we want to do data store dot query the basket dish and i want to filter based on the basket dish only if basket dish dot basket id is equal to the basket dot id and after we query it we want to set it and state set basket dishes now that we have added it fast and edited there we can export basket dishes with our contacts provider and back in our restaurant details screen here where we have this button for example this one um we can import besides the basket from the used basket contest also basket dishes and inside this button for the text let's say open basket or how how how is um how is the text there do you know where it doesn't matter basket dishes dot land i'm pretty sure we display it but i don't remember probably that dot that dot looks good everywhere and they use it uh so here open basket one because we have one item there but if i'm gonna add an one more hamburger and i'm gonna put it here it's still one because when we call this uh dish to basket after we save everything uh but we can we should do with a weight we can again we can easily do sad dishes with an array with all the basket dishes that there are plus the newly created dish that we can get here new dish without having to re-fetch it one more time no dish like this so now if i'm going to go williams i see two of them but if i'm gonna add one more or four more of this i'm gonna see three of them because there are three items in the basket and if i'm gonna press i'm gonna go to the basket and here is where we need to uh render information about the basket itself right yeah do you need that button code hash or you leave it like it is ah it's okay i'm gonna leave it like this uh so we fetched all the basket dishes and display the length in the button perfect uh we're not done yet with uh we're not moving to the waters yet but we need to to render the proper information here on the basket list so for that let's go ahead in the screens uh in the screens basket screen index here is where we will need to get some information from the basket context right use basket basket context that we have to import from contexts basket context so what do we need here we need uh the restaurant that is with your coding what did you do you were showing the oh what did i do i went inside the basket index and here i imported the use basket context because we need to render the proper information here on this screen on the left so we import use basket context and we we need to get some information from the use basket contacts itself the information that we need is something about the restaurants like the restaurant name and here we see it and it's actually the right one williamson no it's not the right one because it's coming from here most probably [Music] and if i go now to open basket where is it coming from use basket context try to reload maybe culture [Music] this is basket index your items if i do it like this doesn't change maybe it's not this screen but it should be that one it should be no no no no wait but no it's it's it should be this one so here view order and find is not an object restaurant.name so we can say if but are we exporting a restaurant from the basket context most probably not we are exporting only the set restaurant so let's export also the restaurant besides the set restaurant uh but we can add here like a check if it's different than restaurant then i don't know it's not like this probably depends on how you want to show it like in my case like i'm just gonna safely access the name now if i'm gonna go to this one open basket now it works properly and if i'm gonna go to the other one open basket it works nice delete one s yeah okay so for the basket dishes that we are gonna do we're gonna take them from the basket fishes so we can give the basket dishes here we see three of them and for the basket dish item where is this one used only here uh basket dish item let's see where it is actually used in the basket and order details okay that's perfect that means that we have basket dish here instead of one it's gonna be basket dish dot quantity or free four perfect uh it's not basket dish dot name because we can uh console log to see the structure of a basket dish but uh the way it's gonna be you're gonna see it in a moment so a basket dish have has a dish object and in that dish object we have a name because from basket dish we have a relationship with a dish that's why it's a bit different how we access it so basket basketdish dot ish dot name it works and the same for the price dish dot price it works uh and that's it right yeah yeah now so if we go to the other restaurant for example this one open basket i see only this one that we added one of them and i can yeah add more or go to the other restaurants and the basket will automatically update here perfect all right so uh now we are done with the baskets and the next step is our work no no we do need to calculate the price and uh for like we don't have the price in the back we don't have a price in the basket for like but it's simple just add all the dishes uh okay okay you really want me to go over time okay so we are going to calculate the price uh probably here yeah most probably here and um let's do it like this total price i'm going to save it in a state variable set total price use but actually i don't need to do it in a state i can simply do cost total price equal basket dishes dot map not map dot reduce because we want from an array to get to a value uh let me remember we have syntax over reduce uh we're going to get the previous value basically the all added up value uh okay some uh some of the prices then we're gonna get the current value the basket dish and what we have to uh to do we need to do some plus basket dish dot quantity multiplied by basket ish dot dish dot price basically we multiply the quantity with a price and we add to everything else that we have in the basket and after that we need the initial value which we start with zero and also after all of this add the restaurant uh delivery fee ooh uh when it's not from zero we start from oh yeah from delivery dot delivery fee yes i think so delivery fee so is restaurant not here oh it's here it's here i'm just thinking should i put it in the total price with a delivery fee or total price just to be that one but okay okay i can export now the total price from the basket uh here total price and we need it in the basket screen and we can get it total price here and we can say create order uh will you send me that dot because now i think i want it thought total total price i need to find it as well but let me waiting restaurant delivery fee restaurant delivery fee okay it should be it should we should safely access the restaurant there because the restaurant might not be there so like this let's see williamson the delivery is 1.9 open basket 22 total price to fixed to 83 82 so let's see if it calculated correctly where is my calculator where are you so four uh multiplied by six point nine plus three multiplied by eight point nine plus 4 multiplied by 6.9 is equal oh my god a lot of why didn't you tell me i don't know i was i didn't actually know what you were doing here but i think this is going to be a bit easier this is 10 and plus 440 here it's 43 that's perfect javascript math now just because here we are displaying only one um fixed position so if i display here as well one only one but for the total price probably should be two yeah definitely yeah and i've sent you the dot in the prime chat okay let's display it here oh it looks already so much better i really wanted in that other button but i mean at least here okay so i i think that our calculations are nice are correct i hope but it looks correct it looks correct what we can do what we can do now is to multiple worders right a quick one question i'm not sure if you're gonna answer uh but um yeah it's not related to right now maybe he can write in a discord then you'll help with abs abstinence uh regarding the upsync api key yeah the api key in appsync is a way to authenticate who is allowed to access the api there are different models api key is one of these models it's great for development but it's not very good for production because if someone that you don't want to know webec [Music] finds out about the api key he can do any request to your api by having that api key so in production it's better to switch from the authorization mode api key to the authorization mode adobe's cognito and in that case only the authenticated users in your application with cognito will be able to access it once your api key um once your api key expires you need to basically delete the world one and create a new one uh and it's not that easy to explain you at the moment like how to do it it's a couple of steps but you can find some information on the github issues of amplify that explains this uh we are covering visa authorization and authentication modes for our api in the course in very depth so you can check that out as well if you want to learn and understand how this works but now we can move on to the worders because i don't want uh i want i actually i want to see lucas with some makeup no no um yes yes yes let's go um what do we have worders right so for the worders whenever we are in the bucket when we press create order we should create a new order as you can imagine i don't remember oh yeah yeah yeah because there is some logic when creating an order because we will have to move every item from the basket we will have to move them to the order and then we would have to delete the basket and we have to take a lot of steps so for that reason i'm not going to do it inside the component inside this component i would rather generate another context for our you were still in the yeah okay okay okay let's do it like this so let's generate let's create another context for our worders order context dot gs uh and here let's do import create context context use context use context uh what else what else what else spate use effect probably effect from react um import beta store from uh amplify and we will need to import uh something from the models models and we will need the water we will need a water dish we will actually need most probably the basket because we will remove a basket and and probably that's it so let's do const further order context equal create context let's define the component that will hold this context so order context provider equal to a component return receive speed yeah i don't i can't really even like follow everything so we're going to get children from the crops let's render the children here you know what uh i have an idea in mind uh from from time to time that if i start doing freelancing now like i could make so much money just because i have this structure and i have this speed of developing uh these mobile applications and if i like niche down to only building mobile applications and doing that with resources that i have and i know like like it's gonna be it would be so so easy to to to make so many so much money but that's not what i want so rinse and repeat like repetition makes you powerful like the more you write the same thing the better you'll learn the faster the faster you will write yeah so let's export use order context here but if i would go like freelance like i would go crazy probably after two or three months use context the order context [Music] so what function will we export we will export create order and this function will not receive any parameters just because we will be able to take them from the basket context so we have everything in the basket context we don't need to do anything here so create order we export it in the provider here and let's go ahead and wrap our application with our word provider we need to place it first of all let's import it from order context to order contacts or their contacts provider and we need to put it below the basket because in the water context we need to have access to the basket and that's why we need to make sure that the order context is below the basket context now in our order context here no actually where do we need to call this function in our source screens where we are lucas uh basket index here we have create water button which we will rename to class well not rename but replace with pressable uh we need to import pressable from react native because we need this to be a button use basket context let's import as well import from order context context further context we will import use order context now from the use water context we can get the create order function close your explorer tab to yeah think and when we press on this button create order on press it's going to call create order and that's it let's go in order context here and do a console worn abc let's go to uh not to the worders let's go to the basket create order abc perfect that means that we uh properly connected the context and uh everything gets from the button up till this function uh create order where where's the price what price oh in the bottom i was remembering the previous design uh so here when we create an order what should we do well first of all we need to actually create the order then we need to add all basket dishes to the order and the end we need to delete the basket because you don't need it anymore delete basket you already created the order you delete the basket and you start over there uh okay for creating the order it's not that complicated we can say new order is equal to weight data store dot save new worder uh what information does a worder need let's have a look at the amplify studio order create order it's me it needs a user a restaurant and a total and a status okay so for the user uh where do we get the user we get the user from db user that we get from use of context we get their restaurant from a restaurant from the use basket context and the worder as i said needs a user id which is going to be dbuser.id it needs a restaurant id to know what restaurant to notify wait but is it like this or a user restaurant let me check in the data model better to understand uh worder has a user id and it doesn't have a restaurant that it just has a restaurant itself so for that i'm gonna say restaurant with capital air is gonna be restaurant from here and for user you need id for user we need id because we don't have a relationship here we have it in another place okay so we have restaurant here and and and status is going to be new as you can see it gives us to peak from the values that we can uh have because our status is a enumeration so it's a new and i see that we have only 15 minutes and uh is asking he's there but for real he's asking is there a real plan to expand on your last year uber clone i don't think that there is but uh we don't have any plans for now but maybe we can we'll see maybe we can do something because a lot of things are outdated a lot of things have updated like graphql schema and so on um transformer for amplify so for the total i want to get it from the basket context uh total or how did we call it total total price total price we're gonna send it here to the new order okay after we have a new order for all the dishes that are in the basket that we can get from here basket basket dishes for all of them we have to create one um order dish so basically we are moving them from basket to water uh because we need to create a lot of them and these are not creating one basket dish but if there are 10 basket dishes we need to create 10 order items we will have to use web promise dot all in order to execute all of them at the same time and await all of them to execute before moving to the next step and here to the promise all we need to provide an array of promises and the array of promises we're gonna create using uh the map field the map operator over our basket dishes and for each basket dish we will create a data store beta store dot save a new order dish right yes a new order dish that needs some data what data does a water dish need a water dish needs quantity so for order dish here quantity is going to be the same as the item in the basket so basket dish dot quantity uh it also will need a worder id we created the order here so we can say that the worder id is going to be new order order dot id and what else it needs a dish or the dish we as well can take it simply for from our basket because the basket knows what dish was added so for the dish we can take basket dish dot dish like this so for every basket dish that we have in our basket we create one order dish with the same information but only we assign it to the why is it done like that just because in the next step we will delete the basket so we will say await data store dot delete and we will delete a basket and which basket wait um i think we can simply say what item we want to delete so basket and when you delete the basket uh because our basket where is it let me show you somewhere on the top because our basket has a relationship to the basket dishes it will automatically remove all basket dishes like there are a couple of ways to do it i chose it the easier one but probably the more um the more performant one is to have not to have two separate water dish and basket dish it's it's still debatable like both both of these scenarios have pros and cons having separate werther dish for things that has been ordered and basket dish for things that are in the basket and the second option is to treat them the same because we have actually the same things except this one has a basket but that one has a worder id uh probably it's a bit confusing right well i understand what you want to say but yeah so basically what we have to do is now we create a welder because we need to know and to notify the restaurant that hey there is a new order you need to deliver it but besides creating a water we need to know what items have been ordered and where do we take these items that the user wants to order well they are already in his basket so the only thing that we have to do is take them from the basket put them in the order and then delete the basket because now uh he already ordered it so let me see if i delete it correctly uh creating the word there first uh then creating order dishes okay uh dish did they do everything dishward already yes and lastly away data store delete basket and by deleting the basket it deletes all the items inside the basket which is nice because we don't have to do it manually so let's have a look if it works uh yeah so uh which video here has the most content about context api and i think this one probably this one definitely like so far uh i've been trying not to use that much context api uh just not to complicate this but in this project like we needed this so i touched it on crypto price tracker as well but this one has a lot more yeah so let's uh go to this one open basket and let's create the worder the worder should have free items with these quantities so create order possible and handled promise rejections we did something wrong let's have a look at what we've done wrong rep can't find variable basket can find basket not in border context it's not basket or i didn't import it basket okay oh actually it created that order but it didn't delete the basket because it failed at the last step so i can go again at williams here open basket create order after creating the order i actually should uh navigate back so yeah the thing is that now if i refresh okay should you redirect back or as we were saying to the order details yeah yeah yeah but that's also great tania thank you very much for your kind words and i dta is as well telling you a big big thank you from nepal what's up because of your uber uh project that you did and he implemented it like we were talking like with even more things with payment system and that's amazing nice um so look look look lucas now if i go here i don't see the basket which means that the weather has been successfully created uh what i have to do right now is in the order context is to actually query the worders and save them in states so worders is set worders use state nothing and when we mount use effect what we want to do is we want to query all the orders for a specific user so data store dot query order we want to query the worder that has the user id uh equal to that database user dot id and then we want to take this and put them set them then set orders now let's go ahead and take these orders uh export them to the outside world but one more thing is not to forget after after creating an order advance let's also uh add not add water but set words with all the words that we have plus the new word that was created to automatically have it there and the last step is to go ahead implement these orders inside the orders page here so where do we have it we have orders detail not whether details orders screen here we take them from dummy data go away we don't need that we will import data store not datastore we will import use order context and based on that we can do orders equal use order context and now if i go here i should it's not working right uh console.log worders hey barry i'm helping with him and like checking the chat i'm not an apprentice but yeah i'm helping with him so uh my query apparently is wrong because data store data store query user id is equal to this one worder db user user id if i get all the words from the database will you work then orders it has two orders but if i do it like this it doesn't fetch it properly it's [Music] why lucas why um i didn't do that here gb user id dbus maybe because the database user is not defined yet so now it works perfectly so we have orders and last step is to query the order details uh and for that we need to go to the word details screen in the index and we're gonna have today also let's also implement that in order context not to do that in a lot of places so we will have a function called get order by get order which will be an async function that will receive that id oh my god you forgot a sync an order bro i'm looking at the time so let's return datastore.query uh word there by id and that's it and then we can get the word in the order details like this use order context uh and in the use effect use effect from here and also use state uh still we're gonna have to have state for order and set order use state and in a use effect when the component mounts wall so we need the [Music] route to know the idea of a water so use route again oh you're a ghost again go fix it now no no no no no it looks very good it looks very strange on camera react navigation navigation native and you have it we finished yesterday you have a lot of time about use i wanted under five hours it's not gonna be under five but we finished yesterday like at 5 20 or something like that okay then it's id and here we uh in the use effect we do get order oh omkar just watched 16 seconds ad for you uh on youtube just what probably on your video yeah 16 seconds advertising uh so get order id then set order in state and here what do we see where the restaurant name okay let's see order order what image do you display here is not an object order dot restaurant uh because we need to check if order then return activity indicator return null for now you can oh activity indicator what the it will looks so bad i need to import it manually here actually like is thanking you for your answer about api key you're welcome uh so yeah here activity indicator and like this no no no size and color all right do it properly you still have so much time great what kind of image do we display in this list basket dish name but where is it coming from here word it's restaurants dishes no no this is where the details header i need to move everything from here to the order details component down below because there is where we have where we need to query it and for the header we can simply send it here for props the order equal order and here we will receive it as order and now here instead of restaurants we're gonna do order dot okay we also have to query the order these items so order fish items set work guys are you still following our items tired already uh and in the get order method uh that is in our context instead of just returning the data store uh i'm gonna get both the order equal a weight but also the order the chess that is going to be a weight now we need data store dot query worder dish oh wow and then the sniper is here like i think from the beginning and he's still here for the beach we need uh that's that's impressive and soccer's so cool as well wow you guys have equal i don't know very nice good job guys and we can return the order and ordered dishes where actually let's return it like this everything from the water blues dishes is going to be water dishes and in this way we return only one object uh that involved the details and this way in order it tells i don't need two state variables because i have everything in the worder here and you can access it using order dot dishes will it work uh get word ready get is is undefined get worder get order get order i need to export it here and if i go here orders i see it with all the items inside it i don't see the price how much i paid and we you're gonna see it's the same because yeah like we created two words but now if i'm gonna go to the home screen go to this one that has one item i can create the order i need to be redirected okay this is something that i want to fix on the basket page that's the mindset never too tired to children to learn from the best so we need to call create where they won't press but not only that we need to on create order so we're gonna do const on create order is equal a sync function at first awaits uh creating the order and after that we need navigation cons use navigation from not const when i do this kind of mistakes it means that it's time and let's get the navigation cid uh thank you from vadim to you uh thank you very much or someone said thank you to me but thank you let's navigate to the worder detail no let's let's actually simply go back oh okay yesterday i was an hour ago yesterday i was suggesting this and you said no no no we will redirect the word in detail uh so speaking of that like let's create a new order let's open the basket let's create the warder we are redirected back here this button shouldn't be here but it's okay we can go to the words and now i see that we have a new order from here uh actually that one was a different one this one probably so it works i see two days ago here that might be misleading 50 more minutes what while latunda said 50 more minutes and we get to see vadim in a clown makeup i think that's it i think we are done like let's look at the presentation i'm not just cutting out stuff demo okay let's demo but now juan said juman says that he is waiting uh looking forward to join your paid full stack course so you can let's go yeah it's very close to releasing it like next monday you're going to be able to do that so anyone else who is not yet on the waitlist and wants to get in make sure to join that in order to receive notifications and also i'm gonna have a good deal for uh for the waitlist um all right what we built today what we have built today we have built the backhand i'm so tired and you want you're taking everything out of me okay let's start from uh from here so today we have built the back and side for our user application in our ubereats clone so we started by creating and setting up our backend with amplify and after that we went into the authentication here with a couple of lines of code we managed to add a full authentication uh stack starting with like signing screen sign up screen where you can create a new account and you can change the you can change the country code there yes right away here i mean i think here uh asked about the default country code okay so let's sign in with our account and here we have it um hi good morning from indonesia and hi from uganda wow it's more yeah well for us this evening i'm going to go to sleep after the stream probably already uh yes i think we we need to and but if i refresh we're gonna go past that screen uh and it's loading come on come on come on let's do it you can do it so we have the list of restaurants that we are fetching actually from the uh our api and like so far we have integrated like a very huge data model with a lot of with a lot of entities one of them is this restaurant that has information about the restaurant then below it we have a list of dishes that the restaurant offers we can check the details of a dish and all of these things are connected with the back end and they are we're not dummy data so we can add things to the basket after that if the basket is created we see a button here for the basket and the number of items that we have there we can open the basket we can review see it uh make sure everything is right and then we can press create order that creates a worder that we can see in the order screen and here we can see more information about the order itself so with that being said i think we are done and i think we uh we had an amazing live stream so one question and a good question from aditya about your course so he's asking he is a badge zero student and he didn't manage to finish all the all of the course does he need to upgrade to batch one or he's going to be able to use no when you buy the course you have unlimited uh access to it so if you are in then you're in forever and you are also gonna receive updates with a new of the new modules and new updates that i make to the course throughout that time because in software engineering world a lot of things are changing and they're changing very fast and especially like with the tech stack that we are using rack native aws amplify if there is gonna be any major updates i'm gonna uh update the videos as well so you're good to go and also good news is that you're gonna receive some very new fresh modules this week i have them ready we have finished filming them we have finished editing them uh i just don't have time to upload them to the platform just because these days everything is the challenge and like i am working like 12 hours a day only to to make it happen but uh soon you're gonna have a videos yeah so last question from me what are we doing with the bet and also we need to check how long was the previous stream and maybe someone can do that uh let's discuss that later but what i want to say is that um we are awaiting you tomorrow at the same time same place here we're going to be here and tomorrow we're going to build the driver side application we move to the second project here and the driver side application is going to focus a lot on the maps one the bottom sheet navigators and other important and fun parts that we will cover tomorrow so make sure to join uh it was an amazing stream thank you everyone who has joined uh thank you lucas for being here uh we should do it more often like i i really enjoyed like how um how it went this time yeah yeah same uh so see you tomorrow guys don't forget to join the waitlist the course is coming next monday on 25th of april i can't wait to to get started with a course as well i cannot talk anymore so i say thank you bye lucas we have anybody bye guys goodbye have a nice evening morning day all right guys bye guys

Channel: notJust․dev

Views: 32,634

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

Length: 313min 44sec (18824 seconds)

Published: Tue Apr 19 2022