No Code App Using Adalo

What is ADALO?

Adalo is a website or a platform where we can create an APP without typing any code. It’s a no-code platform that allows programmers and non-programmers to create application software. Adalo allows you to build apps on an intuitive drag-and-drop interface, either by using pre-made design elements or by creating your own. It takes the headache out of publishing your apps to the Android or Apple stores— with a subscription plan, it allows you to easily publish your apps.

Getting Started With Adalo:

-Create an Account
-Log In
-Select a platform on which you want to work

-Then Select a Blank Template and Click on next

-Then Write the Name of your app and click on next

-Now select the ‘Simple list’ and ‘Tab menu’ from the components and drag and drop them to the Home screen

-Now Add a New Blank screen by clicking on ADD SCREEN and name the screen as ‘Categories’.

-Then add ‘Image list’ and ‘Tab menu’ from the Components to the new screen

-Now Add a New Blank screen by clicking on ADD SCREEN and name the screen as ‘Categories’.

-Then add ‘Simple List’ and ‘Tab menu’ from the Components to the new screen

Now let’s see how to link the screens with the tap menu:-

To Link First Screen with other screens

-So to link the Product screen with the Categories screen and orders screen go to the Product screen and click on the Tab menu -Then Select the Second Tab and click on Add Action then link it with the categories

-Then Select the Third Tab and click on Add Action then link it with the Orders.

To Link Second Screen with other screens.

-So to link the Categories screen with the Product screen and orders screen go to the Categories screen and click on the Tab menu -So the next step is to make the second tab the active page

-Then Select the First Tab and click on Add Action then link it with the Home Screen

-Then Select the Third Tab and click on Add Action then link it with the Orders.

To Link Third Screen with other screens

-So to link the Orders screen with the Product screen and Categories screen go to the Orders screen and click on the Tab menu

-So the next step is to make the Third tab the active page

-Then Select the First Tab and click on Add Action then link it with the Home Screen.

-Then Select the Second Tab and click on Add Action then link it with the Categories. So up to now, we have created the 3 main screens of our app and linked the screens with each other.

Now let’s head up to the creation of the most important part of the APP which is the Database.

Yah! The Database, Adalo also provides the feature of maintaining the data of the users. Let’s look at it in detail about it

Introduction to Database Collections:

Database collections are where you store all the information about your users, what they’ll interact with within the app and other relevant information.

-User Collections:

Each time you start a new app, you’ll automatically be given a user collection. The user collection stores all information related to the people using your app.

A user is automatically created once they sign up to use your app. This is where the Full Name, Email, and Password are stored.

There are many other properties that you might choose to associate with a user Click on records to view the entries in the database

If you would like to manually add a user to your app – you can add and edit that information here. You can import and export data here, too!

Now Let’s create more collections:

-Name the Collection Each time you create a new database, you will be prompted to name the collection, Make sure this is descriptive.

-To create a collection click on Add Collection

-Property Type

Each Time You create a property, you will need to select a property type. A property type refers to what kind of information is stored – Is it text? Is it a number? an image? a date? a file?

Once added, you will see this property displayed as a new column in your database collection!

-Relationships

When you are creating a new property, you might notice a property type: “Relationship”.

This is a very powerful feature to relate information in one collection to another.

-Relationships Types:

There are three different relationship types: One to Many, Many to One, and Many to Many.

So now let’s add some Collections and properties of it which we are gonna use in our app.

So First we have to create the Collection called ‘Products’ in this collection we will be adding the properties.

Now let’s create some more collections and add properties to them.

So the next collection which is to be made is “Categories” and add appropriate properties to it.

Similarly, we will be creating for “order” also add properties to it.

So As of now we have created the Collections and add properties to them in our database.

So the next step is to add data to our database, which will be displayed in the App.

So first let’s create the data for categories and add it into the database.

Go to the Categories tab in the database.

Click on the ‘Records’ Button.

Here we can see another Button to add categories just click on it.

Now provide the appropriate data into the fields.

So let’s add some of the Categories related to a Basic food App.

So As of now we have completed creating the categories for our App… Now let’s create some Products under the Categories which we have created.

For adding data into the Products field.

Go to the Products tab in the database.

Click on the ‘Records’ Button.

Click on ‘Add Product’.

So Now let’s add some of the Products under the appropriate Category for our basic food App.

Now moving to the Orders section we need to create two Relations in the orders database tab.

Let’s Create Some More Screens To Our APP.

Now, Let’s Create a separate screen for each of our products means that if we click on any of the products we will be redirected towards the details and purchase options for that particular product.

Now let’s add a new screen to our app and also add Image, Text, Button from the Components.

Now Link the Home Screen With the Product Screen.

So now change the title with the help of Add magic text and select the current product name.

In the same way add the Current Name, Description, and price with the use of Magic text.

Now Rename the button as your wish and then link it to the Purchase Screen that we will create next.

Before creating the Purchase Screen we need to add another Screen called as ‘Product Category’ Screen.

On this screen, we will display the list of products once the user clicks on the appropriate category.

After Adding the Screen and the Sample List into it will be select the “what is the list of” and the Filter and also link the Product Category to the Product Screen.

And also add action to the left icon to go back.

Now add another Screen which is for payments and name it as Purchase.

Now add the text and Stripe Payments Components into it.

Now link the Purchase button which is on. the product screen with the Purchases Screen.

And also add the link to the left icon to go back from the purchase Screen.

Now At last we will create a final Screen which is the Payment Confirmation Screen.

And also link the Pay Now button action with the Confirmation page.

So now let’s preview our App.

Thank You For Reading.

Written By IQRA UNNISA.