[جدید] جاوا Full Stack: React و Spring Boot 3 [Expense App]

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

مقدمه Introduction

• بررسی پروژه Project Walkthrough

• سر به بالا Heads up

محیط توسعه را تنظیم کنید Setup the Development Environment

• نصب نرم افزارهای مورد نیاز [بخش 01] Install Required Softwares [Part 01]

• نصب نرم افزارهای مورد نیاز [بخش 02] Install Required Softwares [Part 02]

• پلاگین های مورد نیاز را در کد ویژوال استودیو نصب کنید Install Required Plugins in Visual Studio Code

مبانی تایپ اسکریپت Typescript Fundamentals

• تایپ اسکریپ را نصب کنید Install typescript

• Nodemon و ts-node را نصب کنید Install nodemon and ts-node

• تایپ اسکریپت چیست؟ What is typescript?

• متغیرها Variables

• عدد و نوع رشته Number and String type

• نوع بولی Boolean type

• باطل و هر نوع Void and Any type

• نوع هرگز و ناشناخته Never and Unknown type

• نوع آرایه Array type

• نوع تاپلی Tuple type

• نوع Enum Enum type

• اضافه بار عملکرد Function overloading

• کلاس ها، اشیاء و سازندگان Classes, Objects and Constructors

• ارث Inheritance

• غلبه بر روش Method overriding

• کلاس و متدهای انتزاعی Abstract class and methods

• رابط ها Interfaces

• روش ها و خواص استاتیک Static methods and properties

• ماژول های واردات و صادرات Import and Export modules

• نوع اتحادیه Union type

React Fundamentals React Fundamentals

• React چیست و چرا React؟ What is React and Why React?

• JSX چیست؟ What is JSX?

• با استفاده از CDN با React شروع کنید Get Started with React Using CDN

• عناصر JSX را رندر کنید Render JSX elements

• عناصر JSX و JSX بیشتر More JSX and JSX elements

• اجزا چیست؟ What are components?

• پروژه vite react ایجاد کنید Create vite react project

• ویدیوهای بیشتر به زودی :) More videos coming soon :)

پروژه را برای Frontend و Backend تنظیم کنید Setup the Project for Frontend and Backend

• پروژه Spring Boot را ایجاد کنید Create Spring Boot Project

• ساختار پروژه Spring Boot را درک کنید Understand the Spring Boot Project Structure

• پروژه React Starter را ایجاد کنید Create React Starter Project

• ساختار پروژه React را درک کنید Understand the React Project Structure

• مخزن Github را ایجاد کنید Create Github Repository

• دانش خود را آزمایش کنید Test your knowledge

• Challenge Time Challenge Tiime

ویژگی 01: ایجاد API برای واکشی همه هزینه ها (Backend) Feature 01: Create API to Fetch All Expenses (Backend)

• یک شعبه جدید در Github ایجاد کنید Create a New Branch in Github

• مراحل توسعه بخش 1 Development Steps Part 1

• مراحل توسعه بخش 2 Development Steps Part 2

• مراحل توسعه بخش 3 Development Steps Part 3

• مراحل توسعه بخش 4 Development Steps Part 4

• نقطه پایانی GET API را ایجاد کنید Create GET API endpoint

• وابستگی Lombok را اضافه کنید Add the Lombok Dependency

• اشیاء درخواست و پاسخ ایجاد کنید Create Request and Response Objects

• شی DTO ایجاد کنید Create DTO object

• وابستگی MySQL و JPA را اضافه کنید Add MySQL and JPA dependency

• منبع داده را پیکربندی کنید Configure the Datasource

• نهاد JPA ایجاد کنید Create JPA Entity

• مخزن JPA ایجاد کنید Create JPA Repository

• پیکربندی مدل Mapper Configure Model Mapper

• ایجاد سرویس و پیاده سازی آن Create Service and its Implementation

• کنترلر را به روز کنید Update the Controller

• نقطه پایانی API را تست کنید Test the API endpoint

• Javadocs را اضافه کنید Add Javadocs

• Loggers را به API اضافه کنید Add Loggers to the API

• تغییرات را متعهد و فشار دهید Commit and Push the Changes

• رفع خطای Cross Origin Fixing the Cross Origin Error

• آخرین تغییرات را انجام دهید Commit the Latest Changes

• زمان چالش Challenge Time

ویژگی 01: خواندن مخارج از پایگاه داده (فرونتند) Feature 01: Read Expenses from Database (Frontend)

• یک شعبه جدید ایجاد کنید Create a New Branch

• مراحل توسعه Development Steps

• یک مؤلفه جدید داشبورد ایجاد کنید Create a New Dashboard Component

• نمایش هزینه ها در جدول HTML Display the Expenses in HTML Table

• یک رابط برای هزینه ایجاد کنید Create an Interface for Expense

• از رابط هزینه برای تعریف آرایه هزینه ها استفاده کنید Use Expense Interface to Define the Expenses Array

• یک لیست هزینه اجزای قابل استفاده مجدد ایجاد کنید Create a Reusable Component ExpenseList

• پس لیست هزینه ها به عنوان یک پشتیبانی Pass Expenses List as a Prop

• پیکربندی کتابخانه Axios Configure Axios Library

• با Backend API تماس بگیرید Call the Backend API

• React State را به روز کنید Update React State

• نمایش لودر و پیام های خطا Show Loader and Error Messages

• یک سرویس ایجاد کنید Create a Service

• یک هوک سفارشی ایجاد کنید Create a Custom Hook

• تغییرات را متعهد و فشار دهید Commit and Push the Changes

• زمان چالش Challenge Time

ویژگی 02: یکپارچه سازی کتابخانه بوت استرپ (فرانتند) Feature 02: Integrate Bootstrap Library (Frontend)

• مراحل توسعه Development Steps

• بوت استرپ را نصب کنید Install Bootstrap

• سبک پایه را اضافه کنید Add the Basic Style

• کامپوننت ExpenseList را دوباره طراحی کنید Redesign the ExpenseList Component

• نمایش هزینه ها در طراحی جدید Display the Expenses in New Design

• یک کامپوننت Navbar ایجاد کنید Create a Navbar Component

• اعمال سبک پایه برای کامپوننت نوار نوار Apply Basic Style to Navbar Component

• App Design for Mobile View Apply Design for Mobile View

• کتابخانه React Icons را نصب کنید Install React Icons Library

• لوگوی برنامه را اضافه کنید Add the Application Logo

• تغییرات را متعهد و فشار دهید Commit and Push the Changes

• زمان چالش Challenge Time

ویژگی 03: پیاده سازی مسیریابی در React (Frontend) Feature 03: Implement Routing in React (Frontend)

• یک شعبه جدید ایجاد کنید Create a New Branch

• مراحل توسعه Development Steps

• React Router Dom Library را نصب کنید Install React Router Dom Library

• ایجاد اجزای کاربردی برای صفحات مختلف Create Functional Components for Different Pages

• مسیر را برای صفحات مختلف پیکربندی کنید Configure Route for Different Pages

• از NavLink برای پیمایش صفحات مختلف استفاده کنید Use NavLink to Navigate Different Pages

• رفع خطاها Fixing the Errors

• بررسی و انجام تغییرات Review and Commit the Changes

ویژگی 04: نمایش وضعیت داشبورد (جلو) Feature 04: Displaying the Dashboard Status (Frontend)

• یک شعبه جدید ایجاد کنید Create a New Branch

• مراحل توسعه Development Steps

• کامپوننت وضعیت داشبورد جدید ایجاد کنید Create New DashboardStatus Component

• محتوای پایه برای وضعیت داشبورد ایجاد کنید Create Basic Content for Dashboard Status

• برای قالب بندی تاریخ، Date Util را ایجاد کنید Create Date Util to Format Date

• برای قالب‌بندی ارز، ارز را ایجاد کنید Create Currency Util to Format Currency

• استفاده از کلاس های Util Using the Util Classes

• تاریخ را در جزء ExpensesList قالب بندی کنید Format the Date in ExpensesList Component

• مجموع هزینه ها را محاسبه کنید Calculate the Total Expenses Amount

• بررسی و انجام تغییرات Review and Commit the Changes

ویژگی 05: ایجاد API برای واکشی یک هزینه (Backend) Feature 05: Create API to Fetch Single Expense (Backend)

• شعبه جدید ایجاد کنید Create New Branch

• مراحل توسعه Development Steps

• نقطه پایانی API جدید ایجاد کنید Create New API endpoint

• روش JPA Finder را ایجاد کنید Create JPA Finder Method

• ایجاد روش سرویس Create Service Method

• با سرویس متد تماس بگیرید Call the Service Method

• نقطه پایانی API را تست کنید Test the API endpoint

• استثنا را مدیریت کنید Handle the Exception

• یک شیء خطا ایجاد کنید Create an Error Object

• یک استثنای سفارشی ایجاد کنید Create a Custom Exception

• نقطه پایانی API را تست کنید Test the API Endpoint

• اسناد و گزارش های جاوا را اضافه کنید Add Java Docs and Logs

• تغییرات را بررسی و فشار دهید Review and Push the Changes

ویژگی 05: نمایش جزئیات هزینه ها (جلو) Feature 05: Show the Expense Details (Frontend)

• شعبه جدید ایجاد کنید Create New Branch

• مراحل توسعه Development Steps

• هزینه ها را قابل کلیک کنید Make the Expenses Clickable

• جدول پایه HTML ایجاد کنید Create Basic HTML Table

• ایجاد دکمه های اکشن Create Action Buttons

• ایجاد روش سرویس Create Service Method

• روش خدمات تماس Call Service Method

• ایجاد ایالات و به روز رسانی Create States and Update

• جدول HTML را به روز کنید Update the HTML Table

• خطا را مدیریت کنید Handle the Error

• ایجاد هوک سفارشی Create Custom Hook

• سناریوهای موردی Edge را تست کنید Test the Edge Case Scenarios

• بررسی و انجام تغییرات Review and Commit the Changes

ویژگی 06: ایجاد API برای حذف هزینه (Backend) Feature 06: Create API to Delete the Expense (Backend)

• شعبه جدید ایجاد کنید Create New Branch

• مراحل توسعه Development Steps

• نقطه پایانی API ایجاد کنید Create API endpoint

• ایجاد روش سرویس Create Service Method

• با سرویس متد تماس بگیرید Call the Service Method

• کد را اصلاح کنید Refactor the Code

• تغییرات را بررسی و فشار دهید Review and Push the Changes

ویژگی 06: اجازه به کاربر نهایی برای حذف هزینه (فرونتند) Feature 06: Allow End User to Delete Expense (Frontend)

• شعبه جدید ایجاد کنید Create New Branch

• مراحل توسعه Development Steps

• ایجاد مؤلفه قابل استفاده مجدد برای تأیید گفتگو Create Reusable Component for Confirm Dialog

• Confirm Dialog را تست کنید Test the Confirm Dialog

• رویدادهای کلیک را اضافه کنید Add the Click Events

• ایجاد روش سرویس Create Service Method

• با سرویس متد تماس بگیرید Call the Service Method

• ناوبری را اضافه کنید Add the Navigation

• سناریوهای شکست را آزمایش کنید Test the Failure Scenarios

• تغییرات را بررسی و فشار دهید Review and Push the Changes

ویژگی 07: ایجاد API برای ذخیره جزئیات هزینه (Backend) Feature 07: Create API to Save the Expense Details (Backend)

• شعبه جدید ایجاد کنید Create New Branch

• مراحل توسعه Development Steps

• نقطه پایانی API جدید ایجاد کنید Create New API endpoint

• افزودن وابستگی اعتبارسنجی Hibernate Add Hibernate Validator Dependency

• تفاوت بین @NotNull، @NotEmpty و @NotBlank Annotation Difference between @NotNull, @NotEmpty and @NotBlank Annotation

• اعتبارسنجی های بیشتر اضافه کنید Add More Validations

• نمایش پیام‌های اعتبارسنجی در پاسخ Show Validation Messages in Response

• جزئیات هزینه را در پایگاه داده ذخیره کنید Save the Expense Details into Database

• API را تست کنید Test the API

• اسناد و گزارش های جاوا را اضافه کنید Add Java docs and Logs

• تغییرات را بررسی و فشار دهید Review and Push the Changes

ویژگی 07: به کاربر اجازه می دهد تا جزئیات هزینه را ذخیره کند (Frontend) Feature 07: Allow User to Save Expense Details (Frontend)

• شعبه جدید ایجاد کنید Create New Branch

• مراحل توسعه Development Steps

• جعبه متنی را برای نام هزینه ایجاد کنید Create Textbox for Expense Name

• ایجاد فرم کامل Create Complete Form

• پیام های خطای اعتبارسنجی را اضافه کنید Add Validation Error Messages

• Formik را نصب کنید و از آن استفاده کنید Install Formik and Use it

• Yup Library را نصب کنید Install Yup Library

• اعتبارسنجی ها را با استفاده از Yup اضافه کنید Add Validations Using Yup

• ایجاد کرکره قابل استفاده مجدد Create Reusable Dropdown

• دسته بندی ها را از ثابت ها بخوانید Read Categories from Constants

• کامپوننت قابل استفاده مجدد را تست کنید Test the Reusable Component

• ایجاد روش سرویس Create Service Method

• با سرویس متد تماس بگیرید Call the Service Method

• توسعه را آزمایش کنید Test the Development

• بررسی و انجام تغییرات Review and Commit the Changes

ویژگی 08: ایجاد API برای به روز رسانی جزئیات هزینه (Backend) Feature 08: Create API to Update the Expense Details (Backend)

• شعبه جدید ایجاد کنید Create New Branch

• مراحل توسعه Development Steps

• نقطه پایانی API جدید ایجاد کنید Create New API endpoint

• ایجاد روش سرویس Create Service Method

• روش خدمات تماس Call Service Method

• توسعه را آزمایش کنید Test the Development

• بررسی و انجام تغییرات Review and Commit the Changes

ویژگی 08: به کاربر نهایی اجازه می دهد تا جزئیات هزینه را به روز کند (Frontend) Feature 08: Allow End User to Update the Expense Details (Frontend)

• شعبه جدید ایجاد کنید Create New Branch

• مراحل توسعه Development Steps

• مسیر جدیدی برای ویرایش هزینه ایجاد کنید Create New Route to Edit Expense

• هزینه های موجود را دریافت کنید Get the Existing Expense

• نمایش مقادیر هزینه به صورت Display the Expense Values in Form

• روش سرویس را به روز کنید Update the Service Method

• توسعه را آزمایش کنید Test the Development

• بررسی و انجام تغییرات Review and Commit the Changes

• API ها را در Postman سازماندهی کنید Organise the APIs in Postman

استراحت کنید و از آن لذت ببرید Take Break and Have Fun

• API ها را در Postman سازماندهی کنید Organize APIs in Postman

ویژگی 09: ایجاد API برای ایجاد حساب جدید (Backend) Feature 09: Create API to Create New Account (Backend)

• شعبه جدید ایجاد کنید Create New Branch

• مراحل توسعه 01 Development Steps 01

• مراحل توسعه 02 Development Steps 02

• نقطه پایانی API جدید ایجاد کنید Create New API Endpoint

• API را تست کنید Test the API

• ایجاد IO Object برای نمایه Create IO Object for Profile

• ایجاد IO Object برای پاسخ پروفایل Create IO Object for Profile Response

• Hibernate Validators را اضافه کنید Add Hibernate Validators

• اعتبار سنجی را تست کنید Test the Validation

• شی DTO ایجاد کنید Create DTO Object

• نهاد JPA ایجاد کنید Create JPA Entity

• مخزن JPA ایجاد کنید Create JPA Repository

• ایجاد سرویس پروفایل Create Profile Service

• فراخوانی روش سرویس و تست API Call Service Method and Test API

• Javadocs را اضافه کنید Add Javadocs

• بررسی و انجام تغییرات Review and Commit the Changes

ویژگی 09: پیاده سازی جریان ثبت نام (جلو) Feature 09: Implement Register Flow (Frontend)

• شعبه جدید ایجاد کنید Create New Branch

• مراحل توسعه Development Steps

• رندر HTML Textbox Render HTML Textbox

• تکمیل فرم ثبت نام Complete the Register Form

• ایجاد طرحواره اعتبار سنجی Create Validation Schema

• ایجاد رابط برای نمایه Create Interface For Profile

• از useFormik Hook استفاده کنید Use useFormik Hook

• پیام‌های اعتبارسنجی Schema را بخوانید Read the Validation Messages from Schema

• ایجاد روش سرویس Create Service Method

• با روش سرویس تماس بگیرید و جریان را آزمایش کنید Call Service Method and Test the Flow

• قلاب سفارشی جدید ایجاد کنید Create New Custom Hook

• بررسی و انجام تغییرات Review and Commit the Changes

ویژگی 10: ایجاد API برای احراز هویت/ورود به کاربر (Backend) Feature 10: Create API to Authenticate/Login User (Backend)

• شعبه جدید ایجاد کنید Create New Branch

• مراحل توسعه 01 Development Steps 01

• مراحل توسعه 02 Development Steps 02

• مراحل توسعه 03 Development Steps 03

• Cors را به صورت جهانی پیکربندی کنید Configure Cors Globally

• افزودن وابستگی امنیتی بهار Add Spring Security Dependency

• API ها را تست کنید Test the APIs

• امنیت Spring را پیکربندی کنید Configure Spring Security

• خدمات سفارشی جزئیات کاربر را ایجاد کنید Create Custom User Details Service

• Spring Beans را پیکربندی کنید Configure Spring Beans

• رمز عبور را رمزگذاری کنید Encrypt the Password

• درخواست احراز هویت را ایجاد کنید Create Auth Request

• پاسخ تأیید را ایجاد کنید Create Auth Response

• ایجاد نقطه پایانی Login API Create Login API endpoint

• API را تست کنید Test the API

• وابستگی های لازم را اضافه کنید Add Necessary Dependencies

• ایجاد روش Util Create Util Method

• Login API را تست کنید Test the Login API

• ایجاد فیلتر سفارشی Create Custom Filter

• ایجاد روش های کمکی Create Helper Methods

• روش های کمکی بیشتری ایجاد کنید Create More Helper Methods

• نگهدارنده زمینه امنیتی را تنظیم کنید Set the Security Context Holder

• ثبت فیلتر سفارشی Register Custom Filter

• جریان ورود کامل را تست کنید Test the Complete Login Flow

• بررسی و انجام تغییرات Review and Commit the Changes

• سناریوهای موردی Edge را تست کنید Test the Edge Case Scenarios

• موارد استثنا برای اعتبارنامه های بد را مدیریت کنید Handle the Exceptions for Bad Credentials

• ایجاد استثنای سفارشی جدید Create New Custom Exception

• استثناها را تست کنید Test the Exceptions

• بررسی و انجام تغییرات Review and Commit the Changes

ویژگی 10: اجازه ورود به کاربر Feature 10: Allow User to Login

• شعبه جدید ایجاد کنید Create New Branch

• مراحل توسعه [بخش اول] Development Steps [Part 1]

• ایجاد فرم ورود Create Login Form

• افزودن اعتبارسنجی Add Validations

• ایجاد رابط Create Interface

• ایجاد روش سرویس Create Service Method

• ایجاد هوک ورود سفارشی Create Custom Login Hook

• توکن را در Local Storage ذخیره کنید Store the Token in Local Storage

• سناریوهای شکست را آزمایش کنید Test the Failure Scenarios

• مراحل توسعه [بخش دوم] Development Steps [Part 2]

• Axios Interceptors را ایجاد کنید Create Axios Interceptors

• مراحل توسعه [بخش 3] Development Steps [Part 3]

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

• ارائه دهنده زمینه سفارشی ایجاد کنید Create Custom Context Provider

• انتقال وضعیت جهانی به کودکان Pass Global State to Children

• شی کاربر را از Local Storage دریافت کنید Get the User Object from Local Storage

• قلاب سفارشی را برای زمینه تأیید ایجاد کنید Create Custom Hook for Auth Context

• مراحل توسعه [بخش 4] Development Steps [Part 4]

• ایجاد دکمه خروج Create Logout Button

• ایالت را به روز کنید Update the State

• از مسیرها محافظت کنید Protect the Routes

• بررسی و انجام تغییرات Review and Commit the Changes

ویژگی 11: ایجاد Signout API (Backend) Feature 11: Create Signout API (Backend)

• شعبه جدید ایجاد کنید Create New Branch

• مراحل توسعه Development Steps

• ایجاد سرویس Create Service

• ایجاد Signout API Create Signout API

• Logout API را تست کنید Test the Logout API

• بررسی و انجام تغییرات Review and Commit the Changes

ویژگی 11: به کاربر اجازه خروج از سیستم را می دهد (Frontend) Feature 11: Allow the User to Logout (Frontend)

• شعبه جدید ایجاد کنید Create New Branch

• مراحل توسعه Development Steps

• ایجاد روش سرویس Create Service Method

• ایجاد قلاب سفارشی برای خروج Create Custom Hook for Signout

• پیاده سازی را آزمایش کنید Test the Implmentation

• بررسی و انجام تغییرات Review and Commit the Changes

از برنامه نویسی فاصله بگیرید و گاهی از آن لذت ببرید Take Break From Coding and Enjoy Sometime

• ویژگی های پیشرفته پستچی - 01 Postman Advance Features - 01

• ویژگی های پیشرفته پستچی - 02 Postman Advance Features - 02

ویژگی 12: راه اندازی نقشه برداری Bewteen User and Expense (Backend) Feature 12: Setup Mapping Bewteen User and Expense (Backend)

• شعبه جدید ایجاد کنید Create New Branch

• مراحل توسعه Development Steps

• به روز رسانی نهاد JPA Update JPA Entity

• ایجاد روش سرویس Create Service Method

• با سرویس متد تماس بگیرید Call the Service Method

• API Read Expenses را به روز کنید Update the Read Expenses API

• همه API ها را به روز کنید Update All the APIs

• همه API ها را تست کنید Test All the APIs

• بررسی و انجام تغییرات Review and Commit the Changes

• تست از UI Test From UI

به روز رسانی های متفرقه Miscellaneous Updates

• شعبه جدید ایجاد کنید Create New Branch

• نشانی ایمیل کاربر وارد شده را نمایش دهید Display the Logged In User Email Address

• اضافه کردن دکمه تنظیم مجدد به همه فرم ها Add Reset Button To All the Forms

• قانون اعتبارسنجی جدید را برای تاریخ هزینه اضافه کنید Add New Validation Rule For Expense Date

• اضافه کردن تصویر پس زمینه به صفحه ورود و ثبت نام Add Background Image to Login and Register Page

• مقدار هزینه را به عنوان رشته بنویسید Make Expense Amount Type as String

• بررسی و انجام تغییرات Review and Commit the Changes