وب سایت تخصصی شرکت فرین
دسته بندی دوره ها

کدنویسی یک فروشگاه اینترنتی بوسیله MEAN Stack و همچنین Angular 12, NX, PrimeNg

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

در این دوره با تکنولوژی های Nodejs , Mongo, Angular 12, Nrwl NX Monorepo, PrimeNG آشنا شده و کدنویسی ترکیبی آن ها را برای ساخت یک فروشگاه اینترنتی موبایلی و مدرن را یاد می گیرید.

در حقیقت با دنبال کردن مطالب این مجموعه بر برنامه نویسی Web App های مدرن کاملا مسلط می شوید.

عنوان اصلی : MEAN Stack E-Commerce App: Angular 12, NX, PrimeNg [2021]

سرفصل ها :


به دوره خوش آمدید:
MEAN Stack چیست؟
چه کسانی می توانند این دوره را بگذرانند: پیش نیازهای دوره
دوره پرسش و پاسخ و چگونه می توان بیشتر از آن استفاده کرد؟
اگر گیر کردید و خطا کردید
ابزار و محیط:
نصب ویرایشگر کدنویسی (IDE) + برنامه های افزودنی
نصب NodeJs
MongoBD Atlas را پیکربندی کنید
نصب PostMan برای تست API های ما
شروع با Backend:
مروری بر RESTful API ما
متغیرهای محیط خواندن
ایجاد اولین تماس API و تجزیه داده های Json
نکته مهم در مورد تجزیه داده های json
ثبت درخواست های API
نصب Mongoose و اتصال به پایگاه داده MongoDB
استفاده از قطب نما MongoDB
اختیاری: پایگاه داده کاشت
خواندن/نوشتن داده ها در پایگاه داده با استفاده از API
تجزیه و تحلیل پایگاه داده فروشگاه الکترونیکی
مسیرها و طرحواره های API Backend را ایجاد کنید
فعال کردن CORS و چرا به آن نیاز داریم؟
کد بخش
پس زمینه : محصولات و دسته بندی ها :
معرفی
مدل و طرحواره محصولات
دسته بندی مدل و طرحواره
اضافه کردن و حذف دسته ها
دسته ها و جزئیات دسته را دریافت کنید
به روز رسانی دسته
یک محصول جدید REST API ارسال کنید
یک محصول و فهرست محصولات REST API دریافت کنید
نمایش جزئیات دسته در محصول - پر کردن
یک محصول REST API را به روز کنید
یک محصول REST API را حذف کنید و شناسه را تأیید کنید
تعداد محصولات را برای اهداف آماری دریافت کنید
API REST محصولات ویژه را دریافت کنید
فیلتر کردن و دریافت محصولات بر اساس دسته
تغییر کلید "_id" به "id" - ظاهری دوستانه تر
کد بخش
Backend: کاربران و احراز هویت:
معرفی
مدل و طرحواره کاربران
ارسال/ثبت یک کاربر جدید REST API
دریافت کاربر و فهرست کاربران بدون رمز عبور
به روز رسانی اطلاعات کاربر با / بدون رمز عبور
وارد یک User REST API و ایجاد یک توکن شوید
محافظت از API و احراز هویت JWT Middleware
مدیریت خطای احراز هویت
مستثنی کردن مسیرهای REST API از احراز هویت
اطلاعات مخفی کاربر را به Token اضافه کنید
کاربران و مدیران
دریافت تعداد کاربر REST API
کد بخش
Backend : سفارشات :
معرفی
مدل و طرح سفارش‌ها و سفارش‌ها
Array of Refs - مثالی از پیوند سفارش برای سفارش اقلام به محصولات
سفارش جدید و ایجاد موارد سفارش در ارسال سفارش جدید
جزئیات سفارش را دریافت کنید و محصولات را در موارد سفارش و داده های کاربر پر کنید
به روز رسانی وضعیت سفارش و حذف سفارش
پس از حذف سفارش، موارد سفارش را حذف کنید
توضیح راه حل
محاسبه قیمت کل یک سفارش
کل فروش فروشگاه الکترونیکی را با استفاده از $sum دریافت کنید
دریافت سفارشات کاربران
کد بخش
پس زمینه: آپلود تصویر و گالری محصول:
معرفی
پیکربندی آپلود سمت سرور
تست آپلود تصویر با پستچی
اعتبارسنجی انواع فایل های آپلود شده
آپلود تصویر با درخواست پست محصول
گالری محصول بارگذاری تصاویر متعدد
آپلود تصویر با درخواست PUT محصول
پوشه استاتیک و حذف پوشه آپلود از احراز هویت
کد بخش
شروع با Frontend:
تجارت الکترونیک NgShop - ساختار صفحه برنامه
ایجاد پوشه پروژه و نصب Angular
کامپوننت ها، ماژول ها، خدمات در Angular
NX Monorepo:
NX و MonoRepo چیست؟
مروری بر مثال NX Real World - فروشگاه الکترونیکی
نصب NX
نصب برنامه های افزودنی برای کدنویسی سریع
NX: ساختار اساسی برای برنامه فروشگاه الکترونیکی + برنامه پنل مدیریت:
ایجاد فضای کاری Nx برای تیم یا شرکت شما
ایجاد برنامه ها (برنامه پنل مدیریت)
ایجاد اجزای سطح برنامه
ایجاد مسیرها
صفحه اصلی با اجزای سرصفحه و پاورقی
نامگذاری قوانین انتخابگر کامپوننت با ESLint
NX ESLint: فعال کردن Live Coding Linting
پسوند NX VSCode
NX: کتابخانه های مشترک:
ایجاد کتابخانه های مشترک از طریق خط فرمان با استفاده از NPX
ایجاد کتابخانه های مشترک از طریق NX Extension
ایجاد مؤلفه ها در داخل کتابخانه ها و استفاده از آنها در برنامه ها
نحوه تماس با کتابخانه ها: مسیرها را بررسی کنید
NX: فایل‌های سبک مشترک:
در مورد فایل های سبک اشتراکی چطور؟
ساختار فایل‌های سبک برای برنامه‌ها (NgShop + Admin)
نصب کتابخانه های شخص ثالث و شامل سبک ها
در حال نصب PrimeNG
استفاده از اجزای PrimeNG در پروژه ما
لغو فونت های PrimeNG
نصب سیستم شبکه
به روز رسانی: تغییر مهم کلاس های Grid در PrimeFlex
اپلیکیشن پنل مدیریت:
ساخت پوسته اصلی
ایجاد مسیرها و نمایش پوسته
نوار کناری ناوبری پنل مدیریت
غیرفعال کردن تأیید اعتبار Backend برای API's For Frontend Purpose
کد بخش
پنل مدیریت: دسته بندی ها:
جدول لیست دسته ها
سرویس دسته‌ها - داده‌ها را از Backend دریافت کنید
سرویس getCategories را در کامپوننت Categories-List تماس بگیرید
فرم اضافه کردن دسته ها - از فرم های PrimeNG استفاده کنید
فرم افزودن دسته‌ها - داده‌های فرم را پیوند دهید
فرم افزودن دسته ها - ارسال داده ها به Backend
حذف یک دسته با گفتگوی تأیید
ویرایش یک دسته
انتخابگر رنگ را برای رنگ دسته اضافه کنید
Refactoring Code & Beautify Category جدول با ویژگی های بیشتر
رنگ ساده را به لیست دسته ها اضافه کنید
ESLint رفع می کند
Refactoring و استفاده از متغیرهای محیطی برای API
کد بخش
پنل مدیریت: محصولات:
محصولات: قرار است چه کار کنیم؟
جدول لیست محصولات
خدمات محصولات و دریافت محصولات از پایگاه داده
تصویر محصول را در جدول نشان دهید
قالب فرم محصولات ساخت
کشویی برای دسته بندی محصولات با فیلتر
ویرایشگر HTML برای توضیحات مفصل محصول
فیلد آپلود تصویر محصول با نمایش بند انگشتی
یک محصول جدید به عنوان FormData ارسال کنید
یک محصول را ویرایش کنید
اعتبارسنجی پویا - فیلد تصویر در حالت ویرایش مورد نیاز نیست
حذف یک محصول با اعلان‌ها و گفتگوی تأیید
صفحه بندی جدول محصولات را اضافه کنید
کد بخش
پنل مدیریت: کاربران:
کاربران: قرار است چه کار کنیم؟
جدول لیست کاربران و خدمات کاربر
کاربران فرم افزودن و ویرایش
کد
بازیابی کشورها به کشویی با استفاده از i18n-iso-countries
نام کامل کشور
کد بخش
پنل مدیریت: سفارشات:
دستور می دهد: چه کنیم؟
ایجاد اجزای سفارش - جدول، جزئیات و خدمات
وضعیت سفارش
جزء جزئیات سفارش
نمایش اقلام سفارش با قیمت های فرعی
آدرس سفارش و اطلاعات مشتری
به روز رسانی وضعیت سفارش
یک سفارش را با اعلان‌ها و گفتگوی تأیید حذف کنید
کد بخش
پنل مدیریت: ورود و احراز هویت:
ورود به سیستم: قرار است چه کار کنیم؟
صفحه ورود
وارد سرویس شوید و رمز را بازیابی کنید
ایجاد سرویس ذخیره سازی محلی و رمز فروشگاه
ایجاد Route Guard پنل مدیریت
اطلاعات توکن را بخوانید - isAdmin و انقضا
فعال کردن Backend Authentication برای API
درخواست های HTTP را با توکن رهگیری کنید
کاربر خروج از سیستم
کد بخش
پنل مدیریت: داشبورد:
استایل داشبورد
خدمات آمار داشبورد
کد بخش
پنل مدیریت: Refactoring:
بازسازی مسیرها
پایان اشتراک ها برای عملکرد
کد بخش
برنامه NgShop: صفحه اصلی:
آماده سازی ساختار و سبک
حالت دادن به سربرگ
جزء جستجوی محصول
اجزای بنر و حذف کتابخانه در NX
متحرک سازی بنر
نادیده گرفتن سبک دکمه PrimeNG
بنر دسته بندی ها
مورد محصول
بنر محصولات ویژه
مورد محصول یک ظاهر طراحی شده
سبک دادن به پاورقی
کد بخش
برنامه NgShop: محصولات:
صفحه محصولات - استفاده مجدد از اجزا
فیلتر کردن محصولات بر اساس دسته
صفحه جزئیات محصول
کامپوننت تصویر گالری محصول
کد بخش
برنامه NgShop: سبد خرید و پرداخت:
خدمات سبد خرید و راه اندازی سبد خرید در LocalStorage
افزودن محصولات به سبد خرید
بازیابی سبد خرید در Reload
مشاهده سبد خرید - نشان شمارش در سربرگ
افزودن به سبد خرید پیام بازشو تایید (نان تست)
اضافه کردن محصول به سبد خرید با تعداد
قالب صفحه سبد خرید
سبد خرید را با محصولات وصل کنید
وابستگی های دایره ای بین کتابخانه ها را حذف کنید
حذف محصولات از سبد خرید
سفارش ویجت تابستانی
به روز رسانی تعداد مورد سبد خرید
صفحه پرداخت
سفارش دادن
با تشکر از شما صفحه
کد بخش
برنامه NgShop: جلسات کاربر NGRX:
Login On Checkout را فعال کنید
NGRX چیست؟
بیایید انجام دهیم: فروشگاه دولتی NGRX را در کتابخانه کاربران ایجاد کنید
نمودار: ساخت فرآیند جلسه کاربر
Init User Session Service
Creatig Build User Session Action
ایجاد UserState
در صورت معتبر بودن یا نبودن توکن، اقدامات مؤثر ایجاد کنید
ایجاد افکت Build Session
فراخوانی اکشن روی توکن نامعتبر/معتبر
با استفاده از انتخابگرها، فیلدهای StateStore را مشاهده کنید
پر کردن خودکار صفحه پرداخت بر اساس کاربر وارد شده
Refactoring + ثبت سفارش با کاربر فعلی
کد بخش
پرداخت در پرداخت:
درگاه پرداخت خطی
نصب کتابخانه های مورد نیاز برای Frontend
پرداخت جریان پرداخت
ایجاد Checkout Session API
ایجاد سرویس Frontend Checkout Session
ثبت سفارش پس از پرداخت موفقیت آمیز
ثبت سفارش در صفحه "متشکرم".
بازسازی مجدد:
پروژه لینتینگ با NX Lint
NX Migrate: به روز رسانی پروژه به آخرین نسخه
کد بخش
استقرار Backend:
نصب Heroku و آماده سازی Git
اختیاری: ایجاد پایگاه داده تولید
تنظیم متغیرهای توسعه و محیط محصول
برنامه را اجرا کنید و آن را تست کنید
کد بخش
استقرار برنامه های Frontend:
آماده سازی صفحات Git و Github
ساخت اپلیکیشن های Frontend
استقرار برنامه های Frontend در صفحات Github
ساخت چندین برنامه، ایجاد اسکریپت
کارت عالی بود! بعدی چیه؟ :
این دوره در حال رشد است! چگونه؟
سخنرانی پاداش

نمایش سرفصل های انگلیسی

MEAN Stack E-Commerce App: Angular 12, NX, PrimeNg [2021]

53,700 تومان
بیش از یک محصول به صورت دانلودی میخواهید؟ محصول را به سبد خرید اضافه کنید.
خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

ایمیل شما:
تولید کننده:
شناسه: UD21036
حجم: 11674 مگابایت
مدت زمان: 1515 دقیقه
تعداد دیسک: 3 عدد
زیرنویس انگلیسی: دارد
زبان: انگلیسی ساده و روان
تاریخ انتشار: 30 مهر 1400
کدنویسی یک فروشگاه اینترنتی بوسیله MEAN Stack و همچنین Angular 12, NX, PrimeNg
کدنویسی یک فروشگاه اینترنتی بوسیله MEAN Stack و همچنین Angular 12, NX, PrimeNg 1
کدنویسی یک فروشگاه اینترنتی بوسیله MEAN Stack و همچنین Angular 12, NX, PrimeNg 2
کدنویسی یک فروشگاه اینترنتی بوسیله MEAN Stack و همچنین Angular 12, NX, PrimeNg 3
کدنویسی یک فروشگاه اینترنتی بوسیله MEAN Stack و همچنین Angular 12, NX, PrimeNg 4
کدنویسی یک فروشگاه اینترنتی بوسیله MEAN Stack و همچنین Angular 12, NX, PrimeNg 5
کدنویسی یک فروشگاه اینترنتی بوسیله MEAN Stack و همچنین Angular 12, NX, PrimeNg 6
طراحی سایت و خدمات سئو

53,700 تومان
افزودن به سبد خرید