viernes, 18 de abril de 2025

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

Esta ocasión crearemos una aplicación web para calcular el IMC de una persona. Para ello, usaremos Django: un framework para crear aplicaciones web con Python.

Requisitos:

  • Tener instalado Python en la última versión (recomendado).
  • Tener conocimientos básicos de HTML, CSS , Javascript y Python.

La aplicación solicitará al usuario su nombre, edad, peso y talla. Obtendrá el IMC junto con algunas recomendaciones.

Creando el proyecto con Django

1. Comenzaremos con la instalación de Django.

1
$ python -m pip install Django 

2. Verificamos la instalación:

1
$ python -m pip install Django 

3. Creamos un directorio llamado ``auditor``

1
$ mkdir auditor

4. Crear proyecto Django con el nombre ``auditor`` de la siguiente forma:

1
$ django-admin startproject audita auditor

Nos creará un directorio como este:

1
2
3
4
5
6
7
8
9
audita/
  -asgi.py
  -settings.py
  -urls.py
  -wsgi.py
  -__init__.py
  -__pycache__
db.sqlite3
manage.py

5. Creamos una aplicación llamada ``imcgenerator`` de la siguiente manera:

1
$ python manage.py startapp imcgenerator

Ahora tendremos un nuevo directorio llamado ``imcgenerator``:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
imcgenerator/
  -admin.py
  -apps.py
  -migrations
  -models.py
  -tests.py
  -urls.py
  -views.py
  -__init__.py
  -__pycache__

6. Actualizamos:

1
$ python manage.py migrate

7. Crear los templates que serán las vistas. Crearemos un directorio y subdirectorio dentro de la carpeta ``imcgenerator``. Y dentro crearemos dos páginas HTML: formulario.html y resultado.html.

1
2
3
4
5
imcgenerator/
    templates/
       imcgenerator/
           -formulario.html
           -resultado.html

8. El contenido de la página HTML ``formulario.html``

<!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;
        }

        #btnImc { padding: 10px 20px; background-color: orangered; color: white; border: none; cursor: pointer; }
        #btnImc:hover { background-color:orangered; }
    </style>
</head>
<body>
    <div class="container">
        <h1><span class="orange">IMC </span> <span class="green">Generator</span></h1>
        <form method="POST">
            {% csrf_token %}
            <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>

9. El contenido de la página HTML ``resultado.html``

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resultado IMC Generator</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>

10. Modificar el archivo ``settings.py``

1
2
3
4
5
INSTALLED_APPS = [
   
   'imcgenerator',

]

Esto para declarar la aplicación creada anteriormente.

10. Agregar las URLS en los archivos: imcgenerator/urls.py & audita/urls.py

imcgenerator/urls.py

1
2
3
4
5
6
from django.urls import path
from . import views

urlpatterns = [
    path('', views.calcular_imc, name='calcular_imc'),
]

audita/urls.py

1
2
3
4
5
6
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('', include('imcgenerator.urls')),
]

11. Agregar las vistas en el directorio ``imcgenerator/views.py``

 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
from django.shortcuts import render
from django.http import HttpResponse

def calcular_imc(request):
    if request.method == 'POST':
        nombre = request.POST.get('nombre')
        edad = int(request.POST.get('edad'))
        peso = float(request.POST.get('peso'))
        talla = float(request.POST.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."

        return render(request, 'imcgenerator/resultado.html', {
            'nombre': nombre,
            'edad': edad,
            'peso': peso,
            'talla': talla,
            'imc': round(imc, 2),
            'diagnostico': diagnostico,
            'recomendaciones': recomendaciones,
        })
    return render(request, 'imcgenerator/formulario.html')

12. Modificar el idioma en el archivo ``settings.py``

1
2
3
LANGUAGE_CODE = 'es'

TIME_ZONE = 'America/Mexico_City'

13. Actualizamos:

1
$ python manage.py migrate

14. Arrancar la aplicación:

1
$ python manage.py runserver

Abrimos el navegador en la ruta: http://localhost:8000/.

La aplicación se verá así:

Introducimos los datos:

Obtenemos los resultados:

¡Con esto hemos creado nuestra aplicación con Django!

Enlaces:

https://www.djangoproject.com/
https://codemonkeyjunior.wordpress.com/2018/09/26/creando-un-proyecto-y-app-en-django-1/
https://codemonkeyjunior.blogspot.com/2024/08/gcp-calculando-el-imc-con-bigquery.html

No hay comentarios:

Publicar un comentario

Kubernetes en un vistazo

Continuamos con esta serie de entregas sobre Docker y Kubernetes Según la documentación oficial Kubernetes (k8s) es una plataforma de...

Etiquetas

Archivo del blog