سلام به همه 👋!
در این مقاله می‌خواهم روند یادگیری یک فناوری جدید با ChatGPT را به شما نشان دهم که بدون شک امروزه یکی از بهترین ابزارها برای یادگیری است، مخصوصاً من در حال یادگیری ایجاد برنامه‌های دسکتاپ با electron.js هستم زیرا می‌خواهم تمرکز کنم. بیشتر در یک پشته وب و من یک لیست پخش دارم که در صورتی که بخواهید نگاهی به آن بیندازید، فرآیند من در آن به تفصیل آمده است، پس بیایید شروع کنیم.
ویدیوی یوتیوب 📽️
https://www.youtube.com/watch?v=ZI7JBizNOEA
اول از همه، من در حال حاضر از نسخه رایگان ChatGPT استفاده می کنم، اما به لطف گنجاندن محدود مدل GPT-4o، هنوز هم فوق العاده قدرتمند و کامل است و حتی بیشتر از آن.
قدرت جدید GPT-4o به من این امکان را می دهد که موضوعات متنوعی را تنها با یک ورودی یاد بگیرم، که وقتی سوال زیر را بپرسم می توانیم از آن قدردانی کنیم:
> Electron.js چیست؟
پاسخ ChatGPT-4o:
Electron.js یک چارچوب متن باز است که توسط GitHub توسعه یافته است که به توسعه دهندگان اجازه می دهد تا برنامه های دسکتاپ کراس پلتفرم را با استفاده از فناوری های وب مانند HTML، CSS و جاوا اسکریپت بسازند. در اینجا چند نکته کلیدی در مورد Electron.js وجود دارد:
- اجزای اصلی: الکترون موتور رندر کرومیوم و زمان اجرا Node.js را ترکیب می کند. این بدان معناست که می توانید از فناوری های وب برای ایجاد رابط کاربری و Node.js برای مدیریت عملیات باطن استفاده کنید.
- Cross-Platform: برنامه های الکترونیکی می توانند در ویندوز، macOS و Linux با حداقل تغییرات در پایگاه کد اجرا شوند. این امر توسعه نرم افزاری را که در سیستم عامل های مختلف کار می کند آسان تر می کند.
- یکپارچه سازی دسکتاپ: Electron دسترسی به ویژگی های دسکتاپ بومی مانند دسترسی به سیستم فایل، اعلان های سیستم و موارد دیگر را از طریق API خود فراهم می کند. این به توسعه دهندگان اجازه می دهد تا برنامه های دسکتاپ با قابلیت هایی مشابه آنچه که با استفاده از چارچوب های بومی ساخته شده اند ایجاد کنند.
- برنامه های محبوب: چندین برنامه معروف با Electron ساخته شده اند، از جمله Visual Studio Code، Slack و Discord. این برنامه ها توانایی الکترون را در انجام وظایف پیچیده و با کارایی بالا نشان می دهند.
- گردش کار توسعه: توسعه یک برنامه الکترونیکی شامل ایجاد یک فرآیند اصلی و یک یا چند فرآیند رندر است. فرآیند اصلی چرخه عمر برنامه را کنترل می کند و می تواند ویندوز ایجاد کند، در حالی که پردازش های رندر رابط کاربری را مدیریت می کنند.
-
مزایای:
- Unified Codebase: یک بار بنویسید و هر جا اجرا کنید.
- فناوری وب: از مهارت های توسعه وب موجود استفاده کنید.
- یکپارچه سازی Node.js: از اکوسیستم وسیعی از بسته های Node.js استفاده کنید.
-
معایب:
- عملکرد: برنامه های کاربردی الکترون در مقایسه با برنامه های کاربردی بومی می توانند منابع فشرده تری داشته باشند.
- **اندازه: برنامه‌ها به دلیل ترکیب Chromium و Node.js از نظر اندازه بزرگتر هستند.
Electron یک ابزار قدرتمند برای توسعه دهندگانی است که به دنبال ایجاد سریع و کارآمد برنامه های دسکتاپ با استفاده از فناوری های آشنای وب هستند.
فقط با یک سوال، از قبل اطلاعات کافی برای داشتن یک مبنای کاملاً تعریف شده در این مورد خاص در مورد Eletron.js فراهم می کند.
اما حالا بیایید کمی دقیق تر باشیم:
> یک آموزش Electron.js به من بدهید
پاسخ ChatGPT-4o:
مطمئن! بیایید یک برنامه اصلی Electron.js را قدم به قدم ایجاد کنیم. این آموزش شما را در راه اندازی یک برنامه دسکتاپ ساده راهنمایی می کند.
پیش نیازها
- **Node.js: مطمئن شوید که Node.js را نصب کرده اید. می توانید آن را از nodejs.org دانلود کنید.
- **npm: Node Package Manager که همراه با Node.js ارائه می شود.
مرحله 1: پروژه خود را راه اندازی کنید
-
** یک دایرکتوری جدید ایجاد کنید* برای پروژه خود و در آن حرکت کنید:*
bashCopy code mkdir my-electron-app cd my-electron-app -
** یک پروژه Node.js جدید را راه اندازی کنید:
bashCopy code npm init -yاین یک * ایجاد می کند
package.json** فایل با تنظیمات پیش فرض.*
مرحله 2: Electron را نصب کنید
Electron را به عنوان وابستگی توسعه نصب کنید:
bashCopy code
npm install electron --save-dev
مرحله 3: فایل های برنامه اصلی ایجاد کنید
-
** فایل نقطه ورودی اصلی را ایجاد کنید. معمولاً این فایل با نام *
main.js*:jsCopy code // main.js const { app, BrowserWindow } = require('electron'); function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false } }); win.loadFile('index.html'); } app.whenReady().then(() => { createWindow(); app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); }); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); -
** یک فایل HTML ایجاد کنید* تحت عنوان
index.html:*htmlCopy codeMy Electron App Hello, Electron! Welcome to your first Electron app.
مرحله 4: به روز رسانی package.json
در شما *package.json، یک ** اضافه کنیدstart اسکریپت برای راه اندازی برنامه Electron شما:*
jsonCopy code
{
"name": "my-electron-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^VERSION"
}
}
جایگزین کردن *^VERSION** با نسخه Electron نصب شده.*
مرحله 5: برنامه خود را اجرا کنید
برنامه خود را با استفاده از دستور زیر اجرا کنید:
bashCopy code
npm start
باید پنجره جدیدی با پیام “Hello, Electron!” باز شود. نمایش داده.
مراحل اضافی
اضافه کردن سبک ها
می توانید یک فایل CSS برای استایل دادن به محتوای HTML خود اضافه کنید. ایجاد یک فایل به نام *style.css** و آن را پیوند دهید index.html:*
htmlCopy code
cssCopy code
/* style.css */
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
افزودن قابلیت
می توانید جاوا اسکریپت را برای مدیریت تعاملات کاربر اضافه کنید. ایجاد یک فایل به نام *renderer.js** و آن را وارد کنید index.html:*
htmlCopy code
jsCopy code
// renderer.js
document.getElementById('clickMe').addEventListener('click', () => {
alert('Button clicked!');
});
نتیجه
شما اکنون یک برنامه اصلی Electron.js دارید و در حال اجرا هستید. از اینجا می‌توانید ویژگی‌های بیشتر Electron مانند ادغام با ماژول‌های بومی، اضافه کردن منوها، مدیریت عملیات فایل و موارد دیگر را کشف کنید. برای مستندات دقیق و ویژگی های پیشرفته، به مستندات رسمی Electron مراجعه کنید.
این یک معلم بزرگ است! و از آنجایی که او زمینه گفتگو را حفظ می کند، اکنون می توانیم به سادگی از او بپرسیم که چه می خواهیم و او بدون هیچ مشکلی پاسخ می دهد، به عنوان مثال:
> از چه پایگاه داده هایی می توانم استفاده کنم؟
پاسخ ChatGPT-4o:
با Electron.js، بسته به نیاز و معماری برنامه خود، می توانید از پایگاه های داده مختلفی استفاده کنید. در اینجا چند انتخاب محبوب وجود دارد:
پایگاه های داده جاسازی شده
-
** SQLite:
```js
jsCopy code
const sqlite3 = require('sqlite3').verbose();
const db = new sqlite3.Database('mydatabase.db');
db.serialize(() => {
db.run("CREATE TABLE IF NOT EXISTS user (id INT, name TEXT)");
const stmt = db.prepare("INSERT INTO user VALUES (?, ?)");
stmt.run(1, "John Doe");
stmt.finalize();
db.each("SELECT id, name FROM user", (err, row) => {
console.log(`User ID: ${row.id}, Name: ${row.name}`);
});
});
db.close();
```
… گزینه های دیگر DB
انتخاب پایگاه داده مناسب
انتخاب پایگاه داده به عوامل مختلفی مانند پیچیدگی داده های شما، نیازهای مقیاس پذیری و اینکه آیا راه حل های SQL یا NoSQL را ترجیح می دهید بستگی دارد. برای نیازهای ساده و محلی ذخیره سازی، پایگاه داده های جاسازی شده مانند SQLite یا NeDB عالی هستند. برای برنامه های بزرگتر و مقیاس پذیر، پایگاه داده های سرویس گیرنده-سرور مانند MySQL، PostgreSQL یا MongoDB ایده آل هستند. برای برنامه های کاربردی مبتنی بر ابر زمان واقعی، از Firebase Firestore یا Supabase استفاده کنید.
پاسخ ChatGPT را کمی کوتاه کردم تا این مقاله خیلی طولانی نشود، اما او پایگاه داده های مختلفی به من داد که می توانم در برنامه Eletron خود از آنها استفاده کنم و همچنین توضیحات، نام کتابخانه و حتی یک مورد استفاده ایده آل را با آن اضافه کردم. مثال مربوطه و در نهایت نتیجه گیری.
بدون شک ChatGPT و سایر ابزارهایی که از هوش مصنوعی بهره می برند، متحد بزرگی برای روزمره ما هستند و ابزاری که اگر بدانید چگونه از آن استفاده کنید، می تواند به توسعه خود تبدیل شود، همانطور که امروز گوشی های هوشمند ما هستند و پشتیبانی قابل توجهی را در ما ارائه می کنند. طوری کار کن و درس بخوان که انگار مغز دوم است.
ممنون که تا اینجا پیش رفتید، دفعه بعد می بینمت 👋.
