# Send and Receive data via external API integrations

Work with API methods of your business systems or with third party services. Mobsted supports JSon RestAPI.

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

#### CREATE API INTEGRATION

In this example we will use third party tools to get the weather info for any city and display this data in the app using [apixu.com](https://kb.mobsted.com/article/apixu.com) service.

1. CREATE API CALL TEMPLATE
2. CREATE API CALL BASED OPERATION
3. DISPLAY DATA ON APP SCREEN
4. CHECK RESULT

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

**CREATE API CALL TEMPLATE**

1. Go to the **API providers** section from Home Screen of the platform
2. Click **Add API Provider**
3. Fill in it's **Name**: *Weather Provider 1* and **Base URL**: *<https://api.apixu.com>*
4. Click **Save** **API Provider** and then click **Create New API Provider Method**
5. Name the fields:
   * **Api Provider Method Name**: *Weather method 1*
   * **Method**: GET
   * **Endpoint URL**: */v1/current.json*
   * **Consumes and Produces Type**: *application/json*
6. Click **Add parameters** at the bottom of the pop up and fill in the fields:
   * **Name**: *key*
   * **In**: *query*
   * **Type**: *string*
   * Сheck the box **Required**
   * Click **Save Parameter**
7. Add another parameter:
   * **Name**: *q*
   * **In**: *query*
   * **Type**: *string*
   * **Description**: *City*
   * Сheck the box **Required**
   * Click **Save** **Parameter** and then **Save API Provider Method**
   * Click **Close.**

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/xy951dk783/1559999639480/image.png)

\_\_**\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_**

**CREATE API CALL BASED OPERATION**

1. Click **Operations** on the Home Screen of the platform
2. Click **Add Operation**
3. Open **Weather Provider** **1** drop down on the left, select **Weather Method 1** that we created on the previous step
4. Fill in the field: **Operation Name**: *Weather Operation 1*
5. In the **EXECUTION** section fill in the parameters: for **key** use ***80941dd14d6f46b7b2d122927192802***
6. **q**: fill in with *#Backendname:city#*
7. Click **Save operation.**

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

**DISPLAY THE DATA ON THE APP SCREEN**

1. Navigate to **Constructor**
2. Drag and Drop [Text input](https://kb.mobsted.com/article/ap8iv7mdhw-construstor-elements-build-app) element, fill in it's properties:
   * **Backendname**:*city*
   * **Default Value**: *London*
3. Drag and Drop [Button](https://kb.mobsted.com/article/ap8iv7mdhw-construstor-elements-build-app) element, fill in it's properties:
   * **Caption Button**: Check #Backendname:city#
4. Click **Action** tab, open **Add new action** drop down and select **Execute Operation**
5. Open **Add operation** drop down, select **Weather Operation 1** and click **Save**
6. Drag and Drop **Text** element, where we print the result of the Weather Operation
7. &#x20;Fill in **Text** field: *#Backendname:city# Weather: #Operation:weather Operation 1:Response:Result\[0]:current.temp\_c#*
8. Click **Save Screen.**

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

**CHECK RESULT**

Click the **Preview** button to launch the app from the current screen to check its working.

<div align="left"><img src="https://877328951-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlgISQGimMcecefzSf2%2F-LoZ5WCPBZwyfsvBga3E%2F-LoZ8qx3H12WeKdrzPPu%2FAPI3.png?alt=media&#x26;token=5070fa16-45f1-437d-adff-c1d61175ca5a" alt=""></div>

<div align="left"><img src="https://877328951-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlgISQGimMcecefzSf2%2F-LoZ5WCPBZwyfsvBga3E%2F-LoZ9Du3dOYXMMICzJFv%2FAPI2.png?alt=media&#x26;token=833cea79-191c-48d2-aa22-3bbf15cab2a2" alt=""></div>

{% hint style="info" %}
You can find the set up on screen - **12** **External API Call Example** in **Demo App** in your profile.
{% endhint %}

#### MENTIONED ARTICLES

* [Constructor elements](https://kb.mobsted.com/article/ap8iv7mdhw-construstor-elements-build-app)

#### RECOMMENDED ARTICLES

* [Automate with triggers](https://kb.mobsted.com/article/hflsw49s60-automating-business-pro)