برنامه دسکتاپ مدیریت موجودی با استفاده از ElectronJS

Summarize this content to 400 words in Persian Lang

ساختار فایل

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)

این فایل چرخه حیات برنامه Electron را مدیریت می کند و پنجره اصلی را ایجاد می کند.

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)

این فایل اتصال پایگاه داده SQLite و مقداردهی اولیه را انجام می دهد.

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)

این فایل حاوی منطق تعامل با پایگاه داده است، مانند افزودن یا واکشی موارد.

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)

این صفحه HTML ظاهری است که برنامه Electron بارگیری می کند.

lang=”en”>

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

Inventory Management
id=”inventory-list”>

src=]]>”./renderer.js”>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

5. renderer.js (src/renderer/renderer.js)

این فایل ارتباط بین frontend و backend (فرایند اصلی) را مدیریت می کند و 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 = `${item.name} – ${item.quantity}`;
inventoryList.appendChild(itemElement);
});
});

// Initial load of inventory
loadInventory();

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

6. styles.css (src/renderer/styles.css)

یک ظاهر طراحی اولیه برای برنامه

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)

این است package.json برای پروژه شما، تعریف اسکریپت ها و وابستگی ها.

{
“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 (اختیاری)

این فایل باید نحوه اجرا و استفاده از برنامه را توضیح دهد.

# 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:

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ضربه شدیدکلون git https://github.com/your-username/inventory-app.git

2. Navigate to the project directory:

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ضربه شدیدبرنامه موجودی سی دی

3. Install dependencies:

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ضربه شدیدnpm نصب کنید

4. Start the Electron app:

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ضربه شدیدشروع npm

## 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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نحوه اجرای برنامه

Dependencies را نصب کنید: دویدن npm install برای نصب تمام وابستگی های لازم (مانند electron و sqlite3).

برنامه را شروع کنید: استفاده کنید npm start برای راه اندازی اپلیکیشن Electron.

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

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();
  }
});

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;

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 };

 lang="en">

   charset="UTF-8">
   name="viewport" content="width=device-width, initial-scale=1.0">