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: 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: 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.
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)
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: Field
Now our final location...
The Field lets you select/change/delete a video showing a preview card with some information about your selection.
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)