آموزش الکترون از ابتدا: ساخت برنامه های دسکتاپ با جاوا اسکریپت

سرفصل ها و درس ها

معرفی Introduction

• به دوره خوش آمدید Welcome To The Course

• الکترون: چی و چرا؟ Electron: What & Why?

• الکترون: چی و چرا؟ Electron: What & Why?

• الکترون چگونه کار می کند How Electron Works

• الکترون چگونه کار می کند How Electron Works

• محیط زیست و مخزن کد Environment & Code Repo

• محیط زیست و مخزن کد Environment & Code Repo

• پیوندها Links

• پیوندها Links

معرفی Introduction

• به دوره خوش آمدید Welcome To The Course

پروژه 1 - برنامه کوچک کردن تصویر و شروع به کار با الکترون Project 1 - Image Shrink App & Getting Started With Electron

• معرفی پروژه Project Intro

• راه اندازی و پنجره مرورگر Setup & BrowserWindow

• راه اندازی و پنجره مرورگر Setup & BrowserWindow

• بارگیری یک فایل پنجره و افزودن یک نماد Loading a Window File & Adding an Icon

• مهم! مسیرهای نماد مطلق Important! Absolute Icon Paths

• بررسی محیط و پلت فرم Environment & Platform Check

• استفاده از Nodemon با الکترون Using Nodemon With Electron

پروژه 1 - برنامه کوچک کردن تصویر و شروع به کار با الکترون Project 1 - Image Shrink App & Getting Started With Electron

• معرفی پروژه Project Intro

• بارگیری یک فایل پنجره و افزودن یک نماد Loading a Window File & Adding an Icon

• مهم! مسیرهای نماد مطلق Important! Absolute Icon Paths

• بررسی محیط و پلت فرم Environment & Platform Check

• استفاده از Nodemon با الکترون Using Nodemon With Electron

کار با منو Working With The Menu

• ایجاد یک قالب منو Creating a Menu Template

• منو و میانبرهای جهانی Menu & Global Shortcuts

• منو و میانبرهای جهانی Menu & Global Shortcuts

• نقش های منو Menu Roles

• نقش های منو Menu Roles

• پنجره را از منو باز کنید Open Window From Menu

• پنجره را از منو باز کنید Open Window From Menu

کار با منو Working With The Menu

• ایجاد یک قالب منو Creating a Menu Template

رابط، IPC، ImageMin و بسته بندی Interface, IPC, ImageMin & Packaging

• ایجاد رابط Creating The Interface

• یکپارچه سازی گره رندر Renderer Node Integration

• ارتباطات IPC IPC Communication

• ایجاد رابط Creating The Interface

• پیاده سازی Imagemin & Plugins Implementing Imagemin & Plugins

• پیاده سازی Imagemin & Plugins Implementing Imagemin & Plugins

• ارسال رویدادها به رندر Send Events To Renderer

• ارسال رویدادها به رندر Send Events To Renderer

• ایجاد فایل های گزارش Creating Log Files

• ایجاد فایل های گزارش Creating Log Files

• بسته بندی و تست برنامه ما Package & Test Our App

رابط، IPC، ImageMin و بسته بندی Interface, IPC, ImageMin & Packaging

• یکپارچه سازی گره رندر Renderer Node Integration

• ارتباطات IPC IPC Communication

• بسته بندی و تست برنامه ما Package & Test Our App

پروژه 2 - برنامه SysTop Project 2 - SysTop App

• معرفی پروژه Project Intro

• راه اندازی دیگ بخار Boilerplate Setup

• راه اندازی دیگ بخار Boilerplate Setup

• راه اندازی دارایی های الگو Template Assets Setup

• ایجاد رابط Creating The Interface

پروژه 2 - برنامه SysTop Project 2 - SysTop App

• معرفی پروژه Project Intro

• راه اندازی دارایی های الگو Template Assets Setup

• ایجاد رابط Creating The Interface

آمار سیستم و فرآیند رندر System Stats & Renderer Process

• آمار سیستم استاتیک Static System Stats

• آمار سیستم بازه‌ای/دینامیک Interval/Dynamic System Stats

• آمار سیستم بازه‌ای/دینامیک Interval/Dynamic System Stats

• نوار پیشرفت و اضافه بار CPU Progress Bar & CPU Overload

• Notifications API Notifications API

• Notifications API Notifications API

• زمان بندی اطلاع رسانی Notification Timing

• زمان بندی اطلاع رسانی Notification Timing

آمار سیستم و فرآیند رندر System Stats & Renderer Process

• آمار سیستم استاتیک Static System Stats

• نوار پیشرفت و اضافه بار CPU Progress Bar & CPU Overload

ذخیره سازی داده های محلی Storing Local Data

• ایجاد فروشگاه Creating a Store

• تنظیمات پیش فرض را روی Renderer تنظیم کنید Set Default Settings To Renderer

• تنظیمات پیش فرض را روی Renderer تنظیم کنید Set Default Settings To Renderer

• ذخیره داده ها در فروشگاه/فایل ما Saving Data To Our Store/File

• از داده های تنظیمات در مانیتور استفاده کنید Use Settings Data In Monitor

ذخیره سازی داده های محلی Storing Local Data

• ایجاد فروشگاه Creating a Store

• ذخیره داده ها در فروشگاه/فایل ما Saving Data To Our Store/File

• از داده های تنظیمات در مانیتور استفاده کنید Use Settings Data In Monitor

نماد سینی و بسته بندی Tray Icon & Wrap Up

• ایجاد نماد سینی Creating a Tray Icon

• ایجاد نماد سینی Creating a Tray Icon

• منوی زمینه سینی Tray Context Menu

• گزینه منوی تغییر مسیر Nav Toggle Menu Item

• گزینه منوی تغییر مسیر Nav Toggle Menu Item

• کلاس پنجره اصلی MainWindow Class

• کلاس AppTray AppTray Class

• کلاس AppTray AppTray Class

• بسته بندی و تست برنامه ما Package & Test Our App

• بسته بندی و تست برنامه ما Package & Test Our App

نماد سینی و بسته بندی Tray Icon & Wrap Up

• منوی زمینه سینی Tray Context Menu

• کلاس پنجره اصلی MainWindow Class

• بسته بندی و تست برنامه ما Package & Test Our App

پروژه 3 - برنامه BugLogger و ایجاد رابط کاربری React Project 3 - BugLogger App & Creating The React UI

• معرفی پروژه Project Intro

• راه اندازی صفحه دیگ React-Electron React-Electron Boilerplate Setup

• وضعیت گزارش و جدول Log State & Table

• وضعیت گزارش و جدول Log State & Table

• کامپوننت LogItem LogItem Component

• قالب بندی تاریخ ها با لحظه Formatting Dates With Moment

• قالب بندی تاریخ ها با لحظه Formatting Dates With Moment

• کامپوننت AddLogItem AddLogItem Component

• کامپوننت AddLogItem AddLogItem Component

• افزودن گزارش (فقط UI) Adding a Log (UI Only)

• افزودن گزارش (فقط UI) Adding a Log (UI Only)

• نمایش هشدارها Displaying Alerts

• حذف یک گزارش (فقط UI) Deleting a Log (UI Only)

پروژه 3 - برنامه BugLogger و ایجاد رابط کاربری React Project 3 - BugLogger App & Creating The React UI

• معرفی پروژه Project Intro

• راه اندازی صفحه دیگ React-Electron React-Electron Boilerplate Setup

• کامپوننت LogItem LogItem Component

• نمایش هشدارها Displaying Alerts

• حذف یک گزارش (فقط UI) Deleting a Log (UI Only)

فرآیند اصلی، IPC و MongoDB Main Process, IPC & MongoDB

• راه اندازی MongoDB Atlas Setup MongoDB Atlas

• با Mongoose به پایگاه داده متصل شوید Connect To Database With Mongoose

• با Mongoose به پایگاه داده متصل شوید Connect To Database With Mongoose

• ایجاد مدل لاگ Create Log Model

• دریافت گزارش از پایگاه داده Get Logs From Database

• دریافت گزارش از پایگاه داده Get Logs From Database

• افزودن ورود به پایگاه داده Add Log To Database

• افزودن ورود به پایگاه داده Add Log To Database

• حذف گزارش ها از پایگاه داده Delete Logs From Database

• پاک کردن آیتم فهرست گزارش‌ها Clear Logs Menu Item

• بسته بندی و تست برنامه ما Package & Test Our App

• بسته بندی و تست برنامه ما Package & Test Our App

• نماد سفارشی Custom Icon

• نماد سفارشی Custom Icon

فرآیند اصلی، IPC و MongoDB Main Process, IPC & MongoDB

• راه اندازی MongoDB Atlas Setup MongoDB Atlas

• ایجاد مدل لاگ Create Log Model

• حذف گزارش ها از پایگاه داده Delete Logs From Database

• پاک کردن آیتم فهرست گزارش‌ها Clear Logs Menu Item

• بسته بندی و تست برنامه ما Package & Test Our App