Skip to content

Backend Training

Jump to bottom
ilung edited this page Nov 28, 2017 · 77 revisions

Project Setup

Step 1 - Clone Rails Starter Template and create a new project

🔖 : Rails Starter Template

Follow the instructions and set up a new project with the rails-starter-template.

Step 2 - Setup Overcommit

🔖 : Overcommit

Overcommit help you check your code against linters when you try to commit to ensuring that it meets all the coding standards.

(Optional) For First Timers - Skip this step if you used Rubocop or Overcommit on your machine before

If you have never used overcommit or Rubocop, please install it first. Rubocop is the ruby community standard for coding guidelines. For more info, please visit the official repositories:

$ gem install rubocop
$ gem install overcommit

Installation

# Install gems required for overcommit at .overcommit_gems
$ bundle install --gemfile=.overcommit_gems.rb
# Make overcommit executable inside your project directory
$ chmod +x bin/setup_overcommit
# Execute Overcommit
$ overcommit --install

Frontend Setup

Usually, when you are assigned to set up the backend of a project, you will be provided with a low/high fidelity mockup. Then you will use this as the guideline to setup up the controller, models, and views for the frontend developer.

The frontend framework we use is Bootstrap. We are currently on Bootstrap 3.3 and is subjected to upgrade to Bootstrap 4 when it becomes stable. For Rails compatible bootstrap gem it is located inside your Gemfile gem 'bootstrap-sass'. If you would like to browse the source code please see official repositories.

Step 1 - Create Static Pages

🔖 : Rails Generators

# Create home controller resources
$ rails g controller home

Step 2 - Setup Controller Actions & Routes

🔖 : Slim, Layout

From the mockup, we see that we have these static pages

  • Home
  • Pricing

Create the associated controller actions

# app/controllers/home_controller.rb
class HomeController < ApplicationController

  def index; end

  def pricing; end

end

Create the associated view templates

Inside project directory create the following files

# app/views/home/index.slim
h1 Hello World!
# app/views/home/pricing.slim

Add the routes

Rails.application.routes.draw do
  # ....

  # route to home#pricing
  get '/pricing' => 'home#pricing', as: :pricing
  
  # add a root for the project
  root 'home#index'
end

Run the following command to see the routes

$ rails routes
      pricing GET        /pricing(.:format)                        home#pricing
         root GET        /                                         home#index

Start the server and you should see Hello World!

$ rails s

Step 3 - Create The Layout

🔖 : Layout, Partial, Bootstrap 3.3, Overcommit, Draper, RSpec

In the prototype, the following components are used across the entire site so let's create them using bootstrap components.

  • navbar(doc)
  • footer

Create the following files

/ app/views/components/_navbar.slim
nav.navbar.navbar-default
  .container-fluid
    .navbar-header
      button.navbar-toggle.collapsed[type="button" data-toggle="collapse" data-target="#main-nav" aria-expanded="false"]
        span.sr-only
          | Toggle navigation
        span.icon-bar
        span.icon-bar
        span.icon-bar
      a.navbar-brand[href="#"]
        | Logo
    .collapse.navbar-collapse[id='main-nav']
      ul.nav.navbar-nav.navbar-right
        li= link_to 'home', root_path
        li= link_to 'about', '#about'
        li.dropdown
          a.dropdown-toggle[href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"]
            | pricing
            span.caret
          ul.dropdown-menu
            li= link_to 'Basic Package', pricing_path
            li= link_to 'Advanced Package', pricing_path
/ app/views/components/_footer.slim
footer
  .container
    .row
      .col-md-12.text-center
        h6 2017 © Clever Banana Studios Inc. All Rights Reserved.

Add these two components to the layout file

/ app/views/layouts/application.slim
doctype html
html
  head
    / ...
  body[class=rails_route]
    = render 'components/navbar'
    = yield
    = render 'components/footer'

Refresh the browser Command ⌘+r and you should see the added components.

Commit your changes

$ git add -A 
$ git commit -m 'Setup layout components'
Errors on modified lines:
/Users/ilunglee/Work/rails/mock_project/app/decorators/home_decorator.rb:1:1: C: Style/Documentation: Missing top-level class documentation comment.
/Users/ilunglee/Work/rails/mock_project/app/decorators/home_decorator.rb:2:1: C: Layout/EmptyLinesAroundClassBody: Empty line missing at class body beginning.
/Users/ilunglee/Work/rails/mock_project/spec/controllers/home_controller_spec.rb:4:1: C: Layout/EmptyLinesAroundBlockBody: Extra empty line detected at block body beginning.

Oops... seems like overcommit found some errors. Let's go ahead a fix them

We don't need the following files since draper decorators decorate database models and home is not a database model so let's go ahead remove

  • app/decorators/home_decorator.rb
  • spec/decorators/home_decorator_spec.rb

The following files temporary by adding pending "add some examples to (or delete) #{__FILE__}". This is to remind us to come back to fix this file later on.

# spec/controllers/home_controller_spec.rb
RSpec.describe HomeController, type: :controller do
  pending "add some examples to (or delete) #{__FILE__}"
end

Run RSpec to ensure it's working

$ rspec spec
**

Pending: (Failures listed here are expected and do not affect your suite's status)

  1) HomeController Add specs for HomeController
     # Not yet implemented
     # ./spec/controllers/home_controller_spec.rb:4

  2) AdminUser add some examples to (or delete) /Users/ilunglee/Work/rails/mock_project/spec/models/admin_user_spec.rb
     # Not yet implemented
     # ./spec/models/admin_user_spec.rb:4


Finished in 0.07866 seconds (files took 5.67 seconds to load)
2 examples, 0 failures, 2 pending

Commit your code again to continue to next step. You should be able to pass the overcommit hooks this time.

$ git add -A 
$ git commit -m 'Setup layout components'

Home

Backend Training

Clone this wiki locally