HOW TO USE REGISTER AND LOGIN PAGE IN YOUR THUNKABLE APP
Here in this post I am going to tell you about how to create register and login options or page in your Thunkable app. If you don't know what is Thunkable then in short I can tell you that Thunkable is a website where you can create your own apps without having any knowledge of JavaScript coding etc. If you want to know and learn more about Thunkable then checkout my post Create apps with Thunkable and still if you want to ask anything about Thunkable you can ask me in comments.
So some of you want to create apps in which you can include Register and login options. Here in this post I am going to tell you how to do it in the following steps;
First thing you have to login to your Thunkable account then create new app and give any name to it. Then give name "Home" to your "Screen 1" . Then add horizontal arrangements in your app so that you can adjust the size you home page the accordingly.
Second step drag and drop text boxes for registration you can use as many text boxes as you for example 1 textbox you can use for "Username" , 2 textbox "Password" , 3 textbox "Repeat Password", 4 textbox "Phone Number or Email Address " or whatever .
Use can use "Label" to give space between buttons. And then add on button to and give name "Register or Sign Up " then you can add again one text box and write "Or" and use label to give space then under this add another button for "Login" for Login you need to create another page and link that page to this button so that, those who are already registered can click on Login button will be redirected to the Login Page. In same way as we created Register Page , you can add some items on Login Page for example User Name (Textbox 1) and Password (Textbox 2) then add label for space and one button give name "Login" or "Sign In" to this button.
After completing this interfaces of both Register and Login Page , next important step come to play it's role it's our third step.
Third step is click on the left side tool bar scroll down to the "Experimental" click on it and here select "Firebase DB" drag and drop into your app. Then here on the right side tool bar you will look two important options "Firebase Token” and second is "Firebase URL ".
Fourth go to Firebase.com click on Get Started then you will be redirected to the Firebase Console page . There click on "Add Project" give name to your project , select your country and then click on continue and finally you will reach in your Project Console Overview Page. Then click on the Project Settings here you will look " Web API key like this ;
" AIzaSyBll3SufeldYk-tkafOXtudhd133u9PFn "
copy it and paste into the Firaebase Token of your app in Thunkable. Then again go back to Firebase for the URL , now click on the Database option and then Get Started then you will get a link like this ; https://nameofyourproject-d250b.firebaseio.com/ so copy this link and go back to Thunkable and paste it into the Firebase URL .
Then Fifth and last step is to create blocks. So click on blocks here on the left hand side tool bar click on Register Button . Here you need drag "When Register Button Click Do " then click on Firebase_DB1 and drag ''Call Firebase_DB1 Store Value , tag , Value To Store " then click on the textbox (Username) and drag Username Text block. Then add one empty text block and give any name to it and your date will be stored to this Value name. Here is the screenshot of then blocks how to arrange them in right order ;
So some of you want to create apps in which you can include Register and login options. Here in this post I am going to tell you how to do it in the following steps;
First thing you have to login to your Thunkable account then create new app and give any name to it. Then give name "Home" to your "Screen 1" . Then add horizontal arrangements in your app so that you can adjust the size you home page the accordingly.
Second step drag and drop text boxes for registration you can use as many text boxes as you for example 1 textbox you can use for "Username" , 2 textbox "Password" , 3 textbox "Repeat Password", 4 textbox "Phone Number or Email Address " or whatever .
Use can use "Label" to give space between buttons. And then add on button to and give name "Register or Sign Up " then you can add again one text box and write "Or" and use label to give space then under this add another button for "Login" for Login you need to create another page and link that page to this button so that, those who are already registered can click on Login button will be redirected to the Login Page. In same way as we created Register Page , you can add some items on Login Page for example User Name (Textbox 1) and Password (Textbox 2) then add label for space and one button give name "Login" or "Sign In" to this button.
After completing this interfaces of both Register and Login Page , next important step come to play it's role it's our third step.
Third step is click on the left side tool bar scroll down to the "Experimental" click on it and here select "Firebase DB" drag and drop into your app. Then here on the right side tool bar you will look two important options "Firebase Token” and second is "Firebase URL ".
Fourth go to Firebase.com click on Get Started then you will be redirected to the Firebase Console page . There click on "Add Project" give name to your project , select your country and then click on continue and finally you will reach in your Project Console Overview Page. Then click on the Project Settings here you will look " Web API key like this ;
" AIzaSyBll3SufeldYk-tkafOXtudhd133u9PFn "
copy it and paste into the Firaebase Token of your app in Thunkable. Then again go back to Firebase for the URL , now click on the Database option and then Get Started then you will get a link like this ; https://nameofyourproject-d250b.firebaseio.com/ so copy this link and go back to Thunkable and paste it into the Firebase URL .
Then Fifth and last step is to create blocks. So click on blocks here on the left hand side tool bar click on Register Button . Here you need drag "When Register Button Click Do " then click on Firebase_DB1 and drag ''Call Firebase_DB1 Store Value , tag , Value To Store " then click on the textbox (Username) and drag Username Text block. Then add one empty text block and give any name to it and your date will be stored to this Value name. Here is the screenshot of then blocks how to arrange them in right order ;
Then everything is done you can check live preview of your app any time in between and if everything is working then you or you are done with your main content of the app then you can save the your APK file and try it or publish it on any app store.
Still for any problems occurred in your Thunkable app or you need any help via AIA file feel free to ask in comments.
Comments
Post a Comment