Build a Tumblr-style blog using Ruby on Rails

Let's Get Started

Welcome
I introduce myself and the course. I'm camera shy, sorry for not smiling more :)
Demo of Crumblr (0:50)
We're going to be building Crumblr, a Tumblr-like blog where you can post either text or images, manage your posts, and "heart" posts you really like.

You can see the app here: http://crumblr.talsafran.com
What's Rails? (1:30)
A brief overview of what Rails is.

I hightly recommend the official Rails Guides for learning more about Rails.

Two other great resources are Rails for Zombies, an interactive tutorial, and Michael Hart's tutorial, which is a free book.
Learning Ruby (1:55)
There are lots of great resources for learning Ruby.

I highly recommend going through TryRuby.org before begining the class. It should only take 15-20 minutes and is a lot of fun.

Another good resource is Codecademy. I recommend going through the Codecademy lessons after you've completed this course. They're very thourough.
What We're Learning and What We're Not (2:25)
As far as programming, we'll primarily be writing Ruby code and using Rails as our web framework. We'll also be writing some basic HTML.

This course will not be covering Javascript or CSS. They're great to learn, but not for this class! Instead of writing our own CSS, we'll be using the fantastic Twitter Bootstrap library.

Setup Time

Get Rails Installer (Mac 0:00 , Windows 7:00)
You can find it at http://railsinstaller.org
Install Sublime Text (Mac 1:30, Windows 9:25)
You can get Sublime Text at

http://www.sublimetext.com.
Upgrade to Rails 4.0 (Mac 5:20, Windows 8:20)
You can upgrade using the following command:

gem install rails --version 4.0.0 --no-ri --no-rdoc

To make sure you have Rails 4.0 installed, type in:

rails --version

And you should see Rails 4.0.0

Hello Rails!

Create the Project, Run the Server (0:00)
You can do this by running:

rails new crumblr

You can then run the server by running:

rails server

Just make sure you're in the crumblr directory. You can double check this by running pwd.
Add Welcome and About (1:20)
We create a PagesController with two actions: welcome and about. We can have this created for us by running:

rails generate controller Pages welcome about

Once you've run this, try going to /pages/welcome and /pages/about
Modify the Welcome View (3:55)
You can find the view in app/views/pages/welcome.html.erb

The view has both the HTML and ERB extensions because, well, it supports both!

HTML is the markup language for the web, which you've probably seen before. ERB stands for "Embedded Ruby," and basically means that you can put Ruby code into your HTML by wrapping it in <% and %>
Modify the About View (6:40)
Here we use link_to for the first time.
Change Routes to / and /about (9:45)
We do this by modifying the routes.rb file.
Add a Navigation (13:45)
Here we use Chrome's Inspect Element feature for the first time. It's neat!

Our First Git Commit

What is Git? (0:00)
It's a version control system, which is a fancy way of saying you can track changes in your code.

If you want to see how Git works in the command line, the folks at TryRuby have created a similar tutorial. It's called... guess what... TryGit!
Install the Github App (1:10)
It's a fantastic tool written by the folks at Github. Get it for Mac or PC.

Then add our project using Add Local Repository.
Create our First Commit (2:45)
Our first commit will simply add all the files to our project.
Create Our Second Commit (3:30)
We change just one file and then commit it. It should help us understand how Git shows the changes in your file.

By the way, this is also known as a diff.

Add Bootstrap

What is Bootstrap? (0:00)
It's a great way to style your pages without writing any CSS. Made by the fine folks at Twitter.
Install Bootstrap (1:51)
We can add Bootstrap simply by inserting the following line within our tag.
Add a Container (4:05)
We want all of our content to be within a Bootstrap container, so put everything (the nav plus the yield call) within:

... our content ...
Add a Navigation (7:00)
We add a "pill" navigation by adding:

... menu items ...
Add a Page Header (11:30)
We add a page header that says "crumblr // home baked goodness"
Put Our Content in 6 Columns (16:10)
We do this using Bootstrap's grid helpers.
Create a Commit (21:25)
Let's commit all of this using our handy Github app.

Add Posts

Our Game Plan (0:00)
We're going to create a way for users to post text content, edit the posts, and delete the posts. The posts will have a title and some content, and we'll need to store them in a database.
Create the Scaffold (0:43)
We're going to use a scaffold for creating, reading, updating, and deleting Posts. The posts will have a title and some content. Run this command:

rails generate scaffold Post title:string content:text --no-stylesheets

That's it! Check it out in your browser at http://localhost:3000/posts
Run the Migration (4:00)
The generator created lots of files, including a database migration. A database migration is a set of instructions for changing the database.

But nothing happens until we run the migration! So let's run it with:

rake db:migrate

You can check out your migration files in the db/migrate folder.
Check Out Our New Routes (6:18)
If you look in config/routes.rb, there's a new line for our routes (if you forgot, routes define which URLs our app accepts).

The new line says:

resources :posts

This one line actually creates lots of stuff! If you run rake routes, you should see that it created 8 routes! We'll understand what they all mean in the next unit.
Play Around With the Scaffold (7:40)
We should now be able to:
- See all of the posts at /posts
- Create a new post at /posts/new
- See a post at /posts/:id. For example, the post with the id of 1 would be located at /posts/1
- Edit a post at /posts/:id/edit
Pretty cool eh? All from running one command.

Don't worry if this seems like voodoo magic. In the next chapter we'll dig into how this all works.
Create a Commit (11:45)
Let's create a commit so we can keep track of our progress.

Understanding the Scaffold Code

Review of Last Chapter (0:00)
In the last lesson, we used the rails generate command to create a scaffold. Our app now supports creating, viewing, updating, and deleting posts.
Preface to This Lesson (0:20)
If you don't understand everything on the first go, that's okay!

In fact, you can watch this video once, continue on with the course, and refer back to it whenever. You'll be all the wiser.
Understanding Our Models (2:00)
We covered a lot of ground here.
- The Post model (in app/models/post.rb) describes the behaviour of our posts. It's also how they interact with the database. We get all of this database behavior for free by using the ActiveRecord::Base class. All models should have it.
- We used rails console to open our app in the terminal. We can type in Ruby code and access our database. Pretty neat! It's a good place to practice code.
- You can find a post with the find method. For example, the post with the id of 5 can be fetched using Post.find(5).
- You can also assign that post to a variable by saying my_post = Post.find(5). Variables work the same way as they do in math – if you assign x = 5, then you can now refer to the number 5 using the variable x.
- You can "build" a new post object with Post.new. You can then store it in the database with save. If you want to do both at the same time, you can use Post.create.
- You can get the last post with Post.last, or the amount of posts in your database with Post.count.
Understanding The Post Controller (10:30)
Controllers stand between your users and the server. When the user does something – visits a page, submits a form, etc – it gets sent to a controller. The controller can then decide what to do next (create a record, redirect the user somewhere, etc).

Every route is assigned to a specific Controller-Action pair. For example, the form to create a new post is in posts#new, which means it's the Posts Controller and the new action.

We also covered a few other things:
- Params. Sometimes a controller receives a URL with some parameters, or params for short. For example, when you visit /posts/5, the param id is set to 5. You can get the value of this in the controller by saying params[:id]. If there was another param (say, country), it would be params[:country].
- Using instance variables in the controller. For example, when you find a post, you can assign it to the variable @post. What's cool about that is, you can then use @post in your view. If you forget the @, this won't work.
- Before Actions. These get run, well... before your actions. So if the before action set_post is run before the posts#show action, by the time the code in posts#show executes, you will already have a post set to @post.
- JSON – who needs it? Certainly not our app, it just clutters the controller. So we delete all of the JSON-related code.
Create a Commit (21:40)
Most of this lesson was review, but we did end up cleaning up some JSON-related stuff. Let's create a commit.

Styling Our Posts

Style the posts/index View (0:00)
We do a few things here:
- Add the "table" class to the table.
- Use @posts.each do loop through all of the posts and display a table row for each one. Don't forget, @posts was set in our controller: in posts#index
- Truncate the length of the content field to 100 characters. In hindsight, this looks better with 40 characters, so feel free to update.
- Add "Manage Posts" to our menu.
- Go over "named routes." For example, you can refer to /posts as the posts_url. You can see the names of your routes by running rake routes (under the Prefix) column.
Style the posts/new View (8:00)
Here we:
- Render a partial for the form, since it's shared.
- Add the necessary Bootstrap classes. You can see the different classes here.
Style the posts/show View (12:45)
Here we use Bootstrap classes for notices, titles, and muted text.

We also learn about Rails' simple_format helper for displaying paragraphs of text, and format a date using DateTime's to_formatted_s.
Show All Our Posts in the Root URL (21:05)
Here we move all of the code for displaying a code into a partial view. Why? Because now we use it in two places – in our blog stream at /, as well as for each individual post at /posts/:id. This is a great example of DRY – Don't Repeat Yourself. Listen to this advice, kids!

Add Image Posts

Check the Post Kind in posts#show (0:00)
We don't have a database field for kind, but we will soon. If the kind is an image, display an image. Otherwise display text.
Add a "Kind" Field to the Posts Table (1:55)
We already know how to do this: we create a migration for adding the field, then we run it.
Add Kind to the "New" Form (8:14)
We create a dropdown for the kind using the select method, and select it from an array (or list) of kinds: ['image', 'text']
Allow the "Kind" Param in the Controller (11:45)
We have to update the post_params method to allow us to pass along the kind param.

Never trust parameters from the scary internet!
Create a Commit (14:03)
You know the drill by now.

Add Hearts

Create the Hearts Table (0:00)
You know the drill by now. We create a migration for a new table with one field:

rails generate migration CreateHearts post_id:integer

And then we run that bad boy!

rake db:migrate
Add a Heart Model (3:40)
We learn the hard way that creating a database table is not enough. You need a model to interact with the database in your rails app.
Add a Validation (5:10)
There's no sense in having a heart that isn't tied to a particular post, so we ensure that happens using:

validate post_id, presence: true
Associate Posts and Hearts (7:14)
If we want to say something fancy like post.hearts, we need to associate the two models with one another. We can achieve this by having the Post model say:

has_many :hearts

And if we want to do the opposite? Like say heart.post? Then we go into the Heart model and say:

belongs_to :post

Try it out!
Add the ♥ Button (13:20)
We create a form with a button and a hidden field. In order for the form to submit, we need a controller. So let's create one.
Commit It! (25:40)
Commit it good.

Put Your App Online

Sign up for Heroku (0:00
We'll be using it to host our app.
Get the Heroku Toolbelt (0:20)
It makes it very easy to push to Heroku with just one command.

Get it at http://toolbelt.heroku.com
Create a Heroku app (1:35)
Create a new app using heroku create. You should get an app URL.
Add the Postgres gem (2:05)
Postgres is the type of database that Heroku uses. Make the following changes to your Gemfile:

  group :development do
gem 'sqlite3'
end

  group :production do
gem 'pg'
end

Once you've done that, don't forget to run:

  bundle install

This should install the library. It'll also modify your Gemfile.lock file.
Commit and Push (4:37)
First we need to make a commit out of our last change. You already know how to do that.

Once we have that commit in place, let's push all of our code to Heroku. We can do that with:

git push heroku master
Populate the Database (8:45)
We can pre-populate, or seed, our database, by putting some code in the db/seeds.rb file. It's just a normal Ruby file, so we can use stuff like Post.new and Post.create. Pretty neat, eh?

Additional Resources

Rails Installer - http://railsinstaller.org

Sublime Text - http://www.sublimetext.com
Adding Links Using link_to – http://guides.rubyonrails.org/getting_started.html#adding-links
Rails Generators – http://guides.rubyonrails.org/command_line.html#rails-generate
Layouts and Rendering – http://guides.rubyonrails.org/layouts_and_rendering.html
Chrome's Inspect Element – https://developers.google.com/chrome-developer-tools/docs/elements
Github App for Windows – http://mac.github.com
Github App for Mac – http://mac.windows.com
TryGit – http://try.github.io
Install Bootstrap via the CDN –

http://getbootstrap.com/getting-started/#download-cdn
Bootstrap Containers –

http://getbootstrap.com/css/#overview-container
Bootstrap Navigation –

http://getbootstrap.com/components/#nav
Bootstrap Page Headers –

http://getbootstrap.com/components/#page-header
Bootstrap Grid –

http://getbootstrap.com/css/#grid-example-basic
Rails Routes – http://guides.rubyonrails.org/routing.html
Rails Guide to Models and ActiveRecord -

http://guides.rubyonrails.org/active_record_basics.html
Rails Guide to Controllers –

http://guides.rubyonrails.org/action_controller_overview.html
Rails Guide to Routes –

http://guides.rubyonrails.org/routing.html

Jennifer Cormier

Fledgeling UX Designer/ Researcher

5

7