Creación de Aplicaciones Interactivas con IA y JavaScript

Clase 17 de 19 • Curso de Herramientas de AI para Developers

Resumen

¿Cómo crear una aplicación interactiva con inteligencia artificial?

En esta lección, exploraremos el uso de la inteligencia artificial para crear una aplicación que sugiera el precio final de un producto y calcule el margen de ganancia, integrando tecnología avanzada de manera coherente y responsable. Aprenderás a utilizar un editor de texto con tecnología AI para facilitar tu trabajo como desarrollador. ¡Es un buen modo de potenciar tus habilidades!

¿Cuál es el objetivo del proyecto?

El objetivo de nuestro proyecto es desarrollar una aplicación que no solo calcule el precio final de un producto al considerar el costo de la materia prima, márgenes de ganancia, e impuestos, sino que también pregunte al usuario cuántas ventas espera realizar para calcular el margen de ganancia. Todo esto se ejecutará mediante consola y con el uso de JavaScript.

¿Cómo se desarrolla la aplicación en JavaScript?

Interacción inicial con inteligencia artificial: Se activa una barra lateral en el editor de texto para dar instrucciones al asistente AI. Se le pide que cree la aplicación utilizando JavaScript y que sea ejecutada por consola.
Desarrollo del script: Una vez detallada la petición, se genera un script titulado calcular_precio.js. Este script:
- Utiliza el módulo Redline para manejar entradas y salidas en consola.
- Define una función para calcular el precio final basado en los costes y márgenes proporcionados.
- Calcula la ganancia total esperada en función de las ventas proyectadas por el usuario.

Código del Script en JavaScript:

// El código propuesto para calcular el precio final de un producto y pedir las ventas proyectadas

const readline = require('readline').createInterface({
  input: process.stdin,
  output: process.stdout
});

function calcularPrecioFinal(costoMateriaPrima, margenGanancia, tasaImpuestos) {
  return costoMateriaPrima + (costoMateriaPrima * margenGanancia) + (costoMateriaPrima * tasaImpuestos);
}

function calcularGananciaTotal(precioFinal, cantidadVentas, costoMateriaPrima) {
  return (precioFinal - costoMateriaPrima) * cantidadVentas;
}

readline.question('Ingrese el costo de la materia prima: ', (costo) => {
  readline.question('Ingrese el margen de ganancia en decimal (ej. 0.3 para 30%): ', (margen) => {
    readline.question('Ingrese la tasa de impuestos en decimal: ', (impuesto) => {
      const precioFinal = calcularPrecioFinal(parseFloat(costo), parseFloat(margen), parseFloat(impuesto));
      console.log(`El precio final sugerido es de: ${precioFinal}`);

      readline.question('¿Cuántas ventas del producto espera realizar? ', (ventas) => {
        const gananciaTotal = calcularGananciaTotal(precioFinal, parseFloat(ventas), parseFloat(costo));
        console.log(`La ganancia total esperada es de: ${gananciaTotal}`);
        readline.close();
      });
    });
  });
});

¿Cómo se valida la lógica del código generado?

Es vital validar la lógica del código sugerido antes de implementarlo en un entorno de producción. Aunque la AI facilita la creación de código, el desarrollador debe entender y verificar cada segmento para asegurarse de que se ajusta a los requisitos y estándares definidos.

¿Cómo integrar una interfaz gráfica con JavaScript?

El siguiente paso es enriquecer nuestro proyecto utilizando una interfaz gráfica de usuario (GUI) en lugar de interacción por consola.

Generación de Frontend con AI: Se solicita al asistente de AI generar una interfaz utilizando HTML, CSS y JavaScript.
Estructura del Proyecto: El asistente propone y crea los archivos necesarios: index.html para la estructura base, estilos.css para el diseño visual y script.js para la lógica.

Fragmento de Código HTML y CSS

<!-- index.html -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Calculadora de Precios</title>
</head>
<body>
    <div class="contenedor">
        <h1>Calculadora de Precios</h1>
        <!-- Inputs y Botones aquí -->
    </div>
    <script src="script.js"></script>
</body>
</html>

/* estilos.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

.contenedor {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

¿Por qué es importante integrar AI responsablemente?

El uso responsable de la inteligencia artificial en el desarrollo implica:

Comprensión completa: Antes de implementar cualquier código sugerido, asegúrate de que se alinee con la lógica planificada.
Adaptabilidad: Asegúrate de que las herramientas de IA sirvan a tus necesidades sin desviar la planificación del proyecto.
Colaboración y aprendizaje: Al adoptar AI, se fomenta un entorno donde humanos y máquinas colaboran para aumentar la eficiencia sin sacrificar calidad.

Este abordaje no solo mejora tu nivel como desarrollador, sino que también te prepara para enfrentar los desafíos de un mercado laboral en constante evolución.