Comment on page

REST API Example: Airline Passengers

This page walks you through building an app that shows airline passenger names (retrieved from API calls) for the logged-in users. Users can see the list of all passenger names. Tapping on a name, the user is navigated to the passenger details screen. On the passenger details, the user can edit the passenger name and delete the passenger.
The final app looks like this:
Passenger names (API example app)
What you'll learn
How to create and test APIs
How to pass auth token
Creating API with dynamic URL
How to pass query parameters
How to create request body in JSON & x-www-urlencoded formats
Creating variables and using them in APIs
Creating JSON path
How to navigate and pass data to a new page
Building an App
To build such an app, you will need the following pages.
1.Login: This page allows you to log in.
2.HomePage: After successful login, this page will open. It shows a list of all passengers.
3.PassengerDetails: This shows passenger details.
4.UpdatePassenger: This allows you to update the passenger details.
The following flow illustrates how these pages will work together:
Passenger names app flow
The steps to build the app are as follows:
1.​Create a new project​
2.​Create and test APIs​
3.​Building UI​
4.​Login a user​
5.​Show a list of passengers​
6.​Navigate to the passenger details page​
7.​Show passeger details​
8.​Navigate to update the passenger page​
9.​Update passenger​
10.​Delete passenger​
1. Create a new project
The very first step starts with creating a new project.
By default, the new project is created with a page called HomePage.
2. Create and test APIs
For building this example, we will be using passenger APIs from instantwebtools.com. Before you build anything related to APIs in your app, you must create and test the APIs to make sure all the APIs are working correctly and giving responses as expected.
For this app, create and test the following APIs for your project:
1.​Login​
2.​getPassengers​
3.​getPassengersDetails​
4.​updatePassenger​
5.​deletePassenger​
2.1 Login
The username and passwords will be sent to this API as an x-www-urlencoded request body.
post
https://dev-457931.okta.com/oauth2/aushd4c95QtFHsfWt4x6/v1/token
 
Login
See how to send the request body in x-www-urlencoded format.
Login API
2.2 getPassengers
This API retrieves all passengers.
get
https://api.instantwebtools.net/v2/passenger?page=0&size=10
 
getPassengers
See how to pass the dynamic auth token and query parameters.
getPassengers API call (Headers)
getPassengers API call (Variables)
2.3 getPassengersDetails
This gets passenger details based on the Id.
get
https://api.instantwebtools.net/v2/passenger/6332e94ef699ea26812b7fb5
 
getPassengersDetails
getPassengersDetails (Headers)
getPassengersDetails (Variables)
2.4 updatePassengerName
This updates the passenger name based on the Id.
patch
https://api.instantwebtools.net/v2/passenger/6332e94ef699ea26812b7fb5
 
updatePassengerName
See how to send the request body in JSON format.
updatePassengerName (Headers)
updatePassengerName (Body)
updatePassengerName (Variables)
2.5 deletePassenger
This deletes the passenger based on the Id. 
delete
https://api.instantwebtools.net/v2/passenger/6332e94ef699ea26812b7fb5
 
deletePassenger
deletePassenger (Headers)
deletePassenger (Variables)
3. Building UI
Now, it's time to start building the UI. Here, we will build the UI for all the pages.
3.1 Login page
On this page, add two TextField (one for email and another for password) widgets and a Button. Here is how it should look:
Login page
3.2 HomePage
Here you will display the list of all passengers using ListView and ListTile widgets. You can also add an IconButton widget inside the Appbar to log out a user.
Here is how it looks:
HomePage
3.3 PassengerDetails page
This page will show the passenger's details on Text widgets. Also, add two IconButton inside the Appbar to update and delete the passenger.
PassengerDetails page
3.4 UpdatePassenger page
This page will allow updating the passenger name using the TextField and a Button widget.
UpdatePassenger page
4. Login a user
Now that we have APIs and UI ready let's start by integrating the login API call. 
First, on the login button, add an action to trigger the login API. If the call succeeds, store the authorization token in an app state variable and navigate to the home page. And if the call fails, show the error message using Snackbar.
Here is how it looks:
Login action
Additionally, when the login page is loaded, you can check if the token is already present (i.e., the user is already logged in) and navigate to the home page.
This can be handled automatically if you add a custom authentication.
Check if a user is already logged in
5. Show a list of passengers
Once the user is logged in, you can retrieve and display the passenger listing from the API call into ListView.
To do so:
1.​Query a getPassengers API call on a ListView. While doing so, you can Enable Pull to Refresh to see the new changes. 
2.​Generate dynamic children.
3.Display the passenger name from an API call on the Text widget. See how to do it here.
You can also display a list of passengers using the custom data type. See how to use custom data type in API.
On the same page, On tap of IconButton (Inside the Appbar), you can log out a user by clearing the token value in an app state variable (using the Update app state) followed by the Navigate Back action.
Here is how it looks:
Logout a user
6. Navigate to the passenger details page
On tapping the passenger name (ListView > ListTile widget), you will navigate to the PassengerDetails page and pass the passenger Id. This Id will be used to retrieve the full details of the passenger in the next step.
To do so:
1.Select the ListTile widget and add an action to navigate to the PassengerDetails page.
2.Inside this action, click on the Define button. This will open the PassengerDetails page, where you can define a parameter that will accept the passenger Id.
3.After defining the parameter, open this action again and pass its value From Variable > [dynamic_children_variable_name] item and set it to a JSON path that retrieves the passenger Id.
7. Show passenger details
Whenever this page opens, it will have the passenger Id (as a page parameter). You can use this passenger Id while making an API call that will receive the complete passenger details based on this. 
To do so:
1.​Query a getPassengersDetails API call on a page (i.e., page name) and pass the passenger Id from page parameters.
2.Display the passenger details from an API call on the Text widgets. See how to do it here.
8. Navigate to update the passenger page
From the PassengerDetails page, on tapping the edit icon (inside the Appbar), you will navigate to the UpdatePassenger page with the passenger name and Id. The passenger name will be used to set the initial value for the TextField, and an Id will be required while calling the updatePassengerName API call.
To do so:
1.Select the edit IconButton and add an action to navigate to the UpdatePassenger page.
2.Inside this action, click on the Define button. This will open the UpdatePassenger page, where you can define a parameter that will accept the passenger Id and name.
3.After defining the parameter, open this action again and pass the passenger id from the page parameter and passenger name using the JSON path.
9. Update passenger
On this page, you have a TextField widget to display the current name and a button to trigger the updatePassengerName API call.
To update passenger details:
1.First, set the TextField initial value with the passenger name from the page parameter.
2.On the update button, add an action to trigger the updatePassengerName API call. If the call succeeds, show a success message and navigate back; otherwise, only display the error message.
Here is how it looks:
Update passenger
10. Delete passenger
From the PassengerDetails page, tapping the delete icon (inside the Appbar) will delete the current user and navigates back to the previous page. Here the passenger Id will be required while triggering the deletePassenger API call.
To do so, select the delete IconButton and add an action to trigger the deletePassenger API call. If the call succeeds, show a success message and navigate back; otherwise, only display the error message.
Delete Passenger
Get the example app
Get the clonable version of this app here.

Create & Test API Call

SOAP API Example: Countries

Last modified 1mo ago