1 00:00:00,000 --> 00:00:01,577 2 00:00:01,577 --> 00:00:02,660 RONGXIN LIU: Hi, everyone. 3 00:00:02,660 --> 00:00:03,790 My name is Rongxin. 4 00:00:03,790 --> 00:00:06,850 In this section, I'm going to talk about some of the CS50 tools 5 00:00:06,850 --> 00:00:12,370 that we use to facilitate students learning throughout the CS50 journey. 6 00:00:12,370 --> 00:00:15,820 So we will cover the standardized programming environment, 7 00:00:15,820 --> 00:00:20,440 some of the tools that help educator to collect student submission and grade 8 00:00:20,440 --> 00:00:22,360 student submission. 9 00:00:22,360 --> 00:00:28,110 So to concretely, we will go through these tools one by one. 10 00:00:28,110 --> 00:00:31,510 So first, let's talk about the standardized programming environment. 11 00:00:31,510 --> 00:00:33,720 So we all know that at the term start, it's 12 00:00:33,720 --> 00:00:38,070 often a very challenging task for student, even for educator, 13 00:00:38,070 --> 00:00:41,430 to tell their student to set up their own programming environment so that they 14 00:00:41,430 --> 00:00:43,960 can get started with the assignment. 15 00:00:43,960 --> 00:00:48,660 It is often time that these part, like configuring their own programming 16 00:00:48,660 --> 00:00:51,160 environment, scares of lots of student. 17 00:00:51,160 --> 00:00:53,083 And it's really a painful process because we 18 00:00:53,083 --> 00:00:56,250 are dealing with different kinds of operating system and different operating 19 00:00:56,250 --> 00:00:59,730 system require different software packages in order 20 00:00:59,730 --> 00:01:02,910 to run just a Hello World program. 21 00:01:02,910 --> 00:01:07,440 So historically, over the past decade, we've been wanting-- 22 00:01:07,440 --> 00:01:12,000 we've been providing students with standardized programming environment. 23 00:01:12,000 --> 00:01:16,960 In the early days, we are offering student on campus with a shell access. 24 00:01:16,960 --> 00:01:20,080 So each student actually has their own terminal access. 25 00:01:20,080 --> 00:01:24,970 They can still write code in the terminal user interface. 26 00:01:24,970 --> 00:01:29,980 Slowly, gradually, we start utilizing AWS EC2 technology. 27 00:01:29,980 --> 00:01:33,250 Once that become available, we quickly adopt that 28 00:01:33,250 --> 00:01:36,970 so that we will be able to allow student to actually run 29 00:01:36,970 --> 00:01:43,910 their code over the internet and get better respond interactively. 30 00:01:43,910 --> 00:01:47,470 There's a time that we actually literally hand student 31 00:01:47,470 --> 00:01:49,570 like a virtual machine, like an appliance, what 32 00:01:49,570 --> 00:01:51,113 we call the CS50 appliance. 33 00:01:51,113 --> 00:01:53,530 That student will be able to download this virtual machine 34 00:01:53,530 --> 00:01:57,800 image it, installing on their computer, like launching this virtual environment. 35 00:01:57,800 --> 00:02:01,400 So that everyone's programming environment is the same. 36 00:02:01,400 --> 00:02:04,120 But the problem with this approach is this time 37 00:02:04,120 --> 00:02:09,009 that student will periodically need to update their programming environments, 38 00:02:09,009 --> 00:02:15,210 just so in sync with the course syllabus or course content. 39 00:02:15,210 --> 00:02:17,790 Few years back, there's a company called Cloud9. 40 00:02:17,790 --> 00:02:20,230 Now, it's being acquired by AWS. 41 00:02:20,230 --> 00:02:23,130 We quickly also adopt the Cloud9 technology, which 42 00:02:23,130 --> 00:02:27,310 is a browser-based interactive programming environment, 43 00:02:27,310 --> 00:02:31,140 so integrated programming environment, so students can literally just 44 00:02:31,140 --> 00:02:35,970 visit cs50.io, and they will be able to access a standardized programming 45 00:02:35,970 --> 00:02:37,480 environment right from the browser. 46 00:02:37,480 --> 00:02:41,080 And then, they can start coding right from there. 47 00:02:41,080 --> 00:02:43,830 And the good thing about this browser-based approach 48 00:02:43,830 --> 00:02:49,050 is that there's not much hardware requirement for students. 49 00:02:49,050 --> 00:02:52,080 All they need is like a reliable internet access and a browser, 50 00:02:52,080 --> 00:02:56,020 and they can start doing their Hello World problem set. 51 00:02:56,020 --> 00:02:58,900 Now, we transition to use VS Code. 52 00:02:58,900 --> 00:03:02,860 VS Code is a very popularized programming environment 53 00:03:02,860 --> 00:03:05,770 for industry programmer as well. 54 00:03:05,770 --> 00:03:10,450 So we think this is a good chance, opportunities to switch over, 55 00:03:10,450 --> 00:03:14,020 mostly because student can get familiar with the integrated programming 56 00:03:14,020 --> 00:03:16,750 environment of VS Code concretely. 57 00:03:16,750 --> 00:03:19,600 That way, through the terms and at the end 58 00:03:19,600 --> 00:03:22,180 of the semester when they finish CS50, they 59 00:03:22,180 --> 00:03:24,970 can naturally transition to actually working in the industry 60 00:03:24,970 --> 00:03:30,220 without having to learn a new IDE, or they can quickly familiarize themselves 61 00:03:30,220 --> 00:03:32,690 with IDE that's similar to VS Code. 62 00:03:32,690 --> 00:03:35,860 And that's basically the overview of the history of the 63 00:03:35,860 --> 00:03:41,270 how CS50 provided a standardized programming environment to student. 64 00:03:41,270 --> 00:03:44,650 And right now, I'm just going to go a little bit deeper 65 00:03:44,650 --> 00:03:49,450 on how we actually make this happen and offer students this standardized IDE. 66 00:03:49,450 --> 00:03:53,890 And hopefully, all of you can actually customize your own standardized IDE 67 00:03:53,890 --> 00:03:59,060 and offer to your student to suit your classroom needs. 68 00:03:59,060 --> 00:04:04,280 And just to mention some of the solution, like in addition to VS Code, 69 00:04:04,280 --> 00:04:08,040 there's a bunch of different kinds of IDE available in the wild, right? 70 00:04:08,040 --> 00:04:11,160 There's an Android Studio mostly for developing Android apps. 71 00:04:11,160 --> 00:04:14,255 There's a IntelliJ IDE as well, which is also popular. 72 00:04:14,255 --> 00:04:17,930 It's a very popular IDE in the industry. 73 00:04:17,930 --> 00:04:19,890 So there's different kinds of IDE. 74 00:04:19,890 --> 00:04:24,440 You don't have to really use VS Code in order to teach CS50. 75 00:04:24,440 --> 00:04:28,470 But VS Code is just working great for us, so that's why we pick VS Code. 76 00:04:28,470 --> 00:04:31,640 There's certainly different kinds of IDE that are best used 77 00:04:31,640 --> 00:04:36,560 for a more narrow domain of purposes. 78 00:04:36,560 --> 00:04:39,800 In terms of virtualization technology, we use Docker. 79 00:04:39,800 --> 00:04:40,590 We like Docker. 80 00:04:40,590 --> 00:04:43,610 Docker is kind of like a lightweight virtualization 81 00:04:43,610 --> 00:04:48,860 technology compared to the traditional virtual machine technology. 82 00:04:48,860 --> 00:04:52,700 And on the server side, there's certainly different kinds of online IDE 83 00:04:52,700 --> 00:04:55,700 available to student as well. 84 00:04:55,700 --> 00:04:59,790 For example, Cloud9, I previously mentioned. 85 00:04:59,790 --> 00:05:03,570 And also, there's a Google Colab for more like a data science machine 86 00:05:03,570 --> 00:05:07,260 learning focused content. 87 00:05:07,260 --> 00:05:09,250 But we picked GitHub Codespaces. 88 00:05:09,250 --> 00:05:12,300 So GitHub Codespaces is essentially a VS Code 89 00:05:12,300 --> 00:05:15,330 running in the cloud backed by Linux virtual machine 90 00:05:15,330 --> 00:05:18,750 running on Microsoft Azure infrastructure. 91 00:05:18,750 --> 00:05:22,180 And this slide is actually also available for you to look at it closely. 92 00:05:22,180 --> 00:05:24,630 I have all the notes in the presenter notes 93 00:05:24,630 --> 00:05:28,990 as well that you can go through them at your own pace. 94 00:05:28,990 --> 00:05:33,430 So first, I'm going to talk about, OK, what GitHub Codespaces is. 95 00:05:33,430 --> 00:05:36,640 All the CS50 student nowadays will use GitHub Codespace 96 00:05:36,640 --> 00:05:40,730 to do their programming assignment. 97 00:05:40,730 --> 00:05:43,340 And the front-end of the GitHub Codespaces 98 00:05:43,340 --> 00:05:45,680 is actually Visual Studio Code. 99 00:05:45,680 --> 00:05:49,430 So Visual Studio Code is an open source online IDE, 100 00:05:49,430 --> 00:05:52,460 like an IDE developed by Microsoft. 101 00:05:52,460 --> 00:05:55,730 Codespaces is actually the compute environment 102 00:05:55,730 --> 00:05:58,250 that are backing the VS Code. 103 00:05:58,250 --> 00:06:04,010 So you can think of when you go visit cs50.dev, when you get into the VS Code 104 00:06:04,010 --> 00:06:08,720 programming environment, you're actually remote into a Docker container 105 00:06:08,720 --> 00:06:11,570 sitting in the Azure Cloud. 106 00:06:11,570 --> 00:06:16,110 That's called a codespace environment. 107 00:06:16,110 --> 00:06:17,530 So what does it do? 108 00:06:17,530 --> 00:06:21,870 Of course, it comes with all the necessary package and software 109 00:06:21,870 --> 00:06:24,840 environment that are required by the CS50 course. 110 00:06:24,840 --> 00:06:30,720 We also included other software packages, such as Java, Node.js, R, 111 00:06:30,720 --> 00:06:37,410 Ruby, as well to suit other needs for different curriculum. 112 00:06:37,410 --> 00:06:39,370 We definitely support C and C++. 113 00:06:39,370 --> 00:06:42,250 That's the language we teach at the beginning. 114 00:06:42,250 --> 00:06:45,020 115 00:06:45,020 --> 00:06:50,340 So you might wonder, OK, how does this GitHub Codespace get provisioned? 116 00:06:50,340 --> 00:06:54,360 There's one important piece of the technology here. 117 00:06:54,360 --> 00:06:55,710 It's called the Dockerfile. 118 00:06:55,710 --> 00:06:58,250 As I mentioned previously as well, we use Docker 119 00:06:58,250 --> 00:07:00,530 as the virtualization technology. 120 00:07:00,530 --> 00:07:03,260 And Dockerfile is kind of like a way for you 121 00:07:03,260 --> 00:07:06,020 to customize the running environment. 122 00:07:06,020 --> 00:07:09,050 You can think of as provisioning your own operating 123 00:07:09,050 --> 00:07:11,780 system for this particular codespace. 124 00:07:11,780 --> 00:07:16,500 And I will go through them in detail in the next few slides. 125 00:07:16,500 --> 00:07:19,330 If you don't know what Dockerfile is, don't worry about it. 126 00:07:19,330 --> 00:07:20,700 So it looks like this. 127 00:07:20,700 --> 00:07:24,700 It's a few lines of code defining what the underlying operating system is. 128 00:07:24,700 --> 00:07:30,480 For example, in the following example, I'm going to use Ubuntu version 22.04. 129 00:07:30,480 --> 00:07:33,510 And I'm going to also pre-install a bunch of packages 130 00:07:33,510 --> 00:07:37,510 that I think the codespace would need. 131 00:07:37,510 --> 00:07:40,070 So it's kind of like a decorative approach. 132 00:07:40,070 --> 00:07:43,750 You can define your operating system in just one file. 133 00:07:43,750 --> 00:07:46,730 There's another piece of important technology here. 134 00:07:46,730 --> 00:07:48,860 It's called the devcontainer.json. 135 00:07:48,860 --> 00:07:53,170 This is basically a file as well, describing 136 00:07:53,170 --> 00:07:57,610 what kind of compute resources you want this codespace to have 137 00:07:57,610 --> 00:08:01,470 and what kind of a VS Code extension you want this codespace to pre-install. 138 00:08:01,470 --> 00:08:05,560 So with the Dockerfile and the devcontainer.json file, 139 00:08:05,560 --> 00:08:07,160 you can define your own codespace. 140 00:08:07,160 --> 00:08:09,310 And in fact, that's how we offer-- 141 00:08:09,310 --> 00:08:13,520 that's how we define the CS50 codespace for all of our students. 142 00:08:13,520 --> 00:08:16,180 We're essentially writing our own Dockerfile, 143 00:08:16,180 --> 00:08:21,010 writing our own devcontainer.json file, and pull it in student's repository 144 00:08:21,010 --> 00:08:24,200 and launch a codespace for student automatically. 145 00:08:24,200 --> 00:08:26,480 That way, when student go to CS50.dev, they 146 00:08:26,480 --> 00:08:30,590 will get the CS50 codespace that has everything 147 00:08:30,590 --> 00:08:32,065 they need to complete the course. 148 00:08:32,065 --> 00:08:34,710 149 00:08:34,710 --> 00:08:40,230 Student can also use the native VS Code desktop client to perform their work. 150 00:08:40,230 --> 00:08:43,140 At the end of the day, it's just a VS Code. 151 00:08:43,140 --> 00:08:45,540 It's a VS Code. 152 00:08:45,540 --> 00:08:48,917 They don't have to connect to the VS Code, the CS50 codespace 153 00:08:48,917 --> 00:08:49,750 through the browser. 154 00:08:49,750 --> 00:08:51,840 They can also connect to the CS50 codespace 155 00:08:51,840 --> 00:08:55,490 through the VS Code desktop client. 156 00:08:55,490 --> 00:08:58,850 And this is basically what it looks like when students go to CS50.dev. 157 00:08:58,850 --> 00:09:01,700 They will get literally like a Login button. 158 00:09:01,700 --> 00:09:05,330 They can just one click, and it will load a codespace for them. 159 00:09:05,330 --> 00:09:09,710 We use GitHub for authentication, so all they need is a GitHub account, 160 00:09:09,710 --> 00:09:13,370 and they can access all the CS50 tools. 161 00:09:13,370 --> 00:09:17,360 And optionally, they can also choose to launch the codespace through the VS Code 162 00:09:17,360 --> 00:09:18,085 desktop client. 163 00:09:18,085 --> 00:09:21,840 164 00:09:21,840 --> 00:09:25,140 So now, I'm going to explain what's happening underneath the hood 165 00:09:25,140 --> 00:09:32,330 and what you can do to create your own codespace for your classroom. 166 00:09:32,330 --> 00:09:37,580 So to get a codespace up and running, so you need a GitHub organization. 167 00:09:37,580 --> 00:09:40,340 Again, all the CS50 tools are mostly built 168 00:09:40,340 --> 00:09:42,570 on top of the GitHub infrastructure. 169 00:09:42,570 --> 00:09:46,230 So everything is surrounding like GitHub services. 170 00:09:46,230 --> 00:09:49,340 So in particular, in order to create a codespace, 171 00:09:49,340 --> 00:09:51,770 you will want to first have a GitHub organization. 172 00:09:51,770 --> 00:09:58,610 And you have to enable codespace access for this particular organization. 173 00:09:58,610 --> 00:10:01,430 For example, if you go to your own GitHub organization, 174 00:10:01,430 --> 00:10:02,690 you go to the Settings page. 175 00:10:02,690 --> 00:10:07,820 You will just enable for all the members or for specific members or teams 176 00:10:07,820 --> 00:10:08,650 accordingly. 177 00:10:08,650 --> 00:10:12,260 So once you have that settings done, your organization 178 00:10:12,260 --> 00:10:13,650 will have codespace enabled. 179 00:10:13,650 --> 00:10:18,500 Of course, there are some billing-specific and plan-specific 180 00:10:18,500 --> 00:10:23,120 option you also need to pick, which is depends on how 181 00:10:23,120 --> 00:10:24,900 you want to pay for the services. 182 00:10:24,900 --> 00:10:28,615 And for educators, there's often a free access 183 00:10:28,615 --> 00:10:31,490 through the GitHub classroom that's available to all of the educators 184 00:10:31,490 --> 00:10:33,270 that you can also check out yourself. 185 00:10:33,270 --> 00:10:38,640 There's a link in the slide as well that you can take a look. 186 00:10:38,640 --> 00:10:44,160 So once you have this organization set, in order to launch a codespace, 187 00:10:44,160 --> 00:10:46,930 all the codespace needs a repository. 188 00:10:46,930 --> 00:10:51,950 Again, a repository, it's a GitHub. 189 00:10:51,950 --> 00:10:54,770 Basically, it's like a way you can put codes in. 190 00:10:54,770 --> 00:10:58,250 Traditionally, you store your codespace in a certain repository 191 00:10:58,250 --> 00:10:59,900 and on GitHub.com. 192 00:10:59,900 --> 00:11:03,480 And all the codespace needs a repository to launch. 193 00:11:03,480 --> 00:11:05,690 You can't launch a codespace without having 194 00:11:05,690 --> 00:11:08,220 a repository created in the beginning. 195 00:11:08,220 --> 00:11:12,150 So in order to create a codespace, you will first have a repository. 196 00:11:12,150 --> 00:11:15,710 So I'm going to walk you through how you can do this. 197 00:11:15,710 --> 00:11:18,530 So let's say you want to create a new repository. 198 00:11:18,530 --> 00:11:21,540 You literally go to your organization, click New. 199 00:11:21,540 --> 00:11:23,010 There's a button called New button. 200 00:11:23,010 --> 00:11:26,330 So you click that, and then it will bring you to this page. 201 00:11:26,330 --> 00:11:28,350 You will give your repository a name. 202 00:11:28,350 --> 00:11:32,365 For example, I'm going to name my repository as My Codespace for the demo. 203 00:11:32,365 --> 00:11:35,540 204 00:11:35,540 --> 00:11:38,420 And I want to make sure it is private for now. 205 00:11:38,420 --> 00:11:42,020 And also, it's for good reason because for your classroom, 206 00:11:42,020 --> 00:11:44,780 once you use GitHub classroom to set up this codespace, 207 00:11:44,780 --> 00:11:46,820 you don't want other students to see what 208 00:11:46,820 --> 00:11:51,510 the other student is doing for academic honesty reason and for privacy reason. 209 00:11:51,510 --> 00:11:53,490 So you want to make sure it is private. 210 00:11:53,490 --> 00:11:57,050 Of course, you can set it to public or internal, depending on your needs. 211 00:11:57,050 --> 00:11:59,090 I'm going to set it to private for now. 212 00:11:59,090 --> 00:12:05,970 So once I have that marked, I can just click Create Repository. 213 00:12:05,970 --> 00:12:08,950 Now, I have a repository, but it's empty. 214 00:12:08,950 --> 00:12:10,210 There's nothing in it. 215 00:12:10,210 --> 00:12:13,320 First thing we need to do is we want to create a Dockerfile. 216 00:12:13,320 --> 00:12:16,620 As I mentioned previously, we need a Dockerfile and a dev container JSON 217 00:12:16,620 --> 00:12:18,450 file to create a codespace. 218 00:12:18,450 --> 00:12:21,890 Now, we're going to create the Dockerfile. 219 00:12:21,890 --> 00:12:27,320 Again, the Dockerfile will contain these four lines of text or strings. 220 00:12:27,320 --> 00:12:31,640 The first line defining the underlying operating system we are going to use 221 00:12:31,640 --> 00:12:33,350 is Ubuntu. 222 00:12:33,350 --> 00:12:35,280 We want to perform some update. 223 00:12:35,280 --> 00:12:39,140 We want to install like Git, Java Runtime. 224 00:12:39,140 --> 00:12:41,370 We want to install Python Runtime as well. 225 00:12:41,370 --> 00:12:44,150 And in addition, we also want to pre-install 226 00:12:44,150 --> 00:12:46,460 like a Python library called Pillow, which 227 00:12:46,460 --> 00:12:48,780 is like an image processing library. 228 00:12:48,780 --> 00:12:53,470 That's what we are creating, the underlying operating system image. 229 00:12:53,470 --> 00:12:55,880 So let's go back to our repository. 230 00:12:55,880 --> 00:12:58,870 Once you've finished creating a new repository, 231 00:12:58,870 --> 00:13:02,510 you will be brought to this page. 232 00:13:02,510 --> 00:13:05,870 Because our repository is empty, so GitHub basically asking you, OK, 233 00:13:05,870 --> 00:13:08,370 what would you like to do with this empty repository? 234 00:13:08,370 --> 00:13:13,310 If you don't understand Git at all, don't worry about it. 235 00:13:13,310 --> 00:13:16,680 You can all do this through the GUI interface. 236 00:13:16,680 --> 00:13:19,490 For example, this is what you will be seeing 237 00:13:19,490 --> 00:13:21,540 if you are following my instruction. 238 00:13:21,540 --> 00:13:24,510 By the way, you don't need to follow me in real-time for this workshop. 239 00:13:24,510 --> 00:13:27,135 All the slides have detailed instructions in the presenter note 240 00:13:27,135 --> 00:13:27,800 as well. 241 00:13:27,800 --> 00:13:30,870 So let's say I want to create a new file. 242 00:13:30,870 --> 00:13:36,070 You literally can just go to this place, click Creating a new file. 243 00:13:36,070 --> 00:13:37,120 You click that. 244 00:13:37,120 --> 00:13:40,500 It brings you to an editor, like an online text editor. 245 00:13:40,500 --> 00:13:45,690 First, because we want to create a Dockerfile, so we will type Dockerfile. 246 00:13:45,690 --> 00:13:48,640 Remember, it's important that it is case sensitive. 247 00:13:48,640 --> 00:13:51,600 So you want to capitalize the D for delta 248 00:13:51,600 --> 00:13:54,230 at the beginning called Dockerfile. 249 00:13:54,230 --> 00:13:58,370 For the content, you would type the content I mentioned in the slide. 250 00:13:58,370 --> 00:14:01,030 You can copy paste, or you can type it as well. 251 00:14:01,030 --> 00:14:05,990 So we're going to type from Ubuntu latest. 252 00:14:05,990 --> 00:14:09,800 Right now, we should pin the version to 22.04 253 00:14:09,800 --> 00:14:12,540 because the latest version is now 24.04. 254 00:14:12,540 --> 00:14:16,130 Some of the package might not work. 255 00:14:16,130 --> 00:14:21,140 But once you have the Dockerfile content ready, what you want to do 256 00:14:21,140 --> 00:14:22,200 is save, right? 257 00:14:22,200 --> 00:14:27,600 But in the repository world or in Git world, save means commit. 258 00:14:27,600 --> 00:14:29,460 You want to commit your changes. 259 00:14:29,460 --> 00:14:33,090 That's why you should click the button called Commit changes. 260 00:14:33,090 --> 00:14:35,570 You click that. 261 00:14:35,570 --> 00:14:37,985 It asks you, OK, would you like to pull a message? 262 00:14:37,985 --> 00:14:41,910 It automatically pull a message for you called Create Dockerfile, which is nice. 263 00:14:41,910 --> 00:14:43,860 That's exactly what we are doing. 264 00:14:43,860 --> 00:14:49,120 So I'm going to just go ahead and click Commit changes here in the dialog box. 265 00:14:49,120 --> 00:14:52,820 So I click that, it commit my changes. 266 00:14:52,820 --> 00:14:56,350 Now, I have a Dockerfile created in the repository. 267 00:14:56,350 --> 00:14:58,670 We need another piece, right? 268 00:14:58,670 --> 00:15:01,600 We need the dev container JSON file, too, 269 00:15:01,600 --> 00:15:06,390 for codespace to launch a codespace instance. 270 00:15:06,390 --> 00:15:07,890 So it looks like this. 271 00:15:07,890 --> 00:15:09,490 I'm going to explain what it means. 272 00:15:09,490 --> 00:15:13,260 We created the underlying operating system image, 273 00:15:13,260 --> 00:15:17,790 but then codespace needs some instruction to launch the codespace. 274 00:15:17,790 --> 00:15:21,850 That's what the devcontainer.json file is for. 275 00:15:21,850 --> 00:15:24,780 It's like an instruction to tell GitHub Codespace hey, 276 00:15:24,780 --> 00:15:27,270 this user wants to launch a codespace. 277 00:15:27,270 --> 00:15:28,660 Here's the instruction. 278 00:15:28,660 --> 00:15:31,720 So in this dev container JSON, it's very simple. 279 00:15:31,720 --> 00:15:34,350 We only put this particular line in the file. 280 00:15:34,350 --> 00:15:36,900 We basically tell GitHub Codespace launch 281 00:15:36,900 --> 00:15:40,470 a codespace using this Dockerfile. 282 00:15:40,470 --> 00:15:44,550 So when codespace is being launched, it needs 283 00:15:44,550 --> 00:15:48,870 to fire a container because the underlying virtualization technology 284 00:15:48,870 --> 00:15:52,200 codespace is using its Docker container, so it needs something 285 00:15:52,200 --> 00:15:53,010 to build the image. 286 00:15:53,010 --> 00:15:56,170 And that is the Dockerfile. 287 00:15:56,170 --> 00:15:59,530 Again, we go back to the repository. 288 00:15:59,530 --> 00:16:01,130 We want to add a new file. 289 00:16:01,130 --> 00:16:04,000 So we just click Add File. 290 00:16:04,000 --> 00:16:04,950 Create a new file. 291 00:16:04,950 --> 00:16:07,850 292 00:16:07,850 --> 00:16:12,500 So for this time, we're going to create the devcontainer.json file. 293 00:16:12,500 --> 00:16:16,245 Now, there's a different way you can create this file. 294 00:16:16,245 --> 00:16:18,620 I'm just going to create this file at the root directory, 295 00:16:18,620 --> 00:16:21,450 at the root location-- the root level of my repository. 296 00:16:21,450 --> 00:16:23,750 So it has to start with-- 297 00:16:23,750 --> 00:16:26,340 the file name has to begin with a period. 298 00:16:26,340 --> 00:16:30,475 So remember type period, like dot devcontainer.json. 299 00:16:30,475 --> 00:16:31,350 That's the file name. 300 00:16:31,350 --> 00:16:33,860 It has to be named like that. 301 00:16:33,860 --> 00:16:37,550 And for the content, again, you can copy paste the content in the slide, 302 00:16:37,550 --> 00:16:42,350 or you would type this kind of a JSON object notation, right? 303 00:16:42,350 --> 00:16:45,470 So build means when you launch the codespace, 304 00:16:45,470 --> 00:16:49,045 please build an image using the file called Dockerfile. 305 00:16:49,045 --> 00:16:52,480 306 00:16:52,480 --> 00:16:56,380 So that's pretty much it about the devcontainer.json file for now. 307 00:16:56,380 --> 00:16:57,580 The file is ready. 308 00:16:57,580 --> 00:16:59,920 We also want to commit these changes, so we're 309 00:16:59,920 --> 00:17:02,740 going to click Commit changes again. 310 00:17:02,740 --> 00:17:04,480 We click that. 311 00:17:04,480 --> 00:17:05,230 We saved. 312 00:17:05,230 --> 00:17:06,050 We confirmed. 313 00:17:06,050 --> 00:17:08,650 It brings us back to the repository page. 314 00:17:08,650 --> 00:17:13,000 Now, I have these two file ready, the devcontainer.json file 315 00:17:13,000 --> 00:17:14,470 and the Dockerfile. 316 00:17:14,470 --> 00:17:19,180 Looks like we are good to go to create a codespace. 317 00:17:19,180 --> 00:17:23,300 So here, there's a green button called a Code button. 318 00:17:23,300 --> 00:17:26,450 When you have your codespace enabled for your organization, 319 00:17:26,450 --> 00:17:28,910 you should be able to see this green button 320 00:17:28,910 --> 00:17:35,850 as long as you have a devcontainer.json file present in the repository. 321 00:17:35,850 --> 00:17:40,700 GitHub knows that this is a codespace repository. 322 00:17:40,700 --> 00:17:43,420 So you're going to click the green button. 323 00:17:43,420 --> 00:17:46,330 And you can launch a codespace. 324 00:17:46,330 --> 00:17:48,910 So when you click the Code button, right now, 325 00:17:48,910 --> 00:17:52,790 this is the screenshot I took a few hours ago. 326 00:17:52,790 --> 00:17:55,270 It's pretty up-to-date. 327 00:17:55,270 --> 00:17:57,700 GitHub might add a new feature in the future, 328 00:17:57,700 --> 00:18:01,480 but right now, you should be able to find a Codespaces tab under the Code 329 00:18:01,480 --> 00:18:01,990 button. 330 00:18:01,990 --> 00:18:04,640 When you click that, you can choose different tabs. 331 00:18:04,640 --> 00:18:07,360 So I'm going to click the Codespace tab. 332 00:18:07,360 --> 00:18:10,630 And I'm going to click this Create codespace on main. 333 00:18:10,630 --> 00:18:15,340 That means you want to launch a codespace on the main branch. 334 00:18:15,340 --> 00:18:17,690 I won't go into the detail on what that means. 335 00:18:17,690 --> 00:18:21,430 Main is the default branch of the repository you just create. 336 00:18:21,430 --> 00:18:25,310 You can imagine you can create different branches for your codespace. 337 00:18:25,310 --> 00:18:28,570 And then, you can launch a codespace for that specific branch. 338 00:18:28,570 --> 00:18:31,720 We are only doing this for this main branch here. 339 00:18:31,720 --> 00:18:36,160 So I'm going to just click Create codespace on main. 340 00:18:36,160 --> 00:18:39,590 It brings me up to this launching place. 341 00:18:39,590 --> 00:18:43,600 It would be-- usually, it will tell you, OK, this is like setting up codespace. 342 00:18:43,600 --> 00:18:45,190 You just wait. 343 00:18:45,190 --> 00:18:50,143 It usually take a couple of minutes, depend on how complex the Dockerfile 344 00:18:50,143 --> 00:18:50,810 you are writing. 345 00:18:50,810 --> 00:18:53,200 If you are writing like a very simple Dockerfile, 346 00:18:53,200 --> 00:18:58,840 your codespace will likely be launched in 20 to 30 seconds, something 347 00:18:58,840 --> 00:18:59,718 like that. 348 00:18:59,718 --> 00:19:02,260 So I'm going to just tell you what's happening in this screen 349 00:19:02,260 --> 00:19:04,460 right now because we click Launch codespace. 350 00:19:04,460 --> 00:19:09,340 What GitHub is doing right now is, OK, it's now looking-- 351 00:19:09,340 --> 00:19:13,400 the dev container JSON file, try to build the image. 352 00:19:13,400 --> 00:19:17,450 So this is the process of codespace trying to build the image. 353 00:19:17,450 --> 00:19:20,750 So once the image is built, we have the image ready. 354 00:19:20,750 --> 00:19:25,750 Then, codespace can launch a container based on this image. 355 00:19:25,750 --> 00:19:29,870 And you will be presented by this wheel as well. 356 00:19:29,870 --> 00:19:34,190 So this is basically what you will see after you launch the codespace. 357 00:19:34,190 --> 00:19:35,360 This is your view. 358 00:19:35,360 --> 00:19:36,860 This is the VS Code. 359 00:19:36,860 --> 00:19:38,690 It just running on the cloud. 360 00:19:38,690 --> 00:19:42,840 If you use VS Code before, it should look familiar to you. 361 00:19:42,840 --> 00:19:46,740 If you pay attention, you can see that, OK, this codespace already 362 00:19:46,740 --> 00:19:47,980 come with two files. 363 00:19:47,980 --> 00:19:48,570 Why? 364 00:19:48,570 --> 00:19:52,090 Because this codespace is backed by a repository. 365 00:19:52,090 --> 00:19:55,050 And the repository have been working on called My Codespace. 366 00:19:55,050 --> 00:19:56,500 And I created these two files. 367 00:19:56,500 --> 00:20:01,570 And that's why the codespace already loaded with the file. 368 00:20:01,570 --> 00:20:07,010 So all the file you are actually dealing with are the file on the repository. 369 00:20:07,010 --> 00:20:09,770 370 00:20:09,770 --> 00:20:16,970 Now, let's quickly demo how we can write a program in VS Code and execute it. 371 00:20:16,970 --> 00:20:19,230 There's two ways to create a new file. 372 00:20:19,230 --> 00:20:20,930 One way is through the GUI. 373 00:20:20,930 --> 00:20:24,160 You literally just go to the File Explorer on the left. 374 00:20:24,160 --> 00:20:24,920 You right-click. 375 00:20:24,920 --> 00:20:27,890 You click New file, right? 376 00:20:27,890 --> 00:20:31,160 As if you are using Windows, you can go to Windows, right-click, 377 00:20:31,160 --> 00:20:32,250 create a new folder. 378 00:20:32,250 --> 00:20:33,530 Same thing. 379 00:20:33,530 --> 00:20:34,980 So you create a new file. 380 00:20:34,980 --> 00:20:38,030 We want to create a file called hello.py. 381 00:20:38,030 --> 00:20:40,850 I'm going to write a Hello World program. 382 00:20:40,850 --> 00:20:43,940 So I type hello.py. 383 00:20:43,940 --> 00:20:47,480 And I'm now being brought to the text editor. 384 00:20:47,480 --> 00:20:50,610 And you can see the cursor is now ready. 385 00:20:50,610 --> 00:20:56,550 So we can just type Hello World here for this Python program. 386 00:20:56,550 --> 00:21:00,380 Simple line print, Hello World. 387 00:21:00,380 --> 00:21:02,760 And you don't have to save the file. 388 00:21:02,760 --> 00:21:08,810 The way we configure the CS50 codespaces, normally, is it 389 00:21:08,810 --> 00:21:11,060 will save automatically. 390 00:21:11,060 --> 00:21:17,290 But for this demo, if you see a file has empty content when 391 00:21:17,290 --> 00:21:19,420 you try to run the Python program, just remember 392 00:21:19,420 --> 00:21:21,460 to save the file so that when you execute it, 393 00:21:21,460 --> 00:21:23,930 it's the up-to-date file you are executing. 394 00:21:23,930 --> 00:21:27,280 So in this demo, in the terminal, we clearly 395 00:21:27,280 --> 00:21:30,230 see that after running this program, we get the Hello World back. 396 00:21:30,230 --> 00:21:35,570 That means Python Runtime is actually ready or installed for this programming 397 00:21:35,570 --> 00:21:36,070 environment. 398 00:21:36,070 --> 00:21:38,040 And you can actually start writing Python code. 399 00:21:38,040 --> 00:21:41,400 400 00:21:41,400 --> 00:21:44,700 Alternatively, if you are a more advanced user, 401 00:21:44,700 --> 00:21:46,710 you don't want to use the GUI, you can literally 402 00:21:46,710 --> 00:21:49,210 go to the terminal and type code space. 403 00:21:49,210 --> 00:21:50,760 hello.java. 404 00:21:50,760 --> 00:21:55,750 It will automatically open or create a file called hello.java for you. 405 00:21:55,750 --> 00:22:00,330 If the file is not found at the working directory you are running this command, 406 00:22:00,330 --> 00:22:03,540 it will just automatically create a new file for you. 407 00:22:03,540 --> 00:22:07,180 So that's the way I create this hello.java file. 408 00:22:07,180 --> 00:22:12,090 I'm going to write the same Hello World program again but in Java. 409 00:22:12,090 --> 00:22:17,040 Again, we wrote a Hello World program here. 410 00:22:17,040 --> 00:22:18,820 And then, we tried to run it. 411 00:22:18,820 --> 00:22:23,280 And as you can see, it also able to print out Hello World, which also 412 00:22:23,280 --> 00:22:25,810 means the Java Runtime is installed. 413 00:22:25,810 --> 00:22:28,260 The reason why this programming environment already 414 00:22:28,260 --> 00:22:35,040 comes with Python and Java is because we define them in the Dockerfile. 415 00:22:35,040 --> 00:22:39,450 We wrote that we want to install those Runtime in the Dockerfile. 416 00:22:39,450 --> 00:22:43,867 And that's why this image already comes with the Runtime needed, 417 00:22:43,867 --> 00:22:44,825 at least for this demo. 418 00:22:44,825 --> 00:22:47,660 419 00:22:47,660 --> 00:22:49,580 There's more. 420 00:22:49,580 --> 00:22:53,090 In addition to provisioning the underlying operating system, 421 00:22:53,090 --> 00:22:57,560 because we are working in VS Code, and VS Code is known for its extensibility. 422 00:22:57,560 --> 00:23:01,550 And the experience is also often customized 423 00:23:01,550 --> 00:23:04,880 through the VS Code extension. 424 00:23:04,880 --> 00:23:09,350 So for Python, some advanced programmer or normal programmer, 425 00:23:09,350 --> 00:23:12,320 when they're trying to go to a fancy IDE, when they write code, 426 00:23:12,320 --> 00:23:14,420 it automatically auto-complete the code for you, 427 00:23:14,420 --> 00:23:16,440 or even provide code suggestion for you. 428 00:23:16,440 --> 00:23:22,640 That's actually provided by a plugin, if you will, like a language support. 429 00:23:22,640 --> 00:23:26,570 Similar concepts also apply in VS code, so it's also 430 00:23:26,570 --> 00:23:28,680 often achieved through extension. 431 00:23:28,680 --> 00:23:31,400 So if you want to have code completion for Python, 432 00:23:31,400 --> 00:23:33,230 we need something for Python. 433 00:23:33,230 --> 00:23:37,160 And I'm just going to demo for how we can 434 00:23:37,160 --> 00:23:42,120 install a Python extension through VS Code's Extension Marketplace. 435 00:23:42,120 --> 00:23:45,780 So you click the Extension icon on the left. 436 00:23:45,780 --> 00:23:50,080 It brings you to this extension view. 437 00:23:50,080 --> 00:23:52,870 You can just search the extension you want to install. 438 00:23:52,870 --> 00:23:55,030 I want to install a Python extension. 439 00:23:55,030 --> 00:23:56,200 So I type Python. 440 00:23:56,200 --> 00:24:01,630 And often, it will give you the first result that has the most download. 441 00:24:01,630 --> 00:24:03,520 This one is from Microsoft. 442 00:24:03,520 --> 00:24:05,080 Looks legit. 443 00:24:05,080 --> 00:24:07,240 Let's just install it, right? 444 00:24:07,240 --> 00:24:12,040 So I'm going to install this extension to my programming environment. 445 00:24:12,040 --> 00:24:16,500 Once it's done, I go back to my Python code. 446 00:24:16,500 --> 00:24:18,660 I'm trying to import a pillow library. 447 00:24:18,660 --> 00:24:23,580 So if I type from pil import image, I haven't 448 00:24:23,580 --> 00:24:26,190 finished typing yet, it's already suggesting, OK, 449 00:24:26,190 --> 00:24:32,020 do you want to import the particular image module or what? 450 00:24:32,020 --> 00:24:36,180 So this extension, basically, provides language support for you. 451 00:24:36,180 --> 00:24:39,190 Basically, enhance your programming experience. 452 00:24:39,190 --> 00:24:43,360 Although we disable this for student for good reason. 453 00:24:43,360 --> 00:24:46,090 We want to train their muscle memory at the beginning. 454 00:24:46,090 --> 00:24:49,420 455 00:24:49,420 --> 00:24:52,210 Similarly, we can also install an extension for Java, 456 00:24:52,210 --> 00:24:54,550 as well, as you can imagine. 457 00:24:54,550 --> 00:25:00,770 That will provide other language support capability for Java language as well. 458 00:25:00,770 --> 00:25:04,070 So as you can see, you can install more extensions 459 00:25:04,070 --> 00:25:07,870 to further customize the codespace experience. 460 00:25:07,870 --> 00:25:13,120 We actually also write our own CS50 extension for our CS50 codespace 461 00:25:13,120 --> 00:25:17,580 just so there's some experience we want to provide for the student. 462 00:25:17,580 --> 00:25:25,060 For example, Style50, even the AI doc that's integrated to the CS50 codespace 463 00:25:25,060 --> 00:25:27,530 is achieved through the VS Code extensions. 464 00:25:27,530 --> 00:25:30,180 465 00:25:30,180 --> 00:25:33,150 Let's talk about commit changes. 466 00:25:33,150 --> 00:25:36,240 When you are dealing with codespace, when you are creating file, 467 00:25:36,240 --> 00:25:41,640 when you are modifying file, you want the file to persist. 468 00:25:41,640 --> 00:25:44,280 Normally, if you work on your local computer, 469 00:25:44,280 --> 00:25:46,920 your file is persist on your local hard drive. 470 00:25:46,920 --> 00:25:49,020 It's automatically happening locally. 471 00:25:49,020 --> 00:25:52,770 But for codespace, because we are dealing with a repository, 472 00:25:52,770 --> 00:25:57,270 so everything you do within codespace is considered changes. 473 00:25:57,270 --> 00:26:00,360 And we need to actually process those changes 474 00:26:00,360 --> 00:26:05,670 by basically committing and pushing the changes back to the backend repository. 475 00:26:05,670 --> 00:26:09,690 Now, student actually don't need to worry about all this because, again, 476 00:26:09,690 --> 00:26:15,330 in CS50 codespace, we have another extension called Git Doc that literally 477 00:26:15,330 --> 00:26:22,050 doing the commit and pushing changes every 30 seconds for student, 478 00:26:22,050 --> 00:26:24,900 as a way to backup their file. 479 00:26:24,900 --> 00:26:27,100 I'm just going to explain why we are doing this 480 00:26:27,100 --> 00:26:29,130 so that you know what's actually happening 481 00:26:29,130 --> 00:26:32,140 underneath the hood of the CS50 codespace. 482 00:26:32,140 --> 00:26:37,260 So here, because we created the hollow.jar file and then 483 00:26:37,260 --> 00:26:41,670 the hollow.py file, I also modify the Dockerfile somehow. 484 00:26:41,670 --> 00:26:44,400 So these are the changes that the VS Code is telling, hey, 485 00:26:44,400 --> 00:26:45,370 you have these changes. 486 00:26:45,370 --> 00:26:48,360 Do you want to commit these changes? 487 00:26:48,360 --> 00:26:52,850 And I would like to commit the changes, so I click Commit. 488 00:26:52,850 --> 00:26:56,300 And I need to push these changes back to the repository. 489 00:26:56,300 --> 00:26:59,480 Again, everything right now is still happening inside this codespace. 490 00:26:59,480 --> 00:27:02,610 And codespace is just an instance, right? 491 00:27:02,610 --> 00:27:05,810 So if this codespace is being deleted or destroyed, 492 00:27:05,810 --> 00:27:09,060 all the uncommitted changes could be lost. 493 00:27:09,060 --> 00:27:10,080 So we don't want that. 494 00:27:10,080 --> 00:27:14,540 We actually want to persist the changes back to our backend repository. 495 00:27:14,540 --> 00:27:18,420 So I'm going to click Sync Changes and click OK. 496 00:27:18,420 --> 00:27:22,380 It will just push all the changes back to the repository. 497 00:27:22,380 --> 00:27:24,800 And if you go to your repository view, you 498 00:27:24,800 --> 00:27:29,970 will see the two files we just created from the codespace. 499 00:27:29,970 --> 00:27:34,850 500 00:27:34,850 --> 00:27:39,050 OK, now, I'm going to dive a little bit deeper on how you can further 501 00:27:39,050 --> 00:27:41,280 play with this devcontainer.json. 502 00:27:41,280 --> 00:27:47,110 Again, you can go as complex as you want to suit your teaching needs. 503 00:27:47,110 --> 00:27:52,250 Here, I'm just going to do a slight modification. 504 00:27:52,250 --> 00:27:57,520 Previously, we wrote our own Dockerfile and then let dev container-- 505 00:27:57,520 --> 00:28:01,420 well, let GitHub Codespace to build the image while launching the codespace. 506 00:28:01,420 --> 00:28:05,200 But actually, you don't have to build the image every time 507 00:28:05,200 --> 00:28:06,630 you launch a codespace. 508 00:28:06,630 --> 00:28:09,410 You can use the image being built by a third party. 509 00:28:09,410 --> 00:28:11,950 For example, the Python organization already 510 00:28:11,950 --> 00:28:15,430 have a Python image built remotely in the cloud. 511 00:28:15,430 --> 00:28:18,010 You can just reference it and use it. 512 00:28:18,010 --> 00:28:21,160 That way, in your dev container JSON file, 513 00:28:21,160 --> 00:28:24,020 you don't have to specify a build property. 514 00:28:24,020 --> 00:28:27,360 You will instead replace it with an image property. 515 00:28:27,360 --> 00:28:30,520 OK, for this codespace when you launch, you're 516 00:28:30,520 --> 00:28:36,070 just going to grab this Docker image from the Python Docker repo. 517 00:28:36,070 --> 00:28:37,870 Get that. 518 00:28:37,870 --> 00:28:41,200 Use that as the underlying operating system image. 519 00:28:41,200 --> 00:28:46,270 And as you can see further down, you see the Customization field, which 520 00:28:46,270 --> 00:28:48,890 means in this devcontainer.json file, you 521 00:28:48,890 --> 00:28:53,060 can further customize the behavior of VS Code, what extension 522 00:28:53,060 --> 00:28:54,990 you want this VS Code to pre-install. 523 00:28:54,990 --> 00:28:57,600 What kind of settings do you want this VS Code to have. 524 00:28:57,600 --> 00:29:00,590 That way, you can customize the theme, customize the font size, 525 00:29:00,590 --> 00:29:06,690 customize whether you want to provide students with IntelliSense. 526 00:29:06,690 --> 00:29:11,160 Meaning, do you want to give student the ability to use code completion? 527 00:29:11,160 --> 00:29:15,110 In CS50's scenario, we disabled that through this dev container 528 00:29:15,110 --> 00:29:16,190 JSON settings. 529 00:29:16,190 --> 00:29:19,310 And you can tinker with this setting however you want, 530 00:29:19,310 --> 00:29:22,760 as long as you follow the instruction-- 531 00:29:22,760 --> 00:29:29,180 as long as you follow the dev container JSON guideline. 532 00:29:29,180 --> 00:29:34,940 So I'm going to actually update the dev container JSON file for now. 533 00:29:34,940 --> 00:29:39,410 Again, to update this dev container JSON file, you go to your Repository view. 534 00:29:39,410 --> 00:29:41,510 You click devcontainer.json. 535 00:29:41,510 --> 00:29:43,850 And then, I'm going to add it in place. 536 00:29:43,850 --> 00:29:48,680 So I'm going to click Edit mode in this GUI text editor. 537 00:29:48,680 --> 00:29:52,250 I can just copy paste the content I mentioned. 538 00:29:52,250 --> 00:29:56,060 First of all, I replace Build with image property. 539 00:29:56,060 --> 00:29:59,970 In fact, this is already a valid devcontainer.json file. 540 00:29:59,970 --> 00:30:04,250 If you're going to launch a codespace using this devcontainer.json, 541 00:30:04,250 --> 00:30:05,010 it will work. 542 00:30:05,010 --> 00:30:09,650 It will just launch a codespace with the bare minimum of Python Runtime, 543 00:30:09,650 --> 00:30:12,530 like a Python container. 544 00:30:12,530 --> 00:30:14,280 But we want to further customize it. 545 00:30:14,280 --> 00:30:17,790 That's why we add more things to this container JSON file. 546 00:30:17,790 --> 00:30:21,570 So we add customization for VS Code. 547 00:30:21,570 --> 00:30:26,155 We also want to pre-install some feature that offered by dev container JSON. 548 00:30:26,155 --> 00:30:28,850 549 00:30:28,850 --> 00:30:33,080 Again, we need to commit these changes back to the repository. 550 00:30:33,080 --> 00:30:37,040 Now, the repository has the updated JSON file. 551 00:30:37,040 --> 00:30:38,610 What are we going to do? 552 00:30:38,610 --> 00:30:42,410 So we want to also launch a new codespace. 553 00:30:42,410 --> 00:30:48,050 The current codespace will stay as it is because it won't automatically 554 00:30:48,050 --> 00:30:51,240 update the codespace for you when you update the dev container JSON file. 555 00:30:51,240 --> 00:30:54,110 Again, each codespace is backed by a repository. 556 00:30:54,110 --> 00:30:59,900 So we want to launch a separate codespace using the latest dev 557 00:30:59,900 --> 00:31:01,310 container JSON file. 558 00:31:01,310 --> 00:31:03,290 So again, go to the Code tab. 559 00:31:03,290 --> 00:31:04,640 Click Launch. 560 00:31:04,640 --> 00:31:10,130 And then, you can click Create another codespace on main, like the Plus button 561 00:31:10,130 --> 00:31:11,640 here. 562 00:31:11,640 --> 00:31:14,030 So I'm going to click that. 563 00:31:14,030 --> 00:31:17,130 It creates another codespace for you, for me. 564 00:31:17,130 --> 00:31:19,560 Now, this time it looks a little bit different. 565 00:31:19,560 --> 00:31:21,320 It looks kind of yellowish. 566 00:31:21,320 --> 00:31:25,550 This is as expected because in the codespace customization, 567 00:31:25,550 --> 00:31:28,440 I specify use the theme solarized light. 568 00:31:28,440 --> 00:31:29,850 This is what the theme looks. 569 00:31:29,850 --> 00:31:33,830 And when you launch a codespace by using that particular dev container JSON file, 570 00:31:33,830 --> 00:31:38,180 you will get a codespace as you wish, because you 571 00:31:38,180 --> 00:31:42,380 define it to use this theme by default. 572 00:31:42,380 --> 00:31:45,200 This is actually a way for me to quickly show you 573 00:31:45,200 --> 00:31:48,530 that this new codespace is actually launched using the latest 574 00:31:48,530 --> 00:31:50,190 devcontainer.json file. 575 00:31:50,190 --> 00:31:55,970 And again, we can quickly verify that it does have the Python Runtime ready 576 00:31:55,970 --> 00:31:58,400 because we are using the Python image. 577 00:31:58,400 --> 00:32:04,090 And this is the current stable release version as well. 578 00:32:04,090 --> 00:32:06,400 And again, because in the dev container JSON 579 00:32:06,400 --> 00:32:12,650 file I already specify that I want it to have the Python extension pre-installed, 580 00:32:12,650 --> 00:32:16,060 it already comes with the Python extension. 581 00:32:16,060 --> 00:32:20,077 That way, you don't need to manually go and install the extension every time 582 00:32:20,077 --> 00:32:21,160 you launch your codespace. 583 00:32:21,160 --> 00:32:25,090 You can literally just define everything you need in that devcontainer.json 584 00:32:25,090 --> 00:32:27,440 file or a recipe, if you will. 585 00:32:27,440 --> 00:32:28,690 You write everything there. 586 00:32:28,690 --> 00:32:30,310 You define it, and then you run it. 587 00:32:30,310 --> 00:32:34,520 And then, you will have a codespace that exactly has those settings. 588 00:32:34,520 --> 00:32:38,780 And that's exactly what cs50.dev is doing underneath the hood. 589 00:32:38,780 --> 00:32:42,278 This complication, we don't want students to actually know 590 00:32:42,278 --> 00:32:43,820 what's happening underneath the hood. 591 00:32:43,820 --> 00:32:46,420 We just automate the process for the student. 592 00:32:46,420 --> 00:32:49,305 And you are actually seeing how this being done manually. 593 00:32:49,305 --> 00:32:53,110 594 00:32:53,110 --> 00:32:55,720 We can also verify that the feature called the GitHub command 595 00:32:55,720 --> 00:33:00,700 line features already pre-installed as well through the feature property. 596 00:33:00,700 --> 00:33:04,370 Now, you might wonder, OK, this is actually kind of inconvenient. 597 00:33:04,370 --> 00:33:09,670 Every time you update some config, you need to launch a new Codespace. 598 00:33:09,670 --> 00:33:13,450 Can we do that without actually launching a new codespace? 599 00:33:13,450 --> 00:33:14,650 In fact, you could. 600 00:33:14,650 --> 00:33:19,030 There's a thing called Rebuild Codespace as a way to update your codespace. 601 00:33:19,030 --> 00:33:22,160 Let's say we don't want to use the Python image anymore. 602 00:33:22,160 --> 00:33:27,050 We want to switch to Java because I have a Java course to teach. 603 00:33:27,050 --> 00:33:30,050 What you need to do is to modify your existing dev container 604 00:33:30,050 --> 00:33:34,140 JSON file to use the Java Runtime image. 605 00:33:34,140 --> 00:33:38,120 You also want to switch the Python extension to the Java extension 606 00:33:38,120 --> 00:33:42,650 because it doesn't make sense to use a Python extension for Java program. 607 00:33:42,650 --> 00:33:46,050 I also want to change the theme to dark theme. 608 00:33:46,050 --> 00:33:49,770 If I do that, let's say I go to the codespace. 609 00:33:49,770 --> 00:33:53,560 I live edit the dev container JSON file here. 610 00:33:53,560 --> 00:33:59,220 This is the old devcontainer.json file still using the Python Runtime. 611 00:33:59,220 --> 00:34:04,860 Let's change this to the Java Runtime and then change the extension to Java 612 00:34:04,860 --> 00:34:06,840 and then change the theme to dark. 613 00:34:06,840 --> 00:34:11,199 Once you save the changes, codespace immediately notify you. 614 00:34:11,199 --> 00:34:15,420 Hey, you make some changes to the dev container configuration. 615 00:34:15,420 --> 00:34:16,630 Would you want to rebuild? 616 00:34:16,630 --> 00:34:22,110 Rebuild means would you want GitHub to apply the new updated 617 00:34:22,110 --> 00:34:25,340 settings for the codespace? 618 00:34:25,340 --> 00:34:28,050 So yes, we want to apply this new settings. 619 00:34:28,050 --> 00:34:29,870 So we'll just click Review. 620 00:34:29,870 --> 00:34:33,050 And then, you can click Review or Full Review. 621 00:34:33,050 --> 00:34:36,170 Detail explanation on what the difference is is also in the notes. 622 00:34:36,170 --> 00:34:37,860 So I'm just going to review. 623 00:34:37,860 --> 00:34:42,110 Review means, OK, GitHub is now launching a new container 624 00:34:42,110 --> 00:34:46,780 using the updated configuration. 625 00:34:46,780 --> 00:34:49,270 And now, you can see that the new codespace actually 626 00:34:49,270 --> 00:34:53,650 switched to dark mode, and it has the Java Runtime installed. 627 00:34:53,650 --> 00:34:57,950 It also has the Java extension installed. 628 00:34:57,950 --> 00:35:00,590 629 00:35:00,590 --> 00:35:03,950 So that's basically a quick overview on how 630 00:35:03,950 --> 00:35:08,570 you can create a codespace, customize codespace for your classroom need. 631 00:35:08,570 --> 00:35:11,720 Again, CS50 is doing exactly similar thing, 632 00:35:11,720 --> 00:35:14,130 but we are doing it through GitHub API. 633 00:35:14,130 --> 00:35:19,010 We roll our own web app to automate this entire process for students. 634 00:35:19,010 --> 00:35:21,260 So all students need is one click Login, and they will 635 00:35:21,260 --> 00:35:23,750 have a CS50 codespace ready for them. 636 00:35:23,750 --> 00:35:25,940 But if you don't want to use CS50 codespace, 637 00:35:25,940 --> 00:35:29,540 you want to use something else, that's the steps you 638 00:35:29,540 --> 00:35:35,140 might need to go through to provision a codespace for your classroom. 639 00:35:35,140 --> 00:35:40,390 There are also more additional resources in the slide as well. 640 00:35:40,390 --> 00:35:42,730 OK, that's a lot. 641 00:35:42,730 --> 00:35:45,450 We finish get through the first two. 642 00:35:45,450 --> 00:35:50,070 So I'm going to talk about the rest of the two quickly. 643 00:35:50,070 --> 00:35:53,830 So now that students have the standardized programming environment, 644 00:35:53,830 --> 00:35:55,600 they can start writing code. 645 00:35:55,600 --> 00:35:57,060 What's next? 646 00:35:57,060 --> 00:35:58,080 They need to submit. 647 00:35:58,080 --> 00:36:01,530 And as an educator or a teacher, you want to grade them. 648 00:36:01,530 --> 00:36:05,310 Now, we're talking about what tools CS50 available 649 00:36:05,310 --> 00:36:08,580 provided to student and teacher so that they can submit their code 650 00:36:08,580 --> 00:36:11,430 and then teacher can grade their submission. 651 00:36:11,430 --> 00:36:16,330 And all of the tools and how the usage of the tools are available at this URL 652 00:36:16,330 --> 00:36:19,860 called cs50.readthedocs.io. 653 00:36:19,860 --> 00:36:23,020 The first tool I'm going to briefly mention is called check50. 654 00:36:23,020 --> 00:36:26,760 So check50 is a command line tool for running automated tests 655 00:36:26,760 --> 00:36:28,200 on students' code. 656 00:36:28,200 --> 00:36:30,540 It's mostly for correctness test. 657 00:36:30,540 --> 00:36:32,130 So students write some code. 658 00:36:32,130 --> 00:36:34,500 They follow like a specification. 659 00:36:34,500 --> 00:36:36,090 They implemented it. 660 00:36:36,090 --> 00:36:40,950 How do we know if the student actually meet the requirement? 661 00:36:40,950 --> 00:36:44,470 So they can run check50 for a particular problem set. 662 00:36:44,470 --> 00:36:50,240 Let's say the student is working on P set week six, DNA problem set. 663 00:36:50,240 --> 00:36:54,020 The student can actually run this command right within the CS50 codespace 664 00:36:54,020 --> 00:36:57,890 to know how well they're doing with their current problem set. 665 00:36:57,890 --> 00:37:00,020 They run check50. 666 00:37:00,020 --> 00:37:04,070 They get a live feedback in the terminal telling, 667 00:37:04,070 --> 00:37:07,790 OK, your dna.py seems to be looking good, 668 00:37:07,790 --> 00:37:10,400 but it doesn't pass the first check. 669 00:37:10,400 --> 00:37:12,560 Then, the student can actually look into, OK, 670 00:37:12,560 --> 00:37:14,080 correct that code a little bit. 671 00:37:14,080 --> 00:37:15,330 Modify that code a little bit. 672 00:37:15,330 --> 00:37:18,490 Rerun check50 again to see if they can pass all the check. 673 00:37:18,490 --> 00:37:20,360 So this is kind of like a tool we provide 674 00:37:20,360 --> 00:37:22,640 to student to help their learning. 675 00:37:22,640 --> 00:37:27,770 That way, if they can pass all the checks, they know for sure they pass-- 676 00:37:27,770 --> 00:37:30,120 their implementation, meet all the requirements. 677 00:37:30,120 --> 00:37:34,420 We are also running this in the cloud. 678 00:37:34,420 --> 00:37:36,690 So when student run check50, what's happening 679 00:37:36,690 --> 00:37:41,820 is we auto-commit the code to a repository that's owned by us. 680 00:37:41,820 --> 00:37:45,060 We then have a grading cluster that automatically downloads students' code 681 00:37:45,060 --> 00:37:48,387 and run the correctness check in the cluster. 682 00:37:48,387 --> 00:37:50,470 And then, we send back the result to the terminal. 683 00:37:50,470 --> 00:37:54,570 So again, this is all maintained and managed by us 684 00:37:54,570 --> 00:37:56,780 and offered free to student to use. 685 00:37:56,780 --> 00:37:59,450 686 00:37:59,450 --> 00:38:03,600 For example, in codespace, this is what the student will be looking at actually. 687 00:38:03,600 --> 00:38:06,800 So the student write their code right in the VS Code text editor. 688 00:38:06,800 --> 00:38:08,450 They write the dna.py. 689 00:38:08,450 --> 00:38:09,890 They finish writing the code. 690 00:38:09,890 --> 00:38:11,630 They're going to run check50. 691 00:38:11,630 --> 00:38:15,150 And that's check50. 692 00:38:15,150 --> 00:38:20,600 And then space cs50/problem/2024/x/dna. 693 00:38:20,600 --> 00:38:23,990 I'm going to explain what that is in a later slides, 694 00:38:23,990 --> 00:38:25,830 but that's the command that we need to run. 695 00:38:25,830 --> 00:38:27,663 And we actually provide all the command they 696 00:38:27,663 --> 00:38:30,145 need to run in order to run the correctness check. 697 00:38:30,145 --> 00:38:33,450 698 00:38:33,450 --> 00:38:39,540 We also provide a web view for their correctness check result. 699 00:38:39,540 --> 00:38:42,060 They can also go to a URL that's automatically 700 00:38:42,060 --> 00:38:44,740 generated for each check50 run. 701 00:38:44,740 --> 00:38:47,390 They can just go see their result there as well. 702 00:38:47,390 --> 00:38:51,660 703 00:38:51,660 --> 00:38:53,493 Alternatively, they can also run it locally. 704 00:38:53,493 --> 00:38:56,243 That way, they don't need to send the code to our grading cluster. 705 00:38:56,243 --> 00:38:58,440 They can just run it in their environment locally. 706 00:38:58,440 --> 00:39:03,810 This is a scenario that happened when student doesn't have a reliable internet 707 00:39:03,810 --> 00:39:05,380 access. 708 00:39:05,380 --> 00:39:09,280 They don't have a way to access the CS50 codespace. 709 00:39:09,280 --> 00:39:12,400 We actually provide offline version for the CS50 codespace 710 00:39:12,400 --> 00:39:17,200 so they can actually run check50 in an offline way sort of. 711 00:39:17,200 --> 00:39:21,020 That way, they don't need an internet connection. 712 00:39:21,020 --> 00:39:26,620 All they need is the check50 auto-grading code, 713 00:39:26,620 --> 00:39:28,960 and then it will run the check within their machine 714 00:39:28,960 --> 00:39:33,070 or within their compute environment locally, 715 00:39:33,070 --> 00:39:38,680 but they do need to install the check50 library as well. 716 00:39:38,680 --> 00:39:43,000 So to summarize what check50 is, automated testing. 717 00:39:43,000 --> 00:39:44,180 It's standardized test case. 718 00:39:44,180 --> 00:39:46,300 So everyone running the same check50 command 719 00:39:46,300 --> 00:39:50,140 will actually get their code graded the same way. 720 00:39:50,140 --> 00:39:53,210 You'll get immediate response in the terminal, right in the terminal. 721 00:39:53,210 --> 00:39:58,840 What your program did right, what your program didn't do right. 722 00:39:58,840 --> 00:40:01,640 Occasionally, in the check50, we actually provide hints. 723 00:40:01,640 --> 00:40:04,870 So if you run into some error, we do have customized error message 724 00:40:04,870 --> 00:40:06,080 provided to student. 725 00:40:06,080 --> 00:40:11,250 So the student might know or might get the aha moment, OK, maybe something 726 00:40:11,250 --> 00:40:12,250 they should need to fix. 727 00:40:12,250 --> 00:40:14,503 And then, hopefully, they can pass the check. 728 00:40:14,503 --> 00:40:17,170 Although, passing the check50 check is not the goal of learning. 729 00:40:17,170 --> 00:40:20,210 It's just a tool we offer for them. 730 00:40:20,210 --> 00:40:24,420 They should not be relying on check50 to do their learning. 731 00:40:24,420 --> 00:40:28,130 We understand that sometimes students just want to get past all the grades 732 00:40:28,130 --> 00:40:30,350 and then they keep running check50. 733 00:40:30,350 --> 00:40:34,000 That's something to be mindful of. 734 00:40:34,000 --> 00:40:39,770 And so what's the role GitHub play in this check50 situation? 735 00:40:39,770 --> 00:40:43,720 So again, when you run check50 in the online version, 736 00:40:43,720 --> 00:40:47,980 we actually automatically commit their code to our repository. 737 00:40:47,980 --> 00:40:52,000 All the online student, all the student using this check50 738 00:40:52,000 --> 00:40:56,050 will have their own repository storing all their code. 739 00:40:56,050 --> 00:40:58,840 And that's what GitHub's role is played here. 740 00:40:58,840 --> 00:41:02,820 Again, it's for storing students' code. 741 00:41:02,820 --> 00:41:06,390 OK, so what does this command mean exactly? 742 00:41:06,390 --> 00:41:09,700 And how you can actually write your own check50 checks. 743 00:41:09,700 --> 00:41:13,840 So in the universe of check50 and submit50, 744 00:41:13,840 --> 00:41:15,670 there's a thing called submission slug. 745 00:41:15,670 --> 00:41:22,420 You can think of it as an identifier that identify a particular problem set. 746 00:41:22,420 --> 00:41:27,930 And again, this is an infrastructure or an experience we build on top of GitHub. 747 00:41:27,930 --> 00:41:30,100 So it actually has some meaning. 748 00:41:30,100 --> 00:41:35,000 The first half, cs50/problem, represent the GitHub repository. 749 00:41:35,000 --> 00:41:37,480 So we are actually using GitHub repositories 750 00:41:37,480 --> 00:41:40,600 to store all the check50 checks. 751 00:41:40,600 --> 00:41:45,250 That way, all the educators, all the people using check50 752 00:41:45,250 --> 00:41:51,550 can use that check50 check to check against their code. 753 00:41:51,550 --> 00:41:54,070 The second part is a branch. 754 00:41:54,070 --> 00:41:58,480 You have lots of problem set, but you want to organize them by branch, 755 00:41:58,480 --> 00:42:00,440 meaning by different year could be. 756 00:42:00,440 --> 00:42:02,020 It could be by course. 757 00:42:02,020 --> 00:42:05,170 That's up to you how you want to categorize 758 00:42:05,170 --> 00:42:07,820 the check50 checks they are writing. 759 00:42:07,820 --> 00:42:12,500 So we are using branch as a way to categorize or group checks. 760 00:42:12,500 --> 00:42:16,610 And then, OK, within that particular group or category, what kind of problem 761 00:42:16,610 --> 00:42:17,790 set this check belong to? 762 00:42:17,790 --> 00:42:19,270 There's a folder called the DNA. 763 00:42:19,270 --> 00:42:22,270 764 00:42:22,270 --> 00:42:25,660 And again, if I show you what it looks like in the repository, 765 00:42:25,660 --> 00:42:26,860 it looks like this. 766 00:42:26,860 --> 00:42:31,160 So this is actually a public available repository. 767 00:42:31,160 --> 00:42:36,790 So if you go to gitHub.com/cs50/problem, this is actually the repository that 768 00:42:36,790 --> 00:42:43,360 hosts all the checks we use for CS50 in the past year to date. 769 00:42:43,360 --> 00:42:47,230 So as you can see, you need a repository, 770 00:42:47,230 --> 00:42:52,380 which is the problems repository under the CS50 organization. 771 00:42:52,380 --> 00:42:54,840 In your case, it would be your own personal account. 772 00:42:54,840 --> 00:42:56,580 And then, you create a repository. 773 00:42:56,580 --> 00:42:58,290 And then, you store all the checks there. 774 00:42:58,290 --> 00:43:00,500 And you notice here there's a branch. 775 00:43:00,500 --> 00:43:02,660 We call it 2024/x. 776 00:43:02,660 --> 00:43:07,290 This is for the EdX course or for the CS50x course in general. 777 00:43:07,290 --> 00:43:11,810 So in that particular branch, we have problems, 778 00:43:11,810 --> 00:43:14,310 lots of different problems for different weeks. 779 00:43:14,310 --> 00:43:17,090 And then, for week six, we have DNA problems. 780 00:43:17,090 --> 00:43:20,760 And that's how it being structured in the repository. 781 00:43:20,760 --> 00:43:25,970 And if you look at the repository, this is all the file necessary for check50 782 00:43:25,970 --> 00:43:27,260 to run. 783 00:43:27,260 --> 00:43:29,780 And I will explain what that means. 784 00:43:29,780 --> 00:43:34,050 OK, you would want to know how to write your own checks. 785 00:43:34,050 --> 00:43:38,480 First of all, if you are adopting CS50, if you are teaching CS50, 786 00:43:38,480 --> 00:43:43,180 you can already use our check50 checks automatically. 787 00:43:43,180 --> 00:43:44,430 You don't need to do anything. 788 00:43:44,430 --> 00:43:50,120 You can just use the check we pre-written without any changes. 789 00:43:50,120 --> 00:43:52,170 But sometimes you want to modify the check. 790 00:43:52,170 --> 00:43:56,210 You want to write some new checks for your classroom. 791 00:43:56,210 --> 00:43:58,860 792 00:43:58,860 --> 00:44:01,850 We do allow educators to do that. 793 00:44:01,850 --> 00:44:07,740 To achieve it, you will need two files in the check50 folder-- 794 00:44:07,740 --> 00:44:08,980 the check50 check folder. 795 00:44:08,980 --> 00:44:12,560 So the first file is called the cs50.yaml file. 796 00:44:12,560 --> 00:44:16,880 It's like a configuration file that check50 would understand. 797 00:44:16,880 --> 00:44:19,980 This is just our rule of writing this configuration. 798 00:44:19,980 --> 00:44:22,130 So you just need to follow the rule we specify. 799 00:44:22,130 --> 00:44:26,360 Again, if you don't understand how to actually write this YAML file, 800 00:44:26,360 --> 00:44:31,790 there's a detailed instruction in cs50.reader.io available for you. 801 00:44:31,790 --> 00:44:36,260 So I'm just going to quickly go through what this YAML file is doing. 802 00:44:36,260 --> 00:44:41,210 So it defines we want to exclude everything first. 803 00:44:41,210 --> 00:44:44,420 Basically, we don't want to collect everything 804 00:44:44,420 --> 00:44:47,180 that the student has in their codespace or in their folder 805 00:44:47,180 --> 00:44:49,435 while working on their problem. 806 00:44:49,435 --> 00:44:53,790 We only need the dna.py for this particular example for this DNA problem 807 00:44:53,790 --> 00:44:54,290 set. 808 00:44:54,290 --> 00:44:55,530 That's the file we care. 809 00:44:55,530 --> 00:44:58,440 That's a file check50 care. 810 00:44:58,440 --> 00:45:01,380 You might want other file to be collected. 811 00:45:01,380 --> 00:45:03,360 So you can define them in this YAML file. 812 00:45:03,360 --> 00:45:06,290 You want to collect more file, that's fine. 813 00:45:06,290 --> 00:45:10,170 Once you have this defined, you also need to write the actual check. 814 00:45:10,170 --> 00:45:15,710 So to write the actual check, you will put it in the init.py file. 815 00:45:15,710 --> 00:45:18,590 And then, you would just write your check50 check 816 00:45:18,590 --> 00:45:21,800 by following our instruction for all the test case. 817 00:45:21,800 --> 00:45:27,800 For example, I'm writing a very simple input output test here. 818 00:45:27,800 --> 00:45:34,800 This is just a declaration function that we require you to write. 819 00:45:34,800 --> 00:45:38,570 Meaning, the following function is it's a test case. 820 00:45:38,570 --> 00:45:43,790 So once you have that written, you can also specify, OK, 821 00:45:43,790 --> 00:45:45,680 what this test case is actually doing. 822 00:45:45,680 --> 00:45:50,300 So when student run check50, they will see the feedback. 823 00:45:50,300 --> 00:45:54,240 And they will see what this check is actually doing. 824 00:45:54,240 --> 00:45:56,040 And this is the actual check. 825 00:45:56,040 --> 00:46:00,450 The code will be executed when running check50. 826 00:46:00,450 --> 00:46:04,180 This is actually a C program the student are expected to write. 827 00:46:04,180 --> 00:46:05,380 It's a C program, right? 828 00:46:05,380 --> 00:46:08,580 All it needs to do is it takes an input called WADL, 829 00:46:08,580 --> 00:46:14,470 and then it just output an exact same input as WADL as well. 830 00:46:14,470 --> 00:46:19,210 So we are looking for that. 831 00:46:19,210 --> 00:46:24,190 We are expecting an input from students' code, so we will call STD, standard in. 832 00:46:24,190 --> 00:46:27,280 Basically, we are now sending Waldo to students' code. 833 00:46:27,280 --> 00:46:29,410 So if the student code doesn't even take input, 834 00:46:29,410 --> 00:46:31,790 it will fail the check automatically. 835 00:46:31,790 --> 00:46:37,350 If the student does take standard in, then we 836 00:46:37,350 --> 00:46:40,960 want to check if the output actually matches the expected output. 837 00:46:40,960 --> 00:46:44,950 In this case, we expect it to output the same thing we sent in. 838 00:46:44,950 --> 00:46:49,110 So if it pass this check as well, the program 839 00:46:49,110 --> 00:46:53,050 should exit gracefully with a status code zero. 840 00:46:53,050 --> 00:46:57,840 That's the thing we require student to do, at least for this check. 841 00:46:57,840 --> 00:47:01,930 So if everything is in order, the student should pass this check. 842 00:47:01,930 --> 00:47:08,285 And this is an example of how you can write a traffic check for a problem set. 843 00:47:08,285 --> 00:47:12,180 844 00:47:12,180 --> 00:47:16,810 So again, you have some level of flexibility here. 845 00:47:16,810 --> 00:47:20,650 So you can even bring in the dependencies you want to use. 846 00:47:20,650 --> 00:47:24,540 You just need to define them in the check50 check configuration file. 847 00:47:24,540 --> 00:47:28,890 And the underlying environment that you are running check50 848 00:47:28,890 --> 00:47:30,190 should have those dependencies. 849 00:47:30,190 --> 00:47:32,730 So if you are running check50 locally in your machine, 850 00:47:32,730 --> 00:47:35,910 you want to write check for Java program, 851 00:47:35,910 --> 00:47:39,600 I believe most of the Java dependency we have in the cloud version. 852 00:47:39,600 --> 00:47:43,590 But if you have some other typical like dependency 853 00:47:43,590 --> 00:47:46,887 that you need to facilitate your check, then you 854 00:47:46,887 --> 00:47:49,470 need to have those dependencies installed in your environment. 855 00:47:49,470 --> 00:47:53,890 And check50 will be able to handle that as well. 856 00:47:53,890 --> 00:47:56,530 Again, if you are unsure or this is too much, 857 00:47:56,530 --> 00:47:59,470 you can still refer to the documentation to see 858 00:47:59,470 --> 00:48:02,730 how to actually write check50 checks. 859 00:48:02,730 --> 00:48:06,240 Another tool I want to talk about is called style50. 860 00:48:06,240 --> 00:48:11,320 When grading students' work, we grade them in correctness. 861 00:48:11,320 --> 00:48:14,340 We also grade them in the style accent. 862 00:48:14,340 --> 00:48:19,760 So we want to know if they are writing code in a formatted way. 863 00:48:19,760 --> 00:48:26,600 So let's say I have a Python code, but, for example, this particular Python code 864 00:48:26,600 --> 00:48:28,680 indentation is not correct. 865 00:48:28,680 --> 00:48:32,180 Sometimes it has a one tab indentation, but for this code here 866 00:48:32,180 --> 00:48:37,670 it has two tab indentation versus here it's only one tab. 867 00:48:37,670 --> 00:48:41,080 So this is considered not a good style. 868 00:48:41,080 --> 00:48:42,560 Your style should be consistent. 869 00:48:42,560 --> 00:48:49,000 And that's actually the requirement we provide to students. 870 00:48:49,000 --> 00:48:53,960 They should write a code with good format and readable. 871 00:48:53,960 --> 00:48:59,650 And so we wrote a tool called style50 that basically checks the style 872 00:48:59,650 --> 00:49:04,450 and show what improvements students need to do to improve their code formatting 873 00:49:04,450 --> 00:49:05,930 or style in general. 874 00:49:05,930 --> 00:49:12,710 So when you click style50 in the VS Code top right, 875 00:49:12,710 --> 00:49:15,850 if your code doesn't look good, it will show you, OK, 876 00:49:15,850 --> 00:49:17,540 on the left is the code you are writing. 877 00:49:17,540 --> 00:49:21,620 On the right is the code we think, or the formatter think, 878 00:49:21,620 --> 00:49:23,700 it should be formatted properly. 879 00:49:23,700 --> 00:49:28,820 So here, a student will be able to see, oh, I should erase the extra tab. 880 00:49:28,820 --> 00:49:32,600 I should make that changes to make my code look good. 881 00:49:32,600 --> 00:49:38,210 In fact, like indentation is a thing for Python program, but for C program, 882 00:49:38,210 --> 00:49:39,718 you don't need any indentation. 883 00:49:39,718 --> 00:49:41,010 You can write however you want. 884 00:49:41,010 --> 00:49:44,570 You can even write like a complex one line 1,000 character program. 885 00:49:44,570 --> 00:49:47,730 That's fine, but no one's going to understand what you're writing. 886 00:49:47,730 --> 00:49:52,230 So we want to promote good style in writing code. 887 00:49:52,230 --> 00:49:56,220 But again, there's a different view. 888 00:49:56,220 --> 00:49:59,010 We also have this different view on a narrow window. 889 00:49:59,010 --> 00:50:03,790 We also provide students like a different view. 890 00:50:03,790 --> 00:50:06,870 So the student can clearly see what changes they need to make. 891 00:50:06,870 --> 00:50:09,870 If the student still don't understand what it means because sometimes it 892 00:50:09,870 --> 00:50:12,930 could be confusing, by utilizing AI, we were 893 00:50:12,930 --> 00:50:17,080 able to integrate our CS50 duck into the codespace. 894 00:50:17,080 --> 00:50:22,950 So when they click Explain Changes, they will get back a human readable or plain 895 00:50:22,950 --> 00:50:27,043 text response from the GPT4 to explain what changes you 896 00:50:27,043 --> 00:50:28,460 need to make to improve your code. 897 00:50:28,460 --> 00:50:31,940 This is all achieved through VS Code extensions. 898 00:50:31,940 --> 00:50:35,010 Again, this is just to highlight the extensibility of VS Code, 899 00:50:35,010 --> 00:50:37,870 but that's the tool we are providing for student. 900 00:50:37,870 --> 00:50:41,570 This is style50 in particular. 901 00:50:41,570 --> 00:50:45,110 OK, now that the student finished writing their code, 902 00:50:45,110 --> 00:50:48,120 finished formatting their code, they want to submit. 903 00:50:48,120 --> 00:50:50,070 How are they going to submit this code? 904 00:50:50,070 --> 00:50:55,730 One way we offer to all the students in the CS50 online ecosystem 905 00:50:55,730 --> 00:51:02,900 is they can use a tool called submit50 to submit their assignment to us. 906 00:51:02,900 --> 00:51:06,440 Again, similar to check50, essentially, what 907 00:51:06,440 --> 00:51:11,120 submit50 does is it automatically commit the file 908 00:51:11,120 --> 00:51:14,840 or push the student's assignment to a repository, 909 00:51:14,840 --> 00:51:18,360 again, managed by us, but student can also access that repository. 910 00:51:18,360 --> 00:51:23,090 So it's just going to push the code within that particular folder that 911 00:51:23,090 --> 00:51:28,340 has the problem set file to their remote repository. 912 00:51:28,340 --> 00:51:30,420 Again, the command is similar. 913 00:51:30,420 --> 00:51:36,170 This time, it's submit50 cs50/problem/2024/x/dna. 914 00:51:36,170 --> 00:51:38,810 So we are asking students to submit the DNA 915 00:51:38,810 --> 00:51:42,600 problem set for the 2024 CS50x course. 916 00:51:42,600 --> 00:51:47,160 So once the student execute that in the command line, it will ask you, 917 00:51:47,160 --> 00:51:50,310 OK, these are the files that will be submitted. 918 00:51:50,310 --> 00:51:54,450 If we have more files that wasn't specified in the configuration 919 00:51:54,450 --> 00:51:57,690 file I previously mentioned, those file will be ignored. 920 00:51:57,690 --> 00:52:01,530 We only care about what the problem set actually need. 921 00:52:01,530 --> 00:52:05,907 It will also prompt student do mind the academic honesty. 922 00:52:05,907 --> 00:52:07,240 Are you sure you want to submit? 923 00:52:07,240 --> 00:52:10,770 Because once you submit this file to us, we 924 00:52:10,770 --> 00:52:13,090 will assume this is the file written by you. 925 00:52:13,090 --> 00:52:15,090 If it's written by someone else, you are clearly 926 00:52:15,090 --> 00:52:18,250 violating academic honesty policy. 927 00:52:18,250 --> 00:52:21,510 So we do prompt student every time they run this command. 928 00:52:21,510 --> 00:52:25,350 They have to either provide yes or no. 929 00:52:25,350 --> 00:52:29,290 So if I provide yes, I did write a code, I think. 930 00:52:29,290 --> 00:52:31,560 So I type, yes. 931 00:52:31,560 --> 00:52:37,830 And I will submit the code to a repository that actually named like 932 00:52:37,830 --> 00:52:40,650 me50/ My GitHub username. 933 00:52:40,650 --> 00:52:43,410 It will be submitted to this particular repository. 934 00:52:43,410 --> 00:52:48,000 And in fact, when a student joins CS50x or CS50 course online, 935 00:52:48,000 --> 00:52:50,340 we will automatically provision everything 936 00:52:50,340 --> 00:52:56,450 that the student need, including creating this particular repository. 937 00:52:56,450 --> 00:53:02,210 And as you can see, if I go to my student repository, 938 00:53:02,210 --> 00:53:07,100 I will see that I submitted the DNA here. 939 00:53:07,100 --> 00:53:11,450 And if you pay attention, I also run check50 previously. 940 00:53:11,450 --> 00:53:16,310 So it actually has a commit message says automated commit by check50. 941 00:53:16,310 --> 00:53:20,090 Because every time you run check50, you're actually also committing file, 942 00:53:20,090 --> 00:53:22,380 but you are not submitting file. 943 00:53:22,380 --> 00:53:27,420 So we are not going to grade your check50 run as a submission. 944 00:53:27,420 --> 00:53:33,870 Only when you run submit50 do we actually count that as a submission. 945 00:53:33,870 --> 00:53:37,080 So what happen is after you run submit50, 946 00:53:37,080 --> 00:53:40,380 essentially, you push the code to this repository. 947 00:53:40,380 --> 00:53:42,000 We use GitHub Webhook. 948 00:53:42,000 --> 00:53:46,890 We basically notify our grading cluster by telling the grading cluster, hey, 949 00:53:46,890 --> 00:53:48,600 this student submits some file. 950 00:53:48,600 --> 00:53:49,360 Go check it. 951 00:53:49,360 --> 00:53:51,420 So the grading cluster will basically go in 952 00:53:51,420 --> 00:53:53,730 and grab the student's submitted file. 953 00:53:53,730 --> 00:53:58,870 Run check50 again remotely and then send back the response to our database. 954 00:53:58,870 --> 00:54:04,070 That's how we complete the auto-grading for the submission. 955 00:54:04,070 --> 00:54:09,018 And the question naturally led to, OK, where do 956 00:54:09,018 --> 00:54:10,560 students actually see the submission? 957 00:54:10,560 --> 00:54:12,727 Because the GitHub repository shouldn't be something 958 00:54:12,727 --> 00:54:15,540 the student interact with frequently. 959 00:54:15,540 --> 00:54:19,280 So we actually had an application for student and teacher 960 00:54:19,280 --> 00:54:21,260 called submit.cs50.io. 961 00:54:21,260 --> 00:54:25,350 You can think of it as a learning management system like Canvas. 962 00:54:25,350 --> 00:54:27,930 It's just something we wrote for our CS50 workflow. 963 00:54:27,930 --> 00:54:33,100 You don't have to use it, but we provide this for you. 964 00:54:33,100 --> 00:54:36,910 So students can see all their submissions through submit.cs50.io. 965 00:54:36,910 --> 00:54:44,140 And teachers can also see the submission from their student on submit.cs50.io. 966 00:54:44,140 --> 00:54:48,010 So as a teacher, you are now concerning, OK, 967 00:54:48,010 --> 00:54:52,640 then how can I create a course for my student in the CS50 universe? 968 00:54:52,640 --> 00:54:57,880 To do that, you go to submit.cs50.io/courses/new. 969 00:54:57,880 --> 00:55:00,430 You will be presented by this page. 970 00:55:00,430 --> 00:55:05,140 In this demo, I'm just going to create a course called Workshop 2024. 971 00:55:05,140 --> 00:55:08,590 Once you type the name, you click Create. 972 00:55:08,590 --> 00:55:09,530 It takes some time. 973 00:55:09,530 --> 00:55:12,310 What's happening is we also automate the process 974 00:55:12,310 --> 00:55:17,050 of creating some GitHub teams underneath the hood as a way 975 00:55:17,050 --> 00:55:20,180 to represent a course in the CS50. 976 00:55:20,180 --> 00:55:26,040 Again, everything is built on top of GitHub's infrastructure. 977 00:55:26,040 --> 00:55:29,310 So once you finish creating a course, you 978 00:55:29,310 --> 00:55:32,610 will be brought to this Settings page. 979 00:55:32,610 --> 00:55:36,240 You can further customize, OK, how do you 980 00:55:36,240 --> 00:55:38,700 want to name the course, or any description for the course 981 00:55:38,700 --> 00:55:40,230 you want to provide. 982 00:55:40,230 --> 00:55:45,330 The most important piece is you want to get your student enrolled to the course. 983 00:55:45,330 --> 00:55:47,340 So there's an invite link. 984 00:55:47,340 --> 00:55:51,540 You can copy paste this link to the email or to somewhere, 985 00:55:51,540 --> 00:55:56,100 so that all your student can go there and join your course on CS50. 986 00:55:56,100 --> 00:55:59,670 That's how you get student enrolled to your course. 987 00:55:59,670 --> 00:56:04,870 That's actually the same thing we are doing for all the CS50x course. 988 00:56:04,870 --> 00:56:08,950 Once you get the student enrolled-- 989 00:56:08,950 --> 00:56:12,130 now, actually, let's take a look at what's happening when student actually 990 00:56:12,130 --> 00:56:13,100 click the invite link. 991 00:56:13,100 --> 00:56:15,190 So for example, I'm a student. 992 00:56:15,190 --> 00:56:18,170 I'm joining the workshop taught by the Rubber Duck. 993 00:56:18,170 --> 00:56:19,010 That's the teacher. 994 00:56:19,010 --> 00:56:21,160 That's the main instructor for this course. 995 00:56:21,160 --> 00:56:22,790 So this is what I'm seeing. 996 00:56:22,790 --> 00:56:25,440 I agree to join the course. 997 00:56:25,440 --> 00:56:28,590 Meaning the teacher will be able to access everything I submit. 998 00:56:28,590 --> 00:56:33,180 And now, the part is, OK, what kind of assignment you want to collect? 999 00:56:33,180 --> 00:56:37,800 Again, I previously mentioned the submission slug is an important piece 1000 00:56:37,800 --> 00:56:41,580 in working with the CS50 ecosystem. 1001 00:56:41,580 --> 00:56:45,120 OK, I only want to collect this particular DNA 1002 00:56:45,120 --> 00:56:46,920 problem set for this course. 1003 00:56:46,920 --> 00:56:50,880 So if student working on other problem set using different submission slug, 1004 00:56:50,880 --> 00:56:54,240 it won't show up in your submission because you are not collecting those. 1005 00:56:54,240 --> 00:56:56,500 But if you want, you can add more here. 1006 00:56:56,500 --> 00:56:58,180 You can also use a prefix. 1007 00:56:58,180 --> 00:57:02,460 For example, if you want to collect everything that CS50 offer, 1008 00:57:02,460 --> 00:57:08,550 you can just write CS50/problems/, then everything that matches that branch 1009 00:57:08,550 --> 00:57:14,930 prefix will be collected if student ever submitted those problem set. 1010 00:57:14,930 --> 00:57:19,130 And again, you can also invite other teachers or GitHub user 1011 00:57:19,130 --> 00:57:20,900 to be your course teacher. 1012 00:57:20,900 --> 00:57:23,310 It could be your teaching assistant, course assistant. 1013 00:57:23,310 --> 00:57:24,420 So that's up to you. 1014 00:57:24,420 --> 00:57:27,920 So you can create an invite link and send to your TA. 1015 00:57:27,920 --> 00:57:29,970 Each invite link only work once. 1016 00:57:29,970 --> 00:57:32,450 So if you want to invite like five TA, you 1017 00:57:32,450 --> 00:57:39,650 will want to create five invite links for security purposes, reason. 1018 00:57:39,650 --> 00:57:44,100 So let's say my course, the Rubber Duck course, has three students. 1019 00:57:44,100 --> 00:57:46,200 They use the invite link to join the course. 1020 00:57:46,200 --> 00:57:49,070 We now have these three amazing students. 1021 00:57:49,070 --> 00:57:52,970 And they submitted the DNA problem set. 1022 00:57:52,970 --> 00:57:53,970 It looks good. 1023 00:57:53,970 --> 00:57:56,550 I feel like they already do a good job with their style. 1024 00:57:56,550 --> 00:57:59,390 They are getting almost a perfect grade on the style, 1025 00:57:59,390 --> 00:58:02,390 but one student seem to having issue with the check50 1026 00:58:02,390 --> 00:58:03,810 with the correctness check. 1027 00:58:03,810 --> 00:58:08,742 So you would want to see, OK, what happened to that particular submission? 1028 00:58:08,742 --> 00:58:13,400 So in fact, you can actually go and click the check50 1029 00:58:13,400 --> 00:58:17,060 to see what's happened to their code as a way to find out, 1030 00:58:17,060 --> 00:58:19,580 OK, maybe some things student need to improve. 1031 00:58:19,580 --> 00:58:21,300 So I click on that. 1032 00:58:21,300 --> 00:58:24,710 I see that, OK, this is what's happening. 1033 00:58:24,710 --> 00:58:30,410 The correctness check is expecting like a Bob output for the first check. 1034 00:58:30,410 --> 00:58:33,590 But this student actually went above and beyond. 1035 00:58:33,590 --> 00:58:37,640 Like, they give you what is actually happening in its code 1036 00:58:37,640 --> 00:58:39,970 and also providing actual output. 1037 00:58:39,970 --> 00:58:42,948 So the student actually doing a good job, 1038 00:58:42,948 --> 00:58:44,490 but it's not passing the auto-grader. 1039 00:58:44,490 --> 00:58:45,060 That's fine. 1040 00:58:45,060 --> 00:58:48,460 That's the reality of correctness check because it's not AI, right? 1041 00:58:48,460 --> 00:58:51,720 It doesn't know how to account for this scenario. 1042 00:58:51,720 --> 00:58:54,150 But maybe something that you can actually 1043 00:58:54,150 --> 00:58:57,180 customize your check50 check to accommodate this particular output 1044 00:58:57,180 --> 00:59:00,070 to mark it as a correct answer. 1045 00:59:00,070 --> 00:59:03,600 But anyway, this is how you can also access the check50 result 1046 00:59:03,600 --> 00:59:04,895 for a particular student. 1047 00:59:04,895 --> 00:59:08,000 1048 00:59:08,000 --> 00:59:11,360 We also have another tool called the compare50. 1049 00:59:11,360 --> 00:59:15,590 It's mostly to determine code similarity. 1050 00:59:15,590 --> 00:59:21,720 You can use it to resolve some academic honesty cases when using this tool. 1051 00:59:21,720 --> 00:59:27,110 So if you collect all the submissions from the submit.cs50.io, 1052 00:59:27,110 --> 00:59:30,830 you can run compare50 on all the submissions. 1053 00:59:30,830 --> 00:59:33,860 And then, it tells you what submissions are 1054 00:59:33,860 --> 00:59:38,600 similar to the other submission by a score, right? 1055 00:59:38,600 --> 00:59:42,950 And then, you can zoom in and narrow down, OK, these two submissions 1056 00:59:42,950 --> 00:59:44,100 look very similar. 1057 00:59:44,100 --> 00:59:47,210 You are curious of what's happening. 1058 00:59:47,210 --> 00:59:49,110 And you want to take some action against it. 1059 00:59:49,110 --> 00:59:51,740 That's up to you, but this is the tool we also provide 1060 00:59:51,740 --> 00:59:53,440 you to perform similarity check. 1061 00:59:53,440 --> 00:59:56,440 1062 00:59:56,440 --> 00:59:58,910 So yeah, that basically-- 1063 00:59:58,910 --> 01:00:00,500 yeah, OK, again, sorry. 1064 01:00:00,500 --> 01:00:02,160 This is what it looks like. 1065 01:00:02,160 --> 01:00:05,050 If you want to see a side-by-side comparison view, 1066 01:00:05,050 --> 01:00:10,220 compare50 will give you that view to see, gee, like these two submissions are 1067 01:00:10,220 --> 01:00:10,920 identical. 1068 01:00:10,920 --> 01:00:11,780 What happened? 1069 01:00:11,780 --> 01:00:14,450 I don't know. 1070 01:00:14,450 --> 01:00:17,280 So as an educator, you might want to investigate this. 1071 01:00:17,280 --> 01:00:21,270 It could be an academic honesty case. 1072 01:00:21,270 --> 01:00:25,400 So anyway, compare50 is a to allow you to perform code similarity checks, 1073 01:00:25,400 --> 01:00:29,610 and it's up to you how you want to deal with the result it present to you. 1074 01:00:29,610 --> 01:00:31,981 OK, that's a lot. 1075 01:00:31,981 --> 01:00:35,790 We go through all the tools for the submit50, 1076 01:00:35,790 --> 01:00:42,420 for the CS50 tool for grading and submitting and programming. 1077 01:00:42,420 --> 01:00:46,080 I want to close this by showing you this picture. 1078 01:00:46,080 --> 01:00:49,680 It's like drinking from a fire hose. 1079 01:00:49,680 --> 01:00:52,917 If that's the case, I'm sorry about that, because, again, it's too much. 1080 01:00:52,917 --> 01:00:54,750 I also understand there's a lot of material. 1081 01:00:54,750 --> 01:00:59,490 But the slides I provide should have all the external resources you 1082 01:00:59,490 --> 01:01:03,650 need to look at it in your own time. 1083 01:01:03,650 --> 01:01:06,460 1084 01:01:06,460 --> 01:01:10,400 Oh, yeah, although, I do have one more thing to explain. 1085 01:01:10,400 --> 01:01:14,650 Besides all the tool I talked to you, we actually have a tool called the cs50.ai. 1086 01:01:14,650 --> 01:01:20,800 It's an attempt to use AI in our education to assists students' learning. 1087 01:01:20,800 --> 01:01:28,150 So, in fact, if you go to cs50.ai, this is like a virtual tutor 1088 01:01:28,150 --> 01:01:30,190 we provide to students for free. 1089 01:01:30,190 --> 01:01:33,510 Behind the scenes it's using OpenAI GPT4. 1090 01:01:33,510 --> 01:01:37,170 We want to provide students like a 24/7 teaching assistant. 1091 01:01:37,170 --> 01:01:42,430 So if the student go to this web page, they will be presented with this view. 1092 01:01:42,430 --> 01:01:45,150 And in fact, they can talk to this duck. 1093 01:01:45,150 --> 01:01:54,480 Let's say, hey, I'm doing a live demo on you, the CS50 duck, 1094 01:01:54,480 --> 01:02:08,990 in front of some amazing educators across the globe. 1095 01:02:08,990 --> 01:02:12,553 Can you just say hello quickly? 1096 01:02:12,553 --> 01:02:25,690 1097 01:02:25,690 --> 01:02:29,980 So yeah, the tool will be able to quickly generate a response. 1098 01:02:29,980 --> 01:02:33,535 I'm just demoing here by having it say hi to you all. 1099 01:02:33,535 --> 01:02:35,410 But as you can imagine, students can actually 1100 01:02:35,410 --> 01:02:41,890 go to this tool as well to ask questions and to get an immediate feedback 1101 01:02:41,890 --> 01:02:43,110 to assist their learning. 1102 01:02:43,110 --> 01:02:46,070 1103 01:02:46,070 --> 01:02:49,610 OK, that's all I cover in this section. 1104 01:02:49,610 --> 01:02:51,930 And I'm open to all the questions. 1105 01:02:51,930 --> 01:02:53,760 And again, it's a lot. 1106 01:02:53,760 --> 01:02:55,610 And if you want to know more, you can just 1107 01:02:55,610 --> 01:02:57,480 look at the slide and presenter notes. 1108 01:02:57,480 --> 01:03:01,000 I have all the detailed instructions written there. 1109 01:03:01,000 --> 01:03:02,000