El uso de Sinatra como framework es muy amplio, se puede utilizar para construir herramientas y servicios que utilicen HTTP como capa de transporte de datos, sin embargo no es lo único que podemos lograr, hay ocasiones en las que necesitamos poder construir páginas web donde podamos mostrar información o simplemente capturar datos.
Esta creación de páginas web es muy sencilla y compleja a la vez, debido a que Sinatra no nos impone ningún tipo de patrón a la hora de construirlas por lo que el nivel de complejidad dependerá de la forma en la que trabajemos, lo cual puede será muy positivo si tenemos una forma de trabajo propia ya establecida.
1- Para poder ejecutar los ejemplos de este tutorial vamos a necesitar una instalación del lenguaje Ruby al menos en su versión 1.9 en adelante.
2- Necesitamos también haber instalado la gema Sinatra y que esta esté configurada de forma adecuada. En caso de existir alguna duda con respecto a este proceso podemos consultar el siguiente tutorial.
3- Debemos tener permisos en una carpeta para ejecutar Ruby, crear y manipular archivos.
4- Debemos tener un editor de texto para poder escribir el contenido de los ejemplos, este puede ser cualquier tipo de editor de texto plano que nos permita guardar un archivo .rb como Sublime Text o incluso NotePad ++.
5- Por último necesitamos un navegador web como Google Chrome o Firefox donde podamos ejecutar nuestro ejemplo y realizar la navegación por el mismo.
Para poder crear un sitio web en primer lugar debemos tener una visión, un objetivo, algo que nos guie y que podamos utilizar de referencia cuando estemos desarrollando, esto generalmente lo conseguimos cuando sabemos que llevará nuestro proyecto.
En el caso del sitio web que construiremos el objetivo será crear tres páginas, vamos a listar las mismas:
Para iniciar debemos crear un archivo llamado inicio.rb, este será quien contendrá toda la lógica de vistas y rutas de nuestro sitio web, el contenido inicial que tiene es el siguiente:
Luego tenemos el bloque get en el cual definimos que en la ruta raíz se debe ejecutar el contenido, dicho contenido es un llamador erb a :inicio, donde en esto último debemos hacer una pausa para ver que es ERB y por qué lo estamos utilizando, veamos:
Ya que tenemos claro el concepto nuevo que estamos introduciendo ahora vamos a crear nuestra primera plantilla, dentro del mismo archivo inicio.rb que creamos vamos a incorporar el siguiente código al final del mismo:
Finalmente escribimos todo nuestro HTML sin ningún problema. Luego nos vamos a la consola, nos posicionamos en la carpeta donde creamos nuestro archivo inicio.rb y hacemos lo siguiente:
Como notamos tenemos el HTML que construimos en la ruta raíz que le indicamos a nuestra aplicación desde Sinatra.
Una de las cosas que siempre necesitamos evitar es tener que repetir lo que podemos hacer una sola vez y que funcione para varias cosas, en el caso de nuestra página el HTML base es algo que podemos crear una sola vez, si seguimos el ejemplo pasado para construir las secciones de Sobre Mi y Contacto, hubiésemos tenido que repetir todo el HTML únicamente cambiando la parte de contenido, algo que nos iba a dejar con un largo, muy largo archivo inicio.rb.
Para contrarrestar este tipo de comportamientos poco efectivos, Sinatra nos permite utilizar el layout, con esto podemos crear una base donde simplemente imprimiremos los cambios o el código dinámico que generaremos.
Para empezar a darle forma a nuestro layout vamos en primera instancia a modificar nuestro archivo inicio.rb y añadiremos un par de rutas más:
Para ello primero debemos crear una plantilla y la identificaremos con el nombre @@layout, luego haciendo uso de Ruby Embebido con las etiquetas <%%> vamos a definir un solo título y con las etiquetas <&=&> imprimiremos el contenido en donde sea requerido. En el lugar donde nuestro contenido cambia colocaremos <%=yield%> este es una utilidad que permite indicarle a Sinatra que es en ese espacio donde debe imprimir el contenido de la ruta.
Finalmente definimos cada una de nuestras rutas y el contenido que llevaran, esto siguiendo el orden lógico @@ruta y luego el contenido, con ello ya Sinatra sabe que debe mostrar en cada llamado. Veamos como luce el código completo de nuestro archivo inicio.rb incluyendo el layout:
![crear-web-sinatra-2.jpg]()
Ya hemos creado un sitio web pequeño pero funcional donde tenemos varios enlaces y tenemos contenido dinámico, utilizando únicamente un layout para construir su estructura, por supuesto aún nos faltan los estilos CSS y las imágenes pero eso es tema de otro tutorial. Por supuesto este estilo no es muy útil si vamos a tener conexiones con Bases de Datos, o funcionalidades con muchas vistas, ya que ahí entonces nuestro único archivo empezaría a ser muy complejo para manejarse y darle mantenimiento.
Con esto hemos finalizado este tutorial, hemos creado nuestro primer sitio web utilizando Ruby y Sinatra, aprovechamos que podemos utilizar cualquier metodología que nos parezca apropiada e hicimos lo que se llama aplicación de un solo archivo, este tipo de aplicaciones son útiles cuando tenemos proyectos muy sencillos y que no queremos que se dispersen de forma innecesaria, como por ejemplo la web resultante del ejemplo.
Esta creación de páginas web es muy sencilla y compleja a la vez, debido a que Sinatra no nos impone ningún tipo de patrón a la hora de construirlas por lo que el nivel de complejidad dependerá de la forma en la que trabajemos, lo cual puede será muy positivo si tenemos una forma de trabajo propia ya establecida.
Requisitos
1- Para poder ejecutar los ejemplos de este tutorial vamos a necesitar una instalación del lenguaje Ruby al menos en su versión 1.9 en adelante.
2- Necesitamos también haber instalado la gema Sinatra y que esta esté configurada de forma adecuada. En caso de existir alguna duda con respecto a este proceso podemos consultar el siguiente tutorial.
3- Debemos tener permisos en una carpeta para ejecutar Ruby, crear y manipular archivos.
4- Debemos tener un editor de texto para poder escribir el contenido de los ejemplos, este puede ser cualquier tipo de editor de texto plano que nos permita guardar un archivo .rb como Sublime Text o incluso NotePad ++.
5- Por último necesitamos un navegador web como Google Chrome o Firefox donde podamos ejecutar nuestro ejemplo y realizar la navegación por el mismo.
¿Qué llevará nuestro sitio Web?
Para poder crear un sitio web en primer lugar debemos tener una visión, un objetivo, algo que nos guie y que podamos utilizar de referencia cuando estemos desarrollando, esto generalmente lo conseguimos cuando sabemos que llevará nuestro proyecto.
En el caso del sitio web que construiremos el objetivo será crear tres páginas, vamos a listar las mismas:
- Inicio
- Sobre mi
- Contacto
Creando nuestra primera vista
Para iniciar debemos crear un archivo llamado inicio.rb, este será quien contendrá toda la lógica de vistas y rutas de nuestro sitio web, el contenido inicial que tiene es el siguiente:
require 'sinatra' get '/' do erb :inicio endEn principio luce un poco escaso esto que acabamos de escribir pero veamos cual es la funcionalidad; en primer lugar incluimos a Sinatra con la instrucción require, esto hace que ya podamos disponer de todas las herramientas que este marco de trabajo pone a nuestra disposición.
Luego tenemos el bloque get en el cual definimos que en la ruta raíz se debe ejecutar el contenido, dicho contenido es un llamador erb a :inicio, donde en esto último debemos hacer una pausa para ver que es ERB y por qué lo estamos utilizando, veamos:
ERB lenguaje de plantillas
Como el titulo sugiere ERB no es más que las siglas de Embedded Ruby o Ruby embebido, esto nos permite crear plantillas HTML donde podamos incluir código escrito en lenguaje Ruby y con ello poder incorporar su poder de procesamiento en las vistas. A estas las llamamos por su nombre utilizando símbolos, que no es más que el nombre antecedido por dos puntos como vimos en el código :inicio.
Creando la primera plantilla
Ya que tenemos claro el concepto nuevo que estamos introduciendo ahora vamos a crear nuestra primera plantilla, dentro del mismo archivo inicio.rb que creamos vamos a incorporar el siguiente código al final del mismo:
__END__
@@inicio
<!doctype html>
<html lang="es">
<head>
<title>Mi propia Web</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>Mi Propia Web</h1>
<nav>
<ul>
<li><a href="/" title="Inicio">Inicio</a></li>
<li><a href="/about" title="Sobre Mi">Sobre Mi</a></li>
<li><a href="/contact" title="Contacto">Contacto</a></li>
</ul>
</nav>
</header>
<section>
<p>Bienvenidos a mi Web, aquí demostraré mis conocimientos de Ruby y Sinatra</p>
</section>
</body>
</html>Aquí tenemos varias cosas que podemos analizar, primero empezamos diciéndole a Sinatra que esto es el final del procesamiento Ruby, para ello utilizamos __END__ luego con un doble @@ indicamos como se llama la sección, en este caso inicio, si nos fijamos es el mismo nombre de nuestro símbolo.Finalmente escribimos todo nuestro HTML sin ningún problema. Luego nos vamos a la consola, nos posicionamos en la carpeta donde creamos nuestro archivo inicio.rb y hacemos lo siguiente:
ruby inicio.rbPodemos levantar el servidor de desarrollo de Sinatra y veremos lo siguiente al ir a localhost:4567 o el número de puerto que hayamos levantado para nuestro servidor:
Como notamos tenemos el HTML que construimos en la ruta raíz que le indicamos a nuestra aplicación desde Sinatra.
Crear un Layout
Una de las cosas que siempre necesitamos evitar es tener que repetir lo que podemos hacer una sola vez y que funcione para varias cosas, en el caso de nuestra página el HTML base es algo que podemos crear una sola vez, si seguimos el ejemplo pasado para construir las secciones de Sobre Mi y Contacto, hubiésemos tenido que repetir todo el HTML únicamente cambiando la parte de contenido, algo que nos iba a dejar con un largo, muy largo archivo inicio.rb.
Para contrarrestar este tipo de comportamientos poco efectivos, Sinatra nos permite utilizar el layout, con esto podemos crear una base donde simplemente imprimiremos los cambios o el código dinámico que generaremos.
Para empezar a darle forma a nuestro layout vamos en primera instancia a modificar nuestro archivo inicio.rb y añadiremos un par de rutas más:
require 'sinatra' get '/' do erb :inicio end get '/sobre' do erb :sobre end get '/contacto' do erb :contacto endAhora ya tenemos las rutas que mencionamos en el menú HTML que habíamos construido anteriormente, esto es solo el inicio, ya Sinatra sabe que debe buscar cuando llamemos esas rutas, el paso siguiente es definir nuestro layout y el contenido que se mostrará cuando se llame a cada ruta.
Para ello primero debemos crear una plantilla y la identificaremos con el nombre @@layout, luego haciendo uso de Ruby Embebido con las etiquetas <%%> vamos a definir un solo título y con las etiquetas <&=&> imprimiremos el contenido en donde sea requerido. En el lugar donde nuestro contenido cambia colocaremos <%=yield%> este es una utilidad que permite indicarle a Sinatra que es en ese espacio donde debe imprimir el contenido de la ruta.
Finalmente definimos cada una de nuestras rutas y el contenido que llevaran, esto siguiendo el orden lógico @@ruta y luego el contenido, con ello ya Sinatra sabe que debe mostrar en cada llamado. Veamos como luce el código completo de nuestro archivo inicio.rb incluyendo el layout:
require 'sinatra'
get '/' do
erb :inicio
end
get '/sobre' do
erb :sobre
end
get '/contacto' do
erb :contacto
end
__END__
@@layout
<% titulo="Mi Propia Web" %>
<!doctype html>
<html lang="es">
<head>
<title><%= titulo %></title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1><%= titulo %></h1>
<nav>
<ul>
<li><a href="/" title="Inicio">Inicio</a></li>
<li><a href="/sobre" title="Sobre Mi">Sobre Mi</a></li>
<li><a href="/contacto" title="Contacto">Contacto</a></li>
</ul>
</nav>
</header>
<section>
<%= yield %>
</section>
</body>
</html>
@@inicio
<p>Bienvenidos a mi Web, aquí demostraré mis conocimientos de Ruby y Sinatra</p>
@@sobre
<p>Hola Soy el creador de esta <b>Web</b>,
utilicé mis habilidades para hacer funcionar Ruby y Sinatra</p>
@@contacto
<p>Si desean saber más de mi pueden visitar <a href="http:/ /solvetic.com">Solvetic</a></p>Como podemos ver solo hemos escrito un solo HTML y el resto del contenido es más resumido, por ende mucho más manejable y de más fácil mantenimiento, veamos como luce en nuestro navegador cuando navegamos a una ruta diferente del inicio:
Ya hemos creado un sitio web pequeño pero funcional donde tenemos varios enlaces y tenemos contenido dinámico, utilizando únicamente un layout para construir su estructura, por supuesto aún nos faltan los estilos CSS y las imágenes pero eso es tema de otro tutorial. Por supuesto este estilo no es muy útil si vamos a tener conexiones con Bases de Datos, o funcionalidades con muchas vistas, ya que ahí entonces nuestro único archivo empezaría a ser muy complejo para manejarse y darle mantenimiento.
Con esto hemos finalizado este tutorial, hemos creado nuestro primer sitio web utilizando Ruby y Sinatra, aprovechamos que podemos utilizar cualquier metodología que nos parezca apropiada e hicimos lo que se llama aplicación de un solo archivo, este tipo de aplicaciones son útiles cuando tenemos proyectos muy sencillos y que no queremos que se dispersen de forma innecesaria, como por ejemplo la web resultante del ejemplo.
Buen tutorial Jonathan, es interesante. saludos.