Una versión del foro que vamos creando esta disponible en https://forum-tutorial-oxyrus.herokuapp.com

Por favor, ten presente que el testing no será parte de esta serie, la razón es que haría los posts aún más largos y deseo que la gente se mantenga conmigo a lo largo de la serie completa.

Además, asumiré que tienes instalado Ruby on Rails en tu entorno de desarrollo, hay variedad de recursos que discuten el proceso de instalación:

La estructura de nuestra aplicación

No estaremos utilizando demasiados modelos, deseo mantenerlo simple, pero increíble.

  • User -> Tiene muchos Threads y Posts
  • Thread -> Pertenece a un usuario, tiene muchos posts
  • Post -> Pertenece a un usuario y a un thread

Como podrás notar, va a ser relativamente sencillo, podríamos hacerla más compleja añadiendo categorías de forma tal que cada Thread perteneciera a una categoría, sin embargo pienso añadir roles con permisos para los usuarios, lo cuál significaría añadir más complejidad a una simple aplicación, not good!

Iniciando nuestra aplicación

Paremos de hablar y comencemos a construir, genera una nueva aplicación de Rails desde tu terminal

$ rails new forum

Con esto, crearemos la estructura de nuestra aplicación, la cuál debería de ser similar a esta:

  app/
  bin/ 
  config/ 
  db/ 
  lib/ 
  log/ 
  public/ 
  test/ 
  tmp/ 
  vendor/
  config.ru 
  .gitignore 
  Gemfile 
  Gemfile.lock 
  Rakefile
  README.rdoc
Si no conoces acerca de la estructura de directorios de Rails, te recomiendo que leas esta rápida nota acerca de ello, por Jerzi J. Gangi.

Ahora, inicia tu aplicación para ver si funciona correctamente

  $ cd forum
  $ rails s

Abracadabra, tenemos una aplicación que no hace nada aún, yay!

Nota: rails s es el equivalente a rails server, pero es más corto.

Además, me gusta utilizar control de versiones, este es un buen momento para iniciar un nuevo repositorio si tienes git installado.

  $ git init
  $ git add .
  $ git commit -m "Initialized my dragon"

Tendrán a su disposición el código en mi repositorio https://github.com/Oxyrus/forum-tutorial, si te sientes perdido o tu código no funciona, siéntete libre de echarle un vistazo!

Gemas, porque soy un minero

Amo Ruby por su ecosistema de gemas, necesitas una gema para autenticación de usuarios, ya existe, necesitas una para autorización, adivina, ya existe!

Me gusta comenzar construyendo mis aplicaciones primero creando el modelo de usuario, por fortuna, Plataformatec y un increíble grupo de contribuidores nos tiene cubiertos, Devise es el santo grial de la autenticación de usuarios, viene con todo lo que necesitas, envio de correos, confirmación de usuarios, helpers, es increíble.

Entra Gemfile, aquí declaramos que gemas vamos a usar en nuestro proyecto.

  source 'https://rubygems.org'

  gem 'rails', ‘4.2.5'
  gem 'sqlite3'
  gem 'sass-rails', '~> 5.0'
  gem 'uglifier’, '>= 1.3.0'
  gem 'coffee-rails', '~> 4.1.0'
  gem 'jquery-rails'
  gem 'turbolinks'
  gem 'jbuilder', '~> 2.0'
  gem 'sdoc', '~> 0.4.0', group: :doc
  
  group :development, :test do
   gem 'byebug'
  end
  
  group :development do
   gem 'web-console', '~> 2.0'
   gem 'spring'
  end

Removí los comentarios porque quería liberar espacio en el post!

Ahora, añade la gema de Devise justo debajo de la de sdoc

  .
  .
  .
  gem 'sdoc', '~> 0.4.0', group: :doc
  gem 'devise'
  .
  .
  .

Guarda el archivo y corre bundle desde tu terminal

$ bundle

Nota: bundle es el equivalente de bundle install, pero más corto, de nuevo.

Después de que termine de obtener las gemas, debemos usar el generador de devise

$ rails g devise:install

Nota: rails g es la versión corta de rails generate

Después de utilizar el comando, necesita algunos pasos extra por nuestra parte, vamos uno por uno.

1. Abre el archivo config/environments/development.rb y añade

config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

2. Tenemos que definir una ruta raíz, sin embargo no hemos creado una vista o controlador para esta, hagámoslo ahora!

$ rails g controller Home index

Con el comando, estamos generando el controllador HomeController con el método index. Ahora abre el archivo config/routes.rb y añade

root "home#index"

Cuando generaste el controlador una ruta fue creada, reemplázala con la que acabas de leer. Tu archivo de rutas debería de verse similar a este (sin todos los comentarios)

  Rails.application.routes.draw do
    root "home#index"
  end

Estamos pasando el controlador home y el método index, como puedes observar.

Navega a http://localhost:3000 y deberías de ver

  Home#index
  
  Find me in app/views/home/index.html.erb

Funciona!, ahora tenemos que mostrar los mensajes flash para los eventos de usuario (y nuestra aplicación como tal!)

Para hacerlo, vamos a usar un partial, crea el archivo app/views/partials/_flash.html.erb y escribe lo siguiente

  
<%= notice %>

  
<%= alert %>

Ahora vamos a renderizarlo en algún sitio, abre el archivo app/views/layouts/application.html.erb y arriba de <%= yield %> añade

  <%= render "partials/flash" %>

Aquí, pasamos el directorio (partials) y el nombre del archivo (flash), usamos el directorio porque si estuvieras en otra ruta (por ejemplo /threads/) el partial no funcionaría, buscaría el partial en el directorio threads en nuestros views, nuestra aplicación colapsaría!

En config/initializers/devise.rb busca por config.scoped_views, elimina el comentario y tórnalo en verdadero

  config.scoped_views = true

Creando el modelo de usuario

Con la instalación de Devise en lugar, es tiempo de generar nuestro modelo de usuario, hazlo con el comando

  $ rails g devise user

Ahora, corre la migración

  $ rake db:migrate

Felicitaciones, tienes un modelo de usuario funcional!, visita http://localhost:3000/users/sign_up y registra una cuenta si deseas.

Estilizando un poco

Por el momento todo va bien, pero nuestro foro se ve feo, voy a utilizar Bootstrap, siéntete libre de usar Foundation o lo que desees, intente usar Foundation mientras escribía la entrada original de este post, pero no funciono como pensaba (problemas con turbolinks).

Voy a ir a través de la instalación de Bootstrap bastante rápido, abre Gemfile y debajo de devise añade

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

Ahora, corre

  $ bundle

Renombra application.css a application.scss y editalo

Ahora abre application.js y editalo como se muestra a continuación

Añadí bootstrap-sprockets ahí, el cuál contiene todos los archivos JavaScript de Botstrap concatenados.

Instalemos simple_form en un instante, en tu Gemfile añade

  gem 'simple_form'

Como es usual, corre

  $ bundle

Y

  $ rails generate simple_form:install --bootstrap

También generaremos las vistas de devise para futura personalización

  $ rails g devise:views users

Reinicia tu servidor, navega a tu sitio y la fuente debería haber cambiado, hurra!

Genial, vamos a crear una barra de navegación para navegar alrededor de nuestra aplicación, en tu directorio de partials, crea el archivo _navbar.html.erb y editalo con el siguiente código

Abre el archivo application.html.erb y renderiza el navbar que acabamos de crear

También editaremos nuestras alertas flash para usar el estilo de Bootstrap

Usamos condicionales para revisar si existe alguna noticia o alerta, y solo mostramos estos divs si alguna de estas existe, Ruby al rescate, yay!

Esto es todo por esta entrada, prometo que la próxima será más acerca de programar la aplicación que de estilizarla :)

Puedes visitar mi blog en https://oxyrus.github.io o leerme en Medium.

Publicado originalmente en Crafting a forum using Ruby on Rails - Pt. 1