Connect API

1. Select Data Type

In the data source editing window, click “Data -> Add Data” in the left menu, and then select the “API” button in the other category.

2. Connect API

A “Connect API” settings dialog will pop up. Enter an API address and click the “Confirm” button. Please note that JSONP-formatted APIs are currently not supported.

2.1 API Interface

Wings Engine supports both GET and POST methods for its API interfaces. The specific settings are as follows:

2.2 API Security Mechanism

When adding an API, you can set a key as shown below:

When making API requests, Wings Engine will automatically append GET parameters ts and sign, where ts is a timestamp in milliseconds, and sign is a string signed with the key. The signature algorithm for sign is as follows:

sign = md5(ts + key)

For example, if the API address is http://test.shanhaibi.com/demo.php?a=1, the key is set to abc123, and the timestamp in milliseconds is 1613906185878, then the sign would be md5(“1613906185878abc123”)=1873f8026797a3f310dd021e145718f0.

The final request sent would be:

http://test.shanhaibi.com/demo.php?a=1&ts=1613906185878&sign=1873f8026797a3f310dd021e145718f0

3. Test Connection

In the lower-left corner of the “Connect API” dialog, there is a “Test Connection” button. This button is used to verify whether the provided parameters can successfully connect to the database. After a successful database connection test, click “Confirm”. If the test fails, please check if the parameter information is entered correctly and repeat the test connection operation.

4. Complete Data Addition

Wings Engine will automatically load the data from the API. Click the “Confirm” button, and the API data source will be successfully added.

Tip: For the API data format, please refer to the following case. The following example only shows the data format requirements and does not mean that it must be written in PHP. You can choose a language you are familiar with.

API Example Link:

https://shanhaibi.oss-cn-beijing.aliyuncs.com/_temp/demo.json

The API is written in PHP. The code is as follows for reference only:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<?php

$data = [
    'table1' => [
        'Field1' => 1,
        'Field2' => 'text1',
        'Field3' => 1.2,
        'Field4' => 0.5,
    ],
    'table2' => [
        [
            'Field5' => 1,
            'Field6' => 1.2,
            'Field7' => "text2",
        ],
        [
            'Field5' => 2,
            'Field6' => 2.2,
            'Field7' => "text3",
        ],
        [
            'Field5' => 5,
            'Field6' => 1.3,
            'Field7' => "text4",
        ],
    ],
];

header("Content-Type:application/json;chartset=uft-8");
echo json_encode($data);

The API code is as follows, for reference only:

API Data and Table Mapping:

The field format for “table1” is as follows:

Add to Wings Engine format, as shown below:

The field format for “table2” is as follows:

Add to Wings Engine format, as shown below:

Tip: The data here can only be viewed, and cannot be modified online. If you need to modify the data, please modify it directly in the API source data. After the modification is completed, please follow the tutorial to refresh the data.