آموزش با Node و Java Backend در مراحل آسان واکنش نشان دهید

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

معرفی Introduction

• معرفی دوره و مدرس Course and Instructor Introduction

• چگونه از این دوره به بهترین شکل ممکن استفاده کنیم How to make the best of this course

• پروژه های انجام شده را دانلود کنید Download the Completed Projects

• یادداشت هایی از سخنرانی های تئوری Notes from Theory Lectures

• اپلیکیشن های تک صفحه ای چیست؟ What are Single Page Applications

• سه مشکل با SPA ها Three Problems with SPAs

• چه و چرا واکنش نشان دهیم؟ What and Why React?

• JSX JSX

در عمل واکنش نشان دهید React in Action

• قالب HTML را ایجاد کنید Create the HTML Template

• رمزگذاری بابل Babel Encoding

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

• عنصر ظرف را تغییر دهید Change the container element

• اعمال سبک ها Apply Styles

• در عمل واکنش نشان دهید React in Action

• در عمل واکنش نشان دهید React in action

اجزاء Components

• معرفی Introduction

• یک React Component ایجاد کنید Create a React Component

• با استفاده از React Component Using the React Component

• استفاده از Properties یا Attributes Using Properties or Attributes

• عناصر کودک Child Elements

• به روز رسانی - ایجاد اجزای عملکردی UPDATE - Creating Functional Components

• اجزاء Components

اجزای پیچیده Complex Components

• نمایش جزئیات مشتری Display Customer Details

• نمایش جزئیات آدرس Display Address Details

• خلاصه مولفه CustomerDetails CustomerDetails Component Summary

• یک مؤلفه ورود ایجاد کنید Create a Login Component

• ایجاد لیست های نامرتب Creating Unordered Lists

• از Array و For Loop استفاده کنید Use Array and For Loop

• از روش نقشه استفاده کنید Use the map method

• جدول ایستا ایجاد کنید Create static Table

• ایجاد جدول به صورت پویا Create Table Dynamically

• یک جزء RowCreator Child ایجاد کنید Create a RowCreator Child Component

• اجزای پیچیده Complex Components

• اجزای پیچیده Complex Components

• اجزاء Components

مناسبت ها Events

• رویداد ورود به سیستم را مدیریت کنید Handle Login Event

• Reacts SyntheticEvent و خواص آن Reacts SyntheticEvent and its Properties

• این مرجع شی this object reference

• مناسبت ها Events

• مناسبت ها Events

حالت State

• حالت اولیه Initialize State

• دولت در عمل State in action

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

• حالت را به کامپوننت ListStudent اضافه کنید Add state to the ListStudent Component

• فیلتر و روش کنترل کننده را اضافه کنید Add the filter and the handler method

• کنترل کننده را پیاده سازی کنید Implement the handler

• شی را شبیه سازی کنید Clone the Object

• حالت State

• حالت State

استایل و موارد بیشتر در مورد JSX Styling and more about JSX

• کامپوننت TEXT را ایجاد کنید Create the TEXT component

• استایل کلاسیک را اعمال کنید Apply Classic Styling

• واکنش به روش استایل React way of styling

• سفارشی کردن سبک ها Customize Styles

• نکته 1 JSX - فقط یک عنصر ریشه JSX Tip 1 - Only one root element

• نکته 2 JSX - استایل های درون خطی مجاز نیستند JSX Tip 2 - Inline Styles are not allowed

• نکته 3 JSX - نظرات JSX Tip 3 - Comments

• JSX - نام اجزا و قابلیت استفاده مجدد JSX - Component Names and Reusability

• استایل و موارد بیشتر در مورد JSX Styling and more about JSX

• طراحی ظاهر Styling

راه اندازی نرم افزار Software Setup

• Node را نصب کنید Install Node

• نخ را نصب کنید Install Yarn

• کد ویژوال استودیو را نصب کنید Install Visual Studio Code

• میز کار MySql و MySql را نصب کنید Install MySql and MySql workbench

• میز کار MySql را راه اندازی کنید و یک پایگاه داده ایجاد کنید Launch MySql workbench and create a database

• فقط ویندوز - Mysql را نصب کنید Windows Only -Install Mysql

• فقط ویندوز - Mysql Workbench را نصب کنید Windows Only - Install Mysql Workbench

ایجاد یک پروژه React Creating a React Project

• CREATE-REACT-APP CLI را نصب کنید Install CREATE-REACT-APP CLI

• به روز رسانی - استفاده از اجزای عملکردی UPDATE - Using Functional Components

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

• ساختار پروژه Project Structure

• پشت صحنه Behind the scenes

• سایر دستورات Other Commands

AJAX با استفاده از axios تماس می گیرد AJAX Calls using axios

• پیوند به خدمات استراحت Links to rest services

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

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

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

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

چرخه حیات کامپوننت و قلاب‌های واکنش Component Lifecycle and React Hooks

• معرفی Introduction

• روش‌های UseCase و First Few Cycle UseCase and First Few Lifecycle methods

• didMount و didUpdate didMount and didUpdate

• باید ComponentUpdate shouldComponentUpdate

• مرجع مستندات Documentation Reference

• معرفی React Hooks React Hooks Introduction

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

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

• چرخه حیات کامپوننت و قلاب‌های واکنش Component Lifecycle and React Hooks

REST API با استفاده از ExpressJS REST API Using ExpressJS

• معرفی Introduction

• جدول را ایجاد کنید Create the table

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

• اتصال DB را ایجاد کنید Create the DB Connection

• یک کنترلر ایجاد کنید Create a controller

• نقطه پایانی READ را پیاده سازی کنید Implement the READ endpoint

• برنامه REST را راه اندازی کنید Initialize REST application

• تست READ Test READ

• دریافت محصول واحد Get single Product

• ايجاد كردن Create

• تست و عیب یابی Create Test and Troubleshoot Create

• به روز رسانی Update

• حذف Delete

• ExpressJS ExpressJS

React CRUD Client React CRUD Client

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

• دریافت همه محصولات Get All Products

• تست دریافت همه محصولات Test Get All Products

• بخش 1 محصول واحد را دریافت کنید Get Single Product Part 1

• بخش 2 محصول واحد را دریافت کنید Get Single Product Part 2

• تست دریافت محصول واحد Test Get Single Product

• ايجاد كردن Create

• تست ایجاد Test Create

• به روز رسانی Update

• حذف تکلیف Delete Assignment

مسیریابی Routing

• معرفی Introduction

• مسیریابی در React Routing in React

• مرحله 1 - روتر را نصب کنید Step 1 - Install Router

• مرحله 2 - مسیرها را پیکربندی کنید Step 2 - Configure Routes

• مرحله 3 - افزودن و استفاده از پیوندها Step 3 - Add and Use Links

CRUD Client - با استفاده از اجزای عملکردی و React Hooks CRUD Client - Using functional components and React Hooks

• همه را دریافت کنید Get All

• تک محصول را دریافت کنید GET single product

• ايجاد كردن Create

مورد استفاده پروژه Project Usecase

• معرفی Introduction

• مورد استفاده رزرو پرواز Flight Reservation Usecase

• Flight CheckIn Usecase Flight CheckIn Usecase

پس زمینه جاوا را ایجاد کنید Create the Java Backend

• طرح DB را ایجاد کنید Create the DB Schema

• جاوا را نصب کنید Install Java

• STS را نصب کنید Install STS

• برنامه اجرایی جاوا را دانلود کنید Download the executable java application

• کد منبع تکمیل شده را دانلود کنید Download the completed source code

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

• موجودیت ها را ایجاد کنید Create the Entities

• آنها را با حاشیه نویسی JPA علامت گذاری کنید Mark them with JPA Annotations

• روابط را تعریف کنید Define relationships

• مخازن را ایجاد کنید Create the Repositories

• findFlights API findFlights API

• saveReservation API saveReservation API

• SaveReservation را پیاده سازی کنید Implement saveReservation

• پیدا کردن رزرو findReservation

• updateReservation updateReservation

• منبع داده را پیکربندی کرده و اجرا کنید Configure The Data Source and Run

• پروازها را اضافه کنید Add Flights

• پروازها را فیلتر کنید Filter Flights

• با استفاده از Postman پروازها را فیلتر کنید Test Filter Flights using Postman

• تست ذخیره و یافتن رزرو Test Save and Find Reservation

• به روز رسانی تست Test Update

• FindFlight را ایجاد و آزمایش کنید Create and Test FindFlight

• پشتیبانی Cross Site Origin را اضافه کنید Add Cross Site Origin Support

• معرفی Introduction

یک برنامه رزرو پرواز ایجاد کنید Create a Flight Reservation App

• Code Walk Through Code Walk Through

• ایجاد پروژه Create Project

• کامپوننت ها را ایجاد کنید Create Components

• مسیریابی را پیکربندی کنید Configure Routing

• پروازها را پیدا کنید Find Flights

• رسیدگی به ارسال Handle Submit

• جستجوی پروازها را آزمایش کنید Test Find Flights

• نمایش پروازها Display Flights

• نمایش پروازها - واکشی پروازها Display Flights - Fetch Flights

• نمایش پروازها - رندر پروازها Display Flights - Render Flights

• آزمایش پروازهای نمایشگر Test Display Flights

• رندر جزئیات پرواز Render Flight Details

• مشخصات مسافر و کارت Passenger and Card Details

• مشخصات کامل مسافر Complete Passenger Details

• رزرو را تایید کنید Confirm Reservation

Project 2 Usecase Project 2 Usecase

• مورد استفاده و الزامات پروژه بالینی بیمار Patient Clinical Project UseCase and requirements

REST Backend را ایجاد کنید Create the REST Backend

• پروژه های انجام شده را دانلود کنید Download the completed projects

• پایگاه داده را راه اندازی کنید Setup the database

• پروژه جاوا قابل اجرا Executable Java Project

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

• کلاس های مدل را ایجاد کنید Create the Model Classes

• روابط موجودیت را تعریف کنید Define Entity Relationships

• مخازن را ایجاد کنید Create the Repositories

• کنترل کننده REST بیمار را ایجاد کنید Create the Patient REST Controller

• روش های GET و Save Patient را پیاده سازی کنید Implement the GET and Save Patient methods

• روش های GET را تست کنید Test GET methods

• روش ذخیره تست Test save method

• api ذخیره داده های بالینی را پیاده سازی کنید Implement save clinical data api

• تست ذخیره داده های بالینی Test save clinical data

• پیاده سازی روش تحلیل Implement Analyze Method

• محاسبه BMI Calculate BMI

• نتایج را فیلتر کنید Filter the results

• روش تجزیه و تحلیل آزمون Test Analyze Method

• روش داده های بالینی GET را اجرا کنید Implement GET Clinical Data Method

• استفاده مجدد از منطق BMI Reuse BMI Logic

• تست دریافت داده های بالینی Test GET Clinical Data

• پشتیبانی Cross Site Origin را اضافه کنید Add Cross Site Origin Support

توسعه Frontend با استفاده از REACT Frontend Development using REACT

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

• دانلود اسکلت کد Download Skeleton Code

• مرور کد Code Walkthrough

• پیاده سازی صفحه اصلی Implement Home Page

• افزودن بیمار را پیاده سازی کنید Implement Add Patient

• جمع آوری بالینی - نمایش جزئیات بیمار Collect Clinical's - Display Patient Details

• جمع آوری بالینی - handleSubmit Collect Clinical's - handleSubmit

• تجزیه و تحلیل Analyze

• تست Test

بسته شدن Wrap Up

• امتحان نهایی Final Quiz

• سخنرانی پاداش Bonus Lecture