Sinatra es un framework web ligero para el lenguaje Ruby que nos permite crear aplicaciones de una manera más sencilla que usando Ruby on Rails (quizás haremos un post al respecto).
En esta ocasión crearemos una sencilla aplicación que nos permita obtener el número de pulsaciones de una persona teniendo estas fórmulas:
No. pulsaciones masculina = (220 - edad) No. pulsaciones femenina = (226 - edad)
Requisitos:
- Tener instalado Ruby.
- Tener nociones de HTML, CSS y Javacript.
- Tener nociones de Ruby (obviamente).
Comenzaremos con crear un directorio llamado ``pulse_calculator`` y nos posicionamos sobre este.
$ mkdir pulse_calculator $ cd pulse_calculator
Dentro de esta crearemos una carpeta llamada ``views``. Esta nos servirá para crear las vistas de la aplicación web.
Ahora crearemos un archivo llamado ``Gemfile`` (sin ninguna extensión). Abrimos el archivo y colocamos lo siguiente:
source 'https://rubygems.org' gem 'sinatra' gem 'sinatra-contrib'
Es necesario ejecutarlo para instalar las dependencias, lo haremos de la siguiente forma:
$ bundle install
Crearemos el programa principal ``app.rb``, el cual contendrá la lógica del cálculo del número de pulsaciones. Se tomará en cuenta la edad y el género (masculino y femenino) para ello.
require 'sinatra' require 'sinatra/reloader' if development? # Ruta para el formulario (home) get '/' do erb :index end # Ruata para ver el resultado post '/calculate' do @name = params[:name] @age = params[:age].to_i @gender = params[:gender] # Calculo tomando el genero @pulse = if @gender == 'Femenino' 226 - @age else 220 - @age end erb :result end
Como se puede observar:
- La ruta será GET "/" para el formulario de ingreso de datos.
- La ruta POST "/calculate" para la vista de resultados obtenidos.
- Los datos a tomar en cuenta será la edad y género.
Dentro de la carpeta ``views`` crearemos dos archivos que serán las vistas:
- index.erb , para el formulario de entrada de datos.
- result.erb , para mostrar los resultados.
index.erb
<!DOCTYPE html> <html> <head> <title>Pulsaciones Calculator</title> <style> body { font-family: Arial, sans-serif; margin: 50px; } .form-container { border: 1px solid black; padding: 20px; width: 300px; } label { display: block; margin: 10px 0 5px; } input, select, button { width: 100%; padding: 5px; margin-bottom: 10px; } button { background-color: #ccc; border: none; cursor: pointer; } </style> </head> <body> <div class="form-container"> <h2>Pulsaciones Calculator</h2> <form action="/calculate" method="post"> <label>Nombre:</label> <input type="text" name="name" required> <label>Edad:</label> <input type="number" name="age" required> <label>Género:</label> <select name="gender" required> <option value="Masculino">Masculino</option> <option value="Femenino">Femenino</option> </select> <button type="submit">Calcular</button> </form> </div> </body> </html>
result.erb
<!DOCTYPE html> <html> <head> <title>Resultados</title> <style> body { font-family: Arial, sans-serif; margin: 50px; } .result-container { border: 1px solid black; padding: 20px; width: 300px; } .result-box { border: 2px solid purple; padding: 10px; margin-top: 20px; } .pulse { color: red; } </style> </head> <body> <div class="result-container"> <h2>Pulsaciones Calculator</h2> <p><strong>Nombre:</strong> <%= @name %></p> <p><strong>Edad:</strong> <%= @age %></p> <p><strong>Género:</strong> <%= @gender %></p> <div class="result-box"> <h3>Resultados</h3> <p>Número de pulsaciones obtenidas: <span class="pulse"><%= @pulse %> pulsaciones</span></p> </div> </div> </body> </html>
Ejecutamos la aplicación web:
$ ruby app.rb
Si todo va bien, se ejcutará la aplicación web. Abrimos un navegador en la dirección:
http://[::1]:4567/ ó http://localhost:4567/
¡Hemos creado nuestra aplicación para calcular pulsaciones con Sinatra!
Continuaremos con esta serie en fururas entregas.
Enlaces:
https://sinatrarb.com/https://www.netguru.com/blog/ruby-on-rails-versus-sinatra
https://blog.appsignal.com/2023/05/31/how-to-use-sinatra-to-build-a-ruby-application.html
https://medium.com/simform-engineering/explore-sinatra-and-its-potential-for-building-web-apps-8463a2db0a0b
No hay comentarios:
Publicar un comentario