ervinb/rgns_guide.md

## rgns_guide.md

      
    Raw
  

              rgns_guide.md
            
          
Setup

Official setup | Deploying to Heroku |
Rails app guide
Communication


Sign into this Slack team: railsgirls19.slack.com
Come up with a team name

Installing Rails

Windows


RailsInstaller
Includes Rails, Ruby and Git.


verification:
ruby --version
rails --version
git --version
sqlite3 --version


Tourbleshooting
Issue where the executables aren't found in the PATH (RailsInstaller 3.2)
GitHub issue thread |
SO
 Fix with replacing the Ruby path in `.bat` files in `./RailsInstaller/bin`:
 ```
 In Sublime: Ctrl+Shift+F
   @"C:\Users\emachnic\GitRepos\railsinstaller-windows\stage\Ruby2.2.0\bin\ruby.exe"
 with
   @"%~dp0ruby.exe"
 ```


Babun or Cmder (recommended)


Visual Studio Code (recommended) or Sublime Text


Intro to the Web

HTML

HTML(HyperText Markup Language) markup language to create web pages. A markup language
is a way of annotating a document so that it is distinguishable from text. Originates from
writers who "marked up" documents while reviewing them. (best resource MDN)
Defines the document structure which can be interpreted by the browser in a form of elements
like headers (<h1 />), paragraphs (<p />), links (<a />), images (<img />), etc.

Open up Facebook and change a few elements in browsers code inspector.
Creating a simple static page


copy this snippet into an index.html in your workdir
<!DOCTYPE html>
<html>
  <head>
    <title>RGNS 16</title>
  </head>
  <body>

    <h1>My first HTML page</h1>
    <img src="https://i.imgur.com/m6TIhtA.png" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere eu justo vel vehicula. Proin bibendum molestie nulla non porta. Aenean molestie cursus luctus. Fusce ex nunc, rutrum eget dolor a, tempor tempor sapien. Aenean rutrum </p>

  </body>
 </html>


open the file in the browser by copying its path to the address bar


edit the webpage in the browser (Right click > Inspect element):
<h1 style="color:orange;">My first HTML page</h1>

press Tab once you double click the h1 element to add the style portion
block-level elements (<p>) vs. inline elements (<em>, <strong>) (visible by hovering in the browser element inspector)
HTML attributes: <a href="https://www.google.com" title="You've hovered over me" target="_blank" >Link to Google</a>


change background to
<body style="background-color:#CC2523">


center the image
 <img src="http://www.ubelly.com/wp-content/uploads/2013/04/railsgirls.png" style="display: block; margin-left: auto; margin-right: auto" />


refresh the page so that everything dissapears


intro to CSS and create a CSS file in the workdirectory
CSS (Cascading Style Sheet) is a style sheet language used to alter
the presentation of a document written in a markup language.

create style.css

body {
   background-color:#CC2523;
}

h1 {
   color:orange;
}

img {
   display: block;
   margin-left: auto;
   margin-right: auto
}

remove all style references from index.html and include the stylesheet in the <head>

<link rel="stylesheet" type="text/css" href="style.css" />


Ruby

Rails

Guide
Internals


MVC, a construct describing components by its responsibilities
explain the connection between HTML and Rails (dynamic and static pages)
briefly view the Gemfile and explain what gems are and how our application depends
on these
run the rails command and see the available options

run rails generate without any options and explore the options


Rails scafolding runs a set of generators which sets up CRUD for a model
run scaffolding and migrations for movies

rails generate scaffold movies name:string description:text picture:string
# take a look at the ./bin directory; mention Rake tasks
ruby bin/rake db:migrate

ignore the DB migration for now
touch on routes

ruby bin/rake routes -a

open a new tab in the terminal and leave the scaffolding output intact

Views


V part in MVC, used for displaying the data
explore the view directory; focus on ./layouts/applications.html.erb

justify the need for layouts (code reuse, common parts of the page, navbar)
explain yield, <%= %> (visible, logic) and the purpose of ERB (embedded ruby)
files
take a look at the Bootstrap CSS (cdn)

talk about its purpose: responsiveness, cross-browser compatibility


relationship with the controller
add a navbar to the layout

the <nav> tag on MDN
see the Bootstrap [navbar component](http://getbootstrap.com/
nents/#navbar)


<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">The Movie app</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/movies">Movies</a></li>
      </ul>
    </div>
  </div>
</nav>

briefly mention the assets directory and add the styling for the table

body { padding-top: 100px; }
footer { margin-top: 100px; }
table, td, th { vertical-align: middle; border: none; }
th { border-bottom: 1px solid #DDD; }

[back to the scaffolding output] run through the invoking erb generator to
see the view files; mention the _form.html.erb naming convention, partials

Controllers


C in the MVC pattern; used to orchestrate the communication between views and models
aims to be thin (very little logic); emphasise the single responsibility approach
back to the scaffolding output; see what is generated in the scaffold_controller task
explore the controllers directory and open the movies_controller.rb

make the connection between controller methods and the views which are generated for each action


explain routing

run ruby bin/rake routes and explain the HTTP actions, parameters

switch to the rails server console and see what happens when a page is opened


make the connection between the resource attribute in
./config/route.rb and the displayed routes from the command above
make the default route point to movies by adding root :to => redirect('/movies') to ./config/routes.rb


complete the circle with route -> controller#method > view
back to the movies_controller.rb, dissect each method, point out comments above the methods
see the associated view files and how they display our dynamic data

Models


M in the MVC patter; abstracts the connection to the DB; holds business logic
make the connection between the Movie refernces in index, new, create and the model
back to the scaffolding output, see the active_record task

explain what migrations are; why they're needed; open the migration file and make the connection
between the scaffolding parameters and the creation of table fields in the DB


add a few movies through the app, including a blank one
open ./models/movie.rb and add validation for the name field

validates :name, presence: true
validates :name, length: { minimum: 2 }

fire up rails console and try to save an empty movie

film = Movie.new({})
film.save
film.valid?
film.validate
film.errors
film.update_attribute(:name, "Sedam i po")
film.valid?
film.save

make the connection between the if block in the create method in movies_controller.rb and the validation

add debugger before the if and see what can be see about the object which is created;
explore the params payload and movie_params method


adding a rating field to movies

rails generate migration AddRatingToMovies rating:integer
ruby bin/rake db:migrate

open ./views/movies/_form.html.erb and add

<div>
   <%= f.range_field(:rating, in: 1..100) %>
</div>

saving the movie doesn't store the rating; explain parameter restrictions

stop the exection again with the debugger and see the movie_params and params
add the :rating field to movie_params in movies_controller.rb
try to save again


Ideas: [notify Slack on image uploads, add Bootstrap rating badges based on rating (green > 50, red < 50 )].
Troubleshooting  the ExecJS::ProgramError after bootstrapping the app with scaffold + migrate:
uncomment the rubyracer gem in the Gemfile and run bundle install --path vendor/bundle. Install
NodeJS, restart the shell so that NodeJS is in the PATH, start
the Rails server with bundle exec rails server.
Version control with Git

git config --global user.name "Ime"
git config --global user.email ja@gmail.com
git init .
# commit the files
git add .
git commit -m "Moj prvi komit"
Deploying to Heroku


ngrok sharing between the groups