Create your first voting app with Sinatra

Created by Piotr Szotkowski, @chastell

We will create a little voting app from scratch using a web development framework for Ruby called Sinatra, which is much like Ruby on Rails. Just another tool to get the job done really, and a fun one too!

Imagine your group of friends is figuring out what to order for your weekly movie watching marathon. With the many fast food options out there, this can become quite a discussion. This is where our app comes into play!

COACH: Explain shortly what Sinatra is.

Install Sinatra

Remember how we needed to install Ruby on Rails? Similarly we need to install Sinatra:

gem install sinatra

Create your first Sinatra app

Create a suffragist.rb file with the following contents:

require 'sinatra'

get '/' do
  'Hello, voter!'
end

You can actually call your Ruby file whatever you’d like. vote.rb for instance would totally work as well, when used consistently. But suffragist actually references to a super important event in the women’s rights movement, so let’s just go with that for now!

Run your app

Go to the directory where you put your app and run ruby suffragist.rb. Now you can visit localhost:4567. You should see a ‘Hello, voter!’ page, which means that the generation of your new app worked correctly. Hit Ctrl+C in the terminal to shut down the server. If Ctrl+C does not work for you it means you are probably Windows user and Ctrl+Z/ Ctrl+Pause / Ctrl+Break will fix the issue)

COACH: Explain POST and GET methods, and how to communicate with the browser.

Add the index view

To keep everything in order let’s make a directory for our views (and name it views).

Put this code into an index.erb file in the views directory:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8' />
    <title>Suffragist</title>
    <link href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css' rel='stylesheet' />
  </head>
  <body class='container'>
    <p>What's for dinner?</p>
    <form action='cast' method='post'>
      <ul class='unstyled'>
        <% Choices.each do |id, text| %>
          <li>
            <label class='radio'>
              <input type='radio' name='vote' value='<%= id %>' id='vote_<%= id %>' />
              <%= text %>
            </label>
          </li>
        <% end %>
      </ul>
      <button type='submit' class='btn btn-primary'>Cast this vote!</button>
    </form>
  </body>
</html>

And into suffragist.rb:

Choices = {
  'HAM' => 'Hamburger',
  'PIZ' => 'Pizza',
  'CUR' => 'Curry',
  'NOO' => 'Noodles',
}

Change the get action:

get '/' do
  erb :index
end

Run ruby suffragist.rb, check your results and shut down the server with Ctrl+C.

COACH: Talk a little about HTML and erb. Explain templates. Explain what global constants are.

Templates

Adjust the index.erb file in the views directory and add the <h1>…</h1> line:

  <body class='container'>
    <h1><%= @title %></h1>
    <p>What's for dinner?</p>

Change the get action:

get '/' do
  @title = 'Welcome to the Suffragist!'
  erb :index
end

COACH: Explain what instance variables are and how Sinatra makes them visible in the views.

Add the ability to POST results

Put this into suffragist.rb:

post '/cast' do
  @title = 'Thanks for casting your vote!'
  @vote  = params['vote']
  erb :cast
end

Create a new file in the views directory, cast.erb, and put there some HTML with embedded Ruby code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8' />
    <title>Suffragist</title>
    <link href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css' rel='stylesheet' />
  </head>
  <body class='container'>
    <h1><%= @title %></h1>
    <p>You cast: <%= Choices[@vote] %></p>
    <p><a href='/results'>See the results!</a></p>
  </body>
</html>

COACH: Explain how POST works. How to catch what was sent in the form? Where do params come from?

Factor out a common layout

Create a layout.erb file in the views directory. Put the following in there:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8' />
    <title>Suffragist</title>
    <link href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css' rel='stylesheet' />
  </head>
  <body class='container'>
    <h1><%= @title %></h1>
    <%= yield %>
  </body>
</html>

Remove the above part from the other two templates (index.erb and cast.erb in the views directory).

COACH: Talk about the structure of HTML documents and how factoring out common code work in general. Explain what yield does.

Add the results route and the results view

Paste the following code into suffragist.rb:

get '/results' do
  @votes = { 'HAM' => 7, 'PIZ' => 5, 'CUR' => 3 }
  erb :results
end

Create a new file in the views directory, called results.erb.

<table class='table table-hover table-striped'>
  <% Choices.each do |id, text| %>
    <tr>
      <th><%= text %></th>
      <td><%= @votes[id] || 0 %>
      <td><%= '#' * (@votes[id] || 0) %></td>
    </tr>
  <% end %>
</table>
<p><a href='/'>Cast more votes!</a></p>

Run ruby suffragist.rb, check your results and shut down the server with Ctrl+C.

COACH: Explain HTML tables and how the missing values from the hash default to zero.

Persist the results using YAML::Store

Time for something new! Let’s store our choices.

Add the following to the top of suffragist.rb:

require 'yaml/store'

Add some more code into suffragist.rb – replace post '/cast' and get '/results' with the following:

post '/cast' do
  @title = 'Thanks for casting your vote!'
  @vote  = params['vote']
  @store = YAML::Store.new 'votes.yml'
  @store.transaction do
    @store['votes'] ||= {}
    @store['votes'][@vote] ||= 0
    @store['votes'][@vote] += 1
  end
  erb :cast
end

get '/results' do
  @title = 'Results so far:'
  @store = YAML::Store.new 'votes.yml'
  @votes = @store.transaction { @store['votes'] }
  erb :results
end

COACH: Explain what YAML is.

See how the YAML file changes when votes are cast

Let’s open votes.yml. And vote. And check again.

COACH: There will be situations when one or more students will forget to shut down the server before running it again. It’s a good opportunity to search the Internet for a solution. They don’t have to know everything about killing processes to find a solution.

COACH: In the end explain shortly the differences between Sinatra and Rails.

Play with the app

Try to change things in the app in any way you see fit: