For class today our goal was to become comfortable with Github and version control. Our first objective -- log into Github. After a couple minutes of "Mr. Chris, wrong password", and me responding with try again, try again. It clicked that something was off, "Oh yeah, sorry. Github required me to use a numeral so the password has a number at the end of it." Finally, we were in, well almost. One laptop logged in, the others all said "Please wait some time, your account was accessed with the wrong password repeatedly, and is now locked." Thinking there is no way we can all do this with just one laptop, let's switch it up. Off to the carpet, or as H. corrected me, "The Multi-Purpose Area" to go over version control in a more visual, engaging way. I handed everyone a piece of paper, and a folder. The paper had some code on it, the couple lines of HTML we were going to be playing around with. The folder was just a normal folder, nothing fancy. I asked L. to play the role of my repository, and she held a folder that said MyFirstWebsite, this is where we all would commit, and push our code! Next to L., sat a folder that had written on it Github. I explained how when someone wants to submit code to the folder, or repository, they would code it all up, write on the folder what it contained, or our commit message, and then push it up to Github. The folder would fly through the air and land on the Github folder, and I would explain that at the Github folder it would ask Github, "Hey, I got this code, and it's suppose to go to this folder called MyFirstWebsite, will you show me the way?" And with that, the folder was then moved over to folder L. was holding, and now put inside L.'s folder. And I explain that is how we would submit code, And by doing that, the version of the code had now changed, to the newer version. We went kid by kid, each adding the piece of paper to their folder, writing a description on the folder, and then the folder flying to meet Github, and then Github sending it to the MyFirstWebsite folder that L. was holding. When we had done all the students, I laid all the folders down on the ground, one in front of the other. This allowed the kids to see the history tree that the code had gone through, starting at one version, and now being on the final version that we just submitted to the repository.
I have got to say, I'm pretty happy that Github locked us out for a bit and we went over to the Multi-Purpose Area to act out the whole process. Because the kids totally were starting to understand what was going on. We have one folder, or repository, that all of us are submitting code too, and working on together. Back to the table, and on the laptops we go.
In groups of two the kids log in, with the right password this time, and the Github gates open, we are in! I tell them to go over to the left side of the screen, and they will see the folder we are looking for, MyFirstWebsite. We all click on it, and then navigate to the folder inside named docs. In there we have a list of HTML files, one for each student, and one called index. I let all the kids know that we are going to be building a website for WEMS, kind of like an information page. We all navigate to the index file and look over it. It has a heading, and a list of about 5 questions with blanks. I tell the first group, you will fill in the first question, and commit your work, and the second group, you will fill in the second question, and submit your work, and so on. And it was at this time that the truely remarkable happened. They all knew they had this one document, that they all would work on together, but on different laptops. J. starts, and fills in the first blank, writes his commit message, and clicks the green button. He is stoked when the site reloads and he sees his work has been written in stone, it is now official. L. and R. are next, they have two blanks they need to take care of in their sentence. They start working on the first blank, the underscores make it tricky, and after a couple minutes J. pipes up and says "Wait, I can just edit that on mine. I'll do it." So he does, filling in the first blank with the word snack. And submits it. I notice that the word isn't suppose to be snack, it's suppose to be snake. The sentence was, "Our class pet is a [blank] and his name is [blank]. Currently in the repository, after the last commit, "Our class pet is a snack, and his name is Candycane." L. and R. had refreshed after J.'s commit, and added Candycane, the name of the class pet snake. When we see this, everyone starts laughing. H/ speaks up and says he can fix it, and goes to change snack to snake. L. and I. filled in the last two questions, and we all submitted. We all refresh, and there are the new changes! We had a couple conflicts, but I told the kids they just needed to refresh, grab the latest version, and they could go and add their changes and commit. I think one of the best parts was when one of the students said "I commited it!" We moved over to our personal HTML files so that we didn't cause conflict drama, and worked on adding some things about ourselves, writing our commit messaging, and clicking the big green commit button. The kids loved seeing the file be updated, it was now an official change to the document, that they had made, they had a commit with their name on it!
This whole process of version control, and Github, and Git, command line vs. using the Web UI, or desktop app can be so overwhelming. I really didn't know what to expect, but I just keep going with it, and repeating myself to try to explain it in a slightly different way. I think what really helped was acting it out visually on the carpet. They could really see that they were adding code to the repository in the way that they would put their piece of paper in the folder, write their commit message on it, and push it up to Github. Were it would finally end up in the MyFirstWebsite folder, and now be updated with their changes. They started to understand how we were making a history of all the changes to the file, and that if we had too, we could just revert back to a commit before if we had made a mistake, like a spelling error. Or, we could fix it on our laptop, and then do another commit that would update the software, and fix the error. My goal was for them to understand the basic idea of version control, and pick up some of the vocabulary words like commit, commit message, push. And I think seeing it in person, with the folders, and then moving to the laptops and doing it for real, having them all make changes to the same file, at the same time really helped to connect the dots. To start next class we will go over our new text editor we will be using, and then clone the class repository. We were around 23 commits I think when we ended, I know that this will become a competition and we will probably have to see how high we can get that number. I wouldn't be surprised if we break 100 commits next Thursday, and from there onto a 1000!
You can go check out our simple little site at http://wems.techemstudios.com! Check back each week to see how we have changed it, and what has been added.