Xano + On Deck No-Code: How an API Works. Request and Response + Star Wars API Build

Welcome to this step-by-step guide on building a Star Wars planet finder API using Xano, a no-code platform for creating backend services. In this tutorial, you'll learn how to query an external Star Wars API, filter the data, and return planets based on user input. By the end, you'll have a working API endpoint that allows users to search for their favorite Star Wars planets by name.

Prerequisites

Before we begin, make sure you have an account set up on Xano. If you don't have one yet, you can sign up for free at https://www.xano.io.

Step 1: Create a New API Endpoint

1. Log in to your Xano account and navigate to the API Builder.
2. Click on "Add API Endpoint" to start from scratch.
3. Give your new endpoint a name, such as "Get Planets by Name," and click "Save."

Step 2: Add User Input

1. In the API Builder, click the "+" button under "Inputs" to add a new input field.
2. Name this input field "Requested Planet."
3. This input field will allow users to enter the name of the planet they want to search for.

Step 3: Query the Star Wars API

1. Next, we need to fetch the list of planets from the Star Wars API. Click the "+" button under "Functions" and select "External API Request."
2. In the URL field, enter the endpoint for the Star Wars planets API: `https://swapi.dev/api/planets/`
3. Leave the other fields as default and click "Save."
4. In the "Return" section, select the variable that holds the response from the external API request.

Step 4: Filter the Planet Data

1. To filter the planet data, we'll create a new variable. Click the "+" button under "Functions" and select "Create Variable."
2. Name this variable "Planets."
3. In the "Value" field, select the response from the external API request.
4. Click the "Sub Path" button and navigate to the "results" field. This will filter the response to only include the planet data.

Step 5: Loop Through Planets and Match User Input

1. We'll now loop through the list of planets and match the user's input with the planet name.
2. Click the "+" button under "Functions" and select "Loop -> For Each."
3. In the "List" field, select the "Planets" variable we created earlier.
4. Name the loop item "Planet."
5. Inside the loop, add a conditional statement by clicking the "+" button and selecting "Conditional -> If."
6. In the condition field, check if the user's input (the "Requested Planet" input) matches the current planet's name (`Planet.name`).
7. If the condition is true, create a new variable called "Planet Result" and set its value to the current planet object.
8. In the "Return" section, return the "Planet Result" variable.

Step 6: Test and Deploy

1. To test the API endpoint, click the "Run" button in the top-right corner of the API Builder.
2. Enter the name of a Star Wars planet (e.g., "Tatooine") in the "Requested Planet" input field.
3. If everything is set up correctly, you should see the details of the requested planet in the response.
4. Once you're satisfied with the results, you can deploy the API endpoint by clicking the "Deploy" button.

Congratulations! You've successfully built a Star Wars planet finder API using Xano. You can now integrate this API endpoint into your front-end application, allowing users to search for their favorite Star Wars planets by name.

Remember, this is just one example of what you can build with Xano. Feel free to explore and experiment with other APIs and data sources to create even more powerful applications.