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
* 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](img/topic_list_as_list.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 work with your application online at replit
* The basic tools a RoR (Ruby on Rails) developer uses (editor, rails console)

### 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:

* replit.com
* Ruby 3.0.3 or greater
* Rails 7.0.1  (the last two numbers are not important)
* Bundler
* SQLite

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.

Go to replit.com and create a new Rails Project from the Template.
Chose the Templated called "Rails", chose a Title for your project
and then press the blue "+ Create Repl" button.

![Browser window with topic titles that can be voted on](img/replit_rails.png)



Make sure you can see a window label "Shell". In this window
type:

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

Can you see the green "Run" button in the upper middle of the replit screen?
Press it to start your rails application. Open the webview window
in a separate Browser Window or Browser Tab by pressing the arrow.

With this setup you should be ready to edit your code an see the
changes in the webview window.
MARKDOWN


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"
Other Pages

intro-to-rails.step
