External APIs: Weather API

Hi there! In this guide, we'll explore how to build and consume external APIs using Xano, a powerful no-code platform that simplifies backend development. We'll be working with the Weather API from weatherapi.com, but the principles demonstrated here can be applied to any external API you wish to integrate with your application.

Getting Started

Before we dive in, make sure you have signed up for a free account on weatherapi.com. Once you're logged in, you'll find your API key in the dashboard. Keep this key handy, as we'll need it later. Remember, it's important never to share your API keys publicly, as they provide access to your account.

Next, let's take a look at the Weather API documentation. This will give you a better understanding of the available endpoints, parameters, and response structures. No two APIs are alike, so it's crucial to familiarize yourself with the documentation of the API you're working with.

Building the External API Request Function

In Xano, we'll create a custom function to handle our external API request. This function can then be reused throughout our workspace, making it a powerful and versatile tool.

1. Create a New Function: In the Xano dashboard, click "Add Function" and give it a descriptive name like "Weather API."
2. Add the External API Request: In the function editor, add an "External API Request" block from the "Function Stacks" section.
3. Set the API URL: Paste the base URL of the Weather API endpoint you wish to use (e.g., `https://api.weatherapi.com/v1/current.json`) in the "URL" field.
4. Set the Parameters: The Weather API requires three parameters: `key` (your API key), `q` (city, ZIP code, or coordinates), and `aqi` (air quality index).

• Use the "Set" block to set each parameter:
• For `key`, you can either hard-code your API key or, better yet, store it as an environment variable for security.
• For `q`, we'll leave it blank for now and make it dynamic using an input later.
• For `aqi`, you can hard-code `no` if you don't need the air quality index.

1. Add Input: To make the `q` parameter dynamic, add an "Input" block and name it something like "city."
2. Map Input to Parameter: In the "External API Request" block, click on the `q` parameter's value field and map it to the "city" input you just created.
3. Test the Function: Enter a city name in the "city" input field and run the function. You should see the complete API URL with the parameters included, and the response from the Weather API should be displayed.

Shaping the Response

The response from the external API may contain more data than you need. Xano allows you to shape the response to get exactly the data you want.

1. Copy the Response JSON: In the function editor, copy the JSON response by clicking the "Copy Result as JSON" button.
2. Create a Variable: Add a "Data Manipulation" block and create a new variable called "results."
3. Subset the Response: In the "results" variable, paste the copied JSON response and use the "Sub Path" feature to visually traverse the response and select the specific data you need (e.g., `results.current`).
4. Update the Response: Change the function's response to use the "results" variable instead of the raw API response.

Now, when you run the function with a city input, you'll get only the relevant weather data for that city.

Using the Function in an API

To demonstrate how to use the custom function in an API, we'll create a new API that retrieves weather data for cities stored in a database.

1. Create a New API: In the Xano dashboard, create a new API group and add a new API called "Weather of City."
2. Add a Table Reference: Reference the table in your database that contains city names (e.g., "location").
3. Add the Custom Function: In the API editor, add your custom "Weather API" function.
4. Map City from Database: In the "city" input of the custom function, map the city value from the database record using dot notation (e.g., `location_1.city`).
5. Return the Response: Set the API response to return the output of the custom function.

Now, when you run the API, it will retrieve the city name from the database and use the custom function to fetch and return the weather data for that city.

You can also add an input to the API, allowing users to enter a city name manually. Simply map the API input to the "city" input of the custom function, and voilà! Your users can now get weather data for any city they desire.

Conclusion

Xano empowers you to build and consume external APIs without writing a single line of code. By following the steps outlined in this guide, you've learned how to create a custom function to handle external API requests, shape the response data, and integrate the function into an API for seamless data retrieval.

Remember, the key to working with any external API is to thoroughly understand its documentation. With Xano, you can quickly prototype ideas, build MVPs, or create internal tools by leveraging the power of external APIs with ease.

Happy building, and stay tuned for more exciting tutorials on leveraging the full potential of Xano!