به فصل چهارم پروژه ساخت فروشگاه فول استک با جنگو و ری اکت رسیدیم. ساخت یک فروشگاه اینترنتی که بک اند آن با جنگو (پایتون) و فرانت اند آن با ری اکت (جاوا اسکریپت) کار میکند. ما در این فصل قرار است که برای فروشگاهمان صفحه سبد خرید طراحی کنیم. به کمک ریداکس که در فصل گذشته (+) آموختیم، سفارشهای خریدار به سبد خرید اضافه میکنیم و در صفحه سبد هم نمایش میدهیم. برای مشاهده خروجی این فصل حتما فیلم معرفی دوره را در بالای این صفحه ببینید.
این آموزش بخشی از بسته جامع ساخت فروشگاه با جنگو و ری اکت (+) است.
شما میتوانید بسته جامع با با مجموع قیمت کمتر از این لینک (+) تهیه کنید یا این مجموعه را فصل به فصل دریافت و تماشا کنید.
فهرست فصلبهفصل آموزش ساخت فروشگاه جنگو/ریکت
-
- ساخت فروشگاه آنلاین با Django و Reacct ـــ فصل ۱: ری اکت
- ساخت فروشگاه آنلاین با Django و Reacct ـــ فصل ۲: جنگو رست
- آموزش فروشگاه جنگو و ری اکت – فصل ۳: مدیریت وضعیت با Redux
- آموزش ساخت فروشگاه فول استک با جنگو و ری اکت – فصل ۴: سبد خرید
- آموزش فروشگاه آنلاین با جنگو پایتون و ری اکت – فصل ۵: اعتبارسنجی
- آموزش ساخت فروشگاه فول استک با جنگو و ری اکت – فصل ۶: احراز هویت
- آموزش ساخت فروشگاه فول استک با جنگو و ری اکت – فصل ۷: ثبت سفارش
- آموش ساخت فروشگاه فول استک با جنگو و ری اکت ــ فصل ۸: درگاه پرداخت
- آموزش ساخت فروشگاه فول استک با جنگو و ری اکت ــ فصل ۹: انتشار آنلاین
اهمیت این فصل
این فصل برای شما دو دستاورد دارد. اول این که گام دیگری برای تکمیل پروژه فروشگاه برمیدارید. فروشگاه اینترنتی که با جنگو و ری اکت ساختهایم در این فصل به یک صفحه سبد خرید مجهز میشود. دومین دستاورد این فصل برای شما این است که کار با Redux و React-Bootstrap را در قالب پیشبرد پروژه یادآوری و دوباره تمرین میکنید.
این فصل در یک نگاه
اگر به یاد داشته باشید در فصل اول از آموزش ساخت فروشگاه با ری اکت و جنگو (+) ما یک صفحه سبد خرید ایجاد و مسیردهی کردیم. اما این صفحه تا این فصل خالی و بدون طراحی رها شده بود.
در آغاز این فصل سراغ دکمه «افزودن به سبد» در صفحه هر محصول میرویم. رویداد کلیک این دکمه را طوری کدنویسی میکنیم که شناسه و تعداد محصول درخواستی کاربر را بگیرد و کاربر را همراه این دو پارامتر به صفحه سبد خرید هدایت کند.
سپس سراغ ریداکس میرویم. باید کاری کنیم که وضعیت سبد کاربر در ریداکس ذخیره شود تا همیشه بهروز بماند. مطابق آنچه در آموزش ریداکس (+) آموختیم ابتدا تابع Reducer را مینویسیم. سپس Action لازم برای فعالسازی ریدوسر را کدنویسی میکنیم. در حین نوشتن این اکشن یک یادآوری به مفهوم ریداکس تانک خواهیم داشت. به کمک Redux Thunk میتوانید اکشنهای منعطفی ایجاد کنید.
پس از تنظیم ریداکس برای ذخیره وضعیت سبد کاربر یک نکته مهم وجود دارد. باید کاری کنیم که اگر کاربر فروشگاه را ترک کرد و مرورگر را بست، محتوای سبد خود را از دست ندهد. به این منظور با ذخیره دادهها در Local Storage یا دیتابیس محلی مرورگر در ری اکت آشنا شدیم.
سرانجام آنچه در ریداکس و دیتابیس مرورگر ذخیره کرده بودیم را به صورت گرافیکی در صفحه سبد نشان دادیم. سبد خرید شامل نمایش ریزسفارشها (عنوان، قیمت، عکس، تعداد) و همچنین مجموع تعداد و هزینه سفارش میشد. همچنین یک گزینه برای حذف هر سفارش از سبد در نظر گرفتیم.
در پایان این فصل فروشگاه آنلاین با جنگو ما یک صفحه سبد خرید به خود میبیند. صفحهای که کاربر در آن فهرست محصولات مورد نیازش و هزینه خرید خود را میبیند. صفحهای که کاربر میتواند محتوای سبدش را از نظر تعداد هر محصول بهروز و یا هر محصول را از سبد حذف کند.
آموزههای اصلی
- درک تابع thunk در ریداکس
- مفهوم location و history در react-router
- عملگر … و عملگر === در JavaScript
- تابع split و filter و find در js
- نقش getState در ریداکس
- فرق useSelector و getState
- فرق دراپ و سلکت در بوت استرپ
پیشنیاز
- آموزش مقدماتی ری اکت (+)
- فصلهای اول (+) و دوم (+) و سوم (+) آموزش فروشگاه با جنگو و ری اکت
کلیدواژگان
فروشگاه آنلاین با جنگو | فروشگاه اینترنتی با جنگو | فول استک جنگو | ساخت فروشگاه اینترنتی با Django | فروشگاه با جنگو | ساخت فروشگاه با react | فروشگاه با ری اکت | ساخت فروشگاه با ریکت | جنگو و ری اکت
ehsan eslami –
من فصل 1 و 2 رو خوندم واقعا عالی بود بهتر از این نمیشد
مصطفی آصفی –
سلام و سپاس که برای ارسال بازخوردتون وقت گذاشتین. خوشحالم که کار مفید بوده. فصل های بعدی با حضور مهندس حسن زاده جذاب تر هم میشن.
eli –
سلام استاد مرسی از آموزشای خفنتووووون،
استاد میشه نحوه اتصال به درگاه پرداخت رو هم آموزش بدین لطفاااااا
مصطفی آصفی –
سلام و ممنون از لطف شما. این موضوع در فصل ۸ با یک درگاه ایرانی پیاده سازی میشه. ضبط فصل ۸ شروع شده این چند هفته آینده منتشر میشه.
رضا (خریدار محصول) –
درود بر شما آقای آصفی
امیدوارم حالتون خوب باشه
مثل همیشه این فصل هم تا اینجا که من دیدم(قسمت 3) فوق العاده بود،نکات خیلی عالی در قسمت 2 آموختم و واقعا قسمت پرباری بود از جاوا اسکریپت تا کار خلاقانه با فرانت . البته گاهی دیدم به خاطر طولانی شدن ویدیو عذرخواهی کردید اما من هم با شما هم نظر هستم که گاهی اوقات نیاز هست چرا که حفظ انسجام در مطالب اهمیت ویژه ای داره
چه در همین قسمت اول آموزش و چه در توضیح حدودا 40 دقیقه ای ریداکس در فصل قبل.
و اما نکته ای هم برای دوستانی که از ورژن 6 کتابخونه ی react-router-dom استفاده میکنن بگم:
هوک useHistory توی این کتابخونه جایگزین شده با هوک useNavigate
https://stackoverflow.com/questions/62861269/attempted-import-error-usehistory-is-not-exported-from-react-router-dom
در پایان سال جدید رو سالی سرشار از سلامتی و امنیت و موفقیت برای شما آرزومند هستم.
مصطفی آصفی –
سلام به شما آقا رضای عزیز. ممنونم از محبتتون و همین طور جای قدردانی داره که تجربه خودتون رو با بنده و دوستان دیگه به اشتراک گذاشتین.
پینوشت: به دوستان مبتدی توصیه می کنم تا حد ممکن همون نسخه هایی از کتابخانه ها (به خصوص سمت فرانت اند) رو استفاده کنید که در مخزن گیت هاب مشخص هست. بعدتر می تونن پروژه رو مهاجرت بدن.
امین اجاقی (خریدار محصول) –
درو خدا بر استاد بزرگ و مهربان مصطفی آصفی عزیز و دوست داشتنی روز پدر و روز ولادت حضرت علی (ع) نور بهشتیمان بر شما عزیزان مبارک باد استاد عزیز من بسیار لذت می برم که شما عزیزان خدا، اینچنین با صلح و دوستی و معرفت استادی و علم آموزی که از خدا یافته اید و من این آگاهی را از درونتان دریافت می نمایم که عشق به روشنایی و آگاه ساختن جامعه خویش دارید در کار هستید و علوم برنامه نویسی را به این شکل زیبا گسترش می دهید که از خدا به فراوانی برکات از آسمان برایتان می خواهم تا این راه را به کمال بروید به همین صورت دوستان وآشنایان بیابید و کلیه علوم را پرورش دهید تا در دنیای پیرامونمان آگاه از تمامی علوم موجود در حیات خدا زیست نماییم و در مسیر زندگیمان در راستای عشق و محبت خدا دنیایمان را زیبا سازیم. ایمان و امید محبت بی کران نور راه زیبایتان باشد. برکت خدا بر شما عزیزان و عشق زندگیتان و خانواده های محترمتان و دوستان و آشنایانتان.
مصطفی آصفی –
سلام به شما جناب اجاقی عزیز. امیدوارم هر روز براتون جشن و شادی باشه. ممنونم از محبتتون. بنده هم برای شما آرزوی تندرستی و شادکامی در کنار خانواده محترم دارم.
امین اجاقی (خریدار محصول) –
با عرض سلام خدمت استاد عزیز و گرامی مصطفی آصفی عزیز و دوست داشتنی استاد مهربان فصل سه را هم به خوبی و خوشی به پایان رساندم و من چون تمام این دوره ها که در این آموزش استفاده می شود را از پیش یاد گرفته ام اکنون شما با بیان بسیار شیوایتان آموزش می دهید بسیار ساده از چگونگی ساخت این فروشگاه آگاه می گردم و فقط در حال لذت بردن از پروژه هستم برکت خدای متعال از آسمان نی کویی هایشان بر شما استاد عزیز و دوست داشتنی و عشق زندگیتان و خانواده محترم و دوستان و آشنایانتان.
مصطفی آصفی –
سلام به شما جناب اجاقی عزیز. خیلی ممنونم از انرژی مثبتتون. امیدوارم که ثمرات خوبی براتون داشته باشه. بنده هم برای شما و خانواده محترم آرزوی سلامتی و شادمانی دارم.
mehdishalahi70@gmail.com –
سلام مهندس آصفی وقت بخیر
ببخشید من یه درخواست داشتم چند روز پیشم ایمیل مستقیم زدم به شما ولی چون جواب ندادین نمیدونم ایمیل به دستتون رسید یا نه بخاطر همین درخواستمو یبار دیگه اینجا میگم
من دنبال یه امکانی م که این دوره اونو نداره بخاطر همین هنوز خرید نزدم
اگه قرار باشه که بجای محصول فیزیکی، وبسایت مثلا فروش دوره های آموزشی بزنیم
اگه امکانش هست لطفا ی فصل به این دوره جنگو ری اکت اضاف کنین و آموزش بدین چجور میشه دوره های آموزشی رو برای فروش گذاشت طوری که ویدیوهای هر دوره در حالت دیفالت قفل باشن ولی بعد از خرید اون دوره توسط یوزر،ویدیوهای دوره از حالت قفل خارج و آماده دانلود شن.
خیلی تو فضای وب فارسی گشتم ولی همچین آموزشی ندیدم و بشدتم بش نیاز دارم ممنون میشم لطف کنید این کارو انجام بدین.مرسی
مصطفی آصفی –
سلام به شما. ببینید با کمی ابتکار در ادامه همین دوره می تونید این کار رو بکنید. ما تو این دوره (البته فعلا آقای حسن زاده دوره رو با مشورت بنده ادامه میدن و فصل ۵ (+) هم منتشر شد)، یک جایی می رسیم به درگاه پرداخت که کاربر میره به درگاه و وقتی پرداخت می کنه حالا باید تو جدول Order ویژگی isPay معادل true بشه. در این صورت مدیر سیستم بسته رو آماده ارسال می کنه. حالا تو سیستم فروشگاه فایل مجازی کافیه شما تو بازگشت برای مثال تو صفحه سفارش ها اگه isPay معادل true شد دکمه دانلود (یا پخش) رو برای کاربر نمایش بدین. و حتی تو صفحه خود دوره هم زمانی که کاربر وارد میشه (ینی قراره شما صفحه اون محصول رو نمایش بدین) عملا یه ریکوئست میاد به سرور که آقا فلان کاربر می خواد این صفحه رو ببینه. شما نگاه می کنید که آیا این کاربر تو جدول سفارش هاش تا به حال برای این محصول سفارش پرداخت شده ای داشته یا نه. اگه داشته پس به جای نمایش دکمه سبد خرید دکمه پخش رو نمایش بدین. با دوره پیش بیاین و سعی کنید کنار اون پوشه پروژه ما یه پوشه هم برای ماجراجویی خودتون درست کنید. تا خودتون دست به کار نزنید کدنویس نمیشین.
مهدی آریازاده –
سلام آقای آصفی آیا برای ساختن سایت با جنگو و پایتون سیستم سخت افزار قوی لازم است رم اجرایی کامپیوتر من ۴ گیگابایت DDR 3 و CPU دو هسته با فرکانس ۲/۷ است این سخت افزار برای ساختن سایت با جنگو کافیه یا یا باید ارتقاء داده بشه
مصطفی آصفی –
سلام به شما. جنگو به خودی خود خیلی سنگین نیست و باید بتونید شروع کنید. جنگو صرفا یه کتابخونه از کده که سیستم شما اجرا می کنه. نرم افزار پیچیده ای نیست. به نظرم بهترین کار اینه که دست به کار بشید. نصب و شروع کار با جنگو خیلی سخت نیست. با همین مجموعه آموزش یا این آموزش جنگو از صفر (+) شروع کنید.