Using the SDKs

There are SDKs available for working with jsonpad.io. Right now we've got a Javascript SDK, which you can use in Node.JS applications or in the browser, and a Realtime SDK which makes it easy to work with realtime updates.

More SDKs for different languages and platforms are on the way!

Server example

Here's an example of how you can use the JavaScript/TypeScript SDK in a Node.js application.

First, install the jsonpad.io SDK NPM package:

npm install @basementuniverse/jsonpad-sdk

Next, here's how to fetch a page of items from a list with the path name "my-list":

12345678910111213

const JSONPad = require('@basementuniverse/jsonpad-sdk').default;

const jsonpad = new JSONPad('<YOUR TOKEN>');

jsonpad.fetchItems('my-list', {
  page: 1,
  limit: 10,
  order: 'createdAt',
  direction: 'desc',
}).then(response => {
  // For now we'll just log the data of each item
  console.log(response.data.map(item => item.data));
});

Check out the full SDK documentation here.

Let's try handling a realtime event when an item is added to the list.

First, install the jsonpad.io Realtime SDK NPM package:

npm install @basementuniverse/jsonpad-realtime-sdk

Then, we can start listening for the item-created event on our list. Note that we need to use the list id instead of the path name.

123456789101112131415161718

const JSONPadRealtime = require('@basementuniverse/jsonpad-realtime-sdk').default;

const jsonpadRealtime = new JSONPadRealtime('<YOUR TOKEN>');

jsonpadRealtime.listen(
  [
    'item-created',
  ],
  [
    '0d04819b-1c08-4557-b2e4-b6e56a54d94c',
  ]
);

jsonpadRealtime.addEventListener('item-created', e => {
  console.log(
    `An item with id ${e.detail.model.id} was created!`
  );
});

Check out the Realtime SDK documentation here.

Browser example

Let's try the same thing as above (fetching a list and listening for items being created in realtime), but this time we'll do it entirely in the browser:

12345678910111213141516171819202122232425262728

<script src="https://cdn.jsdelivr.net/npm/@basementuniverse/jsonpad-sdk@1.0.0/build/jsonpad-sdk.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@basementuniverse/jsonpad-realtime-sdk@1.0.0/build/jsonpad-realtime-sdk.js"></script>
<script>

const jsonpad = new JSONPad.default('<YOUR TOKEN>');

jsonpad.fetchList('test').then(list => {
  console.log(list);
});

const jsonpadRealtime = new JSONPadRealtime.default('<YOUR TOKEN>');

jsonpadRealtime.listen(
  [
    'item-created',
  ],
  [
    '0d04819b-1c08-4557-b2e4-b6e56a54d94c',
  ]
);

jsonpadRealtime.addEventListener('item-created', e => {
  console.log(
    `An item with id ${e.detail.model.id} was created!`
  );
});

</script>

Some things to note:

We're loading the SDKs from a CDN, but you can also download the SDKs and link to them locally if you prefer.
When you use jsonpad.io from the client (like in a browser), your token values will be exposed to anyone who views the source code of your page. Be careful to only use tokens with view permissions.

2024-11-15