Using the M3O Place API with Xano

Are you looking to build an app that allows users to find local businesses in their area? Look no further! In this blog post, we'll guide you through the process of creating a local business search app using Xano, a no-code platform that simplifies backend development.

Introduction

Imagine you want to build an app that lets users type in their zip code and find local restaurants in their vicinity. We'll show you how to accomplish this using Xano, along with two external APIs: Zipopotamus and the Places API from M3O. Not only will we retrieve the necessary data, but we'll also store it in your Xano database for future manipulation, such as allowing users to rate or leave comments on the businesses.

Prerequisites

Before we begin, make sure you have the following:

1. A Xano account (sign up for free if you haven't already)
2. A table in your Xano database named "restaurants" with the following columns: name, address, and rating

Step 1: Create a New API Endpoint

1. In the Xano dashboard, navigate to the "APIs" section and click on your default API group.
2. Click on "Add New API Endpoint" and select "Database Operation."
3. Choose the "restaurants" table and the "GET" method.
4. Name the endpoint "get local restaurants" and click "Save."

Step 2: Set Up the Inputs

1. In the "Inputs" section, click the "+" sign and create a new text field called "zip code."
2. This will be the input where users enter their zip code to search for local restaurants.

Step 3: Make an External API Request to Zipopotamus

1. In the "Function Stack" section, add a new "External API Request" function.
2. Copy the following URL from Zipopotamus: `https://api.zippopotam.us/us/%s`
3. Replace `%s` with your "zip code" input variable using the "Sprint F" filter.
4. In the "Response" section, set the response to `API_1` to see the result of the Zipopotamus API call.
5. Run and debug the endpoint with a sample zip code to ensure the API call is working correctly.

Step 4: Create Variables for Latitude and Longitude

1. In the "Function Stack," add a new "Variables" function under "Data Manipulation."
2. Create two variables: "long" and "latitude" to store the longitude and latitude values from the Zipopotamus API response.
3. Use the "Sub Path" feature to extract the longitude and latitude values from the `API_1` response.
4. Run and debug the endpoint again to ensure the variables are set correctly.

Step 5: Create a Combined Latitude/Longitude Variable

1. In the "Function Stack," add another "Variables" function.
2. Create a new variable called "lat long" with the value `%s,%s` (note the comma separator).
3. Use the "Sprint F" filter and add the "latitude" and "long" variables as arguments to combine them into the format expected by the Places API.

Step 6: Make an External API Request to M3O Places API

1. In the "Function Stack," add a new "External API Request" function.
2. Go to the M3O Places API documentation and copy the provided cURL command.
3. In Xano, click "Import cURL" and paste the command.
4. Update the following parameters:

• Remove the "keyword" parameter.
• Set the "location" parameter to the "lat long" variable.
• Set the "type" parameter to "restaurant" (or any other business type you prefer).
• Replace the `$M3O_API_TOKEN` with your actual M3O API key.

1. In the "Response" section, set the response to `API_2` to see the result of the Places API call.
2. Run and debug the endpoint to ensure the API call is working correctly.

Step 7: Store the Results in the Database

1. In the "Function Stack," add a new "Variables" function called "data we want."
2. Use the "Sub Path" feature to extract the "results" array from the `API_2` response.
3. Add a new "Loops" function and select "For Each."
4. Inside the loop, add a "Database Request" function to insert a new record into the "restaurants" table.
5. Use the "Choose Value to Apply to Inputs" feature to map the "name," "address," and "rating" fields from the Places API response to the corresponding columns in the "restaurants" table.
6. Run and debug the endpoint.
7. Check the "restaurants" table in your Xano database to ensure the data has been inserted correctly.

Congratulations! You've successfully built a local business search app using Xano, Zipopotamus, and the M3O Places API. You can now extend this app by adding features like user authentication, allowing users to rate or comment on businesses, or implementing additional filtering options.

Remember, Xano is designed to make backend development accessible to both non-technical users and developers. With its visual interface and powerful capabilities, you can build and deploy backend services for web and mobile applications without writing a single line of code.

Happy building!