Let's Add A Data Source

The Data Source element is how we connect Judo to APIs. This is where Judo starts to become really powerful, because this allows us to make the content in our experiences dynamic. APIs and Data Sources can feel a bit complex at first, but we’re going to break it down nicely in this particular lesson.

In this Lesson we’re going to cover:

• What an API is briefly and
• The Data Source element that we use in Judo to connect to APIs.

print('hello world')

‍

What Is An API?

APIs, or Application Programming Interfaces, allow software or applications to talk to databases or each other.

A commonly used metaphor for portraying an API is a waiter in a restaurant.

A customer sits down at a table. This is the program or app being used by the end-user. The kitchen is our database and servers. And the waiter is our API. Our waiter not only brings orders to the table (our app), but also takes orders back to the kitchen (the database/server).

‍

APIs In Judo

Enough theory, let’s open up a Judo file and see how this relates to a layout.

In Judo we use a Data Source element to connect to an endpoint. We can add a Data Source element from our Insert Menu:

To communicate with APIs, we use what are called Endpoints.

This involves a URL, a method of either GET, POST or PUT, and for a lot of APIs we will need a Header and possibly a Body (only visible on the POST method), but for now let’s just use a very basic API that doesn’t require either of these.

Let’s copy in an endpoint URL that we grabbed from the web and past it into our Data Source URL:

NASA Free API Endpoint (Astronomy Picture of the Day)https://api.nasa.gov/planetary/apod?api_key=zw6pYmhkopNtlnd4MV3Xd3hpY3C1kUuqccVGbghn&date=2021-08-01

We can also append this url to call this endpoint for a particular date like we’ve done at the end here (&date=2021-08-01). This is called a URL parameter, but more on those later in this section.

For now, as soon as we hit enter, we can see that we are getting something back from our endpoint. This is called our Response.

Let’s open it up and see what’s inside:

Our Responses in Judo come back as what’s called JSON - a very handy format for organizing data.In JSON we have what are called key / value pairs. In our NASA APOD response we have a few key / value pairs showing up here such as:

• "date"
• "title"
• "explanation"

Ok that’s good to see and all, but nothing’s actually showing up in our Judo layout yet. We will do this next, but just know:

FYI When we're working with APIs, the first step is to see that we in fact are successfully getting a Response, and then to look through our Response to see if it’s what we actually want to display in our layout.

‍

Map a Data Source Response to Text

Let’s now hook up one of the values from our NASA API Response to a piece of text.

We’ll add a new Text element, making sure it’s nested somewhere below our Data Source.

And now in our text field, we can pull in our data. To do this, we start by typing two curly braces:

Now we can now see the values that are available to us. If we click data dot explanation, our text is now displaying dynamically from our Data Source.

Need To KnowWe always need “data.” before the field we wanna grab, and also remember to close our field with 2 curly braces as well, that is if you’re mapping fields manually.

‍

Map a Data Source Response to an Image

Ok what about images. Let’s add an Image element above our text.

Now, our Response is not going to give us an image directly, but instead the URL of where to find our image. If we choose URL as the source of our image, type our two curly braces, click data.url

We now have a spacey Judo experience about Pluto using a Data Source - nice work.

Next up we’re going to cover Collections and Conditionals.

Collections allow us to Iterate through our Response when we get multiple results. They also help us Filter, Sort and Limit our Response if we only want to render a portion of it.

And then Conditionals help us create layout elements that will only render based on the result of a certain condition.

See you in the next Lesson.

‍