Cargando



Crear un sitio web con Sinatra

En este tutorial veremos cómo crear un pequeño sitio web con Sinatra, concentrándonos principalmente en crear vistas y añadir HTML, así como en la estructura y la funcionalidad.


abr 15 2015 10:42
Profesional
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.

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
Esto nos lleva a que será una web de referencia o blog personal, de esta forma tendremos que dominar algunas técnicas que en un futuro podemos aplicar a otros proyectos. Para que podamos ver nuestros avances de forma más expedita vamos a ir iterando y corrigiendo en el camino mientras vamos construyendo nuestra web.

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
end
En 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.rb
Podemos 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:

crear-web-sinatra.jpg


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
end
Ahora 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.

¿Te ayudó este Tutorial?


3 Comentarios

Buen tutorial Jonathan, es interesante. saludos.


Miguel Guerrero
abr 15 2015 18:45

Para empezar empezar a usarlo es perfecto. Enhorabuena.

Muy claro y practico!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X