کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه "اپلیکیشن ویرایشگر متن" با استفاده از Electron
اپلیکیشن ویرایشگر متن یک برنامه دسکتاپ ساده است که با استفاده از Electron ساخته شده است. این اپلیکیشن به کاربران این امکان را می‌دهد که متن را وارد و ویرایش کنند و محتوای ویرایش شده را ذخیره یا بارگذاری کنند. Electron به ما این امکان را می‌دهد که از تکنولوژی‌های وب (HTML، CSS و جاوا اسکریپت) برای ساخت اپلیکیشن‌های دسکتاپ استفاده کنیم.
#### ویژگی‌های پروژه:
- **ویرایش متن:** کاربران می‌توانند متن را وارد و ویرایش کنند.
- **ذخیره متن:** امکان ذخیره محتوا به عنوان یک فایل متنی.
- **بارگذاری متن:** امکان بارگذاری محتوا از یک فایل متنی.
- **ساده و کاربرپسند:** طراحی ساده و کاربرپسند.
### راه‌اندازی پروژه
#### 1. نصب Electron
برای شروع، مطمئن شوید که Node.js و npm بر روی سیستم شما نصب شده‌اند. سپس در دایرکتوری مورد نظر خود، یک پروژه جدید ایجاد کرده و Electron را نصب کنید:
```bash
mkdir text-editor
cd text-editor
npm init -y
npm install electron --save-dev
```
#### 2. ساختار فایل‌ها
ساختار پروژه به صورت زیر است:
```
text-editor/
├── package.json
├── main.js
├── index.html
├── styles.css
└── renderer.js
```
#### 3. کد منبع
##### فایل `package.json`
این فایل مشخصات پروژه را شامل می‌شود:
```json
{
"name": "text-editor",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^23.0.0"
}
}
```
##### فایل `main.js`
این فایل مسئول ایجاد پنجره اپلیکیشن و بارگذاری HTML است:
```javascript
const { app, BrowserWindow, ipcMain, dialog } = require('electron');
const path = require('path');
const fs = require('fs');
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'renderer.js'),
contextIsolation: true,
enableRemoteModule: false,
nodeIntegration: true
}
});
mainWindow.loadFile('index.html');
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
// بارگذاری فایل
ipcMain.handle('dialog:openFile', async () => {
const result = await dialog.showOpenDialog({
properties: ['openFile'],
filters: [{ name: 'Text Files', extensions: ['txt'] }]
});
if (result.canceled) return null;
return result.filePaths[0];
});
// ذخیره فایل
ipcMain.handle('dialog:saveFile', async (event, content) => {
const result = await dialog.showSaveDialog({
filters: [{ name: 'Text Files', extensions: ['txt'] }]
});
if (result.canceled) return;
fs.writeFileSync(result.filePath, content);
});
```
##### فایل `index.html`
این فایل رابط کاربری اپلیکیشن را ایجاد می‌کند:
```html
Text Editor
```
##### فایل `styles.css`
برای زیباسازی رابط کاربری استفاده می‌شود:
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
width: 80%;
max-width: 800px;
margin: auto;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
resize: none;
font-size: 16px;
}
.buttons {
margin-top: 10px;
text-align: center;
}
button {
padding: 10px 15px;
margin: 5px;
border: none;
border-radius: 4px;
background-color: #5cb85c;
color: white;
cursor: pointer;
}
button:hover {
background-color: #4cae4c;
}
```
##### فایل `renderer.js`
این فایل منطق و تعاملات رابط کاربری را مدیریت می‌کند:
```javascript
const { ipcRenderer } = require('electron');
const textEditor = document.getElementById('textEditor');
const saveButton = document.getElementById('saveButton');
const loadButton = document.getElementById('loadButton');
// تابع برای بارگذاری متن از فایل
loadButton.addEventListener('click', async () => {
const filePath = await ipcRenderer.invoke('dialog:openFile');
if (filePath) {
const content = fs.readFileSync(filePath, 'utf-8');
textEditor.value = content;
}
});
// تابع برای ذخیره متن به عنوان فایل
saveButton.addEventListener('click', async () => {
const content = textEditor.value;
await ipcRenderer.invoke('dialog:saveFile', content);
});
```
### اجرای پروژه
برای اجرای اپلیکیشن، از دستور زیر در ترمینال استفاده کنید:
```bash
npm start
```
### نتیجه‌گیری
این پروژه "اپلیکیشن ویرایشگر متن" به شما این امکان را می‌دهد که با اصول ساخت اپلیکیشن‌های دسکتاپ با استفاده از Electron آشنا شوید. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند افزودن گزینه‌های فرمت متن، تاریخچه ویرایش، یا قابلیت چاپ اضافه کنید. این پروژه یک نقطه شروع عالی برای یادگیری توسعه اپلیکیشن‌های دسکتاپ است.
| صفحه قابل مشاهده:
دانلود پروژه کاربردی اپلیکیشن ویرایشگر متن" با استفاده از Electron می‌باشد
