Ir al contenido principal

Creando una calculadora de IMC con Flask

Siguiendo la lógica de la aplicación para calcular el IMC con Django (un framework web para Python) ahora lo haremos usando Flask.

La fórmula para obtener el IMC será:

IMC = Peso / (Talla **2)

¿Qué haremos?

  1. Crear un directorio llamado ``imcgenerator``. 
  2. Crear una aplicación Python llamada ``app.py``. 
  3. Crear un directorio de llamado ``templates``. 
  4. Dentro de este directorio crearemos dor páginas HTML: formulario.html y resultado.html.

Creando la calculadora de IMC con Flask

1. Crear la aplicación ``app.py``. Esta contendrá la lógica para obtener los datos de entrada y realizar la operación:

from flask import Flask, render_template, request
import math

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def calcular_imc():
    if request.method == 'POST':
        # Obtener datos del formulario
        nombre = request.form.get('nombre')
        edad = int(request.form.get('edad'))
        peso = float(request.form.get('peso'))
        talla = float(request.form.get('talla'))

        # Calcular IMC
        imc = peso / (talla ** 2)

        # Diagnóstico y recomendaciones
        if imc < 18.5:
            diagnostico = "Peso bajo"
            recomendaciones = "Necesita ayuda médica. Considere aumentar su ingesta calórica."
        elif 18.5 <= imc <= 24.9:
            diagnostico = "Peso normal"
            recomendaciones = "No necesita ayuda médica. Solo necesita seguir alimentándose bien y hacer ejercicio."
        elif 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."


        # Renderizar la página de resultados
        return render_template('resultado.html',
                               nombre=nombre,
                               edad=edad,
                               peso=peso,
                               talla=talla,
                               imc=round(imc, 2),
                               diagnostico=diagnostico,
                               recomendaciones=recomendaciones)
    # Si es GET, mostrar el formulario
    return render_template('formulario.html')

if __name__ == '__main__':
    app.run(debug=True)

2. Vista del formulario en el directorio templates:

formulario.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!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:orangered
        }
        .green{
            color: #4CAF50;
        }
    </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>

3. Vista de la página de resultados en el directorio templates:

resultado.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!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:orangered
        }
        .green{
            color: #4CAF50;
        }
    </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>
        </div>
        <a href="/"><button>Aceptar</button></a>
    </div>
</body>
</html>

4. Ejecutando la aplicación:

Podemos ejecutar la aplicación de dos maneras:

1. Primera forma:

$ python app.py

2. Segunda forma:

$ flask --app app run

Abrimos el navegador en la ruta:

http://127.0.0.1:5000

Vista de la aplicación.

Introducimos los datos:

Obtenemos los resultados:

Continuaremos con este tema en próximas entregas.

Enlaces:

https://codemonkeyjunior.blogspot.com/2025/04/creando-una-aplicacion-web-para.html


Comentarios

Entradas populares de este blog

Programación Windows Batch (CMD) parte 3

Crear ciclos para efectuar operaciones tediosas nos ahorrará tiempo para realizar otras tareas. En está ocasión veremos ciclos con FOR . ¿Cuál es la síntaxis de bucle FOR en Windows Batch? Si está dentro de un archivo *.bat : FOR %%variable IN (seq) DO operaciones Si lo ejecutamos en una terminal: FOR %variable IN (seq) DO operaciones Ejemplo 1 . Recorrer una secuencia de números del 0 al 5: recorrer.bat @ echo off FOR %%i in ( 0 1 2 3 4 5 ) DO echo Hola no. %%i pause Nos imprimirá en pantalla: Hola no. 0 Hola no. 1 Hola no. 2 Hola no. 3 Hola no. 4 Hola no. 5 ¿Puedo usar contadores? Si, se pueden usar. Ejemplo 2 . Uso de contadores: contador.bat @ echo off set numeros = 1 2 3 4 5 6 7 8 9 10 set cont = 0 for %%a in ( %numeros% ) do ( echo Hola no. %%a :: Contador set /a cont+ = 1 ) echo Total: %cont% Este código nos imprimirá, además de los mensajes Hola no. 0 ..., el total de valores conta...

Programación Windows Batch (CMD) parte 4

Siguiendo con la serie de post sobre programación ( 1 , 2 , y 3 ) batch ahora veremos algunas cosas como operaciones aritméticas, operadores lógicos  y uso de ficheros. Cuando somos administradores de servidores o desarrolladores muchas veces tenemos que realizar tareas que nos quitan, relativamente, tiempo valioso que podríamos ocupar para otras cosas (como ver nuestro Facebook, jeje, broma).  Aprender a escribir scripts que nos faciliten algunas tareas siempre es útil. Por ejemplo, conocer todas las características técnicas de nuestro equipo de cómputo nos servirá cuando se realiza peritajes informáticos y soporte al equipo. Realizar respaldos automáticos a nuestras carpetas , archivos y directorios será más sencillo gracias a un script. Pero antes debemos aprender lo básico de la programación en batch. Ejemplo 1. Operaciones aritméticas básicas. aritmetica.bat @ echo off ::Nombre del archivo, imprimirá: aritmetica.bat echo %0 :: Set nos servirá para a...

TIOBE index 2024

El índice TIOBE (o índice de la comunidad de programación TIOBE) mide la popularidad de los lenguajes de programación. Su índice no se basa en qué lenguaje de programación es mejor, si tiene mejor perfomance, si posee escalabilidad, si es más sencillo de aprender, de usar, de implementar, etc. Sólo se basa en la popularidad. En el número de referencias ya sea en blogs, foros de consulta, etc. No necesariamente si las empresas lo están usando en alguno de sus desarrollos. Este índice es útil para darse una idea qué lenguaje está cobrando más popularidad y prestigio. Enseguida una tabla con los primeros 5 lenguajes más populares. Índice de Noviembre 2024   Nov 2024  Nov 2023  Change  Programming Language  Ratings  Change  1  1    Python  22.85%  +8.69%  2  3  +  C++  10.64%  +0.29%  3  4  +  Java  9.60%  +1.26%  4 ...