1 00:00:00,000 --> 00:00:02,220 2 00:00:02,220 --> 00:00:03,310 DAVID MALAN: All right. 3 00:00:03,310 --> 00:00:05,400 So our first session this morning is going 4 00:00:05,400 --> 00:00:07,350 to be with me, with Rongxin, and with Carter. 5 00:00:07,350 --> 00:00:10,470 And the goal is to talk really about all things technological to give you 6 00:00:10,470 --> 00:00:15,210 a sense of what we, CS50, provide in the way of technology, 7 00:00:15,210 --> 00:00:19,740 but also to give you a sense of how you can use or not use our own tools. 8 00:00:19,740 --> 00:00:22,560 If you'd like more customization than we ourselves provide, 9 00:00:22,560 --> 00:00:27,100 you can actually reinvent some of the wheels we have worked on over time 10 00:00:27,100 --> 00:00:29,410 but use it for your more specific scenario. 11 00:00:29,410 --> 00:00:33,030 So we'll focus then on providing first the standardized cloud-based 12 00:00:33,030 --> 00:00:35,970 programming environments, which I alluded to yesterday when I gave you 13 00:00:35,970 --> 00:00:39,570 a history of our non-cloud-based predecessors thereof. 14 00:00:39,570 --> 00:00:41,970 So the goals will be for me to first give you 15 00:00:41,970 --> 00:00:44,333 an introduction to Codespaces specifically, which 16 00:00:44,333 --> 00:00:47,250 is the most recent incarnation of this vision of web-based programming 17 00:00:47,250 --> 00:00:47,880 environments. 18 00:00:47,880 --> 00:00:51,600 Rongxin will then kindly take over and focus on some of the lower-level 19 00:00:51,600 --> 00:00:52,960 implementation details. 20 00:00:52,960 --> 00:00:55,230 And if you're among those less comfortable teachers, 21 00:00:55,230 --> 00:00:59,580 realize that you don't need to do everything we will cover in step 2. 22 00:00:59,580 --> 00:01:03,670 That's the advanced, more customized version of what's available to you. 23 00:01:03,670 --> 00:01:05,920 So if not this year, maybe in the future, maybe never. 24 00:01:05,920 --> 00:01:08,470 But we wanted to at least give you a sense of a taste of what 25 00:01:08,470 --> 00:01:10,780 you can do without us per se. 26 00:01:10,780 --> 00:01:14,080 Carter will then focus on readying Codespaces for your own class, 27 00:01:14,080 --> 00:01:16,250 setting up your own classroom, so to speak, 28 00:01:16,250 --> 00:01:19,000 so that you can collect your students, work more directly 29 00:01:19,000 --> 00:01:20,480 using other tools as well. 30 00:01:20,480 --> 00:01:23,290 And then last but not least, certainly nowadays, Rongxin 31 00:01:23,290 --> 00:01:27,640 will focus on all things AI and some of the tools we've alluded to a few times 32 00:01:27,640 --> 00:01:30,100 and how Rongxin and our team this summer have really 33 00:01:30,100 --> 00:01:32,860 brought CS50'S rubber duck to life. 34 00:01:32,860 --> 00:01:34,580 So where do we begin? 35 00:01:34,580 --> 00:01:36,610 So Visual Studio Code, a.k.a. 36 00:01:36,610 --> 00:01:42,700 VS Code, is a very popular, free, open-source text editor, so to speak. 37 00:01:42,700 --> 00:01:44,650 It's written by Microsoft, but it's sort of 38 00:01:44,650 --> 00:01:46,840 taken over a lot of industry in that you can use it 39 00:01:46,840 --> 00:01:49,960 not only for Windows environments or Windows programming, 40 00:01:49,960 --> 00:01:55,030 but Linux, macOS, Android, iOS, although less so on the last 41 00:01:55,030 --> 00:01:56,440 since Apple has its own thing. 42 00:01:56,440 --> 00:01:58,730 But VS Code itself is completely free. 43 00:01:58,730 --> 00:02:00,970 It's downloadable on Macs and PCs. 44 00:02:00,970 --> 00:02:03,580 But there's still, as I mentioned yesterday, these pain 45 00:02:03,580 --> 00:02:05,710 points for students and definitely for teachers. 46 00:02:05,710 --> 00:02:09,639 If you have to have 10 students, 20 students, 200 students installing 47 00:02:09,639 --> 00:02:13,062 Python or something like C, or really any programming 48 00:02:13,062 --> 00:02:14,770 environment on their own Macs and PCs, we 49 00:02:14,770 --> 00:02:18,200 tend to find that it detracts from getting started early in the term. 50 00:02:18,200 --> 00:02:20,710 So what we have focused on over the past couple of years 51 00:02:20,710 --> 00:02:26,020 is using a web-based version thereof so that we, CS50, can preinstall all 52 00:02:26,020 --> 00:02:28,150 of the software, all of the programming language 53 00:02:28,150 --> 00:02:30,070 support that you and your students might need. 54 00:02:30,070 --> 00:02:36,910 And that is what lives at now cs50.dev, formerly known as code.cs50.io. 55 00:02:36,910 --> 00:02:39,460 This is a shorter name, therefore, but it's 56 00:02:39,460 --> 00:02:41,770 the exact same web-based environment. 57 00:02:41,770 --> 00:02:45,940 It's based on this tool, which is a third-party product from GitHub that 58 00:02:45,940 --> 00:02:49,360 kindly supports not only our educational use but yours and other 59 00:02:49,360 --> 00:02:50,200 teachers' as well. 60 00:02:50,200 --> 00:02:53,450 If you're curious to read more about what's going on, you can go to this URL 61 00:02:53,450 --> 00:02:53,950 here. 62 00:02:53,950 --> 00:02:55,930 But essentially, they are hosting what they 63 00:02:55,930 --> 00:03:00,250 call Codespaces but more technically are really just Docker containers, 64 00:03:00,250 --> 00:03:01,820 and more on those in just a bit. 65 00:03:01,820 --> 00:03:05,660 But you can think of containers as being lightweight virtual machines, 66 00:03:05,660 --> 00:03:09,490 the illusion in the cloud of a real, physical server 67 00:03:09,490 --> 00:03:11,350 but completely implemented in software. 68 00:03:11,350 --> 00:03:14,920 And unlike virtual machines, which might take several seconds, several minutes 69 00:03:14,920 --> 00:03:17,770 to start up, containers tend to be characterized 70 00:03:17,770 --> 00:03:20,470 by being able to start like this, at least once they've 71 00:03:20,470 --> 00:03:23,830 been downloaded to the server or to one's own local computer. 72 00:03:23,830 --> 00:03:26,500 So many thanks to our friends at GitHub Education in particular. 73 00:03:26,500 --> 00:03:29,020 And that last URL I mentioned on the slide 74 00:03:29,020 --> 00:03:31,990 is that same group to whom you could apply as a teacher 75 00:03:31,990 --> 00:03:36,400 if you want to go beyond the scope of CS50's tools and do things yourself 76 00:03:36,400 --> 00:03:38,900 on your own for your class or classes. 77 00:03:38,900 --> 00:03:41,830 So here's a screenshot of what the landing page for cs50.dev 78 00:03:41,830 --> 00:03:45,160 looks like today, minus some screenshots down here. 79 00:03:45,160 --> 00:03:47,680 And just to give you a sense of the range of possibilities, 80 00:03:47,680 --> 00:03:50,500 this doesn't technically just support CS50. 81 00:03:50,500 --> 00:03:56,180 We've preinstalled not just support for C and Python and SQLite and HTML, 82 00:03:56,180 --> 00:04:00,310 JavaScript, and CSS, which we ourselves use in CS50, but other things as well-- 83 00:04:00,310 --> 00:04:04,180 if you want to teach C++, at least within a command-line environment, 84 00:04:04,180 --> 00:04:09,760 JavaScript via runtime called Node.js if you're teaching a Java class, Ruby, 85 00:04:09,760 --> 00:04:12,380 or a few other environments as well. 86 00:04:12,380 --> 00:04:14,470 The only thing to keep in mind, especially 87 00:04:14,470 --> 00:04:16,839 if you're teaching other classes for which you 88 00:04:16,839 --> 00:04:19,630 might want to use these same tools, is anything 89 00:04:19,630 --> 00:04:21,850 that's graphical, like a Java program that 90 00:04:21,850 --> 00:04:25,270 might have a GUI using Swing, a library, or other tools, 91 00:04:25,270 --> 00:04:27,760 is that just have to keep in mind, you are on the internet, 92 00:04:27,760 --> 00:04:29,302 or your students are on the internet. 93 00:04:29,302 --> 00:04:32,650 So anything that might work very smoothly on a local Mac 94 00:04:32,650 --> 00:04:35,980 or PC, maybe a ball bouncing back and forth, 95 00:04:35,980 --> 00:04:39,130 might not work as well over the internet just because of that latency. 96 00:04:39,130 --> 00:04:42,590 But there is support thanks to Rongxin and team for graphical things, 97 00:04:42,590 --> 00:04:44,860 including all of these tools and more. 98 00:04:44,860 --> 00:04:47,110 So that just gives you a sense of the lay of the land. 99 00:04:47,110 --> 00:04:48,970 This, if you haven't seen it before, is a screenshot 100 00:04:48,970 --> 00:04:51,670 of what the experience looks like, at least here in light mode. 101 00:04:51,670 --> 00:04:54,700 In general, there's four regions of the screen for students. 102 00:04:54,700 --> 00:04:57,250 One in black here is just the menu of options. 103 00:04:57,250 --> 00:05:00,280 And among the menus, dot, dot, dot, is CS50's duck or AI. 104 00:05:00,280 --> 00:05:01,630 More on that in a bit. 105 00:05:01,630 --> 00:05:04,960 Two is a graphical File Explorer that, like a Mac or PC, 106 00:05:04,960 --> 00:05:08,680 just shows students graphically what is in their account, files and folders. 107 00:05:08,680 --> 00:05:11,260 There's a tabbed code editor-- and this is the norm 108 00:05:11,260 --> 00:05:14,950 nowadays for writing not just one but maybe two or more files at a time. 109 00:05:14,950 --> 00:05:19,180 And then per yesterday, a lower-level, more powerful terminal window, and that 110 00:05:19,180 --> 00:05:23,080 is the textual interface to the underlying Codespace or Docker 111 00:05:23,080 --> 00:05:25,480 container-- really, Linux, the operating system 112 00:05:25,480 --> 00:05:27,580 that's running behind the scenes for students-- 113 00:05:27,580 --> 00:05:30,208 and making all of this possible for them. 114 00:05:30,208 --> 00:05:32,500 Now, we won't walk through all of these kinds of tools, 115 00:05:32,500 --> 00:05:35,208 but we wanted to at least give you a sense of the lay of the land 116 00:05:35,208 --> 00:05:37,810 so that if you're curious to kind of veer off on your own 117 00:05:37,810 --> 00:05:41,018 to explore other things, you at least have a cheat sheet with which to begin. 118 00:05:41,018 --> 00:05:43,930 And I've put a thumbs up next to tools that we ourselves either 119 00:05:43,930 --> 00:05:46,960 use for some purpose or have used in the past. 120 00:05:46,960 --> 00:05:50,170 But when it comes to client-side programming environments 121 00:05:50,170 --> 00:05:55,390 for students' own Macs and PCs, these are among the most popular options 122 00:05:55,390 --> 00:05:56,230 nowadays. 123 00:05:56,230 --> 00:05:58,090 And we, of course, per the thumbs up here, 124 00:05:58,090 --> 00:06:01,560 are using nowadays Visual Studio Code, really for two reasons-- 125 00:06:01,560 --> 00:06:04,910 one, because there's now this cloud-based version thereof, 126 00:06:04,910 --> 00:06:05,870 it's sort of turnkey. 127 00:06:05,870 --> 00:06:07,940 We can get kids up and running quite quickly. 128 00:06:07,940 --> 00:06:11,360 But also, per yesterday, because it's downloadable, too, 129 00:06:11,360 --> 00:06:15,260 at the end of our class, we encourage students to install it on their own, 130 00:06:15,260 --> 00:06:18,680 suffer through any headaches of getting Python or something else to work, 131 00:06:18,680 --> 00:06:22,160 but once they already have had three or more months of programming 132 00:06:22,160 --> 00:06:24,960 under their belt. So for us, narratively, I think that works well. 133 00:06:24,960 --> 00:06:27,620 But you might recognize some of your own familiar tools there. 134 00:06:27,620 --> 00:06:31,100 Client side too, there's other more technical solutions too. 135 00:06:31,100 --> 00:06:34,580 You can actually run this software-- more on it in a bit-- called Docker. 136 00:06:34,580 --> 00:06:37,512 So you can run or have your students run their own containers. 137 00:06:37,512 --> 00:06:39,720 I wouldn't recommend this for an introductory course, 138 00:06:39,720 --> 00:06:42,050 but maybe a second- or third-level class, 139 00:06:42,050 --> 00:06:44,540 like particularly in systems, where you want your students 140 00:06:44,540 --> 00:06:48,680 to have a specific version of Linux or more specialized tools 141 00:06:48,680 --> 00:06:49,710 available to them. 142 00:06:49,710 --> 00:06:52,790 But I think this is a very narrow use case for most faculty, 143 00:06:52,790 --> 00:06:55,880 so I wouldn't spend too much time contemplating that, most likely. 144 00:06:55,880 --> 00:06:58,400 And then you can do what we did in years past, which 145 00:06:58,400 --> 00:07:01,430 is give your students a full-fledged virtual machine image. 146 00:07:01,430 --> 00:07:03,680 That might be a gigabyte or more typically, 147 00:07:03,680 --> 00:07:06,740 and that would allow them to virtualize the entire operating system. 148 00:07:06,740 --> 00:07:10,190 But again, that's probably a solution for a lower-level systems 149 00:07:10,190 --> 00:07:12,230 class for faculty interested in that. 150 00:07:12,230 --> 00:07:14,420 But we've done all of this and more. 151 00:07:14,420 --> 00:07:17,720 On the server side, meanwhile, like if you don't want students installing 152 00:07:17,720 --> 00:07:21,800 anything-- you want something entirely server- or cloud-based-- the list is 153 00:07:21,800 --> 00:07:24,080 longer and growing, I'm sure, over time. 154 00:07:24,080 --> 00:07:28,500 We've categorized these into paid-only tools and free-tier tools. 155 00:07:28,500 --> 00:07:31,460 So these are some popular tools out there nowadays. 156 00:07:31,460 --> 00:07:35,720 We ourselves at Harvard, thanks to a site license that the university has, 157 00:07:35,720 --> 00:07:39,583 uses a question and answer tool called Ed. 158 00:07:39,583 --> 00:07:41,750 Happy to introduce you to that or to the team there. 159 00:07:41,750 --> 00:07:44,660 They're pretty generous with term-long trials. 160 00:07:44,660 --> 00:07:46,970 But typically, that is a paid upgrade eventually 161 00:07:46,970 --> 00:07:48,980 for asynchronous questions and answers. 162 00:07:48,980 --> 00:07:52,250 And Gradescope is a tool that came out of UC Berkeley a few years ago. 163 00:07:52,250 --> 00:07:54,650 It was acquired by a company called Turnitin. 164 00:07:54,650 --> 00:07:57,560 But that's a tool that makes it easier to grade, 165 00:07:57,560 --> 00:08:01,610 not only paper-based assessments, but also electronically submitted ones too. 166 00:08:01,610 --> 00:08:03,230 We use that with our undergraduates. 167 00:08:03,230 --> 00:08:05,240 But again, we use tools, the free tools we 168 00:08:05,240 --> 00:08:08,510 discussed yesterday, for our much larger audience online 169 00:08:08,510 --> 00:08:10,370 simply because of licensing costs. 170 00:08:10,370 --> 00:08:14,030 But then there's a lot of free tiers too, either through educational plans 171 00:08:14,030 --> 00:08:15,950 or just available to anyone. 172 00:08:15,950 --> 00:08:17,750 We, of course, are using Codespaces. 173 00:08:17,750 --> 00:08:20,180 We have experimented with Colab, and that's 174 00:08:20,180 --> 00:08:23,330 a popular implementation of Jupyter Notebook, essentially, 175 00:08:23,330 --> 00:08:25,860 if you have Google Classroom at your school already. 176 00:08:25,860 --> 00:08:28,220 And then Replit's a very popular option too, 177 00:08:28,220 --> 00:08:32,054 which gives you turnkey cloud-based programming environments as well 178 00:08:32,054 --> 00:08:33,679 that we've experimented with over time. 179 00:08:33,679 --> 00:08:35,840 And dot, dot, dot-- there's many, many more. 180 00:08:35,840 --> 00:08:38,929 And feel free to discuss later today in one of our birds of a feather. 181 00:08:38,929 --> 00:08:43,309 So just to give you a sense of what is happening underneath the hood 182 00:08:43,309 --> 00:08:46,610 when you or students go to cs50.dev, there 183 00:08:46,610 --> 00:08:50,420 are a few configuration files that are making all of the magic happen. 184 00:08:50,420 --> 00:08:53,900 We have one file here called a Dockerfile 185 00:08:53,900 --> 00:08:58,970 in our own cs50-specific CLI, Command-Line Interface image. 186 00:08:58,970 --> 00:09:02,580 And then we layer on top of that image, so to speak, 187 00:09:02,580 --> 00:09:06,230 another Dockerfile that's specifically for our Codespaces. 188 00:09:06,230 --> 00:09:08,880 And what this file contains, as you'll soon see, 189 00:09:08,880 --> 00:09:13,970 is a bunch of commands that says, install x, install y, change this file, 190 00:09:13,970 --> 00:09:15,200 add this configuration. 191 00:09:15,200 --> 00:09:19,340 So it sort of automates at a low level all of the underlying Linux commands 192 00:09:19,340 --> 00:09:21,260 that we want to run in advance for students, 193 00:09:21,260 --> 00:09:23,250 so they don't have to futz with it themselves. 194 00:09:23,250 --> 00:09:26,660 So then, when they go to cs50.dev, hit Enter, 195 00:09:26,660 --> 00:09:29,690 sometimes it might take a minute or more to start up for the first time. 196 00:09:29,690 --> 00:09:32,570 And what's happening is all of the commands in these files 197 00:09:32,570 --> 00:09:34,037 are essentially being run. 198 00:09:34,037 --> 00:09:35,120 It's a bit of a white lie. 199 00:09:35,120 --> 00:09:36,930 Technically, they've been run in advance. 200 00:09:36,930 --> 00:09:38,810 And so what's really happening is the results 201 00:09:38,810 --> 00:09:42,410 of those commands are being downloaded to their own individual codespace. 202 00:09:42,410 --> 00:09:43,910 So we'll give you a glimpse of this. 203 00:09:43,910 --> 00:09:47,095 Again, this is not a prerequisite to teach any of CS50's courses. 204 00:09:47,095 --> 00:09:49,970 We're really trying to go one level deeper for yo, so you know-- one, 205 00:09:49,970 --> 00:09:52,700 understand what it is we're doing, but two, how you can do it 206 00:09:52,700 --> 00:09:54,380 yourselves if you so choose. 207 00:09:54,380 --> 00:09:58,010 There's one other file in the mix in this world of Codespaces now 208 00:09:58,010 --> 00:10:01,070 in the cloud, which is a .devcontainer.json file. 209 00:10:01,070 --> 00:10:03,720 And this is a pretty common, popular standard 210 00:10:03,720 --> 00:10:07,860 nowadays, largely among the Microsoft ecosystem and beyond, 211 00:10:07,860 --> 00:10:12,690 for configuring other details about a codespace or a container. 212 00:10:12,690 --> 00:10:15,600 So it's in this file that you mention what 213 00:10:15,600 --> 00:10:18,270 Dockerfile or files you want to use. 214 00:10:18,270 --> 00:10:22,470 And it's in this file that you do things like preinstall VS Code extensions, 215 00:10:22,470 --> 00:10:26,130 things like support for Python, support for C, support for CS50's duck 216 00:10:26,130 --> 00:10:26,798 and so forth. 217 00:10:26,798 --> 00:10:28,590 And if you're familiar with VS Code already 218 00:10:28,590 --> 00:10:30,690 and maybe there are extensions you yourself 219 00:10:30,690 --> 00:10:32,700 like to use that you want your students to use, 220 00:10:32,700 --> 00:10:35,550 you could add those to a file that looks like this one here 221 00:10:35,550 --> 00:10:37,300 to just preinstall all of that too. 222 00:10:37,300 --> 00:10:40,620 So you don't have to have in your homework a list of, like, 10 steps 223 00:10:40,620 --> 00:10:43,350 that your kids have to go through just to get up and running. 224 00:10:43,350 --> 00:10:46,050 It's all automatable as a result. 225 00:10:46,050 --> 00:10:48,060 And this URL here-- 226 00:10:48,060 --> 00:10:49,440 I just wanted to point out-- 227 00:10:49,440 --> 00:10:53,670 to draw your attention to how we get students off of Codespaces, 228 00:10:53,670 --> 00:10:56,790 off of cs50.dev if they so choose at the end of the course. 229 00:10:56,790 --> 00:10:59,790 Our students are welcome to keep using our setup in the cloud. 230 00:10:59,790 --> 00:11:02,890 But on our own documentation page here, we 231 00:11:02,890 --> 00:11:07,150 have instructions for how students can either install VS Code on their Mac 232 00:11:07,150 --> 00:11:11,110 and PC and just connect to their codespace in the cloud, 233 00:11:11,110 --> 00:11:14,290 so they still don't have to install anything except VS Code. 234 00:11:14,290 --> 00:11:17,200 Or two, if they're feeling more comfortable, more advanced, 235 00:11:17,200 --> 00:11:20,410 they can alternatively install Docker themselves, 236 00:11:20,410 --> 00:11:25,180 run everything locally if they have no internet connection whatsoever, 237 00:11:25,180 --> 00:11:27,670 or perhaps they're in an area or a home that just doesn't 238 00:11:27,670 --> 00:11:30,700 have constant internet-- there is a solution to that problem too, 239 00:11:30,700 --> 00:11:33,590 but for those more comfortable in general. 240 00:11:33,590 --> 00:11:35,620 And then there's this tool, which we ourselves 241 00:11:35,620 --> 00:11:39,430 don't use so much with students but we do use ourselves quite a bit, 242 00:11:39,430 --> 00:11:43,450 cli50, Command-Line Interface 50, which is a headless version 243 00:11:43,450 --> 00:11:45,100 of all of this graphical stuff. 244 00:11:45,100 --> 00:11:50,110 So if in your own Mac or PC, you want to have with a quick command, cli50, 245 00:11:50,110 --> 00:11:53,290 Enter, the exact same programming environment with all 246 00:11:53,290 --> 00:11:56,980 of the same tools on your own Mac or PC, just because it's faster for you 247 00:11:56,980 --> 00:12:01,750 as a more technical person to do that than open a web browser, log in, 248 00:12:01,750 --> 00:12:02,600 and so forth. 249 00:12:02,600 --> 00:12:06,070 This is a headless version, so to speak, that has no graphical interface 250 00:12:06,070 --> 00:12:09,730 but has all of the same commands in a black-and-white terminal window 251 00:12:09,730 --> 00:12:13,100 environment that might look a little something like this, if familiar. 252 00:12:13,100 --> 00:12:16,330 If not, if intimidating, this is not something you need to know either. 253 00:12:16,330 --> 00:12:20,040 It's just something that's available to you. 254 00:12:20,040 --> 00:12:22,620 Let me pause here and see if there's any questions on really 255 00:12:22,620 --> 00:12:26,220 just this high-level lay of the land. 256 00:12:26,220 --> 00:12:27,480 Yeah, Peter. 257 00:12:27,480 --> 00:12:34,110 AUDIENCE: When we are in our Codespaces, all of that is stored on GitHub. 258 00:12:34,110 --> 00:12:37,320 Do we have the-- 259 00:12:37,320 --> 00:12:40,020 I'm trying to think of the correct wording for this-- 260 00:12:40,020 --> 00:12:44,310 where we could-- since it's all stored in a file system within a Docker 261 00:12:44,310 --> 00:12:48,420 container on Codespaces, can we share those files 262 00:12:48,420 --> 00:12:53,182 publicly as well as if we were sharing a software that we wrote? 263 00:12:53,182 --> 00:12:54,390 DAVID MALAN: A good question. 264 00:12:54,390 --> 00:12:57,300 Can you share the files that are inside of a codespace? 265 00:12:57,300 --> 00:12:58,170 Sort of. 266 00:12:58,170 --> 00:13:00,090 There's a couple of solutions to this problem. 267 00:13:00,090 --> 00:13:03,450 We preinstall a VS Code extension called Live Share, which 268 00:13:03,450 --> 00:13:08,550 allows you or anyone to click a button and share their codespace with someone 269 00:13:08,550 --> 00:13:12,090 else, so long as they too are logged in and it's up and running still. 270 00:13:12,090 --> 00:13:15,030 So this would be like Google Docs-style collaboration. 271 00:13:15,030 --> 00:13:17,930 That does not lend itself to asynchronous collaboration. 272 00:13:17,930 --> 00:13:19,680 So if you ask your students to do it, they 273 00:13:19,680 --> 00:13:21,630 would essentially have to keep Live Share 274 00:13:21,630 --> 00:13:23,670 running while you're poking around. 275 00:13:23,670 --> 00:13:25,830 And if it goes to sleep, if they go to sleep, 276 00:13:25,830 --> 00:13:28,440 then you might lose that connection. 277 00:13:28,440 --> 00:13:32,070 That, though, is the simplest way to achieve things 278 00:13:32,070 --> 00:13:35,610 unless you have the students submit their files to you via something 279 00:13:35,610 --> 00:13:38,890 like submit50 or some other mechanism. 280 00:13:38,890 --> 00:13:43,265 Other questions on these high-level features? 281 00:13:43,265 --> 00:13:43,890 AUDIENCE: Here. 282 00:13:43,890 --> 00:13:45,057 DAVID MALAN: Oh, yes, sorry. 283 00:13:45,057 --> 00:13:48,960 AUDIENCE: So I think you guys disabled, I think, intentionally, 284 00:13:48,960 --> 00:13:50,465 IntelliSense for-- 285 00:13:50,465 --> 00:13:51,340 DAVID MALAN: Correct. 286 00:13:51,340 --> 00:13:53,882 AUDIENCE: --completion of variable names, that sort of stuff. 287 00:13:53,882 --> 00:13:57,132 If I were to make a different decision, is that easy to turn off that blocking 288 00:13:57,132 --> 00:13:58,340 and turn that on for my kids? 289 00:13:58,340 --> 00:13:59,010 Is that simple? 290 00:13:59,010 --> 00:14:01,673 Or is that down in the weeds, kind of complicated? 291 00:14:01,673 --> 00:14:02,340 DAVID MALAN: No. 292 00:14:02,340 --> 00:14:06,240 So to repeat for camera, if we have disabled certain settings that you 293 00:14:06,240 --> 00:14:09,690 disagree with and want to override, yes, there are ways to override that. 294 00:14:09,690 --> 00:14:13,380 In our documentation at cs50.readthedocs.io, 295 00:14:13,380 --> 00:14:15,810 there are explanations of how you can change settings. 296 00:14:15,810 --> 00:14:18,150 There's three types of settings in VS Code, 297 00:14:18,150 --> 00:14:19,950 and here's where it gets a little specific. 298 00:14:19,950 --> 00:14:23,400 But there's user settings, there are remote settings, 299 00:14:23,400 --> 00:14:24,875 and there are workspace settings. 300 00:14:24,875 --> 00:14:27,000 And in our documentation, you'll see which of those 301 00:14:27,000 --> 00:14:28,930 takes priority over the others. 302 00:14:28,930 --> 00:14:31,770 So the simplest way to have your students override certain settings 303 00:14:31,770 --> 00:14:35,190 would be to literally just tell them, go to this menu option, click this button. 304 00:14:35,190 --> 00:14:39,270 Or you could give them the key-value pairs in JSON format. 305 00:14:39,270 --> 00:14:41,520 Or we're also thinking about ways where we 306 00:14:41,520 --> 00:14:45,057 could make it easier to-- you tell them to put it in a specific file, 307 00:14:45,057 --> 00:14:48,140 and we'll make sure the settings are applied, but that does not exist yet. 308 00:14:48,140 --> 00:14:51,430 And the fourth and final option would be don't use cs50.dev. 309 00:14:51,430 --> 00:14:53,290 Use what Rongxin is about to demonstrate, 310 00:14:53,290 --> 00:14:57,265 and then you can change any and all settings yourself. 311 00:14:57,265 --> 00:14:59,390 All right, well, with that said, let me turn things 312 00:14:59,390 --> 00:15:01,010 over to Rongxin for a deeper dive. 313 00:15:01,010 --> 00:15:04,880 And again, to emphasize, if you are feeling less comfortable, that's OK. 314 00:15:04,880 --> 00:15:06,150 You do not need to do this. 315 00:15:06,150 --> 00:15:08,567 This is meant to just show you what's underneath the hood. 316 00:15:08,567 --> 00:15:11,960 So maybe in a year or more, if you want to go to this level, you can. 317 00:15:11,960 --> 00:15:14,703 And, Andrew, was there one question from the chat? 318 00:15:14,703 --> 00:15:16,745 Andrew Holmes, was that a question from the chat? 319 00:15:16,745 --> 00:15:18,720 ANDREW HOLMES: Yeah, I think we had one question from the chat. 320 00:15:18,720 --> 00:15:21,678 The question was, "What about sharing the other action, us as teachers, 321 00:15:21,678 --> 00:15:22,802 pushing out to students? 322 00:15:22,802 --> 00:15:24,260 What's the best way of doing that?" 323 00:15:24,260 --> 00:15:25,700 DAVID MALAN: Yeah, what's the best way for you 324 00:15:25,700 --> 00:15:28,010 as teachers to share content out with students? 325 00:15:28,010 --> 00:15:29,790 There, you have a few options. 326 00:15:29,790 --> 00:15:33,622 If the code is available on the internet somewhere, like a ZIP file or the like, 327 00:15:33,622 --> 00:15:35,330 you can literally just have your students 328 00:15:35,330 --> 00:15:38,630 download that ZIP from your own LMS, Google Classroom, or anything 329 00:15:38,630 --> 00:15:41,270 like that, and then just drag and drop it into their codespace. 330 00:15:41,270 --> 00:15:43,610 If it's at a public URL, you could instead 331 00:15:43,610 --> 00:15:47,600 have them run a terminal window command, like curl or wget, 332 00:15:47,600 --> 00:15:49,910 that we ourselves use in our own homework assignments. 333 00:15:49,910 --> 00:15:52,610 Or, as Carter will introduce us, you can use another tool 334 00:15:52,610 --> 00:15:56,480 called GitHub Classroom that makes it a little easier to distribute files 335 00:15:56,480 --> 00:15:58,260 to students. 336 00:15:58,260 --> 00:16:00,942 All right, Rongxin, the clicker is yours. 337 00:16:00,942 --> 00:16:01,900 RONGXIN LIU: Thank you. 338 00:16:01,900 --> 00:16:03,600 Thank you, David. 339 00:16:03,600 --> 00:16:05,670 All right, so in the following section, I'm 340 00:16:05,670 --> 00:16:10,950 just going to walk you through how you can create your own codespace. 341 00:16:10,950 --> 00:16:13,720 Before we start this-- so just to give you a high-level idea, 342 00:16:13,720 --> 00:16:17,040 so each codespace is based off a GitHub repository. 343 00:16:17,040 --> 00:16:20,820 So a GitHub repository has to exist first in order for you 344 00:16:20,820 --> 00:16:22,500 to create your own codespace. 345 00:16:22,500 --> 00:16:25,440 So there's no repository, there's no codespace. 346 00:16:25,440 --> 00:16:28,980 That's why the first step is to create a private repository. 347 00:16:28,980 --> 00:16:31,305 I'm just going to do the live demo here on my laptop. 348 00:16:31,305 --> 00:16:37,680 349 00:16:37,680 --> 00:16:44,240 So let's say I am a student of a particular course in a given GitHub 350 00:16:44,240 --> 00:16:47,300 organization, and we have Codespace enabled. 351 00:16:47,300 --> 00:16:52,310 So the first thing is if I'm going to create a brand-new repository, 352 00:16:52,310 --> 00:16:55,280 I'm just going to click this New button. 353 00:16:55,280 --> 00:16:56,490 It's a green button. 354 00:16:56,490 --> 00:16:58,380 So I'm just going to give it a name, right? 355 00:16:58,380 --> 00:17:00,470 So I can just say "demo." 356 00:17:00,470 --> 00:17:03,560 And we can just leave everything as it is. 357 00:17:03,560 --> 00:17:05,869 And then I can just click Create repository. 358 00:17:05,869 --> 00:17:08,630 359 00:17:08,630 --> 00:17:11,020 So now there's empty in this repository, right? 360 00:17:11,020 --> 00:17:14,650 So as David mentioned earlier, we need a Dockerfile. 361 00:17:14,650 --> 00:17:16,839 We need a .devcontainer.json file. 362 00:17:16,839 --> 00:17:22,250 These two files basically shaped what your codespace would look like. 363 00:17:22,250 --> 00:17:25,720 So first, I'm going to create a Dockerfile. 364 00:17:25,720 --> 00:17:28,089 I'm going to name it Dockerfile. 365 00:17:28,089 --> 00:17:31,930 And if you are looking at our Google slide on your laptop, 366 00:17:31,930 --> 00:17:33,970 you will see a more detailed step. 367 00:17:33,970 --> 00:17:37,400 You can follow it there as well. 368 00:17:37,400 --> 00:17:40,420 I'm just going to go back to my slide. 369 00:17:40,420 --> 00:17:45,480 370 00:17:45,480 --> 00:17:48,140 So here is what a typical Dockerfile would look like. 371 00:17:48,140 --> 00:17:50,450 This is a very simple Dockerfile. 372 00:17:50,450 --> 00:17:53,090 It usually started with a base image. 373 00:17:53,090 --> 00:17:56,450 If you can look at the first line, it says, "FROM Ubuntu:latest," 374 00:17:56,450 --> 00:17:59,810 meaning the codespace we are going to create-- 375 00:17:59,810 --> 00:18:04,760 the underlying system will be Ubuntu, which is a Linux distro, distribution. 376 00:18:04,760 --> 00:18:10,040 We're going to create a codespace of the Ubuntu base image. 377 00:18:10,040 --> 00:18:12,950 And then we want to customize this Linux system, right? 378 00:18:12,950 --> 00:18:17,660 So the following command basically means get the Ubuntu base image, 379 00:18:17,660 --> 00:18:21,770 run update on it, and then install Java runtime, 380 00:18:21,770 --> 00:18:25,730 Python runtime, and install another Python package called 381 00:18:25,730 --> 00:18:27,290 Pillow, which is the image library. 382 00:18:27,290 --> 00:18:28,160 So that's simple. 383 00:18:28,160 --> 00:18:30,260 So this image will give you a codespace that 384 00:18:30,260 --> 00:18:32,870 has Python runtime and Java runtime. 385 00:18:32,870 --> 00:18:40,900 386 00:18:40,900 --> 00:18:46,450 So I'm just going to copy/paste all of this here. 387 00:18:46,450 --> 00:18:50,050 And I'm going to click Commit changes. 388 00:18:50,050 --> 00:18:51,730 Now I have the Dockerfile. 389 00:18:51,730 --> 00:18:56,180 Now, to create a codespace, you also need a .devcontainer.json file. 390 00:18:56,180 --> 00:18:58,360 So in that configuration file, we're going 391 00:18:58,360 --> 00:19:01,870 to reference this Dockerfile so that when the codespace launch, 392 00:19:01,870 --> 00:19:06,260 it will build a Docker image based off this Dockerfile. 393 00:19:06,260 --> 00:19:09,550 So to do that, I'm just going to add a new file. 394 00:19:09,550 --> 00:19:15,250 And be careful, the file name is .devcontainer.json, 395 00:19:15,250 --> 00:19:18,700 so it start with a period. 396 00:19:18,700 --> 00:19:20,380 "JSON." 397 00:19:20,380 --> 00:19:27,620 And let me show you what a typical .devcontainer.json file looks like. 398 00:19:27,620 --> 00:19:30,370 399 00:19:30,370 --> 00:19:36,600 So for this part, if we are going to use the Dockerfile as the base image, 400 00:19:36,600 --> 00:19:38,250 this is very simple. 401 00:19:38,250 --> 00:19:41,110 The .devcontainer.json file literally just looks like this. 402 00:19:41,110 --> 00:19:43,770 It means when you launch a codespace, please 403 00:19:43,770 --> 00:19:48,540 build an image based on the Dockerfile specified inside the repository. 404 00:19:48,540 --> 00:19:52,080 Since we name the Dockerfile "Dockerfile" with a capital D, 405 00:19:52,080 --> 00:19:58,320 so it reference that particular Dockerfile when launching a codespace. 406 00:19:58,320 --> 00:20:02,100 So I'm just going to grab this key-value pair, 407 00:20:02,100 --> 00:20:06,990 just put it here, click on Make changes. 408 00:20:06,990 --> 00:20:10,660 Now you can see my repository have two file. 409 00:20:10,660 --> 00:20:14,460 So if I go back to the very top level of my repository, 410 00:20:14,460 --> 00:20:16,680 you should see a green Code button. 411 00:20:16,680 --> 00:20:20,890 That's because GitHub detected, OK, your repository has a .devcontainer.json 412 00:20:20,890 --> 00:20:21,390 file. 413 00:20:21,390 --> 00:20:26,830 You probably want to run Codespace on top of the repository. 414 00:20:26,830 --> 00:20:31,300 So you just click the Code button, click the Codespaces tab, 415 00:20:31,300 --> 00:20:33,870 and then just click Create codespace on main. 416 00:20:33,870 --> 00:20:39,930 417 00:20:39,930 --> 00:20:47,100 Since this Codespace building the Docker image at the time it launched, 418 00:20:47,100 --> 00:20:51,567 so it will take some time to build this image because just-- 419 00:20:51,567 --> 00:20:53,400 because what's happening underneath the hood 420 00:20:53,400 --> 00:20:57,310 right now, if I click View logs, what it does 421 00:20:57,310 --> 00:21:01,440 is it's trying to pull the Ubuntu image, run all those commands 422 00:21:01,440 --> 00:21:03,270 I specified in the Docker image. 423 00:21:03,270 --> 00:21:05,520 You can think of it as installing an operating 424 00:21:05,520 --> 00:21:07,290 system for your PC or any laptop. 425 00:21:07,290 --> 00:21:10,290 It is just this is provisioning a virtual machine 426 00:21:10,290 --> 00:21:15,090 on the cloud on Microsoft Azure, cloud infrastructure. 427 00:21:15,090 --> 00:21:17,530 So usually, this would take about two minutes. 428 00:21:17,530 --> 00:21:22,748 So any question right now regarding Dockerfile? 429 00:21:22,748 --> 00:21:24,790 Because this is going to take two minutes anyway, 430 00:21:24,790 --> 00:21:26,710 so I can answer any question if you have. 431 00:21:26,710 --> 00:21:30,700 AUDIENCE: So these Dockerfiles exist within the cs50? 432 00:21:30,700 --> 00:21:31,450 RONGXIN LIU: Yes. 433 00:21:31,450 --> 00:21:34,352 AUDIENCE: So you need to have a cs50 codespace. 434 00:21:34,352 --> 00:21:35,560 RONGXIN LIU: Not necessarily. 435 00:21:35,560 --> 00:21:39,010 The thing I'm demoing here is nothing related to CS50 at all. 436 00:21:39,010 --> 00:21:40,030 It's standalone. 437 00:21:40,030 --> 00:21:43,270 But what-- this is essentially what we did behind the scenes. 438 00:21:43,270 --> 00:21:44,470 We also have a Dockerfile. 439 00:21:44,470 --> 00:21:47,860 We also have a very lengthy .devcontainer.json file. 440 00:21:47,860 --> 00:21:50,990 But we prebuild the image, so the image already exists. 441 00:21:50,990 --> 00:21:55,450 So when student launches CS50 Codespaces, 442 00:21:55,450 --> 00:21:58,010 it doesn't need to build the image. 443 00:21:58,010 --> 00:21:59,810 It will just pull the image, and that's it. 444 00:21:59,810 --> 00:22:01,870 The system already exists. 445 00:22:01,870 --> 00:22:03,100 Question somewhere? 446 00:22:03,100 --> 00:22:04,560 I saw a hand. 447 00:22:04,560 --> 00:22:05,893 OK. 448 00:22:05,893 --> 00:22:07,060 AUDIENCE: I have a question. 449 00:22:07,060 --> 00:22:08,940 RONGXIN LIU: Yes. 450 00:22:08,940 --> 00:22:12,740 AUDIENCE: Is this free to us as educators, 451 00:22:12,740 --> 00:22:14,160 or would this be free to anybody? 452 00:22:14,160 --> 00:22:16,910 I mean, obviously, some operating systems, you pay for, but Linux, 453 00:22:16,910 --> 00:22:17,452 you wouldn't. 454 00:22:17,452 --> 00:22:21,530 But all of this, even if we weren't educators, would be free to do? 455 00:22:21,530 --> 00:22:24,140 RONGXIN LIU: I believe educator has free access to Codespace-- 456 00:22:24,140 --> 00:22:24,800 AUDIENCE: Oh, OK. 457 00:22:24,800 --> 00:22:26,050 RONGXIN LIU: --through GitHub. 458 00:22:26,050 --> 00:22:26,600 So, yes. 459 00:22:26,600 --> 00:22:27,260 AUDIENCE: That's good. 460 00:22:27,260 --> 00:22:29,090 RONGXIN LIU: You have to request and verify your teacher, 461 00:22:29,090 --> 00:22:30,740 and then you should get a free Codespace, 462 00:22:30,740 --> 00:22:32,615 and your student should get a free Codespace. 463 00:22:32,615 --> 00:22:38,270 Although there is a quota limit per month, like some amount of hours, 464 00:22:38,270 --> 00:22:42,970 like uptime hours, but, yeah. 465 00:22:42,970 --> 00:22:46,300 But, yeah, as you can imagine, you can make the Dockerfile very complicated 466 00:22:46,300 --> 00:22:49,390 and then further customize your codespace. 467 00:22:49,390 --> 00:22:52,000 468 00:22:52,000 --> 00:22:52,500 Yeah. 469 00:22:52,500 --> 00:22:55,940 470 00:22:55,940 --> 00:22:59,570 Yeah, the Dockerfile approach I demoed here-- 471 00:22:59,570 --> 00:23:01,970 you wouldn't want to do that because, as you can imagine, 472 00:23:01,970 --> 00:23:03,920 it just takes longer time. 473 00:23:03,920 --> 00:23:08,730 But to give you a sense of how this-- all things work together, 474 00:23:08,730 --> 00:23:13,040 it's better for you to know you have this option. 475 00:23:13,040 --> 00:23:15,830 AUDIENCE: Rongxin, is Clang now standard with Ubuntu? 476 00:23:15,830 --> 00:23:17,000 Is it-- 477 00:23:17,000 --> 00:23:19,700 RONGXIN LIU: Yeah, it is built into the Ubuntu, yeah. 478 00:23:19,700 --> 00:23:23,100 479 00:23:23,100 --> 00:23:23,760 Yes. 480 00:23:23,760 --> 00:23:27,780 AUDIENCE: Is this container-- is it only up when you're logged in 481 00:23:27,780 --> 00:23:29,175 and you open the codespace? 482 00:23:29,175 --> 00:23:30,840 [INAUDIBLE] because it [INAUDIBLE]. 483 00:23:30,840 --> 00:23:34,140 RONGXIN LIU: So the question is, is the container only up 484 00:23:34,140 --> 00:23:35,940 when you are running the codespace? 485 00:23:35,940 --> 00:23:40,650 So once the container is built, it is stored on AWS infrastructure. 486 00:23:40,650 --> 00:23:44,560 So when you close your codespace and once you-- 487 00:23:44,560 --> 00:23:47,460 I mean, from Microsoft end, your codespace is idle 488 00:23:47,460 --> 00:23:50,470 for, like, 30 minutes or something, it will just stop the container. 489 00:23:50,470 --> 00:23:51,720 It won't delete the container. 490 00:23:51,720 --> 00:23:52,890 It will stop the container. 491 00:23:52,890 --> 00:23:55,770 But if you don't use your container for, like, 30 days-- 492 00:23:55,770 --> 00:23:58,950 right now, that's the highest retention period 493 00:23:58,950 --> 00:24:01,440 you can set-- your container will just get deleted. 494 00:24:01,440 --> 00:24:05,310 But the file there should be automatically pushed back 495 00:24:05,310 --> 00:24:06,370 to the repository. 496 00:24:06,370 --> 00:24:10,710 So the idea of a codespace is you want to experiment 497 00:24:10,710 --> 00:24:14,460 something with your repository but with a operating system. 498 00:24:14,460 --> 00:24:18,070 You get a Linux operating system on top of your repository. 499 00:24:18,070 --> 00:24:19,800 You work on something. 500 00:24:19,800 --> 00:24:21,870 The container is meant to be discarded. 501 00:24:21,870 --> 00:24:27,940 But the way we use it, just to turn it into a full-blown IDE desktop. 502 00:24:27,940 --> 00:24:29,163 So, yeah. 503 00:24:29,163 --> 00:24:29,830 AUDIENCE: Sorry. 504 00:24:29,830 --> 00:24:32,500 If you had something-- if you had a program running in there, 505 00:24:32,500 --> 00:24:34,600 and you would close the window, would it continue to run? 506 00:24:34,600 --> 00:24:35,740 RONGXIN LIU: It will continue to run. 507 00:24:35,740 --> 00:24:36,220 AUDIENCE: For 30 minutes? 508 00:24:36,220 --> 00:24:37,553 Or just it will continue to run? 509 00:24:37,553 --> 00:24:40,870 RONGXIN LIU: About 30 minutes, I think, because once you close the browser, 510 00:24:40,870 --> 00:24:44,900 like GitHub Codespace detected the client disconnected, 511 00:24:44,900 --> 00:24:48,950 it will just stop it after 30 minutes or an hour. 512 00:24:48,950 --> 00:24:51,220 You can also set the idle time limit. 513 00:24:51,220 --> 00:24:54,880 I think it's 4-hour maximum. 514 00:24:54,880 --> 00:24:58,300 All right, so our codespace launched right now. 515 00:24:58,300 --> 00:25:03,490 As David also mentioned, you get a classic VS Code interface. 516 00:25:03,490 --> 00:25:08,020 But I just want to show you that the Python environment, 517 00:25:08,020 --> 00:25:09,410 Java runtime is all there. 518 00:25:09,410 --> 00:25:14,030 So if I run python3, you can see we have Python 3 already installed. 519 00:25:14,030 --> 00:25:22,790 If I run Java, run java --version, you have Java runtime enabled as well. 520 00:25:22,790 --> 00:25:30,530 So to create a new file in the VS Code, there is a multiple way to do it. 521 00:25:30,530 --> 00:25:32,440 But one way is through the GUI interface, 522 00:25:32,440 --> 00:25:35,650 just to create a new file called hello.py. 523 00:25:35,650 --> 00:25:41,320 And I can just type, "hello world!", right? 524 00:25:41,320 --> 00:25:46,378 And by the way, sometimes, since this codespace is very simple, 525 00:25:46,378 --> 00:25:48,670 VS Code detected that, oh, you are working with Python, 526 00:25:48,670 --> 00:25:50,923 but you don't have any Python extension installed. 527 00:25:50,923 --> 00:25:52,840 So it will just-- typically, it will recommend 528 00:25:52,840 --> 00:25:54,220 some useful extension for you. 529 00:25:54,220 --> 00:25:56,420 So you can install if you want. 530 00:25:56,420 --> 00:25:59,890 But later on, we can just prespecify all these extensions 531 00:25:59,890 --> 00:26:01,870 so that you don't need student to install it 532 00:26:01,870 --> 00:26:03,430 when they're running their codespace. 533 00:26:03,430 --> 00:26:05,055 So I'm just going to ignore it for now. 534 00:26:05,055 --> 00:26:08,300 535 00:26:08,300 --> 00:26:11,945 And just to demonstrate, we can run a Python program. 536 00:26:11,945 --> 00:26:15,210 537 00:26:15,210 --> 00:26:16,290 Any questions so far? 538 00:26:16,290 --> 00:26:16,970 Yes. 539 00:26:16,970 --> 00:26:20,120 AUDIENCE: Can you run [INAUDIBLE] [? VM ?] on this? 540 00:26:20,120 --> 00:26:22,220 RONGXIN LIU: So you mean the graphical thing? 541 00:26:22,220 --> 00:26:29,060 Yes, we actually-- so I will demo that in our cs50 codespace. 542 00:26:29,060 --> 00:26:34,550 So in cs50 codespace, we added a GUI feature, like a virtual display feature 543 00:26:34,550 --> 00:26:35,240 to it. 544 00:26:35,240 --> 00:26:38,010 So, yes, you could run that as well. 545 00:26:38,010 --> 00:26:40,460 But the virtual display will be open on a separate tab. 546 00:26:40,460 --> 00:26:42,720 That becomes your virtual display. 547 00:26:42,720 --> 00:26:43,220 OK. 548 00:26:43,220 --> 00:26:47,690 549 00:26:47,690 --> 00:26:50,810 All right, so to install extension, just to demo, 550 00:26:50,810 --> 00:26:53,630 we can just click this extension icon here. 551 00:26:53,630 --> 00:26:56,540 There's just tens of thousands extension you can install 552 00:26:56,540 --> 00:26:58,190 to further customize your codespace. 553 00:26:58,190 --> 00:27:02,180 So for the demo, I'm just going to install Python extension. 554 00:27:02,180 --> 00:27:06,170 What it does is it gives you Python IntelliSense feature. 555 00:27:06,170 --> 00:27:11,690 So you can get access to all the methods and all that 556 00:27:11,690 --> 00:27:14,750 and code completion, but not necessarily Copilot style, 557 00:27:14,750 --> 00:27:16,640 but typical code completion. 558 00:27:16,640 --> 00:27:19,910 So let's say-- because remember, in the Dockerfile, 559 00:27:19,910 --> 00:27:23,930 I also preinstalled a Python package called Pillow. 560 00:27:23,930 --> 00:27:32,760 So if I do, from Pillow, you already see the dropdown IntelliSense saying, OK, 561 00:27:32,760 --> 00:27:34,520 here are the method you can use on this. 562 00:27:34,520 --> 00:27:39,380 Import Image-- here are all the available libraries or packages 563 00:27:39,380 --> 00:27:43,730 through this Pillow package. 564 00:27:43,730 --> 00:27:46,750 That's just the extension that enabling this feature. 565 00:27:46,750 --> 00:27:49,497 So you can imagine you can customize more extension 566 00:27:49,497 --> 00:27:52,080 or even build your own extension and then install in Codespace 567 00:27:52,080 --> 00:27:54,850 and then customize for your student. 568 00:27:54,850 --> 00:27:55,350 Yeah. 569 00:27:55,350 --> 00:27:59,210 570 00:27:59,210 --> 00:28:00,890 Any questions? 571 00:28:00,890 --> 00:28:01,420 Just one? 572 00:28:01,420 --> 00:28:01,920 OK. 573 00:28:01,920 --> 00:28:06,260 574 00:28:06,260 --> 00:28:10,640 Now, I'm going to-- 575 00:28:10,640 --> 00:28:12,560 we can just ignore this codespace for now. 576 00:28:12,560 --> 00:28:16,700 I'm going to just edit my .devcontainer.json file now, 577 00:28:16,700 --> 00:28:21,198 because right now, it's using the Dockerfile we wrote, but that's slow. 578 00:28:21,198 --> 00:28:21,990 We don't want that. 579 00:28:21,990 --> 00:28:24,860 So we want to edit it to have it reference a prebuilt 580 00:28:24,860 --> 00:28:26,915 image available on the internet. 581 00:28:26,915 --> 00:28:36,230 582 00:28:36,230 --> 00:28:41,860 So this is the new .devcontainer.json file that we are going to use to launch 583 00:28:41,860 --> 00:28:43,420 another new codespace. 584 00:28:43,420 --> 00:28:45,430 So now it looks a little bit more complicated, 585 00:28:45,430 --> 00:28:46,597 but let me walk you through. 586 00:28:46,597 --> 00:28:51,580 This is the four major key in this .devcontainer.json file you want to pay 587 00:28:51,580 --> 00:28:52,210 attention to. 588 00:28:52,210 --> 00:28:54,640 Usually, it's the image property. 589 00:28:54,640 --> 00:28:57,280 Image basically means what Docker image do you 590 00:28:57,280 --> 00:28:59,500 want to use to launch this codespace. 591 00:28:59,500 --> 00:29:03,550 There are many, many prebuilt Docker image available on the internet. 592 00:29:03,550 --> 00:29:08,080 There's a Python image, meaning if you run your codespace on this Python 593 00:29:08,080 --> 00:29:12,590 image, you will have a Python-friendly runtime environment. 594 00:29:12,590 --> 00:29:14,770 So you can imagine you can switch to Java, 595 00:29:14,770 --> 00:29:17,920 and then you have a Java runtime environment. 596 00:29:17,920 --> 00:29:21,550 And extension field basically means, what extension do 597 00:29:21,550 --> 00:29:23,860 you want this codespace to preinstall? 598 00:29:23,860 --> 00:29:25,250 It's an array of strings. 599 00:29:25,250 --> 00:29:27,970 So those are the extension identifier. 600 00:29:27,970 --> 00:29:32,410 You can find them on the marketplace. 601 00:29:32,410 --> 00:29:35,540 If you are shopping on the VS Code extension marketplace, 602 00:29:35,540 --> 00:29:38,090 if you find some extension you think is interesting or think 603 00:29:38,090 --> 00:29:43,310 is useful for your student, just take a note down of those extension ID 604 00:29:43,310 --> 00:29:44,460 and then put it here. 605 00:29:44,460 --> 00:29:46,627 And once you launch your codespace, you will already 606 00:29:46,627 --> 00:29:48,260 have those extension installed. 607 00:29:48,260 --> 00:29:51,650 Features is just features, very self-explanatory. 608 00:29:51,650 --> 00:29:55,290 So you want to also install some other Codespace features. 609 00:29:55,290 --> 00:29:58,070 So in this example, I'm just going to install the GitHub 610 00:29:58,070 --> 00:30:01,730 command-line program. 611 00:30:01,730 --> 00:30:02,637 This is optional. 612 00:30:02,637 --> 00:30:03,470 You don't need that. 613 00:30:03,470 --> 00:30:04,730 Extensions is also optional. 614 00:30:04,730 --> 00:30:09,680 Settings-- so some teacher mentioned, could we also 615 00:30:09,680 --> 00:30:11,720 enable IntelliSense or disable IntelliSense? 616 00:30:11,720 --> 00:30:14,750 This is how we achieve [INAUDIBLE] via Settings. 617 00:30:14,750 --> 00:30:19,880 Settings is to further customize the settings within VS Code. 618 00:30:19,880 --> 00:30:23,480 Here is just a simple setting, like basically set the default theme 619 00:30:23,480 --> 00:30:25,190 to use Solarized Light. 620 00:30:25,190 --> 00:30:28,580 And you can imagine you can add hundreds of settings 621 00:30:28,580 --> 00:30:31,505 to customize your VS Code further. 622 00:30:31,505 --> 00:30:36,550 623 00:30:36,550 --> 00:30:41,810 I'm just going to grab all this value here. 624 00:30:41,810 --> 00:30:45,070 So I'm just going to update my .devcontainer.json file to the value I 625 00:30:45,070 --> 00:30:48,130 just introduced, commit changes. 626 00:30:48,130 --> 00:30:51,570 627 00:30:51,570 --> 00:30:57,360 Now, since the .devcontainer.json file is now using an image from the remote 628 00:30:57,360 --> 00:31:01,980 Docker repository, the Dockerfile is no longer being used. 629 00:31:01,980 --> 00:31:06,810 So in theory, your repository can be as simple as just a one single 630 00:31:06,810 --> 00:31:12,540 .devcontainer.json file if you are not using the Dockerfile approach. 631 00:31:12,540 --> 00:31:17,280 I'm going to launch a new Codespace again here. 632 00:31:17,280 --> 00:31:25,360 This time, it should take shorter time to build and to launch the codespace 633 00:31:25,360 --> 00:31:31,180 because the Python image is only under 100 megabytes size in size, I think. 634 00:31:31,180 --> 00:31:35,750 635 00:31:35,750 --> 00:31:36,250 Yeah. 636 00:31:36,250 --> 00:31:39,690 637 00:31:39,690 --> 00:31:40,890 Any questions? 638 00:31:40,890 --> 00:31:43,640 639 00:31:43,640 --> 00:31:48,230 AUDIENCE: Does any of the Codespace run in the local browser? 640 00:31:48,230 --> 00:31:55,970 Like, does any of the processing, any of the work behind when a student runs 641 00:31:55,970 --> 00:31:59,180 a command in the terminal window happen on the local disk 642 00:31:59,180 --> 00:32:00,560 or happen on the local processor? 643 00:32:00,560 --> 00:32:01,432 Is that all cloud? 644 00:32:01,432 --> 00:32:02,390 RONGXIN LIU: All cloud. 645 00:32:02,390 --> 00:32:04,730 Anything running on this-- so this terminal, 646 00:32:04,730 --> 00:32:07,430 as also David mentioned-- that if you're running 647 00:32:07,430 --> 00:32:13,220 a VS Code offline on your desktop, your programming environment is your laptop. 648 00:32:13,220 --> 00:32:13,850 AUDIENCE: OK. 649 00:32:13,850 --> 00:32:19,460 RONGXIN LIU: Now, you're running this Codespace from GitHub remote compute 650 00:32:19,460 --> 00:32:20,280 infrastructure. 651 00:32:20,280 --> 00:32:23,580 So your underlying infrastructure is their VM machine. 652 00:32:23,580 --> 00:32:25,420 So this terminal is the VM machine. 653 00:32:25,420 --> 00:32:27,420 It's the virtual machine on the cloud right now. 654 00:32:27,420 --> 00:32:30,950 So anything that you run in the terminal is executed remotely somewhere 655 00:32:30,950 --> 00:32:32,480 in the data center. 656 00:32:32,480 --> 00:32:33,500 OK. 657 00:32:33,500 --> 00:32:36,620 But now, so as you can see, this codespace 658 00:32:36,620 --> 00:32:39,500 will only take, what, 20 seconds to launch, 659 00:32:39,500 --> 00:32:41,870 compared to 2 minutes from the Docker approach. 660 00:32:41,870 --> 00:32:43,830 You already see the theme change a little bit. 661 00:32:43,830 --> 00:32:46,090 It's not the default light theme. 662 00:32:46,090 --> 00:32:48,960 This is a Solarized Light theme. 663 00:32:48,960 --> 00:32:52,440 And since this is based on a Python image, 664 00:32:52,440 --> 00:32:56,820 we can check that it has the Python runtime, right? 665 00:32:56,820 --> 00:32:58,620 But if I do Java-- 666 00:32:58,620 --> 00:33:02,730 I want to check if Java is installed-- it shouldn't, because this image is 667 00:33:02,730 --> 00:33:04,202 meant to be for Python users. 668 00:33:04,202 --> 00:33:05,910 So it doesn't come with the Java runtime. 669 00:33:05,910 --> 00:33:08,600 670 00:33:08,600 --> 00:33:10,790 And also, if you go under Extensions, you 671 00:33:10,790 --> 00:33:12,680 will see the Python extension already being 672 00:33:12,680 --> 00:33:18,890 preinstalled because we specified that in the extensions field. 673 00:33:18,890 --> 00:33:19,520 Yes. 674 00:33:19,520 --> 00:33:23,360 AUDIENCE: When you do things with check50 and submit50, 675 00:33:23,360 --> 00:33:27,020 is it sensitive to the Docker that the student is using? 676 00:33:27,020 --> 00:33:34,610 Or does it automatically assume CS50'S environment? 677 00:33:34,610 --> 00:33:36,890 RONGXIN LIU: So the question-- is check50/submit50 678 00:33:36,890 --> 00:33:40,540 sensitive to the underlying programming environment? 679 00:33:40,540 --> 00:33:41,540 I would say, yes and no. 680 00:33:41,540 --> 00:33:46,250 So right now, in this programming environment, 681 00:33:46,250 --> 00:33:49,910 there won't be any check50 and submit50 because we didn't install those. 682 00:33:49,910 --> 00:33:54,710 But you could install for the demo, right? 683 00:33:54,710 --> 00:33:58,850 I can install check50 using pip command because we also 684 00:33:58,850 --> 00:34:03,860 published check50 as a standalone Python package on the website. 685 00:34:03,860 --> 00:34:05,670 So you could install check50 right now. 686 00:34:05,670 --> 00:34:10,409 So if you run check50, the problem is we need 687 00:34:10,409 --> 00:34:13,020 to push your code to students' private repositories. 688 00:34:13,020 --> 00:34:17,130 So you will be prompted to Enter a username and personal access 689 00:34:17,130 --> 00:34:18,639 token, all the authentication. 690 00:34:18,639 --> 00:34:23,699 So if you don't use the cs50 codespace, your student 691 00:34:23,699 --> 00:34:28,860 will need to go through that process or setup, like SSH key configuration 692 00:34:28,860 --> 00:34:29,610 to do that. 693 00:34:29,610 --> 00:34:34,020 But it's insensitive in the sense that if you do that, you could still 694 00:34:34,020 --> 00:34:36,060 use check50 and submit50. 695 00:34:36,060 --> 00:34:38,800 Yeah. 696 00:34:38,800 --> 00:34:41,620 Now, you might wonder, OK, if I want to further customize 697 00:34:41,620 --> 00:34:42,760 my .devcontainer.json-- 698 00:34:42,760 --> 00:34:45,790 I want to iterate my .devcontainer.json file-- 699 00:34:45,790 --> 00:34:48,429 it would be tedious to always go to the repository, 700 00:34:48,429 --> 00:34:50,020 edit that, launch a codespace, right? 701 00:34:50,020 --> 00:34:53,469 So actually, Codespace allows you to rebuild your codespace based 702 00:34:53,469 --> 00:34:55,719 on the latest .devcontainer.json file. 703 00:34:55,719 --> 00:35:00,080 So I'm just going to demonstrate that. 704 00:35:00,080 --> 00:35:04,940 So we want a Java runtime this time, right? 705 00:35:04,940 --> 00:35:08,680 So to do that, I'm just going to update my .devcontainer.json file to use 706 00:35:08,680 --> 00:35:09,445 the Java runtime. 707 00:35:09,445 --> 00:35:13,570 708 00:35:13,570 --> 00:35:19,960 So what's changing is I just need to change the image I'm referencing to, 709 00:35:19,960 --> 00:35:21,640 change the extension I want to install. 710 00:35:21,640 --> 00:35:23,860 Of course, you could install the Python extension. 711 00:35:23,860 --> 00:35:30,130 But since you are working with Java, why would you install that, right? 712 00:35:30,130 --> 00:35:34,690 Now I'm just going to change a setting to use the dark theme just 713 00:35:34,690 --> 00:35:37,450 to make it more visually different. 714 00:35:37,450 --> 00:35:43,190 715 00:35:43,190 --> 00:35:46,420 So here, in my .devcontainer.json file-- 716 00:35:46,420 --> 00:35:48,700 this is the one in the repository. 717 00:35:48,700 --> 00:35:51,310 I can just replace it with the new value. 718 00:35:51,310 --> 00:35:55,960 And again, since the .devcontainer.json file defined our codespace, 719 00:35:55,960 --> 00:36:00,010 so you can think of any changes to this .devcontainer.json file-- 720 00:36:00,010 --> 00:36:02,120 Codespace will think, OK, you made some changes, 721 00:36:02,120 --> 00:36:04,708 so you perhaps want a new container with the latest setting. 722 00:36:04,708 --> 00:36:07,750 So Codespace will just prompt you, do you want to rebuild your codespace? 723 00:36:07,750 --> 00:36:12,230 And, yes, we want to rebuild our codespace. 724 00:36:12,230 --> 00:36:15,110 AUDIENCE: When you guys do updates, is this how you do it? 725 00:36:15,110 --> 00:36:17,540 You push a new JSON file out, and that's when 726 00:36:17,540 --> 00:36:19,310 it says "rebuild your codespace" to us? 727 00:36:19,310 --> 00:36:20,090 RONGXIN LIU: Yes. 728 00:36:20,090 --> 00:36:24,620 So we also have an extension that basically checking-- each time 729 00:36:24,620 --> 00:36:26,960 student launch a codespace, we just check 730 00:36:26,960 --> 00:36:30,620 if the data is-- if we check the hashes of our image 731 00:36:30,620 --> 00:36:32,707 matches the latest hashes that we pushed. 732 00:36:32,707 --> 00:36:34,790 If it doesn't match, meaning there's a new update, 733 00:36:34,790 --> 00:36:39,470 so we just prompt the student to do a rebuild and then go through the whole 734 00:36:39,470 --> 00:36:42,200 rebuild process and pull the new image, install the new, 735 00:36:42,200 --> 00:36:44,570 apply the new .devcontainer.json settings. 736 00:36:44,570 --> 00:36:48,980 And as you can see, the theme changed because it applied the latest settings 737 00:36:48,980 --> 00:36:50,750 to use Solarized Dark settings. 738 00:36:50,750 --> 00:36:54,740 And right now, it shouldn't have the Python runtime anymore. 739 00:36:54,740 --> 00:37:00,270 It should have the Java runtime, and I can quickly show that. 740 00:37:00,270 --> 00:37:03,730 If I run python3, this command not found because this is not Python environment 741 00:37:03,730 --> 00:37:04,230 anymore. 742 00:37:04,230 --> 00:37:10,470 If I run java, just to check the version, we have the Java runtime. 743 00:37:10,470 --> 00:37:15,690 So this is how you perform a codespace rebuild if you have new 744 00:37:15,690 --> 00:37:17,340 .devcontainer.json settings. 745 00:37:17,340 --> 00:37:27,390 746 00:37:27,390 --> 00:37:31,320 Yeah, and that's it for the customization part on Codespace. 747 00:37:31,320 --> 00:37:33,600 Any questions before we move on? 748 00:37:33,600 --> 00:37:36,850 749 00:37:36,850 --> 00:37:39,265 AUDIENCE: How do I give this to students? 750 00:37:39,265 --> 00:37:40,390 RONGXIN LIU: Good question. 751 00:37:40,390 --> 00:37:42,843 So Carter will introduce how you would do it. 752 00:37:42,843 --> 00:37:44,260 CARTER ZENKE: So a great question. 753 00:37:44,260 --> 00:37:46,677 The question is, how do we actually give this to students? 754 00:37:46,677 --> 00:37:49,290 So we've seen so far some of the motivation 755 00:37:49,290 --> 00:37:52,290 behind Codespaces, like why do we have these environments. 756 00:37:52,290 --> 00:37:54,870 Well, it's so students can program in the cloud 757 00:37:54,870 --> 00:37:56,900 and not on their own computer, where they 758 00:37:56,900 --> 00:37:59,858 might get bogged down in installing things over and over again. 759 00:37:59,858 --> 00:38:01,650 We instead have Codespaces to help students 760 00:38:01,650 --> 00:38:03,780 have those things preinstalled, right? 761 00:38:03,780 --> 00:38:07,080 And Rongxin kindly showed us how we can customize that environment 762 00:38:07,080 --> 00:38:11,070 to install certain things and not others, which is optional for you all. 763 00:38:11,070 --> 00:38:14,970 You can get that deep if you'd like to, but you don't ultimately have to. 764 00:38:14,970 --> 00:38:18,180 And so today, I also want to show you how you can give Codespaces 765 00:38:18,180 --> 00:38:22,620 to students using a tool called GitHub Classroom that you could use 766 00:38:22,620 --> 00:38:23,685 or you could not use. 767 00:38:23,685 --> 00:38:25,560 But the goal is to show you and help you make 768 00:38:25,560 --> 00:38:29,610 an informed decision of whether you want to use this or not, all right? 769 00:38:29,610 --> 00:38:32,370 So Codespaces is a GitHub tool. 770 00:38:32,370 --> 00:38:34,120 GitHub is a software company. 771 00:38:34,120 --> 00:38:36,520 They make the tool behind Codespaces. 772 00:38:36,520 --> 00:38:40,750 They also made GitHub Classroom to help teachers like us actually 773 00:38:40,750 --> 00:38:42,700 use it in their own classrooms. 774 00:38:42,700 --> 00:38:45,530 And there are really two pieces of prior knowledge 775 00:38:45,530 --> 00:38:48,470 you need to understand how Classroom works. 776 00:38:48,470 --> 00:38:52,810 So the first piece of prior knowledge is a GitHub organization. 777 00:38:52,810 --> 00:38:55,760 What is a GitHub organization? 778 00:38:55,760 --> 00:38:59,980 And the second piece is, what is a GitHub repository? 779 00:38:59,980 --> 00:39:02,600 So take maybe 30 seconds here. 780 00:39:02,600 --> 00:39:06,160 And if you think you know what is a GitHub organization, 781 00:39:06,160 --> 00:39:09,040 could I actually ask you to help share that out with the room? 782 00:39:09,040 --> 00:39:13,060 Anyone know what a GitHub organization is? 783 00:39:13,060 --> 00:39:15,310 AUDIENCE: It's a bunch of people sharing a repository. 784 00:39:15,310 --> 00:39:15,730 CARTER ZENKE: Yeah. 785 00:39:15,730 --> 00:39:17,770 Can I actually have you say it in the microphone, if I could? 786 00:39:17,770 --> 00:39:18,750 AUDIENCE: [INAUDIBLE] 787 00:39:18,750 --> 00:39:19,750 CARTER ZENKE: Thank you. 788 00:39:19,750 --> 00:39:21,850 AUDIENCE: It's a bunch of people sharing a repository. 789 00:39:21,850 --> 00:39:23,975 CARTER ZENKE: Bunch of people sharing a repository. 790 00:39:23,975 --> 00:39:25,840 That's a good definition of it. 791 00:39:25,840 --> 00:39:29,880 Any other ones, too, for those who are familiar with a GitHub organization? 792 00:39:29,880 --> 00:39:33,470 793 00:39:33,470 --> 00:39:34,160 OK. 794 00:39:34,160 --> 00:39:39,050 So I think this idea of a collection of repositories is a good idea. 795 00:39:39,050 --> 00:39:42,740 But then what is a repository on GitHub? 796 00:39:42,740 --> 00:39:47,090 If an organization is a collection of repositories, what is a repository? 797 00:39:47,090 --> 00:39:51,050 Anyone have an idea that they want to share out for that? 798 00:39:51,050 --> 00:39:51,850 Definition? 799 00:39:51,850 --> 00:39:55,880 800 00:39:55,880 --> 00:39:56,380 It's OK. 801 00:39:56,380 --> 00:39:58,690 If not, I can give you some idea here too. 802 00:39:58,690 --> 00:40:02,520 So a repository is simply a place to put code-- 803 00:40:02,520 --> 00:40:03,920 oh, a hand over there? 804 00:40:03,920 --> 00:40:04,740 AUDIENCE: That's what I was going to say. 805 00:40:04,740 --> 00:40:06,190 CARTER ZENKE: OK, a place to put code. 806 00:40:06,190 --> 00:40:06,790 Good idea. 807 00:40:06,790 --> 00:40:09,580 So GitHub is an organization-- it's a software company, 808 00:40:09,580 --> 00:40:14,350 and they kind of host code a little bit like Google Drive hosts files. 809 00:40:14,350 --> 00:40:17,290 If I'm a programmer and I put my code somewhere, 810 00:40:17,290 --> 00:40:22,370 I could put it on GitHub in this container called a repository. 811 00:40:22,370 --> 00:40:25,750 Now, if I have many repositories, I might 812 00:40:25,750 --> 00:40:31,630 put those in a GitHub organization and put them all under one umbrella. 813 00:40:31,630 --> 00:40:34,880 And we'll see some examples of this a bit later on. 814 00:40:34,880 --> 00:40:39,220 But the reason these are important is because, in GitHub Classroom, 815 00:40:39,220 --> 00:40:42,880 your Classroom is a GitHub organization. 816 00:40:42,880 --> 00:40:47,150 And every assignment you make is a GitHub repository. 817 00:40:47,150 --> 00:40:50,380 So the entire thing is in the GitHub ecosystem. 818 00:40:50,380 --> 00:40:53,260 It just uses GitHub's underlying tools, so they already 819 00:40:53,260 --> 00:40:57,170 have organizations and repositories. 820 00:40:57,170 --> 00:41:00,350 So if you want to use a tool like GitHub Classroom, 821 00:41:00,350 --> 00:41:02,810 you only need to take a few steps here. 822 00:41:02,810 --> 00:41:03,840 Among them are these. 823 00:41:03,840 --> 00:41:07,803 So first, you create your own GitHub organization, which is your Classroom. 824 00:41:07,803 --> 00:41:09,470 We'll walk you through this in a minute. 825 00:41:09,470 --> 00:41:12,137 You will then add some distribution code-- 826 00:41:12,137 --> 00:41:13,970 that is, the code you want students to start 827 00:41:13,970 --> 00:41:17,420 with-- to a repository in that organization. 828 00:41:17,420 --> 00:41:19,460 You will then make that repository what we 829 00:41:19,460 --> 00:41:23,990 call a template, letting students take it and modify it then submit 830 00:41:23,990 --> 00:41:26,220 their work in that repository itself. 831 00:41:26,220 --> 00:41:29,270 And then you can use GitHub Classroom to kind of formalize that 832 00:41:29,270 --> 00:41:35,100 within the Classroom interface to make it more cleanly done for you here. 833 00:41:35,100 --> 00:41:40,100 And as a student, all students will have to do is simply accept the assignment 834 00:41:40,100 --> 00:41:42,230 and work on the assignment with Codespaces. 835 00:41:42,230 --> 00:41:45,080 And I'll actually show you what this looks like in the Classroom 836 00:41:45,080 --> 00:41:47,280 environment in just a bit. 837 00:41:47,280 --> 00:41:51,110 But any clarifying questions on this so far on repositories or organizations? 838 00:41:51,110 --> 00:41:52,070 Yeah. 839 00:41:52,070 --> 00:41:54,830 AUDIENCE: For an organization, if we have multiple classes, 840 00:41:54,830 --> 00:41:57,080 can there be groups within the organization? 841 00:41:57,080 --> 00:41:59,900 Or would we create different organizations for each separate class? 842 00:41:59,900 --> 00:42:01,442 CARTER ZENKE: Yeah, a great question. 843 00:42:01,442 --> 00:42:05,018 So the question was, if I have maybe different-- can you say it again 844 00:42:05,018 --> 00:42:06,185 so I can make sure I got it? 845 00:42:06,185 --> 00:42:07,490 AUDIENCE: Yeah, just if you have different classes, 846 00:42:07,490 --> 00:42:09,020 would that be different organizations, or can you 847 00:42:09,020 --> 00:42:10,820 create groups within an organization? 848 00:42:10,820 --> 00:42:13,737 CARTER ZENKE: Yeah, so let's say you teach more than one class, right? 849 00:42:13,737 --> 00:42:15,920 Do I need to make, then, multiple organizations? 850 00:42:15,920 --> 00:42:17,960 Or can I put it all under one organization? 851 00:42:17,960 --> 00:42:20,543 The answer to that is you have to make multiple organizations. 852 00:42:20,543 --> 00:42:24,170 So if you have more than one class, you should make more than one GitHub 853 00:42:24,170 --> 00:42:26,750 organization, ultimately. 854 00:42:26,750 --> 00:42:30,830 Other clarifying questions before we move on on either organizations 855 00:42:30,830 --> 00:42:32,120 or repositories? 856 00:42:32,120 --> 00:42:34,680 857 00:42:34,680 --> 00:42:38,280 OK, so let's actually see what these look like actually on github.com. 858 00:42:38,280 --> 00:42:43,347 So what we'll do here is actually create your very own free GitHub organization. 859 00:42:43,347 --> 00:42:45,430 And you can do this-- if you want to follow along, 860 00:42:45,430 --> 00:42:49,140 you can go to this URL right here, which is also in the slides for reference, 861 00:42:49,140 --> 00:42:54,480 github.com/organizations/. 862 00:42:54,480 --> 00:42:56,400 And if you go to that URL-- 863 00:42:56,400 --> 00:42:59,670 I'll put it back up in a minute-- you should see something like this-- 864 00:42:59,670 --> 00:43:01,775 "Pick a plan for your organization." 865 00:43:01,775 --> 00:43:04,900 Well, because we're teachers, you should probably just use the free option. 866 00:43:04,900 --> 00:43:06,450 This gives you everything you need. 867 00:43:06,450 --> 00:43:08,283 You don't need to pay for your organization. 868 00:43:08,283 --> 00:43:12,660 You click that free option there to make your very own GitHub organization, 869 00:43:12,660 --> 00:43:19,170 again, by going to this URL right here, github.com/organizations/plan. 870 00:43:19,170 --> 00:43:22,500 And to our point earlier, this creates for you 871 00:43:22,500 --> 00:43:28,500 a space, a name, on github.com to put your many repositories, 872 00:43:28,500 --> 00:43:32,430 places you want to store your code files that are ultimately going to be 873 00:43:32,430 --> 00:43:36,760 your assignments for your Classrooms. 874 00:43:36,760 --> 00:43:38,290 So feel free to keep working here. 875 00:43:38,290 --> 00:43:41,530 I'll keep moving, and we'll keep going here, but let me-- 876 00:43:41,530 --> 00:43:44,740 feel free to raise your hand if you get stuck or want some help here. 877 00:43:44,740 --> 00:43:50,960 Now, the next step is to create a repository in that organization. 878 00:43:50,960 --> 00:43:55,390 So remember, an organization is a collection of repositories, 879 00:43:55,390 --> 00:43:57,760 and repositories hold code. 880 00:43:57,760 --> 00:44:03,700 So our goal here is to first add a repository to our organization, which 881 00:44:03,700 --> 00:44:08,050 is kind of the same thing as adding an assignment to our Classroom 882 00:44:08,050 --> 00:44:10,040 for students to complete. 883 00:44:10,040 --> 00:44:16,750 So you could create a new repository at this URL right here, github.com/new. 884 00:44:16,750 --> 00:44:19,510 And you should see a page a bit like this 885 00:44:19,510 --> 00:44:22,330 that asks you some details about how you want 886 00:44:22,330 --> 00:44:25,990 to make this repository, this place to store code 887 00:44:25,990 --> 00:44:28,690 that a student will eventually work on. 888 00:44:28,690 --> 00:44:33,160 Now, the main thing to tweak here is this Owner section. 889 00:44:33,160 --> 00:44:35,840 At first, it should be blank, but you can 890 00:44:35,840 --> 00:44:39,290 change it to be the name of your organization-- 891 00:44:39,290 --> 00:44:41,720 that is, of course, your Classroom. 892 00:44:41,720 --> 00:44:47,600 So here, I called mine cs50-educator-workshop-23. 893 00:44:47,600 --> 00:44:51,230 That is my organization name, also my Classroom name. 894 00:44:51,230 --> 00:44:54,020 And therefore, I'm going to make this repository 895 00:44:54,020 --> 00:44:58,640 inside this organization, all right? 896 00:44:58,640 --> 00:45:02,060 Now, this will eventually hold the code I 897 00:45:02,060 --> 00:45:05,990 want to give to students as part of this assignment. 898 00:45:05,990 --> 00:45:09,530 And I'll do that using GitHub Classroom in a minute. 899 00:45:09,530 --> 00:45:12,575 But clarifying questions here before we keep going? 900 00:45:12,575 --> 00:45:16,940 901 00:45:16,940 --> 00:45:19,850 All right, so all we've done is made our own organization. 902 00:45:19,850 --> 00:45:21,950 We're going to add a repository that will hold 903 00:45:21,950 --> 00:45:24,020 some code we want to give to students. 904 00:45:24,020 --> 00:45:28,820 So now we're going to actually add some code to this repository, 905 00:45:28,820 --> 00:45:32,150 and we can do that using github.com's interface. 906 00:45:32,150 --> 00:45:36,217 I could go to the code editor, which is linked in the slide notes 907 00:45:36,217 --> 00:45:36,800 if you'd like. 908 00:45:36,800 --> 00:45:40,187 Or you can find it by going to your repository and clicking Edit. 909 00:45:40,187 --> 00:45:42,020 We can go in more depth later if you'd like, 910 00:45:42,020 --> 00:45:44,360 but the goal is to save some time for AI. 911 00:45:44,360 --> 00:45:48,360 So we'll also add some code to our repository here. 912 00:45:48,360 --> 00:45:51,320 And we'll then say, this becomes the code a student would 913 00:45:51,320 --> 00:45:54,680 receive when they accept the assignment, when they actually 914 00:45:54,680 --> 00:45:56,090 work on this assignment. 915 00:45:56,090 --> 00:45:59,870 Let's say I'm going to give students now an empty main() function in Python, 916 00:45:59,870 --> 00:46:02,430 and I want them to write "Hello, world," for instance. 917 00:46:02,430 --> 00:46:06,210 But for now, I'm just leaving it blank for the student to work on. 918 00:46:06,210 --> 00:46:10,910 So here, we can see I have my distribution code now 919 00:46:10,910 --> 00:46:12,290 in this repository. 920 00:46:12,290 --> 00:46:14,630 My repository was called "hello." 921 00:46:14,630 --> 00:46:16,590 My assignment is called "hello." 922 00:46:16,590 --> 00:46:20,860 I'm now going to put in hello.py, which is blank, a hello.java file, 923 00:46:20,860 --> 00:46:23,140 which is blank, and what Rongxin talked about, 924 00:46:23,140 --> 00:46:28,090 which is the Codespace customization if I want to include that. 925 00:46:28,090 --> 00:46:30,870 So now as a whole, we have this assignment, 926 00:46:30,870 --> 00:46:33,060 the code to give to students. 927 00:46:33,060 --> 00:46:36,060 This assignment is inside our organization, 928 00:46:36,060 --> 00:46:38,520 this place that keeps track of all of our repositories 929 00:46:38,520 --> 00:46:42,210 and thus all of our assignments. 930 00:46:42,210 --> 00:46:45,690 So now, to work with GitHub Classroom, I need 931 00:46:45,690 --> 00:46:49,740 to turn this repository into a template, letting students actually take 932 00:46:49,740 --> 00:46:53,280 it and put it in their own GitHub account 933 00:46:53,280 --> 00:46:55,260 and change it as they'd like to. 934 00:46:55,260 --> 00:46:56,260 So very simple here-- 935 00:46:56,260 --> 00:46:59,910 I could go to Settings in my repository, click this checkbox 936 00:46:59,910 --> 00:47:01,230 that says Template repository. 937 00:47:01,230 --> 00:47:04,230 And now students could take it, they could modify it, 938 00:47:04,230 --> 00:47:07,170 and they could submit something, as we'll see a little bit later on. 939 00:47:07,170 --> 00:47:09,520 Just one more necessary step here. 940 00:47:09,520 --> 00:47:13,680 And then I can go ahead and sign into GitHub Classroom. 941 00:47:13,680 --> 00:47:16,590 I've set everything up that I need to on github.com. 942 00:47:16,590 --> 00:47:19,080 I can now use GitHub Classroom. 943 00:47:19,080 --> 00:47:22,500 So to sign in, I can go to classroom.github.com. 944 00:47:22,500 --> 00:47:24,810 You will see something a bit like this. 945 00:47:24,810 --> 00:47:27,720 You could sign in with your GitHub username 946 00:47:27,720 --> 00:47:32,340 and get started with actually turning your organization into a Classroom 947 00:47:32,340 --> 00:47:37,060 and your repositories into assignments, if that makes sense. 948 00:47:37,060 --> 00:47:39,008 So it'll first ask you to connect. 949 00:47:39,008 --> 00:47:40,300 You'll see something like this. 950 00:47:40,300 --> 00:47:41,850 You can click Accept if you'd like. 951 00:47:41,850 --> 00:47:46,470 And you'll then see the UI to create your own Classroom from that 952 00:47:46,470 --> 00:47:48,370 organization you created earlier. 953 00:47:48,370 --> 00:47:51,300 So you click here-- say, New Classroom. 954 00:47:51,300 --> 00:47:55,060 And once you're there, you could choose the organization you created. 955 00:47:55,060 --> 00:47:59,790 So here, I had originally created cs50-educator-workshop-23. 956 00:47:59,790 --> 00:48:06,510 I can choose this now and decide to make that into a GitHub Classroom of my own. 957 00:48:06,510 --> 00:48:08,947 Once I do that, I can give it an official name. 958 00:48:08,947 --> 00:48:11,280 Here, I'll call it the same thing or slightly different, 959 00:48:11,280 --> 00:48:14,160 educator-workshop-classroom, and I can create it. 960 00:48:14,160 --> 00:48:17,340 So I'll now be able to add people as teachers 961 00:48:17,340 --> 00:48:19,200 who also have GitHub usernames. 962 00:48:19,200 --> 00:48:20,610 I'll skip that for now. 963 00:48:20,610 --> 00:48:23,430 I could also add students manually if I wanted to, 964 00:48:23,430 --> 00:48:26,290 but I'll also skip that for now. 965 00:48:26,290 --> 00:48:29,340 So now I have my very own GitHub Classroom 966 00:48:29,340 --> 00:48:32,400 that I created from my organization. 967 00:48:32,400 --> 00:48:34,290 And then I can add an assignment. 968 00:48:34,290 --> 00:48:38,610 I can say, let me go ahead and create an assignment in this Classroom. 969 00:48:38,610 --> 00:48:42,180 Well, as we said before, what is an assignment? 970 00:48:42,180 --> 00:48:45,370 It is a repository in our organization. 971 00:48:45,370 --> 00:48:48,090 So I'll say Create an assignment down here. 972 00:48:48,090 --> 00:48:52,260 And I'll then be able to choose some settings here. 973 00:48:52,260 --> 00:48:56,400 I'll give it a title, give it a deadline if I'd like, set the visibility, 974 00:48:56,400 --> 00:48:58,530 which you often keep to Private, and we don't 975 00:48:58,530 --> 00:49:00,870 tend to grant students admin access to their repository. 976 00:49:00,870 --> 00:49:05,490 We can then, most importantly, set the template repository. 977 00:49:05,490 --> 00:49:07,320 So here, the repository I created earlier 978 00:49:07,320 --> 00:49:11,010 was called "hello" inside my own organization. 979 00:49:11,010 --> 00:49:15,030 I want this repository to be the base of my assignment, the code 980 00:49:15,030 --> 00:49:18,310 to actually give to students as part of this assignment. 981 00:49:18,310 --> 00:49:20,800 So this is where I configure that now here. 982 00:49:20,800 --> 00:49:24,600 I could also, if I wanted to, choose to use Codespaces 983 00:49:24,600 --> 00:49:28,480 as the editor of this assignment right here. 984 00:49:28,480 --> 00:49:33,100 And once I do that, I can also choose ways to give feedback to students. 985 00:49:33,100 --> 00:49:38,040 But for now, let me pause and ask for questions on any of this. 986 00:49:38,040 --> 00:49:39,720 Any clarifying questions so far. 987 00:49:39,720 --> 00:49:45,030 988 00:49:45,030 --> 00:49:45,590 OK. 989 00:49:45,590 --> 00:49:47,210 Yeah, question from the chat, Andrew. 990 00:49:47,210 --> 00:49:48,543 ANDREW HOLMES: Yeah, I have one. 991 00:49:48,543 --> 00:49:51,890 So the question is, "Can you reuse the organization next year 992 00:49:51,890 --> 00:49:53,960 for a new [? cluster, ?] like organization 993 00:49:53,960 --> 00:49:56,493 is the template of the Classroom with a group of students?" 994 00:49:56,493 --> 00:49:57,660 CARTER ZENKE: Good question. 995 00:49:57,660 --> 00:50:01,760 So can you reuse your Classroom year over year over time? 996 00:50:01,760 --> 00:50:02,630 You can. 997 00:50:02,630 --> 00:50:06,170 I think our suggestion is tending to recreate it for every new class 998 00:50:06,170 --> 00:50:09,470 you have because, as you'll see, you'll have students 999 00:50:09,470 --> 00:50:11,840 who submit work in your current class-- 1000 00:50:11,840 --> 00:50:15,320 their work will still show up if it's in a future year. 1001 00:50:15,320 --> 00:50:20,060 So best to recreate your organization and your Classroom year over year, 1002 00:50:20,060 --> 00:50:23,190 semester over semester, whatever you'd like. 1003 00:50:23,190 --> 00:50:24,830 Go ahead. 1004 00:50:24,830 --> 00:50:26,270 OK. 1005 00:50:26,270 --> 00:50:30,530 So here, you can see we have now created the assignment. 1006 00:50:30,530 --> 00:50:31,987 If you were following along-- 1007 00:50:31,987 --> 00:50:35,070 although this is going very fast, you could see something a bit like this. 1008 00:50:35,070 --> 00:50:38,180 And now the main part is the magic that happens 1009 00:50:38,180 --> 00:50:41,810 is you can use this invitation link to give to students, 1010 00:50:41,810 --> 00:50:46,610 and they'll be able to see your assignment, see it in Codespaces, 1011 00:50:46,610 --> 00:50:50,130 and be able to work on it in Codespaces as well. 1012 00:50:50,130 --> 00:50:54,380 So the reason we did those steps was to get this link right down here 1013 00:50:54,380 --> 00:50:56,090 we can give to students. 1014 00:50:56,090 --> 00:51:00,650 And they'll then be able to see your code that you added to your repository 1015 00:51:00,650 --> 00:51:05,480 as part of an assignment and work on that assignment in Codespaces. 1016 00:51:05,480 --> 00:51:09,290 So now, as a student, let's say you have this invitation 1017 00:51:09,290 --> 00:51:10,610 link your teacher gave you. 1018 00:51:10,610 --> 00:51:13,700 You could simply copy and paste it into your URL bar, 1019 00:51:13,700 --> 00:51:16,940 and you then see something like this, accept the assignment 1020 00:51:16,940 --> 00:51:18,980 that we had called "hello," right? 1021 00:51:18,980 --> 00:51:23,040 We could then say, OK, as a student, I want to accept this assignment. 1022 00:51:23,040 --> 00:51:27,240 I want to work on it in Codespaces in GitHub Classroom. 1023 00:51:27,240 --> 00:51:29,760 Now, it'll take a minute to configure. 1024 00:51:29,760 --> 00:51:33,070 I can then refresh the page, and I'll see I'm ready to go. 1025 00:51:33,070 --> 00:51:38,580 Now I have my very own GitHub repository that I will be working on, 1026 00:51:38,580 --> 00:51:41,400 my own personal one as a student. 1027 00:51:41,400 --> 00:51:44,460 And in more technical terms, I've cloned this repository. 1028 00:51:44,460 --> 00:51:48,690 I've taken the code inside of it and put it into my own repository 1029 00:51:48,690 --> 00:51:52,810 to work on as a student, again, on my own. 1030 00:51:52,810 --> 00:51:56,220 So now if I go to this link, I can then see 1031 00:51:56,220 --> 00:51:59,430 I have the very same code that me as a teacher 1032 00:51:59,430 --> 00:52:01,620 originally put in that repository. 1033 00:52:01,620 --> 00:52:04,350 But now as a student, I could click up top. 1034 00:52:04,350 --> 00:52:06,000 I could say Code. 1035 00:52:06,000 --> 00:52:09,570 Let me actually work on this in Codespaces. 1036 00:52:09,570 --> 00:52:12,690 So let me say Code, Create codespace on main. 1037 00:52:12,690 --> 00:52:15,270 I'll go through that same step Rongxin showed us earlier, 1038 00:52:15,270 --> 00:52:16,650 building up my codespace. 1039 00:52:16,650 --> 00:52:20,790 And finally, I'll see that code in Codespaces itself. 1040 00:52:20,790 --> 00:52:25,200 As a student now, I can work on it, modify it, say, I 1041 00:52:25,200 --> 00:52:29,410 want to print "Hello, world," and then push those changes. 1042 00:52:29,410 --> 00:52:31,830 I'll then see them in my repository. 1043 00:52:31,830 --> 00:52:35,160 And as a teacher, I'll be able to actually see, at first, 1044 00:52:35,160 --> 00:52:36,780 Carter submitted nothing. 1045 00:52:36,780 --> 00:52:39,270 But as soon as he pushed to that template repository, 1046 00:52:39,270 --> 00:52:42,670 I now see that he submitted some work. 1047 00:52:42,670 --> 00:52:47,430 So again, this is kind of one way of using Codespaces to manage 1048 00:52:47,430 --> 00:52:50,220 your Classroom to see student progress. 1049 00:52:50,220 --> 00:52:51,480 But it's not the only way. 1050 00:52:51,480 --> 00:52:54,030 It's only one tool in your toolkit. 1051 00:52:54,030 --> 00:52:57,660 So let me pause here and ask again-- 1052 00:52:57,660 --> 00:53:01,680 questions on this, this process, how it works, 1053 00:53:01,680 --> 00:53:04,350 or how anything that we've done with it ourselves? 1054 00:53:04,350 --> 00:53:05,700 Yeah. 1055 00:53:05,700 --> 00:53:07,830 AUDIENCE: I tried GitHub Classroom this year, 1056 00:53:07,830 --> 00:53:13,158 but testing submitted work takes a lot of time, actually. 1057 00:53:13,158 --> 00:53:13,950 CARTER ZENKE: Yeah. 1058 00:53:13,950 --> 00:53:16,178 AUDIENCE: Are you familiar with this problem? 1059 00:53:16,178 --> 00:53:19,470 CARTER ZENKE: Yeah, and can I ask you-- so the question for the microphone here 1060 00:53:19,470 --> 00:53:22,530 was, it takes a lot of time to test submitted work. 1061 00:53:22,530 --> 00:53:24,617 Like, let's say, for example, I want to see, 1062 00:53:24,617 --> 00:53:26,700 did Carter submit the assignment correctly, right? 1063 00:53:26,700 --> 00:53:28,233 Was the code correct or was it not? 1064 00:53:28,233 --> 00:53:30,150 And it can be kind of tough to configure that. 1065 00:53:30,150 --> 00:53:34,920 Can I ask you what you tried first before I share what we've done? 1066 00:53:34,920 --> 00:53:41,440 AUDIENCE: No, I just made the project and sent the link. 1067 00:53:41,440 --> 00:53:52,635 And if there is more than 10 tests, it takes a minute or two or even three 1068 00:53:52,635 --> 00:53:54,203 to test that it works. 1069 00:53:54,203 --> 00:53:57,370 CARTER ZENKE: And I think that's kind of the thing with the microphone here. 1070 00:53:57,370 --> 00:54:00,180 So the reality is if you have maybe 10 or more tests, 1071 00:54:00,180 --> 00:54:02,550 it can take a long time for those tests to run 1072 00:54:02,550 --> 00:54:04,350 to ensure that student code is correct. 1073 00:54:04,350 --> 00:54:06,600 I think sometimes the reality here is like we're 1074 00:54:06,600 --> 00:54:08,940 on some virtual machine that is in the cloud somewhere, 1075 00:54:08,940 --> 00:54:10,900 and that's just how long it takes. 1076 00:54:10,900 --> 00:54:13,538 If you've done some own custom configuration with check50 1077 00:54:13,538 --> 00:54:14,580 that if you want to use-- 1078 00:54:14,580 --> 00:54:16,875 I'll have Rongxin probably talk more about that. 1079 00:54:16,875 --> 00:54:19,500 But I don't know if we have much of a solution to that problem, 1080 00:54:19,500 --> 00:54:20,880 unfortunately. 1081 00:54:20,880 --> 00:54:22,020 A good question, though. 1082 00:54:22,020 --> 00:54:23,040 Yeah. 1083 00:54:23,040 --> 00:54:24,870 Yeah, Bruce. 1084 00:54:24,870 --> 00:54:27,690 BRUCE: There's a tool that GitHub offers, 1085 00:54:27,690 --> 00:54:33,060 GitHub Classroom client, where you can download all the repositories down 1086 00:54:33,060 --> 00:54:36,627 to your instructor machine to go over and review them as well. 1087 00:54:36,627 --> 00:54:37,710 CARTER ZENKE: Interesting. 1088 00:54:37,710 --> 00:54:41,310 Yeah, so again for the microphone, there is currently 1089 00:54:41,310 --> 00:54:45,240 a supported version of a GitHub Classroom desktop application that 1090 00:54:45,240 --> 00:54:48,660 will let you take all of your students' submissions to an assignment 1091 00:54:48,660 --> 00:54:51,690 and download them so you can see them on your own local machine, 1092 00:54:51,690 --> 00:54:54,660 perhaps run tests there if you'd like to. 1093 00:54:54,660 --> 00:54:59,070 I believe, based on what I've heard from GitHub, that is being deprecated soon. 1094 00:54:59,070 --> 00:55:02,740 But they are making a new command-line interface that'll be the same thing. 1095 00:55:02,740 --> 00:55:05,010 So they are improving it over time. 1096 00:55:05,010 --> 00:55:05,790 Yeah. 1097 00:55:05,790 --> 00:55:07,710 AUDIENCE: [INAUDIBLE] 1098 00:55:07,710 --> 00:55:08,670 CARTER ZENKE: OK. 1099 00:55:08,670 --> 00:55:11,305 So I believe this is about it for GitHub Classroom. 1100 00:55:11,305 --> 00:55:13,930 Please feel free to let me know if you have any more questions, 1101 00:55:13,930 --> 00:55:16,220 but I'll turn it back over to Rongxin and to David 1102 00:55:16,220 --> 00:55:18,720 to talk about our new tools that go along with many of these 1103 00:55:18,720 --> 00:55:20,488 we've discussed before. 1104 00:55:20,488 --> 00:55:21,780 DAVID MALAN: Thank you, Carter. 1105 00:55:21,780 --> 00:55:25,030 So goal here is a high-level overview and then a low-level overview, 1106 00:55:25,030 --> 00:55:29,380 and so here is what the team has wonderfully been working on thus far. 1107 00:55:29,380 --> 00:55:34,487 For the past two-plus years, we've had a rubber duck debugger in virtual form. 1108 00:55:34,487 --> 00:55:37,570 You might recall your own rubber ducks that you got the other day that you 1109 00:55:37,570 --> 00:55:39,153 might even already have had back home. 1110 00:55:39,153 --> 00:55:41,320 And the goal of those rubber ducks, if unfamiliar, 1111 00:55:41,320 --> 00:55:44,530 is to have this inanimate object on a student's desk with whom 1112 00:55:44,530 --> 00:55:48,570 or to whom they can talk, the idea being that as they explain some bug 1113 00:55:48,570 --> 00:55:51,820 they're having, some confusion they're having, that proverbial light bulb goes 1114 00:55:51,820 --> 00:55:55,540 off because they hear in their own words exactly what kind of confusion 1115 00:55:55,540 --> 00:55:56,570 they're experiencing. 1116 00:55:56,570 --> 00:55:59,020 And so we implemented this some time ago in the form 1117 00:55:59,020 --> 00:56:01,360 of a chat window that looks a little something like this 1118 00:56:01,360 --> 00:56:04,840 in VS Code, where students can message this duck debugger. 1119 00:56:04,840 --> 00:56:08,200 It's a pun on the GNU DeBugger, GDB. 1120 00:56:08,200 --> 00:56:09,880 We have DDB. 1121 00:56:09,880 --> 00:56:12,070 However, for multiple years, all the duck 1122 00:56:12,070 --> 00:56:14,260 would do when a student asked a question like this-- 1123 00:56:14,260 --> 00:56:16,450 "I'm hoping you can help me solve a problem"-- 1124 00:56:16,450 --> 00:56:20,330 the duck would only quack once, twice, or three times. 1125 00:56:20,330 --> 00:56:22,030 So it, too, was fairly inanimate. 1126 00:56:22,030 --> 00:56:26,690 However, as of 2023, I'm happy to say that Rongxin and team have 1127 00:56:26,690 --> 00:56:31,520 been bringing this duck to life in the context of GPT, 1128 00:56:31,520 --> 00:56:34,700 in the context of large language models, and in the context specifically 1129 00:56:34,700 --> 00:56:38,690 of the ChatGPT, this is now possible, it would so seem. 1130 00:56:38,690 --> 00:56:40,700 This, of course, over the past six-plus months 1131 00:56:40,700 --> 00:56:45,050 has created quite a few concerns among academics in terms of academic honesty. 1132 00:56:45,050 --> 00:56:48,380 What do tools like ChatGPT, GitHub, Copilot, 1133 00:56:48,380 --> 00:56:50,510 the new Bing, the experimental version of Google 1134 00:56:50,510 --> 00:56:54,410 actually mean for academic honesty, or, conversely, plagiarism? 1135 00:56:54,410 --> 00:56:57,950 And I would offer, as we discussed or as I proposed yesterday, 1136 00:56:57,950 --> 00:57:02,480 that we actually view this as quite potentially positive for education. 1137 00:57:02,480 --> 00:57:04,400 There's absolutely those downsides of students 1138 00:57:04,400 --> 00:57:07,220 being able to just ask a bot to do their homework for them. 1139 00:57:07,220 --> 00:57:09,470 But again, I dare say that that's always been possible 1140 00:57:09,470 --> 00:57:11,780 where a student could just ask a friend to do that, 1141 00:57:11,780 --> 00:57:14,510 even though it's a little easier now to do it anonymously 1142 00:57:14,510 --> 00:57:16,325 with the computer and not an actual human. 1143 00:57:16,325 --> 00:57:18,200 But with that said, I just wanted to give you 1144 00:57:18,200 --> 00:57:21,110 a sense of how we're thinking about the implication for these tools 1145 00:57:21,110 --> 00:57:25,070 for the fall and how we are trying to respond to them also through software 1146 00:57:25,070 --> 00:57:25,890 solutions. 1147 00:57:25,890 --> 00:57:29,120 So as of now, we suspect that this will be in our syllabus this fall. 1148 00:57:29,120 --> 00:57:31,700 And indeed, it is in CS50's syllabus this summer 1149 00:57:31,700 --> 00:57:35,180 with the 70 or so students who are taking CS50 over these next few weeks. 1150 00:57:35,180 --> 00:57:39,530 "Using AI-based software, such as ChatGPT, GitHub Copilot, the new Bing, 1151 00:57:39,530 --> 00:57:44,030 and others, that suggests or completes answers to questions or lines of code" 1152 00:57:44,030 --> 00:57:45,660 is considered not reasonable. 1153 00:57:45,660 --> 00:57:50,030 So essentially, by policy, we will aspire to prohibit use of these tools. 1154 00:57:50,030 --> 00:57:53,160 Practically speaking, that doesn't stop anyone from using them, of course. 1155 00:57:53,160 --> 00:57:55,430 But we've had a long history in the class of certainly 1156 00:57:55,430 --> 00:57:59,810 having this ingrained in our policy, and we do aspire to detect plagiarism. 1157 00:57:59,810 --> 00:58:02,930 And therefore, we write up students administratively 1158 00:58:02,930 --> 00:58:06,675 for disciplinary processes if they seem to have crossed those lines. 1159 00:58:06,675 --> 00:58:09,800 But this is where we're landing right now, quite simply because these tools 1160 00:58:09,800 --> 00:58:11,210 are just too helpful right now. 1161 00:58:11,210 --> 00:58:14,090 Like, ChatGPT is more than happy to try to give you 1162 00:58:14,090 --> 00:58:16,310 the answer to all of your questions, and that's not 1163 00:58:16,310 --> 00:58:17,910 ideal in an educational context. 1164 00:58:17,910 --> 00:58:20,630 It would be like an overzealous tutor just telling the students 1165 00:58:20,630 --> 00:58:21,930 how to do their homework. 1166 00:58:21,930 --> 00:58:25,610 So this is language we suspect we will have in our syllabus this fall 1167 00:58:25,610 --> 00:58:27,620 and we do currently have this summer. 1168 00:58:27,620 --> 00:58:32,060 "Using CS50's own AI-based software that suggests or completes answers 1169 00:58:32,060 --> 00:58:35,035 to questions or line of code" will be considered reasonable. 1170 00:58:35,035 --> 00:58:37,910 And so I dare say, we're in this fortunate position of being computer 1171 00:58:37,910 --> 00:58:41,700 scientists that we can kind of build layers on top of these tools. 1172 00:58:41,700 --> 00:58:44,900 And that's not a capability available to teachers, for instance, 1173 00:58:44,900 --> 00:58:45,660 in other fields. 1174 00:58:45,660 --> 00:58:48,140 So you and I are sort of in this unique ecosystem 1175 00:58:48,140 --> 00:58:51,503 to try to be at the forefront of finding a happy medium here. 1176 00:58:51,503 --> 00:58:53,420 Of course, you all are welcome, whether you're 1177 00:58:53,420 --> 00:58:55,940 teaching CS50 specifically or even your own classes, 1178 00:58:55,940 --> 00:58:58,050 to use the tools that you're about to see. 1179 00:58:58,050 --> 00:59:01,340 They're definitely attenuated for CS50 specifically. 1180 00:59:01,340 --> 00:59:04,640 But in general, what we're trying to do is put downward pressure 1181 00:59:04,640 --> 00:59:06,590 on just how helpful ChatGPT is. 1182 00:59:06,590 --> 00:59:09,350 So in the context of LLMs, for instance, and using 1183 00:59:09,350 --> 00:59:12,140 these kinds of interactive bots, it's very common 1184 00:59:12,140 --> 00:59:14,120 to provide what are called prompts. 1185 00:59:14,120 --> 00:59:17,120 And you and I, if you've used ChatGPT, have already typed prompts. 1186 00:59:17,120 --> 00:59:20,450 It's essentially the ChatGPT version of your "Google search query," 1187 00:59:20,450 --> 00:59:23,510 but generally writing it in English or some longer form sentence. 1188 00:59:23,510 --> 00:59:25,400 What you can do with a lot of these models, 1189 00:59:25,400 --> 00:59:28,310 though, at least if you're writing software that interacts with them, 1190 00:59:28,310 --> 00:59:31,490 is you can feed it a few English sentences in advance. 1191 00:59:31,490 --> 00:59:35,450 Like, pretend you are a teacher of introductory computer science. 1192 00:59:35,450 --> 00:59:39,450 Do not provide more than two or three lines of code in your answer. 1193 00:59:39,450 --> 00:59:40,983 So students don't have to type that. 1194 00:59:40,983 --> 00:59:42,650 You don't have to ask them to type that. 1195 00:59:42,650 --> 00:59:46,640 We're sort of feeding sentences like that into the model before we then 1196 00:59:46,640 --> 00:59:48,590 append students own questions. 1197 00:59:48,590 --> 00:59:51,920 And so what this means for us concretely is 1198 00:59:51,920 --> 00:59:55,403 that we're trying to employ AI along a few different lines here. 1199 00:59:55,403 --> 00:59:57,320 And I'll give you a quick pedagogical overview 1200 00:59:57,320 --> 01:00:00,620 and turn things over to Rongxin for an actual discussion thereof. 1201 01:00:00,620 --> 01:00:04,820 But 1-- and this exists for already explained highlighted lines of code. 1202 01:00:04,820 --> 01:00:08,730 Students can now in cs50.dev highlight one or more lines of code, 1203 01:00:08,730 --> 01:00:12,290 right-click it, choose an option that's called Explain Highlighted Code. 1204 01:00:12,290 --> 01:00:15,080 And then using ChatGPT-generated English, 1205 01:00:15,080 --> 01:00:18,350 we aspire to explain what that line or those lines of code do, 1206 01:00:18,350 --> 01:00:21,860 so that if students will receive some distribution code from you, if they 1207 01:00:21,860 --> 01:00:24,142 found something online in a reasonable way 1208 01:00:24,142 --> 01:00:26,100 and just want to understand it better, they can 1209 01:00:26,100 --> 01:00:27,930 ask questions of the bot in this way. 1210 01:00:27,930 --> 01:00:31,770 2, advising students on how and why to improve their code style. 1211 01:00:31,770 --> 01:00:34,650 If you've used CS50's tools, like style50, before, we 1212 01:00:34,650 --> 01:00:36,570 had a terminal version window of this that 1213 01:00:36,570 --> 01:00:39,300 tried to show them visually where they should or should not 1214 01:00:39,300 --> 01:00:41,160 put whitespace and other characters. 1215 01:00:41,160 --> 01:00:44,025 We now have, thanks to the team, a graphical version of that 1216 01:00:44,025 --> 01:00:46,320 that not only shows the student, left and right, 1217 01:00:46,320 --> 01:00:47,770 here's what your code looks like. 1218 01:00:47,770 --> 01:00:49,150 Here's what it should look like. 1219 01:00:49,150 --> 01:00:53,010 There's now a button that says "Explain why" that similarly tries 1220 01:00:53,010 --> 01:00:55,410 to help them see what you and I might take for granted 1221 01:00:55,410 --> 01:00:58,410 once we're more comfortable with code that they might not be noticing 1222 01:00:58,410 --> 01:00:59,430 is awry. 1223 01:00:59,430 --> 01:01:04,160 We use that tool for Q&A called Ed that happens to be used in Harvard courses 1224 01:01:04,160 --> 01:01:04,660 as well. 1225 01:01:04,660 --> 01:01:06,577 And we've integrated the same technology there 1226 01:01:06,577 --> 01:01:09,270 to try to answer students' questions automatically. 1227 01:01:09,270 --> 01:01:12,180 4, a work in progress, explaining arcane-- 1228 01:01:12,180 --> 01:01:16,810 that is, cryptic-- error messages and providing hints on how to solve. 1229 01:01:16,810 --> 01:01:19,440 So if you've ever seen the output of Clang, 1230 01:01:19,440 --> 01:01:22,110 if you've ever seen the output of even Python and tracebacks, 1231 01:01:22,110 --> 01:01:26,200 it's fairly nonobvious, certainly to a new student, what some of those words 1232 01:01:26,200 --> 01:01:26,810 even mean. 1233 01:01:26,810 --> 01:01:30,040 So explaining those, translating them, really, into layperson's terms 1234 01:01:30,040 --> 01:01:31,000 is the goal. 1235 01:01:31,000 --> 01:01:34,480 Helping students eventually find bugs in their code via TF 1236 01:01:34,480 --> 01:01:37,780 or teaching assistant-like rhetorical questions-- so not just saying, 1237 01:01:37,780 --> 01:01:39,910 it looks like you're doing x on line 13. 1238 01:01:39,910 --> 01:01:42,910 Do this instead-- to instead draw their attention to it. 1239 01:01:42,910 --> 01:01:45,820 It looks like you're doing something incorrect on line 13. 1240 01:01:45,820 --> 01:01:49,000 Have you considered, dot, dot, dot, like any good teacher might. 1241 01:01:49,000 --> 01:01:53,080 And then longer term, we're hoping to integrate assessment into these tools, 1242 01:01:53,080 --> 01:01:58,240 so actually grading with software, not just correctness with check50, 1243 01:01:58,240 --> 01:02:01,210 style with style50, but design with, shall 1244 01:02:01,210 --> 01:02:05,650 we say, design50, a tool that provides human-like qualitative 1245 01:02:05,650 --> 01:02:07,330 feedback on the quality of code. 1246 01:02:07,330 --> 01:02:10,690 So just because their code looks aesthetically good, 1247 01:02:10,690 --> 01:02:13,480 just because their code works according to the specification-- 1248 01:02:13,480 --> 01:02:17,140 maybe they have a nested, nested, nested, nested for loop, 1249 01:02:17,140 --> 01:02:19,510 and that's probably not the right design. 1250 01:02:19,510 --> 01:02:22,610 There's better ways, more efficient ways, to solve the same problem. 1251 01:02:22,610 --> 01:02:24,520 We hope to point those out to students. 1252 01:02:24,520 --> 01:02:27,550 And then longer term still, my own hope is 1253 01:02:27,550 --> 01:02:30,590 that we can perhaps leverage AI to actually assess students 1254 01:02:30,590 --> 01:02:32,590 at the end of the course, throughout the course, 1255 01:02:32,590 --> 01:02:36,220 in a virtual version of yesteryear's oral exams, 1256 01:02:36,220 --> 01:02:39,070 where we actually have a bot eventually-- not now-- having 1257 01:02:39,070 --> 01:02:42,610 a sort of conversation with students, initially textually, maybe eventually 1258 01:02:42,610 --> 01:02:44,650 verbally, so that we can do the equivalent 1259 01:02:44,650 --> 01:02:49,450 of that one-to-one teacher-student ratio that has and will always escape us 1260 01:02:49,450 --> 01:02:51,730 as long as there's only one of me, one of you, 1261 01:02:51,730 --> 01:02:55,250 and 20 students, 30 students, 300 students instead. 1262 01:02:55,250 --> 01:02:57,610 So allow me to turn things over to Rongxin 1263 01:02:57,610 --> 01:03:01,210 here with one final thought on grades philosophically. 1264 01:03:01,210 --> 01:03:03,332 Right now, we ourselves for our fall class 1265 01:03:03,332 --> 01:03:05,290 for undergrads-- we're actually wrestling with, 1266 01:03:05,290 --> 01:03:10,210 what do these tools mean for grades, not just how we assess, but the numbers 1267 01:03:10,210 --> 01:03:13,960 that we've traditionally come up with for their grades, 1268 01:03:13,960 --> 01:03:16,750 whether they're an A, a B, a C, or whatnot? 1269 01:03:16,750 --> 01:03:19,510 Because what we have seen empirically with CS50 1270 01:03:19,510 --> 01:03:22,870 is that once we release check50, once we release style50, 1271 01:03:22,870 --> 01:03:25,700 grades numerically started going up and up and up. 1272 01:03:25,700 --> 01:03:27,550 And this was actually a good thing, I think, 1273 01:03:27,550 --> 01:03:29,500 because students were getting iterative feedback. 1274 01:03:29,500 --> 01:03:31,450 They were getting feedback before they submitted 1275 01:03:31,450 --> 01:03:32,770 their code that it's not yet right. 1276 01:03:32,770 --> 01:03:33,580 It's not yet right. 1277 01:03:33,580 --> 01:03:36,538 So, of course, if they're putting in the time, by the time they submit, 1278 01:03:36,538 --> 01:03:38,900 it should be right because they have these tools. 1279 01:03:38,900 --> 01:03:41,870 And so our conjecture, if not worry-- but I do think, again, 1280 01:03:41,870 --> 01:03:46,210 this is a good thing-- if we eventually provide them with a design50-like tool, 1281 01:03:46,210 --> 01:03:49,510 where they're getting qualitative feedback like, oh, you can do better, 1282 01:03:49,510 --> 01:03:52,000 or, yes, it works, but you should improve this still, 1283 01:03:52,000 --> 01:03:54,130 much like iterating on an English essay-- 1284 01:03:54,130 --> 01:03:56,650 by the time they submit that work, it kind of 1285 01:03:56,650 --> 01:03:58,840 should be "perfect," at least for those students 1286 01:03:58,840 --> 01:04:00,890 who are engaging to that extent. 1287 01:04:00,890 --> 01:04:03,880 And so I think this is going to call into question exactly what it 1288 01:04:03,880 --> 01:04:05,650 is we're assessing and how we're assessing 1289 01:04:05,650 --> 01:04:09,100 but hence our idea about more conversational assessment 1290 01:04:09,100 --> 01:04:09,940 down the line. 1291 01:04:09,940 --> 01:04:11,065 Is this is a question here? 1292 01:04:11,065 --> 01:04:11,565 No? 1293 01:04:11,565 --> 01:04:12,160 No, all right. 1294 01:04:12,160 --> 01:04:15,832 Well, allow us to turn things over to Rongxin and the real-world demos. 1295 01:04:15,832 --> 01:04:16,790 RONGXIN LIU: All right. 1296 01:04:16,790 --> 01:04:17,950 Thank you, David. 1297 01:04:17,950 --> 01:04:23,080 All right, so to give you all a preview of the tool we've been building, 1298 01:04:23,080 --> 01:04:27,430 so I'm just going to give you the actual demo of what this tool is actually 1299 01:04:27,430 --> 01:04:28,120 doing right now. 1300 01:04:28,120 --> 01:04:31,030 If you all go to cs50.ai right now, you can actually 1301 01:04:31,030 --> 01:04:33,430 try the tool we've been building. 1302 01:04:33,430 --> 01:04:36,445 I'm just going to try here on my end as well. 1303 01:04:36,445 --> 01:04:41,270 1304 01:04:41,270 --> 01:04:42,670 So I'm just going to cs50.ai. 1305 01:04:42,670 --> 01:04:45,640 1306 01:04:45,640 --> 01:04:49,720 As David previously mentioned, we used to have a rubber duck 1307 01:04:49,720 --> 01:04:56,050 debugger built within the VS Code, but it can only say, quack, quack, quack, 1308 01:04:56,050 --> 01:04:57,760 to you. 1309 01:04:57,760 --> 01:05:01,420 But here, we bring the duck to the browser, 1310 01:05:01,420 --> 01:05:05,500 and learner, whoever has a GitHub account, 1311 01:05:05,500 --> 01:05:08,830 can actually chat with this duck right now. 1312 01:05:08,830 --> 01:05:11,800 And just to quickly demo, what you can do with this duck-- 1313 01:05:11,800 --> 01:05:16,510 you can ask basically all CS50 questions and computer science-related question. 1314 01:05:16,510 --> 01:05:20,890 And it is built on top of ChatGPT, but we have our own system message. 1315 01:05:20,890 --> 01:05:26,580 We have our own user prompt to wrap each user message into our own prompt 1316 01:05:26,580 --> 01:05:28,330 to prevent prompt injection attack and all 1317 01:05:28,330 --> 01:05:33,190 that to basically customize a experience as 1318 01:05:33,190 --> 01:05:37,280 if you are talking to a tutor for CS50, something like that. 1319 01:05:37,280 --> 01:05:41,410 So I can ask, "What is Flask," right? 1320 01:05:41,410 --> 01:05:44,830 It's a Python framework, and let's see how the duck respond. 1321 01:05:44,830 --> 01:05:51,400 1322 01:05:51,400 --> 01:05:55,290 So this shows you can ask informational question to the duck, 1323 01:05:55,290 --> 01:05:58,440 and the duck will just give you some definition of a certain framework. 1324 01:05:58,440 --> 01:06:00,840 But some of you might ask, what if our student trying 1325 01:06:00,840 --> 01:06:04,020 to get solution out of the duck, like want the duck to complete 1326 01:06:04,020 --> 01:06:05,110 a homework for you. 1327 01:06:05,110 --> 01:06:11,430 So if I ask, "Can you implement the finance pset for me? 1328 01:06:11,430 --> 01:06:16,470 I'm really stressed out right now. 1329 01:06:16,470 --> 01:06:17,770 Please, please!!!" 1330 01:06:17,770 --> 01:06:18,270 [LAUGHTER] 1331 01:06:18,270 --> 01:06:20,580 Just begging, right? 1332 01:06:20,580 --> 01:06:22,083 So, all right. 1333 01:06:22,083 --> 01:06:23,250 Let's see how the duck says. 1334 01:06:23,250 --> 01:06:24,250 Yeah, the duck is sorry. 1335 01:06:24,250 --> 01:06:26,760 1336 01:06:26,760 --> 01:06:30,060 But, yeah, the duck actually adhering academic honesty right now 1337 01:06:30,060 --> 01:06:33,390 because every answer the duck generated-- 1338 01:06:33,390 --> 01:06:36,580 it adhering academic honesty, so it won't provide solution. 1339 01:06:36,580 --> 01:06:41,700 But it will try to guide the student to implement the finance pset instead. 1340 01:06:41,700 --> 01:06:44,340 Like, basically, instead of showing the code to student, 1341 01:06:44,340 --> 01:06:46,230 it will be more beneficial for the student-- 1342 01:06:46,230 --> 01:06:50,020 what if the duck just guide you step by step? 1343 01:06:50,020 --> 01:07:06,420 So I will just say, "Alright, show me a high level of how I can approach this." 1344 01:07:06,420 --> 01:07:12,780 1345 01:07:12,780 --> 01:07:18,780 So, yeah, now the duck is responding by showing some high-level steps how 1346 01:07:18,780 --> 01:07:20,180 you can implement finance psets. 1347 01:07:20,180 --> 01:07:25,620 1348 01:07:25,620 --> 01:07:29,610 By the way, any audience here want to ask an arcane question to the duck? 1349 01:07:29,610 --> 01:07:39,380 1350 01:07:39,380 --> 01:07:43,520 So, yeah, this is basically what the cs50.ai does right now. 1351 01:07:43,520 --> 01:07:48,440 It actually also offer like some API endpoint 1352 01:07:48,440 --> 01:07:51,320 that power all our other-- like, Explain Highlighted 1353 01:07:51,320 --> 01:07:57,290 Code, Explain style50 Changes to student through these cs50.ai services. 1354 01:07:57,290 --> 01:08:01,680 1355 01:08:01,680 --> 01:08:06,390 So now I'm going to show you what if the student are actually within the VS Code 1356 01:08:06,390 --> 01:08:09,390 and if they want to use this duck debugger. 1357 01:08:09,390 --> 01:08:40,109 1358 01:08:40,109 --> 01:08:42,689 So, yeah, again, the duck debugger is also 1359 01:08:42,689 --> 01:08:45,930 now available within our CS50 codespace. 1360 01:08:45,930 --> 01:08:47,460 It is on the left-hand side. 1361 01:08:47,460 --> 01:08:51,552 If you click on the duck icon, the duck is available there. 1362 01:08:51,552 --> 01:08:53,010 I can ask the same question, right? 1363 01:08:53,010 --> 01:08:54,810 So, "What is Flask?" 1364 01:08:54,810 --> 01:08:57,180 It will also give you an answer right there. 1365 01:08:57,180 --> 01:09:00,550 1366 01:09:00,550 --> 01:09:04,020 But now the cool thing about this duck built into the VS Code 1367 01:09:04,020 --> 01:09:08,010 is that student could also easily interact with the duck 1368 01:09:08,010 --> 01:09:10,319 while working on their homework assignment. 1369 01:09:10,319 --> 01:09:15,029 For example, if I'm working on the finance pset, 1370 01:09:15,029 --> 01:09:19,050 I don't quite understand what this line means. 1371 01:09:19,050 --> 01:09:22,740 What I can do is I can use the plugin we wrote called Explain Highlighted Code. 1372 01:09:22,740 --> 01:09:28,359 Just let the duck explain, OK, what does this code do for me? 1373 01:09:28,359 --> 01:09:30,750 So it will just explain in plain English what 1374 01:09:30,750 --> 01:09:36,149 this code is doing so that you can get your question answered right 1375 01:09:36,149 --> 01:09:36,870 within VS Code. 1376 01:09:36,870 --> 01:09:40,359 You don't need to post on a forum or something 1377 01:09:40,359 --> 01:09:42,819 and then get answer after a few hours later. 1378 01:09:42,819 --> 01:09:45,712 And sometimes, maybe you are working 2:00 AM in the morning, 1379 01:09:45,712 --> 01:09:47,920 and there's no TA available to you, but you can still 1380 01:09:47,920 --> 01:09:50,130 get answer right within your IDE. 1381 01:09:50,130 --> 01:10:00,650 1382 01:10:00,650 --> 01:10:02,750 There's another tool called style50. 1383 01:10:02,750 --> 01:10:08,750 Basically, as I also mentioned yesterday, it offers style feedback. 1384 01:10:08,750 --> 01:10:11,970 For example, if I have a code looks like this-- 1385 01:10:11,970 --> 01:10:14,040 it works, but it looks pretty bad. 1386 01:10:14,040 --> 01:10:15,980 So I can just run style50. 1387 01:10:15,980 --> 01:10:18,830 So style50 will give you visual feedback on how 1388 01:10:18,830 --> 01:10:20,900 you can improve your style of the code. 1389 01:10:20,900 --> 01:10:22,490 But sometimes, it might be confusing. 1390 01:10:22,490 --> 01:10:24,090 Like, what does that actually mean? 1391 01:10:24,090 --> 01:10:27,410 So you can just click Explain Changes and have the duck 1392 01:10:27,410 --> 01:10:30,900 explain what changes had made to you. 1393 01:10:30,900 --> 01:10:32,135 So if you click that-- 1394 01:10:32,135 --> 01:10:37,770 1395 01:10:37,770 --> 01:10:39,370 does it work? 1396 01:10:39,370 --> 01:10:41,042 [? AUDIENCE: ?] No. 1397 01:10:41,042 --> 01:10:42,000 RONGXIN LIU: Live demo. 1398 01:10:42,000 --> 01:10:44,290 [LAUGHTER] 1399 01:10:44,290 --> 01:10:45,510 All right, let me try again. 1400 01:10:45,510 --> 01:10:48,354 [SIDE CONVERSATIONS] 1401 01:10:48,354 --> 01:10:51,680 1402 01:10:51,680 --> 01:10:55,980 Yeah, so the duck will basically explain what's happening to you, 1403 01:10:55,980 --> 01:10:58,940 so as if it's a human TA sitting next to you telling, oh, 1404 01:10:58,940 --> 01:11:00,690 this is what you should make your changes. 1405 01:11:00,690 --> 01:11:03,420 This is what the change means, so that kind of thing. 1406 01:11:03,420 --> 01:11:07,250 So we're still in the progress of iterating how we can further 1407 01:11:07,250 --> 01:11:10,970 incorporating the Explain Highlighted Code via the duck 1408 01:11:10,970 --> 01:11:15,620 so that everything is integrated within the duck debugger. 1409 01:11:15,620 --> 01:11:18,543 1410 01:11:18,543 --> 01:11:21,460 DAVID MALAN: And, Rongxin, I see that there's an Apply Changes button. 1411 01:11:21,460 --> 01:11:23,530 Do we have any statistics on the frequency 1412 01:11:23,530 --> 01:11:26,350 with which the students manually fix the code on the left 1413 01:11:26,350 --> 01:11:27,700 versus just click a button? 1414 01:11:27,700 --> 01:11:28,617 RONGXIN LIU: Oh, yeah. 1415 01:11:28,617 --> 01:11:31,930 So what Apply Changes means-- so style50 gives you the feedback. 1416 01:11:31,930 --> 01:11:35,500 You can manually work on to improve your code 1417 01:11:35,500 --> 01:11:39,280 to match the suggested feedback, right? 1418 01:11:39,280 --> 01:11:45,220 But if I'm lazy, I can just click Apply Changes, and my code is well formatted. 1419 01:11:45,220 --> 01:11:49,780 Statistically, we've been seeing that about 75% of students 1420 01:11:49,780 --> 01:11:53,230 just click Apply Changes, but there's still 25% of students 1421 01:11:53,230 --> 01:11:55,870 out there manually fixing their code, which 1422 01:11:55,870 --> 01:12:00,460 is still encouraging, so given that there's an easier way to do it, 1423 01:12:00,460 --> 01:12:01,210 but yeah. 1424 01:12:01,210 --> 01:12:03,770 1425 01:12:03,770 --> 01:12:04,920 Anything else? 1426 01:12:04,920 --> 01:12:06,950 Any questions so far with the two? 1427 01:12:06,950 --> 01:12:11,510 Any questions about how these things works? 1428 01:12:11,510 --> 01:12:12,290 Yes. 1429 01:12:12,290 --> 01:12:14,270 AUDIENCE: As teachers, do we get any access 1430 01:12:14,270 --> 01:12:16,850 to what the students-- what questions the students 1431 01:12:16,850 --> 01:12:19,970 have asked the duck debugger? 1432 01:12:19,970 --> 01:12:21,680 RONGXIN LIU: That's a good question. 1433 01:12:21,680 --> 01:12:22,660 Right now, no. 1434 01:12:22,660 --> 01:12:24,050 AUDIENCE: Right now. 1435 01:12:24,050 --> 01:12:26,960 RONGXIN LIU: I would say this is more of a privacy issue because-- 1436 01:12:26,960 --> 01:12:27,950 AUDIENCE: [INAUDIBLE] 1437 01:12:27,950 --> 01:12:29,270 RONGXIN LIU: But yeah, no. 1438 01:12:29,270 --> 01:12:35,740 1439 01:12:35,740 --> 01:12:38,300 OK. 1440 01:12:38,300 --> 01:12:41,645 Actually, I think that's the demo so far. 1441 01:12:41,645 --> 01:12:45,640 1442 01:12:45,640 --> 01:12:47,070 so, yeah, we have-- 1443 01:12:47,070 --> 01:12:48,960 goes through all these plugins. 1444 01:12:48,960 --> 01:12:51,900 1445 01:12:51,900 --> 01:12:54,940 So, yeah, that concludes the AI demo. 1446 01:12:54,940 --> 01:12:57,045 So we eventually bring the ducks to life. 1447 01:12:57,045 --> 01:12:58,560 [LAUGHTER] 1448 01:12:58,560 --> 01:13:04,420 We hope to keep iterating and keep improving our tool [INAUDIBLE].. 1449 01:13:04,420 --> 01:13:08,568 And it's an exciting time right now, for sure, so yeah. 1450 01:13:08,568 --> 01:13:09,360 DAVID MALAN: It is. 1451 01:13:09,360 --> 01:13:11,793 And I would offer a thank you to Rongxin and our team 1452 01:13:11,793 --> 01:13:13,710 for spending so much time on this this summer. 1453 01:13:13,710 --> 01:13:15,600 And I would offer, too, really, the silver lining 1454 01:13:15,600 --> 01:13:18,308 of all of this, or the opportunity, is that, especially if you've 1455 01:13:18,308 --> 01:13:22,170 been teaching smaller classes or large classes but just by yourself, 1456 01:13:22,170 --> 01:13:24,990 the corollary of having a one-to-one teacher student ratio 1457 01:13:24,990 --> 01:13:28,838 is that you're about to have as many TAs, in some sense, as you need. 1458 01:13:28,838 --> 01:13:30,630 And it's not going to be perfect initially, 1459 01:13:30,630 --> 01:13:33,547 but I think even from the interactions you hopefully saw from Rongxin, 1460 01:13:33,547 --> 01:13:36,870 I do think it's pretty darn encouraging how we can help students now, 1461 01:13:36,870 --> 01:13:40,670 even when you're the only human teacher in the room. 1462 01:13:40,670 --> 01:13:42,000