WEBVTT 00:00.090 --> 00:01.890 Hello everyone and welcome back. 00:01.920 --> 00:07.470 In this lesson you're going to learn how to build a simple API using django that will expose the least 00:07.480 --> 00:13.260 with all the products available in the database of a Web site which we're also going to create as the 00:13.260 --> 00:14.610 title suggests. 00:14.610 --> 00:16.680 The lesson is divided in two parts. 00:16.680 --> 00:22.680 In this first part we're going to set up our Django project with models and configuration files making 00:22.680 --> 00:30.600 a short recap of how to properly use Django as standard views to show our products in a HD email template. 00:30.600 --> 00:36.720 In the second part of the lesson we will then proceed to the creation of the API itself by creating 00:36.720 --> 00:39.920 the required DPA views and endpoints. 00:40.100 --> 00:45.780 Writing a simple API without January's framework support will help us find out how incredibly useful 00:45.810 --> 00:50.860 the package release understanding all the concepts explained so far in the course. 00:50.880 --> 00:52.880 We have a completely practical example. 00:52.920 --> 00:56.730 We will then be ready to start using django as framework in the next session. 00:56.740 --> 00:57.960 Let's get started. 00:58.680 --> 00:59.070 OK. 00:59.100 --> 01:04.610 So we are adding these wells to your code and as you can see I'm currently weaving the same folder. 01:04.620 --> 01:09.570 When I was developing the code for the previous lecture and this you can see I've created another folder 01:09.570 --> 01:11.600 called the first API Django. 01:11.640 --> 01:14.690 What I'm now going to create a new Django project. 01:14.700 --> 01:21.460 Keep in mind however that this is not the only way clearly to develop with Django on a visa understood 01:21.480 --> 01:22.200 your code. 01:22.200 --> 01:28.350 Most of the times as we will see in the next sections you might want to open only the single folder 01:28.410 --> 01:29.370 of your project. 01:29.580 --> 01:34.320 However I believe that for this specific section of the course this is a good way to go. 01:34.320 --> 01:39.450 Also considering that we will have to tweak the settings a little bit thus getting familiar with the 01:39.450 --> 01:45.780 editor so I can now press the control shift B key combination together drop down menu with a list of 01:45.780 --> 01:51.330 all the available commands and I can choose to use this virtual environment for the project by clicking 01:51.330 --> 01:52.150 on Python. 01:52.170 --> 01:58.500 Select interpreter Of course if for any reason this command is not on the top of the list you can just 01:59.130 --> 02:05.700 look for it by typing its name you see I can now then select the command to activate the python extension 02:05.810 --> 02:11.440 getting off course at least with all the available variable environments and interpreters. 02:11.490 --> 02:14.490 So I'm now going to choose the one that I've created. 02:14.490 --> 02:21.080 This one it asks me to install a limiter but I can just keep it for now. 02:21.120 --> 02:27.840 One important thing to keep in mind is that if for any reason visible your code can't manage to find 02:27.870 --> 02:35.640 the virtual environment that you want to use you can click on File Preferences Settings then on workspace 02:35.730 --> 02:43.440 settings and you can look for VM over these two settings will pop up and you would be able to set the 02:43.440 --> 02:48.160 path to the folder where you created the digital environments that you want to use. 02:48.180 --> 02:52.010 But as you can see now everything works just fine. 02:52.110 --> 02:58.410 And what I want to do instead is to install Django so I'm going to click on the original new terminal 02:58.740 --> 03:06.450 a beautiful environment gets activated and I can now round instruction be install Django which is going 03:06.450 --> 03:10.570 to download and install within that environment and the latest version of Django. 03:10.680 --> 03:18.240 And we also need to install pillow deep install pillow which as you probably know is used by Django 03:18.270 --> 03:19.530 to manage images. 03:19.710 --> 03:20.760 So let's install it 03:23.920 --> 03:29.530 and I can now just create a requirements that DST file making it easier for you to recreate the same 03:29.530 --> 03:30.670 environment of course. 03:30.670 --> 03:45.460 So Peter please requirements that tasty I'm not going to move within that first API Django folder and 03:45.460 --> 03:47.960 I can now creates the project with the usual command. 03:47.970 --> 03:56.290 So Django had me start a project and I can just call it online store. 03:56.380 --> 04:02.350 We can now see of course that within the first API Django folder and Django project called online store 04:02.440 --> 04:03.610 is being created. 04:03.610 --> 04:07.680 We can now go ahead and run all the routine operation. 04:07.750 --> 04:09.100 Let's call them. 04:09.100 --> 04:21.840 So first of all Python managed that by my great now Python manager that by create super user and I can 04:21.840 --> 04:30.170 just call it admin I can skip the email address is you can read them using a common password right now 04:30.210 --> 04:35.610 but it's okay because we're developing remember that it's vital to use strong passwords in production 04:35.880 --> 04:41.400 and the last thing that we can do before creating an app for our project is to set up visual studio 04:41.400 --> 04:45.320 code to land that managed pi run server comment. 04:45.450 --> 04:51.110 So I'm just going to debug tab and I can now click on the gear icon right here. 04:51.330 --> 04:57.570 I'm going to select python which is going to open these launch door at the Jason File can now scroll 04:57.570 --> 05:03.820 the file until we find this specific Jason. 05:04.030 --> 05:11.590 And considering that Visual Studio code is opened within the web API e folder I have now to set the 05:11.590 --> 05:24.000 new location of the manage those by file so I can add first API Django online store managed not by. 05:24.040 --> 05:31.540 So going back to the back window I can now click on the drop down menu select Python Django to have 05:31.650 --> 05:38.680 managed that by run server command run every time I press this green triangle and this is one of the 05:38.680 --> 05:44.160 reasons why I really enjoy writing in Python web applications with VS Well your code. 05:44.200 --> 05:47.500 This feature really makes the development process much easier. 05:48.040 --> 05:53.630 And one last thing that you probably want to do if you're developing on Chrome as we are is to comment 05:53.650 --> 06:00.250 that no threading option right here which otherwise might slow down the development server. 06:00.250 --> 06:08.790 So let's give it a try and your terminal is run and it is our development server is running as expected. 06:08.790 --> 06:10.790 So let's stop it for now. 06:12.460 --> 06:18.680 Because of course we now need to create a new application for a project. 06:18.730 --> 06:28.210 So I'm just going to move inside the first API online store folder and I can now even recommend Python 06:28.750 --> 06:38.400 manage that by start up and we can maybe call it just products we can now go ahead and install the new 06:38.400 --> 06:43.360 application from within the settings not by file. 06:43.530 --> 06:51.740 Of course I'm just going to add products to the list of the installed applications. 06:51.750 --> 06:56.150 We're now finally ready to start creating demo days for an application. 06:56.600 --> 07:06.390 So we're going to need to model as a product model in a manufactured model plus manufacturer models. 07:06.610 --> 07:14.810 And that's model and manufacture and model is going to add three fields and name field models dot charge 07:15.310 --> 07:16.440 field. 07:16.770 --> 07:19.370 We have Max length. 07:19.450 --> 07:25.580 We can pass maybe one hundred and twenty then a location field which is going to be the same basically 07:26.810 --> 07:37.070 as the name field and then a boolean flag that we can just call active that's start boolean field and 07:37.070 --> 07:45.600 for these boolean flag we can just set a default of through of course in a real war scenario such boolean 07:45.600 --> 07:52.260 flags are used to tell for example our logic if manufacturers should be listed or not least of manufacturer. 07:52.260 --> 08:02.750 For example we can now define than the string self that can just return self name. 08:02.910 --> 08:08.690 Let's now define our second model the product model. 08:09.130 --> 08:10.280 Models not model. 08:10.900 --> 08:18.430 And first of all let's link to the manufacturer to more than so manufacturer. 08:18.500 --> 08:27.660 So and I'm going to use of course if Frankie so models that Frankie so linked to manufacturer model 08:29.430 --> 08:43.880 then when to set on the lead models dot skate and then related name and we can set products. 08:44.560 --> 08:47.580 Then let's add a name for our product. 08:47.580 --> 08:54.060 So name and in fact we can just use the same code we use the above. 08:54.300 --> 08:56.750 Then let's add the description description. 08:58.820 --> 09:00.110 Model starts. 09:00.180 --> 09:01.920 Text field. 09:02.100 --> 09:09.650 We can't make it optional bypassing blank through and no through. 09:09.990 --> 09:16.510 Then we can define photo fields so more does not image field. 09:16.830 --> 09:20.810 Making it optional as we did for the description. 09:22.600 --> 09:31.660 Price can set models dot flowed field and of course every product is going to need to price. 09:31.660 --> 09:34.150 Then let's add shipping cost. 09:35.050 --> 09:44.800 Shipping costs and we can use a float field just as well then quantity and we can define modules dot 09:45.280 --> 09:57.040 positive small integer field and we can now define then their String def and then the string self and 09:57.040 --> 10:00.680 we're just going to return self doth name. 10:00.730 --> 10:02.290 Perfect. 10:02.290 --> 10:07.600 So we are now ready to generate their migrations for our models and we can of course use the command 10:07.690 --> 10:13.390 manage that by make migrations and we can now apply them. 10:13.480 --> 10:17.090 Maggie we manage that by migrate. 10:17.230 --> 10:18.110 Perfect. 10:18.130 --> 10:18.730 Very well. 10:18.740 --> 10:24.610 We're now ready to create our views within their views dot by file of our products application of course. 10:24.610 --> 10:30.220 And as you probably remember one of the easiest way to create views in Django is to use the generic 10:30.220 --> 10:33.650 class based views that are already provided by the framework. 10:33.730 --> 10:35.140 So let's import both. 10:35.260 --> 10:47.960 View and least view from Django that views dot generic dot detail import detail view and same thing. 10:47.970 --> 10:56.520 I'm going to do as I said for list view so I need to change detail into list. 10:56.850 --> 11:07.740 And of course we also need to import our models from models import product and manufacture it we're 11:07.740 --> 11:11.640 also going to need to create some templates of course to use we have our views. 11:11.640 --> 11:19.470 So I'm going to create a folder within the products app and I'm just going to call it templates. 11:19.500 --> 11:26.970 We've seen this for they're now going to create another folder called of course products and we've seen 11:26.970 --> 11:27.750 this folder. 11:27.750 --> 11:40.860 I'm now going to create two files to HDMI templates so product detail dot HD e-mail and product list 11:41.800 --> 11:43.530 that HDMI out. 11:43.880 --> 11:47.510 I can just add some code here. 11:47.660 --> 11:54.190 So this is going to be of course product at least I can do the same thing for product detail so HCM 11:54.250 --> 11:59.320 out five product detail. 11:59.600 --> 12:05.570 And let's now go back to our viewers notify fire because of course we actually need to write our views 12:06.050 --> 12:15.800 to class product detail view and of course is going to extend digital view. 12:15.800 --> 12:25.790 So we need a defined model as product of course and template name as products. 12:26.270 --> 12:39.180 Product detail not HD email and we can now define also our product list view which is going to inherit 12:40.500 --> 12:42.230 code from list view. 12:42.650 --> 12:53.120 And so model it's going to be product and we can do something similar for it's a template name but it's 12:53.120 --> 12:56.600 going to be of course product list both HDMI out. 12:56.630 --> 12:59.430 So let's just this keep the manufacturing model for now. 12:59.450 --> 13:07.900 Let's go ahead and write to code for our HDMI templates instead so we can actually start from the title 13:09.880 --> 13:13.110 object that name. 13:13.770 --> 13:22.120 And then I can actually copy object of name because I now want to create a couple of paragraphs to show 13:22.120 --> 13:25.510 all the different details of a specific instance of product. 13:25.510 --> 13:28.930 So product object a name 13:33.080 --> 13:33.690 manufacturer 13:40.150 --> 13:44.990 affectionate we're going to have quantity 13:51.790 --> 13:54.770 we are going to f the description 14:01.830 --> 14:02.460 price 14:06.930 --> 14:17.730 object price and then of course shipping cost so shipping costs. 14:18.300 --> 14:23.210 Then maybe we can add something like dollars or euros or in other currency. 14:23.530 --> 14:27.310 Then of course we're going to need to show that image. 14:27.310 --> 14:29.970 So the specific image for a specific product. 14:29.980 --> 14:35.000 So object that photo don't you Earl. 14:35.290 --> 14:39.690 Because of course photo is the name of the image field 14:42.450 --> 14:44.680 product photo. 14:45.450 --> 14:50.530 And for that product at least the template can of course make a for loop. 14:50.610 --> 15:00.690 So for product in objects listed and we can just close it straight away so. 15:00.730 --> 15:10.090 And for that we can just show maybe the most important details such as product manufacturer and maybe 15:10.090 --> 15:10.600 price. 15:10.840 --> 15:23.060 So I'm going to copy product and manufacture right here and price like so maybe give a bit of indentation 15:23.650 --> 15:30.440 even though in fact this needs to be called object as object is the name that we're using to reference 15:30.560 --> 15:31.430 all the properties. 15:32.150 --> 15:36.690 So now that we've got our views are templates in our models we can define. 15:36.710 --> 15:39.110 Are you a real parts. 15:39.110 --> 15:43.570 So let's create a new file or else dot by. 15:43.820 --> 15:48.730 And within this file first of all we need to import the path function. 15:48.740 --> 15:53.000 So from Django dot you add else import path. 15:53.060 --> 16:05.540 Dan of course we need to import our views so from viewers import product detail view and product list 16:06.350 --> 16:07.680 view. 16:07.700 --> 16:14.240 So let's now define your URL pattern as at least. 16:14.410 --> 16:23.670 And of course path and maybe you can say he does the home page or they mean Beth product list view dot 16:23.760 --> 16:30.230 s view if name product list. 16:31.800 --> 16:41.510 And we can do something similar for product detail view some product detail but because we wanted details 16:41.570 --> 16:47.480 of a specific product here are going to need to pass a primary key to our detailed view. 16:48.020 --> 16:55.010 So I'm now going to change the path to product selection integer primary key. 16:55.550 --> 16:59.170 And we now need to include the D you address that by file. 16:59.210 --> 17:07.130 We've seen that it has stood by file of the main project so the main you arrested by file so let's import 17:07.490 --> 17:16.460 the include function and we can now define the path to the let's say home page and we can now include 17:18.300 --> 17:26.580 products that you add else because you're also using media files considering that we got an image field 17:26.670 --> 17:27.920 in that product model. 17:27.930 --> 17:34.860 We also need to tell Django that we want our development server to serve media files during the development 17:34.860 --> 17:35.760 phase. 17:35.760 --> 17:49.330 So let's import static and settings from Django dot com dot you URLs dot static import static and from 17:49.840 --> 17:59.110 Django that's called import settings and I can in fact move all of these right here. 17:59.160 --> 18:11.810 So if settings dot debug we can then specify that we want to add to at least of part static settings 18:12.180 --> 18:25.030 dot media you URL document route settings not media route and of course considering that we are referencing 18:25.060 --> 18:27.010 media you rail and media route. 18:27.070 --> 18:37.760 We need to define them in that settings not by five so settings that by right here below so media route 18:37.790 --> 18:42.640 we can just call it uploads and media your URL. 18:42.680 --> 18:46.200 You can just set slash media for Slash. 18:46.460 --> 18:48.810 So our project is basically completed. 18:48.830 --> 18:55.250 There is one last file that we need to set up and it's the admin that by 5 which is going to allow us 18:55.250 --> 19:00.600 to create new instances of product and manufacture from the admin panel. 19:00.680 --> 19:16.480 So from models import product and manufacturer and then add mean that site The Register product saving 19:16.960 --> 19:25.740 we can do for manufacturers so we can now close most of these files because we are not going to need 19:25.740 --> 19:27.180 them anymore. 19:27.180 --> 19:35.720 Maybe you can just leave our templates and we can run our development server so let's run it. 19:37.500 --> 19:39.580 Entities system checking it into fight. 19:39.580 --> 19:40.900 No issues with live at. 19:40.900 --> 19:42.990 Look I lost on party 2000. 19:43.000 --> 19:49.100 So let's open up our browser and ID we see that we are currently in our home page. 19:49.110 --> 19:53.360 There is no content but how do windows title speaks clearly. 19:53.370 --> 19:56.970 Let's go to slash admin instead. 19:56.980 --> 20:00.550 Let's enter our super user credentials. 20:01.140 --> 20:04.130 And of course we got both manufacturers and products. 20:04.140 --> 20:11.410 So let's start by creating a new manufacturer instance I can just call it first manufacturer. 20:12.420 --> 20:16.210 Maybe location Italy we can save the instance. 20:16.440 --> 20:24.990 So let's add some products so manufacturer first manufacturer and let's add some by sequels to our product 20:24.990 --> 20:25.340 list. 20:25.350 --> 20:32.940 So Citi Bike and in the description field we can add a very comfortable 20:35.550 --> 20:43.300 bicycle for the price we can maybe set eight hundred dollars shipping costs. 20:43.490 --> 20:46.440 You can set it to zero. 20:46.450 --> 20:52.800 Free shipping quantity maybe we can add something like twenty five so let's choose a photo. 20:53.330 --> 21:01.660 So I'm going to choose this photograph and I can now just click save and add another from the same manufacturer. 21:01.970 --> 21:10.100 And maybe this time we can add the racing bikes or racing bike very fast. 21:10.580 --> 21:11.150 Bicycle 21:14.020 --> 21:14.940 so let's choose a photo. 21:15.700 --> 21:17.800 These specific racing bike. 21:18.130 --> 21:23.350 And the price tag is going to be our year so maybe two thousand five hundred dollars shipping costs. 21:23.350 --> 21:25.650 We can give it for free. 21:25.650 --> 21:33.340 So 3 shipping and because this is a much more expensive bike we can maybe just add 5 in the quantity 21:33.340 --> 21:37.420 field so let's save and let's go back to our home page. 21:37.420 --> 21:41.230 So view site and here we have Tim the list of our products. 21:41.320 --> 21:48.400 So let's check the details of a single product products this Lesh one and if we have the details of 21:48.400 --> 21:55.950 our city bike now checking the details of the second product our racing bike and it is. 21:55.990 --> 21:57.740 So that was it for this video. 21:57.760 --> 22:02.150 Now that our line sort of project is ready and we've refreshed that a memorial now to create and manage 22:02.150 --> 22:03.270 a Jenga project. 22:03.320 --> 22:08.050 We're finally ready to extend its functionalities by creating an API in the next video. 22:08.050 --> 22:13.240 This will allow us to expose a list with all the products in our database and the details of single 22:13.240 --> 22:16.420 products using the chase on file format. 22:16.480 --> 22:21.790 And of course this will also allow us to make a proper comparison with what we've done so far which 22:21.790 --> 22:27.340 is using django as templates to show all the relevant information about their products in our database 22:27.460 --> 22:33.400 and it will also allow us to understand how powerful a useful the Django framework package release. 22:33.520 --> 22:35.010 So that was it for the media. 22:35.020 --> 22:36.400 See you in the next lesson.