آموزش ساخت وب‌سایت املاک مبتنی بر مکان با جنگو و ری‌اکت - آخرین آپدیت

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

مقدمه Introduction

• مرور کلی دوره Course overview

• آنچه خواهیم ساخت What we will build

• ساختار دوره Course outline

مبانی ری اکت The basics of React

• شروع کار با ری اکت Getting started with React

• کامپوننت‌های ری اکت React components

• معرفی JSX Introducing JSX

• اطلاعات بیشتر درباره کامپوننت‌های ری اکت More about React components

• پراپ‌های ری اکت React props

• حلقه زدن روی آرایه‌ای از داده‌ها Looping through an array of data

• وضعیت (هوک useState) State (the useState hook)

• مدیریت رویدادها Handling events

• اطلاعات بیشتر درباره وضعیت More about state

• ناوبری با react-router-dom Navigation with react-router-dom

• کار با لینک‌ها Working with links

• نتیجه‌گیری فصل Section conclusion

مبانی Material UI The basics of Material UI

• مقدمه Introduction

• شروع کار با Material UI Getting started with Material UI

• ویژگی‌های کامپوننت MUI MUI component properties

• کامپوننت Typography The Typography component

• توجه! Heads up!

• استایل دهی با Material UI Styling with Material UI

• چیدمان صفحه با Material UI Page layout with Material UI

• اطلاعات بیشتر درباره گرید کانتینر More about the container grid

• ساخت صفحه اصلی: مقدمه Building the home page: Introduction

• ساخت صفحه اصلی: هدر Building the home page: The Header

• ساخت بقیه صفحه اصلی Building the rest of the home page

• بازسازی کد Re-organizing the code

• نتیجه‌گیری فصل Section conclusion

مبانی React-Leaflet The basics of React-Leaflet

• React-Leaflet چیست؟ What is React-Leaflet?

• نصب React-Leaflet Installing React-Leaflet

• تغییر چیدمان صفحه "لیست‌ها" Changing the layout of the “listings” page

• نشانگر نقشه The map marker

• پاپ‌آپ نشانگر The marker popup

• ذخیره موقعیت نشانگر در وضعیت Storing the position of the marker in state

• نمایش لیست‌ها روی نقشه Displaying the listings on the map

• نمایش لیست‌ها در کارت‌های MUI Displaying the listings in MUI cards

• رسم/وارد کردن اشکال در React-Leaflet Drawing/Importing shapes in React-Leaflet

تنظیم بک‌اند Setting up the backend

• مقدمه / تنظیم محیط مجازی Introduction / Virtual environment setup

• نصب جنگو Installing Django

• تنظیم مدل لیست Setting up the listing model

• افزودن فیلد Location به مدل لیست Adding the Location field to the listing model

• نصب GeoDjango Installing GeoDjango

• خطا هنگام افزودن افزونه POSTGIS Error when adding the POSTGIS extension

• تنظیم پایگاه داده فضایی (PostgreSQL & PostGIS) Setting up a spatial database (PostgreSQL & PostGIS)

• تنظیم مدل کاربر سفارشی Setting up a custom user model

• ایجاد لیست املاک در پنل ادمین Creating property listings in the Admin panel

• ایجاد نقطه پایانی API برای لیست املاک Creating an API endpoint for property listings

اتصال جنگو و ری اکت Connecting Django and React

• مقدمه / تنظیم هدرهای CORS جنگو Introduction / setting up Django Cors Headers

• ارسال درخواست از فرانت‌اند به بک‌اند Making requests from the frontend to the backend

• معرفی هوک useEffect Introducing the useEffect hook

• ارسال درخواست با Axios و هوک useEffect Making requests with Axios and the useEffect hook

• روش صحیح دریافت داده با ری اکت The correct way of fetching data with React

مدیریت فیلدهای تصویر Handling image fields

• افزودن فیلدهای تصویر به مدل لیست Adding image fields to the listing model

• نمایش تصاویر در ری اکت Rendering images in React

احراز هویت کاربر User authentication

• مقدمه / نصب Djoser Introduction / Installing Djoser

• ساخت صفحه ثبت نام Building the Registration page

• ساخت صفحه ورود Building the Login page

• ثبت نام کاربر (بخش اول) User Registration (Part 1)

• ثبت نام کاربر (بخش دوم) User Registration (Part 2)

• روش دیگر مدیریت وضعیت در ری اکت Another way of managing state in React

• استفاده از immer-reducer در فایل Register Using the immer-reducer in the Register file

• ورود به سیستم (بخش اول) Logging in (Part 1)

• ورود به سیستم (بخش دوم) Logging in (Part 2)

• رندر شرطی هدر (بخش اول) Conditional rendering of the header (Part 1)

• رندر شرطی هدر (بخش دوم) Conditional rendering of the header (Part 2)

• خروج از سیستم (بخش اول) Logging out (Part 1)

• خروج از سیستم (بخش دوم) Logging out (Part 2)

افزودن لیست از فرانت‌اند Adding listings from the frontend

• مقدمه / به‌روزرسانی مدل لیست Introduction / Updating the listing model

• ساخت صفحه "افزودن ملک" Building the “Add property page”

• قرار دادن نقشه روی فرم Placing the map on the form

• آپلود تصاویر Uploading images

• نهایی کردن فرم Finalizing the form

• ارسال درخواست برای افزودن لیست ملک (بخش اول) Making the request to add a property listing (Part 1)

• ارسال درخواست برای افزودن لیست ملک (بخش دوم) Making the request to add a property listing (Part 2)

• تغییر صفحه "لیست‌ها" Modifying the “listings” page

مدیریت پروفایل‌های کاربری Handling user profiles

• مقدمه Introduction

• ایجاد مدل پروفایل Creating the Profile Model

• استفاده از سیگنال‌های جنگو برای ایجاد پروفایل برای هر کاربر Using Django signals to create a profile for each user

• اعمال محدودیت‌ها در صفحه "افزودن ملک" Applying restrictions in the “Add property” page

• ساخت صفحه پروفایل (بخش اول) Building the profile page (Part 1)

• ساخت صفحه پروفایل (بخش دوم) Building the profile page (Part 2)

• ساخت صفحه پروفایل (بخش سوم) Building the profile page (Part 3)

• تغییر صفحه "لیست‌ها" Modifying the “listings” page

• ساخت صفحه "آژانس‌ها" Building the “Agencies” page

• نمایش تعداد لیست‌ها برای هر کاربر Displaying the number of listings for each user

• ساخت صفحه "جزئیات آژانس" Building the “Agency Detail” page

صفحه جزئیات لیست Listing detail page

• مقدمه / ایجاد کامپوننت Introduction / Creating the component

• تنظیم کامپوننت جزئیات لیست Setting up the listing detail component

• ساخت اسلایدر تصویر Building the image slider

• نمایش اطلاعات بیشتر درباره لیست ملک Displaying more information about the property listing

• نمایش اطلاعات فروشنده Displaying information about the seller

• نمایش نقاط مورد علاقه روی نقشه (بخش اول) Displaying the points of interest on the map (Part 1)

• نمایش نقاط مورد علاقه روی نقشه (بخش دوم) Displaying the points of interest on the map (Part 2)

• نمایش نقاط مورد علاقه روی نقشه (بخش سوم) Displaying the points of interest on the map (Part 3)

• نمایش نقاط مورد علاقه روی نقشه (بخش چهارم) Displaying the points of interest on the map (Part 4)

• حذف ملک از فرانت‌اند Deleting a property from the frontend

• به‌روزرسانی ملک از فرانت‌اند Updating a property from the frontend

مدیریت بازخوردها Handling feedbacks

• مقدمه / بازخورد صفحه ورود Introduction / Login page feedback

• بازخورد صفحه ثبت نام Signup page feedback

• بازخورد صفحه "افزودن ملک" “Add property” page feedback

• بازخورد به‌روزرسانی پروفایل Profile update feedback

• بازخورد به‌روزرسانی لیست Listing update feedback

• بازخورد حذف لیست Listing delete feedback

• بازخورد خروج کاربر User logout feedback

مدیریت خطاهای فرم Handling form errors

• مقدمه / خطاها در فرم ورود Introduction / Errors in the login form

• خطاهای سمت کلاینت در فرم ثبت نام (نام کاربری) Client-side errors in the registration form (Username)

• خطاهای سمت کلاینت در فرم ثبت نام (ایمیل) Client-side errors in the registration form (Email)

• خطاهای سمت کلاینت در فرم ثبت نام (رمز عبور) Client-side errors in the registration form (Password)

• خطاهای سمت کلاینت در فرم ثبت نام (تکرار رمز عبور) Client-side errors in the registration form (Password retype)

• خطاهای سمت سرور در فرم ثبت نام (نام کاربری یا رمز عبور منحصر به فرد) Server errors in the registration form (unique username or password)

• خطاهای سمت سرور در فرم ثبت نام (اعتبارسنجی رمز عبور) Server errors in the registration form (password validation)

• خطاها در فرم "افزودن ملک" Errors in the “Add property” form

استقرار Deployment

• مقدمه Introduction

• مقداردهی اولیه پروژه با Git Initializing the project with Git

• انتقال پروژه بک‌اند به گیت‌هاب Pushing the backend project to GitHub

• راه‌اندازی سرور راه دور با Digital Ocean Setting up a remote server with Digital Ocean

• ایجاد کاربر جدید در سرور راه دور Creating a new user in the remote server

• تنظیم فایروال Setting up a firewall

• تنظیم جنگو در سرور راه دور Setting up Django in the remote server

• ایجاد فایل "settings" در سرور راه دور Creating a “settings” file in the remote server

• اجرای migrationها در سرور راه دور Running the migrations in the remote server

• تنظیم Gunicorn Setting up Gunicorn

• تنظیم Nginx Setting up Nginx

• تنظیم نام دامنه برای بک‌اند Setting up a domain name for the backend

• افزودن نام دامنه به سرور راه دور Adding the domain name to the remote server

• تنظیم نام دامنه برای فرانت‌اند Setting up a domain name for the frontend

• به‌روزرسانی URLها در درخواست‌ها (بخش اول) Updating the URLs in the requests (Part 1)

• راه‌اندازی صندوق پستی ایمیل خصوصی و گواهی SSL Setting up a Private Email mailbox and an SSL certificate

• به‌روزرسانی URLها در درخواست‌ها (بخش دوم) Updating the URLs in the requests (Part 2)

• فضاهای Digital Ocean / ذخیره‌سازی‌های جنگو Digital Ocean spaces / Django storages

• فشرده‌سازی تصاویر با Pillow Compressing images with Pillow

• رفع مشکل به‌روزرسانی برنامه یک‌کلیکی Digital Ocean Fixing the digital ocean one-click-app refresh problem

• به‌روزرسانی فرآیند ثبت نام Updating the registration process

• پاکسازی کد Code cleanup

نکته تکمیلی BONUS

• معرفی پراپ SX در MUI (قابلیت‌های آن) Introducing MUI's SX prop (what it can do)

• به‌روزرسانی دوره: تغییرات برای دوره (پراپ SX) Course update: changes for the course (the SX prop)

• بسته‌های استفاده شده Used packages

• دریافت چندضلعی‌های سفارشی برای برنامه React-Leaflet شما Getting your own polygons for you React-Leaflet application