>> In this first episode of
our four-part series on Python and Django and Azure,
Carlton Gibson is here to show us how to set up
a Python application with Django and
Django REST framework using Visual Studio Code,
from installing the Python extension,
to using the integrated terminal,
to debugging today on Azure Friday.
>> [MUSIC].
>> Hey, friends and Pythonistas.
I'm Nina Zakharenko, a senior
Cloud Developer Advocate at Microsoft focusing on Python.
Today, I'm here with Carlton Gibson.
He is a Django fellow,
a maintainer on Django and Django REST
framework along with a bunch of other applications.
>> Hi, Nina.
>> Welcome.
>> Thank you. Hi, well, okay.
Today, I am here to show you
how to use Visual Studio Code with a Django application.
So, as the example application,
I've cloned the rest-framework-tutorial project
which I said most people will be familiar with.
It's a simple snippets app,
where it exposes an API,
where you can create snippets and then they can be
highlighted like code, code snippets.
It's got a browsable API and all the rest,
it's a nice project,
it's fully features, but it's not so big to get in the way.
>> Yeah, looks like a helpful utility.
>> Yeah. I've cloned this project
to show the visual code integration.
So, let's get on with that.
Here, I've already got the project
cloned and I've got the virtue environment setup.
So, that's just to show you that notes,
just quit that terminals we won't need that and hide Safari.
I'm going to open Visual Studio Code.
>> Great.
>> Then let's open the "rest-framework-tutorial."
Okay and that brings the open.
In the tutorial app,
we've got snippets and so there's a snippet model
which has a classic Django model,
it's got fields, title, the actual code,
line numbers, the language and this highlighted field,
which down in, when you save the model,
it runs it through the pigments syntax highlighter
and gives you highlighted code.
So, we can see this in action and what we can do is,
we can bring up a terminal here.
So, I've just used a little shortcut
there to bring up a new terminal.
>> That's control back T, right?
>> Yeah, control back T, you can do
it from up here on the menu as well.
So, you've got new terminal,
run task, all kind of things going on.
No, hang on, we've got to do something first.
Visual Studio Code, it has great integration with Python,
but you need to install
the Python extension to get that to happen.
So, let's just close
the terminal since it's not going to work for me at the moment.
This Python extension, it gives you syntax highlighting,
it gives you a core-completion, it gives you also.
So, if you're going to use Python enable that
and then we need to just reload to activate it.
Okay. Then in this list of extension,
I've got some other ones as your actual extensions,
Django templates, support, doc are the things that I use,
we'll come back to those later on.
Let's open models.py again.
>> Now that you have Python extension enabled and installed,
there's a few new things here on the screen, right?
>> Yes. So, right down when you see it in loading
Python interpreters and it'll
also be analyzing the code in the background.
So, look what's brilliant down here,
it's automatically detected my virtual environment,
and it's selected that and
it would use that when we file with things,
it says, "Pylint is installed, but not enabled."
So, let's enable pylint.
So, that gives us extra niceties when formatting our code.
So, let's try that thing with the terminal again.
We open up a terminal.
Now, VSCode, because it detects my virtual environment,
it will automatically source it and
activate my virtual environment.
>> That's great.
>> Yeah. So, it's just less typing, less running around.
Then we can do a very familiar manage.py server.
>> So, that's going to bring up our Django application?
>> Yeah. Exactly, as we do lots.
Then I can hover over the URL,
I can just hold click and that will
open the URL and here's the application.
So, we said this is an API application,
okay, and this is a browsable interface,
but if we can select a different format,
we can select JSON format and then we get
a raw JSON response which Firefox nicely highlights.
>> Wow.
>> All that's done is adds
the format JSON query parameter and through content negotiation,
it changes the display format.
>> So, this whole beautiful API browser
is part of Django REST framework?
>> Yeah, and so Django REST framework
provides that out of the box.
So, we can look at are snippets.
There's a few snippets in the database,
and they will have this highlighted view,
where you can access the pigments syntax highlighted snippets.
So, that's the application.
Let's go back to the application root.
It's got some functionality and what I wanted to show you was how
easy and how quick Visual Studio Code with
the Python extension enabled makes coding in Python.
So, we've got functionality here.
I just thought we'll add a little bit.
So, let's hide our terminal.
We've got only IPR ready,
we've got users and we've got snippet.
So, that's like groups because we've already got that.
So, the first thing we need when we're
adding code is a serializer.
So, all I've done is, I've used command panel,
it brings up this panel which you can sign
any file name and it will instantly find it for you.
>> That serializer describes how to display the model.
>> Yes.
>> In API browser?
>> Yeah, exactly. So, here the
autocomplete notes that I want to group.
So, I can use a serializer here,
but let's create another one.
Here, we get some nice autocomplete with a template.
So, Visual Studio Code lets you create Tech code
templates with parameters which you
can easily create the boilerplate code.
>> Wow.
>> In Mongo. So, I've just put a new line in there for some.
I've got to, so there's
the serializer which will control rendered fields,
the battlefields into a format that can be serialized the JSON.
Then beyond that, we need a viewset to add it.
So, again, at the top here,
we probably need to import group.
There you are, the autocomplete notes about that and
let's create a viewset here.
>> These viewsets bind the model to the view.
>> So, a viewset is a group of,
so a Django view function is something which maps
an HTTP request back to
a response and a viewset is a group of those.
So, a viewset implements a post method,
Git method, so this is a read only model viewset,
so it will offer you a list view and
a detail view by default
and you get out of the box without doing anything.
A GroupSerializer, what's this?
GroupSerializer used before definition,
that's because we forgot to import it.
So, if we come up to here and we
can add up GroupSerializer bring it,
that's what we need save that.
So, with the serializer and the viewset implies,
we just need to route that to the URLs.
So, this is again, standard Django stuff.
If we go router and then we can register.
Under the groups,
I can't spell today,
there you are.
"Views.GroupViewSet".
>> So, before we move on,
you showed us how to take these templates,
>> Yes.
>> For code that you just have to type in over and over again,
can you show us how those were configured?
>> Yes, so okay, brilliant.
So, if I just come down here and go to "User
Snippets" and it's "Django.code-snippets",
and then I've just got a file here with the snippets in.
So, let us take the model and serialize it first.
It's called "Model Serializer" and then it's got
a scope which is when is it relevant to use Python.
Some thing's irrelevant for JavaScripts,
some of Python, some of HTML, whatever.
The prefix is what you type.
So, if I'm going to create a "Model Serializer",
I just want to type "Serializer" and
then the autocomplete picks it up.
>> So, you hit "Tab" and then it puts in
the body and lets you type in those variables.
>> Yes. So, if you see here,
it's got a placeholder for "Model" and because this one is
named "Model" and the one below it is named "Model" as well.
It will let you fill in both of those at the same time.
If you look at the "Viewset Snippet" just below,
it's got "Model", "Model", "Model".
Where if you're typing group view set,
group model objects, or groups here,
it gets a bit repetitive.
>> Absolutely.
>> These templates let you avoid all of that.
>> Yeah.
>> So, very quickly, we've added these.
>> A bit of unfortunate naming,
but those snippets were
Visual Studio Code snippets and
not the snippets that were part of our application.
>> Yeah, exactly. They're not
Django REST Framework tutorial example objects.
No. So, looks like the terminal's reloaded,
so we'll all click to reload,
and let's have a look and their groups have appeared.
A lot of this is REST Framework features.
But what we've done,
is we're able to add those features to
the application with very little typing, very quickly.
So, that's what I love.
So, one other thing I want then to show you was debugging.
>> Yes.
>> So here, on the application I've added a "Django
Admin" for the snippets application.
The admin is one a Django's killer features.
Let me show you the actual code for this,
because there's nothing to it. Close that terminal window.
So, all you do is you define
a model admin here and then you register it on a particular model,
and then Django gives you out of the box,
this whole admin UI, pretty simple.
>> That's incredible.
>> Well, it's started being one of the features.
Let me just create an example.
So, there's a bug in this and this
is slightly tend for the example,
but it's a real bug that I came up with in real life.
So, in the API,
users can create their own snippets,
but you not might want to manage
them or whatever, so I'm going to create one.
Then there's this is "Highlighted" box.
Now, this "Highlighted" box if you
remember, came out to the model.
In the "Save" function,
that was filled in.
That was generated when you saved it.
>> So, that that text box should contain our highlighted code.
>> Exactly. But if I save it without the highlighted code,
I get an error and I'm like, "What's going on?
Why is that?" So, let's debug that.
So, debugging, there's a few things you've got to do.
First of all, because this is a new set up,
I've got to create a configuration.
So, I just click "Add Launched Configuration" and
Visual Studio Code creates a whole set of default
of different environments for debugging Python.
The one that's relevant for us here is
this Python Django, for example.
So, it does "Runserver" and it gives
it the right commands so that you can run a debugger.
Now, I just need to add a feature because I want
to debug inside Django itself.
>> Nice, and as you start typing,
there's autocomplete here and even a little bit of documentation.
>> Yes, and that super
because I would never remember debug standard.
I'd be looking up in the docks,
whereas the autocomplete means that I don't have
to do that and I want to set that to "True".
Because if it's "False",
you can only debug your own code.
>> Okay.
>> But I want to go into the site packages and debug in there.
Sorry, let me bring up the "Admin" file.
Now, I want to debug.
So, this isn't saving right for me.
The model admin has got this error in the form,
so I want to look into "ModelAdmin".
So, what I can do is I can right-click
there and I can click on "Go to Definition".
This will open the file inside Django.
So, this is in "Site Packages Django Contrib Admin
Options.py" which is the main file for the functionality.
>> So, we can see what's going on under the hood.
>> Yeah. We can get down as low as you want to.
What I'm looking for here is a particular symbol.
So, I can use this "Menu Command",
that means the shortcut to look
for the exact place in the file that I'm looking for,
and I'm looking for the "Change Form View"
and this is the "Django View
Function" which processes your submission
when you submit that form.
So down here, so here's where the model is saved.
If it's valid, could say
"Model" though obviously that's not happening,
so I need to have a look.
So, I just click here and I can add
a breakpoint into the
"Django Admin Code" and then I can run my debugger.
Hang on, let me stop that just one second because I think.
>> So, there's there's a few different configurations there.
So, we want to make sure that we select our Django one.
>> You're very clever, look at that.
So, what I've selected there, stop, hang on.
Now, look I've selected it to run the current file in the,
>> Right.
>> Integrated terminal, that's no good to us at all.
So, yes. I select the Django,
>> Yes.
>> Profile that I want and "Run".
Pair programming is much more efficient.
>> Absolutely.
>> Okay, brilliant. So, it's launched
its run server but inside
the debugger and this bar at the bottom has turned.
>> Orange.
>> Yeah, to indicate that the debugger is active.
>> Okay. So, we come back to our form,
it was an error, and we can see.
All of a sudden, that breakpoint is hit and we
can then examine that.
So here, we're in the terminal which is
showing us the output from "Run Server".
But if I just switch across to the "Debug Console",
then I can examine,
so I get some more to complete,
I examine the form instance.
So, this is the snippet form that's
bound to the data that we've submitted.
"Valid Unknowns". So, let's find out.
Form is is valid and it's not.
So that's the error. So, but what, hang on,
let's have a look. "Form.Errors", let's see.
>> That's going to tell us what's wrong with our forms.
>> So, "Highlighted" is the highlighted field that it's required,
but we don't want it to be
required because it's supposed to be set during model safe.
>> Right.
>> So, okay. Now, with that in place, now we know what it is.
Let's just stop the debugger and let's go back to the "Admin.py".
This past that I needed to do something here.
>> Yeah.
>> So, if I add it to "Read Only
Fields" and we're going to set that to
a tuple and we're going to
add "Highlighted" as a "Read Only Field". Okay?
>> Great.
>> Now, if we come back to the "Terminal" and we
can, we'll "RunServer" ourselves.
>> Let see if this fixes our bug.
>> Well, hopefully it will.
>> Yeah.
>> Let's have a look. So, I
need to refill the form because it was within debugging,
I'll just put some code in there,
line numbers yeah, why not?
Give that to me. Look here,
this highlighted box no longer appears.
Because we've made a "Read Only Field", it doesn't matter.
>> If we save?
>> So, I can save. It works.
>> There it goes.
>> Right, and so anyway, there's an example of how you can use
the debugger in Visual Studio Code to
dig down into code and work out what's going wrong with your bugs.
>> That was so easy to set up.
So, today we learned about Python on
Visual Studio Code on Azure Friday.
On the next episode we're going to learn how
to deploy this to Azure App Service.
[MUSIC]