Digia Academy
Digia StudioDiscordLinkedIn
  • Introduction
    • FAQs
  • What's New
    • 2024
      • March
  • DIGIA STUDIO INTRODUCTION
    • Dashboard
    • Builder Tool
      • Navigation Menu
      • Tool Bar
      • Pages and Widgets Panel
      • Canvas Area
      • Properties Panel
    • Creating a New Project
    • Creating new Pages
    • Working with Widget Tree
    • Build Your First App
      • Hello World
      • Bytes App
        • Onboarding
        • Defining API Calls
        • Courses
        • Articles
        • Viewing your App
    • SDK Integration
      • Insert Single Pages from Digia Studio
  • Actions
    • Call API Rest Action
    • Call Rest API
    • Pop Current
    • Pop to Route
    • openUrl
    • Go To Page
    • Post Message
    • Set Page State
    • Wait (delay)
    • Drawer
    • Toast
    • Open Dialog
    • Share
    • Copy to Clipboard
  • Operations
    • API Call
    • Operators
      • Json Operators
      • Logical Operators
      • Date Time Operators
      • Math Operators
      • String Operations
  • BUILDING UI
    • Widgets
      • Form Widgets
        • PinField
        • Calendar
        • Text Form Field
      • Base Widgets
        • Animated Button
        • Check Box
        • Video Player
        • Spacer
        • Stack
        • Wrap
        • Text
        • Avatar
        • Rich Text
        • Image
        • Button
        • Icon
        • Switch
        • Sized Box
        • HtmlView
        • Lottie Animation
        • Linear Progress Bar
        • YouTube Player
        • Circular Progress Bar
      • Layout Widgets
        • ListView
        • Web View
        • Future Builder
        • Conditional Builder
        • Stream Builder
        • GridView
        • Column
        • Row
        • Container
        • Expandable
        • Divider (Horizontal)
        • Divider (Vertical)
        • Carousel
      • Persistent Footers Widgets
        • NavigationBar Widget
      • Page Widgets
        • Stepper Widget
        • Scaffold Widget
        • Paginated Listview Widget
        • TabView
        • AppBar
      • Widget Commonalities
    • Event Handlers
  • Theme
    • Colors
    • Typography
  • DATA AND BACKEND
    • API Calls
      • Setting up API Calls
      • Create API Calls
      • Import API From Curl
  • DEPLOYING YOUR APP
    • Deployment
    • Release History
  • Settings
    • App Settings
    • App Assets
    • Media Assets
  • JARGON
    • Data integration
Powered by GitBook
On this page
  • 1. Headers
  • Passing request headers
  • Passing auth token (as request header)
  • 2. Query Parameters
  • 3. Variables
  • Creating variables
  • 4. Body
  • Creating request body
  • 5.Api response to Data type
  1. DATA AND BACKEND
  2. API Calls

Setting up API Calls

PreviousAPI CallsNextCreate API Calls

Last updated 2 months ago

On this page, you will learn the most basic knowledge on various concepts for adding an API call to your project. They are the building blocks of adding an API call. Depending on the API's definition, you may utilize some or all of these concepts to successfully implement the API call in your project.

They are:

  1. Api response to data type

1. Headers

Headers typically carry the metadata associated with an HTTP request or response of an API call. HTTP headers are mainly grouped into two categories:

  • Request headers contain more information about the resource to be fetched or the client requesting the resource.

  • Response headers hold additional information about the response that the server returns.

Passing request headers

Some of the common request headers that you might need while sending a request are:

  • Authorization: Used for authenticating the request.

  • Content-Type: Used while sending a POST/PUT/PATCH request containing a message body.

To pass the request header:

  1. Select the Headers tab and click on the Add Header button.

  2. Inside the input box, enter the key followed by its value (e.g., Content-Length: application/json).

The default Content-Type for any HTTP POST request is application/json, so if your data body is in JSON, you can skip defining the Content-Type.

Passing auth token (as request header)

You might need to add an API that is secured. That means it only gives results if you pass the authorization token (aka auth token) in the header parameter. This is usually done to prevent abuse. Let's see how you can add the auth token.

Passing static auth token

Some services provide you with a static auth token. Such a token never changes until you manually generate the new one.

To pass the static auth token:

  1. Select the Headers tab and click on the Add Header button.

  2. Inside the input box, enter the key such as Authorization followed by its value (e.g., Authorization: Bearer YOUR_TOKEN).

2. Query Parameters

They are optional parameters you can pass with an API call; they help format the response data returned by the server. Usually, they are concatenated at the end of the URL with a question mark (?) as the delimiter and are represented as key-value pairs.

Here, start_date, end_date, and api_key are the query parameters passed to receive the specific data.

3. Variables

Variables allow you to pass the dynamic values from any part of your app to the API calls. Here's when they come in handy:

  • Sending an auth token from your app's state to an API call's request header.

  • Using username and password from TextField widgets in the API call's request body.

  • Including selected dates as query parameters.

  • Changing the base URL with a dynamic URL.

Creating variables

To create variables, select the Variables tab.

Enter its Name, select the appropriate Type and provide the Default Value if you wish to.

Now you can pass values to these variables while triggering the API call from your page. You can set its value from any widget, or any other source.

4. Body

You can send data (as a request body) while calling the API of methods POST, PUT, or PATCH by defining them inside Body. The most common type is JSON format which is the easiest way of passing data inside the body of the request.

Creating request body

Here you'll see creating a request body in the following formats:

1. JSON format

To create a request body in JSON format:

  1. Select the Body tab and set the Body dropdown to JSON.

  2. Define your request body.

5.Api response to Data type

Let's see how to fetch data from the following json below

First you need to configure your Future Builder Widget

1.Choose API in type

2.Choose your Api in Data source

3.Add a relevant widget like text widget in your Future Builder Widget

4Make your Text widget dynamic and use response.body.title to fetch the title of the Json

dot (.) is used for accessing keys present inside the JSON

the whole data of the Json is retrieved through response.body

Similarly we can fetch the other values of the json data by following the above method

An example of an URL with query parameters looks like this ():

Here's another example, this API call has two query parameters. The limit parameter specifies 20 items to load per page, and the offset specifies the number of items to skip. This is called offset-based pagination.

First, If you haven't already, (e.g., username and password variables that will be required to pass values from a login page to the login API call).

NASA Open API
https://api.nasa.gov/neo/rest/v1/feed?start_date=2015-09-07&end_date=2015-09-08&api_key=DEMO_KEY
https://www.breakingbadapi.com/api/characters?limit=20&offset=0
Headers
Query Parameters
Variables
Body
create variables