File Structure
inventory-app/
├── assets/
│ └── icon.png
├── node_modules/
├── src/
│ ├── renderer/
│ │ ├── index.html
│ │ ├── renderer.js
│ │ └── styles.css
│ └── main/
│ ├── main.js
│ ├── database.js
│ └── inventory.js
├── inventory.db
├── package.json
├── package-lock.json
└── README.md
1. main.js (src/main/main.js)
This file handles the Electron app lifecycle and creates the main window.
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const { addItem, getItems } = require('./inventory'); // Import inventory logic
let mainWindow;
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
});
mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'));
mainWindow.on('closed', function () {
mainWindow = null;
});
});
// Handle inter-process communication (IPC)
ipcMain.on('add-item', (event, item) => {
addItem(item, (err) => {
if (err) {
event.reply('error', 'Error adding item');
} else {
event.reply('success', 'Item added');
}
});
});
ipcMain.on('get-items', (event) => {
getItems((err, items) => {
if (err) {
event.reply('error', 'Error fetching items');
} else {
event.reply('inventory-data', items);
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
2. database.js (src/main/database.js)
This file handles the SQLite database connection and initialization.
const sqlite3 = require('sqlite3').verbose();
const path = require('path');
// Initialize SQLite database
const db = new sqlite3.Database(path.join(__dirname, '../../inventory.db'), (err) => {
if (err) {
console.error('Error opening database:', err);
} else {
db.run(`
CREATE TABLE IF NOT EXISTS inventory (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL,
quantity INTEGER NOT NULL
)
`, (err) => {
if (err) {
console.error('Error creating table:', err);
}
});
}
});
module.exports = db;
3. inventory.js (src/main/inventory.js)
This file contains the logic to interact with the database, such as adding or fetching items.
const db = require('./database');
// Add item to the database
function addItem(item, callback) {
db.run('INSERT INTO inventory (name, quantity) VALUES (?, ?)', [item.name, item.quantity], callback);
}
// Get all items from the database
function getItems(callback) {
db.all('SELECT * FROM inventory', callback);
}
module.exports = { addItem, getItems };
4. index.html (src/renderer/index.html)
This is the frontend HTML page that the Electron app loads.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inventory Management</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<h1>Inventory Management</h1>
<div id="inventory-list"></div>
<form id="item-form">
<input type="text" id="item-name" placeholder="Item name" required />
<input type="number" id="item-quantity" placeholder="Quantity" required />
<button type="submit">Add Item</button>
</form>
<script src="./renderer.js"></script>
</body>
</html>
5. renderer.js (src/renderer/renderer.js)
This file manages communication between the frontend and the backend (main process) and updates the UI.
const { ipcRenderer } = require('electron');
// Handle form submission
document.getElementById('item-form').addEventListener('submit', (event) => {
event.preventDefault();
const itemName = document.getElementById('item-name').value;
const itemQuantity = document.getElementById('item-quantity').value;
// Send the item data to the backend
ipcRenderer.send('add-item', { name: itemName, quantity: parseInt(itemQuantity) });
});
// Success/Error handling from backend
ipcRenderer.on('success', (event, message) => {
alert(message);
loadInventory();
});
ipcRenderer.on('error', (event, message) => {
alert(message);
});
// Load and display inventory items
function loadInventory() {
ipcRenderer.send('get-items');
}
ipcRenderer.on('inventory-data', (event, items) => {
const inventoryList = document.getElementById('inventory-list');
inventoryList.innerHTML = '';
items.forEach(item => {
const itemElement = document.createElement('div');
itemElement.innerHTML = `<p>${item.name} - ${item.quantity}</p>`;
inventoryList.appendChild(itemElement);
});
});
// Initial load of inventory
loadInventory();
6. styles.css (src/renderer/styles.css)
Basic styling for the app.
body {
font-family: Arial, sans-serif;
padding: 20px;
}
h1 {
text-align: center;
}
form {
margin-top: 20px;
display: flex;
justify-content: center;
gap: 10px;
}
#inventory-list {
margin-top: 20px;
}
#inventory-list div {
padding: 5px;
border-bottom: 1px solid #ccc;
}
7. package.json (package.json)
This is the package.json for your project, defining the scripts and dependencies.
{
"name": "inventory-app",
"version": "1.0.0",
"description": "A simple inventory management desktop app using Electron.js, SQLite, and Node.js",
"main": "src/main/main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^26.0.0"
},
"dependencies": {
"sqlite3": "^5.1.2"
}
}
8. README.md (Optional)
This file should explain how to run and use the app.
# Inventory Management App
A simple desktop application built with Electron.js, SQLite, and Node.js to manage inventory.
## How to Run
1. Clone the repository:
bash
git clone https://github.com/your-username/inventory-app.git
2. Navigate to the project directory:
bash
cd inventory-app
3. Install dependencies:
bash
npm install
4. Start the Electron app:
bash
npm start
## Features
- Add inventory items with name and quantity
- View all items in the inventory
## Technologies Used
- **Electron.js** for desktop application framework
- **SQLite** for database management
- **Node.js** for backend logic
How to Run the Application
-
Install Dependencies: Run
npm installto install all necessary dependencies (likeelectronandsqlite3). -
Start the Application: Use
npm startto launch the Electron app.
Top comments (0)