1. Creación del proyecto#

Se inicia el proyecto con:

1
rails new depot
2
cd depot

Este comando genera toda la estructura base del proyecto, incluyendo soporte para JavaScript, CSS y los microframeworks necesarios para el desarrollo web.

También puede iniciarse directamente con TailwindCSS:

1
rails new depot --css tailwind

2. Generación del modelo y Scaffold#

Se genera el modelo Product con sus campos:

1
bin/rails generate scaffold Product \
2
title:string description:text image:attachment price:decimal

Esto crea automáticamente el modelo, el controlador, las vistas y la migración inicial.

En el archivo db/migrate/2025xxxx_create_products.rb, se ajusta la precisión de los precios:

1
t.decimal :price, precision: 8, scale: 2

Esta configuración define que el precio tendrá hasta 8 dígitos en total, con 2 decimales.

3. Configuración del almacenamiento de imágenes#

Para manejar archivos adjuntos (como imágenes), se instala Active Storage:

1
bin/rails active_storage:install
2
bin/rails db:migrate

Esto crea las tablas necesarias para guardar referencias a los archivos.

También se incluye en el controlador principal:

1
include ActiveStorage::SetCurrent

Esto permite a Rails mantener una sesión activa de almacenamiento para cada usuario.

4. Integración de TailwindCSS y vistas#

Para que TailwindCSS funcione en tiempo real:

1
bin/rails tailwindcss:watch
2
CTRl + C
3
bin/rails server

En la vista del formulario (form.html.erb), se aplican clases dinámicas para los campos y validaciones visuales:

1
<div class="my-5">
2
  <%= form.label :description %>
3
  <%= form.text_area :description, rows: 10, class:
4
    ["block shadow-sm rounded-md border px-3 py-2 mt-2 w-full",
5
    {"border-gray-400 focus:outline-blue-600":
6
    product.errors[:description].none?,
7
    "border-red-400 focus:outline-red-600":
8
    product.errors[:description].any?}] %>
9
</div>
10

11
<div class="my-5">
12
  <%= form.label :image %>
13
  <%= form.file_field :image, accept: "image/*", class:
14
    ["block shadow-sm rounded-md border px-3 py-2 mt-2 w-full",
15
    {"border-gray-400 focus:outline-blue-600": product.errors[:image].none?,
16
    "border-red-400 focus:outline-red-600": product.errors[:image].any?}] %>
17
</div>

Tailwind permite crear interfaces limpias y responsivas sin escribir CSS manual.

5. Carga de datos con Seeds#

Para añadir productos de prueba en la base de datos se usa seeds.rb:

1
mkdir images
2
cp ../../../Downloads/code/rails80/depot_a/db/images/*.jpg .
3
bin/rails db:seed

Esto permite insertar registros iniciales en la base de datos. Usando DB Browser for SQLite, pueden visualizarse los productos cargados.

6. Renderizado y actualización automática#

Rails maneja HTML5 de forma transparente: cuando un producto cambia, la lista se actualiza automáticamente en la vista index.html.erb.

Gracias a la integración de Active Storage y Tailwind, las imágenes y estilos se actualizan de forma sincronizada, mejorando la presentación y consistencia del sistema.

Glosario#

Reflexión final#

En esta práctica comprendimos cómo Rails automatiza la estructura del proyecto, integrando de forma transparente TailwindCSS, Active Storage y migraciones. Esto permite desarrollar aplicaciones visuales, consistentes y dinámicas sin depender de configuraciones manuales, aplicando los principios de convención sobre configuración y automatización inteligente.