آموزش کامپوننت وب Salesforce Lightning با پروژه زنده

Salesforce Lightning web component with live project

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
توضیحات دوره: راهنمای یادگیری نیروی فروش کامپوننت وب لایتنینگ توسعه با سری کدها و پروژه بلادرنگ چارچوب لایتنینگ وب کامپوننت چیست؟ توسعه کامپوننت وب لایتنینگ قابلیت همکاری LWC و Aura مرورگرها، ابزارها و تجربه پشتیبانی شده برای اجزای وب لایتنینگ تنظیم محیط توسعه و دستور CLI برای کار با LWC Setup Devhub و scratch org و اهمیت آن پوشه و ساختار فایل LWC ویژگی های مفید جاوا اسکریپت در مؤلفه رعد و برق تو در تو/ترکیب مؤلفه نحوه برقراری ارتباط بین مؤلفه ها با استفاده از مکانیسم Events PubSub برای برقراری ارتباط رویدادها راه های دسترسی به منابع نیروی فروش در خدمات داده لایتنینگ LWC و مؤلفه های پایه برای دریافت داده های نیروی فروش در مؤلفه های وب لایتنینگ از خدمات Wire برای دسترسی به داده ها در LWC مختلف برای فراخوانی APex از Lightning استفاده کنید. کامپوننت وب تماس مداوم و تماس API از مؤلفه وب لایتنینگ استفاده از خدمات ناوبری در مؤلفه وب لایتنینگ مقدمه SLDS و منابع مختلف چرخه حیات مؤلفه و بهترین شیوه های رویداد مکانیسم اشکال زدایی مؤلفه وب لایتنینگ خود از Jtest برای آزمایش مؤلفه های وب لایتنینگ خود استفاده کنید بهترین روش ها برای مهاجرت کامپوننت هاله به LWC سناریوهای بسیار بیشتر زنده و گام به گام کدنویسی LWC دسترسی کامل به کد منبع برای تمرین پروژه زنده با سورس کد کامل ساخته شده بر روی LWC پیش نیازها: دانش اولیه نیروی فروش، جاوا اسکریپت درک اولیه Salesforce Apex و SOQL است. ترجیح داده مهمتر علاقه به یادگیری کامپوننت وب لایتنینگ نیروی فروش

کامپوننت وب لایتنینگ (LWC) یک مدل برنامه نویسی جدید با پیروی از استانداردهای وب برای توسعه اجزای لایتنینگ نیروی فروش است و این تنها آموزش با حداکثر ساعت فیلمبرداری با پروژه زمان واقعی است. هر جلسه با بسیاری از برنامه‌نویسی‌های زنده توضیح داده می‌شود تا مفاهیم LWC شما کاملاً واضح باشد تا بتوانید سفر خود را به عنوان متخصص در LWC انجام دهید.

همه کدها نیز برای مرجع شما در آموزش اضافه شده اند و ما در حال به روز رسانی آن با هر ویژگی جدید به صورت ماهانه هستیم.

LWC هنوز در بازار جدید است و یادگیری LWC می تواند شما را به یک جواهر Salesforce تبدیل کند و می تواند به رزومه شما ابعاد دیگری بدهد.


این دوره از سطح پایه تا تخصص طراحی شده است. اگر مبتدی هستید، جای نگرانی نیست، دوره بسیار آسان و به خوبی سازماندهی شده است تا یادگیری شما را ساده و روان کند. همچنین برای افراد متخصص، می‌توانید دانش عمیق LWC را بیاموزید و مهارت‌های بیشتری را در حرفه حرفه‌ای خود با مثال‌ها و سناریوهای زنده با مجموعه‌ای از کدها اضافه کنید.

یک پروژه بلادرنگ کامل در پایان جلسه اضافه شده است که تمام مفاهیم lwc و نحوه اجرای آن را پوشش می دهد. هر جلسه با مثال‌ها و کدهایی ارائه می‌شود که قبلاً در جلسه به اشتراک گذاشته شده است.



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

مقدمه ای بر کامپوننت وب لایتنینگ Introduction to Lightning web component

  • لایتنینگ وب کامپوننت چیست؟ What is Lightning Web Component?

  • تفاوت بین Visualforce، جزء Aura و LWC Difference Between Visualforce , Aura component and LWC

  • مؤلفه وب و تکامل Webstack Web Component and evolution of Webstack

  • چرا به جای اجزای Aura موجود به LWC می روید؟ Why do you go for LWC instead of existing Aura Components

  • همزیستی و قابلیت همکاری AURA و LWC Coexistence and interoperability of AURA and LWC

مرورگرهای پشتیبانی شده، جاوا اسکریپت، تجربه و ابزارهای LWC salesforce Supported browsers , javascript, experience and tools for salesforce LWC

  • مرورگرهای پشتیبانی شده برای LWC Supported Browsers for LWC

  • جاوا اسکریپت برای LWC پشتیبانی می شود Supported Javascript for LWC

  • تجربه و ابزار پشتیبانی شده برای LWC Supported Experience and tools for LWC

محیط توسعه را برای مؤلفه وب لایتنینگ تنظیم کنید Set up development environment for lightning web component

  • برای LWC چه چیزهایی باید راه اندازی شود؟ What are the things need to setup for LWC?

  • اجازه دهید برای حساب salesforce ثبت نام کنید (اگر ندارد) Lets Sign up for salesforce Account (if does not have)

  • دامنه من را در سازمان توسعه شما فعال کنید Enable My Domain in Your Development Org

  • حالت Debug را در سازمان توسعه خود فعال کنید Enable Debug Mode in Your Development Org

  • کد ویژوال استودیو را نصب کنید Install Visual studio code

  • بسته برنامه افزودنی Salesforce را نصب کنید Install Salesforce Extension pack

  • Salesforce CLI را نصب کنید Install Salesforce CLI

DEVHub و Scratch Org را در نیروی فروش راه اندازی کنید Set up DEVHub and Scratch Org in salesforce

  • سازمان اصلی را به عنوان Devhub راه اندازی کنید Setup main org as Devhub

  • پروژه و Scratch org را در کد ویژوال استودیو ایجاد کنید Create Project and Scratch org in Visual Studio code

نحوه ایجاد یک کامپوننت وب لایتنینگ جدید و ساختار پوشه آن How to create a new Lightning web component and its folder structure

  • اولین کامپوننت وب لایتنینگ و ساختار پوشه آن را ایجاد کنید Create First Lightning web component and its folder structure

  • کد نمونه اولین جزء LWC Sample code First LWC component

اصول اولیه قالب HTML، جاوا اسکریپت و فایل پیکربندی LWC را درک کنید Understand basic of HTML template , Javascript and LWC configuration file

  • اصول اولیه قالب HTML، جاوا اسکریپت و فایل پیکربندی LWC را درک کنید Understand basic of HTML template , Javascript and LWC configuration file

  • اولین LWC ما را در صفحه ضبط صاعقه معرفی کنید Expose our first LWC in Lightning Record Page

  • کد برای فایل متا برای افشای مؤلفه در یک صفحه رکورد Code for Meta file to expose component in a record page

یک ظاهر طراحی را به جزء وب لایتنینگ تعریف کنید Define styling to lightning web component

  • مکانیزم متفاوت برای استایل دادن به مؤلفه وب لایتنینگ شما Different mechanism to style your lightning web component

  • به کامپوننت وب لایتنینگ خود با استفاده از CSS سفارشی (فایل سبک) استایل دهید Style your Lightning Web Component using Custom CSS (style file)

  • فایل CSS و کد سبک را در کامپوننت خود اضافه کنید Add CSS File and style code in our component

  • کد نمونه برای استایل شیت سفارشی برای مؤلفه وب لایتنینگ شما Sample Code for Custom style sheet for your Lightning web component

  • با استفاده از استایل SLDS به کامپوننت وب لایتنینگ خود استایل بدهید Style your Lightning Web Component using SLDS styling

  • کد نمونه - کامپوننت وب لایتنینگ خود را با استفاده از استایل SLDS سبک کنید Sample Code -Style your Lightning Web Component using SLDS styling

  • سبک های CSS را در بین LWC به اشتراک بگذارید Share CSS Styles Among LWC

  • کد نمونه - سبک های CSS را در میان LWC به اشتراک بگذارید Sample Code - Share CSS Styles Among LWC

سخنرانی پاداش Bonus Lecture

  • دوره های دیگر که ممکن است دوست داشته باشید Other Courses You might like

ویژگی های جاوا اسکریپت در مؤلفه وب لایتنینگ Javascript properties in Lightning web component

  • فیلدها، ویژگی ها و ویژگی های جاوا اسکریپت Javascript Fields, Properties and Attributes

  • از Private Properties در مؤلفه خود برای اتصال داده های پویا استفاده کنید Use Private Properties in your component to bind dynamic data

  • کد نمونه برای املاک خصوصی در LWC Sample code for Private properties in LWC

استفاده از رندر شرطی با استفاده از الگو در غیر این صورت Use of conditional rendering using template if else

  • استفاده از رندر شرطی با استفاده از الگو در غیر این صورت Use of conditional rendering using template if else

  • کد نمونه برای استفاده از رندر شرطی با استفاده از template if other Sample code for Use of conditional rendering using template if else

چگونه چندین آیتم/مجموعه را در مؤلفه وب لایتنینگ تکرار کنیم How to Iterate multiple Items/collection in Lightning web component

  • استفاده از for:each و for:item برای تکرار مجموعه در کامپوننت وب لایتنینگ Use of for:each and for:item to iterate collection in lightning web component

  • کد منبع برای استفاده از برای: هر و برای: آیتم برای تکرار مجموعه Source code to Use of for:each and for:item to iterate collection

  • استفاده از Iterator برای حلقه زدن مجموعه آیتم در کامپوننت وب لایتنینگ Use of Iterator to loop on collection of item in lightning web component

  • کد منبع برای استفاده از Iterator برای حلقه زدن در مجموعه آیتم Source code for Using Iterator to loop on collection of item

مروری بر اموال عمومی، خصوصی، اموال واکنشی و غیر واکنشی Overview of Public, private property, reactive and non reactive property

  • مروری بر اموال عمومی، خصوصی، اموال واکنشی و غیر واکنشی Overview of Public, private property, reactive and non reactive property

(جلسه قدیمی) Javascript Private و @track مثال (Old session) Javascript Private and @track example

  • یادداشت مهم Important Note

  • مثال Javascript Private و @track Javascript Private and @track example

  • کد نمونه برای اموال مسیر خصوصی sample code for private track property

نحوه استفاده از اموال عمومی در کامپوننت وب لایتنینگ How to use public property in lightning web component

  • یک جزء CourseEnroll برای استفاده از اموال عمومی ایجاد کنید Create a CourseEnroll component to use public property

  • به ویژگی عمومی CourseEnroll در جزء اصلی AllCourseEnroll دسترسی پیدا کنید Access public property of CourseEnroll in parent AllCourseEnroll component

  • کد نمونه برای استفاده از اموال عمومی در کامپوننت وب لایتنینگ Sample code for Public property use in lightning web component

قلاب چرخه حیات LWC LWC Lifecycle hooks

  • قلاب چرخه حیات LWC LWC Lifecycle hooks

  • کد نمونه برای قلاب چرخه حیات Sample code for Lifecycle hooks

  • دانش خود را آزمایش کنید - قلاب LWC Life Cycle Test Your knowledge - LWC LifeCycle hooks

دسترسی به برچسب سفارشی در مؤلفه وب لایتنینگ Access custom label in lightning web component

  • دسترسی به برچسب سفارشی در مؤلفه وب لایتنینگ Access custom label in lightning web component

  • کد نمونه برای استفاده از برچسب سفارشی در کامپوننت وب لایتنینگ Sample code for using custom label in lightning web component

دسترسی به منابع استاتیک در کامپوننت وب لایتنینگ Access Static Resource in lightning web component

  • دسترسی به منابع استاتیک در کامپوننت وب لایتنینگ Access Static Resource in lightning web component

  • کد نمونه برای استفاده از منبع استاتیک در کامپوننت وب لایتنینگ Sample code for using static resource in lightning web component

دسترسی به اطلاعات کاربر فعلی در مؤلفه وب لایتنینگ Access current User Information in lightning web component

  • دسترسی به اطلاعات کاربر فعلی در مؤلفه وب لایتنینگ Access current User Information in lightning web component

  • نمونه کد برای دسترسی به شناسه کاربر فعلی در مؤلفه وب لایتنینگ Sample code to Access current User Id in lightning web component

سرویس ناوبری در مؤلفه وب Salesforce Lightning Navigation Service in Salesforce Lightning Web component

  • نحوه پیمایش از یک صفحه به صفحه دیگر با استفاده از خدمات ناوبری در LWC How to navigate from one page to another page using Navigation services in LWC

  • مراحل استفاده از سرویس ناوبری در LWC Steps to follow to use Navigation service in LWC

از سرویس ناوبری برای پیمایش صفحه اصلی Object از Lightning Web Component استفاده کنید Use Navigation Service to Navigate Object Home page from Lightning Web Component

  • از سرویس ناوبری برای پیمایش صفحه اصلی Object از Lightning Web Component استفاده کنید Use Navigation Service to Navigate Object Home page from Lightning Web Component

  • کد نمونه برای پیمایش به صفحه اصلی شی Sample code for Navigating to object home page

از سرویس ناوبری برای پیمایش به نمای فهرست شی استفاده کنید Use Navigation service to Navigate to object list view

  • از سرویس ناوبری برای پیمایش به نمای فهرست شی استفاده کنید Use Navigation service to Navigate to object list view

  • کد نمونه از سرویس Navigation برای پیمایش به نمای فهرست شی استفاده کنید Sample code Use Navigation service to Navigate to object list view

از سرویس ناوبری برای پیمایش صفحه ضبط جدید از مؤلفه وب لایتنینگ استفاده کنید Use Navigation service to navigate record new page from Lightning web component

  • از سرویس ناوبری برای پیمایش صفحه ضبط جدید از مؤلفه وب لایتنینگ استفاده کنید Use Navigation service to navigate record new page from Lightning web component

  • کد نمونه از سرویس ناوبری برای پیمایش صفحه ثبت جدید استفاده کنید sample code Use Navigation service to navigate record new page

از سرویس ناوبری برای پیمایش صفحه ویرایش رکورد و جزئیات از LWC استفاده کنید Use navigation service to navigate record edit and details page from LWC

  • از سرویس ناوبری برای پیمایش صفحه ویرایش رکورد و جزئیات از LWC استفاده کنید Use navigation service to navigate record edit and details page from LWC

  • کد نمونه از سرویس پیمایش برای پیمایش در صفحه ویرایش رکورد و جزئیات استفاده کنید Sample code Use navigation service to navigate record edit and details page

از سرویس ناوبری برای پیمایش به صفحه وب از مؤلفه وب لایتنینگ استفاده کنید Use Navigation service to Navigate to Web page from Lightning web component

  • از سرویس ناوبری برای پیمایش به صفحه وب از مؤلفه وب لایتنینگ استفاده کنید Use Navigation service to Navigate to Web page from Lightning web component

  • کد نمونه از سرویس ناوبری برای پیمایش به صفحه وب استفاده کنید Sample code Use Navigation service to Navigate to Web page

ترکیب کامپوننت Component Composition

  • Component Composition چیست و کاربرد آن What is Component Composition and its usage

  • Component Composition - فراخوانی روش عمومی فرزند از مولفه والد Component Composition - call child public method from parent component

  • کد نمونه برای ترکیب کامپوننت sample code for component composition

Slot در کامپوننت وب لایتنینگ چیست و چگونه می توانیم Markup را به اسلات منتقل کنیم What is Slot in lightning web component and how can we pass Markup to slot

  • Slot در کامپوننت وب لایتنینگ چیست و چگونه می توانیم Markup را به اسلات منتقل کنیم What is Slot in lightning web component and how can we pass Markup to slot

  • کد نمونه برای اسلات sample code for slot

نحوه دسترسی به داده های Salesfoce در لایتنینگ وب کامپوننت How to access Salesfoce data in Lightning Web Component

  • نحوه دسترسی به داده های Salesfoce در لایتنینگ وب کامپوننت How to access Salesfoce data in Lightning Web Component

نحوه استفاده از کلاس و متدهای Apex در کامپوننت وب لایتنینگ How to use Apex class and methods in Lightning web component

  • نحوه استفاده از کلاس و متدهای Apex در کامپوننت وب لایتنینگ How to use Apex class and methods in Lightning web component

از ویژگی Wire برای فراخوانی متد apex در کامپوننت وب لایتنینگ استفاده کنید Use Wire a property to call apex method in lightning web component

  • از ویژگی Wire برای فراخوانی متد apex در کامپوننت وب لایتنینگ استفاده کنید Use Wire a property to call apex method in lightning web component

  • برای فراخوانی Apex با Wire a Property، کامپوننت وب لایتنینگ ایجاد کنید Create Lightning Web Component to Invoke Apex with Wire a Property

  • استفاده از @AuraEnabled(Cacheable=true) در کامپوننت و نمایش داده ها use of @AuraEnabled(Cacheable=true) in the component and display the data

  • کد نمونه برای استفاده از سیم به ویژگی برای فراخوانی apex Sample code to use wire to property to invoke apex

  • از Navigation برای پیمایش برای ضبط صفحه جزئیات استفاده کنید Use Navigation to Navigate to record details page

  • کد نمونه برای استفاده از ناوبری در مؤلفه ما Sample Code for Use Navigation in our component

از Wire a Function برای فراخوانی متد apex در کامپوننت وب لایتنینگ استفاده کنید Use Wire a Function to call apex method in lightning web component

  • روش Wire Apex با عملکرد برای فراخوانی از کامپوننت وب لایتنینگ Wire Apex Method with Function to invoke from Lightning web component

  • ایجاد متد Apex برای سیم کشی با تابع برای استفاده در LWC Create Apex method to wire with function to use in LWC

  • نمایش داده ها در LWC با سیم Apex to Function Display data in LWC with Apex wire to Function

  • کد نمونه - از Wire to Function برای فراخوانی Apex در LWC استفاده کنید Sample code - use Wire to Function to invoke Apex in LWC

با سرویس‌های Wire پارامتر را به متدهای apex منتقل کنید و جعبه ترکیبی پویا بسازید Pass Parameter to apex methods with Wire services and build dynamic combo box

  • مروری بر پارامترهای عبور به روش‌های apex با سرویس‌های Wire Overview of Pass Parameter to apex methods with Wire services

  • داده های پویا را در جعبه ترکیبی لایتنینگ پیوند دهید Bind Dynamic data in Lightning Combo box

  • انتقال پارامتر Dynamic به سرویس سیم متد apex pass Dynamic parameter to apex method wire service

  • کد نمونه پاس پارامتر Dynamic به سرویس سیم متد apex Sample code pass Dynamic parameter to apex method wire service

فراخوانی روش apex به طور ضروری از لایتنینگ وب کامپوننت Invoke apex method imperatively from Lightning Web Component

  • بررسی اجمالی فراخوانی روش Apex به صورت ضروری Overview of invoking Apex method imperatively

  • دستور دستوری برای فراخوانی روش apex به صورت ضروری Syntax to call apex method imperatively

  • برای فراخوانی اجباری متد apex، Component ایجاد کنید Create Component to invoke apex method imperatively

  • متد apex دیگری را از کامپوننت با پارامتر عبور فراخوانی کنید invoke another apex method from the component with passing parameter

  • کد نمونه - Apex را به صورت ضروری فراخوانی کنید Sample Code - Invoke Apex Imperatively

خدمات لایتنینگ دیتا برای دسترسی به داده های نیروی فروش Lightning Data services to access salesforce Data

  • مروری بر خدمات داده لایتنینگ و استفاده از آن Overview of Lightning Data Services and its Usage

  • برای دسترسی به داده‌های نیروی فروش از سرویس‌های داده لایتنینگ استفاده نکنید DO NOT USE -Lightning Data services to access salesforce Data

مروری بر اجزای پایه ساخته شده در بالای LDS Overview of Base components built on top of LDS

  • مروری بر اجزای پایه ساخته شده در بالای LDS Overview of Base components built on top of LDS

مروری بر ماژول های @Salesforce و استفاده از آن Overview of @Salesforce Modules and its usage

  • مروری بر ماژول های @Salesforce و استفاده از آن Overview of @Salesforce Modules and its usage

با استفاده از مولفه پایه شکل رعد و برق ساخته شده در بالای LDS، رکورد ایجاد کنید Create Record using lightning-record-form base component built on top of LDS

  • با استفاده از مولفه پایه شکل رعد و برق ساخته شده در بالای LDS، رکورد ایجاد کنید Create Record using lightning-record-form base component built on top of LDS

  • کد نمونه - lightning-record-form create record Sample code - lightning-record-form create record

با استفاده از فرم رعد و برق با فیلدهای پاس شده، رکورد ایجاد کنید Create Record using lightning-record-form with fields passed

  • با استفاده از فرم رعد و برق با فیلدهای پاس شده، رکورد ایجاد کنید Create Record using lightning-record-form with fields passed

  • کد نمونه- با استفاده از فرم رکورد رعد و برق با ویژگی فیلد رکورد ایجاد کنید Sample code- Create record using lightning record form with field attribute

نمایش اعلان نان تست پس از ایجاد رکورد Show Toast notification once record created

  • نمایش اعلان نان تست پس از ایجاد رکورد Show Toast notification once record created

  • کد نمونه- نمایش اعلان نان تست پس از ایجاد رکورد Sample Code- Show Toast notification once record created

ایجاد رکورد با استفاده از Lightning Record ویرایش فرم جزء پایه Create Record Using Lightning Record edit form base component

  • چرا باید از فرم ویرایش رکورد لایتنینگ برای ایجاد رکورد استفاده کرد Why to use Lightning record edit form to create record

  • برای ایجاد رکورد، فرم ویرایش رکورد Lightning ایجاد کنید Create Lightning record edit form to create the record

  • اضافه کردن دکمه ها در فرم ویرایش رکورد رعد و برق Adding buttons in lightning record edit form

  • مقادیر فیلد از پیش تعریف شده و پیام خطا اضافه شدن در فرم ویرایش رکورد رعد و برق Predefined field values and error message adding in lightning record edit form

  • نمونه کد برای ایجاد رکورد با استفاده از فرم ویرایش رکورد رعد و برق Sample code to create record using lightning record edit form

از Lightning-record-form برای مشاهده رکورد استفاده کنید use Lightning-record-form to view the record

  • از Lightning-record-form برای مشاهده رکورد استفاده کنید use Lightning-record-form to view the record

  • کد نمونه- استفاده از فرم رعد و برق برای نمایش رکورد Sample code- use of lightning-record-form to Display record

برای مشاهده رکورد از شکل رعد و برق-record-view-form استفاده کنید use lightning-record-view-form to view the record

  • برای مشاهده رکورد از شکل رعد و برق-record-view-form استفاده کنید use lightning-record-view-form to view the record

  • کد نمونه - از Lightning-record-view-form برای نمایش رکورد استفاده کنید Sample code - use Lightning-record-view-form to display record

برای ویرایش رکورد از فرم ثبت رعد و برق و فرم ویرایش رعد و برق استفاده کنید Use lightning-record-form and lightning-record-edit-form to edit the record

  • برای ویرایش رکورد از فرم ثبت رعد و برق و فرم ویرایش رعد و برق استفاده کنید Use lightning-record-form and lightning-record-edit-form to edit the record

  • کد نمونه - فرم ثبت رعد و برق و فرم ویرایش رکورد رعد و برق sample code - lightning-record-form and lightning-record-edit-form

نمای کلی آداپتور سیم مورد استفاده در LWC برای دسترسی به داده ها Overview of Wire adapter used in LWC to access data

  • نمای کلی آداپتور سیم مورد استفاده در LWC برای دسترسی به داده ها Overview of Wire adapter used in LWC to access data

از آداپتور سیم CreateRecord در کامپوننت وب لایتنینگ استفاده کنید Use CreateRecord wire adapter in lightning web component

  • از آداپتور سیم CreateRecord در کامپوننت وب لایتنینگ استفاده کنید Use CreateRecord wire adapter in lightning web component

  • کد نمونه - از آداپتور سیم CreateRecord در کامپوننت وب لایتنینگ استفاده کنید Sample code - Use CreateRecord wire adapter in lightning web component

برای دسترسی به داده های نیروی فروش از آداپتور getRecord Wire استفاده کنید Use getRecord Wire adapter to access salesforce data

  • نمای کلی آداپتور سیم getRecord Overview of getRecord wire adapter

  • برای استفاده از آداپتور getRecord برای نمایش داده ها Component ایجاد کنید create Component to use getRecord adapter to display the data

  • کد نمونه - ایجاد کامپوننت برای استفاده از آداپتور getRecord برای نمایش داده ها Sample code -create Component to use getRecord adapter to display the data

نحوه برقراری ارتباط بین کامپوننت ها در کامپوننت وب لایتنینگ How to Communicate between Components in Lightning web component

  • نحوه برقراری ارتباط بین کامپوننت ها در کامپوننت وب لایتنینگ How to Communicate between Components in Lightning web component

ارتباط با استفاده از روش از مؤلفه والد به مؤلفه فرزند Communication using Method from parent component to child component

  • مروری بر ارتباطات با استفاده از روش از مؤلفه والد به مؤلفه فرزند Overview of Communication using Method from parent component to child component

  • مراحل اساسی برای ارتباط والدین با فرزند در LWC چیست؟ What are the basic steps to follow for parent to child communication in LWC

  • ایجاد مؤلفه فرزند برای استفاده در والد برای برقراری ارتباط از مؤلفه والد create child component to use in parent to communicate from parent component

  • از کامپوننت فرزند در کامپ والد استفاده کنید و پیام را از والدین به فرزند منتقل کنید use child component inside parent comp and pass message from parent to child

  • کد نمونه - جزء والد به فرزند Sample code - Parent to child component

  • از مؤلفه فرزند در مؤلفه والد برای انتقال پیام از والدین به فرزند استفاده کنید Use child component in parent component to pass message from parent to child

با استفاده از رویداد سفارشی در LWC، از فرزند به مؤلفه والد ارتباط برقرار کنید Communicate from child to parent component using Custom Event in LWC

  • نمای کلی رویداد سفارشی برای برقراری ارتباط کودک با مؤلفه والد Overview of Custom event to communicate child to parent component

  • نحوه ایجاد و ارسال رویداد سفارشی how to create and dispatch custom event

  • ایجاد مولفه فرزند برای ایجاد و ارسال رویداد create child component to create and dispatch event

  • رویداد هندل در مؤلفه والد اعلامی Handel event in parent component declarative

  • کد نمونه -رویداد Handel در مؤلفه والد به صورت اعلامی Sample code -Handel event in parent component declaratively

  • رویداد Handel در مؤلفه والد با استفاده از addEventListener Handel event in parent component using addEventListener

  • کد نمونه- رویداد Handel در مؤلفه والد با استفاده از addEventListener Sample code- Handel event in parent component using addEventListener

با سرویس پیام لایتنینگ در سراسر DOM ارتباط برقرار کنید Communicate Across the DOM with Lightning Message Service

  • سرویس پیام لایتنینگ چیست؟ What is Lightning Message Service?

  • چگونه می توانیم از سرویس پیام لایتنینگ استفاده کنیم؟ How Can we use Lightning message service ?

  • یک کانال پیام برای ارتباط امن ایجاد کنید Create a Message Channel for secure communication

  • یک جزء LWC برای انتشار پیام ایجاد کنید Create a LWC component to publish the message

  • برای گوش دادن به پیام منتشر شده، مؤلفه Aura ایجاد کنید Create Aura Component to listen the published message

  • در یک کانال پیام برای LWC منتشر کنید Publish on a Message Channel for LWC

  • مشترک شدن از کانال پیام - جزء هاله Subscribe from a Message Channel - Aura component

  • بیایید سرویس خروجی پیام مورد استفاده با LWC و Aura را بررسی کنیم Lets check the Output of Message service used with LWC and Aura

اجازه می‌دهیم در جدول داده‌های لایتنینگ استاندارد شما یک سبک طراحی کنیم Lets put some styling in your standard lightning DataTable

  • مقدمه ای بر نحوه استفاده از Styling در Lightning DataTable Introduction to How To use Styling in lightning DataTable

  • جدول داده های Lightning را با گرفتن رکورد با استفاده از Apex بسازید Build Lightning Data Table with getting record using Apex

  • از استایل SLDS برای استایل دادن به یک ستون خاص در جدول به صورت مشروط استفاده کنید Use SLDS styling to style a particular column in table conditionally

  • از استایل SLDS برای استایل دادن به ستون کامل جدول استفاده کنید Use SLDS styling to style the complete column of a table

  • از CSS سفارشی برای استایل دادن به ستون جدول داده لایتنینگ استفاده کنید Use Custom CSS to style column of a lightning data table

  • کد نمونه استفاده شده برای جدول داده های Lightning Sample Code Used for Lightning Data Table

کلاس Wrapper در کامپوننت وب لایتنینگ Wrapper Class in Lightning Web Component

  • مقدمه ای بر Wrapper Object در LWC Introduction to Wrapper Object in LWC

  • به رکورد Wrapper در جاوا اسکریپت دسترسی پیدا کنید Access Wrapper Record in JavaScript

  • نمایش داده های Wrapper در لایتنینگ وب کامپوننت Display Wrapper data in Lightning web Component

  • کد نمونه مورد استفاده برای جلسه شیء Wrapper Sample code Used for Wrapper object session

مولفه صفحه بندی سمت مشتری عمومی در LWC Generic Client side Pagination Component in LWC

  • صفحه بندی سمت مشتری در کامپوننت وب لایتنینگ Client Side Pagination in Lightning Web Component

  • یک کلاس Wrapper ایجاد کنید تا رکورد را از سرور به نمایش با استفاده از صفحه‌بندی دریافت کنید Create a Wrapper class to get Record from Server to Display using Pagination

  • کامپوننت وب لایتنینگ را برای نمایش رکوردها در جدول برای صفحه بندی ایجاد کنید Create Lightning Web Component to Display Records in Table for pagination

  • کامپوننت صفحه بندی عمومی را برای استفاده در هر جزء ایجاد کنید Create Generic Pagination Component to Use in any component

  • برای نمایش رکوردها با صفحه‌بندی، مؤلفه صفحه‌بندی را به مؤلفه والد اضافه کنید Add Pagination Component in parent component to display records with Pagination

  • کد نمونه ای که برای صفحه بندی استفاده می شود Sample code used for Pagination

هشدار، تأیید و درخواست با استفاده از مؤلفه وب لایتنینگ Alert, Confirm and Prompt using Lightning Web Component

  • نمایش مدال هشدار در کامپوننت وب لایتنینگ Show Alert Modal in Lightning Web Component

  • کد نمونه برای هشدار LWC Sample Code for LWC Alert

  • نمایش Confirm Modal در لایتنینگ Web Component Show Confirm Modal in Lightning Web Component

  • کد نمونه برای تأیید LWC Sample Code for LWC Confirm

  • نمایش Prompt Modal در لایتنینگ Web Component Show Prompt Modal in Lightning Web Component

  • کد نمونه برای اعلان LWC Sample Code for LWC Prompt

کامپوننت Generic Lightning Modal را در LWC ایجاد کنید Create Generic Lightning Modal Component in LWC

  • Lightning Modal در LWC چیست؟ What is Lightning Modal in LWC?

  • یک کامپوننت معمولی Lightning Modal در LWC ایجاد کنید Create a Generic Lightning Modal Component in LWC

  • نحوه باز کردن کامپوننت مدال از کامپوننت ظرف در LWC How to Open a Modal Component from a Container Component in LWC

  • کد نمونه برای Lightning Modal در LWC Sample Code for Lightning Modal in LWC

معرفی پروژه LWC از انتها به پایان Introduction to the end to end LWC project

  • معرفی پروژه LWC بلادرنگ (جستجوی خانه من) و تعریف طرح پروژه Intro to real time LWC project(Search My Home) and project Schema definition

  • سند پروژه - شرح پروژه/سند الزامات تجاری Project Document- Project description / Business Requirement document

طرحواره شی و جزئیات فیلد مورد استفاده برای جستجوی کامل Home Project Object Schema and field details used for complete search Home Project

  • نمودار طرحواره کامل هر سه شیء برای پروژه Complete Schema diagram of all three objects for the project

  • فیلد مالک ملک در پروژه خانه جستجو Property Owner Field in Search Home Project

  • قسمت Property Object در Search Property object Property Object Field in Search Property object

  • فیلد استعلام ملک در پروژه خانه جستجو Property Enquiery Field in Search Home Project

Object Schema را برای پروژه نصب کنید Install Object Schema for the Project

  • نصب پکیج Package Installation

اجازه می دهد تا نتیجه جستجوی ملک را بسازیم (استفاده از خدمات Wire برای دریافت لیست املاک) Lets build Property Search Result(use of Wire services to get Property list)

  • اجازه می دهد تا نتیجه جستجوی ملک را بسازیم (استفاده از خدمات Wire برای دریافت لیست املاک) Lets build Property Search Result(use of Wire services to get Property list)

  • کد نمونه برای جزء نتیجه جستجوی املاک Sample code for Property Search Result component

  • نمونه کد Apex که در پروژه کامل استفاده می شود Sample Apex code being used in complete project

ایجاد مولفه مالک ملک برای نمایش جزئیات مالک (از فرم مشاهده رکورد استفاده کنید) Create Property Owner Component to display Owner Details (use record view form)

  • ایجاد مولفه مالک ملک برای نمایش جزئیات مالک (از فرم مشاهده رکورد استفاده کنید) Create Property Owner Component to display Owner Details (use record view form)

  • کد نمونه برای ایجاد کامپوننت مالک ملک Sample Code for creating Property Owner Component

با استفاده از ترکیب کامپوننت، جزء Property Owner را در صفحه Property Result اضافه کنید Add Property Owner component in Property Result page using component composition

  • با استفاده از ترکیب کامپوننت، جزء Property Owner را در صفحه Property Result اضافه کنید Add Property Owner component in Property Result page using component composition

با استفاده از کامپوننت پایه لایتنینگ، فرم درخواست ملک را ایجاد کنید Create Property enquiry Form using Lightning base component

  • با استفاده از کامپوننت پایه لایتنینگ، فرم درخواست ملک را ایجاد کنید Create Property enquiry Form using Lightning base component

  • کد نمونه برای مولفه استعلام دارایی Sample Code for property Enquiery Component

با استفاده از ترکیب کامپوننت، مولفه Property Inquiry را در صفحه نتیجه اضافه کنید Add Property Enquiry component in Result page using component composition

  • با استفاده از ترکیب کامپوننت، مولفه Property Inquiry را در صفحه نتیجه اضافه کنید Add Property Enquiry component in Result page using component composition

افزودن فیلتر بیشتر در جزء فیلتر ویژگی Add More filter in property filter component

  • افزودن فیلتر بیشتر در جزء فیلتر ویژگی Add More filter in property filter component

اضافه کردن سبک CSS به فیلتر ویژگی Add CSS style to property filter

  • کد نمونه برای جزء فیلتر املاک Sample Code for Property Filter Component

  • اضافه کردن سبک CSS به فیلتر ویژگی Add CSS style to property filter

  • کد نمونه برای افزودن css به جزء فیلتر ویژگی Sample code for adding css in property filter component

اضافه کردن عملکرد تغییر فیلتر در جزء فیلتر خواص Add filter change function on Property filter component

  • تابع onchange را روی هر معیار فیلتر جزء فیلتر ویژگی اضافه کنید Add onchange function on each filter criteria of property filter component

  • کد نمونه برای افزودن تابع onchange بر روی معیارهای فیلتر جزء فیلتر Sample code for adding onchange function on filter criteria of filter component

از مکانیسم PubSub برای برقراری ارتباط بین فیلتر ویژگی و نتیجه ویژگی استفاده کنید use PubSub Mechanism to communicate between property filter and property result

  • با استفاده از pubsub، رویداد Fire را از مؤلفه فیلتر ویژگی اضافه کنید Add Fire event from property Filter component using pubsub

  • کد نمونه برای ماژول PubSub Sample code for PubSub module

  • کد نمونه برای شلیک رویداد از Property Filter Javascript Sample code for firing event from Property Filter Javascript

ثبت شنونده به جزء نتیجه ویژگی Register listener to property result component

  • ثبت شنونده به مؤلفه نتیجه ویژگی برای تغییر مکان Register listener to property result component for location change

  • کد نمونه برای ثبت رویداد در نتیجه ملک برای فیلتر مکان Sample Code for registering event in property result for location filter

شنونده را به مؤلفه نتیجه ملک برای تعداد فیلتر اتاق تخت ثبت کنید Register listener to property result component for No of Bed Room Filter

  • شنونده را به مؤلفه نتیجه ملک برای تعداد فیلتر اتاق تخت ثبت کنید Register listener to property result component for No of Bed Room Filter

  • کد نمونه برای شنونده برای رویداد فیلتر هیچ اتاق خواب Sample code for listener for no of bedroom filter event

ثبت شنونده به مؤلفه نتیجه ملک برای تعداد فیلتر اتاق حمام Register listener to property result component for No of Bath Room Filter

  • ثبت شنونده به مؤلفه نتیجه ملک برای تعداد فیلتر اتاق حمام Register listener to property result component for No of Bath Room Filter

  • کد نمونه برای شنونده برای رویداد فیلتر حمام Sample code for listener for no of bathroom filter event

برای فیلتر حداکثر بودجه، شنونده را در مؤلفه نتیجه ویژگی ثبت کنید Register listener to property result component for Maximum budget Filter

  • برای فیلتر حداکثر بودجه، شنونده را در مؤلفه نتیجه ویژگی ثبت کنید Register listener to property result component for Maximum budget Filter

  • کد نمونه برای کامپوننت نتیجه ثبت شنونده به ویژگی برای حداکثر بودجه Sample code for Register listener to property result component for Max budget

تب Property Master View را با ناوبری Lightning ایجاد کنید Create Property Master View tab with Lightning navigation

  • تب Property Master View را با ناوبری Lightning ایجاد کنید Create Property Master View tab with Lightning navigation

برای نمایش اطلاعات دارایی، جزء جزئیات ملک را ایجاد کنید Create Property Details Component to display property Information

  • برای نمایش اطلاعات دارایی، جزء جزئیات ملک را ایجاد کنید Create Property Details Component to display property Information

  • اطلاعات دیگری را در مورد مولفه جزئیات ملک اضافه کنید Add other information on Property Details Component

  • کد نمونه برای جزء مشخصات ملک Sample code for Property Details Component

جزء جزئیات قیمت گذاری ملک را برای اضافه کردن در برگه ویژگی Master ایجاد کنید Create Property Pricing Details component to add in Master property Tab

  • جزء جزئیات قیمت گذاری ملک را برای اضافه کردن در برگه ویژگی Master ایجاد کنید Create Property Pricing Details component to add in Master property Tab

  • کد نمونه برای جزییات قیمت گذاری ملک Sample code for Property Pricing Details Component

جزئیات مالک ملک را داخل جزء Property Master Tab اضافه کنید Add Property Owner Details inside Property Master Tab component

  • جزئیات مالک ملک را داخل جزء Property Master Tab اضافه کنید Add Property Owner Details inside Property Master Tab component

  • کد نمونه برای افزودن جزئیات مالک ملک در جزء Property Master Tab Sample code for Add Property Owner Details inside Property Master Tab component

افزودن ویژگی ویدیو در تب ویژگی Master Add property Video in Master property Tab

  • افزودن ویژگی ویدیو در تب ویژگی Master Add property Video in Master property Tab

  • کد نمونه برای افزودن ویژگی ویدیو در تب ویژگی Master Sample code for Add property Video in Master property Tab

کد منبع کامل پروژه Complete source code for the Project

  • کد منبع کامل پروژه Complete source code for the Project

PPT کامل مورد استفاده در دوره برای مرجع شما Complete PPT Used in Course for your reference

  • PPT کامل مورد استفاده در دوره Complete PPT Used in Course

نمایش نظرات

نظری ارسال نشده است.

آموزش کامپوننت وب Salesforce Lightning با پروژه زنده
خرید اشتراک و دانلود خرید تکی و دانلود | 360,000 تومان (6 روز مهلت دانلود) در صورت خرید اشتراک، این آموزش بدلیل حجم بالا معادل 3 دوره است و 3 دوره از اشتراک شما کم می شود. زمان تقریبی آماده سازی لینک دانلود این دوره آموزشی حدود 5 تا 24 ساعت می باشد.
جزییات دوره
32 hours
214
Udemy (یودمی) udemy-small
23 فروردین 1403 (آخرین آپدیت رو دریافت می‌کنید، حتی اگر این تاریخ بروز نباشد.)
2,612
4.7 از 5
ندارد
دارد
دارد
Debasis Jena

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Debasis Jena Debasis Jena

معمار اپلیکیشن Salesforce و نویسنده آموزش الکترونیکی

Udemy (یودمی)

یودمی یکی از بزرگ‌ترین پلتفرم‌های آموزشی آنلاین است که به میلیون‌ها کاربر در سراسر جهان امکان دسترسی به دوره‌های متنوع و کاربردی را فراهم می‌کند. این پلتفرم امکان آموزش در زمینه‌های مختلف از فناوری اطلاعات و برنامه‌نویسی گرفته تا زبان‌های خارجی، مدیریت، و هنر را به کاربران ارائه می‌دهد. با استفاده از یودمی، کاربران می‌توانند به صورت انعطاف‌پذیر و بهینه، مهارت‌های جدیدی را یاد بگیرند و خود را برای بازار کار آماده کنند.

یکی از ویژگی‌های برجسته یودمی، کیفیت بالای دوره‌ها و حضور استادان مجرب و با تجربه در هر حوزه است. این امر به کاربران اعتماد می‌دهد که در حال دریافت آموزش از منابع قابل اعتماد و معتبر هستند و می‌توانند به بهترین شکل ممکن از آموزش‌ها بهره ببرند. به طور خلاصه، یودمی به عنوان یکی از معتبرترین و موثرترین پلتفرم‌های آموزشی آنلاین، به افراد امکان می‌دهد تا به راحتی و با کیفیت، مهارت‌های مورد نیاز خود را ارتقا دهند و به دنبال رشد و پیشرفت شغلی خود باشند.