BrightTube: Build a searchable video player app in minutes

It was the week before TechCrunch Disrupt SF and we had nothing to demo. We set out to show the powerful capabilities of the BrightWork platform. On Monday morning exactly one week before the event we huddled in a conference room and threw out dozens of ideas for a compelling demo app. By the end of the day we had settled on a "YouTube" like video player clone. The player would support uploading, playback, tagging and searching videos.

TechCrunch

Tuesday we sketched up some wireframes and finished some outstanding development tasks that needed to be completed before we started to code "BrightTube". I was starting to get nervous. Rob and I were set to fly out to TechCrunch on Sunday afternoon and we still didn't have a demo, let alone a video recording of the demo to playback on a continuous loop.

worried

By the end of Wednesday, Rob had a non functioning prototype of the user interface. Within a couple of minutes we built and deployed the BrightWork backend API for "BrightTube". Our demo app was functional.

On Thursday, I spent the day writing up a script, and working out how the demo video would be produced. By Thursday evening I had purchased ScreenFlow (the best screencast software) and recorded the raw footage. Keep in mind that I had never really recorded a screencast let alone used ScreenFlow.

I spent all morning Friday watching ScreenFlow tutorials and playing with the app. By the end of the day I had the first draft of our demo video and was feeling pretty confident. We made a couple tweaks over the weekend and finally landed on the video below.

How did we do it?

It turns out this type of app is super simple and the backend required zero custom coding. All we needed was a RESTful API with a couple of models video & tag, and the ability to upload and store videos for playback (object storage). As it turns out these are all capabilities that come with BrightWork out of the box.

We were able to build, deploy and hookup or backend API in just a few minutes. I have outlined the steps and provided some sample code below.

Build our manifest.yaml

For this we needed to create the video and tag data models with a many to many relationship. So that a video can have many tags and a tag can have many videos.

name: BrightTube  
models:  
  video:
    attributes:
      name: string
      url: string
      type: string
      tags:
        collection: 'tag'
        via: 'videos'
        dominant: true
  tag:
    attributes:
      name: string
      videos:
        collection: video
        via: 'tags'

Next we enable video uploading

To enable uploading all we have to do is provide the upload route to our Angular FileUploader control. As you can see in the snippet below we just need to configure it to hit the url "http://appname.bwapps.io/api/appname/storage".

upload.js

// TODO: (1) Enable upload video to object storage
var uploader = $scope.uploader = new FileUploader({  
      url: $apiConfig.appUrl +  '/api/brighttube/storage',
      alias: 'object',
      headers: {
        apikey: $apiConfig.apiKey,
        name: ''
      },
      removeAfterUpload: false,
      method: 'POST',
      autoUpload: true
});

* all we changed was the URL property

Save the video model

Next we add code to save the video model after the file has been uploaded. As you can see in the codes snippet below all we need to do is call the create method on our model. All of our models are accessible via the AngularJS SDK via $bw.models.

upload.js

var saveVideoData = function(videoData){

      //TODO: (2): enable saving video
      return $bw.models.video.create(videoData).then(function(newVideo){
        console.log('VIDEO Added to DB: ', newVideo);
        return newVideo;
      });
};

Find out more

We went threw a few more steps to enable loading the videos, saving the tags and searching. You can find the complete working example and code at the following location.

Demo App Source Code