Other Pages

Expand All

intro-to-rails.step

message <<-MARKDOWN
### Goal

To teach you Ruby on Rails we are going to use a "Real World"
example. You've decided to create a voting system for you and your
friends to play with. You've decided at a minimum, you'd like to
allow users to:

* view the topics sorted by number of votes
* vote on topics
* create, edit, and destroy topics

You've sketched up an initial screenshot of what you want it to look like:

![Browser window with topic titles that can be voted on, ordered by number of votes](img/finished_app.png)

### Meta-Goal

When you have completed today's goal of getting the basic
application online you should understand:

* Basic Ruby syntax
* How to try your Ruby code (IRB)
* How to go from requirements to a new working Rails application
* How to get your application online
* The basic tools a RoR (Ruby on Rails) developer uses (source control, editor, console, local server)

### Schedule

* 1-ish hour of Ruby
* 4-ish hours of Rails, broken up in 1-ish hour steps

This is just a rough guideline, not a mandate. Some steps you'll go
over and some you'll go under. It'll all work out by the end of the
day. Probably.

### Requirements

We're going to be working with:

* Ruby 2.3 or greater installed via RVM (Mac or Linux) or RailsInstaller (Windows)
* Rails 5.0.x
* Bundler
* SQLite
* The text editor of your choice

Everything should be set up the night before during our
install-fest. Please ensure you have everything working _before_ you
show up for RailsBridge on Saturday.

You can verify that you have everything working by trying this out in your terminal:

<div class="console"><pre>
$ irb
>> 1 + 2
=> 3
>> require "active_support"
=> true
>> exit
$
</pre>
</div>

If you can do that, you are probably good to go.
MARKDOWN

insert 'working_effectively_and_efficiently'

message <<-MARKDOWN
### Format

Each lesson will look like this:

<div style="background: white; border: 1px solid black; padding-left: 4em;">
  <h1 class="doc_title" style="margin-top: 0em;">Step Title</h1>
  <div class="goals">
    <h1>Goal:</h1>
    <p>Description of the current step.
    <p>Red because big goals are important.
  </div>
  <div class="steps">
    <h1>Steps:</h1>
    <pre class="term">steps to take.</pre>
    <div class="console">
      <pre>
def code_to_write
  1 + 1
end</pre>
    </div>
    <p>Yellow because we've gotten it done, but we're not sure yet what's going on.
  </div>
  <div class="explanation">
    <h1>Explanation</h1>
    <p>Details of what the steps actually did, explaining the cause and effect.
    <p>Green because we can tie everything together now.
  </div>
</div>
MARKDOWN

next_step "ruby_language"