TODO LIST APP en Rails

TODO LIST APP en Rails

  • 2015-12-08

Introducción

Vamos a crear una aplicación de un todo list (lista de tareas).

Que es un recurso CRUD y explicar un poco sobre un modelo TASK.
TASK se compone de 3 atributos:

  • title string
  • description text
  • complete boolean

Lo básico que necesitas saber:

  • Tipos de datos
  • Variables
  • Ciclos
  • Métodos
  • HTML y CSS

Objetivos Académicos

¿ Qué es una applicación web ?
¿ Cómo esta estructurada (Arquitectura MVC) ?
¿ Recurso CRUD ?
¿ Qué es lo mínimo necesario para crear una app ?

Actividades

Crear una aplicación de Rails

1) Crear una nueva aplicación de rails

  • Instalar la gema de rails (si es que no esta instalada)

    $ gem install rails --no-ri --no-rdoc
    
  • Crear nuestra aplicación

    $ rails new todo_app --skip-test-unit
    
  • Movernos al directorio donde creamos la aplicación $ cd /path/to/directory

2) Correr el servidor para verificar que todo esté funcionando correctamente (se recomienda correr el comando en una nueva ventana de la terminal):

$ rails s

3) Acceder en el navegador a la siguiente dirección http://localhost:3000, en donde verás la página default de bienvenida de rails.

Crear el modelo y la base de datos

Rails tienen algunos comandos (generadores) que te ayudan a crear los archivos que vamos a necesitar para este paso insertando el código necesario para empezar a desarrollar.

  • Corre el siguiente generador:

    $ rails generate model task title:string description:text complete:boolean
    
  • Abre el directorio raíz de la aplicación en Sublime Text.

  • En la terminal vamos a crear la base de datos donde se guardará la información de nuestra aplicación.

    $ rake db:create
    

Para ir modificando una base de datos Rails tiene un concepto llamado migraciones, con el que administra éstos cambios para facilitar el desarrollo. Cada migración contiene un cambio.

El comando rails generate model ... creó un archivo de migración, el cual contiene el código que especifica el cambio. Para aplicar este cambio a la base de datos usamos el comando:

$ rake db:migrate

Crear las rutas

Dentro del archivo config/routes.rb

resources :tasks

Crear el controlador

Vamos a crear un controlador para el modelo Task con el siguiente comando:

$ rails g controller tasks

Este comando nos crea el archivo app/controllers/tasks_controller.rb. Dentro de este archivo vamos a crear la funcionalidad necesaria para las acciones del CRUD de tasks.

CRUD de task

Para crear una nueva task necesitamos dos acciones:

  • new - Nos sirve para desplegar una forma al usuario, donde introducirá los valores de la nueva task.
  • create - Nos servirá para crear y guardar la nueva task en la base de datos.

Acción new

Dentro del controlador pega el siguiente código:

  def new
    @task = Task.new
    # render 'tasks/new.html.erb'
  end

La acción anterior crea una task vacía y como especifica el comentario, se mostrará el archivo 'tasks/new.html.erb'. Este archivo no existe todavía.

Crea el archivo 'app/views/tasks/new.html.erb' y copia el siguiente HTML que queremos mostrar al usuario.

<h1>New Task</h1>

<%= form_for(@task) do |f| %>
  <div>
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </div>
  <div>
    <%= f.label :description %><br>
    <%= f.text_area :description %>
  </div>
  <div>
    <%= f.label :complete %><br>
    <%= f.check_box :complete %>
  </div>
  <div>
    <%= f.submit %>
  </div>
<% end %>

Una vez que hemos hecho esto, podemos ver nuestra forma en la siguiente url http://localhost:3000/tasks/new.

Acción create

La forma anterior se enviará a la acción de create de nuestro controlador. Por lo tanto necesitamos crear la acción con el siguiente código, que contendrá la lógica para crear y guardar el task en la base de datos:

  def create
    @task = Task.new(task_params)

    @task.save
    redirect_to tasks_path
  end

  private

    def task_params
      params.require(:task).permit(:title, :description, :complete)
    end

El método 'create' crea una nueva task con los parámetros que le pasó la forma. Después la guarda y redirige al usuario a tasks_path que es la vista index.

Adicionalmente pusimos un método privado que se encarga de recibir los parámetros que envió la forma y omitir información no permitida.

Vuelve a entrar a la url http://localhost:3000/tasks/new, llena los datos de una task y da click en el botón Create task. Esto nos dará un error.

Acción index

El error anterior nos especifica que necesitamos crear una acción index en nuestro controlador. Esta acción enlistará todas las tasks que existen.

Pega el siguiente código en el controlador:

  def index
    @tasks = Task.all
    # render 'tasks/index.html.erb'
  end

La acción anterior trae de la base de datos todas las tasks y como especifica el comentario, se mostrará el archivo 'tasks/index.html.erb'. Este archivo no existe todavía.

Crea el archivo y copia el siguiente HTML y Ruby que enlista los tasks que trajimos de la base de datos.

<h1>Listing Tasks</h1>

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Complete</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @tasks.each do |task| %>
      <tr>
        <td><%= task.title %></td>
        <td><%= task.complete %></td>
        <td><%= link_to 'Show', task %></td>
        <td><%= link_to 'Edit', edit_task_path(task) %></td>
        <td><%= link_to 'Destroy', task, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<%= link_to 'New Task', new_task_path %>

Ahora configuramos la ruta default de nuestra aplicación, entramos al archivo config/routes.rb y agregamos la siguiente linea

root 'tasks#index'

Ahora si entramos a la url http://localhost:3000 podremos ver la tarea que creamos en el paso anterior.

Acción show

Haz click en el link de 'Show' de una de las tasks y fíjate en la url.
Las url's en varias ocasiones contienen información relevante sobre la petición (http request). En este caso fíjate en el número que trae, que corresponde al id de la task que queremos mostrar.

La acción show muestra el detalle de una task en particular. Pega el siguiente código en el controlador para crear la acción show:

  def show
    @task = Task.find(params[:id])
    # render 'tasks/show.html.erb'
  end

La acción anterior trae de la base de datos una task pasándole un id. Para acceder al id de la url, utilizamos el hash params.
Esta acción mostrará el archivo 'tasks/show.html.erb'. Este archivo no existe todavía.

Crea el archivo y copia el siguiente HTML y Ruby que mostrará el detalle del task que trajimos de la base de datos.

<p>
  <strong>Title:</strong>
  <%= @task.title %>
</p>

<p>
  <strong>Description:</strong>
  <%= @task.description %>
</p>

<p>
  <strong>Complete:</strong>
  <%= @task.complete %>
</p>

Crea algunas nuevas tasks y entra a la vista de show, para tratar de entender los bloques de código anteriores.

Acción edit

La acción edit, nos permitirá corregir una task en caso de que nos hayamos equivocado al introducirla, o cambiar el estado de la task cuando la completamos.

Como en todas las acciones anteriores vamos a comenzar incluyendo el código necesario en el controlador. Agrega las siguientes líneas:

  def edit
    @task = Task.find(params[:id])
    # render 'tasks/edit.html.erb'
  end

Y una vez más, tenemos que crear el archivo de la vista que indica el comentario. Tendrá el siguiente código:

<h1>Edit Task</h1>

<%= form_for(@task) do |f| %>
  <div>
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </div>
  <div>
    <%= f.label :description %><br>
    <%= f.text_area :description %>
  </div>
  <div>
    <%= f.label :complete %><br>
    <%= f.check_box :complete %>
  </div>
  <div>
    <%= f.submit %>
  </div>
<% end %>

Con esto ya funcionan los links que dicen 'Edit' en la url http://localhost:3000. Al dar click en cualquiera de estos links, podemos ver nuestra forma.

Acción update

La forma anterior se enviará a la acción de update de nuestro controlador. Necesitamos crear la acción con el código que contendrá la lógica para obtener de la base de datos el task y guardarlo en la base de datos con los nuevos valores.

  def update
    @task = Task.find(params[:id])
    @task.update(task_params)

    redirect_to task_path
  end

En la forma del paso anterior cambia los valores de una task y da click en el botón de 'Update Task'. Fíjate como la última línea indica qué página nos muestra después de actualizar la task (task_path == acción show).

Acción delete

La última funcionalidad que nos falta es poder borrar una task. Para esto vamos a crear la acción destroy. Copia el siguiente código en el controlador.

  def destroy
    @task = Task.find(params[:id])
    @task.destroy

    redirect_to tasks_path
  end

Este código hace que funcionen los links que dicen 'destroy' en la url http://localhost:3000.

Con todos estos pasos ya tenemos un recurso con todas las acciones CRUD.

Agregar estilos CSS

Un ultimo paso es hacer que nuestra aplicación se vea un poco mejor, esto lo podemos hacer modificando el CSS de la pagina
nos vamos a el archivo que se encuentra en 'app/assets/stylesheets/tasks.scss' (este es un archivo creado por default cuando creamos nuestro controlador de tasks) y agregamos el siguiente código que nos permitira cambiar el color, tamaño de la letra y da un poco de estilo a nuestra tabla.

body {
  background: #F5F5F5 none repeat scroll 0% 0%;
  font-family: Helvetica, Arial, Sans-Serif;
}

h1 {
  color: rgba(175, 47, 47, 0.45);
  font-weight: bold;
}

table {
  background: white;
  margin-bottom: 2em;
  border: black solid 2px;
  color: #4D4D4D;
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5), 0px 25px 50px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5), 0px 25px 50px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5), 0px 25px 50px 0px rgba(0, 0, 0, 0.2);
  text-align: center;
  border-collapse: collapse;
}

form {
  background: white;
  margin-bottom: 2em;
  border: black solid 2px;
  color: #4D4D4D;
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5), 0px 25px 50px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5), 0px 25px 50px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5), 0px 25px 50px 0px rgba(0, 0, 0, 0.2);
  text-align: justify;
  width: 400px;
  padding: 16px;
}

th {
  border-bottom: black dashed 1px;
  padding: 12px;
}

tr {
  border: grey solid 1px;
}

td {
  padding: 12px;
}

a {
  color: grey;
  font-weight: bold;
}

¡¡Felicidades acabas de crear tu primera app de Rails !!