In this tutorial series, we will learn how to create a simple no code medical platform web application in NoCode-X. Users will be able to create accounts and login, enter any health issues they may have and a doctor will analyze their symptoms and attempt a diagnosis. Obviously this application requires very robust security, because medical data is highly sensitive information. Luckily for us, NoCode-X has a plethora of security features built-in.
Before starting this tutorial, it is recommended to follow the Restaurant reviewing app series first. This will cover all the basics of creating web apps in NoCode-X. For more details about anything covered in these tutorials, we refer to the documentation.
In the first two parts of this tutorial, we will explore how we can create a login system for our app. This tutorial kicks things off by creating a register page. Detailed information about users in NoCode-X can be found on the Users page. The medical aspect of our app will be developed in later tutorials.
We will cover the following subjects:
Steps 1-3 will be handled in this tutorial, steps 4 and 5 in Part II.
Designing navigation bars has been covered in detail in Part I of the Restaurant reviewing app series. We will make the navigation bar functional in Part III of this series. In this tutorial we have opted for a horizontal navigation bar at the top of the page. It looks like this:
It consists of the following components:
Refer to the All components page for more information about these components. In the next section we use NoCode-X’s template hierarchy functionality to apply this navigation bar to every page.
Create a new child template from the navigation template to serve as our register page as follows:
Now we can create our register form. Add the following components to the template:
Each field is made mandatory.
The result can be seen in the image below:
The design for our register form is now complete! Of course we still have to add functionality to it, to make sure it actually behaves like a register form.
When the user clicks the Submit button, our application needs to fetch all data from the form fields and create a new user with this information. This can be done using actions:
Select the (Submit) button component, go to its Component menu and open the Actions tab:
Now click the plus button. We arrive in the action editor. Edit the new action’s attributes:
Then add the following function calls to the grid:
Link them up like so:
We must now configure each function call’s Function call configuration. The first function call Get answer of input field corresponds with the input field component for the new user’s first name. We must select this component’s code from the list in the function call’s Arguments tab in its Invocation configuration:
The value entered by the user in this input field will then be saved in a variable. Enter a name for it in the function call’s Result tab. This is shown below:
The variable will now be stored in the variable scope. Repeat this procedure for every function call (except Start and Create user).
Finally, go to the Create user function call’s Arguments tab in the Invocation configuration and select the appropriate variable name for each field:
Done! In the next tutorial we will explore how to create the login page and a page only logged in users can access.
Leave a Comment