Hello, world.

This is CS50 on Twitch.

My name is Colton Ogden.

I'm joined today by--

KAREEM ZIDANE: Kareem Zidane.

COLTON OGDEN: So apologies if you've been watching in the live chat.

It took us a little bit to get online.

We're having some difficulties with a brand new setup.

But it looks so far to my eye that everything is currently Livestreaming

and looks excellent.

Let me go ahead and make sure I'm muting everything here on my laptop

that the audio is coming from.

So what are you here to talk with us about?

You're a regular.

You've been in a couple of times.

We did like a Travis stream.

We did some other stuff.

KAREEM ZIDANE: Yup.

I think this would be my third stream.

Yes.

COLTON OGDEN: Nice, you're a regular, a veteran at this point.

KAREEM ZIDANE: Yeah, I guess so.

COLTON OGDEN: What are you talking about today?

KAREEM ZIDANE: We're going to talk a little bit about Flask today, which

is a micro web framework.

It's used.

It's very popular.

It's a Python framework.

And it's used in a lot of web applications.

COLTON OGDEN: Nice, nice.

So a lot of people in the chat may have programmed in Python before, but maybe

not necessarily in the context of web.

KAREEM ZIDANE: Yeah.

COLTON OGDEN: So this is kind of like a nice entry level sort of way

to get into server side programming with Python would you say--

KAREEM ZIDANE: Yup.

Yup.

COLTON OGDEN: --as opposed to maybe like something like Django

would be another technology that folks might have heard about.

KAREEM ZIDANE: You might say that Django is similar in spirit.

It's just, I guess, heavier.

COLTON OGDEN: Yeah.

KAREEM ZIDANE: But I'm not an expert in Django.

But, I mean, yeah, it's pretty much the same thing.

The job of a web framework in general is,

you know, facilitating the process of actually developing

a web app or a dynamic web app.

COLTON OGDEN: Sure.

And this would be server side as opposed to like maybe

JavaScript, CSS, HTML, stuff that the web browser actually deals with.

KAREEM ZIDANE: We're going to see a little bit of HTML and CSS as well.

We're not going to see JavaScript, but you

could use JavaScript if you wanted to.

Yeah.

I mean, I thought I'd make this as simple as possible and as focused

as possible.

So, yeah, we're going to be focused more on the server side of things today

as well as some templating with Jinja.

COLTON OGDEN: Cool.

Awesome.

I can't wait.

KAREEM ZIDANE: Yeah.

COLTON OGDEN: I'm very excited.

We have a few new followers here in the stream,

so I'm going to give some shout outs to them.

So thank you very much to AFMM01, Negative_Nancy, baffoon9,

ZombieRaccoon, [? COBOL ?] [? 2070, ?] [? Hussam ?] [? Farag, ?]

and [? Igor ?] [? Voltaic. ?] Thank you so much for following today.

KAREEM ZIDANE: Thank you.

COLTON OGDEN: I'll transition to your laptop

here so we can see what we're working with here today.

Yeah.

Why don't you get us started here?

KAREEM ZIDANE: Cool.

So I am inside of my container, yup.

And I thought I would start by talking about a little bit of the concepts that

were actually a little bit difficult for me to sort of grasp at first

when I first started learning about with programming.

And some of these concepts is, like, what's a server?

What's a client?

COLTON OGDEN: Sure, sure.

KAREEM ZIDANE: Like how do they communicate with each other?

And the basic idea is that a server is a piece of software that is just running,

listening for web requests.

At once it receives a web request, it parses it, processes it.

And then if everything's OK, it responds with some responses we'll soon see.

COLTON OGDEN: So some program on somebody's computer somewhere,

it's listening for network traffic sort of like bits of data

that are sent to it.

It processes them and then sends back a response.

KAREEM ZIDANE: Exactly, yes.

So, yeah, exactly as explained.

A client, on the other hand, might be something like a browser

which actually initiates or makes a web request

and expects a response back from the server and then, you know,

does something with that response whether it's, for example, showing

some web page and so on.

And so we're going to actually see an example of this right now.

So let's actually get started.

So before we actually start, I just want to explain something

about the protocol that's being used in this case.

COLTON OGDEN: Sure.

KAREEM ZIDANE: It's the HTTP protocol.

And it's an example of an application protocol.

COLTON OGDEN: OK.

KAREEM ZIDANE: And we'll see what that means.

But for two pieces of software to communicate with each other,

they need to be speaking the same language, right?

COLTON OGDEN: Right, yeah.

I guess, yeah.

KAREEM ZIDANE: Because, you know, if some server's listening

for some network traffic or some requests,

it expects to receive some data, right?

COLTON OGDEN: Yeah.

KAREEM ZIDANE: You know, if this data is arbitrary,

it's not going to be easy for the server to sort of make sense of it,

because it's not a human.

COLTON OGDEN: If someone's speaking French and someone's speaking German--

KAREEM ZIDANE: Exactly.

COLTON OGDEN: --it's highly unlikely they're going to understand each other

if they don't know the other language.

KAREEM ZIDANE: And so, yeah, there's an agreed upon language

that they both speak.

And this language is in the form of the protocol that is called HTTP.

And just to be clear, this is not a programming language.

COLTON OGDEN: Right.

Right, just sort of a standardized way of sending--

basically just communication standard protocol like you said.

KAREEM ZIDANE: Exactly.

And let's actually see exactly an example of this right now.

So I have just one file here called index HTML.

And these are the contents.

Let me zoom this in a little bit so we can see better.

And these are actually the contents of my index HTML, just a simple HTML--

COLTON OGDEN: Right OK.

KAREEM ZIDANE: --file.

And then I'm going to start an HTTP server to serve this file for me.

And then I'm going to make a request.

And I'm going to see what I'm sending and what I'm getting back.

COLTON OGDEN: OK.

KAREEM ZIDANE: Right?

COLTON OGDEN: Cool.

So HTTP server, what kind of program is that?

Does that comes stock on Linux?

KAREEM ZIDANE: No, HTTP server is actually a node package.

COLTON OGDEN: OK.

KAREEM ZIDANE: You can install it.

If you have node installed and NPM installed,

you can install it using npm install -g http server.

COLTON OGDEN: Ah, OK.

KAREEM ZIDANE: And it doesn't have to be the HTTP server.

It can be any other static web server.

But this tool is also actually installed already

on labs, and on the sandbox environment, and also on the CS50 IDE.

COLTON OGDEN: Can people watching right now

get access to one of those sandboxes and mess around with Flask themselves?

KAREEM ZIDANE: Definitely.

Yeah.

If you go to sandbox.cs50.io, you can choose Flask from here.

COLTON OGDEN: I plugged it in the chat, everybody, the sandbox.cs50.io link.

If you want to mess around with Flask, but not

actually have to install it on your physical machine,

definitely check that out.

Also, lethalshotgg, mdobra71, and [? mansonjai, ?]

thank you very much for following.

KAREEM ZIDANE: Yup.

COLTON OGDEN: We'll have to come back to the chat in just a second.

I think maybe once we've gotten started we can read up all the messages.

We have a few.

We a little bit of a backlog to catch up to.

KAREEM ZIDANE: Yup.

COLTON OGDEN: But, anyway, you were saying?

So we have HTTP server.