Ir al contenido principal

Creando una calculadora de IMC con Typescript

Imagen
De Dr. Lang

 

En el anterior post vimos cómo crear una aplicación web con Flask para calcular el IMC de una persona.

Hoy replicaremos la aplicación, pero usando como lenguaje base a Typescript.

Requisitos

  1. Tener node instalado.
  2. Tener nociones de HTML, CSS y Javascript.

¿Qué haremos?

  1. Instalar las dependencias necesarias. 
  2. Crear un directorio para alojar nuestra aplicación. 
  3. Crear una aplicación principal. 
  4. Crear las vistas para solicitar los datos (nombre, edad, peso y talla) y mostrar el resultado.

1. Crear directorio de la aplicación.

$ mkdir imc_ts
$ cd imc_ts

2. Inicializar proyecto Node. 

$ npm init -y

Esto nos creará un archivo package.json.

3. Instalar las dependencias necesarias (typescript, @types/node, @types/express, express, ejs).

$ npm install typescript @types/node @types/express express ejs

¿Qué instalamos?

  • Typescript el lenguaje que usaremos como base de nuestra aplicación. 
  • EJS, son plantillas Javascript incrustradas. 
  • Express JS, un framework minimalista. 
  • Y los tipos definidos para node y Express 
$ npm install cpx --save-dev

4. Inicializar proyecto Typescript.

$ npx tsc --init

Esto nos creará un archivo tsconfig.json.

Typescript es similar a Javascript, solo que de tipado estático.

Si sabes Javascript, Typescript no será tan complejo de aprender y usar.

5. Crear la aplicación aplicación que contendrá la lógica.

app.js

 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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import express, { Request, Response } from 'express';
import path from 'path';

const app = express();
const port = 3000;

// Configurar EJS como motor de plantillas
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// Middleware para procesar datos del formulario
app.use(express.urlencoded({ extended: true }));

// Ruta principal (formulario y cálculo)
app.get('/', (req: Request, res: Response) => {
    res.render('formulario');
});

app.post('/', (req: Request, res: Response) => {
    const { nombre, edad, peso, talla } = req.body;

    // Convertir datos a números
    const edadNum: number = parseInt(edad);
    const pesoNum: number = parseFloat(peso);
    const tallaNum: number = parseFloat(talla);

    // Calcular IMC
    const imc: number = pesoNum / (tallaNum * tallaNum);

    // Diagnóstico y recomendaciones
    let diagnostico: string;
    let recomendaciones: string;

    if (imc < 18.5) {
        diagnostico = "Peso bajo";
        recomendaciones = "Necesita ayuda médica. Considere aumentar su ingesta calórica.";
    } else if (imc >= 18.5 && imc <= 24.9) {
        diagnostico = "Peso normal";
        recomendaciones = "No necesita ayuda médica. Solo necesita seguir alimentándose bien y hacer ejercicio.";
    } else if (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)
    const imcIdeal: number = 22;
    const pesoIdeal: number = imcIdeal * (tallaNum * tallaNum);
    const tallaIdeal: number = Math.sqrt(pesoNum / imcIdeal);

    // Renderizar la página de resultados
    res.render('resultado', {
        nombre,
        edad: edadNum,
        peso: pesoNum,
        talla: tallaNum,
        imc: imc.toFixed(2),
        diagnostico,
        recomendaciones,
        pesoIdeal: pesoIdeal.toFixed(2),
        tallaIdeal: tallaIdeal.toFixed(2),
    });
});

// Iniciar el servidor
app.listen(port, () => {
    console.log(`Servidor corriendo en http://localhost:${port}`);
});

6. Crear el directorio views/ donde se alojarán las páginas EJS. 

imc_ts/
   src/
    - app.ts
    - views/
         - formulario.ejs
         - resultado.ejs
    package.json
    tsconfig.json

Está aplicación con Typescript se encargará de tomar los datos, en este caso peso y talla, para obtener el IMC.

7. Crear las vistas: formulario.ejs y resultado.ejs.

formulario.ejs 

 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>

resultado.ejs

 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
<!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>
            <p><strong>Su peso ideal debe ser:</strong> <%= pesoIdeal %> kg</p>
            <p><strong>Su talla ideal debe ser:</strong> <%= tallaIdeal %> m</p>
        </div>
        <a href="/"><button>Aceptar</button></a>
    </div>
</body>
</html>

8. Editar los archivos tsconfig.json y package.json.

tsconfig.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
{
  "compilerOptions": {
   "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible 

    "module": "commonjs",                                /* Specify what module code is generated. */
    "rootDir": "./src",                                  /* Specify the root folder within your source files. */
   
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */

    "strict": true,                                      /* Enable all strict type-checking options. */
   
     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  },
  "include":["src/**/*"],
  "exclude":["node_modules"]
}

package.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  "name": "imc_ts",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc && cpx \"src/views/**/*\" dist/views",
    "start": "node dist/app.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "@types/express": "^5.0.1",
    "@types/node": "^22.14.1",
    "ejs": "^3.1.10",
    "express": "^5.1.0",
    "imc_ts": "file:"
  },
  "devDependencies": {
    "cpx": "^1.5.0"
  }
}

9. Construir la aplicación. 

$ npm run build

Esto compilará la aplicación y convertirá el código Typescript a Javascript.

10. Ejecutar la aplicación.

$ npm start

Node ejecutará el código Javascript generado por la compilación.

Abrimos el navegador en la ruta:

http://127.0.0.1:3000

Vista de la aplicación.

Introducimos los datos:

Obtenemos los resultados:

¡Hemos creado nuestra aplicación web con Typescript!

Continuaremos con este tema en futuras entregas.

Enlaces:

https://www.typescriptlang.org/
https://alquimistadecodigo.blogspot.com/2020/07/typescript.html
https://ejs.co/
https://expressjs.com/

Etiquetas

Etiquetas:

Comentarios

Publicar un comentario

Entradas populares de este blog

Programación Windows Batch (CMD) parte 3

De Dr. Lang
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...
3 comentarios
Leer más

Programación Windows Batch (CMD) parte 4

De Dr. Lang
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...
Publicar un comentario
Leer más

TIOBE index 2024

De Beta
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 ...
Publicar un comentario
Leer más