Delegar tareas repetitivas a la inteligencia artificial puede acelerar tu flujo de trabajo, pero usar IA para programar exige criterio profesional. Como ingeniero o ingeniera, tú decides si el código generado cumple con los estándares, la nomenclatura y la estructura de tu proyecto. Aquí verás cómo revisar y mejorar lo que la IA propone, además de cómo cerrar la lógica de un editor de notas en Markdown.
¿Por qué revisar el código que genera la inteligencia artificial?
La IA es una asistente, no la autora final del software. Cuando analicé el código que entregó para este proyecto, encontré varios detalles que valía la pena ajustar antes de hacer merge.
En el pull request documenté la motivación y los cambios siguiendo el estándar del equipo. Detecté, por ejemplo, un while que sí limpiaba el contenedor, pero no era la mejor implementación posible. También nombres como titleEl, donde El viene de element, pero no describe nada útil y puede confundir a quien lea el código más adelante.
¿La IA reemplaza al programador? No. La IA propone soluciones que pueden funcionar, pero tú validas si cumplen con la nomenclatura, la arquitectura y los objetivos de tu proyecto.
¿Cómo mejorar la nomenclatura propuesta por la IA?
En lugar de titleEl, mi propuesta usa nombres descriptivos como noteTitle, noteServ y noteDate. Palabras que comunican qué representa cada variable dentro de la construcción del componente.
Este tipo de revisión aplica a cualquier herramienta que pruebes. Los modelos más actuales y de pago suelen dar mejores resultados, y la forma en que escribes el prompt también influye. Entras en un proceso de iteración que deja aprendizajes, pero el estándar lo defines tú.
¿Cómo construir un manejador de mensajes en JavaScript?
Con las funciones renderNoteList, renderEditor y renderPreview ya mejoradas, el siguiente paso es mostrar mensajes de error o éxito en la interfaz mediante showMessage.
La función recibe dos parámetros documentados con JSDoc: un string message con el contenido a mostrar y un boolean isError que indica true si es error y false si es éxito.
javascript
/**
- Muestra un mensaje de error o éxito
- @param {string} message - mensaje a mostrar
- @param {boolean} isError - true si es error, false si es éxito
*/
function showMessage(message, isError) {
const messageContainer = document.querySelector('.messageContainer');
messageContainer.textContent = message;
if (isError === true) {
messageContainer.className = 'message_error';
} else {
messageContainer.className = 'messageSuccess';
}
setTimeout(() => {
messageContainer.textContent = '';
messageContainer.className = 'message';
}, 3000);
}
El setTimeout de tres segundos limpia el contenido y restablece la clase original, dejando el contenedor listo para el siguiente mensaje.
¿Cómo inicializar los event listeners de una aplicación de notas?
La función initializeEventListeners recibe el store de notas y conecta los botones de la interfaz con la lógica del editor.
El primer botón, newNoteBottom, ejecuta renderEditor(null) al hacer clic, lo que prepara el editor para una nota nueva. El segundo, saveNoteBottom, encapsula la lógica más compleja del flujo.
¿Qué hace event.addEventListener en este caso? Conecta un evento, como un clic, con una función que ejecuta acciones específicas: validar contenido, guardar nota y actualizar la lista visible.
¿Cómo validar y guardar una nota correctamente?
Dentro del listener de guardar, primero obtienes el valor del textarea y validas que no esté vacío usando content.trim(). Si está vacío, muestras un mensaje de error y haces return para cortar la ejecución.
Luego viene la bifurcación principal:
- Si
currentNoteId es distinto de null, llamas a store.updateNote(currentNoteId, content) para actualizar la nota existente.
- Si
currentNoteId es null, llamas a store.addNote(content) para crear una nueva.
- En ambos casos revisas
result.success para mostrar el mensaje correspondiente con showMessage.
Cuando la operación es exitosa, recuperas las notas con store.getNotes() ordenadas por fecha y ejecutas renderNoteList(notes) para refrescar la vista. Como buena práctica, puedes usar optional chaining al acceder a result.note?.id, evitando errores si la respuesta no trae el objeto esperado.
javascript
const result = store.addNote(content);
if (result.success === true) {
showMessage('Nota creada exitosamente', false);
currentNoteId = result.note?.id;
const notes = store.getNotes();
renderNoteList(notes);
} else {
showMessage(result.message, true);
}
Un detalle importante: cuando anidas if y else, ten cuidado de no asociar un else al bloque equivocado. Mantener la indentación clara y separar bien la lógica del if padre del if interno evita errores difíciles de detectar.
¿Qué aprendizajes deja trabajar con IA en proyectos reales?
La IA acelera, pero no decide. Compara siempre lo que te entrega contra la estructura y los estándares de tu proyecto, ajusta nombres, simplifica estructuras como bucles innecesarios y documenta cada función con JSDoc para que tu equipo entienda los parámetros y el propósito.
Déjame en los comentarios o en el pull request qué cambiarías tú del código generado por la IA y qué estándar sigues en tus proyectos.
