Skip to main content

Formularios con n8n.

Enunciado​

En el IES Alonso de Ercilla, las incidencias de las aulas se registran en formularios en papel. Con el fin de agilizar su gestión, se plantea la digitalización de estos documentos mediante OCR, permitiendo que la información llegue de forma automática a un sistema digital de control de incidencias.​

Videotutoriales​

En este apartado podrás ver todo el proceso del desarrollo del proyecto.

Vídeo 1. Instalación​

En este vídeo aprenderás paso a paso a instalar n8n, una potente herramienta de automatización. Configuraremos Node.js en Windows, ejecutaremos n8n desde la consola y prepararemos su despliegue con Docker.

Vídeo 2. Envío automatizado de correos con Gmail y N8N​

En este vídeo aprenderemos a enviar correos automáticos con Gmail usando N8N, una herramienta de automatización. Veremos cómo generar la contraseña de aplicación de Google, configurar un flujo en N8N que reciba peticiones HTTP, y probarlo con Postman para enviar correos personalizados con asunto y mensaje desde un JSON. Ideal para entender cómo conectar servicios y automatizar tareas reales.

Vídeo 3 Digitalización automática de incidencias con OCR, Google Forms y n8n (Parte 1)​

En este vídeo se explica cómo transformar incidencias escritas a mano en formularios digitales de manera automática. A partir de una imagen o escaneo, se utiliza tecnología OCR para extraer el texto y generar un archivo JSON con los datos. Después, se muestra cómo crear un formulario en Google Forms con los campos “nombre”, “lugar” y “detalle”, y cómo enviarle información mediante una petición HTTP POST usando Postman. Este proceso sienta las bases para automatizar el flujo completo con n8n, que se abordará en la siguiente parte del tutorial.

Vídeo 4 Digitalización automática de incidencias con OCR, Google Forms y n8n (Parte 2)​

Vídeo 5 Digitalización automática de incidencias con OCR, Google Forms y n8n (Parte 3)​

Vídeo 6 Digitalización automática de incidencias con OCR, Google Forms y n8n (Parte 4)​

En este vídeo se explica como realizar la conexión con DropBox.

Ejemplo de formularios​

img0img1img2img3img4img5

SECUENCIA DE DATOS​

formulario

SECUENCIA DE DATOS (Con DropBox)​

formulario2

CÓDIGO BASE PARA EL PROGRAMA​

  1. Crea un nuevo proyecto llamado Incidencias desde el IDE IntelliJ IDEA en Maven.
  2. Añade las siguientes dependencias en el archivo pom.xml:

OkHttp (para las peticiones HTTP)​

<dependency>
    <groupId>com.squareup.okhttp3</groupId>
    <artifactId>okhttp</artifactId>
    <version>4.12.0</version>
</dependency>

org.json (para parsear y construir JSON)​

<dependency>
  <groupId>org.json</groupId>
  <artifactId>json</artifactId>
  <version>20231013</version>
</dependency>

librería dotenv-java (seguridad para claves en control de versiones)​

<dependency>
  <groupId>io.github.cdimascio</groupId>
  <artifactId>dotenv-java</artifactId>
  <version>3.0.0</version>
</dependency>

Spark Java (para crear un servicio web ligero)​

<dependency>
    <groupId>com.sparkjava</groupId>
    <artifactId>spark-core</artifactId>
    <version>2.9.4</version>
</dependency>
ATENCIÓN
  1. Al poner las dependencias deben ir en el nodo <dependencies></dependencies> (añádelo si no está).
  2. Despues de poner las dependencias en necesario sincronizar maven (icono 🔄️)
  1. Crea la clase Formulario.java y pega el siguiente método main:
public static void main(String[] args) throws Exception {
        OkHttpClient client = new OkHttpClient();

        // 1. Ruta de la imagen en disco
        Path imagen = Path.of("ruta a la imagen");

        // 2. Convertir la imagen a Base64 y prepararla para OCR.space
        String base64 = Base64.getEncoder()
                .encodeToString(Files.readAllBytes(imagen))
                .replaceAll("\\r|\\n", ""); // limpiar saltos de línea
        String base64Image = "data:image/png;base64," + base64;
        String encodedImage = URLEncoder.encode(base64Image, StandardCharsets.UTF_8);

        // 3. Construir el cuerpo del POST para OCR.space
        String body = "apikey=APIKEY"
                + "&language=spa"
                + "&OCREngine=2"
                + "&isOverlayRequired=true"
                + "&scale=true"
                + "&base64Image=" + encodedImage;

        // 4. Crear la petición HTTP a OCR.space
        Request request = new Request.Builder()
                .url("https://api.ocr.space/parse/image")
                .post(RequestBody.create(body, MediaType.parse("application/x-www-form-urlencoded")))
                .build();

        // 5. Ejecutar la petición y obtener la respuesta
        try (Response response = client.newCall(request).execute()) {
            String responseBody = response.body().string();
            System.out.println("Respuesta OCR: " + responseBody);

            // 6. Parsear JSON con el texto reconocido
            JSONObject json = new JSONObject(responseBody);
            JSONArray results = json.getJSONArray("ParsedResults");

            if (results.length() > 0) {
                // Texto plano devuelto por OCR.space
                String parsedText = results.getJSONObject(0).getString("ParsedText");
                String[] lines = parsedText.split("\\r?\\n");

                // 7. Extraer nombre, lugar y detalle (según la posición en el texto)
                String nombre = lines[2].trim();
                String lugar = lines[4].trim();
                String detalle = lines[6].trim();

                System.out.println("Nombre: " + nombre);
                System.out.println("Lugar: " + lugar);
                System.out.println("Detalle: " + detalle);

                // 8. Construir JSON de salida para enviarlo a n8n
                JSONObject salida = new JSONObject();
                salida.put("nombre", nombre);
                salida.put("lugar", lugar);
                salida.put("detalle", detalle);

                // 9. Crear request hacia el webhook de n8n
                RequestBody body2 = RequestBody.create(
                        salida.toString(),
                        MediaType.parse("application/json; charset=utf-8")
                );

                Request request2 = new Request.Builder()
                        .url("http://localhost:5678/webhook/registrar")
                        .post(body2)
                        .build();

                // 10. Enviar JSON al webhook
                try (Response response2 = client.newCall(request2).execute()) {
                    System.out.println("Código respuesta: " + response2.code());
                    System.out.println("Respuesta n8n: " + response2.body().string());
                }
            } else {
                System.out.println("No se reconoció texto.");
            }

        }
    }
  1. Entra en https://api.ocr.space y obtén un código de APIKEY
  2. Sustituye la ruta de la imagen por la tuya (descarga las del ejemplo), y la APIKEY
ATENCIÓN

El tamaño máximo de la imagen debe ser de 1mb y en formano .png

CÓDIGO Servidor​

Mediante el siguiente código podemos transformar nuestra aplicación, en un pequeño servidro API Rest que recibiría una petición HTTP mediante POST en el puerto 8080.

Dependencias

No te olvides de poner la depencencia necesaria SparkJava

public class Main {
    public static void main(String[] args) throws Exception {
        Dotenv dotenv = Dotenv.load();
        OkHttpClient client = new OkHttpClient();
        // Servidor embebido con SparkJava (simplísimo)
        spark.Spark.port(8080);
        post("/upload", (req, res) -> {
                    byte[] fileBytes = req.bodyAsBytes();
                    String base64 = java.util.Base64.getEncoder().encodeToString(fileBytes);

            String base64Image = "data:image/png;base64," + base64;
            String encodedImage = URLEncoder.encode(base64Image, StandardCharsets.UTF_8);
                    // 3. Construir el cuerpo del POST para OCR.space
                    String body = "apikey=" + dotenv.get("APIKEY")
                            + "&language=spa"
                            + "&OCREngine=2"
                            + "&isOverlayRequired=true"
                            + "&scale=true"
                            + "&base64Image=" + encodedImage;

                    // 4. Crear la petición HTTP a OCR.space
                    Request request = new Request.Builder()
                            .url("https://api.ocr.space/parse/image")
                            .post(RequestBody.create(body, MediaType.parse("application/x-www-form-urlencoded")))
                            .build();


            // 5. Ejecutar la petición y obtener la respuesta
            try (Response response = client.newCall(request).execute()) {
                String responseBody = response.body().string();
                System.out.println("Respuesta OCR: " + responseBody);

                // 6. Parsear JSON con el texto reconocido
                JSONObject json = new JSONObject(responseBody);
                JSONArray results = json.getJSONArray("ParsedResults");

                if (results.length() > 0) {
                    // Texto plano devuelto por OCR.space
                    String parsedText = results.getJSONObject(0).getString("ParsedText");
                    String[] lines = parsedText.split("\\r?\\n");

                    // 7. Extraer nombre, lugar y detalle (según la posición en el texto)
                    String nombre = lines[2].trim();
                    String lugar = lines[4].trim();
                    String detalle = lines[6].trim();

                    System.out.println("Nombre: " + nombre);
                    System.out.println("Lugar: " + lugar);
                    System.out.println("Detalle: " + detalle);

                    // 8. Construir JSON de salida para enviarlo a n8n
                    JSONObject salida = new JSONObject();
                    salida.put("nombre", nombre);
                    salida.put("lugar", lugar);
                    salida.put("detalle", detalle);
                    // 9. Crear request hacia el webhook de n8n
                    RequestBody body2 = RequestBody.create(
                            salida.toString(),
                            MediaType.parse("application/json; charset=utf-8")
                    );


                    Request request2 = new Request.Builder()
                            .url("http://localhost:5678/webhook/incidencias")
                            .post(body2)
                            .build();

                    // 10. Enviar JSON al webhook
                    try (Response response2 = client.newCall(request2).execute()) {
                        System.out.println("Código respuesta: " + response2.code());
                        System.out.println("Respuesta n8n: " + response2.body().string());
                    }
                } else {
                    System.out.println("No se reconoció texto.");
                }

            }
            JSONObject salida = new JSONObject();
            salida.put("ruta_imagen", "imagen");
            return "OK"; // Spark exige un return en la lambda
        });
    }
}