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?
- Crear un directorio llamado ``imcgenerator``.
- Crear una aplicación Python llamada ``app.py``.
- Crear un directorio de llamado ``templates``.
- 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:5000Vista 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
Publicar un comentario