React Native Tutorial - Create a Login System Application With Memberarea Part 1

in this video we're gonna take a look at creating a login application with react native we're gonna use note and Express on the backend and as you can see if you typed wrong login credentials we're gonna get an alert use notes file please try again and if you try to log in with the right credentials we're gonna be directed to the member area and if I restore the application you will not have to reload login again it's gonna redirect its metal peak to the member area since we are already logged in so let's get started so I just started with a fresh react native installation and I have already installed the react navigation library if you don't know how to install it I'm gonna leave a link in the description so I'm gonna start by importing the react navigation so import stack navigator from react navigation then I'm gonna delete the stat sheet because we don't need it in this default component and I'm gonna delete the layout and in the layout we're gonna return a component called application which we're going to create now with the stack navigator so define a new constant called application and we're gonna create the actual navigation of the application to be able to view the home screen and the profile screen we're gonna start by declaring the whole screen we're gonna name the home screen login then I'm also gonna add I'm gonna make the navigation menu bar I'm gonna delete it so it's not visible in this application because we don't need it so I'm gonna add navigation options then I'm gonna add header folks like that now you can try to reload their app now you're gonna get an error saying there's no home screen and we're gonna create that now I can't find valuable Augie so let's go ahead and create a new folder name a tap and in the app folder create a new folder named components and create a new file and we can copy all the code in the main app touch a S component here but we can remove the navigator and let's name this component login save as login dot GS in a components folder we can delete application from the return the login and also we're gonna import a login in the main app so import login from app / components start login and we can just try to return some text to see if it works also I'm gonna change the syntax to babble unless you'll see now if it works you can see the text under the expo navigation bar up there now the login login component will hold the layout and functions for login II so we're going to go ahead and create that right now you're gonna stop by importing importing the components we're gonna use we're gonna need a text input for writing username and password and we're gonna use the keyboard avoiding view for we're gonna add the remove the text inputs above the keyboard so the keyboard does not overlap the text inputs and we're gonna use use touchable opacity for buttons and I'll see a sink storage for storing the user data a sick storage that we're gonna start by creating the constructor for the login component and we're gonna add state the username is gonna be blank and once they pull password is going to be bank two then we're going to create a component did mount function and this function is ran before the render function and we're gonna use it to check if the user has already logged in previously or not so from the component in malfunction we're gonna call another function which we can call load initial state so let's create that function up now we're gonna start by getting the username from the same storage we're gonna create this later adding the username to the sink so don't worry about it now we are writing the logic for this now so create a new variable call it value and then we're gonna use a sink storage dot get item to get the username and check if the user is logging and now if this value is not null it means the user is already logged in then we can use navigator to navigate to the member area page which is called profile and we're gonna create that later now let's create layout for this component we're gonna start by creating a keyboard avoiding you give it a behavior of padding and also give it a style we will create a slice later titled wrapper and now this keyboard about you it will it will move after have the keyboard of the phone moves so if the keyboard goes up the keyboard avoiding you goes up so nothing is hidden below the keyboard avoiding you and the text input next create a new view give it a style of container and we can create text component in the tech component we can write let's call it log in this is just a header for the application some text then we're going to create a text input for the user name give you this time we can call the style text input we will create a theta2 we create all the styles later create a placeholder give it a value of user name then we're gonna add unchanged text function so if we change the text in there in this text input or write something in the username you can update the state of user name which we declared up here then also for Android phones you can add an underline color Android I set it to devalue to transfer transparent cause it adds an ugly underline if you don't we can actually reload that now see if you got any results an error 917 let's see what Oh supposed to be like this of course an equal sign there too and yeah of course I haven't declared I said so we're gonna wait wait we're loading until I have excited styles put a view so we can copy this text input for the username and use it for the password - so we just change this password because we're gonna change this we can at this date of death password and we actually gonna use this date sent later to send it to the back end and check it into the if it exists in the database to verify for user exists now we're gonna create a button for logging in can give it a style of button and on press when we press the login button we're gonna create a faction for it named login so I'll press this stop login add some text to it say login there we go there's a layup ready we can stick share the login function here we're gonna create it later we can just say for now he to try it out later alert test to see if it works and also we're gonna add a stylesheet right now so I'm just gonna copy and already exists inside sheet with which you can copy because this tutorial is more about back-end and how to actually build this kind of application on how to write the side sheet and this is not very much side sheet so you can sculpt it let's reload the app and see what happens now yeah there you go that's the front-end of the app and yes they go ahead and post a video right here and you can copy this die sheet so now we're gonna create the actual login function we can try it out for us let's see what happens if we press this login button yeah then he's running the login function correctly and now what we want to do since we're gonna have to check if the user exists in the database we will create the database later we will create the backend later but for now what we're gonna do is we're gonna use react native fetch method and we're gonna send the user name and the password to the backend later in the backend we're gonna check if the username and password exists in the database and if it belongs to the same user and if it's exists we're gonna use navigator and navigate the user who's logging in to the member area screen so let's use the fetch method and the first argument for the fetch method is the IP of your client you can't use low those cause your your phone has its own IP so he don't still doesn't know what localhost is so you're gonna have to write your IP here and it's gonna write sake from now I'm gonna write my entire feet so yes something now I'm gonna change that later so it works but it doesn't wanna don't want to show my IP to everyone and we're gonna use Express back end with note on port 3000 so write port 3000 slash users we're gonna call the route users forgetting and posting and getting the data and then we're gonna use a method of post to send the data to the back end we're gonna pass headers and we're gonna use application yes and a setter and set the content type to same thing application - listen and the body of the post is gonna be the username and their password in JSON format so we're gonna use NASA dot stringify and you we're gonna send the user name as is that State DOT username and the password is it this dot state s dot password so now this is gonna send the values of our states which we declare previous previously up here then we're gonna handle the response STS on and we gonna send back data later to shake if if its success if the user exists it's a success so this part basically means if the user has this username with this password let's login him let's lock him in and then we're gonna set an item in sink storage so set icon we're gonna name the item to user and the value of the user item is going to be resulted user which you're gonna pass later it's gonna be the user name and we're also gonna navigate the user to the profile page like that and if it's not a success we want to tell you sir you don't exist in the database we're gonna do an alert of the result and use the message as the message in the alert and that's it and yes we load up and see if you've gotten any errors yeah we got an error I mixed with total 995 see oh it's a missing a comma tech sign up here let's check it out now it's a typo yeah and there we go this front end right there it's ready and the next part we can start working on their back-end and handling the data that we're sending to the backend just one more thing we can try is yes so you know how how you get the actual user name try to alert this dot state as user name and you can see if you type it's going to reload that if you type John as username just the bottom it's gonna work John yeah now of course we get doing network requests fail because this IP doesn't even exist but that's the value that we're sending let's just go ahead and create profile component also so create a new file you can save it as profile that is in company code from logging Jes I'll change the syntax to Pebble can remove the default style sheet and also delete the login function because we're not gonna use it you can delete everything except container and you can leave our text component in there too let's see here's creates a fast statute for the container for the profile area which will be visible later when we login let's give it a flex one for full with total height you can set the line items to center and justify content to center and let's give it a background color to the same as we're using in effigy sorry login back yet this blue background color for the container and also let's give this style we can call it text and give it a color of white and this is just gonna be the text inside the profile screen we can say come to the member area that and we don't need this constructor and component in month functions we can remove them we can also remove a cyst or edge touchable as a big keyboard avoiding view you're not gonna use any of them in this one of the text input either like that and we're not gonna need a stack navigate to either so we can move that one too and that's it for the profile page now we can't view the profile page right now are we gonna at least import it because we're going to use it in the next part of this tutorial so into the profile from profile so that's it now we have the front-end part ready of the vacation everything we need in the actual app and we get the login function ready to go I'm just going to dump that one and we get the profile page ready to go so in the next part we just gonna set up the backend with Express a node and we're gonna set up a simple MySQL database with the PHP my admin' and we're gonna create the user authentication from the backend so hope you learn something and we'll continue in the next tutorial bye bye

Channel: Fullstack Development

Views: 121,976

Keywords: react native tutorial, fullstack, development, login, app, programming, code, memberarea, profile, system, web development

Id: Qt2ohl-hyFw

Length: 24min 38sec (1478 seconds)

Published: Fri Oct 06 2017