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

Electron From Scratch: Build Desktop Apps With JavaScript

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: ایجاد 3 برنامه کاربردی دسکتاپ مفید با فناوری های وب با استفاده از Electron آموزش ساخت برنامه های دسکتاپ با Electron ایجاد و بسته بندی 3 برنامه کامل چند پلتفرمی استفاده از IPC برای برقراری ارتباط بین فرآیندهای اصلی و رندر استفاده از Vanilla JS و React with Electron ایجاد آیتم های منوی سفارشی، سینی سیستم برنامه ها و موارد دیگر کار با داده های محلی و همچنین پایگاه داده MongoDB Atlas پیش نیازها: JavaScript Fundamentals

این یک دوره آموزشی مبتنی بر پروژه در مورد یادگیری نحوه ساخت و بسته بندی برنامه های دسکتاپ چند پلتفرمی با استفاده از Electron است. بسیاری از برنامه های محبوب از جمله VSCode، Slack و Skype بر روی Electron ساخته شده اند.

ما 3 برنامه خواهیم ساخت

ImageShrink - برنامه ای برای بهینه سازی تصاویر برای وب سایت ها

SystTop - مانیتور CPU RealTime با اعلان ها و سینی سیستم

BugLogger - برنامه CRUD برای ردیابی گزارش‌هایی که از React و پایگاه داده ابری MongoDB Atlas استفاده می‌کند


مواردی که یاد خواهید گرفت:

  • پنجره برنامه را با BrowserWindow ایجاد کنید

  • منوها را با موارد سفارشی ایجاد کنید

  • نقش های منو

  • ماژول پوسته برای باز کردن فایل‌ها و پوشه‌ها

  • نمادهای سینی سیستم را با منوهای زمینه ایجاد کنید

  • رویدادهای برنامه

  • فرآیند رندر فرآیند اصلی

  • ارتباط بین فرآیندها با IPCMain IPCRenderer

  • برنامه‌های بسته‌بندی Electron

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

  • تعامل با سخت افزار سیستم

  • یک فایل ذخیره داده با داده های تنظیمات ایجاد کنید

  • React را با الکترون ادغام کنید

  • یک پایگاه داده MongoDB را با Mongoose ادغام کنید

  • برخی موارد جاوا اسکریپت که ممکن است نمی دانستید


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

معرفی Introduction

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

معرفی 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

پروژه 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

پروژه 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

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

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

کار با منو 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

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

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

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

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

رابط، 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

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

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

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

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

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

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

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

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

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

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

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

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

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

آمار سیستم و فرآیند رندر 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

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

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

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

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

ذخیره سازی داده های محلی 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

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

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

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

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

نماد سینی و بسته بندی 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

پروژه 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)

پروژه 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)

فرآیند اصلی، 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

فرآیند اصلی، 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

نمایش نظرات

آموزش الکترون از ابتدا: ساخت برنامه های دسکتاپ با جاوا اسکریپت
جزییات دوره
6 hours
59
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
7,022
4.3 از 5
دارد
دارد
دارد
Brad Traversy
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Brad Traversy Brad Traversy

توسعه دهنده وب Full Stack و مدرس در Traversy Media