Setting Up an API Request in Nowa
APIs (Application Programming Interfaces) are the backbone of communication on the internet. By using simple HTTP protocols, you can integrate with countless services around the world.
Learning how to use APIs correctly empowers you to build powerful and dynamic apps. Nowa provides a robust way to integrate any API into your Flutter applications visually and effortlessly.
In this guide, we'll walk through the basics of setting up an API request in Nowa. We'll cover:
- Creating a collection
- Adding common data like base URLs and headers
- Creating a GET request
- Testing the request and viewing the response
If you are a video type of person, here's a video explaining creating a GET request to:
-
fetch All Wordpress posts and display them
-
Fetch a specific post using Post ID
Want to continue reading? then let's get started!
1. Creating a Collectionβ
A collection in Nowa is a group of API requests that share the same base URL and headers. This is useful when you're integrating with a service like WordPress, where multiple endpoints share common settings.
Steps:
- Navigate to the Data section located at the bottom left of the Nowa interface.
- Click on API.
- Click on Create Collection.
- Name your collection (e.g.,
WordPress
).
Why use a collection?
- Organization: Keep all related requests together.
- Efficiency: Set common data like base URLs and headers once for all requests in the collection.
2. Adding Common Dataβ
After creating your collection, you can add data that is common to all requests within it.
Steps:
- Within your newly created collection, locate the settings for common data.
- Add the Base URL (e.g.,
https://public-api.wordpress.com/wp/v2/sites/nowablogapp.wordpress.com/
). - Add any common headers that all requests will use.
3. Adding a Requestβ
Now that your collection is set up with common data, you can add your first API request.
Steps:
- Click on Add Request within your collection.
- Choose the request type:
GET
,POST
,PUT
,DELETE
,PATCH
,HEAD
, orDOWNLOAD
. - Enter the endpoint for the request (without the base URL). For example, to get all posts, use
posts
. - Specify any additional parameters, headers, or body content specific to this request.
4. Creating a GET Request Exampleβ
Let's walk through creating a GET
request to retrieve all posts from a WordPress blog.
Steps:
- Request Type: Select
GET
. - Endpoint: Enter
posts
. - Test the Request: Click on Run Test to execute the request.
Here's the full example of creating the Wordpress
collection, then the getAllPosts
request
What happens next?
- Response Body: You'll see the data returned from the API in the body section.
- Response Headers: View metadata about the response.
- Full URI: Verify the complete URL used for the request, which combines the base URL and endpoint.
5. Testing and Verifying the Responseβ
Testing your API requests ensures that they work as expected before integrating them into your app.
Steps:
- After running the test, review the response body to understand the data structure.
- Check the status code to ensure the request was successful (e.g.,
200 OK
). - Examine the headers for additional information like content type and caching policies.
Next Stepsβ
Now that you've set up a basic API request and tested it, you're ready to generate models from the response data and add mock data for design-time testing.
π Head to the next section to learn how to generate a model from the response.
Happy building!