آموزش توسعه Fullstack با Angular17 SpringBoot3 Bootstrap5

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

معرفی و نصب Introduction & Installation

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

• درباره مربی شما About your Instructor

• مقدمه ای بر فریم ورک زاویه ای Introduction to Angular Framework

• الزامات برای شروع Requirements for getting started

• نصب Nodejs و VS Code Editor Installing Nodejs and VS Code Editor

توسعه Backend REST API با جاوا 17 و SpringBoot 3 Developing Backend REST API with Java 17 and SpringBoot 3

• نصب جاوا و IDE Installing Java and IDE

• نصب ابزار Postman Tool Installing Postman Tool

• نصب سرور پایگاه داده MySQL Installing MySQL Database Server

• ایجاد پروژه SpringBoot با وابستگی های مورد نیاز Creating SpringBoot project with required dependencies

• وارد کردن پروژه به IDE و تنظیم JDK Importing Project to IDE and Setting JDK

• افزودن پیکربندی JPA Database H2 Spring Data Adding H2 Database Spring Data JPA configuration

• ایجاد کلاس JPA Entity با فیلدهای مختلف Creating the JPA Entity class with different fields

• ایجاد کلاس DTO برای لایه ارائه Creating the DTO class for presentation layer

• معماری لایه ای و بسته های مختلف Layered architecture and various packages

• ایجاد رابط مخزن Creating the Repository Interface

• ایجاد کلاس کنترلر Creating Controller class

• در حال توسعه POST API Endpoint Developing POST API Endpoint

• در حال توسعه نقطه پایانی GET All API Developing the GET All API endpoint

• در حال توسعه GET Detail API Endpoint Developing GET Detail API Endpoint

• در حال توسعه UPDATE API Endpoint Developing UPDATE API Endpoint

• در حال توسعه DELETE API و PathVariable در مقابل RequestParam Developing DELETE API and PathVariable VS RequestParam

• پس از حذف، 204 را به عنوان کد وضعیت برگردانید Return 204 as status code after deletion

• در حال توسعه PATCH API Endpoint Developing PATCH API Endpoint

• اعلان روش های چکیده لایه سرویس Declaring the Service Layer Abstract Methods

• افزودن متدهای Service Impl و ادغام با کنترلر Adding Service Impl methods and Integration with Controller

• ذخیره داده ها در پایگاه داده با استفاده از مخزن Saving the Data into the Database using Repository

• دریافت تمام داده ها از پایگاه داده با استفاده از مخزن Getting All Data From the Database using Repository

• دریافت جزئیات از پایگاه داده با استفاده از مخزن Get Detail from Database using Repository

• به روز رسانی کامل در پایگاه داده با استفاده از مخزن Full Update in Database using Repository

• به روز رسانی جزئی در پایگاه داده با استفاده از مخزن Partial Update in Database using Repository

• با استفاده از Repository داده ها را از پایگاه داده حذف کنید Delete data from Database using Repository

• عملکرد جستجو را از پایان به انتها اجرا کنید Implement Search functionality End to End

• با ابزار POSTMAN، CREATE و GET ALL API را آزمایش کنید Test CREATE and GET ALL API with POSTMAN Tool

• تنظیم متغیر Postman و تست GET Detail API Setting Postman Variable and Testing GET Detail API

• تست API جستجو Testing Search API

• آزمایش به‌روزرسانی کامل، به‌روزرسانی جزئی و حذف API Testing Full Update, Partial Update and Delete API

• بهبود کد برای جلوگیری از بازگشت پاسخ پوچ Code Improvement to avoid returning null response

• ایجاد مبدل برای قابل استفاده مجدد کد Creating Converter to make code reusable

• تست عملکرد کامل Testing the complete functionality

• ایجاد پایگاه داده در سرور MySQL DB Create Database on MySQL DB Server

• نمایه ها در Springboot، تنظیمات MySQL DB Profile Profiles in Springboot, Setup MySQL DB Profile

• مفهوم نمایه بهار Concept of Spring Profile

• تست همه API ها با پایگاه داده MySQL Testing All APIs with MySQL Database

• فعال کردن CORS Enabling CORS

توسعه Frontend با Angular 17 و ادغام با Springboot REST API Developing Frontend with Angular 17 and Integrating with Springboot REST API

• ایجاد اپلیکیشن زاویه ای جدید Generating new angular app

• باز کردن پروژه در ویرایشگر VS Code Opening the project in VS Code editor

• نصب بوت استرپ sweetalert2 و axios Installing bootstrap sweetalert2 and axios

• نحوه کار Angular و فایل ها و پوشه های مختلف How Angular works and various files and folders

• راه اندازی بوت استرپ و استفاده از آن Setting up Bootstrap and using it

• فایل های Environment را ایجاد کنید و تنظیمات مختلف را اضافه کنید Generate Environment files and Add different configurations

• فایل main.ts را با تنظیمات محیط و axios به روز کنید Update main.ts file with environment and axios configurations

• تمام اجزای مورد نیاز را با دستورات ng ایجاد کنید Create all the required components with ng commands

• چرا از کلاس Service و Generate Service استفاده کنیم؟ Why use Service and Generate Service class

• اینترفیس در تایپ اسکریپت و ایجاد رابط جدید چیست What is Interface in typescript and generating new interface

• افزودن فیلدها به رابط مبتنی بر REST API Adding fields to interface based on REST API

• افزودن توابع برای همه موارد و جزئیات مورد در کلاس Service Adding functions for all items and item details in Service class

• افزودن توابع برای ایجاد آیتم، به روز رسانی مورد، حذف آیتم در کلاس Service Adding functions for create item, update item, delete item in Service class

• ماژول جدید ایجاد کنید Create new module

• پیکربندی را به ماژول آیتم تازه ایجاد شده اضافه کنید Add configuration to the newly created Item Module

• اضافه کردن مسیریابی برای ماژول و اجزای مورد Adding Routing for the Item module and components

• ثبت ماژول سفارشی در ماژول برنامه Registering Custom Module to App module

• به روز رسانی مؤلفه برنامه و آزمایش مسیریابی Updating App Component and Testing the Routing

• فراخوانی Get All Items API from Overview Items component typescript file Calling Get All Items API from Overview Items component typescript file

• کار از یک ظاهر طراحی شده مؤلفه بررسی اجمالی موارد Working of styling the Items Overview component

• حلقه کردن آرایه آیتم ها و آزمایش عملکرد Looping the items array an testing the functionality

• پیاده سازی قابلیت Delete Item Implementing the Delete Item functionality

• کار بر روی Create Item Typescript برای برقراری تماس API تغییر می کند Working on Create Item Typescript changes to make API call

• کار بر روی نشانه گذاری و استایل کردن قابلیت Create Item Working on the Markup and Styling of Create Item functionality

• آزمایش عملکرد Create Item Testing the Create Item functionality

• کار بر روی فایل تایپ اسکریپ ویرایش مورد Working on Edit Item typescript file

• اشکال زدایی و رفع خطای زمان اجرا Debugging and fixing the runtime error

• اجرای تابع Update Item کامپوننت Implementing the Update Item function the component

• کار بر روی Html ویرایش آیتم و اشکال زدایی و آزمایش Working on Html of edit item and debugging and testing

• کار بر روی جزئیات آیتم عملکرد تایپ اسکریپت تغییر می کند Working on Item Details functionality typescript changes

• نمایش داده های جزئیات مورد در صفحه Showing Item Detail data on the page

کد منبع Source code

• پایه کد Code base