Connect to an External API and manipulate data in Xano - OpenAPI and Zippopotamus example

In this guide, we'll explore how to connect to external APIs and integrate their data into your Xano applications. We'll cover two examples: connecting to a simple, open API and connecting to an API that requires authentication. Let's get started!

Connecting to a Simple, Open API

For our first example, we'll connect to the Zip Epitomize API, which allows you to retrieve information about a city based on a zip code and country.

1. Create a new API endpoint: Click "Add an API endpoint" and give it a name, such as "External API."
2. Add an External API Request function: In the Function Stack, add a "Simple Function" and select "External API Request."
3. Enter the API URL: In the External API Request function, paste the API URL into the "URL" field. For the Zip Epitomize API, the URL is: `https://api.zippopotam.us/us/%s/%s`

This URL includes placeholders (`%s`) for the country and zip code, which we'll replace dynamically.

1. Define user inputs: Click the "User Inputs" button and define two inputs: "Country" (type: text) and "Zip Code" (type: text).
2. Use the Sprint F filter: To replace the placeholders in the URL with the user inputs, add the "Sprint F" filter. Replace the URL with `%s/%s` and then select the "Country" and "Zip Code" inputs as the arguments for the filter.
3. Test the API: Click "Save" and then "Run & Debug." Enter a country (e.g., "US") and a zip code (e.g., "92352"). The API response will display the city information.

Connecting to an Authenticated API

For our second example, we'll connect to the Google Cloud Natural Language API, which requires authentication. We'll use the "Summarize for a Second Grader" example, which summarizes a given text in a way that a second-grader can understand.

1. Import the cURL command: In the Function Stack, add a new "Simple Function" and select "External API Request." Then, click "Import cURL" and paste the cURL command from the API documentation.

This will automatically populate the request details, including the headers and body.

1. Add an authentication token: In the "Headers" section, you'll see a placeholder for an "Authorization" header with the value "Bearer [YOUR_ACCESS_TOKEN]." Replace this with your actual access token from the Google Cloud Console.

Note: It's best practice to store sensitive information like API keys in environment variables rather than hard-coding them.

1. Test the API: Click "Save" and then "Run & Debug." The API response will display the summarized text.
2. Return only the summary: To return only the summarized text instead of the entire payload, create a new "Data Manipulation" function and select "Create Variable." Name the variable "Summary" and use the "Sub Path" option to select the specific path to the summarized text in the API response.
3. Replace hard-coded text: If you want to replace the hard-coded text in the API request with user input, add a new "User Input" field (e.g., "User Text") and replace the hard-coded value with the input variable.
4. Test with user input: Click "Save" and then "Run & Debug." Enter your text in the "User Text" field, and the API will return the summarized version.

By following these steps, you can easily connect to external APIs and integrate their data into your Xano applications. Whether you're working with open APIs or authenticated APIs, Xano's visual interface and powerful functions make it simple to retrieve, manipulate, and utilize external data sources.