02 / Tutorial para principiantes / 8 min de lectura

Cómo usar REA: seguir el botón Exportar de una aplicación

Pulsas «Export notes», pero ¿dónde va el archivo CSV? Usa REA para seguir el botón a través de una pequeña aplicación Electron y prueba después el código que da formato al archivo.

En esta página
JavaScript / ElectronSin motor nativoEjemplo didáctico oficial
Qué aprenderás
  • Descargar una pequeña aplicación y dar la ruta de su carpeta a REA.
  • Encontrar el controlador de exportación y el destino previsto: Downloads/notes.csv.
  • Ejecutar una breve comprobación para ver si las comas y las comillas se exportan correctamente.

01. Elegir una pregunta

«Explica esta aplicación» es una petición amplia. Empieza por un comportamiento que puedas nombrar y una respuesta que puedas comprobar:

Nuestra pregunta
Cuando pulso Export notes, ¿dónde se guarda el archivo CSV y qué ocurre si el título de una nota contiene comas o comillas?

Usamos el ejemplo oficial REA Notes: seis archivos pequeños que representan una aplicación Electron. Es un ejemplo didáctico, no una aplicación de producción. Su análisis estático no requiere instalar Electron.

02. Obtener el ejemplo

Descarga notes-example.zip de rea.tools y extráelo en una carpeta nueva. Ten a mano la ruta de la carpeta. Deberías ver:

Archivos del ejemplo
notes-example/
  package.json
  index.html
  renderer.js
  preload.js
  main.js
  csv.js

Si REA aún no está conectado, sigue la guía de instalación. Este ejemplo puede inspeccionarse sin abrir una ventana de escritorio.

03. Pedir al agente que lo inspeccione

Sustituye la ruta del ejemplo en esta instrucción por la ruta absoluta de la carpeta extraída.

Instrucción de análisis
Usa REA para inspeccionar estáticamente /absolute/path/to/notes-example. Sigue el botón Export notes a través del renderizador, el puente preload y el proceso principal. Muestra la ruta del archivo de salida, las columnas CSV y los archivos y líneas que respaldan tu respuesta. No inicies Electron. Distingue el código observado de las suposiciones.

También puedes recopilar las pruebas estáticas de REA directamente desde la terminal:

Terminal
npx -y [email protected] analyze-javascript-application "/absolute/path/to/notes-example" --json > notes-analysis.json

El comando fija la versión usada en esta guía. El JSON contiene pruebas del análisis, no una explicación en lenguaje natural; tu agente de programación lo usa para orientar la inspección posterior.

04. Seguir la ruta de exportación

La respuesta: la aplicación está programada para guardar notes.csv en la carpeta Descargas del sistema operativo. La configuración está en main.js. Así llega el botón hasta ese código.

Botón→Preload→IPC→Archivo CSV

En Electron, la página y la aplicación principal se ejecutan por separado. Preload expone un método al que puede llamar la página. IPC es el mensaje que lleva la solicitud a la aplicación principal, que puede escribir el archivo.

UbicaciónQué hace el código
renderer.jsEl controlador del clic llama a window.notes.exportCsv().
preload.jsEl método expuesto invoca notes:export como canal IPC.
main.jsEl controlador correspondiente construye una ruta a Descargas y escribe notes.csv.
csv.jsEl formateador escribe id,title, encierra cada título entre comillas y duplica las comillas internas.

El código utiliza la función de Electron app.getPath("downloads"). Eso establece el destino previsto; no demuestra que se haya escrito realmente un archivo en tu equipo. Esta guía comprueba directamente el formateador a continuación.

05. Comprobar una predicción

Da al formateador una nota cuyo título sea Hello, "REA". La fila CSV prevista es:

Salida esperada
id,title
1,"Hello, ""REA"""

La coma permanece dentro de un único campo entrecomillado. Cada comilla interna se convierte en dos comillas. Para verificarlo, guarda lo siguiente como check.cjs en la carpeta notes-example que acabas de extraer:

check.cjs
const assert = require("node:assert/strict");
const { toCsv } = require("./csv.js");

const actual = toCsv([{ id: 1, title: 'Hello, "REA"' }]);
const expected = 'id,title\n1,"Hello, ""REA"""\n';
assert.equal(actual, expected);
console.log(actual);
console.log("PASS: comma and quotes stay in one field.");
Ejecutar desde la carpeta del ejemplo
node check.cjs

Verificado localmente. Ejecutamos el análisis estático de REA 6.4.0 y esta comprobación del formateador el 12 de octubre de 2026. La salida coincidió. No abrimos la interfaz de Electron ni probamos los permisos del sistema de archivos mediante su botón de exportación.

06. Continuar con una pregunta más precisa

Prueba ahora una pregunta que ponga a prueba la explicación en vez de pedir una descripción más general:

Instrucción de seguimiento
Si falla la escritura de notes.csv, ¿cómo regresaría ese error a la página? Sigue el manejo de errores en los archivos proporcionados. Identifica cualquier controlador que falte, pero no modifiques la aplicación.

Incluye tres cosas en cada informe: el hallazgo, su ubicación en el código y lo que realmente probaste. Así resulta más fácil detectar una explicación plausible que va más allá de las pruebas.

Siguiente / Ejemplo con un paquete realDescubrir por qué una URL generada aún contiene «!».

Ejemplo y flujo de trabajo: Primera investigación oficial de REA. Esta página es una guía independiente que añade un análisis local y una comprobación del formateador. Descargar el resumen del análisis.

¿Acabas de conocer la herramienta? ¿Qué es REA? · Cómo revisamos nuestras guías