Consuming our API with client-side code

- [Instructor] In order to keep things in scope for this course we're going to do all our client side development in a single HTML file. Now if you're developing a more robust application, you probably want to check out a modern JavaScript framework as well as a good build tool to help you scale up. Now before we get started, go ahead and check out the exercise files for this course just to make sure we're in the same place at this point. They're available on GitHub at the course repository, and once you've cloned them, you want to go ahead and check out the branch 04_02 corresponding to this video. So git checkout 04_02. I've already done that, and you're going to CD into the directory expense calculator. Keep in mind if you ls, there's one directory inside of that with the same name. So you want to be in the outer one. Now I'm going to clear my terminal and there's a few things to set up as far as Python goes. You can go ahead and download a version of Python 3 from python.org if you don't already have it. Now once you've done that, type in Python3 -m venv venv, and that's going to create a virtual environment to keep your dependencies isolated. I'll clear my terminal, and you're going to activate the environment by typing in source venv/bin/activate. And you'll note that it's active by the display of the name of it on the left side of the terminal. And I'll clear my terminal. And if you close your terminal and open it, you want to type in this command one more time. Source venv/bin/activate. And I'm going to pip install my requirements. So this is going to install your Python requirements, and you'll see it's getting django and a bunch of frameworks. Clear my terminal. And a few Python things I need to do is basically just saying Python manage.py migrate, and this is going to create a fresh database for development. And finally, Python manage.py run server. This was a bit of setup, but I think we're okay now. So grab this URL local host 8000, and you can probably navigate to local host 8000 now and see sort of a blank HTML page. Now just a quick trick, I'm going to go to API/API/expenses. Notice that I end my URI or URL with a slash, and there's a form to fill too, this is direct access to my API for debugging purposes. So I'm just going to add a few expenses here. And this is a food expense and you'll see that it's right here. And go back to the list, you'll see that it's showing up, and I'll do like bus fare for five and transport. Great. Just get, you know, a little bit of data here. And now I have two things in my API here. So now that that's done, let's write some code to consume this API with Copilot. I've put in some stub methods here, and let's see how well Copilot understands what these are supposed to do. So I've stated that this is the apiURL, and I've put in some headers here, just the content type, nothing too complex. And here you'll see get expenses as a method. So right here on line 30. I'm just going to start a new line to let Copilot do its magic, and looks pretty good. Okay, so we see that it's using the fetch API. I'm going to accept it and then review it really quickly. So it's using the fetch API which is native to the browser. If you're using a modern browser that is because there are no frameworks here it can use, and it's making a get request which is right to the base URL right here. Great. And then it's grabbing the response JSON. Excellent. I think this is just about what we want. Great. I'm just going to right click and do format document to make sure that everything is in good form. Nice, very nice. So let's see how it did. It's running render expense on each one which right now render expense is just putting the expenses to the console using this nice tool console.table. Okay, so I'm going to go to the base URI, inspect it, refresh and I actually need to call on this method for this to happen. So get expenses is happening here, and I need to save it. I know if you're used to modern development, this is going back a little bit just for simplicity's sake. So save, refresh and wonderful. We see our three expenses here in these nice little tables, and you can also look at the object. Excellent, so let's go back and see what it does as far as post expense goes. So on line 43, I'm just going to let Copilot do its magic. Okay, so it's kind of doing this thing where it's giving me an expense, what it assumes an expense should be, interesting. And then it's doing a post of this expense. Interesting, and then it renders the expense. So I'm going to modify this just a little bit. Maybe I'll give it a little bit of information. So I'll start a little comment here. And if I look back here, an expense has an amount, name and category. So it has a name, amount, and a category. And the category is either food, transport, which is transportation, and there was entertainment and other. Great, let's see how it does now. So that's right. Okay, excellent. So we have this right here. Let's see, it's doing a post request, and it's using JSON string of file. I can't complain. This is good code so far for, you know, vanilla JavaScript. I like it. Let's see if it works. I'm going to call post expense right here, and it should generate a new expense. Right at the bottom. I'm just going to call this once, and let's see if it's here. Yep, the test expense is here looking good and it's a food type of, you know, we're going to eat this test expense so just so it doesn't keep, you know, creating new ones. I'm going to comment this out. Excellent. Now there's delete expense. I'm going to use the word PK maybe, and because I use PK in the server, primary key. And it's doing this, great. So let's see if it can do a little bit better. Okay, so the apiURI, which is the indicator, ends with trailing slash. Let's see if it can do that. Hmm, I'm not sure. Okay, so I think I'm going to help Copilot just a little bit here. So the first thing I'm going to do is accept this by tabbing, but I'm going to use this template string, and I do this by creating a little tick and a dollar sign and doing this and putting it in, you know, curly brackets. I'm going to delete the rest of this line, and this is actually what I wanted, which is great. So I'll tab through. And also, I don't think this is so relevant, so I'm going to delete this right here. And instead I'm going to say maybe get expenses. So sort of refresh. Hmm, I wonder if this is the right method to use. I'm going to use a method that I put a stub for called refresh table so that we refresh the table every time we delete an expense, that's going to come in handy. And refresh table doesn't really do anything at this point. Great, so let's see, we have this, and let's grab one of our expenses with the PK of three. And I'm going to do, first of all delete expense number three and hopefully get expenses will be called after that. And I won't see number three anymore. So bear with me here. Great, so the last one here is still three. Let's see what happened in the network. It looked like the deletion happened. Interesting, hmm. I'm going to try that. Maybe it's okay. What about now? So it's no longer here, and it's not found great. So the second time I pulled it, it pulled without it. So we have deletion, get expenses and creating new expenses in our sort of glorified to-do list with a few more details. Now we're ready to move on to some rendering logic.