Crea tu propio ChatBot inteligente.

¿Te has imaginado alguna vez crear un chatbot inteligente con tus propias manos? 🚀

Hoy en Código Aula, te vamos a guiar paso a paso para que desarrolles tu primer chatbot utilizando JavaScript y un poco de inteligencia artificial básica.

¿Qué vamos a construir?

Un chatbot sencillo que pueda:

Entender mensajes simples de los usuarios.

Responder de manera «inteligente» con una pequeña base de conocimiento.

Ser mejorado fácilmente en el futuro.

Herramientas que vamos a utilizar:

HTML: para darle estructura al chat.

CSS: para que el chatbot luzca atractivo.

JavaScript: para manejar la lógica del chatbot.

Inteligencia Artificial Básica: simulada a través de «intents» y respuestas.

(Y más adelante, podríamos conectarlo con APIs de IA como OpenAI o Hugging Face.)

1. El código HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Primer Chatbot IA</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="chat-container">
    <div id="chat-box"></div>
    <input type="text" id="user-input" placeholder="Escribe un mensaje...">
    <button onclick="sendMessage()">Enviar</button>
  </div>

  <script src="chatbot.js"></script>
</body>
</html>

2. A darle estilo con CSS

/* style.css */
body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

#chat-container {
  width: 300px;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

#chat-box {
  height: 300px;
  overflow-y: auto;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  padding: 10px;
}

#user-input {
  width: calc(100% - 60px);
  padding: 10px;
}

button {
  width: 50px;
  padding: 10px;
  background: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

3. A hacerlo inteligente con Javascript

// chatbot.js
const chatBox = document.getElementById('chat-box');
const userInput = document.getElementById('user-input');

const intents = {
  "hola": "¡Hola! ¿Cómo estás?",
  "¿cómo estás?": "Estoy aquí para ayudarte 🤖",
  "adiós": "¡Hasta luego! 👋",
  "quién eres": "Soy tu primer chatbot hecho en Código Aula 🚀",
};

function sendMessage() {
  const message = userInput.value.trim();
  if (message === '') return;

  appendMessage('Tú', message);
  
  const botReply = getBotReply(message.toLowerCase());
  setTimeout(() => {
    appendMessage('Bot', botReply);
  }, 500);

  userInput.value = '';
}

function appendMessage(sender, message) {
  const messageElement = document.createElement('div');
  messageElement.textContent = `${sender}: ${message}`;
  chatBox.appendChild(messageElement);
  chatBox.scrollTop = chatBox.scrollHeight;
}

function getBotReply(message) {
  return intents[message] || "Lo siento, no entiendo eso 😢";
}