You can access the full course here: Data-Driven Development with External APIs
Table of contents
Part 1
What is an API?
An API (application programming interface) allows us to access a specific data set or functions of an application. For example, Google has a translate API where you can send over text, have it translated and then returned in another language. All those sites you can login with your Google account are accessing the Google API too. Most large sites like Google, Facebook, Twitter, etc have APIs to allow developers to connect to / access information outside of the source. For us, we’ll be accessing an API that will return fields from a data base, depending on the query we include.
Getting an API for our App
For this course, we’re going to be using the Queensland Government Data website. This is a site that contains thousands of data sets and APIs we can access. We’ll be using the Upcoming fireworks displays API. This is a database of upcoming firework displays in Queensland. You can access it here.
What we want to do on the site is click on the API.
If we want to see the data laid out, we can click on the Visualization Preview button.
Here, we can see the data of the data base. This isn’t how we’re going to be getting it though – this is just a visual preview.
Back at the previous page, we can click on the Data API button to access the API url.
This window shows a number of example queries. The one we want to copy is the first 5 results url. This will access the database and return the first 5 results. The one we’re going to be using in Unity is the &q= which we can send over text to return results containing such text.
Paste the url in a new tab and we’ll see a large amount of text. This is a JSON file. JSON is a way we can structure data inside of objects. This is something we can easily read in Unity and take the data we need.
To see a more understandable and formatted version of the JSON file, we can go to jsonformatter.curiousconcept.com and paste in the url. As you can see here, we have all the objects and fields laid out in an easily readable format.
In the next lesson we’ll be testing out the API in Postman.
Part 2
Postman API Development Environment
Postman is an API development environment. It allows us to test out APIs and see the returning results. To download Postman, you can go here.
Once you download Postman and open it up, we can start creating our request. Inside of the url field, paste the url we got last lesson. Don’t include the $q= as that’s a parameter we’re going to be adding in later. So all we need is the url with the resourc id (relates to the data set we’re accessing). With that done, let’s click on the Send button.
At the bottom of the screen, you should now see the output JSON file.
Alright, we can access all the results – but what if we want to filter it by a certain suburb or post code? Well we can add the q parameter (stands for query). Then as the value, we’ll make that toowoomba (a city in Queensland). This will search the database and return all results containing the word toowoomba.
If we hit Send, we’ll get a JSON file filtered through our query. As you can see we only have records that are in Toowoomba.
In the next lesson, we’ll begin setting up our Unity project.
Transcript 1
Hey, everyone, my name’s Daniel Buckley, and I will be your instructor for this course. So what are we gonna be making? Well, we’re gonna be creating an app that accesses an API to display information to the user onscreen. Specifically, this is gonna be an app that shows upcoming firework displays in the Queensland area. Let’s have a look at this app.
Here in Unity, I have the app open here, and we can search by suburb. If we just, if we don’t enter in anything, it just appears with all the suburbs here. And yeah, we can see that the locations, as well as the date, that they’ll be happening. So for example, we can click on one here, and it will show us information. Starts at 4:45 p.m., it’s a public event, and it’s close proximity, and we also have an address, as well. And as you can see, there’s also a little firework effect going on here. We have different colored particles going off.
We can also filter these selections by – let’s just say we want to have all the firework events that are happening within the next 24 hours. We can click on Today, and that’ll show, within the next 24 hours, the events. You can click on Week to show them within the next seven days. And then we can go Month as well to show within the next month, as well as All. So yeah, this is gonna be an app, very versatile.
This is just one example of what you can do with it. You can do many more sorts of things with APIs, as the database we’re gonna be accessing has hundreds -it has thousands of different data sets you can access.
So what are some of the things you’ll be learning during this course? Well, first of all, we’re gonna be learning about how to connect to an API. We’re gonna be using the Queensland government data sets to access their APIs, as they have a wide range of different information available. We’ll be testing this out, then, in Postman, which is an API development environment that you can download. You can easily enter in APIs, enter in parameters, and then get the result in JSON files to easily test it out before opening Unity. And when we do open Unity, we’re gonna be using the Unity’s UI system to create a very dynamic UI system for our app.
I’ll show you back in the editor here. What we’re able to do is, right now, it is in the nine by 16 aspect ratio. But what we can do as well is pretty much have this work in any aspect ratio. Here, I’ll go to 16 by nine, and as you can see, the UI stretches and warps to the respective size of the screen. We can go back to phone, we can go back, we can try all these different aspect ratios, they all work.
So we’ll be using the Unity’s UI system, more specifically, the anchoring and positioning of the UI elements as well as different layout groups. So we’ll be goin’ over a wide range of different UI aspects and components during this course. We’ll also be using Render textures, which are textures that a camera can project onto to display whatever it’s looking at. In our case, we’ll be displaying the different firework particles that we’ll have the camera aiming at, and then have that render to a texture which will then appear on top of the UI.
Zenva is an online learning academy with over 400,000 students. We feature a wide range of courses for people who are just starting out or for people who just wanna learn something they don’t already know. The course is also very versatile, allowing you to watch them whenever or however you want as well as the accompanying lesson summaries. You can choose to watch lessons or read them, or even both. So let’s get started on our project.
Transcript 2
Hey everyone. In this lesson, we’re gonna be figuring out what sort of data we want to have inside of our app, and for that we’re gonna go to the Queensland government website which is a data set website with a lot of free data sets. They have around 2,000 different data sets here, all with different sorts of information but the one we want to do, and the one we’re gonna be designing our app around, is the upcoming firework displays. This is just a list of all the upcoming firework displays, where they are, what time and the sort of types of the actual fireworks.
So to get here we can just go data.qld.gov.au/dataset/fireworks and this will take you to this page here. Now to access the API, we need to click here where it says data and resources. We just click on the API here and this will open up this screen here, but you may be thinking to yourself, what is an API?
Well an API is a framework that allows us to connect to a website or connect to a program application or something that we can then return information from it. And in this sense, we are accessing the Queensland government website, their data website, and we are accessing the upcoming firework displays information. There’s APIs for many different things. There’s APIs for many different websites and services have APIs that we can access.
For example, a lot of bus networks would have APIs so that, if you want, you could build an app around that to access the location data and timetables of buses and lots of other websites where it allows you to sort of access their features outside of their website. For example, Google has this, Twitter has this, Facebook has this. There’s many APIs for them that allow you to access their website. For YouTube, you can modify your channel settings and video settings and account settings and all that. That’s not directly on their website, that is done through an API.
We can actually see all the data right now if we just click here on the visualization preview button. This will open up a page with a table similar to sort of, the sort of thing you’d see in Excel. It has all the data listed out for us with all these different fields with ID, display date, the times, the suburb, postcode, display address, the event type, and the display type, so most of this information we’ll be using inside of our app. We’ll be able to display to the user all these different fields and even sort by the display date and suburb.
All right, now, to access the API, ’cause that wasn’t really the API, that was just the visualization side so to access it, we can just click here on data API. Now if you want, you can download this as a CSU file, which is like that table you just saw, but we want the live and updated version of it so whenever I update, we’ll have -constantly have the newest firework displays displayed to us.
So click on the data API button here and this will open up this little window here. This shows us the API here with a couple of query examples. The first one here has the API but it gets the fields (gets a limit of five fields) and this sorts by date so it will get the five most recent fields. Down here we have another one where you can search for keywords and this one searches for a query of Jones. This is just a common theme on the website that it has to show as an example, but for our example we’ll be using this one and this will allow us to search and receive data for a suburb, for example. We can enter in suburb name and that will return all the results with a suburb.
Now let’s just say we click on the first five results one here, this will open up in a new page where it sends the API and it returns this. Now this is an unformatted JSON file. Now a JSON file is basically a way to display data. It has objects inside of those, in these brackets it has the information. Now it’s kind of hard to read here because we see the information, we can see places like Tamborine, event type, we can see some addresses, some times, but it doesn’t really have it in a format that is easy for us to read. So something we can do is convert this to a formatted version that allows us to actually see the data in objects, and a lot more structured in a way.
So to do that we can copy all of this and then we can go to a JSON formatter website, which there’s many of these on the internet. I just went to this one up here, jsonformatter.curiousconcept.com and in here we can paste the raw data and click process. This will then give us a nice looking text here that shows us all of our data.
We have these little containers that we can open and close and the one we want to look at is records, because records is all the stuff we’ll be reading. It has each record here. You have your ID, your display date, your time, the same stuff as that table we just saw. So this if the format that we’ll be using it in (inside this JSON object), and good thing about Unity is that it already has a built-in function and built-in utility to actually get these files and deserialize them (which we’ll be going over later on but yeah, that is the data we’ll be needing).
What we need for later on in the next lesson and in Unity is pretty much just this line of text here: this URL so you got the website name, action slash data store search, and we just want the resource ID of this long text here, and we want it just before the at, or the and limit equals five, so up to the seventh B here. And that’s pretty much all we need for that.
So yeah, I’ll see you in the next lesson where we’ll actually be testing this out to see if this works in a external source such as Postman.
Transcript 3
Welcome back, everyone. Before we hop on Unity and create our app, we wanna actually test out the API and be able to visualize the actual JSON file that we get. So, to do this, we’re gonna be using Postman. Postman is an API development environment, which allows us to connect to an API and get a result from it, basically.
So, what you wanna do, is you wanna go to getpostman.com. You then want to sign up or sign in if you’ve already got an account, and then scroll down to the bottom of the page, where it has the downloads link here, under resources. Click that, and then it will take you to the download page. Just download the version of Postman that is for your operating system. If you’re on Windows, it’s right here, Mac, and Linux. And once that’s done, you should then be able to install Postman and launch it up.
Now, this is what it looks like inside of the Postman app, and what we wanna do is in here, where it says enter, request URL, enter in that URL that we copied last lesson. If you remember, it was the, if we click on Data API here on the firework displays, we can just copy the API here up to the limit. So pretty much we want it just the resource ID at the end of the URL. So once you got that, and go here, in the inside of the enter request URL, we can paste that in and -oh, you already have that resource ID popped up here. Okay and we want for another key here. Now these are the parameters, so these are the little parameters here (after when you see the question mark), that’s the start of the parameters, and then every parameter from then is separated by a & sign,
Okay, so what we want our, we actually don’t need another key at the moment, because I’ll just show you how we get all the results first of all. So lets click on send, and as you can see we have a JSON file here, and this is a result of all the upcoming firework displays. I think there is probably around, yeah looks like there might be twenty or so at the moment. So get it all here, and inside of the JSON file here, we have our results container. And inside of the result container we have the records. Now the records are what we are looking for, and each record has an ID, a display date, a time, a suburb, a postcode, a display address, an event type, and a display type.
And we’ll be using all that information inside of the app to display to the user, and even allow them to filter by the date. If they wanna filter by events that are coming up today, during the week or during the month. So yeah, we’ll have all that. But what if we wanna search by a suburb? Okay, so lets just say here we wanna search for all events that are in Toowoomba for example. So we’d go up here and inside of the key, we want to enter in the key, the key name of q, which stands for query and the value for that we can enter in Toowoomba. Let’s click on send, and our returning events are three this time. We have three records, and as you can see, they’re all from Toowoomba.
And yeah, that’s all for this lesson. In the next lesson we’ll start to hop into Unity and start creating our app. So yeah, I’ll see you all then.
Interested in continuing? Check out the full Data-Driven Development with External APIs course, which is part of our EdTech Mini-Degree.
