10.5: Working with APIs in Javascript - p5.js Tutorial

10.5: Working with APIs in Javascript – p5.js Tutorial



this is an exciting moment because in this video I want to look at pulling data from an API and answer the question what is an API how do you sign up to use one and how do you get data from it and how do you visualize something or use that data in your own work so let's just let's just start in a weird sort of way from scratch obviously I kind of planned this somewhat in advance but I'm gonna open up my web browser here okay and I'm gonna go to don't don't look at that page let me go to Google and I'm gonna say I'm looking for looking for I'm looking forward to hearing from you I really am by the way this is sort of an interesting this is totally not I'm not gonna get into a side about how they did this predictive stuff I'm looking for weather data hmm weather calm no let's see I'm looking for open weather data oh there we go so here so in other words you're most likely going to have to start searching on the internet to find the data you want or your friend will tell you about some data this brand this is a nice API to use to start weather data I think is intuitive it's easy to understand like we're most of us are familiar with the weather and it's like group small chunks and you can query it in different ways whether for this city weather for this day I'm not sort of thing historical weather data current weather data so there's a lot of like parameters and ideas here just packages this simple idea the same time it's a little bit of a cliche to say like I'm gonna make a project with weather data cuz it's kind of everybody's first example that said that's what I'm going to use so let's say you found this thing called open weather map and I'm going to click on this and I'm going to see that hmm clearly there's weather here data here there's stuff being visualized and what I'm looking for is something that says API API stands for application programming interface meaning I am writing a program open weather map is a program their programs running on their server my program is ultimately running on my server whether that's just my laptop or some server that I'm going to upload my project to and those two servers need to talk to each other I could draw a diagram with like two circles and things talking each other but you get the idea they need an interface by which to talk to each other what an API is it's a thing for computers to talk to each other rather than the really human beings the thing that's me and you like we should really spend time talking to each other – I think that would be but hopefully computers talking to another can help us talk to each other I don't know think about that and think about that as you make projects that's that's too much of an aside okay so um so look it's it is fall you can see the nice changing colors and leaves it's quite lovely so how do you suddenly use this API so the first thing you want to do is click on it and you can see like okay well there's some information here for example what if I want to get let's say I want to get current weather data let me slide this over a little bit I'm going to click on more and looking here I could see ah there's like all this stuff so here's the thing ultimately the ease of using a particular API is as good as its how easy is going to be is how well-documented it is are there examples is there a video somebody telling you how to use it a lot of api's I'm going to show you this we look at the New York Times r-word Nick have an online tool like a form that you can like sort of play with and test out the API which almost like writes the code for you in a weird sort of way so these are types of things that you might use but for us right now I'm just going to kind of say like oh look at this examples of API calls API to open weather map org slash data / 2.5 weather Q equals London that's good enough for me right now I'm happy to work with the weather data in London so what I can do is I can copy this URL I could actually just click on it and I'm going to open a new tab and I'm going to put it in there and I'm going to hit enter and I'm going to be excited about getting my weather data ah shoot so this is going to happen to you now it used to be open weather map was actually one of the examples that are used to demonstrate because it actually didn't require an API key it would give you the data anyway but this is typically something that you're going to find if a company or an organization or just some person is opening up their data they want you to identify yourself when you're asking for the data so you have to sign up for account and get a special key that way they can track how often are you accessing the data what are using the data for and ultimately this is a paid service so we can use open weather map for free but if you build I don't know what the thresholds are but if you built an application that's like as millions of users that are querying weather data you're going to have to pay a feed open weather map to have all those queries so we could go to this URL which would give us more information about it but ultimately what I'm going to do is go back to here and I'm going to look for us sign up so let's go to sign up and I'm already signed in log out log out I'm going to enter in an email Daniel I'll go signup Schiffman net and I'm going to make up a password should I tell you what my password it wouldn't that be exciting porcupine can all use my I never like what happens to the internet if I just say what my password is technical hiccup I'm now going to log into my open weather map account you're gonna have to create an account I already had an accounts trying to create account the same email address so it's easier if I just sign in to mine when I'm going to hit submit here and once you create an account you're going to see that you have an API key an API key is like this sort of secret thing that identifies you that you can use in your code to make the API query so now I've to ask myself if I copy/paste this API key where do I put it where do I put it this is the path for for querying open weather map how do I get the API key to be associated with that path and this brings up a topic I really do actually need the white board which relates to URL query strings so when you're working with api's you typically need to not just say give me all your weather you need to say things like give me all your weather in this city on this day give me the high temperature give me the low temperature and then you also need to say with this API key how do you do that so if you have some URL like open weather you know map dot org a query string is a thing that comes at the end of the URL now there's different ways of formatting query strings but the most common or one of the more common ones that at least you're going to see with open weather map we'll see some other scenarios of this is excuse me starting with a question mark so the question mark indicates now I'm going to give this URL some parameters some parameters might be things like City equals London so these are now as almost everything system programming name the value pairs city equals London so this is saying give me open weather map at City equals London you can see that's actually already in there now it's not City it's Q equals London because that's what open weather mapped expects Q that's kind of like for query now we need to have a second one in addition to the city I need to give it the API key so multiple multiple queries are strung together with an ampersand so you can say something equals something ampersand something else equals something ampersand something else equals something there's a few little gotchas here like you can't use spaces and certain characters that aren't valid in new yours ways around that through URL encoding and decoding and hopefully I'll mention that or getting some more specifics about that later but this is essentially what we need to practice forming an ageist formula now to see that the API works but then ultimately putting these kinds of query strings together dynamically in our code because what if the user types in the city and then you get that from the user and then you've got to insert what the user put into your API query so over here I can now add something I can say and I happen to know this in advance app ID whoops app ID equals and paste and you can see now I have added into the query string Q equals London and app ID equals my special API key and I hit enter and look at that I now have JSON data look it worked so this is data I can now load into my sketch and visualize based on the API I can I can draw something based on the current weather in London and I'll do that in a moment but first I want to make something this is kind of now we're getting this thing like this is like JSON data and the computers could have no problem reading it but to me this is actually quite hard to dig through looking at it and I would really prefer if I had it nicely formatted with some spaces and some line breaks and some colors and so one thing I recommend doing if you're going to work with data and ap is is installing a Chrome extension that will automatically format the JSON data for you as your like notice I haven't even written any code static like ten minutes into this video just like as I'm starting to figure out how the API works you know I'm just working in the browser so there's a Chrome extension I'm into just Google Chrome extension JSON format or there's lots of them this is one that I particularly like it's the first one that came up I'm going to say add to Chrome and say add extension that's been added and I'm going to close that and I'll get a link to that but now I'm going to hit refresh and you can see now this has actually been formatted and you can see these buttons raw and parse so I can see this is the raw data and this is it parse to look nicely and what's really nice about this is I can you know sort of fold this up so for example I can see that what's actually here this is the sort of root object that has these things in it it's an object that has a coordinate a weather a base a main a wind a cloud I don't you know I have to read the documentation to see what all these things are but for example let's look under main like so by the way these are values I think they're in Kelvin so one thing I didn't specify is the unit of measurement right maybe I want to get these in you know Celsius or in Fahrenheit so let's actually take a minute that's another thing that I need to add to this query string right I probably need to say something like Q equals London and a PI D equals my my query string and units equals Imperial or metric or something like that so if I go back to the whoops if I go back to the API come back come back and we look through the documentation I probably ups we can see here like I could kind of like poke through this and it's probably to give me some information like it's by zip code I'm looking pause this video okay actually let's just be better about this parameters min max format look at this format units format let's click on this units equal there we go so I can see here here's some exam you know this is really this is your life welcome to your life now if you want to do stuff got to look through this stuff and figure it out and I found that units equals metric I assume that's going to give me the information in Celsius let's let's be metric today I feel like being metric so I can add to this particular URL I can say and and units equals metric and I'm going to refresh the page and you can see now I've got the temperature is thirteen point five seven Celsius so this is get doing it this is working better for us so now now I'm just back in that scenario like let's say I want to draw something onto the screen based on the current temperature so all I need to do now I've now that I've worked this out in the browser I have grabbed I have this particular URL I can go into my code I'm going to open up my p5 sketch now and I can say load JSON that long URL got data and now I'm going to do that thing where I write the function got data give it Dave and then just say print line data just to see that it works or to discover that may be what I need is JSON P let's see if it works it worked so this is a case where I don't need JSON P if I didn't see anything down there I'd probably add JSON P and now I might say something like VAR weather and say like when I get the data weather equals data and then here I might say if weather now I can draw some stuff based on that weather so let's pick something that I want to do let's say I want to draw one circle based on the temperature and one circle based on the humidity it's my object main temp or my object name Zumanity so I could say ellipse at 150 comma 100 and then whether main temp as the piece of data that's going to be the size of this particular lips and then I'll draw another one that is just humidity whether main humidity and we can see now that oops and let me I kind of over let me put that it let me make that canvas a little bit bigger and put this at 100 and put this at 300 and we can run this again and we can see look at this this particular circle is being drawn with the temperature and that second circle is being drawn with the humidity so again I've done a completely trivial result it's not particularly interesting I'm only getting the disk exact piece of data from the weather in London so I'm going to stop this video now because I would in the next video I want to look at how I might form a query string how I might allow the user to type in a city and then show the weather back for that city or click on a link or something like that that's what I'll do in the next video but for you for your exercise is sign up for open weather map or another API try to load that data try to see if you need an API key try to draw something based on that data and if you can make it a bit more flexible like you could you know maybe that the API call happens multiple times or different sitting you try that's a little that's a might be a little bit tricky but see what else you can sort of imagine and do with this basic idea and hopefully this was helpful to you with a sort of very basics and beginning steps of starting to work with api's so thanks for thanks for watching and I've got a lot more data and video a data API videos that I intend to make with it I've made a bunch today that you're seeing now and you're watching for the future you'll see the next ones but if you're actually watching this right now the next ones will be coming soon probably next week ok thanks very much and I'm going to hit stop on record goodbye

40 thoughts on “10.5: Working with APIs in Javascript – p5.js Tutorial

  1. I'm not sure what went wrong… I have subscribed and have my own API key, but the code does not work in the online p5 web editor? Any hints would be greatly appreciated!!! <3

    var weather;

    function setup() {
    createCanvas(800, 400);
    loadJSON('http://api.openweathermap.org/data/2.5/weatherq=Columbia%20Falls,%20US&APPID=my-key-here&units=imperial&#39;, gotData);
    }

    function gotData(data) {
    weather = data;
    }

    function draw() {
    background(0);
    if (weather) {
    ellipse(100,100, abs(weather.temp), abs(weather.temp)); // used abs because we have negative temps.
    ellipse(300,100, weather.humidity, weather.humidity);
    }
    }

  2. This is actually useful information. I got so fed up with crash courses and videos "teaching" how to write JavaScript. This is what I'm looking for! I can actually apply everything by building something.

  3. 09:00 I believe Mozilla has the extension built in as the data was organized from the get go.

    Edit: I got stuck. After 3 days and over 10 hours of training, I can't get loadJSON in p5j2 web editor to work when trying to get the info from URL. When i use a file location it works fine. I just can't figure it out. 2 hrs and grrrr!
    Edit 2: It worked! I replaced http with https

  4. Hey Dan, I am a 16 years old french student and I am actually watching all your tutorials (Thank you for doing them). At each video I try to improve what you shown us in it, like for example I made this ISS live tracker : http://www.thomasprojectfolder.fr/ (This website his updated every new project I made so maybe this isn't anymore the ISS live tracker)

  5. Can someone please explain to me how the gotData() function works? He made a var called weather and put data in gotData parameters and said weather = data. I'm having a hard time understanding this. Please help!

  6. What software is he using i've tried processing and p5js with sublime text 3 but so far no success i cant even see if i'm loading the data correctly because i cant see if println is printing.

  7. Hi I would like to be a member of ur channel by joining it and you have mentioned that there will be a live video chat , is it one to one . Waiting for your reply

    Regards
    Ram

  8. Months….months of reading, learning, and applying….nothing. 15 minutes of your beautiful soul gave my silly brain a breakthrough it needed to wrap my head around API calls and showing a response on an HTML page. I appreciate every video you do, each one I learn a little more that help me out tremendously. Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *