Workshop 3 - Rails

​

13:35 - Check setup

13:50 - Start coding

15:00 - Break (15 min.)

16:30 - Break (15 min.)

17:30 - Review of task

18:00 - Wrap up

We’ll build a tiny tweet app.

It will be fun!

It will be the best tiny tweet app.

And it will look like cr*p!

Features:�

• As a user I can view a list of tweets.
• As a user I can view individual tweets.
• As a user I can comment on tweets.�
• Bonus features. (If we have time.)

Part 0: Setup

tinyurl.com/techladies

git init

​

git add -A

​

git commit -m "Initial commit"

​

git log

Part 1: Rails overview

Client

Server

HTTP

(Internet)

Front end

(HTML, JS, CSS)

Back end

(Ruby on Rails)

HTTP

(Internet)

Front end

(HTML, JS, CSS)

Back end

(Ruby on Rails)

HTTP

(Internet)

Frameworks let us

build stuff really

quickly.

Frameworks let us

build stuff really

quickly.

We just need

to make sure

we pick the

right one.

MVC

Model View Controller

Layered Architecture

Model

​

For describing objects, their relations, and storing data in the database.

View

​

For presenting data to the user. Also known as a user interface.

Controller

​

The glue that connects the view with the models.

Convention > Configuration

Recap:�

• Rails is a framework written in Ruby.
• It is based on the MVC pattern.
• It is run on the server.
• It sits in between the client (browser) and the database.
• It uses Convention over Configuration.

Part 2: The database

Back end

(Ruby on Rails)

Database

​

Migrations

Recap:�

• The database stores all user data.
• It is described in the schema.
• Changes to it are done in migrations.

Part 3: Resources & routing

Rails actions:

​

• index
• show
• new + create
• edit + update
• destroy

Features:�

• view a list of tweets. Tweet#index
• view individual tweets. Tweet#show
• comment on tweets. Comment#create

Routes

tinytweet.com

Features:�

• view a list of tweets. Tweet#index
• view individual tweets. Tweet#show
• comment on tweets. Comment#create

tinytweet.com/tweets

​

Tweet#index

tinytweet.com/tweets/123

​

Tweet#show

tinytweet.com/tweets/123/comments

​

Comment#create

Recap:�

• Resources are things in your database.
• REST defines some actions for resources.
• Each resource has its own routes.
• Routes are stored in config/routes.rb
• You can list routes with rake routes

Part 4: Tweets

Part 4a: Tweet Model

Model

​

For describing objects, their relations, and storing data in the database.

Tweet

Comment

rails generate model Tweet content:string

rake db:migrate

rails console

​

Tweet.all

​

CTRL + D

rails console

​

Tweet.create!(content: “...”)

​

CTRL + D

Recap:�

• We have created a Tweet model.
• We added the database table by migrating.
• The model has a single attribute, content.
• We have added a validation to ensure the content is between 1-20 characters.
• We can use the console to test.

MVC

Model View Controller

Part 4b: Tweets index action

Controller

​

The glue that connects the view with the models.

rails generate controller Tweets

MVC

Model View Controller

Part 4c: Tweet index view

View

​

For presenting data to the user. Also known as a user interface.

app/views/tweets/index.html.erb

Convention > Configuration

MVC

Model View Controller

Part 4d: Tweet routes

Let's test it out!

Part 4e: Tweets show action

Part 4f: Tweets show view

app/views/tweets/show.html.erb

git add -A

​

git commit -m "Add Tweet resource"

​

git log

Let's test it out!

Part 5: Comments

Tweet

Comment

Part 5a: Comment Model

rails generate model Comment

content:string tweet:references

rake db:migrate

rails console

​

Tweet.first.comments

​

CTRL + D

Part 5b: Comment new form

Part 5d: Comment create route

Part 5d: Comment create action

Let's test it out!

git add -A

​

git commit -m "Add Comment resource"

​

git log

Part 6: Flash messages

Let's test it out!

Part 7: The task

https://github.com/TechLadies/technical-task

Thank you!