Introduction
Core Products
Resources
Tutorial: Netflix Watchlist
A quick start guide to Buildable: fast, reliable, and scalable tools built for developers.
⏲ Estimated time to complete this guide: < 10 minutes
In this short guide, we’re going to create a personal Netflix Watchlist. We'll do this by creating a Flow that grabs media (movies or tv show) data from the OMDb API and saves it to a Mongo Database.
This guide assumes that you already have a buildable account setup. New to Buildable? Get access for free here.
Step 1: Connect Your Data Source ✅
Buildable is most impactful when connected to a data source. Currently, you can connect your existing MongoDB instance in under 10 seconds. Support for MySQL and PostgreSQL will be available soon!
Once you grab your MongoDB URI, you’re ready to get started! Need help finding your URI?
- 1.Head over to the Microservices page, and select the "MongoDB" card.
- 2.Select "Self Hosted" and press "Continue".
- 3.Name your Service and paste your Mongo URI.
- 4.Whitelist the following IP addresses to allow Buildable to connect to your DB:
35.245.100.8135.245.232.82
- 5.Click "Test Connection" to make sure everything’s working properly.
- 6.Click "Connect" and you’re good to go!
Connect an existing MongoDB instance to Buildable
Curious to learn more about Services? Read about them in the below section:
Step 2: Create Your Flow ✅
Now that you've installed your first Service, let's learn how to create a Flow.
Creating a Flow can be done easily by clicking the
Create a flow button, located on the upper left-hand side of the Buildable dashboard. A modal will then open where you will be prompted to enter a name and description for your Flow.Fill in the fields with the information below:
- Title: Add media to a personal watchlist
- Description: Query OMDb media data and add save it to a database.
Create a Flow
Curious to learn more about Flows? Learn more about them in the below guide:
Step 3: Add Nodes to Your Flow ✅
Let's start building our Flow!
In this step, we're going to add 2 Nodes. One Node to make a request for the media data from the OMDb API and another Node to save that data to our database.
- 1.Get Media Data 🍿Hover over the Trigger Node and click the
+button that appears below the Node. Select Request Node and populate the fields with the information below.Title: Get Media DataDescription: Make a request to the OMDb APINode name: media
Adding a Request Node
2. Save Media ⬇️
Hover over the Request Node you just added and click the
+ button that appears below the Node. Select the MongoDB service node (the name will be whatever you set in Step 1) and populate the fields with the information below.Title: Save Media
Description: Save the media data to MongoDB
Node name: savedMedia
Leave the next 2 dropdown fields empty.
Adding a MongoDB Service Node
Step 4: Add Code to Your Nodes ✅
Great job, You're almost finished! Now, let's add some code to the Nodes that were just created. Make sure to save each tab once you replace the code.
- 1.Get Media Data 🍿If you double click on the
medianode, you'll expose the code editor and will notice that there are 2 tabs visible. Each node has aninputandrunfunction. Theinputfunction's sole purpose is to pass data to therunfunction. Go ahead and replace both functions with the code below.
Input
Run
1
/**
2
* Lets you select the input for your node
3
*
4
* @param {Params} params
5
* @param {Object} $trigger - This flow's request object
6
* @param {Object} $nodes - Data from above nodes
7
*/
8
const nodeInput = ({ $trigger, $nodes }) => {
9
return {
10
OMDB_API_ENDPOINT: "<https://www.omdbapi.com/>",
11
OMDB_API_KEY: "831027c3",
12
mediaName: $trigger.query.media
13
}
14
}
Copied!
1
const axios = require('axios');
2
3
/**
4
* @param {Run} input
5
*/
6
const run = async (input) => {
7
const url = `${input.OMDB_API_ENDPOINT}?t=${input.mediaName}&apikey=${input.OMDB_API_KEY}`;
8
9
const { data } = await axios.get(url);
10
11
return data;
12
}
Copied!
Adding code to the Request Node
2. Save Media Data 🍿
Now let's do the same thing for the next Node. Double click the Node and replace the
input and run functions with the code below.Input
Run
1
/**
2
* Lets you select the input for your node
3
*
4
* @param {Params} params
5
* @param {Object} $trigger - This flow's request object
6
* @param {Object} $nodes - Data from above nodes
7
*/
8
const nodeInput = ({ $trigger, $nodes }) => {
9
return {
10
media: $nodes.media
11
}
12
}
Copied!
Since all microservice slugs are unique, you'll have to replace the placeholder text
"YOUR_MICROSERVICE_SLUG".You can do so easily thanks to Buildable's powerful AutoComplete feature. Simply delete the text within the quotes and press
CTRL + SPACE to invoke a dropdown of suggestions. Here, you can select your microservice slug. Refer to the GIF below for the example.1
const { call } = require('@buildable/core');
2
3
/**
4
* Lets you asynchronously interact with internal services
5
* Does not have access to external networks
6
*
7
* @param {Run} input
8
*/
9
const run = async (input) => {
10
const response = await call.service(
11
"YOUR_MICROSERVICE_SLUG",
12
"bingeworthy-netflix-shows",
13
"create",
14
input.media
15
);
16
17
return response;
18
}
Copied!
Adding code to the MongoDB Service Node
3. Response ⚡️
Finally, we're going to set the response of the Flow by double clicking on the Trigger Node and replacing the code visible with the snippet below.
1
/**
2
* @param {Params} params
3
* @param {Object} $trigger - This flow's request object
4
* @param {Object} $nodes - Data from above nodes
5
*/
6
const response = ({ $trigger, $nodes }) => {
7
return {
8
status: 200,
9
headers: {},
10
body: {
11
status: "success",
12
message: `${$trigger.query.media} added to watchlist!`,
13
data: $nodes.savedMedia
14
}
15
}
16
}
Copied!
Add code to the Trigger Node to set the Flow's response
Curious to learn more about how to write code in Nodes? Check out the below guide:
Step 5: Deploy! ✅
And just that easily, you're done building the Flow!
Before we can begin to start testing, let's deploy it to production. You can do this by simply pressing the rocket button in the upper left hand side of the canvas.
Once your flow is deployed, the playground will automatically open in a drawer from the right side. Click the
copy button on the upper right hand side to copy the Flow's endpoint URL to your clipboard.
Deploy the Flow!
Curious to learn how deploying a Flow works? Check this out:
Step 6: See Your Flow in Action 👀
Now comes the best part... seeing your hard work in action!
The endpoint URL you copied should look something like this:
1
https://api.buildable.dev/flow/v1/call/live/add-media-to-a-personal-watchlist-bbbd518985
Copied!
Let's test this Flow out by trying to add the Seinfeld TV show to our watchlist database. Since this is a dynamic Flow, you can pass your media name as a query parameter in the URL. You can change Seinfeld to any TV show or movie name if you'd like.
1
[YOUR_COPIED_ENDPOINT_URL]?media=Seinfeld
Copied!
Here's an example of what that might look like:
1
https://api.buildable.dev/flow/v1/call/live/add-media-to-a-personal-watchlist-bbbd518985?media=Seinfeld
Copied!
Open a new tab in your browser and paste your URL in the address bar. You should see a response that looks like this:
1
{
2
"status": "success",
3
"message": "Seinfeld added to watchlist!",
4
"data": {
5
"Title": "Seinfeld",
6
"Year": "1989–1998",
7
"Rated": "TV-PG",
8
"Released": "05 Jul 1989",
9
"Runtime": "22 min",
10
"Genre": "Comedy",
11
"Director": "N/A",
12
"Writer": "Larry David, Jerry Seinfeld",
13
"Actors": "Jerry Seinfeld, Julia Louis-Dreyfus, Michael Richards",
14
"Plot": "The continuing misadventures of neurotic New York City stand-up comedian Jerry Seinfeld and his equally neurotic New York City friends.",
15
"Language": "English",
16
"Country": "United States",
17
"Awards": "Won 10 Primetime Emmys. 74 wins & 186 nominations total",
18
"Poster": "<https://m.media-amazon.com/images/M/MV5BZjZjMzQ2ZmUt[email protected]._V1_SX300.jpg>",
19
"Ratings": [
20
{
21
"Source": "Internet Movie Database",
22
"Value": "8.8/10"
23
}
24
],
25
"Metascore": "N/A",
26
"imdbRating": "8.8",
27
"imdbVotes": "278,380",
28
"imdbID": "tt0098904",
29
"Type": "series",
30
"totalSeasons": "9",
31
"Response": "True",
32
"_id": "619fdffb0c054000126356b2"
33
}
34
}
Copied!
Let's make sure that the data was properly added to the database we connected in Step 1. To do this, navigate back to the Buildable dashboard and visit the Microservices page.
- 1.Click the sync button located on the right side of the Service row.
- 2.Click the
Show detailsbutton to see the data inside the database. - 3.You'll notice that a collection titled
bingeworthy-netflix-showshas been created. - 4.Click on it.
- 5.Here you'll see a record created in the database for Seinfeld!
View data inside the connected MongoDB instance
Awesome 💪
Last modified 2mo ago