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:

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:

The steps to build the app are as follows:

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:

2.1 Login

The username and passwords will be sent to this API as an x-www-urlencoded request body.

Login

POST https://dev-457931.okta.com/oauth2/aushd4c95QtFHsfWt4x6/v1/token

Request Body

NameTypeDescription

username*

String

password*

String

scope*

String

grant_type

String

client_id

String

{
    "token_type": "Bearer",
    "expires_in": 3600,
    "access_token": "eyJraWQiOiJwS0lIX2oycDlUM1gtUjFEbjVmNmRyTXNtaGVEd3hTckR4V1p2czlnWktBIiwiYWxnIjoiUlMyNTYifQ.eyJ2ZXIiOjEsImp0aSI6IkFULlNfdkpaQzZNM1RSeElpS28xUnBNS2R6NHZ2VlRqNUJfZWlUMXZIalJFaEEub2FyeG5ydmVvOTJNbW9TR1M0eDYiLCJpc3MiOiJodHRwczovL2Rldi00NTc5MzEub2t0YS5jb20vb2F1dGgyL2F1c2hkNGM5NVF0RkhzZld0NHg2IiwiYXVkIjoiYXBpIiwiaWF0IjoxNjY0OTU2MTIwLCJleHAiOjE2NjQ5NTk3MjAsImNpZCI6IjBvYWhkaGprdXRhR2NJSzJNNHg2IiwidWlkIjoiMDB1aGVuaDFwVkRNZzJ1ZXg0eDYiLCJzY3AiOlsib2ZmbGluZV9hY2Nlc3MiXSwiYXV0aF90aW1lIjoxNjY0OTU2MTIwLCJzdWIiOiJhcGktdXNlcjRAaXd0Lm5ldCJ9.itlbcmyxD6oSRrtZZVhvqx685JVQqqLhTPz9AGG1yn_sqtWquarun3C34xr9nwfuRFtdg707UZgFz3W6HS7k7ojry_bQg1JBJaD-KMZnCPgy2A13dKZldug_DViTA04k7THGuc18royDsp82o-oXtfhGk3FOp0Fga2KDE1b9fjpzqPF-86CZ86pkMz_67yM2t-1oz_1mExedlsBE9Pwy9ekLhgX7MC2dBrmL8fPc7FaQtMzGWA6MUHLtxj8-KDGPbHcwQyKmWT1pjHGNB0AAZOQmY8UICtFuBLhM4Cqwqxk_fDqzF3RJn0PuEQ9SwSi33Zd7n9PQvcFPFyK2ZBotqA",
    "scope": "offline_access",
    "refresh_token": "iopUf58AwQL157i3zNeIBh08LkwCrvdQHYBUK5WXO0k"
}

2.2 getPassengers

This API retrieves all passengers.

getPassengers

GET https://api.instantwebtools.net/v2/passenger?page=0&size=10

Query Parameters

NameTypeDescription

page

Integer

size

Integer

Headers

NameTypeDescription

Authorization

String

{
    "totalPassengers": 897,
    "totalPages": 90,
    "data": [
        {
            "_id": "6332e9b5f699ea07f22b87cc",
            "name": "evin frye",
            "trips": 300,
            "airline": [
                {
                    "id": 3,
                    "name": "Cathay Pacific",
                    "country": "Hong Kong",
                    "logo": "https://upload.wikimedia.org/wikipedia/en/thumb/1/17/Cathay_Pacific_logo.svg/300px-Cathay_Pacific_logo.svg.png",
                    "slogan": "Move Beyond",
                    "head_quaters": "Cathay City, Hong Kong International Airport, Chek Lap Kok, Hong Kong",
                    "website": "www.cathaypacific.com",
                    "established": "1946"
                }
            ],
            "__v": 0
        },
        {
            "_id": "6332e9d3f699ea7f602b8a06",
            "name": "John Doe",
            "trips": 250,
            "airline": [
                {
                    "id": 5,
                    "name": "Eva Air",
                    "country": "Taiwan",
                    "logo": "https://upload.wikimedia.org/wikipedia/en/thumb/e/ed/EVA_Air_logo.svg/250px-EVA_Air_logo.svg.png",
                    "slogan": "Sharing the World, Flying Together",
                    "head_quaters": "376, Hsin-Nan Rd., Sec. 1, Luzhu, Taoyuan City, Taiwan",
                    "website": "www.evaair.com",
                    "established": "1989"
                }
            ],
            "__v": 0
        },
        {
            "_id": "6332ee8cf699ead3452bdecd",
            "name": "John Doe",
            "trips": 250,
            "airline": [
                {
                    "id": 5,
                    "name": "Eva Air",
                    "country": "Taiwan",
                    "logo": "https://upload.wikimedia.org/wikipedia/en/thumb/e/ed/EVA_Air_logo.svg/250px-EVA_Air_logo.svg.png",
                    "slogan": "Sharing the World, Flying Together",
                    "head_quaters": "376, Hsin-Nan Rd., Sec. 1, Luzhu, Taoyuan City, Taiwan",
                    "website": "www.evaair.com",
                    "established": "1989"
                }
            ],
            "__v": 0
        },
        {
            "_id": "6332eeb6f699ea7c5c2be1b2",
            "name": "John Doe",
            "trips": 250,
            "airline": [
                {
                    "_id": "6332ed09f699ea61ca2bc38e",
                    "id": 1115,
                    "name": "Indian Airways",
                    "country": "India",
                    "logo": "https://upload.wikimedia.org/wikipedia/en/thumb/9/9b/Qatar_Airways_Logo.svg/sri_lanka.png",
                    "slogan": "From India",
                    "head_quaters": "Nagpur, India",
                    "website": "www.indianairways.com",
                    "established": "2022",
                    "__v": 0
                }
            ],
            "__v": 0
        },
        {
            "_id": "6332eec9f699eaf4f42be309",
            "name": "AMIT L",
            "trips": 250,
            "airline": [
                {
                    "_id": "6332ed09f699ea61ca2bc38e",
                    "id": 1115,
                    "name": "Indian Airways",
                    "country": "India",
                    "logo": "https://upload.wikimedia.org/wikipedia/en/thumb/9/9b/Qatar_Airways_Logo.svg/sri_lanka.png",
                    "slogan": "From India",
                    "head_quaters": "Nagpur, India",
                    "website": "www.indianairways.com",
                    "established": "2022",
                    "__v": 0
                }
            ],
            "__v": 0
        },
        {
            "_id": "6332ef45f699eabd3b2beb49",
            "name": "AMIT L",
            "trips": 250,
            "airline": [
                {
                    "_id": "6332ed09f699ea61ca2bc38e",
                    "id": 1115,
                    "name": "Indian Airways",
                    "country": "India",
                    "logo": "https://upload.wikimedia.org/wikipedia/en/thumb/9/9b/Qatar_Airways_Logo.svg/sri_lanka.png",
                    "slogan": "From India",
                    "head_quaters": "Nagpur, India",
                    "website": "www.indianairways.com",
                    "established": "2022",
                    "__v": 0
                }
            ],
            "__v": 0
        },
        {
            "_id": "6332eff9f699ea4f592bf75f",
            "name": "John Doe",
            "trips": 250,
            "airline": [
                {
                    "id": 5,
                    "name": "Eva Air",
                    "country": "Taiwan",
                    "logo": "https://upload.wikimedia.org/wikipedia/en/thumb/e/ed/EVA_Air_logo.svg/250px-EVA_Air_logo.svg.png",
                    "slogan": "Sharing the World, Flying Together",
                    "head_quaters": "376, Hsin-Nan Rd., Sec. 1, Luzhu, Taoyuan City, Taiwan",
                    "website": "www.evaair.com",
                    "established": "1989"
                }
            ],
            "__v": 0
        },
        {
            "_id": "6332eff9f699eab26f2bf772",
            "name": "evie frye",
            "trips": 300,
            "airline": [
                {
                    "id": 8,
                    "name": "Thai Airways",
                    "country": "Thailand",
                    "logo": "https://upload.wikimedia.org/wikipedia/en/thumb/5/58/Thai_Airways_Logo.svg/200px-Thai_Airways_Logo.svg.png",
                    "slogan": "Smooth as Silk / I Fly THAI",
                    "head_quaters": "Jom Phol Subdistrict, Chatuchak, Bangkok, Thailand",
                    "website": "www.thaiairways.com",
                    "established": "1960"
                }
            ],
            "__v": 0
        },
        {
            "_id": "6332f075f699ea3eb22bffc3",
            "name": "John Doe",
            "trips": 250,
            "airline": [
                {
                    "id": 5,
                    "name": "Eva Air",
                    "country": "Taiwan",
                    "logo": "https://upload.wikimedia.org/wikipedia/en/thumb/e/ed/EVA_Air_logo.svg/250px-EVA_Air_logo.svg.png",
                    "slogan": "Sharing the World, Flying Together",
                    "head_quaters": "376, Hsin-Nan Rd., Sec. 1, Luzhu, Taoyuan City, Taiwan",
                    "website": "www.evaair.com",
                    "established": "1989"
                }
            ],
            "__v": 0
        },
        {
            "_id": "6332f076f699ea71d42bffd6",
            "name": "evie frye",
            "trips": 300,
            "airline": [
                {
                    "id": 8,
                    "name": "Thai Airways",
                    "country": "Thailand",
                    "logo": "https://upload.wikimedia.org/wikipedia/en/thumb/5/58/Thai_Airways_Logo.svg/200px-Thai_Airways_Logo.svg.png",
                    "slogan": "Smooth as Silk / I Fly THAI",
                    "head_quaters": "Jom Phol Subdistrict, Chatuchak, Bangkok, Thailand",
                    "website": "www.thaiairways.com",
                    "established": "1960"
                }
            ],
            "__v": 0
        }
    ]
}

2.3 getPassengersDetails

This gets passenger details based on the Id.

getPassengersDetails

GET https://api.instantwebtools.net/v2/passenger/6332e94ef699ea26812b7fb5

Headers

NameTypeDescription

Authorization

String

{
    "_id": "6332e9b5f699ea07f22b87cc",
    "name": "evin frye",
    "trips": 300,
    "airline": [
        {
            "id": 3,
            "name": "Cathay Pacific",
            "country": "Hong Kong",
            "logo": "https://upload.wikimedia.org/wikipedia/en/thumb/1/17/Cathay_Pacific_logo.svg/300px-Cathay_Pacific_logo.svg.png",
            "slogan": "Move Beyond",
            "head_quaters": "Cathay City, Hong Kong International Airport, Chek Lap Kok, Hong Kong",
            "website": "www.cathaypacific.com",
            "established": "1946"
        }
    ],
    "__v": 0
}

2.4 updatePassengerName

This updates the passenger name based on the Id.

updatePassengerName

PATCH https://api.instantwebtools.net/v2/passenger/6332e94ef699ea26812b7fb5

Headers

NameTypeDescription

Authorization

String

Request Body

NameTypeDescription

name

String

2.5 deletePassenger

This deletes the passenger based on the Id.

deletePassenger

DELETE https://api.instantwebtools.net/v2/passenger/6332e94ef699ea26812b7fb5

Headers

NameTypeDescription

Authorization

String

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:

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:

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.

3.4 UpdatePassenger page

This page will allow updating the passenger name using the TextField and a Button widget.

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:

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.

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. 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:

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:

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.

Get the example app

Get the clonable version of this app here.

Last updated