Using Ruby, Rails and Git

Create your account on the server

Ask the instructor to create an account for you on the server. Your username should be the same as your MSU Net ID.

Pair Programming

This class will be using pair programming for its labs. Find a partner to be your pair. Ideally, this person should be at a similar level of technical skill to you. Then pick a computer to use in the room. Remember, for pair programming, two people work at a single computer. Choose one person to work as the ‘driver’ (initially), and the other person should be the navigator. We will change during the lab.

Getting the Lab Computer Set up

Mac OS X

Open the Terminal application, under Applications -> Utilities -> Terminal.

Connect to the server using the ssh command:

$ ssh rwash@webdev.cas.msu.edu

(Replace rwash with your own username on the server.) Enter your password and you will be connected to the server.

Once you have connected, it should print out information and give you a prompt that ends in a dollar sign. This is the command line on the server. We will be doing lots of work on the command line. To test, run the command ls . It should output public_html, the name of the only thing in your home directory.

Windows

There are two programs you need to use on the lab computer. The main program is called “Putty”. It is a Secure Shell (SSH) client. In the labs, it is in the menu under Start -> Program Files -> Putty -> Putty. You can download it for free here: http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html

  1. In the dialog that opens up when you run it, enter the name of the server: webdev.cas.msu.edu
  2. Click connect
    • If you see a security warning, that is OK. Select yes.
  3. Enter your MSU Net ID, which is also your username on the class server
  4. Enter your password

Once you have connected, it should print out information and give you a prompt that ends in a dollar sign. This is the command line on the server. We will be doing lots of work on the command line. To test, run the command ls . It should output public_html, the name of the only thing in your home directory.

Your first rails application

Create a new git repository for the lab

To begin our work, we need to create a new git repository. This repository will store our first rails application in it. To do this, we run the command

$ new_repo lab1

This will create a new repository called <username>/lab1 (where username is replaced with your username). It will also create a new directory called lab1 where you can store files.

Create a rails application

To create a new rails application, at the command line enter the command

$ rails new lab1 

This will generate a number of new files. You can look at the files generated with the command ls lab1. If you look in that directory, you will see a large number of other directories and files. This is a basic rails application.

Notice that we asked rails to create our new application for us in the directory that is already associated with the git repository.

Run the rails application

On the command line, enter the commands:

$ cd lab1
$ rails server --port=1111

(Note, replace 1111 with the last 4 digits of your PID.) This will start your web application running.

You can now verify this by opening a web browser and going to http://webdev.cas.msu.edu:1111 (of course, replace 1111 with the last 4 of your PID).

You can stop the server by hitting Control-C.

Check the code into the git repository

Next, we need to add all of our changes – which were entirely written for us by rails – to the git repository. This involves 3 steps: staging our changes, commiting them to the local repository, and pushing the changes to the main repository. But before we do that, we need to tell git who we are:

$ git config --global user.name "Professor Wash"
$ git config --global user.email "wash@msu.edu"

First, we need to add our changes. To do this, we use the command git add. We can specify individual files to add, but we can also use a shortcut and tell it to add all changes:

 $ git add .

Next, we need to commit these changes to our local version of the repository. No one else will be able to see these changes, but we can still access them:

$ git commit

Finally, if we want to make all of our changes available to others who have permission, we can push the changes to the main central repository

$ git push origin master

(Note, because this is our first push, we have to specify where to push it to: origin master. Future pushes don’t need that.)

Swap pair programming roles

Next, we want to swap roles in our pair programming. The driver will become the new navigator, and the navigator will drive. BUT, before we can do that, we need to give the new person access to the code in the git repository. To do that, we can use the command repo_add_user. Note that only the person who originally created the repository can add new users to it. To do this, use the command:

$ repo_add_user lab1 <username>

Note that you should specify the username of your partner. It should print out the new permissions if it is successful. Now, your partner will have access to your lab1 repository.

Now, switch roles. Close all terminal windows, log out of the computer and hand over control to your partner.

The new driver should ssh into the server using his or her own account. Now, the new driver should get a copy of the repository from the server, and put it in his or her own directory. To do this, we can use the git clone command. Type

$ git clone git@webdev.cas.msu.edu:<username>/lab1

(where <username> is the name of the original driver, since he or she created the repository). This should download a copy of the lab1 code and put it into the lab1 directory. Re-run the server (using rails server, as stated above) and verify that the code still works.

Create a Main Webpage

By default, rails has “welcome” page that is automatically generated and not usually very interesting. To fix this, we will begin by creating a new, static home page for our application. To do that, we need to create a file index.html in the public folder and edit it. To do this, we will use the nano command:

$ nano public/index.html

Now enter in a basic HTML web page. It can be any HTML you want; here is my page:

<h1> Welcome to my web application! </h1>

Now save the file. To save it, hit Control-O, and then hit enter to accept the filename. Then to exit from nano, hit Control-X.

Now click “reload” in your web browser.

Our rails server will only give you web pages if it is running. Since your partner had previously been running the server, it isn’t running anymore. But they stopped that. So you will need to run the server again:

$ rails server --port=1111

In your web browser, click “reload”. Your new web page with your new changes should be there.

Once you are happy with how it looks, you can kill the server with Control-C.

Check in changes

Next, we need to add all of our changes to the git repository. This involves 3 steps: staging our changes, commiting them to the local repository, and pushing the changes to the main repository. But before we do that, we need to tell git who we are, just like our partner did:

$ git config --global user.name "Professor Wash"
$ git config --global user.email "wash@msu.edu"

Now that we are done with our modifications, we need to check the changes into the git repository. First, let’s see what has changed:

$ git status

Now, we can check in all of our changes by adding them to the staging area:

$ git add .

And check in the changes to the local repository

$ git commit

And make the changes available on the server to anyone (including your partner) who has access

$ git push

Download changes from your partner

Swap partners again. The current driver should log out of terminal windows, and hand control of the computer over to the other pair. The original driver should log in. If you look, you’ll notice that the code still looks like it did last time when you logged out; the new change in the index.html file isn’t there.

To get all of the newest changes from the server, you should run the command

$ git pull

This will download all changes from the server, and merge them into your current code.

Exercise

Run the rails server. Make sure that you got the changes from your partner, and that they are visible. Edit the page yourself and make sure those changes appear in the web browser.

References

For those following along at home, you can find all the software we use below: