{"id":81330,"date":"2024-10-24T17:10:40","date_gmt":"2024-10-24T13:40:40","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/inventory-management-desktop-app-using-electronjs-5i1\/"},"modified":"2024-10-24T17:10:40","modified_gmt":"2024-10-24T13:40:40","slug":"inventory-management-desktop-app-using-electronjs-5i1","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/inventory-management-desktop-app-using-electronjs-5i1\/","title":{"rendered":"\u0628\u0631\u0646\u0627\u0645\u0647 \u062f\u0633\u06a9\u062a\u0627\u067e \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u0648\u062c\u0648\u062f\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 ElectronJS"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang <\/p>\n

\u0633\u0627\u062e\u062a\u0627\u0631 \u0641\u0627\u06cc\u0644<\/p>\n

inventory-app\/
\n\u251c\u2500\u2500 assets\/
\n\u2502 \u2514\u2500\u2500 icon.png
\n\u251c\u2500\u2500 node_modules\/
\n\u251c\u2500\u2500 src\/
\n\u2502 \u251c\u2500\u2500 renderer\/
\n\u2502 \u2502 \u251c\u2500\u2500 index.html
\n\u2502 \u2502 \u251c\u2500\u2500 renderer.js
\n\u2502 \u2502 \u2514\u2500\u2500 styles.css
\n\u2502 \u2514\u2500\u2500 main\/
\n\u2502 \u251c\u2500\u2500 main.js
\n\u2502 \u251c\u2500\u2500 database.js
\n\u2502 \u2514\u2500\u2500 inventory.js
\n\u251c\u2500\u2500 inventory.db
\n\u251c\u2500\u2500 package.json
\n\u251c\u2500\u2500 package-lock.json
\n\u2514\u2500\u2500 README.md<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

1. main.js (src\/main\/main.js)<\/p>\n

\u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a \u0628\u0631\u0646\u0627\u0645\u0647 Electron \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 \u067e\u0646\u062c\u0631\u0647 \u0627\u0635\u0644\u06cc \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

const { app, BrowserWindow, ipcMain } = require(‘electron’);
\nconst path = require(‘path’);
\nconst { addItem, getItems } = require(‘.\/inventory’); \/\/ Import inventory logic<\/p>\n

let mainWindow;<\/p>\n

app.on(‘ready’, () => {
\n mainWindow = new BrowserWindow({
\n width: 800,
\n height: 600,
\n webPreferences: {
\n nodeIntegration: true,
\n contextIsolation: false,
\n },
\n });<\/p>\n

mainWindow.loadFile(path.join(__dirname, ‘..\/renderer\/index.html’));<\/p>\n

mainWindow.on(‘closed’, function () {
\n mainWindow = null;
\n });
\n});<\/p>\n

\/\/ Handle inter-process communication (IPC)
\nipcMain.on(‘add-item’, (event, item) => {
\n addItem(item, (err) => {
\n if (err) {
\n event.reply(‘error’, ‘Error adding item’);
\n } else {
\n event.reply(‘success’, ‘Item added’);
\n }
\n });
\n});<\/p>\n

ipcMain.on(‘get-items’, (event) => {
\n getItems((err, items) => {
\n if (err) {
\n event.reply(‘error’, ‘Error fetching items’);
\n } else {
\n event.reply(‘inventory-data’, items);
\n }
\n });
\n});<\/p>\n

app.on(‘window-all-closed’, () => {
\n if (process.platform !== ‘darwin’) {
\n app.quit();
\n }
\n});<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

2. database.js (src\/main\/database.js)<\/p>\n

\u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0627\u062a\u0635\u0627\u0644 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 SQLite \u0648 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n

const sqlite3 = require(‘sqlite3’).verbose();
\nconst path = require(‘path’);<\/p>\n

\/\/ Initialize SQLite database
\nconst db = new sqlite3.Database(path.join(__dirname, ‘..\/..\/inventory.db’), (err) => {
\n if (err) {
\n console.error(‘Error opening database:’, err);
\n } else {
\n db.run(`
\n CREATE TABLE IF NOT EXISTS inventory (
\n id INTEGER PRIMARY KEY AUTOINCREMENT,
\n name TEXT NOT NULL,
\n quantity INTEGER NOT NULL
\n )
\n `, (err) => {
\n if (err) {
\n console.error(‘Error creating table:’, err);
\n }
\n });
\n }
\n});<\/p>\n

module.exports = db;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

3. inventory.js (src\/main\/inventory.js)<\/p>\n

\u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u062d\u0627\u0648\u06cc \u0645\u0646\u0637\u0642 \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0627\u0633\u062a\u060c \u0645\u0627\u0646\u0646\u062f \u0627\u0641\u0632\u0648\u062f\u0646 \u06cc\u0627 \u0648\u0627\u06a9\u0634\u06cc \u0645\u0648\u0627\u0631\u062f.<\/p>\n

const db = require(‘.\/database’);<\/p>\n

\/\/ Add item to the database
\nfunction addItem(item, callback) {
\n db.run(‘INSERT INTO inventory (name, quantity) VALUES (?, ?)’, [item.name, item.quantity], callback);
\n}<\/p>\n

\/\/ Get all items from the database
\nfunction getItems(callback) {
\n db.all(‘SELECT * FROM inventory’, callback);
\n}<\/p>\n

module.exports = { addItem, getItems };<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

4. index.html (src\/renderer\/index.html)<\/p>\n

\u0627\u06cc\u0646 \u0635\u0641\u062d\u0647 HTML \u0638\u0627\u0647\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 Electron \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

lang=”en”><\/p>\n

charset=”UTF-8″>
\n name=”viewport” content=”width=device-width, initial-scale=1.0″>
\n Inventory Management
\n rel=”stylesheet” href=”.\/styles.css”><\/p>\n

Inventory Management
\n id=”inventory-list”><\/p>\n

src=]]>”.\/renderer.js”><\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

5. renderer.js (src\/renderer\/renderer.js)<\/p>\n

\u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u06cc\u0646 frontend \u0648 backend (\u0641\u0631\u0627\u06cc\u0646\u062f \u0627\u0635\u0644\u06cc) \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 UI \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

const { ipcRenderer } = require(‘electron’);<\/p>\n

\/\/ Handle form submission
\ndocument.getElementById(‘item-form’).addEventListener(‘submit’, (event) => {
\n event.preventDefault();<\/p>\n

const itemName = document.getElementById(‘item-name’).value;
\n const itemQuantity = document.getElementById(‘item-quantity’).value;<\/p>\n

\/\/ Send the item data to the backend
\n ipcRenderer.send(‘add-item’, { name: itemName, quantity: parseInt(itemQuantity) });
\n});<\/p>\n

\/\/ Success\/Error handling from backend
\nipcRenderer.on(‘success’, (event, message) => {
\n alert(message);
\n loadInventory();
\n});<\/p>\n

ipcRenderer.on(‘error’, (event, message) => {
\n alert(message);
\n});<\/p>\n

\/\/ Load and display inventory items
\nfunction loadInventory() {
\n ipcRenderer.send(‘get-items’);
\n}<\/p>\n

ipcRenderer.on(‘inventory-data’, (event, items) => {
\n const inventoryList = document.getElementById(‘inventory-list’);
\n inventoryList.innerHTML = ”;<\/p>\n

items.forEach(item => {
\n const itemElement = document.createElement(‘div’);
\n itemElement.innerHTML = `${item.name} – ${item.quantity}`;
\n inventoryList.appendChild(itemElement);
\n });
\n});<\/p>\n

\/\/ Initial load of inventory
\nloadInventory();<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

6. styles.css (src\/renderer\/styles.css)<\/p>\n

\u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647<\/p>\n

body {
\n font-family: Arial, sans-serif;
\n padding: 20px;
\n}<\/p>\n

h1 {
\n text-align: center;
\n}<\/p>\n

form {
\n margin-top: 20px;
\n display: flex;
\n justify-content: center;
\n gap: 10px;
\n}<\/p>\n

#inventory-list {
\n margin-top: 20px;
\n}<\/p>\n

#inventory-list div {
\n padding: 5px;
\n border-bottom: 1px solid #ccc;
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

7. package.json (package.json)<\/p>\n

\u0627\u06cc\u0646 \u0627\u0633\u062a package.json \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627\u060c \u062a\u0639\u0631\u06cc\u0641 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0647\u0627 \u0648 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627.<\/p>\n

{
\n “name”: “inventory-app”,
\n “version”: “1.0.0”,
\n “description”: “A simple inventory management desktop app using Electron.js, SQLite, and Node.js”,
\n “main”: “src\/main\/main.js”,
\n “scripts”: {
\n “start”: “electron .”
\n },
\n “devDependencies”: {
\n “electron”: “^26.0.0”
\n },
\n “dependencies”: {
\n “sqlite3”: “^5.1.2”
\n }
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

8. README.md (\u0627\u062e\u062a\u06cc\u0627\u0631\u06cc)<\/p>\n

\u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0628\u0627\u06cc\u062f \u0646\u062d\u0648\u0647 \u0627\u062c\u0631\u0627 \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u062a\u0648\u0636\u06cc\u062d \u062f\u0647\u062f.<\/p>\n

# Inventory Management App<\/p>\n

A simple desktop application built with Electron.js, SQLite, and Node.js to manage inventory.<\/p>\n

## How to Run<\/p>\n

1. Clone the repository:<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0636\u0631\u0628\u0647 \u0634\u062f\u06cc\u062f\u06a9\u0644\u0648\u0646 git https:\/\/github.com\/your-username\/inventory-app.git<\/p>\n

2. Navigate to the project directory:<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0636\u0631\u0628\u0647 \u0634\u062f\u06cc\u062f\u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0648\u062c\u0648\u062f\u06cc \u0633\u06cc \u062f\u06cc<\/p>\n

3. Install dependencies:<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0636\u0631\u0628\u0647 \u0634\u062f\u06cc\u062fnpm \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<\/p>\n

4. Start the Electron app:<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0636\u0631\u0628\u0647 \u0634\u062f\u06cc\u062f\u0634\u0631\u0648\u0639 npm<\/p>\n

## Features<\/p>\n

– Add inventory items with name and quantity
\n– View all items in the inventory<\/p>\n

## Technologies Used<\/p>\n

– **Electron.js** for desktop application framework
\n– **SQLite** for database management
\n– **Node.js** for backend logic<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0646\u062d\u0648\u0647 \u0627\u062c\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647<\/p>\n

Dependencies \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f: \u062f\u0648\u06cc\u062f\u0646 npm install \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 \u062a\u0645\u0627\u0645 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0644\u0627\u0632\u0645 (\u0645\u0627\u0646\u0646\u062f electron \u0648 sqlite3).<\/p>\n

\u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f: \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f npm start \u0628\u0631\u0627\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 Electron.<\/p>\n

\n
\n
\n

\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n