Rails Rookies Bootcamp - Blogger

152
Rails Rookies Bootcamp Blogger

Transcript of Rails Rookies Bootcamp - Blogger

Page 1: Rails Rookies Bootcamp - Blogger

Rails Rookies BootcampBlogger

Page 2: Rails Rookies Bootcamp - Blogger

What is Ruby?

Dynamic, reflective, general-purpose object-oriented programming language

Designed/developed in 1995 by Yukihiro Matsumoto in Japan

Syntax inspired by Perl with Smalltalk-like features and influenced by Eiffel and Lisp

Supports function, object-oriented, and imperative paradigms

Dynamic type system and automatic memory management

Page 3: Rails Rookies Bootcamp - Blogger

What is Rails?

Ruby on Rails is an open-source web application framework for Ruby

Full-stack framework

Routing system independent of the web server

Page 4: Rails Rookies Bootcamp - Blogger

Patterns and Principles

Active record pattern

Convention over configuration

DRY (Don’t Repeat Yourself)

MVC (Model-View-Controller)

Page 5: Rails Rookies Bootcamp - Blogger

MVC

Page 6: Rails Rookies Bootcamp - Blogger

Agile

Software development methodology

Iterative and incremental development

Requirements and solutions evolve through collaboration between self-organizing, cross-functional teams

Adaptive planning, evolutionary development and delivery, and a rapid and flexible response to change

Page 7: Rails Rookies Bootcamp - Blogger

Agile

Agile ManifestoWe are uncovering better ways of developing software by doing it and helping other do it

Through this work we have come to value:

Individuals and interactions over processes and tools

Working software over comprehensive documentation

Customer collaboration over contract negotiation

Responding to change over following a plan

That is, while there is value in the items on the right, we value the items on the left more

Page 8: Rails Rookies Bootcamp - Blogger

Git

Git is a distributed revision control and source code management (SCM) system with an emphasis on speed

Every Git working directory is a full-fledged repository with complete history and full revision tracking capabilities, not dependent on network access or a central server

Page 9: Rails Rookies Bootcamp - Blogger

Git Explained

You’ll use git to record the changes you make to your project over time. In git, these changes are called “commits”

Commits contain a change a user has made to the code and some additional useful metadata, including the time that the change was made, your name, and a message you add to describe the change

Page 10: Rails Rookies Bootcamp - Blogger

Why Git (or SCM at all)?

Allows more than one developer to make changes and stay in sync

Allows you to maintain and access different versions of a project

Allows you to retrieve past versions of a project

Page 11: Rails Rookies Bootcamp - Blogger

GitHub

GitHub is a web-based hosting service for software development projects that use the Git revision control system

The most popular open source repository site

Page 12: Rails Rookies Bootcamp - Blogger

Setting Up GitHub

https://github.com/

Log in or sign up for an account

git config --global user.name “Your Name Here”

git config --global user.email “[email protected]

Page 13: Rails Rookies Bootcamp - Blogger

Generating a SSH Key

ssh-keygen -t rsa -C “[email protected]

Enter a passphrase (if you wish)

pbcopy < ~/.ssh/id_rsa.pub

Page 14: Rails Rookies Bootcamp - Blogger

Adding SSH Key to GitHub

Go to your Account Settings

Click “SSH Keys” in the left sidebar

Click “Add SSH Key”

Paste your key into the “Key” field

Click “Add key”

Confirm the action by entering your GitHub password

Page 15: Rails Rookies Bootcamp - Blogger

Test Everything Out

ssh -T [email protected]

Accept (“yes”) the RSA key fingerprint

Get authentication confirmation.

Page 16: Rails Rookies Bootcamp - Blogger

Learning Git

Pro Git by Scott Chacon

Interactive Tutorial by GitHub

Git Immersion by EdgeCase

Understanding Git Conceptually by Charles Duan

Version Control with Git from Michael Hartl’s Rails Tutorial

Page 17: Rails Rookies Bootcamp - Blogger

Git Workflow

Initialize new repository (repo)

Create a GitHub repo

Add GitHub as a remote repo

Initial commit

Create a git branch each time you begin to work on implementing a new feature

Commit changes as you work on the feature

When your new feature is complete, merge the branch and “squash” the commits so your comrades see just one commit for the entire feature

Page 18: Rails Rookies Bootcamp - Blogger

Blogger

A simple blog system

Allows users to read articles

Allows users to comment on articles

Allows users to locate articles by tags

Allows authenticated users to create, update, and delete articles

Allows authenticated users to create, update, and delete users

Page 19: Rails Rookies Bootcamp - Blogger

Iteration 1Up and RunningUp and Running

Ruby on Rails takes a lot of the hard work off your hands, especially when starting up a project

Rails practices the idea of “sensible defaults” and will, with one command, create a working application ready for your customization

Page 20: Rails Rookies Bootcamp - Blogger

Setting the Stage

Page 21: Rails Rookies Bootcamp - Blogger

Git WorkflowInitialize New RepoInitialize New Repo

git init

git add .

git commit -m “initial commit”

git status

Page 22: Rails Rookies Bootcamp - Blogger

Git WorkflowAdd GitHub Remote

RepoAdd GitHub Remote

RepoCreate new repo on GitHubgit remote add origin [email protected]:YOUR_GITHUB_ACCOUNT/YOUR_PROJECT_NAME.git

git push origin master

git commit -am “some helpful comment”

Page 23: Rails Rookies Bootcamp - Blogger

Git WorkflowCheckout New BranchCheckout New Branch

git checkout -b up-and-running

Page 24: Rails Rookies Bootcamp - Blogger

Project Tour

Page 25: Rails Rookies Bootcamp - Blogger

Project Tour

app - This is where 98% of your effort will go. It contains subdirectories which will host most of the code you write, including Models, Views, Controllers, Helpers, JavaScripts, etc

config - Control the environment settings for your application. It also includes the initializers subdirectory which holds items to be run on startup

Page 26: Rails Rookies Bootcamp - Blogger

Project Tour

db - Will eventually have a migrations subdirectory where your migrations, used to structure the database, will be stored. When using SQLite3, as is the Rails default, the database file will be stored in this directory

doc - Who writes documentation? If you did, it’d go here. Someday

Page 27: Rails Rookies Bootcamp - Blogger

Project Tour

lib - Not commonly used, this directory is to store code you control that is reusable outside the project. Instead of storing code here, consider packaging it as a gem

log - Log files, one for each environment

Page 28: Rails Rookies Bootcamp - Blogger

Project Tour

public - The “root” of your application. Static files can be stored and accessed from here, but all the interesting things (JavaScript, Images, CSS) have been moved up to app since Rails 3.1

script - Nothing of interest

Page 29: Rails Rookies Bootcamp - Blogger

Project Tour

test - If your project is using the default Test::Unit testing library, the tests will live here

tmp - Temporary cached files

vendor - Infrequently used, this directory is to store code you do not control. With Bundler and RubyGems, we generally don’t need anything in here during development

Page 30: Rails Rookies Bootcamp - Blogger

Configuring the Database

Look in the config directory and open the file database.yml

This file controls how Rails’ database connection system will access your database

You can configure many different databases, including SQLite3, MySQL, PostgreSQL, SQL Server, and Oracle

Page 31: Rails Rookies Bootcamp - Blogger
Page 32: Rails Rookies Bootcamp - Blogger

Configuring the Database

If you were connecting to an existing database, you would enter the database configuration parameters here. Since we’re using SQLite3 and starting from scratch, we can leave the defaults to create a new database, which will happen automatically

The database will be stored in db/development.sqlite3

Page 33: Rails Rookies Bootcamp - Blogger

Starting the Server

Page 34: Rails Rookies Bootcamp - Blogger

Accessing the Server

Page 35: Rails Rookies Bootcamp - Blogger

Creating the Article Model

Our blog will be centered around “articles”

Need a table in the database to store all the articles

Need a model to allow our Rails app to work with that data

rails generate model Article

Page 36: Rails Rookies Bootcamp - Blogger

Working with the Database

Rails uses migration files to perform modifications to the database

Killer feature!! Rails migrations are generally database agnostic

Open db/migrate/(some_time_stamp)_create_articles.rb

Page 37: Rails Rookies Bootcamp - Blogger

Modifying change

Page 38: Rails Rookies Bootcamp - Blogger

Timestamps

t.timestamps will create two columns inside our tables, automatically managed by Rails, to track when an object is created or updated

Page 39: Rails Rookies Bootcamp - Blogger

Running the Migration

rake db:migrate

Page 40: Rails Rookies Bootcamp - Blogger

Working with a Model in the Console

Rails console is a command-line interface to your application

Allows you to access and work with almost any part of your application directly instead of going through the web interface

Can greatly simplify your development process

Page 41: Rails Rookies Bootcamp - Blogger

Looking at the Model

app/models/article.rb

Contains all the code for the Article model

Page 42: Rails Rookies Bootcamp - Blogger

Setting up the Router

config/routes.rb

When a Rails server gets request from a web browser, it first goes to the router

Router decides what the request is trying to do, what resources it is trying to interact with

Page 43: Rails Rookies Bootcamp - Blogger

Looking at the Routing Table

rake routes

Page 44: Rails Rookies Bootcamp - Blogger

Creating the Articles Controller

rails g controller articles

app/controllers/articles_controller.rb

Page 45: Rails Rookies Bootcamp - Blogger

Defining the Index Action

http://localhost:3000/articles/

Add index action to the articles controller

Page 46: Rails Rookies Bootcamp - Blogger

Instance Variables

@articles

@ marks a variable as an “instance level variable”

Page 47: Rails Rookies Bootcamp - Blogger

Creating the Template

Create app/views/articles/index.html.erb

ERB is a templating language allowing us to mix Ruby into our HTML

ERB clause starts with <% or <%= and ends with %>

<% will hide the result of the Ruby code

<%= will output the result of the Ruby code

Page 48: Rails Rookies Bootcamp - Blogger

Index Template Content

Page 49: Rails Rookies Bootcamp - Blogger

Adding Navigation to the Index

Page 50: Rails Rookies Bootcamp - Blogger

Looking at the Routing Table

Page 51: Rails Rookies Bootcamp - Blogger

Completing the Article Links

Page 52: Rails Rookies Bootcamp - Blogger

New Article Link

Page 53: Rails Rookies Bootcamp - Blogger

Review the Results

Page 54: Rails Rookies Bootcamp - Blogger

Creating the Show Action

Page 55: Rails Rookies Bootcamp - Blogger

A Bit on Parameters

Page 56: Rails Rookies Bootcamp - Blogger

Back to the Template

Page 57: Rails Rookies Bootcamp - Blogger

Styling

Page 58: Rails Rookies Bootcamp - Blogger

Iteration 1 Complete!

Page 59: Rails Rookies Bootcamp - Blogger

Git Workflow

git add .

git commit -am “a meaningful message”

git push origin up-and-running

git checkout master

git merge --squash up-and-running

git commit -am “implement ‘up and running’ feature”

git push origin master

Page 60: Rails Rookies Bootcamp - Blogger

Iteration 2Form-Based WorkflowForm-Based WorkflowCreating articles from the console isn’t a viable long-term solution

Users will expect to add content through a web interface

Create an HTML form to submit the article and all the back-end processing to get it into the database

Page 61: Rails Rookies Bootcamp - Blogger

Git WorkflowCheckout New BranchCheckout New Branch

git checkout -b form-based-workflow

Page 62: Rails Rookies Bootcamp - Blogger

Creating the New Action and View

Page 63: Rails Rookies Bootcamp - Blogger

Starting the Template

Page 64: Rails Rookies Bootcamp - Blogger

Writing a Form

Page 65: Rails Rookies Bootcamp - Blogger

Does it Work?

Page 66: Rails Rookies Bootcamp - Blogger

Setting up for Reflection

Page 67: Rails Rookies Bootcamp - Blogger

The Create Action

Page 68: Rails Rookies Bootcamp - Blogger

Processing the Data

Page 69: Rails Rookies Bootcamp - Blogger

Understanding Form Parameters

Page 70: Rails Rookies Bootcamp - Blogger

Pulling Out Form Data

Page 71: Rails Rookies Bootcamp - Blogger

More Body

Page 72: Rails Rookies Bootcamp - Blogger

Fragile Controllers

Page 73: Rails Rookies Bootcamp - Blogger

Fragile Controllers

Page 74: Rails Rookies Bootcamp - Blogger

Uh-oh! An Error!

Page 75: Rails Rookies Bootcamp - Blogger

Less Fragile Controllers

Page 76: Rails Rookies Bootcamp - Blogger

Deleting Articles

Page 77: Rails Rookies Bootcamp - Blogger

REST is About Path and Verb

Representational State Transfer (REST) is a software architectural style for distributed systems (e.g. World Wide Web)

Predominant web API design model

Collection URI http://example.com/resources/

Element URI http://example.com/resources/item17

Action URI http://example.com/resources/new

Page 78: Rails Rookies Bootcamp - Blogger

The Destroy Action

Page 79: Rails Rookies Bootcamp - Blogger

Adding the Edit Link

Page 80: Rails Rookies Bootcamp - Blogger

Implementing the Edit Action

Page 81: Rails Rookies Bootcamp - Blogger

An Edit Form

Page 82: Rails Rookies Bootcamp - Blogger

Creating a Form Partial

Page 83: Rails Rookies Bootcamp - Blogger

Implementing Update

Page 84: Rails Rookies Bootcamp - Blogger

Adding a Flash

Page 85: Rails Rookies Bootcamp - Blogger

Testing the Flash

Page 86: Rails Rookies Bootcamp - Blogger

Setting the Site Root

Page 87: Rails Rookies Bootcamp - Blogger

Iteration 2 Complete!

Page 88: Rails Rookies Bootcamp - Blogger

Git Workflow

git add .

git commit -am “a meaningful message”

git push origin form-based-workflow

git checkout master

git merge --squash form-based-workflow

git commit -am “implement ‘form-based-workflow’ feature”

git push origin master

Page 89: Rails Rookies Bootcamp - Blogger

Iteration 3Adding CommentsAdding Comments

A comment...

Is attached to an article

Has an author name

Has a body

Page 90: Rails Rookies Bootcamp - Blogger

Git WorkflowCheckout New BranchCheckout New Branch

git checkout -b adding-comments

Page 91: Rails Rookies Bootcamp - Blogger

Generating the Comment Model

Page 92: Rails Rookies Bootcamp - Blogger

Setting Up the Migration

Page 93: Rails Rookies Bootcamp - Blogger

Relationships

Page 94: Rails Rookies Bootcamp - Blogger

Relationships

Page 95: Rails Rookies Bootcamp - Blogger

Testing in the Console

Page 96: Rails Rookies Bootcamp - Blogger

Displaying Comments for an Article

Page 97: Rails Rookies Bootcamp - Blogger

Creating the Comments Partial

Page 98: Rails Rookies Bootcamp - Blogger

Web-Based Comment Creation

Page 99: Rails Rookies Bootcamp - Blogger

In the ArticlesController

Page 100: Rails Rookies Bootcamp - Blogger

Improving the Comment Form

Page 101: Rails Rookies Bootcamp - Blogger

Trying the Comment Form

Page 102: Rails Rookies Bootcamp - Blogger

Creating a Comments Controller

Page 103: Rails Rookies Bootcamp - Blogger

Writing the Create Action

Page 104: Rails Rookies Bootcamp - Blogger

Cleaning Up

Page 105: Rails Rookies Bootcamp - Blogger

Iteration 3 Complete!

Page 106: Rails Rookies Bootcamp - Blogger

Git Workflow

git add .

git commit -am “a meaningful message”

git push origin adding-comments

git checkout master

git merge --squash adding-comments

git commit -am “implement ‘adding-comments’ feature”

git push origin master

Page 107: Rails Rookies Bootcamp - Blogger

Iteration 4TaggingTagging

An article has many taggings

A tag has many taggings

A tagging belongs to an article and belongs to a tag

Page 108: Rails Rookies Bootcamp - Blogger

Git WorkflowCheckout New BranchCheckout New Branch

git checkout -b tagging

Page 109: Rails Rookies Bootcamp - Blogger

Making Models

Page 110: Rails Rookies Bootcamp - Blogger

Expressing Relationships

Page 111: Rails Rookies Bootcamp - Blogger

Tags in Action

Page 112: Rails Rookies Bootcamp - Blogger

An Interface for Tagging Articles

Page 113: Rails Rookies Bootcamp - Blogger

Fixing tag_list

Page 114: Rails Rookies Bootcamp - Blogger

Not So Fast

Page 115: Rails Rookies Bootcamp - Blogger

Pseudo-Code

Split the tags_string into an array of strings with leading and trailing whitespace removed

For each of those strings...

Ensure each one of these strings are unique

Look for a tag object with that name. If there isn’t one, create it

Add the tag object to a list of tags for the article

Set the article’s tags to the list of tags that we have found and/or created

Page 116: Rails Rookies Bootcamp - Blogger

Working with Strings

Page 117: Rails Rookies Bootcamp - Blogger

Fixing tag_list=

Page 118: Rails Rookies Bootcamp - Blogger

Testing in the Console

Page 119: Rails Rookies Bootcamp - Blogger

Adding Tags to Our Display

Page 120: Rails Rookies Bootcamp - Blogger

Listing Articles by Tag

Page 121: Rails Rookies Bootcamp - Blogger

Listing All Tags

Page 122: Rails Rookies Bootcamp - Blogger

Iteration 4 Complete!

Page 123: Rails Rookies Bootcamp - Blogger

Git Workflow

git add .

git commit -am “a meaningful message”

git push origin tagging

git checkout master

git merge --squash tagging

git commit -am “implement ‘tagging’ feature”

git push origin master

Page 124: Rails Rookies Bootcamp - Blogger

Iteration 5Using GemsUsing Gems

Page 125: Rails Rookies Bootcamp - Blogger

Git WorkflowCheckout New BranchCheckout New Branch

git checkout -b using-gems

Page 126: Rails Rookies Bootcamp - Blogger

Setting Up the Database for Paperclip

Page 127: Rails Rookies Bootcamp - Blogger

Adding to the Model

Page 128: Rails Rookies Bootcamp - Blogger

Modifying the Form Template

Page 129: Rails Rookies Bootcamp - Blogger

Trying It Out

Page 130: Rails Rookies Bootcamp - Blogger

Improving the Form

Page 131: Rails Rookies Bootcamp - Blogger

Further Notes about Paperclip

Page 132: Rails Rookies Bootcamp - Blogger

A Few Sass Examples

https://www.dropbox.com/s/4wl3qdjd9ht5y2o/styles.css.scss

Put in app/assets/stylesheets/

Details about Sass can be

found here:

http://sass-lang.com

Page 133: Rails Rookies Bootcamp - Blogger

Working with Layouts

<%= stylesheet_link_tag ‘styles’ %>

DRY - Don’t Repeat Yourself

Page 134: Rails Rookies Bootcamp - Blogger

Iteration 5 Complete!

Page 135: Rails Rookies Bootcamp - Blogger

Git Workflow

git add .

git commit -am “a meaningful message”

git push origin using-gems

git checkout master

git merge --squash using-gems

git commit -am “implement ‘using-gems’ feature”

git push origin master

Page 136: Rails Rookies Bootcamp - Blogger

Iteration 6AuthenticationAuthentication

gem ‘sorcery’

When specifying & installing a new gem, you will need to restart your Rails Server

Page 137: Rails Rookies Bootcamp - Blogger

Git WorkflowCheckout New BranchCheckout New Branch

git checkout -b authentication

Page 138: Rails Rookies Bootcamp - Blogger

Running the Generator

Page 139: Rails Rookies Bootcamp - Blogger

Creating a First Account

Page 140: Rails Rookies Bootcamp - Blogger

Form Validation

Page 141: Rails Rookies Bootcamp - Blogger

Creating a New Author

Page 142: Rails Rookies Bootcamp - Blogger

Are We Logged In?

Page 143: Rails Rookies Bootcamp - Blogger

Logging In

Page 144: Rails Rookies Bootcamp - Blogger

New Session Form

Page 145: Rails Rookies Bootcamp - Blogger

Configuring Routes

Page 146: Rails Rookies Bootcamp - Blogger

Editing Layout

Page 147: Rails Rookies Bootcamp - Blogger

Securing New Users

Page 148: Rails Rookies Bootcamp - Blogger

Securing the Rest of the Application

Page 149: Rails Rookies Bootcamp - Blogger

Securing the Rest of the Application

Page 150: Rails Rookies Bootcamp - Blogger

Iteration 6 Complete!

Page 151: Rails Rookies Bootcamp - Blogger

Git Workflow

git add .

git commit -am “a meaningful message”

git push origin authentication

git checkout master

git merge --squash authentication

git commit -am “implement ‘authentication’ feature”

git push origin master

Page 152: Rails Rookies Bootcamp - Blogger

Iteration 7ExtrasExtras

Add a site-wide sidebar that holds navigation links

Create date-based navigation links. For instance, there would be a list of links with the names of the months and when you click on the month, it shows you all the articles published in that month.

Track the number of times an article has been viewed. Add a view_count column to the article, then in the show method of articles_controller.rb just increment that counter. Or, better yet, add a method in the article.rb model that increments the counter and call that method from the controller.

Once you are tracking views, create a list of the three “most popular” articles.

Create a simple RSS feed for articles using the respond_to method and XML view templates.