آموزش مسترکلاس Electron - ساخت اپلیکیشن‌های دسکتاپ با جاوااسکریپت [ویدئویی] - آخرین آپدیت

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

مقدمه Introduction

• مقدمه Introduction

• الکترون (Electron) چیست؟ What Is Electron?

• راه اندازی محیط Environment Setup

مبانی Electron Electron Basics

• مقدمه بخش Section Introduction

• راه‌اندازی پروژه Setting Up the Project

• پیاده‌سازی فرآیند اصلی (Main Process) Implementing the Main Process

• پیاده‌سازی فرآیند رندر کننده (Renderer Process) Implementing the Renderer Process

• استفاده از پروژه Quick Starter الکترون Using the Electron Quick Starter Project

• درک ساختار پروژه Electron Understanding Electron's Project Structure

• درک فایل فرآیند اصلی Understanding the Main Process File

• نوشتن اولین تغییرات کد Writing the First Code Change

• بارگذاری مجدد خودکار کدها با استفاده از nodemon Auto Reload Code Changes Using "nodemon"

• خلاصه بخش Section Summary

• تمرین ۱: ایجاد و پیکربندی یک پروژه Exercise 1: Creating and Configuring a Project

ساخت پنجره با استفاده از کلاس BrowserWindow Window Creation Using the "BrowserWindow" Class

• مقدمه بخش Section Introduction

• ویژگی‌های پایه پنجره Basic Window Properties

• تنظیم عنوان پنجره Setting the Window Title

• تمرین ۲: پیکربندی پنجره اصلی Exercise 2: Configuring the Main Window

• ساخت پنجره‌های بدون قاب (Frameless) Creating Frameless Windows

• قابلیت جابجایی (Draggable) پنجره اپلیکیشن Making the Application Window Draggable

• تمرین ۳: استفاده از پنجره بدون قاب Exercise 3: Using a Frameless Window

• ساخت پنجره‌های شفاف Creating Transparent Windows

• ساخت پنجره‌های فرزند (Child Windows) Creating Child Windows

• درک رویدادهای BrowserWindow Understanding the "BrowserWindow" Events

• کار با متدهای BrowserWindow Working with the "BrowserWindow" Methods

• تمرین ۴: نمایش یک پنجره فرزند Exercise 4: Displaying a Child Window

• موقعیت‌سنجی و تغییر اندازه پنجره Window Positioning and Resizing

• پنجره‌های مودال (Modal) Modal Windows

• خلاصه بخش Section Summary

پروژه: اپلیکیشن هشینگ (Hashing) Project: Hashing App

• مرور کلی اپلیکیشن App Overview

• ساخت رابط کاربری (UI) اپلیکیشن Creating the App UI

• استایل‌دهی به اپلیکیشن Styling the App

• پیاده‌سازی عملکردهای اپلیکیشن Implementing the App Functionality

• ساخت نهایی اپلیکیشن Building the App

مدیریت رویدادهای پنجره Handling Window Events

• مقدمه‌ای بر رویدادهای BrowserWindow Introduction to BrowserWindow Events

• رویداد ready to show the "ready-to-show" Event

• رویدادهای close و closed the "close" and "closed" Events

• رویدادهای focus و blur the "focus" and "blur" Events

• رویدادهای resize و move the "resize" and "move" Events

• رویدادهای unresponsive و responsive the "unresponsive" and "responsive" Events

چرخه حیات اپلیکیشن در Electron Application Lifecycle in Electron

• مقدمه‌ای بر چرخه حیات اپلیکیشن Electron Introduction to the Electron Application Lifecycle

• ماژول app و رویدادهای آن the "app" Module and Its Events

• مدیریت رویدادهای اپلیکیشن Handling the Application Events

• تمرین ۱۰: ساخت یک اپلیکیشن ساده ردیاب نشست (Session Tracker) Exercise 10: Creating a Simple Session Tracker App

• خلاصه بخش Section Summary

منوها در Electron Menus in Electron

• مقدمه‌ای بر سیستم منوی Electron Introduction to Electron's Menu System

• ساخت منوها با استفاده از کلاس Menu Creating Menus Using the "Menu" Class

• ساخت آیتم‌های منو با استفاده از کلاس MenuItem Creating Menu Items Using the "MenuItem" Class

• کار با متدهای استاتیک کلاس Menu Working with the "Menu" Class Static Methods

• ساخت یک منوی پایه برای اپلیکیشن Building a Basic Application Menu

• کار با متدهای نمونه (Instance Methods) کلاس Menu Working with the "Menu" Class Instance Methods

• افزودن میان‌برهای کیبورد (Accelerators) Adding Keyboard Shortcuts (Accelerators)

ماژول IPC the IPC Module

• مقدمه‌ای بر IPC Introduction to the IPC

• ارسال پیام از فرآیند اصلی با استفاده از ماژول ipcMain Sending Messages from the Main Process Using the "ipcMain" Module

• ارسال پیام از رندر کننده با استفاده از ماژول ipcRenderer Sending Messages from the Renderer Using the "ipcRenderer" Module

• پیام‌رسانی Fire and Forget با IPC Fire-and-Forget Messaging with IPC

• پیام‌رسانی درخواست/پاسخ (Request/Response) با IPC Request/Response Messaging with IPC

• ارتباط همگام IPC - روش قدیمی (توصیه نمی‌شود اما برای یادگیری مفید است) IPC Synchronous Communication – the Old Way (Not Recommended but Nice to Learn)

• درک شیء event Understanding the "event" Object

• ارتباط ناهمگام (Asynchronous) IPC IPC Asynchronous Communication

• تمرین ۵: استفاده از IPC برای ساخت پنجره‌های فرزند Exercise 5: Using IPC to Create Child Windows

پروژه: تایمر پومودورو Project: Pomodoro Timer

• مرور کلی اپلیکیشن App Overview

• ساخت رابط کاربری (UI) Creating the UI

• افزودن منو Adding the Menu

• پیاده‌سازی فرآیند اصلی Implementing the Main Process

• پیاده‌سازی فرآیند رندر کننده Implementing the Renderer Process

ماژول‌های فرآیند اصلی (Main Process) Main Process Modules

• کار با ماژول clipboard Working with the "clipboard" Module

• کار با تم‌های کرومیوم با استفاده از nativeTheme Working with Chromium Themes Using "nativeTheme"

• ارسال درخواست‌های HTTP/HTTPS با ماژول net Making HTTP/HTTPS Requests with the "net" Module

دیالوگ‌های فایل و پیام با استفاده از ماژول Dialog File and Message Dialogs Using the "Dialog" Module

• مقدمه‌ای بر ماژول Dialog Introduction to the Dialog Module

• دیالوگ باز کردن فایل (File Open) the File Open Dialog

• تمرین ۶: باز کردن یک فایل متنی Exercise 6: Opening a Text File

• دیالوگ ذخیره فایل (File Save) the File Save Dialog

• تمرین ۷: ذخیره در یک فایل متنی Exercise 7: Saving to a Text File

• دیالوگ پیام (Message Dialog) the Message Dialog

• تمرین ۸: استفاده از دیالوگ‌های پیام Exercise 8: Using Message Dialogs

پروژه: ویرایشگر کد Project: Code Editor

• مرور کلی پروژه Project Overview

• راه‌اندازی پروژه و ساخت UI Project Setup and Creating the UI

• استفاده از CodeMirror Using CodeMirror

• استایل‌دهی به اپلیکیشن Styling the App

• پیاده‌سازی فرآیند رندر کننده Renderer Process Implementation

• پیاده‌سازی فرآیند اصلی Main Process Implementation

ویژگی‌های پیشرفته Electron Advanced Electron Features

• اسکریپت Preload the Preload Script

• تمرین ۹: استفاده از preload.js و غیرفعال کردن Node Integration Exercise 9: Using "preload.js" and Disabling Node Integration

• ساخت منوهای راست‌کلیک (Context Menus) Creating Context Menus

• ماژول Shell the Shell Module

• دیباگ کردن اپلیکیشن‌های Electron Debugging Electron Applications

• [تمرین] بهبود اپلیکیشن ویرایشگر کد [Practice] Improving the Code Editor App

• استفاده از System Tray (نوار ابزار سیستم) Using the System Tray

• ضبط صفحه با ماژول desktopCapturer Capturing Screens with the "desktopCapturer" Module

• ثبت میان‌برهای کیبورد سراسری (Global Shortcuts) Registering Global Keyboard Shortcuts

• نمایش اطلاعات با استفاده از ماژول screen Display Information Using the "screen" Module

تعامل با صفحات وب رندر شده با استفاده از WebContents Interacting with Rendered Web Pages Using the WebContents

• مقدمه‌ای بر کلاس WebContents در Electron Introduction to the "WebContents" Class in Electron

• کنترل ناوبری (Navigation Control) Navigation Control

• اجرای برنامه‌نویسی شده جاوااسکریپت در رندر کننده Executing JavaScript in Renderer Programmatically

• ارسال پیام از فرآیند اصلی به رندر کننده با استفاده از WebContents Sending Messages from the Main Process to the Renderer Using WebContents

پروژه: ضبط صفحه نمایش Project: Screen Capturer

• مرور کلی اپلیکیشن App Overview

• ساخت رابط کاربری (UI) اپلیکیشن Creating the App UI

• پیاده‌سازی منطق اپلیکیشن Implementing the App Logic

• ساخت System Tray Creating the System Tray

بسته‌بندی و انتشار اپلیکیشن‌های Electron Packaging and Releasing Electron Applications

• بسته‌بندی اپلیکیشن‌های Electron با Electron Builder Packaging Electron Apps Using Electron Builder

• پیکربندی آیکون اپلیکیشن Configuring the App Icon

• امضای کد (Code Signing) Signing the Code

• پیکربندی هدف‌های بیلد برای ویندوز/مک/لینوکس Configuring Build Targets for Win/macOS/Linux

• آماده‌سازی اپلیکیشن برای انتشار در گیت‌هاب Preparing the App for Releasing on GitHub

• ایجاد اولین نسخه انتشار (Release) Creating Our First Release

• خودکارسازی انتشار اپلیکیشن با GitHub و Electron Builder Automating App Releasing Using GitHub and Electron Builder

• به‌روزرسانی خودکار با Electron Updater Auto Updates Using Electron Updater

ذخیره‌سازی داده‌ها در Electron Data Storage in Electron

• مرور کلی گزینه‌های ذخیره‌سازی در Electron Overview of Storage Options in Electron

• ذخیره داده‌ها با استفاده از localStorage در Electron Storing Data Using "localStorage" in Electron

• ذخیره داده‌های نشست با استفاده از session در Electron Storing Session Data Using "session" in Electron

• نحوه ذخیره اشیاء از طریق localStorage و session How to Store Objects via "localStorage" and "session"

• کار با کوکی‌ها با استفاده از ماژول session Working with Cookies Using the "session" Module

• استفاده از IndexedDB به عنوان دیتابیس برای اپلیکیشن‌های Electron Using IndexedDB as a Database for Electron Applications

• ادغام با SQLite SQLite Integration

تست خودکار با Playwright Automated Testing with Playwright

• مقدمه‌ای بر تست‌های End to End (E2E) با استفاده از Playwright Introduction to End-to-End (E2E) Testing Using Playwright

• نصب Playwright و ایجاد فایل تست Installing Playwright and Creating a Test File

• نوشتن و اجرای یک تست Writing and Executing a Test

ادغام React با Electron با استفاده از Vite Integrating React with Electron Using Vite

• الکترون، React و Vite Electron, React, and Vite

• مرور کلی پروژه Project Overview

• راه‌اندازی پروژه Setting Up the Project

• پیاده‌سازی کامپوننت App Implementing App Component

• ساخت کامپوننت Card Creating the Card Component

• استایل‌دهی به کامپوننت Card Styling the Card Component

• حذف منوی پیش‌فرض و تنظیم عنوان Removing the Default Menu and Setting the Title

• افزودن تست‌های E2E Adding E2E Tests

• بیلد کردن پروژه Building the Project

ادغام Electron با Angular Integrating Electron with Angular

• مقدمه بخش Introduction to the Section

• ساخت اسکلت پروژه با Angular و Electron Scaffolding a Project Using Angular and Electron

• استفاده از Hot Reloading در انگولار Using Angular Hot Reloading

• استفاده از کامپوننت‌های Angular Material Using Angular Material Components

• کار با روتینگ (Routing) انگولار Working with Angular Routing

• بیلد کردن اپلیکیشن Building the Application

پخش موسیقی در Electron: ادغام با Amplitude Playing Music in Electron: Integrating with Amplitude

• مقدمه‌ای بر Amplitude Introduction to Amplitude

• پخش فایل‌های موسیقی Playing Music Files

• استفاده از دکمه‌های کنترل بیشتر Using More Control Buttons

• نوار پیشرفت موسیقی و نمایش متاداده‌ها Music Progress Bar and Displaying Metadata

اتصال به دیتابیس: ادغام با Firebase Connecting to a Database: Integrating with Firebase

• مقدمه و مرور کلی Introduction and Overview

• راه‌اندازی Firebase Set Up Firebase

• راه‌اندازی Angular و Electron Set Up Angular and Electron

• افزودن کامپوننت‌های Angular Material Adding Angular Material Components

• پیاده‌سازی رابط کاربری کامپوننت ورود (Login) Implementing the Login Component UI

• پیاده‌سازی ورود کاربر با استفاده از Firebase Authentication Implementing User Login Using Firebase Authentication

• پیکربندی Realtime Database و افزودن گروه‌های چت Configuring the Realtime Database and Adding Chat Groups

• نمایش پیام‌های گروهی Displaying Group Messages

• ارسال پیام‌های گروهی Sending Group Messages

توسعه بازی با Electron: ادغام با Phaser.js Game Development with Electron: Integrating with Phaser.js

• مقدمه و مرور کلی پروژه Introduction and Project Overview

• ساخت اسکلت پروژه Scaffolding the Project

• پیکربندی Electron Configuring Electron

• پیکربندی بازی Configuring the Game

• بارگذاری دارایی‌ها (Assets) Loading the Assets

• کنترل سفینه فضایی Controlling the Spaceship

• افزودن شلیک گلوله Adding Bullet Shooting

• دشمنان و برخوردها (Collisions) Enemies and Collisions

• ساخت نهایی بازی Building the Game