Curso de Ruby on Rails 4 desde cero

curso_rails.md

Curso de Ruby on Rails 4 desde cero

Instalar RVM, Ruby 2.3.0 y Ruby on Rails 4.2.6 en OS X El Capitan

Antes de comenzar es necesario tener instalado Xcode y Homebrew.

Xcode se puede instalar desde la App Store

Homebrew es un gestor de paquetes para OS X.

En primer lugar, tenemos que descargar e instalar Homebrew con el siguiente comando:

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Comprobar que no existen conflictos o problemas (Si existen conflictos, será necesario solucionarlos antes de continuar con esta guía):

$ brew doctor

Actualizar y realizar upgrade

$ brew update && brew upgrade

Instalando RVM y Ruby

$ \curl -L https://get.rvm.io | bash -s stable
$ source ~/.profile
$ rvm | head -n 1
$ rvm use ruby --install --default
$ ruby -v

Instalando Rails 4.2.6

$ gem install rails -v 4.2.6
$ rails --version

Crear una nueva aplicación blog

En la terminal ejecutar el siguiente comando:

$ rails new blog

Cambiamos al directorio de la aplicación

$ cd blog

Podemos ver que el directorio blog tiene una serie de archivos y carpetas generadas automáticamente que componen la estructura de una aplicación Rails.

A continuación veremos un resumen básico de la función de algunos archivos y carpetas que Rails crea por defecto:

Archivo/Carpeta	Proposito
app/	Contiene los controladores, modelos, vistas, ayudantes (helpers), correos y los activos de la aplicación
config/	Configurar las rutas de la aplicación, base de datos y mucho más.
db/	Contiene el esquema de base de datos actual, así como las migraciones de bases de datos
lib/	Módulos de expansión para la aplicación
log/	Archivos de registro de aplicación
public/	La única carpeta con archivos que se pueden acceder desde un cliente. Contiene archivos estáticos
test/	Pruebas unitarias
tmp/	Archivos temporales
vendor/	Lugar para el código de terceros

Iniciar servidor web

Cambiamos al directorio de la aplicación

$ cd blog

E ingresamos el siguiente comando:

$ rails server

Para detener el servidor ctrl + c

Crear un controlador utilizando la línea de comandos

$ rails generate controller welcome index

Salida de la terminal:

Running via Spring preloader in process 46489
      create  app/controllers/welcome_controller.rb
       route  get 'welcome/index'
      invoke  erb
      create    app/views/welcome
      create    app/views/welcome/index.html.erb
      invoke  test_unit
      create    test/controllers/welcome_controller_test.rb
      invoke  helper
      create    app/helpers/welcome_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/welcome.coffee
      invoke    scss
      create      app/assets/stylesheets/welcome.scss

Donde:

welcome corresponde al nombre del controlador index al nombre del método o acción

Se creará un archivo controlador llamado welcome_controller.rb en app/controllers/ y una vista llamada index.html.erb en app/views/welcome/

welcome_controller.rb

class WelcomeController < ApplicationController
  def index
  end
end

Todos los controladores heredan de ApplicationController.

Todos los nombres de los archivos controladores tienen que terminar con _controller. Al usar la terminal para crear un controlador, Rails se encarga de agregar el _controller al nombre del archivo.

index.html.erb

<h1>Welcome#index</h1>
<p>Find me in app/views/welcome/index.html.erb</p>

Ahora levantamos el servidor web y en el browser visitaremos http://localhost:3000/welcome/index

El navegador nos mostrará la página que corresponde a la vista index.html.erb, método index del controlador WelcomeController

Archivo de rutas

El archivo de rutas se encuentra en config/routes.rb

En este archivo podemos definir las rutas de nuestra aplicación, los verbos permitidos para cada ruta, etc.

Si queremos definir la ruta por defecto o ruta raíz.

Escribiremos:

root 'welcome#index'

Verbos HTTP:

• GET
• POST
• PATCH
• PUT
• DELETE

Cuando definimos una ruta, lo primero que hacemos es especificar el verbo HTTP que va a utilizar y luego el recurso

Ejemplo:

get 'books/get'
post 'books/create'
put 'books/update'

Esto se hace para protejer la aplicación y que a la aplicación sólo se pueda acceder a través de las acciones y verbos que nosotros definimos.

Podemos renombrar las rutas de la siguiente forma:

get 'special', to: 'welcome#index'

El segundo parámetro corresponde a un hash de opciones, la opción "to" nos permite definir que controlador y que acción van a responder a una ruta en especifico en este caso "special".

Si visitamos http://localhost:3000/special verémos la misma página que en http://localhost:3000/welcome/index

ERB (Embedded RuBy)

ERB es el motor de plantillas que viene en Rails por defecto. Está desarrollado en Ruby y permite crear plantillas combinando texto plano con código Ruby para la sustitución de variables y control de flujo, lo que hace que sean fáciles de escribir y mantener.

<h1>¡Bienvenidos a nuestro blog!</h1>
<% [1,2,3,4].each do |number| %>
  <p>Número: <%=number%></p>
<%end%>

Agregar un archivo css

Para agregar un archivo css basta con agregarlo a la carpeta app/assets/stylesheets/

Rails automáticamente cargará el archivo en las vistas de la aplicación. Este comportamiento se debe a que en el directorio se encuentra un archivo llamado application.css y este contiene un "require_tree ." que indica que Rails debe incluir en las vistas todos los archivos css que se encuentren en este directorio.

Crear un modelo utilizando la línea de comandos

Por convención Rails espera que el nombre del modelo sea el singular del nombre de la tabla. Es decir si nosotros llamamos a nuestro modelo Article, la tabla de la BD se llama Articles. Se recomienda que los nombres de los modelos esten en inglés.

$ rails generate model Article title body:text visits_count:integer

Salida de la terminal:

Running via Spring preloader in process 46623
      invoke  active_record
      create    db/migrate/20160725022823_create_articles.rb
      create    app/models/article.rb
      invoke    test_unit
      create      test/models/article_test.rb
      create      test/fixtures/articles.yml

Configurar base de datos MySQL en Rails

Instalar la gema mysql2 para utilizar MySQL

Editar el archivo Gemfile que se encuentra en la raíz del proyecto y comentar la línea:

gem 'sqlite3' 

Agregar la gema mysql2:

#gem 'sqlite3'
gem 'mysql2'

Luego creamos un grupo para el ambiente de test

group :test do
  gem 'sqlite3'
end

Guardamos el archivo y en la terminal ejecutamos:

$ bundle install

Configuramos la base de datos

Abrimos el archivo database.yml que se encuentra en config/

Reemplazamos la configuración de development por lo siguiente:

development:
  adapter: mysql2
  username: root
  password: dev
  host: 127.0.0.1
  port: 3306
  database: blog_facilito
  pool: 5
  timeout: 5000

Ahora vamos a crear la base de datos desde la terminal utilizando el siguiente comando:

$ rake db:create

Migraciones

Para ejecutar las migraciones en la terminal ejecutamos el siguiente comando:

$ rake db:migrate

Salida de la terminal:

== 20160725022823 CreateArticles: migrating ===================================
-- create_table(:articles)
   -> 0.1358s
== 20160725022823 CreateArticles: migrated (0.1359s) ==========================

Para hacer rollback ejecutamos:

$ rake db:rollback

Salida de la terminal:

== 20160725022823 CreateArticles: reverting ===================================
-- drop_table(:articles)
   -> 0.1231s
== 20160725022823 CreateArticles: reverted (0.1664s) ==========================

Layouts

Los layouts se encargan de agrupar las vistas que tienen contenido en común. Todas nuestras vistas van a tener un título, hojas de estilos, javascript, van a tener la declaración del doctype, html, head, body por que es necesario que siempre exista esto en una página web. Entonces en lugar de estar reescribiendo esto vista por vista, se crea un layout y sólo se sustituye la parte que esta referenciada por la palabra yield por el contenido de nuestras vistas. Toda la estructura de nuestra página web debe ir en el layout.

**DRY (Don't repeat yourself) => No repetimos código **

Si nosotros repetimos código y luego tenemos que realizar un cambio este cambio se debe realizar en varias partes, en cambio si nosotros no repetimos código tenemos un software más mantenible ya que sólo debemos realizar el cambio en una sóla parte.

Los layouts debemos crearlos en app/views/layouts

Podemos utilizar el layout por default application.html.erb

Ejemplo:

<!DOCTYPE html>
<html>
<head>
  <title>Blog</title>
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
  <header>
    <nav class="be-red white large-padding">
      <ul class="no-list row center-xs middle-xs">
        <li class="col-md">
          <h1 class="no-margin" id="logo">Blog Facilito</h1>
        </li>
        <li class="col-md">
          <%= link_to "Inicio", root_path %>
        </li>
        <li class="col-md">
          Diseño
        </li>
        <li class="col-md">
          Programación
        </li>
        <li class="col-md">
          Tecnología
        </li>
      </ul>
    </nav>
  </header>

  <%= yield %>

</body>
</html>

Creando una aplicación CRUD utilizando REST

Vamos a abrir el archivo de rutas que se encuentra en config/routes.rb

En este archivo podemos definir un recurso REST de la siguiente forma:

resources :articles

Podemos definir los verbos que no queremos que esten permitidos:

resources :articles, except: [:delete]

O podemos definir los verbos que queremos que esten permitidos de la siguiente forma:

resources :articles, only: [:create, :show]

Cuando definimos un recurso lo que hace internamente la aplicación espera un controlador articles con un método por cada verbo y recurso:

resources :articles

=begin
  get "/articles" index
  post "/articles" create
  delete "/articles/:id" destroy
  get "/articles/:id" show
  get "/articles/new" new
  get "/articles/:id/edit" edit
  patch "/articles/:id" update
  put "/articles/:id" update
=end

Para crear un CRUD utilizando recursos REST debemos seguir los siguientes pasos:

1. Definir un recurso en el archivo routes.rb. Ejemplo: resources :articles
2. Crear archivo articles_controller.rb en app/controllers
3. Crear la clase y sus métodos index, create, delete, show, new, edit, update
4. Crear la carpeta que contendrá las vistas del controlador. Ejemplo: app/views/articles
5. Crear las respectivas vistas de cada método: index.html.erb, show.html.erb, etc.
6. Darle funcionalidad a cada uno de los métodos utilizando Active Record.

Devise: Sistema de autenticación

Abrir el archivo Gemfile y al final del archivo agregar lo siguiente:

gem 'devise'

Guardamos el archivo y en la terminal ejecutar:

$ bundle install
$ rails generate devise:install

• definir root_url

• En app/views/layouts/application.html.erb agregar flash messages:

<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>

Desde la terminal generar el modelo devise:

$ rails generate devise User

Ejecutar migración:

$ rake db:migrate

Generamos las vistas de devise:

$ rails g devise:views

Integrar Bootstrap

Instalar las gemas Ruby para Bootstrap

Abrir el archivo Gemfile y al final del archivo agregar lo siguiente:

gem 'bootstrap-sass', '~> 3.3.6'
gem 'autoprefixer-rails'

Guardamos el archivo y en la terminal ejecutar el comando bundle install:

$ bundle install

Importar CSS Bootstrap

Renombrar app/assets/stylesheets/application.css a app/assets/stylesheets/application.css.sass

Abrimos el archivo renombrado e importamos los css:

@import "bootstrap-sprockets"
@import "bootstrap"

Importar JavaScript Bootstrap

Necesitas agregar:

//= require bootstrap-sprockets

En el archivo app/assets/javascripts/application.js:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

Gemas recomendables

# Use SCSS for stylesheets
gem 'bootstrap-sass', '~> 3.3.6'
gem 'autoprefixer-rails'

gem "font-awesome-rails"

gem "will_paginate"

Nota: Siempre que agregues una gema al archivo Gemfile, debes ejecutar el comando bundle install.

Scaffold

Para generar un scaffold utilizaremos la terminal.

Sintaxis: rails generate scaffold {Nombre_modelo} {campo1_modelo campo2_modelo, etc.}

Ejemplo:

$ rails generate scaffold Comment user:references post:references body:text 

Luego ejecutamos la migración:

$ rake db:migrate

Mailer

Para el envío de correo electrónico podemos utilizar la terminal para generar parte del código.

Sintaxis:

rails g mailer {NombreMailer}

Ejemplo:

$ rails g mailer PostMailer