1 00:00:00,000 --> 00:00:00,500 2 00:00:00,500 --> 00:00:02,370 CARTER PAGE: Welcome to this CS50 seminar, 3 00:00:02,370 --> 00:00:04,440 Publishing Your Flask App to the Web. 4 00:00:04,440 --> 00:00:07,600 My name's Carter Page, and I'm here in New Haven, Connecticut, 5 00:00:07,600 --> 00:00:09,140 at Yale University. 6 00:00:09,140 --> 00:00:13,390 And today we're going to talk about life outside the CS50 IDE. 7 00:00:13,390 --> 00:00:19,660 Now, there comes a time when the baby bird must leave the nest. 8 00:00:19,660 --> 00:00:23,920 And likewise, it is time for your CS50 Flask app 9 00:00:23,920 --> 00:00:30,070 to leave the nest of the CS50 IDE and fly on its own 10 00:00:30,070 --> 00:00:34,390 in the big wide world of the internet to become the next big Facebook. 11 00:00:34,390 --> 00:00:37,270 Now, in this seminar, we're going to walk through the steps 12 00:00:37,270 --> 00:00:42,610 to take your Flask app running happily in the CS50 IDE to a standalone web app 13 00:00:42,610 --> 00:00:45,600 that millions of people can visit across the globe. 14 00:00:45,600 --> 00:00:48,790 Now, along the way, we're going to learn about a ton of different tools, 15 00:00:48,790 --> 00:00:53,530 including Heroku, GitHub, Terminal, Postgres, Homebrew, 16 00:00:53,530 --> 00:00:55,440 Atom, and many more. 17 00:00:55,440 --> 00:01:00,380 Now, all these tools, each of them, you could do your own seminar about. 18 00:01:00,380 --> 00:01:02,680 But today, our goal is just to introduce you 19 00:01:02,680 --> 00:01:06,710 to a ton of different tools along the way so you can get a sample of those 20 00:01:06,710 --> 00:01:11,290 and so you can go back on your own and learn more about them. 21 00:01:11,290 --> 00:01:17,650 And before we start, life outside the CS50 IDE can be very frustrating. 22 00:01:17,650 --> 00:01:19,930 But I urge you to stick with it. 23 00:01:19,930 --> 00:01:24,950 My best advice is to roll up your sleeves, get ready to Google for help, 24 00:01:24,950 --> 00:01:28,010 ask for help on Stack Overflow, and be prepared to face 25 00:01:28,010 --> 00:01:30,190 some mind-numbing error messages. 26 00:01:30,190 --> 00:01:33,340 In this seminar, we divide publishing your Flask app to the web 27 00:01:33,340 --> 00:01:35,150 into five different parts. 28 00:01:35,150 --> 00:01:39,220 Part one is taking your Flask app from the CS50 IDE 29 00:01:39,220 --> 00:01:41,860 and pushing that up to GitHub. 30 00:01:41,860 --> 00:01:45,760 Part two is taking the files that we've pushed up to GitHub 31 00:01:45,760 --> 00:01:50,280 and bringing them down to your local Mac computer. 32 00:01:50,280 --> 00:01:53,160 Part three is our database tire change. 33 00:01:53,160 --> 00:01:55,500 Much like NASCAR, where you have the cars racing around 34 00:01:55,500 --> 00:01:58,770 and they need to switch out the tires, part three for us 35 00:01:58,770 --> 00:02:02,880 is where we're going to switch out the SQLite database that we use in the CS50 36 00:02:02,880 --> 00:02:06,210 IDE, and replace it with Heroku Postgres that'll 37 00:02:06,210 --> 00:02:11,110 be able to work better with Heroku when we publish the app onto the web. 38 00:02:11,110 --> 00:02:15,220 Part four is taking the files in the Flask app running locally on your Mac 39 00:02:15,220 --> 00:02:18,850 and pushing that up to Heroku, and then part five-- 40 00:02:18,850 --> 00:02:23,330 and it's the easiest one-- is taking it from Heroku to the worldwide web. 41 00:02:23,330 --> 00:02:25,280 So let's get started. 42 00:02:25,280 --> 00:02:28,720 So part one is taking our stuff from the CS50 IDE 43 00:02:28,720 --> 00:02:31,310 and pushing those files up to GitHub. 44 00:02:31,310 --> 00:02:36,700 Now, to begin, you want to log in to your CS50 IDE and cd 45 00:02:36,700 --> 00:02:38,500 into your project directory. 46 00:02:38,500 --> 00:02:42,730 We're going to start off by getting our Flask app out of the CS50 IDE. 47 00:02:42,730 --> 00:02:45,610 To do so, we're going to upload the files to the website GitHub, 48 00:02:45,610 --> 00:02:47,830 using this thing called git. 49 00:02:47,830 --> 00:02:50,920 So cd to the project. 50 00:02:50,920 --> 00:02:53,590 Then you're going to run the command git init. 51 00:02:53,590 --> 00:02:58,430 So git init basically initializes an empty repository. 52 00:02:58,430 --> 00:03:01,780 Now, git add, you're going to do git add dot, 53 00:03:01,780 --> 00:03:06,770 and that period represents the current working directory. 54 00:03:06,770 --> 00:03:09,610 So when you do git add dot, you're meaning, 55 00:03:09,610 --> 00:03:12,880 let's load up these files in the current working directory, 56 00:03:12,880 --> 00:03:15,280 and let's get ready to send them off. 57 00:03:15,280 --> 00:03:19,150 Now before you can send off these files, though, to GitHub, what you need to do 58 00:03:19,150 --> 00:03:20,320 is do a commit. 59 00:03:20,320 --> 00:03:23,230 You can think of commit as like a stamp of approval 60 00:03:23,230 --> 00:03:28,220 that these files I've added and loaded up, we're ready to send them off. 61 00:03:28,220 --> 00:03:31,480 So we git commit with a message "first commit," 62 00:03:31,480 --> 00:03:34,320 and we're ready to send them off. 63 00:03:34,320 --> 00:03:40,110 Now, in order to send these files off from the CS50 IDE into GitHub, 64 00:03:40,110 --> 00:03:44,470 we need to tell them where to go in GitHub, because GitHub's a big place. 65 00:03:44,470 --> 00:03:49,800 So we need to get a URL from GitHub to send these files to. 66 00:03:49,800 --> 00:03:52,770 So now what you need to do is log in to your GitHub account 67 00:03:52,770 --> 00:03:54,810 and create a new repository. 68 00:03:54,810 --> 00:03:57,360 And you should probably make your repository name something 69 00:03:57,360 --> 00:04:02,790 similar to the directory that you're working with, to make things easier. 70 00:04:02,790 --> 00:04:06,060 So once you finish creating your repository, 71 00:04:06,060 --> 00:04:11,850 GitHub will give you these commands of a URL after git remote add origin. 72 00:04:11,850 --> 00:04:15,160 So after you've created this repository, GitHub 73 00:04:15,160 --> 00:04:18,839 will give you this URL after git remote add origin. 74 00:04:18,839 --> 00:04:21,120 What you want to do is take that command, 75 00:04:21,120 --> 00:04:28,560 git remote add origin, with the URL, and you want to run that in the CS50 IDE. 76 00:04:28,560 --> 00:04:35,430 Your next step, then, will be to do git push, and the -u here is not necessary. 77 00:04:35,430 --> 00:04:37,890 Git push origin master. 78 00:04:37,890 --> 00:04:42,450 And what that will do is take the files that you added to load them up, 79 00:04:42,450 --> 00:04:44,775 you committed them, sealed them, and that push 80 00:04:44,775 --> 00:04:48,300 is the final standoff to GitHub. 81 00:04:48,300 --> 00:04:54,570 So now we have successfully pushed the files from your CS50 IDE up to GitHub. 82 00:04:54,570 --> 00:04:57,500 So great job on part one. 83 00:04:57,500 --> 00:05:01,220 Part two now is taking the files that we've sent off to GitHub 84 00:05:01,220 --> 00:05:04,040 and bringing them down onto your Mac. 85 00:05:04,040 --> 00:05:06,830 What we now need to do is get your Mac ready 86 00:05:06,830 --> 00:05:11,210 for these Flask app files that we've taken from the CS50 IDE to GitHub, 87 00:05:11,210 --> 00:05:14,300 and we're now ready to bring them down to the Mac. 88 00:05:14,300 --> 00:05:17,630 So we're going to have to pimp out your dev setup. 89 00:05:17,630 --> 00:05:21,470 The first thing you need to do is get familiar with the Terminal app. 90 00:05:21,470 --> 00:05:26,870 To find it, you can go to the spotlight feature of your Mac and type 91 00:05:26,870 --> 00:05:27,530 in "terminal." 92 00:05:27,530 --> 00:05:29,270 It'll pop up right away. 93 00:05:29,270 --> 00:05:33,020 All Macs have Terminal pre-installed, so you have it 94 00:05:33,020 --> 00:05:35,331 even if you've never used it before. 95 00:05:35,331 --> 00:05:37,830 The first time you open up Terminal, you'll notice that hey, 96 00:05:37,830 --> 00:05:41,450 this looks a lot like the command line prompt from the CS50 IDE. 97 00:05:41,450 --> 00:05:43,400 And you're right, they're very similar. 98 00:05:43,400 --> 00:05:47,430 But the only difference is that when you type "ls," for example, 99 00:05:47,430 --> 00:05:49,377 you'll see the files on your own computer, 100 00:05:49,377 --> 00:05:52,460 because the terminal, the file system that it's working with, this command 101 00:05:52,460 --> 00:05:55,820 line prompt, is that of your own computer, 102 00:05:55,820 --> 00:06:00,510 rather than CS50 IDE, which works with the files in your workspace. 103 00:06:00,510 --> 00:06:03,140 So let's cd into desktop, and you can explore it 104 00:06:03,140 --> 00:06:05,860 just like you did in the CS50 IDE. 105 00:06:05,860 --> 00:06:08,720 106 00:06:08,720 --> 00:06:12,170 So to prepare your Mac for your Flask app, 107 00:06:12,170 --> 00:06:14,870 you're going to need to download many different tools-- 108 00:06:14,870 --> 00:06:16,820 and these tools are known as packages-- 109 00:06:16,820 --> 00:06:18,560 that our Flask app needs to run. 110 00:06:18,560 --> 00:06:21,410 For example, you could think of, oh, we need Python. 111 00:06:21,410 --> 00:06:22,440 We need Flask. 112 00:06:22,440 --> 00:06:26,030 We need stuff to work with our database. 113 00:06:26,030 --> 00:06:29,660 All these different tools, it's difficult to keep track of them. 114 00:06:29,660 --> 00:06:32,070 And so there's this fantastic thing called 115 00:06:32,070 --> 00:06:35,030 Homebrew, which is a package manager. 116 00:06:35,030 --> 00:06:37,790 And we're going to be using that to keep track of it. 117 00:06:37,790 --> 00:06:40,910 And Homebrew is a lifesaver. 118 00:06:40,910 --> 00:06:44,930 Without it, it would be incredibly difficult to keep track of anything. 119 00:06:44,930 --> 00:06:48,980 So to get Homebrew, you need to go to Homebrew's website. 120 00:06:48,980 --> 00:06:51,710 And at their website, they have this command for you 121 00:06:51,710 --> 00:06:53,960 to copy and paste into your terminal prompt. 122 00:06:53,960 --> 00:06:57,750 And so you just take it, copy, paste it, and click Enter. 123 00:06:57,750 --> 00:07:01,010 And it'll walk you through the installation process for Homebrew. 124 00:07:01,010 --> 00:07:03,380 So Homebrew will take a little while to install, 125 00:07:03,380 --> 00:07:05,510 because it's installing quite a bit. 126 00:07:05,510 --> 00:07:10,030 But once you have it, you'll quickly see why it's fantastic. 127 00:07:10,030 --> 00:07:14,650 So now that we have Homebrew, let's get git, because what we're trying to do 128 00:07:14,650 --> 00:07:20,690 is take those files from GitHub and bring them down to our Mac using git. 129 00:07:20,690 --> 00:07:23,270 So to get git, it's very simple. 130 00:07:23,270 --> 00:07:25,360 Brew install git. 131 00:07:25,360 --> 00:07:31,060 And you type that into your Terminal app, and voila, you'll have git. 132 00:07:31,060 --> 00:07:35,520 Now, what we want to do now is take those files from GitHub 133 00:07:35,520 --> 00:07:36,850 and bring them to the Mac. 134 00:07:36,850 --> 00:07:40,210 So what we can do is do a cd to change directory, 135 00:07:40,210 --> 00:07:43,000 home directory slash desktop, and then we 136 00:07:43,000 --> 00:07:47,390 can run the command git clone, which basically means download files. 137 00:07:47,390 --> 00:07:51,730 But we need to tell git where to get those files from, and that's the URL. 138 00:07:51,730 --> 00:07:55,270 Now, to get this URL, you can go to any repository on GitHub, 139 00:07:55,270 --> 00:07:57,995 and you can tap on that green button, Clone or Download, 140 00:07:57,995 --> 00:08:01,870 and it'll give you a URL you can literally copy and paste right where I 141 00:08:01,870 --> 00:08:04,720 have those brackets and URL filled in. 142 00:08:04,720 --> 00:08:06,790 My recommendation for this walkthrough is 143 00:08:06,790 --> 00:08:12,280 that you use the refo I provided in the Who Was Here Flask app that I've 144 00:08:12,280 --> 00:08:15,990 put together for this demonstration. 145 00:08:15,990 --> 00:08:21,200 So once you do git clone, now those files are on your desktop, 146 00:08:21,200 --> 00:08:23,370 and you should be able to even look at your desktop 147 00:08:23,370 --> 00:08:25,460 and you'll see the folder there. 148 00:08:25,460 --> 00:08:28,150 And the folder name will be Who Was Here. 149 00:08:28,150 --> 00:08:33,590 Now, let's keep going to building out our Mac development environment. 150 00:08:33,590 --> 00:08:36,460 So for our Flask app, we're going to need Python. 151 00:08:36,460 --> 00:08:40,780 And so let's do brew install python and then brew install python3, 152 00:08:40,780 --> 00:08:44,500 because remember there's versions 2.7 and 3.6. 153 00:08:44,500 --> 00:08:48,280 Homebrew keeps track of all the different tools that we're using 154 00:08:48,280 --> 00:08:50,110 and are present on our Mac. 155 00:08:50,110 --> 00:08:53,170 But keeping track of all the different dependencies and tools 156 00:08:53,170 --> 00:08:57,040 that our specific Flask app is using, that's a whole other job. 157 00:08:57,040 --> 00:09:00,937 And to do that, we're going to be using something called a virtual environment. 158 00:09:00,937 --> 00:09:02,770 Virtual environments are ways for us to keep 159 00:09:02,770 --> 00:09:06,610 track of the different tools, different dependencies, 160 00:09:06,610 --> 00:09:08,140 that our Flask app is using. 161 00:09:08,140 --> 00:09:11,380 So to get virtual environments-- you might be getting the hang of this-- 162 00:09:11,380 --> 00:09:15,040 brew install virtualenv, where "virtualenv" 163 00:09:15,040 --> 00:09:17,410 stands for "virtual environment." 164 00:09:17,410 --> 00:09:21,970 In the CS50 IDE, if you wanted to edit a file, you just clicked on it, 165 00:09:21,970 --> 00:09:25,180 and then the file would pop up, and you could type 166 00:09:25,180 --> 00:09:29,020 and you could make changes on it, et cetera, et cetera. 167 00:09:29,020 --> 00:09:32,770 But on your Mac, there's no equivalent right now. 168 00:09:32,770 --> 00:09:36,610 You just have the command line prompt to interact with the program. 169 00:09:36,610 --> 00:09:40,567 What you can do is download what developers call text editors. 170 00:09:40,567 --> 00:09:41,650 And there's many of them-- 171 00:09:41,650 --> 00:09:46,000 Sublime, Atom, and Atom's my personal preference, 172 00:09:46,000 --> 00:09:48,250 so we're going to use that one for this walkthrough. 173 00:09:48,250 --> 00:09:52,750 So to get Atom, you just go to Atom's homepage, atom.io, 174 00:09:52,750 --> 00:09:57,430 and download it, just like you would any other program. 175 00:09:57,430 --> 00:10:00,280 Now, once you have Atom installed, you can take a look 176 00:10:00,280 --> 00:10:07,570 at the files in your Flask app by cding into the directory Who Was Here. 177 00:10:07,570 --> 00:10:09,560 You always have to be in that directory. 178 00:10:09,560 --> 00:10:11,620 And then you can type atom period. 179 00:10:11,620 --> 00:10:16,070 And that period there stands for the current working directory. 180 00:10:16,070 --> 00:10:19,270 So it opens up the current working directory in Atom. 181 00:10:19,270 --> 00:10:21,490 And once you see this, you'll say, oh! 182 00:10:21,490 --> 00:10:26,380 This is just like the CS50 IDE, where you can tap on files on the left side 183 00:10:26,380 --> 00:10:33,240 and make changes to them, just like what we've been used to this semester. 184 00:10:33,240 --> 00:10:36,490 Now things are going to start getting a bit more complicated. 185 00:10:36,490 --> 00:10:40,140 So last time, we downloaded virtualenv, which 186 00:10:40,140 --> 00:10:42,450 is the tool for us to make these virtual environments. 187 00:10:42,450 --> 00:10:44,033 But now we need to actually make them. 188 00:10:44,033 --> 00:10:48,990 To make one, make sure you cd into the project directory, which 189 00:10:48,990 --> 00:10:57,250 is Who Was Here in your desktop, and type in "virtualenv -p python3 venv." 190 00:10:57,250 --> 00:10:57,750 All right. 191 00:10:57,750 --> 00:10:58,740 That's a mouthful. 192 00:10:58,740 --> 00:11:00,010 What's going on here? 193 00:11:00,010 --> 00:11:04,620 So virtualenv is the tool that we downloaded, we got from Homebrew, 194 00:11:04,620 --> 00:11:06,810 to create virtual environments. 195 00:11:06,810 --> 00:11:11,760 The -p python3 means we want our virtual environment 196 00:11:11,760 --> 00:11:15,060 to use Python 3.6 by default, because that's 197 00:11:15,060 --> 00:11:18,270 how we've been doing this in CS50 IDE. 198 00:11:18,270 --> 00:11:20,760 And then venv is just the name of this virtual environment 199 00:11:20,760 --> 00:11:21,930 that we're creating. 200 00:11:21,930 --> 00:11:25,700 Venv, virtual environment. 201 00:11:25,700 --> 00:11:29,930 Now, to turn our virtual environment into something that's useful-- 202 00:11:29,930 --> 00:11:33,560 because right now it's a virtual environment that's empty-- 203 00:11:33,560 --> 00:11:40,190 we need to first turn it on, or activate it, by source venv bin activate. 204 00:11:40,190 --> 00:11:42,830 And then we're going to use pip, which is-- 205 00:11:42,830 --> 00:11:47,330 you know how Homebrew's like a package manager for programs 206 00:11:47,330 --> 00:11:48,950 all over the computer? 207 00:11:48,950 --> 00:11:51,620 Pip is very similar, but for Python. 208 00:11:51,620 --> 00:11:55,460 So we're going to use pip to install the requirements listed 209 00:11:55,460 --> 00:11:58,910 in that pesky requirements.txt file. 210 00:11:58,910 --> 00:12:04,100 And so you can do that by typing pip install -r requirements.txt, 211 00:12:04,100 --> 00:12:07,640 and that goes through and reads all the different packages listed 212 00:12:07,640 --> 00:12:10,970 in the requirements.txt file, and downloads the ones you need. 213 00:12:10,970 --> 00:12:14,690 And that concludes part two, taking the files from GitHub 214 00:12:14,690 --> 00:12:17,624 and bringing them down onto our local computer. 215 00:12:17,624 --> 00:12:19,790 Now, part three-- this is where it's the tricky one, 216 00:12:19,790 --> 00:12:21,300 and this one's pretty frustrating. 217 00:12:21,300 --> 00:12:25,370 This is the tire change, where we're switching the SQLite database that we 218 00:12:25,370 --> 00:12:32,250 know and love from CS50 IDE, and we're switching it out for Heroku Postgres. 219 00:12:32,250 --> 00:12:34,620 So right now, the program is looking for this thing 220 00:12:34,620 --> 00:12:40,200 called DATABASE_URL to find the database that it's going to connect to. 221 00:12:40,200 --> 00:12:43,800 But we haven't told it what DATABASE_URL is. 222 00:12:43,800 --> 00:12:49,260 We're going to get that DATABASE_URL from Heroku. 223 00:12:49,260 --> 00:12:51,240 So what is Heroku? 224 00:12:51,240 --> 00:12:55,950 Heroku is a online platform that makes it really easy for developers 225 00:12:55,950 --> 00:12:58,350 to publish web apps to the internet. 226 00:12:58,350 --> 00:13:00,874 And to use Heroku-- 227 00:13:00,874 --> 00:13:02,790 you might have guessed it by now-- we're going 228 00:13:02,790 --> 00:13:06,510 to be using Homebrew to brew get Heroku's command line 229 00:13:06,510 --> 00:13:11,280 tools, which is heroku/brew/heroku. 230 00:13:11,280 --> 00:13:14,880 Now, if you don't have a Heroku account, no worries if you don't. 231 00:13:14,880 --> 00:13:19,530 Go sign up at the link that I've provided, signup.heroku.com. 232 00:13:19,530 --> 00:13:22,470 And then once you have an account, go back to your terminal, 233 00:13:22,470 --> 00:13:24,570 and do heroku login. 234 00:13:24,570 --> 00:13:27,930 Change directory into Who Was Here, and then 235 00:13:27,930 --> 00:13:31,380 this is where the fun part is-- heroku create. 236 00:13:31,380 --> 00:13:33,600 And congratulations, you have successfully 237 00:13:33,600 --> 00:13:37,620 made your Heroku web application. 238 00:13:37,620 --> 00:13:41,680 The problem is it doesn't work at all right now. 239 00:13:41,680 --> 00:13:44,100 And the reason for that is we still haven't done anything 240 00:13:44,100 --> 00:13:46,360 about that database. 241 00:13:46,360 --> 00:13:49,750 So another thing we need to take care of is 242 00:13:49,750 --> 00:13:53,740 Heroku needs this thing called a Procfile in order to work. 243 00:13:53,740 --> 00:13:57,340 Basically, the Procfile tells Heroku what type of application 244 00:13:57,340 --> 00:14:02,290 we've sent to it and what command does it need to run to turn it on. 245 00:14:02,290 --> 00:14:07,180 It's very easy to forget your Procfile, so make sure you don't. 246 00:14:07,180 --> 00:14:10,210 If you get an error message from Heroku, first thing you can check 247 00:14:10,210 --> 00:14:12,490 is, did you remember the Procfile? 248 00:14:12,490 --> 00:14:16,450 The code that I've provided you already has a Procfile with it, 249 00:14:16,450 --> 00:14:20,200 but if you're porting your own Flask application from CS50 IDE, 250 00:14:20,200 --> 00:14:21,850 you're going to have to make your own. 251 00:14:21,850 --> 00:14:24,058 And so the instructions to make it are pretty simple. 252 00:14:24,058 --> 00:14:28,510 Do pip install gunicorn. 253 00:14:28,510 --> 00:14:30,580 And remember, when you're pip installing, 254 00:14:30,580 --> 00:14:33,790 make sure that you have the virtual environment activated. 255 00:14:33,790 --> 00:14:37,510 Then we're going to do touch Procfile to create a Procfile, 256 00:14:37,510 --> 00:14:42,220 and then inside of Atom or your editor, type in, for your Procfile, 257 00:14:42,220 --> 00:14:49,390 simply "web: gunicorn space application:app." 258 00:14:49,390 --> 00:14:51,700 Now, this is the most difficult part of the journey. 259 00:14:51,700 --> 00:14:57,120 And this is switching out the SQLite we used in CS50 IDE for Heroku Postgres. 260 00:14:57,120 --> 00:15:00,910 This step is going to take the most time for you on your own, 261 00:15:00,910 --> 00:15:04,510 and it will require you to learn a bit more about Flask-SQLAlchemy 262 00:15:04,510 --> 00:15:07,930 to find the answers for your specific database implementation. 263 00:15:07,930 --> 00:15:12,080 But what I've done here is provided you with a sample app, 264 00:15:12,080 --> 00:15:17,200 so you can see that, oh, switching this over, at first it may look strange, 265 00:15:17,200 --> 00:15:19,130 but actually, it makes sense. 266 00:15:19,130 --> 00:15:24,460 So the first thing we're going to do is pip install Flask-SQLAlchemy. 267 00:15:24,460 --> 00:15:28,870 And now what we need to do is go through our application.py file 268 00:15:28,870 --> 00:15:31,870 and remove the references to SQLite. 269 00:15:31,870 --> 00:15:37,870 For example, from CS50 import SQL, db equals SQL space-- 270 00:15:37,870 --> 00:15:44,610 or SQL parenthesis SQLite, because we're not going to be using SQLite anymore. 271 00:15:44,610 --> 00:15:47,010 Next, what we're going to be replacing it with-- 272 00:15:47,010 --> 00:15:49,910 and don't be intimidated at first-- 273 00:15:49,910 --> 00:15:52,130 is SQLAlchemy. 274 00:15:52,130 --> 00:15:58,190 And specifically, what we're going to be replacing it with is Flask-SQLAlchemy. 275 00:15:58,190 --> 00:16:03,020 And if you look at this, import OS is something that 276 00:16:03,020 --> 00:16:05,660 helps us get environment variables. 277 00:16:05,660 --> 00:16:09,200 From Flask-SQLAlchemy import SQLAlchemy. 278 00:16:09,200 --> 00:16:14,420 That's very similar to the from CS50 import SQL. 279 00:16:14,420 --> 00:16:19,790 Next, this app.config SQLALCHEMY_TRACK_MODIFICATIONS, 280 00:16:19,790 --> 00:16:21,800 that part, yeah, that's confusing. 281 00:16:21,800 --> 00:16:25,640 That's just a warning that if you don't have it, you'll get that warning. 282 00:16:25,640 --> 00:16:30,860 So just listen to the computer, and just put it in. 283 00:16:30,860 --> 00:16:35,180 Then you have an app.config step, which basically 284 00:16:35,180 --> 00:16:39,050 allows us to use the environment variables DATABASE_URL 285 00:16:39,050 --> 00:16:40,990 to find the database. 286 00:16:40,990 --> 00:16:45,510 For this example application, Who Was Here, it's very simple. 287 00:16:45,510 --> 00:16:49,970 You go onto a website and there's a form, and you type in your name, 288 00:16:49,970 --> 00:16:51,560 and you press Submit. 289 00:16:51,560 --> 00:16:55,190 And then your name shows up in a list of other people who have been there. 290 00:16:55,190 --> 00:16:57,080 So a very simple application. 291 00:16:57,080 --> 00:16:59,030 Now, if you look at this class implementation, 292 00:16:59,030 --> 00:17:03,590 we see that we have User, which is pretty similar to, oh, 293 00:17:03,590 --> 00:17:05,960 that's the name of our table. 294 00:17:05,960 --> 00:17:08,500 And you see, oh, ID equals db.Column. 295 00:17:08,500 --> 00:17:10,040 That's a column in our table. 296 00:17:10,040 --> 00:17:11,869 And Name is another column. 297 00:17:11,869 --> 00:17:17,000 And ID is an integer, Name is a string, and so you can piece together, oh, this 298 00:17:17,000 --> 00:17:18,020 actually isn't that bad. 299 00:17:18,020 --> 00:17:19,670 We've seen stuff like this. 300 00:17:19,670 --> 00:17:21,714 But it's just in a different format. 301 00:17:21,714 --> 00:17:23,630 Another thing we need to go through and remove 302 00:17:23,630 --> 00:17:26,300 are these db.execute statements, because we're 303 00:17:26,300 --> 00:17:30,470 going to be using Flask-SQLAlchemy directly, rather than using it 304 00:17:30,470 --> 00:17:32,540 through the CS50 library. 305 00:17:32,540 --> 00:17:36,042 So if we go out and remove those db.execute statements, 306 00:17:36,042 --> 00:17:38,750 we're going to be replacing it with something that at first looks 307 00:17:38,750 --> 00:17:40,910 really different, but actually it's pretty similar 308 00:17:40,910 --> 00:17:43,350 when you go through the steps. 309 00:17:43,350 --> 00:17:48,480 So in this example, what we're trying to do is take a name, 310 00:17:48,480 --> 00:17:52,970 give it to a new user, and then add that new user to our database. 311 00:17:52,970 --> 00:17:56,480 And that's pretty much what's happening in both. 312 00:17:56,480 --> 00:18:03,590 In the first one, we have our SQL statement, our raw SQL query, of insert 313 00:18:03,590 --> 00:18:07,710 into the table User, name, with the value of name. 314 00:18:07,710 --> 00:18:11,930 In the second one, it's pass a name to create a new user, 315 00:18:11,930 --> 00:18:14,210 and then we're going to add that new user. 316 00:18:14,210 --> 00:18:16,580 And then an important step is commit. 317 00:18:16,580 --> 00:18:20,660 Commit is an important step that you can't forget for insert 318 00:18:20,660 --> 00:18:24,680 and remove statements, because those are editing the database itself. 319 00:18:24,680 --> 00:18:26,900 And for those statements, you need the commit 320 00:18:26,900 --> 00:18:31,030 to let it know that this is a permanent change that I'm trying to make. 321 00:18:31,030 --> 00:18:33,980 Similarly, if we wanted to implement a select statement, 322 00:18:33,980 --> 00:18:36,980 we can use user.query.order_by(user.id).all. 323 00:18:36,980 --> 00:18:40,190 324 00:18:40,190 --> 00:18:42,060 So what does that mean? 325 00:18:42,060 --> 00:18:45,110 So we are looking at our table User. 326 00:18:45,110 --> 00:18:47,240 Inside of User, we want to query it. 327 00:18:47,240 --> 00:18:52,220 And we're taking all of them, and we're organizing them by user ID. 328 00:18:52,220 --> 00:18:55,070 And we're going to take all those users that we're selecting 329 00:18:55,070 --> 00:18:56,840 and put them into Users. 330 00:18:56,840 --> 00:19:01,820 So once we've switched to Flask-SQLAlchemy, all we need to do now 331 00:19:01,820 --> 00:19:03,890 is create our database. 332 00:19:03,890 --> 00:19:07,550 The hard part's over. 333 00:19:07,550 --> 00:19:11,580 And creating our database is going to be two steps. 334 00:19:11,580 --> 00:19:17,250 First, we need to create our Heroku Postgres DATABASE_URL, that elusive 335 00:19:17,250 --> 00:19:20,240 DATABASE_URL that I spoke about at the beginning, 336 00:19:20,240 --> 00:19:23,700 that this application that I provide is looking for. 337 00:19:23,700 --> 00:19:29,720 And so to generate this DATABASE_URL, we type in "heroku addons:create 338 00:19:29,720 --> 00:19:34,880 heroku-postgresql:hobby-dev." 339 00:19:34,880 --> 00:19:36,440 What does that mean? 340 00:19:36,440 --> 00:19:41,450 Heroku add-ons are different tools that we can use to improve our web apps. 341 00:19:41,450 --> 00:19:44,500 We're going to be using Heroku PostgreSQL. 342 00:19:44,500 --> 00:19:49,280 And then that hobby dev is the plan we're on, and hobby dev's the free one. 343 00:19:49,280 --> 00:19:54,290 So the next step, then, is to do heroku config into your Mac terminal, 344 00:19:54,290 --> 00:19:59,090 and voila, it spits out your DATABASE_URL. 345 00:19:59,090 --> 00:20:03,260 So Heroku now knows the DATABASE_URL. 346 00:20:03,260 --> 00:20:05,180 We actually made the DATABASE_URL. 347 00:20:05,180 --> 00:20:06,920 It's up in Heroku. 348 00:20:06,920 --> 00:20:10,040 But if we wanted to run the application locally, 349 00:20:10,040 --> 00:20:12,630 our local application has no way of knowing. 350 00:20:12,630 --> 00:20:16,960 So to tell the local application what it is, 351 00:20:16,960 --> 00:20:20,480 tell a local application where the DATABASE_URL is, 352 00:20:20,480 --> 00:20:24,560 what we're going to do is create a .env file. 353 00:20:24,560 --> 00:20:29,570 So type "touch.env." 354 00:20:29,570 --> 00:20:33,680 Then, inside of Atom, you can edit the .env and make it look identical 355 00:20:33,680 --> 00:20:38,420 to the one I provided, where you have export FLASK_APP equals application.py, 356 00:20:38,420 --> 00:20:42,080 telling when we do Flask run, that we want Flask run to look 357 00:20:42,080 --> 00:20:48,110 for application.py, not app.py or server.py or whatever. 358 00:20:48,110 --> 00:20:52,010 FLASK_DEBUG equals 1, that sets another environment variable that 359 00:20:52,010 --> 00:20:54,950 makes it easier for us to interpret Flask errors, 360 00:20:54,950 --> 00:20:57,170 because we'll all make mistakes. 361 00:20:57,170 --> 00:21:00,290 And then for export DATABASE_URL, that's where 362 00:21:00,290 --> 00:21:04,490 we set the environment variable DATABASE_URL to tell our program where 363 00:21:04,490 --> 00:21:06,200 the database is. 364 00:21:06,200 --> 00:21:10,050 To load these environment variables to your Mac, type source .env. 365 00:21:10,050 --> 00:21:12,800 366 00:21:12,800 --> 00:21:19,160 Now we've created a DATABASE_URL, but in fact, we've actually not 367 00:21:19,160 --> 00:21:21,590 created the database itself. 368 00:21:21,590 --> 00:21:24,500 We've told our application where to go looking, 369 00:21:24,500 --> 00:21:28,790 and we told it to go looking at Heroku to find this database. 370 00:21:28,790 --> 00:21:31,070 And we set aside that space, but we actually 371 00:21:31,070 --> 00:21:33,530 didn't put our database table in it. 372 00:21:33,530 --> 00:21:38,000 So we want a way to look at our database, much like in CS50 IDE, 373 00:21:38,000 --> 00:21:45,810 we were able to use phpLiteAdmin to visually inspect our SQLite tables. 374 00:21:45,810 --> 00:21:49,440 So we're going to be downloading this app called Postico, 375 00:21:49,440 --> 00:21:51,410 and there's a free trial available. 376 00:21:51,410 --> 00:21:56,780 So go to that website, download Postico, and then once you open Postico, 377 00:21:56,780 --> 00:21:59,000 it's actually really easy to use. 378 00:21:59,000 --> 00:22:03,530 Go back to Terminal, copy that DATABASE_URL, open Postico, 379 00:22:03,530 --> 00:22:08,240 and then with the DATABASE_URL copied to your clipboard, click New Favorite. 380 00:22:08,240 --> 00:22:10,970 The fields should be automatically populated, 381 00:22:10,970 --> 00:22:13,920 and then click Connect to connect to your database. 382 00:22:13,920 --> 00:22:17,960 So right now, when we do that, we don't see any table named User. 383 00:22:17,960 --> 00:22:22,580 That's because we haven't created the table User. 384 00:22:22,580 --> 00:22:25,690 And that's what we're moving onto now. 385 00:22:25,690 --> 00:22:32,380 So part four, taking the files from your Mac and pushing those up to Heroku. 386 00:22:32,380 --> 00:22:37,600 So we've gone from CS50 IDE to GitHub, from GitHub to your Mac, 387 00:22:37,600 --> 00:22:40,780 now we're going from your Mac to Heroku. 388 00:22:40,780 --> 00:22:43,870 So this statement might seem familiar. 389 00:22:43,870 --> 00:22:47,590 We're going to do a pip freeze requirements.txt to update 390 00:22:47,590 --> 00:22:50,740 our requirements file, though it shouldn't have changed in this 391 00:22:50,740 --> 00:22:54,134 walkthrough, but it's a good habit to get-- 392 00:22:54,134 --> 00:22:56,050 it shouldn't have changed in this walkthrough, 393 00:22:56,050 --> 00:22:58,150 but it's a good habit to get into. 394 00:22:58,150 --> 00:23:00,940 Then we're going to do git add to load our files 395 00:23:00,940 --> 00:23:02,920 and get them ready to send off. 396 00:23:02,920 --> 00:23:05,410 We're going to get git commit, with our seal of approval 397 00:23:05,410 --> 00:23:07,980 that we're ready to send these files to Heroku. 398 00:23:07,980 --> 00:23:10,567 And then we're going to do git push heroku master 399 00:23:10,567 --> 00:23:11,650 to send them on their way. 400 00:23:11,650 --> 00:23:14,350 401 00:23:14,350 --> 00:23:18,580 Now it's time to actually create the table for our database. 402 00:23:18,580 --> 00:23:21,820 And to do so, type in in your Mac terminal 403 00:23:21,820 --> 00:23:26,830 "heroku run python," which basically creates a read eval print 404 00:23:26,830 --> 00:23:31,000 loop in Heroku for Python. 405 00:23:31,000 --> 00:23:33,910 And once we're in there, then we can make some changes. 406 00:23:33,910 --> 00:23:38,730 So what we're going to do is type in "from application import db." 407 00:23:38,730 --> 00:23:44,040 We're going to do db.create_all, and then exit to get out of it. 408 00:23:44,040 --> 00:23:47,390 And what this does is goes through our application.py 409 00:23:47,390 --> 00:23:53,590 file, look for those classes that we define with the db.models, 410 00:23:53,590 --> 00:23:57,220 and once it finds those classes and those columns that we set up, 411 00:23:57,220 --> 00:23:59,180 it's just going to create that table for us. 412 00:23:59,180 --> 00:24:01,850 So this step's actually pretty easy. 413 00:24:01,850 --> 00:24:06,010 So if you press Refresh in the upper right hand corner of the Postico 414 00:24:06,010 --> 00:24:08,590 application, you should now see a User table 415 00:24:08,590 --> 00:24:14,711 appear, because we've successfully created our database table. 416 00:24:14,711 --> 00:24:15,210 All right. 417 00:24:15,210 --> 00:24:16,980 We're getting close. 418 00:24:16,980 --> 00:24:22,380 Running locally-- so to run our web app locally on our own machine, 419 00:24:22,380 --> 00:24:26,961 we need to first load the environment variables, and then type "flask run." 420 00:24:26,961 --> 00:24:28,960 And remember, make sure your virtual environment 421 00:24:28,960 --> 00:24:34,590 is activated by source bin slash activate. 422 00:24:34,590 --> 00:24:38,580 Then we do source .env to load the environment variables, 423 00:24:38,580 --> 00:24:40,387 and then flask run. 424 00:24:40,387 --> 00:24:41,970 All right, this is where it gets cool. 425 00:24:41,970 --> 00:24:46,620 Then on Safari or Chrome, go to localhost:5000, 426 00:24:46,620 --> 00:24:48,680 and you should see your web app running. 427 00:24:48,680 --> 00:24:49,180 Pretty cool. 428 00:24:49,180 --> 00:24:51,780 429 00:24:51,780 --> 00:24:53,400 But now, here we are-- 430 00:24:53,400 --> 00:24:54,330 part five. 431 00:24:54,330 --> 00:24:56,160 It has been a long journey. 432 00:24:56,160 --> 00:24:59,400 To see our Flask app on the web, run heroku open, 433 00:24:59,400 --> 00:25:02,250 and you should see your web app running on the internet. 434 00:25:02,250 --> 00:25:04,920 You can share the URL with friends and family. 435 00:25:04,920 --> 00:25:08,040 Notice that if you add names to the web app, either locally 436 00:25:08,040 --> 00:25:11,520 or on the internet, the database updates in Postico. 437 00:25:11,520 --> 00:25:16,410 For this seminar, we took our little Flask app running in CS50 IDE, 438 00:25:16,410 --> 00:25:21,660 and we, in step one, brought it from the CS50 IDE to GitHub. 439 00:25:21,660 --> 00:25:24,720 In step two, we took it from GitHub to our Mac. 440 00:25:24,720 --> 00:25:27,630 In step three, we switched out our SQLite database 441 00:25:27,630 --> 00:25:30,070 for a Heroku Postgres one. 442 00:25:30,070 --> 00:25:33,690 In step four, we took it from our Mac to Heroku. 443 00:25:33,690 --> 00:25:37,800 And in step five, we took it from Heroku to the web. 444 00:25:37,800 --> 00:25:40,870 Be sure to check out the sample code and the walkthrough 445 00:25:40,870 --> 00:25:43,980 that I posted online to accompany this seminar. 446 00:25:43,980 --> 00:25:48,110 My name is Carter Page, and this is CS50 seminar, Publishing Your Flask 447 00:25:48,110 --> 00:25:49,590 App to the Web. 448 00:25:49,590 --> 00:25:51,380 Thank you. 449 00:25:51,380 --> 00:25:52,276