Mostrando entradas con la etiqueta mojo. Mostrar todas las entradas
Mostrando entradas con la etiqueta mojo. Mostrar todas las entradas

sábado, 26 de abril de 2025

Creando una aplicación web para calcular el IMC con Mojolicious

En una entrega pasada vimos cómo crear una aplicación web para calcular el IMC de una persona usando Django Framework. Esta vez lo haremos usando Mojolicious, un framework ligero para Perl.

Creando la aplicación web

Requisitos:

  1. Tener instalado Perl en la última versión. 
  2. Instalar Mojolicious.

¿Qué haremos?

  1. Crear un solo programa, el cual nombraremos ``imc.pl``. 
  2. Crear la lógica para obtener los datos: nombre, edad, peso y talla. 
  3. Crear la lógica para obtener el IMC (peso / (talla**2)). 
  4. Crear las vistas: formulario y resultado.

Si no tenemos instalado Mojolicious, lo podemos instalar así: 

$ cpan
cpan> install Mojolicious

1. Creamos el programa ``imc.pl`` (Linux o Windows).

Linux:

$ touch imc.pl

Windows: 

$ start notepad imc.pl

2. Debemos obtener los datos del formulario. Para ello Mojolicious nos permitirá incrustrar código HTML desde el mismo programa Perl ``imc.pl``. Los llamados layaouts.

__DATA__

@@ formulario.html.ep
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IMC Generator</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; }
        .container { max-width: 600px; margin: 0 auto; padding: 20px; }
        .form-group { margin-bottom: 15px; }
        input[type="text"], input[type="number"] { padding: 10px; width: 200px; }
        button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
        button:hover { background-color: #45a049; }
        .orange {
            color: #ff6200;
        }
        .green{
            color:rgb(13, 207, 55);;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1> <span class ="orange">IMC </span> <span class ="green">Generator</span></h1>
        <form method="POST" action="/">
            <div class="form-group">
                <label for="nombre">Nombre:</label><br>
                <input type="text" id="nombre" name="nombre" required>
            </div>
            <div class="form-group">
                <label for="edad">Edad:</label><br>
                <input type="number" id="edad" name="edad" required>
            </div>
            <div class="form-group">
                <label for="peso">Peso (kg):</label><br>
                <input type="number" step="0.1" id="peso" name="peso" required>
            </div>
            <div class="form-group">
                <label for="talla">Talla (m):</label><br>
                <input type="number" step="0.01" id="talla" name="talla" required>
            </div>
            <button type="submit">Aceptar</button>
        </form>
    </div>
</body>
</html>

Este será el formulario para la entrada de datos. Ahora crearemos la lógica una vez que obtenemos los datos (nombre, edad, peso y talla). 

#!/usr/bin/env perl
use Mojolicious::Lite -signatures;

# Ruta para el formulario (GET)
get '/' => sub ($c) {
    $c->render(template => 'formulario');
};

# Ruta para procesar el formulario y mostrar resultados (POST)
post '/' => sub ($c) {
    # Obtener datos del formulario
    my $nombre = $c->param('nombre');
    my $edad   = $c->param('edad') || 0;
    my $peso   = $c->param('peso') || 0;
    my $talla  = $c->param('talla') || 0;

    # Calcular IMC
    my $imc = $talla > 0 ? $peso / ($talla * $talla) : 0;

    # Diagnóstico y recomendaciones
    my ($diagnostico, $recomendaciones);
    if ($imc < 18.5) {
        $diagnostico = "Peso bajo";
        $recomendaciones = "Necesita ayuda médica. Considere aumentar su ingesta calórica.";
    } elsif ($imc >= 18.5 && $imc <= 24.9) {
        $diagnostico = "Peso normal";
        $recomendaciones = "No necesita ayuda médica. Solo necesita seguir alimentándose bien y hacer ejercicio.";
    } elsif ($imc >= 25 && $imc <= 29.9) {
        $diagnostico = "Sobrepeso";
        $recomendaciones = "Necesita ayuda médica. Considere una dieta balanceada y ejercicio regular.";
    } else {
        $diagnostico = "Obesidad";
        $recomendaciones = "Necesita ayuda médica urgente. Consulte a un especialista.";
    }

    # Calcular peso ideal y talla ideal (IMC ideal = 22)
    my $imc_ideal = 22;
    my $peso_ideal = $imc_ideal * ($talla * $talla);
    my $talla_ideal = $peso > 0 ? sqrt($peso / $imc_ideal) : 0;

    # Renderizar la página de resultados
    $c->render(
        template        => 'resultado',
        nombre          => $nombre,
        edad            => $edad,
        peso            => $peso,
        talla           => $talla,
        imc             => sprintf("%.2f", $imc),
        diagnostico     => $diagnostico,
        recomendaciones => $recomendaciones,
        peso_ideal      => sprintf("%.2f", $peso_ideal),
        talla_ideal     => sprintf("%.2f", $talla_ideal),
    );
};

Por último la página de resultados. 

@@ resultado.html.ep
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resultado IMC</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; }
        .container { max-width: 600px; margin: 0 auto; padding: 20px; }
        .result { margin-top: 20px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; }
        .result h2 { color: #4CAF50; }
        button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
        button:hover { background-color: #45a049; }
        .orange {
            color: #ff6200;
        }
        .green{
            color:rgb(13, 207, 55);;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1> <span class ="orange">IMC </span> <span class ="green">Generator</span></h1>
        <div class="result">
            <p><strong>Nombre:</strong> <%= $nombre %></p>
            <p><strong>Edad:</strong> <%= $edad %></p>
            <p><strong>Peso:</strong> <%= $peso %> kg</p>
            <p><strong>Talla:</strong> <%= $talla %> m</p>
            <h2>IMC: <%= $imc %></h2>
            <p><strong>Diagnóstico:</strong> <%= $diagnostico %></p>
            <p><strong>Recomendaciones:</strong> <%= $recomendaciones %></p>
            <p><strong>Su peso ideal debe ser:</strong> <%= $peso_ideal %> kg</p>
            <p><strong>Su talla ideal debe ser:</strong> <%= $talla_ideal %> m</p>
        </div>
        <a href="/"><button>Aceptar</button></a>
    </div>
</body>
</html>

Código completo:

imc.pl 

#!/usr/bin/env perl
use Mojolicious::Lite -signatures;

# Ruta para el formulario (GET)
get '/' => sub ($c) {
    $c->render(template => 'formulario');
};

# Ruta para procesar el formulario y mostrar resultados (POST)
post '/' => sub ($c) {
    # Obtener datos del formulario
    my $nombre = $c->param('nombre');
    my $edad   = $c->param('edad') || 0;
    my $peso   = $c->param('peso') || 0;
    my $talla  = $c->param('talla') || 0;

    # Calcular IMC
    my $imc = $talla > 0 ? $peso / ($talla * $talla) : 0;

    # Diagnóstico y recomendaciones
    my ($diagnostico, $recomendaciones);
    if ($imc < 18.5) {
        $diagnostico = "Peso bajo";
        $recomendaciones = "Necesita ayuda médica. Considere aumentar su ingesta calórica.";
    } elsif ($imc >= 18.5 && $imc <= 24.9) {
        $diagnostico = "Peso normal";
        $recomendaciones = "No necesita ayuda médica. Solo necesita seguir alimentándose bien y hacer ejercicio.";
    } elsif ($imc >= 25 && $imc <= 29.9) {
        $diagnostico = "Sobrepeso";
        $recomendaciones = "Necesita ayuda médica. Considere una dieta balanceada y ejercicio regular.";
    } else {
        $diagnostico = "Obesidad";
        $recomendaciones = "Necesita ayuda médica urgente. Consulte a un especialista.";
    }

    # Calcular peso ideal y talla ideal (IMC ideal = 22)
    my $imc_ideal = 22;
    my $peso_ideal = $imc_ideal * ($talla * $talla);
    my $talla_ideal = $peso > 0 ? sqrt($peso / $imc_ideal) : 0;

    # Renderizar la página de resultados
    $c->render(
        template        => 'resultado',
        nombre          => $nombre,
        edad            => $edad,
        peso            => $peso,
        talla           => $talla,
        imc             => sprintf("%.2f", $imc),
        diagnostico     => $diagnostico,
        recomendaciones => $recomendaciones,
        peso_ideal      => sprintf("%.2f", $peso_ideal),
        talla_ideal     => sprintf("%.2f", $talla_ideal),
    );
};

# Iniciar la aplicación
app->start;

__DATA__

@@ formulario.html.ep
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IMC Generator</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; }
        .container { max-width: 600px; margin: 0 auto; padding: 20px; }
        .form-group { margin-bottom: 15px; }
        input[type="text"], input[type="number"] { padding: 10px; width: 200px; }
        button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
        button:hover { background-color: #45a049; }
        .orange {
            color: #ff6200;
        }
        .green{
            color:rgb(13, 207, 55);;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1> <span class ="orange">IMC </span> <span class ="green">Generator</span></h1>
        <form method="POST" action="/">
            <div class="form-group">
                <label for="nombre">Nombre:</label><br>
                <input type="text" id="nombre" name="nombre" required>
            </div>
            <div class="form-group">
                <label for="edad">Edad:</label><br>
                <input type="number" id="edad" name="edad" required>
            </div>
            <div class="form-group">
                <label for="peso">Peso (kg):</label><br>
                <input type="number" step="0.1" id="peso" name="peso" required>
            </div>
            <div class="form-group">
                <label for="talla">Talla (m):</label><br>
                <input type="number" step="0.01" id="talla" name="talla" required>
            </div>
            <button type="submit">Aceptar</button>
        </form>
    </div>
</body>
</html>

@@ resultado.html.ep
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resultado IMC</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; }
        .container { max-width: 600px; margin: 0 auto; padding: 20px; }
        .result { margin-top: 20px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; }
        .result h2 { color: #4CAF50; }
        button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
        button:hover { background-color: #45a049; }
        .orange {
            color: #ff6200;
        }
        .green{
            color:rgb(13, 207, 55);;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1> <span class ="orange">IMC </span> <span class ="green">Generator</span></h1>
        <div class="result">
            <p><strong>Nombre:</strong> <%= $nombre %></p>
            <p><strong>Edad:</strong> <%= $edad %></p>
            <p><strong>Peso:</strong> <%= $peso %> kg</p>
            <p><strong>Talla:</strong> <%= $talla %> m</p>
            <h2>IMC: <%= $imc %></h2>
            <p><strong>Diagnóstico:</strong> <%= $diagnostico %></p>
            <p><strong>Recomendaciones:</strong> <%= $recomendaciones %></p>
            <p><strong>Su peso ideal debe ser:</strong> <%= $peso_ideal %> kg</p>
            <p><strong>Su talla ideal debe ser:</strong> <%= $talla_ideal %> m</p>
        </div>
        <a href="/"><button>Aceptar</button></a>
    </div>
</body>
</html>

Ejecución del programa:

$ morbo imc.pl

Abrimos el navegador en la ruta:

http://127.0.0.1:3000/

¡Con esto habremos habremos creado nuestra aplicación webb con Mojolicious!

La aplicación se verá así:

Introducimos los datos:

Obtenemos los resultados:

Mojolicious nos permite crear aplicaciones web de una manera más sencilla a lo que otros frameworks no.

En esta aplicación hemos visto algunas de sus características, como el permitir incrustrar código HTML (con extensión *html.ep) como en PHP.

Más sobre este framework en próximas entregas.

Enlaces:

https://mojolicious.org/
https://codemonkeyjunior.blogspot.com/2025/04/mojolicious-un-framework-para-perl.html
https://codemonkeyjunior.blogspot.com/2025/04/creando-una-aplicacion-web-para.html
By en No hay comentarios:
Etiquetas: , , , , ,

domingo, 20 de abril de 2025

Mojolicious: un framework para Perl

Mojolicious es un framework similar a Dancer2, cuyas características son:

  • Más completo que Dancer2, pero también más complejo. 
  • Ofrece WebSockets, testing integrado, plantillas, y soporte para aplicaciones en tiempo real. 
  • También tiene un modo lite para scripts rápidos (Mojolicious::Lite). 
  • No requiere muchas dependencias externas.

Instalación:

Opción 1:

$ cpan
cpan> install Mojolicious
cpan> quit

Opción 2: 

$ cpan App::cpanminus
$ cpan Mojolicious

Nosotros elegiremos la primera opción.

Verificamos la instalación:

$ cpan
cpan> i Mojolicious::Lite
Module id = Mojolicious::Lite
    CPAN_USERID  SRI (Sebastian Riedel <kraihx@googlemail.com>)
    CPAN_VERSION undef
    CPAN_FILE    S/SR/SRI/Mojolicious-9.39.tar.gz
    UPLOAD_DATE  2024-11-23
    MANPAGE      Mojolicious::Lite - Micro real-time web framework
    INST_FILE    C:\Strawberry\perl\vendor\lib\Mojolicious\Lite.pm
    INST_VERSION undef

Creando nuestra primera aplicación

hola.pl 

1
2
3
4
5
use Mojolicious::Lite;

get '/' => {text => 'Hola mundo desde Mojolicious'};

app->start;

Ejecutamos la aplicación:

$ morbo hola.pl

Abrimos el navegador en:

http://127.0.0.1:3000/

¡Hemos creado nuestra primera aplicación con Mojolicious!

Enlaces:

https://mojolicious.org/
https://mojolicious.io/

By en No hay comentarios:
Etiquetas: , , ,
Suscribirse a: Entradas (Atom)

Jai un lenguaje de programación inspirado en C++

Hoy hablaremos de un nuevo lenguaje de programación llamado Jai . Se trata de un lenguaje de programación que está desarrolland...

Etiquetas

Archivo del blog