Demo: Shopping Mall Directory App #1 - Getting Started and the Basics

Welcome to this step-by-step guide on building a backend for your app using Xano, a no-code platform that simplifies the process of backend development. In this article, we'll walk through the process of setting up a workspace, creating a database, and generating APIs, all within the Xano platform.

Getting Started with Xano

To begin, head over to the Xano Wizard, also known as Jumpstart, and click the blue button to get started. Here, you'll create your workspace, which is essentially a virtual container for your project.

1. Name your workspace: Give your workspace a descriptive name that represents your app. For this example, we'll name it "Mall Directory App."
2. Add a description: Provide a brief description of your app to help you remember its purpose.
3. Click "Continue": Once you've entered the necessary information, click the "Continue" button to proceed.

Setting Up Your Database and API

Next, you'll be prompted to set up your database and API. Let's break down these concepts:

• Database: Think of your database as a filing cabinet where your content and data are stored. Within this cabinet, you have different folders (tables) that organize your data.
• API: The API acts as an office clerk, facilitating communication between your frontend and backend. It retrieves data from your database tables and sends it to your frontend in a readable format.

Here's how to set up your database and API in Xano:

1. Create Tables: Xano provides a user table by default, but you can delete it if your app doesn't require one. For our "Mall Directory App," we'll create a "stores" table in addition to the user table.
2. Enable API Endpoints: Xano automatically generates basic CRUD (Create, Read, Update, Delete) API endpoints for your tables. Leave this option checked to ensure your API endpoints are ready to use.
3. Configure User Authentication: Xano asks how your users will log in and which table contains your user information. For our example, we'll select the "user" table and allow users to sign in and log in with their email addresses.
4. Click "Finish": After making your selections, click the "Finish" button to complete the setup process.

Adding Content to Your Database

Now that your workspace is set up, it's time to add content to your database tables:

1. Navigate to the Database Page: On the left navigation bar, click on the "Database" option to access your database tables.
2. Add Data to Tables: Click on each table (e.g., "users" and "stores") to open it.
3. Create New Records: Within each table, click the "+" button to create new records (rows) and fill in the relevant fields (columns) with your data.

For our "Mall Directory App," we'll add a new user record with a name, email, and password. In the "stores" table, we'll create records for stores like Apple, Starbucks, and Nordstrom, including their names, descriptions, and locations.

Customizing Your API (Optional)

Xano automatically generates CRUD API endpoints for your tables, so you can immediately connect your backend to a frontend if desired. However, if you need to customize your API, Xano provides that option as well.

For now, if this is your first time building an app or web application, we recommend stopping here and exploring what you can achieve with the ready-to-go CRUD endpoints. Connect Xano to your frontend and see if the generated APIs meet your needs. If you require additional functionality, you can always come back to Xano, watch the video tutorials, and learn how to customize your API as needed.

Next Steps

Congratulations! You've successfully set up a backend for your app using Xano. In the next article, we'll dive into the CRUD API endpoints that Xano has already generated for you, allowing you to interact with your data seamlessly.

Stay tuned for more tutorials on connecting your Xano backend to a frontend, as well as advanced topics that will help you unlock the full potential of this powerful no-code platform.