Skip to content

Instantly share code, notes, and snippets.

@ervinb

ervinb/rgns_guide.md

Last active January 20, 2019 13:40
Show Gist options
  • Save ervinb/179798f8151663f3409bc0fada221e51 to your computer and use it in GitHub Desktop.
Save ervinb/179798f8151663f3409bc0fada221e51 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
rgns_guide.md

rglogo

Setup

Official setup | Deploying to Heroku | Rails app guide

Communication

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.

html-element-basics

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 diagram

  • 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 
<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 [email protected]
git init .
# commit the files
git add .
git commit -m "Moj prvi komit"

Deploying to Heroku

  • ngrok sharing between the groups
@vesic
Copy link

vesic commented Nov 17, 2016

Another localhost port forwarding tool: https://localtunnel.github.io/www/
You need to have node installed.
From my experience it is a bit more reliable.

@rastasheep
Copy link

There is typo at:

sqlite3 --versionthro

should be

sqlite3 --version

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment