Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Salesforce Lightning web component with live project

Salesforce Lightning Web Component với dự án thực tế

Salesforce Lightning Web Component với dự án thực tế

Hướng dẫn phát triển Salesforce Lightning Web Component qua loạt bài code và một dự án thời gian thực

4.7
(517 đánh giá)
3,719 học viên
Giảng viên
Debasis Jena
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
79.000đ 349.000đ -77%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
33.0 giờ video
217 bài giảng
1 bài quiz
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 07/06/2026

Bạn sẽ học được gì

Framework Lightning Web Component là gì?
Phát triển Lightning Web Component
Khả năng tương tác giữa LWC và Aura
Trình duyệt, công cụ và trải nghiệm được hỗ trợ cho Lightning Web Components
Thiết lập môi trường phát triển và lệnh CLI để làm việc với LWC
Thiết lập Devhub và Scratch org cùng tầm quan trọng của chúng
Cấu trúc Thư mục và Tệp LWC
Các thuộc tính Javascript hữu ích trong Lightning Component
Thành phần lồng nhau / Thành phần tổ hợp
Cách giao tiếp giữa các thành phần bằng Events
Cơ chế PubSub để giao tiếp sự kiện
Các cách truy cập tài nguyên Salesforce trong LWC
Lightning Data Services và Base components để lấy dữ liệu Salesforce trong Lightning Web Components
Sử dụng Wire services để truy cập dữ liệu trong LWC
Các cách khác nhau để gọi Apex từ Lightning Web Component
Gọi liên tục và gọi API từ Lightning Web Component
Công dụng của Navigation services trong Lightning Web Component
Giới thiệu SLDS và các tài nguyên khác nhau
Vòng đời thành phần và các phương pháp hay nhất về sự kiện
Cơ chế gỡ lỗi Lightning Web Component của bạn
Sử dụng Jtest để kiểm tra Lightning Web Components của bạn
Các cách tốt nhất để chuyển đổi thành phần Aura sang LWC
Nhiều tình huống thực tế và cách code LWC từng bước
Truy cập đầy đủ mã nguồn để thực hành
Dự án thực tế với mã nguồn hoàn chỉnh được xây dựng trên LWC

Yêu cầu

Kiến thức cơ bản về Salesforce, Javascript
Hiểu biết cơ bản về Salesforce Apex và SOQL là một lợi thế
Quan trọng hơn là có hứng thú học Salesforce Lightning Web Component

Đối tượng phù hợp

Salesforce
Nhà phát triển
Quản trị viên
Chuyên gia phần mềm
Người kiểm thử
Quản lý dự án

Nội dung khóa học

78 phần • 214 bài giảng
1 Giới thiệu về Lightning Web Component / LWC trong Salesforce
2 Sự khác biệt giữa Visualforce, Aura component và LWC
3 Web Component và sự phát triển của Webstack
4 Tại sao nên chọn LWC thay vì các Aura Components hiện có
5 Sự cùng tồn tại và khả năng tương tác giữa AURA và LWC
1 Trình duyệt được hỗ trợ cho LWC
2 Javascript được hỗ trợ cho LWC
3 Trải nghiệm và công cụ được hỗ trợ cho LWC
1 Cần thiết lập những gì cho LWC?
2 Đăng ký tài khoản Salesforce (nếu chưa có)
3 Bật My Domain trong Org phát triển của bạn
4 Bật Chế độ gỡ lỗi trong Org phát triển của bạn
5 Cài đặt Visual Studio Code
6 Cài đặt Salesforce Extension pack
7 Cài đặt Salesforce CLI
1 Thiết lập org chính làm Devhub
2 Tạo Dự án và Scratch org trong Visual Studio Code
1 Tạo Lightning Web Component đầu tiên và cấu trúc thư mục của nó
2 Code mẫu cho thành phần LWC đầu tiên
1 Tìm hiểu cơ bản về HTML template, Javascript và tệp cấu hình LWC
2 Hiển thị LWC đầu tiên của chúng ta trên Lightning Record Page
3 Code cho tệp Meta để hiển thị thành phần trên trang bản ghi
1 Các cơ chế khác nhau để tạo kiểu cho Lightning Web Component của bạn
2 Tạo kiểu cho Lightning Web Component bằng CSS tùy chỉnh (tệp style)
3 Thêm Tệp CSS và code style vào thành phần của chúng ta
4 Code mẫu cho bảng định kiểu tùy chỉnh cho Lightning Web Component của bạn
5 Tạo kiểu cho Lightning Web Component bằng SLDS
6 Code mẫu - Tạo kiểu cho Lightning Web Component bằng SLDS
7 Chia sẻ CSS Styles giữa các LWC
8 Code mẫu - Chia sẻ CSS Styles giữa các LWC
1 Các khóa học khác bạn có thể thích
1 Trường, Thuộc tính và Đặc tính Javascript
2 Sử dụng Private Properties trong thành phần của bạn để ràng buộc dữ liệu động
3 Code mẫu cho Private properties trong LWC
1 Sử dụng kết xuất có điều kiện bằng template if:else
2 Code mẫu cho việc sử dụng kết xuất có điều kiện bằng template if:else
1 Sử dụng for:each và for:item để lặp bộ sưu tập trong Lightning Web Component
2 Mã nguồn sử dụng for:each và for:item để lặp bộ sưu tập
3 Sử dụng Iterator để lặp trên bộ sưu tập các mục trong Lightning Web Component
4 Mã nguồn sử dụng Iterator để lặp trên bộ sưu tập các mục
1 Tổng quan về Public, private property, reactive và non-reactive property
1 Lưu ý quan trọng
2 Ví dụ về Javascript Private và @track
3 Code mẫu cho private track property
1 Tạo thành phần CourseEnroll để sử dụng public property
2 Truy cập public property của CourseEnroll trong thành phần cha AllCourseEnroll
3 Code mẫu cho việc sử dụng Public property trong Lightning Web Component
1 LWC Lifecycle hooks
2 Code mẫu cho Lifecycle hooks
1 Truy cập custom label trong Lightning Web Component
2 Code mẫu sử dụng custom label trong Lightning Web Component
1 Truy cập Static Resource trong Lightning Web Component
2 Code mẫu sử dụng static resource trong Lightning Web Component
1 Truy cập thông tin Người dùng hiện tại trong Lightning Web Component
2 Code mẫu để truy cập User Id hiện tại trong Lightning Web Component
1 Cách điều hướng từ trang này sang trang khác bằng Navigation services trong LWC
2 Các bước cần làm để sử dụng Navigation service trong LWC
1 Sử dụng Navigation Service để điều hướng đến trang chủ đối tượng từ Lightning Web Component
2 Code mẫu để điều hướng đến trang chủ đối tượng
1 Sử dụng Navigation service để điều hướng đến danh sách đối tượng
2 Code mẫu sử dụng Navigation service để điều hướng đến danh sách đối tượng
1 Sử dụng Navigation service để điều hướng đến trang tạo bản ghi mới từ Lightning Web Component
2 Code mẫu sử dụng Navigation service để điều hướng đến trang tạo bản ghi mới
1 Sử dụng navigation service để điều hướng đến trang chỉnh sửa và chi tiết bản ghi từ LWC
2 Code mẫu sử dụng navigation service để điều hướng đến trang chỉnh sửa và chi tiết bản ghi
1 Sử dụng Navigation service để điều hướng đến Trang web từ Lightning Web Component
2 Code mẫu sử dụng Navigation service để điều hướng đến Trang web
1 Thành phần tổ hợp là gì và công dụng của nó
2 Thành phần tổ hợp - gọi public method của thành phần con từ thành phần cha
3 Code mẫu cho thành phần tổ hợp
1 Slot trong Lightning Web Component là gì và cách truyền Markup vào slot
2 Code mẫu cho slot
1 Cách truy cập dữ liệu Salesforce trong Lightning Web Component
1 Cách sử dụng lớp và phương thức Apex trong Lightning Web Component
1 Sử dụng Wire một property để gọi phương thức apex trong Lightning Web Component
2 Tạo Lightning Web Component để gọi Apex với Wire một Property
3 Công dụng của @AuraEnabled(Cacheable=true) trong thành phần và hiển thị dữ liệu
4 Code mẫu sử dụng wire to property để gọi apex
5 Sử dụng Navigation để điều hướng đến trang chi tiết bản ghi
6 Code mẫu sử dụng Navigation trong thành phần của chúng ta
1 Wire Apex Method với Function để gọi từ Lightning Web Component
2 Tạo phương thức Apex để wire với function sử dụng trong LWC
3 Hiển thị dữ liệu trong LWC với Apex wire to Function
4 Code mẫu - sử dụng Wire to Function để gọi Apex trong LWC
1 Tổng quan về việc truyền tham số cho phương thức apex với Wire services
2 Ràng buộc dữ liệu động trong Lightning Combo box
3 Truyền tham số động cho phương thức apex wire service
4 Code mẫu truyền tham số động cho phương thức apex wire service
1 Tổng quan về việc gọi phương thức Apex imperatively
2 Cú pháp gọi phương thức apex imperatively
3 Tạo thành phần để gọi phương thức apex imperatively
4 Gọi một phương thức apex khác từ thành phần với việc truyền tham số
5 Code mẫu - Gọi Apex Imperatively
1 Tổng quan về Lightning Data Services và công dụng của nó
2 KHÔNG SỬ DỤNG - Lightning Data services để truy cập dữ liệu Salesforce
1 Tổng quan về Base components được xây dựng trên LDS
1 Tổng quan về @Salesforce Modules và công dụng của nó
1 Tạo Bản ghi bằng base component lightning-record-form được xây dựng trên LDS
2 Code mẫu - lightning-record-form tạo bản ghi
1 Tạo Bản ghi bằng lightning-record-form với các trường được truyền vào
2 Code mẫu - Tạo bản ghi bằng lightning record form với thuộc tính field
1 Hiển thị thông báo Toast sau khi tạo bản ghi
2 Code mẫu - Hiển thị thông báo Toast sau khi tạo bản ghi
1 Tại sao nên sử dụng Lightning record edit form để tạo bản ghi
2 Tạo Lightning record edit form để tạo bản ghi
3 Thêm nút trong lightning record edit form
4 Giá trị trường định sẵn và thêm thông báo lỗi trong lightning record edit form
5 Code mẫu tạo bản ghi bằng lightning record edit form
1 Sử dụng Lightning-record-form để xem bản ghi
2 Code mẫu - sử dụng lightning-record-form để hiển thị bản ghi
1 Sử dụng lightning-record-view-form để xem bản ghi
2 Code mẫu - sử dụng Lightning-record-view-form để hiển thị bản ghi
1 Sử dụng lightning-record-form và lightning-record-edit-form để chỉnh sửa bản ghi
2 Code mẫu - lightning-record-form và lightning-record-edit-form
1 Tổng quan về Wire adapter được sử dụng trong LWC để truy cập dữ liệu
1 Sử dụng CreateRecord wire adapter trong Lightning Web Component
2 Code mẫu - Sử dụng CreateRecord wire adapter trong Lightning Web Component
1 Tổng quan về getRecord wire adapter
2 Tạo thành phần để sử dụng getRecord adapter hiển thị dữ liệu
3 Code mẫu - Tạo Component sử dụng getRecord adapter để hiển thị dữ liệu
1 Cách thức Giao tiếp giữa các Component trong Lightning Web Component
1 Tổng quan về Giao tiếp sử dụng Method từ component cha xuống component con
2 Các bước cơ bản để thực hiện giao tiếp từ cha xuống con trong LWC
3 Tạo component con để sử dụng trong component cha cho giao tiếp từ cha xuống con
4 Sử dụng component con bên trong component cha và truyền thông điệp từ cha xuống con
5 Code mẫu - Giao tiếp từ component cha xuống component con
6 Sử dụng component con trong component cha để truyền thông điệp từ cha xuống con
1 Tổng quan về Custom Event để giao tiếp từ con lên cha
2 Cách tạo và phát đi một custom event
3 Tạo component con để tạo và phát đi event
4 Xử lý event trong component cha một cách khai báo (declarative)
5 Code mẫu - Xử lý event trong component cha một cách khai báo
6 Xử lý event trong component cha sử dụng addEventListener
7 Code mẫu - Xử lý event trong component cha sử dụng addEventListener
1 Lightning Message Service là gì?
2 Cách sử dụng Lightning Message Service
3 Tạo một Message Channel cho giao tiếp an toàn
4 Tạo một LWC component để publish thông điệp
5 Tạo Aura Component để lắng nghe thông điệp được publish
6 Publish trên một Message Channel cho LWC
7 Subscribe từ một Message Channel - Aura component
8 Kiểm tra kết quả đầu ra của Message Service khi dùng với LWC và Aura
1 Giới thiệu cách sử dụng Styling trong lightning DataTable
2 Xây dựng Lightning Data Table với việc lấy bản ghi sử dụng Apex
3 Sử dụng SLDS styling để tạo kiểu có điều kiện cho một cột cụ thể trong bảng
4 Sử dụng SLDS styling để tạo kiểu cho toàn bộ một cột của bảng
5 Sử dụng Custom CSS để tạo kiểu cho cột của lightning data table
6 Code mẫu sử dụng cho Lightning Data Table
1 Giới thiệu về Wrapper Object trong LWC
2 Truy cập Wrapper Record trong JavaScript
3 Hiển thị dữ liệu Wrapper trong Lightning Web Component
4 Code mẫu sử dụng cho phần Wrapper object
1 Phân trang phía Client trong Lightning Web Component
2 Tạo một Wrapper class để lấy bản ghi từ Server và hiển thị sử dụng phân trang
3 Tạo Lightning Web Component để hiển thị bản ghi trong bảng cho phân trang
4 Tạo Component Phân trang tổng quát để sử dụng trong bất kỳ component nào
5 Thêm Component Phân trang vào component cha để hiển thị bản ghi với phân trang
6 Code mẫu sử dụng cho Phân trang
1 Hiển thị Modal Alert trong Lightning Web Component
2 Code mẫu cho LWC Alert
3 Hiển thị Modal Confirm trong Lightning Web Component
4 Code mẫu cho LWC Confirm
5 Hiển thị Modal Prompt trong Lightning Web Component
6 Code mẫu cho LWC Prompt
1 Lightning Modal trong LWC là gì?
2 Tạo một Component Lightning Modal tổng quát trong LWC
3 Cách mở một Modal Component từ một Container Component trong LWC
4 Code mẫu cho Lightning Modal trong LWC
1 Giới thiệu dự án LWC thời gian thực (Search My Home) và định nghĩa Schema của dự án
2 Tài liệu dự án - Mô tả dự án / Tài liệu Yêu cầu nghiệp vụ
1 Sơ đồ Schema hoàn chỉnh của cả ba object cho dự án
2 Field Property Owner trong dự án Search Home
3 Field Property Object trong object Search Property
4 Field Property Enquiry trong dự án Search Home
1 Cài đặt Package
1 Xây dựng Kết quả Tìm kiếm Bất động sản (sử dụng Wire services để lấy danh sách Property)
2 Code mẫu cho component Kết quả Tìm kiếm Bất động sản
3 Code Apex mẫu được sử dụng trong toàn bộ dự án
1 Tạo Component Property Owner để hiển thị Chi tiết Chủ sở hữu (sử dụng record view form)
2 Code mẫu để tạo Component Property Owner
1 Thêm component Property Owner vào trang Kết quả Property sử dụng component composition
1 Tạo Form Yêu cầu thông tin Bất động sản sử dụng Lightning base component
1 Thêm component Property Enquiry vào trang Kết quả sử dụng component composition
1 Tạo Form Yêu cầu thông tin Bất động sản sử dụng Lightning base component
2 Code mẫu cho component Property Enquiry
1 Thêm bộ lọc vào component lọc bất động sản
1 Code mẫu cho Component Lọc Bất động sản
2 Thêm CSS style cho component lọc bất động sản
3 Code mẫu để thêm css vào component lọc bất động sản
1 Thêm hàm onchange vào mỗi tiêu chí lọc của component lọc bất động sản
2 Code mẫu để thêm hàm onchange vào tiêu chí lọc của component lọc
1 Thêm sự kiện Fire từ component Lọc bất động sản sử dụng pubsub
2 Code mẫu cho module PubSub
3 Code mẫu cho việc phát event từ Javascript của Property Filter
1 Đăng ký listener cho component kết quả bất động sản cho thay đổi vị trí
2 Code mẫu cho việc đăng ký event trong component kết quả cho bộ lọc vị trí
1 Đăng ký listener cho component kết quả bất động sản cho bộ lọc Số phòng ngủ
2 Code mẫu cho listener cho sự kiện lọc số phòng ngủ
1 Đăng ký listener cho component kết quả bất động sản cho bộ lọc Số phòng tắm
2 Code mẫu cho listener cho sự kiện lọc số phòng tắm
1 Đăng ký listener cho component kết quả bất động sản cho bộ lọc Ngân sách tối đa
2 Code mẫu cho việc đăng ký listener cho component kết quả cho bộ lọc Ngân sách tối đa
1 Tạo tab Property Master View với Lightning navigation
1 Tạo Component Chi tiết Bất động sản để hiển thị thông tin bất động sản
2 Thêm thông tin khác vào Component Chi tiết Bất động sản
3 Code mẫu cho Component Chi tiết Bất động sản
1 Tạo component Chi tiết Giá Bất động sản để thêm vào Tab Master property
2 Code mẫu cho Component Chi tiết Giá Bất động sản
1 Thêm Chi tiết Chủ sở hữu Bất động sản bên trong component Tab Master property
2 Code mẫu cho việc thêm Chi tiết Chủ sở hữu Bất động sản vào component Tab Master property
1 Thêm Video bất động sản vào Tab Master property
2 Code mẫu cho việc thêm Video bất động sản vào Tab Master property
1 Mã nguồn hoàn chỉnh cho Dự án
1 File PPT hoàn chỉnh được sử dụng trong khóa học

Giới thiệu khóa học

Lightning web component (LWC) is a new programming model with following web standards to develop salesforce lightning components and this is the only tutorial with maximum hour of video with real time project. Each session explained with many live coding to make your LWC concepts deep clear so that you can make your journey to be expert in LWC.

All code are also added in the tutorial for your reference and we are updating this with each new feature monthly wise.

LWC is still new in the market and learning LWC can make you a Salesforce gem and can give your resume another dimension.


This course is designed from basic to expertise level. if you are beginner , nothing to worry, its very easy and well organized course to make your learning simple and smooth. Also for expert, you can learn deep knowledge of LWC and add many more skills in your professional career with live real-time examples and scenarios with series of codes.

There is one complete real time project added in the end of session which covers all lwc concepts and how to implement it. Every session delivered with examples and code which is shared in the session already .


Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Javascript
Hiển thị tất cả khoá học Salesforce Development
Hiển thị tất cả khoá học Salesforce Lightning
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊