Hello, in this video, you are going to
learn how to create a simple web app
with the JustPy Web Framework. I'm
going to use Visual Studio Code to write
the web app. So Jupyter would not work
here. So I suggest you to use an IDE
such as Visual Studio Code, or whatever
IDE or text editor that you are using.
So I've started Visual Studio Code in
here. I'm going to go to File, Open
in Visual Studio Code, and then go to the
folder where my reviews.csv file is
located, and press on Open, and that
will create a new Visual Studio Code
project directory pointing to that
folder where the reviews.csv file
is. We don't need the reviews.csv
for now, because in this video, we are
going to just create the web app. So let's
create a Python file. I'm going to name
it 0-simple-app.py. So I'm
going to create multiple web apps and
I'm using 0, 1, 2, 3, 4 now, even names of these
files. To use JustPy, we need to have
JustPy installed. So I'm using 3.9,
Python 3.9 now, and I'm going to go to
Terminal, New Terminal, and here I
will use pip3.9, since I'm using
Python 3.9, install justpy.
[No audio]
All right, that was successful. So I got no errors,
I got this message that it was already
installed. But anyway, I hope you were
successful too with installation, then
what we need to do is just import justpy.
A good practice is to import it as
jp, because you are going to look at the
documentation of JustPy, and all the
examples are using this jp name. So it's
a good idea to be consistent with the
documentation. Now, every JustPy app
will have a main object, that is known as
Quasar page, so that is the webpage
basically. And that webpage may contain
different elements. So it may contain,
for example, an h1 heading or a
paragraph, or maybe a table, so all
these elements will be added to that
Quasar page to the webpage. Why is it
called Quasar? Well, because JustPy
uses the Quasar framework, which is
basically a framework that is not
related to Python. It's a framework
built with JavaScript. But JustPy is
using that framework, and we can use
that framework through Python. So let me
create a Quasar page.
[No audio]
What we do first is
we create an app function. You can
name it whatever you like. But basically
the idea is that this app will return
that Quasar page. So inside the
function, we create a variable which is
equal to jp.QuasarPage, so capital
Q capital P, that is a class that we
are instantiating here, so we are
creating a QuasarPage instance, an
object instance. And this function then
should return that QuasarPage instance.
And in between is where we write the
elements that this page is going to
contain. So let's create a variable for
each element. Let's create a heading.
So a heading is basically text, but with
a very big font size. And we do jp, so we
points to that '.q', capital Div, so QDiv
is basically a division. If you're
familiar with HTML, it's a division but
it's a Quasar division. So it has some
styling from Quasar, which make it
look modern, and it also allows you to
style it very easily as you're going
to see in just a bit. As a first
argument, we should pass where it
belongs, and of course, that belongs to
wp is that sort of that variable, which I
named wp to stand for a webpage. So
webpage, that belongs to that, then other
arguments that QDiv gets is the text.
So what text do we want to display
there. As a string, let's say Analysis,
of Course Reviews. Let's also add a
paragraph. Let's call this p1 is
equal to jp.QDiv, again, so we always use
QDiv, and a, it belongs to wp again,
the text this time. So let's write
like a description of the webpage, These graphs
[No audio]
represent course review,
[No audio]
course review analysis, and that would be a very
minimalistic web app. But if we run this
now, nothing is going to happen because
we created a function, but no instance
is calling that function. So we are not
calling it anywhere. So let's do
something that will call that function,
we can use justpy from jp, so justpy is a
function, and it expects as input a
function that returns a QuasarPage,
which is this function here. So you can
just write app without calling the app
function. So justpy, this function will
take care of calling this function.
Right? If we execute it now,
[No audio]
you should see this message here that JustPy is
ready to go at this address with this
8000 port number. If you press Ctrl and
click or Command and then click, that
should open your default browser.
[No audio]
And this is the web app. So it's working.
Now, you would expect that this would be
in a bigger font, that didn't happen
because we haven't added any style to
any of these divs. So these divisions
are just plain text. To add style to
elements, you can add a classes argument
to any div, any QDiv element, and that
is equal to a string. So how can we make
this div big? Well, I can show you of
course, but I want to show you the way
how you can find any type of styling
that you can use with JustPy. So
what you have to do is just search for
quasar style,
[No audio]
and then go to this first result.
[No audio]
Under Style & Identity, you're going
to see the attributes that you can
change for the page element such as the
div element that we have attend now. So
we are concerned about Typography.
[No audio]
If you click there, you're going to see
examples here. So if you want to make
the text this big, you want to use
text-h1. So let's try that, copy it,
[No audio]
and add it here, text-h1. Now
something you need to know if you're
using Visual Studio Code is that if you
run the code with this button again,
while the code is running, nothing is going to happen.
[No audio]
So the program will just freeze, and
[No audio]
if you go back to localhost,
[No audio]
you see that the old app is
still running. So what you have to do is
you need to go here, and press Ctrl C
to stop the current process, and then go
to that button and run it again.
[No audio]
Then you're going to see that the app
updates and we have this big fonts now.
So let's look again Quasar style,
under Style & Identity. So we were
talking about Typography.
[No audio]
You also have other examples here what you can change.
And so if you want to add another
property, let's say you want to put this
text to the center. You want to use
text-right, so you copy that, go to
your app, make a space and put paste the
other style property.
Stop the code, run again,
[No audio]
reload the page, and you see
that the text went to the right. Yeah, so
I meant to make it center. So let's say
text-center.
Stop, run again.
[No audio]
We get this popup sometime that it
detects that the app changed. So we can
press OK, and it will, and that will
reload the page. So this is what I was
expecting. If you want some padding, so
if you want this text to be not so close
to the upper bounds of the webpage, then
you may want to look at Spacing. So
in Spacing, you're going to see down
here that you have all these options. So
for example, if you want the padding on
top to be extra small, you use that text.
[No audio]
If you want to have a padding of
all around the text, you want
to have some space here, space between
the text and the upper bound, and space
between this text and the next element,
which should be this one here, then you
want to go to maybe padding all medium,
so you want to copy that and add it
there. So make a space,
[No audio]
run,
[No audio]
reload, and you see that now we had some more
space between that and that there. The
last change I want to make is I want to
make the text a bit smaller. So Ctrl C,
run again, go here, reload, and now it
looks better. And that is how you make
JustPy web apps. Note that the order you
create these elements matters. So you
see that Analysis of Course Reviews
is on top of the other elements here. So
if you want to keep adding elements down
below here, you want to respect the
order. So you want to add more elements
here and always don't forget that
you always need to connect that element
to the webpage. Now that was how to
create a simple webpage. But QDivs
are not the only elements we can use. So
we can also use Highcharts element, so
which is a plot that we can add to our
QuasarPage. Let's do that in the next
video. See you.