How to Build Media Applications With Vidispine Development Toolkit (pt1)

This is the first part of the four-part tutorial for building media application based on the Vidispine 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 blog post series, you will learn to set up and build your first super-simple media application using the Vidispine Development Kit. When you are done you will have the world's simplest media supply chain using the Vidispine API as a backbone, running on your laptop/desktop/server. There will be one post per days posted from today, and you will be able to finish without running out of Vidinet credits.

Getting started Before you can get started with the coding fun you need to have a Vidispine API running somewhere, and obtained a license to the Vidispine Development Kit to get access to the Github repository. The quickest and simplest way to get a Vidispine 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 Vidispine 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, head over to the troubleshooting guide in the support forum.

Setting up a VDT boilerplate In this blog, we will set up part of the Vidispine 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:

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

Your Vidispine 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 Vidispine 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 the next blog post we will configure the development server (http://127.0.0.1:4000/) 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.

LINK:	https://www.vidispine.com/blog/how-to-build-media-applications-with-vi...
	See more stories from vidispine

More from Vidispine