آموزش با NextJS SpringBoot Tailwind به توسعه دهنده Fullstack تبدیل شوید

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

مقدمه، نصب و راه اندازی Introduction, Installation and Setup

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

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

• مروری بر Tailwind CSS و تفاوت آن با Bootstrap Overview Of Tailwind CSS and How it Differs from Bootstrap

• نصب و راه اندازی برای محیط توسعه Installing and Setup for Development Environment

استاد Tailwind CSS با مثال های Handson عملی Master Tailwind CSS with Practical Handson Examples

• مروری بر Tailwind CSS و تفاوت آن با Bootstrap Overview Of Tailwind CSS and How it Differs from Bootstrap

• راه اندازی Tailwind CSS به روش درست Setting Up Tailwind CSS the Right Way

• نحوه بررسی اسناد How to explore the documentation

• Project-1 Align Element در مرکز صفحه Project-1 Align Element at center of the page

• Project-2 Utility ابتدا با ایجاد یک کامپوننت کارت Project-2 Utility First by Creating a Card Component

• Project-3 Hover Focus and other states با ایجاد یک دکمه سفارشی Project-3 Hover Focus And Other states by creating a custom Button

• مفهوم طراحی پاسخگو در Tailwind Concept of Responsive Design in Tailwind

• عملی برای درک مفهوم طراحی پاسخگو برای دستگاه های مختلف Practicals to understand Responsive Design concept for different devices

• Project-4 Designing Card Responsive - Part-1 Project-4 Designing Responsive Card - Part-1

• Project-4 Designing Card Responsive - Part-2 Project-4 Designing Responsive Card - Part-2

• Project-4 Designing Card Responsive - Part-3 Project-4 Designing Responsive Card - Part-3

• استایل متغیر در Tailwind Variable Styling in Tailwind

• انتقال انیمیشن ها و ترجمه در Tailwind Animations Transitions and Translate in Tailwind

• طرح بندی ستون ردیف پاسخگو - قسمت 1 Responsive Row Column Layout - Part-1

• طرح بندی ستون ردیف پاسخگو - قسمت 2 Responsive Row Column Layout - Part-2

• نوار ناوبری پاسخگو - قسمت 1 Responsive Navbar - Part-1

• Navbar پاسخگو - قسمت 2 Responsive Navbar - Part-2

• Navbar پاسخگو - قسمت 3 Responsive Navbar - Part-3

• کامپوننت های رایگان Tailwind UI Free Tailwind UI Components

توسعه Fullstack با NextJS14 Tailwind CSS و MongoDB با Mongoose Fullstack Development with NextJS14 Tailwind CSS and MongoDB with Mongoose

• ایجاد برنامه بعدی جدید Creating new next app

• ساختار پوشه و عملکرد برنامه Next Folder structure and working of Next app

• نصب پایگاه داده MongoDB و ایجاد پایگاه داده Installing MongoDB database and creating database

• نصب وابستگی های npm Installing npm dependencies

• ایجاد کامپوننت NavBar Creating NavBar component

• حالت دادن به نوار پیمایش با tailwind css Styling the navigation bar with tailwind css

• جزء Item List را ایجاد کنید Create the Item List component

• سبک دادن به مؤلفه ItemList - Part-1 Styling the ItemList component - Part-1

• حالت دادن به دکمه Delete Item Styling the Delete Item button

• سبک دادن به مؤلفه ItemList - Part-2 Styling the ItemList component - Part-2

• صفحه افزودن آیتم جدید را ایجاد کنید Create Add New Item Page

• استایل دادن به صفحه افزودن آیتم Styling the Add Item page

• ایجاد صفحه پویا ویرایش آیتم Creating Edit Item dynamic page

• ایجاد و استایل دادن به مؤلفه Edit Item Creating and Styling the Edit Item component

• ایجاد ارتباط با mongodb Establishing connection with mongodb

• طرحواره مانگوس جدید برای مدل آیتم ایجاد کنید Create new mongoose schema for Item model

• POST API برای ایجاد آیتم جدید و ذخیره آن در پایگاه داده POST API to create new item and save it into database

• دریافت API برای واکشی همه موارد ایجاد شده تا کنون GET API to fetch all items created so far

• یک مورد با شناسه ارائه شده به عنوان پارامتر جستجوی url را حذف کنید DELETE an item with provided id as url search param

• به روز رسانی یک مورد با شناسه پویا در مسیر url PUT update an item with dynamic id passed in url path

• دریافت جزئیات یک مورد با شناسه منطبق GET details of one item with matching id

• با getAll Items API از Frontend تماس بگیرید Call getAll Items API from Frontend

• نمایش داده ها از API در UI Displaying the data from API on UI

• تست عملکرد لیست آیتم ها و تایید رندر سمت سرور برای SEO Testing the Item List functionality and Verifying Server Side Rendering for SEO

• افزودن متغیرهای حالت و ارسال کنترلر به جزء Add Item Adding state variables and submit handler to Add Item component

• ادغام Create Item API با frontend، مسیریابی به خانه در صورت موفقیت و آزمایش Integrating Create Item API with frontend, routing to home on success and test

• ادغام Delete Item با Backend و تست عملکرد Integrating Delete item with backend and testing the functionality

• دریافت شناسه مورد در صفحه ویرایش از طریق پارامترهای مسیر پویا Getting the Item ID inside the Edit Page via the dynamic route params

• دریافت جزئیات مورد از API و ارسال آن به Edit Item Component Getting Item Detail from API and passing it to Edit Item Component

• اتصال متغیرهای حالت به فرم Binding the state variables to the form

• فراخوانی Update Item API و تست عملکرد Calling Update Item API and test the functionality

در حال توسعه SpringBoot 3، Java 17، REST API مبتنی بر MySQL Developing SpringBoot 3, Java 17, MySQL based REST API's

• نصب جاوا و 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

توسعه Fullstack با NextJS14 Tailwind CSS و Springboot3 با MySQL DB Fullstack Development with NextJS14 Tailwind CSS and Springboot3 with MySQL DB

• خلاصه ای از NextJS Crud و API در حال توسعه Springboot Recap of NextJS Crud and futher Developing Springboot API

• خلاصه ای از آنچه تاکنون توسعه یافته است Recap of what has been developed so far

• حذف API و کد Mongoose از برنامه Next JS Deleting the API and Mongoose code from Next JS app

• تغییر کد NextJS برای اتصال به Springboot API برای دریافت همه موارد Modifying NextJS code to connect to Springboot API to get all Items

• در حال تغییر کد NextJS برای اتصال به Springboot API برای به‌روزرسانی آیتم Modifying NextJS code to connect to Springboot API for Update Item

• تغییر کد NextJS برای اتصال به Springboot API برای ایجاد آیتم جدید Modifying NextJS code to connect to Springboot API for Creating new Item

• تغییر کد NextJS برای اتصال به Springboot API برای حذف یک مورد Modifying NextJS code to connect to Springboot API for Deleting an Item

کد منبع Source code

• پایه کد Code base