Programación
en Ruby on Rails en
Microsoft Windows XP, Vista, 7 y 8
Esta es la segunda parte, sobre programación en
Ruby on Rails. La primera
parte la pueden encontrar en el siguiente enlace:
En esa parte se explicó:
·
Cómo instalar y configurar Ruby on Rails.
·
Cómo se divide un proyecto de Ruby on Rails de acuerdo al Modelo
Vista Controlador.
·
Cómo se hacen bucles en Ruby.
·
Cómo manejar la consola para crear
proyectos y hacer algunas consultas a la base de datos sqlite.
Entre otras cosas.
Quiero hacer hincapié en el hecho de que ese
tutorial lo he realizado de acuerdo a mis conocimientos. O sea, que si usted
sabe mucho más que yo, puede que le resulte muy obvio su contenido.
Si por el contrario, sabe mucho menos que yo,
entonces probablemente no haya comprendido casi nada.
Actualmente me encuentro aprendiendo un poco más
sobre las siguientes tecnologías:
·
API’s
·
Frameworks
·
HTML5
·
CSS3
·
Javascript y JQuery
·
Perl
·
C
·
Android
(Java)
·
Objective-C
Esas en negro, son a las que les estoy dando mayor
énfasis.
Lo normal sería, que primero aprendiera HTML,
luego CSS, luego PHP y Javascript, y ahí
seguidamente.
Pero es que las tecnologías cambian, hay que
ponerse al día. No puedo gastar todo el tiempo aprendiendo tanto de cada
cosa, sino que tengo que ver cuáles cosas resulta más productivas y a las que
se les puede sacar mayor provecho.
Y son precisamente esas cosas en las que estoy
enfocado ahora. Los lenguajes para diseño y programación Web, las
aplicaciones para dispositivos móviles o que las que son para escritorio que
interactúan con redes sociales.
Tengo 3 años de estar llevando una ingeniería en
computación, y no deja de sorprenderme la cantidad de cosas que uno debe
saber de antemano para poder producir software de calidad, o por lo menos una
reléase estable que se pueda vender.
Normalmente usted tendría que saber mucho de PHP, Javascript, CSS y HTML para poder entrar de lleno a
aprender desarrollo web con Frameworks tal como
Ruby on Rails, o API’s como las de Google o Facebook. Pero no hay tiempo.
Y eso que tengo bastante tiempo libre, si tuviera menos tiempo, sería
imposible.
Todos saben que aprender a improvisar y hacerlo
bien es lo más productivo y beneficioso, por eso me lancé de lleno con Ruby on Rails, y voy aprendiendo, en
el proceso, algunas cosas de CSS3, HTML5, y Javascript.
Bien, ahora a comenzar.
Las bases de datos uno las puede manejar con
lenguajes sql, pero también con Consultas ActiveRecord.
Ya hemos visto algunas en el tutorial anterior:
|
MiModelo.all
|
Muestra todos los registros de la tabla
modelo
|
|
Loquesea
= MiModelo.new
|
Crea una nueva instancia de la clase MiModelo
|
|
Loquesea.atributo
= valor
|
Asigna un valor al atributo de esa clase
|
|
Loquesea.save
|
Guarda la instancia en la tabla MiModelo
|
Como puede ver, una Tabla y una Clase están
relacionadas en Ruby on Rails.
Pero además, hay otros “comandos” o “métodos” que
se pueden usar
|
MiModelo.find(3)
|
Busca el registro con id=3
|
|
MiModelo.last
|
Retorna el último registro en la tabla MiModelo
|
|
MiModelo.where(:miNombreEnModelo=> “Geovanny Mendez Marin”)
|
Retorna el registro o los registros donde
el atributo sea igual a un valor específico
|
|
MiModelo.order(“miNombreEnModelo”)
|
Ordena los registros por un atributo en
específico por defecto es ascendente
|
|
MiModelo.order(“miNombreEnModelo ASC”)
MiModelo.order(“miNombreEnModelo DESC”)
|
Ordena de forma ascendente o descendente
según lo indicado, de acuerdo al atributo “miNombreEnModelo”
|
|
MiModelo.limit(5)
|
Muestra 5 registros empezando desde el
primero
|
|
MiModelo.limit(5).offset(3)
|
Muestra 5 registros empezando del tercero
|
Además, se pueden combinar. Por ejemplo este
último es una combinación de limit y offset. Si
utiliza solo offset, retorna todos los registros a partir del tercero.
Otro ejemplo de combinación es el siguiente:
MiModelo.order(“miNombreEnModelo DESC”).limit(5).offset(3)
Estos métodos son una forma más rápida de realizar
consultas php. El Modelo Vista Controlador facilita
la tarea de organizar y generar páginas de forma dinámica.
Hay otra técnica que sirve para acelerar el
proceso de creación de contenido, a continuación nos referiremos a los
siguientes temas:
·
Modelo REST
·
Scaffolding
Básicamente el Scaffolding
hace lo siguiente:
·
Crea un modelo, con un controlador y una
vista
·
Crea un formulario que usa el modelo REST
Es un asunto de formularios. Los formularios
funcionan con HTTP, que tiene dos acciones principales:
·
GET: Obtener información
·
POST: Escribir información
Pero ¿qué pasa si queremos ELIMINAR o ACTUALIZAR
información? Para ello se usa el modelo REST, que tiene dos acciones
adicionales
·
DELETE: Elimina datos
·
PUT: Actualiza datos
Estas dos acciones REST las construye usando
lenguaje Javascript.
Vamos a crear en el mismo proyecto, una
funcionalidad con Scaffolding.
Tiene que realizar las siguientes acciones:
|
Acción
|
Observación
|
|
Ejecute
rails
g scaffold Articulo titulo:string
texto:text
en D:\Programming\RoR\proyecto001
|
Crea un nuevo modelo, un controlador, y
una vista, usando el Scaffolding
|
|
Acción
|
Observación
|
|
Ejecute
rake
db:migrate
en D:\Programming\RoR\proyecto001
|
Migra la base de datos para el nuevo
modelo creado
|
Crea un modelo Articulo, es una tabla de la db y una clase
Crea un controlador Articulo con una serie de métodos
Crea dos atributos, título y texto, de tipo string y text
Una vez creado, usted puede entrar en la dirección
Hay un formulario donde puedes hacer uso del
programa generado.
Si usted da click en new
Articulo, lo envía a un formulario donde puedes escribir información. Esa
acción está asociada a una dirección web
Ahora si usted da cick
en Create Artículo, lo envía a la siguiente ruta,
note que al final aparece /1, que es la id del artículo creado (en la base de
datos). Usa el método POST para crear el contenido.
Si usted da click en edit, a ese /1 le agrega un edit,
quedando …/1/edit
Este lo usa para editar el contenido, con el
método PUT del modelo REST:
Al darle Update Article, lo devuelve a la página de /artículos, pero esta
vez no dice que el artículo fue creado, sino más bien dice que fue
actualizado:
Además, conforme se van agregando artículos, nos
retorna a la página /artículos, donde hay una lista. Aquí se hace uso del
método GET
Se van enlistando, y aparece una opción Destroy, que hace uso del método DELETE:
Si usted da click en Destroy, Aparece una ventana modal para confirmar la
supresión de ese artículo:
Al eliminar el artículo vuelve a la misma página
de /artículos, con la lista de todos los artículos excepto el que se ha
eliminado.
Vamos a crear un nuevo proyecto, borrando lo que
ya tenemos (si seguiste la primera parte del tutorial, tendrás creado unos
archivos.
Primero cerramos la consola cmd
si es que se está ejecutando.
Luego, eliminemos la carpeta
D:\Programming\RoR\tutorial001
Ahora estamos en la carpeta D:\Programming\RoR\
Ejecutemos los siguientes comandos en el cmd:
rails
new tutorial001
cd tutorial001
gem
install node
rails
g scaffold Articulo titulo:string
texto:text
rake
db:migrate
rails
s
Todos son comandos que ya se han visto en estos
tutoriales. Si tiene alguna duda puede consultar el material anteriormente
visto para saber la función de esos comandos. También puede consultar en google o preguntar en foros de programación.
Todo el proceso puede tardar de 3 a 5 minutos en
acabar de ejecutarse.
Esto te creará todo el proyecto y te habilitará el
servidor. No cierres el cmd porque el servidor está
corriendo.
Entra en localhost:3000/articulos
Ahora vas a ver que puedes comenzar a crear
artículos.
Vamos a mostrar todos los archivos relevantes para
la explicación sobre REST.
|
·
app
o
assets
§ images
§ javascripts
·
application.js
·
articulos.js.coffee
§ stylesheets
·
application.css
·
articulos.css.scss
·
scaffolds.css.scss
o controllers
§ application_controller.rb
§ articulos_controller.rb
o helpers
§ application_helper.rb
§ articulos_helper.rb
o views
§ layouts
·
application.html.erb
§ articulos
·
_form.html.erb
·
edit.html.erb
·
index.html.erb
·
new.html.erb
·
show.html.erb
o models
§ articulo.rb
·
config
o routes.rb
·
db
o migrate
§ 20130123143053_create_articulos.rb
|
En cuanto a las vistas, se han creado 4 vistas
adicionales:
·
_form
·
edit
·
new
·
show
De todos ellos, el _form
es el único Parcial. Los parciales pueden ser utilizados en otras vistas.
Antes de explicar el código de las vistas, primero
atendamos el código contenido en el controlador.
El controlador está especificado en el archivo artículos_controller.rb
Primero se especifica el nombre del controlador,
cuya clase es ArticulosController, que hereda de ApplicationController, que, como ya hemos dicho, es de
donde todos los controles heredarán características, y es otro archivo que
aparece en la misma carpeta donde está artículos_controller.rb.
Las líneas de la 2 a la 11 indican el primer
método de este controlador. Es como una especie de constructor.
Lo que hace es, asignarle a una variable @articulos, todos los registros de la tabla Articulo, a
través de una consulta ActiveRecord.
Recordemos que la tabla Artículo tiene registros que
tienen dos atributos, un título y un texto.
respond_to
es arreglo especial de Ruby on Rails,
y la palabra format es inventada, para iterar sobre
dicho arreglo.
Como puede ver el arreglo tiene dos tipos de
elementos, que son html y objetos json.
Estos objetos json
servirán para que nuestra aplicación pueda ser usada por terceros. No podemos
profundizar en ello, investigue a fondo los objetos json,
en mi universidad los mencionan todas las semanas pues son importantes para
la programación web.
Los comentarios indican que esta consulta será utilizada
en la ruta /artículos.
Este es parecido al método anterior, pero la
consulta ActiveRecord es diferente, porque no busca
todos los registros de la tabla Artículo, sino que solo encuentra un artículo
con una id específica.
Los comentarios de las líneas 13 y 14 muestran la
dirección en la que se utiliza este método.
Otro método idéntico al anterior, pero la consulta
ActiveRecord crea un nuevo elemento. Ponga atención
en lo siguiente: El elemento se crea, como cuando se crea la nueva instancia
de un objeto, pero recordemos que para que esta instancia se guarde en el
modelo, se necesitaría declarar @articulo.save, una
consulta que guarda el contenido de la instancia. Cuando se entra a new, a
través del link que muestran los comentarios en las líneas 24 y 25, se crea una nueva instancia, pero no se guarda.
Este método solo recupera el archivo a través de
su id, pero no lo edita, solo lo recupera de la base de datos, de la tabla
Artículo.
En este método, se crea un nuevo artículo, pero
recibiendo parámetros, desde el submit del
formulario que estará en una de las vistas.
Con el if, se intenta
guardar el archivo. @articulo.save retorna true si
el archivo se guardó exitosamente. En ese caso hace lo siguiente
Notice
= “El artículo fue creado satisfactoriamente”
Statis:
:created
Redirecciona
al @articulo, un objeto que tiene parámetros, es decir a la página donde
estaba.
Por otra parte, si el artículo no se puede guardar
por alguna razón, se retorna al formulario de new, y al objeto json se le especifica que la petición no ha podido ser
procesada.
La dirección especificada en los comentarios lo
que indica es que una vez terminada la acción de creación, debe volver a /artículos.
Es similar a la explicación anterior, pero cambia
el mensaje de created a updated.
Una vez actualizado el ítem, debe volver a la dirección /artículos/id.
En las líneas 75 y 76, se busca el artículo por su
id, y se elimina con la consulta ActiveRecord destroy.
Ahora, veamos las vistas. Voy a suprimir el código
html para centrarme solo en el código de las
consultas:
index.html.erb
Este archivo llama al método index
del controlador. La variable @articulos recoge
todos los artículos con una consulta ActiveRecords
(Articulos.all).
¿Por qué no se llama aquí en la vista? Recordemos
que estamos en la arquitectura de Modelo-Vista-Controlador, por lo que, las
vistas solo pueden acceder a la información del modelo a través del
controlador. Esto se hace con propósitos de escalamiento, de reutilización
Tal vez usted piense que esto no tiene mucho
sentido, pero cuando se hacen grandes aplicaciones y se necesitan reutilizar
módulos y código, encontrará de gran utilidad el Modelo-Vista-Controlador,
así que por ahora solo le puedo recomendar aprenderlo.
Bien, en esta línea, se recorre la tabla Articulos y se extraen todos los artículos. Se imprime el
título y el texto de cada artículo, y se envía el artículo como parámetro con
link_to.
Para poder comprender bien el código, debe
estudiar link_to. Es una palabra reservada. También
lo es edit_articulo_path. Es obvio que este código
es una abstracción de llamadas a métodos de Javascript,
pero en Ruby on Rails no
necesitas escribir el código en Javascript,
simplemente lo escribe en Ruby y que el compilador realice todas las
modificaciones pertinentes.
También está new_articulo_path.
Cuando veamos el resto de vistas, estos códigos tomarán más sentido.
new.html.erb
Cuando se llama a new articulo,
se llega a este archivo. Observe que casi no tiene código, pero muestra el
formulario, el botón de crear artículo y un botón de ir atrás.
Todo el formulario sale de la línea 3. El
formulario es una vista Parcial. Puede ser utilizado en todas las demás
vistas simplemente llamándole a través del método render.
Esto se puede hacer por la forma en que está programado, que ya la veremos
más adelante, y además por su nombre _form.html.erb,
nombre que indica que es una vista Parcial.
edit.html.erb
Es exactamente el mismo caso de new, solo cambian
los enlaces de ir atrás, o mostrar el artículo (cada artículo tiene una vista
individual)
show.html.erb
Esta es la vista individual de cada artículo. Es
igual a new y edit, pero mostrando algunos cuantos
datos del registro (el artículo, con respecto a su id).
_form.html.erb
El formulario es básicamente de las líneas 14-25,
lo que pasa es que la intercepción de los errores es muy importante en Ruby on Rails, por lo que se
capturan los mismos en las líneas 1-12.
Note que en las líneas 15 y 16 así como en las
líneas 19 y 20, tanto el text_field, el text_area y el label, se llaman
igual que los campos de Articulo.
Esto resulta importante porque resulta que luego
esos nombres son los que REST usa con Javascript
para realizar el proceso de consulta.
Como recordaremos este tutorial no tiene ninguno
anterior sobre Javascript, así que no puedo
explicar su funcionamiento. Solo cuando hagamos algo en Javascript
comprenderemos bien los EVENTOS.
Pero podemos ver el código generado:
Enlaza a varios archivos de javascript
como artículos.js y application.js. Resulta que esos archivos están vacíos,
no contienen nada. Entonces ¿De dónde saca REST las acciones de PUT, y DELETE?
Es porque, silenciosamente, agrega dos scripts de jquery
Por la misma naturaleza de reutilización de
código, Ruby on Rails no
crea nuevos códigos Javascript, sino que asume automáticamente
que un desarrollador debe usar en su sitio web las funcionalidades de la
librería jquery y agrega esta librería de dónde
saca los métodos para REST.
Otro asunto a tomar en cuenta es que esto no lo
puede hacer con el código CSS3, porque realmente no sabe cuál es el estilo
que le quiere dar el desarrollador, entonces, en el archivo scaffolds.css
escribe unos cuántos estilos.
La línea 2 indica el color de fondo de la página.
La línea 3 indica el color de la fuente, que a
veces en programación se conoce como foreground, o
también como font-color.
Ambas están escritas en código hexadecimal.
La línea 4 indica el tipo de letra y la familia.
Como no sabemos CSS3 con total exactitud no podemos saber exactamente cómo
serán usadas esas letras y en qué se diferencia el orden en el que las
pongamos. Por ejemplo si arial fuera la primera y verdana la segunda. Esto requiere un estudio de CSS.
La línea 5 indica el tamaño de la fuente en
pixeles.
La línea 6 indica el espacio que ocupa cada salto
de línea. En este caso se especifica con un número, pero también se puede
especificar con porcentajes u otros datos.
La palabra body indica que
esto afectará a los elementos que vayan entre <body></body>. El body se encuentra
en el layout application.html.erb.
La línea 9 indica que los elementos que vayan
entre <p></p>, <ol></ol>, <ul></ul> y <td></td>
El significado de cada una se:
p: Párrafo
ol:
Lista ordenada numéricamente
ul:
Lista no ordenada
td:
La fila de una tabla
Las líneas 10, 11, 12 modifican información que ya
hemos explicado.
Pre viene de preformato,
lo he visto siendo utilizado en blogs para formatear el texto de manera que
tenga ciertas condiciones especificadas.
El padding es un tipo de
margen, hay varias formas de especificarlo, y para una mejor explicación
deberías leer sobre margin y padding,
haciendo una búsqueda en google.
Este caso es un poco más “complejo” pero no
presenta ninguna dificultad comprenderlo.
La etiqueta a hace referencia a los enlaces web,
por ejemplo
<a src=”http://gmendezm.blogspot.com/”>enlace</a>
Lo cual se muestra renderizado
como
Este enlace tiene varios eventos. Cuando usted
pasa el puntero por encima del enlace renderizado,
eso se conoce como hover. Cuando el enlace ha sido
visitado, ese evento es visited. Entonces como
usted puede ver, después de visitar el enlace este se muestra de un
determinado color.
En la línea 22 se indica que el enlace
originalmente debe ir en color #000, que es el color negro.
La línea 21 indica que el evento que se está
estilizando es visited. En cuanto a la línea 22 ya
se sabe que realmente es el color del texto.
Las líneas 26-28 indican que cuando se de el evento hover (pasar el
puntero por encima del enlace) el fondo será de color negro y la fuente de
color blanco. Usted puede verificarlo en localhost:3000/articulos
pasando el puntero sobre el enlace de New Articulo, que se mostrará así:
El div es un bloque, es decir que todas los
elementos que están entre las etiquetas <div></div> conforman un
bloque.
La línea 33 muestra eventos del div, que en css se pueden separar por comas.
La línea 34 especifica el margen, con la palabra margin, y la palabra bottom
hace referencia al margen (si es izquierdo, derecho, inferior o superior)
inferior del div. Este margen debe tener un tamaño de 10 pixeles.
La línea 38 tiene la alabra
notice con un sharp, el símbolo
#, antepuesto. Esto lo que indica es que se está identificando a un elemento
con un id = notice.
Estos identificadores los usa tanto Javascript como CSS, para acceder a los elementos HTML5.
Este en particular hace referencia a la vista show.html.erb
Que lo que indica es que los mensajes con esa id
se muestren en color verde, como se muestra en la captura de ejemplo:
En este caso no se ha usado un código hexadecimal
para especificar el color, sino que se ha usado una palabra reservada, green, que indica el color específico que tendrá ese
elemento.
En la línea 42 no se antepone un # sino que se
utiliza un punto, eso hace referencia a la clase de un elemento, y se
especifica con la palabra class.
Por ejemplo, para un div, un identificador se
representa con
<div id=”identificador”></div>
Mientras que para ese mismo div, una clase se
representa con
<div class=”clase”></div>
En ambos ejemplos la palabra clase y la palabra
identificador pueden ser sustituidas por la palabra que guste.
Algunas clases se muestran, por ejemplo, en _form.html.erb
Pero la clase field_with_error
no aparce en ninguna de las vistas. Probablemente
está reservada para un campo que contenga un error, pero eso no está
implementado en el scaffolding.
En
La línea 45 muestra el tipo de forma en que se
mostrarán los errores, en forma tabular.
 |
En este caso, el identificador error_explanation tiene en la línea 49 especificado el
ancho en 450 pixeles. En la línea 50 el borde mide 2 pixeles, es de color
rojo, y su continuidad está especificada con la palabra solid
(para más información, busque sobre css border en Google). Las líneas 51-54 usted puede
obviarlas de acuerdo a todo lo anteriormente explicado.
h2 se encuentra dentro de #error_explanation. Esto quiere decir, que el componente
será un h2, pero solo será tomado en cuenta el estilo si dicho h2 está
dentro de un contenedor cuyo identificador es error_explanation.
h2 es un un
tipo de heading, un título.
En la línea 56 se especifica el
alineamiento del heading, a través de la palabra left (izquierda).
|
Por otra parte en la línea 57 se especifica que la
letra será negrita.
El resto del contenido CSS3 se obvia, con
excepción de la línea 67, que indica que el estilo de la lista será square (cuadrada).
No hay comentarios:
Publicar un comentario