Now for this course, we're gonna be using the Portfolio project so as soon as you log in or register then you should see these lists of projects and this will grow, maybe not while you're going through this course but every one of our front-end courses is going to be added here so we can have really nice view into our backend data.

So, in this guide, we're gonna walk through how to use DevCamp Space and how you can manage your data and we're also gonna add a few items to test out exactly how it all works. Now to get back to this list of projects you can do it by either clicking on the Bottega logo or by clicking this little database icon here.

Then if you click the item right next to it, this little graph, you'll see this gives you some additional items such as access to your API key, white list links, which we'll talk about later on in the course in the deployment section, and then the ability to add those.

So let's go back to our list of project, click on Portfolio, and right here you'll see that we have two database tables and we also have some API endpoints.

Now I'm gonna be adding to these as we go through the course, but these are just some basic ones and so this starts to give us a little bit of an introduction to how to work with APIs. So, if you've never worked with them before, they can be a little bit intimidating because we're having to communicate with a completely different server, a server that we have no control over, and we simply need to be able to pass it data in order to get our data back.

So what we're doing here, and I wanna give you the most simplistic view of an API possible with a very basic version. All we're doing is we're going to a URL, the same exact way you would go to a URL such as Google or DevCamp or anything like that, that is what an API is, you start by going to a URL, just like the example ones that we have right here, and then from there, the URL will be on a server, and it will pass data back to us.

Now, it gets a little bit more complicated and we're gonna worry about that later on, for right now I want you to think of it in the most simplistic form possible, which is that our application is going to call a URL like this one right here at the top, this is gonna get us all of our portfolio items, it's gonna call this URL right here, and then it is going to send back our portfolio records. We also have the ability to grab one item and to create them and we're gonna go through this along with our blogs later on.

Let's start off by going to the portfolio items, click on view data right here, and you should start off and not actually have any records but it lists off what the headings are so these are what the table names or I should say the column names are, for our database table, and you can actually add records directly here in DevCamp Space.

So if I wanted to add one here, so I could say this is gonna be my test portfolio item, and then a description just can be anything, URL let's just say it's going to be Google, and then for a category let's say enterprise, this came up as auto-complete for me just 'cause I've used it before but yours probably won't do that, position, I'll say one, and you can also even upload images, so for right now, I'll just upload a few ones.

You can pick out anything from your hard drive, this is just for test purposes, so later on we're going to add our real images and I'll even give you some sample ones if you'd like. So from there click the little plus icon and then what that's gonna do is it's going to upload to the server and now you can see that that record is live right here.

So, this means it's all working. And just for good measure let's go and I'm gonna add another one just really quick one it doesn't even matter what you put in these, just so we have one other example and I'm gonna show you how you can actually see this data the way that your application is going to see it, I'm not gonna upload any images to this one, hit plus.

Now if I come back up and click on the little portfolio tab here if I click on this link, so if I click here, you'll see that this is actually giving us the data in the format that our application is going to use.

If you've never seen this type of format before this is called JSON, it stands for JavaScript Object Notation, and as you can see it kind of looks like a JavaScript Object, we have this list of portfolio items, it has our ID, it has the name, description, URL, the category, the position, and it even has the images. Notice if you click on one of these it'll actually open up one of those images. If you scroll down here, you can see it also has the second item that we brought in.

So I wanted to show this to you one so that you can familiarize yourself with the system, 'cause we're gonna be using this throughout the rest of the course, but also I think it is helpful to have a view into what your data looks like because this is going to give you a very clear path on how to integrate it into the application.

So just as kind of a preview, what we're going to do is we're going to call this same exact URL, the same one that we have right here, and we're going to iterate over this list of portfolio items, you can see even right here that this is using brackets which means that this is an array, it is an array just like the array we've been using for our hard-coded items, and then we're going to loop over this collection of data, we're going to grab the name, the description, URL, we're gonna grab all of those items, and then we're gonna render those onto a screen.

And at a high level, that's really how an API works, now we're gonna talk later on how we can add records, how we can edit, how we can delete and all of that but for right now I wanna give you the most straightforward path to being able to get live data directly from a server into the application and in the next guide, that's what we're gonna start doing.

Resources

• DevCamp Space