4: Implement

Important dates

Mon 7 Nov

Meeting 5: (Modules 3–4) Simulated design meeting for assignment 3. Implementation concerns: selecting tools, languages, platforms, and libraries.

Sun 20 Nov

Assignment 4 due at 23:59: Advanced version control workbook.

Resources

Notes

Assignment

Advanced version control workbook. This activity involves problem-based learning with a version control system, on branching, tagging, merging, release and patch management, etc.

We’ll work with two version control systems: Subversion (representing centralized version control), and Git (representing distributed version control).

Part A: Set up Subversion software

There are many parts to the Subversion system:

To simplify things, we’ll just go with an independent GUI for this activity. Download and install RapidSVN for your platform. It should work equally well on Windows, Mac, or Linux.

Part B: Check out a working copy

Open the RapidSVN application. From the Repository menu, select Checkout. You’ll see a dialog box. You need to provide information in the following fields:

You will be asked for a username and password. I emailed each of you this information. After you authenticate, you should see “Execute: Checkout” in the bottom pane of the RapidSVN window, a bunch of added files, and then “Ready.”

Investigate the new files and folders that were checked out of the repository. At the top level, you’ll see three folders. This is a standard SVN repository layout, and here’s how they are used:

Look inside trunk. You’ll see (at least) two .html files and a sub-folder for images. You can also see exactly these folders and files on your disk using your normal file explorer or finder. (And they’ll be easier to open and edit that way.)

Open trunk/index.html in your web browser, and also in an editor such as Notepad, Wordpad, or TextEdit. In the browser, you should see a sample web page template that says “plain & clean” at the top, and has my name on the right side in the section “Undergraduates”. Click my name to open trunk/league.html, which is my page.

Part C: Commit some changes

Now you are going to create a small page for yourself and commit it to the repository. Start in RapidSVN by selecting league.html in the file list (make sure you’re in the folder trunk) and then choosing Modify → Copy from the menu. It will ask for the destination, and just type your username followed by .html (example: bsimpson.html if your username is bsimpson).

You’ll see a new file in the RapidSVN file pane, and the icon beside it will be red, with a plus sign. Red icons indicates changes in your working copy relative to what is in the repository.

Open up your new HTML file in your text editor. Modify the title to be your name instead of mine (look for <h2 class="title">). Then modify the bio to say something about yourself (look for <div class="entry"> a few lines below). Save the file and open it in your web browser.

When you are satisfied with he look of your page, we will commit it to the repository. Back in RapidSVN, with the new file selected, choose Modify → Commit from the menu. You’ll get a dialog asking for a “log message”. This is a bit of text that you use to describe the change you made. It is kept in the repository so you can browse it later. Just type “added my own page” or something like that, and hit OK.

You should see the commit happen in the bottom pane, where it will report a number for the new revision, such as “Committed revision 6.” (You will need continuous network access for most Subversion operations, which is one of the disadvantages of a centralized model.)

If you get an error message along the lines of “working copy out of date,” it means that someone else committed between when you did the checkout and attempted this commit. So you have to get their latest changes before you can commit your own. Choose Modify → Update to bring down the latest changes from the repository, and then try your commit again.

Once you have committed successfully, choose Modify → Update again, and the value in the “Revision” column for each file should reflect the latest revision that you committed.

We’re going to make and commit one more change, but this time we’ll all be editing the same file, so a conflict is likely. Open index.html in your editor and jump down to the Graduates or Undergraduates sections, around line 90. Add a link to your new page as a list item (<li> tag). It should look like this:

    <li><a href="league.html">Christopher League</a></li>

where league.html should be your filename, and replace my name with yours. This chunk must appear between the <ul> above and the </ul> below. Don’t remove mine or anyone else’s links.

Open index.html again in your browser (or refresh the page) and make sure that your name appears in the right sidebar underneath Graduates or Undergraduates, and that clicking that link takes you to your bio page.

When you’re satisfied, try to commit index.html. This time, it’s possible the commit will fail, if someone else already committed a conflicting change. In that case, do Modify → Update and reopen index.html in your editor. Around the area where you were editing, you may see some “conflict markers,” like this:

  <<<<<<< .mine
    <li><a href="bsimpson.html">Bart Simpson</a></li>
  =======
    <li><a href="lisa.html">Lisa Simpson</a></li>
  >>>>>>> .r8

This shows the conflicting changes. The part between the <<< and === lines is the change you made. The part between === and >>> is the changes others made. It’s your responsibility to resolve the conflict. In most cases, because this is a simple web page, you should just be able to remove the conflict markers (the lines starting with <<<, ===, >>>) and you’ll have everyone’s links intact. Do that and test the page again in your browser.

Once you are satisfied with your fix, mark the conflict as resolved (Modify → Resolve Conflicts in RapidSVN) and try to commit again.

If you didn’t encounter a conflict, maybe you want to create one intentionally, to see what it’s like. Find a friend in the class, and you can both edit the same region of the same file at the same time. (Do this on your own bio page, so it doesn’t affect anyone else who is not participating.) One of you successfully commits first, and the second person will see a conflict when he/she attempts to commit.

To see everyone’s revisions and log messages, select the trunk folder and then choose Query → Log from the menu.

Part D: Merge two branches

Now we’re going to work a little bit with branches. In Subversion, a branch is little more than just a separate folder. Underneath the top-level branches folder, I have created a private branch for each student to play with.

Your branch currently contains a pristine copy of the web site from before everyone was making changes on the trunk. You won’t see your bio page or your link there yet. Instead, let’s make a small change elsewhere, that we know won’t conflict.

Go into branches/USERNAME and open style.css in your text editor. Find the line that starts with #logo a { and look for the color attribute a few lines down. Its current value is #E3564F. Change it to your favorite color, using something like one of these:

    color: blue;
    color: #00f044;
    color: #cc30aa;

Now when you open branches/USERNAME/index.html in your browser, the logo in the upper left should be the color you chose.

Once you are satisfied, commit this change in your own private branch.

Now we’re going to merge the work going on in trunk into your own branch. That should combine the color-change development with the new user pages. Merging in subversion is a somewhat complex process. We have to figure out at what revision your branch diverged from the trunk, and then what revision the trunk is at now.

If you select your branches/USERNAME folder and choose Query → Log, you’ll see the history of revisions. It was r6 where I “created branches for each student.” So revision 6 is our starting point.

Now go back to your trunk folder and look at the largest revision number you see there. You may want to Modify → Update first, in case there’s something even newer. Let’s say this is revision 10. (It will probably be larger than that by the time you read this.)

Select your USERNAME folder underneath branches in the left pane of RapidSVN. Choose Repository → Merge. You’ll see a dialog like this:

Merge dialog

Merge dialog

Hit OK and wait for the merge to occur. If there were no errors, you should see several modified files in branches/USERNAME. These are the changes that have been imported from trunk. You still have to commit them.

Once it is all settled, you should have the full web site from trunk in your personal branch, except that the logo color will be your own choice instead of the original one.

©2011 Christopher League · some rights reserved · CC by-sa