Send and Receive data via external API integrations

Use any external & internal API

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.comarrow-up-right 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.

______________________________________

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 inputarrow-up-right element, fill in it's properties:

    • Backendname:city

    • Default Value: London

  3. Drag and Drop Buttonarrow-up-right 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. 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.

circle-info

You can find the set up on screen - 12 External API Call Example in Demo App in your profile.

MENTIONED ARTICLES

Last updated

Was this helpful?