← Volver

CRUD en Electron

Publicado el 7 de diciembre de 2025

Electron

Vamos a ver el código necesario para crear un CRUD en Electron.

create.js – Parte del frontend

import { showMessage } from "./showMessage.js";
const buttonCreate = document.querySelector("#button-create");
const inputName = document.querySelector("#input-name");
const sound = new Audio("./assets/audio/success.mp3");

buttonCreate.addEventListener("click", async () => {

    if (!inputName.value) {
        return alert("Escribe un nombre.");
    }

    const result = await window.api.createUser(inputName.value);

    if(result == "success"){
        sound.currentTime = 0;
        sound.play();
        showMessage("Usuario creado");
    }

});

preload.js – Parte del backend

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('api', {
    createUser: async (name) => {
        return await ipcRenderer.invoke('createUser', name);
    },

    readUsers: async () => {
        return await ipcRenderer.invoke('readUsers');
    },

    editUser: async (id, name) => {
        return await ipcRenderer.invoke('editUser', { id, name }); 
    },

    deleteUser: async (id) => {
        return await ipcRenderer.invoke('deleteUser', { id }); 
    },
});

index.js – parte del backend

ipcMain.handle('createUser', (event, name) => {
  return createUser(name);
});

ipcMain.handle('readUsers', (event) => {
  return readUsers();
});

ipcMain.handle('editUser', async (event, data) => {
    const { id, name } = data;
    return await editUser(id, name);
});

ipcMain.handle('deleteUser', async (event, data) => {
    const { id } = data;
    return await deleteUser(id);
});

createUser.js – Parte del backend

const db = require("./db");

const createUser = async(name) => {
    try {
        const [result] = await db.execute("INSERT INTO usuario (nombre) VALUES (?)", [name]);
        return "success";
    } catch (error) {
        console.log("Error insertando usuario: ", error)
        return "error";
    }
}

module.exports = {createUser};

db.js – Parte del backend

const mysql = require('mysql2/promise');

const pool = mysql.createPool({
    host: "ccorreas.es",
    user: "root",
    password: "",
    database: "pruebas",
    waitForConnections: true,
    connectionLimit: 10,
    queueLimit: 0
});

module.exports = pool;

Imagen del resultado final