آموزش برنامه تجارت الکترونیک MEAN Stack: Angular 12، NX، PrimeNg [2021]

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

به دوره خوش آمدید Welcome to the course

• چه کاری میخواهیم انجام دهیم؟ What Are We Going to Do?

• MEAN Stack چیست؟ What is MEAN Stack?

• چه کسانی می توانند این دوره را بگذرانند: پیش نیازهای دوره Who can take this course: Course Prerequisites

• پرسش و پاسخ دوره و چگونه می توان بیشترین بهره را از آن داشت؟ Course Q/A and How to Get Most of It?

• اگر گیر کردید و خطا کردید If you get stuck and Errors

ابزار و محیط Tools and Environment

• نصب ویرایشگر کدنویسی (IDE) + برنامه های افزودنی Installing our Coding Editor (IDE) + Extensions

• نصب NodeJs Installing NodeJs

• MongoDB Atlas را پیکربندی کنید Configure MongoBD Atlas

• نصب PostMan برای تست API ما Installing PostMan to Test our API's

شروع با Backend Starting With The Backend

• معرفی Introduction

• مروری بر RESTful API ما Overview to our RESTful API

• ایجاد سرور Backend با Express Creating the Backend Server with Express

• متغیرهای محیط خواندن Reading Environment Variables

• ایجاد اولین تماس API و تجزیه داده های Json Create First API Call & Parsing Json Data

• نکته مهم در مورد تجزیه داده های json Important note about parsing json data

• ثبت درخواست های API Logging API Requests

• نصب Mongoose و اتصال به پایگاه داده MongoDB Installing Mongoose and Connect to MongoDB Database

• استفاده از قطب نما MongoDB Using MongoDB Compass

• اختیاری: پایگاه داده کاشت Optional: Seeding Database

• خواندن/نوشتن داده ها در پایگاه داده با استفاده از API Read/Write Data to Database Using API

• تجزیه و تحلیل پایگاه داده فروشگاه الکترونیکی Analysing the E-Shop Database

• مسیرها و طرحواره های API Backend را ایجاد کنید Create Backend API Routes & Schemas

• فعال کردن CORS و چرا به آن نیاز داریم؟ Enabling CORS & Why Do We Need It?

• کد بخش Section Code

Backend : محصولات و دسته ها Backend : Products & Categories

• مدل و طرحواره محصولات Products Model & Schema

• دسته بندی مدل و طرحواره Categories Model & Schema

• اضافه کردن و حذف دسته ها Add and Delete Categories

• دسته ها و جزئیات دسته را دریافت کنید Get Categories and Category Details

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

• یک محصول جدید REST API ارسال کنید Post a New Product REST API

• یک محصول و فهرست محصولات REST API دریافت کنید Get a Product & List of Products REST API

• نمایش جزئیات دسته در محصول - پر کردن Show Category Details in the Product - Populate

• یک محصول REST API را به روز کنید Update a Product REST API

• یک محصول REST API را حذف کنید و شناسه را تأیید کنید Delete a Product REST API and Validate Id

• تعداد محصولات را برای اهداف آماری دریافت کنید Get Products Count for Statistics Purposes

• API REST محصولات ویژه را دریافت کنید Get Featured Products REST API

• فیلتر کردن و گرفتن محصولات بر اساس طبقه بندی Filtering and Getting Products by Category

• تغییر کلید "_id" به "id" - برای صفحه نمایش دوستانه تر Changing "_id" key to "id" - more frontend friendly

• کد بخش Section Code

Backend: کاربران و احراز هویت Backend : Users & Authentication

• معرفی Introduction

• مدل و طرحواره کاربران Users Model & Schema

• ارسال/ثبت یک کاربر جدید REST API Post/Register a New User REST API

• رمز عبور کاربر را هش کردن Hashing the User Password

• دریافت کاربر و فهرست کاربران بدون رمز عبور Get User and List of Users Excluding Password

• به روز رسانی اطلاعات کاربر با/بدون رمز عبور Update User Data With/Without Password

• وارد API کاربر REST و ایجاد یک توکن شوید Login a User REST API & Creating a Token

• محافظت از API و احراز هویت JWT Middleware Protecting the API and Authentication JWT Middleware

• مدیریت خطای احراز هویت Authentication Error Handling

• مستثنی کردن مسیرهای REST API از احراز هویت Excluding REST API Routes From Authentication

• اطلاعات مخفی کاربر را به Token اضافه کنید Add More Secret User Information to Token

• کاربران و مدیران Users & Admins

• API REST تعداد کاربران را دریافت کنید Get User Count REST API

• کد بخش Section Code

Backend: سفارشات Backend : Orders

• معرفی Introduction

• مدل و طرح سفارشات و سفارشات Orders & Order-Items Model & Scheme

• Array of Refs - مثالی از پیوند سفارش برای سفارش اقلام به محصولات Array of Refs - Example of Link Order to Order Items to Products

• سفارش جدید و ایجاد موارد سفارش در ارسال سفارش جدید New Order & Create Order Items on Posting New Order

• جزئیات سفارش را دریافت کنید و محصولات را در موارد سفارش و داده های کاربر پر کنید Get Order Detail and Populate Products in Order Items and User Data

• به روز رسانی وضعیت سفارش و حذف سفارش Update Order Status & Delete Order

• پس از حذف سفارش، موارد سفارش را حذف کنید Delete Order Items after Deleting the Order

• توضیح راه حل Explaining the Solution

• محاسبه قیمت کل یک سفارش Calculating Total Price of one Order

• کل فروش فروشگاه الکترونیکی را با استفاده از $sum دریافت کنید Get Total E-Shop Sales using $sum

• دریافت سفارشات کاربران Getting User Orders

• کد بخش Section Code

پس زمینه: آپلود تصویر و گالری محصول Backend: Product Image & Gallery Upload

• معرفی Introduction

• معرفی Introduction

• پیکربندی آپلود سرور Configure Server Side Upload

• تست آپلود تصویر با پستچی Testing Image Upload with Postman

• اعتبارسنجی انواع فایل های آپلود شده Validating Uploaded File Types

• آپلود تصویر با درخواست پست محصول Image Upload With Product Post Request

• گالری محصول بارگذاری تصاویر متعدد Product Gallery Multiple Images Upload

• آپلود تصویر با درخواست PUT محصول Image Upload With Product PUT Request

• پوشه ثابت و حذف پوشه آپلود از احراز هویت Static Folder & Excluding Uploads Folder From Authentication

• کد بخش Section Code

با Frontend شروع کنید Starting with Frontend

• تجارت الکترونیک NgShop - ساختار صفحه برنامه E-Commerce NgShop - App Page Structure

• ایجاد پوشه پروژه و نصب Angular Creating Project Folder and Installing Angular

• کامپوننت ها، ماژول ها، خدمات در Angular Components, Modules, Services in Angular

nx monorepo NX Monorepo

• NX و MonoRepo چیست؟ What is NX & MonoRepo?

• مروری بر مثال NX Real World - فروشگاه الکترونیکی Overview on NX Real World Example - E-Shop

• نصب NX Installing NX

• نصب برنامه های افزودنی برای کدنویسی سریع Installing Extensions for Rapid Coding

NX: ساختار اساسی برای برنامه فروشگاه الکترونیکی + برنامه پنل مدیریت NX: Basic Structure for E-Shop App + Admin Panel App

• ایجاد فضای کاری Nx برای تیم یا شرکت شما Creating Nx workspace for Your Team or Company

• ایجاد برنامه ها (برنامه پنل مدیریت) Creating the Applications (Admin Panel App)

• ایجاد اجزای سطح برنامه Creating Application-Level Components

• ایجاد مسیرها Creating Routes

• صفحه اصلی با اجزای سرصفحه و پاورقی Master Page with Header & Footer Components

• نامگذاری قوانین انتخابگر کامپوننت با ESLint Naming Component Selector Rules with ESLint

• NX ESLint: فعال کردن Live Coding Linting NX ESLint: Enabling Live Coding Linting

• پسوند NX VSCode NX VSCode Extension

NX: کتابخانه های مشترک NX: Shared Libraries

• ایجاد کتابخانه های مشترک از طریق خط فرمان با استفاده از NPX Creating Shared Libraries Through Command Line Using NPX

• ایجاد کتابخانه های مشترک از طریق NX Extension Creating Shared Libraries Through NX Extension

• ایجاد مؤلفه ها در داخل کتابخانه ها و استفاده از آنها در برنامه ها Creating Components Inside Libraries and Use them in the Apps

• نحوه تماس با کتابخانه ها: مسیرها را بررسی کنید How to Call Libraries: Check Paths

NX: فایل‌های سبک مشترک NX: Shared Styling Files

• در مورد فایل های سبک به اشتراک گذاشته شده چیست؟ What about Shared Style Files?

• ساختار فایل‌های سبک برای برنامه‌ها (NgShop + Admin) Structuring Style Files For Applications (NgShop + Admin)

• نصب کتابخانه های شخص ثالث و شامل سبک ها Installing 3rd Party Libraries and Include Styles

• در حال نصب PrimeNG Installing PrimeNG

• استفاده از اجزای PrimeNG در پروژه ما Using PrimeNG Components in Our Project

• فونت های PrimeNG را لغو کنید Override PrimeNG Fonts

• نصب سیستم شبکه Installing The Grid System

• به روز رسانی: تغییر مهم کلاس های Grid در PrimeFlex UPDATE: Important Change of Grid classes on PrimeFlex

برنامه پنل مدیریت Admin Panel Application

• مقدمه - نمای کلی پنل مدیریت Introduction - Admin Panel Overview

• ساخت پوسته اصلی Building the Main Shell

• ایجاد مسیرها و نمایش پوسته Creating The Routes and Show Shell

• نوار کناری ناوبری پنل مدیریت Admin Panel Navigation Sidebar

• غیرفعال کردن تأیید اعتبار Backend برای API's For Frontend Purpose Disable Backend Authentication For API's For Frontend Purpose

• کد بخش Section Code

پنل مدیریت: دسته بندی ها Admin Panel: Categories

• جدول لیست دسته ها Categories List Table

• سرویس دسته‌ها - داده‌ها را از Backend دریافت کنید Categories Service - Get Data from Backend

• سرویس getCategories را در کامپوننت Categories-List تماس بگیرید Call getCategories Service in Categories-List Component

• فرم اضافه کردن دسته ها - از فرم های PrimeNG استفاده کنید Add Categories Form - Use PrimeNG Forms

• فرم افزودن دسته ها - داده های فرم را پیوند دهید Add Categories Form - Bind Form Data

• فرم افزودن دسته ها - ارسال داده ها به Backend Add Categories Form - Send Data to Backend

• حذف یک دسته با گفتگوی تأیید Delete a Category with Confirmation Dialog

• ویرایش یک دسته Edit a Category

• انتخابگر رنگ را برای رنگ دسته اضافه کنید Add Color Picker for Category Color

• Refactoring Code & Beautify Category جدول با ویژگی های بیشتر Refactoring Code & Beautify Categories Table with More Features

• رنگ ساده را به لیست دسته ها اضافه کنید Add Plain Color to Categories List

• ESLint رفع می کند ESLint Fixes

• Refactoring و استفاده از متغیرهای محیطی برای API Refactoring and Use Environment Variables for API's

• کد بخش Section Code

پنل مدیریت: محصولات Admin Panel: Products

• محصولات: قرار است چه کار کنیم؟ Products: What are we going to do?

• جدول لیست محصولات Products List Table

• خدمات محصولات و دریافت محصولات از پایگاه داده Products Service and Get Products From the Database

• تصویر محصول را در جدول نشان دهید Show the Product Image in the Table

• قالب فرم محصولات ساخت Build Products Form Template

• کشویی برای دسته بندی محصولات با فیلتر Dropdown for Product Categories with Filter

• ویرایشگر HTML برای توضیحات جزئیات محصول HTML Editor for Product Detailed Description

• فیلد آپلود تصویر محصول با نمایش بند انگشتی Product Image Upload Field with Thumbnail Display

• یک محصول جدید به عنوان FormData ارسال کنید Submit a New Product as FormData

• یک محصول را ویرایش کنید Edit a product

• اعتبارسنجی پویا - فیلد تصویر در حالت ویرایش لازم نیست Dynamic Validation - Image Field Is Not Required In Edit Mode

• حذف یک محصول با اعلان‌ها و گفتگوی تأیید Delete A Product with Notifications and Confirmation Dialog

• صفحه بندی جدول محصولات را اضافه کنید Add Products Table Pagination

• کد بخش Section Code

پنل مدیریت: کاربران Admin Panel: Users

• کاربران: قرار است چه کار کنیم؟ Users: What are we going to do?

• جدول لیست کاربران و خدمات کاربر Users List Table and User Services

• کاربران فرم افزودن و ویرایش Users Form Add and Edit

• کد The Code

• بازیابی کشورها به کشویی با استفاده از i18n-iso-countries Retrieving Countries to Dropdown Using i18n-iso-countries

• نام کامل کشور Full Name of the Country

پنل مدیریت: سفارشات Admin Panel: Orders

• دستور می دهد: چه کنیم؟ Orders: What are we going to do?

• ایجاد اجزای سفارش - جدول، جزئیات و خدمات Create Orders Components - Table, Details and Services

• وضعیت سفارش Order Status

• سفارش جزئیات جزء Order Details Component

• نمایش اقلام سفارش با قیمت های فرعی Display Order Items with Subtotal Prices

• سفارش آدرس و اطلاعات مشتری Order Address and Customer Info

• به روز رسانی وضعیت سفارش Update Order Status

• یک سفارش را با اعلان ها و گفتگوی تأیید حذف کنید Delete an Order with Notifications and Confirmation Dialog

• کد بخش Section Code

پنل مدیریت: ورود و احراز هویت Admin Panel: Login & Authentication

• ورود: قرار است چه کار کنیم؟ Login : What are we going to do?

• صفحه ورود Login Page

• وارد سرویس شوید و رمز را بازیابی کنید Login Service and Retrieve the Token

• ایجاد سرویس ذخیره سازی محلی و رمز فروشگاه Create Local Storage Service and Store Token

• ایجاد Route Guard پنل مدیریت Create Admin Panel Route Guard

• اطلاعات توکن را بخوانید - isAdmin و انقضا Read Token Data - isAdmin and Expiration

• فعال کردن Backend Authentication برای API Enable Back Backend Authentication For API's

• درخواست های HTTP را با توکن رهگیری کنید Intercept HTTP requests with Token

• کاربر خروج از سیستم Logout User

• کد بخش Section Code

پنل مدیریت: داشبورد Admin Panel: Dashboard

• استایل داشبورد Dashboard Styling

• خدمات آمار داشبورد Dashboard Statistics Services

• کد بخش Section Code

پنل مدیریت: Refactoring Admin Panel: Refactoring

• بازسازی مسیرها Routes Refactoring

• پایان اشتراک ها برای عملکرد End Subscriptions for Performance

• کد بخش Section Code

برنامه NgShop: صفحه اصلی NgShop App: Home Page

• معماری اجزای موجود در مخزن Architecture of the Components in the Repository

• آماده سازی ساختار و سبک ها Preparing Structure and Styles

• سبک دادن به سربرگ Styling the Header

• جزء جستجوی محصول Product Search Component

• اجزای بنر و حذف کتابخانه در NX Banner Components & Removing Library in NX

• متحرک سازی بنر Animate Banner

• نادیده گرفتن سبک دکمه PrimeNG Overriding PrimeNG Button Style

• بنر دسته بندی ها Categories Banner

• مورد محصول Product Item

• بنر محصولات ویژه Featured Products Banner

• مورد محصول یک ظاهر طراحی شده Styling Product Item

• سبک دادن به پاورقی Styling the Footer

• کد بخش Section Code

برنامه NgShop: محصولات NgShop App: Products

• نمای کلی صفحه محصولات Products Page Overview

• صفحه محصولات - استفاده مجدد از اجزا Products Page - Reuse Components

• فیلتر کردن محصولات بر اساس دسته Filtering Products by Category

• صفحه دسته بندی Category Page

• صفحه جزئیات محصول Product Details Page

• کامپوننت تصویر گالری محصول Product Gallery Image Component

• کد بخش Section Code

برنامه NgShop: سبد خرید و پرداخت NgShop App: Cart & CheckOut

• خدمات سبد خرید و راه اندازی سبد خرید در LocalStorage Cart Service and Initialize Cart in LocalStorage

• افزودن محصولات به سبد خرید Add Products To Cart

• بازیابی سبد خرید در Reload Restore Shopping Cart on Reload

• مشاهده سبد خرید - نشان شمارش در سربرگ Observe Cart - Count Badge in The Header

• افزودن به سبد خرید پیام بازشو تایید (نان تست) Add To Cart Confirmation Popup Message (Toast)

• اضافه کردن محصول به سبد خرید با تعداد Add Product To Cart With Quantity

• قالب صفحه سبد خرید Cart Page Template

• سبد خرید را با محصولات وصل کنید Connect the Cart with Products

• وابستگی های دایره ای بین کتابخانه ها را حذف کنید Remove Circular Dependencies Between Libraries

• حذف محصولات از سبد خرید Remove Products From Cart

• ویجت خلاصه سفارش Order Summery Widget

• به روز رسانی تعداد مورد سبد خرید Update Cart Item Quantity

• صفحه پرداخت Checkout Page

• سفارش دادن Placing Order

• با تشکر از شما صفحه Thank you Page

• کد بخش Section Code

برنامه NgShop: جلسات کاربر NGRX NgShop App: NGRX User Sessions

• ورود در پرداخت را فعال کنید Enable Login On Checkout

• NGRX چیست؟ What is NGRX?

• بیایید انجام دهیم: فروشگاه دولتی NGRX را در کتابخانه کاربران ایجاد کنید Let's Do: Create NGRX State Store in Users Library

• نمودار: ساخت فرآیند جلسه کاربر Diagram: Building User Session Process

• Init User Session Service Init User Session Service

• ایجاد اقدام جلسه کاربر Creatig Build User Session Action

• ایجاد UserState Creating the UsersState

• در صورت معتبر بودن یا نبودن توکن، اقدامات مؤثر ایجاد کنید Create Effective Actions if Token Valid or Not

• ایجاد افکت Build Session Creating Build Session Effect

• تماس تلفنی بر روی نشانه نامعتبر/معتبر Calling Action on Invalid/Valid Token

• با استفاده از انتخابگرها، فیلدهای StateStore را مشاهده کنید Observe StateStore Fields Using Selectors

• صفحه خودکار پرداخت خودکار بر اساس کاربر ثبت شده Auto Fill Checkout Page Based on Logged User

• Refactoring + محل سفارش با کاربر فعلی Refactoring + Place Order with Current User

• کد بخش Section Code

پرداخت در پرداخت Payment on Checkout

• درگاه پرداخت خطی Stripe Payment Gateway

• نصب کتابخانه های مورد نیاز برای ظهور Installing Required Libraries For Frontend

• پرداخت جریان پرداخت Checkout Payment Flow

• ایجاد API جلسه پرداخت Creating Checkout Session API

• ایجاد سرویس جلسه پرداخت جلو Creating Frontend Checkout Session Service

• قرار دادن سفارش پس از پرداخت موفق Placing Order After Successful Payment

• قرار دادن سفارش در صفحه "متشکرم" Placing Order in "Thank You" Page

Refactoring Refactoring

• پروژه Linting با NX Lint Linting Project with NX Lint

• NX Migrate: به روز رسانی پروژه به آخرین نسخه NX Migrate: Updating The Project to Latest Version

• کد بخش Section Code

استقرار Backend Backend Deployment

• نصب Heroku و آماده سازی git Installing Heroku and Prepare Git

• اختیاری: ایجاد پایگاه داده تولید Optional: Creating Production Database

• تنظیم متغیرهای محیط زیست توسعه و محصول Setting Development and Product Environment Variables

• برنامه را مستقر کنید و آن را آزمایش کنید Deploy the App and Test It

• کد بخش Section Code

• کد بخش Section Code

استقرار برنامه های Frontend Frontend Apps Deployment

• آماده سازی صفحات GIT و GitHub Preparing Git and Github Pages

• برنامه های ساختمانی ساختمان Building Frontend Apps

• استقرار برنامه های جلو به صفحات Github Deploying Frontend Apps to Github Pages

• ساخت چند برنامه، ایجاد اسکریپت ها Building Multiple APP's, Create Scripts

کارت عالی بود! بعدی چیه؟ Great Job! What is next?

• این دوره در حال رشد است! چطور؟ This Course is Growing! How?

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