From Idea to App - Part 3: Interacting with External 3rd party APIs from other services

Welcome back to our series on building backend services with Xano, the no-code platform for creating and deploying web and mobile application backends. In this final part, we'll dive into the exciting world of integrating third-party APIs into your application, unlocking a vast array of powerful features and data sources.

Why Integrate Third-Party APIs?

In today's interconnected world, leveraging third-party APIs is crucial for building robust and feature-rich applications. By tapping into external services, you can access a wealth of data and functionalities without having to reinvent the wheel. This approach not only saves time and resources but also enables you to provide a more comprehensive and seamless experience for your users.

Understanding the Process

Before we begin, let's quickly recap the key components we've covered in the previous videos:

1. Database: Where we modeled our application's data and defined the structure.
2. API: The messenger that facilitates communication between the frontend and the database, enabling data transfer and manipulation.

Now, we'll explore how to integrate third-party APIs into our existing backend architecture, allowing us to fetch and utilize external data seamlessly.

Step 1: Identify the Required Third-Party APIs

The first step is to identify the third-party APIs that align with your application's requirements. For our example, we'll be building a loyalty card application that allows users to discover nearby restaurants and redeem deals.

To achieve this, we'll be integrating two APIs:

1. Zippopotamus: A free API that translates zip codes into city names.
2. Zomato: A popular restaurant search API that provides information about restaurants based on location.

Step 2: Set Up the Initial API Endpoint

In Xano, we'll create a new API endpoint specifically for fetching restaurants by zip code. Navigate to the API section, click "Add API Endpoint," and select "Start from Scratch." Name the endpoint something descriptive, like "get_restaurants_by_zip."

Step 3: Fetch the City Name from the Zip Code

The first step in our integration process is to fetch the city name based on the user's provided zip code. We'll use the Zippopotamus API for this.

1. In the function stack, add an "External API Request" and paste the Zippopotamus API URL: `http://api.zippopotam.us/%s`
2. Use the `sprintf` filter to replace `%s` with the user's input zip code.
3. Rename the output to something meaningful, like "zippo_response."
4. Create a new variable called "city_name" and use the "subpath" filter to extract the city name from the "zippo_response."

After completing these steps, you should be able to run the function and see the city name corresponding to the provided zip code.

Step 4: Fetch the Entity ID from Zomato

Zomato requires an "entity ID" to search for restaurants in a specific location. We'll need to make an additional API call to fetch this ID based on the city name.

1. Add another "External API Request" and import the Zomato API cURL command using the "Import cURL" feature.
2. Replace the hard-coded city name in the URL with the `city_name` variable using the `sprintf` filter.
3. For best practices, store your Zomato API key as an environment variable and reference it in the request headers.
4. Rename the output to something like "zomato_entity_id_response."
5. Use the "subpath" filter to extract the entity ID from the response.

After running the function, you should now have the entity ID for the specified city.

Step 5: Fetch Restaurants from Zomato

With the entity ID in hand, we can finally fetch the restaurant data from Zomato.

1. Add another "External API Request" and import the Zomato restaurant search cURL command.
2. Replace the hard-coded entity ID in the URL with the `zomato_entity_id_response` using the `sprintf` filter and the "subpath" technique.
3. Rename the output to something like "zomato_restaurants_response."
4. Optional: Use the "subpath" filter to extract only the restaurant names from the response, making the data more concise for the frontend.

Run the function, and you should see a list of restaurants for the specified zip code!

Step 6: Connect to the Frontend

With the backend integration complete, you can now connect this API endpoint to your frontend application. When a user enters a zip code, your frontend will call this endpoint, and Xano will handle the entire process of fetching and transforming the restaurant data from third-party APIs.

Conclusion

Congratulations! You've successfully learned how to integrate third-party APIs into your Xano backend architecture. This powerful capability opens up a world of possibilities, enabling you to leverage external data sources and functionalities to create truly innovative and feature-rich applications.

Remember, working with third-party APIs can be challenging at times, but Xano's visual interface and powerful data manipulation tools make the process more accessible and streamlined. Keep exploring, experimenting, and pushing the boundaries of what's possible with Xano!