Python on Azure: Part 1—Building Django apps with Visual Studio Code | Azure Friday

Python on Azure: Part 1—Building Django apps with Visual Studio Code | Azure Friday


>>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.>>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]

Only registered users can comment.

Leave a Reply

Your email address will not be published. Required fields are marked *