jueves, 1 de mayo de 2025

Creando una aplicación web con Sinatra (Calculadora de pulsaciones)

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:

  1. Tener instalado Ruby. 
  2. Tener nociones de HTML, CSS y Javacript. 
  3. 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

Vibe Coding (la programación vía IA): ¿el futuro de la programación?

Vibe Coding es un nuevo paradigma de programación, una nueva forma de crear código. Es un enfoque emergente en el desarrollo de sof...

Etiquetas

Archivo del blog