Tutorial Completo para Crear una Aplicación de Blog con Ruby on Rails

Introducción

En este tutorial, orientado a desarrolladores principiantes e intermedios, aprenderás a crear una aplicación de blog con Ruby on Rails desde cero. Cubriremos desde la configuración del entorno, generación del proyecto, hasta la implementación completa de funcionalidades CRUD para manejar publicaciones, manejo de rutas, validación de datos y diseño básico con Bootstrap.

Este tutorial es ideal para quienes quieran iniciarse en el desarrollo web con Ruby y la programación backend en Rails, permitiendo construir una aplicación funcional y escalable.

Índice

Configuración del Entorno
Creación del Proyecto Rails
Generación del Modelo Post
Controladores y Vistas para Publicaciones
Implementación de Funcionalidades CRUD
Manejo de Rutas
Validación de Datos
Diseño Básico con Bootstrap
Conclusión y Buenas Prácticas

Configuración del Entorno

Para desarrollar con Ruby on Rails, primero necesitas instalar las siguientes tecnologías:

Ruby (versión recomendada >= 3.0)
SQLite3 (base de datos por defecto para desarrollo)
Node.js y Yarn (para manejar dependencias JS)
Rails (framework Rails)

Paso 1: Instalar Ruby

Recomendamos utilizar un gestor de versiones como RVM o rbenv. Por ejemplo, con RVM:

# Instalar RVM (si no está instalado)
\curl -sSL https://get.rvm.io | bash -s stable

# Instalar Ruby
rvm install 3.1.2
rvm use 3.1.2 --default

# Verificar versión
ruby -v

# Instalar RVM (si no está instalado)

\curl -sSL https://get.rvm.io | bash -s stable

# Instalar Ruby

rvm install 3.1.2

rvm use 3.1.2 --default

# Verificar versión

ruby -v

Paso 2: Instalar Node.js y Yarn

Para manejar JavaScript y paquetes necesarios para Rails:

# Ubuntu/Debian ejemplos:
sudo apt-get install -y nodejs yarn

# Comprobar versiones
yarn -v
node -v

# Ubuntu/Debian ejemplos:

sudo apt-get install -y nodejs yarn

# Comprobar versiones

yarn -v

node -v

Paso 3: Instalar Rails

Instala la gema Rails:

gem install rails -v 7.0.4

# Verificar instalación
rails -v

gem install rails -v 7.0.4

# Verificar instalación

rails -v

Nota: Puedes verificar las últimas versiones oficiales en la documentación de Ruby on Rails.

Creación del Proyecto Rails

Ahora que tenemos el entorno listo, crearemos un nuevo proyecto Rails para nuestro blog.

# Crear nuevo proyecto llamado 'blog'
rails new blog

# Entrar al directorio
cmp "blog"

# Iniciar servidor web para verificar
rails server

# Crear nuevo proyecto llamado 'blog'

rails new blog

# Entrar al directorio

cmp "blog"

# Iniciar servidor web para verificar

rails server

Abre tu navegador y navega a http://localhost:3000, deberías ver la página de bienvenida de Rails.

Generación del Modelo Post

En una aplicación de blog, las publicaciones o “posts” son los datos principales. Vamos a crear un modelo Post que tendrá un título y un contenido.

# Generar modelo Post con título (string) y contenido (text)
rails generate model Post title:string content:text

# Migrar la base de datos para crear la tabla posts
rails db:migrate

# Generar modelo Post con título (string) y contenido (text)

rails generate model Post title:string content:text

# Migrar la base de datos para crear la tabla posts

rails db:migrate

Qué ocurre aquí:

Se genera un archivo de migración que crea la tabla posts.
El modelo Post se crea dentro de app/models/post.rb.

Controladores y Vistas para Publicaciones

Generamos un controlador para manejar las publicaciones. Usaremos el generador scaffolding para agilizar.

rails generate scaffold_controller Post title:string content:text

1 2	rails generate scaffold_controller Post title:string content:text

Esto crea las vistas y el controlador para manejar posts.

Si prefieres hacerlo manualmente:

# Generar controlador sin métodos
rails generate controller Posts

# Generar controlador sin métodos

rails generate controller Posts

Luego añadimos acciones en app/controllers/posts_controller.rb.

Implementación de Funcionalidades CRUD

CRUD significa Crear, Leer, Actualizar y Borrar. Estas acciones son básicas para manejar posts.

Código típico de las acciones en el controlador app/controllers/posts_controller.rb:

class PostsController < ApplicationController
  before_action :set_post, only: [:show, :edit, :update, :destroy]

  # GET /posts
  def index
    @posts = Post.all.order(created_at: :desc)
  end

  # GET /posts/:id
  def show
  end

  # GET /posts/new
  def new
    @post = Post.new
  end

  # POST /posts
  def create
    @post = Post.new(post_params)
    if @post.save
      redirect_to @post, notice: 'Post creado correctamente.'
    else
      render :new
    end
  end

  # GET /posts/:id/edit
  def edit
  end

  # PATCH/PUT /posts/:id
  def update
    if @post.update(post_params)
      redirect_to @post, notice: 'Post actualizado correctamente.'
    else
      render :edit
    end
  end

  # DELETE /posts/:id
  def destroy
    @post.destroy
    redirect_to posts_url, notice: 'Post eliminado correctamente.'
  end

  private
    def set_post
      @post = Post.find(params[:id])
    end

    # Solo parámetros permitidos
    def post_params
      params.require(:post).permit(:title, :content)
    end
end

class PostsController < ApplicationController

before_action :set_post, only: [:show, :edit, :update, :destroy]

# GET /posts

def index

@posts = Post.all.order(created_at: :desc)

end

# GET /posts/:id

def show

end

# GET /posts/new

def new

@post = Post.new

end

# POST /posts

def create

@post = Post.new(post_params)

if @post.save

redirect_to @post, notice: 'Post creado correctamente.'

else

render :new

end

# GET /posts/:id/edit

def edit

end

# PATCH/PUT /posts/:id

def update

if @post.update(post_params)

redirect_to @post, notice: 'Post actualizado correctamente.'

else

render :edit

end

# DELETE /posts/:id

def destroy

@post.destroy

redirect_to posts_url, notice: 'Post eliminado correctamente.'

end

private

def set_post

@post = Post.find(params[:id])

end

# Solo parámetros permitidos

def post_params

params.require(:post).permit(:title, :content)

end

Cada método controla una acción:

index: lista todos los posts
show: muestra uno solo
new y create: para crear
edit y update: para actualizar
destroy: para borrar

Manejo de Rutas

Para que Rails dirija correctamente las URLs a nuestro controlador PostsController, definimos rutas en config/routes.rb.

Rails.application.routes.draw do
  # Ruta raíz al índice de posts
  root 'posts#index'

  # Rutas REST para posts
  resources :posts
end

Rails.application.routes.draw do

# Ruta raíz al índice de posts

root 'posts#index'

# Rutas REST para posts

resources :posts

end

La línea resources :posts genera automáticamente todas las rutas para las acciones CRUD mencionadas:

Validación de Datos

Para evitar datos inválidos, agregaremos validaciones en el modelo Post.

Edite app/models/post.rb:

class Post < ApplicationRecord
  # Validar que el título esté presente y tenga mínimo 5 caracteres
  validates :title, presence: true, length: { minimum: 5 }

  # Validar que el contenido esté presente
  validates :content, presence: true
end

class Post < ApplicationRecord

# Validar que el título esté presente y tenga mínimo 5 caracteres

validates :title, presence: true, length: { minimum: 5 }

# Validar que el contenido esté presente

validates :content, presence: true

end

Rails rechazará guardar un post si no cumple estas reglas. Esto se refleja en el controlador con if @post.save.

En las vistas, mostraremos los mensajes de error (ver sección de vistas).

Diseño Básico con Bootstrap

Para que la app se vea moderna y responsive, agregaremos Bootstrap.

Paso 1: Instalar Bootstrap en Rails 7

Rails 7 usa importmap por defecto, pero para un tutorial sencillo, usaremos Bootstrap vía CDN.

Edita app/views/layouts/application.html.erb y añade en <head>:

<!-- Bootstrap CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ENjdO4Dr2bkBIFxQpeo5lRZ9K0hoEQclqo6wW6ZrZH81PoYlFhbGU+6BZp6G7niu" crossorigin="anonymous">

Paso 2: Modificar las vistas para usar clases Bootstrap

Ejemplo para app/views/posts/index.html.erb:

<h1 class="mb-4">Listado de Posts</h1>

<%= link_to 'Nuevo Post', new_post_path, class: 'btn btn-primary mb-3' %>

<table class="table table-striped">
  <thead>
    <tr>
      <th>Título</th>
      <th>Creado en</th>
      <th>Acciones</th>
    </tr>
  </thead>
  <tbody>
    <% @posts.each do |post| %>
      <tr>
        <td><%= link_to post.title, post %></td>
        <td><%= post.created_at.strftime('%d/%m/%Y %H:%M') %></td>
        <td>
          <%= link_to 'Editar', edit_post_path(post), class: 'btn btn-warning btn-sm me-2' %>
          <%= link_to 'Eliminar', post, method: :delete, data: { confirm: '¿Estás seguro?' }, class: 'btn btn-danger btn-sm' %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

<h1 class="mb-4">Listado de Posts</h1>

<%= link_to 'Nuevo Post', new_post_path, class: 'btn btn-primary mb-3' %>

<thead>

<tr>

<th>Título</th>

<th>Creado en</th>

<th>Acciones</th>

</tr>

</thead>

<tbody>

<% @posts.each do |post| %>

<tr>

<td>

<%= link_to 'Editar', edit_post_path(post), class: 'btn btn-warning btn-sm me-2' %>

<%= link_to 'Eliminar', post, method: :delete, data: { confirm: '¿Estás seguro?' }, class: 'btn btn-danger btn-sm' %>

</td>

</tr>

<% end %>

</tbody>

</table>

Ejemplo para app/views/posts/_form.html.erb con errores de validación:

<%= form_with(model: post, local: true) do |form| %>
  <% if post.errors.any? %>
    <div class="alert alert-danger">
      <h4><%= pluralize(post.errors.count, "error") %> impedieron guardar el post:</h4>
      <ul>
        <% post.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="mb-3">
    <%= form.label :title, class: 'form-label' %>
    <%= form.text_field :title, class: 'form-control' %>
  </div>

  <div class="mb-3">
    <%= form.label :content, class: 'form-label' %>
    <%= form.text_area :content, rows: 5, class: 'form-control' %>
  </div>

  <%= form.submit class: 'btn btn-success' %>
<% end %>

<%= form_with(model: post, local: true) do |form| %>

<% if post.errors.any? %>

<h4><%= pluralize(post.errors.count, "error") %> impedieron guardar el post:</h4>

<ul>

<% post.errors.full_messages.each do |message| %>

<% end %>

</ul>

</div>

<% end %>

<%= form.label :title, class: 'form-label' %>

<%= form.text_field :title, class: 'form-control' %>

</div>

<%= form.label :content, class: 'form-label' %>

<%= form.text_area :content, rows: 5, class: 'form-control' %>

</div>

<%= form.submit class: 'btn btn-success' %>

<% end %>

Estos cambios aplican un diseño limpio y moderno usando Bootstrap.

Conclusión y Buenas Prácticas

¡Felicidades! Has construido una aplicación blog funcional con Ruby on Rails que incluye:

Configuración y creación del entorno Rails
Modelo, vistas y controlador para publicaciones
Funcionalidades CRUD completas
Manejo de rutas RESTful
Validación de datos para garantizar integridad
Diseño visual básico con Bootstrap

Buenas prácticas para continuar:

Versionar código: Usa Git para controlar versiones y colaborar
Pruebas automatizadas: Implementa tests con RSpec o Minitest
Seguridad: Sanitiza y valida toda entrada de usuario
Optimiza consultas: Usa includes para evitar queries N+1
Despliegue: Prueba desplegar en plataformas como Heroku

Próximos pasos sugeridos:

Añadir usuarios y autenticación
Implementar comentarios para posts
Mejorar diseño y añadir componentes JS

¿Quieres más tutoriales como este y consejos para tu desarrollo backend Rails? Síguenos y comparte este tutorial Ruby on Rails para crear tu blog personal o profesional.