Using the API Plugin in ProtoPie Connect

Available in both Pro and Enterprise plans.

The API plugin lets you quickly bring real data into your prototypes by connecting them to APIs and databases.

Unlike Custom Plugins, you don't need coding skills to use the API plugin. This plugin handles the task, either sending data to APIs or retrieving data from them and seamlessly incorporating it into your prototypes in JSON format.

What is an API?

An API, which stands for Application Programming Interface, is a set of rules that allows different computer programs to communicate and work together. It's like a bridge that helps them share information and perform tasks without knowing all the details of how each program works. In simpler terms, APIs make it easier for software to communicate and collaborate.

Supported API Types

With the API plugin, you can easily start API requests, whether they're GET or POST, and connect with various API types:

Public APIs: This encompasses popular services like Spotify, OpenWeatherMap, YouTube, ChatGPT, live scores, and many more.
Internal APIs: Connect seamlessly with your organization's systems and services.

How to Make API Requests

Follow these easy steps to use the API plugin in ProtoPie Connect and make API requests in your prototypes.

Step 1: Creating a Send Response in ProtoPie Studio

Start by adding a Send response to your chosen trigger in ProtoPie Studio.
Remember to select the ProtoPie Connect/Studio channel, as you usually do when passing information back and forth between ProtoPie Studio and ProtoPie Connect.
Save your prototype.

In this example prototype, we want to get data from the Useless Facts API when you pick "Random Fact" using the toggle switch. To do this, we begin by creating a Send response with the ProtoPie Connect/Studio channel and a unique message value.

Tip: Watch this free lesson on ProtoPie School to master Send and Receive messages between ProtoPie Studio and ProtoPie Connect.

Step 2: Configuring API Settings within the API Plugin

Open your prototype in ProtoPie Connect.
Click on Plugin, then select the API plugin from the list.
Select one of the two HTTP request methods available: GET or POST. When making API requests, GET retrieves data from the API provider, while POST sends new data to be processed.
Enter the correct API URL for the API you want to access. Refer to the API's online documentation to obtain the correct URL. In our example, we can see on this page that the URL we need is https://uselessfacts.jsph.pl/api/v2/facts/random
Include a Header and Body if the API requires it. Be sure to carefully read your chosen API's documentation for any additional parameters needed alongside the API URL.
- The Header must be formatted in JSON {}, but the Body doesn't always need to follow JSON {} format. You can enter the Body in JSON {} format if the API demands it.
Click the Test Request button to verify that the connection is working properly. If an error message appears, review the information you entered in the previous steps.

Step 3: Connecting the API with your Prototype

Click the Message From Pie input field to access the list of available messages. The API plugin automatically detects the messages within your prototypes. If you don’t see your message, copy and paste it from the Send response you created in Step 1.
Enable Override URL/Header/Body with msg value if you need to dynamically override the API’s URL, Header, or Body with the value of the message sent from the prototype. Learn more about overriding API URL/Header/Body with message values.
In Message to Pie, type in a message, which will be sent back to your prototype along with the data obtained from the API request you configured in Step 2.
Click Activate to establish the connection. The plugin will initiate the API request upon receiving the corresponding message from the prototype.

Step 4: Creating a Receive trigger in ProtoPie Studio

Go back to ProtoPie Studio.
In your prototype, add a Receive trigger.
Remember to choose the ProtoPie Connect/Studio channel, as you did when setting up the Send response in Step 1.
Input the same message you configured in Step 3 under Message to Pie.
Activate the Assign to Variable option. Create a text variable and select it from the list in the Receive trigger. The information obtained from the API is now stored within this variable.
Since API data are often returned in JSON format, utilizing the Text response with a parseJson formula is the most efficient method for incorporating API data into your prototypes.
Save the prototype and then reload it in ProtoPie Connect. Your API-empowered interaction is now ready to be tested through ProtoPie Connect!

Overriding the API URL/Header/Body With Message Values

Override URL/Header/Body with msg value is used to dynamically override the API’s URL, Header, or Body parameters with the value of the message sent from the prototype.

In this example prototype, we used this feature to override the API URL with the value from the below Send message in the Pie file. As a result, when you test the prototype in ProtoPie Connect and type a city into the search box, you'll see the precise weather information for that city.

Running Simultaneous API Calls (Enterprise-Only)

Teams on the Enterprise plan can execute multiple API requests simultaneously with the API plugin. This empowers you to connect your prototypes with various APIs at once, giving you even more flexibility and convenience.

To run multiple API requests simultaneously in your prototype, follow these steps:

Open the API plugin in ProtoPie Connect.
Click on the + icon situated in the upper-right corner of the API Settings window. This will open a new window where you can configure and run additional API calls simultaneously. You can also duplicate your existing APIs, to keep their original settings.

API Plugin How-To Tutorials

Discover the API plugin's key features and use cases in this how-to series.