CARTER ZENKE: Hello, everyone.
It's so good to see you for our last session of the workshop, which
is quite a crazy statement here.
Today we'll be going over GitHub Classroom
and teaching CS50 with GitHub Classroom.
GitHub Classroom is a tool for our friends at GitHub Education
that we started building some supports around.
And as David has just said, you can do everything you need with the course
using our own tools, submit [INAUDIBLE] I/O, and so on.
But if you're interested in doing something more advanced,
having more flexibility, more autonomy, you
can certainly use GitHub Classroom for that.
And the plan for today will be to show you
at a high level what is GitHub Classroom, and then going
through a demo of how you could use GitHub Classroom,
and Rong Xin will help us see a student point
of view using GitHub Classroom too.
So GitHub Classroom is, again, based off of GitHub's infrastructure.
And if you want to go see it, you can go to classroom.github.com
to go ahead and see the home page for Classroom.
You're welcome to follow along if you'd like.
And it's important to know that all of what Classroom offers
is really based on GitHub's infrastructure.
So if you're familiar, for example, with having a notion of a Classroom,
we can think of that as simply backing up to a GitHub organization
where a GitHub organization is a collection of repositories.
Now, these repositories in [INAUDIBLE] Classroom
are really just assignments or a repository,
something like some collection of code here.
So every assignment on GitHub Classroom is really just a GitHub repository.
I'll show you some visuals here.
Here's what our classroom looked like in fall of 2021
where we had this organization called GitHub Classroom for CS50.
This was our classroom for the fall course.
And inside that organization, we had several repositories,
one for each assignment.
And what students would do is they would go and accept that assignment
and create their own repository, their own version of the assignment
inside our organization.
So a student might see something like this [INAUDIBLE] assignment,
they would go ahead and see if they're working on DNA,
the distribution code inside a repository
that they could then clone for themselves and submit work to.
So again, all of what we'll talk about today
is based on GitHub's infrastructure using organizations and repositories.
Now, GitHub Classroom offers some UI overlays to this idea of organizations
and repositories.
If you were to log into Classroom and you
were to make your own Classroom using their interface,
you might see something like this.
You would see a list of assignments that you
have created where each assignment is, again, just a template repository,
and you can create that list of assignments
to distribute to students based on those repositories here.
So let's say I've made a birthdays assignment, a caesar assignment,
and a cash assignment, each of those assignments comes with a single link
that I can then share with my students and they can then
use that link to clone that template repository, make their own changes,
and submit that work back to me.
So for example, [INAUDIBLE],, if I send them a link,
they would see "Accept this assignment --
dna".
And once they do, they'll be able to see their own repository
inside my Classroom organization that they can, again, submit work to.
As they work on that assignment, they're able to run
what we call an action workflow.
In this case, we can talk about that as auto-grading.
This action workflow run check50 for us and gives a student back
a score that I can then see in my own classroom.
So let's say a student worked on DNA, they could do an automated commit,
and they could then see that action workflow run
and see how many tests in check50 they have passed.
And then later on, if I want, as a teacher,
to leave feedback on their work, I could use GitHub's pull requests
feature to leave comments on their work in this repository.
So if you're familiar with PRs, I could go ahead and leave a comment like this.
And, "Very nicely done!" for their work on a certain assignment using the pull
request feature on GitHub.
And once I do that, let's say I have a whole collection of students whose work
I want to see, I can go to GitHub Classroom's interface
and see all their scores in one place.
Let me move out of the way here a little bit.
You can see I have Hermione, Harry, and Ron who've all submitted work to me,
and I can see how many tests they passed.
Hermione has 21/21, Harry has 1 out of 21.
And if I wanted to, I could download their grades using a CSV file here.
I could also download all their submissions
in a single zip file using a download repositories feature here.
So this is what GitHub Classroom offers us.
It offers us a chance to create our own assignments,
to distribute them with template repositories,
to have students have their own space in which to work on them,
and to submit that work back to us, we can
leave feedback and see their grades.
So let's actually dive into how we could do a demo of this
in seeing how to build our own GitHub Classroom.
So I will go over to classroom.github.com,
and the link is in the chat here, and the first thing we need to do is sign
in with your GitHub account.
So I'll go ahead and sign in here.
And once I do that, I should see I already have a Classroom open.
But if you'd like to make your own, all we have to do
is click on this New Classroom button up here.
And notice that we prompt it to select an organization for your new Classroom.
So again, GitHub Classroom is based on GitHub's already existing
infrastructure around organizations.
So you'll first make a new organization and you'll then tie that organization
to your GitHub Classroom.
So I have already done this.
But if you want to, you can go ahead and create an organization.
And once you do, you'll be able to create a Classroom to go along with it.
The steps here are simply to create that organization,
name it, type in your email, save it, and then go ahead
and give your classroom a name.
In my case, if I go back here, I decide to call mine "Carter's Demo Classroom".
So once you have that, you can click on this demo here,
and you'll notice that we have some assignments.
I've already created these assignments, but you can also create your own
using this New Assignment button here.
So I can go ahead and create a new assignment,
and let's say I have a template repository that I put some distribution
code into, and I want to share that with my students.
So I'll hit New Assignment, and I'll first give the assignment a name.
In this case, let's say I'm a teacher, and I
want to distribute CS50's cash problem from this most recent fall.
So what I could do is I could say, I want to search for--
actually, I want to give it a name first.
I'll type in "cash" here, and I'll say this is an individual assignment.
I could optionally give this assignment a deadline,
but just note that in GitHub Classroom, once the deadline has passed,
your students can't submit work to that assignment.
So we tend to leave deadlines blank just so we can implement our own lateness
checks here.
I'll keep the repository visibility private
because I only want students themselves to see their own repository,
and we don't tend to grant students admin access to the repository,
they tend not to need it.
So we'll leave this blank and we'll hit Continue here, and what I can then do
is choose some starter code for the student to use.
So at this point, I'd like to show you our own infrastructure for GitHub
Classroom, which is called Classroom 50, and you're
welcome to use this as you use GitHub Classroom.
To see this, I can go to github.com/classroom50,
and you'll see that we've put together a collection of template repositories
full of CS50 distribution code for your students to use here.
So you could choose any of these type of repositories
and distribute them using GitHub Classroom for your students.
So notice how I wanted to use the cash repository here,
I have a public template, which means I can use this
as the basis for this assignment and I can share this with my own students.
So in GitHub Classroom, I'll say Select a repository,
I want to use the 2022 Fall Cache Repository in Classroom 50.
So I'll then go ahead and use classroom50/2022-fall-cash,
and I'll see the repository [INAUDIBLE] here, so I can select it,
and now it is the basis for this assignment.
I can hit Continue, and now I'll be prompted
to set up autograding and feedback.
We have done most of this for you.
There's no need to add autograding tests.
We've already added those through [INAUDIBLE] repositories using check50,
but we can also enable feedback pull requests [INAUDIBLE] where
I can leave comments on student work via a GitHub Classroom's PR feature,
or pull request feature, so I'll check that
and I'll create this new assignment.
[INAUDIBLE] to load, and now notice I can see how many students
have done this assignment so far.
Currently, it's none.
But in a moment, it will just be Rongxin.
So when I get this link here I can use to share with Rong Xin
to accept this assignment, and let me go ahead and share that with Rong Xin now.
And in a moment, we'll see how Rong Xin walks through working
on this assignment as a student.
SPEAKER 2: Can everyone see my screen?
CARTER ZENKE: I think we can.
SPEAKER 2: All right.
So I just got the [INAUDIBLE] sent by [INAUDIBLE] it looks like this,
so I'm just going to visit it.
And I'm being greeted by this Accept the assignment screen, so all I can do
is I can just click Accept this assignment.
So what GitHub is doing right now is trying
to create an assignment repository for this particular problem set
and under Carter's Classroom organization.
So we'll probably just refresh this page, and it's done.
I can just click on this GitHub link, it will bring me
to the assignment repository.
So right now, as you can see, I'm now inside the assignment repository
and I would be able to dive right in by creating a GitHub codespace on it.
Just click Create [? codespace ?] on main,
it will just bring up a codespace for this assignment repository,
and then back over to Ricardo for now.
CARTER ZENKE: Yeah.
So while Rong Xin's codespace boots, I want
to show you just a brief resource we've created for you
here if I can share my screen here.
We've created a resource for you to learn how to make your own custom
assignments using GitHub Classroom and specifically
their template repository feature.
So if I click on this, I should be brought
to a link that shows me how to go through GitHub Classroom
and create my own assignments using GitHub Classroom.
This is a step-by-step walkthrough for you to use.
And certainly don't feel tied to our own assignments,
you're welcome to modify them as you see fit.
We'll find a more long-term home for this in the future, most likely
in our own official documentation, but for now we'll
have it in [INAUDIBLE] here.
And again, this just walks you through creating a blank template repository
if you're unfamiliar with that, going ahead and adding distribution code
to it, and giving it a name.
And also, you are welcome to use our own GitHub action
configurations to reuse autograding using your own check50 checks.
So notice here, for example, you might modify the name of your checks.
Here, I've called mine mario/less tests if I'm
making this mario/less distribution code,
but I could also supply check50_args.
I could say I want to use a certain check50_slug,
maybe it's one I've made myself, and putting that in here
will allow me to run check50 as students submits work as we'll
see Rong Xin do in just a moment.
And this is all configurable using this main.yml
inside the hub repository, which again, this documentation runs you through.
At the very end, you should have a repository that looks a bit like this.
And Rong Xin, are you ready to show us the student view?
SPEAKER 2: Just one moment.
My codespace [INAUDIBLE] as I mentioned earlier,
and the first time student launch in the codespace takes time to pull the image
and extract the image.
CARTER ZENKE: And I'll also just give you
a more long tour of GitHub Classroom.
We can go to Classroom 50 here and we can see a few other repositories
that we have.
So currently, what we've done is we've added all of the assignments
from 2021 fall, but it's our goal to update these as we go through
and update CS50's own assignments.
So we've called them 2022 Fall, symbolized
that these will be the ones in use for teachers this next fall.
But as we have the course this coming fall,
we'll update those for the next year ahead.
Rong Xin has already accepted my assignment,
so here I have this student named rongxinliu-test.
And I can see that at the moment, Rong Xin's latest submission doesn't quite
pass all of the checks, but maybe eventually they will.
And I can go over here and I could download
a CSV of all the grades from my students so far.
I got here simply by going to my Classroom,
clicking on the assignment I distributed to Rong Xin, in this case it was cash,
and then I can see all the students who have accepted this assignment, as well
as all the submissions to this assignment so far.
SPEAKER 2: So I'm ready to reshare my screen in a moment.
So right now, I'm in codespace again, but for this particular assignment
only.
So as you can see, I am now open a cache.c file,
which is the distribution code from the template repository.
My goal is to finish this assignment, of course.
But right now, for the demo purposes, I won't be implementing all of them.
I will just quickly finish this one by doing it incorrectly.
So let's say I finish this particular function,
I just want to submit it, right now what I can do is just quickly
make a push and type in "this is my submission",
and I would just quickly make a push.
OK.
So what it does is actually push the change that I made for this assignment
back to this assignment repository.
And as you can see, it will just trigger the action workflow,
which is run the autograder.
And again, this is my submission that I just made.
If I click on it, you can see that the autograding is running.
It takes time to run the autograding.
Again, it's pulling one of those codespace images
that we define so that we are running the check at the exact same environment
as if a student are working on their problems [INAUDIBLE]..
So what is autograding that is actually it
puts the base image that codespace is running,
but then you run check50 on top of it?
And essentially what it's doing right now.
And once the security checks are finished running,
it will just render the output to GitHub Classroom,
and GitHub Classroom will be able to-- and Carter
will be able to see what my grades are for this submission,
for this particular submission.
CARTER ZENKE: Yeah.
Rong Xin, while this runs, you mind if I show what it looks like on my end?
SPEAKER 2: Sounds good.
CARTER ZENKE: So here I am back in my assignment for cash.
I see Rong Xin has accepted this assignment
and is presently working on it.
What I could do is I could click on this commit button here
to see Rong Xin's updates to this assignment.
So I'll click on this commit, and I'll see
that Rong Xin has indeed one attempt at this problem so far.
I could also go to Rong Xin's repository here.
I could say cash-rongxinliu-test, and so I could see all of Rong Xin's progress
by clicking on his assignment here, and now I
can see that he's indeed returned since over 250.
Now, if I wanted to leave Rong Xin some feedback, what I could do
is simply click on the pull requests tab and go to this feedback pull request.
By clicking on this and choosing Files changed,
I can see the updates Rong Xin has made.
So I can see that he modified particularly this line here, 47.
And for the comment, I can use the very same GitHub UI.
I could click on this, and I could say "Maybe think about
how this math will work out.
Try thinking of an example with $0.25.
Do you get back one quarter?"
So I could leave that comment, and I could add a single comment.
And now, the next time Rong Xin goes to that feedback PR,
he'll be able to see that comment on his own work.
And once Rong Xin's tests are finished, I
should be able to see an updated score for Rong Xin, which in the end
will probably still be this number of checks out of 14.
So we won't see too many changes here, but Rong Xin,
is yours finished running in a way that we can see it?
SPEAKER 2: Sure, let me reshare my screen.
By the way, I can see Carter's comment now
and I can reply to it, but not right now.
Since I did not correctly solve the problems,
of course I failed all the grading, but I would be able to click on it
and see what check I'm failing.
This is all the check50 chat we already implemented,
but this is now rendering on GitHub's action workflow.
So as you can see, it tells me I did not return [INAUDIBLE] the number of cents,
I did not proactively [INAUDIBLE] negative input, that kind of thing.
So I would be able to get feedback from this action workflow result
and for this particular submission.
I can keep resubmitting until I probably solve the problem,
but this is the feedback that student would get from this autograder,
and I was awarded 2 out of 14 point, probably
because some of the [INAUDIBLE],, probably because my test compiles,
and so I passed all those checks, but I did not pass the remaining checks.
CARTER ZENKE: Yeah.
Thank you for sharing, Rong Xin.
So that is the student view of things.
And to close us out, just to make sure you have access to all the features
that GitHub Classroom offers, I encourage
you to go to-- if you're in GitHub Classroom, go to the Settings tab
over here, and you should see an option to verify your status as a teacher.
So through GitHub's Global Education campus,
you're able to receive the codespaces feature for your own students.
If you click Get Verified here, you can go through GitHub's process
to receive the features that Rong Xin and I have just gone through here.
But overall, this was our tour of GitHub Classroom.
Again, all of our tools we've previously seen so far, code, [INAUDIBLE],,
submit50, check50, and so on, you can all
use with teaching your [INAUDIBLE] Classroom.
But if you'd like more autonomy, more flexibility, and so on,
get a Classroom as one option for you.
So we just wanted to show this to you all today,
and we'll pause here and take a few questions.