JSON APIs Overview

[00:00:00]
>> We are gonna start talking to an API. API stands for application programming interface, but everyone just says API. The word API is kinda overloaded in programming. So the way that we're gonna be talking about API, when I say API for, like the rest of this course, what I mean is that there is a server somewhere else that you and I are gonna be talking to.

[00:00:23]
That is the kind of API that we're going to talk about. It can be confusing for people new to programming that people use API to mean other things as well. So, for example, if I have a library that you install on your computer that I wrote and it's a dog object that has two methods on it, eat and bark.

[00:00:44]
You could conceivably call eat and bark the API of the library that I wrote, which has nothing to do about talking with a server. It's actually just the name of the methods on the object that I wrote, you could call that the API of that as well. We're not talking about that.

[00:01:01]
So, in other words, I'm just trying to warn you that API is an overloaded term. You just have to be aware of that. So, again, rest of the course API means talking to a server, or the backend, right? You can use the term API and backend basically interchangeably for what we're gonna do here.

[00:01:21]
Okay? So let's fathom for a second that you are now writing a weather application, right? That's some nice page that someone opens up and they can check the weather for the day. But you you want your user to be able to check multiple different zip codes right? Cuz like today I'm in Minneapolis and it's lovely weather today, thankfully.

[00:01:45]
But you could conceive that I'm gonna go home soon, back to Seattle. I would want to check the weather in Seattle. I don't wanna refresh the page, right? I just wanna put in the zip code and I wanna get them the new weather. What is the workflow if you're coding that?

[00:02:00]
Well, the user navigates your page and we'll have some default zip code, right? It might come down with already like one set of weather pre-populated. Let's say they type in 98109 that is a zip code in Seattle, in case you're curious, not the one that I live in, I was very careful about that.

[00:02:15]
[LAUGH] Your app is going to then make a call to something like api.com or api.example.com, and ask for the weather and then it'll ask for some zip code, right? And the response will be like, it's 75 degrees Fahrenheit, or something like that. Your app will then decode that using JSON.parse.

[00:02:37]
And now you have an object of the current weather, you can use that to do whatever updating in your DOM that you need to do. That's it, I mean that's the whole process that you and I are gonna be walking through. So a few things, who makes the API?

[00:02:54]
It depends, right? Are you going be using some sort of service like if we were doing this, we could use like Dark Sky which is a API for weather. I think Apple owns them now. Apple bought one of them, I think they bought, I don't know maybe it was Weather Underground, anyway, that doesn't matter [LAUGH].

[00:03:14]
So it could be some sort of service that you're calling out to. It could be like your backend team at your job. It could be someone, right? Someone writes the API. There's a server somewhere that you're making a request to. There's a bunch of them that are publicly available for free.

[00:03:28]
I left you a link here if you go to this is written by Todd. Todd is a good guy. He just put in here a bunch of publicly available API's that you can go mess around with. For music, there's the famous Star Wars API, right? People use that for a lot of example apps.

[00:03:50]
All sorts of fun stuff. I'll let you poke around that. Today we're going to be using one called dog.ceo, which objectively is the greatest name for a website I've ever conceived of. It's just an API to get dog pictures, which is just lovely, right? I think that's what we need in our lives right now.

[00:04:10]
All right, so if you call this particular API dog.ceo/api/breads/image.random, it just gives you a random picture of some lovely dog, right? And you can see here, this is actually the JSON that it's sending back to you, right? The message and the status. We can actually just open this directly in our browser here.

[00:04:31]
Not with that, right? And you can see here, that's probably pretty hard to see. This is the JSON that we're getting back. Now yours probably looks something like this. I have an extension installed. Actually this meant it might be built into Firefox now, maybe. Anyway, if it's not looking like this, if it looks like this, you can just Google like, Chrome or Firefox extension for JSON.

[00:05:02]
It's like a pretty printer or something like that, and it will make it look like this. Yeah, this is the message I'm getting back. If I do raw data, this is actually what it's sending, right? Which is a message. And yeah, this is JSON, right? This looks really familiar.

[00:05:16]
This is literally what you and I were just looking at. And then I have a little extension here that prints it out nicely for me. And if I refresh the page again, cuz it's random, notice that the message keeps changing. And these are just JPEGs, so if I click on this and open it, it's just a dog.

[00:05:42]
Okay, so you and I are gonna mess around with this API a little, right? You can imagine that maybe you're building a different application for fun apps, so that someone can open it and see a new picture of the dog every single day, which is kinda fun. Okay, let's talk a little bit about this portion right here.

[00:06:04]
The question mark zip equals this. So this first part, this is a normal URL, right? We're very used to seeing these. I go to google.com/flights or something like that, right? That's an address that our computer goes through to try and get information back. This is called a query string here, this is basically adding additional information.

[00:06:27]
So in this particular case, if I have some sort of weather API, right? I can also provide it with the zip code immediately so that when the page loads, I get the zip code in particular that I'm looking for. So it's just basically passing information additionally to the server so that you can get some sort of specific outcome out of it.

[00:06:47]
It's a variable that the browser's able to give to the webpage. And it's just key value pairs. So if I have, I have it here, right? It's just key values and then all the different key values are separated by ampersands. So if I wanted to say, give me zip 98109 and I want to see tomorrow you say &day=tomorrow.

[00:07:14]
So you might ask me, what variables can you send? You can send whatever variables you want. It depends on whatever your server expects, right? So in this particular case, a weather API would make sense to send zip codes. But if I want to ask for a specific breed from dog.ceo, then it might be called breed equals blah.

[00:07:31]
It just depends on whatever your server expects.