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

آنچه یاد خواهید گرفت:

• اتصال ری‌اکت و جنگو
• ساخت API با جنگو Rest Framework
• نقشه‌های تعاملی با React-Leaflet
• ایجاد کوئری‌های فضایی با Geodjango و PostGIS
• استقرار یک اپلیکیشن فول‌استک با Digital Ocean و Namecheap
• مبانی ری‌اکت
• مبانی Material UI
• مبانی React-Leaflet
• احراز هویت بک‌اند با Djoser
• نصب Nginx و Gunicorn
• راه‌اندازی گواهی SSL
• ذخیره‌سازی فایل‌های رسانه با Digital Ocean Spaces
• Django storages و Boto 3

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

• باید با مبانی توسعه وب آشنا باشید: اچ تی ام ال، سی اس اس و جاوا اسکریپت
• همچنین باید پایتون را بلد باشید.
• آشنایی اولیه با جنگو هم مفید خواهد بود.
• تفکر منطقی

توضیحات دوره

در این دوره پروژه‌محور، یک وب‌سایت املاک مبتنی بر لوکیشن می‌سازیم. این پروژه یک اپلیکیشن وب فول‌استک خواهد بود که در آن جنگو بک‌اند را و ری‌اکت فرانت‌اند را قدرت می‌دهد.

فرانت‌اند را خیلی سریع با Material UI، کتابخانه‌ای بسیار ساده و شهودی در ری‌اکت برای ساخت کامپوننت‌های رابط کاربری، می‌سازیم. در طول دوره از تعداد زیادی کامپوننت Material UI استفاده می‌کنیم که به‌راحتی آن‌ها را استایل‌دهی خواهیم کرد.

سپس، API را با Django Rest Framework (DRF) می‌سازیم و با ری‌اکت به API درخواست‌ها را ارسال می‌کنیم.

Leaflet یک کتابخانه جاوا اسکریپت برای ساخت نقشه‌های تعاملی است. با قرار دادن آگهی‌های ملک روی نقشه، یک جنبه جغرافیایی به این پروژه اضافه می‌کنیم. این کار را با React-Leaflet انجام می‌دهیم که یک اتصال بین ری‌اکت و Leaflet فراهم می‌کند.

همچنین، پایگاه داده PostgreSQL را با افزودن افزونه PostGIS به آن از نظر فضایی هوشمند می‌کنیم. بنابراین، علاوه بر ایجاد کوئری‌های معمولی در پایگاه داده، کوئری‌های فضایی (اطلاعات هندسی مانند فاصله) هم ایجاد می‌کنیم.

همچنین احراز هویت کاربران را با کتابخانه Djoser پوشش می‌دهیم. به کاربران نهایی اجازه می‌دهیم از طریق فرانت‌اند آگهی‌های ملک را اضافه، حذف یا بروزرسانی کنند. همچنین خطاهای سمت کلاینت و سمت سرور را در فرم‌ها مدیریت خواهیم کرد.

پس از تکمیل وب‌سایت در ماشین محلی، آن را با Digital Ocean و Namecheap مستقر می‌کنیم. در زمان استقرار، کارهای زیر را انجام می‌دهیم:

• پروژه را در گیت‌هاب قرار می‌دهیم.
• برای بک‌اند و فرانت‌اند نام دامنه تهیه می‌کنیم.
• یک صندوق ایمیل در «private email» راه‌اندازی می‌کنیم.
• یک گواهی SSL را راه‌اندازی می‌کنیم.
• Nginx و Gunicorn را نصب و راه‌اندازی می‌کنیم.
• فایل‌های رسانه را در فضای ابری با Digital Ocean Spaces ذخیره می‌کنیم.

ما از موارد زیر استفاده خواهیم کرد:

• ویندوز
• پایتون 3.9
• جنگو 4.0
• ری‌اکت 17 (برای ری‌اکت 18 بروزرسانی شده و کاملاً بدون مشکل کار می‌کند؛ برای جزئیات بیشتر، درس‌های بخش جایزه را ببینید)
• Material UI 5

موضوعات تحت پوشش عبارتند از:

• مبانی ری‌اکت
• هوک‌های ری‌اکت (useState ،useEffect ،useContext ،useReducer ،useRef و useMemo)
• مبانی Material UI
• استایل‌دهی با Material UI
• مبانی React-Leaflet
• هوک‌های React-Leaflet (مثال: useMap)
• ساخت اندپوینت‌های API با Django Rest Framework
• احراز هویت با Djoser
• سیگنال‌های جنگو
• ایجاد کوئری‌های فضایی با Geodjango و PostGIS
• محاسبه فاصله‌ها
• استقرار جنگو
• استقرار ری‌اکت
• ایجاد یک سرور راه دور

پس از تکمیل این دوره عمیق و پروژه‌محور، خواهید دانست چگونه جنگو و ری‌اکت را به هم متصل کنید. همچنین یاد می‌گیرید چگونه از یک پایگاه داده آگاه به لوکیشن یا جغرافیایی به‌طور کامل بهره ببرید.

این دوره برای چه کسانی مناسب است؟

• توسعه‌دهندگانی که می‌خواهند مهارت‌های خود را به سطح بالاتری برسانند.
• دانشجویانی که می‌خواهند پروژه‌های واقعی بسازند.
• توسعه‌دهندگانی که می‌خواهند با نقشه‌ها کار کنند.
• علاقه‌مندان به نقشه