Integrating Verasity with DADI

Verasity is developing a next-generation video sharing platform. Their platform will empower creators and improve the experience of watching video online.

In this article, we’ll show you how to build a simple application using DADI web services to manage and display a list of Verasity videos.

We’ll use DADI API as the data store, DADI Web for the templating and DADI Publish as the editorial interface.

Before continuing, make sure to clone the accompanying GitHub repository and follow the instructions to get the applications up and running.

🔗Part 1: Storing videos

DADI API is the brain of the operation. It’s the data store where we persist all the videos and their metadata.

Data is divided into collections (equivalent to tables in the relational database world). The following JSON file defines the schema for our videos collection, comprising fields for the video URL, thumbnail image and a few other properties.

{
  "fields": {
    "title": {
      "type": "String",
      "required": true,
      "label": "Video title",
      "publish": {
        "placement": "main",
        "display": {
          "list": true,
          "edit": true
        }
      }
    },
    "url": {
      "type": "String",
      "required": true,
      "label": "Video URL",
      "publish": {
        "placement": "main",
        "display": {
          "list": true,
          "edit": true
        }
      }
    },
    "allowFullScreen": {
      "type": "Boolean",
      "label": "Allow full screen player",
      "publish": {
        "placement": "sidebar",
        "display": {
          "list": true,
          "edit": true
        }
      }
    },
    "thumbnail": {
      "type": "Reference",
      "label": "Thumbnail image",
      "message": "jpg or png",
      "required": false,
      "settings": {
        "collection": "mediaStore"
      },
      "publish": {
        "subType": "Image",
        "placement": "sidebar",
        "display": {
          "list": false,
          "edit": true
        }
      }
    }
  },
  "settings": {
    "compose": true,
    "displayName": "Videos",
    "cache": false,
    "count": 40,
    "storeRevisions": false
  }
}

With this collection in place, you can create a new video simply by making a POST request to the videos collection.

POST /1.0/verasity/videos HTTP/1.1
Content-Type: application/json
Authorization: Bearer <YOUR-ACCESS-TOKEN>

{
  "title": "Building a RESTful API with DADI"
}

HTTP/1.1 200 OK
Content-Type: application/json
content-length: 12639
Date: Mon, 18 Sep 2017 14:05:44 GMT
Connection: close

{
  "results": [
    {
      "_id": "5ae1b6464e0b766dd17dbab9"
      "_apiVersion": "1.0",
      "_createdAt": 1511875141,
      "_createdBy": "your-client-id",
      "_version": 1,
      "title": "Building a RESTful API with DADI"
    }
  ]
}

API automatically gives us a full set of RESTful endpoints to access our data, like GET /1.0/verasity/videos to get a list of all the videos or GET /1.0/verasity/videos/{ID} to get a specific video by ID.

🔗Part 2: Managing videos

Having our data available in a machine-readable format (JSON) distributed via a RESTful API is incredibly powerful, as its technology-agnostic nature makes it compatible with virtually any type of application. To make the experience equally pleasant for humans, having a visual interface from where people can easily edit and create content is fundamental.

For this, we’ll use Publish, a content management interface that integrates seamlessly with API. Simply type npm start to boot the application and visit http://localhost:3030 in your browser.

On the top menu, which shows all the available collections, navigate to Videos and hit Create new to add a new video document.

Every new document you create or any change you make to existing ones are made available instantly to consumers via the RESTful API endpoints.

🔗Part 3: Displaying videos

Finally, we need to display our content. For this we’ll use Web, our schemaless templating layer. It supports any template engine, but for this example we’ll use Dust.js.

With the Web application running from the demo repository, open http://localhost:3080 in your browser to see a list of all the videos you have created. When you click on a video, it will be loaded on the player at the top.

The workspace/pages directory contains the templates and all metadata associated with each page. If you want to edit the markup for the video landing page, edit index.dust and refresh your browser window.

🔗Wrapping up

This is a simple demonstration to show how easy it is to create an application that uses a combination of DADI web services, and how to shape them to bring your idea to life – in this case, a repository of Verasity videos.

If you’re looking for more information about the web services, our documentation site is the best place to get started.