1 00:00:00,000 --> 00:00:02,893 2 00:00:02,893 --> 00:00:05,060 RONGXIN: Good afternoon, everyone, and good evening, 3 00:00:05,060 --> 00:00:07,110 good morning from all over the world. 4 00:00:07,110 --> 00:00:10,610 So today, this seminar will be going through how to develop 5 00:00:10,610 --> 00:00:13,760 your project locally with VS Code. 6 00:00:13,760 --> 00:00:17,540 And so, VS Code, basically, Visual Studio Code 7 00:00:17,540 --> 00:00:22,890 is a lightweight source code editor that you will normally edit source code. 8 00:00:22,890 --> 00:00:27,780 And this Visual Studio code is available on multiple platforms, 9 00:00:27,780 --> 00:00:29,960 like on Windows, Mac, and Linux. 10 00:00:29,960 --> 00:00:32,930 And in the past-- 11 00:00:32,930 --> 00:00:36,530 in this semester right, over the past few months, and students 12 00:00:36,530 --> 00:00:38,120 have been using Codespaces. 13 00:00:38,120 --> 00:00:43,040 And before we actually dive into how to develop your project locally using 14 00:00:43,040 --> 00:00:45,020 Visual Studio Code, let's quickly just go 15 00:00:45,020 --> 00:00:50,770 through what's happening behind the scenes when you are using Codespaces. 16 00:00:50,770 --> 00:00:54,780 So in the context of the Codespaces, the VS Code editor 17 00:00:54,780 --> 00:00:59,010 is actually running on a Linux machine, virtual machine managed by Microsoft 18 00:00:59,010 --> 00:01:01,050 and sitting remotely in the cloud. 19 00:01:01,050 --> 00:01:05,850 And this space is providing a cloud-based development environment, 20 00:01:05,850 --> 00:01:12,180 and users generally work with this environment in a browser-based editor. 21 00:01:12,180 --> 00:01:16,260 So this page probably familiar with most of you. 22 00:01:16,260 --> 00:01:18,450 Most of you probably are familiar with this page 23 00:01:18,450 --> 00:01:21,060 whenever you open your Codespaces. 24 00:01:21,060 --> 00:01:25,200 And what it is happening is actually the remote Linux machine 25 00:01:25,200 --> 00:01:29,190 is actually launching and provisioning an environment for your Codespace. 26 00:01:29,190 --> 00:01:33,480 It is where all the compute associated with the software development 27 00:01:33,480 --> 00:01:37,980 happens, for example like compiling, debugging, restoring, et cetera. 28 00:01:37,980 --> 00:01:42,900 And at a high level view, the Codespaces environment provided by CS50 29 00:01:42,900 --> 00:01:48,120 comes with the software package, such as Python, Node.js, SQLite, HTTP 30 00:01:48,120 --> 00:01:51,690 server, and some CS50 C libraries that you 31 00:01:51,690 --> 00:01:58,010 will need to use it to successfully complete your problem sets. 32 00:01:58,010 --> 00:02:04,150 And once the Codespace, the Linux machine, launched, once you are in, 33 00:02:04,150 --> 00:02:06,610 the Codespace automatically configures everything 34 00:02:06,610 --> 00:02:08,590 you need to work with your problem set. 35 00:02:08,590 --> 00:02:13,120 The runtime environment, the compiler, the debugger, editor, 36 00:02:13,120 --> 00:02:16,540 custom user settings, and relevant editor extension, and more. 37 00:02:16,540 --> 00:02:19,620 38 00:02:19,620 --> 00:02:26,010 So in a nutshell, to recap, when running VS Code on Codespace, 39 00:02:26,010 --> 00:02:29,710 it is running in a Linux operating system. 40 00:02:29,710 --> 00:02:33,280 There's many pre-installed package that we already configured for you. 41 00:02:33,280 --> 00:02:38,340 But the most important software package are the Python's library, 42 00:02:38,340 --> 00:02:45,470 the Node.js library, the HTTP server software, Flask, and SQLite. 43 00:02:45,470 --> 00:02:48,710 Now what happened when it comes to Mac, if you 44 00:02:48,710 --> 00:02:51,470 want to use VS Code on your Mac OS. 45 00:02:51,470 --> 00:02:57,180 So similarly, you will want to have the Python library installed on your Mac. 46 00:02:57,180 --> 00:03:00,900 You will want your Node.js environment configured on your Mac. 47 00:03:00,900 --> 00:03:04,820 You will also want to install HTTP server, Flask, and SQLite. 48 00:03:04,820 --> 00:03:08,930 All this software package also available on Mac. 49 00:03:08,930 --> 00:03:12,050 And once you have all these software packages installed and configured 50 00:03:12,050 --> 00:03:16,130 properly, you can also continue to develop on your Mac locally, 51 00:03:16,130 --> 00:03:17,060 without using VS Code. 52 00:03:17,060 --> 00:03:20,600 53 00:03:20,600 --> 00:03:27,320 So first, of course, to run VS Code on your Mac, you need to install VS Code. 54 00:03:27,320 --> 00:03:28,790 Let's actually just do that. 55 00:03:28,790 --> 00:03:31,730 56 00:03:31,730 --> 00:03:33,860 Install VS Code, right? 57 00:03:33,860 --> 00:03:38,750 Normally you can just Google search "Visual Studio Code" and usually 58 00:03:38,750 --> 00:03:40,460 the first result pops up. 59 00:03:40,460 --> 00:03:44,180 And the website detected that you are on a Mac 60 00:03:44,180 --> 00:03:48,068 and will prompt you to install the VS Code on your Mac. 61 00:03:48,068 --> 00:03:49,235 You can just click Download. 62 00:03:49,235 --> 00:03:57,790 63 00:03:57,790 --> 00:03:59,210 And unzip it. 64 00:03:59,210 --> 00:04:03,430 So these are the VS Code software you are going to use on your Mac. 65 00:04:03,430 --> 00:04:07,757 And usually we just drag it to the application folder 66 00:04:07,757 --> 00:04:09,215 to finish the installation process. 67 00:04:09,215 --> 00:04:16,640 68 00:04:16,640 --> 00:04:21,010 OK, so let's actually launch VS Code. 69 00:04:21,010 --> 00:04:30,210 70 00:04:30,210 --> 00:04:32,820 Now this is VS Code running on your Mac. 71 00:04:32,820 --> 00:04:36,250 As you can see, the interface pretty similar to what you 72 00:04:36,250 --> 00:04:38,050 would see on a Codespace environment. 73 00:04:38,050 --> 00:04:41,760 You got the File Explorer on the left, or you got your terminal 74 00:04:41,760 --> 00:04:45,780 in the bottom, and the editor on the center. 75 00:04:45,780 --> 00:04:48,630 76 00:04:48,630 --> 00:04:53,100 Now first, let's go through the package installation process, 77 00:04:53,100 --> 00:04:54,150 starting with Python. 78 00:04:54,150 --> 00:05:03,580 79 00:05:03,580 --> 00:05:09,080 So if you go to a python.org, and head over to Download. 80 00:05:09,080 --> 00:05:14,610 Similarly you can also download a Mac OS version of Python 81 00:05:14,610 --> 00:05:18,141 and install it on your computer. 82 00:05:18,141 --> 00:05:19,795 Just going to double click on this. 83 00:05:19,795 --> 00:05:24,610 84 00:05:24,610 --> 00:05:39,590 [INAUDIBLE] And usually the installation would take a while, 85 00:05:39,590 --> 00:05:43,430 but it should be very straightforward. 86 00:05:43,430 --> 00:05:55,150 The installation will take about a few minutes 87 00:05:55,150 --> 00:05:59,140 And again, because these are all pre-configured on the Codespace, that's 88 00:05:59,140 --> 00:06:00,850 why, each time you launch a Codespace, it 89 00:06:00,850 --> 00:06:03,308 doesn't take that long, because all the software is already 90 00:06:03,308 --> 00:06:04,640 pre-installed on the Codespace. 91 00:06:04,640 --> 00:06:08,110 But on your Mac, locally, you will need to do this manually. 92 00:06:08,110 --> 00:06:10,761 But this is a one-time installation. 93 00:06:10,761 --> 00:06:18,130 94 00:06:18,130 --> 00:06:21,400 So to verify your Python has been installed successfully on your Mac, 95 00:06:21,400 --> 00:06:25,810 you just go to your VS Code terminal and type python3. 96 00:06:25,810 --> 00:06:30,970 And it will launch a Python shell, and as you can see by zooming, 97 00:06:30,970 --> 00:06:36,115 you can see it's Python 3.1.0, the version we just installed. 98 00:06:36,115 --> 00:06:40,300 99 00:06:40,300 --> 00:06:43,770 So now that you have the Python environment installed on your Mac, 100 00:06:43,770 --> 00:06:48,570 you can start actually coding some Python script. 101 00:06:48,570 --> 00:06:52,725 But we will just continue moving on to install other software package. 102 00:06:52,725 --> 00:06:57,294 103 00:06:57,294 --> 00:06:59,000 The next one is Node.js. 104 00:06:59,000 --> 00:07:04,770 So this one is a Node.js runtime that's required by the HTTP server. 105 00:07:04,770 --> 00:07:09,500 So in order to use HTTP server, we will need to first install Node.js. 106 00:07:09,500 --> 00:07:14,760 And after installing Node.js, besides installing HTTP server, 107 00:07:14,760 --> 00:07:18,890 you can also discover many other Node.js package on the internet 108 00:07:18,890 --> 00:07:21,300 that you can install. 109 00:07:21,300 --> 00:07:22,200 Let's just do over-- 110 00:07:22,200 --> 00:07:23,010 let's just do that. 111 00:07:23,010 --> 00:07:49,000 112 00:07:49,000 --> 00:07:52,680 So again similarly, a user can search Node.js on Google. 113 00:07:52,680 --> 00:08:04,660 114 00:08:04,660 --> 00:08:08,830 And you will want to download the latest long term supported 115 00:08:08,830 --> 00:08:10,385 version for the Node.js. 116 00:08:10,385 --> 00:08:35,419 117 00:08:35,419 --> 00:08:39,479 And again, after installation you can type node -v 118 00:08:39,479 --> 00:08:46,340 to verify the Node.js runtime has been installed successfully on your Mac. 119 00:08:46,340 --> 00:08:48,620 So once we install the Node.js runtime, we 120 00:08:48,620 --> 00:08:51,170 can go ahead and install the HTTP server. 121 00:08:51,170 --> 00:08:56,690 122 00:08:56,690 --> 00:09:00,220 So the HTTP server is actually a node application 123 00:09:00,220 --> 00:09:04,600 that serve your local directory, just so you 124 00:09:04,600 --> 00:09:09,580 can view the web page, view all the web content, locally on your Mac 125 00:09:09,580 --> 00:09:13,120 without needing to connect to the internet. 126 00:09:13,120 --> 00:09:19,010 This is actually very useful to help developing web application on your Mac 127 00:09:19,010 --> 00:09:19,510 locally. 128 00:09:19,510 --> 00:09:22,650 129 00:09:22,650 --> 00:09:28,640 So usually people will search npm-- 130 00:09:28,640 --> 00:09:34,670 npm is just a number package registry-- 131 00:09:34,670 --> 00:09:39,860 and you will find http-server here. 132 00:09:39,860 --> 00:09:42,260 And to install the HTTP server, we actually 133 00:09:42,260 --> 00:09:46,210 need to run a command on the terminal. 134 00:09:46,210 --> 00:09:51,110 135 00:09:51,110 --> 00:09:56,830 So "npm install" is actually the way you install a package. 136 00:09:56,830 --> 00:10:01,150 You can npm install vsc, for example, if you 137 00:10:01,150 --> 00:10:03,040 want to develop a VS Code extension. 138 00:10:03,040 --> 00:10:04,870 You can install that package. 139 00:10:04,870 --> 00:10:07,970 But right now, we are installing the http-server package, 140 00:10:07,970 --> 00:10:12,430 and so that's why I'm typing "npm install -g http-server". 141 00:10:12,430 --> 00:10:16,580 -g means you want to install this package globally, 142 00:10:16,580 --> 00:10:19,930 so that you can run this command anywhere on your Mac. 143 00:10:19,930 --> 00:10:27,150 144 00:10:27,150 --> 00:10:30,630 And usually, once the installation is finished, 145 00:10:30,630 --> 00:10:33,580 usually you'll find there's no error message are logged. 146 00:10:33,580 --> 00:10:37,012 It means your http-server has been installed successfully. 147 00:10:37,012 --> 00:10:39,670 148 00:10:39,670 --> 00:10:45,000 Now let's actually gets a demo on how we can serve the home page 149 00:10:45,000 --> 00:10:48,690 problem set on your Mac locally. 150 00:10:48,690 --> 00:10:55,150 I'm going to git clone the home page problem set. 151 00:10:55,150 --> 00:10:58,565 We're going to cd into homepage. 152 00:10:58,565 --> 00:10:59,650 Clear the browser. 153 00:10:59,650 --> 00:11:02,430 So now I'm in the home page, right? 154 00:11:02,430 --> 00:11:08,980 I want to view this index.html file on a browser. 155 00:11:08,980 --> 00:11:10,190 How can I do that? 156 00:11:10,190 --> 00:11:12,992 So similarly, you would type http-server. 157 00:11:12,992 --> 00:11:17,890 158 00:11:17,890 --> 00:11:22,960 So on Codespaces, the http-server is actually a wrapper that we wrote, 159 00:11:22,960 --> 00:11:28,160 that we simplify many arguments. 160 00:11:28,160 --> 00:11:32,980 So if I'm typing http-server right now and hit Enter, 161 00:11:32,980 --> 00:11:41,270 you will actually spawn a server and run it on port 8080 on my Mac address. 162 00:11:41,270 --> 00:11:44,640 And I can actually open this. 163 00:11:44,640 --> 00:11:47,780 As you can, see the home page has been served here. 164 00:11:47,780 --> 00:11:48,730 "Hello, homepage." 165 00:11:48,730 --> 00:11:54,920 And I can-- so this is how you start developing a web project on your Mac 166 00:11:54,920 --> 00:11:55,420 locally. 167 00:11:55,420 --> 00:11:57,760 Right now, I'm not connecting to Codespace at all. 168 00:11:57,760 --> 00:12:02,380 This IP address is simply just my address. 169 00:12:02,380 --> 00:12:05,020 It's a reserved IP address, and a private IP 170 00:12:05,020 --> 00:12:09,310 address that's running on my Mac. 171 00:12:09,310 --> 00:12:13,855 And I can go ahead and update my web page. 172 00:12:13,855 --> 00:12:16,040 Do that "Hello, world." 173 00:12:16,040 --> 00:12:21,530 And we can change it title to VS Code Seminar. 174 00:12:21,530 --> 00:12:23,900 Let's go back to here, and then refresh the browser. 175 00:12:23,900 --> 00:12:26,450 And as you can see, the content has been updated. 176 00:12:26,450 --> 00:12:28,600 So this is all happening within my Mac. 177 00:12:28,600 --> 00:12:32,360 178 00:12:32,360 --> 00:12:41,150 All right, let's stop the server by hitting Control + C. 179 00:12:41,150 --> 00:12:44,670 So next one, the sqlite3. 180 00:12:44,670 --> 00:12:48,190 181 00:12:48,190 --> 00:12:52,720 So next one is SQLite, which is a database viewer. 182 00:12:52,720 --> 00:12:53,930 If right now-- 183 00:12:53,930 --> 00:12:55,630 So if we want to demo this-- 184 00:12:55,630 --> 00:12:58,200 185 00:12:58,200 --> 00:13:00,560 I'm going to use the finance problems as an example. 186 00:13:00,560 --> 00:13:19,070 187 00:13:19,070 --> 00:13:24,500 So there is a finance.db file on my file explorer and I want to view it, right? 188 00:13:24,500 --> 00:13:34,440 If I type sqlite3 and finance, right now, it's running on my Mac 189 00:13:34,440 --> 00:13:36,270 and I'm able to view it. 190 00:13:36,270 --> 00:13:38,970 But to install it-- 191 00:13:38,970 --> 00:13:42,450 your Mac doesn't come with SQLite initially, so to install it, 192 00:13:42,450 --> 00:13:48,150 we also need to download this SQLite software and install it on our Mac. 193 00:13:48,150 --> 00:13:51,890 194 00:13:51,890 --> 00:13:55,280 And to do it, let's actually go to the sqlite3 website. 195 00:13:55,280 --> 00:14:01,280 196 00:14:01,280 --> 00:14:05,360 And sometimes it's a software distribution, it's kind of messy. 197 00:14:05,360 --> 00:14:09,740 As you can see, SQLite is actually supported by many, many operating 198 00:14:09,740 --> 00:14:12,510 systems, but we only care about macOS right now. 199 00:14:12,510 --> 00:14:17,075 So I'm just going to quickly search Mac and find this package. 200 00:14:17,075 --> 00:14:21,870 201 00:14:21,870 --> 00:14:24,400 I'm going to unzip it. 202 00:14:24,400 --> 00:14:26,940 So as you can see, after you unzip the file, 203 00:14:26,940 --> 00:14:31,470 it has three binaries that you can execute, actually, 204 00:14:31,470 --> 00:14:35,520 but this is the one we want to install on our Mac. 205 00:14:35,520 --> 00:14:38,550 And the installation process for this one 206 00:14:38,550 --> 00:14:42,330 is actually a little bit complicated, but not that difficult. 207 00:14:42,330 --> 00:14:43,650 Let me explain why. 208 00:14:43,650 --> 00:14:46,640 209 00:14:46,640 --> 00:14:51,580 So right now, I already pre-install SQLite. 210 00:14:51,580 --> 00:14:55,360 And I can ask Mac, where is the SQLite install? 211 00:14:55,360 --> 00:15:02,950 And Mac tells me, SQLite is installed under this directory. 212 00:15:02,950 --> 00:15:07,470 It's in /usr/bin/sqlite3. 213 00:15:07,470 --> 00:15:12,390 So the installation process is literally copy the sqlite3 214 00:15:12,390 --> 00:15:15,060 to the correct directory. 215 00:15:15,060 --> 00:15:20,440 216 00:15:20,440 --> 00:15:28,940 And to do it, you want to locate your software package. 217 00:15:28,940 --> 00:15:38,985 You will want to copy this software to the correct location. 218 00:15:38,985 --> 00:15:41,510 219 00:15:41,510 --> 00:15:43,030 This one. 220 00:15:43,030 --> 00:15:47,035 And since I already installed it, I will probably get an overwritten prompt. 221 00:15:47,035 --> 00:16:28,520 222 00:16:28,520 --> 00:16:36,560 So I mean, once you copy your sqlite3 library into your /usr/bin directory. 223 00:16:36,560 --> 00:16:40,760 Mac will be able to search this software when you're trying to launch, 224 00:16:40,760 --> 00:16:45,690 because there's a PATH environment variable on Mac as well. 225 00:16:45,690 --> 00:16:53,780 And I can also display, because Mac-- whenever you type a sqlite3 command, 226 00:16:53,780 --> 00:16:58,070 your Mac will search all these locations and find that package. 227 00:16:58,070 --> 00:17:02,270 And since we copy paste the sqlite3 software into that location, 228 00:17:02,270 --> 00:17:03,660 your Mac will be able to find it. 229 00:17:03,660 --> 00:17:10,750 And that's how you are type the sqlite3 command and launch the database viewer. 230 00:17:10,750 --> 00:17:12,019 We can go back to our example. 231 00:17:12,019 --> 00:17:21,700 232 00:17:21,700 --> 00:17:25,910 And run "sqlite3 finance.db". 233 00:17:25,910 --> 00:17:28,280 And we are now opened finance.db. 234 00:17:28,280 --> 00:17:31,970 And to view the schema, just to verify we are able to view this database, 235 00:17:31,970 --> 00:17:37,760 I'm just going to type .schema, and you can see we are able to actually view 236 00:17:37,760 --> 00:17:39,710 the finance.db on your Mac. 237 00:17:39,710 --> 00:17:43,420 238 00:17:43,420 --> 00:17:49,390 And lastly, you want to run a more elaborate HTTP 239 00:17:49,390 --> 00:17:52,060 server, such as Flask server, right? 240 00:17:52,060 --> 00:17:54,280 When we are doing the finance problems, that you 241 00:17:54,280 --> 00:18:00,440 want to run "flask run" so that you can launch your application. 242 00:18:00,440 --> 00:18:07,360 And we need to install the Flask Python library in this scenario. 243 00:18:07,360 --> 00:18:12,960 So to do that I'm going to type "pip3 install flask". 244 00:18:12,960 --> 00:18:16,020 This is how you install a Python package. 245 00:18:16,020 --> 00:18:22,080 It's different than installing a node package. 246 00:18:22,080 --> 00:18:26,310 To install Flask, I'm just going to hit Enter and run this command. 247 00:18:26,310 --> 00:18:30,540 248 00:18:30,540 --> 00:18:33,930 And as you say as you can see, you don't see any error message. 249 00:18:33,930 --> 00:18:39,680 It means your Flask package has been successfully installed on your Mac. 250 00:18:39,680 --> 00:18:48,870 And to launch your finance web app, you will type "flask run". 251 00:18:48,870 --> 00:18:51,930 And usually students will have a mistake because they forget 252 00:18:51,930 --> 00:18:59,980 to put the environment variable there. 253 00:18:59,980 --> 00:19:11,080 254 00:19:11,080 --> 00:19:13,390 [INAUDIBLE] Yeah. 255 00:19:13,390 --> 00:19:16,520 Yeah, usually-- this is actually a good teaching moment. 256 00:19:16,520 --> 00:19:21,070 So since I never install Flask on my Mac before, after installation 257 00:19:21,070 --> 00:19:23,510 my terminal actually did not know about it. 258 00:19:23,510 --> 00:19:26,980 So what I did was I quit my terminal and then relaunched again, 259 00:19:26,980 --> 00:19:31,190 so then my terminal knows of all the newly installed package. 260 00:19:31,190 --> 00:19:33,920 So right now, I can just run "flask run". 261 00:19:33,920 --> 00:19:36,160 But before I do that, because the finance problem 262 00:19:36,160 --> 00:19:40,210 set require us to specify an API key, I'm just going to do it quickly. 263 00:19:40,210 --> 00:19:43,130 264 00:19:43,130 --> 00:19:44,980 Just randomly typing my token here. 265 00:19:44,980 --> 00:19:57,230 266 00:19:57,230 --> 00:19:59,810 And Carter, do you know why I'm getting this import error? 267 00:19:59,810 --> 00:20:04,090 268 00:20:04,090 --> 00:20:05,010 CARTER: So I think-- 269 00:20:05,010 --> 00:20:07,110 you installed Flask with Python, right? 270 00:20:07,110 --> 00:20:08,250 RONGXIN: Yes. 271 00:20:08,250 --> 00:20:12,150 CARTER: And the finance piece that also relies on a package 272 00:20:12,150 --> 00:20:17,010 called flask_session, so I think we need to pip install that one. 273 00:20:17,010 --> 00:20:21,540 And then there's also another library, called the CS50 Python library, 274 00:20:21,540 --> 00:20:24,082 we could probably talk about to. 275 00:20:24,082 --> 00:20:25,790 RONGXIN: All right, thank you, very good. 276 00:20:25,790 --> 00:20:30,260 So another teaching moment. 277 00:20:30,260 --> 00:20:36,950 Since on the Codespace we also install a Python CS50 library for you already. 278 00:20:36,950 --> 00:20:40,880 But on your Mac, of course, Mac doesn't come with CS50's Python library. 279 00:20:40,880 --> 00:20:42,140 We also need to install that. 280 00:20:42,140 --> 00:20:45,820 281 00:20:45,820 --> 00:20:49,470 I'm going to type "pip install lib50". 282 00:20:49,470 --> 00:20:51,990 But I think there's another problem here, actually. 283 00:20:51,990 --> 00:20:54,030 But we will see if it goes well. 284 00:20:54,030 --> 00:20:58,540 285 00:20:58,540 --> 00:21:00,361 All right. 286 00:21:00,361 --> 00:21:03,840 I'm going to run "flask run" again. 287 00:21:03,840 --> 00:21:05,490 So I'm getting this error. 288 00:21:05,490 --> 00:21:08,010 I'm going to do something else. 289 00:21:08,010 --> 00:21:08,760 I'm going to try-- 290 00:21:08,760 --> 00:21:11,640 291 00:21:11,640 --> 00:21:13,830 I'll explain later, after typing this. 292 00:21:13,830 --> 00:21:24,680 293 00:21:24,680 --> 00:21:29,530 CARTER: I think we also need the cs50 Python library. 294 00:21:29,530 --> 00:21:32,260 Because I think you did lib50, but I think 295 00:21:32,260 --> 00:21:38,290 it's pip install cs50 is one of the packages, as well. 296 00:21:38,290 --> 00:21:39,580 RONGXIN: OK, let's try that. 297 00:21:39,580 --> 00:21:42,800 298 00:21:42,800 --> 00:21:44,290 Then maybe, let's try-- 299 00:21:44,290 --> 00:21:46,900 300 00:21:46,900 --> 00:21:48,068 all right, thanks Carter. 301 00:21:48,068 --> 00:21:48,610 CARTER: Yeah. 302 00:21:48,610 --> 00:21:49,318 RONGXIN: So yeah. 303 00:21:49,318 --> 00:21:52,840 So through all these steps of process, you see, 304 00:21:52,840 --> 00:21:58,810 as a novel programmer myself, if I'm going to develop my software locally 305 00:21:58,810 --> 00:22:02,350 on the Mac, I will have to go through all these steps to provision 306 00:22:02,350 --> 00:22:04,750 my environment. 307 00:22:04,750 --> 00:22:06,670 And this is the truth. 308 00:22:06,670 --> 00:22:11,200 We really need to properly or correctly provision our environment 309 00:22:11,200 --> 00:22:12,800 before we can start development. 310 00:22:12,800 --> 00:22:16,690 And that's why, usually when you develop your software locally, 311 00:22:16,690 --> 00:22:19,840 you have to go through so much pain before you actually 312 00:22:19,840 --> 00:22:20,980 start writing your code. 313 00:22:20,980 --> 00:22:27,040 And that's why Codespaces exist, and we, CS50, pre-provision environment 314 00:22:27,040 --> 00:22:29,108 for you. 315 00:22:29,108 --> 00:22:31,900 But again, right now, as you can see, after consulting with Carter, 316 00:22:31,900 --> 00:22:34,850 after some googling, and some trial and error, 317 00:22:34,850 --> 00:22:40,780 I was able to successfully launch the Flask server, eventually. 318 00:22:40,780 --> 00:22:43,750 And similarly, this is running on port 5000 this time. 319 00:22:43,750 --> 00:22:48,530 It's a Flask web app, and it's running on my Mac IP address as well. 320 00:22:48,530 --> 00:22:53,110 And right now I can see the finance distribution codes already being 321 00:22:53,110 --> 00:22:55,540 served on port 5000. 322 00:22:55,540 --> 00:22:59,170 And right now, this is actually-- and the remaining steps 323 00:22:59,170 --> 00:23:00,100 are actually similar. 324 00:23:00,100 --> 00:23:04,990 You move on to a finish, implement, all the routes, and this 325 00:23:04,990 --> 00:23:07,780 all happens on your Mac locally. 326 00:23:07,780 --> 00:23:09,610 It's not happening on Codespace, again. 327 00:23:09,610 --> 00:23:12,200 328 00:23:12,200 --> 00:23:15,140 For example, if I click the register route, I would get 400. 329 00:23:15,140 --> 00:23:16,310 I haven't implemented it. 330 00:23:16,310 --> 00:23:22,260 331 00:23:22,260 --> 00:23:24,950 And as you can see, your terminal will also 332 00:23:24,950 --> 00:23:27,830 get all those debug output, similar to what you 333 00:23:27,830 --> 00:23:30,815 would get on a Codespace environment. 334 00:23:30,815 --> 00:23:36,270 335 00:23:36,270 --> 00:23:39,830 So after talking about provisioning your environment, 336 00:23:39,830 --> 00:23:43,040 next I'm just going to briefly mention what 337 00:23:43,040 --> 00:23:45,920 else you can do with VS Code running on your Mac locally. 338 00:23:45,920 --> 00:23:53,720 For example, you can install many, many extension from the Microsoft VS Code 339 00:23:53,720 --> 00:23:54,290 Market. 340 00:23:54,290 --> 00:23:58,640 You can install, for example, I want to change my theme. 341 00:23:58,640 --> 00:23:59,820 How can I do that? 342 00:23:59,820 --> 00:24:04,940 I can install a GitHub theme that I usually use. 343 00:24:04,940 --> 00:24:06,290 I would just search it. 344 00:24:06,290 --> 00:24:07,670 I installed it. 345 00:24:07,670 --> 00:24:11,000 My VS Code theme get updated immediately. 346 00:24:11,000 --> 00:24:13,480 And I can change to the other there. 347 00:24:13,480 --> 00:24:16,100 There's more you can discover yourself. 348 00:24:16,100 --> 00:24:19,370 You can keep exploring the extensions you want. 349 00:24:19,370 --> 00:24:30,340 350 00:24:30,340 --> 00:24:33,220 But again, at the end of the day, VS Code 351 00:24:33,220 --> 00:24:37,380 is just a is just a source code editor. 352 00:24:37,380 --> 00:24:42,210 It just like a more fancier version of a plain text editor, really, 353 00:24:42,210 --> 00:24:48,270 and all these extensibility provided by VS Code 354 00:24:48,270 --> 00:24:51,700 is always available on both Codespace and your Mac. 355 00:24:51,700 --> 00:24:56,250 So your editing experience won't change much regardless 356 00:24:56,250 --> 00:24:58,410 which platform you are using. 357 00:24:58,410 --> 00:25:01,170 And the reason why you might want to do it locally 358 00:25:01,170 --> 00:25:04,410 is because sometimes you don't have reliable internet connection. 359 00:25:04,410 --> 00:25:09,800 Sometimes you just want to develop your secret project locally. 360 00:25:09,800 --> 00:25:11,550 You don't want it to live on the internet. 361 00:25:11,550 --> 00:25:14,560 That's another reason to do it. 362 00:25:14,560 --> 00:25:16,170 But, yeah, again this-- 363 00:25:16,170 --> 00:25:18,960 and also you have more flexibility, to be honest, 364 00:25:18,960 --> 00:25:20,940 because this is your own Mac. 365 00:25:20,940 --> 00:25:22,050 Your own laptop. 366 00:25:22,050 --> 00:25:23,350 You can do whatever you want. 367 00:25:23,350 --> 00:25:28,410 You can provision the environment however you want and, you can-- 368 00:25:28,410 --> 00:25:33,480 that's how you can further customize your development experience 369 00:25:33,480 --> 00:25:34,500 on your Mac. 370 00:25:34,500 --> 00:25:38,100 And there's many other reasons why you want it to be locally. 371 00:25:38,100 --> 00:25:42,960 And sometimes Codespace might suffer some outage. 372 00:25:42,960 --> 00:25:46,020 You don't have Codespace available, but you can always open your Mac 373 00:25:46,020 --> 00:25:48,780 and continue your coding there. 374 00:25:48,780 --> 00:25:54,330 375 00:25:54,330 --> 00:25:56,940 Yeah, and with that I think this concludes 376 00:25:56,940 --> 00:26:00,780 all the require steps to set up an environment 377 00:26:00,780 --> 00:26:04,740 to develop your product locally with VS Code on Mac. 378 00:26:04,740 --> 00:26:10,310 I hope this walkthrough and seminar is helpful for you. 379 00:26:10,310 --> 00:26:13,550 And I think we have some more time to open 380 00:26:13,550 --> 00:26:19,930 for Q&A. Does anyone have questions? 381 00:26:19,930 --> 00:26:23,660 Please raise your hand, or ask questions on the chat. 382 00:26:23,660 --> 00:26:25,200 I can answer. 383 00:26:25,200 --> 00:26:28,360 384 00:26:28,360 --> 00:26:32,630 CARTER: Rongxin, we had a question about are there steps 385 00:26:32,630 --> 00:26:36,140 we could look at to install Flask? 386 00:26:36,140 --> 00:26:40,355 Like does Flask have documentation of how to install itself, and so on, 387 00:26:40,355 --> 00:26:42,557 and where would we look for that? 388 00:26:42,557 --> 00:26:43,890 RONGXIN: Oh, yes, good question. 389 00:26:43,890 --> 00:26:46,890 So again, I'm a good fan of Google search. 390 00:26:46,890 --> 00:26:49,340 So I would just search Flask documentation. 391 00:26:49,340 --> 00:26:53,180 392 00:26:53,180 --> 00:26:57,080 So here is the Flask official website. 393 00:26:57,080 --> 00:27:03,050 It has a pretty substantial documentation on how to install Flask, 394 00:27:03,050 --> 00:27:08,120 and how you can develop your web application using the Flask library, 395 00:27:08,120 --> 00:27:09,270 as well. 396 00:27:09,270 --> 00:27:12,410 So here you will find all the necessary documentation 397 00:27:12,410 --> 00:27:18,320 you need, and specifically regarding the installation. 398 00:27:18,320 --> 00:27:26,430 It has, like, how you can install Flask on Mac or Windows. 399 00:27:26,430 --> 00:27:28,470 It has all the documentation. 400 00:27:28,470 --> 00:27:30,600 This website will be the one you want to look for. 401 00:27:30,600 --> 00:27:35,260 I'm going to send it to everybody. 402 00:27:35,260 --> 00:27:37,780 CARTER: And, also, correct me if I'm wrong, Rongxin, 403 00:27:37,780 --> 00:27:40,870 I think some of those first steps, like the environment things, 404 00:27:40,870 --> 00:27:42,850 are somewhat optional, and the core part is 405 00:27:42,850 --> 00:27:45,850 that install flask, sort of lower there, like the "pip install flask", 406 00:27:45,850 --> 00:27:46,720 and so on. 407 00:27:46,720 --> 00:27:49,120 It's like nice to have a contained environment where 408 00:27:49,120 --> 00:27:52,812 you can have your own packages, but I think 409 00:27:52,812 --> 00:27:56,020 the core piece of installing Flask is that second piece, later down the page. 410 00:27:56,020 --> 00:27:57,310 Is that right? 411 00:27:57,310 --> 00:28:01,360 RONGXIN: Oh, yes, the pip install is actually the actual installation. 412 00:28:01,360 --> 00:28:02,110 Yes, correct. 413 00:28:02,110 --> 00:28:06,670 So, here, to create an environment and activate an environment, 414 00:28:06,670 --> 00:28:08,005 that's something else. 415 00:28:08,005 --> 00:28:10,920 416 00:28:10,920 --> 00:28:16,770 So you can also have multiple environments on a platform. 417 00:28:16,770 --> 00:28:20,010 You can switch between-- when you are switched between development projects, 418 00:28:20,010 --> 00:28:22,000 you want different dependencies. 419 00:28:22,000 --> 00:28:26,580 These are neat things to have, but not required to install Flask, 420 00:28:26,580 --> 00:28:31,050 and the only place you want to pay attention to 421 00:28:31,050 --> 00:28:32,970 is the install Flask section. 422 00:28:32,970 --> 00:28:38,450 423 00:28:38,450 --> 00:28:42,560 CARTER: And another question that we got, if we can move on from this one, 424 00:28:42,560 --> 00:28:46,490 is how would we use git on VS Code? 425 00:28:46,490 --> 00:28:49,880 Is there anything different about using git locally versus how 426 00:28:49,880 --> 00:28:52,100 you would use it in Codespaces? 427 00:28:52,100 --> 00:28:55,310 Just, how would we use git through VS Code? 428 00:28:55,310 --> 00:28:56,600 RONGXIN: Sure, good question. 429 00:28:56,600 --> 00:28:59,510 430 00:28:59,510 --> 00:29:02,270 So let me actually demonstrate real quick. 431 00:29:02,270 --> 00:29:08,208 432 00:29:08,208 --> 00:29:10,000 So what I'm doing right now, I'm just going 433 00:29:10,000 --> 00:29:14,630 to remove all the cloned repositories from my demo folder right now. 434 00:29:14,630 --> 00:29:16,855 And I can go through the clone process. 435 00:29:16,855 --> 00:29:22,630 436 00:29:22,630 --> 00:29:30,720 So on Codespaces, right, especially on the CS50 Codespaces, 437 00:29:30,720 --> 00:29:35,490 since we want to simplify all these git commands, 438 00:29:35,490 --> 00:29:39,570 all this git clone, git, push, git commit steps for students, 439 00:29:39,570 --> 00:29:43,710 we actually write a wrapper software submit50. 440 00:29:43,710 --> 00:29:47,280 And underneath the hood, submit50, if you are familiar with this, 441 00:29:47,280 --> 00:29:49,920 underneath the hood, it's actually running a bunch of comments 442 00:29:49,920 --> 00:29:53,880 for you to submit your homework. 443 00:29:53,880 --> 00:29:56,850 And you will also familiar with get50, which is a git clone 444 00:29:56,850 --> 00:29:58,710 command underneath the hood. 445 00:29:58,710 --> 00:30:04,860 On your Mac, because your Mac doesn't have get50 and submit50, if you 446 00:30:04,860 --> 00:30:06,720 want to get a distribution code-- 447 00:30:06,720 --> 00:30:11,340 let's say the home page assignment-- 448 00:30:11,340 --> 00:30:20,400 on your Mac, you would want to type "git clone", and paste the assignment URL. 449 00:30:20,400 --> 00:30:25,940 And git is actually a common software that is already pre-installed on Mac, 450 00:30:25,940 --> 00:30:31,140 but usually when you're first hand launching it, 451 00:30:31,140 --> 00:30:34,610 Xcode pops up, saying you want to install some package. 452 00:30:34,610 --> 00:30:38,120 You just click Install the required command line package, 453 00:30:38,120 --> 00:30:39,720 and you will be able to use git. 454 00:30:39,720 --> 00:30:42,560 So git is actually pre-installed on Mac. 455 00:30:42,560 --> 00:30:48,980 And the command I just managed is git clone, to get the distribution code. 456 00:30:48,980 --> 00:30:52,290 457 00:30:52,290 --> 00:30:55,040 CARTER: And we also just finished up a seminar on Git, 458 00:30:55,040 --> 00:30:57,390 and using that for collaboration version control. 459 00:30:57,390 --> 00:30:59,360 So on the course website, on the seminars page, 460 00:30:59,360 --> 00:31:02,240 there is a recording of a seminar on how to use git that sort of goes 461 00:31:02,240 --> 00:31:04,600 in much more depth as well. 462 00:31:04,600 --> 00:31:06,000