How to build media applications with VidiCore Development Toolkit (PT1)

This is the first part of the four-part tutorial for building media application based on the VidiCore Development Kit. The tutorial is hands-on, with code examples, and will result in a very simple media supply chain, from an import of files to export/transcoding of the same files.

In this series, you will learn to set up and build your first super-simple media application using the VidiCore Development Kit. When you are done you will have the world’s simplest media supply chain using the VidiCore API as a backbone, running on your laptop/desktop/server.

Getting started

Before you can get started with the coding fun you need to have a VidiCore API running somewhere, and obtained a license to the VidiCore Development Kit to get access to the Github repository. The quickest and simplest way to get a VidiCore API is to head over to VidiNet and spin up one yourself. There is a $300 credit applied automatically, which will take you through this tutorial. When the VidiCore API is up you can request a VDT license directly from the VidiNet dashboard. If you want to learn more about our ecosystem we also recommend our VidiNet webinar series.

Preparations

Ok, you have your license as well as access to Github, now we just need to make sure you have everything necessary installed on your computer. You can find the instructions either in the VDT repository or in the Vidispine knowledge base. It is also a good idea to keep the API documentation and the VDT documentation open in a browser window. If you run into trouble, let us know and our support team will help you out or have a look here.

Setting up a VDT Boilerplate

We will set up part of the VidiCore Development Toolkit, more specifically a fully working project boilerplate on Django 2 and Vue.js. It should work for both MacOS and Linux. but there might be a few differences, which we will point out. This guide assumes that you have installed everything pointed out in the getting started section above.

Installing/cloning the VDT Django template

The next part assumes that you have a Github user with access to the VDT parts of the Vidispine Github repository and that you either have set up SSH access using a public key, or have a working username/password.

Create/navigate to the folder where you want to install the project and Django. Then proceed with the steps below:

yarn global add vue-cli
vue-init --clone vidispine/vdt-vue-django-template new-vdt-app

If the cloning process doesn’t progress or you wish to download the repository manually, try this instead:

git clone git@github.com:vidispine/vdt-vue-django-template.git ./vdt-vue-django-template
vue-init ./vdt-vue-django-template new-vdt-app

Setting up the VDT Django template

The next step is to set up the Django VDT template. This will create a new virtual environment and launch the setup script included in the vdt-vue-django-template. The setup script will run and install all the packages and dependencies required to run the application.

cd new-vdt-app
python3 -m venv ~/.virtualenv/app
source ~/.virtualenv/app/bin/activate
source ./setup.sh

Note: If you have trouble with git access, please check the troubleshooting guide in the knowledge base.

Let the installer run and enjoy a nice cup of coffee. During the course of the setup, the system will prompt you for for some information:

• VidiCore API URL, e.g., the one you created to get a VDT license (do not add a trailing “/”)

• Your VidiCore credentials (do not leave them empty)

• The option to create a development server config (you should)

Start the Django server by running the snippet provided by the installer.

python manage.py runserver 127.0.0.1:8000 --settings=app.settings.local

Open a new terminal in the same directory and run:

yarn build
yarn start

The above commands will compile and build minified files that are more easily comprehended by the system.

Open your browser and enter the URL above. If everything works as intended and the setup finished correctly, you should get a notification that Vue and Django are running and that VidiCore is active.

If you can see the above web page you’re done with the first step in this tutorial. In this blog post, we learned how to set up and configure the vdt development environment. That’s it! Now you have a fully functional project boilerplate based on Django 2 and Vue.js and you are ready to continue to the next part in the series.   

In How to build media applications with VidiCore Development Toolkit (PT2), we will configure the development server and our project to implement the vdt-vue-components and then use few of them to list all storages for our instance, list all importable files for the selected storage and import the selected files from that storage.

 Related pages