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
By en
Etiquetas: , , ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)

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