What is omdb-search
What is Polymer
Tasks it accomplishes
When added to your project, it makes a request to the OMDb API and generates a collection of the Movie, Series, or Episode information found based on the parameters specified by the user.
The element takes as input two main parameters:
Title: Specifies the movie, series, or episode title to query for.
Result Type: Can be either movie, series, or episode.
It also supports three optional parameters:
Year: Number representing the year in which the movie, series, or episode was released.
Page: Specifies the results-list page number, since OMDb pages search results (10 results per page).
API Version: Specifies the OMDb API version number, for future reference when said API updated. Is optional.
omdb-search is completely declarative, meaning that you can easily use this in your element, and have a full understanding of how it behaves.
Make a project directory for your demo and change directories into it:
mkdir omdb-search-demo && cd omdb-search-demo
Create an index.html
Install or Download
Install the component using bower.
bower install omdb-search --save
Or download the .zip file
In that index.html add the following code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>OMDb Search demo</title> <!-- Load the WebComponents polyfill: --> <script async src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents-lite.js"></script> <!-- Import the omdb-search web component: --> <link rel="import" href="bower_components/omdb-search/omdb-search.html"> <!-- Optionally, import the included omdb-search-theme stylesheet: --> <link rel="import" href="bower_components/omdb-search/omdb-search-theme.html"> </head> <body> <!-- Use the element in your app: --> <h1>Tarzan movies:</h1> <omdb-search q="Tarzan" type="movie" page="1"></omdb-search> </body> </html>
Beneath the metal
This element depends on iron-ajax Polymer element, which exposes network request functionality to the user, and makes dealing with REST APIs a smooth experience. iron-ajax is licensed under BSD-3-Clause.
Available on webcomponents.org
My intentions are to do a full re-write of the element once Polymer (2.x) is officially released. Polymer (2.x) brings features such as:
ES 2016 class syntax for defining components
Backwards compatibility with apps that rely on Polymer (1.x), meaning that developers can still use these new elements with little to no changes
I am currently developing a node web application that is built on top of this element, and plan on releasing soon to showcase what you can achieve by using it. Once it is released, I will link to it on this blog post so you can check it out.
If you are interested in learning more about this element, make sure you checkout the GitHub repository.
If you enjoyed this blog post or found it helpful in any way, make sure to follow me on Twitter to find out when a new one is available.