آموزش ساخت فروشگاه با جنگو و ری اکت (بسته جامع)

سلام. به این آموزش از هم‌رویش خوش آمدید! بالاخره بعد از تلاش بسیار مفتخریم تا بسته جامع آموزش ساخت فروشگاه فول استک با فریمورک جنگو و کتابخانه ری اکت را خدمت شما فراگیران عزیز معرفی کنیم.

در این بسته آموزشی یک فروشگاه آنلاین را از صفر با پایتون (کتابخانه Django) و جاوااسکریپت (کتابخانه React JS) کدنویسی می‌کنیم. این فروشگاه سیستم اعتبارسنجی ایمیلی و درگاه پرداخت داخلی دارد و روی یک سکوی ابری هم به صورت آنلاین دپلو می‌شود.

 

می‌خواهید فروشگاهی که در این آموزش ساخته شده را ببینید؟

https://django-react-eshop.ir

با سپاس از مجموعه رانفلر (+) که بستر دپلوی را فراهم کردند.

 

ساخت فروشگاه با پایتون و جاوااسکریپت گزینه خوبی است. پس از ساخت چنین فروشگاهی می‌توانید بسته به نیازتان از کتابخانه‌های هوش مضنوعی و علم داده پایتون و جاوااسکریپت در بک اند و فرانت اند برای بسیاری پردازش‌های پیشرفته استفاده کنید.

فصل‌های این آموزش به صورت مستقل هم از لینک‌های زیر قابل دریافت هستند:

• ساخت فروشگاه آنلاین با Django و Reacct ـــ فصل ۱:‌ ری اکت
• ساخت فروشگاه آنلاین با Django و Reacct ـــ فصل ۲: جنگو رست 
• آموزش فروشگاه جنگو و ری اکت – فصل ۳: مدیریت وضعیت با Redux
• آموزش ساخت فروشگاه فول استک با جنگو و ری اکت – فصل ۴: سبد خرید
• آموزش فروشگاه آنلاین با جنگو پایتون و ری اکت – فصل ۵: اعتبارسنجی
• آموزش ساخت فروشگاه فول استک با جنگو و ری اکت – فصل ۶: احراز هویت
• آموزش ساخت فروشگاه فول استک با جنگو و ری اکت – فصل ۷: ثبت سفارش
• آموش ساخت فروشگاه فول استک با جنگو و ری اکت ــ فصل ۸: درگاه پرداخت 
• آموزش ساخت فروشگاه فول استک با جنگو و ری اکت ــ فصل ۹: انتشار آنلاین  

البته در صورت خرید یکجا، مجموع قیمت کمتری می‌پردازید و فایل‌های دانلود هر فصل را نیز به صورت یک لینک دریافت خواهید کرد.

 

جنگو چیست؟

جنگو (Django) یکی از محبوب‌ترین فریمورک‌های برنامه‌نویسی وب است. از یک سو سرعت توسعه، کتابخانه‌های غنی و امنیت مناسبی دارد؛ از سوی دیگر با زبان پایتون برنامه‌نویسی می‌شود. پس می‌توان از کتابخانه‌های پایتون در هوش مصنوعی و داده کاوی در آن جنگو استفاده کرد.

برای شروع آشنایی با Django، دیدن این آموزش جنگو توصیه می‌شود.

 

ری اکت چیست؟

ری اکت (React) یک کتابخانه متن باز بر اساس جاوا اسکریپت است که در سال ۲۰۱۳ توسط تیم توسعه فیسبوک برای اولین بار منتشر شد. امروزه ری اکت در بین برنامه نویسان و طراحان وب از جایگاه ویژه ای برخوردار است. در ایران انجمن‌های طرفداری متعددی برای ری اکت برپا شده است.

برای شروع آشنایی با React، دیدن این آموزش ری اکت توصیه می‌شود.

 

جنگو رست چیست؟

جنگو رست (Django REST) یک فریمورک برای تولید Web API مبتنی بر جنگو است. امروزه استفاده از سیستم API برای برفراری ارتباط بک اند و فرانت اند و همچنین مستقل بودن این دو، کاربرد بسیاری یافته است.

برای شروع آشنایی با Django REST دیدن این آموزش جنگو رست توصیه می‌شود.

 

فروشگاه مبتنی بر Web API

جنگو به عنوان بک اند و ری اکت به عنوان فرانت اند در این پروژه با استفاده از API با یکدیگر صحبت می‌کنند. برای آشنایی بیشتر با این نوع رابطه اگر آموزش Django REST هم رویش را ندیده‌اید دست کم این برگ Web API چیست را ببینید.

 

ساخت فروشگاه با جنگو و پایتون

ساخت یک فروشگاه اینترنتی با جنگو و پایتون امکان استفاده از کتابخانه‌های غنی پایتون را می‌دهد. امکان پیاده سازی هوش مصنوعی و داده کاوی برای بهبود تعامل با مشتری از این جمله است.

 

این آموزش در یک نگاه

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

در فصل دوم برای کدنویسی سرور یا همان بک اند فروشگاه از پایتون و فریم ورک جنگو استفاده کردیم اما جنگوی سنتی نه بلکه جنگو رست تا بتوانیم api های فروشگاه را تولید کنیم.

در فصل سوم دوباره به سراغ فرانت اند و اپ ری اکت مان رفتیم تا با مفهوم ریداکس آشنا شویم و از ان برای مدیریت وضعیت اپ استفاده کنیم.

در فصل چهارم با استفاده از ریداکس سبد خرید را به فروشگاه اضافه کردیم.

در فصل پنجم و ششم کاربران فروشگاه را مدیریت کردیم. امکان ورود / ثبت نام / مشاهده پروفایل و حتی روزآمد سازی اطلاعات پروفایل را برای کاربران فراهم کردیم.

در فصل هفتم بک اند و فرانت اند را با هم پیش بردیم برای ثبت سفارش.

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

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

برای دپلوی پروژه های فول استک دو روش و استراتژی مرسوم داریم که آن ها را در دوسکوی مختلف تست و دپلوی کردیم و یاد گرفتیم.

 

پیشنیاز های این دوره

• آشنایی مقدماتی با HTML ،CSS ،Bootstrap ،JavaScript برای فرانت اند.
• آشنایی مقدماتی با Python ،Django ،DjangoREST برای بک اند.

 

کلیدواژگان

آموزش ساخت فروشگاه فول استک با جنگو | فروشگاه فول استک با جنگو و ریکت | آموزش فروشگاه فول استک با جنگو و ریکت | ساخت فروشگاه با جنگو و ریکت

سر فصل ها

درس صفر: معرفی کلی این بسته آموزشی

 

فصل اول : ری اکت

درس ۰: معرفی دوره

• مروری به آموزش
• پیشنیاز آموزش
• مرجع آموزش
• ادامه مسیر

 

درس ۱: نصب و راه اندازی ری اکت

• وبسایت رسمی ری اکت reactjs نقطه شروع نصب
• نود جی اس یا Node.js چیست؟
• مدیریت بسته نود یا npm (node package manager) چیست؟
• نصب نود جی اس ۱۶ و بسته‌های پیشنیاز آن روی ویندوز
• مفهوم دستور npx به زبان ساده و اجرای آن
• نصب ری اکت با create-react-app
• اجرای لوکال ری اکت روی پورت ۳۰۰۰

 

درس ۲: راه اندازی محیط توسعه

• چرا محیط توسعه حرفه ای ؟
• راه اندازی VSCode به عنوان پیشنهاد
• باز کردن پروژه ری اکت در ویژوال استودیو کد
• اجرای ری اکت از ترمینال VS Code
• معرفی اکستنشن‌های (Extension) مورد نیاز پروژه

 

درس ۳: بررسی ساختار پروژه ری اکت

• کار پوشه node_modules
• بررسی فایل package.json
• مفهوم SPA یا Single Page Application
• مفهوم کامپوننت Component و صفحه Page
• ساختار react به عنوان یک اپ تک صفحه حذف فایل های پیش فرض اضافی
• تغییر فایل index.html و App.js

 

درس ۴: ایجاد کامپوننت در ری اکت

• ایجاد پوشه و فایل جاوا اسکریپت کامپوننت ها
• ایجاد کامپوننت های هدر و فوتر سایت
• استفاده از امت rfce و imp برای ایجاد و فراخوانی کامپوننت
• فراخوانی کامپوننت ‌های ساخته شده در App.js

 

درس ۵: نصب بوت استرپ در ری اکت

• یادآوری کاربرد bootstrap
• معرفی کتابخانه react-bootstrap
• معرفی وبسایت bootswatch برای قالب های آماده و رایگان
• نصب بوت استرپ در ری اکت با دستور npm install bootstrap
• استفاده از bootstrap.min.css در فایل index.js
• مفهوم destructing در javascript
• فراخوانی و استفاده از یک کامپوننت بوت استرپ در ری اکت

 

درس ۶: طراحی هدر و فوتر سایت با بوت استرپ

• امکان چند ترمینالی vscode
• کامپوننت‌های Container و Row و Col از بوت استرپ
• طراحی فوتر و کار text-center در کلاس‌های بوت استرپ
• یادآوری مفهوم vh در CSS و بردن فوتر به پایین صفحه
• استفاده از Nav و Navbar برای طراحی منو
• یادآوری تگ در html و دادن آیکن به منوها
• استفاده از cdnjs.com و فونت آیکن‌های awesome-font
• تنظیم پس زمینه و variant در Navbar

 

درس ۷: داده‌های نمونه و یادآوری API و JSON

• قرار دادن نمونه داده از وبسایت آمازون
• قرار دادن تصویر محصولات در پروژه ری اکت
• ایجاد لیست جاوا اسکریپتی از داده های جیسون
• یادآوری مختصر کارکرد API و JSON

 

درس ۸: طراحی کامپوننت پیش‌نمایش محصول

• ایجاد فایل Product.js
• یادآوری props در Function component ها در react
• دیستراکت کردن پراپرتی ورود به کامپوننت جاوااسکریپتی
• کامپوننت Card در بوت استرپ و تنظیمات استایل آن
• استفاده از Card.Img و Card.Title و Card.Body و Card.Text
• مفهوم backtick یا back quote در استرینگ جاوا اسکریپت
• معنی as در بوت استرپ

 

درس ۹: طراحی کامپوننت پیش‌نمایش محصول

• ایجاد فایل Product.js
• یادآوری props در Function component ها در react
• دیستراکت کردن پراپرتی ورود به کامپوننت جاوااسکریپتی
• کامپوننت Card در بوت استرپ و تنظیمات استایل آن
• استفاده از Card.Img و Card.Title و Card.Body و Card.Text
• مفهوم backtick یا back quote در استرینگ جاوا اسکریپت
• معنی as در بوت استرپ

 

درس ۱۰: طراحی کامپوننت نمایش امتیاز محصول

• تنظیم object-fit برای کادر عکس در css
• مفهوم contain در css
• ارسال چند پارامتر به کامپوننت در ری اکت
• استفاده از چند تگ span برای ساخت یک خط ابتکاری
• استفاده از تگ i برای درج آیکن ستاره در مورد نظرات
• معنی && در JSX
• تنظیم رنگ آیکن با اتریبیوت style
• یادآوری مختصر مفهوم em و rem در CSS

 

درس ۱۱: لینک دهی با Router در ری اکت

• نصب بسته react-router-dom
• کاربرد پکیج react-router-bootstrap
• مفهوم BrowserRouter و Route در react
• معنی path و component و exact در Route
• کاربرد Link برای تبدیل لینک های href و جلوگیری از reload
• کاربرد LinkContainer در لینک های منوی NavBar

 

درس ۱۲: طراحی صفحه نمایش محصول

• آبجکت match چیست ؟
• معرفی آبجکت match برای ارتباط path و url در ری اکت
• دریافت پارامترهای ارسالی توسط params از match
• تابع find در جاوا اسکریپت
• رفع مشکل عدم تطبیق Image از نظر width در بوت استرپ
• کار با ListGroup و ListGroup.Item در bootstrap
• غیرفعال کردن دکمه با disabled و نسبت دادن آن به صورت شرطی
• تنظیم کلاس button در CSS و بوت استرپ
• تنظیم ریسپانسیو صفحه با استفاده از ستون بندی نسبی مبتی بر flexbox
• تکمیل اجزای اصلی صفحه نمایش محصول و فروشگاه آنلاین

 

درس ۱۳: جمع‌بندی فصل اول

• مروری بر دستاوردهای این فصل
• نگاهی به ادامه مسیر در فصل‌های بعد
• تمرین‌هایی پیش از ادامه مسیر

 

فصل دوم : جنگو رست

درس ۰: معرفی دوره

• نگاهی به پروژه در پایان فصل دوم
• نگاهی به درس‌های این فصل
• پیشنیاز و مسیر پیش رو

 

درس ۱: چرخه ارتباط Frontend و Backend

• اپلیکیشن فول استک چیست؟
• اپ fullstack چه اجزایی دارد؟
• فرانت اند چیست؟
• بک اند چیست؟
• ارتباط frontend و backend چگونه است؟
• شرح اتصال فرانت اند و بک مبتنی بر پروژه

 

درس ۲: نصب جنگو

• پیشنیاز نصب django
• فرق نصب سراسری و استفاده از Virtual Environment
• ایجاد محیط مجازی با venv پایتون
• نصب جنگو با دستور pip install Django
• ایجاد پروژه جنگو با دستور django-admin statrproject
• اجرای جنگو روی لوکال هاست با دستور runserver

 

درس ۳: دریافت پاسخ جیسون از جنگو

• یادآوری ساختار جنگو
• نقش فایل manage.py در جنگو
• فایل wsgi چه می کند؟
• فرق wsgi با asgi
• نقش settings.py و urls.py سراسری جنگو
• ایجاد اپ base و افزودن کلاس BaseConfig
• ایجاد ماژول urls در اپ و فرق urls پروژه و اپ
• معرفی کلاس JsonResponse و پارامترهای آن
• ساخت JSON در ویو به جای HttpResponse
• اجرای پروژه و آزمایش Main Endpoint

 

درس ۴: ساخت API با جنگو

• سیستم Web API در یک پروژه چطور طراحی می‌شود؟
• نمونه‌ای از یک سیستم API و اهمیت Versioning
• نمایش فهرست Endpoint ها و نمایش محصولات
• تنظیم سیستم API در urls.py سراسری پروژه
• استفاده از یک لیست پایتون به عنوان محصولات فرضی
• مفهوم سریالایز کردن پایتون به جیسون

 

درس ۵: نصب و راه اندازی DRF به صورت ریشه‌ای

• نصب Django REST Framework با pip
• ایجاد Function-based View در جنگو رست فریمورک
• تبدیل ویوهای جنگو به ویوهای تابعی جنگو رست
• مفهوم و کار دکوریتور @api_view
• معنی پارامتر http_method_names
• مفهوم و کار کلاس Response جنگو رست
• راه اندازی پروژه و نمایش خروجی API توسط DRF

 

درس ۶: ایجاد API استخراج یک محصول

• تنظیم url حاوی id از نوع استرینگ در جنگو
• دریافت پارامتر دریافتی url در view
• طراحی منطق ویو برای استخراج یک محصول از روی id

 

درس ۷: فراخوانی API از سمت React

• معرفی axios و افزودن اکسیوس به ری اکت با npm install
• لینک مقایسه axios با fetch
• یادآوری مفهوم hook در ری اکت
• یادآوری هوک state در ری اکت
• یادآوری هوک effect در ری اکت
• افزودن هوک useState و useEffect
• مفهوم آرایه خالی [] به عنوان پارامتر دوم useEffect
• ارتباط useEffect با componentsDidMount و componenetDidUpdate
• روش ارسال get request با اکسیوس و بلاک then
• روش ارسال ریکوئست get با axios و سینتکس async/await
• بررسی عمیق نحوه کار تابع async و دستور await در جاوا اسکریپت
• آزمایش برقراری ارتباط ری اکت و جنگو

 

درس ۸: خطای CORS چیست؟ چطور باید CORS را اجرا کرد؟

• سیاست SOP یا Same Origin Policy چیست؟
• خط و مشی CORS یا Cross-origin Resource Sharing چیست؟
• چرا خطای Origin blocked by CORS در مرورگر نمایش داده می‌شود؟
• نگاهی به تاریخ توسعه وب و لزوم وجود SOP
• جایگاه جاوااسکریپت و DOM در پویا کردن سندهای وب
• سندهای پویای وب آسیب پذیر در اثر حمله‌های Cross Site
• مفهوم هدر origin و access control allow origin
• مقدار * و مقدار دقیق به عنوان منشا
• مفهوم origin یا منشا یکسان با طرح مثال
• مفهوم scheme و host name و port برای یکسان بودن منشا
• بررسی استاندارد کورس از روی MDN یا Mozilla Developers
• معنی و شرایط ریکوئست ساده یا simple request
• مقدارر هدر content type در درخواست‌های ساده
• بررسی یک request-response ساده و هدرهای آن منطبق با CORS
• معنی درخواست preflight یا پیش پرواز و شرایط آن
• فرآیند یک preflighted request و هدرهای آن
• معنی هدر access-control-request-method
• معنی هدر access-control-request-hearers
• معنی access-control-allow-methods و access-control-allow-headers
• معنی access-control-max-age
• مفهوم درخواست همراه با credentials
• ارسال و تنظیم cookie با رعایت CORS
• مفهوم هدر access-control-allow-credentials
• بایدهای credentialed requests در تنظیم هدر مطابق CORS
• معرفی مرجع برای مطالعه آسیب پذیری یا vulnerability مرتبط با CORS
• چرا با وجود SOP و CORS هنوز خطر حمله CSRF و XSS وجود دارد
• بررسی یک حالت حمله Cross-site Scripting یا XSS
• یادآوری برگ رایگان CSRF برای جلوگیری از این حمله‌ها با توکن

 

درس ۹: فعال کردن CORS در جنگو

• معرفی اپلیکیشن django-cors-headers
• نصب django-cors-headers با pip در جنگو
• افزودن corsheaders به installed_app پروژه
• افزودن CorsMiddleware به میدلورهای پروژه
• تنظیم منشاهای مورد اعتماد با CORS_ALLOWED_ORIGINS
  معنی CORS_ALLOW_ALL_ORIGINS

 

درس ۱۰: فراخوانی جزئیات محصول با تنظیم پروکسی

• اصلاح کامپوننت ProductScreen مشابه HomeScreen
• افزودن useEffect و useSate در کامپوننت جدید
• تبدیل hardcode url به مسیر نسبی در ری اکت
• تنظیم پروکسی در ری اکت با ویژگی proxy در package.json

 

درس ۱۱: مهاجرت پایگاه داده جنگو

• یادآوری تنظیمات پیش فرض پایگاه داده در جنگو
• موتور یا Engine دیتابیس پیش فرض جنگو
• نرم افزار SQLiteStudio و نحوه دانلود و استفاده آن
• امکان تغییر از sqlite به PostgreSQL در django
• اجرای migrate و ایجاد جدول‌های اپلیکیشن‌های درون ساخته جنگو
• بررسی ساختار فایل db,sqlite3 در SQLiteStudio

 

درس ۱۲: دیاگرام دیتابیس

• مفهوم و کاربرد database diagram
• چرا باید دیاگرام دیتابیس طراحی کنیم؟
• معرفی ابزار رایگان طراحی جدول‌‌های دیتابیس
• بررسی طرح پایگاه داده پروژه در drawsql.app

 

درس ۱۳: کدنویسی مدل‌ها

• تبدیل طرح دیتابیس به مدل جنگو
• مفهوم AutoField و BigAutoField
• مفهوم primary_key=True
• ایجاد ستون id اختصاصی در دیتابیس
• مفهوم DecimalField و TextField و CharField
• یادآوری ForeignKey در جنگو و on_delete
• فرق SET_NULL و CASCADE
• معنی max_digit و decimal_places
• یادآوری auto_now_add در DateTimeField
• فرق blank و null در مدل و فرم جنگو
• ایجاد مدل همه جدول‌های لازم

 

درس ۱۴: درج داده در دیتابیس توسط پنل مدیریت

• ایجاد دستور SQL توسط makemigrations و فایل initial
• تبدیل مدل به جدول پایگاه داده توسط دستور migrate
• ثبت نام مدل در پنل مدیریت (Admin Site) با متد register
• ایجاد یک نمونه داده محصول در دیتابیس توسط پنل مدیریت
• نمایش استرینگی رکوردها با تنظیم تابع __str__
• تابع __str__ در پایتون لزوم تبدیل str برای فیلدهای null یا blank
• بررسی داده درج شده در sqlitestudio

 

درس ۱۵: آپلود عکس در جنگو

• ایجاد ImageField برای قابلیت بارگذاری عکس در مدل
• نصب کتابخانه Pillow پیلو در جنگو برای کار با تصویر
• ساخت migration و مهاجرت تغییرات مدل به جدول دیتابیس
  آپلود عکس در جنگو و مسیر پیش فرض آپلود فایل ها در پروژه
• ایجاد پوشه static برای فایل‌های css و js و images
• مفهوم STATICFILES_URL در جنگو
• مفهوم MEDIA_ROOT و MEDIA_URL در django
• کار تابع static برای ساخت url از فایل های یک پوشه
• ساخت لینک عمومی نمایش تصویر بعد از بارگذاری
• معنی upload_to در FileField و ImageField
• معرفی منابع مطالعاتی بیشتر

 

درس ۱۶: تبدیل آبجکت کوئری به جیسون با سریالایزر

• کار serializer در جنگو چیست ؟
• ایجاد ماژول serializers برای کلاس‌های سریالایزر
• تبدیل خروجی ویو به جیسون با استفاده از سریالایزر
• آزمایش خروجی جیسون دیتابیس سمت ری اکت
• مفهوم پارامتر many و پارامترهای model و fields
• کار ModelSerializer از ماژول serializers در Django REST
• نمایش داده‌های جیسون از دیتابیس جنگو در ری اکت

 

درس ۱۷: جمع‌بندی

• دستاوردهای این فصل
• نگاهی به مسیر پیش رو

 

فصل سوم : ریداکس

درس ۱: ریداکس چیست؟ ــ مفهوم و نحوه پیاده سازی ریداکس

• پیشنیاز آموزش ریداکس
• ریداکس چیست؟ تعریف استاندارد Redux
• ریداکس یک الگو است یا کتابخانه؟
• چرا و کجا از Redux استفاده کنیم؟
• آموزش کدنویسی اکشین و استور و ریدوسر در ریداکس
• ریداکس برای هر اپ جاوا اسکریپتی
• امکانات Redux ToolKit
• پکیچ react-redux
• مفهوم middleware در ریداکس
• تابع applyMiddleware و تابع combineReducer
• فرق createStore و configureStore
• نمونه پروژه ریداکس و پیاده‌سازی مدرن ریداکس
• روش خودآموزی برای ری اکت و دیگر فریمورک‌ها
• ریداکس در چه پروژه‌هایی مفید است؟
• مفهوم predictable و debuggable در ریداکس چیست ؟

 

درس ۲: نصب ریداکس و وابستگی‌ها

• نصب redux devtools برای Chrome و Firefox و Edge
• نصب redux برای مدیریت استیت
• نصب react-redux برای بایندینگ ریداکس به ری اکت
• نصب redux-thunk برای مدیریت state در درخواست‌های Async
• نصب redux-devtools-extension برای اتصال store ریداکس به مرورگر

 

درس ۳: ایجاد Store توسط ریداکس

• ایجاد فایل store برای نوشتن کدهای ایجاد استور به صورت مستقل
• تابع createStore برای ساخت store
• تابع combineReducers برای ترکیب reducer های مختلف اپ
• تابع applyMiddleware برای افزودن میدلورهایی مثل thunk به redux
• فراخوانی ماژول thunk از redux-thunk
• نحوه ساخت store با composeWithDevTools و کار آن
• مفهوم عملگر Spread در جاوا اسکریپت و تایپ اسکریپت
• مفهوم عبارت export default در JavaScript
• مفهوم Provider در react-redux و پارامتر store
• بررسی استور ساخته شده با افزونه Redux DevTools

 

درس ۴: ایجاد ریدوسر برای فهرست محصولات

• مفهوم ریدوسر reducer چیست؟
• ورودی action و state در تابع ریدوسر
• ایجاد ماژول productReducers
• افزودن ریدوسر به تابع combineReducers
• بررسی چرخه ارتباط Store و Reducer

 

درس ۵: ایجاد اکشن برای فهرست محصولات

• مفهوم اکشن یا action در redux
• ارتباط ریدوسر و اکشن
• ایجاد ماژولی برای نگهداری ثابت‌ها
• ایجاد اکشن دریافت فهرست محصولات
• مفهوم dispatch در جاوا اسکریپت
• تخصیص type و payload به action
• نقش thunk در امکان تعریف اکشن async

 

درس ۶: فراخوانی اکشن با dispatch

• معرفی هوک useDispatch در react-redux
• معرفی هوک useSelector در react-redux
• دیستراکت state با useseelctor
• پر کردن فهرست محصولات با فراخوانی اکشن
• بررسی پروژه و اطمینان از درستی کار

 

درس ۷: نمایش Spinner در هنگام فراخوانی سرور

• استفاده از فیلدهای state به صورت خام
• معرفی کامپوننت Spinner در react-bootstrap
• معنی sr-only در بوت استرپ و css
• معنی display در css و مقدار block
• معنی margin auto در css

 

درس ۸: نمایش Alert در هنگام دریافت خطای سرور

• معرفی کامپوننت Alert در react-bootstrap
• مفهوم variant در Alert
• امکان درج لینک با Alert.Link
• امکان درج استایل در Alert
• ویژگی‌های dismissible و show در Alert
• کامپوننت Message به عنوان wrapper برای Alert
• نمایش پیام خطا با پاس دادن error به Message

 

درس ۹: تمرین ریداکس با پیاده‌سازی صفحه محصول

• ایجاد ثابت‌ها در constants
• ایجاد ریدوسر جزئیات محصول
• ایجاد اکشن فراخوانی محصول از سرور
• ثبت نام ریدوسر در استور
• اجرای اکشن با دیسپچ کردن اکشن
• استفاده از هوک useDispatch برای اجرای اکشن
• استفاده از هوک useSeletor برای دسترسی به استیت
• دیستراکت جزئیات محصول از state
• نمایش اسپینر لودینگ و الرت خطا مشابه صفحه خانه
• اجرا و بررسی diff در redux devtools extension

 

درس ۱۰: جمع بندی

• مرور دستاوردهای این فصل
• مراحلی که پیش رو داریم

 

فصل چهارم :  سبد خرید

درس ۰: این فصل در یک نگاه

• نگاهی به پیشرفت پروژه در پایان این فصل
• نگاهی به محتوای تخصصی این فصل
• نگاهی به مسیر پیش رو

 

درس ۱: تعیین تعداد سفارش کالا

• تعیین ظرفیت محصول بر اساس موجودی انبار
• نمایش گزینه تعداد سفارش در صفحه محصول
• فرق Array و new Array در جاوا اسکریپت JS
• بررسی استاندارد اکما ECMA
• کاربرد تابع map در آرایه برای کپی کردن پس از تغییر
• تابع keys در آرایه‌ها
• عملگر spread یا … در js
• فرق Select و Dropdown در طراحی UI
• مفهوم کلیدواژه ‘as’ در ری اکت
• مفهوم as select در react
• شخصی سازی استایل select با custom
• متد onChange در FormControl
• نحوه گرفتن تغییر اجزای فرم در ری اکت

 

درس ۲: دکمه افزودن سفارش به سبد

• رویداد onClick دکمه در بوت استرپ
• نوشتن Handler برای رویداد کلیک
• مفهوم history در js
• مفهوم هوک useHistory در ریکت
• تابع push در history
• فرق Link و onClick برای مدیریت رویداد کلیک
• ری اکت روتر و آبجکت هسیتوری
• انتقال تعداد محصول به سبد با qty
• معنی ? در پایان path در ری اکت

 

درس ۳: ریدوسر افزودن سفارش به سبد

• تعریف constant برای اکشن افزودن به سبد
• تعریف تابع ریدوسر با ;کلید cartItems در state
• مفهوم …state در روزآمدی ریداکس
• مفهوم === سه علامت مساوی در جاوا اسکریپت
• استفاده از find برای حلقه در آرایه ها
• استفاده از map برای به روزرسانی اعضای آرایه
• اضافه شدن cartItems به ریداکس

 

درس ۴: اکشن افزودن سفارش به سبد

• ایجاد فایل جداگانه برای تابع Action Creator
• فرق اکشن ساده و ایسینک
• نقش middleware در redux
• ریداکس تانک چگونه کار می کند؟
• درک تابع thunk
• درک تابع action در ریداکس تانک
• مفهوم next در redux thunk
• متد getState در sgtore و ریداکس
• صدا کردن api در اکشن به کمک axios و await
• پر کردن payload اکشن با جواب api سرور
• مفهوم localStorage و فرق آن با sessionStorage
• ذخیره بخشی از درخت استیت در local storage
• متد JSON.stringify و JSON.pars برای ذخیره و فراخوانی داده

 

درس ۵: ذخیره سبد خرید با ریداکس

• دریافت id محصول بخش پویای url
• دریافت query parameters با استفاده از location
• شیوه دسترسی به location با هوک useLocation
• ویژگی search در location و react-router
• تجزیه کوئری با متد split در js
• استفاده از useDispatch برای پرتاب action
• استفاده از useSelector برای دریافت state

 

درس ۶: نمایش سفارش‌ها در سبد

• نمایش پیام سبد خالی با Alert
• نمایش سطر به سطر آیتم های سبد
• نقش پارارمتر fluid در image بوت استرپ
• لینک به صفحه محصول با Link از react-router-dom

 

درس ۷: نمایش مجموع سبد خرید

• اصلاح استایل css سند index
• یادآوری مفهوم rem در css
• تابع reduce در جاوا اسکریپیت
• استفاده از reduce برای محاسبه مجموع سبد
• ساخت دکمه تکمیل خرید

 

درس ۸: حذف سفارش از سبد

• ایجاد دکمه حذف سفارش
• ایجاد آیکن با تگ i و فوت font-awesome
• ایجاد اکشن حذف از سبد در ریداکس
• ایجاد ریدوسر حذف از سبد در ریداکس
• اجرای اکشن حذف و آزمون عملکرد

 

درس ۹: جمع‌بندی

• نگاه کوتاه به محتوای این فصل
• نگاهی به مسیر پیش رو

 

فصل پنجم : اعتبارسنجی بک اند

درس صفر: نگاهی به دوره

– نگاهی به پیشرفت پروژه در پایان این فصل

– نگاهی به محتوای تخصصی این فصل

– نگاهی به مسیر پیش رو

 

درس یکم :‌ AAA چیست

ـ AAA به چه معناست
ـ مراحل AAA به چه صورت است
ـ کارایی AAA چیست

 

درس دوم : JWT چیست

ـ درک سیستم احراز هویت jwt
– انواع گفتگوهای بین سرور و کلاینت جهت اعتبارسنجی کاربر
ـ مزیت های روش گفتگوی توکنی بین سرور و کلاینت
ـ اشنایی با اجزای JWT یا ( Json Web Token )

 

درس سوم : نصب postman

– postman چیست و چرایی استفاده از آن
ـ نصب نرم افزار postman و تنظیم ان
ـ درک workspace , environment, collection و variable در پست من

 

درس چهارم :‌ نصب JWT بر روی پروژه

ـ اضافه کردن jwt به پروژه
ـ مشاهده کردن محتوای یک jwt

 

درس پنجم :‌ شخصی سازی JWT

ـ اضافه کردن اطلاعات در بخش payload توکن
ـ تغییر زمان از کار افتادن توکن
ـ شخصی سازی ریسپانس کلی توکن

 

درس ششم : USER SERIALIZERS

ـ ساخت ویو پروفایل کاربر
ـ ساخت سریالایزرهای لازم کاربران
ـ شخصی سازی ریسپانس توکن با سریالایزر های کاربران

 

درس هفتم : تنظیم سطح دسترسی

– تنظیم سطح دسترسی در سطح ویو
ـ محدود کردن نگاشت getUserProfile به احرازهویت بودن کاربر
ـ ساخت ویو برای کاربر مدیر جهت مشاهده تمام کاربران
ـ استفاده از IsAdmin permssion

 

درس هشتم :‌ ثبت نام کاربر

ـ ساخت ویو ثبت نام کاربر
ـ مدیریت خطای ایمیل های تکراری با ( try exception handling )
– کار با تابع make_password

 

درس نهم :‌ ورود با email

– کار با سیگنال جهت هماهنگ نگهداشتن مقدار فیلد username با email
– کار با تابع pre_save

 

درس دهم :‌ جداسازی کدها

ـ تبدیل کردن ماژول های urls.py , views.py اپ base به فولدر
ـ جداسازی کدها از هم قرار دادن هر کدام در بخش مناسب

 

درس یازدهم : مرور و جمع بندی

ـ دستاورد های ما
ـ مسیر پیشه رو

 

فصل ششم: احراز هویت کاربر

درس صفر: این فصل در یک نگاه

• نگاهی به پیشرفت پروژه در پایان این فصل
• نگاهی به محتوای تخصصی این فصل
• نگاهی به مسیر پیش رو

 

درس اول : ریدوسر و اکشن ورود

• تعریف constanst برای اکشن ورود
• تعریف تابع ریدوسر با کلید userInfo
• یاداوری تابع ریداکس تانک
• تعریف تابع اکشن ورود
• صدا زدن api ورود با axios.post
• ذخیره state و پاسخ درخواست در Localstorage
• JSON.stringify در localStorage

 

درس دوم : ساخت صفحه ورود

• ایجاد FormContainer برای داشتن یک استایل کلی در فرم ها
• استفاده از Emmet برای ایجاد سریع فرم ها
• ساخت فرم با ری اکت بوت استرپ
• متد onChange در FormControl
• نحوه گرفتن مقادیر Input ها و پر کردن state
• متد onSubmit در Form
• تعریف متغیر redirect در path برای هدایت کردن کاربر

 

درس سوم : اکشن خروج

• نمایش گزینه‌ها بر حسب وضعیت کاربر ( لاگین بودن یا نبودن)
• NavDropdown در react-bootstrap
• صدا زدن تابع در ازای رویداد onClick در NavDropdown.Item
• تعریف اکشن خروج
• حذف ایتم از localStorage

 

درس چهارم : ریدوسر و اکشن ثبت نام

• تعریف constanst برای اکشن ثبت نام
• یاداوری تابع ریداکس تانک
• تعریف تابع اکشن ثبت نام
• صدا زدن api ثبت نام با axios.post
• ذخیره state و پاسخ درخواست در Localstorage
• JSON.stringify در localStorage

 

درس پنجم : ساخت صفحه ثبت نام

• ایجاد FormContainer برای داشتن یک استایل کلی در فرم ها
• استفاده از Emmet برای ایجاد سریع فرم ها
• ساخت فرم با ری اکت بوت استرپ
• متد onChange در FormControl
• نحوه گرفتن مقادیر Input ها و پر کردن state
• متد onSubmit در Form

 

درس هفتم : ریدوسر و اکشن پروفایل

• تعریف constanst برای اکشن مشخصات کاربر
• تعریف تابع ریدوسر با کلید user
• یاداوری تابع ریداکس تانک
• تعریف تابع اکشن مشخصات کاربر
• صدا زدن api مشخصات کاربر با axios.post
• ذخیره state و پاسخ درخواست در Localstorage
• JSON.stringify در localStorage
• تنظیم header درخواست و قرار دادن توکن

 

درس هشتم : ساخت صفحه پروفایل

• ایجاد صفحه پروفایل کاربر
• ایجاد فرم در صفحه پروفایل کاربر
• نمایش اطلاعات کاربر در فرم
• متد push در history برای هدایت کردن کاربر
• دیباگ کردن نمایش اطلاعات کاربر قبلی

 

درس نهم : امکان روزآمد سازی پروفایل

• تعریف constanst برای اکشن روزآمد سازی پروفایل
• تعریف تابع ریدوسر روزآمد سازی پروفایل
• یاداوری تابع ریداکس تانک
• تعریف تابع اکشن روزآمد سازی پروفایل
• صدا زدن api روزآمد سازی پروفایل با axios.post
• ذخیره state و پاسخ درخواست در Localstorage
• JSON.stringify در localStorage
• تنظیم header درخواست و قرار دادن توکن
• متد onSubmit در فرم نمایش مشخصات کاربر
• نوشتن Handler برای رویداد onSubmit فرم
• کاربرد e.preventDefault

 

درس دهم : مدیریت پیام‌ها

• حل کردن باگ‌های ریز نمایشی در پروفایل
• نمایش صحیح و درست منشا‌ء خطاها
• نمایش پیام‌های مناسب به کاربر

 

درس یازدهم: فرایند تایید ایمیلی در جنگو

• درک مراحل و فرایند کلی تایید ایمیلی
• بررسی دمو ثبت نام عادی ( بدون تایید ایمیلی )
• بررسی دمو ثبت نام با تایید ایمیلی
• بررسی کد ثبت نام با تایید ایمیلی

 

درس دوازدهم: اصلاح ویو ثبت نام

• تغییر ویو ثبت نام برای تایید ایمیلی
• ایجاد activation link با jwt
• بررسی حالت های مختلف وضعیت کاربر و عملکرد درست
• Status ریسپانس ها در جنگو رست

 

درس سیزدهم: ارسال ایمیل فعال سازی

• ایجاد لینک فعال سازی
• ارسال ایمیل با کلاس EmailMessage
• تفاوت EmailMessage با send_mail
• تنظیم EMAIL_BACKEND
• بررسی عملکرد با نرم افزار پست من

 

درس چهاردهم: فعال سازی حساب کاربر

• Decode کردن توکن و استخراج اطلاعات
• فعال سازی حساب کاربر با اطلاعات به دست امده
• هدایت کاربر با HttpResponseRedirect

 

درس پانزدهم: اصلاح فرانت اند برای تایید ایمیلی

• ایجاد تغییرات در اکشن ثبت نام
• ایجاد تغییرات در صفحه ثبت نام
• ایجاد تغییرات در هدایت کردن‌ها
• انجام کاری در ازای بودن ابجکتی که گاهی اوقات وجود دارد و گاهی اوقات نه
• ایجاد تغییرات در صفحه ورود
• نمایش درست پیام ها با alert های درست

 

درس شانزدهم : ارسال ایمیل در جنگو به کمک سرورهای گوگل

• کاربرد Less secure app access در اکانت گوگل
• تنظیم Email Provider برای استفاده از سرورهای گوگل
• معرفی Email Provider های دیگر برای استفاده از دیگر سرویس دهنده ها
• تفاوت TLS و SSL
• توضیح مفهوم TLS Handshake
• Cipher suits چیست

 

درس هفدهم: تازه سازی توکن دسترسی ( بک-اند )

• تنظیم نگاشت refresh token
• درک ROTATE_REFRESH_TOKENS در تنظیمات JWT
• درک BLACKLIST_AFTER_ROTATION در تنظیمات JWT
• کاربرد اپ token_blacklist در JWT

 

درس هجدهم: مفهوم Interceptor‌ها در axios

• متد create در axios
• درک مفهوم Interceptore در axios
• چرایی استفاده از interceptor
• نصب jwt-decode و dayjs
• ساخت axios اختصاصی
• متد unix در dayjs
• متد diff در dayjs
• تازه سازی توکن دسترسی قبل از ارسال درخواست کاربر

 

درس نوزدهم: تازه سازی توکن دسترسی ( فرانت-اند )

• تعریف اکشن به روز کردن توکن‌ها
• استفاده کردن از axios خودمان
• چرایی اصلاح کردن اکشن روزآمد سازی پروفایل
• اصلاح اکشن روزآمد سازی پروفایل
• علاج از کار افتادن refresh token و هدایت کاربر به صفحه لاگین

 

درس بیستم: مدیریت کردن تعداد درخواست‌ها

• Throttling چیست
• پیاده کردن مود User filter در throttling
• پیاده کردن مود View filter در throttling
• درک scopeها در throttling
• اعمال سیاست بر روی ویوها

 

درس بیست و یکم: جمع بندی

نگاه کوتاه به محتوای این فصل
نگاهی به مسیر پیش رو

 

فصل هفتم: ثبت سفارش

درس صفر:  این فصل در یک نگاه

• نگاهی به پیشرفت پروژه در پایان این فصل
• نگاهی به محتوای تخصصی این فصل
• نگاهی به مسیر پیش رو

 

درس اول : ثبت آدرس ارسال سفارش

• تعریف ثابت برای اکشن ذخیره آدرس
• تعریف تابع ریدوسر جدید برای ادرس ارسال سفارش
• تعریف اکشن ذخیره کردن آدرس ارسال سفارش
• ایجاد صفحه ای حاوی فرم برای دریافت آدرس ارسال سفارش
• استفاده از اکشن در ازای سابمیت شدن فرم

 

درس دوم : کامپوننت مراحل خرید

• ایجاد کامپوننت جدید
• دریافت مراحل از ورودی
• نوشتن شرط برای فعال نمودن لینک‌ها
• استفاده از این کامپوننت در صفحه ثبت ادرس ارسال سفارش

 

درس سوم : ثبت روش پرداخت

• استفاده از کامپوننت مراحل خرید
• تعریف ثابت برای اکشن ذخیره ثبت روش پرداخت
• تعریف تابع ریدوسر جدید برای روش پرداخت
• تعریف اکشن ذخیره کردن روش پرداخت
• ایجاد صفحه ای حاوی فرم برای ثبت روش پرداخت
• استفاده از اکشن در ازای سابمیت شدن فرم

 

درس چهارم : ساخت صفحه ثبت سفارش

• استفاده از کامپوننت مراحل خرید
• ایجاد صفحه ثبت سفارش
• ایجاد UI
• واکشی و نمایش اطلاعاتی مثل : آدرس ارسال سفارش،  روش پرداخت، نمایش ایتم های سفارش، آشنایی با متد .toFixed()، نمایش جمع قیمت ایتم ها، محاسبه و نمایش هزینه ارسال سفارش، محاسبه و نمایش مالیات، نمایش هزینه کل یا همان قیمت آخر فاکتور خرید

 

درس پنجم : ثبت سفارش سمت بک-اند

• ایجاد نگاشت سفارش جدید
• ایجاد ویو ثبت سفارش جدید

 

درس ششم : ثبت سفارش سمت فرانت-اند

• تعریف ثابت برای اکشن ثبت سفارش
• تعریف تابع ریدوسر جدید برای ثبت سفارش
• تعریف اکشن ثبت سفارش
• استفاده از axiosInstance که در فصل قبل ساختیم
• استفاده از اکشن در ازای رویداد onClick دکمه place order

 

درس هفتم :‌ نمایش جزئیات یک سفارش (بک-اند)

• ایجاد نگاشت دریافت یک سفارش
• ایجاد ویو دریافت یک سفارش با استفاده از id

 

درس هشتم : نمایش جزئیات یک سفارش (ریداکس)

• تعریف ثابت برای اکشن واکشی جزئیات سفارش
• تعریف تابع ریدوسر جدید برای واکشی جزئیات سفارش
• تعریف اکشن واکشی جزئیات سفارش

 

درس نهم : نمایش جزئیات یک سفارش (فرانت-اند)

• ایجاد صفحه نمایش جزئیات یک سفارش
• ایجاد UI و نمایش اطلاعات سفارش ( تقریبا شبیه به صفحه place order )
• نوشتن تابع useEffect و dispatch کردن اکشن دریافت جزئیات یک سفارش
• استفاده از Alert برای نمایش اطلاعاتی چون به وضعیت ارسال سفارش و پرداخت آن

 

درس دهم : نمایش فهرست سفارش ها در پروفایل

• ایجاد نگاشت دریافت لیست سفارش
• ایجاد ویو دریافت لیست سفارش
• تعریف ثابت برای اکشن لیست سفارش
• تعریف تابع ریدوسر جدید لیست سفارش
• تعریف اکشن لیست سفارش
• ایجاد جدول برای نمایش لیست سفارش ها در صفحه پروفایل
• استفاده از اکشن لیست سفارش ها در useEffect

 

درس یازدهم : جمع بندی

• نگاه کوتاه به محتوای این فصل
• نگاهی به مسیر پیش رو

 

فصل هشتم: درگاه پرداخت

درس صفر: این فصل در یک نگاه

• نگاهی به پیشرفت پروژه در پایان این فصل
• نگاهی به محتوای تخصصی این فصل
• نگاهی به مسیر پیش رو

 

درس اول:‌ درگاه پرداخت انواع آن

• کاربرد درگاه پرداخت
• انواع درگاه پراخت
• مزایا ومعایب هر کدام

 

درس دوم :‌ ثبت نام و دریافت درگاه

• ثبت نام در آیدی پی
• ساخت وب سرویس در آیدی پی
• دریافت درگاه
• چرایی و دریافت کدمالیاتی

 

درس سوم:‌ فرآیند پیاده سازی درگاه

• بررسی فرایند پیاده سازی درگاه با فلوچارت

 

درس چهارم:‌ ایجاد دکمه پرداخت سفارش

• ایجاد دکمه پرداخت
• درخواست زدن به بک اند با axios
• درک مفهوم then ,catch

 

درس پنجم:‌ ایجاد مدل برای ذخیره تراکنش ها

• چرایی ساخت مدل IdPay در نرم افزار drawsql.app
• ساخت مدل Idpay

 

درس ششم:‌ ایجاد ویو پرداخت سفارش

• تعریف ویو payOrder
• پیاده سازی منطق پرداخت سفارش
• استفاده از else در try exception

 

درس هفتم:‌ ایجاد تراکنش در آیدی پی

• ساخت تابع createIdPay
• نصب ماژول requests
• درخواست زدن به سرور آیدی پی
• استفاده از requests.post
• کاربرد json.dumps()

 

درس هشتم: اولین دیدار با درگاه پرداخت

• پایان رسیدن انتظار
• اولین دیدار با درگاه پرداخت

 

درس نهم:‌ بازگشت به سایت پذیرنده

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

 

درس دهم:‌ تایید تراکنش

• نوشتن منطق تایید تراکنش
• ساخت تابع روزآمد سازی اطلاعات تراکنش در دیتابیس
• ساخت تابع ارسال درخواست تایید تراکنش به آیدی پی

 

درس یازدهم: ثبت اطلاعات تراکنش در دیتابیس

• ساخت تابع idpayCompleteDB
• مفهوم TimeZone و چرایی وجود آن
• تبدیل timestamp به datetime
• استفاده از تابع make_aware()
• تغییر وضعیت سفارش به پرداخت شده

 

درس دوازدهم:‌ فرایند استعلام تراکنش

• بررسی فرایند استعلام وضعیت تراکنش با فلوچارت

 

درس سیزدهم: استعلام از دیتابیس ایی شاپ

• واکشی اطلاعات تراکنش ازدیتابیس

 

درس چهاردهم: ساخت تابع makeInquiryPayResult

• ساخت تابع makeInquiryPayResult
• ارسال پیام مناسب به فرانت-اند نسبت به کد وضعیت

 

درس پانزدهم: استعلام از آیدی پی

• ساخت تابع idpayInquiry
• ارسال درخواست استعلام تراکنش
• استفاده از کتابخانه requests.post
• نوشتن منطق استعلام وضعیت تراکنش

 

درس شانزدهم: پاسخ استعلام از آیدپی

• جیسونی کردن پاسخ استعلام
• ثبت اطلاعات در دیتابیس

 

درس هفدهم:‌ Private Route در ری اکت

• محافظت از مسیرها در برابر کاربر مهمان
• ساخت تابع PrivateRoute
• استفاده از Redirect در react-router-dom
• مفهوم …rest

 

درس هجدهم: ساخت صفحه استعلام تراکنش

• ساخت صفحه PayResultScreen
• ارسال اطلاعات به بک-اند برای استعلام
• نمایش خطاها در کنسول
• نمایش جزئیات تراکنش در ListGroup
• دیباگ کردن صفحه جزئیات تراکنش

 

درس نوزدهم:‌ سازگار سازی مقادیر

• نحوه محاسبه مالیات در ایران
• ایده ای جدید برای هزینه حمل و نقل سفارش
• ذخیره واحد پول به تومان

 

درس بیستم: جمع بندی

• نگاه کوتاه به محتوای این فصل
• نگاهی به مسیر پیش رو

 

فصل نهم: دپلوی

درس صفر: معرفی دوره

• نگاهی به این فصل

 

درس اول : مقایسه زیر ساختی هاست و ابر

• نحوه عملکر هاست و پردازش درخواست ها
• تفاوت ساختار ابر با هاست
• درک مفاهیم worker ،master ،load balancer در ابر
• نحوه پردازش درخواست کاربر در ابر

 

درس دوم : فرایند دپلوی روی ابر

• درک فرایند کلی دپلوی
• درک مفاهیم container ،Dockerfile ،registry ،docker image

 

درس سوم : معرفی runflare و روش های دپلوی

• درک فرایند روش CLI
• درک فرایند روش github/lab( CI/CD )

 

درس چهارم :‌ ایجاد پروژه در runflare

• ایجاد پروژه
• مفهوم دیسک
• مفهوم Deployment
•  نحوه محاسبه قیمت

 

درس پنجم: اتصال پروژه به دامنه اختصاصی

• نحوه اتصال دامنه
• ایجاد زیر دامنه ( subdomain )
• اتصال دامنه اصلی و زیر دامنه به ایتم ها

 

درس ششم: دپلوی بک – اند به روش runflare-cli

• نصب پکیج runflare
• دپلوی پروژه توسط runflare-cli
• حل خطای DisallowedHost در جنگو
• تنظیم مسیر و دیسک برای دیتابیس پیش فرض جنگو
• تنظیم مسیر و دیسک برای استاتیک فایل ها در جنگو
• تنظیم مشخصات ایمیل ( نام کاربری و رمز عبور ) در بک-اند برای ارسال ایمیل
• تظیم origin و دامنه های مجاز در بک-اند
• تنظیم دامنه و زیر دامنه در کد
• جمع بندی درس دپلوی بک-اند

 

درس هفتم: دپلوی فرانت – اند به روش github ( CI/CD )

• ایجاد مخزن در گیت هاب
• دریافت توکن از گیت هاب
• پوش کردن کدها در مخزن روی گیت هاب
• دپلوی فرانت – اند

 

درس هشتم: راه اندازی پرداخت آنلاین

• مدارک لازم برای فعال سازی درگاه پرداخت
• نحوه فعال سازی درگاه پرداخت

 

درس نهم: جمع بندی و ادامه مسیر

• دستاوردهای ما در این فصل
• ادامه مسیر

 

درس ۱۰: خطای حل نشده و پایانی باز

• توضیح وجود پروکسی در فایل package.json
• چرایی استفاده از متغیر محیطی DANGEROUSLY_DISABLED_HOST_CHECK = true
• محافظت کردن از api

 

درس ۱۱: روشی دیگر برای دپلوی

• بررسی روش اول ( جنگو و ری اکت به صورت جداگانه )
• بررسی روش دوم ( جنگو سرو کننده ری اکت )
• مزایا و معایب روش دوم
• فرایند کار
• نمایش نتیجه کار
• تنظیم بک-اند برای سرو کردن ری اکت
• بیلد گرفتن از ری اکت
• بایند کردن بک-اند به فرانت
• دپلوی به روش دوم
• نمایش نتیجه دپلوی
• ساخت و اماده سازی پروژه در لیارا
• آماده سازی بک-اند برای دپلوی در لیار
• اتصال پروژه به دیسک ها در لیارا
• تنظیم فرانت-اند و بیلد مجدد
• دپلوی پروژه با استفاده از لیارا دسکتاپ

 

درس ۱۲: جمع بندی