Django + React: ایجاد یک وب سایت املاک و مستغلات مبتنی بر مکان

در این دوره ، یادگیری و تمرین React ، Django ، Django Rest Framework ، Geodjango ، UI Material ، React-Leaflet ، Postgis

عنوان اصلی : Django + React : Build a Location-Based Real Estate Website

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

مقدمه:
نمای کلی دوره
چیزی که خواهیم ساخت
طرح کلی دوره
اصول React:
شروع با React
اجزای واکنش
معرفی JSX
اطلاعات بیشتر در مورد اجزای React
React props
حلقه زدن از طریق آرایه ای از داده ها
State (قلاب useState)
رسیدگی به رویدادها
اطلاعات بیشتر در مورد ایالت
ناوبری با react-router-dom
کار با پیوندها
نتیجه گیری بخش
اصولات رابط کاربری Material :
مقدمه
شروع به کار با Material UI
ویژگی های مؤلفه MUI
جزء تایپوگرافی
سربلند باشید!
یک ظاهر طراحی با رابط کاربری Material
طرح‌بندی صفحه با رابط کاربری Material
اطلاعات بیشتر در مورد شبکه کانتینر
ساخت صفحه اصلی: مقدمه
ساخت صفحه اصلی: سرصفحه
ساخت بقیه صفحه اصلی
سازماندهی مجدد کد
نتیجه گیری بخش
مبانی React-Leaflet:
React-Leaflet چیست؟
نصب React-Leaflet
تغییر طرح‌بندی صفحه «فهرست‌ها».
نشانگر نقشه
پنجره نشانگر
ذخیره موقعیت نشانگر در حالت
نمایش لیست ها روی نقشه
نمایش لیست ها در کارت های MUI
طراحی/وارد کردن اشکال در React-Leaflet
تنظیم Backend:
مقدمه / راه اندازی محیط مجازی
نصب جنگو
تنظیم مدل فهرست‌بندی
افزودن فیلد مکان به مدل لیست
نصب GeoDjango
راه اندازی پایگاه داده فضایی (PostgreSQL و PostGIS)
تنظیم یک مدل کاربر سفارشی
ایجاد لیست اموال در پنل مدیریت
ایجاد یک نقطه پایانی API برای فهرست‌های دارایی
اتصال Django و React:
مقدمه / راه اندازی Django Cors Headers
ایجاد درخواست از قسمت جلویی به قسمت پشتیبان
معرفی قلاب useEffect
ایجاد درخواست با Axios و قلاب useEffect
روش صحیح واکشی داده با React
بررسی فیلدهای تصویر:
افزودن فیلدهای تصویر به مدل فهرست
پردازش تصاویر در React
تأیید هویت کاربر:
مقدمه / نصب Djoser
ساخت صفحه ثبت نام
ساخت صفحه ورود
ثبت کاربر (قسمت 1)
ثبت کاربر (قسمت 2)
روش دیگری برای مدیریت حالت در React
استفاده از immer-reducer در فایل Register
ورود به سیستم (قسمت 1)
ورود به سیستم (قسمت 2)
رندر شرطی هدر (قسمت 1)
رندر شرطی هدر (قسمت 2)
خروج از سیستم (قسمت 1)
خروج از سیستم (قسمت 2)
افزودن فهرست‌ها از قسمت ظاهری:
مقدمه / به روز رسانی مدل لیست
ساخت «صفحه افزودن دارایی»
قرار دادن نقشه روی فرم
آپلود تصاویر
نهایی کردن فرم
ارائه درخواست برای افزودن فهرست دارایی (قسمت 1)
ارائه درخواست برای افزودن فهرست دارایی (قسمت 2)
تغییر صفحه «فهرست‌ها».
بررسی نمایه های کاربر:
مقدمه
ایجاد مدل نمایه
استفاده از سیگنال های جنگو برای ایجاد نمایه برای هر کاربر
اعمال محدودیت در صفحه "افزودن دارایی".
ساخت صفحه نمایه (قسمت 1)
ساخت صفحه نمایه (قسمت 2)
ساخت صفحه نمایه (قسمت 3)
تغییر صفحه «فهرست‌ها».
ساخت صفحه «آژانس‌ها».
نمایش تعداد لیست ها برای هر کاربر
ساخت صفحه "جزئیات آژانس".
صفحه جزئیات فهرست:
مقدمه / ایجاد کامپوننت
تنظیم جزء جزئیات فهرست
ساخت نوار لغزنده تصویر
نمایش اطلاعات بیشتر درباره فهرست ملک
نمایش اطلاعات مربوط به فروشنده
نمایش نقاط مورد علاقه روی نقشه (قسمت 1)
نمایش نقاط دیدنی روی نقشه (قسمت 2)
نمایش نقاط دیدنی روی نقشه (قسمت 3)
نمایش نقاط دیدنی روی نقشه (قسمت 4)
حذف یک ویژگی از قسمت ظاهری
به روز رسانی یک ویژگی از قسمت ظاهری
بررسی بازخوردها:
مقدمه / بازخورد صفحه ورود
بازخورد صفحه ثبت نام
بازخورد صفحه «افزودن دارایی».
بازخورد به‌روزرسانی نمایه
بازخورد به‌روزرسانی فهرست
بازخورد حذف فهرست
بازخورد خروج کاربر
بررسی خطاهای فرم:
مقدمه / اشکال در فرم ورود
خطاهای سمت مشتری در فرم ثبت نام (نام کاربری)
خطاهای سمت مشتری در فرم ثبت نام (ایمیل)
خطاهای سمت مشتری در فرم ثبت نام (رمز عبور)
خطاهای سمت مشتری در فرم ثبت نام (تایپ مجدد رمز عبور)
خطاهای سرور در فرم ثبت نام (نام کاربری یا رمز عبور منحصر به فرد)
خطاهای سرور در فرم ثبت نام (تأیید رمز عبور)
خطاهایی در فرم "افزودن ویژگی".
استقرار:
مقدمه
راه اندازی پروژه با Git
فشار دادن پروژه باطنبه GitHub
راه اندازی سرور راه دور با Digital Ocean
ایجاد کاربر جدید در سرور راه دور
راه اندازی فایروال
راه اندازی جنگو در سرور راه دور
ایجاد فایل "تنظیمات" در سرور راه دور
اجرای مهاجرت ها در سرور راه دور
راه اندازی Gunicorn
راه اندازی Nginx
تنظیم نام دامنه برای باطن
افزودن نام دامنه به سرور راه دور
تنظیم یک نام دامنه برای فرانت اند
به‌روزرسانی آدرس‌های اینترنتی در درخواست‌ها (قسمت 1)
تنظیم یک صندوق پستی ایمیل خصوصی و یک گواهی SSL
به‌روزرسانی آدرس‌های اینترنتی در درخواست‌ها (قسمت 2)
فضاهای دیجیتالی اقیانوس / انبارهای جنگو
فشرده کردن تصاویر با بالش
رفع مشکل تازه کردن برنامه اقیانوس دیجیتال با یک کلیک
به روز رسانی فرآیند ثبت نام
پاکسازی کد