BRIAN YU: We'll go ahead and get started today. Welcome back, everyone, to the second day of CS50 Beyond. 

So for just a recap for those of you who weren't here yesterday, or just as a refresher, yesterday we introduced the world of building web pages, looking at HTML and CSS, diving a little bit beyond what CS50 originally taught, looking at things like mobile responsiveness, things like media queries for determining how styling should look on a big screen or on a small screen, looking at SaaS, a technology we can use to generate CSS code based on variables and nesting and other different, more advanced features that CSS by itself doesn't offer. 

We looked at different features of HTML5, more advanced ideas like the data list for doing auto completion. We looked at regular expressions which are ways of using a pattern to define a set of strings that are of accepted inputs, for instance, that you can use in an input field as a pattern when you're trying to validate some sort of input, for instance. 

And then we also took a look at Git, a version control software that we can use to track changes to code, keep track of modifications so that we can go back, branch off, and try different things. 

So we covered a lot of topics yesterday. Any high level questions about yesterday's topics before we dive into today? If you're having specific technical problems, feel free to flag down a staff member during project time. We're definitely happy to help you with that. But questions about anything as you were thinking about these ideas yesterday that didn't come up? 

OK, well, definitely feel free to bring them up if they do come up. 

Goal of today is going to be to explore, moving forward, web application design with Python and Flask. So Python and Flask are both ideas that we saw in CS50-- Python being the language that we were using to build web applications-- but also, more generally, a very useful practical programming language that's quite popular nowadays. And then Flask being a framework in Python that we can use in order to build web applications easily, efficiently, and effectively. 

So we saw both of them in CS50. We'll do a bit of review of them in case you're a bit rusty on them in order to be a bit of a refresher. We'll also look at some more advanced and more sophisticated techniques and concepts. Definitely feel free to stop me at any point with questions. 

And of course, if you go to the course website as you did yesterday and click on that feedback link, and just have that open on your computer, definitely feel free to use that as a feedback mechanism today as we go through today's topics. If things are making sense, press the green button. If things aren't making sense, press the red button. That just lets me know-- perfect-- that you're following along with things that I'm saying or if you need some clarification, need me to slow down, or explain something in a slightly different way. 

Structure of the day is going to be pretty similar to what we did yesterday. We'll have some morning time to talk about Python and Flask web application development. I'll provide some examples. 

Then we'll have a bit of a morning project. This one will be a little more structured than yesterday, where it was sort of free form and you could choose whatever you wanted to. We'll propose a project for you to attempt to try. We'll start it together so that you can get a sense for the basic building blocks, and then leave most of the features up to you to implement. 

And then later this afternoon we'll take a look at some other Python features, looking at the world of object oriented programming, another programming paradigm you might be familiar with from other languages, like Java for instance, taking a look at how you can use Python in object oriented programming, which is quite popular nowadays. And we'll also take a look at deploying websites to the internet. 

And in particular, we'll look at building web-based games and look at the idea of artificial intelligence, something that might come up if you took a class like CS182 here at Harvard, which is the artificial intelligence class, looking at ideas of, OK, how do you program a computer to behave intelligently. And in particular, in the context of a web-based game, how can you program a computerized AI to be able to figure out the best move to make in any particular situation. So we'll take a look at that later this afternoon as well. But all of that awaits. 

Questions about directions that we're going today or anything that I've covered so far? 

All right, with that, we'll go ahead and get started by just taking a brief look at Python. The beginning of this is going to be largely review for if you remember in programming in Python from way back in the days of CS50. 

And so the most basic Python application that we could write-- I'll create a new file, we'll call it hello.py-- just looks something like this. We would say "print" and then "hello world." Simple programming like this. But in the context of this, there are at least two important ideas here. Print, in this case, is a function. 

And functions you can just think of as these abstractions, these pieces of code that perform some sort of behavior. And I say abstraction in the sense that I don't really care how Python has actually implemented the Print function. I just need to know that the Print function exists and I can provide it a string, some sequence of characters like "hello world," and when I run this program-- and I can run the program by running a command just like Python, hello.py-- when I run that program, I end up getting "hello world" printed to the terminal screen. So fairly straightforward. And that was the most basic Python application that we could write. 

But, of course, like all programming languages, Python has many more features than just that. And one key idea that we wanted to explore was the idea of variables in Python. And variables in Python, if you recall, from CS50, differed from variables in C in what way? There are number of ways, but what's one important way in which variables in C and variables in Python were different? Yeah. 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: Yeah, you don't need to declare the types of variables in Python. And Python has a number of different variable types. So I have integer types. So I could say a equals 28, for instance. There are floating point types, just like C has. I could say b equals 2.8, for instance. And that's a floating point number, a decimal number. 

But it also has other types. It has Boolean values, like true and false. So we would say c equals true. Capital T for true, capital F for false, is just the way that Python happens to do Boolean variables. It has a capital T for true, capital F for false. 

There are a number of different types for variables. Python even has what's called a NoneType, which is a type used to represent the absence of a value. So I could set a variable equal to None. And None just happens to be a value of its own special type called NoneType, that just represents the fact that there is no value in a particular place. 

So you might imagine situations, which we'll in fact see later on today, where it's valuable to have some sort of representation of the idea that you have no value stored in a particular location. 

Now, just because we don't have to declare the types of variables in Python, doesn't mean that those types don't exist. And if you try and perform operations on values that the types don't line up for, or don't quite match up for, you could, in fact, run into errors there as well. 

So, brief recap of variables, the idea variable types. The next thing that we saw when we were exploring Python in the case of CS50 was looking at conditions. So we would see examples like, all right, if x is equal to a value like 10, I could have conditions and say, OK, if x is greater than 0, then print x as positive. Elif, was Python's shorthand for else if, if x is less than 0, then I'll print x is negative. And then else, I'll print, OK, x is 0. If it's not positive and negative, it has to be zero. 

So important things to notice here are the keywords if, elif, and else are the conditions for if something is true, otherwise, if something else is true, else if something else is true. And importantly all the code inside of the if blocks are indented. And this indentation is important in Python. Unlike other languages, like [INAUDIBLE], where indentation and white space is optional, in Python it is mandatory. The indentation is how you tell the program which pieces of code are located inside of which blocks. 

And so I could run this program, run Python, hello dot pi, in this case. And it says x is positive, which it is. And now of course, this program is going to behave exactly the same way no matter what it is that I have typed into the program-- because I'm not prompted to type anything into the program. 

So I could make this program responsive to input. I might want to prompt the user for OK, please type in a number. And when you type in a number, then we're going to tell you if it's positive, negative, or zero. And in CS50 how did we do this? 

What was the function we used in order to get input in integer from the user? Anyone remember name of that function? Name of the function that gets an integer? 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: Someone said it. Get int? OK, I think I heard someone say it. Get int was the function that we used in the CS50 library in Python in order to get an integer from the user. Of course, that function is only in the CS50 library. 

You can install the CS50 library. It's pre-installed in CS50 IDE, but you can install it elsewhere in order to get access to that get in function. But in practice, most computer installations don't have the CS50 library installed by default. And so how would you get input from the user if you wanted to? 

Well, Python 3, the latest version of Python at least, comes with a function called input. And the input function basically just gets input from the user, not something we really explored in CS50, but something you can do. So I could say something like, OK, type a number. I'm asking the user to type in a number, prompting them for some sort of input setting, that value equal to x. And then checking to see if x is positive, negative, or zero. 

And so I could run this, run Python, hello dot pi. Type in a number. I'll type in 0 for example. And OK, I get an error. This is the first example of a Python exception that we've seen. 

And the type of this error, what kind of exception has been raised-- is the terminology we'll use-- is a type error. And here's the type error, greater than symbol not supported between instances of str, short for string, and it. And so this is an exception that highlights what I was mentioning just a moment ago, that even though we didn't give types to variables explicitly, those variables still have types. Namely, what I'm comparing x greater than 0, 0 is an int. And x, it claims-- Python's interpreter is saying-- is a str, a string. 

And that's ultimately because this input function asking me to type in something at the command prompt is asking for just any input, which could have been a number, but it also could have been some text. I could have typed hello or hi at the command prompt. And it would've been valid input. And so what I need to do in order to make this work is something called typecasting, the idea of converting something from one type into another type in order to make it work. x right now is a string. 

And I want to convert it into an integer in order to allow myself to do these comparisons. Is x greater than zero or less than zero or so forth? And the easiest way to do that is just use a function called int in Python that take something and convert it into an integer. So I'll wrap this input function inside of an int function. 

And so here is the idea that I'm taking the output of the input function and passing it as input to the int function. And so it's often useful to think about functions in the way of what are the inputs to this function? What is the output of the function? And thinking about trying to relate those things together. 

As you start to build more complex, more sophisticated programs, you'll begin to use more and more functions. And being able to reason about OK, what is the input to the function? What is the output to the function? Is ultimately going to be quite helpful. 

So now I type Python hello dot pi. I type a number like zero. x is zero. It was able to convert my input into an integer, and then run some comparisons, as a greater than or less than zero, for instance. If I type in a positive number, 28, x is positive. 

OK, great. I type in a negative number, a negative 50. OK, x is negative. It will be able to perform these comparisons on the fly. 

Now, of course, if I type in something else-- I type in beyond, just some string for instance-- now I'm getting a different exception that's getting thrown. I'm getting a value error. Invalid literal for the int function with base 10 beyond. In other words, it can't take the word beyond, the string that I inputted, and convert it into an integer. 

And so what's Python going to do about it? It doesn't really know what to do. So it raises an exception. It causes an error. And that error is a value error. 

So we've seen a lot here. We've seen getting input. We've seen functions input and output. We've seen Python exceptions and how to handle those. Questions about anything so far? 

How do we feel about it? If you could just use the feedback for, let me know are things making sense generally? Is this familiar? All right. 

Great. Seems like most of this is review, most of this familiar. And we'll move on to other data types as well. 

Important in Python are the idea of sequence data types, the idea that data type don't need to just contain one value. They can contain sequences of values. So I could have a name for instance. I could say OK, name is going to be Josh, for instance. And Josh is us type str, a string, but it's also a sequence of characters, whereby if I wanted to print out the first character in Josh's name, I could say OK, print out name Square Bracket zero. 

And if I were to run this program, it would print out just the letter J, printing out the first item in this sequence. And a string is the simplest example of a sequence that we've seen. It's just a sequence of one character after another after another. 

In addition to sequences being strings of text, we also have lists are also examples of sequences in Python. So I might say OK, we have multiple names. And so we have Krishna and we have Athena and we have Julia as examples of a list of possible values. And if I wanted to get the first item in this list for instance, I could say OK, print names Square Bracket zero. 

Remember that list as with arrays and C are zero index. The first element is item number zero. And if I print that out, it prints out Krishna, the first name on the list. And I can say print names one to get the second item in the list. It gets Athena. 

I print names two to get the third item in the list. That's Julia. There are other tricks that you can do here as well. If you want to go backwards for instance-- I don't want the first item in the list. I want the last item in the list-- you can use negative numbers. 

So if I say print names negative one, for instance, that's going to say, OK, let's go backwards and get me the last item in the list. So if I print out names Square Bracket negative 1, that's going to print out which name? Julia. 

Great. So that's the last item in the list. Prints that out because that's Square Bracket negative 1. 

The other important sequence data type that will often see is called a tuple or a tuple. You'll hear it pronounced both ways. And that's useful for immutable sequences, sequences that cannot change. And so you might imagine for if you have a fixed number of things like a coordinate pair, like an x-coordinate and a y-coordinate, a tuple or a tuple might make sense for here. I say coordinates equals like, 2, 8 x-coordinate y-coordinate. 

And now I have a first item and a second item. I can index into them with square bracket 0 square bracket 1 to get it the first and second items respectively. And I can use that syntax as well. This is also particularly useful if you ever need a function to return two values. 

Normally, a function can only return one thing. But if that one thing is a tuple, you can take that topple and split it up into all its component parts. So you have the ability to effectively have multiple things that you're returning from a function by taking advantage of this functionality. 

Questions about anything so far? Yeah? 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: Good question. So the question is why would you use a tuple instead of a list of size two? So first of all, tuples don't necessarily need to be just two items. They could potentially be more items than that. And so you could extend-- if I wanted a three dimensional coordinate plane, this could be two, eight, five, for instance. 

And you could have multiple things in sequence. It doesn't need to be just two. It could be any fixed number of them. But there are certain advantages, in particular, the tuple is immutable, meaning it cannot change. And so that can help to defend against certain kinds of errors if you don't want to allow a data structure to be able to change. 

And there are certain operations you can perform on them that are more efficient. So a lot of things are just trying to figure out which is the right choice of data structure to fit the type of thing that you're trying to do. And we'll take a look at other data structures in just a moment as well and compare their advantages and disadvantages. Yeah? 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: Good question. Question is do all the elements in a tuple need to be of the same type? No, they do not. I could have two, eight, and hello, and that would be a totally valid tuple in Python. They could be of any type. 

Same is true of lists. You can have them be of any type. They don't necessarily need to be the same. However, oftentimes, in the case of lists for consistency, you will want them to be of the same type, because the general idea of the semantics of a list is you should hopefully be able to treat all the elements in the list the same way. Usually, it's a list of things that the same type of thing, whereby you'll have a list of names or a list of student objects. 

And we'll look at object oriented programming later. And that's actually another case where it might be useful to differentiate between a list and a tuple, that frequently you use a list when you've got a whole bunch of things that are of the same type of thing and you want to treat them the same way. And a tuple is often more useful if you have a bunch of different types of things, but you still want to encapsulate together in a single representation. Good questions. Other things? 

We'll talk about loops and functions, and then we'll dive into a couple more advanced features. So in order to loop over a sequence of things-- so I have a list of names. I have Krishna Athena, Julia, and I'll add Josh there too. If I want to loop over all of them, the easiest way to do that in Python is to say for name in names. What I'm doing here is I'm saying I want to loop over this array of names and give each one the name name. 

And I'll just print out that name. I'm looping over my list of names, calling each item in the list name and printing that out. So if I run this program, I get all the names printed out one line at a time. If I wanted to print something out a little fancier, I could say like, hello-- if I want to say hello to the person's name, I can use what's called a Python format string, which you probably remember from CS50 whereby I and use these curly braces to say hello. And then in Curly Braces name, I have to put an F in front of the string to say this is a formatted string. 

But the curly braces are basically signifying I would like to plug in some value here, in particular, I want to plug in whatever the name is, whatever the value of the variable name happens to be. And I'm printing that out. So printing hello common name. 

I print that out. We get hello, comma, and then each of the names, a formatted string. And certainly, we'll see more formatted strings later on too. 

So you can use for name in names to iterate this sort of idea to iterate over any kind of sequence. If instead of name, we just had a single name. And OK, a name equals Julia. I could say for character in name, let me go ahead and print out the character. Name as a sequence, it's a sequence of characters. 

And if I print out each character one at a time, what I'm going to get is just one character, one on each line, one at a time. So that works for those types of sequences. It'll work for tuples as well. You can do this kind of iteration over any type of sequence. 

You can also iterate over just a range of numbers. A range is a particular type of sequence. So I could say for I in range 10, print I. Range 10 is just a sequence. It's going to generate numbers between 0 up through, but not including 10. 

So 0 up through 9, for instance. So if I say for I in range 10, print I. That'll give me 0 all the way through 9. 

I can also change the starting point of a range if need be. So if I say for I in range 5, 10, that's going to start at 5. Go all the way up through 10, but not including 10. So I do that. And actually, I'll just put both side by side so you can see them both. 

I get 5, 6, 7, 8, 9. So it goes from 5 up through, but not including 10. And range can even take a third argument if I want to, which is the step amount, in other words, how much to increment by after each step. So I could say I in range 0 through 100 stepping by fives. So that's going to take me from 0 all the way up to, but not including 100, going five at a time. 

And if I run that, I get 0, 5, 10, 15, 20, all the way up through 95, because after the next five it would hit 100. So a bunch of different ways to iterate over sequences of values, whether they're ranges or strings or lists, or other types of sequences. Questions about any of that so far? Yeah? 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: Oh, good question. So the question is what if I wondered all the numbers to show up on one line instead of each one on a separate line? So Python's print function by default will always add a new line after the end of the statement. But you can change that. And so we'll talk about functions in just a moment. 

But Python allows for functions to have sort of optional arguments. And in this case, print has an option argument called end, which is what should be at the end of the line? And the end value by default is the new line character, backslash n, which you might remember from CS50. But I could change that. I could make end be instead just the space character, just one new space. 

And I'll go from up to 30 maybe, so as not to take up too much space. But for if I run this program now, now I get 0, 5, 10, 15, 20, 25, all in the same line separated by spaces. And you'll notice in my terminal prompt is even on the same line, because nowhere in my program did I say OK, go on to a new line now. It's always printing out a space at the end of each one. 

Good question. Other things? How about I take any like, how do I do this in Python if there are things that you're wondering about? All right. 

We'll take a look at functions and some data structures as well. Actually, I'll do data structures first. So oftentimes in Python you're going to want to store data in some way. And there are a number of different data structures. And it's important to have a grasp of what the different data structures are and what makes them different. 

And so one of the simplest data structures is a set. So we have a list, which is an ordered sequence of elements. A set is an unordered collection of elements. And that collection doesn't have any order, and also all of the elements of the set are unique, much like a set in mathematics if you're familiar with it, a bunch of unique values that are not in any particular order. 

I can have a set of things. S is a set. And I can say something like, OK, let's add the number one to the set. And let's add the number 28 to the set. And let's add the number 50 to the set. 

And now let me print out the contents of this set. So I'll run this program. And it's giving me this set of things 1, 50, and 28. Notice this is not the same order as the order that I put these values in. The set doesn't maintain any sense of order. 

It just knows OK, it's got the number 1 and 50 and 28 in it somewhere. And that's useful to me if I want that collection of things to be inside the set. And so now I can ask questions like, print out if 28 is in the set. Is the number 28 in the set? Or not is 28 in the set. 

And I'll try that. OK, true. Yes, 28 is in the set. Is the number 29 in the set? Try that. 

Run that program. False. 29 is not in the set. And sets are useful, because looking up whether something is in a set is more efficient than looking up whether something is in a list. Looking up whether something is in a list happens in what we used to call linear time. 

Basically, if you want to check if a value within a list, you're going to have to look through that entire list from start to potentially to the end, looking at one element at a time, checking. Is this element in the list? Is it in the list going all the way from start to finish? In the case of a set, the values are stored slightly differently. They're stored in something akin to what a hash table is. 

If you remember hash tables from CS50. So it's much more efficient to look up is this number inside of the set? Much in the same way that in CS50 speller problem set you were able to use a hash table potentially, to say is this word in the dictionary. And you were able to do that efficiently by the use of a hash table. So looking up whether something is in a set, ultimately more efficient than doing that same look up in a list, for example. 

So that can be cases where a set is oftentimes more helpful. Now a set just stores a whole bunch of values. Oftentimes, in Python or in JavaScript or in other languages you'll use you'll want to store not just values, but you want associate keys and values together. In other words, you want to store some sort of label or some sort of identifier, and some sort of value for each one of those identifiers, for instance. And so this is the idea of a Python dictionary, or what you might equivalently call a JavaScript object, which we'll look at tomorrow. 

But a Python dictionary is a very important data structure that will come up very, very frequently that associates keys and values that associate some sort of name with some sort of value associated with that name. And so let's say I wanted to store the ages of different people. And so I might say ages is going to be a Python dictionary. And we have a name Alice. And Alice is 22. 

And we have a name Bob. And Bob is 27. And so here we've created a Python dictionary called ages. And in this dictionary the keys are Alice and Bob. They're the things that we're going to use to look something up in this dictionary. 

And the value is what we're going to get when we do that look up. Like, how old is Alice? If I wanted to ask that question, I would print out OK, let's take the ages dictionary, and let me look up Alice inside of that dictionary. I would like to see how old Alice is by looking up what value is associated with the Alice key inside of this dictionary. So I run the program. 

And OK, I get print out 22. That is the value associated with the key Alice. And if I were to look up Bob, run the program again. OK, 27. That's the value associated with the Bob key. 

If I were to look up Charlie, at another name I get an error. In this case, I got a different type of error that we haven't seen before, a key error, meaning the key Charlie isn't present in the dictionary. I tried to look up a key that did not exist. And so I ran into an error there. I could add Charlie to the dictionary either by updating it here or I can also update a dictionary after I've already created. 

I could say OK, age is Charlie. Charlie is going to be 28, for instance. And so I print age is Charlie. And now OK, no more key error. Charlie is in the dictionary. 

And Charlie is 28 years old. So Python dictionaries can be used for that as well. Questions about sets, dictionaries, data structures, more generally? Yeah? 

AUDIENCE: Would you remove or edit existing keys in the dictionary? 

BRIAN YU: Great question. Can you remove or edit existing keys in the dictionary? Absolutely. So to edit a key for instance, if I want to say it's Alice's birthday, so Alice's birthday, the hash tag just get a comment. We're going to the age is Alice plus equals one, meaning take whatever Alice's age is, add one to it. 

You could also just set it equal to some other value entirely. But now if I were to print out Alice's age, we get 23, as you might expect. I was able to update the key. And you can also delete something from a dictionary by saying dell is the keyword here. So for delete-- so if I delete age is Bob, and now let me just print out the ages. What I get is Alice is 23 because she had a birthday, 22 to 23. 

Charlie is 28, as I said on line three. But Bob is no longer inside of this dictionary. Remove that from the dictionary. Good question. Other things? Yeah? 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: Good question. So the question is can you only go keys to values, or can it go the other way around? Long story, short, the dictionary is only designed to go from key to value. You look up the key and you get the value. But certainly, you can write algorithms that would give you the answer to the question that you're asking. 

So it is important to think about which direction you want it to go. Usually you want what you're looking up to be a key that you're going to know for sure, and the value is the value that you care about identifying. Other things? All right. 

We'll look at a couple more things before we turn to actually building web applications. Just want to re-familiarize everyone with Python first. We'll talk about functions. And so functions-- I might create a function-- let me create a new file called functions dot pi. And let's create a function called square that just takes a number and squares it, returns the value of x squared. 

And that function is going to look something like this. We define a function called square. In parentheses is the input that it takes, a variable called x. And what we return from the function is just a value x times x. We multiply x by itself. 

And now what I'd like to do is print out the square of 10, for instance. So I'm passing the number 10 as input to the square function, running that function. Whoops, wrong file. Functions dot pi, and I, in fact, get the number 100. Oftentimes, a common paradigm that you'll see is whatever the core code of your Python script does goes inside of a main function. 

And you'll often see the main function at the top of the file, actually. And then at the bottom, you'll see some lines that look like this. If name equals main, then run the main function. And what line seven and eight are basically saying is if name equals main is asking am I running this file is the script that I'm running, as opposed to the script that I'm importing elsewhere? And if so, then go ahead and run the main function. 

So if I run this function it's going to produce the same output, just produce the number 100. But the reason why I might put things in a main function separately is because in a separate file now I could say something like, all right, from my function's module, this other file located here, let me import the square function. And then I can do things with it. Let me for I in range 10, I'll print out I squared is square I. 

Basically using a formatted string, taking whatever the value of I is and saying I that value squared is, and then in curly braces plugging in a new value, plugging in the value of applying the square function to the value I to get whatever the output of that is. And if I run Python hello dot pi, I end up getting 0 square to 0, 1 squared is 1, so on and so forth, because I'm able to use the square function defined elsewhere. But if in functions dot pi, I hadn't done this main function thing and I just said OK, let me print out square of 10 at the bottom of it, and then when I run Python hello dot pi, I'm going to get this extra 100 printed before any of the stuff I actually care about in hello dot pi. 

Because this 100 happened when I imported functions dot pi, and it was running the code from top to bottom. It ended up running this print square of 10 line as well. So the reason why we put things in main functions is so that we can import that module into other modules and still be able to use all those functions. 

So if you're wondering why we saw that in CS50, that would be part of why. Questions about functions? Yeah? 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: The F is for formatting. So the F in print stands for formatted string. And I use that because I want to be able to use these curly braces to say plug in some value here. I want to plug in I and I want to plug in the value of the square of I. And those are Python values that I want to insert into the string. 

If I didn't have the F there and I tried to run this, what I would get is literally printouts of Curly Brace I squared is Curly Brace square I. And that's of course, not what I want. Good question. Yeah? 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: So the question is what is exactly if name equals main doing? What it's doing is it's not going to run the main function unless this is the script that I am running. So any code inside the main function, whether they're print statements or calls to other functions or whatnot, aren't going to run unless I'm actually running functions dot pi. And so if I'm importing it, then that code just never is run at all. 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: If any variables that are set inside the main function, those are not going to get carried over in the import. 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: Right, right. I think there's a question over here somewhere? Yeah? 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: Good question. So the question's about importing things from different locations. That gets a little bit trickier. It has to do with sort of where Python is looking for files. 

There are ways of getting around it. You can import from sub-directories or you could sort of go backwards in order to get something from a parent directory, and then go into sub-directories. But that tends to be a little less common, but possible. 

So one last thing I'll touch on that we didn't really get a chance to talk about in CS50, but that's good to know, is this idea of how to handle these exceptions. We've seen a lot of exceptions or errors in Python. We saw the key error when I tried to look up Charlie in the dictionary, but Charlie didn't exist. I saw the error that I got when I was trying to compare a string and an int to see one was greater than the other. And we dealt with all these things. 

There are all sorts of different errors. A really easy error to create is x equals 5 divided by 0. Division by 0 is not allowed. So what's going to happen if I try to divide by 0? If I try to run Python hello dot pi, I get a special exception that's just called a zero division error. 

It's like, OK, you can't divide by zero. Sorry about that. And so what could you do to try and deal with these potential exceptions? Well, one way you could try and deal with this problem is to add all these checks. So if I said OK, x equals 5, y equals 0, z equals x divided by y, I could write a check to say OK, if y is equal to 0, then print like, sorry else, then do z is equal to x divided by y. 

And we could check for the errors before they happen. But a common Python paradigm is just to let the exceptions happen and deal with the exceptions when they come. And so the syntax for that's going to look something like this. I'm going to say something like, try z equals x divided by y. And when I say put everything inside of a try block, what I'm saying is run this code. 

But I'm going to try to run this code. Like, there might be some sort of exception or error that comes about when I'm running this code. So let's just try it and see what happens. And run it normally. Except if we get this particular exception, the zero division error, then go ahead and print out sorry, you can't divide by zero. 

So we're saying inside of this except block, if a zero division error happens and the exception takes place, what is it that I want to do about that situation? Well, in this case I just want to print something out. And so I go Python run this program, and immediately I get sorry, you can't divide by zero. Instead of getting some error, like the zero division error, it just said OK, sorry. You got a zero division error. 

It went down to the except block and then it printed this out. And so you can imagine that this could be potentially useful. If we go back to our example from earlier whereby I had ages and I had Alice was 22 and I had Bob was 27, and I say OK, name. Let's get some input. Who do you want to look up? 

And I'm going to print out a string. I'm going to print out name is ages name years old. I'm printing out someone's name is, and then looking them up in the age's dictionary with the name is the key, getting the value, which is the age, name is this number of years old. And let's print that out. And so I try that. Who do you want to look up? 

I want to look up Alice. Alice is 22 years old. Great. I want to look up Bob. Bob is 27 years old. 

All right, I want to look up Charlie. Key error, Charlie. This is the key error we saw before. Charlie is not in the dictionary. So when I try to look up Charlie, it doesn't quite work. 

So how can I deal with the situation? Well, one way I could deal with it is OK, if the name is in the age's dictionary, then print it out, else, print sorry, name is not in the dictionary or in the-- yeah. It's not in the dictionary and make that a formatted string. So I could do that. If name and ages is asking is this person's name inside of this dictionary of ages, and if I run this and type in Charlie, I get OK, sorry, Charlie is not in the dictionary. 

But a more efficient and what I might call a more Pythonic way of writing the same code is just to say you know what? Try to do this. Try to print out this name is this number of years old. Except if we get a key error, then that must mean that we couldn't find the person's name in this dictionary of ages that we were looking up. And we can say OK, sorry, this person's name is not in the dictionary. 

Sit around Python hello dot pi. Who do you want to look up? We want to look up Charlie. OK, sorry, Charlie is not the dictionary. And so this exception handling mechanism is something you'll see quite frequently in Python. 

Python is designed to let you take advantage of this feature very readily and very easily. And so you'll often see people try and deal with errors in this particular way of just trying code and then catching that error if need be. Yeah? 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: Good question. The question is, do you need to define what type of error you're looking for? You can be less specific if you want. I'm being very specific in saying when you get a key error exception, you should deal with it in this way. But you could generalize it to say except any sort of general exception in order to catch errors more broadly. 

But then you need to figure out a way of dealing with many numbers of different kinds of errors. So generally, if you can be specific, it's a good idea to be specific about what it is that went wrong. Yeah? 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: Yeah. So we could do-- so the question is what if I wanted to differentiate based on two different types of errors? So let's do a key error. So name is this number of years old. And let's say for whatever reason I wanted to set x to 10 divided by age is name. 

I don't know why you would want to do this. I'm just sort of creating a contrived example where we might get two types of errors. But the type of error we might reasonably get here is a zero division error. If for instance Charlie is 0 years old, and I said OK, run Python. Who do I want to look up? 

Alice. Alice is 22. If I look up someone who's not in the dictionary like David, I get sorry, David it's not the dictionary. But if I look up Charlie, I get Charlie is 0 years old, but then I get to zero division error, a different type of exception. And I can handle that separately. 

I can say except zero division error and print sorry, the age is 0 or something like that, handle both of those exceptions. So now if I type in David, I get sorry, David is not the dictionary. But I type in Charlie, and I get Charlie is 0 years old. And then instead of getting a zero division error, I get sorry, the age is 0. 

So you can chain these except blocks together. It's saying if I get this type of error, do this. If I get that type of error, do something else. And so you can exception handle in that way as well. 

All right. Covered a lot of topics just now. How do we feel about that generally? All right, mostly feeling good. 

Fantastic. In that case, let's go ahead and turn to Flask. A question first before we turn to Flask. 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: Good question. So the question is what if I want to do more code after all this exception handling? You can just add it after that tries and excepts are done and just don't indent them. I can say this is the end of the program. And then no matter what happens, if it works, I type, what do you want to look up? 

Alice. Alice is 22. This is the end of the program. I look up David. David's not the dictionary. 

Still get to the end of the program. So any code after that try except will still run. Other things? All right, so let's go ahead and create a Flask application. 

And so recall that Flask was a Python framework that we can use to very easily and very quickly build web applications and begin to scale down. Yeah? 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: Yeah sure. Hello dot pi. And if you want to see this as well, I haven't yet posted the source code examples for this morning, but I will soon as soon as we're done with this morning session. All right. So Flask is what we're going to use in order to build web applications. 

We saw a little bit of it in CS50. But we're really going to dive more into it today and tomorrow, in particular, and the day after as well. And so in order to create a Flask application, we're going to store code in a file called application dot pi. And the simplest of Flask applications, as you might recall, looks something like this, from Flask import Flask-- so you'll need to install Flask on your computer. If you have the Python Package Manager, you can just write PIP or PIP3 install Flask to install flask under your system. 

And I'm going to say app equals Flask name. In other words, create a Flask app from this file. I want this file to be the host for a Flask application. 

And the entire internet is based on this idea of routing, the idea that if I go to some website slash a particular route, that takes me to some different logic on that website. If you go to CS50 dot Harvard dot edu you get the normal CS50 college web page. But if you go to CS50 dot Harvard dot edu slash beyond, go to the slash beyond route, then you're taken to this course's web page. And so depending on your route, different logic happens, the user sees different content. 

And so the entirety of Flask is based on this idea that if different routes happen, we should be running different code or different functions. And so I'm going to say at app dot route slash. In other words, if I just go to the slash route, what is the code that should run here? And I'll say OK, we'll run a function that I'm just going to call index. Could be called anything. 

The function name is sort of irrelevant, that you can reference things by it, which we'll maybe see a little bit later. And here I can say OK, return hello world. Very simple, very basic web application that's basically saying if someone goes to the slash route of my web application, I want to say hello world to them. I can run this application by running Flask run. And so I run Flask run. 

I end up getting this URL. I'll go out and copy this URL, paste it into a web browser. And what I see is hello world. I didn't go to any particular route. I just went to the default route, and I get hello world as a result. 

Now of course, I could add other routes to this as well. If I wanted to, for instance, add a route that didn't just say hello world, but said hello to someone in particular like Julia, for example-- Julia is sitting right in front of me. So she's in all my examples today-- app dot route slash Julia for instance, I can run a special function which is called Julia that's going to return hello Julia. 

And so if I run this web application now-- I'll go ahead and restart it-- or it probably restarts automatically-- but I refresh the page and it still says hello world. But if I change the URL, instead of just going to the default route, I go to the slash Julia route and press Return, then I get a different page. This page says hello Julia instead. 

So two different routes, each of which is connected to a different function. And each function return some different information that gets sent back to the user who's viewing the page. Questions about that so far? That much at least should be review from CS50. 

Now of course, there's a little bit of a problem here in that this is not a particularly scalable solution. So like, Athena just walked in the door, for instance. And if I wanted to say hi to Athena, I might want to go to this web application and go to web address slash Athena. But when I do so, I get a 404 error, not found. And I got this error because slash Athena is not a route on my website. 

I can't go to slash Athena because I haven't written a rule that says when I go to slash Athena, what code should I run? What should I actually do? So we can generalize this idea of instead of just having a slash Julia route the just says hello to Julia, maybe I want to be able to handle not just fixed routes, but variable routes, routes that take in some variable as their argument, and then produce some sort of different output. 

And so rather than just saying this is the route that is slash Julia, I'll say this is a route that's going to take a string value, and I'm just going to call it name. This function is going to be called hello instead of just Julia. And hello is going to take an argument. It's going to take the argument called name, where this name matches up with the variable that's inside of the route. And so what I'm doing here is creating a variable route. 

This isn't just going to accept slash Julia, but it's going to accept slash any string. That string is going to be called name. And that value name is going to be passed in to the hello function. And so now, rather than returning hello Julia, I can return hello and then a formatted string plugging in that name into that spot in the string. And so OK, what does that going to do? 

Let's go ahead and run the web application. I go to slash Athena. And it says hello Athena. It's taking the route that I plugged into this URL, and it's just placing it into the formatted string that gets shown to the user. I type in slash Josh instead, and it says hello Josh. 

I type in slash Krishna, it says hello Krishna. And so I can do this with any string. And it's just going to give me the result here on that page. Now of course, this isn't quite ideal because I would probably like for the names to be capitalized. It would look a little nicer for the user interface. 

But that's fine. I can use any Python logic I want in order to be able to generate the page that I want. So I could do something like name equals name dot capitalize. And I happen to know the Python has a built in function called capitalize that takes a string and capitalizes it. 

So I do that. And when I go to slash Krishna now, now I get OK, capital K. I go to slash Athena, capital A, Athena. 

And so here here's the web application that's doing that. I have a variable root that accepts some arbitrary string that's its input. And I can go to that arbitrary string. And when I do so, we're able to take some variable, make some modifications to it using any arbitrary Python logic we want, capitalizing some name, for example, and then returning that result. Questions about that? Yeah? 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: Great question! Question is if I still had a slash Athena route, which one is it going to do? So let's say I have an app dot route slash Athena that actually is an Athena route, definitely Athena. And this one returns some other content. I don't know what yet. 

But at the end, it gets some other content. She likes otters. Athena gets otters. This is the other one. So now what's going to happen if I go to slash Athena? 

Am I going to get hello comma name? Or am I going to get some other content Athena likes otters? Well, Flask is going to try to be intelligent about it. Flask is going to go to the more specific route if it can. And so therefore, if I go to Athena, what I get is some other content Athena likes otters. 

That is the more specific route, as opposed to the more general one, if we just went to the slash name one. So if I go to slash Julia, Julia does not like otters. It just says hello Julia. 

I don't know if Julia likes otters or not, but it's what we get. Good question though. Other things? Yeah? 

AUDIENCE: So when you find a variable [INAUDIBLE]? 

BRIAN YU: Good question. So the question is like, what is this string doing here? Does it need to be there? It does need to be there. So we do need to define what the type of the argument is. 

And the idea here is that that's going to allow us to be able to be more specific about our routes, that sometimes we might want for example, an int to be there, where you imagine a newspaper website for example, and you want to go to yesterday's paper, you might go to like, name of the newspaper.com slash 2019 slash one slash whatever the date is. You have some custom route that does that. And you can imagine that this variable routing gives you a lot of expressive capability that we couldn't have with just fixed routes where you imagine that sites like Twitter or Facebook, for instance, where you go to Twitter.com slash the person's Twitter handle. 

Twitter doesn't have some engineer that's writing out routes for every single possible user on Twitter. They just have some variable route that accepts any user name. And when any user name is typed in, it runs some logic in order to process that user name and handle it appropriately. Good question. Yeah? 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: Good question. So question is what if I wanted to have multiple variables inside of this route? Pretty easy to do. You can just say if I want to rather than just saying hello to one person, say hello to two people, I can do string name one and slash string name two. A little bit of a probably not intuitive user interface for these URLs, but that's fine. 

Name one and name two-- we'll go ahead and capitalize both of them. Name two equals name two dot capitalize. And we'll need to capitalize name one as well. And we'll say hello name one and name two. And so now I have slash some string slash them other string. 

They're both arguments to this function. And if I run this again, go to just slash Julia. OK, not found. There is no longer a route that's just slash some arbitrary string. The only routes that I have are the slash Athena and slash two names. 

I have to go slash Julia slash Athena. And then I get OK, hello Julia and Athena. Other questions? Yes? 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: What about optional arguments? Great question. So the situation might arise in which you don't always need something to be there. So maybe by default, if someone only gave me one name but didn't give me a second name, I just always want to say hi to Josh no matter what. 

And so I might come up with a situation where a particular function has two routes that can get to it. I can say OK, maybe I provide string name one and name two, or maybe I just provide name one. Either way, I still want to run this code. But if I ran this route here on line 10, just providing a single name, name one, then on line 11 when I try to run the hello function, name two is not going to have a value. 

And so I can give names two a default value. I can say all right, name two by default, is going to be Josh. And so what happens now? Now if I just go to Julia, press Return, I get hello Julia and Josh. I didn't provide a second name, so it's automatically going to fill in Josh no matter what I type. 

I type in slash Krishna. And it's going to say hello Krishna and Josh, automatically putting Josh there every single time. And it's not unless I give it a second name, say Krishna slash Athena, then now it's going to say hello Krishna and Athena, filling in Athena as the variable for the second name. 

So you have this ability to give a default value to a variable if you so choose to do so. And this is not true of just Flask. You can give default arguments to functions anytime you're writing functions in Python. And you can find that that can sometimes be helpful. Yeah? 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: Good question. Does it allow regular expressions? I don't believe Flask does. 

There is a similar framework to Flask called Django, a little bit heavier weight, a little bit more full featured, that does this, but with a little more sophistication. And Django does allow for regular expression-based patterning based on those routes? Yeah? 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: Oh! Good question. What's the significance of the at symbol in at app dot route? What is it exactly doing here? This is what we call a Python decorator. 

There is an example of the decorators in the source code examples that we won't get to today. But basically what it's doing is it's taking the function and then wrapping the function in some additional logic. And the logic it's wrapping it in his logic that says listen for someone who goes to this route. 

And if you go to the route, then run this function. So it's a Python decorator is what that is. Other things? Yeah? 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: Can the default variable be none? Yes, the value of variable can be none. Name two could be none. 

But the situation you'll get there is, well, we're going to get an error in this case, because I go to slash Krishna-- I'm going to get an error because you can't capitalize the none type is the error that we'll get. But yes, you could, in theory, use none as the default value. All right, yeah? 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: Yep. You'll need to have Flask installed. But once you have Flask installed, what you can do via probably PIP3 install Flask to install Flask, you should be able to Flask run in the directory that has application dot pi. And then that will start up the web application. You might need to set the Flask app. 

So expert Flask app equals application dot pi, if it's not able to find which Flask app it should be using. So you might want to try that line if things aren't quite working. But a TS can come help you if you're having trouble with that as well. 

All right. A couple other things I want to talk about before we get to the project that we're going to be working on today. One is this idea of templates. And so oftentimes, instead of just returning a string like hello world, I want to return an actual HTML file. And so I'm going to import render template, which is a function. 

And rather than returning hello world, I'm going to return render template index dot HTML. And now on the desktop, I'm going to make a directory, a new folder called templates. And inside of the templates directory, I'm going to add a new file called index dot HTML. And in index dot HTML we're going to say HTML-- you can have any arbitrary HTML page. So now I type Flask run. 

I go to the route. And I get welcome to my website. Again, I went through that a little bit quickly. But basically what I've done here is I have in application dot pi render template, rendering some template to the user. This file, index dot HTML is located inside of a templates directory that's in the same folder as application dot by so I have index dot HTML, which is a template that I'm loading. 

And the nice thing about these templates is that I can now add arbitrary logic and variables to these templates, whereby I can say if I go to slash string name, and I want to say hello to someone's name, then I can render index dot HTML passing in the variable name. And I want to set that equal to whatever name is, but I probably want to capitalize it first. So name dot capitalize. 

And then in index dot HTML, and I'll go ahead and show both side by side, welcome to my website comma, and then in two curly braces I'm going to say name. And this is indexed. You probably remember from CS50 this is a special templating language called Ginga that just makes it easy to be able to template languages in order to generate HTML files that are dynamic, that aren't the same every time you open the page, but that actually change depending on the value of variables, for example. 

So now if I were to run this application, go to slash Josh, for example. Then I get welcome to my website comma Josh, where Josh was capitalized. Reason being, in application dot pi, I want to slash Josh. So Josh is the value of this variable called name. 

I'm capitalizing that name, passing it into the template as something also called name-- but it could have been called something different-- and then in the template I'm saying welcome to my website comma and then plugging in the name there. Questions about any of that? OK. 

In that case what I thought we'd do is try adding some conditions to this web page now. So one of my personal favorite stupid websites is a website called Is It Christmas dot com. Anyone familiar with it? A couple of people, maybe. Basically, it's a website that tells you whether or not it's Christmas. 

You go to is it Christmas dot com press Return. And this is the page. So very simple website. It just says no. On Christmas it says yes. 

And what I thought we'd do is create a website called is it New Year's just to get it the idea OK, how can we actually implement this sort of logic in Python and Flask in order to generate something somewhat interesting. And so in Python, there is a module called date time, which we're going to end up being using. And I'll important date time so that we can use it. And in Python, if I do something like date time dot date time dot now, that's going to give me a value that represents like, the current moment, January 20, 2019 that 11: 06 AM, and some number of seconds and milliseconds. It's going to give me all that information. 

If I do date time dot date time dot now dot month, I get just one. That is the month of the current time stamp. And I do dot day, and I get 20, which is the current day of today. And so I can use date time dot date time dot now to be able to answer these sorts of questions. 

So in application dot pi now, let's go ahead and say-- well, let me first at the top of the file import date time, so we can use the daytime module. And we'll say now equals date time dot date time dot now. And I'll create a new variable called is New Year's. And is New Year's is going to be set to now dot month equals one and now dot day equals one, meaning if both the month of what the time stamp is right now is January is January for one, and now dot day is also one, then it is New Year's. 

And then I'm going to load index dot HTML passing in is New Year's into the template. I don't need string name anymore. So I can get rid of that variable. So I just have this is New Year's variable now. And now inside of index.HTML I can add some logic. 

I can say if is New Year's, then-- I'll do H1-- yes else H1 no end if. So this right here is the Ginga syntax for creating a condition. Use these curly braces and percent symbols say if something, and then any arbitrary HTML inside of that, else some other condition. And then end if to say that's the end of the if statement. So we've checked whether or not it's a new year, and depending on whether it is or not, we're going to get some different output. 

And so I run this web application now, Flask run. I go to the web page, no particular route, press Return. And OK, it says no. It is not New Year's Day today. We could cheat a little bit and in application dot pi just to test it, we can say is now a day equal to 20, which is today? 

And if I try refreshing this page, then OK. Yes, today is January 20. It's going to show me that as well. 

So this sort of logic of logic we can use to be able to create conditions inside of our application to do different things, depending on what's happening in the program. Questions about that so far? Yeah? 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: Good question. So what language is the Ginga code? The Ginga code is actually its own language. Ginga is a templating language. It's a language that draws a lot of inspiration from Python though. 

So it's got a lot in common with Python. So a lot of the similar ideas of if and [INAUDIBLE] if and else from Python. Those keywords are also going to be present in Ginga. So you can do a lot of those same things in Ginga. Syntax. 

So all right. What I thought we'd do now is together begin working on what's going to be today's project. And we'll work on this together for a little bit, and then I'll set you free to work on a couple of features. Then we'll do our lunch break. We'll come back in the afternoon for a little more on Flask and artificial intelligence. 

And then we'll continue working on that project. And so the project that we're going to be working on today is we're going to try and implement a game of tic-tac-toe online. And so here is what the finished application is going to look like potentially. Uh-oh, import error. No module named Flask session. 

Let me-- if you ever get an import error where there's no module with a particular name, you can PIP3 install it. I'll go ahead and install that now. Flask run. Great. Run that application. 

Here's what the application is going to look like. We're just going to have a grid, where we can make moves. This grid is just an HTML table. And OK, it's X's turn first. X is going to play somewhere. 

O can play somewhere, X can play somewhere. O can not play very well. And if X plays here, then it says OK, winner of the game is X. It's a fairly straightforward game. 

You can add additional features. We'll add a button to reset the game too, which I'll have you implement. Play x there, O, X. Maybe o is not going to be very smart again. And later this afternoon when we talk about artificial intelligence and algorithms like min and max for being able to play games, we'll have you, if you'd like to, try a challenge, try to implement an artificial intelligence to play this game so that you can choose let computer make move. 

Click on that button and that's going to result in X playing in a particular position. it's going to say winner is X. We're not going to get there just yet, but we'll explain the algorithm later this afternoon so that if you'd like to try it. It's something that you can try but all right. Let's actually just start simple and start trying to create this web application. 

So in a new folder, I'm going to call it tic-tac-toe. I'm going to create a new file called application dot pi. And we're going to say from Flask import flask. In order to give everyone a different game, what we're going to use is something called Flask session. You used Flask session when you were doing CS50 finance. 

And you wanted to use CS50 finance to keep track of which is the current user that is logged in, so that different people logged in and could see their own different stock portfolios. In this case, we're going to use Flask session to do the same idea, where instead of just giving people a different account, anyone who's logged in is going to be able to play their own game online. So the session inside of the session we're going to store details about the current game. So we're going to say app equals Flask name. Then we're going to have a couple of lines that you might recall from CS50 finance. 

So you don't need to worry too much about, but they're just some configuration settings. We're going to say config session file der equals make D temp. Don't worry too much about these lines. I'll post some source code examples that you can copy this from so you don't need to feel like you need to copy them directly right now. I'll need to import from temp file import make D temp. 

Basically, if you're curious what this is doing is we need some place to actually store the session data. The session is data that our application needs to source somewhere. And we're just going to create a temporary directory in which to store all of that session information. We need to say should the session be permanent? And we're going to say no, it shouldn't be permanent. 

After some time it's going to expire. There are fancier ways of trying to set exactly what that time is going to be. And then the session type, what type of session is this going to be? I'm going to say file system. In other words, there are different ways of storing session information. 

I'm going to store all the session information just in files. You could store them in databases and cookies and other ways. Again, I wouldn't worry about any of these first couple of lines that I've written. These are just configuration to get the application to work the way we want it to. Here's where the interesting stuff starts to happen. 

So if I go to the slash route, we'll call this the index function. And what I want to do is get the board from the session. Like, what I probably want to do eventually is store the board, the tic-tac-toe board, inside of session square bracket board. 

And what might this board look like? Like, what sort of data structure do you envision that we could use to store this board? Thoughts? Yeah? 

AUDIENCE: [INAUDIBLE] 

BRIAN YU: Yeah. A list of lists. You might imagine that we have one list for each row. And each row is just going to be a list of three things, either x or zero, or some value to represent nothing is here yet, which might just be the none value. And so the logic I'm going to start you off with is say if a board not in session. 

In other words, if there is not already a board inside of the session, then I better create the new board. We'll say section board is equal to-- and right now you need to create an empty game board. And then someone suggested maybe this can be a list of lists. The first row has nothing in it. So we'll just say none, none, none. 

The second row also has nothing in it, none, none, none. The third row also has nothing in it, none, none, none. So we've created the board inside of the session. What other information do we need to keep track of with regards to the game? Whose turn it is. 

Great. And we could probably calculate that based on the board. But for simplicity's sake, let's go ahead and store that in the session too. I'll say session square bracket turn. We'll have X go first. 

So the current turn is just X. They're the player who is going to be playing first. And now let me go ahead and just render a return, render a template. We'll call it game dot HTML. And we'll pass in game is going to be session board, because I need have access to the board inside of my HTML template. 

And I also need to have access to whose turn it is. So turn is going to be session turn. So inside of game dot HTML I will have access to a variable called game, which is this list of all the current state of the board, and also a variable called turn, that represents whose turn it is right now. 

And so I'll go ahead and create a new folder called templates, inside of which I'll create a new file called game dot HTML. And OK, inside of game dot HTML I'm going to include some code. Dot type HTML, HTML head title is going to be tic-tac-toe. And inside the body of this application I'm just going to create a table. So a table. 

And what I'd like to do is create three rows, one for each row of the game board. And so I'm going to do a Ginga loop. And a loop in Ginga very similar to what a loop in Python looks like. I'm going to just say for I in range three. I want to do a loop that's going to run three times, zero, one, two. 

What do I need three of? I need three rows. TR is the HTML tag for creating an HTML row. So I'm going to create a row using TR. And inside of that row what do I need? 

What do I need in each row of the tic-tac-toe game board? A TD. TD stands for table data or a table cell. And how many table cells do I need? Three. 

Great. It's a three by three game board. So I'm going to have another loop in here for J in range three and four. And so inside of each one of these is going to be a TD, a table data cell. And for now, I'm just going to say like, this is a cell, just so I can test this out, see whether or not it's working. 

Oftentimes, a good strategy before you try to the entire thing is build a very small piece of it, just a game board that is three by three each filled with this is a cell, and see if that works. And then go from there. So I'll try this, run Flask run. Go ahead and start up the server. Named session is not defined. 

OK, I think I missed a line somewhere. Yes, actually missed a couple lines. First thing I need do is from Flask I need to import both render template and session. And also to enable sessions, I also need to say session app. So I added some additional imports that I needed. 

I want to be able to render a template. I want to be able to access the session. And to enable Flask session, I have to say create sessions out of this web application. Again, no need to worry about the specifics of that. These are lines you can very frequently copy anytime you need to use them. 

So let's try and refresh that, run it again. OK. I have the basics of what is eventually going to be a game board. Doesn't look much like a tic-tac-toe game board at the moment, but that's OK. We can add some additional logic here to be able to help us out here. And the logic is mostly going to come from styling code. 

So inside the style section of our website let's add some CSS that's going to make this actually look like a tic-tac-toe board. So for tables and table data cells, I wanted to have a border that is a one pixel solid block border. This is basically going to say around the table and around any data cells, go in and create a one pixel border around it. And so what's that going to do? It's going to give me something that looks like this. 

All right. That looks a little bit more like the game board that I expect. And actually, I wonder if I can get rid of table and just do round table data cells. All right, if I just go around table data cells, then I'll get something that looks like this. But what I can do is to make this look a little better, I'm going to add styling to the table. 

Say border collapse collapse. And let's see if that works. Yes, great. So border collapse is just a special CSS property you can add to a table that says if there are two borders next to each other, collapse them down into one. So without it before, the game board look something like this with all the lines sort of next to each other, but multiple of them. 

If I add in this border collapse collapse CSS property, refresh it again. All the lines sort of come together, so we actually get something that looks a little bit more like a game board. Questions about that CSS code so far? All right. 

So now what I want to do is I'd like to make these cells square. So for each of these table data cells, I'll give them a width and say 150 pixels. I'll give them a height, also 150 pixels. And I'll give it a font size of 30 pixels. And we'll center it, text align center. 

So width and height I'm setting to the same value, 150 pixels. So I get some big squares for the game. I'm setting the font size of what size the text inside the game board should be. 30 pixels is what the size of like, the X and the O is going to be. And then I'm sending that text, because I want the X's and O's always to be centered inside the game board. 

So I'll refresh this, and I get something far too big. Something that looks like this. Now, this actually looks like a game board, but in each one I've just said this is a set. 

So now I'd like to show something a little bit different, as opposed to this is the cell in every single one. But before I move on, question so far? All right. 

Let's go ahead and try now, instead of just saying this is a cell, what we can do is we can plug in the value of variables here, variables like I and J, for instance. So I can say double Curly Brace I comma double Curly Brace J to print out what the values of I and J are in any particular case. And so I'll refresh this page to show you what that's going to look like. And so all right. Now I've printed out the coordinates of each of the cells of my tic-tac-toe game board. 

In the upper left I have rows zero column zero. Next to that is row zero column one. After that I have row zero column two. Then I have row one column zero, one, and two, and then row two down there on the bottom. And so I have all these cells of the game board. 

And now what I'd like to do, instead of just printing out the cells, let's print out game I J. In other words, print out whatever is stored in the game board at row I and column J. And so when I refresh this, what am I going to see? Any guesses? 

This is what I get, A board full of nones, because inside of my array, this game board array, session Square Bracket board, I just filled it with a whole bunch of nothing, none values. If I were to change one of them and make it X instead, refresh that. OK, now it's X, because I'm able to change the board. But I'll leave it if none for now. What I'd like to do is not show the word none if nothing is there. 

If nothing is there, I'd like to show like, a link that says like play a move here. So let me go back. And so what's the logic here? I want to show the move if there is a move. 

But if there's no move, then I want to show a link that lets you play a move there. What sort of structure do I need? Yeah? 

AUDIENCE: [INAUDIBLE]. 

BRIAN YU: Yeah, some sort of conditional, somewhere I can say if game I J, in other words, if there is something in this spot in the game, then go ahead and print out whatever it is there, else [INAUDIBLE] if we'll go ahead and add a link, a HREF. Right now it's not going to go anywhere. I'll just have it go to pound symbol, which just takes you to the same page and say play. And then whose turn is it? The current turn is stored in a variable called turn. 

So I can print it out at this point in the game by saying play Curly Brace Curly Brace turn here. All right. Play X here. Play X here. And now I have that ability. 

These links are a little bit big, so I might want to add some styling code. Feel free to mess with the styling on your own. But I want to say, all right. For all the links that are children of table data cells, that font size should just be 18 point font, for instance. So those links now are just going to be 18 point font, instead of 30 point font. 

Refresh that. OK. This looks a little bit nicer. Of course, these buttons don't actually do anything yet. I say play X here, nothing happens. Play X there, nothing happens. 

What I'd like to do now is to have some ability such that when I click on a particular cell, it's going to play a move in that particular place. And so how am I going to do that? Well, in application dot pi I'm going to add some [INAUDIBLE]. I'm going to add a route. I'm going to go after the index route. 

I'm going to add a new route called play. And this route is going to be a variable route. I can go to different routes based on where on the board I want to play the next move. So I might say play int colon row. Int again, is the type. 

Row is just going to be the name of this variable. And then slash int colon call for column. And I'm just going to call this function play, which takes a row and a column. And for now, I'm just going to return-- right now I'm just going to return play to move. It's not going to do anything yet. 

It's just going to say OK, you played a move, even though you haven't yet. And so what this is going to allow me to do is if I go to slash play slash one slash one, then it's going to play a move in row one column one, or at least that's the goal. So now if I go back here unexpected [INAUDIBLE]? Did I not save? Better? 

I see the game board. I click on a place to play. OK, nothing happened just yet. Why? Because I didn't actually say these links should go to that route. 

So let's the next thing I need to do. Inside of game dot HTML, these links I want to go to this play function passing in some value for the row and for the column. There is some special syntax you can use here that we didn't see in CS50, but that's actually quite powerful, a function called URL for. It basically generates the URL based on the values that you want to plug into the particular spots. And so I'll show you the code here, just so you've seen it once. 

We're going to go Curly Brace Curly Brace to mean plug in something here. And I'm going to plug in URL for. And the argument to URL for is the name of the function that I want to bring the user to. And the function I want to bring the user to in this case is just called play. So I'm going to redirect to URL for play. 

But play as a function takes two arguments. It takes row and it takes call. So URL for also lets me specify what should the value of row be, and what should the value of call be? And so what should the value of row be in this case? 

I, OK. And the value of call? J. All right, great. So I'm redirecting the play row I column J. 

Let's give this a try. Refresh the page, nothing seems to happen. But if I try and play in the upper left for example, what it takes me to is up there in the URL bar you see slash play slash zero slash zero, row zero column zero. And it says, all right, you played a move. I've been taken to a route that's dependent upon the row and the column where by now I can actually play that move. 

Right now of course, it doesn't do that. After I play a move, I'm probably going to run some logic inside of this play function that updates sessions square bracket board and also updates session square bracket turn. And then at the end, I probably want to redirect myself back to the index page. And I can say URL for index to say redirect myself back to the index function. I'll need to import both redirect and URL for in to Flask. 

But now if I run this application, I see an empty game board. I press the place where I want to make a move. And it takes me, redirects me back to the same game board. And what you want to be able to do is have the move actually appear there by updating the board. 

And so before I move on, questions about anything we've done so far, about the goals, about why we did things the way we did? Anything about that? All right. 

Then what I think we'll do now is in a moment after I get some instructions, we'll break out into smaller groups, and we'll actually try working on this. I'll post this starter source code on the website, if you haven't been following along quite exactly. But first step is get the application working up to this point, just so you can display the board, see places where you can play moves. But the big step is going to be to implement this play function now, this idea of OK, if I want to play in this row in this column, update the board, change whose turn it is, and then redirect back to the index page. 

And then if you manage to finish that before the hour is up, the next feature to implement is the idea of a reset game button. Add a button to the bottom of the web page that just says reset game, whereby if you click it, it resets the game back to its original state. And so think about how you might want to go about implementing that. We'll work on that for about an hour or so. We'll break for lunch at 12:30. 

We'll reconvene back here at 2 PM where we'll talk a little bit more about Flask, talk about artificial intelligence and how to program artificial intelligence. And then we'll spend the rest of the afternoon continuing to work on this project. We'll go ahead and break up into groups again. And which group has not been here in the auditorium yet? I think this group. 

So this group will stay here in the auditorium. We'll have you all go to room 136. And you all go to room 212. 

And the teaching fellows will spread out and help you there as well. I'll post the source code online so you can begin working on that. And we'll go until 12:30.