پروژه Full Stack: Spring Boot، React، Redux

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

معرفی Introduction

• نسخه به روز شده با Spring Boot 3 به زودی (Q4 - 2024/Q1 - 2025) Updated version with Spring Boot 3 coming soon (Q4 - 2024 / Q1 - 2025)

• معرفی Introduction

• مهم: مرورگرهای این دوره IMPORTANT: BROWSERS FOR THIS COURSE

• قبل از خرید تماشا کنید: نسخه نمایشی برنامه (نمونه اولیه) WATCH BEFORE YOU BUY: App Demo (Prototype)

• قبل از خرید تماشا کنید: الزامات، IDE ها، پشتیبانی WATCH BEFORE YOU BUY: Requirements, IDEs, Support

• قبل از شروع مرور کنید - ذهنیت و دامنه دوره REVIEW BEFORE YOU START- Mindset and Course's scope

Backend بهار - عملیات پایه CRUD - پروژه Spring Backend - Basic CRUD Operations - Project

• ***مهم*** لطفا از JAVA 8 استفاده کنید ***IMPORTANT*** PLEASE USE JAVA 8

• ساختار پوشه و راه اندازی Github Folder Structure and Github setup

• مهم - بخوانید: درباره پایگاه داده H2 IMPORTANT - READ THROUGH: About H2 Database

• Project Object & Project Repository- branch1 Project Object & Project Repository- branch1

• خدمات پروژه و کنترل کننده پروژه | ایجاد اولین پروژه - شعبه2 Project Service & Project Controller | Create first project - branch2

• تنظیم اعتبار شی پروژه - branch3 Set up project object validation - branch3

• اعتبار سنجی شی پروژه part1 - branch4 Project Object Validation part1 - branch4

• اعتبار سنجی شی پروژه part2 - branch5 Project Object Validation part2 - branch5

• Refactor Project Controller ->branch6 Refactor Project Controller ->branch6

• استثناهای سفارشی برای شناسه های پروژه منحصر به فرد -> branch7 Custom Exceptions for Unique Project Identifiers -> branch7

• یافتن پروژه توسط شناسه - branch8 Find Project by Identifier - branch8

• یافتن همه پروژه ها -> branch9 Find All Projects -> branch9

• یک پروژه موجود را حذف کنید -> branch10 Delete an existing project -> branch10

• یک پروژه موجود را به روز کنید Update an existing project

React & Redux Front-end: Project CRUD Operations React & Redux Front-end: Project CRUD Operations

• مقدمه ای بر React و Redux Introduction to React and Redux

• ایجاد محیط توسعه برای React Development Set up development Environment for React Development

• مشکل بالقوه - ایجاد-واکنش-برنامه از ژانویه 2020 POTENTIAL ISSUE- create-react-app as of January 2020

• ایجاد و بررسی برنامه Boiler Plate react -> branch11 Create and review Boiler Plate react app -> branch11

• مولفه اول واکنش - شاخه12 first react component - branch12

• اجزای پروژه و هدر - شاخه13 Project and header components - branch13

• آوردن Bootstrap 4+ - branch14 Bringing Bootstrap 4+ - branch14

• داشبورد، نوار ناوبری، ProjectItem - branch15 ما را استایل کنید Style our Dashboard, Navbar, ProjectItem - branch15

• روتر واکنش، اولین مؤلفه عملکردی - شاخه16 React Router, first Functional component - branch16

• AddProject Component - فرم کنترل شده - شاخه 17 AddProject Component - controlled form - branch 17

• مهم: React + Redux Architecture and Support IMPORTANT: React + Redux Architecture and Support

• ایجاد فروشگاه Redux - branch18 Create Redux Store - branch18

• ایجاد پروژه از React - branch19 Create Project from React - branch19

• خطاهای اعتبارسنجی را از Redux - branch20 دریافت کنید Get validation errors from Redux - branch20

• خطاهای اعتبارسنجی سبک با نام کلاس - branch21 Style validation errors with classnames - branch21

• دریافت پروژه ها - فقط redux - branch22 Get Projects - redux only - branch22

• دریافت پروژه ها - مرحله نهایی - شاخه23 Get Projects - final step - branch23

• معماری مورد استفاده "پروژه به روز رسانی". "Update Project" use case architecture

• فرم و مسیر پروژه را به روز کنید Update Project form and route

• دریافت پروژه با شناسه، به‌روزرسانی قسمت اول استفاده - شناسه commit: b13741f Get Project by Id, Update use case part 1 - commit id: b13741f

• به روز رسانی اشیاء پروژه Persist - branch26 Persist Project Object Updates - branch26

• کنترل خطاها در UpdateProject.js - branch27 Handle Errors in UpdateProject.js - branch27

• *** رفع اشکال *** رفتار به روز رسانی عجیب ***BUG FIX*** Strange Update Behaviour

• معماری "حذف پروژه". "Delete Project" Architecture

• یک پروژه موجود را حذف کنید - branch29 Delete an existing project - branch29

• Refactor Delete Operation and Proxy Refactor Delete Operation and Proxy

اضافه کردن وظایف پروژه - Backend Add Project Tasks - Backend

• Backlog و ProjectTask Entities - branch31 Backlog and ProjectTask Entities - branch31

• روابط نهاد: پروژه و بک لاگ - شعبه32 Entity Relationships: Project and Backlog - branch32

• بک لاگ - رابطه ProjectTask - branch33 Backlog - ProjectTask relationship - branch33

• بحث طراحی پیرامون ایجاد یک وظیفه پروژه Design discussion around creating a Project Task

• تداوم وظیفه پروژه (رفع اشکال در انتظار: setPriority) - branch34 Persist Project Task (Bug fix pending: setPriority) - branch34

• ***رفع اشکال*** اولویت ProjectTask، projectIdentifier، PTSequence - branch35 ***BUG FIX*** ProjectTask priority, projectIdentifier, PTSequence - branch35

• دریافت بک لاگ پروژه (مسیر مبارک) - branch36 Get Project Backlog (happy path) - branch36

• ***پروژه را برای استفاده از MYSQL تنظیم کنید، دیگر H2 ندارید!*** ***SET UP THE PROJECT TO USE MYSQL, NO MORE H2!***

• Handle Project Not Found Exception/Project Tasks-branch37 Handle Project Not Found Exception / Project Tasks-branch37

• ProjectTask را توسط projectSequence (مسیر شاد) -branch38 پیدا کنید Find ProjectTask by projectSequence (happy path)-branch38

• ProjectTask را توسط projectSequence w/Validation - branch39 بیابید Find ProjectTask by projectSequence w/Validation - branch39

• به روز رسانی پروژه پروژه (مسیر مبارک) -branch40 Update project task (happy path)-branch40

• کار را با اعتبارسنجی به روز رسانی تمام کنید و حذف کنید - branch41 Finish up with update validation and delete - branch41

• ***رفع BUG*** عملیات حذف، بهبود بک لاگ/تکلیف پروژه - branch42 ***BUG FIX*** delete operation, improved backlog/project task rel - branch42

اضافه کردن وظایف پروژه - React/Redux Add Project Tasks - React / Redux

• مقدمه بخش، نمایشی از آنچه در حال پیاده سازی هستیم Intro to Section, Demo of what we are implementing

• ***رفع BUG*** خطای وارد کردن در کاهش دهنده Backlog - branch43 ***BUG FIX*** Import error in Backlog reducer - branch43

• انواع و کاهش دهنده ها برای وظایف پروژه - شاخه43 Types and Reducers for Project Tasks - branch43

• طرح های بخش و ساختار پوشه - شاخه44 Section designs and Folder Structure - branch44

• مسیرها به ProjectBoard و AddProjectTask - branch45 Routes to ProjectBoard and AddProjectTask - branch45

• اقدام AddProjectTask (: مسیر) AddProjectTask فرم کنترل شده قسمت 1 -branch46 AddProjectTask action ( :)path) AddProjectTask form controlled part 1 -branch46

• اقدام AddProjectTask (: مسیر) AddProjectTask فرم کنترل شده قسمت 2 -branch47 AddProjectTask action ( :)path) AddProjectTask form controlled part 2 -branch47

• عمل AddProjectTask را تمام کنید، خطاها را کنترل کنید part3 - branch48 Finish AddProjectTask action, handle errors part3 - branch48

• راه اندازی ProjectBoard، Backlog، اجزای ProjectTask - branch49 Set up ProjectBoard, Backlog, ProjectTask components - branch49

• بارگذاری ProjectTasks در ایالت - branch50 Load ProjectTasks to the state - branch50

• بارگذاری وظایف پروژه در UI مرحله 1 - branch51 Load Project Tasks to UI step 1 - branch51

• سازماندهی وظایف پروژه بر اساس وضعیت و اولویت - شاخه52 Organize Project Tasks by status and priority - branch52

• الگوریتم ProjectBoard - شاخه53 ProjectBoard Algorithm - branch53

• به روز رسانی وظیفه پروژه قسمت 1 - شاخه54 update Project task part 1 - branch54

• به روز رسانی وظیفه پروژه قسمت 2 - branch55 Update Project task part 2 - branch55

• به روز رسانی وظیفه پروژه قسمت 3- branch56 Update Project task part 3- branch56

• Delete Project Task - branch57 Delete Project Task - branch57

برنامه ما را ایمن کنید: Spring Security + JWT Secure our App: Spring Security + JWT

• معرفی بخش امنیت بهار Intro to Spring Security Section

• مهم: تازه به Spring Security؟ IMPORTANT: New to Spring Security?

• مهم: در JWT ها جدید هستید؟ IMPORTANT: New to JWTs?

• تنظیمات امنیتی اولیه - branch59 Initial Security Config - branch59

• ایجاد شی کاربر، اعتبارسنجی، مخزن، سرویس - branch60 Create User Object, Validation, Repository, Service - branch60

• ثبت نام کاربر قسمت 1 - شعبه61 User registration part 1 - branch61

• ثبت نام کاربر قسمت 2 - branch62 User registration part 2 - branch62

• ثبت نام کاربر قسمت 3 - branch63 User registration part 3 - branch63

• پیش کار ارائه دهنده JWT - شعبه64 JWT Provider pre-work - branch64

• توکن تولید شد!!! - شعبه 65 Token Generated!!! - branch65

• فیلتر JWT سفارشی برای استفاده از توکن های ما - branch66 Custom JWT filter to use our tokens - branch66

• یک: کاربر به بسیاری: پروژه ها - branch67 One: User to Many: Projects - branch67

• قفل کردن عملیات به کاربر خاص (خواندن و حذف) - branch68 Lock operations to specific User (Read and Delete) - branch68

• قفل کردن عملیات به کاربر خاص (به روز رسانی) - branch69 Lock operations to specific User (Update) - branch69

• ایجاد و خواندن عملیات ویژه کاربر برای وظایف پروژه - branch70 User specific Create and Read Ops for Project Tasks - branch70

• یافتن، به روز رسانی، حذف وظیفه پروژه با Security - branch71 Find, Update, Delete Project task with Security - branch71

برنامه React ما را ایمن کنید Secure our React App

• مقدمه ای بر ایمن سازی برنامه React، مؤلفه های امنیتی -branch72 Intro to Securing the React App, Security Components -branch72

• ثبت نام کاربر مسیر مبارک - شعبه73 User registration happy path - branch73

• ثبت نام کاربر با اعتبارسنجی- branch74 User registration with validation- branch74

• SecurityActions و SecurityReducer - branch75 SecurityActions and SecurityReducer - branch75

• فرم ورود - branch76 Login form - branch76

• Handle Login Logic - branch77 Handle Login logic - branch77

• دسته مسیریابی برای توکن منقضی شده - branch78 Handle routing for expired token - branch78

• هدر پویا بر اساس وضعیت امنیتی - branch79 Dynamic header based on security state - branch79

• مسیرهای عمومی را در هنگام ورود قفل کنید - branch80 Lock public routes when logged in - branch80

• SecuredRoutes - branch81 SecuredRoutes - branch81

• رفع اشکال Bug Fixes

به هروکو مستقر شوید Deploy to Heroku

• باید بخوانید: شرایط لازم برای این بخش MUST READ: REQUIREMENTS FOR THIS SECTION

• مرحله 1 - api بوت Spring را به Clear DB وصل کنید Step 1 - Connect Spring boot api to Clear DB

• برای مرحله 2 به این نیاز دارید YOU NEED THIS FOR STEP 2

• مرحله 2 - Back-end را در Heroku مستقر کنید Step 2 - Deploy the Back-end to Heroku

• مرحله 3 - با React build استقرار دهید Step 3 - Deploy with React build

• POLYFILL CDN برای مرحله 4 POLYFILL CDN FOR STEP 4

• مرحله 4 - رفع مشکل برنامه برای کار با Internet Explorer 11 Step 4 - Fix app to work with Internet explorer 11