Onboarding Tutorial Reference

Use this section if you need additional guidance completing our in-product onboarding tutorial.

Using the Tutorial

The tutorial is made available to new users, based on the answers provided when signing up for Xano. From your dashboard, click the option shown below to begin the tutorial. We'll walk you through building a backend for an online store and show you how to use the database and No-Code API Builder to transform that data.

This widget will be present for you during the entire tutorial, so you can always refer back to it to see what you need to do next.

If you need to leave and resume the tutorial later, you can do so from your workspace dashboard.

The tutorial is separated into three steps, with various tasks to complete in each of them. In this document, we will walk through each of those steps together, and provide additional context to help you understand what's happening along the way. Click on any of the images shown to view full size.

Step 1 - Creating a database

In this step, we will create a database table with some data pre-populated. This is where all of the information that your application needs to reference lives.

1. Click on the Database menu item. This is available on the left-hand side of your screen when starting the tutorial.
2. Add the pre-populated Purchases table by clicking + Add table, and choosing Purchases table from the panel that opens.
3. Take a quick tour of the database view by clicking through the pop-ups on your screen.
4. Review the data that was populated in the table, paying special attention to the total field. You will observe here that this column contains a 0 for all purchases made by Forrest Gump. We'll work on fixing these entries later on in the tutorial.

🎉 You've just completed step 1 of the tutorial!

Step 2 - Your first API

In step 2, we'll walk you through using the No-Code API Builder, and build your first API.

1. Navigate to APIs in the left-hand navigation menu. On the next page, you'll see your API groups, which are just folders used to organize all of your APIs. You can read more about API groups here. Click on the default API group.
2. It's time to create our first API, which will live in the default API group. Click + Add API Endpoint and select Custom endpoint from the panel that opens.
3. Before we continue, take a tour around the No-Code API Builder by clicking through the popups on your screen.
4. Next, we'll add an input to our API. Inputs are any information that this API might need before it can execute, such as a username and password for a login endpoint. Inputs have different types that define the data to be passed into that input, such as text, integers (numbers), or booleans (true/false) Hover over the Inputs section, and click the blue + icon that appears. From the panel that opens, choose 'Text'. Give the input a name of person and click the Save button.
5. Now that we have our input, we can add our first step of business logic to our function stack. You can think of the function stack as everything that this API will do once it is called. A function is just an individual action inside of your function stack. Hover over the function stack section, and click the blue + icon that appears. From the panel that opens, choose Query All Records. Select your purchases table. Click save.
6. So far, we've added an input (more on that later), and a function to our function stack that queries all records from our purchases table. Let's test it by clicking Run & Debug at the top, then clicking run on the panel that opens. You should now see all of the records from the purchases table in the same panel. Next, we're going to use our input to filter that data, so we only get back the records we want.
7. Click on the Query All Records function you created earlier. This should open the same panel you saw when you added the function. We can make changes to how this function works from here. Click the edit (✏️ icon) in the panel next to By Custom Query.
8. Here, we can define conditions that our Query All Records function uses to determine what records to return. Click Add a Conditional. Now, we need to specify the parameters of this condition. What do we know so far? - We know that we want to find records that match a specific person. - We know that the person we want to search for comes from the person input we added. - We know that the person's name is stored in the table in the person column. Thinking about building your conditions and what you want them to do in this way makes it easy to understand the next step. On the left-hand side, click the dropdown and choose your person input. On the right-hand side, choose purchases.person We've just wrote a statement that says "I want to query all records on my purchases table where the person input equals the person field in the table." Click 'Save', and then 'Save' again.
9. Click Run & Debug, and this time, because we've set up our condition (a custom query) on the query all records function, we can use the input to look up specific people. Type in "Forrest Gump" and click Run. You should now see the records returned from your table, but only the records belonging to Forrest Gump.

🎉Congratulations! You just built your first API. Let's move forward to the third and final section -- transforming your data.

Step 3 - Transforming your data

Remember how Forrest Gump's totals were all 0 in the purchases table? In this step, we're going to fix that.

1. Hover over your existing Query All Records function in the function stack and click the + sign. Select For Each Loop from the panel that opens. We're using a For Each loop because we are getting a list of records, so we need to loop through that list one record at a time to update it properly. For the 'List' dropdown, click on it and choose purchases1. We're doing this because our Query All Records is outputting its results (the records returned) into a variable called purchases1. This is our list, and we need to tell the loop "this is the list I want you to iterate through." Click the 'Save' button when you are done.
2. Let's add a step to this loop. For each record in the list that we've provided to the loop, it will execute the functions nested inside of it. Click +Add Function next to the loop in your function stack, and in the panel that opens, choose Data Manipulation > Update Variable.
3. When we use a For Each loop, as it iterates through the list, it takes the current record it is working on and stores it temporarily in a variable called item. We want to update this item variable, which will update that record in the list. Specifically, we're going to update the total value inside of it. In the Existing Variable box, type item.total. In the value box, we need to specify what we are updating item.total to. We need to multiply the price of the item by the quantity. Type item.price in the value box, then click anywhere in the panel to remove the dropdown. Hover over the value box and click Add Filter.
4. Filters are essentially functions that you can apply to values that allow you to perform specific manipulation, transformation, or comparison operations. We just need to multiply here, so type multiply and press enter. The panel has changed, and we can now specify arguments for our multiply filter. We already have the price, and we need to multiply it by item.quantity, so type that in the value box and click Update, then click Save.
5. We're almost there! Now that we are calculating the total, we need to edit the corresponding database record to match. Hover over the Update Variable statement in your function stack and click the + sign. Choose Database Requests > Edit Record from the panel that opens. Click 'Purchases' from the list of tables that appears (just like in your Query All Records function).
6. When we edit a record, we need to specify the name of the field (field_name) and the value we are looking for in that field (field_value). field_name is set to id by default, and for the value, we'll type in item.id. We're doing this because each of our records have a unique ID, so it becomes the best way for us to find the record to edit. Scroll down in the panel, and find the total field. Click the eyeball icon to enable it, and type item.total in the value box. (Remember, we updated this with the correct total already.) Make sure all of the other fields are disabled, and click Save.
7. Click Run & Debug, and then Run to test it out! If all went according to plan, you should now see Forrest Gump's records, with updated totals!

8. Head back to your database from the left-hand menu, and see the updated totals in your table as well.

🎉Congratulations! You've completed the tutorial and successfully built your first backend using Xano.

What's next?

Feel free to play around and experiment with the example. Change some data in the table, modify the function stack, and more! You can also review additional learning resources from your workspace dashboard.