آموزش [جدید] توسعه کامل جاوا با Spring Boot 3 و React

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

معرفی Introduction

• معرفی دوره Course Introduction

• پیش نیازهای این دوره Prerequisites for this Course

• دیگر دوره های برتر Udemy من - از دست ندهید My Other Top Udemy Courses - Don't Skip

• راهنمای راه اندازی محیط توسعه Guide to Set Up Development Environment

اصول اولیه بوت بهار و مبانی توسعه API REST Spring Boot Fundamentals and REST API Development Basics

• دانلود نکات سخنرانی به صورت PDF Download Lecture Notes in PDF

• نمای کلی بخش Section Overview

• چکمه بهاره چیست؟ What is Spring Boot?

• ویژگی های بوت بهار Spring Boot Features

• پروژه Spring Boot را با استفاده از Spring Initializr و Import در IntelliJ IDE ایجاد کنید Create Spring Boot Project using Spring Initializr and Import in IntelliJ IDE

• Simple Spring Boot REST API ایجاد کنید Create Simple Spring Boot REST API

• Spring Boot REST API جاوا Bean را برمی گرداند Spring Boot REST API returns Java Bean

• Spring Boot REST API که لیست را برمی گرداند ایجاد کنید Create Spring Boot REST API That Returns List

• Spring Boot REST API با متغیر مسیر - @PathVariable Spring Boot REST API with Path Variable - @PathVariable

• Spring Boot REST API with Request Param - @RequestParam Spring Boot REST API with Request Param - @RequestParam

• Spring Boot POST REST API - @PostMapping و @RequestBody Spring Boot POST REST API - @PostMapping and @RequestBody

• Spring Boot PUT REST API - @PutMapping و @RequestBody Spring Boot PUT REST API - @PutMapping and @RequestBody

• Spring Boot DELETE REST API - @DeleteMapping Spring Boot DELETE REST API - @DeleteMapping

• استفاده از Spring ResponseEntity برای دستکاری پاسخ HTTP Using Spring ResponseEntity to Manipulate the HTTP Response

• URL پایه را برای REST API در Spring MVC Controller - @RequestMapping تعریف کنید Define Base URL for REST API’s in Spring MVC Controller - @RequestMapping

• کد منبع این بخش را دانلود کنید Download Source Code of this Section

• بخش مسابقه - خودتان را امتحان کنید Section Quiz - Test Yourself

React JS Fundamentals React JS Fundamentals

• یادداشت های سخنرانی در PDF Lecture Notes in PDF

• نمای کلی بخش Section Overview

• مقدمه ای بر React JS Introduction to React JS

• ایجاد و راه اندازی React App Create and Set up React App

• درک ساختار پروژه React App Understanding React App Project Structure

• بررسی اجمالی اجزای React React Components Overview

• اجزای عملکردی Functional Components

• اجزای کلاس Class Components

• واردات و صادرات قطعات Importing and Exporting Components

• JSX JSX

• قوانین JSX در React JSX Rules in React

• لوازم جانبی Props

• تجهیزات تخریبی Destructuring Props

• State و setState State and setState

• استفاده از حالت هوک useState Hook

• مدیریت رویداد Event Handling

• رندر مشروط Conditional Rendering

• بخش مسابقه - خودتان را امتحان کنید Section Quiz - Test Yourself

پروژه تمام پشته سیستم مدیریت کارکنان Employee Management System Full-Stack Project

• پشته فناوری و درک الزامات پروژه را انتخاب کنید Select Technology Stack and Understanding Project Requirements

• نسخه ی نمایشی - قرار است چه چیزی بسازیم؟ Demo - What Are We Going to Build?

• معماری Full-Stack Spring Boot React Spring Boot React Full-Stack Architecture

ماژول مدیریت کارکنان - Backend بوت بهار Employee Management Module - Spring Boot Backend

• نمای کلی بخش Section Overview

• معماری سه لایه بهار بوت Spring Boot Application Three Layer Architecture

• پروژه Spring Boot را در IntelliJ IDEA ایجاد و راه اندازی کنید Create and Setup Spring Boot Project in IntelliJ IDEA

• پایگاه داده MySQL را در برنامه Spring Boot پیکربندی کنید Configure MySQL Database in Spring Boot Application

• ایجاد نهاد JPA کارمند Create Employee JPA Entity

• EmployeeRepository را ایجاد کنید Create EmployeeRepository

• EmployeeDto و EmployeeMapper را ایجاد کنید Create EmployeeDto and EmployeeMapper

• ایجاد Add Employee REST API Build Add Employee REST API

• API Get Employee REST را بسازید Build Get Employee REST API

• ساخت Get All Employees REST API Build Get All Employees REST API

• Build Update Employee REST API Build Update Employee REST API

• ساخت Delete Employee REST API Build Delete Employee REST API

• کد منبع این بخش Source Code of this Section

• آزمون بخش 4 و 5 - خودتان را امتحان کنید Quiz for Sections 4 and 5 - Test Yourself

ماژول مدیریت کارکنان - React JS Backend Employee Management Module - React JS Backend

• نمای کلی بخش Section Overview

• ایجاد و راه اندازی React App Create and Set up React App

• درک ساختار پروژه React App Understanding React App Project Structure

• اضافه کردن Bootstrap در React با استفاده از NPM Adding Bootstrap in React Using NPM

• ایجاد React ListEmployeeComponent و نمایش داده ها Create React ListEmployeeComponent and Display Data

• برنامه React را با Get All Employees REST API متصل کنید Connect React App with Get All Employees REST API

• افزودن سربرگ و پاورقی به برنامه React Adding Header and Footer to React App

• مسیریابی را در برنامه React پیکربندی کنید Configure Routing in a React App

• React EmployeeComponent را ایجاد کنید و مسیر را پیکربندی کنید Create React EmployeeComponent and Configure Route

• مدیریت فرم کارمند را اضافه کنید Add Employee Form Handling

• React App را برای افزودن Employee REST API متصل کنید Connect React App to Add Employee REST API

• اعتبار سنجی فرم کارمند را اضافه کنید Add Employee Form Validation

• اضافه کردن دکمه به روز رسانی، عنوان و مسیر Adding Update Button, Title and Route

• React App را برای دریافت Employee REST API متصل کنید Connect React App to Get Employee REST API

• React App را برای به روز رسانی Employee REST API متصل کنید Connect React App to Update Employee REST API

• قابلیت Delete Employee را در React App پیاده سازی کنید Implement Delete Employee Feature in React App

• کد منبع این بخش Source Code of this Section

• بخش مسابقه - خودتان را امتحان کنید Section Quiz - Test Yourself

ماژول مدیریت بخش - Backend بوت بهار Department Management Module - Spring Boot Backend

• نمای کلی بخش Section Overview

• موجودیت بخش و DepartmentRepository را ایجاد کنید Create Department Entity and DepartmentRepository

• DepartmentDto و DepartmentMapper را ایجاد کنید Create DepartmentDto and DepartmentMapper

• ایجاد Create Department REST API Build Create Department REST API

• API Get Department REST را بسازید Build Get Department REST API

• ساخت Get All Departments REST API Build Get All Departments REST API

• Build Update Department REST API Build Update Department REST API

• ساخت Delete Department REST API Build Delete Department REST API

• کد منبع این بخش Source Code of this Section

ماژول مدیریت بخش - React JS Frontend Department Management Module - React JS Frontend

• نمای کلی بخش Section Overview

• پیوندهای ناوبری را در هدر اضافه کنید Add Navigation Links in Header

• جزء بخش لیست طراحی Design List Department Component

• برنامه React را با Get All Departments REST API متصل کنید Connect React App with Get All Departments REST API

• React DepartmentComponent را ایجاد کنید Create React DepartmentComponent

• مدیریت فرم بخش را اضافه کنید Add Department Form Handling

• React را به Add Department REST API متصل کنید Connect React to Add Department REST API

• اضافه کردن دکمه به روز رسانی، عنوان و مسیر Adding Update Button, Title and Route

• React App را برای دریافت Department REST API متصل کنید Connect React App to Get Department REST API

• React App را برای به‌روزرسانی Department REST API متصل کنید Connect React App to Update Department REST API

• قابلیت Delete Department را در React App پیاده سازی کنید Implement Delete Department Feature in React App

• تغییر افزودن و به‌روزرسانی ویژگی کارمند - روابط چند به یک در Spring Boot Change Add and Update Employee Feature - Many To One Relationship in Spring Boot

• برای استفاده از بخش - برنامه React، ویژگی کارمند را به‌روزرسانی و افزودن تغییر دهید Change Add and Update Employee Feature to use Department - React App

• کد منبع این بخش Source Code of this Section

پروژه تمام پشته مدیریت Todo Todo Management Full-Stack Project

• پروژه مدیریت Todo - پشته فناوری و الزامات Todo Management Project - Technology Stack and Requirements

• پروژه مدیریت تودو - قرار است چه چیزی بسازیم؟ Todo Management Project - What Are We Going to Build?

• معماری کامل پشته Spring Boot React برای پروژه مدیریت Todo Spring Boot React Full-Stack Architecture for Todo Management Project

ماژول مدیریت Todo - Spring Boot Backend با پایگاه داده MySQL Todo Management Module - Spring Boot Backend with MySQL Database

• نمای کلی بخش Section Overview

• پروژه Spring Boot را در IntelliJ IDEA ایجاد و راه اندازی کنید Create and Setup Spring Boot Project in IntelliJ IDEA

• پایگاه داده MySQL را در برنامه Spring Boot پیکربندی کنید Configure MySQL Database in Spring Boot Application

• موجودیت Todo JPA را ایجاد کنید Create Todo JPA Entity

• TodoRepository و TodoDto را ایجاد کنید Create TodoRepository and TodoDto

• ایجاد Add Todo REST API Build Add Todo REST API

• با استفاده از کتابخانه ModelMapper Using ModelMapper Library

• API Get Todo REST را بسازید Build Get Todo REST API

• ساخت Get All Todos REST API Build Get All Todos REST API

• Build Update Todo REST API Build Update Todo REST API

• ساخت Delete Todo REST API Build Delete Todo REST API

• API کامل Todo REST را بسازید Build Complete Todo REST API

• Build In Complete Todo API Build In Complete Todo API

• کد منبع این بخش Source Code of this Section

ماژول مدیریت Todo - React JS Frontend Todo Management Module - React JS Frontend

• نمای کلی بخش Section Overview

• برنامه React را با استفاده از Vite ایجاد و راه اندازی کنید Create and Setup React App using Vite

• درک ساختار پوشه Understanding Folder Structure

• بوت استرپ را با استفاده از NPM به React App اضافه کنید Add Bootstrap to React App using NPM

• ListTodoComponent + useState Hook را ایجاد کنید Create ListTodoComponent + useState Hook

• برنامه React را با Get All Todos REST API متصل کنید Connect React App with Get All Todos REST API

• افزودن سربرگ و پاورقی به برنامه React Adding Header and Footer to React App

• مسیریابی را در برنامه React پیکربندی کنید Configure Routing in a React App

• React TodoComponent را ایجاد کرده و مسیر را پیکربندی کنید Create React TodoComponent and Configure Route

• اضافه کردن Todo Form Handling Add Todo Form Handling

• React App را برای افزودن Todo REST API متصل کنید Connect React App to Add Todo REST API

• اضافه کردن دکمه به روز رسانی، عنوان و مسیر Adding Update Button, Title and Route

• React App را برای دریافت Todo REST API متصل کنید Connect React App to Get Todo REST API

• React App را برای به‌روزرسانی Todo REST API متصل کنید Connect React App to Update Todo REST API

• قابلیت Delete Todo را در React App پیاده سازی کنید Implement Delete Todo Feature in React App

• قابلیت Complete Todo را در React App پیاده سازی کنید Implement Complete Todo Feature in React App

• قابلیت InComplete Todo را در React App پیاده سازی کنید Implement InComplete Todo Feature in React App

• نسخه ی نمایشی - تست همه عملیات CRUD Demo - Test All CRUD Operations

• کد منبع این بخش Source Code of this Section

تأیید اعتبار امنیتی بهار و مجوز مبتنی بر نقش - Backend بوت بهار Spring Security Authentication & Role-Based Authorization - Spring Boot Backend

• نمای کلی بخش Section Overview

• احراز هویت و مجوز Authentication and Authorization

• افزودن امنیت Spring به برنامه Spring Boot Adding Spring Security to Spring Boot App

• پیکربندی خودکار بوت بهار برای امنیت فنری Spring Boot Auto Configuration for Spring Security

• سفارشی کردن کاربر پیش فرض Customizing the Default User

• راه حل برای روش منسوخ شده - csrf() Solution for Deprecated Method - csrf()

• احراز هویت پایه را پیکربندی و درک کنید Configure and Understand Basic Authentication

• احراز هویت در حافظه In-Memory Authentication

• درک مجوز مبتنی بر نقش Understanding Role-Based Authorization

• امنیت سطح روش Method Level Security

• بررسی اجمالی احراز هویت پایگاه داده Database Authentication Overview

• ایجاد نهادهای JPA کاربر و نقش Creating User and Role JPA Entities

• UserRepository و RoleRepository UserRepository and RoleRepository

• چگونه احراز هویت پایگاه داده در امنیت Spring کار می کند How Database Authentication Works in Spring Security

• ایجاد کلاس CustomUserDetailsService Creating CustomUserDetailsService Class

• احراز هویت پایگاه داده Database Authentication

• کد منبع این بخش Source Code of this Section

ماژول ثبت نام و ورود - Spring Boot Backend Registration and Login Module - Spring Boot Backend

• نمای کلی بخش Section Overview

• Build Register REST API Build Register REST API

• Exception Handling در Register REST API Exception Handling in Register REST API

• Build Login REST API Build Login REST API

• کد منبع این بخش Source Code of this Section

ماژول ثبت نام و ورود - React JS Frontend Registration and Login Module - React JS Frontend

• نمای کلی بخش Section Overview

• RegisterComponent را ایجاد کنید و مسیر را پیکربندی کنید Create RegisterComponent and Configure Route

• رسیدگی به فرم ثبت نام کاربر User Registration Form Handling

• React App را برای ثبت REST API متصل کنید Connect React App to Register REST API

• LoginComponent ایجاد کنید و مسیر را پیکربندی کنید Create LoginComponent and Configure Route

• طراحی فرم ورود Design Login Form

• React App را به Login REST API متصل کنید Connect React App to Login REST API

• اجرای احراز هویت اولیه در React App Implement Basic Authentication in React App

• پیوندها را به صورت احراز هویت هر کاربر در هدر نمایش دهید Display the Links as Per User Authentication in the Header

• ویژگی خروج در React App Logout Feature in React App

• مسیرها را در برنامه React ایمن کنید Secure the Routes in React App

• کد منبع این بخش Source Code of this Section

API های REST را با استفاده از JWT - Spring Boot Backend و React JS Frontend ایمن کنید Secure REST APIs using JWT - Spring Boot Backend & React JS Frontend

• نمای کلی بخش Section Overview

• مقدمه JWT JWT Introduction

• بررسی اجمالی JWT امنیت بهار Spring Security JWT Overview

• افزودن JWT به برنامه Spring Boot Adding JWT to Spring Boot App

• ایجاد کلاس Utility JwtTokenProvider Creating JwtTokenProvider Utility Class

• ایجاد JwtAuthenticationFilter Creating JwtAuthenticationFilter

• JWT را در Spring Security پیکربندی کنید Configure JWT in Spring Security

• Login REST API را به Return JWT Token تغییر دهید Change Login REST API to Return JWT Token

• استفاده از JWT Token در React App Using JWT Token in React App

• کد منبع این بخش Source Code of this Section

ویژگی دسترسی مبتنی بر نقش - Spring Boot Backend و React JS Frontend Role-Based Access Feature - Spring Boot Backend and React JS Frontend

• Login REST API را به Return Role همراه با JWT Token تغییر دهید Change Login REST API to Return Role along with JWT Token

• قابلیت دسترسی مبتنی بر نقش را در React App پیاده سازی کنید Implement Role-Based Access Feature in React App

• برنامه کامل مدیریت Todo را تست کنید Test Complete Todo Management Application

یادداشت تشکر و آموزش های بیشتر Thank you note and further learnings

• دوره های برتر و پرفروش من My Top and Bestseller Courses