Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ruby

Cantando con Sinatra - La aplicación "Recall"

by
Read Time:14 minsLanguages:
This post is part of a series called Singing with Sinatra.
Singing with Sinatra
Singing with Sinatra - The Encore

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Bienvenido al tema 2 de Cantar con Sinatra. En la primera parte, revisamos las rutas, cómo trabajar con los parámetros URI, cómo trabajar con formularios y cómo Sinatra diferencia las rutas por el método HTTP para el que fueron solicitadas. Hoy vamos a ampliar nuestro conocimiento de Sinatra mediante la creación de una pequeña aplicación basada en una base de datos llamada "Recall", para tomar notas / hacer una lista de tareas pendientes.

Vamos a utilizar una base de datos SQLite para almacenar las notas, y usaremos DataMapper RubyGem para comunicarnos con la base de datos. Ejecute lo siguiente dentro de un shell para instalar las gemas relevantes:

Dependiendo de cómo haya configurado RubyGems en su sistema, es posible que necesite prefijar la gem install con sudo.


El calentamiento

Saltemos directamente creando un nuevo directorio para el proyecto y creando el archivo de la aplicación, recall.rb. Comience requiriendo las gemas relevantes:

Nota: Si está ejecutando Ruby 1.9 (que debería ser), puede eliminar la línea "require 'rubygems'" ya que Ruby automáticamente carga RubyGems de todos modos.

Y configure la base de datos con lo siguiente:

En la primera línea estamos configurando una nueva base de datos SQLite3 en el directorio actual, llamada recall.db. Debajo de eso, en realidad estamos configurando una tabla de 'Notas' en la base de datos.

Mientras llamamos a la clase 'Nota', DataMapper creará la tabla como 'Notas'. Esto está de acuerdo con una convención que siguen Ruby on Rails y otros frameworks y módulos ORM.

Dentro de la clase, estamos configurando el esquema de la base de datos. La tabla 'Notes' tendrá 5 campos. Un campo de identificación id que será una clave primaria entera e incremento automático (esto es lo que significa 'Serial'). Un campo content que contiene texto, un campo booleano complete y dos campos de fecha y hora, created_at y updated_at.

La última línea indica a DataMapper que actualice automáticamente la base de datos para que contenga las tablas y los campos que hemos establecido, y que lo haga nuevamente si realizamos algún cambio en el esquema.


La página de inicio

Ahora, creemos nuestra página de inicio:

En la parte superior hay un formulario para agregar una nueva nota, y debajo están todas las notas en la base de datos. Para comenzar, agregue lo siguiente al archivo de la aplicación, recall.rb:

Nota importante: elimine el punto ('.') en :.order. (WordPress está interfiriendo con la muestra del código).

En la segunda línea, verá cómo recuperamos todas las notas de la base de datos. Si ha utilizado ActiveRecord (el ORM utilizado en Rails) anteriormente, la sintaxis de DataMapper le resultará muy familiar. Las notas se asignan a la variable de instancia @notes. Es importante usar variables de instancia (es decir, variables que comiencen con @) para que se pueda acceder desde el archivo de vista.

Configuramos la variable de instancia de @title y cargamos el archivo de vista views/home.erb a través del analizador de ERB.

Cree el archivo de vista views/home.erb y comience con lo siguiente:

Tenemos un formulario simple que envía mensajes POST a la página de inicio ('/'), y debajo hay un código ERB que sirve como marcador de posición por ahora.


Diseños

El lote de estándares HTML entre ustedes puede haber sufrido un accidente cerebrovascular menor después de ver que nuestro archivo de vista inicial no contiene ningún tipo de documento u otras etiquetas HTML. Bueno, hay una razón para eso. Cree un archivo layout.erb en su directorio views/ que contenga lo siguiente:

Las dos partes interesantes aquí son las líneas 5 y 18. En la línea 5, verá el primer uso de las etiquetas ERB <%= … %>. <%= es diferente del <% normal a medida que imprime lo que está dentro.  de la página.En la línea 18 es <% = rendimiento%>. Sinatra mostrará este archivo layout.erb en todas las rutas. Y el contenido real de esa ruta se insertará donde sea que esté el rendimiento. rendimiento es un término que significa esencialmente "detenerse aquí, insertar lo que esté esperando, luego continuar".Inicie el servidor con recall.rb escopeta en el shell, y eche un vistazo a la página de inicio en el navegador. Debería ver el contenido del archivo de diseño y el formulario de la vista home.erb real.CSSEn el archivo de diseño, incluimos dos archivos CSS. Sinatra puede cargar archivos estáticos (por ejemplo, su CSS, JS, imágenes, etc.) desde una carpeta llamada public / en el directorio raíz. Así que cree ese directorio y dentro de él dos archivos: reset.css y style.css. El restablecimiento contiene el restablecimiento CSS de Boilerplate HTML5: Aquí mostramos lo que hay en la variable de instancia @title seguido de | Recall la etiqueta <title> de la pagina.

En la línea 18 es <%= yield %>. Sinatra mostrará este archivo layout.erb en todas las rutas. Y el contenido real de esa ruta se insertará donde sea que esté el yield. yield es un término que significa esencialmente "detenerse aquí, insertar lo que esté esperando, luego continuar".

Inicie el servidor con shotgun recall.rb en el shell, y eche un vistazo a la página de inicio en el navegador. Debería ver el contenido del archivo de diseño y el formulario de la vista home.erb real.


CSS

En el archivo de diseño, incluimos dos archivos CSS. Sinatra puede cargar archivos estáticos (por ejemplo, su CSS, JS, imágenes, etc.) desde una carpeta llamada public/ en el directorio raíz. Así que cree ese directorio y dentro de él dos archivos: reset.css y style.css. El restablecimiento contiene el restablecimiento CSS de Boilerplate HTML5:

Y style.css contiene un estilo básico para que la aplicación se vea bonita:

Actualiza la página en tu navegador y todo debería ser más estilizado. No te preocupes por este CSS demasiado; ¡solo hace que las cosas se vean un poco más bonitas!


Agregar una nota a la base de datos

En este momento, si intenta enviar el formulario en la página de inicio, obtendrá un error de ruta. Vamos a crear la ruta POST para la página de inicio ahora:

Entonces, cuando se realiza una solicitud en la página de inicio, creamos un nuevo objeto Note en n (gracias a DataMapper ORM, Note.new representa una nueva fila en la tabla notes en la base de datos). El campo content se establece en los datos enviados desde el área de texto y los campos created_at y updated_at datetime se configuran con la marca de tiempo actual.

La nueva nota se guarda y el usuario vuelve a dirigirla a la página de inicio donde se mostrará la nueva nota.


Mostrando las notas

Así que hemos agregado una nueva nota, pero aún no podemos verla en la página principal ya que no hemos escrito el código para ella. Dentro del archivo de vistas views/home.erb, reemplace la línea <%# display notes %> con:

En la primera línea, comenzamos un ciclo a través de cada una de las @notes (alternativamente, podríamos haber escrito for note in @notes (por nota en @notes), pero usar un bloque, como estamos aquí, es una práctica mejor). En la línea 2, le damos al <article> una clase complete si la nota actual está configurada para complete. El resto debe ser bastante directo.


Editando una nota

Entonces podemos agregar y ver notas. Ahora solo necesitamos la capacidad de editarlos y borrarlos.

Tal vez hayas notado que en nuestra vista home.erb establecemos un enlace [edit] para cada nota a lo que esencialmente es /:id, así que vamos a crear esa ruta ahora:

Recuperamos la nota solicitada de la base de datos utilizando la ID proporcionada, configuramos una variable @title y cargamos el archivo de vista views/edit.erb a través del analizador ERB.

Ingrese lo siguiente para la vista views/edit.erb:

Esta es una vista bastante simple. Un formulario que apunta a la página actual, un área de texto que contiene el contenido de la nota y una casilla de verificación que se marca si la nota está configurada para complete.

Pero mira la tercera línea. Misterioso. Para explicar esto, necesitamos dejar de lado un poco.

Servicios RESTful

Has oído hablar de los dos términos GET y POST.

  • GET: el más común. Por lo general, es para solicitar una página y se puede marcar como favorito.
  • POST: se usa para enviar datos y no se puede marcar.

Pero GET y POST no son los únicos "verbos HTTP"; hay dos más que debe conocer: PUT y DELETE.

Técnicamente, POST solo debe usarse para crear algo, como crear una nueva nota en su nueva aplicación web, por ejemplo.

PUT es el verbo para modificar algo. Y DELETE, lo has adivinado, es para borrar algo.

Tener estos cuatro verbos es una excelente manera de separar una aplicación. Es lógico Desafortunadamente, los navegadores web en realidad no admiten solicitudes PUT o DELETE, por lo que es probable que nunca hayas oído hablar de ellos.

Entonces, volviendo a la pista aquí, si queremos dividir lógicamente nuestra aplicación (lo cual Sinatra recomienda), tenemos que falsificar estas solicitudes PUT y DELETE. Verá que la action de nuestro formulario está configurada para post. El campo de entrada oculto _method que hemos establecido put para colocar en la tercera línea le permite a Sinatra falsificar esta solicitud PUT, mientras usa un POST. Rails, entre otros marcos, hacen las cosas de manera similar.


Déjanos PUT

Ahora que hemos falsificado nuestra solicitud PUT, podemos crear una ruta para ello:

Todo es bastante simple. Obtenemos la nota relevante usando la ID en el URI, establecemos los campos a los nuevos valores, guardamos y redirigimos a la casa. Observe cómo en la cuarta línea estamos usando un operador ternario para establecer n.complete a 1 si params[:complete] existe, o 0 en caso contrario. Esto se debe a que el valor de una casilla de verificación solo se envía con un formulario si está marcada, por lo que simplemente verificamos si existe.


Eliminar una nota

En nuestra vista edit.erb, agregamos un enlace 'Eliminar' a lo que es esencialmente la ruta /:id/delete. Agregue esto a su archivo de aplicación:

En esta página, obtendremos la confirmación del usuario de que realmente quiere eliminar esta nota. Cree el archivo de vista en views/delete.erb con lo siguiente:

Tenga en cuenta que al igual que la forma en que falsificamos una solicitud PUT estableciendo un campo de entrada oculto _method, ahora estamos falsificando una solicitud DELETE.


La ruta DELETE

Estoy seguro de que ya estás entendiendo esto. La ruta de eliminación es:

¡Pruébalo! Ahora debería poder ver, agregar, editar y eliminar notas. Solo hay una cosa más...


Marcado de una nota como "Completo"

En este momento, si desea establecer una nota como complete, debe ir a la vista Editar y marcar la casilla en esa página. Hagamos ese proceso un poco más simple.

Cuando configuramos la página de inicio principal, incluimos un enlace /:id/complete en cada nota. Hagamos esa ruta ahora, que simplemente establecerá una nota como completa (o incompleta si ya se configuró para completar):


Conclusión

¡Tú y Sinatra sacan un dueto! Rápidamente has escrito una aplicación web sencilla que realiza todas las operaciones CRUD que esperas que haga una aplicación. Está escrito en un código Ruby súper sexy y limpio, y está separado en sus partes lógicas.

En la parte final de Singing with Sinatra, Encore, mejoraremos el manejo de errores, aseguraremos la aplicación de XSS y crearemos un feed RSS para las notas.

Nota: Puede navegar por los archivos finales del proyecto para este tutorial en GitHub.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.