Adalo External Users Beta + Xano: Part 2: Adalo Setup

Hey there! In this blog post, we'll walk through the process of building a no-code app using Xano and Adalo. Xano is a powerful no-code platform that enables you to create and deploy backend services without writing a single line of code. Adalo, on the other hand, is a popular no-code app builder that allows you to create stunning mobile apps visually.

By combining these two tools, you can create a fully functional app with a robust backend and an intuitive user interface, all without any coding experience. Let's dive in!

Prerequisites

Before we begin, make sure you have the following:

1. A Xano account (you can sign up for a free trial here)
2. An Adalo account (you can sign up for free here)

Step 1: Set up Authentication in Xano

In Xano, we'll start by setting up user authentication. This will allow us to securely manage user accounts and ensure that only authenticated users can access certain data and features in our app.

1. Log in to your Xano account and create a new project.
2. Navigate to the "Authentication" section and enable user authentication.
3. Set up your login and signup endpoints by providing the required information (email and password).

Step 2: Create a Data Model in Xano

Next, let's create a simple data model in Xano. For this example, we'll create a table called "Stuff" where users can store their personal items.

1. In the Xano dashboard, navigate to the "Data" section and create a new table called "Stuff."
2. Add fields to the table, such as "Name," "Description," and "CreatedAt."
3. Create an API endpoint that retrieves data from the "Stuff" table, filtered by the authenticated user's ID.

Step 3: Connect Adalo to Xano

Now it's time to connect Adalo to our Xano backend. This will allow us to use the authentication and data services we set up in Xano within our Adalo app.

1. In Adalo, create a new app and choose the "Use external users database and authentication" option.
2. Follow the wizard to set up the login and signup endpoints from Xano.
3. Create a new screen in Adalo for the login page and add input fields for email and password.
4. Set up a button that triggers the "External User Login" action from Adalo, using the email and password input fields.
5. Connect Adalo to the "Stuff" API endpoint from Xano by creating a new external collection.
6. Add a filter to the collection to retrieve only the data associated with the logged-in user.

Step 4: Build the User Interface

With the backend set up and connected, we can now focus on building the user interface for our app.

1. In Adalo, create a new screen for the home page.
2. Add a list component to display the user's "Stuff" items from the Xano database.
3. Customize the list item UI to display the relevant fields (e.g., Name, Description, CreatedAt).
4. Add any additional screens or components as needed for your app's functionality.

Step 5: Test and Deploy

Finally, it's time to test your app and make sure everything is working as expected.

1. In Adalo, use the preview mode to test your app's functionality, including login, signup, and data retrieval.
2. Once you're satisfied with the app's performance, deploy it to the app stores or share it with your users.

And there you have it! You've successfully built a no-code app with a robust backend and a sleek user interface, all without writing a single line of code. Congratulations!

Remember, this is just a basic example to get you started. With Xano and Adalo, the possibilities are endless. You can add more complex features, integrate with other services, and scale your app as needed.

If you have any questions or need further assistance, feel free to reach out to the Xano and Adalo communities. Happy no-code app building!