Try the Web API
============================================

.. To have a better experience of learning how to get started with the Hub SDK, please check this [Getting Started Video].

Register as a SyncSign Developer
----------------------------------

`Click here`_ to register for a developer account.

.. _Click here: https://portal.sync-sign.com/#/login/registered

Generate an App Key
---------------------------

.. _SyncSign app: https://portal.sync-sign.com

1. Log in to the `SyncSign app`_.

2. Click on the Settings item in the left navigation bar.

3. Copy the Api key in the Settings page to the clipboard. For example: ``ad0f5999-5669-4101-82e2-ec675028ead5``

Run the Sample App
---------------------------

Try to call the `Web API`_ using the API Key generated in the previous step.

.. _Web API: https://dev.sync-sign.com/webapi


**1. Get the list of devices through api_key.**

You can click on the top left corner of the SyncSign app homepage and get the sn of the hub you are bound to.

- URL: ``https://api.sync-sign.com/v2/key/{api_key}/devices``
- method: GET
- header: without
- body: without

::

    https://api.sync-sign.com/v2/key/ad0f5999-5669-4101-82e2-ec675028ead5/devices

response: ::

    {
        "code": 200,
        "data": [
            {
                "thingName": "MC30AEA4D7D398",
                "userId": "7be74d90-a1f0-11e9-8735-81d695d47ef5",
                "updatedAt": "2019-07-16T01:24:46.368Z",
                "status": "bind",
                "createdAt": "2019-07-16T01:24:46.368Z",
                "region": "us-west-2",
                "sn": "MC30AEA4D7D398"
            }
        ],
        "requestId": "be74370a-a76a-11e9-ba05-a536df2fd428"
    }


**2. Get all the Node associated with a Hub**

You can click on the top left corner of the SyncSign app homepage and get the sn of the hub you are bound to.

- URL: ``/key/{api_key}/devices/{sn}/nodes``
- method: GET
- header: without
- body: without

::

  https://api.sync-sign.com/v2/key/ad0f5999-5669-4101-82e2-ec675028ead5/devices/MC30AEA4D7D398/nodes

response: ::

        {
            "code": 200,
            "data": [
                {
                    "thingName": "MC30AEA4D7D398",
                    "associated": true,
                    "version": 276,
                    "signal": {
                        "nodeToHub": 218,
                        "hubToNode": 174
                    },
                    "updatedAt": "2019-07-16T01:36:13.808Z",
                    "nodeId": "00124b001bbc068e",
                    "createdAt": "2019-07-15T11:48:08.700Z",
                    "panId": 47570,
                    "onlined": true,
                    "battery": 109,
                    "type": "DISPLAY"
                }
            ],
            "requestId": "eea455cd-a76a-11e9-8fe1-17630fb9ea9a"
        }

**3. Render a Node's screen**

You can get the nodeId via the second example.

- URL: ``/key/{api_key}/nodes/{node_id}/renders``
- method: POST
- header: without
- body: ``{"layout": {}}``


::

  https://api.sync-sign.com/v2/key/ad0f5999-5669-4101-82e2-ec675028ead5/nodes/00124b001bbc068e/renders

body: ::

        {
            "layout": {
                "background": {
                    "enableButtonZone": false
                },
                "items": [
                {
                    "type": "TEXT",
                    "data": {
                    "text": "Hello World!",
                    "id": "NOTE_AVAILABLE",
                    "font": "YANONE_KAFFEESATZ_44_B",
                    "text-align": "CENTER",
                    "block": {
                        "x": 72,
                        "y": 116,
                        "w": 256,
                        "h": 56
                        }
                    }
                },
                {
                    "type": "RECTANGLE",
                    "data": {
                    "fillColor": "DASH",
                    "strokeColor": "BLACK",
                    "strokeThickness": 2,
                    "block": {
                        "x": 72,
                        "y": 168,
                        "w": 256,
                        "h": 4
                        }
                    }
                },
                {
                    "type": "RECTANGLE",
                    "data": {
                    "fillColor": "DASH",
                    "strokeColor": "BLACK",
                    "strokeThickness": 2,
                    "block": {
                        "x": 72,
                        "y": 118,
                        "w": 256,
                        "h": 4
                    }
                    }
                },
                {
                    "type": "POLL_RATE",
                    "data": {
                    "rate": 10000
                    }
                }]
            }
        }

response: ::

    {
        "code": 200,
        "data": {
            "renderId": "fe3a0f56-682f-46e7-9269-a2153e2c284f",
            "nodeId": "00124b001bbc068e",
            "layout": {
                "background": {
                    "enableButtonZone": false
                },
                "items": [
                {
                    "type": "TEXT",
                    "data": {
                        "text": "Hello World!",
                        "id": "NOTE_AVAILABLE",
                        "font": "YANONE_KAFFEESATZ_44_B",
                        "text-align": "CENTER",
                        "block": {
                            "x": 72,
                            "y": 116,
                            "w": 256,
                            "h": 56
                        }
                    }
                },
                {
                    "type": "RECTANGLE",
                    "data": {
                        "fillColor": "DASH",
                        "strokeColor": "BLACK",
                        "strokeThickness": 2,
                        "block": {
                            "x": 72,
                            "y": 168,
                            "w": 256,
                            "h": 4
                        }
                    }
                },
                {
                    "type": "RECTANGLE",
                    "data": {
                        "fillColor": "DASH",
                        "strokeColor": "BLACK",
                        "strokeThickness": 2,
                        "block": {
                            "x": 72,
                            "y": 118,
                            "w": 256,
                            "h": 4
                        }
                    }
                },
                {
                    "type": "POLL_RATE",
                    "data": {
                        "rate": 10000
                    }
                }]
            },
            "isRendered": false,
            "createdAt": "2019-07-16T02:26:52.193Z",
            "updatedAt": "2019-07-16T02:26:52.193Z",
            "expires": "2019-07-23T02:26:52.000Z"
        },
        "requestId": "2ba38373-a771-11e9-b38e-b51f29d39657"
    }