این آموزش، فصل دوم از آموزش فروشگاه با ری اکت و جنگو است. در فصل اول آموزش فروشگاه اینترنتی با ری اکت و جنگو (+) به کدنویسی فرانت اند فروشگاهمان با کتابخانه ری اکت پرداختیم. حالا در این فصل سراغ کدنویسی سرور و در واقع بک اند پروژه می‌رویم. ما برای کدنویسی بک اند در این فصل از جنگو پایتون استفاده خواهیم کرد. ساخت فروشگاه اینترنتی با جنگو ایده جذابی است اما ما از Django سنتی استفاده نمی‌کنیم! به کمک فریمورک Django REST یک سیستم API طراحی میکنیم که پروژه جنگوی ما به جای html در جواب فراخوانی url ها جیسون به سمت فرانت اند پرتاب کند. پس این یک فروشگاه اینترنتی با django rest خواهد بود.
در پایان این فصل ارتباط فرانت اند و بک اند به صورت زنده برقرار خواهد بود. برای اطلاع بیشتر لطفا فیلم معرفی دوره در بالای این صفحه را با دقت تماشا کنید.
این آموزش بخشی از بسته جامع ساخت فروشگاه با جنگو و ری اکت (+) است.
شما می‌توانید بسته جامع با با مجموع قیمت کمتر از این لینک (+) تهیه کنید یا این مجموعه را فصل به فصل دریافت و تماشا کنید.
فهرست فصل‌‌به‌فصل آموزش ساخت فروشگاه جنگو/ریکت
-
- ساخت فروشگاه آنلاین با Django و Reacct ـــ فصل ۱: ری اکت
- ساخت فروشگاه آنلاین با Django و Reacct ـــ فصل ۲: جنگو رست
- آموزش فروشگاه جنگو و ری اکت – فصل ۳: مدیریت وضعیت با Redux
- آموزش ساخت فروشگاه فول استک با جنگو و ری اکت – فصل ۴: سبد خرید
- آموزش فروشگاه آنلاین با جنگو پایتون و ری اکت – فصل ۵: اعتبارسنجی
- آموزش ساخت فروشگاه فول استک با جنگو و ری اکت – فصل ۶: احراز هویت
- آموزش ساخت فروشگاه فول استک با جنگو و ری اکت – فصل ۷: ثبت سفارش
- آموش ساخت فروشگاه فول استک با جنگو و ری اکت ــ فصل ۸: درگاه پرداخت
- آموزش ساخت فروشگاه فول استک با جنگو و ری اکت ــ فصل ۹: انتشار آنلاین
نگاهی به فصل دوم آموزش فروشگاه با جنگو و ری اکت
ما دوره را با تعریف اپ Full Stack (+) و چرخه ارتباط Backend و Frontend شروع کردیم. آنگاه سراغ کدنویسی رفتیم. یک پروژه جنگو از صفر ساختیم. دیدیم که با جنگو به تنهایی می‌توان یک سیستم Web API ساخت اما باید بسیاری موارد را مدیریت کنیم. اینجا بود که سراغ Django REST Framework (+) رفتیم.
جنگو رست فریمورک در واقع یک اپلیکیشن است که روی جنگو نصب می‌شود. به کمک آن می‌توان سیستم API طراحی کرد و البته بسیاری موارد را خود این اپ برای ما مدیریت می‌کند. ما نیز پس از نصب این اپ در پروژه خود به ساخت دو نمونه Endpoint و پرتاب پاسخ JSON پرداختیم.
سپس به سمت ری اکت (فرانت اند) رفتیم. باید url های ساخته شده را از این سمت صدا می‌کردیم. برای ارسال درخواست از Axios استفاده کردیم. اکسیوس در ری اکت برای ارسال درخواست و مدیریت پاسخ وب به صورت Async استفاده می‌شود. ضمنا در جریان کار با اکسیوس در مورد مفهوم Hook در React و هوک های State و Effect نیز گفتیم. دیدیم که چگونه می‌توان وضعیت کامپوننت‌های ریکت را با داده‌های دریافتی از سرور به کمک این هوک‌ها به‌روز کرد. مثلا داده‌های محصولات دریافتی را در کامپوننت HomeScreen و در کاشی‌های مربوطه درج کردیم.
هنگام اجرای کدها به خطای CORS برخوردیم. مرورگر اجازه ارتباط جنگو و ری اکت را از دو دامنه مختلف نمی‌داد. این خطا را برای شما کامل شرح دادیم و شیوه برطرف کردن خطای کورس در جنگو را تجربه کردیم.
پس از اتصال فرانت اند و بک اند سراغ دیتابیس بک اند رفتیم. البته قبل از آن دیدیم که چقدر طراحی دیاگرام دیتابیس و ارتباط جدول‌ها در همان آغاز پروژه مهم است. یک ابزار رایگان برای طراحی دیاگرام دیتابیس را به شما معرفی کردیم.
دیتابیس را در جنگو ایجاد کردیم. امکان آپلود عکس در جنگو را آموختیم. از طریق پنل مدیریت داده‌های نمونه وارد پایگاه داده کردیم. یاد گرفتیم که کار Serializer در Django REST چیست. سرانجام به کمک سریالایزر کوئری دیتابیس را به جیسون تبدیل کردیم. در پایان این فصل موفق شدیم که داده‌های واقعی دیتابیس جنگو را به سمت ری اکت پرتاب کنیم و در فرانت اند نمایش دهیم.
برای آگاهی از ریز سرفصل‌ها لطفا به انتهای توضیحات مراجعه کنید.
چرا آموزش فروشگاه اینترنتی با جنگو و ری اکت ؟
- در پایان راه یک فروشگاه کامل خواهید داشت.
- این پروژه را می‌توانید به صورت محصول برای ورود به بازار کار استفاده کنید.
- تمام سورس کدهای پروژه در گیت هاب مدرس در فصل اول لینک شده‌اند.
- این پروژه پل شما برای تبدیل شدن به برنامه نویس فول استک (+) است.
پیشنیاز:
اگر با توسعه وب آشنا هستید اما با جنگو و ری اکت آشنا نیستید موارد زیر پیشنهاد می‌شود:
- آموزش مقدماتی جنگو (+)
- آموزش مقدماتی ری اکت (+)
- آموزش Django REST (+)
همچنین اگر قصد شروع از صفر دارید به ترتیب موارد زیر پیشنهاد می‌شود:
کلیدواژگان
آموزش فروشگاه اینترنتی با جنگو و ری اکت – طراحی فروشگاه با django و react – ساخت فروشگاه با react – فروشگاه آنلاین با ری اکت و جنگو – کدنویسی بک اند – آموزش django rest framework – کار با اکسیوس – فروشگاه با django rest – آموزش هوک – معنی hook state – معنی hook effect – کار با عکس در جنگو – آپلود عکس – مفهوم meida root و media url – کار با دیتابیس در جنگو – مفهوم سریالایزر در جنگو رست – دیاگرام دیتابیس و اهمیت آن
hosseinzadeh.reza2 (خریدار محصول) –
سلام مرسی از تدریس خوب تون. یه مشکلی برام پیش امده.من طبق آموزش شما این فصل جلو رفتم و پروژ هم عالی بود.ولی یه پروژه دیگه که زدم دقیقا شبیح همین پروژه . عکس از سمت سرور لود نمیشه .اطلاعات دیگه لود میشه فقط عکس نمیشه.فقط دیتابیس من postgres هست .اگه می تونین راهنمایی کنین ممنون
مصطفی آصفی –
سلام و سپاس از بازخوردتون. توصیه می کنم همراه خطایی که لاگ می گیرید پای فصل هایی که مهندس حسن زاده تدریس رو ادامه دادن مشکل رو گزارش کنید.
حسن اميري مقدم (خریدار محصول) –
سلام استاد
من در ساخت python manage.py craetesuperuser با خطا زير مواجه مي شوم
Traceback (most recent call last):
File “E:\Learn\Python\react-django-eshop\backend\manage.py”, line 22, in
main()
File “E:\Learn\Python\react-django-eshop\backend\manage.py”, line 18, in main
execute_from_command_line(sys.argv)
File “E:\Learn\Python\react-django-eshop\shopenv\lib\site-packages\django\core\management\__init__.py”, line 446, in execute_from_command_line
utility.execute()
File “E:\Learn\Python\react-django-eshop\shopenv\lib\site-packages\django\core\management\__init__.py”, line 420, in execute
django.setup()
File “E:\Learn\Python\react-django-eshop\shopenv\lib\site-packages\django\__init__.py”, line 24, in setup
apps.populate(settings.INSTALLED_APPS)
File “E:\Learn\Python\react-django-eshop\shopenv\lib\site-packages\django\apps\registry.py”, line 116, in populate
app_config.import_models()
File “E:\Learn\Python\react-django-eshop\shopenv\lib\site-packages\django\apps\config.py”, line 304, in import_models
self.models_module = import_module(models_module_name)
File “C:\Program Files\Python310\lib\importlib\__init__.py”, line 126, in import_module
return _bootstrap._gcd_import(name[level:], package, level)
File “”, line 1050, in _gcd_import
File “”, line 1027, in _find_and_load
File “”, line 1006, in _find_and_load_unlocked
File “”, line 688, in _load_unlocked
File “”, line 883, in exec_module
File “”, line 241, in _call_with_frames_removed
File “E:\Learn\Python\react-django-eshop\backend\base\models.py”, line 8, in
class Product(models.Model):
File “E:\Learn\Python\react-django-eshop\backend\base\models.py”, line 11, in Product
name = models.CharField(max_length=200 , NULL=True)
File “E:\Learn\Python\react-django-eshop\shopenv\lib\site-packages\django\db\models\fields\__init__.py”, line 1097, in __init__
super().__init__(*args, **kwargs)
TypeError: Field.__init__() got an unexpected keyword argument ‘NULL’
مصطفی آصفی –
سلام به شما. خطا رو اگه دقت کنید داره میگه (اون آخرا) تو خط ۱۱ موقع تعریف مدل Product ایراد دارین. اون Null رو نباید با حرف بزرگ می نوشتین. احتمالا مشکل همونه. سعی کنید لاگ خطا رو با دقت بخونید.
ابوالفضل حسن زاده (خریدار محصول) –
سلام به شما اقا مسعود عزیز . میتونید شماره نسخه کتابخانه هایی که استفاده میکنیم رو در این لینک در گیت هاب بنده ببینید .
gitHubRepositoryLink
مصطفی آصفی –
سلام آقای حسن زاده عزیز. من این نظرتون رو هم الان دیدم. دست شما درد نکنه.
مسعود –
سلام. ورژن جنگو که آموزش میدید 3 هست یا 4؟
مصطفی آصفی –
سلام به شما. نسخه ۳ استفاده شده.
iman (خریدار محصول) –
سلام و عرض ادب
میشه لطفا طریقه آپلود video هم بفرمایید
مصطفی آصفی –
سلام به شما. ایده خوبیه ممنونم. یادداشت کردم که جداگانه در مورد آپلود در جنگو و شاید جدا کردن هاست آپلود تو یه دوره صحبت کنیم.
ابوالفضل حسن‌زاده (خریدار محصول) –
سلام استاد واقعا خسته نباشید و خدا قوت.خیلی فصل هیجان انگیز و باحالی بود. اتفاقا بعد از این فصل ما قدر جنگو رست فریم ورک رو بیشتر می‌دونیم.
از ابزاری هم که برای تحلیل و ترسیم دیاگرام معرفی کردید خیلی سپاس گذارم واقعا عالی بود
https://drawsql.app/
فقط استاد ما چطور میتونیم قدرت تحلیل در این زمینه رو افزایش بدیم؟
مصطفی آصفی –
سلام به شما آقای حسن زاده عزیز. ممنون از لطف شما. این مقاله شیوه طراحی دیتابیس (+) رو توصیه می کنم بخونید.
تحلیل پایگاه داده یه بخشی با تجربه قوی میشه. اما به عنوان مرجع هستن آموزش های طراحی پایگاه داده که می تونید جستجو کنید.
رضا (خریدار محصول) –
درود بر شما آقای آصفی
فصل 2 به پایان رسوندم و باز هم مثل همیشه عالی و امیدوارم این آموزش فوق العاده ادامه داشته باشه تا تکمیل بشه.
یک نکته ای هم برای دوستان ذکر کنم که تا الان که این پست رو مینویسم به هیچ وجه پکیج react-router-dom رو از نسخه ی 5.3 به 6 ارتقا ندن
چون با ورژن 0.25.0 recat-router-bootstrap سازگاری نداره و سایت به کلی با مشکل مواجه میشه.
راستی دو پیشنهاد هم برای سایت همرویش داشتم
اول اینکه فکر میکنم بهتره برای هر حوزه ای یک صفحه ی جداگانه در نظر بگیرید و محصولات مرتبط رو از صفر تا جایی که انتشار پیدا کرده به صورت مسیر آموزش معرفی کنید.تا کاربر به سادگی با پیشنیاز ها آشنا بشه و دید خیلی بهتری بگیره.
دوم اینه ای کاش در قسمت نظرات امکان آپلود عکس فراهم بشه.میتونه خیلی مفید باشه.
راستی پیغام خطای https در هنگام ورود به اکانت کاربری هنوز حل نشده.
مصطفی آصفی –
سلام به شما. ممنون از لطف شما و توصیه خوبی که برای دوستانتون گذاشتین. امیدوارم عمری باشه و کار رو کامل کنم.
پیشنهادهایی که برای وبسایت گذاشتین پیشنهادهای خوبی هستن و حتما در جلسات توسعه مطرح می کنم. همرویش رو با معرفی به دوستانتون حمایت کنید تا توسعه سریع‌تری ممکن بشه. در مورد خطای https مشکل ظاهرا از SSL کرایه شده هست. احتمالا تحریم شده و باید SSL معتبرتری خریداری بشه که به واحد توسعه منتقل کردم.
حسین –
فقط این که خیلی خوبید آقای اصفی ..اونقدر که حتی محتوایی از شما رو که در زمره علایقمم نباشه من پیگیرم …ب شدت منتظرم این دوره کمی بیشتر جلو بره و یک تایم مناسبی رو براش در نظر بگیرم ….
مصطفی آصفی –
سلام و سپاس از پیام انرژی بخش شما. امیدوارم که در زندگی حرفه‌ای شما تاثیر مثبتی داشته باشن.
نقی –
با سلام فصل سوم آخرین فصل است؟ و اینکه لطفا زودتر به اتمام برسانید تشکر
مصطفی آصفی –
سلام به شما. البته شما از فراگیران این دوره نیستید جناب فریمانی عزیز. همون طور که پایان این فصل توضیح دادم هنوز چندین فصل پیش رو داریم. بنا داریم تا یک پروژه واقعی برای ورود دوستان به بازار کار بشه و طبیعتا آموزش کامل یک پروژه فروشگاهی با همه جوانبش کار می بره. بحث ثبت نام با ایمیل و شماره همراه، اتصال به درگاه پرداخت بانکی، مدیریت وضعیت اپ با Reducer و مدیریت سبد و موارد زیاد دیگه ای هنوز باید گفته بشن.
امیرحسین صفری (خریدار محصول) –
فصل سوم کی منتشر میشه؟
مصطفی آصفی –
سلام به شما. انشالله سعی می کنم ظرف ۱۰ تا ۱۴ روز آینده باشه.
پی‌نوشت: متاسفم که به دلیل مشغله های مختلف با سرعت بیشتری به تولید نمی رسم.