DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
William Iommi
William Iommi

Posted on

How to YouTubing πŸ„ in Contentful

Welcome back everyoneπŸ˜ƒ Here we are with a new Contentful post. Today we are going to build a new integration using the App Framework 😁.

Intro

Why do we build integrations? My answer, and probably the most common one is ... simplify the job to our final users/customers. The idea to help people in their daily job is satisfying to me.
What we are going to build is very simple and maybe an overkill but I want to demonstrate that even a small application can be useful to speed up your workflow (plus it has been fun to build it πŸ€“).
I'll skip some configuration steps so if you want to know how to setup a local environment you can follow this guide or take a look at my previous series on Contentful.


The Concept

I work in the e-commerce business and the most exciting part is helping customers create and organise their content. In every project, there are always a few components that need to render a video and usually, it is a youtube video.
The most straightforward solution is to create a component with a simple text field in which the user needs to add the code or the embedded URL of the video. Here I see a few problems:

  • Not every final user is technical, so you need to teach how to find the code/url. Maybe you need to write a guide with a few steps too.

  • When you save this code, after a few days/weeks (maybe hours 😒) how can you understand easily which video it is?

  • How many times a bad "copy&paste" leads to a bug opened in your board saying "the component is not working, I can't see the video" πŸ™„.

So the idea here is to build something that:

  • It allows your customer not to leave the CMS interface.
  • Provide a simple UI where you can search and preview your video.
  • Once the video is saved, you give an overview of your selection.

Enough talking...Let's get it done πŸ₯³ πŸš€


YouTube Data API

We are going to use the YouTube Data API, so first, we need a valid API key that will be configured inside our Contentful App on the ConfigScreen location.

At the following link you can find a guide on how to create your key.
For our use case the key is enough. We don't need user authentication since we are retrieving only public data.

The last thing to keep in mind is the Quota usage. We have access to a default 10,000 units per day which should be enough for us, but remember that every single search costs 100 units while every call to retrieve information about the selected video costs 1 + 1 units (one for the video endpoint and the other for the channel endpoint).


Contentful: App Definition

The app definition is very simple. The idea is to extend the short text field type with our integration.

Contentful: App Definition


Contentful: Config Screen

Now we can start with our first custom location. Inside the Config Screen, we can save our API key that would be accessible across our app as an installation parameter.

Contentful: Config Screen


Contentful: Dialog

The Dialog location will be used as a container for our search.
The Modal will be triggered inside your Field location showing to our user a basic input text and a search button.

Contentful: Dialog

As soon as you search for a valid term a grid of results is shown. If more than 50 results are available for your search term a load more cta will be available at the bottom of the grid (every 'load more' click counts as a search so 100 units in our quota usage)

Contentful: Dialog Results

Contentful: Dialog Load More

If you hover with your mouse on a single result, two ctas will appear. The 'preview' cta allows you to see the video before selecting it. The 'select' cta lets you save the video in your field.

Contentful: Dialog Mouse over


Contentful: Field

Now our final location...
The Field lets you select/change/delete a video showing a preview card with some information about your selection.

Contentful: Field - Empty

Contentful: Field - Selected


Conclusion

That's all folks! I hope you enjoyed the content.
Here you can find the repo with the project (https://github.com/williamiommi/contentful--youtube)

Thanks for reading!

See ya πŸ€™

Top comments (0)

🌚 Life is too short to browse without dark mode