Desarrolla tu primera aplicación

Created by Vesa Vänskä, @vesan

Asegúrate de tener instalado Rails. Sigue la guía de instalación si aún no lo has instalado.

Conozca las herramientas

  Editor de Texto

Atom, Sublime Text, Vim, Emacs, y Gedit son ejemplos de editores de textos que podrás usar para escribir código y editar archivos.

 

Terminal

(Conocido como Command Prompt en Windows) Es el lugar donde inicias el servidor Rails y ejecutas comandos.

 

Navegador web

(Firefox, Safari, Chrome) para vizualizar tu aplicación.

Importante

Es importante que selecciones las instrucciones específicas a tu sistema operativo. Los comandos que necesitas correr en una computadora de Windows son un poco diferentes de Mac o Linux. Si tienes problemas, revisa el Sistema Operativo al final de cada uno de los comandos. En el caso que estés usando un servicio de nubes, necesitas correr el comando Linux aún si estás en una computadora Windows.

1.Creando la applicación

Vamos a iniciar creando una nueva aplicación llamada railsgirls.

Primero, abrimos una terminal:

  • Mac OS X: Abre Spotlight, digite Terminal y click en la applicación Terminal.
  • Windows: Click en Inicio y busca Comando Prompt, luego click Comando Prompt con Ruby on Rails.
  • Linux (Ubuntu): Buscar por Terminal en el dash y click Terminal.
  • Servicio en la nube (por ejemplo: Codepicnic): Ingresa a tu cuenta, abre tu consola, en la vista de código (lee la guía de instalación para más detalle).

Luego, digite estos comandos en el terminal:

mkdir proyectos

Puedes validar que un directorio llamado proyectos ha sido creado ejecutando el comando de listado: ls. Puedes ver que el directorio proyectos como resultado. Ahora querrás cambiar el directorio que estás usando para ingresar al folder proyectos:

cd proyectos

Puedes validar que estás ahora en un directorio o folder vacío, ejecutando el comando de listado nuevamente ls. Ahora querrás crear una nueva aplicación llamada railsgirls:

rails new railsgirls

Esto creará una nueva aplicación en el folder railsgirls, así que nuevamente tenemos que cambiar el directorio para ingresar a nuestra app. Ejecuta:

cd railsgirls

Si ejecutas ls dentro del directorio, deberías ver los folders como app y config. Puedes comenzar el servidor de rails, ejecutando:

rails server
mkdir proyectos

Puedes validar que un directorio llamado proyectos ha sido creado ejecutando el comando de listado: dir. Debes de poder ver el directorio proyectos en el resultado. Ahora quieres cambiar el directorio en el que actualmente te encuentras al folder de proyectos, ejecutando:

cd proyectos
rails new railsgirls
cd railsgirls
rails server

Puedes validar que estás ahora en un directorio o folder vacío, ejecutando el comando de listado nuevamente dir. Ahora querrás crear una nueva aplicación llamada railsgirls:

rails new railsgirls

Esto creará una nueva aplicación en el folder railsgirls, así que nuevamente tenemos que cambiar el directorio para ingresar a nuestra app. Ejecuta:

cd railsgirls

Si ejecutas dir dentro del directorio, deberías ver los folders como app y config. Puedes comenzar el servidor de rails, ejecutando:

rails server

Abre http://localhost:3000 en tu navegador. Si estás usando un servicio en la nube (por ejemplo Codepicnic), utiliza su funcionalidad de preview (puedes ver la guía de instalación para más detalle).

En el navegador o en la funcionalidad de vista previa, debería verse una página “Welcome aboard”, lo que significa que la generación de tu nueva aplicación esta funcionando correctamente.

Cuando el servidor de rails está ejecutándose, el When the símbolo de sistema no podrá ejecutar nuevos comandos. Si intentas correr cd o cualquier otro comando, simplemente no funcionará. Para regresar al símbolo de sistema normal:

Presiona Ctrl+C en el terminal para salir del servidor.

Coach: Explique que hace cada comando. ¿Qué fue generado? ¿Quá hace el servidor?

2.Crear idea scaffold

Vamos a usar la funcionalidad de scaffold para generar un punto de partida que nos permita listar, agregar, eliminar, editar, y ver cosas; en nuestro caso ideas.

Coach: ¿Qué es Rails scaffolding? (Explique el comando, el nombre de modelo y la relación de tablas en la base de datos, nombrando las convenciones, atributos y tipos, etc.) ¿Qué son las migraciones y por qué son necesarias?

rails generate scaffold idea name:string description:text picture:string

El scaffold crea nuevos archivos en el directorio del proyecto, pero para hacer que funcionen correctamente, necesitamos ejecutar otros comandos para actualizar nuestra base de datos y reiniciar el servicor.

bin/rake db:migrate
rails server
ruby bin/rake db:migrate
rails server

Abre http://localhost:3000/ideas en tu navegador. Prueba lo que tienes ejecutando, con estas pocas líneas de comando. Usuarios de un servicio en la nube necesitan agregar ‘/ideas’ a su url de vista previa (ver la guía de instalación).

Presione CTRL-C en la terminal para salir del servidor.

Si les sale un error que menciona execJS: Esto sucede en Windows 7 Abran el archivo app/views/layouts/application.html.erb y en las líneas:

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

Reemplace ‘application’ por ‘default’:

<%= stylesheet_link_tag    'default', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'default', 'data-turbolinks-track' => true %>

3.Diseño

Coach: Hable acerca de la relación entre HTML y Rails. ¿Qué parte de las vistas es HTML y qué es Ruby Embebido (ERB)? ¿Qué es MVC y cómo se relaciona con todo esto? (Modelos y controladores son responsables para la generacion de las vistas con HTML.)

La aplicación no se ve muy bien aún. Vamos a hacer algo con esto. Usaremos el proyecto Twitter Bootstrap para darle un mejor estilo.

Abre app/views/layouts/application.html.erb en tu editor de texto y encima de la linea

<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>

incluya

<link rel="stylesheet" href="http://railsgirls.com/assets/bootstrap.css">
<link rel="stylesheet" href="http://railsgirls.com/assets/bootstrap-theme.css">

y reemplace

<%= yield %>

por

<div class="container">
  <%= yield %>
</div>

Tambíen vamos agregar un barra de navegación y un pie de página en nuestro layout. En el mismo archivo, debajo de <body> agregar

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">The Idea app</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/ideas">Ideas</a></li>
      </ul>
    </div>
  </div>
</nav>

y antes de </body> agregar

<footer>
  <div class="container">
    Rails Girls 2016
  </div>
</footer>
<script src="//railsgirls.com/assets/bootstrap.js"></script>

Ahora además vamos a cambiar el estilo de la tabla ideas. Abre app/assets/stylesheets/application.css y al final agregar

body { padding-top: 100px; }
footer { margin-top: 100px; }
table, td, th { vertical-align: middle; border: none; }
th { border-bottom: 1px solid #DDD; }

No se olvide de iniciar el servidor nuevamente:

rails server

Ahora refresque el navegador para ver qué fue cambiado. Además puedes cambiar el HTML & CSS libremente.

En caso que tu terminal muestre un mensaje de error que de alguna manera implique que hay algo malo con tu JavaScript o CoffeeScript, instala nodejs. Este problema no debería aparecer cuando has usado el RailsInstaller, pero cuando has instalado Rails via gem install rails).

Coach: Hable un poco acerca de CSS y layouts.

4.Agregando subida de imagenes

Necesitamos instalar una pieza de sotfware para nuestra subida de imagenes en Rails.

Abre Gemfile en el directorio del proyecto usando tu editor texto y debajo de la linea

gem 'sqlite3'

Agregue

gem 'carrierwave'

Coach: Explique qué son las librerias y por qué son muy útiles. Describe qué es el software open source.

Si el servidor está corriendo. Presione Ctrl+C para cerrarlo.

En la terminal ejecute:

bundle

Ahora podemos generar el código para el manejo de uploads. En la terminal ejecutar:

rails generate uploader Picture

Por favor reinicia el servidor de rails ahora.

Nota: Algunas personas podrían estar usando una segunda terminal para correr el servidor de rails continuamente. Si es así, necesitas reiniciar el proceso del servidor Rails ahora. Esto es necesario para que la aplicación pueda cargar la librería.

Abre app/models/idea.rb y debajo de la línea

class Idea < ActiveRecord::Base

agregue

mount_uploader :picture, PictureUploader

Abre app/views/ideas/_form.html.erb y cambie

<%= f.text_field :picture %>

a

<%= f.file_field :picture %>

A veces, podrías obtener el error TypeError: can’t cast ActionDispatch::Http::UploadedFile to string.

Si esto sucede, en el archivo

app/views/ideas/_form.html.erb cambia la línea

<%= form_for(@idea) do |f| %>

a

<%= form_for @idea, :html => {:multipart => true} do |f| %>

En tu navegador, agregar nueva idea con una imagen. Cuando cargas una imagen no se ve bien, porque te muestra sólo la ruta del archivo, Así que vamos arreglar eso.

Abre app/views/ideas/show.html.erb y cambie

<%= @idea.picture %>

a

<%= image_tag(@idea.picture_url, :width => 600) if @idea.picture.present? %>

Ahora refresca tu navegador para ver los cambios.

Coach: Hable un poco acerca de HTML.

5.Ajustes finales en las rutas

Al abrir http://localhost:3000 (o tu url de vista previa, si estás usando un servicio en la nube) aún seguiremos viendo la página “Welcome aboard”. Vamos a redireccionar a la página de ideas.

Abrir el archivo config/routes.rb y después de la primera línea, agregar

root :to => redirect('/ideas')

Prueba el cambio abriendo el url raíz (http://localhost:3000/ o tu url de vista previa) en el navegador.

Coach: Hable sobre rutas, e incluya los detalles en el orden de las rutas y su relación con los archivos estáticos.

Usuarios de Rails 3: Necesitarás eliminar el archivo index.html del directorio /public/ para que esto funcione.

Crea una página estática en tu app

Agreguemos una página estática en nuestra aplicación que contenga información sobre el autor de la app -¡tú!

rails generate controller pages info

Este comando creará un nuevo folder debajo de app/views llamado /pages y bajo éste, un archivo llamado info.html.erb que será tu página de información.

También agrega una nueva ruta simple a tu archivo routes.rb.

get "pages/info"

Ahora si abres el archivo app/views/pages/info.html.erb y agregas información sobre ti en HTML, serás capaz de ver tu nueva página de información. Sólo lleva tu navegador a http://localhost:3000/pages/info o si estás usando un servicio en la nube, agrega ‘/pages/info’ a tu url de vista previa.

6+.¿Qué sigue?

  • Agregar diseño usando HTML & CSS
  • Agregar ratings
  • Use CoffeeScript (o JavaScript) para adicionar interacción
  • Agregar redimencionamiento de imagen para que la carga de imagenes sea más rápido

Guías adicionales