Rails Workshop

24.01.2014, 14:00 - 18:00
Uni Augsburg, Room 2045N

Henning Koch / makandra GmbH

Henning Koch

Alumnus of Uni Augsburg
CTO of makandra GmbH
@triskweline

Kickstart your Skills

Become a full-stack web developer in 9 months

Can be combined with a bachelor's thesis or master's thesis

More info: http://start.makandra.de

Things you can build with Rails

Today

We will learn to build a basic Rails application.

It's called You Look Nice Today.

Please share the paper screens.

Basics

Things we must know to use Rails

  1. OOP
  2. Ruby
  3. Web applications
  4. Relational databases
  5. HTML user interfaces

Basics 1

Ruby

What is Ruby?

  • Object-oriented language
  • Dynamic types
  • Extremely expressive
  • Big in Japan
  • Became popular with Ruby on Rails

Hello world


puts 'Hello world!'
          

Methods


def say_hello(name)
  puts "Hallo, #{name}!"
end
          

say_hello("Uni Augsburg")
          

say_hello "Uni Augsburg"
          

Methods may end in ? or !


number.zero?
bucket.empty?

disk.erase!
nuclear_missile.launch!
          

Conditionals


def say_hello(name)
  if !name.blank?
    puts "Hello, \#{name}!"
  end
end
          

def say_hello(name)
  unless name.blank?
    puts "Hello, \#{name}!"
  end
end
          

def say_hello(name)
  puts "Hello, \#{name}!" unless name.blank?
end
          

Everything is an object


"foobar".length  # returns 6
          

i = 5.25
i.floor  # returns 5
i.ceil   # returns 6
          

"foobar".class        # returns String
"foobar".class.class  # returns Class
          

Arrays


shopping_list = ["Milk", "Toast", "Honey"]
          

shopping_list[1]     # returns "Toast"
          

shopping_list.first  # returns "Milk"
          

shopping_list.last   # returns "Honey"
          

Loops are methods


shopping_list = ["Milk", "Toast", "Honey"]

shopping_list.each do |item|
  puts item
end
          

Build your own syntax


event "Rails-Workshop" do
  time  "24.01.2014 14:00"
  place "Room 2045 N"
end

event "Frozen Rails conference" do
  time  "11.09.2014 09:00"
  place "Helsinki"
end
          

We call these Domain Specific Languages (DSLs)

Rails is a DSL for web applications

Classes


class Greeter

  def initialize(name)
    @name = name
  end

  def say_hello
    "Hello, #{@name}!"
  end

end
          

greeter = Greeter.new("Mako")
greeter.say_hello  # returns "Hello, Mako!"
          

✓ Ruby

Basics 2

Web Applications

Quiz

The code below lives your server.
How can a web browser call say_hello?


class Greeter

  def initialize(name)
    @name = name
  end

  def say_hello
    "Hello, #{@name}!"
  end

end
            

Web applications are

distributed systems

  • Web applications always involve at least two machines.
  • Machine 1 is the web server.
    Your code lives there.
  • Machine 2 is the web browser an entirely different PC.
    Your user lives here.
  • The browser cannot directly call code on the web server.

Quiz

The code below lives your server.
How can a web browser call say_hello?


class Greeter

  def initialize(name)
    @name = name
  end

  def say_hello
    "Hello, #{@name}!"
  end

end
            

HTTP

Browser sends to server:


GET /say_hello?name=Mako HTTP/1.1
Host: nice.com
          

Server responds with:


HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8

<html>
  <body>
    Hello, Mako!
  </body>
</html>
          

How to process HTTP requests


class WebApplication

  def handle_request(request)
    if request.path == '/say_hello'
      model = Greeter.new(request.params[:name])
      view = "<html>..." + model.say_hello + "...</html>"
      return view
    else
      return '404 not found'
    end
  end

end
          

This is how web applications work in any language.
Rails is mostly syntactic sugar for the code above.

✓ Web applications

Let's write some Rails!

stage-01

Hello World (in Rails)

https://github.com/makandra/nice

(or use your paper screens)

stage-02

Model / View / Controller interaction

https://github.com/makandra/nice

(or use your paper screens)

Basics 3

Relational databases

Web applications need a way to

persist data through requests

  • User accounts
  • Articles
  • Shopping carts
  • Likes
  • Compliments
  • ...

Table "posts"

id title author_id
50 The Bus Knight 1001
51 How to learn Ruby 1001
52 SQL in a Nutshell 1003

Table "users"

id screen_name gender
1001 Mako f
1003 Raleigh m

SQL

Structured Query Language


SELECT * FROM posts WHERE author_id=1002

INSERT INTO users (name) VALUES ('Stacker')

UPDATE posts SET author_id=1001 WHERE author_id=1002
          

This is not the way you want to talk to a database.

Object-relational mapping

Active Record



User.create!(name: 'Stacker')
# INSERT INTO users (name) VALUES ('Stacker')

Post.count
# SELECT COUNT(*) FROM posts

user = User.find_by_name('Mako')
# SELECT FROM users WHERE name='Mako' LIMIT 1

user.posts.first.title
# SELECT title FROM posts WHERE author_id=1001
          

In the background ActiveRecord still generates SQL.
But we can talk to our data through an object-oriented interface.

stage-03

Database access with ActiveRecord

https://github.com/makandra/nice

(or use your paper screens)

Basics 4

HTML user interfaces

Forms

Forms are

a lot of code


  <form method="post" action="/users/create">
    <label for="username">Username</label>
    <input id="username" name="username" type="text">
    <label for="email">E-mail</label>
    <input id="email" name="email" type="text">
    <label for="password">Password</label>
    <input id="password" name="password" type="password">
    <button type="submit">Register</button>
  </form>
          

(abbreviated)

Form roundtrips

Form roundtrips

No love

Despite being a universal pattern of UI interaction, nothing in HTML will help you implement a form roundtrip.

You must do everything by hand:

  • Print the error message
  • Highlight the faulty input fields
  • Preserve uneffected form state

stage-04

Validations and form helpers

https://github.com/makandra/nice

(or use your paper screens)

stage-05

ActiveRecord associations

https://github.com/makandra/nice

(or use your paper screens)

Bonus Basics

Test Driven Development

http://tdd.talks.makandra.de

stage-06

Test-driven development

https://github.com/makandra/nice

(or use your paper screens)

Kickstart your Skills

Become a full-stack web developer in 9 months

Can be combined with a bachelor's thesis or master's thesis

More info: http://start.makandra.de